@moda/om 21.6.9 → 21.6.11

package/dist/index.cjs.js

@@ -3039,9 +3039,11 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
       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.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/
   React.createElement("div", {
     key: "guard-first",
@@ -3114,6 +3116,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
 };
@@ -3121,18 +3125,21 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
   var _a = React__namespace.useState(false),
     lockProps = _a[0],
     setLockProps = _a[1];
+  var _b = React__namespace.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,
@@ -3144,10 +3151,7 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
     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,
@@ -3157,10 +3161,16 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
     inert: inert,
     enabled: enabled && scrollLock
   });
+  var onActivation = React__namespace.useCallback(function (node) {
+    setActiveNode(node);
+  }, []);
+  var onDeactivation = React__namespace.useCallback(function () {
+    setActiveNode(null);
+  }, []);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(FocusLock, {
     ref: parentRef,
     sideCar: sideCar,
-    disabled: !(lockProps && enabled && focusLock),
+    disabled: !(enabled && focusLock),
     returnFocus: returnFocus,
     autoFocus: autoFocus,
     shards: shards,
@@ -3171,11 +3181,13 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
     whiteList: shouldIgnore,
     lockProps: appliedLockProps,
     focusOptions: preventScrollOnFocus ? PREVENT_SCROLL : undefined,
+    // // ts-expect-error TS2322 - ts v3 "glitch"
     as: RemoveScroll
   }, children), enabled && (/*#__PURE__*/React__namespace.createElement(SideCar, __assign$a({}, rest, {
     sideCar: effectCar,
     setLockProps: setLockProps,
-    shards: shards
+    shards: shards,
+    activeNode: activeNode
   }))));
 });
 
@@ -5151,10 +5163,8 @@ function Effect(_a) {
     shards = _a.shards,
     onActivation = _a.onActivation,
     onDeactivation = _a.onDeactivation,
-    noIsolation = _a.noIsolation;
-  var _b = React.useState(undefined),
-    activeNode = _b[0],
-    setActiveNode = _b[1];
+    noIsolation = _a.noIsolation,
+    activeNode = _a.activeNode;
   var lastEventTarget = React.useRef(null);
   var mouseTouches = React.useRef(0);
   React__namespace.useEffect(function () {
@@ -5197,6 +5207,7 @@ function Effect(_a) {
         activeNode.ownerDocument.removeEventListener('touchend', onTouchEnd);
       };
     }
+    return;
   }, [activeNode, onClickOutside, onEscapeKey]);
   React.useEffect(function () {
     if (activeNode) {
@@ -5209,38 +5220,24 @@ function Effect(_a) {
         }
       };
     }
+    return;
   }, [!!activeNode]);
   React.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]);
+  React.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);
     };
   }, []);
@@ -10014,6 +10011,13 @@ var ChevronUp12 = function ChevronUp12(_a) {
 };
 ChevronUp12.displayName = 'ChevronUp12';
 
+var FormControlContext = /*#__PURE__*/React.createContext({
+  displaysError: false
+});
+var useFormControlContext = function useFormControlContext() {
+  return React.useContext(FormControlContext);
+};
+
 var dist$1 = {};
 
 var mapCursorToMax = {};
@@ -10572,7 +10576,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,
@@ -10596,6 +10601,7 @@ var SelectOption = function SelectOption(_ref) {
     }
   }, [active, ref]);
   return /*#__PURE__*/React.createElement("li", {
+    id: id,
     ref: ref,
     className: classNames('SelectOption', className, {
       'SelectOption--active': active,
@@ -10604,8 +10610,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.createElement("div", {
     className: "SelectOption__color-swatch",
@@ -10672,12 +10678,13 @@ var SelectOptions = function SelectOptions(_ref) {
       return setSearchPhrase('');
     }
   }), /*#__PURE__*/React.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.createElement(SelectOption, {
       id: "SelectOption--".concat(option.value).concat(idRef ? "-".concat(idRef) : ''),
@@ -10708,8 +10715,9 @@ var SelectLabel = function SelectLabel(_ref) {
     label = _ref.label,
     hasValue = _ref.hasValue;
   if (!label) return null;
-  return /*#__PURE__*/React.createElement("label", {
-    id: "Select__label--".concat(idRef)
+  return /*#__PURE__*/React.createElement("span", {
+    id: "Select__label--".concat(idRef),
+    className: "Select__label"
   }, "".concat(label).concat(hasValue ? ': ' : ''));
 };
 
@@ -10738,7 +10746,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), {}, {
@@ -10756,6 +10765,7 @@ var useSelect = function useSelect(_ref) {
   var value = _ref.value,
     defaultValue = _ref.defaultValue;
   var selectRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
   var initialValue = value !== null && value !== void 0 ? value : defaultValue;
   var _useReducer = React.useReducer(reducer, {
       value: initialValue,
@@ -10769,10 +10779,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;
         }
     }
   }, []);
@@ -10802,13 +10815,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,
@@ -10837,6 +10851,8 @@ var Select = function Select(_ref) {
     _ref$smallMobileText = _ref.smallMobileText,
     smallMobileText = _ref$smallMobileText === void 0 ? false : _ref$smallMobileText,
     rest = _objectWithoutProperties(_ref, _excluded$j);
+  var _useFormControlContex = useFormControlContext(),
+    errorDisplayedByParent = _useFormControlContex.displaysError;
   var _useSelect = useSelect({
       value: value,
       defaultValue: defaultValue
@@ -10844,7 +10860,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 = React.useCallback(function (option) {
     dispatch({
       type: 'SELECT',
@@ -10903,8 +10920,9 @@ var Select = function Select(_ref) {
     id: idRef,
     name: name,
     type: "hidden",
-    value: state.value
+    value: state.value || ''
   }), /*#__PURE__*/React.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,
@@ -10912,9 +10930,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.createElement(SelectLabel, {
     idRef: idRef,
     label: label || (selected === undefined ? placeholder : undefined),
@@ -10924,11 +10944,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.createElement("span", {
+  }), /*#__PURE__*/React.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.createElement("span", {
     className: classNames('Select__icon', {
       'Select__icon--shifted': shiftIconLeftwards
     })
-  }, state.mode === Mode.Open ? /*#__PURE__*/React.createElement(ChevronUp12, null) : /*#__PURE__*/React.createElement(ChevronDown12, null))), state.mode === Mode.Open && /*#__PURE__*/React.createElement(SelectOptions, {
+  }, state.mode === Mode.Open ? /*#__PURE__*/React.createElement(ChevronUp12, {
+    "aria-hidden": "true"
+  }) : /*#__PURE__*/React.createElement(ChevronDown12, {
+    "aria-hidden": "true"
+  }))), state.mode === Mode.Open && /*#__PURE__*/React.createElement(SelectOptions, {
     idRef: idRef,
     className: classNames('Select__options', {
       'Select__options--up': dropDirection === 'up',
@@ -10946,11 +10972,16 @@ var Select = function Select(_ref) {
         type: 'CLOSE'
       });
     }
-  })), allowAutoFill && /*#__PURE__*/React.createElement("input", {
+  })), typeof error === 'string' && !errorDisplayedByParent && /*#__PURE__*/React.createElement("div", {
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "Select__live-region"
+  }, error), allowAutoFill && /*#__PURE__*/React.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,
@@ -11039,6 +11070,18 @@ var MultiSelect = function MultiSelect(_ref) {
   var values = React.useMemo(function () {
     return Array.isArray(state.value) ? state.value : [];
   }, [state.value]);
+  var selectedLabels = React.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 = React.useMemo(function () {
+    if (selectedLabels.length === 0) return 'Select options';
+    return "Select options, ".concat(selectedLabels.length, " selected: ").concat(selectedLabels.join(', '));
+  }, [selectedLabels]);
   var handleSelect = React.useCallback(function (option) {
     dispatch({
       type: 'SELECT',
@@ -11083,19 +11126,24 @@ var MultiSelect = function MultiSelect(_ref) {
   }, rest), /*#__PURE__*/React.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.createElement("div", {
     className: "MultiSelect__selected-items"
   }, values.map(function (value, index) {
-    var _options$find;
+    var _options$find2;
     return /*#__PURE__*/React.createElement("span", {
       className: "MultiSelect__selected-item",
       key: index
     }, /*#__PURE__*/React.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.createElement(Exit16, {
+    })) === null || _options$find2 === void 0 ? void 0 : _options$find2.label) || value), /*#__PURE__*/React.createElement(Exit16, {
       style: {
         width: '8px',
         height: '8px',
@@ -11119,8 +11167,7 @@ var MultiSelect = function MultiSelect(_ref) {
     searchable: searchable,
     options: options,
     onSelect: handleSelect,
-    onFocus: handleFocus,
-    autoFocus: false
+    onFocus: handleFocus
   }));
 };
 
@@ -11132,7 +11179,14 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label = _ref.label,
     placeholder = _ref.placeholder,
     rest = _objectWithoutProperties(_ref, _excluded$h);
-  return /*#__PURE__*/React.createElement("label", {
+  var fieldContextValue = React.useMemo(function () {
+    return {
+      displaysError: Boolean(error)
+    };
+  }, [error]);
+  return /*#__PURE__*/React.createElement(FormControlContext.Provider, {
+    value: fieldContextValue
+  }, /*#__PURE__*/React.createElement("label", {
     className: classNames('Field', className)
   }, label && /*#__PURE__*/React.createElement("span", {
     className: "Field__label"
@@ -11155,7 +11209,7 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "Field__icon"
   }, /*#__PURE__*/React.createElement(Warning16, null)))), error && /*#__PURE__*/React.createElement("span", {
     className: "Field__error"
-  }, error));
+  }, error)));
 });
 Field.displayName = 'Field';
 
@@ -12739,6 +12793,7 @@ exports.ExceedConstrain = ExceedConstrain;
 exports.Expandable = Expandable;
 exports.Field = Field;
 exports.FocusOn = FocusOn;
+exports.FormControlContext = FormControlContext;
 exports.Input = Field;
 exports.Keyhole = Keyhole;
 exports.Label = Label;
@@ -12798,5 +12853,6 @@ exports.tokens = tokens;
 exports.useBreakpoint = useBreakpoint;
 exports.useClickOutside = useClickOutside;
 exports.useConfirm = useConfirm;
+exports.useFormControlContext = useFormControlContext;
 exports.useKeyboardListNavigation = useKeyboardListNavigation;
 exports.useUpdateEffect = useUpdateEffect;