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

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

@@ -1,7 +1,7 @@
 "use client";
 import ListItem from "../ListItem/index2.js";
 import { useMenuItemHandleKeyDown } from "./internals/useMenuItemHandleKeyDown.js";
-import { forwardRef } from "react";
+import { forwardRef, useCallback, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/DropdownSelector/MenuItem/index.tsx
@@ -11,12 +11,40 @@ import { jsx } from "react/jsx-runtime";
 */
 const MenuItem = forwardRef(function MenuItem({ className: _, value, disabled, ...props }, ref) {
 	const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value);
+	const penHandledRef = useRef(false);
+	const pointerStartRef = useRef(null);
+	const handlePointerDown = useCallback((e) => {
+		if (e.pointerType === "pen") pointerStartRef.current = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	}, []);
+	const handlePointerUp = useCallback((e) => {
+		if (e.pointerType !== "pen" || disabled === true) return;
+		const start = pointerStartRef.current;
+		if (!start) return;
+		const dx = Math.abs(e.clientX - start.x);
+		const dy = Math.abs(e.clientY - start.y);
+		if (dx > 8 || dy > 8) return;
+		penHandledRef.current = true;
+		setContextValue();
+	}, [disabled, setContextValue]);
+	const handleClick = useCallback(() => {
+		if (penHandledRef.current) {
+			penHandledRef.current = false;
+			return;
+		}
+		if (disabled === true) return;
+		setContextValue();
+	}, [disabled, setContextValue]);
 	return /* @__PURE__ */ jsx(ListItem, {
 		...props,
 		ref,
 		"data-key": value,
 		onKeyDown: handleKeyDown,
-		onClick: disabled === true ? void 0 : setContextValue,
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		onClick: handleClick,
 		tabIndex: -1,
 		"aria-disabled": disabled,
 		role: "option",

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

@@ -1 +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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/DropdownSelector/MenuItem/index.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useCallback, useRef } 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  const penHandledRef = useRef(false)\n  const pointerStartRef = useRef<{ x: number; y: number } | null>(null)\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent<HTMLLIElement>) => {\n      if (e.pointerType === 'pen') {\n        pointerStartRef.current = { x: e.clientX, y: e.clientY }\n      }\n    },\n    [],\n  )\n\n  const handlePointerUp = useCallback(\n    (e: React.PointerEvent<HTMLLIElement>) => {\n      if (e.pointerType !== 'pen' || disabled === true) return\n      const start = pointerStartRef.current\n      if (!start) return\n      const dx = Math.abs(e.clientX - start.x)\n      const dy = Math.abs(e.clientY - start.y)\n      // タップとドラッグを区別するための許容量\n      if (dx > 8 || dy > 8) return\n      penHandledRef.current = true\n      setContextValue()\n    },\n    [disabled, setContextValue],\n  )\n\n  const handleClick = useCallback(() => {\n    if (penHandledRef.current) {\n      penHandledRef.current = false\n      return\n    }\n    if (disabled === true) return\n    setContextValue()\n  }, [disabled, setContextValue])\n\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      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      onClick={handleClick}\n      tabIndex={-1}\n      aria-disabled={disabled}\n      role=\"option\"\n    >\n      {props.children}\n    </ListItem>\n  )\n})\nexport default MenuItem\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,WAAW,WAAW,SAAS,SAGnC,EAAE,WAAW,GAAG,OAAO,UAAU,GAAG,SACpC,KACA;CACA,MAAM,CAAC,eAAe,mBAAmB,yBAAyB,KAAK;CACvE,MAAM,gBAAgB,OAAO,KAAK;CAClC,MAAM,kBAAkB,OAAwC,IAAI;CAEpE,MAAM,oBAAoB,aACvB,MAAyC;EACxC,IAAI,EAAE,gBAAgB,OACpB,gBAAgB,UAAU;GAAE,GAAG,EAAE;GAAS,GAAG,EAAE;EAAQ;CAE3D,GACA,CAAA,CACF;CAEA,MAAM,kBAAkB,aACrB,MAAyC;EACxC,IAAI,EAAE,gBAAgB,SAAS,aAAa,MAAM;EAClD,MAAM,QAAQ,gBAAgB;EAC9B,IAAI,CAAC,OAAO;EACZ,MAAM,KAAK,KAAK,IAAI,EAAE,UAAU,MAAM,CAAC;EACvC,MAAM,KAAK,KAAK,IAAI,EAAE,UAAU,MAAM,CAAC;EAEvC,IAAI,KAAK,KAAK,KAAK,GAAG;EACtB,cAAc,UAAU;EACxB,gBAAgB;CAClB,GACA,CAAC,UAAU,eAAe,CAC5B;CAEA,MAAM,cAAc,kBAAkB;EACpC,IAAI,cAAc,SAAS;GACzB,cAAc,UAAU;GACxB;EACF;EACA,IAAI,aAAa,MAAM;EACvB,gBAAgB;CAClB,GAAG,CAAC,UAAU,eAAe,CAAC;CAE9B,OAEE,oBAAC,UAAD;EACE,GAAI;EACC;EACL,YAAU;EACV,WAAW;EACX,eAAe;EACf,aAAa;EACb,SAAS;EACT,UAAU;EACV,iBAAe;EACf,MAAK;YAEJ,MAAM;CACC;AAEd,CAAC"}

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

@@ -1 +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"}
+{"version":3,"file":"handleFocusByKeyBoard.cjs","names":[],"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,SAAgB,sBAAsB,SAAkB,QAAqB;CAE3E,IADqB,OAAO,eAAe,OAAO,cAChC;EAChB,MAAM,OAAO,QAAQ,sBAAsB;EAC3C,MAAM,aAAa,OAAO,sBAAsB;EAChD,IAAI,KAAK,SAAS,WAAW,QAC3B,OAAO,SAAS,EACd,KAAK,OAAO,YAAY,KAAK,SAAS,WAAW,OACnD,CAAC;OACI,IAAI,KAAK,MAAM,WAAW,KAC/B,OAAO,SAAS,EACd,KAAK,OAAO,aAAa,WAAW,MAAM,KAAK,KACjD,CAAC;CAEL,OACE,eAAe,OAAO;AAE1B;;;;;AAMA,SAAS,eAAe,SAAkB;CACxC,MAAM,cAAc,QAAQ,sBAAsB;CAMlD,IAAI,EAJF,YAAY,OAAO,KACnB,YAAY,WACT,OAAO,eAAe,SAAS,gBAAgB,gBAGlD,QAAQ,eAAe,EACrB,OAAO,UACT,CAAC;AAEL"}

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

@@ -1 +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"}
+{"version":3,"file":"handleFocusByKeyBoard.js","names":[],"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,SAAgB,sBAAsB,SAAkB,QAAqB;CAE3E,IADqB,OAAO,eAAe,OAAO,cAChC;EAChB,MAAM,OAAO,QAAQ,sBAAsB;EAC3C,MAAM,aAAa,OAAO,sBAAsB;EAChD,IAAI,KAAK,SAAS,WAAW,QAC3B,OAAO,SAAS,EACd,KAAK,OAAO,YAAY,KAAK,SAAS,WAAW,OACnD,CAAC;OACI,IAAI,KAAK,MAAM,WAAW,KAC/B,OAAO,SAAS,EACd,KAAK,OAAO,aAAa,WAAW,MAAM,KAAK,KACjD,CAAC;CAEL,OACE,eAAe,OAAO;AAE1B;;;;;AAMA,SAAS,eAAe,SAAkB;CACxC,MAAM,cAAc,QAAQ,sBAAsB;CAMlD,IAAI,EAJF,YAAY,OAAO,KACnB,YAAY,WACT,OAAO,eAAe,SAAS,gBAAgB,gBAGlD,QAAQ,eAAe,EACrB,OAAO,UACT,CAAC;AAEL"}

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

@@ -1,5 +1,4 @@
 "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");

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

@@ -1 +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"}
+{"version":3,"file":"useMenuItemHandleKeyDown.cjs","names":[],"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,SAAgB,yBACd,OAC6D;CAC7D,MAAM,EAAE,UAAU,MAAM,qCAA0B,uCAAe;CACjE,MAAM,+CAAoC;EACxC,IAAI,UAAU,QAAW,SAAS,KAAK;CACzC,GAAG,CAAC,OAAO,QAAQ,CAAC;CA+CpB,OAAO,yBA5CJ,MAAwC;EACvC,IAAI,EAAE,QAAQ,SACZ,gBAAgB;OACX,IAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;GACvD,MAAM,YAAY,EAAE,QAAQ;GAE5B,EAAE,eAAe;GACjB,IAAI,CAAC,cAAc,UAAU,QAAW;GACxC,MAAM,SAAS,WACZ,KAAK,UAAU,MAAM,KAAK,CAAC,CAC3B,QAAQ,MAAM,CAAC;GAClB,IAAI,QAAQ,OAAO,QAAQ,KAAK;GAChC,IAAI,UAAU,IAAI;GAElB,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;IACtC,MAAM,aAAa,YAEf,QAAQ,KAAK,OAAO,SAClB,OAAO,KACP,OAAO,QAAQ,KAEjB,QAAQ,IAAI,IACV,OAAO,OAAO,SAAS,KACvB,OAAO,QAAQ;IACrB,MAAM,OAAO,MAAM,SAAS,cAC1B,cAAc,WAAU,GAC1B;IAEA,IAAI,gBAAgB,aAAa;KAC/B,IAAI,KAAK,iBAAiB,QAAQ;MAChC,SAAS,YAAY,IAAI;MACzB;KACF;KACA,KAAK,MAAM,EAAE,eAAe,KAAK,CAAC;KAClC,IAAI,MAAM,SAAS,eACjB,oDAAsB,MAAM,KAAK,QAAQ,aAAa;KAExD;IACF;GACF;EACF;CACF,GACA;EAAC;EAAiB;EAAY;EAAO;CAAI,CAEnC,GAAe,eAAe;AACxC"}

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

@@ -1 +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"}
+{"version":3,"file":"useMenuItemHandleKeyDown.js","names":[],"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,SAAgB,yBACd,OAC6D;CAC7D,MAAM,EAAE,UAAU,MAAM,eAAe,WAAW,eAAe;CACjE,MAAM,kBAAkB,kBAAkB;EACxC,IAAI,UAAU,QAAW,SAAS,KAAK;CACzC,GAAG,CAAC,OAAO,QAAQ,CAAC;CA+CpB,OAAO,CA7Ce,aACnB,MAAwC;EACvC,IAAI,EAAE,QAAQ,SACZ,gBAAgB;OACX,IAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;GACvD,MAAM,YAAY,EAAE,QAAQ;GAE5B,EAAE,eAAe;GACjB,IAAI,CAAC,cAAc,UAAU,QAAW;GACxC,MAAM,SAAS,WACZ,KAAK,UAAU,MAAM,KAAK,CAAC,CAC3B,QAAQ,MAAM,CAAC;GAClB,IAAI,QAAQ,OAAO,QAAQ,KAAK;GAChC,IAAI,UAAU,IAAI;GAElB,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;IACtC,MAAM,aAAa,YAEf,QAAQ,KAAK,OAAO,SAClB,OAAO,KACP,OAAO,QAAQ,KAEjB,QAAQ,IAAI,IACV,OAAO,OAAO,SAAS,KACvB,OAAO,QAAQ;IACrB,MAAM,OAAO,MAAM,SAAS,cAC1B,cAAc,WAAU,GAC1B;IAEA,IAAI,gBAAgB,aAAa;KAC/B,IAAI,KAAK,iBAAiB,QAAQ;MAChC,SAAS,YAAY,IAAI;MACzB;KACF;KACA,KAAK,MAAM,EAAE,eAAe,KAAK,CAAC;KAClC,IAAI,MAAM,SAAS,eACjB,sBAAsB,MAAM,KAAK,QAAQ,aAAa;KAExD;IACF;GACF;EACF;CACF,GACA;EAAC;EAAiB;EAAY;EAAO;CAAI,CAEnC,GAAe,eAAe;AACxC"}

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

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 require('./index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 

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

@@ -1 +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"}
+{"version":3,"file":"index2.cjs","names":[],"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,SAAwB,cAAc,OAA2B;CAC/D,OACE,4CAAC,MAAD;EAAI,WAAU;EAA2B,MAAK;YAA9C,CACE,2CAAC,QAAD,YAAO,MAAM,KAAW,IACxB,2CAAC,MAAD;GAAI,MAAK;aAAS,MAAM;EAAa,EACnC;;AAER"}

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

@@ -1 +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"}
+{"version":3,"file":"index2.js","names":[],"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,SAAwB,cAAc,OAA2B;CAC/D,OACE,qBAAC,MAAD;EAAI,WAAU;EAA2B,MAAK;YAA9C,CACE,oBAAC,QAAD,YAAO,MAAM,KAAW,IACxB,oBAAC,MAAD;GAAI,MAAK;aAAS,MAAM;EAAa,EACnC;;AAER"}

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

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 
 //#region src/components/DropdownSelector/MenuList/MenuListContext.ts

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

@@ -1 +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"}
+{"version":3,"file":"MenuListContext.cjs","names":[],"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,MAAa,2CAAqD;CAChE,MAAM;CACN,OAAO;CACP,YAAY,CAAA;CACZ,WAAW,OAAe,CACxB;AAEJ,CAAC"}

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

@@ -1 +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"}
+{"version":3,"file":"MenuListContext.js","names":[],"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,MAAa,kBAAkB,cAAmC;CAChE,MAAM;CACN,OAAO;CACP,YAAY,CAAA;CACZ,WAAW,OAAe,CACxB;AAEJ,CAAC"}

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

@@ -1,5 +1,4 @@
 "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');

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

@@ -1 +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"}
+{"version":3,"file":"index2.cjs","names":[],"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,SAAwB,SAAS,OAAsB;CACrD,MAAM,yBAAc,IAAI;CACxB,MAAM,sCACE,8CAAmB,MAAM,QAAQ,GACvC,CAAC,MAAM,QAAQ,CACjB;CAEA,OACE,2CAAC,MAAD;EAAI,WAAU;EAAqB,KAAK;YACtC,2CAAC,wCAAgB,UAAjB;GACE,OAAO;IACL,OAAO,MAAM,SAAS;IACtB;IACA;IACA,WAAW,MAAM;KACf,MAAM,WAAW,CAAC;IACpB;GACF;aAEC,MAAM;EACiB;CACxB;AAER"}

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

@@ -1 +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"}
+{"version":3,"file":"index2.js","names":[],"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,SAAwB,SAAS,OAAsB;CACrD,MAAM,OAAO,OAAO,IAAI;CACxB,MAAM,aAAa,cACX,mBAAmB,MAAM,QAAQ,GACvC,CAAC,MAAM,QAAQ,CACjB;CAEA,OACE,oBAAC,MAAD;EAAI,WAAU;EAAqB,KAAK;YACtC,oBAAC,gBAAgB,UAAjB;GACE,OAAO;IACL,OAAO,MAAM,SAAS;IACtB;IACA;IACA,WAAW,MAAM;KACf,MAAM,WAAW,CAAC;IACpB;GACF;aAEC,MAAM;EACiB;CACxB;AAER"}

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

@@ -1,7 +1,7 @@
 "use client";
 const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 
 //#region src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
 /**

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

@@ -1 +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"}
+{"version":3,"file":"getValuesRecursive.cjs","names":[],"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,SAAgB,mBAAmB,UAA4B;CAC7D,MAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;CAClD,MAAM,aAAsC,CAAA;CAC5C,KAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;EAC1C,MAAM,QAAQ,WAAW;EACzB,IAAI,MAAM,eAAe,KAAK,GAAG;GAC/B,MAAM,QAAQ,MAAM;GAKpB,IAAI,WAAW,SAAS,OAAO,MAAM,UAAU,UAC7C,WAAW,KAAK;IACd,UAAU,MAAM;IAChB,OAAO,MAAM;GACf,CAAC;GAEH,IAAI,cAAc,SAAS,MAAM,UAC/B,WAAW,KAAK,GAAG,mBAAmB,MAAM,QAAQ,CAAC;EAEzD;CACF;CACA,OAAO;AACT"}

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

@@ -1 +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"}
+{"version":3,"file":"getValuesRecursive.js","names":[],"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,SAAgB,mBAAmB,UAA4B;CAC7D,MAAM,aAAa,QAAM,SAAS,QAAQ,QAAQ;CAClD,MAAM,aAAsC,CAAA;CAC5C,KAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;EAC1C,MAAM,QAAQ,WAAW;EACzB,IAAI,QAAM,eAAe,KAAK,GAAG;GAC/B,MAAM,QAAQ,MAAM;GAKpB,IAAI,WAAW,SAAS,OAAO,MAAM,UAAU,UAC7C,WAAW,KAAK;IACd,UAAU,MAAM;IAChB,OAAO,MAAM;GACf,CAAC;GAEH,IAAI,cAAc,SAAS,MAAM,UAC/B,WAAW,KAAK,GAAG,mBAAmB,MAAM,QAAQ,CAAC;EAEzD;CACF;CACA,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,SAAS,EAAsB,SAAS,EAAE,MAAM,OAAO,CAAA;AAMhE,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC7C;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAID;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,kDAoDlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,SAAS,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAA;AAM3E,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC7C;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAID;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,kDAuElD"}

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

@@ -1,5 +1,4 @@
 "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');
@@ -31,6 +30,24 @@ function Popover(props) {
 		toggle: _empty
 	});
 	require_usePreventScroll.usePreventScroll((0, react.useContext)(require_ModalBackgroundContext.ModalBackgroundContext), props.isOpen);
+	const { isOpen, onClose } = props;
+	(0, react.useEffect)(() => {
+		if (!isOpen) return;
+		const handlePointerUp = (e) => {
+			if (e.pointerType !== "pen") return;
+			const popover = finalPopoverRef.current;
+			if (popover !== null && e.composedPath().includes(popover)) return;
+			onClose();
+		};
+		document.addEventListener("pointerup", handlePointerUp, true);
+		return () => {
+			document.removeEventListener("pointerup", handlePointerUp, true);
+		};
+	}, [
+		isOpen,
+		onClose,
+		finalPopoverRef
+	]);
 	if (!props.isOpen) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_Overlay.Overlay, {
 		portalContainer: document.body,

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

@@ -1 +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"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { RefObject, useContext, useEffect, 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  // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、\n  // click に依存する react-aria の外側判定ではペンで閉じられない。\n  // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので\n  // underlay 自身がイベントを受け取らなくなる。\n  const { isOpen, onClose } = props\n  useEffect(() => {\n    if (!isOpen) return\n    const handlePointerUp = (e: PointerEvent) => {\n      if (e.pointerType !== 'pen') return\n      const popover = finalPopoverRef.current\n      if (popover !== null && e.composedPath().includes(popover)) return\n      onClose()\n    }\n    document.addEventListener('pointerup', handlePointerUp, true)\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp, true)\n    }\n  }, [isOpen, onClose, finalPopoverRef])\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,MAAM,eAAe;;;;;;;AAQrB,SAAwB,QAAQ,OAAqB;CACnD,MAAM,sCAA2C,IAAI;CACrD,MAAM,kBACJ,MAAM,eAAe,SAAY,oBAAoB,MAAM;CAC7D,MAAM,EAAE,cAAc,wDACpB;EACE,YAAY,MAAM;EAClB,YAAY;EACZ,kBAAkB;CACpB,GACA;EACE,OAAO,MAAM;EACb,QAAQ,MAAM;EAEd,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CACF;CAGA,gEADmC,qDAClB,GAAiB,MAAM,MAAM;CAM9C,MAAM,EAAE,QAAQ,YAAY;CAC5B,2BAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,MAAoB;GAC3C,IAAI,EAAE,gBAAgB,OAAO;GAC7B,MAAM,UAAU,gBAAgB;GAChC,IAAI,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG;GAC5D,QAAQ;EACV;EACA,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;EAC5D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF,GAAG;EAAC;EAAQ;EAAS;CAAe,CAAC;CAErC,IAAI,CAAC,MAAM,QAAQ,OAAO;CAE1B,OACE,4CAAC,4BAAD;EAAS,iBAAiB,SAAS;YAAnC,CACE,2CAAC,OAAD;GACE,GAAI;GAEJ,GAAK,MAAM,kBACP;IAAE,6BAA6B;IAAM,SAAS,MAAM;GAAQ,IAC5D,CAAC;GACL,OAAO;IACL,UAAU;IACV,QACE,OAAO,aAAa,OAAO,WAAW,WAClC,aAAa,MAAM,SAAS,IAC5B;IACN,OAAO;GACT;EAAE,IAGJ,4CAAC,OAAD;GAAK,GAAI;GAAc,KAAK;GAAiB,WAAU;aAAvD;IACE,2CAAC,kCAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;IAChD,2CAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACxC,MAAM;IACP,2CAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACzC,2CAAC,kCAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;GAC7C;IACE;;AAEb"}

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

@@ -2,7 +2,7 @@
 import { ModalBackgroundContext } from "../../Modal/ModalBackgroundContext.js";
 import { usePreventScroll } from "./usePreventScroll.js";
 /* empty css      */
-import { useContext, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DismissButton, Overlay } from "react-aria/Overlay";
 import { usePopover } from "react-aria/usePopover";
@@ -30,6 +30,24 @@ function Popover(props) {
 		toggle: _empty
 	});
 	usePreventScroll(useContext(ModalBackgroundContext), props.isOpen);
+	const { isOpen, onClose } = props;
+	useEffect(() => {
+		if (!isOpen) return;
+		const handlePointerUp = (e) => {
+			if (e.pointerType !== "pen") return;
+			const popover = finalPopoverRef.current;
+			if (popover !== null && e.composedPath().includes(popover)) return;
+			onClose();
+		};
+		document.addEventListener("pointerup", handlePointerUp, true);
+		return () => {
+			document.removeEventListener("pointerup", handlePointerUp, true);
+		};
+	}, [
+		isOpen,
+		onClose,
+		finalPopoverRef
+	]);
 	if (!props.isOpen) return null;
 	return /* @__PURE__ */ jsxs(Overlay, {
 		portalContainer: document.body,

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

@@ -1 +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"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { RefObject, useContext, useEffect, 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  // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、\n  // click に依存する react-aria の外側判定ではペンで閉じられない。\n  // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので\n  // underlay 自身がイベントを受け取らなくなる。\n  const { isOpen, onClose } = props\n  useEffect(() => {\n    if (!isOpen) return\n    const handlePointerUp = (e: PointerEvent) => {\n      if (e.pointerType !== 'pen') return\n      const popover = finalPopoverRef.current\n      if (popover !== null && e.composedPath().includes(popover)) return\n      onClose()\n    }\n    document.addEventListener('pointerup', handlePointerUp, true)\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp, true)\n    }\n  }, [isOpen, onClose, finalPopoverRef])\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,MAAM,eAAe;;;;;;;AAQrB,SAAwB,QAAQ,OAAqB;CACnD,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,kBACJ,MAAM,eAAe,SAAY,oBAAoB,MAAM;CAC7D,MAAM,EAAE,cAAc,kBAAkB,WACtC;EACE,YAAY,MAAM;EAClB,YAAY;EACZ,kBAAkB;CACpB,GACA;EACE,OAAO,MAAM;EACb,QAAQ,MAAM;EAEd,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CACF;CAGA,iBADwB,WAAW,sBAClB,GAAiB,MAAM,MAAM;CAM9C,MAAM,EAAE,QAAQ,YAAY;CAC5B,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,MAAoB;GAC3C,IAAI,EAAE,gBAAgB,OAAO;GAC7B,MAAM,UAAU,gBAAgB;GAChC,IAAI,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG;GAC5D,QAAQ;EACV;EACA,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;EAC5D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF,GAAG;EAAC;EAAQ;EAAS;CAAe,CAAC;CAErC,IAAI,CAAC,MAAM,QAAQ,OAAO;CAE1B,OACE,qBAAC,SAAD;EAAS,iBAAiB,SAAS;YAAnC,CACE,oBAAC,OAAD;GACE,GAAI;GAEJ,GAAK,MAAM,kBACP;IAAE,6BAA6B;IAAM,SAAS,MAAM;GAAQ,IAC5D,CAAC;GACL,OAAO;IACL,UAAU;IACV,QACE,OAAO,aAAa,OAAO,WAAW,WAClC,aAAa,MAAM,SAAS,IAC5B;IACN,OAAO;GACT;EAAE,IAGJ,qBAAC,OAAD;GAAK,GAAI;GAAc,KAAK;GAAiB,WAAU;aAAvD;IACE,oBAAC,eAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;IAChD,oBAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACxC,MAAM;IACP,oBAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACzC,oBAAC,eAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;GAC7C;IACE;;AAEb"}

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

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 
 //#region src/components/DropdownSelector/Popover/usePreventScroll.tsx

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

@@ -1 +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"}
+{"version":3,"file":"usePreventScroll.cjs","names":[],"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,SAAgB,iBACd,SACA,QACA,UAAU,OACV;CACA,2BAAgB;EACd,IAAI,UAAU,SAAS;GACrB,MAAM,sBAAsB,QAAQ,MAAM;GAC1C,MAAM,kBAAkB,QAAQ,MAAM;GAEtC,QAAQ,MAAM,eAAe,GAC3B,OAAO,aAAa,QAAQ,YAAW;GAEzC,QAAQ,MAAM,WAAW,UAAU,SAAS;GAC5C,aAAa;IACX,QAAQ,MAAM,eAAe;IAC7B,QAAQ,MAAM,WAAW;GAC3B;EACF;CACF,GAAG;EAAC;EAAS;EAAQ;CAAO,CAAC;AAC/B"}

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

@@ -1 +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"}
+{"version":3,"file":"usePreventScroll.js","names":[],"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,SAAgB,iBACd,SACA,QACA,UAAU,OACV;CACA,gBAAgB;EACd,IAAI,UAAU,SAAS;GACrB,MAAM,sBAAsB,QAAQ,MAAM;GAC1C,MAAM,kBAAkB,QAAQ,MAAM;GAEtC,QAAQ,MAAM,eAAe,GAC3B,OAAO,aAAa,QAAQ,YAAW;GAEzC,QAAQ,MAAM,WAAW,UAAU,SAAS;GAC5C,aAAa;IACX,QAAQ,MAAM,eAAe;IAC7B,QAAQ,MAAM,WAAW;GAC3B;EACF;CACF,GAAG;EAAC;EAAS;EAAQ;CAAO,CAAC;AAC/B"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,EAAE,SAAS,EAA0C,MAAM,OAAO,CAAA;AAKhF,OAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAIvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACzC,GAAG,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAA;AAEzC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,SAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAsHvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,EAAE,SAAS,EAA0C,MAAM,OAAO,CAAA;AAKhF,OAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAIvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACzC,GAAG,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAA;AAEzC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,SAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+IvB"}

package/dist/components/DropdownSelector/index2.cjs

@@ -10,7 +10,7 @@ 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);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_aria_useId = require("react-aria/useId");
 let react_aria_VisuallyHidden = require("react-aria/VisuallyHidden");
@@ -18,6 +18,7 @@ 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 penHandledRef = (0, react.useRef)(false);
 	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]);
@@ -27,6 +28,27 @@ function DropdownSelector({ onChange, showLabel = false, selectRef, ...props })
 	const handleChange = (0, react.useCallback)((e) => {
 		onChange(e.target.value);
 	}, [onChange]);
+	const handleClose = (0, react.useCallback)(() => {
+		setIsOpen(false);
+	}, []);
+	const handleSelect = (0, react.useCallback)((v) => {
+		onChange(v);
+		setIsOpen(false);
+	}, [onChange]);
+	const handleTriggerPointerUp = (0, react.useCallback)((e) => {
+		if (e.pointerType !== "pen") return;
+		if (props.disabled === true) return;
+		penHandledRef.current = true;
+		setIsOpen(true);
+	}, [props.disabled]);
+	const handleTriggerClick = (0, react.useCallback)(() => {
+		if (penHandledRef.current) {
+			penHandledRef.current = false;
+			return;
+		}
+		if (props.disabled === true) return;
+		setIsOpen(true);
+	}, [props.disabled]);
 	const labelId = (0, react_aria_useId.useId)();
 	const describedbyId = (0, react_aria_useId.useId)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -68,10 +90,8 @@ function DropdownSelector({ onChange, showLabel = false, selectRef, ...props })
 				"aria-invalid": props.invalid,
 				"aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0,
 				disabled: props.disabled,
-				onClick: () => {
-					if (props.disabled === true) return;
-					setIsOpen(true);
-				},
+				onPointerUp: handleTriggerPointerUp,
+				onClick: handleTriggerClick,
 				ref: triggerRef,
 				type: "button",
 				"data-active": isOpen,
@@ -86,16 +106,13 @@ function DropdownSelector({ onChange, showLabel = false, selectRef, ...props })
 			}),
 			isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownPopover.DropdownPopover, {
 				isOpen,
-				onClose: () => setIsOpen(false),
+				onClose: handleClose,
 				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);
-					},
+					onChange: handleSelect,
 					children: props.children
 				})
 			}),