@moda/om 15.10.0 → 15.11.0

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import 'focus-visible';
 export declare const tokens: {
     colors: {
         all: {
+            coal: string;
             ink: string;
             cement: string;
             fog: string;
@@ -60,6 +61,7 @@ export declare const tokens: {
             "dark-fuchsia": string;
         };
         greyscale: {
+            coal: string;
             ink: string;
             cement: string;
             fog: string;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as React$2 from 'react';
-import React__default, { useState, PureComponent, useRef, useEffect, Children, isValidElement, cloneElement, createContext, useContext, useCallback, useReducer, useMemo, forwardRef } from 'react';
+import React__default, { useState, useEffect, PureComponent, useRef, Children, isValidElement, cloneElement, createContext, useContext, useCallback, useReducer, useMemo, forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 import require$$1, { createPortal } from 'react-dom';
 
@@ -327,6 +327,7 @@ colors.colors = void 0; // THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
 
 colors.colors = {
   "all": {
+    "coal": "rgb(0, 0, 0)",
     "ink": "rgb(25, 26, 27)",
     "cement": "rgb(101, 101, 102)",
     "fog": "rgb(151, 152, 153)",
@@ -384,6 +385,7 @@ colors.colors = {
     "dark-fuchsia": "rgb(180, 60, 160)"
   },
   "greyscale": {
+    "coal": "rgb(0, 0, 0)",
     "ink": "rgb(25, 26, 27)",
     "cement": "rgb(101, 101, 102)",
     "fog": "rgb(151, 152, 153)",
@@ -837,7 +839,7 @@ cs.get.hsl = function (string) {
     return null;
   }
 
-  var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
+  var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?[\d\.]+)\s*)?\)$/;
   var match = string.match(hsl);
 
   if (match) {
@@ -938,12 +940,14 @@ var __assign$9 = commonjsGlobal && commonjsGlobal.__assign || function () {
   return __assign$9.apply(this, arguments);
 };
 
-var __spreadArray = commonjsGlobal && commonjsGlobal.__spreadArray || function (to, from) {
-  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
-    to[j] = from[i];
+var __spreadArray = commonjsGlobal && commonjsGlobal.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
   }
-
-  return to;
+  return to.concat(ar || Array.prototype.slice.call(from));
 };
 
 Object.defineProperty(helpers, "__esModule", {
@@ -979,7 +983,7 @@ var color = function color(name, alpha) {
   var _a;
 
   var color = colors_1.colors.all[name];
-  return alpha != null ? colorString.to.rgb(__spreadArray(__spreadArray([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || []), [alpha])) : color;
+  return alpha != null ? colorString.to.rgb(__spreadArray(__spreadArray([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
 };
 
 helpers.color = color;
@@ -2957,21 +2961,32 @@ var FocusLock = /*#__PURE__*/React$2.forwardRef(function FocusLockUI(props, pare
       onDeactivationCallback(observed.current);
     }
   }, [onDeactivationCallback]);
+  useEffect(function () {
+    if (!disabled) {
+      // cleanup return focus on trap deactivation
+      // sideEffect/returnFocus should happen by this time
+      originalFocusedElement.current = null;
+    }
+  }, []);
   var returnFocus = React$2.useCallback(function (allowDefer) {
-    var current = originalFocusedElement.current;
+    var returnFocusTo = originalFocusedElement.current;
 
-    if (Boolean(shouldReturnFocus) && current && current.focus) {
-      var focusOptions = _typeof(shouldReturnFocus) === 'object' ? shouldReturnFocus : undefined;
-      originalFocusedElement.current = null;
+    if (returnFocusTo && returnFocusTo.focus) {
+      var howToReturnFocus = typeof shouldReturnFocus === 'function' ? shouldReturnFocus(returnFocusTo) : shouldReturnFocus;
 
-      if (allowDefer) {
-        // React might return focus after update
-        // it's safer to defer the action
-        Promise.resolve().then(function () {
-          return current.focus(focusOptions);
-        });
-      } else {
-        current.focus(focusOptions);
+      if (Boolean(howToReturnFocus)) {
+        var focusOptions = _typeof(howToReturnFocus) === 'object' ? howToReturnFocus : undefined;
+        originalFocusedElement.current = null;
+
+        if (allowDefer) {
+          // React might return focus after update
+          // it's safer to defer the action
+          Promise.resolve().then(function () {
+            return returnFocusTo.focus(focusOptions);
+          });
+        } else {
+          returnFocusTo.focus(focusOptions);
+        }
       }
     }
   }, [shouldReturnFocus]); // MEDIUM CALLBACKS
@@ -3315,7 +3330,13 @@ var getAllAffectedNodes = function getAllAffectedNodes(node) {
   }, []);
 };
 
-var isElementHidden = function isElementHidden(computedStyle) {
+var isElementHidden = function isElementHidden(node) {
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+
+  var computedStyle = window.getComputedStyle(node, null);
+
   if (!computedStyle || !computedStyle.getPropertyValue) {
     return false;
   }
@@ -3324,7 +3345,7 @@ var isElementHidden = function isElementHidden(computedStyle) {
 };
 
 var isVisibleUncached = function isVisibleUncached(node, checkParent) {
-  return !node || node === document || node && node.nodeType === Node.DOCUMENT_NODE || !isElementHidden(window.getComputedStyle(node, null)) && checkParent(node.parentNode && node.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? node.parentNode.host : node.parentNode);
+  return !node || node === document || node && node.nodeType === Node.DOCUMENT_NODE || !isElementHidden(node) && checkParent(node.parentNode && node.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? node.parentNode.host : node.parentNode);
 };
 
 var isVisibleCached = function isVisibleCached(visibilityCache, node) {
@@ -3903,13 +3924,13 @@ var onWindowBlur = function onWindowBlur() {
 };
 
 var attachHandler = function attachHandler() {
-  document.addEventListener('focusin', onTrap, true);
+  document.addEventListener('focusin', onTrap);
   document.addEventListener('focusout', onBlur);
   window.addEventListener('blur', onWindowBlur);
 };
 
 var detachHandler = function detachHandler() {
-  document.removeEventListener('focusin', onTrap, true);
+  document.removeEventListener('focusin', onTrap);
   document.removeEventListener('focusout', onBlur);
   window.removeEventListener('blur', onWindowBlur);
 };
@@ -4150,6 +4171,11 @@ var locationCouldBeScrolled = function locationCouldBeScrolled(axis, node) {
   var current = node;
 
   do {
+    // Skip over shadow root
+    if (typeof ShadowRoot !== "undefined" && current instanceof ShadowRoot) {
+      current = current.host;
+    }
+
     var isScrollable = elementCouldBeScrolled(axis, current);
 
     if (isScrollable) {
@@ -8155,7 +8181,7 @@ var Exit20 = function Exit20(_a) {
   }, /*#__PURE__*/React$2.createElement("g", {
     id: "Exit_20_svg__Exit/20"
   }, /*#__PURE__*/React$2.createElement("path", {
-    id: "Exit_20_svg__Combined_Shape",
+    id: "Exit_20_svg__Combined Shape",
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9.29293 10L2.64648 3.35356L3.35359 2.64645L10 9.2929L16.6465 2.64645L17.3536 3.35356L10.7071 10L17.3536 16.6465L16.6465 17.3536L10 10.7071L3.35359 17.3536L2.64648 16.6465L9.29293 10Z"
@@ -8574,30 +8600,30 @@ var useClickOutside = function useClickOutside(ref, onClickOutside) {
   });
 };
 
-var Mode;
+var Mode$1;
 
 (function (Mode) {
   Mode[Mode["Resting"] = 0] = "Resting";
   Mode[Mode["Open"] = 1] = "Open";
-})(Mode || (Mode = {}));
+})(Mode$1 || (Mode$1 = {}));
 
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case 'OPEN':
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        mode: Mode.Open
+        mode: Mode$1.Open
       });
 
     case 'CLOSE':
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        mode: Mode.Resting
+        mode: Mode$1.Resting
       });
 
     case 'SELECT':
       return _objectSpread2(_objectSpread2({}, state), {}, {
         value: action.payload.value,
         focused: undefined,
-        mode: Mode.Resting
+        mode: Mode$1.Resting
       });
 
     case 'FOCUS':
@@ -8616,7 +8642,7 @@ var useSelect = function useSelect(_ref) {
   var _useReducer = useReducer(reducer, {
     value: initialValue,
     focused: _typeof(initialValue) == 'object' ? initialValue === null || initialValue === void 0 ? void 0 : initialValue[0] : initialValue,
-    mode: Mode.Resting
+    mode: Mode$1.Resting
   }),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -8658,7 +8684,7 @@ var useSelect = function useSelect(_ref) {
   return {
     state: state,
     dispatch: dispatch,
-    Mode: Mode,
+    Mode: Mode$1,
     selectRef: selectRef
   };
 };
@@ -11226,8 +11252,18 @@ var Paginator = function Paginator(_ref) {
   })));
 };
 
-var _excluded$b = ["className", "children", "content", "open", "anchor", "zIndex"];
+var _excluded$b = ["className", "children", "content", "open", "anchor", "zIndex", "autoPreview"];
 var POPOVER_MOUSEOUT_DELAY_MS = 200;
+var Mode;
+
+(function (Mode) {
+  Mode["Open"] = "open";
+  Mode["Closing"] = "closing";
+  Mode["AutoOpening"] = "autoOpening";
+  Mode["AutoOpen"] = "autoOpen";
+  Mode["Closed"] = "closed";
+})(Mode || (Mode = {}));
+
 var Popover = function Popover(_ref) {
   var className = _ref.className,
       children = _ref.children,
@@ -11237,37 +11273,78 @@ var Popover = function Popover(_ref) {
       _ref$anchor = _ref.anchor,
       anchor = _ref$anchor === void 0 ? 'topLeft' : _ref$anchor,
       zIndex = _ref.zIndex,
+      _ref$autoPreview = _ref.autoPreview,
+      autoPreview = _ref$autoPreview === void 0 ? false : _ref$autoPreview,
       rest = _objectWithoutProperties(_ref, _excluded$b);
 
-  var _useState = useState(open),
+  var _useState = useState(function () {
+    if (open) {
+      return Mode.Open;
+    }
+
+    if (autoPreview) {
+      return Mode.AutoOpening;
+    }
+
+    return Mode.Closed;
+  }),
       _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1];
+      mode = _useState2[0],
+      setMode = _useState2[1];
 
   var timeout = useRef(null);
   var handleMouseEnter = useCallback(function () {
     if (!open) {
       timeout.current && clearTimeout(timeout.current);
-      setOpen(true);
+      setMode(Mode.Open);
     }
   }, [open]);
   var handleMouseLeave = useCallback(function () {
     if (!open) {
       timeout.current = setTimeout(function () {
-        return setOpen(false);
+        return setMode(Mode.Closing);
       }, POPOVER_MOUSEOUT_DELAY_MS);
     }
   }, [open]);
   useEffect(function () {
-    return setOpen(open);
-  }, [open]);
+    if (mode !== Mode.Closing) return;
+    var closingTimeout = setTimeout(function () {
+      return setMode(Mode.Closed);
+    }, 750);
+    return function () {
+      return clearTimeout(closingTimeout);
+    };
+  }, [mode]);
+  useEffect(function () {
+    if (mode !== Mode.AutoOpening) return;
+    var openingTimeout = setTimeout(function () {
+      return setMode(Mode.AutoOpen);
+    }, 1000);
+    return function () {
+      return clearTimeout(openingTimeout);
+    };
+  }, [mode]);
+  useEffect(function () {
+    if (mode !== Mode.AutoOpen) return;
+    var stayingTimeout = setTimeout(function () {
+      return setMode(Mode.Closing);
+    }, 5000);
+    return function () {
+      return clearTimeout(stayingTimeout);
+    };
+  }, [mode]);
+  var isOpen = mode === Mode.AutoOpen || mode === Mode.Open || mode === Mode.Closing;
   return /*#__PURE__*/React__default.createElement("div", _extends$3({
     className: classNames("Popover Popover--anchor-".concat(anchor), className),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
   }, rest), /*#__PURE__*/React__default.createElement("span", {
     className: "Popover__trigger"
-  }, isOpen && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }, isOpen && /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('Popover__box', {
+      'Popover__box--closing': mode === Mode.Closing
+    })
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "Popover__caret",
     style: {
       zIndex: zIndex != null ? zIndex + 1 : undefined
@@ -11571,10 +11648,10 @@ var PasswordInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "PasswordInput"
   }, /*#__PURE__*/React__default.createElement(Field, _extends$3({
+    className: "PasswordInput__editor",
+    ref: ref,
     type: passwordShown ? 'text' : 'password'
-  }, rest, {
-    ref: ref
-  })), /*#__PURE__*/React__default.createElement(Clickable, {
+  }, rest)), /*#__PURE__*/React__default.createElement(Clickable, {
     className: "PasswordInput__password-action",
     onClick: togglePasswordVisiblity,
     type: "button"