@enact/limestone 1.3.0

package/Panels/Panels.js

@@ -0,0 +1,258 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PanelsBase = exports.Panels = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _handle = _interopRequireWildcard(require("@enact/core/handle"));
+var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"));
+var _ViewManager = require("@enact/ui/ViewManager");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Panels = require("../internal/Panels");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _util = require("../internal/Panels/util");
+var _PanelsModule = _interopRequireDefault(require("./Panels.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["arranger", "children", "css", "generateId", "id", "index", "noAnimation", "noSharedState", "onTransition", "onWillTransition", "viewportId"];
+/**
+ * Basic Panels component without a default {@link ui/ViewManager.Arranger|arranger}
+ *
+ * @class Panels
+ * @memberof limestone/Panels
+ * @ui
+ * @public
+ */
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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 PanelsBase = exports.PanelsBase = (0, _kind["default"])({
+  name: 'Panels',
+  propTypes: /** @lends limestone/Panels.Panels.prototype */{
+    /**
+     * Function that generates unique identifiers for Panel instances.
+     *
+     * @type {Function}
+     * @required
+     * @private
+     */
+    generateId: _propTypes["default"].func.isRequired,
+    /**
+     * Set of functions that control how the panels are transitioned into and out of the
+     * viewport.
+     *
+     * @see {@link ui/ViewManager.SlideArranger}
+     * @type {ui/ViewManager.Arranger}
+     * @default ui/ViewManager.SlideLeftArranger
+     * @public
+     */
+    arranger: _ViewManager.shape,
+    /**
+     * Hint string read when focusing the back button.
+     *
+     * @type {String}
+     * @default 'go to previous'
+     * @public
+     */
+    backButtonAriaLabel: _propTypes["default"].string,
+    /**
+     * Background opacity of the application back button.
+     *
+     * @type {('opaque'|'transparent')}
+     * @default 'transparent'
+     * @public
+     */
+    backButtonBackgroundOpacity: _propTypes["default"].oneOf(['opaque', 'transparent']),
+    /**
+     * {@link limestone/Panels.Panel|Panel} to be rendered
+     *
+     * @type {Node}
+     * @public
+     */
+    children: _propTypes["default"].node,
+    /**
+     * Hint string read when focusing the application close button.
+     *
+     * @type {String}
+     * @default 'Exit app'
+     * @public
+     */
+    closeButtonAriaLabel: _propTypes["default"].string,
+    /**
+     * Background opacity of the application close button.
+     *
+     * @type {('opaque'|'transparent')}
+     * @default 'transparent'
+     * @public
+     */
+    closeButtonBackgroundOpacity: _propTypes["default"].oneOf(['opaque', 'transparent']),
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `panels` - The root class name
+     * * `viewport` - The node containing the panel instances
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * Unique identifier for the Panels instance.
+     *
+     * When defined, `Panels` will manage the presentation state of `Panel` instances in order
+     * to restore it when returning to the `Panel`. See
+     * {@link limestone/Panels.Panels.noSharedState|noSharedState} for more details on shared
+     * state.
+     *
+     * @type {String}
+     * @public
+     */
+    id: _propTypes["default"].string,
+    /**
+     * Index of the active panel
+     *
+     * @type {Number}
+     * @default 0
+     * @public
+     */
+    index: _propTypes["default"].number,
+    /**
+     * Disables panel transitions.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    noAnimation: _propTypes["default"].bool,
+    /**
+     * Omits the back button.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    noBackButton: _propTypes["default"].bool,
+    /**
+     * Omits the close button.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    noCloseButton: _propTypes["default"].bool,
+    /**
+     * Prevents maintaining shared state for framework components within this `Panels` instance.
+     *
+     * When `false`, each `Panel` will track the state of some framework components in order to
+     * restore that state when the Panel is recreated. For example, the scroll position of a
+     * `limestone/Scroller` within a `Panel` will be saved and restored when returning to that
+     * `Panel`.
+     *
+     * This only applied when navigating "back" (to a lower index) to `Panel`. When navigating
+     * "forwards" (to a higher index), the `Panel` and its contained components will use their
+     * default state.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    noSharedState: _propTypes["default"].bool,
+    /**
+     * Called with cancel/back key events.
+     *
+     * @type {Function}
+     * @public
+     */
+    onBack: _propTypes["default"].func,
+    /**
+     * Called when the app close button is clicked.
+     *
+     * @type {Function}
+     * @public
+     */
+    onClose: _propTypes["default"].func,
+    /**
+     * Called once when all panels have completed their transition.
+     *
+     * @type {Function}
+     */
+    onTransition: _propTypes["default"].func,
+    /**
+     * Called once before panels begin their transition.
+     *
+     * @type {Function}
+     */
+    onWillTransition: _propTypes["default"].func
+  },
+  defaultProps: {
+    arranger: _Panels.BasicArranger,
+    index: 0,
+    noAnimation: false,
+    noSharedState: false
+  },
+  styles: {
+    css: _PanelsModule["default"],
+    className: 'panels enact-fit',
+    publicClassNames: ['panels', 'viewport']
+  },
+  computed: {
+    viewportId: function viewportId(_ref) {
+      var id = _ref.id;
+      return id && "".concat(id, "-viewport");
+    }
+  },
+  handlers: {
+    onBack: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onBack', function (ev, _ref2) {
+      var index = _ref2.index;
+      return {
+        index: Math.max(index - 1, 0)
+      };
+    }))
+  },
+  render: function render(_ref3) {
+    var arranger = _ref3.arranger,
+      children = _ref3.children,
+      css = _ref3.css,
+      generateId = _ref3.generateId,
+      id = _ref3.id,
+      index = _ref3.index,
+      noAnimation = _ref3.noAnimation,
+      noSharedState = _ref3.noSharedState,
+      onTransition = _ref3.onTransition,
+      onWillTransition = _ref3.onWillTransition,
+      viewportId = _ref3.viewportId,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+    var sharedProps = (0, _util.getSharedProps)(rest);
+    (0, _util.deleteSharedProps)(rest);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      id: id,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels.Viewport, _objectSpread(_objectSpread({}, sharedProps), {}, {
+        arranger: arranger,
+        className: css.viewport,
+        generateId: generateId,
+        id: viewportId,
+        index: index,
+        noAnimation: typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION || noAnimation,
+        noSharedState: noSharedState,
+        onTransition: onTransition,
+        onWillTransition: onWillTransition,
+        children: children
+      }))
+    }));
+  }
+});
+var PanelsDecorator = (0, _compose["default"])((0, _Panels.CancelDecorator)({
+  cancel: 'onBack'
+}), _IdProvider["default"], _Skinnable["default"]);
+var Panels = exports.Panels = PanelsDecorator(PanelsBase);
+var _default = exports["default"] = Panels;

package/Panels/Panels.module.css

@@ -0,0 +1,12 @@
+.panels {
+  pointer-events: none;
+}
+.panels > * {
+  pointer-events: auto;
+}
+.panels .viewport {
+  /* CSS Overrides */
+}
+:global(.enact-locale-right-to-left) .panels {
+  direction: ltr;
+}

package/Panels/index.d.ts

@@ -0,0 +1,376 @@
+// Type definitions for limestone/Panels
+
+import { RoutableProps as ui_Routable_RoutableProps } from "@enact/ui/Routable";
+import { SpotlightContainerDecoratorProps as spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps } from "@enact/spotlight/SpotlightContainerDecorator";
+import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import * as React from "react";
+import { RouteProps as ui_Routable_RouteProps } from "@enact/ui/Routable";
+import { Arranger as ui_ViewManager_Arranger } from "@enact/ui/ViewManager";
+
+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;
+
+export interface PanelsProps {
+  /**
+ * Set of functions that control how the panels are transitioned into and out of the
+viewport.
+ */
+  arranger?: ui_ViewManager_Arranger;
+  /**
+   * Hint string read when focusing the back button.
+   */
+  backButtonAriaLabel?: string;
+  /**
+   * Background opacity of the application back button.
+   */
+  backButtonBackgroundOpacity?: "opaque" | "transparent";
+  /**
+   *   to be rendered
+   */
+  children?: React.ReactNode;
+  /**
+   * Hint string read when focusing the application close button.
+   */
+  closeButtonAriaLabel?: string;
+  /**
+   * Background opacity of the application close button.
+   */
+  closeButtonBackgroundOpacity?: "opaque" | "transparent";
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `panels`  - The root class name
+ * *  `viewport`  - The node containing the panel instances
+ */
+  css?: object;
+  /**
+ * Unique identifier for the Panels instance.
+ * 
+ * When defined,  `Panels`  will manage the presentation state of  `Panel`  instances in order
+to restore it when returning to the  `Panel` . See
+   for more details on shared
+state.
+ */
+  id?: string;
+  /**
+   * Index of the active panel
+   */
+  index?: number;
+  /**
+   * Disables panel transitions.
+   */
+  noAnimation?: boolean;
+  /**
+   * Omits the back button.
+   */
+  noBackButton?: boolean;
+  /**
+   * Omits the close button.
+   */
+  noCloseButton?: boolean;
+  /**
+ * Prevents maintaining shared state for framework components within this  `Panels`  instance.
+ * 
+ * When  `false` , each  `Panel`  will track the state of some framework components in order to
+restore that state when the Panel is recreated. For example, the scroll position of a
+ `limestone/Scroller`  within a  `Panel`  will be saved and restored when returning to that
+ `Panel` .
+ * 
+ * This only applied when navigating "back" (to a lower index) to  `Panel` . When navigating
+"forwards" (to a higher index), the  `Panel`  and its contained components will use their
+default state.
+ */
+  noSharedState?: boolean;
+  /**
+   * Called with cancel/back key events.
+   */
+  onBack?: Function;
+  /**
+   * Called when the app close button is clicked.
+   */
+  onClose?: Function;
+  /**
+   * Called once when all panels have completed their transition.
+   */
+  onTransition?: Function;
+  /**
+   * Called once before panels begin their transition.
+   */
+  onWillTransition?: Function;
+}
+/**
+ * Basic Panels component without a default
+ */
+
+export class Panels extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, PanelsProps>
+> {}
+
+export interface PanelProps {
+  /**
+ * The "aria-label" for the Panel.
+ * 
+ * By default, the panel will be labeled by its   .
+When  `aria-label`  is set, it will be used instead to provide an accessibility label for
+the panel.
+ */
+  "aria-label"?: string;
+  /**
+   * Obtains a reference to the root node.
+   */
+  componentRef?: Function | object;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `panel`  - The root class name
+ * *  `body`  - The node containing the panel's children
+ */
+  css?: object;
+  /**
+ * Header for the panel.
+ * 
+ * This is usually passed by the    API by using a
+   component as a child of the Panel.
+ */
+  header?: Header;
+  /**
+ * Hides the body components.
+ * 
+ * When a Panel is used within    this property will
+be set automatically to  `true`  on render and  `false`  after animating into view.
+ */
+  hideChildren?: boolean;
+  /**
+ * Sets the strategy used to automatically focus an element within the panel upon render.
+ * *  "none" - Automatic focus is disabled
+ * *  "last-focused" - The element last focused in the panel with be restored
+ * *  "default-element" - The first spottable component within the body will be focused
+ * *  Custom Selector - A custom CSS selector may also be provided which will be used to find
+the target within the Panel
+ * 
+ * When used within   , this prop may be set by
+ `Panels`  to "default-element" when navigating "forward" to a higher index. This behavior
+may be overridden by setting  `autoFocus`  on the  `Panel`  instance as a child of  `Panels` 
+or by wrapping  `Panel`  with a custom component and overriding the value passed by
+ `Panels` .
+ * ```
+// Panel within CustomPanel will always receive "last-focused"
+const CustomPanel = (props) => <Panel {...props} autoFocus="last-focused" />;
+
+// The first panel will always receive "last-focused". The second panel will receive
+// "default-element" when navigating from the first panel but `autoFocus` will be unset
+// when navigating from the third panel and as a result will default to "last-focused".
+const MyPanels = () => (
+  <Panels>
+    <Panel autoFocus="last-focused" />
+    <Panel />
+    <Panel />
+  </Panels>
+);
+```
+ */
+  autoFocus?: "default-element" | "last-focused" | "none" | string;
+  /**
+ * Prevents the component from restoring any framework shared state.
+ * 
+ * When  `false` , the default, Panel will store state for some framework components in order to
+restore that state when returning to the Panel. Setting this prop to  `true`  will suppress that
+behavior and not store or retrieve any framework component state.
+ */
+  noSharedState?: boolean;
+  /**
+ * The container id for   .
+ * 
+ * When the  `Panel`  is used within   , this prop will be
+generated by  `Panels` . When using the panel alone, you need to specify this prop for restoring focus.
+ */
+  spotlightId?: string;
+}
+/**
+ * A Panel is the standard view container used inside a    view
+manager instance.
+ * 
+ *   will typically contain several instances of these and
+transition between them.
+ */
+
+export class Panel extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, PanelProps>
+> {}
+
+export interface HeaderProps {
+  /**
+   * Sets the hint string read when focusing the back button.
+   */
+  backButtonAriaLabel?: string;
+  /**
+   * Background opacity of the application back button.
+   */
+  backButtonBackgroundOpacity?: "opaque" | "transparent";
+  /**
+   * Centers the contents of the Header.
+   *
+   * This setting does not affect  `slotBefore`  or  `slotAfter` .
+   */
+  centered?: boolean;
+  /**
+   * Children provided are added to the header-components area.
+   *
+   * A space for controls which live in the header, apart from the body of the panel view.
+   */
+  children?: JSX.Element | JSX.Element[];
+  /**
+   * Hint string read when focusing the application close button.
+   */
+  closeButtonAriaLabel?: string;
+  /**
+   * Background opacity of the application close button.
+   */
+  closeButtonBackgroundOpacity?: "opaque" | "transparent";
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `header`  - The root class name
+ */
+  css?: object;
+  /**
+   * Determines what triggers the header content to start its animation.
+   */
+  marqueeOn?: "focus" | "hover" | "render";
+  /**
+   * Omits the back button.
+   */
+  noBackButton?: boolean;
+  /**
+   * Omits the close button.
+   */
+  noCloseButton?: boolean;
+  /**
+   * Omits the subtitle area.
+   */
+  noSubtitle?: boolean;
+  /**
+   * Called with cancel/back key events.
+   */
+  onBack?: Function;
+  /**
+   * Called when the app close button is clicked.
+   */
+  onClose?: Function;
+  /**
+   * Adds shadow to the text contents.
+   */
+  shadowed?: boolean;
+  /**
+ * A location for arbitrary elements to be placed above the title
+ * 
+ * This is a   , so it can be used as a tag-name inside
+this component.
+ * ```
+<Header>
+	<slotAbove><Button /></slotAbove>
+	<title>My Title</title>
+</Header>
+```
+ */
+  slotAbove?: React.ReactNode;
+  /**
+ * A location for arbitrary elements to be placed to the right the title in LTR locales and
+to the left in RTL locales
+ * 
+ * This is a   , so it can be used as a tag-name inside
+this component.
+ * ```
+<Header>
+	<title>My Title</title>
+	<slotAfter><Button /></slotAfter>
+</Header>
+```
+ */
+  slotAfter?: React.ReactNode;
+  /**
+ * A location for arbitrary elements to be placed to the left the title in LTR locales and
+to the right in RTL locales
+ * 
+ * This is a   , so it can be used as a tag-name inside
+this component.
+ * ```
+<Header>
+	<slotBefore><Button /></slotBefore>
+	<title>My Title</title>
+</Header>
+```
+ */
+  slotBefore?: React.ReactNode;
+  /**
+ * Text displayed below the title.
+ * 
+ * This is a   , so it can be used as a tag-name inside
+this component.
+If    is  `true` , this prop is ignored.
+ */
+  subtitle?: string | string[];
+  /**
+ * Title of the header.
+ * 
+ * This is a   , so it can be used as a tag-name inside
+this component.
+ * 
+ * Example:
+ * ```
+ <Header>
+ 	<title>Example Header Title</title>
+ 	<subtitle>The Adventure Continues</subtitle>
+ </Header>
+```
+ */
+  title?: string | string[];
+  /**
+   * Set the type of header to be used.
+   */
+  type?: "compact" | "mini" | "standard" | "wizard";
+}
+/**
+ * A header component for a Panel with a  `title`  and  `subtitle` , supporting several configurable
+   for components.
+ */
+
+export class Header extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, HeaderProps>
+> {}
+
+export interface RoutableProps extends ui_Routable_RoutableProps {}
+export function Routable<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & RoutableProps>;
+
+export interface RouteProps extends ui_Routable_RouteProps {}
+/**
+ * Used with    to define the  `path`  segment and the
+ `component`  to render.
+ */
+
+export class Route extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, RouteProps>
+> {}
+
+export interface PanelDecoratorProps
+  extends Merge<
+    Merge<
+      spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps,
+      ui_Slottable_SlottableProps
+    >,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function PanelDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & PanelDecoratorProps>;
+
+export default Panels;