@moda/om 21.1.0 → 21.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +23 -15
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +23 -15
- package/dist/index.esm.js.map +1 -1
- package/dist/src/components/Select/Select.d.ts +6 -0
- package/dist/src/components/Select/Select.stories.d.ts +1 -0
- package/dist/src/components/Select/SelectOptions.d.ts +2 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -2
- package/src/components/Select/Select.stories.tsx +33 -25
- package/src/components/Select/Select.tsx +5 -0
- package/src/components/Select/SelectOptions.scss +7 -0
- package/src/components/Select/SelectOptions.tsx +14 -1
- package/src/mixins/input-styles/_input-styles.scss +9 -7
package/dist/index.esm.js
CHANGED
|
@@ -5101,8 +5101,9 @@ var hideOthers = function hideOthers(originalTarget, parentNode, markerName) {
|
|
|
5101
5101
|
return null;
|
|
5102
5102
|
};
|
|
5103
5103
|
}
|
|
5104
|
-
// we should not hide
|
|
5105
|
-
|
|
5104
|
+
// we should not hide aria-live elements - https://github.com/theKashey/aria-hidden/issues/10
|
|
5105
|
+
// and script elements, as they have no impact on accessibility.
|
|
5106
|
+
targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live], script')));
|
|
5106
5107
|
return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
|
|
5107
5108
|
};
|
|
5108
5109
|
|
|
@@ -5159,15 +5160,15 @@ function Effect(_a) {
|
|
|
5159
5160
|
mouseTouches.current = event.touches.length;
|
|
5160
5161
|
};
|
|
5161
5162
|
if (activeNode) {
|
|
5162
|
-
|
|
5163
|
-
|
|
5164
|
-
|
|
5165
|
-
|
|
5163
|
+
activeNode.ownerDocument.addEventListener('keydown', onKeyDown);
|
|
5164
|
+
activeNode.ownerDocument.addEventListener('mousedown', onMouseDown);
|
|
5165
|
+
activeNode.ownerDocument.addEventListener('touchstart', onTouchStart);
|
|
5166
|
+
activeNode.ownerDocument.addEventListener('touchend', onTouchEnd);
|
|
5166
5167
|
return function () {
|
|
5167
|
-
|
|
5168
|
-
|
|
5169
|
-
|
|
5170
|
-
|
|
5168
|
+
activeNode.ownerDocument.removeEventListener('keydown', onKeyDown);
|
|
5169
|
+
activeNode.ownerDocument.removeEventListener('mousedown', onMouseDown);
|
|
5170
|
+
activeNode.ownerDocument.removeEventListener('touchstart', onTouchStart);
|
|
5171
|
+
activeNode.ownerDocument.removeEventListener('touchend', onTouchEnd);
|
|
5171
5172
|
};
|
|
5172
5173
|
}
|
|
5173
5174
|
}, [activeNode, onClickOutside, onEscapeKey]);
|
|
@@ -5190,7 +5191,7 @@ function Effect(_a) {
|
|
|
5190
5191
|
var unmounted = false;
|
|
5191
5192
|
var onNodeActivation = function onNodeActivation(node) {
|
|
5192
5193
|
if (!noIsolation) {
|
|
5193
|
-
_undo = hideOthers(__spreadArrays([node], (shards || []).map(extractRef)),
|
|
5194
|
+
_undo = hideOthers(__spreadArrays([node], (shards || []).map(extractRef)), node.ownerDocument.body, focusHiddenMarker);
|
|
5194
5195
|
}
|
|
5195
5196
|
setActiveNode(function () {
|
|
5196
5197
|
return node;
|
|
@@ -10536,7 +10537,7 @@ var SelectOption = function SelectOption(_ref) {
|
|
|
10536
10537
|
}), label);
|
|
10537
10538
|
};
|
|
10538
10539
|
|
|
10539
|
-
var _excluded$k = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId"];
|
|
10540
|
+
var _excluded$k = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId", "extraOption"];
|
|
10540
10541
|
var SelectOptions = function SelectOptions(_ref) {
|
|
10541
10542
|
var idRef = _ref.idRef,
|
|
10542
10543
|
searchable = _ref.searchable,
|
|
@@ -10548,6 +10549,7 @@ var SelectOptions = function SelectOptions(_ref) {
|
|
|
10548
10549
|
onFocus = _ref.onFocus,
|
|
10549
10550
|
className = _ref.className,
|
|
10550
10551
|
dataTestId = _ref.dataTestId,
|
|
10552
|
+
extraOption = _ref.extraOption,
|
|
10551
10553
|
rest = _objectWithoutProperties(_ref, _excluded$k);
|
|
10552
10554
|
var _useState = useState(''),
|
|
10553
10555
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -10607,7 +10609,11 @@ var SelectOptions = function SelectOptions(_ref) {
|
|
|
10607
10609
|
selected: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
|
|
10608
10610
|
onClick: onSelect
|
|
10609
10611
|
});
|
|
10610
|
-
})
|
|
10612
|
+
}), extraOption && /*#__PURE__*/React__default.createElement(ControlLink, {
|
|
10613
|
+
className: "SelectOptions__extra-option",
|
|
10614
|
+
disabled: extraOption.disabled,
|
|
10615
|
+
onClick: extraOption.callback
|
|
10616
|
+
}, extraOption.label)), options.length === 0 && /*#__PURE__*/React__default.createElement(Text, {
|
|
10611
10617
|
className: "SelectOptions__none",
|
|
10612
10618
|
color: "cement"
|
|
10613
10619
|
}, "Nothing found"));
|
|
@@ -10716,7 +10722,7 @@ var useSelect = function useSelect(_ref) {
|
|
|
10716
10722
|
};
|
|
10717
10723
|
};
|
|
10718
10724
|
|
|
10719
|
-
var _excluded$j = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId", "colorSwatch"];
|
|
10725
|
+
var _excluded$j = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId", "colorSwatch", "extraOption"];
|
|
10720
10726
|
var Select = function Select(_ref) {
|
|
10721
10727
|
var _ref2;
|
|
10722
10728
|
var _ref$allowAutoFill = _ref.allowAutoFill,
|
|
@@ -10742,6 +10748,7 @@ var Select = function Select(_ref) {
|
|
|
10742
10748
|
value = _ref.value,
|
|
10743
10749
|
dataTestId = _ref.dataTestId,
|
|
10744
10750
|
colorSwatch = _ref.colorSwatch,
|
|
10751
|
+
extraOption = _ref.extraOption,
|
|
10745
10752
|
rest = _objectWithoutProperties(_ref, _excluded$j);
|
|
10746
10753
|
var _useSelect = useSelect({
|
|
10747
10754
|
value: value,
|
|
@@ -10838,7 +10845,8 @@ var Select = function Select(_ref) {
|
|
|
10838
10845
|
options: options,
|
|
10839
10846
|
onSelect: handleSelect,
|
|
10840
10847
|
onFocus: handleFocus,
|
|
10841
|
-
selectedOption: selected
|
|
10848
|
+
selectedOption: selected,
|
|
10849
|
+
extraOption: extraOption
|
|
10842
10850
|
})), allowAutoFill && /*#__PURE__*/React__default.createElement("input", {
|
|
10843
10851
|
className: "Select__hidden-field",
|
|
10844
10852
|
name: name,
|