@umodeapporg/ui 0.13.2 → 0.13.3

package/dist/components/UI/ControlledMenu.js

@@ -7,7 +7,7 @@ import { twMerge } from "tailwind-merge";
 import ControlledTooltip from "./ControlledTooltip.js";
 import { MaterialSymbol } from "./MaterialSymbol/index.js";
 import { composeRefs } from "../../helpers/composeRefs.js";
-import { isPressOnLayeredSurface } from "../../helpers/layeredSurfaces.js";
+import { LAYERED_SURFACE_ATTRIBUTE, isPressOnLayeredSurface } from "../../helpers/layeredSurfaces.js";
 import { getPortalHost } from "../../helpers/portalHost.js";
 import { useAnchoredFloating } from "../../hooks/useAnchoredFloating.js";
 import { floatingVariants } from "../../motion/motionPresets.js";
@@ -117,6 +117,7 @@ const ControlledMenuList = React.forwardRef(
           animate: "visible",
           exit: "exit",
           role: "menu",
+          ...LAYERED_SURFACE_ATTRIBUTE,
           ref: (node) => {
             setFloating(node);
             if (typeof forwardedRef === "function") forwardedRef(node);

package/dist/components/UI/ControlledMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlledMenu.js","sources":["../../../src/components/UI/ControlledMenu.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { createPortal } from 'react-dom';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { composeRefs } from '@/helpers/composeRefs';\nimport { isPressOnLayeredSurface } from '@/helpers/layeredSurfaces';\nimport { getPortalHost } from '@/helpers/portalHost';\nimport { TFloatingPlacement, useAnchoredFloating } from '@/hooks/useAnchoredFloating';\nimport { floatingVariants } from '@/motion';\n\nexport type TMenuPlacement = TFloatingPlacement;\nexport type TMenuItemTone = 'default' | 'danger';\n\nexport interface IMenuDismissConfig {\n  /** Closes the menu when an item is pressed. Multi-select surfaces pass false. */\n  itemPress?: boolean;\n  escapeKey?: boolean;\n  outsidePress?: boolean;\n}\n\nexport interface IControlledMenuItem {\n  key: string;\n  label: string;\n  icon?: SymbolCodepoints;\n  hint?: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  tone?: TMenuItemTone;\n}\n\ninterface IMenuContext {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  dismiss?: IMenuDismissConfig;\n  listId: string;\n  setReference: (node: HTMLElement | null) => void;\n  setFloating: (node: HTMLElement | null) => void;\n  floatingRef: React.MutableRefObject<HTMLElement | null>;\n  referenceRef: React.MutableRefObject<HTMLElement | null>;\n}\n\nconst MenuContext = createContext<IMenuContext | null>(null);\n\nconst useMenuContext = (): IMenuContext => {\n  const context = useContext(MenuContext);\n  if (!context) throw new Error('Menu parts must be rendered inside ControlledMenuRoot');\n  return context;\n};\n\ninterface IControlledMenuRootProps {\n  children: React.ReactNode;\n  open?: boolean;\n  handler?: (open: boolean) => void;\n  placement?: TMenuPlacement;\n  offsetPx?: number;\n  dismiss?: IMenuDismissConfig;\n  matchTriggerWidth?: boolean;\n}\n\nexport const ControlledMenuRoot: React.FC<IControlledMenuRootProps> = ({\n  children,\n  open,\n  handler,\n  placement = 'bottom-start',\n  offsetPx = 6,\n  dismiss,\n  matchTriggerWidth = false,\n}) => {\n  const listId = useId();\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n  const isControlled = open !== undefined;\n  const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      handler?.(next);\n    },\n    [isControlled, handler],\n  );\n\n  const { setReference, setFloating, floatingRef, referenceRef } = useAnchoredFloating({\n    open: isOpen,\n    placement,\n    offsetPx,\n    matchReferenceWidth: matchTriggerWidth,\n  });\n\n  const value = useMemo(\n    () => ({ open: isOpen, setOpen, dismiss, listId, setReference, setFloating, floatingRef, referenceRef }),\n    [isOpen, setOpen, dismiss, listId, setReference, setFloating, floatingRef, referenceRef],\n  );\n\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n};\n\ninterface IHandlerChildProps {\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * Repassa ao filho o que ele recebe de fora, além do que injeta.\n *\n * O gatilho é o alvo natural de um `ControlledTooltip`, e o tooltip se prende clonando o filho e\n * injetando `onPointerEnter`. Aceitando só `children`, este componente engolia essa injeção e o\n * tooltip simplesmente nunca abria, mesmo com a ordem que a documentação manda usar\n * (tooltip POR FORA do handler). Os `onClick` são encadeados: o de fora roda antes de abrir.\n */\nexport const ControlledMenuHandler = React.forwardRef<\n  HTMLElement,\n  {\n    children: React.ReactNode;\n    /**\n     * Leaves the popup ARIA to the child: set it when the real trigger is an element INSIDE the\n     * child that owns its own role (the select's combobox input), so the wrapper does not\n     * claim `aria-haspopup=\"menu\"` for a listbox.\n     */\n    skipTriggerAria?: boolean;\n  } & React.HTMLAttributes<HTMLElement>\n>(({ children, onClick: onOuterClick, skipTriggerAria = false, ...rest }, forwardedRef) => {\n  const { open, setOpen, setReference, listId } = useMenuContext();\n\n  if (!isValidElement(children)) return <>{children}</>;\n\n  const child = children as React.ReactElement<IHandlerChildProps>;\n  const triggerAria = skipTriggerAria\n    ? {}\n    : { 'aria-haspopup': 'menu', 'aria-expanded': open, 'aria-controls': open ? listId : undefined };\n\n  return cloneElement(child, {\n    ...rest,\n    ref: composeRefs<HTMLElement>(setReference, forwardedRef, (child as { ref?: React.Ref<HTMLElement> }).ref),\n    ...triggerAria,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      onOuterClick?.(event);\n      child.props.onClick?.(event);\n      setOpen(!open);\n    },\n  } as IHandlerChildProps);\n});\n\nControlledMenuHandler.displayName = 'ControlledMenuHandler';\n\ninterface IControlledMenuListProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'className' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'\n> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst FOCUSABLE_ITEM_SELECTOR = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\nexport const ControlledMenuList = React.forwardRef<HTMLDivElement, IControlledMenuListProps>(\n  ({ children, className, onClick, onKeyDown, ...rest }, forwardedRef) => {\n    const { open, setOpen, dismiss, listId, setFloating, floatingRef, referenceRef } = useMenuContext();\n\n    useEffect(() => {\n      if (!open) return undefined;\n\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || dismiss?.escapeKey === false) return;\n        setOpen(false);\n      };\n\n      const handlePointerDown = (event: PointerEvent) => {\n        if (dismiss?.outsidePress === false) return;\n        const target = event.target as Node | null;\n        if (!target) return;\n        if (floatingRef.current?.contains(target) || referenceRef.current?.contains(target)) return;\n        if (isPressOnLayeredSurface(target, floatingRef.current)) return;\n        setOpen(false);\n      };\n\n      document.addEventListener('keydown', handleKeyDown);\n      document.addEventListener('pointerdown', handlePointerDown, true);\n\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown);\n        document.removeEventListener('pointerdown', handlePointerDown, true);\n      };\n    }, [open, setOpen, dismiss, floatingRef, referenceRef]);\n\n    const handleListKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;\n\n      const list = floatingRef.current;\n      if (!list) return;\n\n      const items = Array.from(list.querySelectorAll<HTMLElement>(FOCUSABLE_ITEM_SELECTOR));\n      if (items.length === 0) return;\n\n      event.preventDefault();\n      const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n      const step = event.key === 'ArrowDown' ? 1 : -1;\n      const nextIndex = currentIndex < 0 ? 0 : (currentIndex + step + items.length) % items.length;\n      items[nextIndex]?.focus();\n    };\n\n    const portalHost = getPortalHost();\n    if (portalHost === null) return null;\n\n    return createPortal(\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            key=\"menu-list\"\n            id={listId}\n            variants={floatingVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            role=\"menu\"\n            ref={(node) => {\n              setFloating(node);\n              if (typeof forwardedRef === 'function') forwardedRef(node);\n              else if (forwardedRef) forwardedRef.current = node;\n            }}\n            onKeyDown={handleListKeyDown}\n            onClick={(event) => {\n              onClick?.(event);\n              if (dismiss?.itemPress === false) return;\n              const target = event.target as HTMLElement | null;\n              if (target?.closest('[role=\"menuitem\"]')) setOpen(false);\n            }}\n            {...rest}\n            className={twMerge(\n              'fixed left-0 top-0 z-[9999] min-w-44 overflow-auto rounded-lg border border-border p-1 text-sm text-foreground glass',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>,\n      portalHost,\n    );\n  },\n);\n\nControlledMenuList.displayName = 'ControlledMenuList';\n\ninterface IControlledMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n}\n\nexport const ControlledMenuItem: React.FC<IControlledMenuItemProps> = ({\n  children,\n  className,\n  disabled = false,\n  onClick,\n  ...rest\n}) => (\n  <div\n    role=\"menuitem\"\n    tabIndex={disabled ? -1 : 0}\n    aria-disabled={disabled || undefined}\n    onClick={disabled ? undefined : onClick}\n    onKeyDown={(event) => {\n      if (disabled) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      (event.currentTarget as HTMLElement).click();\n    }}\n    {...rest}\n    className={twMerge(\n      classNames(\n        'flex w-full cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm outline-none',\n        'transition-colors hover:bg-muted-hover focus:bg-muted-hover',\n        { 'pointer-events-none opacity-50': disabled },\n      ),\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\ninterface IControlledMenuProps {\n  trigger: React.ReactNode;\n  items?: Array<IControlledMenuItem>;\n  children?: React.ReactNode;\n  triggerTooltip?: string;\n  placement?: TMenuPlacement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  dismissOnItemClick?: boolean;\n  listClassName?: string;\n  tooltipClassName?: string;\n  listRef?: React.Ref<HTMLDivElement>;\n}\n\nconst ITEM_TONE_CLASS: Record<TMenuItemTone, string> = {\n  default: 'text-foreground-muted',\n  danger: 'text-danger-emphasis',\n};\n\nconst ICON_TONE_CLASS: Record<TMenuItemTone, string> = {\n  default: 'text-foreground-subtle',\n  danger: 'text-danger-emphasis',\n};\n\n/**\n * A tooltip on the trigger must sit OUTSIDE the handler: the handler clones its child to\n * inject the click handler and the reference ref, and a tooltip in that position swallows\n * both, so the menu stops opening.\n */\nconst ControlledMenu: React.FC<IControlledMenuProps> = ({\n  trigger,\n  items,\n  children,\n  triggerTooltip,\n  placement = 'bottom-start',\n  open,\n  onOpenChange,\n  disabled = false,\n  dismissOnItemClick = true,\n  listClassName,\n  tooltipClassName,\n  listRef,\n}) => {\n  const menuItems = useMemo(() => (Array.isArray(items) ? items : []), [items]);\n  const dismiss = useMemo(() => ({ itemPress: dismissOnItemClick }), [dismissOnItemClick]);\n  const handle = <ControlledMenuHandler>{trigger}</ControlledMenuHandler>;\n\n  if (disabled) return <>{trigger}</>;\n\n  return (\n    <ControlledMenuRoot open={open} handler={onOpenChange} placement={placement} dismiss={dismiss}>\n      {triggerTooltip ? (\n        <ControlledTooltip content={triggerTooltip} className={tooltipClassName}>\n          {handle}\n        </ControlledTooltip>\n      ) : (\n        handle\n      )}\n\n      <ControlledMenuList ref={listRef} className={listClassName}>\n        {children ??\n          menuItems.map((item) => {\n            const tone = item.tone ?? 'default';\n\n            return (\n              <ControlledMenuItem\n                key={item.key}\n                disabled={item.disabled}\n                onClick={item.onClick}\n                className={classNames('items-start gap-x-2', ITEM_TONE_CLASS[tone])}\n              >\n                {item.icon && <MaterialSymbol icon={item.icon} size={16} className={ICON_TONE_CLASS[tone]} />}\n\n                <span className=\"flex flex-col items-start gap-y-0.5\">\n                  <span>{item.label}</span>\n                  {item.hint && <span className=\"text-xs text-foreground-subtle\">{item.hint}</span>}\n                </span>\n              </ControlledMenuItem>\n            );\n          })}\n      </ControlledMenuList>\n    </ControlledMenuRoot>\n  );\n};\n\nexport default ControlledMenu;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ControlledMenu.js","sources":["../../../src/components/UI/ControlledMenu.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { createPortal } from 'react-dom';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { composeRefs } from '@/helpers/composeRefs';\nimport { isPressOnLayeredSurface, LAYERED_SURFACE_ATTRIBUTE } from '@/helpers/layeredSurfaces';\nimport { getPortalHost } from '@/helpers/portalHost';\nimport { TFloatingPlacement, useAnchoredFloating } from '@/hooks/useAnchoredFloating';\nimport { floatingVariants } from '@/motion';\n\nexport type TMenuPlacement = TFloatingPlacement;\nexport type TMenuItemTone = 'default' | 'danger';\n\nexport interface IMenuDismissConfig {\n  /** Closes the menu when an item is pressed. Multi-select surfaces pass false. */\n  itemPress?: boolean;\n  escapeKey?: boolean;\n  outsidePress?: boolean;\n}\n\nexport interface IControlledMenuItem {\n  key: string;\n  label: string;\n  icon?: SymbolCodepoints;\n  hint?: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  tone?: TMenuItemTone;\n}\n\ninterface IMenuContext {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  dismiss?: IMenuDismissConfig;\n  listId: string;\n  setReference: (node: HTMLElement | null) => void;\n  setFloating: (node: HTMLElement | null) => void;\n  floatingRef: React.MutableRefObject<HTMLElement | null>;\n  referenceRef: React.MutableRefObject<HTMLElement | null>;\n}\n\nconst MenuContext = createContext<IMenuContext | null>(null);\n\nconst useMenuContext = (): IMenuContext => {\n  const context = useContext(MenuContext);\n  if (!context) throw new Error('Menu parts must be rendered inside ControlledMenuRoot');\n  return context;\n};\n\ninterface IControlledMenuRootProps {\n  children: React.ReactNode;\n  open?: boolean;\n  handler?: (open: boolean) => void;\n  placement?: TMenuPlacement;\n  offsetPx?: number;\n  dismiss?: IMenuDismissConfig;\n  matchTriggerWidth?: boolean;\n}\n\nexport const ControlledMenuRoot: React.FC<IControlledMenuRootProps> = ({\n  children,\n  open,\n  handler,\n  placement = 'bottom-start',\n  offsetPx = 6,\n  dismiss,\n  matchTriggerWidth = false,\n}) => {\n  const listId = useId();\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n  const isControlled = open !== undefined;\n  const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      handler?.(next);\n    },\n    [isControlled, handler],\n  );\n\n  const { setReference, setFloating, floatingRef, referenceRef } = useAnchoredFloating({\n    open: isOpen,\n    placement,\n    offsetPx,\n    matchReferenceWidth: matchTriggerWidth,\n  });\n\n  const value = useMemo(\n    () => ({ open: isOpen, setOpen, dismiss, listId, setReference, setFloating, floatingRef, referenceRef }),\n    [isOpen, setOpen, dismiss, listId, setReference, setFloating, floatingRef, referenceRef],\n  );\n\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n};\n\ninterface IHandlerChildProps {\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * Repassa ao filho o que ele recebe de fora, além do que injeta.\n *\n * O gatilho é o alvo natural de um `ControlledTooltip`, e o tooltip se prende clonando o filho e\n * injetando `onPointerEnter`. Aceitando só `children`, este componente engolia essa injeção e o\n * tooltip simplesmente nunca abria, mesmo com a ordem que a documentação manda usar\n * (tooltip POR FORA do handler). Os `onClick` são encadeados: o de fora roda antes de abrir.\n */\nexport const ControlledMenuHandler = React.forwardRef<\n  HTMLElement,\n  {\n    children: React.ReactNode;\n    /**\n     * Leaves the popup ARIA to the child: set it when the real trigger is an element INSIDE the\n     * child that owns its own role (the select's combobox input), so the wrapper does not\n     * claim `aria-haspopup=\"menu\"` for a listbox.\n     */\n    skipTriggerAria?: boolean;\n  } & React.HTMLAttributes<HTMLElement>\n>(({ children, onClick: onOuterClick, skipTriggerAria = false, ...rest }, forwardedRef) => {\n  const { open, setOpen, setReference, listId } = useMenuContext();\n\n  if (!isValidElement(children)) return <>{children}</>;\n\n  const child = children as React.ReactElement<IHandlerChildProps>;\n  const triggerAria = skipTriggerAria\n    ? {}\n    : { 'aria-haspopup': 'menu', 'aria-expanded': open, 'aria-controls': open ? listId : undefined };\n\n  return cloneElement(child, {\n    ...rest,\n    ref: composeRefs<HTMLElement>(setReference, forwardedRef, (child as { ref?: React.Ref<HTMLElement> }).ref),\n    ...triggerAria,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      onOuterClick?.(event);\n      child.props.onClick?.(event);\n      setOpen(!open);\n    },\n  } as IHandlerChildProps);\n});\n\nControlledMenuHandler.displayName = 'ControlledMenuHandler';\n\ninterface IControlledMenuListProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'className' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'\n> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst FOCUSABLE_ITEM_SELECTOR = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\nexport const ControlledMenuList = React.forwardRef<HTMLDivElement, IControlledMenuListProps>(\n  ({ children, className, onClick, onKeyDown, ...rest }, forwardedRef) => {\n    const { open, setOpen, dismiss, listId, setFloating, floatingRef, referenceRef } = useMenuContext();\n\n    useEffect(() => {\n      if (!open) return undefined;\n\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || dismiss?.escapeKey === false) return;\n        setOpen(false);\n      };\n\n      const handlePointerDown = (event: PointerEvent) => {\n        if (dismiss?.outsidePress === false) return;\n        const target = event.target as Node | null;\n        if (!target) return;\n        if (floatingRef.current?.contains(target) || referenceRef.current?.contains(target)) return;\n        if (isPressOnLayeredSurface(target, floatingRef.current)) return;\n        setOpen(false);\n      };\n\n      document.addEventListener('keydown', handleKeyDown);\n      document.addEventListener('pointerdown', handlePointerDown, true);\n\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown);\n        document.removeEventListener('pointerdown', handlePointerDown, true);\n      };\n    }, [open, setOpen, dismiss, floatingRef, referenceRef]);\n\n    const handleListKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;\n\n      const list = floatingRef.current;\n      if (!list) return;\n\n      const items = Array.from(list.querySelectorAll<HTMLElement>(FOCUSABLE_ITEM_SELECTOR));\n      if (items.length === 0) return;\n\n      event.preventDefault();\n      const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n      const step = event.key === 'ArrowDown' ? 1 : -1;\n      const nextIndex = currentIndex < 0 ? 0 : (currentIndex + step + items.length) % items.length;\n      items[nextIndex]?.focus();\n    };\n\n    const portalHost = getPortalHost();\n    if (portalHost === null) return null;\n\n    return createPortal(\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            key=\"menu-list\"\n            id={listId}\n            variants={floatingVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            role=\"menu\"\n            {...LAYERED_SURFACE_ATTRIBUTE}\n            ref={(node) => {\n              setFloating(node);\n              if (typeof forwardedRef === 'function') forwardedRef(node);\n              else if (forwardedRef) forwardedRef.current = node;\n            }}\n            onKeyDown={handleListKeyDown}\n            onClick={(event) => {\n              onClick?.(event);\n              if (dismiss?.itemPress === false) return;\n              const target = event.target as HTMLElement | null;\n              if (target?.closest('[role=\"menuitem\"]')) setOpen(false);\n            }}\n            {...rest}\n            className={twMerge(\n              'fixed left-0 top-0 z-[9999] min-w-44 overflow-auto rounded-lg border border-border p-1 text-sm text-foreground glass',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>,\n      portalHost,\n    );\n  },\n);\n\nControlledMenuList.displayName = 'ControlledMenuList';\n\ninterface IControlledMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n}\n\nexport const ControlledMenuItem: React.FC<IControlledMenuItemProps> = ({\n  children,\n  className,\n  disabled = false,\n  onClick,\n  ...rest\n}) => (\n  <div\n    role=\"menuitem\"\n    tabIndex={disabled ? -1 : 0}\n    aria-disabled={disabled || undefined}\n    onClick={disabled ? undefined : onClick}\n    onKeyDown={(event) => {\n      if (disabled) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      (event.currentTarget as HTMLElement).click();\n    }}\n    {...rest}\n    className={twMerge(\n      classNames(\n        'flex w-full cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm outline-none',\n        'transition-colors hover:bg-muted-hover focus:bg-muted-hover',\n        { 'pointer-events-none opacity-50': disabled },\n      ),\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\ninterface IControlledMenuProps {\n  trigger: React.ReactNode;\n  items?: Array<IControlledMenuItem>;\n  children?: React.ReactNode;\n  triggerTooltip?: string;\n  placement?: TMenuPlacement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  dismissOnItemClick?: boolean;\n  listClassName?: string;\n  tooltipClassName?: string;\n  listRef?: React.Ref<HTMLDivElement>;\n}\n\nconst ITEM_TONE_CLASS: Record<TMenuItemTone, string> = {\n  default: 'text-foreground-muted',\n  danger: 'text-danger-emphasis',\n};\n\nconst ICON_TONE_CLASS: Record<TMenuItemTone, string> = {\n  default: 'text-foreground-subtle',\n  danger: 'text-danger-emphasis',\n};\n\n/**\n * A tooltip on the trigger must sit OUTSIDE the handler: the handler clones its child to\n * inject the click handler and the reference ref, and a tooltip in that position swallows\n * both, so the menu stops opening.\n */\nconst ControlledMenu: React.FC<IControlledMenuProps> = ({\n  trigger,\n  items,\n  children,\n  triggerTooltip,\n  placement = 'bottom-start',\n  open,\n  onOpenChange,\n  disabled = false,\n  dismissOnItemClick = true,\n  listClassName,\n  tooltipClassName,\n  listRef,\n}) => {\n  const menuItems = useMemo(() => (Array.isArray(items) ? items : []), [items]);\n  const dismiss = useMemo(() => ({ itemPress: dismissOnItemClick }), [dismissOnItemClick]);\n  const handle = <ControlledMenuHandler>{trigger}</ControlledMenuHandler>;\n\n  if (disabled) return <>{trigger}</>;\n\n  return (\n    <ControlledMenuRoot open={open} handler={onOpenChange} placement={placement} dismiss={dismiss}>\n      {triggerTooltip ? (\n        <ControlledTooltip content={triggerTooltip} className={tooltipClassName}>\n          {handle}\n        </ControlledTooltip>\n      ) : (\n        handle\n      )}\n\n      <ControlledMenuList ref={listRef} className={listClassName}>\n        {children ??\n          menuItems.map((item) => {\n            const tone = item.tone ?? 'default';\n\n            return (\n              <ControlledMenuItem\n                key={item.key}\n                disabled={item.disabled}\n                onClick={item.onClick}\n                className={classNames('items-start gap-x-2', ITEM_TONE_CLASS[tone])}\n              >\n                {item.icon && <MaterialSymbol icon={item.icon} size={16} className={ICON_TONE_CLASS[tone]} />}\n\n                <span className=\"flex flex-col items-start gap-y-0.5\">\n                  <span>{item.label}</span>\n                  {item.hint && <span className=\"text-xs text-foreground-subtle\">{item.hint}</span>}\n                </span>\n              </ControlledMenuItem>\n            );\n          })}\n      </ControlledMenuList>\n    </ControlledMenuRoot>\n  );\n};\n\nexport default ControlledMenu;\n"],"names":[],"mappings":"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"}

package/dist/helpers/layeredSurfaces.d.ts

@@ -1,3 +1,21 @@
+/**
+ * Surfaces that portal to `document.body`: they land OUTSIDE their opener in the DOM while
+ * sitting visually ON TOP of it.
+ *
+ * A dismissible surface (drawer, popover, menu) must not read a press on one of these as
+ * "the user clicked outside, close me". Confirming a dialog or picking from a select's
+ * listbox is layered work happening ABOVE the surface, not a dismissal of it.
+ *
+ * A floating panel also carries `data-layered-surface`, whatever `role` its consumer gives it:
+ * the select renders its menu panel as `role="presentation"` (the real `role="listbox"` is the
+ * options container inside it), so a role-only selector missed the search field sitting in that
+ * panel and read a press on it as a press outside.
+ */
+export declare const LAYERED_SURFACE_DATA_ATTRIBUTE = "data-layered-surface";
+export declare const LAYERED_SURFACE_ATTRIBUTE: {
+    readonly "data-layered-surface": "";
+};
+export declare const LAYERED_SURFACE_SELECTOR = "[role=\"dialog\"],[role=\"menu\"],[role=\"tooltip\"],[role=\"listbox\"],[data-layered-surface]";
 /**
  * Whether the press landed on a surface stacked ABOVE `currentSurface`.
  *

package/dist/helpers/layeredSurfaces.js

@@ -1,4 +1,6 @@
-const LAYERED_SURFACE_SELECTOR = '[role="dialog"],[role="menu"],[role="tooltip"],[role="listbox"]';
+const LAYERED_SURFACE_DATA_ATTRIBUTE = "data-layered-surface";
+const LAYERED_SURFACE_ATTRIBUTE = { [LAYERED_SURFACE_DATA_ATTRIBUTE]: "" };
+const LAYERED_SURFACE_SELECTOR = `[role="dialog"],[role="menu"],[role="tooltip"],[role="listbox"],[${LAYERED_SURFACE_DATA_ATTRIBUTE}]`;
 const ALWAYS_ON_TOP_SELECTOR = ".Toastify";
 const isPressOnLayeredSurface = (target, currentSurface) => {
   if (!(target instanceof Element)) return false;
@@ -9,6 +11,9 @@ const isPressOnLayeredSurface = (target, currentSurface) => {
   return Boolean(currentSurface.compareDocumentPosition(pressed) & Node.DOCUMENT_POSITION_FOLLOWING);
 };
 export {
+  LAYERED_SURFACE_ATTRIBUTE,
+  LAYERED_SURFACE_DATA_ATTRIBUTE,
+  LAYERED_SURFACE_SELECTOR,
   isPressOnLayeredSurface
 };
 //# sourceMappingURL=layeredSurfaces.js.map

package/dist/helpers/layeredSurfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"layeredSurfaces.js","sources":["../../src/helpers/layeredSurfaces.ts"],"sourcesContent":["/**\n * Surfaces that portal to `document.body`: they land OUTSIDE their opener in the DOM while\n * sitting visually ON TOP of it.\n *\n * A dismissible surface (drawer, popover, menu) must not read a press on one of these as\n * \"the user clicked outside, close me\". Confirming a dialog or picking from a select's\n * listbox is layered work happening ABOVE the surface, not a dismissal of it.\n */\nconst LAYERED_SURFACE_SELECTOR = '[role=\"dialog\"],[role=\"menu\"],[role=\"tooltip\"],[role=\"listbox\"]';\n\n/**\n * Superfícies que estão acima de TUDO por construção, e não por posição no documento.\n *\n * O toast é o caso: ele vive num container próprio montado no topo da árvore do app, com\n * z-index máximo, e não é portado junto das outras superfícies. Então a comparação por ordem no\n * documento diz que ele vem ANTES de um drawer portado para o fim do `body`, e o drawer conclui\n * que o clique foi \"fora, feche-me\". Era isso que fazia o X do toast fechar o drawer do produto\n * junto com a notificação.\n *\n * Um toast nunca é dismissal de nada: ele aparece por conta própria, sobre o que estiver aberto.\n */\nconst ALWAYS_ON_TOP_SELECTOR = '.Toastify';\n\n/**\n * Whether the press landed on a surface stacked ABOVE `currentSurface`.\n *\n * The direction matters and checking only \"is it a layered surface\" is wrong: a select\n * opened inside a drawer sits above a panel that is itself `role=\"dialog\"`, so a press\n * anywhere in that drawer would look layered and the select would never close. Every one of\n * these surfaces portals to `document.body`, so the one appended LATER is the one painted on\n * top: document order is the stacking order.\n */\nexport const isPressOnLayeredSurface = (target: EventTarget | null, currentSurface?: Element | null): boolean => {\n  if (!(target instanceof Element)) return false;\n  if (target.closest(ALWAYS_ON_TOP_SELECTOR)) return true;\n\n  const pressed = target.closest(LAYERED_SURFACE_SELECTOR);\n  if (!pressed) return false;\n  if (!currentSurface || pressed === currentSurface) return false;\n\n  return Boolean(currentSurface.compareDocumentPosition(pressed) & Node.DOCUMENT_POSITION_FOLLOWING);\n};\n"],"names":[],"mappings":"AAQA,MAAM,2BAA2B;AAajC,MAAM,yBAAyB;AAWxB,MAAM,0BAA0B,CAAC,QAA4B,mBAA6C;AAC/G,MAAI,EAAE,kBAAkB,SAAU,QAAO;AACzC,MAAI,OAAO,QAAQ,sBAAsB,EAAG,QAAO;AAEnD,QAAM,UAAU,OAAO,QAAQ,wBAAwB;AACvD,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,CAAC,kBAAkB,YAAY,eAAgB,QAAO;AAE1D,SAAO,QAAQ,eAAe,wBAAwB,OAAO,IAAI,KAAK,2BAA2B;AACnG;"}
+{"version":3,"file":"layeredSurfaces.js","sources":["../../src/helpers/layeredSurfaces.ts"],"sourcesContent":["/**\n * Surfaces that portal to `document.body`: they land OUTSIDE their opener in the DOM while\n * sitting visually ON TOP of it.\n *\n * A dismissible surface (drawer, popover, menu) must not read a press on one of these as\n * \"the user clicked outside, close me\". Confirming a dialog or picking from a select's\n * listbox is layered work happening ABOVE the surface, not a dismissal of it.\n *\n * A floating panel also carries `data-layered-surface`, whatever `role` its consumer gives it:\n * the select renders its menu panel as `role=\"presentation\"` (the real `role=\"listbox\"` is the\n * options container inside it), so a role-only selector missed the search field sitting in that\n * panel and read a press on it as a press outside.\n */\nexport const LAYERED_SURFACE_DATA_ATTRIBUTE = 'data-layered-surface';\nexport const LAYERED_SURFACE_ATTRIBUTE = { [LAYERED_SURFACE_DATA_ATTRIBUTE]: '' } as const;\n\nexport const LAYERED_SURFACE_SELECTOR = `[role=\"dialog\"],[role=\"menu\"],[role=\"tooltip\"],[role=\"listbox\"],[${LAYERED_SURFACE_DATA_ATTRIBUTE}]`;\n\n/**\n * Superfícies que estão acima de TUDO por construção, e não por posição no documento.\n *\n * O toast é o caso: ele vive num container próprio montado no topo da árvore do app, com\n * z-index máximo, e não é portado junto das outras superfícies. Então a comparação por ordem no\n * documento diz que ele vem ANTES de um drawer portado para o fim do `body`, e o drawer conclui\n * que o clique foi \"fora, feche-me\". Era isso que fazia o X do toast fechar o drawer do produto\n * junto com a notificação.\n *\n * Um toast nunca é dismissal de nada: ele aparece por conta própria, sobre o que estiver aberto.\n */\nconst ALWAYS_ON_TOP_SELECTOR = '.Toastify';\n\n/**\n * Whether the press landed on a surface stacked ABOVE `currentSurface`.\n *\n * The direction matters and checking only \"is it a layered surface\" is wrong: a select\n * opened inside a drawer sits above a panel that is itself `role=\"dialog\"`, so a press\n * anywhere in that drawer would look layered and the select would never close. Every one of\n * these surfaces portals to `document.body`, so the one appended LATER is the one painted on\n * top: document order is the stacking order.\n */\nexport const isPressOnLayeredSurface = (target: EventTarget | null, currentSurface?: Element | null): boolean => {\n  if (!(target instanceof Element)) return false;\n  if (target.closest(ALWAYS_ON_TOP_SELECTOR)) return true;\n\n  const pressed = target.closest(LAYERED_SURFACE_SELECTOR);\n  if (!pressed) return false;\n  if (!currentSurface || pressed === currentSurface) return false;\n\n  return Boolean(currentSurface.compareDocumentPosition(pressed) & Node.DOCUMENT_POSITION_FOLLOWING);\n};\n"],"names":[],"mappings":"AAaO,MAAM,iCAAiC;AACvC,MAAM,4BAA4B,EAAE,CAAC,8BAA8B,GAAG,GAAA;AAEtE,MAAM,2BAA2B,oEAAoE,8BAA8B;AAa1I,MAAM,yBAAyB;AAWxB,MAAM,0BAA0B,CAAC,QAA4B,mBAA6C;AAC/G,MAAI,EAAE,kBAAkB,SAAU,QAAO;AACzC,MAAI,OAAO,QAAQ,sBAAsB,EAAG,QAAO;AAEnD,QAAM,UAAU,OAAO,QAAQ,wBAAwB;AACvD,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,CAAC,kBAAkB,YAAY,eAAgB,QAAO;AAE1D,SAAO,QAAQ,eAAe,wBAAwB,OAAO,IAAI,KAAK,2BAA2B;AACnG;"}

package/dist/hooks/useInlineEditor.js

@@ -1,4 +1,5 @@
 import { useRef, useEffect } from "react";
+import { LAYERED_SURFACE_SELECTOR } from "../helpers/layeredSurfaces.js";
 const commitActiveElement = (container) => {
   const active = document.activeElement;
   if (active instanceof HTMLElement && container?.contains(active)) active.blur();
@@ -15,7 +16,7 @@ const useInlineEditor = (active, onStopEdit, onNavigate) => {
     const handlePointerDown = (event) => {
       const target = event.target instanceof Element ? event.target : null;
       if (!target || containerRef.current?.contains(target)) return;
-      if (target.closest('[role="menu"], [role="listbox"]')) return;
+      if (target.closest(LAYERED_SURFACE_SELECTOR)) return;
       commitActiveElement(containerRef.current);
       onStopEdit();
     };

package/dist/hooks/useInlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInlineEditor.js","sources":["../../src/hooks/useInlineEditor.ts"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\n// Persiste editores que salvam no blur (ex.: ProductDataSheetField) antes do\n// container desmontar ao navegar/fechar.\nconst commitActiveElement = (container: HTMLElement | null) => {\n  const active = document.activeElement;\n  if (active instanceof HTMLElement && container?.contains(active)) active.blur();\n};\n\n// Wiring compartilhado dos editores inline: foca o primeiro controle ao abrir,\n// fecha no clique fora e navega entre campos editáveis com Tab / Shift+Tab.\nexport const useInlineEditor = (active: boolean, onStopEdit: () => void, onNavigate: (direction: 1 | -1) => void) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!active) return;\n    const focusable = containerRef.current?.querySelector<HTMLElement>('input, textarea, select, button, [tabindex]');\n    focusable?.focus();\n  }, [active]);\n\n  useEffect(() => {\n    if (!active) return undefined;\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target instanceof Element ? event.target : null;\n      if (!target || containerRef.current?.contains(target)) return;\n      // Menus dos selects renderizam em portal fora do container; interagir\n      // com eles não encerra a edição.\n      if (target.closest('[role=\"menu\"], [role=\"listbox\"]')) return;\n      commitActiveElement(containerRef.current);\n      onStopEdit();\n    };\n\n    document.addEventListener('pointerdown', handlePointerDown);\n    return () => document.removeEventListener('pointerdown', handlePointerDown);\n  }, [active, onStopEdit]);\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      event.preventDefault();\n      commitActiveElement(containerRef.current);\n      onNavigate(event.shiftKey ? -1 : 1);\n    } else if (event.key === 'Escape') {\n      event.stopPropagation();\n      commitActiveElement(containerRef.current);\n      onStopEdit();\n    }\n  };\n\n  return { containerRef, handleKeyDown };\n};\n"],"names":[],"mappings":";AAIA,MAAM,sBAAsB,CAAC,cAAkC;AAC7D,QAAM,SAAS,SAAS;AACxB,MAAI,kBAAkB,eAAe,WAAW,SAAS,MAAM,UAAU,KAAA;AAC3E;AAIO,MAAM,kBAAkB,CAAC,QAAiB,YAAwB,eAA4C;AACnH,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,aAAa,SAAS,cAA2B,6CAA6C;AAChH,eAAW,MAAA;AAAA,EACb,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ,QAAO;AAEpB,UAAM,oBAAoB,CAAC,UAAwB;AACjD,YAAM,SAAS,MAAM,kBAAkB,UAAU,MAAM,SAAS;AAChE,UAAI,CAAC,UAAU,aAAa,SAAS,SAAS,MAAM,EAAG;AAGvD,UAAI,OAAO,QAAQ,iCAAiC,EAAG;AACvD,0BAAoB,aAAa,OAAO;AACxC,iBAAA;AAAA,IACF;AAEA,aAAS,iBAAiB,eAAe,iBAAiB;AAC1D,WAAO,MAAM,SAAS,oBAAoB,eAAe,iBAAiB;AAAA,EAC5E,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,QAAQ,OAAO;AACvB,YAAM,eAAA;AACN,0BAAoB,aAAa,OAAO;AACxC,iBAAW,MAAM,WAAW,KAAK,CAAC;AAAA,IACpC,WAAW,MAAM,QAAQ,UAAU;AACjC,YAAM,gBAAA;AACN,0BAAoB,aAAa,OAAO;AACxC,iBAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,cAAc,cAAA;AACzB;"}
+{"version":3,"file":"useInlineEditor.js","sources":["../../src/hooks/useInlineEditor.ts"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { LAYERED_SURFACE_SELECTOR } from '@/helpers/layeredSurfaces';\n\n// Persiste editores que salvam no blur (ex.: ProductDataSheetField) antes do\n// container desmontar ao navegar/fechar.\nconst commitActiveElement = (container: HTMLElement | null) => {\n  const active = document.activeElement;\n  if (active instanceof HTMLElement && container?.contains(active)) active.blur();\n};\n\n// Wiring compartilhado dos editores inline: foca o primeiro controle ao abrir,\n// fecha no clique fora e navega entre campos editáveis com Tab / Shift+Tab.\nexport const useInlineEditor = (active: boolean, onStopEdit: () => void, onNavigate: (direction: 1 | -1) => void) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!active) return;\n    const focusable = containerRef.current?.querySelector<HTMLElement>('input, textarea, select, button, [tabindex]');\n    focusable?.focus();\n  }, [active]);\n\n  useEffect(() => {\n    if (!active) return undefined;\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target instanceof Element ? event.target : null;\n      if (!target || containerRef.current?.contains(target)) return;\n      // Select menus portal outside the container; interacting with them (including the search\n      // field, which sits in the panel but outside the listbox) does not end the edit.\n      if (target.closest(LAYERED_SURFACE_SELECTOR)) return;\n      commitActiveElement(containerRef.current);\n      onStopEdit();\n    };\n\n    document.addEventListener('pointerdown', handlePointerDown);\n    return () => document.removeEventListener('pointerdown', handlePointerDown);\n  }, [active, onStopEdit]);\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      event.preventDefault();\n      commitActiveElement(containerRef.current);\n      onNavigate(event.shiftKey ? -1 : 1);\n    } else if (event.key === 'Escape') {\n      event.stopPropagation();\n      commitActiveElement(containerRef.current);\n      onStopEdit();\n    }\n  };\n\n  return { containerRef, handleKeyDown };\n};\n"],"names":[],"mappings":";;AAMA,MAAM,sBAAsB,CAAC,cAAkC;AAC7D,QAAM,SAAS,SAAS;AACxB,MAAI,kBAAkB,eAAe,WAAW,SAAS,MAAM,UAAU,KAAA;AAC3E;AAIO,MAAM,kBAAkB,CAAC,QAAiB,YAAwB,eAA4C;AACnH,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,aAAa,SAAS,cAA2B,6CAA6C;AAChH,eAAW,MAAA;AAAA,EACb,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ,QAAO;AAEpB,UAAM,oBAAoB,CAAC,UAAwB;AACjD,YAAM,SAAS,MAAM,kBAAkB,UAAU,MAAM,SAAS;AAChE,UAAI,CAAC,UAAU,aAAa,SAAS,SAAS,MAAM,EAAG;AAGvD,UAAI,OAAO,QAAQ,wBAAwB,EAAG;AAC9C,0BAAoB,aAAa,OAAO;AACxC,iBAAA;AAAA,IACF;AAEA,aAAS,iBAAiB,eAAe,iBAAiB;AAC1D,WAAO,MAAM,SAAS,oBAAoB,eAAe,iBAAiB;AAAA,EAC5E,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,QAAQ,OAAO;AACvB,YAAM,eAAA;AACN,0BAAoB,aAAa,OAAO;AACxC,iBAAW,MAAM,WAAW,KAAK,CAAC;AAAA,IACpC,WAAW,MAAM,QAAQ,UAAU;AACjC,YAAM,gBAAA;AACN,0BAAoB,aAAa,OAAO;AACxC,iBAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,cAAc,cAAA;AACzB;"}

package/dist/index.js

@@ -42,7 +42,7 @@ import { default as default36 } from "./components/UI/NoDataFound/index.js";
 import { default as default37 } from "./components/UI/SkeletonLoading.js";
 import { default as default38 } from "./components/UI/UserMenu.js";
 import { composeRefs } from "./helpers/composeRefs.js";
-import { isPressOnLayeredSurface } from "./helpers/layeredSurfaces.js";
+import { LAYERED_SURFACE_ATTRIBUTE, LAYERED_SURFACE_DATA_ATTRIBUTE, LAYERED_SURFACE_SELECTOR, isPressOnLayeredSurface } from "./helpers/layeredSurfaces.js";
 import { readThemeToken, useThemeChartTokens } from "./helpers/themeTokens.js";
 import { configureUiLogger, uiLogger } from "./helpers/uiLogger.js";
 import { configureUiPreferences, readUiPreference, resolveUiPreferenceScopeId, writeUiPreference } from "./helpers/uiPreferences.js";
@@ -86,6 +86,9 @@ export {
   default33 as CustomCard,
   default14 as ErrorPage,
   default34 as InformationCard,
+  LAYERED_SURFACE_ATTRIBUTE,
+  LAYERED_SURFACE_DATA_ATTRIBUTE,
+  LAYERED_SURFACE_SELECTOR,
   default15 as LinkButton,
   default35 as LoadingSpinner,
   MOTION_OFFSET_PX,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umodeapporg/ui",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [