@enact/limestone 1.10.1 → 1.10.2

package/CheckboxItem/CheckboxItem.js

@@ -13,13 +13,14 @@ var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
 var _IString = _interopRequireDefault(require("ilib/lib/IString"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _react = require("react");
 var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Checkbox = require("../Checkbox");
 var _Item = require("../Item");
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _CheckboxItemModule = _interopRequireDefault(require("./CheckboxItem.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "css", "icon", "indeterminate", "indeterminateIcon", "selected", "slotBefore"],
+var _excluded = ["children", "css", "formCheckbox", "icon", "indeterminate", "indeterminateIcon", "selected", "slotBefore"],
   _excluded2 = ["children", "groupId", "itemProps"],
   _excluded3 = ["children"];
 /**
@@ -43,6 +44,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var hasChildren = function hasChildren(children) {
+  return _react.Children.toArray(children).filter(Boolean).length > 0;
+};
 var Item = (0, _Item.ItemDecorator)(_Item.ItemBase);
 var Checkbox = (0, _Skinnable["default"])(_Checkbox.CheckboxBase);
 Checkbox.displayName = 'Checkbox';
@@ -85,6 +89,16 @@ var CheckboxItemBase = exports.CheckboxItemBase = (0, _kind["default"])({
      * @public
      */
     css: _propTypes["default"].object,
+    /**
+     * Enables the "formCheckbox" state.
+     *
+     * In "formCheckbox" mode,  the spotlight is located on the Checkbox component and the Item does not receive
+     * visual feedback on focus
+     *
+     * @type {Boolean}
+     * @public
+     */
+    formCheckbox: _propTypes["default"].bool,
     /**
      * The icon content.
      *
@@ -141,6 +155,9 @@ var CheckboxItemBase = exports.CheckboxItemBase = (0, _kind["default"])({
      */
     slotBefore: _propTypes["default"].node
   },
+  defaultProps: {
+    formCheckbox: false
+  },
   styles: {
     css: _CheckboxItemModule["default"],
     className: 'checkboxItem',
@@ -148,22 +165,31 @@ var CheckboxItemBase = exports.CheckboxItemBase = (0, _kind["default"])({
   },
   computed: {
     className: function className(_ref) {
-      var label = _ref.label,
+      var formCheckbox = _ref.formCheckbox,
+        label = _ref.label,
+        slotBefore = _ref.slotBefore,
         styler = _ref.styler;
       return styler.append({
-        hasLabel: label != null
+        formCheckbox: formCheckbox === true,
+        hasLabel: label != null && label.length > 0,
+        hasSlotBefore: hasChildren(slotBefore)
       });
+    },
+    label: function label(_ref2) {
+      var _label = _ref2.label;
+      return _label != null && _label.length > 0 ? _label : null;
     }
   },
-  render: function render(_ref2) {
-    var children = _ref2.children,
-      css = _ref2.css,
-      icon = _ref2.icon,
-      indeterminate = _ref2.indeterminate,
-      indeterminateIcon = _ref2.indeterminateIcon,
-      selected = _ref2.selected,
-      slotBefore = _ref2.slotBefore,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  render: function render(_ref3) {
+    var children = _ref3.children,
+      css = _ref3.css,
+      formCheckbox = _ref3.formCheckbox,
+      icon = _ref3.icon,
+      indeterminate = _ref3.indeterminate,
+      indeterminateIcon = _ref3.indeterminateIcon,
+      selected = _ref3.selected,
+      slotBefore = _ref3.slotBefore,
+      rest = _objectWithoutProperties(_ref3, _excluded);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Item, _objectSpread(_objectSpread({
       "data-webos-voice-intent": "SelectCheckItem",
       role: "checkbox"
@@ -177,6 +203,7 @@ var CheckboxItemBase = exports.CheckboxItemBase = (0, _kind["default"])({
           selected: selected,
           indeterminate: indeterminate,
           indeterminateIcon: indeterminateIcon,
+          standalone: formCheckbox,
           children: icon
         }), slotBefore]
       }), children]

package/CheckboxItem/CheckboxItem.module.css

@@ -1,13 +1,12 @@
 .checkboxItem {
-  /* Needed to prevent global class being added in the DOM */
   padding: var(--primitive-spacing-36) var(--primitive-spacing-48) var(--primitive-spacing-36) var(--primitive-spacing-60);
 }
-.checkboxItem.selected {
-  /* Available for customization */
-}
 :global(.enact-locale-right-to-left) .checkboxItem {
   padding: var(--primitive-spacing-36) var(--primitive-spacing-60) var(--primitive-spacing-36) var(--primitive-spacing-48);
 }
+.checkboxItem.selected {
+  /* Available for customization */
+}
 .checkboxItem .bg {
   /* Available for customization */
 }
@@ -17,15 +16,129 @@
 :global(.enact-locale-right-to-left) .checkboxItem.hasLabel {
   padding: var(--primitive-spacing-48) var(--primitive-spacing-60) var(--primitive-spacing-48) var(--primitive-spacing-48);
 }
+.checkboxItem.formCheckbox .slotBefore .checkbox {
+  margin-inline-end: 0.75rem;
+}
 .checkboxItem:global(.neutral).selected .bg {
   background-color: transparent;
 }
+:global(.spotlight-input-key) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus,
+:global(.spotlight-input-mouse) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.neutral).formCheckbox:global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
 :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).selected .bg {
   background-color: transparent;
 }
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkboxItem:global(.neutral):global(.highContrast).formCheckbox:global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
 .checkboxItem:global(.light).selected .bg {
   background-color: transparent;
 }
+:global(.spotlight-input-key) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus,
+:global(.spotlight-input-mouse) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) .checkboxItem:global(.light).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.light).formCheckbox:global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.light).formCheckbox:global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.light).formCheckbox:global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.light).formCheckbox:global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.light).formCheckbox:global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
 .checkboxItem:global(.game) {
   --semantic-color-surface-default: #2d224c;
   --semantic-color-surface-default-focused: #6d2fa1;
@@ -34,6 +147,43 @@
 .checkboxItem:global(.game).selected .bg {
   background-color: transparent;
 }
+:global(.spotlight-input-key) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus,
+:global(.spotlight-input-mouse) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.game).formCheckbox:global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.game).formCheckbox:global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
 :global(.green) .checkboxItem:global(.game) {
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
@@ -41,6 +191,43 @@
 :global(.green) .checkboxItem:global(.game).selected .bg {
   background-color: transparent;
 }
+:global(.spotlight-input-key) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus,
+:global(.spotlight-input-mouse) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) :global(.green) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
 :global(.orange) .checkboxItem:global(.game) {
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
@@ -48,3 +235,40 @@
 :global(.orange) .checkboxItem:global(.game).selected .bg {
   background-color: transparent;
 }
+:global(.spotlight-input-key) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus,
+:global(.spotlight-input-mouse) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-key) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-key) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled],
+:global(.spotlight-input-mouse) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-key) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] .slotBefore,
+:global(.spotlight-input-mouse) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-key) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child,
+:global(.spotlight-input-mouse) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):focus[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):active {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.spotlight-input-touch) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):active .bg {
+  background-color: transparent;
+  opacity: 0;
+}
+:global(.spotlight-input-touch) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled] {
+  color: inherit;
+}
+:global(.spotlight-input-touch) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled] .slotBefore {
+  opacity: initial;
+}
+:global(.spotlight-input-touch) :global(.orange) .checkboxItem:global(.game).formCheckbox:global(.spottable):active[disabled].hasSlotBefore .slotBefore > :last-child {
+  opacity: 0.4;
+}

package/Chips/Chip.module.css

@@ -13,7 +13,7 @@
 .chip .deleteButtonContainer.right {
   top: 50%;
   right: 0;
-  transform: translateY(-50%) translateX(calc(100% + var(--primitive-spacing-12) ));
+  transform: translateY(-50%) translateX(calc(100% +  var(--primitive-spacing-12) ));
 }
 .chip .deleteButtonContainer.bottom {
   bottom: calc( var(--primitive-spacing-12) * -1);
@@ -21,7 +21,7 @@
   transform: translate(-50%, 100%);
 }
 .chip .deleteButtonContainer.top {
-  top: calc(-100% - var(--primitive-spacing-12) );
+  top: calc(-100% -  var(--primitive-spacing-12) );
   left: 50%;
   transform: translateX(-50%);
 }

package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts

@@ -1,8 +1,8 @@
 // Type definitions for limestone/ContextualMenuDecorator
 
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
-import { ContextualPopupDecoratorProps as limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps } from "limestone/ContextualPopupDecorator";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
+import { ContextualPopupDecoratorProps as limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps } from "@enact/limestone/ContextualPopupDecorator";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

package/ContextualPopupDecorator/ContextualPopup.module.css

@@ -3,7 +3,7 @@
   font-size: var(--primitive-font-size-60);
   font-style: normal;
   font-family: "Limestone";
-  line-height: 1.4em;
+  line-height: 1.34em;
   position: absolute;
 }
 :global(.enact-locale-non-latin) .contextualPopup {

package/ContextualPopupDecorator/ContextualPopupDecorator.js

@@ -587,10 +587,8 @@ var Decorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
         });
       }
       return function () {
-        if (componentProps.open) {
-          (0, _dispatcher.off)('keydown', keyDownRef.current);
-          (0, _dispatcher.off)('keyup', keyUpRef.current);
-        }
+        (0, _dispatcher.off)('keydown', keyDownRef.current);
+        (0, _dispatcher.off)('keyup', keyUpRef.current);
         _spotlight["default"].remove(localId);
         if (resizeObserver.current) {
           resizeObserver.current.disconnect();

package/ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var dispatcher = _interopRequireWildcard(require("@enact/core/dispatcher"));
 var _pointer = require("@enact/spotlight/src/pointer");
 var _FloatingLayer = require("@enact/ui/FloatingLayer");
 require("@testing-library/jest-dom");
@@ -9,6 +10,7 @@ var _Button = _interopRequireDefault(require("../../Button"));
 var _ContextualPopupDecorator = require("../ContextualPopupDecorator");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 var ContextualButton = (0, _ContextualPopupDecorator.ContextualPopupDecorator)(_Button["default"]);
@@ -574,6 +576,41 @@ describe('ContextualPopupDecorator Specs', function () {
     expect(scrimDivFirst).toHaveClass(expectedFirst);
     expect(scrimDivSecond).toHaveClass(expectedSecond);
   });
+  test('should remove global key listeners on unmount while open', function () {
+    var offSpy = jest.spyOn(dispatcher, 'off');
+    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+    var popup = function popup() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          children: "first"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          children: "second"
+        })]
+      });
+    };
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+          popupComponent: popup,
+          spotlightRestrict: "self-only",
+          children: "Hello"
+        })
+      })),
+      rerender = _render4.rerender,
+      unmount = _render4.unmount;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
+        open: true,
+        popupComponent: popup,
+        spotlightRestrict: "self-only",
+        children: "Hello"
+      })
+    }));
+    offSpy.mockClear();
+    unmount();
+    expect(offSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
+    expect(offSpy).toHaveBeenCalledWith('keyup', expect.any(Function));
+    offSpy.mockRestore();
+  });
   test('should create and observe with `ResizeObserver` when the popup opened and disconnect when the popup closed', function () {
     var originalObserver = global.ResizeObserver;
     var MockObserverInstance = {
@@ -584,7 +621,7 @@ describe('ContextualPopupDecorator Specs', function () {
       return MockObserverInstance;
     });
     var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
-    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
           "data-testid": "contextualButton",
           open: true,
@@ -598,7 +635,7 @@ describe('ContextualPopupDecorator Specs', function () {
           children: "Hello"
         })
       })),
-      rerender = _render4.rerender;
+      rerender = _render5.rerender;
     var contextualButton = _react.screen.getByTestId('contextualButton');
     expect(contextualButton).toBeInTheDocument();
     expect(MockObserverInstance.observe).toHaveBeenCalled();

package/Dropdown/Dropdown.d.ts

@@ -4,8 +4,8 @@ import * as React from "react";
 import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
 import { SpotlightContainerDecoratorProps as spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps } from "@enact/spotlight/SpotlightContainerDecorator";
-import { ButtonProps as limestone_Button_ButtonProps } from "limestone/Button";
-import { ContextualPopupDecoratorProps as limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps } from "limestone/ContextualPopupDecorator";
+import { ButtonProps as limestone_Button_ButtonProps } from "@enact/limestone/Button";
+import { ContextualPopupDecoratorProps as limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps } from "@enact/limestone/ContextualPopupDecorator";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

package/Dropdown/Dropdown.module.css

@@ -4,43 +4,43 @@
   min-width: 6.25rem;
 }
 .dropdown.tinyWidth .title {
-  width: NaNrem - var(--primitive-spacing-24) * 2);
+  width: calc(480px - var(--primitive-spacing-24) * 2);
 }
 .dropdown.tinyWidth .button {
   width: 10rem;
 }
 .dropdown.smallWidth .title {
-  width: NaNrem - var(--primitive-spacing-24) * 2);
+  width: calc(540px - var(--primitive-spacing-24) * 2);
 }
 .dropdown.smallWidth .button {
   width: 11.25rem;
 }
 .dropdown.mediumWidth .title {
-  width: NaNrem - var(--primitive-spacing-24) * 2);
+  width: calc(690px - var(--primitive-spacing-24) * 2);
 }
 .dropdown.mediumWidth .button {
   width: 14.375rem;
 }
 .dropdown.largeWidth .title {
-  width: NaNrem - var(--primitive-spacing-24) * 2);
+  width: calc(840px - var(--primitive-spacing-24) * 2);
 }
 .dropdown.largeWidth .button {
   width: 17.5rem;
 }
 .dropdown.x-largeWidth .title {
-  width: NaNrem - var(--primitive-spacing-24) * 2);
+  width: calc(1050px - var(--primitive-spacing-24) * 2);
 }
 .dropdown.x-largeWidth .button {
   width: 21.875rem;
 }
 .dropdown.hugeWidth .title {
-  width: NaNrem - var(--primitive-spacing-24) * 2);
+  width: calc(1380px - var(--primitive-spacing-24) * 2);
 }
 .dropdown.hugeWidth .button {
   width: 28.75rem;
 }
 .dropdown .title {
-  min-width: NaNrem - var(--primitive-spacing-24) * 2);
+  min-width: calc(300px - var(--primitive-spacing-24) * 2);
   padding: var(--primitive-spacing-36) var(--primitive-spacing-24);
   margin: 0;
 }

package/FixedPopupPanels/FixedPopupPanels.d.ts

@@ -1,8 +1,8 @@
 // Type definitions for limestone/FixedPopupPanels
 
 import * as React from "react";
-import { PanelProps as limestone_Panels_PanelProps } from "limestone/Panels";
-import { HeaderProps as limestone_Panels_HeaderProps } from "limestone/Panels";
+import { PanelProps as limestone_Panels_PanelProps } from "@enact/limestone/Panels";
+import { HeaderProps as limestone_Panels_HeaderProps } from "@enact/limestone/Panels";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

package/FlexiblePopupPanels/FlexiblePopupPanels.module.css

@@ -13,7 +13,7 @@
 }
 .flexiblePopupPanels .viewport .panel {
   padding: 0 var(--primitive-spacing-60) calc(var(--primitive-spacing-36) + (var(--primitive-spacing-18) * 1.75));
-  height: calc(100vh - (var(--primitive-spacing-60) * 2 + 0rem * 2));
+  height: calc(100vh - (var(--primitive-spacing-60) * 2 + 0px * 2));
 }
 .flexiblePopupPanels .viewport.noNavButton .bodyLayout {
   padding-left: 0;
@@ -274,14 +274,26 @@
   width: 12.5rem;
 }
 .panel.small + .panel.large {
-  left: calc(calc( var(--primitive-spacing-60) + var(--primitive-spacing-60) + 12.5rem + var(--primitive-spacing-60) + var(--primitive-spacing-60) ) * -1);
+  left: calc(calc(
+		var(--primitive-spacing-60)
+		+ var(--primitive-spacing-60)
+		+ 600px
+		+ var(--primitive-spacing-60)
+		+ var(--primitive-spacing-60)
+	) * -1);
 }
 .panel.large .content,
 .panel.large .header {
   width: 27.5rem;
 }
 .panel.large + .panel.small {
-  left: calc(calc( var(--primitive-spacing-60) + var(--primitive-spacing-60) + 27.5rem + var(--primitive-spacing-60) + var(--primitive-spacing-60) ));
+  left: calc(calc(
+		var(--primitive-spacing-60)
+		+ var(--primitive-spacing-60)
+		+ 1320px
+		+ var(--primitive-spacing-60)
+		+ var(--primitive-spacing-60)
+	));
 }
 :global(.enact-locale-right-to-left) .panel > .body {
   direction: ltr;

package/FlexiblePopupPanels/index.d.ts

@@ -1,7 +1,7 @@
 // Type definitions for limestone/FlexiblePopupPanels
 
-import { HeaderProps as limestone_Panels_HeaderProps } from "limestone/Panels";
-import { PanelProps as limestone_Panels_PanelProps } from "limestone/Panels";
+import { HeaderProps as limestone_Panels_HeaderProps } from "@enact/limestone/Panels";
+import { PanelProps as limestone_Panels_PanelProps } from "@enact/limestone/Panels";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/FormCheckboxItem/FormCheckboxItem.d.ts

@@ -1,7 +1,7 @@
 // Type definitions for limestone/FormCheckboxItem
 
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
-import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
+import { ItemProps as limestone_Item_ItemProps } from "@enact/limestone/Item";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/FormCheckboxItem/FormCheckboxItem.js

@@ -23,6 +23,7 @@ var _excluded = ["children", "css", "icon", "indeterminate", "indeterminateIcon"
  * @example
  * <FormCheckboxItem>A Checkbox for a form</FormCheckboxItem>
  *
+ * @deprecated Will be removed in 2.0.0. Use {@link limestone/CheckboxItem} instead.
  * @module limestone/FormCheckboxItem
  * @exports FormCheckboxItem
  * @exports FormCheckboxItemBase