@moda/om 19.8.2 → 20.0.0

package/README.md

@@ -70,7 +70,6 @@ Once you want to commit something, `git add` it then run the commitizen CLI. If
 When you're happy push to a feature branch and once the code is in `main`, semantic release will detect how to version it and automatically publish it to NPM.
 
 - **Netlify deploy config** is located here: https://app.netlify.com/sites/moda-om-storybook/configuration/deploys
-  
 - **Netlify site overview**: https://app.netlify.com/sites/moda-om-storybook/overview
 
 (settings specified in netlify.toml override any corresponding settings in the Netlify UI)
@@ -103,7 +102,7 @@ Import and use the mixins/functions library:
 @import '~@moda/om';
 
 body {
-  @include text(body1);
+  @include om.text(body1);
   padding: spacing(2, 4);
 }
 ```

package/dist/index.cjs.js

@@ -1480,7 +1480,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign$a = function() {
@@ -3150,7 +3150,8 @@ var FocusLock = /*#__PURE__*/React__namespace.forwardRef(function FocusLockUI(pr
     onActivation: onActivation,
     onDeactivation: onDeactivation,
     returnFocus: returnFocus,
-    focusOptions: focusOptions
+    focusOptions: focusOptions,
+    noFocusGuards: noFocusGuards
   }), /*#__PURE__*/React__namespace.createElement(Container, _extends({
     ref: mergedRef
   }, lockProps, {
@@ -4339,8 +4340,12 @@ var isFreeFocus = function isFreeFocus() {
 };
 var lastActiveTrap = null;
 var lastActiveFocus = null;
+var tryRestoreFocus = function tryRestoreFocus() {
+  return null;
+};
 var lastPortaledElement = null;
 var focusWasOutsideWindow = false;
+var windowFocused = false;
 var defaultWhitelist = function defaultWhitelist() {
   return true;
 };
@@ -4392,6 +4397,14 @@ var withinHost = function withinHost(activeElement, workingArea) {
     return checkInHost(activeElement, area, area);
   });
 };
+var getNodeFocusables = function getNodeFocusables(nodes) {
+  return getFocusableNodes(nodes, new Map());
+};
+var isNotFocusable = function isNotFocusable(node) {
+  return !getNodeFocusables([node.parentNode]).some(function (el) {
+    return el.node === node;
+  });
+};
 var activateTrap = function activateTrap() {
   var result = false;
   if (lastActiveTrap) {
@@ -4401,13 +4414,34 @@ var activateTrap = function activateTrap() {
       autoFocus = _lastActiveTrap.autoFocus,
       shards = _lastActiveTrap.shards,
       crossFrame = _lastActiveTrap.crossFrame,
-      focusOptions = _lastActiveTrap.focusOptions;
+      focusOptions = _lastActiveTrap.focusOptions,
+      noFocusGuards = _lastActiveTrap.noFocusGuards;
     var workingNode = observed || lastPortaledElement && lastPortaledElement.portaledElement;
+    if (focusOnBody() && lastActiveFocus) {
+      if (!document.body.contains(lastActiveFocus) || isNotFocusable(lastActiveFocus)) {
+        lastActiveFocus = null;
+        var newTarget = tryRestoreFocus();
+        if (newTarget) {
+          newTarget.focus();
+        }
+      }
+    }
     var activeElement = document && document.activeElement;
     if (workingNode) {
       var workingArea = [workingNode].concat(shards.map(extractRef$2).filter(Boolean));
+      var shouldForceRestoreFocus = function shouldForceRestoreFocus() {
+        if (!focusWasOutside(crossFrame) || !noFocusGuards || !lastActiveFocus || windowFocused) {
+          return false;
+        }
+        var nodes = getNodeFocusables(workingArea);
+        var lastIndex = nodes.findIndex(function (_ref) {
+          var node = _ref.node;
+          return node === lastActiveFocus;
+        });
+        return lastIndex === 0 || lastIndex === nodes.length - 1;
+      };
       if (!activeElement || focusWhitelisted(activeElement)) {
-        if (persistentFocus || focusWasOutside(crossFrame) || !isFreeFocus() || !lastActiveFocus && autoFocus) {
+        if (persistentFocus || shouldForceRestoreFocus() || !isFreeFocus() || !lastActiveFocus && autoFocus) {
           if (workingNode && !(focusInside(workingArea) || activeElement && withinHost(activeElement, workingArea) || focusIsPortaledPair(activeElement))) {
             if (document && !lastActiveFocus && activeElement && !autoFocus) {
               if (activeElement.blur) {
@@ -4423,22 +4457,23 @@ var activateTrap = function activateTrap() {
           }
           focusWasOutsideWindow = false;
           lastActiveFocus = document && document.activeElement;
+          tryRestoreFocus = captureFocusRestore(lastActiveFocus);
         }
       }
       if (document && activeElement !== document.activeElement && document.querySelector('[data-focus-auto-guard]')) {
         var newActiveElement = document && document.activeElement;
         var allNodes = expandFocusableNodes(workingArea);
-        var focusedIndex = allNodes.map(function (_ref) {
-          var node = _ref.node;
+        var focusedIndex = allNodes.map(function (_ref2) {
+          var node = _ref2.node;
           return node;
         }).indexOf(newActiveElement);
         if (focusedIndex > -1) {
-          allNodes.filter(function (_ref2) {
-            var guard = _ref2.guard,
-              node = _ref2.node;
+          allNodes.filter(function (_ref3) {
+            var guard = _ref3.guard,
+              node = _ref3.node;
             return guard && node.dataset.focusAutoGuard;
-          }).forEach(function (_ref3) {
-            var node = _ref3.node;
+          }).forEach(function (_ref4) {
+            var node = _ref4.node;
             return node.removeAttribute('tabIndex');
           });
           autoGuard(focusedIndex, allNodes.length, +1, allNodes);
@@ -4471,7 +4506,11 @@ var FocusWatcher = function FocusWatcher() {
 process.env.NODE_ENV !== "production" ? {
   children: PropTypes.node.isRequired
 } : {};
+var onWindowFocus = function onWindowFocus() {
+  windowFocused = true;
+};
 var onWindowBlur = function onWindowBlur() {
+  windowFocused = false;
   focusWasOutsideWindow = 'just';
   deferAction(function () {
     focusWasOutsideWindow = 'meanwhile';
@@ -4480,16 +4519,18 @@ var onWindowBlur = function onWindowBlur() {
 var attachHandler = function attachHandler() {
   document.addEventListener('focusin', onTrap);
   document.addEventListener('focusout', onBlur);
+  window.addEventListener('focus', onWindowFocus);
   window.addEventListener('blur', onWindowBlur);
 };
 var detachHandler = function detachHandler() {
   document.removeEventListener('focusin', onTrap);
   document.removeEventListener('focusout', onBlur);
+  window.removeEventListener('focus', onWindowFocus);
   window.removeEventListener('blur', onWindowBlur);
 };
 function reducePropsToState(propsList) {
-  return propsList.filter(function (_ref5) {
-    var disabled = _ref5.disabled;
+  return propsList.filter(function (_ref6) {
+    var disabled = _ref6.disabled;
     return !disabled;
   });
 }
@@ -4512,8 +4553,8 @@ function handleStateChangeOnClient(traps) {
   lastActiveTrap = trap;
   if (lastTrap && !sameTrap) {
     lastTrap.onDeactivation();
-    if (!traps.filter(function (_ref6) {
-      var id = _ref6.id;
+    if (!traps.filter(function (_ref7) {
+      var id = _ref7.id;
       return id === lastTrap.id;
     }).length) {
       lastTrap.returnFocus(!trap);
@@ -7455,7 +7496,7 @@ var Checkbox = function Checkbox(_ref) {
   }, [checked]);
   var handleChange = React.useCallback(function (event) {
     if (typeof checked === 'undefined') setIsChecked(event.currentTarget.checked);
-    onChange && onChange(event);
+    onChange === null || onChange === void 0 || onChange(event);
   }, [onChange, checked]);
   return /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
@@ -7555,10 +7596,10 @@ var ColorSwatch = function ColorSwatch(_ref) {
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded$u);
   var handleClick = React.useCallback(function (_event) {
-    onClick && onClick(color, title);
+    onClick === null || onClick === void 0 || onClick(color, title);
   }, [color, title, onClick]);
   var handleMouseEnter = React.useCallback(function (_event) {
-    onMouseEnter && onMouseEnter(color, title);
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(color, title);
   }, [color, title, onMouseEnter]);
   var backgroundColor = (_SKU_COLORS = SKU_COLORS[color]) !== null && _SKU_COLORS !== void 0 ? _SKU_COLORS : color;
   var isWhite = !backgroundUrl && (!backgroundColor.startsWith('#') || backgroundColor.toLowerCase() === '#fff' || backgroundColor.toLowerCase() === '#ffffff');
@@ -10559,7 +10600,7 @@ var SelectOption = function SelectOption(_ref) {
   var ref = React.useRef(null);
   var handleClick = React.useCallback(function (event) {
     event.preventDefault();
-    !option.disabled && onClick(option);
+    if (!option.disabled) onClick(option);
   }, [onClick, option]);
   React.useEffect(function () {
     if (active && ref.current) {
@@ -10621,11 +10662,12 @@ var SelectOptions = function SelectOptions(_ref) {
   var ref = React.useRef(null);
   React.useEffect(function () {
     if (autoFocus) {
-      ref.current && ref.current.focus();
+      var _ref$current;
+      (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
     }
   }, [autoFocus]);
   useUpdateEffect(function () {
-    onFocus && activeOption && onFocus(activeOption);
+    if (activeOption) onFocus === null || onFocus === void 0 || onFocus(activeOption);
   }, [activeOption, onFocus]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('SelectOptions', className)
@@ -10748,7 +10790,7 @@ var useSelect = function useSelect(_ref) {
     };
   }, [handleKeyDown]);
   useUpdateEffect(function () {
-    value && dispatch({
+    if (value) dispatch({
       type: 'SELECT',
       payload: {
         value: value
@@ -10821,7 +10863,7 @@ var Select = function Select(_ref) {
     });
   }, [Mode, dispatch, state]);
   var handleAutofill = React.useCallback(function (value) {
-    value && dispatch({
+    if (value) dispatch({
       type: 'SELECT',
       payload: {
         value: value
@@ -11011,7 +11053,7 @@ var MultiSelect = function MultiSelect(_ref) {
     });
   }, [Mode, dispatch, state]);
   React.useEffect(function () {
-    onChange && onChange(values);
+    onChange === null || onChange === void 0 || onChange(values);
   }, [onChange, values]);
   return /*#__PURE__*/React.createElement("div", _extends$1({
     id: idRef ? "MultiSelect--".concat(idRef) : undefined,
@@ -11895,7 +11937,7 @@ var Popover = function Popover(_ref) {
   }, [smoothTransitioning]);
   var handleMouseEnter = React.useCallback(function () {
     if (!open) {
-      timeout.current && clearTimeout(timeout.current);
+      if (timeout.current) clearTimeout(timeout.current);
       handleOpen();
     }
   }, [handleOpen, open]);
@@ -11939,7 +11981,11 @@ var Popover = function Popover(_ref) {
   }, [handleClose, mode, smoothTransitioning]);
   React.useEffect(function () {
     if (open === undefined) return;
-    open ? handleOpen() : handleClose();
+    if (open) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
   }, [handleClose, handleOpen, open]);
   var isOpen = mode === Mode.AutoOpen || mode === Mode.Opening || mode === Mode.Open || mode === Mode.Closing;
   return /*#__PURE__*/React.createElement("div", _extends$1({