@enact/limestone 1.3.0 → 1.10.0

package/FlexiblePopupPanels/FlexiblePopupPanels.module.css

@@ -1,5 +1,5 @@
 .flexiblePopupPanels.popup {
-  padding: 1.25rem 0;
+  padding: var(--primitive-spacing-60) 0;
   margin: 0;
   max-height: 100vh;
   min-width: 23.75rem;
@@ -12,8 +12,8 @@
   position: relative;
 }
 .flexiblePopupPanels .viewport .panel {
-  padding: 0 1.25rem 1.40625rem;
-  height: calc(100vh - 2.5rem );
+  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));
 }
 .flexiblePopupPanels .viewport.noNavButton .bodyLayout {
   padding-left: 0;
@@ -77,8 +77,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .flexiblePopupPanels:global(.neutral) .header,
 :global(.noAnimation) .flexiblePopupPanels:global(.neutral) .content {
@@ -101,10 +101,10 @@
 :global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .content {
   border-radius: var(--semantic-radius-overlay);
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  outline-color: #7c848b;
+  outline-color: var(--semantic-color-stroke-main);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .header,
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .flexiblePopupPanels:global(.neutral):global(.highContrast) .content {
@@ -129,8 +129,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .flexiblePopupPanels:global(.light) .header,
 :global(.noAnimation) .flexiblePopupPanels:global(.light) .content {
@@ -158,8 +158,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) .flexiblePopupPanels:global(.game) .header,
 :global(.noAnimation) .flexiblePopupPanels:global(.game) .content {
@@ -186,8 +186,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.green) .flexiblePopupPanels:global(.game) .header,
 :global(.noAnimation) :global(.green) .flexiblePopupPanels:global(.game) .content {
@@ -214,8 +214,8 @@
   box-shadow: 0 0.75rem 1rem 0 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: -0.063rem;
 }
 :global(.noAnimation) :global(.orange) .flexiblePopupPanels:global(.game) .header,
 :global(.noAnimation) :global(.orange) .flexiblePopupPanels:global(.game) .content {
@@ -237,7 +237,7 @@
 .panel .bodyLayout {
   max-height: -webkit-fill-available;
   pointer-events: auto;
-  padding: 0 2.25rem;
+  padding: 0 var(--primitive-spacing-108);
 }
 .panel > *:first-child {
   pointer-events: auto;
@@ -250,12 +250,12 @@
 .panel.auto .header,
 .panel.small .header,
 .panel.large .header {
-  margin-left: 3.5rem;
-  margin-right: 3.5rem;
+  margin-left: calc(var(--primitive-spacing-60) + var(--primitive-spacing-108));
+  margin-right: calc(var(--primitive-spacing-60) + var(--primitive-spacing-108));
 }
 .panel .content {
-  margin: 0 1.25rem;
-  padding: 1.25rem 0.5rem;
+  margin: 0 var(--primitive-spacing-60);
+  padding: var(--primitive-spacing-60);
   box-sizing: border-box;
 }
 .panel.auto {
@@ -274,14 +274,14 @@
   width: 12.5rem;
 }
 .panel.small + .panel.large {
-  left: -17.5rem;
+  left: calc(calc( var(--primitive-spacing-60) + var(--primitive-spacing-60) + 12.5rem + var(--primitive-spacing-60) + var(--primitive-spacing-60) ) * -1);
 }
 .panel.large .content,
 .panel.large .header {
   width: 27.5rem;
 }
 .panel.large + .panel.small {
-  left: -32.5rem;
+  left: calc(calc( var(--primitive-spacing-60) + var(--primitive-spacing-60) + 27.5rem + var(--primitive-spacing-60) + var(--primitive-spacing-60) ));
 }
 :global(.enact-locale-right-to-left) .panel > .body {
   direction: ltr;

package/FlexiblePopupPanels/useNavButtonFocus.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.NavButtonFocusDecorator = void 0;
 exports.useNavButtonFocus = useNavButtonFocus;
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
 var _FlexiblePopupPanelsModule = _interopRequireDefault(require("./FlexiblePopupPanels.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["index"];
@@ -23,14 +23,11 @@ var prevButtonSelector = ".".concat(_FlexiblePopupPanelsModule["default"].navCel
 var nextButtonSelector = ".".concat(_FlexiblePopupPanelsModule["default"].navCellAfter, " .").concat(_FlexiblePopupPanelsModule["default"].navButton);
 function useNavButtonFocus(_ref) {
   var index = _ref.index;
+  var prevIndex = (0, _util.usePrevious)(index);
   var autoFocus;
-  var _useRef = (0, _react.useRef)({
-      index: index
-    }),
-    ref = _useRef.current;
 
   // on index change
-  if (index !== ref.index) {
+  if (index !== prevIndex) {
     var current = _spotlight["default"].getCurrent();
     // if the currently focused component is a nav button
     if (current && current.classList.contains(_FlexiblePopupPanelsModule["default"].navButton)) {
@@ -39,7 +36,6 @@ function useNavButtonFocus(_ref) {
       // set autoFocus to point to the selector for the appropriate button
       autoFocus = prevButtonFocused ? prevButtonSelector : nextButtonSelector;
     }
-    ref.index = index;
   }
   return {
     autoFocus: autoFocus
@@ -47,9 +43,10 @@ function useNavButtonFocus(_ref) {
 }
 var NavButtonFocusDecorator = exports.NavButtonFocusDecorator = function NavButtonFocusDecorator(Wrapped) {
   // eslint-disable-next-line no-shadow
-  function NavButtonFocusDecorator(_ref2) {
-    var index = _ref2.index,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  function NavButtonFocusDecorator(props) {
+    (0, _util.checkPropTypes)(NavButtonFocusDecorator, props);
+    var index = props.index,
+      rest = _objectWithoutProperties(props, _excluded);
     var nav = useNavButtonFocus({
       index: index
     });

package/FormCheckboxItem/FormCheckboxItem.d.ts

@@ -65,14 +65,15 @@ export class FormCheckboxItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, FormCheckboxItemBaseProps>
 > {}
 
-export interface FormCheckboxItemDecoratorProps
-  extends ui_Toggleable_ToggleableProps {}
+export interface FormCheckboxItemDecoratorProps extends ui_Toggleable_ToggleableProps {}
 export function FormCheckboxItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & FormCheckboxItemDecoratorProps>;
 
-export interface FormCheckboxItemProps
-  extends Merge<FormCheckboxItemBaseProps, FormCheckboxItemDecoratorProps> {}
+export interface FormCheckboxItemProps extends Merge<
+  FormCheckboxItemBaseProps,
+  FormCheckboxItemDecoratorProps
+> {}
 /**
  * A Limestone-styled form item with a checkbox component.
  * 

package/Heading/Heading.d.ts

@@ -36,7 +36,7 @@ corresponding internal elements and states of this component.
  * If the  `spacing`  prop is not set (defaulting to "auto"), these values automatically set
 the spacing to the correlated names.
  */
-  size?: "large" | "medium" | "small" | "tiny";
+  size?: "large" | "medium" | "small" | "tiny" | "title" | "subtitle";
   /**
    * The size of the spacing around the Heading.
    *
@@ -60,17 +60,18 @@ export class HeadingBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, HeadingBaseProps>
 > {}
 
-export interface HeadingDecoratorProps
-  extends Merge<
-    limestone_Marquee_MarqueeDecoratorProps,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface HeadingDecoratorProps extends Merge<
+  limestone_Marquee_MarqueeDecoratorProps,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function HeadingDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & HeadingDecoratorProps>;
 
-export interface HeadingProps
-  extends Merge<HeadingBaseProps, HeadingDecoratorProps> {
+export interface HeadingProps extends Merge<
+  HeadingBaseProps,
+  HeadingDecoratorProps
+> {
   /**
    * Marquee animation trigger.
    *

package/Heading/Heading.js

@@ -86,11 +86,11 @@ var HeadingBase = exports.HeadingBase = (0, _kind["default"])({
      * If the `spacing` prop is not set (defaulting to "auto"), these values automatically set
      * the spacing to the correlated names.
      *
-     * @type {('large'|'medium'|'small'|'tiny')}
+     * @type {('large'|'medium'|'small'|'tiny'|'title'|'subtitle')}
      * @default 'tiny'
      * @public
      */
-    size: _propTypes["default"].oneOf(['large', 'medium', 'small', 'tiny']),
+    size: _propTypes["default"].oneOf(['large', 'medium', 'small', 'tiny', 'title', 'subtitle']),
     /**
      * The size for slotBefore and slotAfter.
      * This size is used for remeasuring marquee metrics for Panels.Header.

package/Heading/Heading.module.css

@@ -96,23 +96,23 @@
 .heading.large {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
-  font-size: 1.5rem;
+  font-size: var(--primitive-font-size-72);
 }
 .heading.medium {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
-  font-size: 1.375rem;
+  font-size: var(--primitive-font-size-66);
 }
 .heading.small {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 .heading.tiny {
   margin: var(--primitive-spacing-36) var(--primitive-spacing-24);
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 .heading.titleSpacing {
   margin-bottom: 0;
@@ -129,7 +129,7 @@
   min-height: 0.85417rem;
 }
 .heading.smallSpacing {
-  margin-bottom: calc(var(--primitive-spacing-36) - 1px );
+  margin-bottom: calc(var(--primitive-spacing-36) - 1px);
   min-height: 0.35417rem;
 }
 .heading.noneSpacing {

package/Icon/Icon.d.ts

@@ -353,14 +353,25 @@ dislikeline
 like
 likeline
 soundbarline
-jumpforward
-jumpbackward
+jumpforward2
+jumpbackward2
+link2
+btspeakermute
+system
+remotecontrolsetting
+warning
+filepdf
+filedoc
+filexls
+subtitleru
+f1
+mypageru
+};
 ```
  */
 export declare const iconList: object;
 
-export interface IconDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface IconDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function IconDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & IconDecoratorProps>;

package/Icon/Icon.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "icons", {
     return _IconList["default"];
   }
 });
+var _deprecate = _interopRequireDefault(require("@enact/core/internal/deprecate"));
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _I18nDecorator = require("@enact/i18n/I18nDecorator");
 var _Icon = require("@enact/ui/Icon");
@@ -40,6 +41,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @exports IconDecorator
  * @exports icons
  */
+var warnedJumpBackward = false;
+var warnedJumpBackward2 = false;
+var warnedJumpForward = false;
+var warnedJumpForward2 = false;
+
 /**
  * Renders a limestone-styled icon without any behavior.
  *
@@ -57,6 +63,7 @@ var IconBase = exports.IconBase = (0, _kind["default"])({
      *
      * @see {@link ui/Icon.IconBase.children}
      * @type {String|Object}
+     * @deprecated `jumpbackward`, `jumpforward`, `jumpbackward2`, and `jumpforward2` icons will be renamed to `previous`, `next`, `jumpbackward`, and `jumpforward` in 2.0.0.
      * @public
      */
     children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
@@ -152,6 +159,34 @@ var IconBase = exports.IconBase = (0, _kind["default"])({
       rest = _objectWithoutProperties(_ref4, _excluded);
     delete rest.locale;
     delete rest.rtl;
+    if (!warnedJumpBackward && rest.children === 'jumpbackward') {
+      (0, _deprecate["default"])({
+        name: 'Icon `jumpbackward`',
+        message: 'Wiil be renamed to `previous` in 2.0.0'
+      });
+      warnedJumpBackward = true;
+    }
+    if (!warnedJumpBackward2 && rest.children === 'jumpbackward2') {
+      (0, _deprecate["default"])({
+        name: 'Icon `jumpbackward2`',
+        message: 'Wiil be renamed to `jumpbackward` in 2.0.0'
+      });
+      warnedJumpBackward2 = true;
+    }
+    if (!warnedJumpForward && rest.children === 'jumpforward') {
+      (0, _deprecate["default"])({
+        name: 'Icon `jumpforward`',
+        message: 'Wiil be renamed to `next` in 2.0.0'
+      });
+      warnedJumpForward = true;
+    }
+    if (!warnedJumpForward2 && rest.children === 'jumpforward2') {
+      (0, _deprecate["default"])({
+        name: 'Icon `jumpforward2`',
+        message: 'Wiil be renamed to `jumpforward` in 2.0.0'
+      });
+      warnedJumpForward2 = true;
+    }
     return _Icon.IconBase.inline(_objectSpread(_objectSpread({}, rest), {}, {
       size: typeof size === 'string' ? size : void 0,
       css: css,
@@ -465,8 +500,20 @@ var IconBase = exports.IconBase = (0, _kind["default"])({
  * like
  * likeline
  * soundbarline
- * jumpforward
- * jumpbackward
+ * jumpforward2
+ * jumpbackward2
+ * link2
+ * btspeakermute
+ * system
+ * remotecontrolsetting
+ * warning
+ * filepdf
+ * filedoc
+ * filexls
+ * subtitleru
+ * f1
+ * mypageru
+};
  * ```
  *
  * @name iconList

package/Icon/Icon.module.css

@@ -3,7 +3,7 @@
   text-align: center;
   position: relative;
   font-family: "Limestone Icons";
-  margin: 0.5rem;
+  margin: var(--primitive-spacing-24);
   overflow: hidden;
   width: var(--icon-size, 1.5rem );
   height: var(--icon-size, 1.5rem );

package/Icon/IconList.js

@@ -79,8 +79,12 @@ var _default = exports["default"] = {
   // pausejumpbackward
   jumpforward: 0x0EFFE7,
   // indicator_end
+  next: 0x0EFFE7,
+  // indicator_end
   jumpbackward: 0x0EFFE8,
   // indicator_begin
+  previous: 0x0EFFE8,
+  // indicator_begin
   skip: 0x0EFFE9,
   // skip
   list: 0x0EFFEB,
@@ -607,5 +611,27 @@ var _default = exports["default"] = {
   // soundbar_line
   jumpforward2: 0x0F01ED,
   // jumpforward
-  jumpbackward2: 0x0F01EE // jumpbackward
+  jumpbackward2: 0x0F01EE,
+  // jumpbackward
+  link2: 0x0F01EF,
+  // Link
+  btspeakermute: 0x0F01F0,
+  // bt_speaker_mute
+  system: 0x0F01F1,
+  // system
+  remotecontrolsetting: 0x0F01F2,
+  // remote_control_setting
+  warning: 0x0F01F3,
+  // warning
+  filepdf: 0x0F01F4,
+  // file_pdf
+  filedoc: 0x0F01F5,
+  // file_doc
+  filexls: 0x0F01F6,
+  // file_xls
+  subtitleru: 0x10017F,
+  // subtitleru
+  f1: 0x0F01F8,
+  // f1
+  mypageru: 0x0F01F7 // mypageru
 };

package/IconItem/IconItem.d.ts

@@ -18,11 +18,11 @@ The following properties should be provided:
  * *  `height`  - The height of the image
  * *  `width`  - The width of the image
  */
-  size: object /**
+  size: object; /**
  * Source for the image.
 String value or Object of values used to determine which image will appear on
 a specific screenSize.
- */;
+ */
   src: string | object;
 }
 export interface IconItemBaseProps {
@@ -103,20 +103,21 @@ export class IconItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, IconItemBaseProps>
 > {}
 
-export interface IconItemDecoratorProps
-  extends Merge<
-    Merge<
-      limestone_Marquee_MarqueeControllerProps,
-      spotlight_Spottable_SpottableProps
-    >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface IconItemDecoratorProps extends Merge<
+  Merge<
+    limestone_Marquee_MarqueeControllerProps,
+    spotlight_Spottable_SpottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function IconItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & IconItemDecoratorProps>;
 
-export interface IconItemProps
-  extends Merge<IconItemBaseProps, IconItemDecoratorProps> {}
+export interface IconItemProps extends Merge<
+  IconItemBaseProps,
+  IconItemDecoratorProps
+> {}
 /**
  * A limestone-styled icon item, Marquee and Spottable applied.
  * 

package/IconItem/IconItem.js

@@ -14,6 +14,7 @@ var _Image = _interopRequireDefault(require("../Image"));
 var _Marquee = require("../Marquee");
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _IconItemModule = _interopRequireDefault(require("./IconItem.module.css"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "disabled"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -191,6 +192,14 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
      * @private
      */
     order: _propTypes["default"].number,
+    /**
+     * Indicates if the component is pressed.
+     *
+     * @type {Boolean}
+     * @default false
+     * @private
+     */
+    pressed: _propTypes["default"].bool,
     /**
      * Title text showing below the icon.
      *
@@ -211,6 +220,7 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
     'data-webos-voice-intent': 'Select',
     labelColor: 'light',
     labelOn: 'render',
+    pressed: false,
     titleOn: 'render'
   },
   styles: {
@@ -224,11 +234,13 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
         label = _ref2.label,
         labelColor = _ref2.labelColor,
         labelOn = _ref2.labelOn,
+        pressed = _ref2.pressed,
         styler = _ref2.styler,
         title = _ref2.title,
         titleOn = _ref2.titleOn;
       return styler.append({
         bordered: bordered,
+        pressed: pressed,
         hasLabel: !!label,
         hasTitle: !!title,
         labelOnFocus: labelOn === 'focus',
@@ -310,6 +322,7 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
     delete rest.label;
     delete rest.labelColor;
     delete rest.labelOn;
+    delete rest.pressed;
     delete rest.title;
     delete rest.titleOn;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
@@ -333,6 +346,8 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
  */
 var IconItemDecorator = exports.IconItemDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
   marqueeOnFocus: true
+}), (0, _Touchable["default"])({
+  activeProp: 'pressed'
 }), _Spottable["default"], _Skinnable["default"]);
 
 /**