2.9.5 release

.travis.yml

@@ -1,8 +1,7 @@
-dist: focal
+dist: jammy
 language: node_js
 node_js:
     - lts/*
-    - "21"
 sudo: false
 before_install:
     - curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo gpg -o /usr/share/keyrings/mongodb-server-4.4.gpg --dearmor

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 The following is a curated list of changes in the Enact sandstone module, newest changes on the top.
 
+## [2.9.5] - 2024-11-19
+
+### Added
+
+- `sandstone/Icon` supported icon list, adding new icons `ai`, `alert01`, and `alert02`
+
+### Fixed
+
+- `sandstone/ContextualPopupDecorator` to update popup position properly when the screen orientation change
+- `sandstone/Input` keypad layout when `type` prop is `number` or `passwordnumber` and the screen is in portrait mode or `popupType` prop is `overlay` and in large text mode
+
 ## [2.9.4] - 2024-10-29
 
 ### Fixed

ContextualPopupDecorator/ContextualPopupDecorator.js

@@ -1,3 +1,5 @@
+/* global ResizeObserver */
+
 /**
  * A higher-order component to add a Sandstone styled popup to a component.
  *
@@ -272,6 +274,7 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 				activator: null
 			};
 
+			this.resizeObserver = null;
 			this.overflow = {};
 			this.adjustedDirection = this.props.direction;
 			this.id = this.generateId();
@@ -292,6 +295,12 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 				on('keydown', this.handleKeyDown);
 				on('keyup', this.handleKeyUp);
 			}
+
+			if (typeof ResizeObserver === 'function') {
+				this.resizeObserver = new ResizeObserver(() => {
+					this.positionContextualPopup();
+				});
+			}
 		}
 
 		getSnapshotBeforeUpdate (prevProps, prevState) {
@@ -341,6 +350,11 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 				off('keyup', this.handleKeyUp);
 			}
 			Spotlight.remove(this.state.containerId);
+
+			if (this.resizeObserver) {
+				this.resizeObserver.disconnect();
+				this.resizeObserver = null;
+			}
 		}
 
 		generateId = () => {
@@ -593,6 +607,18 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 
 		getContainerNode = (node) => {
 			this.containerNode = node;
+
+			if (this.resizeObserver) {
+				if (node) {
+					// It is not easy to trigger changed position of activator,
+					// so we chose to observe the `div` element's size that has the real size below the root of floatLayer.
+					// This implementation is dependent on the current structure of FloatingLayer,
+					// so if the structure have changed, below code needs to be changed accordingly.
+					this.resizeObserver.observe(node?.parentElement?.parentElement);
+				} else {
+					this.resizeObserver.disconnect();
+				}
+			}
 		};
 
 		handle = handle.bind(this);

ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js

@@ -505,4 +505,40 @@ describe('ContextualPopupDecorator Specs', () => {
 		expect(scrimDivFirst).toHaveClass(expectedFirst);
 		expect(scrimDivSecond).toHaveClass(expectedSecond);
 	});
+
+	test('should create and observe with `ResizeObserver` when the popup opened and disconnect when the popup closed', () => {
+		const originalObserver = global.ResizeObserver;
+
+		const MockObserverInstance = {
+			observe: jest.fn(),
+			disconnect: jest.fn()
+		};
+		global.ResizeObserver = jest.fn().mockImplementation(() => MockObserverInstance);
+
+		const Root = FloatingLayerDecorator('div');
+		const {rerender} = render(
+			<Root>
+				<ContextualButton data-testid="contextualButton" open popupComponent={() => <div><Button>Button</Button></div>}>
+					Hello
+				</ContextualButton>
+			</Root>
+		);
+
+		const contextualButton = screen.getByTestId('contextualButton');
+
+		expect(contextualButton).toBeInTheDocument();
+		expect(MockObserverInstance.observe).toHaveBeenCalled();
+
+		rerender(
+			<Root>
+				<ContextualButton data-testid="contextualButton" popupComponent={() => <div><Button>Button</Button></div>}>
+					Hello
+				</ContextualButton>
+			</Root>
+		);
+
+		expect(MockObserverInstance.disconnect).toHaveBeenCalled();
+
+		global.ResizeObserver = originalObserver;
+	});
 });

Icon/Icon.js

@@ -392,6 +392,9 @@ const IconBase = kind({
  * jumpforward10
  * logout
  * sketch
+ * ai
+ * alert01
+ * alert02
  * ```
  *
  * @name iconList

Icon/IconList.js

@@ -251,5 +251,8 @@ export default {
 	jumpbackward10    : 0x0F01B7, // jumpbackward_10
 	jumpforward10     : 0x0F01B8, // jumpforward_10
 	logout            : 0x0F01B9, // logout
-	sketch            : 0x0F01BA // sketch
+	sketch            : 0x0F01BA, // sketch
+	ai                : 0x0F01BB, // ai
+	alert01           : 0x0F01BC, // alert.01
+	alert02           : 0x0F01BD // alert.02
 };

Input/Input.module.less

@@ -131,6 +131,10 @@
 				margin: @sand-portrait-input-fullscreen-keypad-margin;
 				width: @sand-portrait-input-fullscreen-keypad-width;
 			}
+
+			:global(.enact-orientation-portrait):global(.enact-text-large) & {
+				width: @sand-portrait-input-fullscreen-keypad-width-large;
+			}
 		}
 
 		.key {
@@ -228,6 +232,10 @@
 		.keypad {
 			margin: @sand-input-overlay-keypad-margin;
 			width: @sand-input-overlay-keypad-width;
+
+			:global(.enact-text-large) & {
+				width: @sand-input-overlay-keypad-width-large;
+			}
 		}
 
 		.buttonArea {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/sandstone",
-  "version": "2.9.4",
+  "version": "2.9.5",
   "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
   "repository": {
     "type": "git",
@@ -42,11 +42,11 @@
     "extends": "enact-proxy/strict"
   },
   "dependencies": {
-    "@enact/core": "^4.9.3",
-    "@enact/i18n": "^4.9.3",
-    "@enact/spotlight": "^4.9.3",
-    "@enact/ui": "^4.9.3",
-    "@enact/webos": "^4.9.3",
+    "@enact/core": "^4.9.4",
+    "@enact/i18n": "^4.9.4",
+    "@enact/spotlight": "^4.9.4",
+    "@enact/ui": "^4.9.4",
+    "@enact/webos": "^4.9.4",
     "classnames": "^2.5.1",
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",

samples/event-logger/package.json

@@ -22,11 +22,11 @@
 		"theme": "sandstone"
 	},
 	"dependencies": {
-		"@enact/core": "^4.9.3",
-		"@enact/i18n": "^4.9.3",
+		"@enact/core": "^4.9.4",
+		"@enact/i18n": "^4.9.4",
 		"@enact/sandstone": "../../",
-		"@enact/spotlight": "^4.9.3",
-		"@enact/ui": "^4.9.3",
+		"@enact/spotlight": "^4.9.4",
+		"@enact/ui": "^4.9.4",
 		"ilib": "^14.20.0",
 		"prop-types": "^15.8.1",
 		"react": "^18.3.1",