pentatrion-design 1.2.7 → 1.2.8

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.2.8
+
+### Patch Changes
+
+- a42eb6b: enhance checkboxesField radiosField direction prop
+
 ## 1.2.7
 
 ### Patch Changes

package/dist/{TooltipTrigger-CBTuFD5C.mjs → TooltipTrigger-CNRgF1yY.mjs}

@@ -30,18 +30,22 @@ function useTooltip({ initialOpen = false, placement = "top", open: controlledOp
 		]
 	});
 	const { context } = data;
+	const hover = useHover(context, {
+		move: false,
+		enabled: isUncontrolled,
+		delay: {
+			open: openDelay || 1,
+			close: closeDelay
+		}
+	});
+	const focus = useFocus(context, { enabled: isUncontrolled });
+	const dismiss = useDismiss(context);
+	const role = useRole(context, { role: "tooltip" });
 	const interactions = useInteractions([
-		useHover(context, {
-			move: false,
-			enabled: isUncontrolled,
-			delay: {
-				open: openDelay || 1,
-				close: closeDelay
-			}
-		}),
-		useFocus(context, { enabled: isUncontrolled }),
-		useDismiss(context),
-		useRole(context, { role: "tooltip" })
+		hover,
+		focus,
+		dismiss,
+		role
 	]);
 	return useMemo(() => ({
 		open,
@@ -146,4 +150,4 @@ function TooltipTrigger({ children, asChild = false, ref, ...props }) {
 //#endregion
 export { useTooltipContext as a, TooltipContext as i, TooltipContent as n, useTooltip as o, Tooltip as r, TooltipTrigger as t };
 
-//# sourceMappingURL=TooltipTrigger-CBTuFD5C.mjs.map
+//# sourceMappingURL=TooltipTrigger-CNRgF1yY.mjs.map

package/dist/{TooltipTrigger-CBTuFD5C.mjs.map → TooltipTrigger-CNRgF1yY.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TooltipTrigger-CBTuFD5C.mjs","names":["RefObject","useMemo","useRef","useState","TooltipOptions","arrow","autoUpdate","flip","hide","offset","shift","useDismiss","useFloating","UseFloatingReturn","useFocus","useHover","useInteractions","UseInteractionsReturn","useRole","ThemeBaseColor","arrowWidth","UseTooltipReturn","open","setOpen","color","arrowRef","HTMLDivElement","useTooltip","initialOpen","placement","controlledOpen","onOpen","setControlledOpen","openDelay","closeDelay","uncontrolledOpen","setUncontrolledOpen","isUncontrolled","undefined","offsetVal","data","onOpenChange","whileElementsMounted","middleware","padding","element","context","hover","move","enabled","delay","close","focus","dismiss","role","interactions","createContext","useContext","useTooltip","ContextType","ReturnType","TooltipContext","useTooltipContext","context","Error","ReactNode","TooltipOptions","useTooltip","TooltipContext","Props","children","Tooltip","t0","$","_c","options","tooltip","t1","ComponentProps","RefObject","useTooltipContext","FloatingPortal","useMergeRefs","clsx","computeArrowStyle","Dialog","Props","ref","HTMLDivElement","pointerEvents","TooltipContent","style","children","className","props","context","mergedRef","refs","setFloating","open","middlewareData","hide","referenceHidden","floatingStyles","getFloatingProps","placement","color","arrowRef","HTMLProps","RefObject","cloneElement","isValidElement","useTooltipContext","useMergeRefs","Props","HTMLElement","asChild","ref","TooltipTrigger","children","props","context","childrenRef","mergedRef","refs","setReference","getReferenceProps","open"],"sources":["../src/components/tooltip/useTooltip.ts","../src/components/tooltip/useTooltipContext.ts","../src/components/tooltip/Tooltip.tsx","../src/components/tooltip/TooltipContent.tsx","../src/components/tooltip/TooltipTrigger.tsx"],"sourcesContent":["import { RefObject, useMemo, useRef, useState } from \"react\";\nimport { TooltipOptions } from \"./interface\";\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  UseFloatingReturn,\n  useFocus,\n  useHover,\n  useInteractions,\n  UseInteractionsReturn,\n  useRole,\n} from \"@floating-ui/react\";\nimport { ThemeBaseColor } from \"../../types\";\n\nconst arrowWidth = 16;\n\nexport type UseTooltipReturn = {\n  open: boolean;\n  setOpen?: (open: boolean) => void;\n  color?: ThemeBaseColor;\n  arrowRef: RefObject<HTMLDivElement | null>;\n} & UseInteractionsReturn &\n  UseFloatingReturn;\n\nexport function useTooltip({\n  initialOpen = false,\n  placement = \"top\",\n  open: controlledOpen,\n  onOpen: setControlledOpen,\n  openDelay = 500,\n  closeDelay = 500,\n  color = \"yellow\",\n}: TooltipOptions = {}): UseTooltipReturn {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);\n\n  const isUncontrolled = controlledOpen === null || controlledOpen === undefined;\n\n  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;\n  const setOpen = isUncontrolled ? setUncontrolledOpen : setControlledOpen;\n\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  const offsetVal = arrowWidth / 2;\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(offsetVal),\n      flip(),\n      shift({ padding: 5 }),\n      arrow({\n        element: arrowRef,\n        padding: 12,\n      }),\n      hide({\n        padding: 20,\n      }),\n    ],\n  });\n  const { context } = data;\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: isUncontrolled,\n    delay: {\n      open: openDelay || 1,\n      close: closeDelay,\n    },\n  });\n  const focus = useFocus(context, {\n    enabled: isUncontrolled,\n  });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"tooltip\" });\n\n  const interactions = useInteractions([hover, focus, dismiss, role]);\n\n  return useMemo(\n    () => ({\n      open,\n      setOpen,\n      ...interactions,\n      ...data,\n      arrowRef,\n      color,\n    }),\n    [open, setOpen, color, interactions, data],\n  );\n}\n","import { createContext, useContext } from \"react\";\nimport { useTooltip } from \"./useTooltip\";\n\ntype ContextType = ReturnType<typeof useTooltip> | null;\n\nexport const TooltipContext = createContext<ContextType>(null);\n\nexport function useTooltipContext() {\n  const context = useContext(TooltipContext);\n\n  if (context === null) {\n    throw new Error(\"Tooltip components must be wrapped in <Tooltip />\");\n  }\n\n  return context;\n}\n","import { ReactNode } from \"react\";\nimport { TooltipOptions } from \"./interface\";\nimport { useTooltip } from \"./useTooltip\";\nimport { TooltipContext } from \"./useTooltipContext\";\n\ninterface Props extends TooltipOptions {\n  children: ReactNode;\n}\n\nexport function Tooltip({ children, ...options }: Props) {\n  const tooltip = useTooltip(options);\n  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;\n}\n","import { ComponentProps, RefObject } from \"react\";\nimport { useTooltipContext } from \"./useTooltipContext\";\nimport { FloatingPortal, useMergeRefs } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { computeArrowStyle } from \"../dialog/util\";\nimport { Dialog } from \"../dialog/Dialog\";\n\ninterface Props extends ComponentProps<\"div\"> {\n  ref?: RefObject<HTMLDivElement>;\n  pointerEvents?: \"none\" | \"auto\";\n}\n\nexport function TooltipContent({\n  style,\n  children,\n  className,\n  ref,\n  pointerEvents = \"none\",\n  ...props\n}: Props) {\n  const context = useTooltipContext();\n  const mergedRef = useMergeRefs([context.refs.setFloating, ref]);\n  if (!context.open) {\n    return null;\n  }\n  return (\n    <FloatingPortal>\n      <div\n        ref={mergedRef}\n        className={clsx(\n          \"z-tooltip outline-hidden\",\n          pointerEvents === \"none\" && \"pointer-events-none\",\n          context.middlewareData.hide?.referenceHidden && \"invisible\",\n        )}\n        style={{ ...context.floatingStyles, ...style }}\n        {...context.getFloatingProps(props)}\n      >\n        <Dialog\n          placement={context.placement}\n          className={clsx(\"text-body-sm motion-safe:animate-fade-in max-w-80 px-2 py-1\", className)}\n          color={context.color}\n          role=\"tooltip\"\n        >\n          {children}\n          <div\n            ref={context.arrowRef}\n            style={computeArrowStyle(context)}\n            className=\"p8n-arrow\"\n          ></div>\n        </Dialog>\n      </div>\n    </FloatingPortal>\n  );\n}\n","import { HTMLProps, RefObject, cloneElement, isValidElement } from \"react\";\nimport { useTooltipContext } from \"./useTooltipContext\";\nimport { useMergeRefs } from \"@floating-ui/react\";\n\ninterface Props extends HTMLProps<HTMLElement> {\n  /* allows the user to pass any element as the anchor instead of <button> */\n  asChild?: boolean;\n  ref?: RefObject<HTMLElement>;\n}\n\nexport function TooltipTrigger({ children, asChild = false, ref, ...props }: Props) {\n  const context = useTooltipContext();\n  const childrenRef = (children as any).ref;\n  const mergedRef = useMergeRefs([context.refs.setReference, ref, childrenRef]);\n\n  if (asChild && isValidElement(children)) {\n    return cloneElement(\n      children,\n      context.getReferenceProps({\n        ref: mergedRef,\n        ...props,\n        ...(children.props ?? {}),\n        // @ts-ignore\n        \"data-state\": context.open ? \"open\" : \"closed\",\n      }),\n    );\n  }\n\n  return (\n    <abbr ref={mergedRef} {...context.getReferenceProps(props)}>\n      {children}\n    </abbr>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TooltipTrigger-CNRgF1yY.mjs","names":["RefObject","useMemo","useRef","useState","TooltipOptions","arrow","autoUpdate","flip","hide","offset","shift","useDismiss","useFloating","UseFloatingReturn","useFocus","useHover","useInteractions","UseInteractionsReturn","useRole","ThemeBaseColor","arrowWidth","UseTooltipReturn","open","setOpen","color","arrowRef","HTMLDivElement","useTooltip","initialOpen","placement","controlledOpen","onOpen","setControlledOpen","openDelay","closeDelay","uncontrolledOpen","setUncontrolledOpen","isUncontrolled","undefined","offsetVal","data","onOpenChange","whileElementsMounted","middleware","padding","element","context","hover","move","enabled","delay","close","focus","dismiss","role","interactions","createContext","useContext","useTooltip","ContextType","ReturnType","TooltipContext","useTooltipContext","context","Error","ReactNode","TooltipOptions","useTooltip","TooltipContext","Props","children","Tooltip","t0","$","_c","options","tooltip","t1","ComponentProps","RefObject","useTooltipContext","FloatingPortal","useMergeRefs","clsx","computeArrowStyle","Dialog","Props","ref","HTMLDivElement","pointerEvents","TooltipContent","style","children","className","props","context","mergedRef","refs","setFloating","open","middlewareData","hide","referenceHidden","floatingStyles","getFloatingProps","placement","color","arrowRef","HTMLProps","RefObject","cloneElement","isValidElement","useTooltipContext","useMergeRefs","Props","HTMLElement","asChild","ref","TooltipTrigger","children","props","context","childrenRef","mergedRef","refs","setReference","getReferenceProps","open"],"sources":["../src/components/tooltip/useTooltip.ts","../src/components/tooltip/useTooltipContext.ts","../src/components/tooltip/Tooltip.tsx","../src/components/tooltip/TooltipContent.tsx","../src/components/tooltip/TooltipTrigger.tsx"],"sourcesContent":["import { RefObject, useMemo, useRef, useState } from \"react\";\nimport { TooltipOptions } from \"./interface\";\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  UseFloatingReturn,\n  useFocus,\n  useHover,\n  useInteractions,\n  UseInteractionsReturn,\n  useRole,\n} from \"@floating-ui/react\";\nimport { ThemeBaseColor } from \"../../types\";\n\nconst arrowWidth = 16;\n\nexport type UseTooltipReturn = {\n  open: boolean;\n  setOpen?: (open: boolean) => void;\n  color?: ThemeBaseColor;\n  arrowRef: RefObject<HTMLDivElement | null>;\n} & UseInteractionsReturn &\n  UseFloatingReturn;\n\nexport function useTooltip({\n  initialOpen = false,\n  placement = \"top\",\n  open: controlledOpen,\n  onOpen: setControlledOpen,\n  openDelay = 500,\n  closeDelay = 500,\n  color = \"yellow\",\n}: TooltipOptions = {}): UseTooltipReturn {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);\n\n  const isUncontrolled = controlledOpen === null || controlledOpen === undefined;\n\n  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;\n  const setOpen = isUncontrolled ? setUncontrolledOpen : setControlledOpen;\n\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  const offsetVal = arrowWidth / 2;\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(offsetVal),\n      flip(),\n      shift({ padding: 5 }),\n      arrow({\n        element: arrowRef,\n        padding: 12,\n      }),\n      hide({\n        padding: 20,\n      }),\n    ],\n  });\n  const { context } = data;\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: isUncontrolled,\n    delay: {\n      open: openDelay || 1,\n      close: closeDelay,\n    },\n  });\n  const focus = useFocus(context, {\n    enabled: isUncontrolled,\n  });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"tooltip\" });\n\n  const interactions = useInteractions([hover, focus, dismiss, role]);\n\n  return useMemo(\n    () => ({\n      open,\n      setOpen,\n      ...interactions,\n      ...data,\n      arrowRef,\n      color,\n    }),\n    [open, setOpen, color, interactions, data],\n  );\n}\n","import { createContext, useContext } from \"react\";\nimport { useTooltip } from \"./useTooltip\";\n\ntype ContextType = ReturnType<typeof useTooltip> | null;\n\nexport const TooltipContext = createContext<ContextType>(null);\n\nexport function useTooltipContext() {\n  const context = useContext(TooltipContext);\n\n  if (context === null) {\n    throw new Error(\"Tooltip components must be wrapped in <Tooltip />\");\n  }\n\n  return context;\n}\n","import { ReactNode } from \"react\";\nimport { TooltipOptions } from \"./interface\";\nimport { useTooltip } from \"./useTooltip\";\nimport { TooltipContext } from \"./useTooltipContext\";\n\ninterface Props extends TooltipOptions {\n  children: ReactNode;\n}\n\nexport function Tooltip({ children, ...options }: Props) {\n  const tooltip = useTooltip(options);\n  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;\n}\n","import { ComponentProps, RefObject } from \"react\";\nimport { useTooltipContext } from \"./useTooltipContext\";\nimport { FloatingPortal, useMergeRefs } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { computeArrowStyle } from \"../dialog/util\";\nimport { Dialog } from \"../dialog/Dialog\";\n\ninterface Props extends ComponentProps<\"div\"> {\n  ref?: RefObject<HTMLDivElement>;\n  pointerEvents?: \"none\" | \"auto\";\n}\n\nexport function TooltipContent({\n  style,\n  children,\n  className,\n  ref,\n  pointerEvents = \"none\",\n  ...props\n}: Props) {\n  const context = useTooltipContext();\n  const mergedRef = useMergeRefs([context.refs.setFloating, ref]);\n  if (!context.open) {\n    return null;\n  }\n  return (\n    <FloatingPortal>\n      <div\n        ref={mergedRef}\n        className={clsx(\n          \"z-tooltip outline-hidden\",\n          pointerEvents === \"none\" && \"pointer-events-none\",\n          context.middlewareData.hide?.referenceHidden && \"invisible\",\n        )}\n        style={{ ...context.floatingStyles, ...style }}\n        {...context.getFloatingProps(props)}\n      >\n        <Dialog\n          placement={context.placement}\n          className={clsx(\"text-body-sm motion-safe:animate-fade-in max-w-80 px-2 py-1\", className)}\n          color={context.color}\n          role=\"tooltip\"\n        >\n          {children}\n          <div\n            ref={context.arrowRef}\n            style={computeArrowStyle(context)}\n            className=\"p8n-arrow\"\n          ></div>\n        </Dialog>\n      </div>\n    </FloatingPortal>\n  );\n}\n","import { HTMLProps, RefObject, cloneElement, isValidElement } from \"react\";\nimport { useTooltipContext } from \"./useTooltipContext\";\nimport { useMergeRefs } from \"@floating-ui/react\";\n\ninterface Props extends HTMLProps<HTMLElement> {\n  /* allows the user to pass any element as the anchor instead of <button> */\n  asChild?: boolean;\n  ref?: RefObject<HTMLElement>;\n}\n\nexport function TooltipTrigger({ children, asChild = false, ref, ...props }: Props) {\n  const context = useTooltipContext();\n  const childrenRef = (children as any).ref;\n  const mergedRef = useMergeRefs([context.refs.setReference, ref, childrenRef]);\n\n  if (asChild && isValidElement(children)) {\n    return cloneElement(\n      children,\n      context.getReferenceProps({\n        ref: mergedRef,\n        ...props,\n        ...(children.props ?? {}),\n        // @ts-ignore\n        \"data-state\": context.open ? \"open\" : \"closed\",\n      }),\n    );\n  }\n\n  return (\n    <abbr ref={mergedRef} {...context.getReferenceProps(props)}>\n      {children}\n    </abbr>\n  );\n}\n"],"mappings":"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"}

package/dist/{badge-DvmzAobO.mjs → badge-O81gvkSR.mjs}

@@ -1,4 +1,4 @@
-import { n as TooltipContent, r as Tooltip, t as TooltipTrigger } from "./TooltipTrigger-CBTuFD5C.mjs";
+import { n as TooltipContent, r as Tooltip, t as TooltipTrigger } from "./TooltipTrigger-CNRgF1yY.mjs";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -92,4 +92,4 @@ function Badge(t0) {
 //#endregion
 export { Badge as t };
 
-//# sourceMappingURL=badge-DvmzAobO.mjs.map
+//# sourceMappingURL=badge-O81gvkSR.mjs.map

package/dist/{badge-DvmzAobO.mjs.map → badge-O81gvkSR.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"badge-DvmzAobO.mjs","names":["ReactNode","ThemeColor","clsx","Tooltip","TooltipContent","TooltipTrigger","Props","children","className","tooltip","url","color","onClick","onRemove","Badge","t0","$","_c","t1","undefined","clickable","t2","t3","t4","t5","t6","badge","t7","wrappedBadge","t8","t9","t10"],"sources":["../src/components/badge/Badge.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { ThemeColor } from \"../../types\";\nimport clsx from \"clsx\";\nimport { Tooltip } from \"../tooltip/Tooltip\";\nimport { TooltipContent } from \"../tooltip/TooltipContent\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger\";\n\ninterface Props {\n  children: ReactNode;\n  className?: string;\n  tooltip?: string;\n  url?: string;\n  color?: ThemeColor;\n  onClick?: () => void;\n  onRemove?: () => void;\n}\n\nexport function Badge({\n  children,\n  className,\n  onRemove,\n  onClick,\n  tooltip,\n  url,\n  color = \"yellow\",\n}: Props) {\n  const clickable = onClick !== undefined || url !== undefined;\n  const badge = (\n    <span\n      data-color={color}\n      className={clsx(\n        \"bg-custom-2/50 text-gray-text relative box-border inline-flex h-(--h-button) items-center truncate leading-5 no-underline [--h-button:1.5rem]\",\n        clickable && \"cursor-pointer active:translate-y-px\",\n        \"text-body-xs w-fit rounded-full\",\n        className,\n      )}\n    >\n      {onClick ? (\n        <button className=\"cursor-pointer px-2\" onClick={onClick}>\n          {children}\n        </button>\n      ) : (\n        <span className=\"px-2\">{children}</span>\n      )}\n      {onRemove && (\n        <button\n          className=\"remove cursor-pointer rounded-r-full pr-1 pl-0.5 active:translate-y-px\"\n          onClick={onRemove}\n        >\n          <i className=\"fe-cancel\"></i>\n        </button>\n      )}\n    </span>\n  );\n  const wrappedBadge = url ? <a href={url}>{badge}</a> : badge;\n\n  if (!tooltip) {\n    return wrappedBadge;\n  }\n\n  return (\n    <Tooltip>\n      <TooltipContent>{tooltip}</TooltipContent>\n      <TooltipTrigger asChild={true}>{wrappedBadge}</TooltipTrigger>\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAOc,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAAV,UAAAC,WAAAK,UAAAD,SAAAH,SAAAC,KAAAC,OAAAO,OAAAH;CAOpB,MAAAJ,QAAAO,OAAAC,KAAAA,IAAA,WAAAD;CAQM,MAAAG,MANYT,YAAYO,KAAAA,KAAaT,QAAQS,KAAAA,MAM7C;CAAmD,IAAAG;CAAA,IAAAN,EAAA,OAAAR,aAAAQ,EAAA,OAAAK,IAAA;EAF1CC,KAAApB,KACT,iJACAmB,IACA,mCACAb,SACF;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAT,YAAAS,EAAA,OAAAJ,SAAA;EAEAW,KAAAX,UACC,oBAAA,UAAA;GAAkB,WAAA;GAA+BA;GAC9CL;EACM,CAAA,IAET,oBAAA,QAAA;GAAgB,WAAA;GAAQA;EAAgB,CAAA;EACzCS,EAAA,KAAAT;EAAAS,EAAA,KAAAJ;EAAAI,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAH,UAAA;EACAW,KAAAX,YACC,oBAAA,UAAA;GACY,WAAA;GACDA,SAAAA;GAET,UAAA,oBAAA,KAAA,EAAa,WAAA,YAAW,CAAA;EACjB,CAAA;EACVG,EAAA,KAAAH;EAAAG,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAL,SAAAK,EAAA,OAAAM,MAAAN,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,IAAA;EAvBHC,KAAA,qBAAA,QAAA;GACcd,cAAAA;GACD,WAAAW;GAFb,UAAA,CASGC,IAOAC,EAQI;;EAAAR,EAAA,KAAAL;EAAAK,EAAA,KAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAzBT,MAAAU,QACED;CAyBA,IAAAE;CAAA,IAAAX,EAAA,QAAAU,SAAAV,EAAA,QAAAN,KAAA;EACmBiB,KAAAjB,MAAM,oBAAA,KAAA;GAASA,MAAAA;GAAMgB,UAAAA;EAAU,CAAA,IAA/BA;EAAuCV,EAAA,MAAAU;EAAAV,EAAA,MAAAN;EAAAM,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAA5D,MAAAY,eAAqBD;CAErB,IAAI,CAAClB,SAAO,OACHmB;CACR,IAAAC;CAAA,IAAAb,EAAA,QAAAP,SAAA;EAIGoB,KAAA,oBAAC,gBAAD,EAAA,UAAiBpB,QAAF,CAAA;EAA2BO,EAAA,MAAAP;EAAAO,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAY,cAAA;EAC1CE,KAAA,oBAAC,gBAAD;GAAyB,SAAA;GAAOF,UAAAA;EAAjB,CAAA;EAA+CZ,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAa,MAAAb,EAAA,QAAAc,IAAA;EAFhEC,MAAA,qBAAC,SAAD,EAAA,UAAA,CACEF,IACAC,EAFM,EAAA,CAAA;EAGEd,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,MAAAf,EAAA;CAAA,OAHVe;AAGU"}
+{"version":3,"file":"badge-O81gvkSR.mjs","names":["ReactNode","ThemeColor","clsx","Tooltip","TooltipContent","TooltipTrigger","Props","children","className","tooltip","url","color","onClick","onRemove","Badge","t0","$","_c","t1","undefined","clickable","t2","t3","t4","t5","t6","badge","t7","wrappedBadge","t8","t9","t10"],"sources":["../src/components/badge/Badge.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { ThemeColor } from \"../../types\";\nimport clsx from \"clsx\";\nimport { Tooltip } from \"../tooltip/Tooltip\";\nimport { TooltipContent } from \"../tooltip/TooltipContent\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger\";\n\ninterface Props {\n  children: ReactNode;\n  className?: string;\n  tooltip?: string;\n  url?: string;\n  color?: ThemeColor;\n  onClick?: () => void;\n  onRemove?: () => void;\n}\n\nexport function Badge({\n  children,\n  className,\n  onRemove,\n  onClick,\n  tooltip,\n  url,\n  color = \"yellow\",\n}: Props) {\n  const clickable = onClick !== undefined || url !== undefined;\n  const badge = (\n    <span\n      data-color={color}\n      className={clsx(\n        \"bg-custom-2/50 text-gray-text relative box-border inline-flex h-(--h-button) items-center truncate leading-5 no-underline [--h-button:1.5rem]\",\n        clickable && \"cursor-pointer active:translate-y-px\",\n        \"text-body-xs w-fit rounded-full\",\n        className,\n      )}\n    >\n      {onClick ? (\n        <button className=\"cursor-pointer px-2\" onClick={onClick}>\n          {children}\n        </button>\n      ) : (\n        <span className=\"px-2\">{children}</span>\n      )}\n      {onRemove && (\n        <button\n          className=\"remove cursor-pointer rounded-r-full pr-1 pl-0.5 active:translate-y-px\"\n          onClick={onRemove}\n        >\n          <i className=\"fe-cancel\"></i>\n        </button>\n      )}\n    </span>\n  );\n  const wrappedBadge = url ? <a href={url}>{badge}</a> : badge;\n\n  if (!tooltip) {\n    return wrappedBadge;\n  }\n\n  return (\n    <Tooltip>\n      <TooltipContent>{tooltip}</TooltipContent>\n      <TooltipTrigger asChild={true}>{wrappedBadge}</TooltipTrigger>\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAOc,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAAV,UAAAC,WAAAK,UAAAD,SAAAH,SAAAC,KAAAC,OAAAO,OAAAH;CAOpB,MAAAJ,QAAAO,OAAAC,KAAAA,IAAA,WAAAD;CAQM,MAAAG,MANYT,YAAYO,KAAAA,KAAaT,QAAQS,KAAAA,MAM7C;CAAmD,IAAAG;CAAA,IAAAN,EAAA,OAAAR,aAAAQ,EAAA,OAAAK,IAAA;EAF1CC,KAAApB,KACT,iJACAmB,IACA,mCACAb,SACF;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAT,YAAAS,EAAA,OAAAJ,SAAA;EAEAW,KAAAX,UACC,oBAAA,UAAA;GAAkB,WAAA;GAA+BA;GAC9CL;EACM,CAAA,IAET,oBAAA,QAAA;GAAgB,WAAA;GAAQA;EAAgB,CAAA;EACzCS,EAAA,KAAAT;EAAAS,EAAA,KAAAJ;EAAAI,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAH,UAAA;EACAW,KAAAX,YACC,oBAAA,UAAA;GACY,WAAA;GACDA,SAAAA;GAET,UAAA,oBAAA,KAAA,EAAa,WAAA,YAAW,CAAA;EACjB,CAAA;EACVG,EAAA,KAAAH;EAAAG,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAL,SAAAK,EAAA,OAAAM,MAAAN,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,IAAA;EAvBHC,KAAA,qBAAA,QAAA;GACcd,cAAAA;GACD,WAAAW;GAFb,UAAA,CASGC,IAOAC,EAQI;;EAAAR,EAAA,KAAAL;EAAAK,EAAA,KAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAzBT,MAAAU,QACED;CAyBA,IAAAE;CAAA,IAAAX,EAAA,QAAAU,SAAAV,EAAA,QAAAN,KAAA;EACmBiB,KAAAjB,MAAM,oBAAA,KAAA;GAASA,MAAAA;GAAMgB,UAAAA;EAAU,CAAA,IAA/BA;EAAuCV,EAAA,MAAAU;EAAAV,EAAA,MAAAN;EAAAM,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAA5D,MAAAY,eAAqBD;CAErB,IAAI,CAAClB,SAAO,OACHmB;CACR,IAAAC;CAAA,IAAAb,EAAA,QAAAP,SAAA;EAIGoB,KAAA,oBAAC,gBAAD,EAAA,UAAiBpB,QAAF,CAAA;EAA2BO,EAAA,MAAAP;EAAAO,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAY,cAAA;EAC1CE,KAAA,oBAAC,gBAAD;GAAyB,SAAA;GAAOF,UAAAA;EAAjB,CAAA;EAA+CZ,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAa,MAAAb,EAAA,QAAAc,IAAA;EAFhEC,MAAA,qBAAC,SAAD,EAAA,UAAA,CACEF,IACAC,EAFM,EAAA,CAAA;EAGEd,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,MAAAf,EAAA;CAAA,OAHVe;AAGU"}

package/dist/components/autocomplete/index.mjs

@@ -120,16 +120,19 @@ function Autocomplete({ className, autoFocus = false, icon = true, color = "yell
 			})
 		]
 	});
+	const role = useRole(context, { role: "listbox" });
+	const dismiss = useDismiss(context);
+	const listNav = useListNavigation(context, {
+		listRef,
+		activeIndex,
+		onNavigate: setActiveIndex,
+		virtual: true,
+		loop: true
+	});
 	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-		useRole(context, { role: "listbox" }),
-		useDismiss(context),
-		useListNavigation(context, {
-			listRef,
-			activeIndex,
-			onNavigate: setActiveIndex,
-			virtual: true,
-			loop: true
-		})
+		role,
+		dismiss,
+		listNav
 	]);
 	function handleChangeSearchValue(e) {
 		const value = e.target.value;
@@ -298,15 +301,16 @@ function SimpleAutocomplete({ options, selection = null, onChangeSelection, ...r
 		const selectionLabel = getOptionLabel(selection);
 		if (searchValueRef.current !== getOptionLabel(selection)) setSearchValue(selectionLabel);
 	}, [selection, setSearchValue]);
+	const filteredOptions = selection !== null ? [] : options.filter((option) => {
+		return getOptionLabel(option).toLowerCase().startsWith(searchValue.toLowerCase());
+	});
 	return /* @__PURE__ */ jsx(Autocomplete, {
 		ref: inputRef,
 		searchValue,
 		onChangeSearchValue: setSearchValue,
 		selection,
 		onChangeSelection,
-		options: selection !== null ? [] : options.filter((option) => {
-			return getOptionLabel(option).toLowerCase().startsWith(searchValue.toLowerCase());
-		}),
+		options: filteredOptions,
 		...rest
 	});
 }

package/dist/components/autocomplete/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["useInteractions","createContext","useContext","OptionLike","AutocompleteContext","activeIndex","selection","getItemProps","ReturnType","handleSelect","index","useAutocomplete","context","Error","OptionLike","getOptionLabel","option","type","properties","label","getOptionValue","id","value","memo","useId","OptionLike","useListItem","useAutocomplete","clsx","getOptionLabel","getOptionValue","AutocompleteOptionProps","O","AutocompleteOption","props","$","_c","t0","label","id","activeIndex","selection","getItemProps","handleSelect","t1","ref","index","isActive","isSelected","t2","t3","t4","t5","onClick","t6","ChangeEvent","KeyboardEvent","useCallback","useMemo","useRef","useState","ReactNode","ComponentProps","CSSProperties","RefObject","OptionLike","Option","AutocompleteOption","AutocompleteOptionProps","FloatingFocusManager","FloatingList","FloatingPortal","Placement","autoUpdate","flip","offset","size","useDismiss","useFloating","useInteractions","useListNavigation","useRole","AutocompleteContext","clsx","getOptionLabel","getOptionValue","Button","Dialog","Loader","inputConfig","sizeVariant","ThemeColor","AutocompleteProps","icon","color","noSearchSuffix","suffix","placement","searchValue","onChangeSearchValue","value","selectionLabel","selection","O","onChangeSelection","option","options","autocompleteOptionComponent","props","loading","clearSearchButton","selectOnFocus","ref","HTMLInputElement","Autocomplete","className","autoFocus","placeholder","readOnly","rest","isOpen","setIsOpen","activeIndex","setActiveIndex","OptionComponent","listRef","Array","HTMLElement","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","padding","apply","rects","elements","availableHeight","Object","assign","floating","style","width","Math","max","reference","firstChild","firstElementChild","maxHeight","min","role","dismiss","listNav","onNavigate","virtual","loop","getReferenceProps","getFloatingProps","getItemProps","handleChangeSearchValue","e","target","current","handleSelect","index","newSelection","autocompleteContext","showClearSearchButton","trim","container","medium","setReference","input","onClick","document","activeElement","select","onChange","onMouseDown","length","onKeyDown","key","setFloating","map","useRef","useState","Autocomplete","AutocompleteProps","Option","OptionLike","useIsomorphicLayoutEffect","getOptionLabel","Props","Omit","O","SimpleAutocomplete","options","selection","onChangeSelection","rest","searchValue","setSearchValue","searchValueRef","current","inputRef","HTMLInputElement","document","activeElement","selectionLabel","filteredOptions","filter","option","optionLabel","toLowerCase","startsWith","useCallback","useEffect","useRef","useState","Autocomplete","AutocompleteProps","OptionLike","Option","getOptionLabel","useStateDebounce","useIsomorphicLayoutEffect","Props","Omit","O","onChangeSearchValueCallback","searchValue","Promise","debounce","LazyAutocomplete","selection","onChangeSelection","rest","searchValueDebounced","setSearchValue","searchValueRef","current","inputRef","HTMLInputElement","loading","setLoading","options","setOptions","handleChangeSelection","document","activeElement","selectionLabel","abort","trim","then","newOptions","catch","newValue","immediate"],"sources":["../../../src/components/autocomplete/useAutocompleteContext.ts","../../../src/components/autocomplete/util.ts","../../../src/components/autocomplete/AutocompleteOption.tsx","../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/SimpleAutocomplete.tsx","../../../src/components/autocomplete/LazyAutocomplete.tsx"],"sourcesContent":["import { useInteractions } from \"@floating-ui/react\";\nimport { createContext, useContext } from \"react\";\nimport { OptionLike } from \"../select-legacy\";\n\ninterface AutocompleteContext {\n  activeIndex: number | null;\n  selection: OptionLike | null;\n  getItemProps: ReturnType<typeof useInteractions>[\"getItemProps\"];\n  handleSelect: (index: number | null) => void;\n}\n\nexport const AutocompleteContext = createContext<AutocompleteContext | null>(null);\n\nexport function useAutocomplete() {\n  const context = useContext(AutocompleteContext);\n  if (context === null) {\n    throw new Error(\"Autocomplete components must be wrapped in <Autocomplete>\");\n  }\n  return context;\n}\n","import { OptionLike } from \"../select-legacy\";\n\nexport function getOptionLabel(option: OptionLike) {\n  switch (option.type) {\n    case \"Feature\":\n      return option.properties.label;\n    default:\n      return option.label;\n  }\n}\n\nexport function getOptionValue(option: OptionLike) {\n  switch (option.type) {\n    case \"Feature\":\n      return option.properties.id;\n    default:\n      return option.value;\n  }\n}\n","import { memo, useId } from \"react\";\nimport { OptionLike } from \"../select-legacy\";\nimport { useListItem } from \"@floating-ui/react\";\nimport { useAutocomplete } from \"./useAutocompleteContext\";\nimport clsx from \"clsx\";\nimport { getOptionLabel, getOptionValue } from \"./util\";\n\nexport type AutocompleteOptionProps<O extends OptionLike> = O;\n\nexport const AutocompleteOption = memo(function AutocompleteOption<O extends OptionLike>(\n  props: AutocompleteOptionProps<O>,\n) {\n  const label = getOptionLabel(props);\n\n  const id = useId();\n  const { activeIndex, selection, getItemProps, handleSelect } = useAutocomplete();\n  const { ref, index } = useListItem({ label });\n  const isActive = activeIndex === index;\n  const isSelected = selection ? getOptionValue(selection) === getOptionValue(props) : false;\n\n  return (\n    <div\n      className={clsx(\"option\", isSelected ? \"bg-gray-2\" : isActive && \"bg-gray-1\")}\n      ref={ref}\n      role=\"option\"\n      id={id}\n      data-presentation=\"compact\"\n      aria-selected={isActive}\n      {...getItemProps({\n        onClick: () => handleSelect(index),\n      })}\n    >\n      {label}\n    </div>\n  );\n});\n","import {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  ReactNode,\n  ComponentProps,\n  CSSProperties,\n  RefObject,\n} from \"react\";\nimport type { OptionLike, Option } from \"../select-legacy\";\nimport { AutocompleteOption, AutocompleteOptionProps } from \"./AutocompleteOption\";\nimport {\n  FloatingFocusManager,\n  FloatingList,\n  FloatingPortal,\n  Placement,\n  autoUpdate,\n  flip,\n  offset,\n  size,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { AutocompleteContext } from \"./useAutocompleteContext\";\nimport clsx from \"clsx\";\n\nimport { getOptionLabel, getOptionValue } from \"./util\";\nimport { Button } from \"../button\";\nimport { Dialog } from \"../dialog\";\nimport { Loader } from \"../loader\";\nimport { inputConfig, sizeVariant } from \"../fields/text/Input\";\nimport { ThemeColor } from \"../../types\";\n\nexport interface AutocompleteProps<O extends OptionLike = Option> extends ComponentProps<\"input\"> {\n  icon?: boolean | ReactNode;\n\n  color?: ThemeColor;\n\n  /**\n   * render suffix only if selection and searchValue is empty\n   */\n  noSearchSuffix?: ReactNode;\n\n  suffix?: ReactNode;\n\n  placement?: Placement;\n  /**\n   * search string used as value for <input>\n   */\n  searchValue: string;\n  /**\n   * change handler when typing in the input\n   * or when clicking on an option (the label value is passed)\n   */\n  onChangeSearchValue: (value: string, selectionLabel: boolean) => void;\n\n  selection?: O | null;\n  /**\n   * select handler for a selection from the autocomplete's dropdown\n   * the option object is passed when clicking on an option\n   * null value is passed when typing a new character in the input search.\n   */\n  onChangeSelection: (option: O | null) => void;\n  options: O[];\n\n  autocompleteOptionComponent?: (props: AutocompleteOptionProps<O>) => ReactNode;\n\n  loading?: boolean;\n\n  clearSearchButton?: boolean;\n\n  selectOnFocus?: boolean;\n\n  ref?: RefObject<HTMLInputElement>;\n}\n\nexport function Autocomplete<O extends OptionLike = Option>({\n  className,\n  autoFocus = false,\n  icon = true,\n  color = \"yellow\",\n  noSearchSuffix,\n  suffix,\n  placement = \"bottom\",\n  placeholder = \"Search...\",\n  selection = null,\n  onChangeSelection,\n  autocompleteOptionComponent,\n  loading = false,\n  clearSearchButton = false,\n  searchValue,\n  onChangeSearchValue,\n  options,\n  selectOnFocus = true,\n  readOnly = false,\n  ref,\n  ...rest\n}: AutocompleteProps<O>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const OptionComponent = autocompleteOptionComponent ?? AutocompleteOption;\n\n  const listRef = useRef<Array<HTMLElement | null>>([]);\n\n  const { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(5),\n      flip({ padding: 10 }),\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            width: `${Math.max(130, rects.reference.width)}px`,\n          });\n          const firstChild = elements.floating.firstElementChild as HTMLElement;\n          if (firstChild) {\n            firstChild.style.maxHeight = `${Math.min(availableHeight, 288)}px`;\n          }\n        },\n        padding: 10,\n      }),\n    ],\n  });\n\n  const role = useRole(context, { role: \"listbox\" });\n  const dismiss = useDismiss(context);\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    /* we want the real focus to stay on the input, so focus associated to active items is simulated */\n    virtual: true,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    role,\n    dismiss,\n    listNav,\n  ]);\n\n  function handleChangeSearchValue(e: ChangeEvent<HTMLInputElement>) {\n    const value = e.target.value;\n\n    onChangeSearchValue(value, false);\n\n    if (value !== searchValue && selection !== null) {\n      onChangeSelection(null);\n      setActiveIndex(null);\n      return;\n    }\n\n    if (value) {\n      setIsOpen(true);\n      /**\n       * bug whith LazyAutocomplete activeIndex is set to 0 but the options array has immediately 0 elements\n       * so focus can't be set to the first Dom element.\n       */\n      setActiveIndex(listRef.current[0] ? 0 : null);\n    } else {\n      setIsOpen(false);\n      setActiveIndex(null);\n    }\n  }\n\n  const handleSelect = useCallback(\n    (index: number | null) => {\n      if (index === null) {\n        onChangeSelection(null);\n      } else if (options[index]) {\n        const newSelection = options[index];\n        onChangeSelection(newSelection);\n\n        onChangeSearchValue(getOptionLabel(newSelection), true);\n      }\n      setActiveIndex(null);\n      setIsOpen(false);\n    },\n\n    [options, onChangeSelection, onChangeSearchValue],\n  );\n\n  const autocompleteContext = useMemo(\n    () => ({\n      activeIndex,\n      selection,\n      getItemProps,\n      handleSelect,\n    }),\n    [activeIndex, selection, getItemProps, handleSelect],\n  );\n\n  const showClearSearchButton =\n    clearSearchButton && (searchValue.trim() !== \"\" || selection !== null);\n\n  return (\n    <div className={className} role=\"combobox\">\n      <div\n        className={clsx(inputConfig.container, sizeVariant.medium, readOnly && \"readonly\")}\n        ref={refs.setReference}\n        data-color={color}\n      >\n        {icon !== false && (\n          <div className=\"flex-center relative\">\n            <Loader loading={loading} size=\"input\" color=\"gray\" className=\"mr-2\">\n              {icon === true ? <i className=\"fe-search text-body-md\"></i> : icon}\n            </Loader>\n          </div>\n        )}\n        <input\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n          spellCheck=\"false\"\n          className={clsx(inputConfig.input, icon === false && \"pl-4\")}\n          ref={ref}\n          type=\"search\"\n          readOnly={readOnly}\n          value={searchValue}\n          placeholder={placeholder}\n          aria-autocomplete=\"list\"\n          {...getReferenceProps({\n            onClick() {\n              if (selectOnFocus) {\n                // it's better to listen onClick instead of onFocus. the event is triggered later and there\n                // was an issue if we listen on onFocus and user click on the text of the textarea with Firefox\n                (document.activeElement as HTMLInputElement)?.select();\n              }\n            },\n            onChange: handleChangeSearchValue,\n            onMouseDown() {\n              if (options.length === 0) {\n                return;\n              }\n              /**\n               * There is a already selection\n               * and the only element available is the selection,\n               * no need to display the dropdown.\n               */\n              // if (options.length === 1 && options[0].value === selection?.value) {\n              //   return;\n              // }\n              setIsOpen((isOpen) => !isOpen);\n            },\n            onKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n              if (e.key === \"Enter\" && activeIndex != null) {\n                handleSelect(activeIndex);\n              }\n            },\n          })}\n          {...rest}\n        />\n        <div className=\"flex-center relative\">\n          {suffix}\n          {showClearSearchButton && (\n            <Button\n              size=\"input\"\n              type=\"button\"\n              withRipple={false}\n              icon\n              color=\"gray\"\n              variant=\"text\"\n              onClick={() => {\n                setIsOpen(false);\n                onChangeSelection(null);\n                setActiveIndex(null);\n                onChangeSearchValue(\"\", true);\n              }}\n            >\n              <i className=\"fe-cancel\"></i>\n            </Button>\n          )}\n          {icon === false && loading && <Loader size=\"medium\" color=\"gray\" />}\n          {!selection && searchValue === \"\" && noSearchSuffix}\n        </div>\n      </div>\n      <FloatingPortal>\n        <AutocompleteContext.Provider value={autocompleteContext}>\n          {isOpen && (\n            <FloatingFocusManager\n              disabled={selectOnFocus}\n              context={context}\n              initialFocus={-1}\n              visuallyHiddenDismiss\n            >\n              <div\n                className=\"z-dialog outline-hidden\"\n                ref={refs.setFloating}\n                style={floatingStyles as CSSProperties}\n                {...getFloatingProps()}\n              >\n                <Dialog\n                  placement={context.placement}\n                  className=\"motion-safe:animate-fade-in-list overflow-auto\"\n                >\n                  <FloatingList elementsRef={listRef}>\n                    {options.map((option) => {\n                      return <OptionComponent {...option} key={getOptionValue(option)} />;\n                    })}\n                  </FloatingList>\n                </Dialog>\n              </div>\n            </FloatingFocusManager>\n          )}\n        </AutocompleteContext.Provider>\n      </FloatingPortal>\n    </div>\n  );\n}\n","import { useRef, useState } from \"react\";\nimport { Autocomplete, AutocompleteProps } from \"./Autocomplete\";\nimport { Option, OptionLike } from \"../select-legacy\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks\";\nimport { getOptionLabel } from \"./util\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\ninterface Props<O extends OptionLike = Option> extends Omit<\n  AutocompleteProps<O>,\n  \"searchValue\" | \"onChangeSearchValue\" | \"loading\" | \"clearSearchButton\" | \"selectOnFocus\"\n> {}\n\nexport function SimpleAutocomplete<O extends OptionLike = Option>({\n  options,\n  selection = null,\n  onChangeSelection,\n  ...rest\n}: Props<O>) {\n  const [searchValue, setSearchValue] = useState(selection ? getOptionLabel(selection) : \"\");\n\n  const searchValueRef = useRef(searchValue);\n  searchValueRef.current = searchValue;\n\n  const inputRef = useRef<HTMLInputElement>(null!);\n\n  // side effect, update the searchValue <input /> value when\n  // selection come from outside\n  useIsomorphicLayoutEffect(() => {\n    if (selection === null) {\n      if (document.activeElement !== inputRef.current) {\n        setSearchValue(\"\");\n      }\n      return;\n    }\n\n    // we need the fresh value of searchValue but we don't\n    // want searchValue as useEffect dependency\n    const selectionLabel = getOptionLabel(selection);\n    if (searchValueRef.current !== getOptionLabel(selection)) {\n      setSearchValue(selectionLabel);\n    }\n  }, [selection, setSearchValue]);\n\n  const filteredOptions =\n    selection !== null\n      ? []\n      : options.filter((option) => {\n          const optionLabel = getOptionLabel(option);\n          return optionLabel.toLowerCase().startsWith(searchValue.toLowerCase());\n        });\n\n  return (\n    <Autocomplete\n      ref={inputRef}\n      searchValue={searchValue}\n      onChangeSearchValue={setSearchValue}\n      selection={selection}\n      onChangeSelection={onChangeSelection}\n      options={filteredOptions}\n      {...rest}\n    />\n  );\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Autocomplete, AutocompleteProps } from \"./Autocomplete\";\nimport { OptionLike, Option } from \"../select-legacy\";\nimport { getOptionLabel } from \"./util\";\nimport { useStateDebounce, useIsomorphicLayoutEffect } from \"../../hooks\";\n\ninterface Props<O extends OptionLike = Option>\n  // Omit \"searchValue\" | \"onChangeSearchValue\" | \"options\"\n  extends Omit<\n    AutocompleteProps<O>,\n    \"searchValue\" | \"onChangeSearchValue\" | \"options\" | \"selectOnFocus\"\n  > {\n  onChangeSearchValueCallback: (searchValue: string) => Promise<O[]>;\n  debounce?: number;\n}\n\nexport function LazyAutocomplete<O extends OptionLike = Option>({\n  onChangeSearchValueCallback,\n  debounce = 5000,\n  selection = null,\n  onChangeSelection,\n  ...rest\n}: Props<O>) {\n  const [searchValue, searchValueDebounced, setSearchValue] = useStateDebounce(\n    selection ? getOptionLabel(selection) : \"\",\n    debounce,\n  );\n\n  const searchValueRef = useRef(searchValue);\n  searchValueRef.current = searchValue;\n\n  const inputRef = useRef<HTMLInputElement>(null!);\n\n  const [loading, setLoading] = useState(false);\n\n  const [options, setOptions] = useState<O[]>([]);\n\n  const handleChangeSelection = useCallback(\n    (selection: O | null) => {\n      onChangeSelection(selection);\n      if (selection) {\n        setOptions([]);\n      }\n    },\n    [onChangeSelection],\n  );\n\n  // side effect, update the searchValue <input /> value when\n  // selection come from outside\n  useIsomorphicLayoutEffect(() => {\n    if (selection === null) {\n      if (document.activeElement !== inputRef.current) {\n        setSearchValue(\"\", true);\n      }\n      return;\n    }\n\n    // we need the fresh value of searchValue but we don't\n    // want searchValue as useEffect dependency\n    const selectionLabel = getOptionLabel(selection);\n    if (searchValueRef.current !== selectionLabel) {\n      setSearchValue(selectionLabel, true);\n    }\n  }, [selection, setSearchValue]);\n\n  /**\n   * set new options when searchValueDebounced change\n   */\n  useEffect(() => {\n    let abort = false;\n\n    // when we're selecting option we change searchValue to be the complete label\n    // value but we don't want to fetch new research\n    if (selection) {\n      return;\n    }\n\n    if (searchValueDebounced.trim() === \"\") {\n      setOptions([]);\n      return;\n    }\n\n    setLoading(true);\n\n    onChangeSearchValueCallback(searchValueDebounced)\n      ?.then((newOptions) => {\n        setLoading(false);\n\n        if (!abort) {\n          setOptions(newOptions);\n        }\n      })\n      .catch(() => {\n        setLoading(false);\n      });\n\n    return () => {\n      setLoading(false);\n      abort = true;\n    };\n  }, [selection, searchValueDebounced, onChangeSearchValueCallback]);\n\n  return (\n    <Autocomplete\n      ref={inputRef}\n      searchValue={searchValue}\n      onChangeSearchValue={(newValue, immediate) => {\n        setSearchValue(newValue, immediate || newValue === \"\" ? true : false);\n      }}\n      selection={selection}\n      onChangeSelection={handleChangeSelection}\n      options={options}\n      loading={loading}\n      {...rest}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["useInteractions","createContext","useContext","OptionLike","AutocompleteContext","activeIndex","selection","getItemProps","ReturnType","handleSelect","index","useAutocomplete","context","Error","OptionLike","getOptionLabel","option","type","properties","label","getOptionValue","id","value","memo","useId","OptionLike","useListItem","useAutocomplete","clsx","getOptionLabel","getOptionValue","AutocompleteOptionProps","O","AutocompleteOption","props","$","_c","t0","label","id","activeIndex","selection","getItemProps","handleSelect","t1","ref","index","isActive","isSelected","t2","t3","t4","t5","onClick","t6","ChangeEvent","KeyboardEvent","useCallback","useMemo","useRef","useState","ReactNode","ComponentProps","CSSProperties","RefObject","OptionLike","Option","AutocompleteOption","AutocompleteOptionProps","FloatingFocusManager","FloatingList","FloatingPortal","Placement","autoUpdate","flip","offset","size","useDismiss","useFloating","useInteractions","useListNavigation","useRole","AutocompleteContext","clsx","getOptionLabel","getOptionValue","Button","Dialog","Loader","inputConfig","sizeVariant","ThemeColor","AutocompleteProps","icon","color","noSearchSuffix","suffix","placement","searchValue","onChangeSearchValue","value","selectionLabel","selection","O","onChangeSelection","option","options","autocompleteOptionComponent","props","loading","clearSearchButton","selectOnFocus","ref","HTMLInputElement","Autocomplete","className","autoFocus","placeholder","readOnly","rest","isOpen","setIsOpen","activeIndex","setActiveIndex","OptionComponent","listRef","Array","HTMLElement","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","padding","apply","rects","elements","availableHeight","Object","assign","floating","style","width","Math","max","reference","firstChild","firstElementChild","maxHeight","min","role","dismiss","listNav","onNavigate","virtual","loop","getReferenceProps","getFloatingProps","getItemProps","handleChangeSearchValue","e","target","current","handleSelect","index","newSelection","autocompleteContext","showClearSearchButton","trim","container","medium","setReference","input","onClick","document","activeElement","select","onChange","onMouseDown","length","onKeyDown","key","setFloating","map","useRef","useState","Autocomplete","AutocompleteProps","Option","OptionLike","useIsomorphicLayoutEffect","getOptionLabel","Props","Omit","O","SimpleAutocomplete","options","selection","onChangeSelection","rest","searchValue","setSearchValue","searchValueRef","current","inputRef","HTMLInputElement","document","activeElement","selectionLabel","filteredOptions","filter","option","optionLabel","toLowerCase","startsWith","useCallback","useEffect","useRef","useState","Autocomplete","AutocompleteProps","OptionLike","Option","getOptionLabel","useStateDebounce","useIsomorphicLayoutEffect","Props","Omit","O","onChangeSearchValueCallback","searchValue","Promise","debounce","LazyAutocomplete","selection","onChangeSelection","rest","searchValueDebounced","setSearchValue","searchValueRef","current","inputRef","HTMLInputElement","loading","setLoading","options","setOptions","handleChangeSelection","document","activeElement","selectionLabel","abort","trim","then","newOptions","catch","newValue","immediate"],"sources":["../../../src/components/autocomplete/useAutocompleteContext.ts","../../../src/components/autocomplete/util.ts","../../../src/components/autocomplete/AutocompleteOption.tsx","../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/SimpleAutocomplete.tsx","../../../src/components/autocomplete/LazyAutocomplete.tsx"],"sourcesContent":["import { useInteractions } from \"@floating-ui/react\";\nimport { createContext, useContext } from \"react\";\nimport { OptionLike } from \"../select-legacy\";\n\ninterface AutocompleteContext {\n  activeIndex: number | null;\n  selection: OptionLike | null;\n  getItemProps: ReturnType<typeof useInteractions>[\"getItemProps\"];\n  handleSelect: (index: number | null) => void;\n}\n\nexport const AutocompleteContext = createContext<AutocompleteContext | null>(null);\n\nexport function useAutocomplete() {\n  const context = useContext(AutocompleteContext);\n  if (context === null) {\n    throw new Error(\"Autocomplete components must be wrapped in <Autocomplete>\");\n  }\n  return context;\n}\n","import { OptionLike } from \"../select-legacy\";\n\nexport function getOptionLabel(option: OptionLike) {\n  switch (option.type) {\n    case \"Feature\":\n      return option.properties.label;\n    default:\n      return option.label;\n  }\n}\n\nexport function getOptionValue(option: OptionLike) {\n  switch (option.type) {\n    case \"Feature\":\n      return option.properties.id;\n    default:\n      return option.value;\n  }\n}\n","import { memo, useId } from \"react\";\nimport { OptionLike } from \"../select-legacy\";\nimport { useListItem } from \"@floating-ui/react\";\nimport { useAutocomplete } from \"./useAutocompleteContext\";\nimport clsx from \"clsx\";\nimport { getOptionLabel, getOptionValue } from \"./util\";\n\nexport type AutocompleteOptionProps<O extends OptionLike> = O;\n\nexport const AutocompleteOption = memo(function AutocompleteOption<O extends OptionLike>(\n  props: AutocompleteOptionProps<O>,\n) {\n  const label = getOptionLabel(props);\n\n  const id = useId();\n  const { activeIndex, selection, getItemProps, handleSelect } = useAutocomplete();\n  const { ref, index } = useListItem({ label });\n  const isActive = activeIndex === index;\n  const isSelected = selection ? getOptionValue(selection) === getOptionValue(props) : false;\n\n  return (\n    <div\n      className={clsx(\"option\", isSelected ? \"bg-gray-2\" : isActive && \"bg-gray-1\")}\n      ref={ref}\n      role=\"option\"\n      id={id}\n      data-presentation=\"compact\"\n      aria-selected={isActive}\n      {...getItemProps({\n        onClick: () => handleSelect(index),\n      })}\n    >\n      {label}\n    </div>\n  );\n});\n","import {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  ReactNode,\n  ComponentProps,\n  CSSProperties,\n  RefObject,\n} from \"react\";\nimport type { OptionLike, Option } from \"../select-legacy\";\nimport { AutocompleteOption, AutocompleteOptionProps } from \"./AutocompleteOption\";\nimport {\n  FloatingFocusManager,\n  FloatingList,\n  FloatingPortal,\n  Placement,\n  autoUpdate,\n  flip,\n  offset,\n  size,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { AutocompleteContext } from \"./useAutocompleteContext\";\nimport clsx from \"clsx\";\n\nimport { getOptionLabel, getOptionValue } from \"./util\";\nimport { Button } from \"../button\";\nimport { Dialog } from \"../dialog\";\nimport { Loader } from \"../loader\";\nimport { inputConfig, sizeVariant } from \"../fields/text/Input\";\nimport { ThemeColor } from \"../../types\";\n\nexport interface AutocompleteProps<O extends OptionLike = Option> extends ComponentProps<\"input\"> {\n  icon?: boolean | ReactNode;\n\n  color?: ThemeColor;\n\n  /**\n   * render suffix only if selection and searchValue is empty\n   */\n  noSearchSuffix?: ReactNode;\n\n  suffix?: ReactNode;\n\n  placement?: Placement;\n  /**\n   * search string used as value for <input>\n   */\n  searchValue: string;\n  /**\n   * change handler when typing in the input\n   * or when clicking on an option (the label value is passed)\n   */\n  onChangeSearchValue: (value: string, selectionLabel: boolean) => void;\n\n  selection?: O | null;\n  /**\n   * select handler for a selection from the autocomplete's dropdown\n   * the option object is passed when clicking on an option\n   * null value is passed when typing a new character in the input search.\n   */\n  onChangeSelection: (option: O | null) => void;\n  options: O[];\n\n  autocompleteOptionComponent?: (props: AutocompleteOptionProps<O>) => ReactNode;\n\n  loading?: boolean;\n\n  clearSearchButton?: boolean;\n\n  selectOnFocus?: boolean;\n\n  ref?: RefObject<HTMLInputElement>;\n}\n\nexport function Autocomplete<O extends OptionLike = Option>({\n  className,\n  autoFocus = false,\n  icon = true,\n  color = \"yellow\",\n  noSearchSuffix,\n  suffix,\n  placement = \"bottom\",\n  placeholder = \"Search...\",\n  selection = null,\n  onChangeSelection,\n  autocompleteOptionComponent,\n  loading = false,\n  clearSearchButton = false,\n  searchValue,\n  onChangeSearchValue,\n  options,\n  selectOnFocus = true,\n  readOnly = false,\n  ref,\n  ...rest\n}: AutocompleteProps<O>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const OptionComponent = autocompleteOptionComponent ?? AutocompleteOption;\n\n  const listRef = useRef<Array<HTMLElement | null>>([]);\n\n  const { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(5),\n      flip({ padding: 10 }),\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            width: `${Math.max(130, rects.reference.width)}px`,\n          });\n          const firstChild = elements.floating.firstElementChild as HTMLElement;\n          if (firstChild) {\n            firstChild.style.maxHeight = `${Math.min(availableHeight, 288)}px`;\n          }\n        },\n        padding: 10,\n      }),\n    ],\n  });\n\n  const role = useRole(context, { role: \"listbox\" });\n  const dismiss = useDismiss(context);\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    /* we want the real focus to stay on the input, so focus associated to active items is simulated */\n    virtual: true,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    role,\n    dismiss,\n    listNav,\n  ]);\n\n  function handleChangeSearchValue(e: ChangeEvent<HTMLInputElement>) {\n    const value = e.target.value;\n\n    onChangeSearchValue(value, false);\n\n    if (value !== searchValue && selection !== null) {\n      onChangeSelection(null);\n      setActiveIndex(null);\n      return;\n    }\n\n    if (value) {\n      setIsOpen(true);\n      /**\n       * bug whith LazyAutocomplete activeIndex is set to 0 but the options array has immediately 0 elements\n       * so focus can't be set to the first Dom element.\n       */\n      setActiveIndex(listRef.current[0] ? 0 : null);\n    } else {\n      setIsOpen(false);\n      setActiveIndex(null);\n    }\n  }\n\n  const handleSelect = useCallback(\n    (index: number | null) => {\n      if (index === null) {\n        onChangeSelection(null);\n      } else if (options[index]) {\n        const newSelection = options[index];\n        onChangeSelection(newSelection);\n\n        onChangeSearchValue(getOptionLabel(newSelection), true);\n      }\n      setActiveIndex(null);\n      setIsOpen(false);\n    },\n\n    [options, onChangeSelection, onChangeSearchValue],\n  );\n\n  const autocompleteContext = useMemo(\n    () => ({\n      activeIndex,\n      selection,\n      getItemProps,\n      handleSelect,\n    }),\n    [activeIndex, selection, getItemProps, handleSelect],\n  );\n\n  const showClearSearchButton =\n    clearSearchButton && (searchValue.trim() !== \"\" || selection !== null);\n\n  return (\n    <div className={className} role=\"combobox\">\n      <div\n        className={clsx(inputConfig.container, sizeVariant.medium, readOnly && \"readonly\")}\n        ref={refs.setReference}\n        data-color={color}\n      >\n        {icon !== false && (\n          <div className=\"flex-center relative\">\n            <Loader loading={loading} size=\"input\" color=\"gray\" className=\"mr-2\">\n              {icon === true ? <i className=\"fe-search text-body-md\"></i> : icon}\n            </Loader>\n          </div>\n        )}\n        <input\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n          spellCheck=\"false\"\n          className={clsx(inputConfig.input, icon === false && \"pl-4\")}\n          ref={ref}\n          type=\"search\"\n          readOnly={readOnly}\n          value={searchValue}\n          placeholder={placeholder}\n          aria-autocomplete=\"list\"\n          {...getReferenceProps({\n            onClick() {\n              if (selectOnFocus) {\n                // it's better to listen onClick instead of onFocus. the event is triggered later and there\n                // was an issue if we listen on onFocus and user click on the text of the textarea with Firefox\n                (document.activeElement as HTMLInputElement)?.select();\n              }\n            },\n            onChange: handleChangeSearchValue,\n            onMouseDown() {\n              if (options.length === 0) {\n                return;\n              }\n              /**\n               * There is a already selection\n               * and the only element available is the selection,\n               * no need to display the dropdown.\n               */\n              // if (options.length === 1 && options[0].value === selection?.value) {\n              //   return;\n              // }\n              setIsOpen((isOpen) => !isOpen);\n            },\n            onKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n              if (e.key === \"Enter\" && activeIndex != null) {\n                handleSelect(activeIndex);\n              }\n            },\n          })}\n          {...rest}\n        />\n        <div className=\"flex-center relative\">\n          {suffix}\n          {showClearSearchButton && (\n            <Button\n              size=\"input\"\n              type=\"button\"\n              withRipple={false}\n              icon\n              color=\"gray\"\n              variant=\"text\"\n              onClick={() => {\n                setIsOpen(false);\n                onChangeSelection(null);\n                setActiveIndex(null);\n                onChangeSearchValue(\"\", true);\n              }}\n            >\n              <i className=\"fe-cancel\"></i>\n            </Button>\n          )}\n          {icon === false && loading && <Loader size=\"medium\" color=\"gray\" />}\n          {!selection && searchValue === \"\" && noSearchSuffix}\n        </div>\n      </div>\n      <FloatingPortal>\n        <AutocompleteContext.Provider value={autocompleteContext}>\n          {isOpen && (\n            <FloatingFocusManager\n              disabled={selectOnFocus}\n              context={context}\n              initialFocus={-1}\n              visuallyHiddenDismiss\n            >\n              <div\n                className=\"z-dialog outline-hidden\"\n                ref={refs.setFloating}\n                style={floatingStyles as CSSProperties}\n                {...getFloatingProps()}\n              >\n                <Dialog\n                  placement={context.placement}\n                  className=\"motion-safe:animate-fade-in-list overflow-auto\"\n                >\n                  <FloatingList elementsRef={listRef}>\n                    {options.map((option) => {\n                      return <OptionComponent {...option} key={getOptionValue(option)} />;\n                    })}\n                  </FloatingList>\n                </Dialog>\n              </div>\n            </FloatingFocusManager>\n          )}\n        </AutocompleteContext.Provider>\n      </FloatingPortal>\n    </div>\n  );\n}\n","import { useRef, useState } from \"react\";\nimport { Autocomplete, AutocompleteProps } from \"./Autocomplete\";\nimport { Option, OptionLike } from \"../select-legacy\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks\";\nimport { getOptionLabel } from \"./util\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\ninterface Props<O extends OptionLike = Option> extends Omit<\n  AutocompleteProps<O>,\n  \"searchValue\" | \"onChangeSearchValue\" | \"loading\" | \"clearSearchButton\" | \"selectOnFocus\"\n> {}\n\nexport function SimpleAutocomplete<O extends OptionLike = Option>({\n  options,\n  selection = null,\n  onChangeSelection,\n  ...rest\n}: Props<O>) {\n  const [searchValue, setSearchValue] = useState(selection ? getOptionLabel(selection) : \"\");\n\n  const searchValueRef = useRef(searchValue);\n  searchValueRef.current = searchValue;\n\n  const inputRef = useRef<HTMLInputElement>(null!);\n\n  // side effect, update the searchValue <input /> value when\n  // selection come from outside\n  useIsomorphicLayoutEffect(() => {\n    if (selection === null) {\n      if (document.activeElement !== inputRef.current) {\n        setSearchValue(\"\");\n      }\n      return;\n    }\n\n    // we need the fresh value of searchValue but we don't\n    // want searchValue as useEffect dependency\n    const selectionLabel = getOptionLabel(selection);\n    if (searchValueRef.current !== getOptionLabel(selection)) {\n      setSearchValue(selectionLabel);\n    }\n  }, [selection, setSearchValue]);\n\n  const filteredOptions =\n    selection !== null\n      ? []\n      : options.filter((option) => {\n          const optionLabel = getOptionLabel(option);\n          return optionLabel.toLowerCase().startsWith(searchValue.toLowerCase());\n        });\n\n  return (\n    <Autocomplete\n      ref={inputRef}\n      searchValue={searchValue}\n      onChangeSearchValue={setSearchValue}\n      selection={selection}\n      onChangeSelection={onChangeSelection}\n      options={filteredOptions}\n      {...rest}\n    />\n  );\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Autocomplete, AutocompleteProps } from \"./Autocomplete\";\nimport { OptionLike, Option } from \"../select-legacy\";\nimport { getOptionLabel } from \"./util\";\nimport { useStateDebounce, useIsomorphicLayoutEffect } from \"../../hooks\";\n\ninterface Props<O extends OptionLike = Option>\n  // Omit \"searchValue\" | \"onChangeSearchValue\" | \"options\"\n  extends Omit<\n    AutocompleteProps<O>,\n    \"searchValue\" | \"onChangeSearchValue\" | \"options\" | \"selectOnFocus\"\n  > {\n  onChangeSearchValueCallback: (searchValue: string) => Promise<O[]>;\n  debounce?: number;\n}\n\nexport function LazyAutocomplete<O extends OptionLike = Option>({\n  onChangeSearchValueCallback,\n  debounce = 5000,\n  selection = null,\n  onChangeSelection,\n  ...rest\n}: Props<O>) {\n  const [searchValue, searchValueDebounced, setSearchValue] = useStateDebounce(\n    selection ? getOptionLabel(selection) : \"\",\n    debounce,\n  );\n\n  const searchValueRef = useRef(searchValue);\n  searchValueRef.current = searchValue;\n\n  const inputRef = useRef<HTMLInputElement>(null!);\n\n  const [loading, setLoading] = useState(false);\n\n  const [options, setOptions] = useState<O[]>([]);\n\n  const handleChangeSelection = useCallback(\n    (selection: O | null) => {\n      onChangeSelection(selection);\n      if (selection) {\n        setOptions([]);\n      }\n    },\n    [onChangeSelection],\n  );\n\n  // side effect, update the searchValue <input /> value when\n  // selection come from outside\n  useIsomorphicLayoutEffect(() => {\n    if (selection === null) {\n      if (document.activeElement !== inputRef.current) {\n        setSearchValue(\"\", true);\n      }\n      return;\n    }\n\n    // we need the fresh value of searchValue but we don't\n    // want searchValue as useEffect dependency\n    const selectionLabel = getOptionLabel(selection);\n    if (searchValueRef.current !== selectionLabel) {\n      setSearchValue(selectionLabel, true);\n    }\n  }, [selection, setSearchValue]);\n\n  /**\n   * set new options when searchValueDebounced change\n   */\n  useEffect(() => {\n    let abort = false;\n\n    // when we're selecting option we change searchValue to be the complete label\n    // value but we don't want to fetch new research\n    if (selection) {\n      return;\n    }\n\n    if (searchValueDebounced.trim() === \"\") {\n      setOptions([]);\n      return;\n    }\n\n    setLoading(true);\n\n    onChangeSearchValueCallback(searchValueDebounced)\n      ?.then((newOptions) => {\n        setLoading(false);\n\n        if (!abort) {\n          setOptions(newOptions);\n        }\n      })\n      .catch(() => {\n        setLoading(false);\n      });\n\n    return () => {\n      setLoading(false);\n      abort = true;\n    };\n  }, [selection, searchValueDebounced, onChangeSearchValueCallback]);\n\n  return (\n    <Autocomplete\n      ref={inputRef}\n      searchValue={searchValue}\n      onChangeSearchValue={(newValue, immediate) => {\n        setSearchValue(newValue, immediate || newValue === \"\" ? true : false);\n      }}\n      selection={selection}\n      onChangeSelection={handleChangeSelection}\n      options={options}\n      loading={loading}\n      {...rest}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/badge/index.mjs

@@ -1,2 +1,2 @@
-import { t as Badge } from "../../badge-DvmzAobO.mjs";
+import { t as Badge } from "../../badge-O81gvkSR.mjs";
 export { Badge };

package/dist/components/context-menu/index.mjs

@@ -38,20 +38,24 @@ function ContextMenu({ targetRef, children, style, eventName = "contextmenu" })
 		strategy: "fixed",
 		whileElementsMounted: autoUpdate
 	});
+	const role = useRole(context, { role: "menu" });
+	const dismiss = useDismiss(context);
+	const listNavigation = useListNavigation(context, {
+		listRef: listItemsRef,
+		onNavigate: setActiveIndex,
+		activeIndex
+	});
+	const typeahead = useTypeahead(context, {
+		enabled: isOpen,
+		listRef: listContentRef,
+		onMatch: setActiveIndex,
+		activeIndex
+	});
 	const { getFloatingProps, getItemProps } = useInteractions([
-		useRole(context, { role: "menu" }),
-		useDismiss(context),
-		useListNavigation(context, {
-			listRef: listItemsRef,
-			onNavigate: setActiveIndex,
-			activeIndex
-		}),
-		useTypeahead(context, {
-			enabled: isOpen,
-			listRef: listContentRef,
-			onMatch: setActiveIndex,
-			activeIndex
-		})
+		role,
+		dismiss,
+		listNavigation,
+		typeahead
 	]);
 	const onContextMenuStable = useEffectEvent(function onContextMenu(e) {
 		e.preventDefault();

package/dist/components/context-menu/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Children","ComponentPropsWithRef","ReactElement","RefObject","cloneElement","isValidElement","useEffect","useEffectEvent","useRef","useState","FloatingFocusManager","FloatingPortal","autoUpdate","flip","offset","shift","size","useDismiss","useFloating","useInteractions","useListNavigation","useRole","useTypeahead","ContextMenuItemProps","Dialog","useRefDebounce","CustomContextEvent","CustomEvent","emulated","originalEvent","Event","Props","targetRef","HTMLElement","children","eventName","debounceOpenning","ContextMenu","style","activeIndex","setActiveIndex","isOpen","setIsOpen","isOpenDebounceRef","contextEvent","MouseEvent","listItemsRef","HTMLButtonElement","listContentRef","map","child","props","label","refs","floatingStyles","context","open","onOpenChange","middleware","mainAxis","alignmentAxis","apply","elements","availableHeight","firstChild","floating","firstElementChild","maxHeight","Math","min","padding","placement","window","matchMedia","matches","undefined","strategy","whileElementsMounted","role","dismiss","listNavigation","listRef","onNavigate","typeahead","enabled","onMatch","getFloatingProps","getItemProps","onContextMenuStable","onContextMenu","e","preventDefault","isEmulatedContextMenu","type","detail","current","setPositionReference","getBoundingClientRect","width","height","x","clientX","y","clientY","top","right","bottom","left","stableTarget","document","documentElement","addEventListener","removeEventListener","setFloating","index","tabIndex","ref","node","onMouseUp","onClick","React","ComponentPropsWithRef","ReactNode","RefObject","clsx","ContextMenuItemMouseEvent","MouseEvent","HTMLButtonElement","CustomEvent","ContextMenuItemProps","Omit","label","disabled","icon","onClick","e","ref","ContextMenuItem","t0","$","_c","className","props","t1","t2","t3","t4"],"sources":["../../../src/components/context-menu/ContextMenu.tsx","../../../src/components/context-menu/ContextMenuItem.tsx"],"sourcesContent":["import {\n  Children,\n  ComponentPropsWithRef,\n  ReactElement,\n  RefObject,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useEffectEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  FloatingFocusManager,\n  FloatingPortal,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  size,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  useTypeahead,\n} from \"@floating-ui/react\";\n\nimport { ContextMenuItemProps } from \"./ContextMenuItem\";\nimport { Dialog } from \"../dialog/Dialog\";\nimport { useRefDebounce } from \"../../hooks\";\n\ntype CustomContextEvent = CustomEvent<{ emulated: boolean; originalEvent: Event }>;\n\ninterface Props extends ComponentPropsWithRef<\"div\"> {\n  targetRef?: RefObject<HTMLElement>;\n  children: ReactElement[] | ReactElement;\n  eventName?: \"contextmenu\" | string;\n  debounceOpenning?: number;\n}\nexport function ContextMenu({ targetRef, children, style, eventName = \"contextmenu\" }: Props) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const isOpenDebounceRef = useRefDebounce(isOpen, 200);\n  const contextEvent = useRef<MouseEvent | CustomEvent | null>(null);\n  const listItemsRef = useRef<(HTMLButtonElement | null)[]>([]);\n  const listContentRef = useRef(\n    Children.map(children, (child) =>\n      isValidElement<ContextMenuItemProps>(child) ? child.props.label : null,\n    ) as (string | null)[],\n  );\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    middleware: [\n      offset({ mainAxis: 5, alignmentAxis: 4 }),\n      flip(),\n      size({\n        apply({ elements, availableHeight }) {\n          const firstChild = elements.floating.firstElementChild as HTMLElement;\n          if (firstChild) {\n            firstChild.style.maxHeight = `${Math.min(availableHeight, 300)}px`;\n          }\n        },\n        padding: 10,\n      }),\n      shift({ padding: 10 }),\n    ],\n    /**\n     * it is better to be less demanding on small screen sizes to see the content displayed correctly\n     */\n    placement: window.matchMedia(\"(min-width: 700px)\").matches ? \"right-start\" : undefined,\n    strategy: \"fixed\",\n    whileElementsMounted: autoUpdate,\n  });\n\n  const role = useRole(context, { role: \"menu\" });\n  const dismiss = useDismiss(context);\n\n  const listNavigation = useListNavigation(context, {\n    listRef: listItemsRef,\n    onNavigate: setActiveIndex,\n    activeIndex,\n  });\n  const typeahead = useTypeahead(context, {\n    enabled: isOpen,\n    listRef: listContentRef,\n    onMatch: setActiveIndex,\n    activeIndex,\n  });\n\n  const { getFloatingProps, getItemProps } = useInteractions([\n    role,\n    dismiss,\n    listNavigation,\n    typeahead,\n  ]);\n\n  const onContextMenuStable = useEffectEvent(function onContextMenu(\n    e: MouseEvent | CustomContextEvent,\n  ) {\n    e.preventDefault();\n    /**\n     * in certain cases (maplibre-gl) we will not be able to use the\n     * native \"contextmenu\" event for touch screens and we will emulate this\n     * with a simple \"click\" event\n     *\n     * with emulated event if the context menu has just been closed we probably\n     * do not want a click to immediately reopen a new context menu\n     */\n    const isEmulatedContextMenu =\n      e.type !== \"contextmenu\" && (e as CustomContextEvent).detail.emulated;\n\n    if (isEmulatedContextMenu && isOpenDebounceRef.current) {\n      return;\n    }\n\n    const originalEvent = e instanceof MouseEvent ? e : (e.detail.originalEvent as MouseEvent);\n    contextEvent.current = e;\n\n    refs.setPositionReference({\n      getBoundingClientRect() {\n        return {\n          width: 0,\n          height: 0,\n          x: originalEvent.clientX,\n          y: originalEvent.clientY,\n          top: originalEvent.clientY,\n          right: originalEvent.clientX,\n          bottom: originalEvent.clientY,\n          left: originalEvent.clientX,\n        };\n      },\n    });\n\n    setIsOpen(true);\n    isOpenDebounceRef.current = true;\n  });\n\n  useEffect(() => {\n    const stableTarget = targetRef?.current ?? document.documentElement;\n    // console.log(\"add contextmenu\", targetRef);\n    stableTarget.addEventListener(eventName as \"contextmenu\", onContextMenuStable);\n    return () => {\n      // console.log(\"remove contextmenu\", targetRef);\n      stableTarget.removeEventListener(eventName as \"contextmenu\", onContextMenuStable);\n    };\n  }, [eventName, targetRef]);\n\n  return (\n    <FloatingPortal>\n      {isOpen && (\n        <FloatingFocusManager context={context} initialFocus={refs.floating}>\n          <div\n            className=\"z-dialog outline-hidden\"\n            ref={refs.setFloating}\n            style={{ ...floatingStyles, ...style }}\n            {...getFloatingProps()}\n          >\n            <Dialog placement={context.placement} className=\"z-context-menu max-h-80 overflow-auto\">\n              {Children.map(\n                children,\n                (child, index) =>\n                  isValidElement<ContextMenuItemProps>(child) &&\n                  cloneElement(\n                    child,\n                    getItemProps({\n                      tabIndex: activeIndex === index ? 0 : -1,\n                      ref(node: HTMLButtonElement) {\n                        listItemsRef.current[index] = node;\n                      },\n                      onMouseUp() {\n                        child.props.onClick?.(contextEvent.current);\n                        setIsOpen(false);\n                      },\n                    }),\n                  ),\n              )}\n            </Dialog>\n          </div>\n        </FloatingFocusManager>\n      )}\n    </FloatingPortal>\n  );\n}\n","import React, { ComponentPropsWithRef, ReactNode, RefObject } from \"react\";\nimport clsx from \"clsx\";\n\nexport type ContextMenuItemMouseEvent =\n  | React.MouseEvent<HTMLButtonElement>\n  | MouseEvent\n  | CustomEvent\n  | null;\n\nexport interface ContextMenuItemProps extends Omit<ComponentPropsWithRef<\"button\">, \"onClick\"> {\n  label: string;\n  disabled?: boolean;\n  icon?: ReactNode;\n  onClick?: (e: ContextMenuItemMouseEvent) => void;\n  ref?: RefObject<HTMLButtonElement>;\n}\n\nexport function ContextMenuItem({\n  label,\n  disabled,\n  icon,\n  className,\n  ref,\n  ...props\n}: ContextMenuItemProps) {\n  return (\n    <button\n      {...props}\n      className={clsx([\"option\", className])}\n      ref={ref}\n      role=\"menuitem\"\n      data-presentation=\"compact\"\n      {...(disabled ? { disabled } : {})}\n    >\n      {icon}\n      <span className=\"content\">{label}</span>\n    </button>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["Children","ComponentPropsWithRef","ReactElement","RefObject","cloneElement","isValidElement","useEffect","useEffectEvent","useRef","useState","FloatingFocusManager","FloatingPortal","autoUpdate","flip","offset","shift","size","useDismiss","useFloating","useInteractions","useListNavigation","useRole","useTypeahead","ContextMenuItemProps","Dialog","useRefDebounce","CustomContextEvent","CustomEvent","emulated","originalEvent","Event","Props","targetRef","HTMLElement","children","eventName","debounceOpenning","ContextMenu","style","activeIndex","setActiveIndex","isOpen","setIsOpen","isOpenDebounceRef","contextEvent","MouseEvent","listItemsRef","HTMLButtonElement","listContentRef","map","child","props","label","refs","floatingStyles","context","open","onOpenChange","middleware","mainAxis","alignmentAxis","apply","elements","availableHeight","firstChild","floating","firstElementChild","maxHeight","Math","min","padding","placement","window","matchMedia","matches","undefined","strategy","whileElementsMounted","role","dismiss","listNavigation","listRef","onNavigate","typeahead","enabled","onMatch","getFloatingProps","getItemProps","onContextMenuStable","onContextMenu","e","preventDefault","isEmulatedContextMenu","type","detail","current","setPositionReference","getBoundingClientRect","width","height","x","clientX","y","clientY","top","right","bottom","left","stableTarget","document","documentElement","addEventListener","removeEventListener","setFloating","index","tabIndex","ref","node","onMouseUp","onClick","React","ComponentPropsWithRef","ReactNode","RefObject","clsx","ContextMenuItemMouseEvent","MouseEvent","HTMLButtonElement","CustomEvent","ContextMenuItemProps","Omit","label","disabled","icon","onClick","e","ref","ContextMenuItem","t0","$","_c","className","props","t1","t2","t3","t4"],"sources":["../../../src/components/context-menu/ContextMenu.tsx","../../../src/components/context-menu/ContextMenuItem.tsx"],"sourcesContent":["import {\n  Children,\n  ComponentPropsWithRef,\n  ReactElement,\n  RefObject,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useEffectEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  FloatingFocusManager,\n  FloatingPortal,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  size,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  useTypeahead,\n} from \"@floating-ui/react\";\n\nimport { ContextMenuItemProps } from \"./ContextMenuItem\";\nimport { Dialog } from \"../dialog/Dialog\";\nimport { useRefDebounce } from \"../../hooks\";\n\ntype CustomContextEvent = CustomEvent<{ emulated: boolean; originalEvent: Event }>;\n\ninterface Props extends ComponentPropsWithRef<\"div\"> {\n  targetRef?: RefObject<HTMLElement>;\n  children: ReactElement[] | ReactElement;\n  eventName?: \"contextmenu\" | string;\n  debounceOpenning?: number;\n}\nexport function ContextMenu({ targetRef, children, style, eventName = \"contextmenu\" }: Props) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const isOpenDebounceRef = useRefDebounce(isOpen, 200);\n  const contextEvent = useRef<MouseEvent | CustomEvent | null>(null);\n  const listItemsRef = useRef<(HTMLButtonElement | null)[]>([]);\n  const listContentRef = useRef(\n    Children.map(children, (child) =>\n      isValidElement<ContextMenuItemProps>(child) ? child.props.label : null,\n    ) as (string | null)[],\n  );\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    middleware: [\n      offset({ mainAxis: 5, alignmentAxis: 4 }),\n      flip(),\n      size({\n        apply({ elements, availableHeight }) {\n          const firstChild = elements.floating.firstElementChild as HTMLElement;\n          if (firstChild) {\n            firstChild.style.maxHeight = `${Math.min(availableHeight, 300)}px`;\n          }\n        },\n        padding: 10,\n      }),\n      shift({ padding: 10 }),\n    ],\n    /**\n     * it is better to be less demanding on small screen sizes to see the content displayed correctly\n     */\n    placement: window.matchMedia(\"(min-width: 700px)\").matches ? \"right-start\" : undefined,\n    strategy: \"fixed\",\n    whileElementsMounted: autoUpdate,\n  });\n\n  const role = useRole(context, { role: \"menu\" });\n  const dismiss = useDismiss(context);\n\n  const listNavigation = useListNavigation(context, {\n    listRef: listItemsRef,\n    onNavigate: setActiveIndex,\n    activeIndex,\n  });\n  const typeahead = useTypeahead(context, {\n    enabled: isOpen,\n    listRef: listContentRef,\n    onMatch: setActiveIndex,\n    activeIndex,\n  });\n\n  const { getFloatingProps, getItemProps } = useInteractions([\n    role,\n    dismiss,\n    listNavigation,\n    typeahead,\n  ]);\n\n  const onContextMenuStable = useEffectEvent(function onContextMenu(\n    e: MouseEvent | CustomContextEvent,\n  ) {\n    e.preventDefault();\n    /**\n     * in certain cases (maplibre-gl) we will not be able to use the\n     * native \"contextmenu\" event for touch screens and we will emulate this\n     * with a simple \"click\" event\n     *\n     * with emulated event if the context menu has just been closed we probably\n     * do not want a click to immediately reopen a new context menu\n     */\n    const isEmulatedContextMenu =\n      e.type !== \"contextmenu\" && (e as CustomContextEvent).detail.emulated;\n\n    if (isEmulatedContextMenu && isOpenDebounceRef.current) {\n      return;\n    }\n\n    const originalEvent = e instanceof MouseEvent ? e : (e.detail.originalEvent as MouseEvent);\n    contextEvent.current = e;\n\n    refs.setPositionReference({\n      getBoundingClientRect() {\n        return {\n          width: 0,\n          height: 0,\n          x: originalEvent.clientX,\n          y: originalEvent.clientY,\n          top: originalEvent.clientY,\n          right: originalEvent.clientX,\n          bottom: originalEvent.clientY,\n          left: originalEvent.clientX,\n        };\n      },\n    });\n\n    setIsOpen(true);\n    isOpenDebounceRef.current = true;\n  });\n\n  useEffect(() => {\n    const stableTarget = targetRef?.current ?? document.documentElement;\n    // console.log(\"add contextmenu\", targetRef);\n    stableTarget.addEventListener(eventName as \"contextmenu\", onContextMenuStable);\n    return () => {\n      // console.log(\"remove contextmenu\", targetRef);\n      stableTarget.removeEventListener(eventName as \"contextmenu\", onContextMenuStable);\n    };\n  }, [eventName, targetRef]);\n\n  return (\n    <FloatingPortal>\n      {isOpen && (\n        <FloatingFocusManager context={context} initialFocus={refs.floating}>\n          <div\n            className=\"z-dialog outline-hidden\"\n            ref={refs.setFloating}\n            style={{ ...floatingStyles, ...style }}\n            {...getFloatingProps()}\n          >\n            <Dialog placement={context.placement} className=\"z-context-menu max-h-80 overflow-auto\">\n              {Children.map(\n                children,\n                (child, index) =>\n                  isValidElement<ContextMenuItemProps>(child) &&\n                  cloneElement(\n                    child,\n                    getItemProps({\n                      tabIndex: activeIndex === index ? 0 : -1,\n                      ref(node: HTMLButtonElement) {\n                        listItemsRef.current[index] = node;\n                      },\n                      onMouseUp() {\n                        child.props.onClick?.(contextEvent.current);\n                        setIsOpen(false);\n                      },\n                    }),\n                  ),\n              )}\n            </Dialog>\n          </div>\n        </FloatingFocusManager>\n      )}\n    </FloatingPortal>\n  );\n}\n","import React, { ComponentPropsWithRef, ReactNode, RefObject } from \"react\";\nimport clsx from \"clsx\";\n\nexport type ContextMenuItemMouseEvent =\n  | React.MouseEvent<HTMLButtonElement>\n  | MouseEvent\n  | CustomEvent\n  | null;\n\nexport interface ContextMenuItemProps extends Omit<ComponentPropsWithRef<\"button\">, \"onClick\"> {\n  label: string;\n  disabled?: boolean;\n  icon?: ReactNode;\n  onClick?: (e: ContextMenuItemMouseEvent) => void;\n  ref?: RefObject<HTMLButtonElement>;\n}\n\nexport function ContextMenuItem({\n  label,\n  disabled,\n  icon,\n  className,\n  ref,\n  ...props\n}: ContextMenuItemProps) {\n  return (\n    <button\n      {...props}\n      className={clsx([\"option\", className])}\n      ref={ref}\n      role=\"menuitem\"\n      data-presentation=\"compact\"\n      {...(disabled ? { disabled } : {})}\n    >\n      {icon}\n      <span className=\"content\">{label}</span>\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dropdown-menu-nested/index.mjs

@@ -42,33 +42,39 @@ function MenuItemWithChildren({ children, label, triggerComponent: TriggerCompon
 		],
 		whileElementsMounted: autoUpdate
 	});
+	const hover = useHover(context, {
+		enabled: isNested,
+		delay: {
+			open: 75,
+			close: 200
+		},
+		handleClose: safePolygon({ blockPointerEvents: true })
+	});
+	const click = useClick(context, {
+		event: "mousedown",
+		toggle: !isNested,
+		ignoreMouse: isNested
+	});
+	const role = useRole(context, { role: "menu" });
+	const dismiss = useDismiss(context, { bubbles: true });
+	const listNavigation = useListNavigation(context, {
+		listRef: elementsRef,
+		activeIndex,
+		nested: isNested,
+		onNavigate: setActiveIndex
+	});
+	const typeahead = useTypeahead(context, {
+		listRef: labelsRef,
+		onMatch: isOpen ? setActiveIndex : void 0,
+		activeIndex
+	});
 	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-		useHover(context, {
-			enabled: isNested,
-			delay: {
-				open: 75,
-				close: 200
-			},
-			handleClose: safePolygon({ blockPointerEvents: true })
-		}),
-		useClick(context, {
-			event: "mousedown",
-			toggle: !isNested,
-			ignoreMouse: isNested
-		}),
-		useRole(context, { role: "menu" }),
-		useDismiss(context, { bubbles: true }),
-		useListNavigation(context, {
-			listRef: elementsRef,
-			activeIndex,
-			nested: isNested,
-			onNavigate: setActiveIndex
-		}),
-		useTypeahead(context, {
-			listRef: labelsRef,
-			onMatch: isOpen ? setActiveIndex : void 0,
-			activeIndex
-		})
+		hover,
+		click,
+		role,
+		dismiss,
+		listNavigation,
+		typeahead
 	]);
 	useEffect(() => {
 		if (!tree) return;