@thecb/components 6.0.0-beta.10 → 6.0.0-beta.11
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 +14 -6
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +14 -6
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/dropdown/Dropdown.js +78 -72
package/dist/index.esm.js
CHANGED
|
@@ -19414,7 +19414,7 @@ var DropdownContentWrapper = styled.div.withConfig({
|
|
|
19414
19414
|
var maxHeight = _ref3.maxHeight;
|
|
19415
19415
|
return maxHeight || "400px";
|
|
19416
19416
|
});
|
|
19417
|
-
var DropdownItemWrapper = styled.
|
|
19417
|
+
var DropdownItemWrapper = styled.li.withConfig({
|
|
19418
19418
|
displayName: "Dropdown__DropdownItemWrapper",
|
|
19419
19419
|
componentId: "sc-pn6m0h-2"
|
|
19420
19420
|
})(["background-color:", ";text-align:start;border-width:0px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;cursor:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref4) {
|
|
@@ -19588,6 +19588,13 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
19588
19588
|
e.preventDefault();
|
|
19589
19589
|
optionRefs.current[(_optionRefs$current$l = optionRefs === null || optionRefs === void 0 ? void 0 : (_optionRefs$current = optionRefs.current) === null || _optionRefs$current === void 0 ? void 0 : _optionRefs$current.length) !== null && _optionRefs$current$l !== void 0 ? _optionRefs$current$l : 0 - 1].current.focus();
|
|
19590
19590
|
break;
|
|
19591
|
+
|
|
19592
|
+
case "Escape":
|
|
19593
|
+
if (isOpen) {
|
|
19594
|
+
onClick();
|
|
19595
|
+
}
|
|
19596
|
+
|
|
19597
|
+
break;
|
|
19591
19598
|
}
|
|
19592
19599
|
};
|
|
19593
19600
|
|
|
@@ -19674,7 +19681,9 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
19674
19681
|
value: inputValue,
|
|
19675
19682
|
width: "100%",
|
|
19676
19683
|
dataQa: placeholder
|
|
19677
|
-
},
|
|
19684
|
+
}), /*#__PURE__*/React.createElement(IconWrapper, {
|
|
19685
|
+
open: isOpen
|
|
19686
|
+
}, /*#__PURE__*/React.createElement(DropdownIcon, null))), /*#__PURE__*/React.createElement(Fragment, null, isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
|
|
19678
19687
|
maxHeight: maxHeight,
|
|
19679
19688
|
open: isOpen,
|
|
19680
19689
|
ref: dropdownRef,
|
|
@@ -19683,7 +19692,8 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
19683
19692
|
role: "listbox",
|
|
19684
19693
|
id: "".concat(ariaLabelledby, "_listbox")
|
|
19685
19694
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
19686
|
-
childGap: "0"
|
|
19695
|
+
childGap: "0",
|
|
19696
|
+
as: "ul"
|
|
19687
19697
|
}, filteredOptions.map(function (choice, i) {
|
|
19688
19698
|
if (choice.value === value && selectedRef !== optionRefs.current[i]) {
|
|
19689
19699
|
setSelectedRef(optionRefs.current[i]);
|
|
@@ -19715,9 +19725,7 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
19715
19725
|
color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
|
|
19716
19726
|
extraStyles: "padding-left: 16px; \n cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n white-space: nowrap; \n overflow: hidden; \n text-overflow: ellipsis;")
|
|
19717
19727
|
}, choice.text));
|
|
19718
|
-
}))) : /*#__PURE__*/React.createElement(Fragment, null))
|
|
19719
|
-
open: isOpen
|
|
19720
|
-
}, /*#__PURE__*/React.createElement(DropdownIcon, null))));
|
|
19728
|
+
}))) : /*#__PURE__*/React.createElement(Fragment, null)));
|
|
19721
19729
|
};
|
|
19722
19730
|
|
|
19723
19731
|
var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
|