@enact/limestone 1.3.0

package/internal/Panels/useAutoFocus.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AutoFocusDecorator = void 0;
+exports.useAutoFocus = useAutoFocus;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["autoFocus", "componentRef", "hideChildren"];
+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 isSelector = function isSelector(autoFocus) {
+  return autoFocus && autoFocus !== 'last-focused' && autoFocus !== 'default-element' && autoFocus !== 'none';
+};
+function configureContainer(ref, autoFocus, spotlightId) {
+  if (ref.current.id === spotlightId && ref.current.autoFocus === autoFocus) return;
+  ref.current.id = spotlightId;
+  ref.current.autoFocus = autoFocus;
+
+  // If autoFocus is a selector, we're using default-element but need to update the selector
+  // for that element in the container config
+  if (isSelector(autoFocus)) {
+    _spotlight["default"].set(spotlightId, {
+      defaultElement: autoFocus
+    });
+  }
+}
+function useAutoFocus(_ref) {
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? 'last-focused' : _ref$autoFocus,
+    hideChildren = _ref.hideChildren;
+  var ref = (0, _react.useRef)({
+    id: null,
+    autoFocus: null
+  });
+  return (0, _react.useCallback)(function (node) {
+    if (!node) return;
+
+    // FIXME: This is a candidate to move to the decorator once hooks have been fully
+    // adopted and we can configure SpotlightContainerDecorator with the current props
+    var spotlightId = node.dataset.spotlightId;
+    configureContainer(ref, autoFocus, spotlightId);
+
+    // In order to spot the body components, we defer spotting until !hideChildren. If the
+    // Panel opts out of hideChildren support by explicitly setting it to false, it'll spot
+    // on first render.
+    if (!hideChildren && autoFocus !== 'none' && !_spotlight["default"].getCurrent() && !_spotlight["default"].isPaused()) {
+      // For the purpose of imperatively focusing the Panel contents, we find the target
+      // within the panel using a (currently) private Spotlight API with the enterTo parameter
+      // to influence which configuration is used to find said target.
+      var enterTo = isSelector(autoFocus) || autoFocus === 'default-element' ? 'default-element' : 'last-focused';
+      _spotlight["default"].focus(spotlightId, {
+        enterTo: enterTo
+      });
+    }
+  }, [autoFocus, hideChildren, ref]);
+}
+var AutoFocusDecorator = exports.AutoFocusDecorator = (0, _hoc["default"])(function (config, Wrapped) {
+  // eslint-disable-next-line no-shadow
+  function AutoFocusDecorator(_ref2) {
+    var _ref2$autoFocus = _ref2.autoFocus,
+      autoFocus = _ref2$autoFocus === void 0 ? 'last-focused' : _ref2$autoFocus,
+      componentRef = _ref2.componentRef,
+      hideChildren = _ref2.hideChildren,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    var hook = useAutoFocus({
+      autoFocus: autoFocus,
+      hideChildren: hideChildren
+    });
+    var ref = (0, _useChainRefs["default"])(componentRef, hook);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, rest), {}, {
+      componentRef: ref,
+      hideChildren: hideChildren
+    }));
+  }
+  AutoFocusDecorator.propTypes = {
+    autoFocus: _propTypes2["default"].string,
+    componentRef: _propTypes["default"].ref,
+    hideChildren: _propTypes2["default"].bool
+  };
+  return AutoFocusDecorator;
+});
+var _default = exports["default"] = useAutoFocus;

package/internal/Panels/useFocusOnTransition.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.useFocusOnTransition = useFocusOnTransition;
+var _handle = _interopRequireWildcard(require("@enact/core/handle"));
+var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _react = require("react");
+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); }
+var transitionHandlers = {
+  onTransition: (0, _handle["default"])((0, _handle.forwardWithPrevent)('onTransition'), function (ev, _ref, _ref2) {
+    var spotlightId = _ref.spotlightId;
+    var current = _ref2.current;
+    current.timerId = setTimeout(function () {
+      var currentSpotlight = _spotlight["default"].getCurrent();
+      if (spotlightId && !currentSpotlight) {
+        _spotlight["default"].focus(spotlightId);
+      }
+    }, 40);
+  }),
+  onWillTransition: (0, _handle["default"])((0, _handle.forwardWithPrevent)('onWillTransition'), function (ev, props, _ref3) {
+    var current = _ref3.current;
+    clearTimeout(current.timerId);
+    current.timerId = null;
+    var currentSpotlight = _spotlight["default"].getCurrent();
+    if (!_spotlight["default"].getPointerMode() && currentSpotlight) {
+      currentSpotlight.blur();
+    }
+  })
+};
+function useFocusOnTransition(config) {
+  var _useRef = (0, _react.useRef)({
+      timerId: null
+    }),
+    current = _useRef.current;
+  var handlers = (0, _useHandlers["default"])(transitionHandlers, config, {
+    current: current
+  });
+  return handlers;
+}
+var _default = exports["default"] = useFocusOnTransition;

package/internal/Panels/useToggleRole.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.useToggleRole = useToggleRole;
+var _react = require("react");
+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 useToggleRole() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'region' : _ref$role,
+    _ref$event = _ref.event,
+    event = _ref$event === void 0 ? 'onWillTransition' : _ref$event;
+  var ref = (0, _react.useRef)(null);
+  var handler = (0, _react.useCallback)(function () {
+    if (ref.current) {
+      // To workaround not reading title when panel transition ends
+      ref.current.setAttribute('role', null);
+      ref.current.setAttribute('role', role);
+    }
+  }, [ref, role]);
+  return _defineProperty({
+    ref: ref
+  }, event, handler);
+}
+var _default = exports["default"] = useToggleRole;

package/internal/Panels/util.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSharedProps = exports.deleteSharedProps = exports.ContextAsDefaults = void 0;
+exports.useContextAsDefaults = useContextAsDefaults;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _react = require("react");
+var _pick = _interopRequireDefault(require("ramda/src/pick"));
+var _omit = _interopRequireDefault(require("ramda/src/omit"));
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+var PanelsStateContext = /*#__PURE__*/(0, _react.createContext)(null);
+var sharedContextProps = ['backButtonAriaLabel', 'backButtonBackgroundOpacity', 'closeButtonAriaLabel', 'closeButtonBackgroundOpacity', 'noBackButton', 'noCloseButton', 'onBack', 'onClose'];
+
+// Given a full collection of props, return just the props from the shared list.
+var getSharedProps = exports.getSharedProps = function getSharedProps(props) {
+  return (0, _pick["default"])(sharedContextProps, props);
+};
+
+// Remove these shared props from the props object
+var deleteSharedProps = exports.deleteSharedProps = function deleteSharedProps(props) {
+  sharedContextProps.forEach(function (key) {
+    delete props[key];
+  });
+};
+function useContextAsDefaults(props) {
+  var ctx = (0, _react.use)(PanelsStateContext);
+  var contextProps = _objectSpread(_objectSpread({}, ctx), getSharedProps(props));
+  var provideContextAsDefaults = function provideContextAsDefaults(children) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PanelsStateContext, {
+      value: contextProps,
+      children: children
+    });
+  };
+  return {
+    contextProps: contextProps,
+    provideContextAsDefaults: provideContextAsDefaults
+  };
+}
+var defaultConfig = {
+  // Array of prop names to add to the Wrapped component.
+  props: []
+};
+var ContextAsDefaults = exports.ContextAsDefaults = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
+  // eslint-disable-next-line no-shadow
+  return function ContextAsDefaults(props) {
+    var sharedProps = getSharedProps(props);
+    var _useContextAsDefaults = useContextAsDefaults(props, sharedProps),
+      contextProps = _useContextAsDefaults.contextProps,
+      provideContextAsDefaults = _useContextAsDefaults.provideContextAsDefaults;
+
+    // The following generates a complete list of all the props expected by Wrapped
+    // Using `pick`, add the specifically requested shared context props
+    // Using `omit`, exclude all the shared props
+    return provideContextAsDefaults(/*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, (0, _pick["default"])(config.props, contextProps)), (0, _omit["default"])(sharedContextProps, props))));
+  };
+});