@bolttech/molecules-dropdown 0.34.2 → 0.36.0

package/index.cjs.js

@@ -2678,7 +2678,7 @@ const ClickableElement = /*#__PURE__*/styled__default.default.div.withConfig({
 const ContainerDropdown = /*#__PURE__*/styled__default.default.section.withConfig({
   displayName: "molecules-dropdownstyles__ContainerDropdown",
   componentId: "sc-3wugi4-1"
-})(["display:flex;padding-top:", ";padding-bottom:", ";padding-right:", ";padding-left:", ";gap:", ";background-color:", ";outline:", ";outline-offset:calc(", "* -1);border-radius:", ";box-shadow:", ";margin-bottom:", ";input{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow-x:hidden;}.fieldLabel{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}.requiredLabel{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}label.material-symbols-sharp{color:", ";}&:focus-within{background-color:", ";outline:", ";", "}", " ", ""], ({
+})(["display:flex;padding-top:", ";padding-bottom:", ";padding-right:", ";padding-left:", ";gap:", ";background-color:", ";outline:", ";outline-offset:calc(", "* -1);border-radius:", ";box-shadow:", ";margin-bottom:", ";input{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow-x:hidden;}.fieldLabel{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";margin:0;}.requiredLabel{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}label.material-symbols-sharp{color:", ";}&:focus-within{background-color:", ";outline:", ";", "}", " ", ""], ({
   theme
 }) => theme.components.dropdown.paddingVertical, ({
   theme
@@ -2758,7 +2758,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default.default.section.withConfi
 }) => theme.components.dropdown[$variant].icon.color.focus), ({
   $hasError,
   $hasValue
-}) => $hasError && styled.css(["outline:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}label.material-symbols-sharp{color:", ";}"], ({
+}) => $hasError && styled.css(["outline:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}span.material-symbols-sharp,label.material-symbols-sharp{color:", ";}"], ({
   theme,
   $variant
 }) => `${theme.components.dropdown.borderWidth.default} solid ${theme.components.dropdown[$variant].container.border[$hasValue ? 'errorFilled' : 'error']}`, ({
@@ -2802,7 +2802,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default.default.section.withConfi
 const SectionContainer = /*#__PURE__*/styled__default.default.section.withConfig({
   displayName: "molecules-dropdownstyles__SectionContainer",
   componentId: "sc-3wugi4-2"
-})(["position:relative;.top{top:-", ";transform:translateY(-100%);}.bottom{top:", ";}.errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}.helperMessage{padding-right:", ";padding-left:", ";margin-top:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
+})(["position:relative;.top{top:-", ";transform:translateY(-100%);}.bottom{top:", ";}.errorMessage{padding-right:", ";padding-left:", ";p{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}.helperMessage{padding-right:", ";padding-left:", ";margin-top:", ";p{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
   theme
 }) => theme.components.dropdown.borderWidth.default, ({
   theme
@@ -2906,8 +2906,8 @@ const ReusableDropdownComponent = _a => {
       },
       children: [jsxRuntime.jsxs(ContentDropdown, {
         children: [label && jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, {
-          children: [jsxRuntime.jsx("label", {
-            htmlFor: `${id}-input`,
+          children: [jsxRuntime.jsx("p", {
+            id: `${id}-label`,
             className: "fieldLabel",
             "data-testid": `${dataTestId}-label`,
             children: label
@@ -2918,6 +2918,14 @@ const ReusableDropdownComponent = _a => {
           })]
         }), jsxRuntime.jsx(InputAndIconDropdown, {
           children: jsxRuntime.jsx(atomsInput.InputStyled, Object.assign({
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-owns": `${id}-listbox`,
+            "aria-disabled": disabled,
+            "aria-invalid": hasError,
+            "aria-required": required,
+            "aria-describedby": hasError ? `${id}-error` : helperMessage ? `${id}-helper` : undefined,
+            "aria-expanded": showSelectComponent,
             id: `${id}-input`,
             "data-testid": `${dataTestId}-input`,
             ref: inputRef,
@@ -2955,20 +2963,25 @@ const ReusableDropdownComponent = _a => {
         })]
       }), jsxRuntime.jsx(ClickableElement, {
         children: jsxRuntime.jsx(atomsIcon.Icon, {
+          ariaHidden: true,
           dataTestId: `${dataTestId}-icon`,
           size: sizeIcon,
           icon: showSelectComponent ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
         })
       })]
     }), !showSelectComponent && hasError && errorMessage && jsxRuntime.jsx("div", {
+      id: `${id}-error`,
+      role: "alert",
       className: "errorMessage",
-      children: jsxRuntime.jsx("label", {
+      children: jsxRuntime.jsx("p", {
         "data-testid": `${dataTestId}-label-error-message`,
         children: errorMessage
       })
     }), !showSelectComponent && !errorMessage && helperMessage && jsxRuntime.jsx("div", {
+      id: `${id}-helper`,
+      role: "status",
       className: "helperMessage",
-      children: jsxRuntime.jsx("label", {
+      children: jsxRuntime.jsx("p", {
         "data-testid": `${dataTestId}-label-helper-message`,
         children: helperMessage
       })
@@ -3410,6 +3423,35 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     setInternalSelectedOption(currentOptionList.find(option => option.id === value));
     setIsFirstRender(false);
   }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender, onKeyUp, onKeyDown, asyncOptionList]);
+  const [focusedIndex, setFocusedIndex] = react.useState(0);
+  const flatOptions = currentOptionList;
+  const handleKeyDown = event => {
+    var _a;
+    const total = flatOptions.length;
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setFocusedIndex(prev => (prev + 1) % total);
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setFocusedIndex(prev => (prev - 1 + total) % total);
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      const selected = flatOptions[focusedIndex];
+      if (selected && !selected.disabled) {
+        setInputValue(selected.value);
+        setInputLabel(selected.label);
+        setInternalSelectedOption(selected);
+        reactDom.flushSync(() => {
+          onChange(selected);
+        });
+        setShowSelectComponent(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     "$variant": variant,
     id: `${id}-container`,
@@ -3451,7 +3493,7 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onBlur: onBlur,
       onFocus: onFocus,
       onKeyUp: onKeyUp,
-      onKeyDown: onKeyDown,
+      onKeyDown: onKeyDown ? onKeyDown : handleKeyDown,
       disableSearch: disableSearch
     }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(atomsSelect.Select, Object.assign({
       id: `${id}-select`,
@@ -3462,6 +3504,8 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
           setInputValue(selectedValue.value);
           setInputLabel(selectedValue.label);
           setInternalSelectedOption(Object.assign({}, selectedValue));
+          const selectedIndex = flatOptions.findIndex(flatOption => flatOption.id === selectedValue.id);
+          setFocusedIndex(selectedIndex);
           reactDom.flushSync(() => {
             onChange(selectedValue);
           });
@@ -3469,7 +3513,7 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
         }
       },
       ref: selectRef,
-      active: internalSelectedOption,
+      active: flatOptions[focusedIndex],
       options: currentOptionList
     }, uiUtils.applyDataAttributes(props, 'select')))]
   }));

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.34.2",
+  "version": "0.36.0",
   "dependencies": {
-    "react": "19.1.1",
-    "@bolttech/atoms-select": "0.25.1",
-    "react-dom": "19.1.1",
-    "@bolttech/ui-utils": "0.6.0",
+    "react": "19.1.2",
+    "@bolttech/atoms-select": "0.27.1",
+    "react-dom": "19.1.2",
+    "@bolttech/ui-utils": "0.6.4",
     "styled-components": "6.1.1",
-    "@bolttech/atoms-icon": "0.24.2",
-    "@bolttech/atoms-input": "0.28.2",
-    "@bolttech/default-theme": "0.15.0"
+    "@bolttech/atoms-icon": "0.24.7",
+    "@bolttech/atoms-input": "0.30.2",
+    "@bolttech/default-theme": "0.18.1"
   },
   "main": "./index.cjs.js",
   "type": "commonjs",

package/src/lib/molecules-dropdown-with-header-options.d.ts

@@ -1,5 +1,5 @@
 import { OptionWithHeaderType, OptionType } from '@bolttech/atoms-select';
-export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<HTMLInputElement>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
+export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<Element>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
     label: string;
     placeholder?: string;
     disabled?: boolean;

package/src/lib/molecules-dropdown.d.ts

@@ -1,5 +1,5 @@
 import { OptionType } from '@bolttech/atoms-select';
-export declare const Dropdown: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<HTMLInputElement>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
+export declare const Dropdown: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<Element>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
     label: string;
     placeholder?: string;
     disabled?: boolean;

package/src/lib/molecules-dropdown.type.d.ts

@@ -43,7 +43,7 @@ type DefaultDropdownProps = {
   @property selectedOption - An optional object representing the currently selected option
   @property asyncOptionList - A boolean prop that controls a different behavior when OptionList are set by an API request
   */
-export type DropdownProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
+export type DropdownProps = Pick<DOMAttributes<Element>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
     optionList?: OptionType[];
     /**
      * An optional function that filters the option list based on input value
@@ -108,7 +108,7 @@ export type DropdownProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'o
   @property selectedOption - An optional object representing the currently selected option
   @property asyncOptionList - A boolean prop that controls a different behavior when OptionList are set by an API request
   */
-export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
+export type DropdownWithHeadersProps = Pick<DOMAttributes<Element>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
     optionList?: OptionWithHeaderType[];
     /**
      * An optional function that filters the option list based on input value
@@ -182,7 +182,7 @@ export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'on
   @property setSelectedOptionOnInputValue - A function to set the selected option based on the input value
   @property inputRef - A ref to the input element of the dropdown
   */
-export type ReusableDropdownComponentProps = DefaultProps & Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultDropdownProps & {
+export type ReusableDropdownComponentProps = DefaultProps & Pick<DOMAttributes<Element>, 'onKeyUp' | 'onKeyDown'> & DefaultDropdownProps & {
     setShowSelectComponent: (show: boolean) => void;
     showSelectComponent: boolean;
     onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;