@moda/om 21.6.9 → 21.6.10

package/dist/index.esm.js

@@ -3019,9 +3019,11 @@ var FocusLock = /*#__PURE__*/forwardRef(function FocusLockUI(props, parentRef) {
       observed: observed,
       shards: shards,
       enabled: !disabled,
-      active: isActive.current
+      get active() {
+        return isActive.current;
+      }
     };
-  }, [disabled, isActive.current, shards, realObserved]);
+  }, [disabled, isActive, shards, observed]);
   return /*#__PURE__*/React__default.createElement(Fragment, null, hasLeadingGuards && [/*#__PURE__*/
   React__default.createElement("div", {
     key: "guard-first",
@@ -3094,6 +3096,8 @@ var extractRef$2 = function extractRef(ref) {
 var effectCar = createSidecarMedium();
 var focusHiddenMarker = 'data-focus-on-hidden';
 
+__assign$a({}, RemoveScroll.classNames);
+
 var PREVENT_SCROLL = {
   preventScroll: true
 };
@@ -3101,18 +3105,21 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
   var _a = React.useState(false),
     lockProps = _a[0],
     setLockProps = _a[1];
+  var _b = React.useState(null),
+    activeNode = _b[0],
+    setActiveNode = _b[1];
   var children = props.children,
     autoFocus = props.autoFocus,
     shards = props.shards,
     crossFrame = props.crossFrame,
-    _b = props.enabled,
-    enabled = _b === void 0 ? true : _b,
-    _c = props.scrollLock,
-    scrollLock = _c === void 0 ? true : _c,
-    _d = props.focusLock,
-    focusLock = _d === void 0 ? true : _d,
-    _e = props.returnFocus,
-    returnFocus = _e === void 0 ? true : _e,
+    _c = props.enabled,
+    enabled = _c === void 0 ? true : _c,
+    _d = props.scrollLock,
+    scrollLock = _d === void 0 ? true : _d,
+    _e = props.focusLock,
+    focusLock = _e === void 0 ? true : _e,
+    _f = props.returnFocus,
+    returnFocus = _f === void 0 ? true : _f,
     inert = props.inert,
     allowPinchZoom = props.allowPinchZoom,
     sideCar = props.sideCar,
@@ -3124,10 +3131,7 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     gapMode = props.gapMode,
     rest = __rest$a(props, ["children", "autoFocus", "shards", "crossFrame", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as", "gapMode"]);
   var SideCar = sideCar;
-  var onActivation = lockProps.onActivation,
-    onDeactivation = lockProps.onDeactivation,
-    restProps = __rest$a(lockProps, ["onActivation", "onDeactivation"]);
-  var appliedLockProps = __assign$a(__assign$a({}, restProps), {
+  var appliedLockProps = __assign$a(__assign$a({}, lockProps), {
     as: as,
     style: style,
     sideCar: sideCar,
@@ -3137,10 +3141,16 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     inert: inert,
     enabled: enabled && scrollLock
   });
+  var onActivation = React.useCallback(function (node) {
+    setActiveNode(node);
+  }, []);
+  var onDeactivation = React.useCallback(function () {
+    setActiveNode(null);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FocusLock, {
     ref: parentRef,
     sideCar: sideCar,
-    disabled: !(lockProps && enabled && focusLock),
+    disabled: !(enabled && focusLock),
     returnFocus: returnFocus,
     autoFocus: autoFocus,
     shards: shards,
@@ -3151,11 +3161,13 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     whiteList: shouldIgnore,
     lockProps: appliedLockProps,
     focusOptions: preventScrollOnFocus ? PREVENT_SCROLL : undefined,
+    // // ts-expect-error TS2322 - ts v3 "glitch"
     as: RemoveScroll
   }, children), enabled && (/*#__PURE__*/React.createElement(SideCar, __assign$a({}, rest, {
     sideCar: effectCar,
     setLockProps: setLockProps,
-    shards: shards
+    shards: shards,
+    activeNode: activeNode
   }))));
 });
 
@@ -5131,10 +5143,8 @@ function Effect(_a) {
     shards = _a.shards,
     onActivation = _a.onActivation,
     onDeactivation = _a.onDeactivation,
-    noIsolation = _a.noIsolation;
-  var _b = useState(undefined),
-    activeNode = _b[0],
-    setActiveNode = _b[1];
+    noIsolation = _a.noIsolation,
+    activeNode = _a.activeNode;
   var lastEventTarget = useRef(null);
   var mouseTouches = useRef(0);
   React.useEffect(function () {
@@ -5177,6 +5187,7 @@ function Effect(_a) {
         activeNode.ownerDocument.removeEventListener('touchend', onTouchEnd);
       };
     }
+    return;
   }, [activeNode, onClickOutside, onEscapeKey]);
   useEffect(function () {
     if (activeNode) {
@@ -5189,38 +5200,24 @@ function Effect(_a) {
         }
       };
     }
+    return;
   }, [!!activeNode]);
   useEffect(function () {
-    var _undo = function _undo() {
-      return null;
-    };
-    var unmounted = false;
-    var onNodeActivation = function onNodeActivation(node) {
-      if (!noIsolation) {
-        _undo = hideOthers(__spreadArrays([node], (shards || []).map(extractRef)), node.ownerDocument.body, focusHiddenMarker);
-      }
-      setActiveNode(function () {
-        return node;
-      });
-    };
-    var onNodeDeactivation = function onNodeDeactivation() {
-      _undo();
-      if (!unmounted) {
-        setActiveNode(null);
-      }
-    };
+    if (noIsolation || !activeNode) {
+      return;
+    }
+    return hideOthers(__spreadArrays([activeNode], (shards || []).map(extractRef)), activeNode.ownerDocument.body, focusHiddenMarker);
+  }, [activeNode, noIsolation]);
+  useEffect(function () {
     setLockProps({
       onMouseDown: function onMouseDown(e) {
         lastEventTarget.current = e.target;
       },
       onTouchStart: function onTouchStart(e) {
         lastEventTarget.current = e.target;
-      },
-      onActivation: onNodeActivation,
-      onDeactivation: onNodeDeactivation
+      }
     });
     return function () {
-      unmounted = true;
       setLockProps(false);
     };
   }, []);
@@ -10552,7 +10549,8 @@ function e(e, r$1) {
 }
 
 var SelectOption = function SelectOption(_ref) {
-  var active = _ref.active,
+  var id = _ref.id,
+    active = _ref.active,
     selected = _ref.selected,
     option = _ref.option,
     _ref$option = _ref.option,
@@ -10576,6 +10574,7 @@ var SelectOption = function SelectOption(_ref) {
     }
   }, [active, ref]);
   return /*#__PURE__*/React__default.createElement("li", {
+    id: id,
     ref: ref,
     className: classNames('SelectOption', className, {
       'SelectOption--active': active,
@@ -10584,8 +10583,8 @@ var SelectOption = function SelectOption(_ref) {
     }),
     onClick: handleClick,
     "data-test-id": dataTestId ? "".concat(dataTestId, "--").concat(label.replace(' ', '-')) : undefined,
-    "aria-label": label,
     "aria-selected": selected,
+    "aria-disabled": disabled || undefined,
     role: "option"
   }, colorSwatch && /*#__PURE__*/React__default.createElement("div", {
     className: "SelectOption__color-swatch",
@@ -10652,12 +10651,13 @@ var SelectOptions = function SelectOptions(_ref) {
       return setSearchPhrase('');
     }
   }), /*#__PURE__*/React__default.createElement("ul", _extends$1({
+    id: "Select__listbox--".concat(idRef),
     className: "SelectOptions__list",
     tabIndex: -1,
     role: "listbox",
     ref: ref,
-    "aria-labelledby": "Select__label".concat(idRef ? "--".concat(idRef) : ''),
-    "aria-activedescendant": "SelectOption--".concat(activeOption === null || activeOption === void 0 ? void 0 : activeOption.value).concat(idRef ? "-".concat(idRef) : '')
+    "aria-label": "Options",
+    "aria-activedescendant": activeOption ? "SelectOption--".concat(activeOption.value).concat(idRef ? "-".concat(idRef) : '') : undefined
   }, rest), options.map(function (option) {
     return /*#__PURE__*/React__default.createElement(SelectOption, {
       id: "SelectOption--".concat(option.value).concat(idRef ? "-".concat(idRef) : ''),
@@ -10688,8 +10688,9 @@ var SelectLabel = function SelectLabel(_ref) {
     label = _ref.label,
     hasValue = _ref.hasValue;
   if (!label) return null;
-  return /*#__PURE__*/React__default.createElement("label", {
-    id: "Select__label--".concat(idRef)
+  return /*#__PURE__*/React__default.createElement("span", {
+    id: "Select__label--".concat(idRef),
+    className: "Select__label"
   }, "".concat(label).concat(hasValue ? ': ' : ''));
 };
 
@@ -10718,7 +10719,8 @@ var reducer = function reducer(state, action) {
       });
     case 'CLOSE':
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        mode: Mode$1.Resting
+        mode: Mode$1.Resting,
+        focused: undefined
       });
     case 'SELECT':
       return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -10736,6 +10738,7 @@ var useSelect = function useSelect(_ref) {
   var value = _ref.value,
     defaultValue = _ref.defaultValue;
   var selectRef = useRef(null);
+  var buttonRef = useRef(null);
   var initialValue = value !== null && value !== void 0 ? value : defaultValue;
   var _useReducer = useReducer(reducer, {
       value: initialValue,
@@ -10749,10 +10752,13 @@ var useSelect = function useSelect(_ref) {
     switch (event.key) {
       case 'Escape':
         {
+          var _buttonRef$current;
           event.preventDefault();
-          return dispatch({
+          dispatch({
             type: 'CLOSE'
           });
+          (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
+          break;
         }
     }
   }, []);
@@ -10782,13 +10788,14 @@ var useSelect = function useSelect(_ref) {
     state: state,
     dispatch: dispatch,
     Mode: Mode$1,
-    selectRef: selectRef
+    selectRef: selectRef,
+    buttonRef: buttonRef
   };
 };
 
 var _excluded$j = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId", "colorSwatch", "extraOption", "paddingRight", "smallMobileText"];
 var Select = function Select(_ref) {
-  var _ref2;
+  var _ref2, _ref3;
   var _ref$allowAutoFill = _ref.allowAutoFill,
     allowAutoFill = _ref$allowAutoFill === void 0 ? false : _ref$allowAutoFill,
     _ref$autoSelect = _ref.autoSelect,
@@ -10824,7 +10831,8 @@ var Select = function Select(_ref) {
     state = _useSelect.state,
     dispatch = _useSelect.dispatch,
     Mode = _useSelect.Mode,
-    selectRef = _useSelect.selectRef;
+    selectRef = _useSelect.selectRef,
+    buttonRef = _useSelect.buttonRef;
   var handleSelect = useCallback(function (option) {
     dispatch({
       type: 'SELECT',
@@ -10883,8 +10891,9 @@ var Select = function Select(_ref) {
     id: idRef,
     name: name,
     type: "hidden",
-    value: state.value
+    value: state.value || ''
   }), /*#__PURE__*/React__default.createElement(Clickable, {
+    ref: buttonRef,
     id: idRef && "Select__value--".concat(idRef),
     className: classNames('Select__value', _defineProperty$1(_defineProperty$1({}, "Select__value--padding-".concat(paddingRight), paddingRight != null), 'Select__value--small', smallMobileText)),
     disabled: disabled,
@@ -10892,9 +10901,11 @@ var Select = function Select(_ref) {
     "data-test-id": dataTestId,
     "aria-haspopup": "listbox",
     "aria-expanded": state.mode === Mode.Open,
-    "aria-labelledby": "Select__label--".concat(idRef, " Select__value--").concat(idRef),
-    type: "button",
-    title: "Select"
+    "aria-labelledby": label ? "Select__label--".concat(idRef).concat((_ref2 = focused !== null && focused !== void 0 ? focused : selected) !== null && _ref2 !== void 0 && _ref2.label ? " Select__valueText--".concat(idRef) : '') : undefined,
+    "aria-label": !label ? placeholder || 'Select an option' : undefined,
+    "aria-invalid": error ? true : undefined,
+    "aria-controls": state.mode === Mode.Open ? "Select__listbox--".concat(idRef) : undefined,
+    type: "button"
   }, /*#__PURE__*/React__default.createElement(SelectLabel, {
     idRef: idRef,
     label: label || (selected === undefined ? placeholder : undefined),
@@ -10904,11 +10915,17 @@ var Select = function Select(_ref) {
     style: {
       backgroundColor: distExports$4.colors.all[colorSwatch]
     }
-  }), (_ref2 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref2 === void 0 ? void 0 : _ref2.label, /*#__PURE__*/React__default.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("span", {
+    id: "Select__valueText--".concat(idRef)
+  }, (_ref3 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref3 === void 0 ? void 0 : _ref3.label), /*#__PURE__*/React__default.createElement("span", {
     className: classNames('Select__icon', {
       'Select__icon--shifted': shiftIconLeftwards
     })
-  }, state.mode === Mode.Open ? /*#__PURE__*/React__default.createElement(ChevronUp12, null) : /*#__PURE__*/React__default.createElement(ChevronDown12, null))), state.mode === Mode.Open && /*#__PURE__*/React__default.createElement(SelectOptions, {
+  }, state.mode === Mode.Open ? /*#__PURE__*/React__default.createElement(ChevronUp12, {
+    "aria-hidden": "true"
+  }) : /*#__PURE__*/React__default.createElement(ChevronDown12, {
+    "aria-hidden": "true"
+  }))), state.mode === Mode.Open && /*#__PURE__*/React__default.createElement(SelectOptions, {
     idRef: idRef,
     className: classNames('Select__options', {
       'Select__options--up': dropDirection === 'up',
@@ -10926,11 +10943,16 @@ var Select = function Select(_ref) {
         type: 'CLOSE'
       });
     }
-  })), allowAutoFill && /*#__PURE__*/React__default.createElement("input", {
+  })), typeof error === 'string' && /*#__PURE__*/React__default.createElement("div", {
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "Select__live-region"
+  }, error), allowAutoFill && /*#__PURE__*/React__default.createElement("input", {
     className: "Select__hidden-field",
     name: name,
-    onChange: function onChange(_ref3) {
-      var target = _ref3.target;
+    onChange: function onChange(_ref4) {
+      var target = _ref4.target;
       return handleAutofill(target.value);
     },
     value: value,
@@ -11019,6 +11041,18 @@ var MultiSelect = function MultiSelect(_ref) {
   var values = useMemo(function () {
     return Array.isArray(state.value) ? state.value : [];
   }, [state.value]);
+  var selectedLabels = useMemo(function () {
+    return values.map(function (value) {
+      var _options$find;
+      return ((_options$find = options.find(function (option) {
+        return option.value === value;
+      })) === null || _options$find === void 0 ? void 0 : _options$find.label) || value;
+    });
+  }, [values, options]);
+  var accessibleLabel = useMemo(function () {
+    if (selectedLabels.length === 0) return 'Select options';
+    return "Select options, ".concat(selectedLabels.length, " selected: ").concat(selectedLabels.join(', '));
+  }, [selectedLabels]);
   var handleSelect = useCallback(function (option) {
     dispatch({
       type: 'SELECT',
@@ -11063,19 +11097,24 @@ var MultiSelect = function MultiSelect(_ref) {
   }, rest), /*#__PURE__*/React__default.createElement(Clickable, {
     className: "MultiSelect__search",
     disabled: disabled,
-    onClick: handleToggle
+    onClick: handleToggle,
+    "aria-haspopup": "listbox",
+    "aria-expanded": state.mode === Mode.Open,
+    "aria-controls": state.mode === Mode.Open ? "Select__listbox--".concat(idRef) : undefined,
+    "aria-label": accessibleLabel,
+    type: "button"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "MultiSelect__selected-items"
   }, values.map(function (value, index) {
-    var _options$find;
+    var _options$find2;
     return /*#__PURE__*/React__default.createElement("span", {
       className: "MultiSelect__selected-item",
       key: index
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "MultiSelect__selected-value"
-    }, ((_options$find = options.find(function (option) {
+    }, ((_options$find2 = options.find(function (option) {
       return option.value === value;
-    })) === null || _options$find === void 0 ? void 0 : _options$find.label) || value), /*#__PURE__*/React__default.createElement(Exit16, {
+    })) === null || _options$find2 === void 0 ? void 0 : _options$find2.label) || value), /*#__PURE__*/React__default.createElement(Exit16, {
       style: {
         width: '8px',
         height: '8px',
@@ -11099,8 +11138,7 @@ var MultiSelect = function MultiSelect(_ref) {
     searchable: searchable,
     options: options,
     onSelect: handleSelect,
-    onFocus: handleFocus,
-    autoFocus: false
+    onFocus: handleFocus
   }));
 };