@solibo/solibo-ui 1.1.3 → 1.1.5

package/dist/components/controls/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.variant === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      data-adaptive={adaptive ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.intent === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      data-adaptive={adaptive ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","intent","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}

package/dist/components/controls/index.js

@@ -14,8 +14,7 @@ import '../../assets/index34.css';const de = "_controls_t1re6_13", se = "_inline
   "non-button-content": "_non-button-content_t1re6_99",
   "overflow-trigger": "_overflow-trigger_t1re6_128"
 }, me = {
-  primary: 3,
-  danger: 2,
+  primary: 2,
   secondary: 1,
   tertiary: 0,
   simple: 0
@@ -32,7 +31,7 @@ function pe({
 }) {
   const g = d.map((o) => ({
     button: o,
-    isDanger: o.props.variant === "danger",
+    isDanger: o.props.intent === "danger",
     value: o
   }));
   return /* @__PURE__ */ v(T, { triggerAccessibleLabel: n, "data-component": "overflowmenu", children: ({

package/dist/components/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.variant === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      data-adaptive={adaptive ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.intent === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      data-adaptive={adaptive ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","intent","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}

package/dist/components/dialog/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index36.css');const e=require("react/jsx-runtime"),P=require("../../classix-5H4IWnMA.cjs"),a=require("react"),j=require("../button/index.cjs"),T=require("../icon/index.cjs"),X="_dialog_10cs4_3",E="_close_10cs4_24",F="_fullscreen_10cs4_35",M="_structured_10cs4_56",S="_header_10cs4_62",Y="_content_10cs4_73",w="_controls_10cs4_81",r={dialog:X,close:E,fullscreen:F,structured:M,header:S,content:Y,controls:w},B=l=>a.Children.toArray(l).some(c=>a.isValidElement(c)?c.type===j.Button&&c.props.variant==="danger"?!0:B(c.props.children):!1),A=({children:l,className:c,controls:o,fullscreen:f=!1,header:_,onCancel:i,onClick:u,onClose:d,open:n=!1,setOpen:s,...b})=>{const g=a.useRef(null),m=B(o),h=f||_!=null||o!=null;a.useEffect(()=>{const t=g.current;t&&(n&&!t.open?t.showModal():!n&&t.open&&t.close())},[n]);const q=t=>{i==null||i(t),!(t.defaultPrevented||!s)&&(t.preventDefault(),s(!1))},y=t=>{if(u==null||u(t),m||t.defaultPrevented||t.target!==t.currentTarget||!s)return;const{bottom:R,left:D,right:k,top:p}=t.currentTarget.getBoundingClientRect();(t.clientX<D||t.clientX>k||t.clientY<p||t.clientY>R)&&s(!1)},N=t=>{d==null||d(t),n&&(s==null||s(!1))},x=s&&!m?e.jsx(j.Button,{"aria-label":"Close dialog",className:r.close,onClick:()=>s(!1),variant:"simple",children:e.jsx(T.Icon,{name:"X"})}):null;return e.jsx("dialog",{className:P.t(r.dialog,h&&r.structured,f&&r.fullscreen,c),onCancel:q,onClick:y,onClose:N,ref:g,...b,"data-component":"dialog",children:h?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:r.header,children:[_,x]}),e.jsx("div",{className:r.content,children:l}),o!=null&&e.jsx("div",{className:r.controls,children:o})]}):e.jsxs(e.Fragment,{children:[x,l]})})};exports.Dialog=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index36.css');const e=require("react/jsx-runtime"),P=require("../../classix-5H4IWnMA.cjs"),a=require("react"),j=require("../button/index.cjs"),T=require("../icon/index.cjs"),X="_dialog_10cs4_3",E="_close_10cs4_24",F="_fullscreen_10cs4_35",M="_structured_10cs4_56",S="_header_10cs4_62",Y="_content_10cs4_73",w="_controls_10cs4_81",c={dialog:X,close:E,fullscreen:F,structured:M,header:S,content:Y,controls:w},B=l=>a.Children.toArray(l).some(r=>a.isValidElement(r)?r.type===j.Button&&r.props.intent==="danger"?!0:B(r.props.children):!1),A=({children:l,className:r,controls:n,fullscreen:f=!1,header:_,onCancel:i,onClick:u,onClose:d,open:o=!1,setOpen:s,...b})=>{const g=a.useRef(null),m=B(n),h=f||_!=null||n!=null;a.useEffect(()=>{const t=g.current;t&&(o&&!t.open?t.showModal():!o&&t.open&&t.close())},[o]);const q=t=>{i==null||i(t),!(t.defaultPrevented||!s)&&(t.preventDefault(),s(!1))},y=t=>{if(u==null||u(t),m||t.defaultPrevented||t.target!==t.currentTarget||!s)return;const{bottom:R,left:D,right:k,top:p}=t.currentTarget.getBoundingClientRect();(t.clientX<D||t.clientX>k||t.clientY<p||t.clientY>R)&&s(!1)},N=t=>{d==null||d(t),o&&(s==null||s(!1))},x=s&&!m?e.jsx(j.Button,{"aria-label":"Close dialog",className:c.close,onClick:()=>s(!1),variant:"simple",children:e.jsx(T.Icon,{name:"X"})}):null;return e.jsx("dialog",{className:P.t(c.dialog,h&&c.structured,f&&c.fullscreen,r),onCancel:q,onClick:y,onClose:N,ref:g,...b,"data-component":"dialog",children:h?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:c.header,children:[_,x]}),e.jsx("div",{className:c.content,children:l}),n!=null&&e.jsx("div",{className:c.controls,children:n})]}):e.jsxs(e.Fragment,{children:[x,l]})})};exports.Dialog=A;
 //# sourceMappingURL=index.cjs.map

package/dist/components/dialog/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { useEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps } from '@/components/button';\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\ntype ControlElementProps = {\n  children?: React.ReactNode;\n  variant?: ButtonProps['variant'];\n};\n\nconst hasDangerControl = (node: React.ReactNode): boolean =>\n  React.Children.toArray(node).some((child) => {\n    if (!React.isValidElement<ControlElementProps>(child)) return false;\n    if (child.type === Button && child.props.variant === 'danger') return true;\n\n    return hasDangerControl(child.props.children);\n  });\n\nexport type DialogProps = React.DialogHTMLAttributes<HTMLDialogElement> & {\n  children: React.ReactNode;\n  controls?: React.ReactNode;\n  fullscreen?: boolean;\n  header?: React.ReactNode;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Dialog = ({\n  children,\n  className,\n  controls,\n  fullscreen = false,\n  header,\n  onCancel,\n  onClick,\n  onClose,\n  open = false,\n  setOpen,\n  ...props\n}: DialogProps) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const destructive = hasDangerControl(controls);\n  const structured = fullscreen || header != null || controls != null;\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (open && !dialog.open) {\n      dialog.showModal();\n    } else if (!open && dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    onCancel?.(event);\n    if (event.defaultPrevented || !setOpen) return;\n\n    event.preventDefault();\n    setOpen(false);\n  };\n\n  const handleClick = (event: React.MouseEvent<HTMLDialogElement>) => {\n    onClick?.(event);\n    if (destructive || event.defaultPrevented || event.target !== event.currentTarget || !setOpen)\n      return;\n\n    const { bottom, left, right, top } = event.currentTarget.getBoundingClientRect();\n    const clickedBackdrop =\n      event.clientX < left ||\n      event.clientX > right ||\n      event.clientY < top ||\n      event.clientY > bottom;\n\n    if (clickedBackdrop) {\n      setOpen(false);\n    }\n  };\n\n  const handleClose = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    onClose?.(event);\n    if (open) setOpen?.(false);\n  };\n\n  const closeButton =\n    setOpen && !destructive ? (\n      <Button\n        aria-label='Close dialog'\n        className={styles.close}\n        onClick={() => setOpen(false)}\n        variant='simple'\n      >\n        <Icon name='X' />\n      </Button>\n    ) : null;\n\n  return (\n    <dialog\n      className={cx(\n        styles.dialog,\n        structured && styles.structured,\n        fullscreen && styles.fullscreen,\n        className\n      )}\n      onCancel={handleCancel}\n      onClick={handleClick}\n      onClose={handleClose}\n      ref={dialogRef}\n      {...props}\n    >\n      {structured ? (\n        <>\n          <div className={styles.header}>\n            {header}\n            {closeButton}\n          </div>\n          <div className={styles.content}>{children}</div>\n          {controls != null && <div className={styles.controls}>{controls}</div>}\n        </>\n      ) : (\n        <>\n          {closeButton}\n          {children}\n        </>\n      )}\n    </dialog>\n  );\n};\n"],"names":["hasDangerControl","node","React","Children","toArray","some","child","isValidElement","type","Button","props","variant","children","Dialog","className","controls","fullscreen","header","onCancel","onClick","onClose","open","setOpen","dialogRef","useRef","destructive","structured","useEffect","dialog","current","showModal","close","handleCancel","event","defaultPrevented","preventDefault","handleClick","target","currentTarget","bottom","left","right","top","getBoundingClientRect","clientX","clientY","handleClose","closeButton","styles","Icon","jsx","cx","jsxs","Fragment","content"],"mappings":"ydAaMA,EAAoBC,GACxBC,EAAMC,SAASC,QAAQH,CAAI,EAAEI,KAAMC,GAC5BJ,EAAMK,eAAoCD,CAAK,EAChDA,EAAME,OAASC,UAAUH,EAAMI,MAAMC,UAAY,SAAiB,GAE/DX,EAAiBM,EAAMI,MAAME,QAAQ,EAHkB,EAI/D,EAUUC,EAASA,CAAC,CACrBD,SAAAA,EACAE,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EAAa,GACbC,OAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,GACPC,QAAAA,EACA,GAAGZ,CACQ,IAAM,CACjB,MAAMa,EAAYC,EAAAA,OAA0B,IAAI,EAC1CC,EAAczB,EAAiBe,CAAQ,EACvCW,EAAaV,GAAcC,GAAU,MAAQF,GAAY,KAE/DY,EAAAA,UAAU,IAAM,CACd,MAAMC,EAASL,EAAUM,QACpBD,IAEDP,GAAQ,CAACO,EAAOP,KAClBO,EAAOE,UAAAA,EACE,CAACT,GAAQO,EAAOP,MACzBO,EAAOG,MAAAA,EAEX,EAAG,CAACV,CAAI,CAAC,EAET,MAAMW,EAAgBC,GAAmD,CACvEf,GAAAA,MAAAA,EAAWe,GACPA,EAAAA,EAAMC,kBAAoB,CAACZ,KAE/BW,EAAME,eAAAA,EACNb,EAAQ,EAAK,EACf,EAEMc,EAAeH,GAA+C,CAElE,GADAd,GAAAA,MAAAA,EAAUc,GACNR,GAAeQ,EAAMC,kBAAoBD,EAAMI,SAAWJ,EAAMK,eAAiB,CAAChB,EACpF,OAEF,KAAM,CAAEiB,OAAAA,EAAQC,KAAAA,EAAMC,MAAAA,EAAOC,IAAAA,CAAAA,EAAQT,EAAMK,cAAcK,sBAAAA,GAEvDV,EAAMW,QAAUJ,GAChBP,EAAMW,QAAUH,GAChBR,EAAMY,QAAUH,GAChBT,EAAMY,QAAUN,IAGhBjB,EAAQ,EAAK,CAEjB,EAEMwB,EAAeb,GAAmD,CACtEb,GAAAA,MAAAA,EAAUa,GACNZ,eAAgB,IACtB,EAEM0B,EACJzB,GAAW,CAACG,QACThB,EAAAA,OAAA,CACC,aAAW,eACX,UAAWuC,EAAOjB,MAClB,QAAS,IAAMT,EAAQ,EAAK,EAC5B,QAAQ,SAER,eAAC2B,EAAAA,KAAA,CAAK,KAAK,IAAG,CAAA,CAChB,EACE,KAEN,OACEC,EAAAA,IAAC,SAAA,CACC,UAAWC,EAAAA,EACTH,EAAOpB,OACPF,GAAcsB,EAAOtB,WACrBV,GAAcgC,EAAOhC,WACrBF,CACF,EACA,SAAUkB,EACV,QAASI,EACT,QAASU,EACT,IAAKvB,EACL,GAAIb,EAAM,iBAAA,SAETgB,SAAAA,EACC0B,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAO/B,OACpBA,SAAAA,CAAAA,EACA8B,CAAAA,EACH,EACAG,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAOM,QAAU1C,SAAAA,EAAS,EACzCG,GAAY,MAAQmC,EAAAA,IAAC,OAAI,UAAWF,EAAOjC,SAAWA,SAAAA,CAAAA,CAAS,CAAA,CAAA,CAClE,EAEAqC,EAAAA,KAAAC,EAAAA,SAAA,CACGN,SAAAA,CAAAA,EACAnC,CAAAA,CAAAA,CACH,CAAA,CAEJ,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { useEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps } from '@/components/button';\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\ntype ControlElementProps = {\n  children?: React.ReactNode;\n  intent?: ButtonProps['intent'];\n};\n\nconst hasDangerControl = (node: React.ReactNode): boolean =>\n  React.Children.toArray(node).some((child) => {\n    if (!React.isValidElement<ControlElementProps>(child)) return false;\n    if (child.type === Button && child.props.intent === 'danger') return true;\n\n    return hasDangerControl(child.props.children);\n  });\n\nexport type DialogProps = React.DialogHTMLAttributes<HTMLDialogElement> & {\n  children: React.ReactNode;\n  controls?: React.ReactNode;\n  fullscreen?: boolean;\n  header?: React.ReactNode;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Dialog = ({\n  children,\n  className,\n  controls,\n  fullscreen = false,\n  header,\n  onCancel,\n  onClick,\n  onClose,\n  open = false,\n  setOpen,\n  ...props\n}: DialogProps) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const destructive = hasDangerControl(controls);\n  const structured = fullscreen || header != null || controls != null;\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (open && !dialog.open) {\n      dialog.showModal();\n    } else if (!open && dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    onCancel?.(event);\n    if (event.defaultPrevented || !setOpen) return;\n\n    event.preventDefault();\n    setOpen(false);\n  };\n\n  const handleClick = (event: React.MouseEvent<HTMLDialogElement>) => {\n    onClick?.(event);\n    if (destructive || event.defaultPrevented || event.target !== event.currentTarget || !setOpen)\n      return;\n\n    const { bottom, left, right, top } = event.currentTarget.getBoundingClientRect();\n    const clickedBackdrop =\n      event.clientX < left ||\n      event.clientX > right ||\n      event.clientY < top ||\n      event.clientY > bottom;\n\n    if (clickedBackdrop) {\n      setOpen(false);\n    }\n  };\n\n  const handleClose = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    onClose?.(event);\n    if (open) setOpen?.(false);\n  };\n\n  const closeButton =\n    setOpen && !destructive ? (\n      <Button\n        aria-label='Close dialog'\n        className={styles.close}\n        onClick={() => setOpen(false)}\n        variant='simple'\n      >\n        <Icon name='X' />\n      </Button>\n    ) : null;\n\n  return (\n    <dialog\n      className={cx(\n        styles.dialog,\n        structured && styles.structured,\n        fullscreen && styles.fullscreen,\n        className\n      )}\n      onCancel={handleCancel}\n      onClick={handleClick}\n      onClose={handleClose}\n      ref={dialogRef}\n      {...props}\n    >\n      {structured ? (\n        <>\n          <div className={styles.header}>\n            {header}\n            {closeButton}\n          </div>\n          <div className={styles.content}>{children}</div>\n          {controls != null && <div className={styles.controls}>{controls}</div>}\n        </>\n      ) : (\n        <>\n          {closeButton}\n          {children}\n        </>\n      )}\n    </dialog>\n  );\n};\n"],"names":["hasDangerControl","node","React","Children","toArray","some","child","isValidElement","type","Button","props","intent","children","Dialog","className","controls","fullscreen","header","onCancel","onClick","onClose","open","setOpen","dialogRef","useRef","destructive","structured","useEffect","dialog","current","showModal","close","handleCancel","event","defaultPrevented","preventDefault","handleClick","target","currentTarget","bottom","left","right","top","getBoundingClientRect","clientX","clientY","handleClose","closeButton","styles","Icon","jsx","cx","jsxs","Fragment","content"],"mappings":"ydAaMA,EAAoBC,GACxBC,EAAMC,SAASC,QAAQH,CAAI,EAAEI,KAAMC,GAC5BJ,EAAMK,eAAoCD,CAAK,EAChDA,EAAME,OAASC,UAAUH,EAAMI,MAAMC,SAAW,SAAiB,GAE9DX,EAAiBM,EAAMI,MAAME,QAAQ,EAHkB,EAI/D,EAUUC,EAASA,CAAC,CACrBD,SAAAA,EACAE,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EAAa,GACbC,OAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,GACPC,QAAAA,EACA,GAAGZ,CACQ,IAAM,CACjB,MAAMa,EAAYC,EAAAA,OAA0B,IAAI,EAC1CC,EAAczB,EAAiBe,CAAQ,EACvCW,EAAaV,GAAcC,GAAU,MAAQF,GAAY,KAE/DY,EAAAA,UAAU,IAAM,CACd,MAAMC,EAASL,EAAUM,QACpBD,IAEDP,GAAQ,CAACO,EAAOP,KAClBO,EAAOE,UAAAA,EACE,CAACT,GAAQO,EAAOP,MACzBO,EAAOG,MAAAA,EAEX,EAAG,CAACV,CAAI,CAAC,EAET,MAAMW,EAAgBC,GAAmD,CACvEf,GAAAA,MAAAA,EAAWe,GACPA,EAAAA,EAAMC,kBAAoB,CAACZ,KAE/BW,EAAME,eAAAA,EACNb,EAAQ,EAAK,EACf,EAEMc,EAAeH,GAA+C,CAElE,GADAd,GAAAA,MAAAA,EAAUc,GACNR,GAAeQ,EAAMC,kBAAoBD,EAAMI,SAAWJ,EAAMK,eAAiB,CAAChB,EACpF,OAEF,KAAM,CAAEiB,OAAAA,EAAQC,KAAAA,EAAMC,MAAAA,EAAOC,IAAAA,CAAAA,EAAQT,EAAMK,cAAcK,sBAAAA,GAEvDV,EAAMW,QAAUJ,GAChBP,EAAMW,QAAUH,GAChBR,EAAMY,QAAUH,GAChBT,EAAMY,QAAUN,IAGhBjB,EAAQ,EAAK,CAEjB,EAEMwB,EAAeb,GAAmD,CACtEb,GAAAA,MAAAA,EAAUa,GACNZ,eAAgB,IACtB,EAEM0B,EACJzB,GAAW,CAACG,QACThB,EAAAA,OAAA,CACC,aAAW,eACX,UAAWuC,EAAOjB,MAClB,QAAS,IAAMT,EAAQ,EAAK,EAC5B,QAAQ,SAER,eAAC2B,EAAAA,KAAA,CAAK,KAAK,IAAG,CAAA,CAChB,EACE,KAEN,OACEC,EAAAA,IAAC,SAAA,CACC,UAAWC,EAAAA,EACTH,EAAOpB,OACPF,GAAcsB,EAAOtB,WACrBV,GAAcgC,EAAOhC,WACrBF,CACF,EACA,SAAUkB,EACV,QAASI,EACT,QAASU,EACT,IAAKvB,EACL,GAAIb,EAAM,iBAAA,SAETgB,SAAAA,EACC0B,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAO/B,OACpBA,SAAAA,CAAAA,EACA8B,CAAAA,EACH,EACAG,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAOM,QAAU1C,SAAAA,EAAS,EACzCG,GAAY,MAAQmC,EAAAA,IAAC,OAAI,UAAWF,EAAOjC,SAAWA,SAAAA,CAAAA,CAAS,CAAA,CAAA,CAClE,EAEAqC,EAAAA,KAAAC,EAAAA,SAAA,CACGN,SAAAA,CAAAA,EACAnC,CAAAA,CAAAA,CACH,CAAA,CAEJ,CAEJ"}

package/dist/components/dialog/index.js

@@ -11,7 +11,7 @@ import '../../assets/index36.css';const F = "_dialog_10cs4_3", I = "_close_10cs4
   header: q,
   content: z,
   controls: G
-}, k = (s) => N.Children.toArray(s).some((l) => N.isValidElement(l) ? l.type === R && l.props.variant === "danger" ? !0 : k(l.props.children) : !1), U = ({
+}, k = (s) => N.Children.toArray(s).some((l) => N.isValidElement(l) ? l.type === R && l.props.intent === "danger" ? !0 : k(l.props.children) : !1), U = ({
   children: s,
   className: l,
   controls: o,
@@ -21,28 +21,28 @@ import '../../assets/index36.css';const F = "_dialog_10cs4_3", I = "_close_10cs4
   onClick: i,
   onClose: d,
   open: a = !1,
-  setOpen: t,
+  setOpen: r,
   ...x
 }) => {
   const m = Y(null), g = k(o), h = f || _ != null || o != null;
   w(() => {
-    const r = m.current;
-    r && (a && !r.open ? r.showModal() : !a && r.open && r.close());
+    const t = m.current;
+    t && (a && !t.open ? t.showModal() : !a && t.open && t.close());
   }, [a]);
-  const y = (r) => {
-    n == null || n(r), !(r.defaultPrevented || !t) && (r.preventDefault(), t(!1));
-  }, D = (r) => {
-    if (i == null || i(r), g || r.defaultPrevented || r.target !== r.currentTarget || !t) return;
+  const y = (t) => {
+    n == null || n(t), !(t.defaultPrevented || !r) && (t.preventDefault(), r(!1));
+  }, D = (t) => {
+    if (i == null || i(t), g || t.defaultPrevented || t.target !== t.currentTarget || !r) return;
     const {
       bottom: b,
       left: j,
       right: E,
       top: P
-    } = r.currentTarget.getBoundingClientRect();
-    (r.clientX < j || r.clientX > E || r.clientY < P || r.clientY > b) && t(!1);
-  }, X = (r) => {
-    d == null || d(r), a && (t == null || t(!1));
-  }, p = t && !g ? /* @__PURE__ */ e(R, { "aria-label": "Close dialog", className: c.close, onClick: () => t(!1), variant: "simple", children: /* @__PURE__ */ e(A, { name: "X" }) }) : null;
+    } = t.currentTarget.getBoundingClientRect();
+    (t.clientX < j || t.clientX > E || t.clientY < P || t.clientY > b) && r(!1);
+  }, X = (t) => {
+    d == null || d(t), a && (r == null || r(!1));
+  }, p = r && !g ? /* @__PURE__ */ e(R, { "aria-label": "Close dialog", className: c.close, onClick: () => r(!1), variant: "simple", children: /* @__PURE__ */ e(A, { name: "X" }) }) : null;
   return /* @__PURE__ */ e("dialog", { className: T(c.dialog, h && c.structured, f && c.fullscreen, l), onCancel: y, onClick: D, onClose: X, ref: m, ...x, "data-component": "dialog", children: h ? /* @__PURE__ */ u(B, { children: [
     /* @__PURE__ */ u("div", { className: c.header, children: [
       _,

package/dist/components/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { useEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps } from '@/components/button';\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\ntype ControlElementProps = {\n  children?: React.ReactNode;\n  variant?: ButtonProps['variant'];\n};\n\nconst hasDangerControl = (node: React.ReactNode): boolean =>\n  React.Children.toArray(node).some((child) => {\n    if (!React.isValidElement<ControlElementProps>(child)) return false;\n    if (child.type === Button && child.props.variant === 'danger') return true;\n\n    return hasDangerControl(child.props.children);\n  });\n\nexport type DialogProps = React.DialogHTMLAttributes<HTMLDialogElement> & {\n  children: React.ReactNode;\n  controls?: React.ReactNode;\n  fullscreen?: boolean;\n  header?: React.ReactNode;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Dialog = ({\n  children,\n  className,\n  controls,\n  fullscreen = false,\n  header,\n  onCancel,\n  onClick,\n  onClose,\n  open = false,\n  setOpen,\n  ...props\n}: DialogProps) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const destructive = hasDangerControl(controls);\n  const structured = fullscreen || header != null || controls != null;\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (open && !dialog.open) {\n      dialog.showModal();\n    } else if (!open && dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    onCancel?.(event);\n    if (event.defaultPrevented || !setOpen) return;\n\n    event.preventDefault();\n    setOpen(false);\n  };\n\n  const handleClick = (event: React.MouseEvent<HTMLDialogElement>) => {\n    onClick?.(event);\n    if (destructive || event.defaultPrevented || event.target !== event.currentTarget || !setOpen)\n      return;\n\n    const { bottom, left, right, top } = event.currentTarget.getBoundingClientRect();\n    const clickedBackdrop =\n      event.clientX < left ||\n      event.clientX > right ||\n      event.clientY < top ||\n      event.clientY > bottom;\n\n    if (clickedBackdrop) {\n      setOpen(false);\n    }\n  };\n\n  const handleClose = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    onClose?.(event);\n    if (open) setOpen?.(false);\n  };\n\n  const closeButton =\n    setOpen && !destructive ? (\n      <Button\n        aria-label='Close dialog'\n        className={styles.close}\n        onClick={() => setOpen(false)}\n        variant='simple'\n      >\n        <Icon name='X' />\n      </Button>\n    ) : null;\n\n  return (\n    <dialog\n      className={cx(\n        styles.dialog,\n        structured && styles.structured,\n        fullscreen && styles.fullscreen,\n        className\n      )}\n      onCancel={handleCancel}\n      onClick={handleClick}\n      onClose={handleClose}\n      ref={dialogRef}\n      {...props}\n    >\n      {structured ? (\n        <>\n          <div className={styles.header}>\n            {header}\n            {closeButton}\n          </div>\n          <div className={styles.content}>{children}</div>\n          {controls != null && <div className={styles.controls}>{controls}</div>}\n        </>\n      ) : (\n        <>\n          {closeButton}\n          {children}\n        </>\n      )}\n    </dialog>\n  );\n};\n"],"names":["hasDangerControl","node","React","Children","toArray","some","child","isValidElement","type","Button","props","variant","children","Dialog","className","controls","fullscreen","header","onCancel","onClick","onClose","open","setOpen","dialogRef","useRef","destructive","structured","useEffect","dialog","current","showModal","close","handleCancel","event","defaultPrevented","preventDefault","handleClick","target","currentTarget","bottom","left","right","top","getBoundingClientRect","clientX","clientY","handleClose","closeButton","styles","Icon","jsx","cx","jsxs","Fragment","content"],"mappings":";;;;;;;;;;;;;GAaMA,IAAmBA,CAACC,MACxBC,EAAMC,SAASC,QAAQH,CAAI,EAAEI,KAAMC,CAAAA,MAC5BJ,EAAMK,eAAoCD,CAAK,IAChDA,EAAME,SAASC,KAAUH,EAAMI,MAAMC,YAAY,WAAiB,KAE/DX,EAAiBM,EAAMI,MAAME,QAAQ,IAHkB,EAI/D,GAUUC,IAASA,CAAC;AAAA,EACrBD,UAAAA;AAAAA,EACAE,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,SAAAA;AAAAA,EACA,GAAGZ;AACQ,MAAM;AACjB,QAAMa,IAAYC,EAA0B,IAAI,GAC1CC,IAAczB,EAAiBe,CAAQ,GACvCW,IAAaV,KAAcC,KAAU,QAAQF,KAAY;AAE/DY,EAAAA,EAAU,MAAM;AACd,UAAMC,IAASL,EAAUM;AACzB,IAAKD,MAEDP,KAAQ,CAACO,EAAOP,OAClBO,EAAOE,UAAAA,IACE,CAACT,KAAQO,EAAOP,QACzBO,EAAOG,MAAAA;AAAAA,EAEX,GAAG,CAACV,CAAI,CAAC;AAET,QAAMW,IAAeA,CAACC,MAAmD;AAEvE,IADAf,KAAAA,QAAAA,EAAWe,IACPA,EAAAA,EAAMC,oBAAoB,CAACZ,OAE/BW,EAAME,eAAAA,GACNb,EAAQ,EAAK;AAAA,EACf,GAEMc,IAAcA,CAACH,MAA+C;AAElE,QADAd,KAAAA,QAAAA,EAAUc,IACNR,KAAeQ,EAAMC,oBAAoBD,EAAMI,WAAWJ,EAAMK,iBAAiB,CAAChB,EACpF;AAEF,UAAM;AAAA,MAAEiB,QAAAA;AAAAA,MAAQC,MAAAA;AAAAA,MAAMC,OAAAA;AAAAA,MAAOC,KAAAA;AAAAA,IAAAA,IAAQT,EAAMK,cAAcK,sBAAAA;AAOzD,KALEV,EAAMW,UAAUJ,KAChBP,EAAMW,UAAUH,KAChBR,EAAMY,UAAUH,KAChBT,EAAMY,UAAUN,MAGhBjB,EAAQ,EAAK;AAAA,EAEjB,GAEMwB,IAAcA,CAACb,MAAmD;AACtEb,IAAAA,KAAAA,QAAAA,EAAUa,IACNZ,qBAAgB;AAAA,EACtB,GAEM0B,IACJzB,KAAW,CAACG,sBACThB,GAAA,EACC,cAAW,gBACX,WAAWuC,EAAOjB,OAClB,SAAS,MAAMT,EAAQ,EAAK,GAC5B,SAAQ,UAER,4BAAC2B,GAAA,EAAK,MAAK,KAAG,EAAA,CAChB,IACE;AAEN,SACE,gBAAAC,EAAC,UAAA,EACC,WAAWC,EACTH,EAAOpB,QACPF,KAAcsB,EAAOtB,YACrBV,KAAcgC,EAAOhC,YACrBF,CACF,GACA,UAAUkB,GACV,SAASI,GACT,SAASU,GACT,KAAKvB,GACL,GAAIb,GAAM,kBAAA,UAETgB,UAAAA,IACC,gBAAA0B,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWJ,EAAO/B,QACpBA,UAAAA;AAAAA,MAAAA;AAAAA,MACA8B;AAAAA,IAAAA,GACH;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAWF,EAAOM,SAAU1C,UAAAA,GAAS;AAAA,IACzCG,KAAY,QAAQ,gBAAAmC,EAAC,SAAI,WAAWF,EAAOjC,UAAWA,UAAAA,EAAAA,CAAS;AAAA,EAAA,EAAA,CAClE,IAEA,gBAAAqC,EAAAC,GAAA,EACGN,UAAAA;AAAAA,IAAAA;AAAAA,IACAnC;AAAAA,EAAAA,EAAAA,CACH,EAAA,CAEJ;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { useEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps } from '@/components/button';\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\ntype ControlElementProps = {\n  children?: React.ReactNode;\n  intent?: ButtonProps['intent'];\n};\n\nconst hasDangerControl = (node: React.ReactNode): boolean =>\n  React.Children.toArray(node).some((child) => {\n    if (!React.isValidElement<ControlElementProps>(child)) return false;\n    if (child.type === Button && child.props.intent === 'danger') return true;\n\n    return hasDangerControl(child.props.children);\n  });\n\nexport type DialogProps = React.DialogHTMLAttributes<HTMLDialogElement> & {\n  children: React.ReactNode;\n  controls?: React.ReactNode;\n  fullscreen?: boolean;\n  header?: React.ReactNode;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Dialog = ({\n  children,\n  className,\n  controls,\n  fullscreen = false,\n  header,\n  onCancel,\n  onClick,\n  onClose,\n  open = false,\n  setOpen,\n  ...props\n}: DialogProps) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const destructive = hasDangerControl(controls);\n  const structured = fullscreen || header != null || controls != null;\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (open && !dialog.open) {\n      dialog.showModal();\n    } else if (!open && dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    onCancel?.(event);\n    if (event.defaultPrevented || !setOpen) return;\n\n    event.preventDefault();\n    setOpen(false);\n  };\n\n  const handleClick = (event: React.MouseEvent<HTMLDialogElement>) => {\n    onClick?.(event);\n    if (destructive || event.defaultPrevented || event.target !== event.currentTarget || !setOpen)\n      return;\n\n    const { bottom, left, right, top } = event.currentTarget.getBoundingClientRect();\n    const clickedBackdrop =\n      event.clientX < left ||\n      event.clientX > right ||\n      event.clientY < top ||\n      event.clientY > bottom;\n\n    if (clickedBackdrop) {\n      setOpen(false);\n    }\n  };\n\n  const handleClose = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    onClose?.(event);\n    if (open) setOpen?.(false);\n  };\n\n  const closeButton =\n    setOpen && !destructive ? (\n      <Button\n        aria-label='Close dialog'\n        className={styles.close}\n        onClick={() => setOpen(false)}\n        variant='simple'\n      >\n        <Icon name='X' />\n      </Button>\n    ) : null;\n\n  return (\n    <dialog\n      className={cx(\n        styles.dialog,\n        structured && styles.structured,\n        fullscreen && styles.fullscreen,\n        className\n      )}\n      onCancel={handleCancel}\n      onClick={handleClick}\n      onClose={handleClose}\n      ref={dialogRef}\n      {...props}\n    >\n      {structured ? (\n        <>\n          <div className={styles.header}>\n            {header}\n            {closeButton}\n          </div>\n          <div className={styles.content}>{children}</div>\n          {controls != null && <div className={styles.controls}>{controls}</div>}\n        </>\n      ) : (\n        <>\n          {closeButton}\n          {children}\n        </>\n      )}\n    </dialog>\n  );\n};\n"],"names":["hasDangerControl","node","React","Children","toArray","some","child","isValidElement","type","Button","props","intent","children","Dialog","className","controls","fullscreen","header","onCancel","onClick","onClose","open","setOpen","dialogRef","useRef","destructive","structured","useEffect","dialog","current","showModal","close","handleCancel","event","defaultPrevented","preventDefault","handleClick","target","currentTarget","bottom","left","right","top","getBoundingClientRect","clientX","clientY","handleClose","closeButton","styles","Icon","jsx","cx","jsxs","Fragment","content"],"mappings":";;;;;;;;;;;;;GAaMA,IAAmBA,CAACC,MACxBC,EAAMC,SAASC,QAAQH,CAAI,EAAEI,KAAMC,CAAAA,MAC5BJ,EAAMK,eAAoCD,CAAK,IAChDA,EAAME,SAASC,KAAUH,EAAMI,MAAMC,WAAW,WAAiB,KAE9DX,EAAiBM,EAAMI,MAAME,QAAQ,IAHkB,EAI/D,GAUUC,IAASA,CAAC;AAAA,EACrBD,UAAAA;AAAAA,EACAE,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,SAAAA;AAAAA,EACA,GAAGZ;AACQ,MAAM;AACjB,QAAMa,IAAYC,EAA0B,IAAI,GAC1CC,IAAczB,EAAiBe,CAAQ,GACvCW,IAAaV,KAAcC,KAAU,QAAQF,KAAY;AAE/DY,EAAAA,EAAU,MAAM;AACd,UAAMC,IAASL,EAAUM;AACzB,IAAKD,MAEDP,KAAQ,CAACO,EAAOP,OAClBO,EAAOE,UAAAA,IACE,CAACT,KAAQO,EAAOP,QACzBO,EAAOG,MAAAA;AAAAA,EAEX,GAAG,CAACV,CAAI,CAAC;AAET,QAAMW,IAAeA,CAACC,MAAmD;AAEvE,IADAf,KAAAA,QAAAA,EAAWe,IACPA,EAAAA,EAAMC,oBAAoB,CAACZ,OAE/BW,EAAME,eAAAA,GACNb,EAAQ,EAAK;AAAA,EACf,GAEMc,IAAcA,CAACH,MAA+C;AAElE,QADAd,KAAAA,QAAAA,EAAUc,IACNR,KAAeQ,EAAMC,oBAAoBD,EAAMI,WAAWJ,EAAMK,iBAAiB,CAAChB,EACpF;AAEF,UAAM;AAAA,MAAEiB,QAAAA;AAAAA,MAAQC,MAAAA;AAAAA,MAAMC,OAAAA;AAAAA,MAAOC,KAAAA;AAAAA,IAAAA,IAAQT,EAAMK,cAAcK,sBAAAA;AAOzD,KALEV,EAAMW,UAAUJ,KAChBP,EAAMW,UAAUH,KAChBR,EAAMY,UAAUH,KAChBT,EAAMY,UAAUN,MAGhBjB,EAAQ,EAAK;AAAA,EAEjB,GAEMwB,IAAcA,CAACb,MAAmD;AACtEb,IAAAA,KAAAA,QAAAA,EAAUa,IACNZ,qBAAgB;AAAA,EACtB,GAEM0B,IACJzB,KAAW,CAACG,sBACThB,GAAA,EACC,cAAW,gBACX,WAAWuC,EAAOjB,OAClB,SAAS,MAAMT,EAAQ,EAAK,GAC5B,SAAQ,UAER,4BAAC2B,GAAA,EAAK,MAAK,KAAG,EAAA,CAChB,IACE;AAEN,SACE,gBAAAC,EAAC,UAAA,EACC,WAAWC,EACTH,EAAOpB,QACPF,KAAcsB,EAAOtB,YACrBV,KAAcgC,EAAOhC,YACrBF,CACF,GACA,UAAUkB,GACV,SAASI,GACT,SAASU,GACT,KAAKvB,GACL,GAAIb,GAAM,kBAAA,UAETgB,UAAAA,IACC,gBAAA0B,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWJ,EAAO/B,QACpBA,UAAAA;AAAAA,MAAAA;AAAAA,MACA8B;AAAAA,IAAAA,GACH;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAWF,EAAOM,SAAU1C,UAAAA,GAAS;AAAA,IACzCG,KAAY,QAAQ,gBAAAmC,EAAC,SAAI,WAAWF,EAAOjC,UAAWA,UAAAA,EAAAA,CAAS;AAAA,EAAA,EAAA,CAClE,IAEA,gBAAAqC,EAAAC,GAAA,EACGN,UAAAA;AAAAA,IAAAA;AAAAA,IACAnC;AAAAA,EAAAA,EAAAA,CACH,EAAA,CAEJ;AAEJ;"}

package/dist/components/dropdown/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index37.css');const l=require("react/jsx-runtime"),b=require("../../classix-5H4IWnMA.cjs"),a=require("react"),F=require("../button/index.cjs"),de=require("../../icons-DLOPU0OZ.cjs"),X=require("../../index-CProY0qU.cjs"),pe=require("../list/index.cjs"),V=require("../../index-Bwq0cPOt.cjs");function L(t){return typeof t=="string"||typeof t=="number"?String(t):Array.isArray(t)?t.map(L).join(" "):a.isValidElement(t)?L(t.props.children):""}function fe(t){return a.isValidElement(t)&&t.type==="option"}function me(t){return a.isValidElement(t)&&t.type==="optgroup"}function ve(t){return a.isValidElement(t)&&t.type===a.Fragment}function ge(t){return a.isValidElement(t)&&t.type===V.Select}function M(t,i,r=!1){const s=[];return a.Children.forEach(t,n=>{if(ve(n))s.push(...M(n.props.children,i,r));else if(fe(n)){const c=L(n.props.children).trim(),f=n.props.value!=null?String(n.props.value):c;s.push({disabled:r||!!n.props.disabled,groupLabel:i,hidden:!!n.props.hidden,isPlaceholder:!!(n.props.hidden&&f===""),label:n.props.children,selected:!!n.props.selected,text:c,value:f})}else me(n)&&s.push(...M(n.props.children,n.props.label,r||!!n.props.disabled))}),s}function _e(t){const i=t.trim();if(!i)return null;const s=[.../[*?]/.test(i)?i:`*${i}*`].map(n=>n==="*"?".*":n==="?"?".":n.replace(/[|\\{}()[\]^$+.,]/g,"\\$&")).join("");return new RegExp(`^${s}$`,"i")}function he(t,i){const r=_e(i),s=t.filter(n=>!n.hidden&&!n.isPlaceholder);return r?s.filter(n=>r.test([n.groupLabel,n.text,n.value].filter(Boolean).join(" "))):s}function xe(t,i){return t.find(r=>r.value===i)??t.find(r=>r.isPlaceholder)??t[0]}function be(t,i,r){var s,n;return i!=null?String(i):r!=null?String(r):((s=t.find(c=>c.selected))==null?void 0:s.value)??((n=t[0])==null?void 0:n.value)??""}function ye(t){if(ge(t)){const{children:i,placeholder:r,...s}=t.props;return{children:l.jsxs(l.Fragment,{children:[r&&l.jsx("option",{hidden:!0,value:"",children:r}),i]}),props:s}}return{children:t.props.children,props:t.props}}const je="_combobox_vg3rv_3",we="_dropdown_vg3rv_27",Se="_empty_vg3rv_32",Ne="_group_vg3rv_33",Ce="_placeholder_vg3rv_34",Ee="_filter_vg3rv_42",Ve="_native_vg3rv_53",Le="_option_vg3rv_63",Re="_options_vg3rv_85",$e="_panel_vg3rv_109",Be="_selected_vg3rv_134",Ie="_text_vg3rv_138",qe="_trigger_vg3rv_146",De="_minimal_vg3rv_183",Pe="_inline_vg3rv_238",ke="_label_vg3rv_270",o={combobox:je,"combobox-input":"_combobox-input_vg3rv_12",dropdown:we,empty:Se,group:Ne,placeholder:Ce,filter:Ee,native:Ve,option:Le,options:Re,panel:$e,selected:Be,text:Ie,trigger:qe,minimal:De,inline:Pe,label:ke,"inline-field":"_inline-field_vg3rv_276"};function Y(t,i){return{"--icon-svg":de.iconSVG(t,i)}}const Fe=({children:t,className:i,combobox:r=!1,createOption:s,emptyLabel:n="No matches found",label:c,renderOption:f,searchPlaceholder:R="Filter",selectedItems:Z,variant:_="default",...ee})=>{const $=ye(t),{defaultValue:te,onChange:B,value:I,...ne}=$.props,y=V.sanitizeSelectProps(ne),{className:re,...se}=y,W=a.useRef(null),G=a.useRef(null),j=a.useId(),Q=a.useRef(null),m=a.useRef(null),h=M($.children),x=I!=null,q=be(h,I,te),[D,P]=a.useState(()=>q),[u,p]=a.useState(!1),[w,S]=a.useState(""),N=x?String(I):D,z={default:V.resolveColor("--colors-semantic-content-secondary"),white:V.resolveColor("--color-white","white")},O=_==="minimal"?z.white:z.default,C=xe(h,N),le=Y("CaretDown",O),oe=Y("MagnifyingGlass",O),T=he(h,w),v=w.trim(),E=!!(r&&s&&v&&s.isValid(v)),ie=c&&_==="inline"?X.formatInlineLabel(c):c,A=e=>e?(f==null?void 0:f({groupLabel:e.groupLabel,isSelected:e.value===N,label:e.label,text:e.text,value:e.value}))??e.label:"Select an option";a.useEffect(()=>{!x&&!h.some(e=>e.value===D)&&P(q)},[q,D,x,h]),a.useEffect(()=>{var e;if(!u){S("");return}(e=m.current)==null||e.focus()},[u]),a.useEffect(()=>{if(!u)return;const e=d=>{var g;(g=G.current)!=null&&g.contains(d.target)||p(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[u]);const ae=e=>{x||P(e.target.value),B==null||B(e)},k=()=>{var e;p(!1),r||(e=W.current)==null||e.focus()},K=()=>{var e;S(""),p(!0),(e=m.current)==null||e.focus()},H=()=>{!s||!E||(s.onCreate(v),K())},ce=e=>{var U;x||P(e);const d=Q.current;if(!d){k();return}const g=(U=Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype,"value"))==null?void 0:U.set;g==null||g.call(d,e),d.dispatchEvent(new Event("change",{bubbles:!0})),r?K():k()},ue=e=>{e.key==="Escape"&&k(),e.key==="Enter"&&e.target===m.current&&E&&(e.preventDefault(),H())},J=l.jsxs("div",{className:b.t(o.dropdown,_==="inline"&&o.inline,_==="minimal"&&o.minimal,i),onKeyDown:ue,ref:G,...ee,children:[l.jsx("select",{...se,"aria-hidden":"true",className:b.t(o.native,re),onChange:ae,ref:Q,tabIndex:-1,value:N,children:$.children}),r?l.jsxs("div",{className:o.combobox,onClick:()=>{var e;return(e=m.current)==null?void 0:e.focus()},children:[Z,l.jsx("input",{"aria-autocomplete":"list","aria-expanded":u,"aria-label":y["aria-label"]??c??R,className:o["combobox-input"],disabled:y.disabled,onChange:e=>{S(e.target.value),p(!0)},onClick:()=>p(!0),onFocus:()=>p(!0),placeholder:R||void 0,ref:m,role:"combobox",type:"text",value:w})]}):l.jsx(F.Button,{"aria-expanded":u,"aria-haspopup":"dialog","aria-labelledby":c?`${j} ${j}-value`:void 0,className:b.t(o.trigger,(C==null?void 0:C.isPlaceholder)&&o.placeholder),"data-open":u?"true":void 0,disabled:y.disabled,onClick:()=>p(e=>!e),ref:W,style:le,variant:"tertiary",children:l.jsx("span",{className:o.text,id:`${j}-value`,children:A(C)})}),u&&l.jsxs("div",{className:o.panel,children:[!r&&l.jsx(X.Input,{"aria-label":"Filter",className:o.filter,icon:"MagnifyingGlass",onChange:e=>S(e.target.value),placeholder:R,ref:m,style:oe,type:"search",value:w}),l.jsxs(pe.List,{"aria-label":"Dropdown",className:o.options,children:[T.map(e=>{const d=e.value===N;return l.jsx("li",{"data-component":"dropdown",children:l.jsxs(F.Button,{"aria-label":d?`${e.text}, selected`:e.text,className:b.t(o.option,d&&o.selected),disabled:e.disabled,onClick:()=>ce(e.value),variant:"tertiary",children:[l.jsx("span",{className:o.text,children:A(e)}),e.groupLabel&&l.jsx("small",{className:o.group,children:e.groupLabel})]})},`${e.groupLabel??"root"}-${e.value}`)}),E&&s&&l.jsx("li",{children:l.jsx(F.Button,{"aria-label":L(s.render(v))||v,className:o.option,onClick:H,variant:"tertiary",children:l.jsx("span",{className:o.text,children:s.render(v)})})}),T.length===0&&!E&&l.jsx("li",{className:o.empty,children:n})]})]})]});return c?l.jsxs("div",{className:b.t(o.label,_==="inline"&&o["inline-field"]),"data-component":"dropdown",children:[l.jsx("span",{id:j,children:ie}),J]}):J};exports.Dropdown=Fe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index37.css');const l=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),a=require("react"),k=require("../button/index.cjs"),de=require("../../icons-DTP9D75O.cjs"),X=require("../../index-CfdjkXVw.cjs"),pe=require("../list/index.cjs"),E=require("../../index-Dk9p49nt.cjs");function V(t){return typeof t=="string"||typeof t=="number"?String(t):Array.isArray(t)?t.map(V).join(" "):a.isValidElement(t)?V(t.props.children):""}function fe(t){return a.isValidElement(t)&&t.type==="option"}function me(t){return a.isValidElement(t)&&t.type==="optgroup"}function _e(t){return a.isValidElement(t)&&t.type===a.Fragment}function he(t){return a.isValidElement(t)&&t.type===E.Select}function F(t,i,r=!1){const s=[];return a.Children.forEach(t,n=>{if(_e(n))s.push(...F(n.props.children,i,r));else if(fe(n)){const c=V(n.props.children).trim(),f=n.props.value!=null?String(n.props.value):c;s.push({disabled:r||!!n.props.disabled,groupLabel:i,hidden:!!n.props.hidden,isPlaceholder:!!(n.props.hidden&&f===""),label:n.props.children,selected:!!n.props.selected,text:c,value:f})}else me(n)&&s.push(...F(n.props.children,n.props.label,r||!!n.props.disabled))}),s}function ge(t){const i=t.trim();if(!i)return null;const s=[.../[*?]/.test(i)?i:`*${i}*`].map(n=>n==="*"?".*":n==="?"?".":n.replace(/[|\\{}()[\]^$+.,]/g,"\\$&")).join("");return new RegExp(`^${s}$`,"i")}function xe(t,i){const r=ge(i),s=t.filter(n=>!n.hidden&&!n.isPlaceholder);return r?s.filter(n=>r.test([n.groupLabel,n.text,n.value].filter(Boolean).join(" "))):s}function be(t,i){return t.find(r=>r.value===i)??t.find(r=>r.isPlaceholder)??t[0]}function je(t,i,r){var s,n;return i!=null?String(i):r!=null?String(r):((s=t.find(c=>c.selected))==null?void 0:s.value)??((n=t[0])==null?void 0:n.value)??""}function ve(t){if(he(t)){const{children:i,placeholder:r,...s}=t.props;return{children:l.jsxs(l.Fragment,{children:[r&&l.jsx("option",{hidden:!0,value:"",children:r}),i]}),props:s}}return{children:t.props.children,props:t.props}}const ye="_combobox_149jz_3",we="_dropdown_149jz_27",Se="_empty_149jz_32",ze="_group_149jz_33",Ne="_placeholder_149jz_34",Ce="_filter_149jz_42",Ee="_native_149jz_53",Ve="_option_149jz_63",Le="_options_149jz_84",Re="_panel_149jz_108",$e="_selected_149jz_133",Be="_text_149jz_137",Ie="_trigger_149jz_145",qe="_minimal_149jz_182",De="_inline_149jz_241",Pe="_label_149jz_273",o={combobox:ye,"combobox-input":"_combobox-input_149jz_12",dropdown:we,empty:Se,group:ze,placeholder:Ne,filter:Ce,native:Ee,option:Ve,options:Le,panel:Re,selected:$e,text:Be,trigger:Ie,minimal:qe,inline:De,label:Pe,"inline-field":"_inline-field_149jz_279"};function Y(t,i){return{"--icon-svg":de.iconSVG(t,i)}}const ke=({children:t,className:i,combobox:r=!1,createOption:s,emptyLabel:n="No matches found",label:c,renderOption:f,searchPlaceholder:L="Filter",selectedItems:Z,variant:g="default",...ee})=>{const R=ve(t),{defaultValue:te,onChange:$,value:B,...ne}=R.props,v=E.sanitizeSelectProps(ne),{className:re,...se}=v,M=a.useRef(null),W=a.useRef(null),y=a.useId(),G=a.useRef(null),m=a.useRef(null),x=F(R.children),b=B!=null,I=je(x,B,te),[q,D]=a.useState(()=>I),[u,p]=a.useState(!1),[w,S]=a.useState(""),z=b?String(B):q,Q={default:E.resolveColor("--colors-semantic-content-secondary"),white:E.resolveColor("--color-white","white")},O=g==="minimal"?Q.white:Q.default,N=be(x,z),le=Y("CaretDown",O),oe=Y("MagnifyingGlass",O),T=xe(x,w),_=w.trim(),C=!!(r&&s&&_&&s.isValid(_)),ie=c&&g==="inline"?X.formatInlineLabel(c):c,A=e=>e?(f==null?void 0:f({groupLabel:e.groupLabel,isSelected:e.value===z,label:e.label,text:e.text,value:e.value}))??e.label:"Select an option";a.useEffect(()=>{!b&&!x.some(e=>e.value===q)&&D(I)},[I,q,b,x]),a.useEffect(()=>{var e;if(!u){S("");return}(e=m.current)==null||e.focus()},[u]),a.useEffect(()=>{if(!u)return;const e=d=>{var h;(h=W.current)!=null&&h.contains(d.target)||p(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[u]);const ae=e=>{b||D(e.target.value),$==null||$(e)},P=()=>{var e;p(!1),r||(e=M.current)==null||e.focus()},K=()=>{var e;S(""),p(!0),(e=m.current)==null||e.focus()},H=()=>{!s||!C||(s.onCreate(_),K())},ce=e=>{var U;b||D(e);const d=G.current;if(!d){P();return}const h=(U=Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype,"value"))==null?void 0:U.set;h==null||h.call(d,e),d.dispatchEvent(new Event("change",{bubbles:!0})),r?K():P()},ue=e=>{e.key==="Escape"&&P(),e.key==="Enter"&&e.target===m.current&&C&&(e.preventDefault(),H())},J=l.jsxs("div",{className:j.t(o.dropdown,g==="inline"&&o.inline,g==="minimal"&&o.minimal,i),onKeyDown:ue,ref:W,...ee,children:[l.jsx("select",{...se,"aria-hidden":"true",className:j.t(o.native,re),onChange:ae,ref:G,tabIndex:-1,value:z,children:R.children}),r?l.jsxs("div",{className:o.combobox,onClick:()=>{var e;return(e=m.current)==null?void 0:e.focus()},children:[Z,l.jsx("input",{"aria-autocomplete":"list","aria-expanded":u,"aria-label":v["aria-label"]??c??L,className:o["combobox-input"],disabled:v.disabled,onChange:e=>{S(e.target.value),p(!0)},onClick:()=>p(!0),onFocus:()=>p(!0),placeholder:L||void 0,ref:m,role:"combobox",type:"text",value:w})]}):l.jsx(k.Button,{"aria-expanded":u,"aria-haspopup":"dialog","aria-labelledby":c?`${y} ${y}-value`:void 0,className:j.t(o.trigger,(N==null?void 0:N.isPlaceholder)&&o.placeholder),"data-open":u?"true":void 0,disabled:v.disabled,onClick:()=>p(e=>!e),ref:M,style:le,variant:"tertiary",children:l.jsx("span",{className:o.text,id:`${y}-value`,children:A(N)})}),u&&l.jsxs("div",{className:o.panel,children:[!r&&l.jsx(X.Input,{"aria-label":"Filter",className:o.filter,icon:"MagnifyingGlass",onChange:e=>S(e.target.value),placeholder:L,ref:m,style:oe,type:"search",value:w}),l.jsxs(pe.List,{"aria-label":"Dropdown",className:o.options,children:[T.map(e=>{const d=e.value===z;return l.jsx("li",{"data-component":"dropdown",children:l.jsxs(k.Button,{"aria-label":d?`${e.text}, selected`:e.text,className:j.t(o.option,d&&o.selected),disabled:e.disabled,onClick:()=>ce(e.value),variant:"tertiary",children:[l.jsx("span",{className:o.text,children:A(e)}),e.groupLabel&&l.jsx("small",{className:o.group,children:e.groupLabel})]})},`${e.groupLabel??"root"}-${e.value}`)}),C&&s&&l.jsx("li",{children:l.jsx(k.Button,{"aria-label":V(s.render(_))||_,className:o.option,onClick:H,variant:"tertiary",children:l.jsx("span",{className:o.text,children:s.render(_)})})}),T.length===0&&!C&&l.jsx("li",{className:o.empty,children:n})]})]})]});return c?l.jsxs("div",{className:j.t(o.label,g==="inline"&&o["inline-field"]),"data-component":"dropdown",children:[l.jsx("span",{id:y,children:ie}),J]}):J};exports.Dropdown=ke;
 //# sourceMappingURL=index.cjs.map