@thecb/components 6.0.0-beta.8 → 6.0.0-beta.9
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 +12 -16
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +12 -16
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/dropdown/Dropdown.js +40 -55
package/dist/index.esm.js
CHANGED
|
@@ -19520,7 +19520,8 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
19520
19520
|
var onKeyDown = function onKeyDown(e) {
|
|
19521
19521
|
var _optionRefs$current$l, _optionRefs$current;
|
|
19522
19522
|
|
|
19523
|
-
console.log("key down event is", e);
|
|
19523
|
+
console.log("key down event is", e.target);
|
|
19524
|
+
console.log("key down event value is", e.target.value);
|
|
19524
19525
|
var key = e.key,
|
|
19525
19526
|
keyCode = e.keyCode;
|
|
19526
19527
|
var focus = document.activeElement;
|
|
@@ -19639,28 +19640,22 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
19639
19640
|
return /*#__PURE__*/React.createElement(Box, {
|
|
19640
19641
|
onKeyDown: onKeyDown,
|
|
19641
19642
|
onClick: onClick,
|
|
19642
|
-
padding: "
|
|
19643
|
+
padding: "12px",
|
|
19643
19644
|
width: "100%",
|
|
19644
19645
|
hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
|
|
19646
|
+
background: isOpen ? themeValues.hoverColor : WHITE,
|
|
19645
19647
|
"aria-expanded": isOpen,
|
|
19646
19648
|
role: "combobox",
|
|
19647
19649
|
"aria-owns": "".concat(ariaLabelledby, "_listbox"),
|
|
19648
19650
|
"aria-haspopup": "listbox",
|
|
19649
19651
|
"aria-labelledby": ariaLabelledby,
|
|
19650
19652
|
extraStyles: disabled && "color: #6e727e;\n background-color: #f7f7f7;\n pointer-events: none;",
|
|
19651
|
-
title: hasTitles ? getSelection() : null
|
|
19652
|
-
}, /*#__PURE__*/React.createElement(Box, {
|
|
19653
|
-
as: "button",
|
|
19654
|
-
background: isOpen ? themeValues.hoverColor : WHITE,
|
|
19655
|
-
width: "100%",
|
|
19656
|
-
padding: "12px",
|
|
19657
|
-
hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
|
|
19658
|
-
borderSize: "1px",
|
|
19659
|
-
borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
|
|
19660
|
-
borderRadius: "2px",
|
|
19661
|
-
tabIndex: 0,
|
|
19653
|
+
title: hasTitles ? getSelection() : null,
|
|
19662
19654
|
dataQa: placeholder,
|
|
19663
|
-
|
|
19655
|
+
tabIndex: 0,
|
|
19656
|
+
borderRadius: "2px",
|
|
19657
|
+
borderSize: "1px",
|
|
19658
|
+
borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU
|
|
19664
19659
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
19665
19660
|
direction: "row",
|
|
19666
19661
|
bottomItem: 2,
|
|
@@ -19670,7 +19665,8 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
19670
19665
|
placeholder: getSelection(),
|
|
19671
19666
|
value: inputValue,
|
|
19672
19667
|
onChange: function onChange(e) {
|
|
19673
|
-
console.log("input change event", e);
|
|
19668
|
+
console.log("input change event", e.target);
|
|
19669
|
+
console.log("input change event value", e.target.value);
|
|
19674
19670
|
},
|
|
19675
19671
|
themeValues: themeValues,
|
|
19676
19672
|
role: "searchbox",
|
|
@@ -19685,7 +19681,7 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
19685
19681
|
autocomplete: autocompleteValue
|
|
19686
19682
|
}), /*#__PURE__*/React.createElement(IconWrapper, {
|
|
19687
19683
|
open: isOpen
|
|
19688
|
-
}, /*#__PURE__*/React.createElement(DropdownIcon, null)))
|
|
19684
|
+
}, /*#__PURE__*/React.createElement(DropdownIcon, null))), isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
|
|
19689
19685
|
maxHeight: maxHeight,
|
|
19690
19686
|
open: isOpen,
|
|
19691
19687
|
ref: dropdownRef,
|