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

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

@@ -0,0 +1,44 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../../Icon/index.cjs');
+const require_MenuListContext = require('../MenuList/MenuListContext.cjs');
+const require_index$1 = require('../MenuItem/index.cjs');
+require('./index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/DropdownSelector/DropdownMenuItem/index.tsx
+/**
+* DropdownSelectorの選択肢として使うMenuItem
+*/
+function DropdownMenuItem(props) {
+	const { value: ctxValue } = (0, react.useContext)(require_MenuListContext.MenuListContext);
+	const isSelected = props.value === ctxValue;
+	const { children, secondary, ...rest } = props;
+	const fullWidthClassName = props.contentFullWidth ? "charcoal-dropdown-selector-menu-fullwidth" : "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		...rest,
+		"aria-selected": isSelected,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: fullWidthClassName,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `charcoal-dropdown-selector-menu-item-container ${fullWidthClassName}`,
+				children: [isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+					className: "charcoal-dropdown-selector-menu-item-icon",
+					name: "16/Check"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `charcoal-dropdown-selector-menu-item ${fullWidthClassName}`,
+					"data-selected": isSelected,
+					children
+				})]
+			}), secondary && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "charcoal-dropdown-selector-menu-secondary",
+				children: secondary
+			})]
+		})
+	});
+}
+
+//#endregion
+exports.default = DropdownMenuItem;
+//# sourceMappingURL=index2.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["MenuItem","MenuItemProps","MenuListContext","ReactNode","useContext","Icon","DropdownMenuItemProps","Omit","secondary","contentFullWidth","DropdownMenuItem","props","value","ctxValue","isSelected","children","rest","fullWidthClassName"],"sources":["../../../../src/components/DropdownSelector/DropdownMenuItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport MenuItem, { MenuItemProps } from '../MenuItem'\nimport { MenuListContext } from '../MenuList/MenuListContext'\nimport { ReactNode, useContext } from 'react'\nimport Icon from '../../Icon'\n\nexport type DropdownMenuItemProps = Omit<MenuItemProps, 'as'> & {\n  secondary?: ReactNode\n  contentFullWidth?: boolean\n}\n\n/**\n * DropdownSelectorの選択肢として使うMenuItem\n */\nexport default function DropdownMenuItem(props: DropdownMenuItemProps) {\n  const { value: ctxValue } = useContext(MenuListContext)\n  const isSelected = props.value === ctxValue\n  const { children, secondary, ...rest } = props\n\n  const fullWidthClassName = props.contentFullWidth\n    ? 'charcoal-dropdown-selector-menu-fullwidth'\n    : ''\n\n  return (\n    <MenuItem {...rest} aria-selected={isSelected}>\n      <div className={fullWidthClassName}>\n        <div\n          className={`charcoal-dropdown-selector-menu-item-container ${\n            fullWidthClassName\n          }`}\n        >\n          {isSelected && (\n            <Icon\n              className=\"charcoal-dropdown-selector-menu-item-icon\"\n              name=\"16/Check\"\n            />\n          )}\n          <span\n            className={`charcoal-dropdown-selector-menu-item ${fullWidthClassName}`}\n            data-selected={isSelected}\n          >\n            {children}\n          </span>\n        </div>\n        {secondary && (\n          <span className=\"charcoal-dropdown-selector-menu-secondary\">\n            {secondary}\n          </span>\n        )}\n      </div>\n    </MenuItem>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAwBU,iBAAiBC,OAA8B;CACrE,MAAM,EAAEC,OAAOC,mCAAwBX,wCAAgB;CACvD,MAAMY,aAAaH,MAAMC,UAAUC;CACnC,MAAM,EAAEE,UAAUP,WAAW,GAAGQ,SAASL;CAEzC,MAAMM,qBAAqBN,MAAMF,mBAC7B,8CACA;CAEJ,OACE,2CAAC,yBAAD;EAAU,GAAIO;EAAM,iBAAeF;YACjC,4CAAC,OAAD;GAAK,WAAWG;aAAhB,CACE,4CAAC,OAAD;IACE,WAAW,kDACTA;cAFJ,CAKGH,cACC,2CAAC,uBAAD;KACE,WAAU;KACV,MAAK;KAER,GACD,2CAAC,QAAD;KACE,WAAW,wCAAwCG;KACnD,iBAAeH;KAEdC;KACG,EACH;OACJP,aACC,2CAAC,QAAD;IAAM,WAAU;cACbA;IAEJ,EACE;;EACI"}

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

@@ -0,0 +1,43 @@
+"use client";
+import Icon from "../../Icon/index.js";
+import { MenuListContext } from "../MenuList/MenuListContext.js";
+import MenuItem from "../MenuItem/index.js";
+/* empty css      */
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/DropdownSelector/DropdownMenuItem/index.tsx
+/**
+* DropdownSelectorの選択肢として使うMenuItem
+*/
+function DropdownMenuItem(props) {
+	const { value: ctxValue } = useContext(MenuListContext);
+	const isSelected = props.value === ctxValue;
+	const { children, secondary, ...rest } = props;
+	const fullWidthClassName = props.contentFullWidth ? "charcoal-dropdown-selector-menu-fullwidth" : "";
+	return /* @__PURE__ */ jsx(MenuItem, {
+		...rest,
+		"aria-selected": isSelected,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: fullWidthClassName,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: `charcoal-dropdown-selector-menu-item-container ${fullWidthClassName}`,
+				children: [isSelected && /* @__PURE__ */ jsx(Icon, {
+					className: "charcoal-dropdown-selector-menu-item-icon",
+					name: "16/Check"
+				}), /* @__PURE__ */ jsx("span", {
+					className: `charcoal-dropdown-selector-menu-item ${fullWidthClassName}`,
+					"data-selected": isSelected,
+					children
+				})]
+			}), secondary && /* @__PURE__ */ jsx("span", {
+				className: "charcoal-dropdown-selector-menu-secondary",
+				children: secondary
+			})]
+		})
+	});
+}
+
+//#endregion
+export { DropdownMenuItem as default };
+//# sourceMappingURL=index2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["MenuItem","MenuItemProps","MenuListContext","ReactNode","useContext","Icon","DropdownMenuItemProps","Omit","secondary","contentFullWidth","DropdownMenuItem","props","value","ctxValue","isSelected","children","rest","fullWidthClassName"],"sources":["../../../../src/components/DropdownSelector/DropdownMenuItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport MenuItem, { MenuItemProps } from '../MenuItem'\nimport { MenuListContext } from '../MenuList/MenuListContext'\nimport { ReactNode, useContext } from 'react'\nimport Icon from '../../Icon'\n\nexport type DropdownMenuItemProps = Omit<MenuItemProps, 'as'> & {\n  secondary?: ReactNode\n  contentFullWidth?: boolean\n}\n\n/**\n * DropdownSelectorの選択肢として使うMenuItem\n */\nexport default function DropdownMenuItem(props: DropdownMenuItemProps) {\n  const { value: ctxValue } = useContext(MenuListContext)\n  const isSelected = props.value === ctxValue\n  const { children, secondary, ...rest } = props\n\n  const fullWidthClassName = props.contentFullWidth\n    ? 'charcoal-dropdown-selector-menu-fullwidth'\n    : ''\n\n  return (\n    <MenuItem {...rest} aria-selected={isSelected}>\n      <div className={fullWidthClassName}>\n        <div\n          className={`charcoal-dropdown-selector-menu-item-container ${\n            fullWidthClassName\n          }`}\n        >\n          {isSelected && (\n            <Icon\n              className=\"charcoal-dropdown-selector-menu-item-icon\"\n              name=\"16/Check\"\n            />\n          )}\n          <span\n            className={`charcoal-dropdown-selector-menu-item ${fullWidthClassName}`}\n            data-selected={isSelected}\n          >\n            {children}\n          </span>\n        </div>\n        {secondary && (\n          <span className=\"charcoal-dropdown-selector-menu-secondary\">\n            {secondary}\n          </span>\n        )}\n      </div>\n    </MenuItem>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAwBU,iBAAiBC,OAA8B;CACrE,MAAM,EAAEC,OAAOC,aAAaT,WAAWF,gBAAgB;CACvD,MAAMY,aAAaH,MAAMC,UAAUC;CACnC,MAAM,EAAEE,UAAUP,WAAW,GAAGQ,SAASL;CAEzC,MAAMM,qBAAqBN,MAAMF,mBAC7B,8CACA;CAEJ,OACE,oBAAC,UAAD;EAAU,GAAIO;EAAM,iBAAeF;YACjC,qBAAC,OAAD;GAAK,WAAWG;aAAhB,CACE,qBAAC,OAAD;IACE,WAAW,kDACTA;cAFJ,CAKGH,cACC,oBAAC,MAAD;KACE,WAAU;KACV,MAAK;KAER,GACD,oBAAC,QAAD;KACE,WAAW,wCAAwCG;KACnD,iBAAeH;KAEdC;KACG,EACH;OACJP,aACC,oBAAC,QAAD;IAAM,WAAU;cACbA;IAEJ,EACE;;EACI"}

package/dist/components/DropdownSelector/DropdownPopover.cjs

@@ -0,0 +1,41 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('./Popover/index2.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/DropdownSelector/DropdownPopover.tsx
+/**
+* DropdownSelectorの選択肢をを表示するためのPopover
+* triggerRefの要素と同じ幅になる
+* 表示の際にvalueが等しいDropdownMenuItemを中央に表示する
+*/
+function DropdownPopover({ children, ...props }) {
+	const ref = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (props.isOpen && ref.current && props.triggerRef.current) ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
+	}, [props.triggerRef, props.isOpen]);
+	(0, react.useEffect)(() => {
+		if (props.isOpen) if (props.value !== void 0 && props.value !== "") {
+			const windowScrollY = window.scrollY;
+			const windowScrollX = window.scrollX;
+			document.querySelector(`[data-key="${props.value.toString()}"]`)?.focus();
+			window.scrollTo(windowScrollX, windowScrollY);
+		} else {
+			const el = ref.current?.querySelector("[role='option']");
+			if (el instanceof HTMLElement) el.focus();
+		}
+	}, [props.value, props.isOpen]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+		isOpen: props.isOpen,
+		onClose: props.onClose,
+		popoverRef: ref,
+		triggerRef: props.triggerRef,
+		inertWorkaround: props.inertWorkaround,
+		children
+	});
+}
+
+//#endregion
+exports.DropdownPopover = DropdownPopover;
+//# sourceMappingURL=DropdownPopover.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownPopover.cjs","names":["Key","useEffect","useRef","Popover","PopoverProps","DropdownPopoverProps","value","DropdownPopover","children","props","ref","HTMLDivElement","isOpen","current","triggerRef","style","width","clientWidth","undefined","windowScrollY","window","scrollY","windowScrollX","scrollX","selectedElement","document","querySelector","toString","HTMLElement","focus","scrollTo","el","onClose","inertWorkaround"],"sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"sourcesContent":["import { Key, useEffect, useRef } from 'react'\nimport Popover, { PopoverProps } from './Popover'\n\ntype DropdownPopoverProps = PopoverProps & {\n  value?: Key\n}\n\n/**\n * DropdownSelectorの選択肢をを表示するためのPopover\n * triggerRefの要素と同じ幅になる\n * 表示の際にvalueが等しいDropdownMenuItemを中央に表示する\n */\nexport function DropdownPopover({ children, ...props }: DropdownPopoverProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (props.isOpen && ref.current && props.triggerRef.current) {\n      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`\n    }\n  }, [props.triggerRef, props.isOpen])\n\n  useEffect(() => {\n    if (props.isOpen) {\n      if (props.value !== undefined && props.value !== '') {\n        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する\n        const windowScrollY = window.scrollY\n        const windowScrollX = window.scrollX\n        const selectedElement = document.querySelector(\n          `[data-key=\"${props.value.toString()}\"]`,\n        ) as HTMLElement | undefined\n        selectedElement?.focus()\n        window.scrollTo(windowScrollX, windowScrollY)\n      } else {\n        const el = ref.current?.querySelector(\"[role='option']\")\n        if (el instanceof HTMLElement) {\n          el.focus()\n        }\n      }\n    }\n  }, [props.value, props.isOpen])\n\n  return (\n    <Popover\n      isOpen={props.isOpen}\n      onClose={props.onClose}\n      popoverRef={ref}\n      triggerRef={props.triggerRef}\n      inertWorkaround={props.inertWorkaround}\n    >\n      {children}\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgBO,gBAAgB,EAAEC,UAAU,GAAGC,SAA+B;CAC5E,MAAMC,wBAA6B,KAAK;CACxCT,2BAAgB;EACd,IAAIQ,MAAMG,UAAUF,IAAIG,WAAWJ,MAAMK,WAAWD,SAClDH,IAAIG,QAAQE,MAAMC,QAAQ,GAAGP,MAAMK,WAAWD,QAAQI,YAAW;IAElE,CAACR,MAAMK,YAAYL,MAAMG,OAAO,CAAC;CAEpCX,2BAAgB;EACd,IAAIQ,MAAMG,QACR,IAAIH,MAAMH,UAAUY,UAAaT,MAAMH,UAAU,IAAI;GAEnD,MAAMa,gBAAgBC,OAAOC;GAC7B,MAAMC,gBAAgBF,OAAOG;GAI7BC,AAHwBC,SAASC,cAC/B,cAAcjB,MAAMH,MAAMqB,UAAU,CAAA,IAEvB,EAAEE,OAAO;GACxBT,OAAOU,SAASR,eAAeH,cAAc;SACxC;GACL,MAAMY,KAAKrB,IAAIG,SAASa,cAAc,kBAAkB;GACxD,IAAIK,cAAcH,aAChBG,GAAGF,OAAO;;IAIf,CAACpB,MAAMH,OAAOG,MAAMG,OAAO,CAAC;CAE/B,OACE,2CAAC,uBAAD;EACE,QAAQH,MAAMG;EACd,SAASH,MAAMuB;EACf,YAAYtB;EACZ,YAAYD,MAAMK;EAClB,iBAAiBL,MAAMwB;EAEtBzB;EACO"}

package/dist/components/DropdownSelector/DropdownPopover.js

@@ -0,0 +1,40 @@
+"use client";
+import Popover from "./Popover/index2.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/DropdownSelector/DropdownPopover.tsx
+/**
+* DropdownSelectorの選択肢をを表示するためのPopover
+* triggerRefの要素と同じ幅になる
+* 表示の際にvalueが等しいDropdownMenuItemを中央に表示する
+*/
+function DropdownPopover({ children, ...props }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (props.isOpen && ref.current && props.triggerRef.current) ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
+	}, [props.triggerRef, props.isOpen]);
+	useEffect(() => {
+		if (props.isOpen) if (props.value !== void 0 && props.value !== "") {
+			const windowScrollY = window.scrollY;
+			const windowScrollX = window.scrollX;
+			document.querySelector(`[data-key="${props.value.toString()}"]`)?.focus();
+			window.scrollTo(windowScrollX, windowScrollY);
+		} else {
+			const el = ref.current?.querySelector("[role='option']");
+			if (el instanceof HTMLElement) el.focus();
+		}
+	}, [props.value, props.isOpen]);
+	return /* @__PURE__ */ jsx(Popover, {
+		isOpen: props.isOpen,
+		onClose: props.onClose,
+		popoverRef: ref,
+		triggerRef: props.triggerRef,
+		inertWorkaround: props.inertWorkaround,
+		children
+	});
+}
+
+//#endregion
+export { DropdownPopover };
+//# sourceMappingURL=DropdownPopover.js.map

package/dist/components/DropdownSelector/DropdownPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownPopover.js","names":["Key","useEffect","useRef","Popover","PopoverProps","DropdownPopoverProps","value","DropdownPopover","children","props","ref","HTMLDivElement","isOpen","current","triggerRef","style","width","clientWidth","undefined","windowScrollY","window","scrollY","windowScrollX","scrollX","selectedElement","document","querySelector","toString","HTMLElement","focus","scrollTo","el","onClose","inertWorkaround"],"sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"sourcesContent":["import { Key, useEffect, useRef } from 'react'\nimport Popover, { PopoverProps } from './Popover'\n\ntype DropdownPopoverProps = PopoverProps & {\n  value?: Key\n}\n\n/**\n * DropdownSelectorの選択肢をを表示するためのPopover\n * triggerRefの要素と同じ幅になる\n * 表示の際にvalueが等しいDropdownMenuItemを中央に表示する\n */\nexport function DropdownPopover({ children, ...props }: DropdownPopoverProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (props.isOpen && ref.current && props.triggerRef.current) {\n      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`\n    }\n  }, [props.triggerRef, props.isOpen])\n\n  useEffect(() => {\n    if (props.isOpen) {\n      if (props.value !== undefined && props.value !== '') {\n        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する\n        const windowScrollY = window.scrollY\n        const windowScrollX = window.scrollX\n        const selectedElement = document.querySelector(\n          `[data-key=\"${props.value.toString()}\"]`,\n        ) as HTMLElement | undefined\n        selectedElement?.focus()\n        window.scrollTo(windowScrollX, windowScrollY)\n      } else {\n        const el = ref.current?.querySelector(\"[role='option']\")\n        if (el instanceof HTMLElement) {\n          el.focus()\n        }\n      }\n    }\n  }, [props.value, props.isOpen])\n\n  return (\n    <Popover\n      isOpen={props.isOpen}\n      onClose={props.onClose}\n      popoverRef={ref}\n      triggerRef={props.triggerRef}\n      inertWorkaround={props.inertWorkaround}\n    >\n      {children}\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgBO,gBAAgB,EAAEC,UAAU,GAAGC,SAA+B;CAC5E,MAAMC,MAAMR,OAAuB,KAAK;CACxCD,gBAAgB;EACd,IAAIQ,MAAMG,UAAUF,IAAIG,WAAWJ,MAAMK,WAAWD,SAClDH,IAAIG,QAAQE,MAAMC,QAAQ,GAAGP,MAAMK,WAAWD,QAAQI,YAAW;IAElE,CAACR,MAAMK,YAAYL,MAAMG,OAAO,CAAC;CAEpCX,gBAAgB;EACd,IAAIQ,MAAMG,QACR,IAAIH,MAAMH,UAAUY,UAAaT,MAAMH,UAAU,IAAI;GAEnD,MAAMa,gBAAgBC,OAAOC;GAC7B,MAAMC,gBAAgBF,OAAOG;GAI7BC,AAHwBC,SAASC,cAC/B,cAAcjB,MAAMH,MAAMqB,UAAU,CAAA,IAEvB,EAAEE,OAAO;GACxBT,OAAOU,SAASR,eAAeH,cAAc;SACxC;GACL,MAAMY,KAAKrB,IAAIG,SAASa,cAAc,kBAAkB;GACxD,IAAIK,cAAcH,aAChBG,GAAGF,OAAO;;IAIf,CAACpB,MAAMH,OAAOG,MAAMG,OAAO,CAAC;CAE/B,OACE,oBAAC,SAAD;EACE,QAAQH,MAAMG;EACd,SAASH,MAAMuB;EACf,YAAYtB;EACZ,YAAYD,MAAMK;EAClB,iBAAiBL,MAAMwB;EAEtBzB;EACO"}

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

@@ -0,0 +1,19 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../../_lib/useClassNames.cjs');
+require('./index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/DropdownSelector/ListItem/index.tsx
+const ListItem = (0, react.forwardRef)(function ListItem({ as, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, react.useMemo)(() => as ?? "li", [as]), {
+		className: require_useClassNames.useClassNames("charcoal-list-item", className),
+		ref,
+		...props
+	});
+});
+
+//#endregion
+exports.default = ListItem;
+//# sourceMappingURL=index2.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["ForwardedRef","forwardRef","ReactNode","useMemo","JSX","useClassNames","CustomJSXElement","IntrinsicElements","React","JSXElementConstructor","ListItemProps","ElementType","children","as","T","Omit","ComponentPropsWithRef","ListItem","className","props","ref","HTMLLIElement","Component","classNames","p","Element"],"sources":["../../../../src/components/DropdownSelector/ListItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ForwardedRef, forwardRef, ReactNode, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport type CustomJSXElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | React.JSXElementConstructor<any>\n\nexport type ListItemProps<T extends React.ElementType = 'li'> = {\n  children?: ReactNode\n  as?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst ListItem = forwardRef(function ListItem<T extends React.ElementType>(\n  { as, className, ...props }: ListItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const Component = useMemo(() => as ?? 'li', [as])\n  const classNames = useClassNames('charcoal-list-item', className)\n  return <Component className={classNames} ref={ref} {...props} />\n}) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element\n\nexport default ListItem\n"],"mappings":";;;;;;;;AAeA,MAAMiB,iCAAsB,SAASA,SACnC,EAAEJ,IAAIK,WAAW,GAAGC,SACpBC,KACA;CAGA,OAAO,oEAFyBP,MAAM,MAAM,CAACA,GAAG,CAE/B,EAAV;EAAW,WADCR,oCAAc,sBAAsBa,UAChB;EAAOE;EAAK,GAAID;EAAS;EAChE"}

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

@@ -0,0 +1,18 @@
+"use client";
+import { useClassNames } from "../../../_lib/useClassNames.js";
+/* empty css      */
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/DropdownSelector/ListItem/index.tsx
+const ListItem = forwardRef(function ListItem({ as, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(useMemo(() => as ?? "li", [as]), {
+		className: useClassNames("charcoal-list-item", className),
+		ref,
+		...props
+	});
+});
+
+//#endregion
+export { ListItem as default };
+//# sourceMappingURL=index2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["ForwardedRef","forwardRef","ReactNode","useMemo","JSX","useClassNames","CustomJSXElement","IntrinsicElements","React","JSXElementConstructor","ListItemProps","ElementType","children","as","T","Omit","ComponentPropsWithRef","ListItem","className","props","ref","HTMLLIElement","Component","classNames","p","Element"],"sources":["../../../../src/components/DropdownSelector/ListItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ForwardedRef, forwardRef, ReactNode, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport type CustomJSXElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | React.JSXElementConstructor<any>\n\nexport type ListItemProps<T extends React.ElementType = 'li'> = {\n  children?: ReactNode\n  as?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst ListItem = forwardRef(function ListItem<T extends React.ElementType>(\n  { as, className, ...props }: ListItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const Component = useMemo(() => as ?? 'li', [as])\n  const classNames = useClassNames('charcoal-list-item', className)\n  return <Component className={classNames} ref={ref} {...props} />\n}) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element\n\nexport default ListItem\n"],"mappings":";;;;;;;AAeA,MAAMiB,WAAWhB,WAAW,SAASgB,SACnC,EAAEJ,IAAIK,WAAW,GAAGC,SACpBC,KACA;CAGA,OAAO,oBAFWjB,cAAcU,MAAM,MAAM,CAACA,GAAG,CAE/B,EAAV;EAAW,WADCR,cAAc,sBAAsBa,UAChB;EAAOE;EAAK,GAAID;EAAS;EAChE"}

package/dist/components/DropdownSelector/MenuItem/index.cjs

@@ -0,0 +1,30 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../ListItem/index2.cjs');
+const require_useMenuItemHandleKeyDown = require('./internals/useMenuItemHandleKeyDown.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/DropdownSelector/MenuItem/index.tsx
+/**
+* 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目
+* 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する
+*/
+const MenuItem = (0, react.forwardRef)(function MenuItem({ className: _, value, disabled, ...props }, ref) {
+	const [handleKeyDown, setContextValue] = require_useMenuItemHandleKeyDown.useMenuItemHandleKeyDown(value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+		...props,
+		ref,
+		"data-key": value,
+		onKeyDown: handleKeyDown,
+		onClick: disabled === true ? void 0 : setContextValue,
+		tabIndex: -1,
+		"aria-disabled": disabled,
+		role: "option",
+		children: props.children
+	});
+});
+
+//#endregion
+exports.default = MenuItem;
+//# sourceMappingURL=index.cjs.map

package/dist/components/DropdownSelector/MenuItem/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["ForwardedRef","forwardRef","ListItem","ListItemProps","useMenuItemHandleKeyDown","MenuItemProps","React","ElementType","value","disabled","T","MenuItem","className","_","props","ref","HTMLLIElement","handleKeyDown","setContextValue","undefined","children"],"sources":["../../../../src/components/DropdownSelector/MenuItem/index.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\nimport { useMenuItemHandleKeyDown } from './internals/useMenuItemHandleKeyDown'\n\nexport type MenuItemProps<T extends React.ElementType = 'li'> = {\n  value?: string\n  disabled?: boolean\n} & ListItemProps<T>\n\n/**\n * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目\n * 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する\n */\nconst MenuItem = forwardRef(function MenuItem<\n  T extends React.ElementType = 'li',\n>(\n  { className: _, value, disabled, ...props }: MenuItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value)\n  return (\n    // @ts-expect-error TODO: fix mismatch between MenuItemProps and ListItemProps\n    <ListItem\n      {...props}\n      ref={ref}\n      data-key={value}\n      onKeyDown={handleKeyDown}\n      onClick={disabled === true ? undefined : setContextValue}\n      tabIndex={-1}\n      aria-disabled={disabled}\n      role=\"option\"\n    >\n      {props.children}\n    </ListItem>\n  )\n})\nexport default MenuItem\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMW,iCAAsB,SAASA,SAGnC,EAAEC,WAAWC,GAAGL,OAAOC,UAAU,GAAGK,SACpCC,KACA;CACA,MAAM,CAACE,eAAeC,mBAAmBd,0DAAyBI,MAAM;CACxE,OAEE,2CAAC,uBAAD;EACE,GAAIM;EACCC;EACL,YAAUP;EACV,WAAWS;EACX,SAASR,aAAa,OAAOU,SAAYD;EACzC,UAAU;EACV,iBAAeT;EACf,MAAK;YAEJK,MAAMM;EACC;EAEZ"}

package/dist/components/DropdownSelector/MenuItem/index.js

@@ -0,0 +1,29 @@
+"use client";
+import ListItem from "../ListItem/index2.js";
+import { useMenuItemHandleKeyDown } from "./internals/useMenuItemHandleKeyDown.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/DropdownSelector/MenuItem/index.tsx
+/**
+* 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目
+* 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する
+*/
+const MenuItem = forwardRef(function MenuItem({ className: _, value, disabled, ...props }, ref) {
+	const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
+	return /* @__PURE__ */ jsx(ListItem, {
+		...props,
+		ref,
+		"data-key": value,
+		onKeyDown: handleKeyDown,
+		onClick: disabled === true ? void 0 : setContextValue,
+		tabIndex: -1,
+		"aria-disabled": disabled,
+		role: "option",
+		children: props.children
+	});
+});
+
+//#endregion
+export { MenuItem as default };
+//# sourceMappingURL=index.js.map

package/dist/components/DropdownSelector/MenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ForwardedRef","forwardRef","ListItem","ListItemProps","useMenuItemHandleKeyDown","MenuItemProps","React","ElementType","value","disabled","T","MenuItem","className","_","props","ref","HTMLLIElement","handleKeyDown","setContextValue","undefined","children"],"sources":["../../../../src/components/DropdownSelector/MenuItem/index.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\nimport { useMenuItemHandleKeyDown } from './internals/useMenuItemHandleKeyDown'\n\nexport type MenuItemProps<T extends React.ElementType = 'li'> = {\n  value?: string\n  disabled?: boolean\n} & ListItemProps<T>\n\n/**\n * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目\n * 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する\n */\nconst MenuItem = forwardRef(function MenuItem<\n  T extends React.ElementType = 'li',\n>(\n  { className: _, value, disabled, ...props }: MenuItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value)\n  return (\n    // @ts-expect-error TODO: fix mismatch between MenuItemProps and ListItemProps\n    <ListItem\n      {...props}\n      ref={ref}\n      data-key={value}\n      onKeyDown={handleKeyDown}\n      onClick={disabled === true ? undefined : setContextValue}\n      tabIndex={-1}\n      aria-disabled={disabled}\n      role=\"option\"\n    >\n      {props.children}\n    </ListItem>\n  )\n})\nexport default MenuItem\n"],"mappings":";;;;;;;;;;;AAaA,MAAMW,WAAWV,WAAW,SAASU,SAGnC,EAAEC,WAAWC,GAAGL,OAAOC,UAAU,GAAGK,SACpCC,KACA;CACA,MAAM,CAACE,eAAeC,mBAAmBd,yBAAyBI,MAAM;CACxE,OAEE,oBAAC,UAAD;EACE,GAAIM;EACCC;EACL,YAAUP;EACV,WAAWS;EACX,SAASR,aAAa,OAAOU,SAAYD;EACzC,UAAU;EACV,iBAAeT;EACf,MAAK;YAEJK,MAAMM;EACC;EAEZ"}

package/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.cjs

@@ -0,0 +1,30 @@
+"use client";
+
+//#region src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
+/**
+* elementをparentのスクロールビューに入るようにスクロールする
+* parentがスクロール可能でなければelementが見えるようにスクロールする
+*
+* @param element
+* @param parent
+*/
+function handleFocusByKeyBoard(element, parent) {
+	if (parent.scrollHeight > parent.clientHeight) {
+		const rect = element.getBoundingClientRect();
+		const parentRect = parent.getBoundingClientRect();
+		if (rect.bottom > parentRect.bottom) parent.scrollTo({ top: parent.scrollTop + rect.bottom - parentRect.bottom });
+		else if (rect.top < parentRect.top) parent.scrollTo({ top: parent.scrollTop - (parentRect.top - rect.top) });
+	} else scrollIfNeeded(element);
+}
+/**
+* 要素が画面外にあればスクロールする、画面内にあればスクロールしない
+* @param element
+*/
+function scrollIfNeeded(element) {
+	const elementRect = element.getBoundingClientRect();
+	if (!(elementRect.top >= 0 && elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight))) element.scrollIntoView({ block: "nearest" });
+}
+
+//#endregion
+exports.handleFocusByKeyBoard = handleFocusByKeyBoard;
+//# sourceMappingURL=handleFocusByKeyBoard.cjs.map

package/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleFocusByKeyBoard.cjs","names":["handleFocusByKeyBoard","element","Element","parent","HTMLElement","isScrollable","scrollHeight","clientHeight","rect","getBoundingClientRect","parentRect","bottom","scrollTo","top","scrollTop","scrollIfNeeded","elementRect","isVisible","window","innerHeight","document","documentElement","scrollIntoView","block"],"sources":["../../../../../src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx"],"sourcesContent":["/**\n * elementをparentのスクロールビューに入るようにスクロールする\n * parentがスクロール可能でなければelementが見えるようにスクロールする\n *\n * @param element\n * @param parent\n */\nexport function handleFocusByKeyBoard(element: Element, parent: HTMLElement) {\n  const isScrollable = parent.scrollHeight > parent.clientHeight\n  if (isScrollable) {\n    const rect = element.getBoundingClientRect()\n    const parentRect = parent.getBoundingClientRect()\n    if (rect.bottom > parentRect.bottom) {\n      parent.scrollTo({\n        top: parent.scrollTop + rect.bottom - parentRect.bottom,\n      })\n    } else if (rect.top < parentRect.top) {\n      parent.scrollTo({\n        top: parent.scrollTop - (parentRect.top - rect.top),\n      })\n    }\n  } else {\n    scrollIfNeeded(element)\n  }\n}\n\n/**\n * 要素が画面外にあればスクロールする、画面内にあればスクロールしない\n * @param element\n */\nfunction scrollIfNeeded(element: Element) {\n  const elementRect = element.getBoundingClientRect()\n  const isVisible =\n    elementRect.top >= 0 &&\n    elementRect.bottom <=\n      (window.innerHeight || document.documentElement.clientHeight)\n\n  if (!isVisible) {\n    element.scrollIntoView({\n      block: 'nearest',\n    })\n  }\n}\n"],"mappings":";;;;;;;;;;AAOA,SAAgBA,sBAAsBC,SAAkBE,QAAqB;CAE3E,IADqBA,OAAOG,eAAeH,OAAOI,cAChC;EAChB,MAAMC,OAAOP,QAAQQ,uBAAuB;EAC5C,MAAMC,aAAaP,OAAOM,uBAAuB;EACjD,IAAID,KAAKG,SAASD,WAAWC,QAC3BR,OAAOS,SAAS,EACdC,KAAKV,OAAOW,YAAYN,KAAKG,SAASD,WAAWC,QAClD,CAAC;OACG,IAAIH,KAAKK,MAAMH,WAAWG,KAC/BV,OAAOS,SAAS,EACdC,KAAKV,OAAOW,aAAaJ,WAAWG,MAAML,KAAKK,MAChD,CAAC;QAGJE,eAAed,QAAQ;;;;;;AAQ3B,SAASc,eAAed,SAAkB;CACxC,MAAMe,cAAcf,QAAQQ,uBAAuB;CAMnD,IAAI,EAJFO,YAAYH,OAAO,KACnBG,YAAYL,WACTO,OAAOC,eAAeC,SAASC,gBAAgBd,gBAGlDN,QAAQqB,eAAe,EACrBC,OAAO,WACR,CAAC"}

package/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.js

@@ -0,0 +1,29 @@
+"use client";
+//#region src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
+/**
+* elementをparentのスクロールビューに入るようにスクロールする
+* parentがスクロール可能でなければelementが見えるようにスクロールする
+*
+* @param element
+* @param parent
+*/
+function handleFocusByKeyBoard(element, parent) {
+	if (parent.scrollHeight > parent.clientHeight) {
+		const rect = element.getBoundingClientRect();
+		const parentRect = parent.getBoundingClientRect();
+		if (rect.bottom > parentRect.bottom) parent.scrollTo({ top: parent.scrollTop + rect.bottom - parentRect.bottom });
+		else if (rect.top < parentRect.top) parent.scrollTo({ top: parent.scrollTop - (parentRect.top - rect.top) });
+	} else scrollIfNeeded(element);
+}
+/**
+* 要素が画面外にあればスクロールする、画面内にあればスクロールしない
+* @param element
+*/
+function scrollIfNeeded(element) {
+	const elementRect = element.getBoundingClientRect();
+	if (!(elementRect.top >= 0 && elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight))) element.scrollIntoView({ block: "nearest" });
+}
+
+//#endregion
+export { handleFocusByKeyBoard };
+//# sourceMappingURL=handleFocusByKeyBoard.js.map

package/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleFocusByKeyBoard.js","names":["handleFocusByKeyBoard","element","Element","parent","HTMLElement","isScrollable","scrollHeight","clientHeight","rect","getBoundingClientRect","parentRect","bottom","scrollTo","top","scrollTop","scrollIfNeeded","elementRect","isVisible","window","innerHeight","document","documentElement","scrollIntoView","block"],"sources":["../../../../../src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx"],"sourcesContent":["/**\n * elementをparentのスクロールビューに入るようにスクロールする\n * parentがスクロール可能でなければelementが見えるようにスクロールする\n *\n * @param element\n * @param parent\n */\nexport function handleFocusByKeyBoard(element: Element, parent: HTMLElement) {\n  const isScrollable = parent.scrollHeight > parent.clientHeight\n  if (isScrollable) {\n    const rect = element.getBoundingClientRect()\n    const parentRect = parent.getBoundingClientRect()\n    if (rect.bottom > parentRect.bottom) {\n      parent.scrollTo({\n        top: parent.scrollTop + rect.bottom - parentRect.bottom,\n      })\n    } else if (rect.top < parentRect.top) {\n      parent.scrollTo({\n        top: parent.scrollTop - (parentRect.top - rect.top),\n      })\n    }\n  } else {\n    scrollIfNeeded(element)\n  }\n}\n\n/**\n * 要素が画面外にあればスクロールする、画面内にあればスクロールしない\n * @param element\n */\nfunction scrollIfNeeded(element: Element) {\n  const elementRect = element.getBoundingClientRect()\n  const isVisible =\n    elementRect.top >= 0 &&\n    elementRect.bottom <=\n      (window.innerHeight || document.documentElement.clientHeight)\n\n  if (!isVisible) {\n    element.scrollIntoView({\n      block: 'nearest',\n    })\n  }\n}\n"],"mappings":";;;;;;;;;AAOA,SAAgBA,sBAAsBC,SAAkBE,QAAqB;CAE3E,IADqBA,OAAOG,eAAeH,OAAOI,cAChC;EAChB,MAAMC,OAAOP,QAAQQ,uBAAuB;EAC5C,MAAMC,aAAaP,OAAOM,uBAAuB;EACjD,IAAID,KAAKG,SAASD,WAAWC,QAC3BR,OAAOS,SAAS,EACdC,KAAKV,OAAOW,YAAYN,KAAKG,SAASD,WAAWC,QAClD,CAAC;OACG,IAAIH,KAAKK,MAAMH,WAAWG,KAC/BV,OAAOS,SAAS,EACdC,KAAKV,OAAOW,aAAaJ,WAAWG,MAAML,KAAKK,MAChD,CAAC;QAGJE,eAAed,QAAQ;;;;;;AAQ3B,SAASc,eAAed,SAAkB;CACxC,MAAMe,cAAcf,QAAQQ,uBAAuB;CAMnD,IAAI,EAJFO,YAAYH,OAAO,KACnBG,YAAYL,WACTO,OAAOC,eAAeC,SAASC,gBAAgBd,gBAGlDN,QAAQqB,eAAe,EACrBC,OAAO,WACR,CAAC"}

package/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.cjs

@@ -0,0 +1,53 @@
+"use client";
+const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
+const require_MenuListContext = require('../../MenuList/MenuListContext.cjs');
+const require_handleFocusByKeyBoard = require('./handleFocusByKeyBoard.cjs');
+let react = require("react");
+
+//#region src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
+/**
+* MenuListContextに含まれるvalue間で上下キーでfocusを移動できる
+* EnterキーでMenuListContextに値を設定する
+* 上記2つの処理を含む処理(handleKeyDown)と、Enterキーを押下した処理(setContextValue)を配列で返す
+* @param value
+* @returns
+*/
+function useMenuItemHandleKeyDown(value) {
+	const { setValue, root, propsArray } = (0, react.useContext)(require_MenuListContext.MenuListContext);
+	const setContextValue = (0, react.useCallback)(() => {
+		if (value !== void 0) setValue(value);
+	}, [value, setValue]);
+	return [(0, react.useCallback)((e) => {
+		if (e.key === "Enter") setContextValue();
+		else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			const isForward = e.key === "ArrowDown";
+			e.preventDefault();
+			if (!propsArray || value === void 0) return;
+			const values = propsArray.map((props) => props.value).filter((v) => v);
+			let index = values.indexOf(value);
+			if (index === -1) return;
+			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) require_handleFocusByKeyBoard.handleFocusByKeyBoard(next, root.current.parentElement);
+					break;
+				}
+			}
+		}
+	}, [
+		setContextValue,
+		propsArray,
+		value,
+		root
+	]), setContextValue];
+}
+
+//#endregion
+exports.useMenuItemHandleKeyDown = useMenuItemHandleKeyDown;
+//# sourceMappingURL=useMenuItemHandleKeyDown.cjs.map

package/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuItemHandleKeyDown.cjs","names":["useCallback","useContext","handleFocusByKeyBoard","MenuListContext","useMenuItemHandleKeyDown","value","e","React","KeyboardEvent","HTMLElement","setValue","root","propsArray","setContextValue","undefined","handleKeyDown","key","isForward","preventDefault","values","map","props","filter","v","index","indexOf","n","length","focusValue","next","current","querySelector","ariaDisabled","focus","preventScroll","parentElement"],"sources":["../../../../../src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx"],"sourcesContent":["import { useCallback, useContext } from 'react'\nimport { handleFocusByKeyBoard } from './handleFocusByKeyBoard'\nimport { MenuListContext } from '../../MenuList/MenuListContext'\n\n/**\n * MenuListContextに含まれるvalue間で上下キーでfocusを移動できる\n * EnterキーでMenuListContextに値を設定する\n * 上記2つの処理を含む処理(handleKeyDown)と、Enterキーを押下した処理(setContextValue)を配列で返す\n * @param value\n * @returns\n */\nexport function useMenuItemHandleKeyDown(\n  value?: string,\n): [(e: React.KeyboardEvent<HTMLElement>) => void, () => void] {\n  const { setValue, root, propsArray } = useContext(MenuListContext)\n  const setContextValue = useCallback(() => {\n    if (value !== undefined) setValue(value)\n  }, [value, setValue])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (e.key === 'Enter') {\n        setContextValue()\n      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        const isForward = e.key === 'ArrowDown'\n        // prevent scroll\n        e.preventDefault()\n        if (!propsArray || value === undefined) return\n        const values = propsArray\n          .map((props) => props.value)\n          .filter((v) => v) as string[]\n        let index = values.indexOf(value)\n        if (index === -1) return\n\n        for (let n = 0; n < values.length; n++) {\n          const focusValue = isForward\n            ? // prev or last\n              index + 1 >= values.length\n              ? values[0]\n              : values[index + 1]\n            : // next or first\n              index - 1 < 0\n              ? values[values.length - 1]\n              : values[index - 1]\n          const next = root?.current?.querySelector(\n            `[data-key='${focusValue}']`,\n          )\n\n          if (next instanceof HTMLElement) {\n            if (next.ariaDisabled === 'true') {\n              index += isForward ? 1 : -1\n              continue\n            }\n            next.focus({ preventScroll: true })\n            if (root?.current?.parentElement) {\n              handleFocusByKeyBoard(next, root.current.parentElement)\n            }\n            break\n          }\n        }\n      }\n    },\n    [setContextValue, propsArray, value, root],\n  )\n  return [handleKeyDown, setContextValue]\n}\n"],"mappings":";;;;;;;;;;;;;;AAWA,SAAgBI,yBACdC,OAC6D;CAC7D,MAAM,EAAEK,UAAUC,MAAMC,qCAA0BT,wCAAgB;CAClE,MAAMU,+CAAoC;EACxC,IAAIR,UAAUS,QAAWJ,SAASL,MAAM;IACvC,CAACA,OAAOK,SAAS,CAAC;CA+CrB,OAAO,yBA5CJJ,MAAwC;EACvC,IAAIA,EAAEU,QAAQ,SACZH,iBAAiB;OACZ,IAAIP,EAAEU,QAAQ,aAAaV,EAAEU,QAAQ,aAAa;GACvD,MAAMC,YAAYX,EAAEU,QAAQ;GAE5BV,EAAEY,gBAAgB;GAClB,IAAI,CAACN,cAAcP,UAAUS,QAAW;GACxC,MAAMK,SAASP,WACZQ,KAAKC,UAAUA,MAAMhB,MAAM,CAC3BiB,QAAQC,MAAMA,EAAE;GACnB,IAAIC,QAAQL,OAAOM,QAAQpB,MAAM;GACjC,IAAImB,UAAU,IAAI;GAElB,KAAK,IAAIE,IAAI,GAAGA,IAAIP,OAAOQ,QAAQD,KAAK;IACtC,MAAME,aAAaX,YAEfO,QAAQ,KAAKL,OAAOQ,SAClBR,OAAO,KACPA,OAAOK,QAAQ,KAEjBA,QAAQ,IAAI,IACVL,OAAOA,OAAOQ,SAAS,KACvBR,OAAOK,QAAQ;IACrB,MAAMK,OAAOlB,MAAMmB,SAASC,cAC1B,cAAcH,WAAU,IACzB;IAED,IAAIC,gBAAgBpB,aAAa;KAC/B,IAAIoB,KAAKG,iBAAiB,QAAQ;MAChCR,SAASP,YAAY,IAAI;MACzB;;KAEFY,KAAKI,MAAM,EAAEC,eAAe,MAAM,CAAC;KACnC,IAAIvB,MAAMmB,SAASK,eACjBjC,oDAAsB2B,MAAMlB,KAAKmB,QAAQK,cAAc;KAEzD;;;;IAKR;EAACtB;EAAiBD;EAAYP;EAAOM;EACvC,CACqB,EAAEE,gBAAgB"}

package/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.js

@@ -0,0 +1,52 @@
+"use client";
+import { MenuListContext } from "../../MenuList/MenuListContext.js";
+import { handleFocusByKeyBoard } from "./handleFocusByKeyBoard.js";
+import { useCallback, useContext } from "react";
+
+//#region src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
+/**
+* MenuListContextに含まれるvalue間で上下キーでfocusを移動できる
+* EnterキーでMenuListContextに値を設定する
+* 上記2つの処理を含む処理(handleKeyDown)と、Enterキーを押下した処理(setContextValue)を配列で返す
+* @param value
+* @returns
+*/
+function useMenuItemHandleKeyDown(value) {
+	const { setValue, root, propsArray } = useContext(MenuListContext);
+	const setContextValue = useCallback(() => {
+		if (value !== void 0) setValue(value);
+	}, [value, setValue]);
+	return [useCallback((e) => {
+		if (e.key === "Enter") setContextValue();
+		else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			const isForward = e.key === "ArrowDown";
+			e.preventDefault();
+			if (!propsArray || value === void 0) return;
+			const values = propsArray.map((props) => props.value).filter((v) => v);
+			let index = values.indexOf(value);
+			if (index === -1) return;
+			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,
+		propsArray,
+		value,
+		root
+	]), setContextValue];
+}
+
+//#endregion
+export { useMenuItemHandleKeyDown };
+//# sourceMappingURL=useMenuItemHandleKeyDown.js.map

package/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuItemHandleKeyDown.js","names":["useCallback","useContext","handleFocusByKeyBoard","MenuListContext","useMenuItemHandleKeyDown","value","e","React","KeyboardEvent","HTMLElement","setValue","root","propsArray","setContextValue","undefined","handleKeyDown","key","isForward","preventDefault","values","map","props","filter","v","index","indexOf","n","length","focusValue","next","current","querySelector","ariaDisabled","focus","preventScroll","parentElement"],"sources":["../../../../../src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx"],"sourcesContent":["import { useCallback, useContext } from 'react'\nimport { handleFocusByKeyBoard } from './handleFocusByKeyBoard'\nimport { MenuListContext } from '../../MenuList/MenuListContext'\n\n/**\n * MenuListContextに含まれるvalue間で上下キーでfocusを移動できる\n * EnterキーでMenuListContextに値を設定する\n * 上記2つの処理を含む処理(handleKeyDown)と、Enterキーを押下した処理(setContextValue)を配列で返す\n * @param value\n * @returns\n */\nexport function useMenuItemHandleKeyDown(\n  value?: string,\n): [(e: React.KeyboardEvent<HTMLElement>) => void, () => void] {\n  const { setValue, root, propsArray } = useContext(MenuListContext)\n  const setContextValue = useCallback(() => {\n    if (value !== undefined) setValue(value)\n  }, [value, setValue])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (e.key === 'Enter') {\n        setContextValue()\n      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        const isForward = e.key === 'ArrowDown'\n        // prevent scroll\n        e.preventDefault()\n        if (!propsArray || value === undefined) return\n        const values = propsArray\n          .map((props) => props.value)\n          .filter((v) => v) as string[]\n        let index = values.indexOf(value)\n        if (index === -1) return\n\n        for (let n = 0; n < values.length; n++) {\n          const focusValue = isForward\n            ? // prev or last\n              index + 1 >= values.length\n              ? values[0]\n              : values[index + 1]\n            : // next or first\n              index - 1 < 0\n              ? values[values.length - 1]\n              : values[index - 1]\n          const next = root?.current?.querySelector(\n            `[data-key='${focusValue}']`,\n          )\n\n          if (next instanceof HTMLElement) {\n            if (next.ariaDisabled === 'true') {\n              index += isForward ? 1 : -1\n              continue\n            }\n            next.focus({ preventScroll: true })\n            if (root?.current?.parentElement) {\n              handleFocusByKeyBoard(next, root.current.parentElement)\n            }\n            break\n          }\n        }\n      }\n    },\n    [setContextValue, propsArray, value, root],\n  )\n  return [handleKeyDown, setContextValue]\n}\n"],"mappings":";;;;;;;;;;;;;AAWA,SAAgBI,yBACdC,OAC6D;CAC7D,MAAM,EAAEK,UAAUC,MAAMC,eAAeX,WAAWE,gBAAgB;CAClE,MAAMU,kBAAkBb,kBAAkB;EACxC,IAAIK,UAAUS,QAAWJ,SAASL,MAAM;IACvC,CAACA,OAAOK,SAAS,CAAC;CA+CrB,OAAO,CA7CeV,aACnBM,MAAwC;EACvC,IAAIA,EAAEU,QAAQ,SACZH,iBAAiB;OACZ,IAAIP,EAAEU,QAAQ,aAAaV,EAAEU,QAAQ,aAAa;GACvD,MAAMC,YAAYX,EAAEU,QAAQ;GAE5BV,EAAEY,gBAAgB;GAClB,IAAI,CAACN,cAAcP,UAAUS,QAAW;GACxC,MAAMK,SAASP,WACZQ,KAAKC,UAAUA,MAAMhB,MAAM,CAC3BiB,QAAQC,MAAMA,EAAE;GACnB,IAAIC,QAAQL,OAAOM,QAAQpB,MAAM;GACjC,IAAImB,UAAU,IAAI;GAElB,KAAK,IAAIE,IAAI,GAAGA,IAAIP,OAAOQ,QAAQD,KAAK;IACtC,MAAME,aAAaX,YAEfO,QAAQ,KAAKL,OAAOQ,SAClBR,OAAO,KACPA,OAAOK,QAAQ,KAEjBA,QAAQ,IAAI,IACVL,OAAOA,OAAOQ,SAAS,KACvBR,OAAOK,QAAQ;IACrB,MAAMK,OAAOlB,MAAMmB,SAASC,cAC1B,cAAcH,WAAU,IACzB;IAED,IAAIC,gBAAgBpB,aAAa;KAC/B,IAAIoB,KAAKG,iBAAiB,QAAQ;MAChCR,SAASP,YAAY,IAAI;MACzB;;KAEFY,KAAKI,MAAM,EAAEC,eAAe,MAAM,CAAC;KACnC,IAAIvB,MAAMmB,SAASK,eACjBjC,sBAAsB2B,MAAMlB,KAAKmB,QAAQK,cAAc;KAEzD;;;;IAKR;EAACtB;EAAiBD;EAAYP;EAAOM;EACvC,CACqB,EAAEE,gBAAgB"}

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

@@ -0,0 +1,20 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+require('./index.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/DropdownSelector/MenuItemGroup/index.tsx
+function MenuItemGroup(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: "charcoal-menu-item-group",
+		role: "presentation",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.text }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			role: "group",
+			children: props.children
+		})]
+	});
+}
+
+//#endregion
+exports.default = MenuItemGroup;
+//# sourceMappingURL=index2.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["MenuItem","Divider","MenuItemGroupChild","React","ReactElement","MenuItemGroupProps","text","children","MenuItemGroup","props"],"sources":["../../../../src/components/DropdownSelector/MenuItemGroup/index.tsx"],"sourcesContent":["import './index.css'\n\nimport MenuItem from '../MenuItem'\nimport { Divider } from '../Divider'\n\ntype MenuItemGroupChild = React.ReactElement<typeof MenuItem | typeof Divider>\n\nexport type MenuItemGroupProps = {\n  text: string\n  children: MenuItemGroupChild | MenuItemGroupChild[]\n}\n\nexport default function MenuItemGroup(props: MenuItemGroupProps) {\n  return (\n    <li className=\"charcoal-menu-item-group\" role=\"presentation\">\n      <span>{props.text}</span>\n      <ul role=\"group\">{props.children}</ul>\n    </li>\n  )\n}\n"],"mappings":";;;;;;AAYA,SAAwBQ,cAAcC,OAA2B;CAC/D,OACE,4CAAC,MAAD;EAAI,WAAU;EAA2B,MAAK;YAA9C,CACE,2CAAC,QAAD,YAAOA,MAAMH,MAAW,GACxB,2CAAC,MAAD;GAAI,MAAK;aAASG,MAAMF;GAAa,EAClC"}

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

@@ -0,0 +1,19 @@
+"use client";
+/* empty css      */
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/DropdownSelector/MenuItemGroup/index.tsx
+function MenuItemGroup(props) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "charcoal-menu-item-group",
+		role: "presentation",
+		children: [/* @__PURE__ */ jsx("span", { children: props.text }), /* @__PURE__ */ jsx("ul", {
+			role: "group",
+			children: props.children
+		})]
+	});
+}
+
+//#endregion
+export { MenuItemGroup as default };
+//# sourceMappingURL=index2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["MenuItem","Divider","MenuItemGroupChild","React","ReactElement","MenuItemGroupProps","text","children","MenuItemGroup","props"],"sources":["../../../../src/components/DropdownSelector/MenuItemGroup/index.tsx"],"sourcesContent":["import './index.css'\n\nimport MenuItem from '../MenuItem'\nimport { Divider } from '../Divider'\n\ntype MenuItemGroupChild = React.ReactElement<typeof MenuItem | typeof Divider>\n\nexport type MenuItemGroupProps = {\n  text: string\n  children: MenuItemGroupChild | MenuItemGroupChild[]\n}\n\nexport default function MenuItemGroup(props: MenuItemGroupProps) {\n  return (\n    <li className=\"charcoal-menu-item-group\" role=\"presentation\">\n      <span>{props.text}</span>\n      <ul role=\"group\">{props.children}</ul>\n    </li>\n  )\n}\n"],"mappings":";;;;;AAYA,SAAwBQ,cAAcC,OAA2B;CAC/D,OACE,qBAAC,MAAD;EAAI,WAAU;EAA2B,MAAK;YAA9C,CACE,oBAAC,QAAD,YAAOA,MAAMH,MAAW,GACxB,oBAAC,MAAD;GAAI,MAAK;aAASG,MAAMF;GAAa,EAClC"}

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

@@ -0,0 +1,15 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/DropdownSelector/MenuList/MenuListContext.ts
+const MenuListContext = (0, react.createContext)({
+	root: void 0,
+	value: "",
+	propsArray: [],
+	setValue: (_v) => {}
+});
+
+//#endregion
+exports.MenuListContext = MenuListContext;
+//# sourceMappingURL=MenuListContext.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListContext.cjs","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,2CAAqD;CAChEN,MAAMO;CACNL,OAAO;CACPC,YAAY,EAAE;CACdC,WAAWI,OAAe;CAG3B,CAAC"}