@charcoal-ui/react 6.0.0-rc.7 → 6.0.0-rc.9

package/dist/components/DropdownSelector/MenuList/MenuListContext.js

@@ -0,0 +1,14 @@
+"use client";
+import { createContext } from "react";
+
+//#region src/components/DropdownSelector/MenuList/MenuListContext.ts
+const MenuListContext = createContext({
+	root: void 0,
+	value: "",
+	propsArray: [],
+	setValue: (_v) => {}
+});
+
+//#endregion
+export { MenuListContext };
+//# sourceMappingURL=MenuListContext.js.map

package/dist/components/DropdownSelector/MenuList/MenuListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListContext.js","names":["RefObject","createContext","DropdownMenuItemProps","MenuListContextType","root","HTMLUListElement","value","propsArray","setValue","v","MenuListContext","undefined","_v"],"sources":["../../../../src/components/DropdownSelector/MenuList/MenuListContext.ts"],"sourcesContent":["import { RefObject, createContext } from 'react'\nimport { DropdownMenuItemProps } from '../DropdownMenuItem'\n\ntype MenuListContextType = {\n  root?: RefObject<HTMLUListElement | null>\n  value?: string\n  propsArray?: DropdownMenuItemProps[]\n  setValue: (v: string) => void\n}\n\nexport const MenuListContext = createContext<MenuListContextType>({\n  root: undefined,\n  value: '',\n  propsArray: [],\n  setValue: (_v: string) => {\n    // empty\n  },\n})\n"],"mappings":";;;;AAUA,MAAaU,kBAAkBT,cAAmC;CAChEG,MAAMO;CACNL,OAAO;CACPC,YAAY,EAAE;CACdC,WAAWI,OAAe;CAG3B,CAAC"}

package/dist/components/DropdownSelector/MenuList/index2.cjs

@@ -0,0 +1,32 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+require('./index.cjs');
+const require_MenuListContext = require('./MenuListContext.cjs');
+const require_getValuesRecursive = require('./internals/getValuesRecursive.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/DropdownSelector/MenuList/index.tsx
+function MenuList(props) {
+	const root = (0, react.useRef)(null);
+	const propsArray = (0, react.useMemo)(() => require_getValuesRecursive.getValuesRecursive(props.children), [props.children]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "charcoal-menu-list",
+		ref: root,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuListContext.MenuListContext.Provider, {
+			value: {
+				value: props.value ?? "",
+				root,
+				propsArray,
+				setValue: (v) => {
+					props.onChange?.(v);
+				}
+			},
+			children: props.children
+		})
+	});
+}
+
+//#endregion
+exports.default = MenuList;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/DropdownSelector/MenuList/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["useMemo","useRef","MenuListContext","getValuesRecursive","MenuItem","Divider","MenuItemGroup","MenuListChild","React","ReactElement","MenuListChildren","MenuListProps","children","value","onChange","v","MenuList","props","root","propsArray","setValue"],"sources":["../../../../src/components/DropdownSelector/MenuList/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { useMemo, useRef } from 'react'\nimport { MenuListContext } from './MenuListContext'\nimport { getValuesRecursive } from './internals/getValuesRecursive'\nimport MenuItem from '../MenuItem'\nimport { Divider } from '../Divider'\nimport MenuItemGroup from '../MenuItemGroup'\n\ntype MenuListChild = React.ReactElement<\n  typeof MenuItem | typeof MenuItemGroup | typeof Divider\n>\n\nexport type MenuListChildren = MenuListChild | MenuListChild[]\n\nexport type MenuListProps = {\n  children: MenuListChildren\n  value?: string\n  onChange?: (v: string) => void\n}\n\nexport default function MenuList(props: MenuListProps) {\n  const root = useRef(null)\n  const propsArray = useMemo(\n    () => getValuesRecursive(props.children),\n    [props.children],\n  )\n\n  return (\n    <ul className=\"charcoal-menu-list\" ref={root}>\n      <MenuListContext.Provider\n        value={{\n          value: props.value ?? '',\n          root,\n          propsArray,\n          setValue: (v) => {\n            props.onChange?.(v)\n          },\n        }}\n      >\n        {props.children}\n      </MenuListContext.Provider>\n    </ul>\n  )\n}\n"],"mappings":";;;;;;;;;AAqBA,SAAwBgB,SAASC,OAAsB;CACrD,MAAMC,yBAAc,KAAK;CACzB,MAAMC,sCACEhB,8CAAmBc,MAAML,SAAS,EACxC,CAACK,MAAML,SACT,CAAC;CAED,OACE,2CAAC,MAAD;EAAI,WAAU;EAAqB,KAAKM;YACtC,2CAAC,wCAAgB,UAAjB;GACE,OAAO;IACLL,OAAOI,MAAMJ,SAAS;IACtBK;IACAC;IACAC,WAAWL,MAAM;KACfE,MAAMH,WAAWC,EAAE;;IAEtB;aAEAE,MAAML;GACiB;EACvB"}

package/dist/components/DropdownSelector/MenuList/index2.js

@@ -0,0 +1,31 @@
+"use client";
+/* empty css      */
+import { MenuListContext } from "./MenuListContext.js";
+import { getValuesRecursive } from "./internals/getValuesRecursive.js";
+import { useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/DropdownSelector/MenuList/index.tsx
+function MenuList(props) {
+	const root = useRef(null);
+	const propsArray = useMemo(() => getValuesRecursive(props.children), [props.children]);
+	return /* @__PURE__ */ jsx("ul", {
+		className: "charcoal-menu-list",
+		ref: root,
+		children: /* @__PURE__ */ jsx(MenuListContext.Provider, {
+			value: {
+				value: props.value ?? "",
+				root,
+				propsArray,
+				setValue: (v) => {
+					props.onChange?.(v);
+				}
+			},
+			children: props.children
+		})
+	});
+}
+
+//#endregion
+export { MenuList as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/DropdownSelector/MenuList/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["useMemo","useRef","MenuListContext","getValuesRecursive","MenuItem","Divider","MenuItemGroup","MenuListChild","React","ReactElement","MenuListChildren","MenuListProps","children","value","onChange","v","MenuList","props","root","propsArray","setValue"],"sources":["../../../../src/components/DropdownSelector/MenuList/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { useMemo, useRef } from 'react'\nimport { MenuListContext } from './MenuListContext'\nimport { getValuesRecursive } from './internals/getValuesRecursive'\nimport MenuItem from '../MenuItem'\nimport { Divider } from '../Divider'\nimport MenuItemGroup from '../MenuItemGroup'\n\ntype MenuListChild = React.ReactElement<\n  typeof MenuItem | typeof MenuItemGroup | typeof Divider\n>\n\nexport type MenuListChildren = MenuListChild | MenuListChild[]\n\nexport type MenuListProps = {\n  children: MenuListChildren\n  value?: string\n  onChange?: (v: string) => void\n}\n\nexport default function MenuList(props: MenuListProps) {\n  const root = useRef(null)\n  const propsArray = useMemo(\n    () => getValuesRecursive(props.children),\n    [props.children],\n  )\n\n  return (\n    <ul className=\"charcoal-menu-list\" ref={root}>\n      <MenuListContext.Provider\n        value={{\n          value: props.value ?? '',\n          root,\n          propsArray,\n          setValue: (v) => {\n            props.onChange?.(v)\n          },\n        }}\n      >\n        {props.children}\n      </MenuListContext.Provider>\n    </ul>\n  )\n}\n"],"mappings":";;;;;;;;AAqBA,SAAwBgB,SAASC,OAAsB;CACrD,MAAMC,OAAOjB,OAAO,KAAK;CACzB,MAAMkB,aAAanB,cACXG,mBAAmBc,MAAML,SAAS,EACxC,CAACK,MAAML,SACT,CAAC;CAED,OACE,oBAAC,MAAD;EAAI,WAAU;EAAqB,KAAKM;YACtC,oBAAC,gBAAgB,UAAjB;GACE,OAAO;IACLL,OAAOI,MAAMJ,SAAS;IACtBK;IACAC;IACAC,WAAWL,MAAM;KACfE,MAAMH,WAAWC,EAAE;;IAEtB;aAEAE,MAAML;GACiB;EACvB"}

package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.cjs

@@ -0,0 +1,34 @@
+"use client";
+const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
+/**
+* valueというpropsを持つ子要素の値を再起的に探索して配列にする
+*
+* @param children
+* @param value
+* @param values
+* @returns
+*/
+function getValuesRecursive(children) {
+	const childArray = react.Children.toArray(children);
+	const propsArray = [];
+	for (let i = 0; i < childArray.length; i++) {
+		const child = childArray[i];
+		if (react.isValidElement(child)) {
+			const props = child.props;
+			if ("value" in props && typeof props.value === "string") propsArray.push({
+				disabled: props.disabled,
+				value: props.value
+			});
+			if ("children" in props && props.children) propsArray.push(...getValuesRecursive(props.children));
+		}
+	}
+	return propsArray;
+}
+
+//#endregion
+exports.getValuesRecursive = getValuesRecursive;
+//# sourceMappingURL=getValuesRecursive.cjs.map

package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getValuesRecursive.cjs","names":["React","MenuItem","MenuListChildren","MenuItemGroup","DropdownMenuItemProps","getValuesRecursive","children","childArray","Children","toArray","propsArray","i","length","child","isValidElement","props","value","disabled","ReactElement","push"],"sources":["../../../../../src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx"],"sourcesContent":["import * as React from 'react'\nimport MenuItem from '../../MenuItem'\nimport { MenuListChildren } from '..'\nimport MenuItemGroup from '../../MenuItemGroup'\nimport { DropdownMenuItemProps } from '../../DropdownMenuItem'\n\n/**\n * valueというpropsを持つ子要素の値を再起的に探索して配列にする\n *\n * @param children\n * @param value\n * @param values\n * @returns\n */\nexport function getValuesRecursive(children: MenuListChildren) {\n  const childArray = React.Children.toArray(children)\n  const propsArray: DropdownMenuItemProps[] = []\n  for (let i = 0; i < childArray.length; i++) {\n    const child = childArray[i]\n    if (React.isValidElement(child)) {\n      const props = child.props as {\n        value?: string\n        disabled?: boolean\n        children?: React.ReactElement<typeof MenuItem | typeof MenuItemGroup>[]\n      }\n      if ('value' in props && typeof props.value === 'string') {\n        propsArray.push({\n          disabled: props.disabled,\n          value: props.value,\n        })\n      }\n      if ('children' in props && props.children) {\n        propsArray.push(...getValuesRecursive(props.children))\n      }\n    }\n  }\n  return propsArray\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgBK,mBAAmBC,UAA4B;CAC7D,MAAMC,aAAaP,MAAMQ,SAASC,QAAQH,SAAS;CACnD,MAAMI,aAAsC,EAAE;CAC9C,KAAK,IAAIC,IAAI,GAAGA,IAAIJ,WAAWK,QAAQD,KAAK;EAC1C,MAAME,QAAQN,WAAWI;EACzB,IAAIX,MAAMc,eAAeD,MAAM,EAAE;GAC/B,MAAME,QAAQF,MAAME;GAKpB,IAAI,WAAWA,SAAS,OAAOA,MAAMC,UAAU,UAC7CN,WAAWS,KAAK;IACdF,UAAUF,MAAME;IAChBD,OAAOD,MAAMC;IACd,CAAC;GAEJ,IAAI,cAAcD,SAASA,MAAMT,UAC/BI,WAAWS,KAAK,GAAGd,mBAAmBU,MAAMT,SAAS,CAAC;;;CAI5D,OAAOI"}

package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.js

@@ -0,0 +1,32 @@
+"use client";
+import * as React$1 from "react";
+
+//#region src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
+/**
+* valueというpropsを持つ子要素の値を再起的に探索して配列にする
+*
+* @param children
+* @param value
+* @param values
+* @returns
+*/
+function getValuesRecursive(children) {
+	const childArray = React$1.Children.toArray(children);
+	const propsArray = [];
+	for (let i = 0; i < childArray.length; i++) {
+		const child = childArray[i];
+		if (React$1.isValidElement(child)) {
+			const props = child.props;
+			if ("value" in props && typeof props.value === "string") propsArray.push({
+				disabled: props.disabled,
+				value: props.value
+			});
+			if ("children" in props && props.children) propsArray.push(...getValuesRecursive(props.children));
+		}
+	}
+	return propsArray;
+}
+
+//#endregion
+export { getValuesRecursive };
+//# sourceMappingURL=getValuesRecursive.js.map

package/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getValuesRecursive.js","names":["React","MenuItem","MenuListChildren","MenuItemGroup","DropdownMenuItemProps","getValuesRecursive","children","childArray","Children","toArray","propsArray","i","length","child","isValidElement","props","value","disabled","ReactElement","push"],"sources":["../../../../../src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx"],"sourcesContent":["import * as React from 'react'\nimport MenuItem from '../../MenuItem'\nimport { MenuListChildren } from '..'\nimport MenuItemGroup from '../../MenuItemGroup'\nimport { DropdownMenuItemProps } from '../../DropdownMenuItem'\n\n/**\n * valueというpropsを持つ子要素の値を再起的に探索して配列にする\n *\n * @param children\n * @param value\n * @param values\n * @returns\n */\nexport function getValuesRecursive(children: MenuListChildren) {\n  const childArray = React.Children.toArray(children)\n  const propsArray: DropdownMenuItemProps[] = []\n  for (let i = 0; i < childArray.length; i++) {\n    const child = childArray[i]\n    if (React.isValidElement(child)) {\n      const props = child.props as {\n        value?: string\n        disabled?: boolean\n        children?: React.ReactElement<typeof MenuItem | typeof MenuItemGroup>[]\n      }\n      if ('value' in props && typeof props.value === 'string') {\n        propsArray.push({\n          disabled: props.disabled,\n          value: props.value,\n        })\n      }\n      if ('children' in props && props.children) {\n        propsArray.push(...getValuesRecursive(props.children))\n      }\n    }\n  }\n  return propsArray\n}\n"],"mappings":";;;;;;;;;;;;AAcA,SAAgBK,mBAAmBC,UAA4B;CAC7D,MAAMC,aAAaP,QAAMQ,SAASC,QAAQH,SAAS;CACnD,MAAMI,aAAsC,EAAE;CAC9C,KAAK,IAAIC,IAAI,GAAGA,IAAIJ,WAAWK,QAAQD,KAAK;EAC1C,MAAME,QAAQN,WAAWI;EACzB,IAAIX,QAAMc,eAAeD,MAAM,EAAE;GAC/B,MAAME,QAAQF,MAAME;GAKpB,IAAI,WAAWA,SAAS,OAAOA,MAAMC,UAAU,UAC7CN,WAAWS,KAAK;IACdF,UAAUF,MAAME;IAChBD,OAAOD,MAAMC;IACd,CAAC;GAEJ,IAAI,cAAcD,SAASA,MAAMT,UAC/BI,WAAWS,KAAK,GAAGd,mBAAmBU,MAAMT,SAAS,CAAC;;;CAI5D,OAAOI"}

package/dist/components/DropdownSelector/Popover/index2.cjs

@@ -0,0 +1,71 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_ModalBackgroundContext = require('../../Modal/ModalBackgroundContext.cjs');
+const require_usePreventScroll = require('./usePreventScroll.cjs');
+require('./index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_Overlay = require("react-aria/Overlay");
+let react_aria_usePopover = require("react-aria/usePopover");
+
+//#region src/components/DropdownSelector/Popover/index.tsx
+const _empty = () => null;
+/**
+* 画面の全面に動的に開くことができるコンテナ要素
+* 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる
+*
+* triggerRefの付近に画面内に収まるように表示される
+*/
+function Popover(props) {
+	const defaultPopoverRef = (0, react.useRef)(null);
+	const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
+	const { popoverProps, underlayProps } = (0, react_aria_usePopover.usePopover)({
+		triggerRef: props.triggerRef,
+		popoverRef: finalPopoverRef,
+		containerPadding: 16
+	}, {
+		close: props.onClose,
+		isOpen: props.isOpen,
+		open: _empty,
+		setOpen: _empty,
+		toggle: _empty
+	});
+	require_usePreventScroll.usePreventScroll((0, react.useContext)(require_ModalBackgroundContext.ModalBackgroundContext), props.isOpen);
+	if (!props.isOpen) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_Overlay.Overlay, {
+		portalContainer: document.body,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...underlayProps,
+			...props.inertWorkaround ? {
+				"data-react-aria-top-layer": true,
+				onClick: props.onClose
+			} : {},
+			style: {
+				position: "fixed",
+				zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
+				inset: 0
+			}
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...popoverProps,
+			ref: finalPopoverRef,
+			className: "charcoal-popover",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_Overlay.DismissButton, { onDismiss: () => props.onClose() }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					tabIndex: 0,
+					onFocus: props.onClose
+				}),
+				props.children,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					tabIndex: 0,
+					onFocus: props.onClose
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_Overlay.DismissButton, { onDismiss: () => props.onClose() })
+			]
+		})]
+	});
+}
+
+//#endregion
+exports.default = Popover;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/DropdownSelector/Popover/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["RefObject","useContext","useRef","ReactNode","ModalBackgroundContext","usePreventScroll","DismissButton","Overlay","usePopover","PopoverProps","isOpen","onClose","children","triggerRef","Element","popoverRef","HTMLDivElement","inertWorkaround","_empty","Popover","props","defaultPopoverRef","finalPopoverRef","undefined","popoverProps","underlayProps","containerPadding","close","open","setOpen","toggle","modalBackground","document","body","onClick","position","zIndex","style","inset"],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { RefObject, useContext, useRef, ReactNode } from 'react'\nimport { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'\nimport { usePreventScroll } from './usePreventScroll'\nimport { DismissButton, Overlay } from 'react-aria/Overlay'\nimport { usePopover } from 'react-aria/usePopover'\n\nexport type PopoverProps = {\n  isOpen: boolean\n  onClose: () => void\n  children: ReactNode\n  triggerRef: RefObject<Element | null>\n  popoverRef?: RefObject<HTMLDivElement | null>\n  /**\n   * A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.\n   * This may become default at next major.\n   * https://github.com/adobe/react-spectrum/pull/8796\n   * https://github.com/adobe/react-spectrum/issues/8784\n   *\n   * @default false\n   */\n  inertWorkaround?: boolean\n}\n\nconst _empty = () => null\n\n/**\n * 画面の全面に動的に開くことができるコンテナ要素\n * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる\n *\n * triggerRefの付近に画面内に収まるように表示される\n */\nexport default function Popover(props: PopoverProps) {\n  const defaultPopoverRef = useRef<HTMLDivElement>(null)\n  const finalPopoverRef =\n    props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef\n  const { popoverProps, underlayProps } = usePopover(\n    {\n      triggerRef: props.triggerRef,\n      popoverRef: finalPopoverRef,\n      containerPadding: 16,\n    },\n    {\n      close: props.onClose,\n      isOpen: props.isOpen,\n      // never used\n      open: _empty,\n      setOpen: _empty,\n      toggle: _empty,\n    },\n  )\n\n  const modalBackground = useContext(ModalBackgroundContext)\n  usePreventScroll(modalBackground, props.isOpen)\n\n  if (!props.isOpen) return null\n\n  return (\n    <Overlay portalContainer={document.body}>\n      <div\n        {...underlayProps}\n        // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154\n        {...(props.inertWorkaround\n          ? { 'data-react-aria-top-layer': true, onClick: props.onClose }\n          : {})}\n        style={{\n          position: 'fixed',\n          zIndex:\n            typeof popoverProps.style?.zIndex === 'number'\n              ? popoverProps.style.zIndex - 1\n              : 99999,\n          inset: 0,\n        }}\n      />\n      {/* @ts-expect-error react types we use does not support react 19 types yet */}\n      <div {...popoverProps} ref={finalPopoverRef} className=\"charcoal-popover\">\n        <DismissButton onDismiss={() => props.onClose()} />\n        <div tabIndex={0} onFocus={props.onClose} />\n        {props.children}\n        <div tabIndex={0} onFocus={props.onClose} />\n        <DismissButton onDismiss={() => props.onClose()} />\n      </div>\n    </Overlay>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAyBA,MAAMkB,eAAe;;;;;;;AAQrB,SAAwBC,QAAQC,OAAqB;CACnD,MAAMC,sCAA2C,KAAK;CACtD,MAAMC,kBACJF,MAAML,eAAeQ,SAAYF,oBAAoBD,MAAML;CAC7D,MAAM,EAAES,cAAcC,wDACpB;EACEZ,YAAYO,MAAMP;EAClBE,YAAYO;EACZI,kBAAkB;EACnB,EACD;EACEC,OAAOP,MAAMT;EACbD,QAAQU,MAAMV;EAEdkB,MAAMV;EACNW,SAASX;EACTY,QAAQZ;EAEZ,CAAC;CAGDb,gEADmCD,sDACH,EAAEgB,MAAMV,OAAO;CAE/C,IAAI,CAACU,MAAMV,QAAQ,OAAO;CAE1B,OACE,4CAAC,4BAAD;EAAS,iBAAiBsB,SAASC;YAAnC,CACE,2CAAC,OAAD;GACE,GAAIR;GAEJ,GAAKL,MAAMH,kBACP;IAAE,6BAA6B;IAAMiB,SAASd,MAAMT;IAAS,GAC7D,EAAG;GACP,OAAO;IACLwB,UAAU;IACVC,QACE,OAAOZ,aAAaa,OAAOD,WAAW,WAClCZ,aAAaa,MAAMD,SAAS,IAC5B;IACNE,OAAO;IACR;GAAC,GAGJ,4CAAC,OAAD;GAAK,GAAId;GAAc,KAAKF;GAAiB,WAAU;aAAvD;IACE,2CAAC,kCAAD,EAAe,iBAAiBF,MAAMT,SAAS,EAAC;IAChD,2CAAC,OAAD;KAAK,UAAU;KAAG,SAASS,MAAMT;KAAQ;IACxCS,MAAMR;IACP,2CAAC,OAAD;KAAK,UAAU;KAAG,SAASQ,MAAMT;KAAQ;IACzC,2CAAC,kCAAD,EAAe,iBAAiBS,MAAMT,SAAS,EAAC;IAC7C;KACG"}

package/dist/components/DropdownSelector/Popover/index2.js

@@ -0,0 +1,70 @@
+"use client";
+import { ModalBackgroundContext } from "../../Modal/ModalBackgroundContext.js";
+import { usePreventScroll } from "./usePreventScroll.js";
+/* empty css      */
+import { useContext, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DismissButton, Overlay } from "react-aria/Overlay";
+import { usePopover } from "react-aria/usePopover";
+
+//#region src/components/DropdownSelector/Popover/index.tsx
+const _empty = () => null;
+/**
+* 画面の全面に動的に開くことができるコンテナ要素
+* 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる
+*
+* triggerRefの付近に画面内に収まるように表示される
+*/
+function Popover(props) {
+	const defaultPopoverRef = useRef(null);
+	const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
+	const { popoverProps, underlayProps } = usePopover({
+		triggerRef: props.triggerRef,
+		popoverRef: finalPopoverRef,
+		containerPadding: 16
+	}, {
+		close: props.onClose,
+		isOpen: props.isOpen,
+		open: _empty,
+		setOpen: _empty,
+		toggle: _empty
+	});
+	usePreventScroll(useContext(ModalBackgroundContext), props.isOpen);
+	if (!props.isOpen) return null;
+	return /* @__PURE__ */ jsxs(Overlay, {
+		portalContainer: document.body,
+		children: [/* @__PURE__ */ jsx("div", {
+			...underlayProps,
+			...props.inertWorkaround ? {
+				"data-react-aria-top-layer": true,
+				onClick: props.onClose
+			} : {},
+			style: {
+				position: "fixed",
+				zIndex: typeof popoverProps.style?.zIndex === "number" ? popoverProps.style.zIndex - 1 : 99999,
+				inset: 0
+			}
+		}), /* @__PURE__ */ jsxs("div", {
+			...popoverProps,
+			ref: finalPopoverRef,
+			className: "charcoal-popover",
+			children: [
+				/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => props.onClose() }),
+				/* @__PURE__ */ jsx("div", {
+					tabIndex: 0,
+					onFocus: props.onClose
+				}),
+				props.children,
+				/* @__PURE__ */ jsx("div", {
+					tabIndex: 0,
+					onFocus: props.onClose
+				}),
+				/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => props.onClose() })
+			]
+		})]
+	});
+}
+
+//#endregion
+export { Popover as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/DropdownSelector/Popover/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["RefObject","useContext","useRef","ReactNode","ModalBackgroundContext","usePreventScroll","DismissButton","Overlay","usePopover","PopoverProps","isOpen","onClose","children","triggerRef","Element","popoverRef","HTMLDivElement","inertWorkaround","_empty","Popover","props","defaultPopoverRef","finalPopoverRef","undefined","popoverProps","underlayProps","containerPadding","close","open","setOpen","toggle","modalBackground","document","body","onClick","position","zIndex","style","inset"],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { RefObject, useContext, useRef, ReactNode } from 'react'\nimport { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'\nimport { usePreventScroll } from './usePreventScroll'\nimport { DismissButton, Overlay } from 'react-aria/Overlay'\nimport { usePopover } from 'react-aria/usePopover'\n\nexport type PopoverProps = {\n  isOpen: boolean\n  onClose: () => void\n  children: ReactNode\n  triggerRef: RefObject<Element | null>\n  popoverRef?: RefObject<HTMLDivElement | null>\n  /**\n   * A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.\n   * This may become default at next major.\n   * https://github.com/adobe/react-spectrum/pull/8796\n   * https://github.com/adobe/react-spectrum/issues/8784\n   *\n   * @default false\n   */\n  inertWorkaround?: boolean\n}\n\nconst _empty = () => null\n\n/**\n * 画面の全面に動的に開くことができるコンテナ要素\n * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる\n *\n * triggerRefの付近に画面内に収まるように表示される\n */\nexport default function Popover(props: PopoverProps) {\n  const defaultPopoverRef = useRef<HTMLDivElement>(null)\n  const finalPopoverRef =\n    props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef\n  const { popoverProps, underlayProps } = usePopover(\n    {\n      triggerRef: props.triggerRef,\n      popoverRef: finalPopoverRef,\n      containerPadding: 16,\n    },\n    {\n      close: props.onClose,\n      isOpen: props.isOpen,\n      // never used\n      open: _empty,\n      setOpen: _empty,\n      toggle: _empty,\n    },\n  )\n\n  const modalBackground = useContext(ModalBackgroundContext)\n  usePreventScroll(modalBackground, props.isOpen)\n\n  if (!props.isOpen) return null\n\n  return (\n    <Overlay portalContainer={document.body}>\n      <div\n        {...underlayProps}\n        // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154\n        {...(props.inertWorkaround\n          ? { 'data-react-aria-top-layer': true, onClick: props.onClose }\n          : {})}\n        style={{\n          position: 'fixed',\n          zIndex:\n            typeof popoverProps.style?.zIndex === 'number'\n              ? popoverProps.style.zIndex - 1\n              : 99999,\n          inset: 0,\n        }}\n      />\n      {/* @ts-expect-error react types we use does not support react 19 types yet */}\n      <div {...popoverProps} ref={finalPopoverRef} className=\"charcoal-popover\">\n        <DismissButton onDismiss={() => props.onClose()} />\n        <div tabIndex={0} onFocus={props.onClose} />\n        {props.children}\n        <div tabIndex={0} onFocus={props.onClose} />\n        <DismissButton onDismiss={() => props.onClose()} />\n      </div>\n    </Overlay>\n  )\n}\n"],"mappings":";;;;;;;;;;AAyBA,MAAMkB,eAAe;;;;;;;AAQrB,SAAwBC,QAAQC,OAAqB;CACnD,MAAMC,oBAAoBnB,OAAuB,KAAK;CACtD,MAAMoB,kBACJF,MAAML,eAAeQ,SAAYF,oBAAoBD,MAAML;CAC7D,MAAM,EAAES,cAAcC,kBAAkBjB,WACtC;EACEK,YAAYO,MAAMP;EAClBE,YAAYO;EACZI,kBAAkB;EACnB,EACD;EACEC,OAAOP,MAAMT;EACbD,QAAQU,MAAMV;EAEdkB,MAAMV;EACNW,SAASX;EACTY,QAAQZ;EAEZ,CAAC;CAGDb,iBADwBJ,WAAWG,uBACH,EAAEgB,MAAMV,OAAO;CAE/C,IAAI,CAACU,MAAMV,QAAQ,OAAO;CAE1B,OACE,qBAAC,SAAD;EAAS,iBAAiBsB,SAASC;YAAnC,CACE,oBAAC,OAAD;GACE,GAAIR;GAEJ,GAAKL,MAAMH,kBACP;IAAE,6BAA6B;IAAMiB,SAASd,MAAMT;IAAS,GAC7D,EAAG;GACP,OAAO;IACLwB,UAAU;IACVC,QACE,OAAOZ,aAAaa,OAAOD,WAAW,WAClCZ,aAAaa,MAAMD,SAAS,IAC5B;IACNE,OAAO;IACR;GAAC,GAGJ,qBAAC,OAAD;GAAK,GAAId;GAAc,KAAKF;GAAiB,WAAU;aAAvD;IACE,oBAAC,eAAD,EAAe,iBAAiBF,MAAMT,SAAS,EAAC;IAChD,oBAAC,OAAD;KAAK,UAAU;KAAG,SAASS,MAAMT;KAAQ;IACxCS,MAAMR;IACP,oBAAC,OAAD;KAAK,UAAU;KAAG,SAASQ,MAAMT;KAAQ;IACzC,oBAAC,eAAD,EAAe,iBAAiBS,MAAMT,SAAS,EAAC;IAC7C;KACG"}

package/dist/components/DropdownSelector/Popover/usePreventScroll.cjs

@@ -0,0 +1,27 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/DropdownSelector/Popover/usePreventScroll.tsx
+function usePreventScroll(element, isOpen, useClip = false) {
+	(0, react.useEffect)(() => {
+		if (isOpen && element) {
+			const defaultPaddingRight = element.style.paddingRight;
+			const defaultOverflow = element.style.overflow;
+			element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
+			element.style.overflow = useClip ? "clip" : "hidden";
+			return () => {
+				element.style.paddingRight = defaultPaddingRight;
+				element.style.overflow = defaultOverflow;
+			};
+		}
+	}, [
+		element,
+		isOpen,
+		useClip
+	]);
+}
+
+//#endregion
+exports.usePreventScroll = usePreventScroll;
+//# sourceMappingURL=usePreventScroll.cjs.map

package/dist/components/DropdownSelector/Popover/usePreventScroll.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreventScroll.cjs","names":["useEffect","usePreventScroll","element","HTMLElement","isOpen","useClip","defaultPaddingRight","style","paddingRight","defaultOverflow","overflow","window","innerWidth","clientWidth"],"sources":["../../../../src/components/DropdownSelector/Popover/usePreventScroll.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nexport function usePreventScroll(\n  element: HTMLElement | null,\n  isOpen: boolean,\n  useClip = false,\n) {\n  useEffect(() => {\n    if (isOpen && element) {\n      const defaultPaddingRight = element.style.paddingRight\n      const defaultOverflow = element.style.overflow\n      // eslint-disable-next-line react-compiler/react-compiler\n      element.style.paddingRight = `${\n        window.innerWidth - element.clientWidth\n      }px`\n      element.style.overflow = useClip ? 'clip' : 'hidden'\n      return () => {\n        element.style.paddingRight = defaultPaddingRight\n        element.style.overflow = defaultOverflow\n      }\n    }\n  }, [element, isOpen, useClip])\n}\n"],"mappings":";;;;;AAEA,SAAgBC,iBACdC,SACAE,QACAC,UAAU,OACV;CACAL,2BAAgB;EACd,IAAII,UAAUF,SAAS;GACrB,MAAMI,sBAAsBJ,QAAQK,MAAMC;GAC1C,MAAMC,kBAAkBP,QAAQK,MAAMG;GAEtCR,QAAQK,MAAMC,eAAe,GAC3BG,OAAOC,aAAaV,QAAQW,YAAW;GAEzCX,QAAQK,MAAMG,WAAWL,UAAU,SAAS;GAC5C,aAAa;IACXH,QAAQK,MAAMC,eAAeF;IAC7BJ,QAAQK,MAAMG,WAAWD;;;IAG5B;EAACP;EAASE;EAAQC;EAAQ,CAAC"}

package/dist/components/DropdownSelector/Popover/usePreventScroll.js

@@ -0,0 +1,26 @@
+"use client";
+import { useEffect } from "react";
+
+//#region src/components/DropdownSelector/Popover/usePreventScroll.tsx
+function usePreventScroll(element, isOpen, useClip = false) {
+	useEffect(() => {
+		if (isOpen && element) {
+			const defaultPaddingRight = element.style.paddingRight;
+			const defaultOverflow = element.style.overflow;
+			element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
+			element.style.overflow = useClip ? "clip" : "hidden";
+			return () => {
+				element.style.paddingRight = defaultPaddingRight;
+				element.style.overflow = defaultOverflow;
+			};
+		}
+	}, [
+		element,
+		isOpen,
+		useClip
+	]);
+}
+
+//#endregion
+export { usePreventScroll };
+//# sourceMappingURL=usePreventScroll.js.map

package/dist/components/DropdownSelector/Popover/usePreventScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreventScroll.js","names":["useEffect","usePreventScroll","element","HTMLElement","isOpen","useClip","defaultPaddingRight","style","paddingRight","defaultOverflow","overflow","window","innerWidth","clientWidth"],"sources":["../../../../src/components/DropdownSelector/Popover/usePreventScroll.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nexport function usePreventScroll(\n  element: HTMLElement | null,\n  isOpen: boolean,\n  useClip = false,\n) {\n  useEffect(() => {\n    if (isOpen && element) {\n      const defaultPaddingRight = element.style.paddingRight\n      const defaultOverflow = element.style.overflow\n      // eslint-disable-next-line react-compiler/react-compiler\n      element.style.paddingRight = `${\n        window.innerWidth - element.clientWidth\n      }px`\n      element.style.overflow = useClip ? 'clip' : 'hidden'\n      return () => {\n        element.style.paddingRight = defaultPaddingRight\n        element.style.overflow = defaultOverflow\n      }\n    }\n  }, [element, isOpen, useClip])\n}\n"],"mappings":";;;;AAEA,SAAgBC,iBACdC,SACAE,QACAC,UAAU,OACV;CACAL,gBAAgB;EACd,IAAII,UAAUF,SAAS;GACrB,MAAMI,sBAAsBJ,QAAQK,MAAMC;GAC1C,MAAMC,kBAAkBP,QAAQK,MAAMG;GAEtCR,QAAQK,MAAMC,eAAe,GAC3BG,OAAOC,aAAaV,QAAQW,YAAW;GAEzCX,QAAQK,MAAMG,WAAWL,UAAU,SAAS;GAC5C,aAAa;IACXH,QAAQK,MAAMC,eAAeF;IAC7BJ,QAAQK,MAAMG,WAAWD;;;IAG5B;EAACP;EAASE;EAAQC;EAAQ,CAAC"}

package/dist/components/DropdownSelector/index2.cjs

@@ -0,0 +1,113 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+const require_index = require('../Icon/index.cjs');
+const require_index$1 = require('../FieldLabel/index2.cjs');
+const require_index$2 = require('../TextField/AssistiveText/index2.cjs');
+require('./index.cjs');
+const require_DropdownPopover = require('./DropdownPopover.cjs');
+const require_findPreviewRecursive = require('./utils/findPreviewRecursive.cjs');
+const require_getValuesRecursive = require('./MenuList/internals/getValuesRecursive.cjs');
+const require_index$4 = require('./MenuList/index2.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_useId = require("react-aria/useId");
+let react_aria_VisuallyHidden = require("react-aria/VisuallyHidden");
+
+//#region src/components/DropdownSelector/index.tsx
+function DropdownSelector({ onChange, showLabel = false, selectRef, ...props }) {
+	const triggerRef = (0, react.useRef)(null);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const preview = require_findPreviewRecursive.findPreviewRecursive(props.children, props.value);
+	const isPlaceholder = (0, react.useMemo)(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+	const propsArray = require_getValuesRecursive.getValuesRecursive(props.children);
+	const hasMatchedValue = (0, react.useMemo)(() => propsArray.some((itemProps) => itemProps.value === props.value), [propsArray, props.value]);
+	const { visuallyHiddenProps } = (0, react_aria_VisuallyHidden.useVisuallyHidden)();
+	const handleChange = (0, react.useCallback)((e) => {
+		onChange(e.target.value);
+	}, [onChange]);
+	const labelId = (0, react_aria_useId.useId)();
+	const describedbyId = (0, react_aria_useId.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_useClassNames.useClassNames("charcoal-dropdown-selector-root", props.className),
+		"aria-disabled": props.disabled,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+				id: labelId,
+				label: props.label,
+				required: props.required,
+				requiredText: props.requiredText,
+				subLabel: props.subLabel,
+				...!showLabel ? visuallyHiddenProps : {}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...visuallyHiddenProps,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					name: props.name,
+					value: props.value,
+					onChange: handleChange,
+					tabIndex: -1,
+					ref: selectRef,
+					children: [!hasMatchedValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: props.value,
+						children: props.value
+					}), propsArray.map((itemProps) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: itemProps.value,
+							disabled: itemProps.disabled,
+							children: itemProps.value
+						}, itemProps.value);
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				className: "charcoal-dropdown-selector-button",
+				"aria-labelledby": labelId,
+				"aria-invalid": props.invalid,
+				"aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0,
+				disabled: props.disabled,
+				onClick: () => {
+					if (props.disabled === true) return;
+					setIsOpen(true);
+				},
+				ref: triggerRef,
+				type: "button",
+				"data-active": isOpen,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "charcoal-ui-dropdown-selector-text",
+					"data-placeholder": isPlaceholder,
+					children: isPlaceholder ? props.placeholder : preview
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+					className: "charcoal-ui-dropdown-selector-icon",
+					name: "16/Menu"
+				})]
+			}),
+			isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownPopover.DropdownPopover, {
+				isOpen,
+				onClose: () => setIsOpen(false),
+				triggerRef,
+				value: props.value,
+				inertWorkaround: props.inertWorkaround,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$4.default, {
+					value: props.value,
+					onChange: (v) => {
+						onChange(v);
+						setIsOpen(false);
+					},
+					children: props.children
+				})
+			}),
+			props.assistiveText !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AssistiveText, {
+				"data-invalid": props.invalid === true,
+				id: describedbyId,
+				children: props.assistiveText
+			})
+		]
+	});
+}
+
+//#endregion
+exports.default = DropdownSelector;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/DropdownSelector/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["React","ReactNode","useState","useRef","useMemo","useCallback","Icon","FieldLabel","DropdownPopover","findPreviewRecursive","MenuList","MenuListChildren","getValuesRecursive","AssistiveText","useClassNames","PopoverProps","useVisuallyHidden","useId","DropdownSelectorProps","label","value","disabled","placeholder","showLabel","invalid","assistiveText","required","requiredText","subLabel","name","children","onChange","className","selectRef","Ref","HTMLSelectElement","Pick","DropdownSelector","props","triggerRef","HTMLButtonElement","isOpen","setIsOpen","preview","isPlaceholder","undefined","propsArray","hasMatchedValue","some","itemProps","visuallyHiddenProps","handleChange","e","ChangeEvent","target","labelId","describedbyId","classNames","map","inertWorkaround","v"],"sources":["../../../src/components/DropdownSelector/index.tsx"],"sourcesContent":["import './index.css'\n\nimport React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { DropdownPopover } from './DropdownPopover'\nimport { findPreviewRecursive } from './utils/findPreviewRecursive'\nimport MenuList, { MenuListChildren } from './MenuList'\nimport { getValuesRecursive } from './MenuList/internals/getValuesRecursive'\nimport { AssistiveText } from '../TextField/AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { PopoverProps } from './Popover'\n\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type DropdownSelectorProps = {\n  label: string\n  value: string\n  disabled?: boolean\n  placeholder?: string\n  showLabel?: boolean\n  invalid?: boolean\n  assistiveText?: string\n  required?: boolean\n  requiredText?: string\n  subLabel?: ReactNode\n  /**\n   * the name of hidden `<select />`\n   */\n  name?: string\n  children: MenuListChildren\n  onChange: (value: string) => void\n  className?: string\n  selectRef?: React.Ref<HTMLSelectElement>\n} & Pick<PopoverProps, 'inertWorkaround'>\n\nexport default function DropdownSelector({\n  onChange,\n  showLabel = false,\n  selectRef,\n  ...props\n}: DropdownSelectorProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const preview = findPreviewRecursive(props.children, props.value)\n\n  const isPlaceholder = useMemo(\n    () => props.placeholder !== undefined && preview === undefined,\n    [preview, props.placeholder],\n  )\n\n  const propsArray = getValuesRecursive(props.children)\n  const hasMatchedValue = useMemo(\n    () => propsArray.some((itemProps) => itemProps.value === props.value),\n    [propsArray, props.value],\n  )\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e.target.value)\n    },\n    [onChange],\n  )\n\n  const labelId = useId()\n  const describedbyId = useId()\n\n  const classNames = useClassNames(\n    'charcoal-dropdown-selector-root',\n    props.className,\n  )\n\n  return (\n    <div className={classNames} aria-disabled={props.disabled}>\n      <FieldLabel\n        id={labelId}\n        label={props.label}\n        required={props.required}\n        requiredText={props.requiredText}\n        subLabel={props.subLabel}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <div {...visuallyHiddenProps} aria-hidden=\"true\">\n        <select\n          name={props.name}\n          value={props.value}\n          onChange={handleChange}\n          tabIndex={-1}\n          ref={selectRef}\n        >\n          {!hasMatchedValue && (\n            <option value={props.value}>{props.value}</option>\n          )}\n          {propsArray.map((itemProps) => {\n            return (\n              <option\n                key={itemProps.value}\n                value={itemProps.value}\n                disabled={itemProps.disabled}\n              >\n                {itemProps.value}\n              </option>\n            )\n          })}\n        </select>\n      </div>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n      <button\n        className=\"charcoal-dropdown-selector-button\"\n        aria-labelledby={labelId}\n        aria-invalid={props.invalid}\n        aria-describedby={\n          props.assistiveText !== undefined ? describedbyId : undefined\n        }\n        disabled={props.disabled}\n        onClick={() => {\n          if (props.disabled === true) return\n          setIsOpen(true)\n        }}\n        ref={triggerRef}\n        type=\"button\"\n        data-active={isOpen}\n      >\n        <span\n          className=\"charcoal-ui-dropdown-selector-text\"\n          data-placeholder={isPlaceholder}\n        >\n          {isPlaceholder ? props.placeholder : preview}\n        </span>\n        <Icon className=\"charcoal-ui-dropdown-selector-icon\" name=\"16/Menu\" />\n      </button>\n      {isOpen && (\n        <DropdownPopover\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          triggerRef={triggerRef}\n          value={props.value}\n          inertWorkaround={props.inertWorkaround}\n        >\n          <MenuList\n            value={props.value}\n            onChange={(v) => {\n              onChange(v)\n              setIsOpen(false)\n            }}\n          >\n            {props.children}\n          </MenuList>\n        </DropdownPopover>\n      )}\n      {props.assistiveText !== undefined && (\n        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>\n          {props.assistiveText}\n        </AssistiveText>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,SAAwBqC,iBAAiB,EACvCN,UACAR,YAAY,OACZU,WACA,GAAGK,SACqB;CACxB,MAAMC,+BAAuC,KAAK;CAClD,MAAM,CAACE,QAAQC,iCAAsB,MAAM;CAC3C,MAAMC,UAAUlC,kDAAqB6B,MAAMR,UAAUQ,MAAMlB,MAAM;CAEjE,MAAMwB,yCACEN,MAAMhB,gBAAgBuB,UAAaF,YAAYE,QACrD,CAACF,SAASL,MAAMhB,YAClB,CAAC;CAED,MAAMwB,aAAalC,8CAAmB0B,MAAMR,SAAS;CACrD,MAAMiB,2CACED,WAAWE,MAAMC,cAAcA,UAAU7B,UAAUkB,MAAMlB,MAAM,EACrE,CAAC0B,YAAYR,MAAMlB,MACrB,CAAC;CAED,MAAM,EAAE8B,0EAA2C;CAEnD,MAAMC,uCACHC,MAA4C;EAC3CrB,SAASqB,EAAEE,OAAOlC,MAAM;IAE1B,CAACW,SACH,CAAC;CAED,MAAMwB,uCAAiB;CACvB,MAAMC,6CAAuB;CAO7B,OACE,4CAAC,OAAD;EAAK,WANY1C,oCACjB,mCACAwB,MAAMN,UAIoB;EAAE,iBAAeM,MAAMjB;YAAjD;GACE,2CAAC,yBAAD;IACE,IAAIkC;IACJ,OAAOjB,MAAMnB;IACb,UAAUmB,MAAMZ;IAChB,cAAcY,MAAMX;IACpB,UAAUW,MAAMV;IAChB,GAAK,CAACL,YAAY2B,sBAAsB,EAAG;IAAC;GAE9C,2CAAC,OAAD;IAAK,GAAIA;IAAqB,eAAY;cACxC,4CAAC,UAAD;KACE,MAAMZ,MAAMT;KACZ,OAAOS,MAAMlB;KACb,UAAU+B;KACV,UAAU;KACV,KAAKlB;eALP,CAOG,CAACc,mBACA,2CAAC,UAAD;MAAQ,OAAOT,MAAMlB;gBAAQkB,MAAMlB;MACpC,GACA0B,WAAWY,KAAKT,cAAc;MAC7B,OACE,2CAAC,UAAD;OAEE,OAAOA,UAAU7B;OACjB,UAAU6B,UAAU5B;iBAEnB4B,UAAU7B;OACJ,EALF6B,UAAU7B,MAKR;OAEX,CACI;;IACL;GAEL,4CAAC,UAAD;IACE,WAAU;IACV,mBAAiBmC;IACjB,gBAAcjB,MAAMd;IACpB,oBACEc,MAAMb,kBAAkBoB,SAAYW,gBAAgBX;IAEtD,UAAUP,MAAMjB;IAChB,eAAe;KACb,IAAIiB,MAAMjB,aAAa,MAAM;KAC7BqB,UAAU,KAAK;;IAEjB,KAAKH;IACL,MAAK;IACL,eAAaE;cAdf,CAgBE,2CAAC,QAAD;KACE,WAAU;KACV,oBAAkBG;eAEjBA,gBAAgBN,MAAMhB,cAAcqB;KACjC,GACN,2CAAC,uBAAD;KAAM,WAAU;KAAqC,MAAK;KAAS,EAC7D;;GACPF,UACC,2CAAC,yCAAD;IACUA;IACR,eAAeC,UAAU,MAAM;IACnBH;IACZ,OAAOD,MAAMlB;IACb,iBAAiBkB,MAAMqB;cAEvB,2CAAC,yBAAD;KACE,OAAOrB,MAAMlB;KACb,WAAWwC,MAAM;MACf7B,SAAS6B,EAAE;MACXlB,UAAU,MAAM;;eAGjBJ,MAAMR;KACC;IAEb;GACAQ,MAAMb,kBAAkBoB,UACvB,2CAAC,+BAAD;IAAe,gBAAcP,MAAMd,YAAY;IAAM,IAAIgC;cACtDlB,MAAMb;IAEV;GACG"}