@charcoal-ui/react 3.9.1 → 3.10.0

package/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItemHandleKeyDown.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,CAAC,EAAE,MAAM,GACb,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE,MAAM,IAAI,CAAC,CAyChE"}
+{"version":3,"file":"useMenuItemHandleKeyDown.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,CAAC,EAAE,MAAM,GACb,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE,MAAM,IAAI,CAAC,CAoDhE"}

package/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts

@@ -1,8 +1,9 @@
 import { RefObject } from 'react';
+import { DropdownMenuItemProps } from '../DropdownMenuItem';
 type MenuListContextType = {
     root?: RefObject<HTMLUListElement>;
     value?: string;
-    values?: string[];
+    propsArray?: DropdownMenuItemProps[];
     setValue: (v: string) => void;
 };
 export declare const MenuListContext: import("react").Context<MenuListContextType>;

package/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListContext.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuList/MenuListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAA;AAEhD,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,eAAe,8CAO1B,CAAA"}
+{"version":3,"file":"MenuListContext.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuList/MenuListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE3D,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAA;IACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,eAAe,8CAO1B,CAAA"}

package/dist/components/DropdownSelector/MenuList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAE5C,KAAK,aAAa,GAAG,KAAK,CAAC,YAAY,CACrC,OAAO,QAAQ,GAAG,OAAO,aAAa,GAAG,OAAO,OAAO,CACxD,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,aAAa,EAAE,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,eAqBpD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAE5C,KAAK,aAAa,GAAG,KAAK,CAAC,YAAY,CACrC,OAAO,QAAQ,GAAG,OAAO,aAAa,GAAG,OAAO,OAAO,CACxD,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,aAAa,EAAE,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,eAuBpD"}

package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts

@@ -1,4 +1,5 @@
 import { MenuListChildren } from '..';
+import { DropdownMenuItemProps } from '../../DropdownMenuItem';
 /**
  * valueというpropsを持つ子要素の値を再起的に探索して配列にする
  *
@@ -7,5 +8,5 @@ import { MenuListChildren } from '..';
  * @param values
  * @returns
  */
-export declare function getValuesRecursive(children: MenuListChildren, values?: string[]): void;
+export declare function getValuesRecursive(children: MenuListChildren): DropdownMenuItemProps[];
 //# sourceMappingURL=getValuesRecursive.d.ts.map

package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getValuesRecursive.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAA;AAGrC;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,GAAE,MAAM,EAAO,QAmBtB"}
+{"version":3,"file":"getValuesRecursive.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAA;AAErC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAE9D;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,gBAAgB,2BAuB5D"}

package/dist/components/DropdownSelector/index.d.ts

@@ -11,6 +11,10 @@ export type DropdownSelectorProps = {
     required?: boolean;
     requiredText?: string;
     subLabel?: ReactNode;
+    /**
+     * the name of hidden `<select />`
+     */
+    name?: string;
     children: MenuListChildren;
     onChange: (value: string) => void;
 };

package/dist/components/DropdownSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAOnD,OAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAGvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eA0DpE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAA;AAO5D,OAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAgFpE"}

package/dist/components/DropdownSelector/index.story.d.ts

@@ -1,12 +1,19 @@
-import DropdownSelector, { DropdownSelectorProps } from '.';
+import DropdownSelector from '.';
 import { StoryObj } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, DropdownSelectorProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").DropdownSelectorProps>;
 export default _default;
-export declare const Playground: StoryObj<typeof DropdownSelector>;
-export declare const Basic: StoryObj<typeof DropdownSelector>;
+export declare const Default: StoryObj<typeof DropdownSelector>;
+export declare const Label: StoryObj<typeof DropdownSelector>;
+export declare const Disabled: StoryObj<typeof DropdownSelector>;
+export declare const DisabledItem: StoryObj<typeof DropdownSelector>;
+export declare const Invalid: StoryObj<typeof DropdownSelector>;
+export declare const AssistiveText: StoryObj<typeof DropdownSelector>;
+export declare const InvalidAssistiveText: StoryObj<typeof DropdownSelector>;
+export declare const RequiredText: StoryObj<typeof DropdownSelector>;
+export declare const SubLabel: StoryObj<typeof DropdownSelector>;
 export declare const LongNames: StoryObj<typeof DropdownSelector>;
 export declare const InModal: StoryObj<typeof DropdownSelector>;
 export declare const InFormTag: StoryObj<typeof DropdownSelector>;
 export declare const CustomChildren: StoryObj<typeof DropdownSelector>;
-export declare const SectionList: StoryObj<typeof DropdownSelector>;
+export declare const Section: StoryObj<typeof DropdownSelector>;
 //# sourceMappingURL=index.story.d.ts.map

package/dist/components/DropdownSelector/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,EAAE,EAAE,qBAAqB,EAAE,MAAM,GAAG,CAAA;AAQ3D,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAEjD,wBAGkC;AAYlC,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA8BxD,CAAA;AAoBD,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CASnD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA+BvD,CAAA;AAUD,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAqCrD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAoBvD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAgD5D,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA6BzD,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,GAAG,CAAA;AAMhC,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAKjD,wBAGkC;AAElC,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAoBrD,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkBnD,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkBtD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAiB1D,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkBrD,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkB3D,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAmBlE,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAqB1D,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAoBtD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA+BvD,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAkFrD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAwCvD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CAoC5D,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,gBAAgB,CA4BrD,CAAA"}

package/dist/components/LoadingSpinner/LoadingSpinnerIcon.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinnerIcon.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,GAAG,CAAA;;;;AAEtC,wBAMoC;AAEpC,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,kBAAkB,CAAM,CAAA"}
+{"version":3,"file":"LoadingSpinnerIcon.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,GAAG,CAAA;;;;AAEtC,wBAOoC;AAEpC,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,kBAAkB,CAAM,CAAA"}

package/dist/components/LoadingSpinner/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,cAAc,MAAM,GAAG,CAAA;;AAE9B,wBASgC;AAEhC,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,cAAc,CAAM,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,cAAc,MAAM,GAAG,CAAA;;AAE9B,wBAUgC;AAEhC,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,cAAc,CAAM,CAAA"}

package/dist/index.cjs.js

@@ -1276,40 +1276,43 @@ var import_react18 = require("react");
 var MenuListContext = (0, import_react18.createContext)({
   root: void 0,
   value: "",
-  values: [],
+  propsArray: [],
   setValue: (_v) => {
   }
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
 var React12 = __toESM(require("react"));
-function getValuesRecursive(children, values = []) {
+function getValuesRecursive(children) {
   const childArray = React12.Children.toArray(children);
+  const propsArray = [];
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
     if (React12.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
-        const childValue = props.value;
-        values.push(childValue);
+        propsArray.push({
+          disabled: props.disabled,
+          value: props.value
+        });
       }
       if ("children" in props && props.children) {
-        getValuesRecursive(props.children, values);
+        propsArray.push(...getValuesRecursive(props.children));
       }
     }
   }
+  return propsArray;
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function MenuList(props) {
   const root = (0, import_react19.useRef)(null);
-  const values = [];
-  getValuesRecursive(props.children, values);
+  const propsArray = (0, import_react19.useMemo)(() => getValuesRecursive(props.children), [props.children]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
-    values,
+    propsArray,
     setValue: (v) => {
       props.onChange?.(v);
     }
@@ -1321,20 +1324,29 @@ var StyledUl = import_styled_components16.default.ul.withConfig({
 
 // src/components/DropdownSelector/index.tsx
 var import_styled8 = require("@charcoal-ui/styled");
+var import_visually_hidden3 = require("@react-aria/visually-hidden");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(props) {
   const triggerRef = (0, import_react20.useRef)(null);
   const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
+  const isPlaceholder = (0, import_react20.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const propsArray = getValuesRecursive(props.children);
+  const {
+    visuallyHiddenProps
+  } = (0, import_visually_hidden3.useVisuallyHidden)();
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
     props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("select", { name: props.name, value: props.value, tabIndex: -1, children: propsArray.map((itemProps) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
+    }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
       if (props.disabled === true)
         return;
       setIsOpen(true);
     }, ref: triggerRef, type: "button", $active: isOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonIcon, { name: "16/Menu" })
     ] }),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuList, { value: props.value, onChange: (v) => {
@@ -1359,7 +1371,7 @@ var DropdownButton = import_styled_components17.default.button.withConfig({
 }) => invalid === true && (0, import_styled_components17.css)(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
 var DropdownButtonText = import_styled_components17.default.span.withConfig({
   componentId: "ccl__sc-1vnxmc8-3"
-})(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+})(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-", ");overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (p) => p.$isText3 ? "text3" : "text2");
 var DropdownButtonIcon = (0, import_styled_components17.default)(Icon_default).withConfig({
   componentId: "ccl__sc-1vnxmc8-4"
 })(["color:var(--charcoal-text2);"]);
@@ -1387,7 +1399,7 @@ var StyledLi = import_styled_components18.default.li.withConfig({
 })(["list-style:none;"]);
 var ItemDiv = import_styled_components18.default.div.withConfig({
   componentId: "ccl__sc-p1vs75-1"
-})(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{background-color:var(--charcoal-surface3);}"]);
+})(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
 var import_react21 = require("react");
@@ -1426,7 +1438,7 @@ function useMenuItemHandleKeyDown(value) {
   const {
     setValue,
     root,
-    values
+    propsArray
   } = (0, import_react21.useContext)(MenuListContext);
   const setContextValue = (0, import_react21.useCallback)(() => {
     if (value !== void 0)
@@ -1436,24 +1448,33 @@ function useMenuItemHandleKeyDown(value) {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      const isForward = e.key === "ArrowDown";
       e.preventDefault();
-      if (!values || value === void 0)
+      if (!propsArray || value === void 0)
         return;
-      const index = values.indexOf(value);
+      const values = propsArray.map((props) => props.value).filter((v) => v);
+      let index = values.indexOf(value);
       if (index === -1)
         return;
-      const focusValue = e.key === "ArrowUp" ? index - 1 < 0 ? values[values.length - 1] : values[index - 1] : index + 1 >= values.length ? values[0] : values[index + 1];
-      const next = root?.current?.querySelector(`[data-key='${focusValue}']`);
-      if (next instanceof HTMLElement) {
-        next.focus({
-          preventScroll: true
-        });
-        if (root?.current?.parentElement) {
-          handleFocusByKeyBoard(next, root.current.parentElement);
+      for (let n = 0; n < values.length; n++) {
+        const focusValue = isForward ? index + 1 >= values.length ? values[0] : values[index + 1] : index - 1 < 0 ? values[values.length - 1] : values[index - 1];
+        const next = root?.current?.querySelector(`[data-key='${focusValue}']`);
+        if (next instanceof HTMLElement) {
+          if (next.ariaDisabled === "true") {
+            index += isForward ? 1 : -1;
+            continue;
+          }
+          next.focus({
+            preventScroll: true
+          });
+          if (root?.current?.parentElement) {
+            handleFocusByKeyBoard(next, root.current.parentElement);
+          }
+          break;
         }
       }
     }
-  }, [setContextValue, value, root, values]);
+  }, [setContextValue, propsArray, value, root]);
   return [handleKeyDown, setContextValue];
 }