@chassis-ui/react 0.5.0 → 0.6.0

package/dist/chunks/chip-input-D8EaNujM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-input-D8EaNujM.js","names":["useForkedRef","useIsomorphicLayoutEffect","useFormField","useFormReset","useHeldBack","renderFormField","CloseButton","isRTL","validationClassName","Chip","React","classNames","ChipList","useTagGroup","props","state","groupRef","empty","mergeProps","gridProps","event","onEmptyFocus","ChipRow","item","ref","useRef","useTag","buttonRef","useButton","removeButtonProps","rowProps","chipVariant","gridCellProps","allowsRemoving","buttonProps","buildTagIds","seen","list","occurrence","tag","ChipInput","forwardRef","ariaDescribedBy","ariaLabel","ariaLabelledBy","invalidProp","validProp","rest","tags","updateTags","useControllableState","value","defaultValue","onChange","ids","useMemo","isAddableValue","trimmed","allowDuplicates","commitInput","maxChips","inputValue","setInputValue","removeTags","toRemove","keys","index","items","listState","useListState","Item","disabled","containerRef","forkedRef","inputRef","useState","initial","needsChip","required","focusLastChip","lastKey","extend","rows","handleKeyDown","separator","input","handlePaste","pasted","parts","next","useTextField","describedBy","labelledBy","inputId","invalid","size","valid","className","inputProps","name","feedbackId","helpId","labelId"],"sources":["../../src/components/chip-input/ChipList.tsx","../../src/components/chip-input/ChipInput.tsx"],"sourcesContent":["import React, { RefObject, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaTagGroupOptions, mergeProps, useButton, useTag, useTagGroup } from 'react-aria'\nimport { ListState, Node } from 'react-stately'\n\nimport { Chip } from '../chip/Chip'\nimport { CloseButton } from '../close-button/CloseButton'\n\n// react-stately's collection builder caches nodes in a WeakMap keyed by each item's own\n// identity, so `items` must be objects — plain tag strings can't be WeakMap keys.\nexport interface ChipItem {\n  id: string\n  value: string\n}\n\ninterface ChipListProps {\n  chipVariant?: string\n  disabled?: boolean\n  groupRef: RefObject<HTMLDivElement | null>\n  /**\n   * Called when the list takes focus while it has no chips: react-aria focuses it when the last\n   * chip is removed. `ChipInput` sends the focus on to its text input.\n   */\n  onEmptyFocus: () => void\n  props: AriaTagGroupOptions<ChipItem>\n  size?: 'sm' | 'lg'\n  state: ListState<ChipItem>\n}\n\nexport const ChipList = ({\n  chipVariant,\n  disabled,\n  groupRef,\n  onEmptyFocus,\n  props,\n  size,\n  state\n}: ChipListProps) => {\n  const { gridProps } = useTagGroup(props, state, groupRef)\n  const empty = state.collection.size === 0\n\n  // react-aria describes the list by a description and an error message it never renders here\n  // (FORMS.md, gotcha 6), and keeps `aria-multiselectable` when an empty list turns from a `grid`\n  // into a `group`, which doesn't allow it.\n  // An empty list is a `group` with `tabIndex={0}`, so that a message for the empty state can be\n  // reached. Nothing is rendered in it here, and it was a zero-size tab stop before the input, which\n  // also took focus when the last chip was removed. It is focusable by script only, and passes on\n  // the focus react-aria gives it.\n  return (\n    <div\n      {...mergeProps(gridProps, {\n        onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n          if (empty && event.target === event.currentTarget) onEmptyFocus()\n        }\n      })}\n      aria-describedby={undefined}\n      aria-multiselectable={\n        gridProps.role === 'grid' ? gridProps['aria-multiselectable'] : undefined\n      }\n      tabIndex={empty ? -1 : gridProps.tabIndex}\n      style={{ display: 'contents' }}\n      ref={groupRef as RefObject<HTMLDivElement>}\n    >\n      {[...state.collection].map((item) => (\n        <ChipRow\n          chipVariant={chipVariant}\n          disabled={disabled}\n          item={item}\n          key={item.key}\n          size={size}\n          state={state}\n        />\n      ))}\n    </div>\n  )\n}\n\ninterface ChipRowProps {\n  chipVariant?: string\n  disabled?: boolean\n  item: Node<ChipItem>\n  size?: 'sm' | 'lg'\n  state: ListState<ChipItem>\n}\n\n// Renders one tag as the shared `Chip` component, wrapped in the row/gridcell markup\n// `useTag`'s grid semantics require — see FORMS.md-adjacent notes in ChipInput.tsx for why the\n// grid role lives on `ChipList`'s own wrapper rather than `.chip-input` itself. The `active`\n// class communicates selection directly (react-aria's `aria-selected`, from `rowProps`, is the\n// actual ARIA signal); `Chip`'s own `pressed`/`aria-pressed` prop is deliberately left unset\n// here since `aria-pressed` isn't a valid property on a `role=\"row\"` element.\nconst ChipRow = ({ chipVariant, disabled, item, size, state }: ChipRowProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const { rowProps, gridCellProps, removeButtonProps, allowsRemoving } = useTag(\n    { item },\n    state,\n    ref\n  )\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const { buttonProps } = useButton(removeButtonProps, buttonRef)\n\n  return (\n    <Chip\n      {...rowProps}\n      // Labelled by its `aria-label`. react-aria adds a description id it never renders here.\n      aria-labelledby={undefined}\n      className={classNames(chipVariant, { active: state.selectionManager.isSelected(item.key) })}\n      component=\"div\"\n      disabled={disabled}\n      ref={ref}\n      size={size}\n    >\n      <div {...gridCellProps} style={{ display: 'contents' }}>\n        {item.rendered}\n        {allowsRemoving && (\n          // react-aria's generic ButtonHTMLAttributes typing includes a legacy `color?: string`\n          // attribute that's wider than CloseButton's `color?: ContextColor` prop; buttonProps\n          // never actually sets it, so it's safe to omit from the spread's type.\n          <CloseButton {...(buttonProps as Omit<typeof buttonProps, 'color'>)} ref={buttonRef} />\n        )}\n      </div>\n    </Chip>\n  )\n}\n","import React, {\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport classNames from 'classnames'\nimport { useTextField } from 'react-aria'\nimport { Item, Key, useListState } from 'react-stately'\n\nimport {\n  useControllableState,\n  useFormReset,\n  useForkedRef,\n  useFormField,\n  useHeldBack,\n  useIsomorphicLayoutEffect\n} from '../../hooks'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { ChipList, ChipItem } from './ChipList'\nimport { isRTL } from '../../utils/direction'\n\n// `allowDuplicates` means two tags can share a value, but react-stately's collection needs a\n// unique key per item — keying on the value alone collapses duplicates into the same node, so\n// selecting or removing one affects all of them. Key on (value, occurrence-within-the-array)\n// instead, recomputed fresh from `tags` on every call rather than cached, so it stays correct\n// whether the array changed via our own add/remove or via an externally-controlled `value` prop.\nconst buildTagIds = (list: string[]): string[] => {\n  const seen = new Map<string, number>()\n  return list.map((tag) => {\n    const occurrence = seen.get(tag) ?? 0\n    seen.set(tag, occurrence + 1)\n    return occurrence === 0 ? tag : `${tag}\\u0000${occurrence}`\n  })\n}\n\nexport interface ChipInputProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the chip group, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the chip group.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Allow the same value to be added more than once. Defaults to `false`.\n   */\n  allowDuplicates?: boolean\n  /**\n   * Space-separated chassis-css chip modifier classes (e.g. `\"primary smooth\"`) applied to every\n   * chip. Defaults to `\"default\"`.\n   */\n  chipVariant?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The initial set of chip values (uncontrolled).\n   */\n  defaultValue?: string[]\n  /**\n   * Prevents new chips from being added and makes existing chips non-interactive.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the chips.\n   */\n  help?: ReactNode\n  /**\n   * `id` forwarded to the text input — useful for pairing with a `<label for>`.\n   */\n  id?: string\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the chips when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the text input.\n   */\n  label?: ReactNode\n  /**\n   * Maximum number of chips allowed. Omit for no limit.\n   */\n  maxChips?: number\n  /**\n   * `name` of an auto-created hidden input per chip, kept in sync with the values, for native\n   * form submission. Omit to skip creating them.\n   */\n  name?: string\n  /**\n   * Callback fired whenever a chip is added or removed.\n   */\n  onChange?: (values: string[]) => void\n  /**\n   * Placeholder shown in the input when empty.\n   */\n  placeholder?: string\n  /**\n   * Toggle the required state for the component. A required chip input with no chips holds its\n   * form back from submitting, and its text input takes focus: text typed there and not added as\n   * a chip is not a value.\n   */\n  required?: boolean\n  /**\n   * Character that creates a new chip when typed, or pasted text is split on. Set to `null` to\n   * disable. Defaults to `,`.\n   */\n  separator?: string | null\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the chips when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The set of chip values (controlled).\n   */\n  value?: string[]\n}\n\n// See `needsChip`.\nconst NEEDS_CHIP_MESSAGE = 'Add a chip.'\n\nexport const ChipInput = forwardRef<HTMLDivElement, ChipInputProps>(\n  (\n    {\n      allowDuplicates = false,\n      'aria-describedby': ariaDescribedBy,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      chipVariant = 'default',\n      className,\n      defaultValue,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      maxChips,\n      name,\n      onChange,\n      placeholder,\n      required,\n      separator = ',',\n      size,\n      valid: validProp,\n      validFeedback,\n      value,\n      ...rest\n    }: ChipInputProps,\n    ref\n  ): ReactNode => {\n    const [tags, updateTags] = useControllableState<string[]>(value, defaultValue ?? [], onChange)\n\n    // The one memoized computation of `tags`' ids — `removeTags`, `items`, and `focusLastChip`\n    // below all used to independently recompute this same array from scratch (fresh on every\n    // render, not just when `tags` actually changed); they now all read this instead.\n    const ids = useMemo(() => buildTagIds(tags), [tags])\n\n    // Shared by `commitInput` and the paste handler's loop: whether `raw` (already trimmed) is\n    // addable to `list` given `allowDuplicates`. `maxChips` is deliberately not part of this\n    // predicate — the paste loop needs to `break` (stop entirely) on hitting the limit, while an\n    // empty/duplicate value should just be skipped and the loop should keep going.\n    const isAddableValue = (list: string[], trimmed: string) =>\n      trimmed !== '' && (allowDuplicates || !list.includes(trimmed))\n\n    // Takes the typed text, as a paste takes each part: an empty or duplicate value is dropped,\n    // and text past `maxChips` stays in the input.\n    const commitInput = () => {\n      if (maxChips != null && tags.length >= maxChips) return\n      const trimmed = inputValue.trim()\n      if (isAddableValue(tags, trimmed)) updateTags([...tags, trimmed])\n      setInputValue('')\n    }\n\n    const removeTags = (keys: Iterable<Key>) => {\n      const toRemove = new Set(keys)\n      updateTags(tags.filter((_tag, index) => !toRemove.has(ids[index]!)))\n    }\n\n    const items = useMemo<ChipItem[]>(\n      () => tags.map((tag, index) => ({ id: ids[index]!, value: tag })),\n      [tags, ids]\n    )\n\n    const listState = useListState<ChipItem>({\n      children: (item: ChipItem) => (\n        <Item key={item.id} textValue={item.value}>\n          {item.value}\n        </Item>\n      ),\n      disabledKeys: disabled ? items.map((item) => item.id) : undefined,\n      items,\n      selectionMode: 'multiple'\n    })\n\n    const groupRef = useRef<HTMLDivElement>(null)\n    const containerRef = useRef<HTMLDivElement>(null)\n    const forkedRef = useForkedRef(ref, containerRef)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [inputValue, setInputValue] = useState('')\n\n    // A reset of the form puts the chips back to their first value, controlled or not, as the\n    // text fields go back to theirs, and clears what was typed and not added.\n    useFormReset(containerRef, value ?? defaultValue ?? [], (initial) => {\n      updateTags(initial)\n      setInputValue('')\n    })\n\n    // Required asks for one chip at least, which HTML has no attribute for. The text input is\n    // the field's one input a form validates (the chips' own are `type=\"hidden\"`, which is barred\n    // from it: FORMS.md, gotcha 9), so it carries the native `required` while there are no chips,\n    // as each checkbox of a required `CheckboxGroup` does while none is checked. That alone would\n    // let text through that was typed and never added: the input isn't empty, and nothing is\n    // submitted under `name`. A custom validity covers it: with no chips the input is invalid\n    // whatever its text. The message is never shown: react-aria cancels the input's `invalid`\n    // event, which keeps a browser's bubble away, and focuses the input instead. A disabled input\n    // isn't validated; the field has no read-only state to leave out.\n    //\n    // Set after each render, as the input may be a new one, in a layout effect declared before\n    // `useHeldBack`, whose own layout effect reads the validity after each render, and for an\n    // empty input too: the hook's `input` listener reads\n    // it before the render a keystroke causes, where the first character typed would have made\n    // an empty input valid.\n    const needsChip = Boolean(required) && tags.length === 0\n    useIsomorphicLayoutEffect(() => {\n      inputRef.current?.setCustomValidity(needsChip ? NEEDS_CHIP_MESSAGE : '')\n    })\n\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n\n    const focusLastChip = (extend: boolean) => {\n      if (tags.length === 0) return\n      const lastKey = ids[ids.length - 1]!\n      if (extend) {\n        listState.selectionManager.extendSelection(lastKey)\n      } else {\n        listState.selectionManager.replaceSelection(lastKey)\n      }\n      const rows = groupRef.current?.querySelectorAll<HTMLElement>('[role=\"row\"]')\n      rows?.[rows.length - 1]?.focus()\n    }\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return\n\n      if (separator && event.key === separator) {\n        event.preventDefault()\n        commitInput()\n        return\n      }\n\n      switch (event.key) {\n        case 'Enter': {\n          event.preventDefault()\n          commitInput()\n          break\n        }\n        case 'Backspace':\n        case 'Delete': {\n          if (inputValue === '') {\n            event.preventDefault()\n            focusLastChip(false)\n          }\n          break\n        }\n        // Stepping backwards out of the text field and into the chips is a *visual* movement, so\n        // the key that does it mirrors under RTL — ArrowLeft in an LTR field, ArrowRight in an RTL\n        // one, matching where the chips actually sit relative to the caret. The caret check is\n        // unchanged: `selectionStart === 0` is the start of the text in either direction.\n        case 'ArrowLeft':\n        case 'ArrowRight': {\n          const input = inputRef.current\n          if (!input) break\n          const movesBackward = (event.key === 'ArrowLeft') !== isRTL(input)\n          if (movesBackward && input.selectionStart === 0 && input.selectionEnd === 0) {\n            event.preventDefault()\n            focusLastChip(event.shiftKey)\n          }\n          break\n        }\n        case 'Escape': {\n          setInputValue('')\n          listState.selectionManager.clearSelection()\n          inputRef.current?.blur()\n          break\n        }\n        default:\n          break\n      }\n    }\n\n    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n      if (disabled || !separator) return\n      const pasted = event.clipboardData.getData('text')\n      if (!pasted.includes(separator)) return\n\n      event.preventDefault()\n      const parts = pasted.split(separator)\n\n      // Accumulate locally rather than committing per part: each commit reads `tags` from this\n      // render's closure, so several in a row within one event would all start from the same\n      // stale array instead of building on each other.\n      let next = tags\n      // `i` tracks how far the loop got, so a `maxChips` cutoff can leave everything from that\n      // point on (not just the final unsplit part) in the input instead of silently dropping it.\n      let i = 0\n      for (; i < parts.length - 1; i++) {\n        if (maxChips != null && next.length >= maxChips) break\n        const trimmed = parts[i]!.trim()\n        if (!isAddableValue(next, trimmed)) continue\n        next = [...next, trimmed]\n      }\n      if (next !== tags) updateTags(next)\n      setInputValue(parts.slice(i).join(separator))\n    }\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy,\n      ariaLabelledBy,\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { inputProps } = useTextField(\n      {\n        'aria-describedby': describedBy,\n        // The merged `labelledBy`, not the raw props: a wrapping `FloatingInput` names the field\n        // too, and react-aria puts an `aria-label` given beside `aria-labelledby` in front of it.\n        'aria-label': ariaLabel ?? (labelledBy ? undefined : 'Add value'),\n        'aria-labelledby': labelledBy,\n        id: inputId,\n        isDisabled: disabled,\n        isInvalid: invalid,\n        isRequired: required,\n        onChange: setInputValue,\n        onFocus: () => listState.selectionManager.clearSelection(),\n        onKeyDown: handleKeyDown,\n        placeholder,\n        value: inputValue\n      },\n      inputRef\n    )\n\n    return renderFormField({\n      children: (\n        <div\n          className={classNames(\n            'form-input',\n            'chip-input',\n            size,\n            { disabled },\n            validationClassName(invalid, valid),\n            className\n          )}\n          {...rest}\n          ref={forkedRef}\n        >\n          <ChipList\n            chipVariant={chipVariant}\n            disabled={disabled}\n            groupRef={groupRef}\n            onEmptyFocus={() => inputRef.current?.focus()}\n            props={{\n              'aria-label': ariaLabel,\n              'aria-labelledby': labelledBy,\n              onRemove: disabled ? undefined : removeTags\n            }}\n            size={size}\n            state={listState}\n          />\n          {/* `aria-describedby` after the spread: see `TextInput`. */}\n          <input\n            {...inputProps}\n            aria-describedby={describedBy}\n            // With no chips the native `required` says it; with chips react-aria's\n            // `aria-required` still does, of a field that stays required.\n            aria-required={needsChip ? undefined : inputProps['aria-required']}\n            className=\"ghost-input\"\n            onPaste={handlePaste}\n            ref={inputRef}\n            required={needsChip || undefined}\n          />\n          {name &&\n            items.map((item) => (\n              <input\n                disabled={disabled}\n                key={item.id}\n                name={name}\n                type=\"hidden\"\n                value={item.value}\n              />\n            ))}\n        </div>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nChipInput.displayName = 'ChipInput'\n"],"mappings":"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"}

package/dist/chunks/{collapse-CBi3RWTf.js → collapse-Bc7fnmyU.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useTransitionState-sQUQey74.js";import n,{forwardRef as r,useRef as i,useState as a}from"react";import o from"classnames";const s=e=>e===`entering`||e===`exiting`?`collapsing`:e===`entered`?`collapse show`:`collapse`,c=r(({children:r,className:c,horizontal:l,onHide:u,onShow:d,style:f,visible:p,...m},h)=>{let[g,_]=a(),v=i(null),y=e(h,v),b=l?`width`:`height`,{phase:x}=t({in:!!p,nodeRef:v,onEntering:()=>{d?.();let e=v.current;e&&_(l?e.scrollWidth:e.scrollHeight)},onEntered:()=>_(void 0),onExit:()=>{let e=v.current;e&&_(e.getBoundingClientRect()[b])},onExiting:()=>{u?.(),v.current?.offsetHeight,_(void 0)},onExited:()=>_(void 0)});return/* @__PURE__ */ n.createElement(`div`,{className:o({"collapse-horizontal":l},c,s(x)),style:g?{...f,[b]:g}:f,...m,ref:y},r)});c.displayName=`Collapse`;export{c as t};
-//# sourceMappingURL=collapse-CBi3RWTf.js.map
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useTransitionState-WEw9C0yn.js";import n,{forwardRef as r,useRef as i,useState as a}from"react";import o from"classnames";const s=e=>e===`entering`||e===`exiting`?`collapsing`:e===`entered`?`collapse show`:`collapse`,c=r(({children:r,className:c,horizontal:l,onHide:u,onShow:d,style:f,visible:p,...m},h)=>{let[g,_]=a(),v=i(null),y=e(h,v),b=l?`width`:`height`,{phase:x}=t({in:!!p,nodeRef:v,onEntering:()=>{d?.();let e=v.current;e&&_(l?e.scrollWidth:e.scrollHeight)},onEntered:()=>_(void 0),onExit:()=>{let e=v.current;e&&_(e.getBoundingClientRect()[b])},onExiting:()=>{u?.(),v.current?.offsetHeight,_(void 0)},onExited:()=>_(void 0)});return/* @__PURE__ */ n.createElement(`div`,{className:o({"collapse-horizontal":l},c,s(x)),style:g?{...f,[b]:g}:f,...m,ref:y},r)});c.displayName=`Collapse`;export{c as t};
+//# sourceMappingURL=collapse-Bc7fnmyU.js.map

package/dist/chunks/{collapse-CBi3RWTf.js.map → collapse-Bc7fnmyU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"collapse-CBi3RWTf.js","names":["useForkedRef","React","classNames","getTransitionClass","phase","Collapse","forwardRef","rest","size","setSize","useState","collapseRef","useRef","forkedRef","ref","dimension","horizontal","useTransitionState","visible","onShow","node","onHide","className","style","children"],"sources":["../../src/components/collapse/Collapse.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, useRef, useState } from 'react'\nimport classNames from 'classnames'\n\nimport { TransitionPhase, useForkedRef, useTransitionState } from '../../hooks'\n\nexport interface CollapseProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Set horizontal collapsing to transition the width instead of height.\n   */\n  horizontal?: boolean\n  /**\n   * Callback fired when the component requests to be hidden.\n   */\n  onHide?: () => void\n  /**\n   * Callback fired when the component requests to be shown.\n   */\n  onShow?: () => void\n  /**\n   * Toggle the visibility of component.\n   */\n  visible?: boolean\n}\n\nconst getTransitionClass = (phase: TransitionPhase) =>\n  phase === 'entering' || phase === 'exiting'\n    ? 'collapsing'\n    : phase === 'entered'\n      ? 'collapse show'\n      : 'collapse'\n\n// chassis-css animates the size itself and needs both ends of it as lengths: `.collapsing` is 0,\n// and the content's own size is `auto`, which a transition can't start from or end at. So the\n// open end is measured and set inline for as long as the transition runs, the way chassis-css's\n// own collapse plugin does it.\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>(\n  ({ children, className, horizontal, onHide, onShow, style, visible, ...rest }, ref) => {\n    const [size, setSize] = useState<number>()\n    const collapseRef = useRef<HTMLDivElement>(null)\n    const forkedRef = useForkedRef(ref, collapseRef)\n    const dimension = horizontal ? 'width' : 'height'\n\n    const { phase } = useTransitionState({\n      in: !!visible,\n      nodeRef: collapseRef,\n      // Reading the content's size also computes the 0 of `.collapsing`, which the transition\n      // starts from.\n      onEntering: () => {\n        onShow?.()\n        const node = collapseRef.current\n        if (node) setSize(horizontal ? node.scrollWidth : node.scrollHeight)\n      },\n      onEntered: () => setSize(undefined),\n      // Still open here: pin the size it has, as a length.\n      onExit: () => {\n        const node = collapseRef.current\n        if (node) setSize(node.getBoundingClientRect()[dimension])\n      },\n      // Pinned and `.collapsing` now. Compute that, then let go, and it shrinks to 0.\n      onExiting: () => {\n        onHide?.()\n        void collapseRef.current?.offsetHeight\n        setSize(undefined)\n      },\n      onExited: () => setSize(undefined)\n    })\n\n    return (\n      <div\n        className={classNames(\n          { 'collapse-horizontal': horizontal },\n          className,\n          getTransitionClass(phase)\n        )}\n        style={size ? { ...style, [dimension]: size } : style}\n        {...rest}\n        ref={forkedRef}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n\nCollapse.displayName = 'Collapse'\n"],"mappings":"A,0NA4BA,MAAMG,EAAsB,GAC1BC,IAAU,YAAcA,IAAU,UAC9B,aACAA,IAAU,UACR,gBACA,WAMKC,EAAWC,GACrB,CAAE,WAAU,YAAW,aAAY,SAAQ,SAAQ,QAAO,UAAS,GAAGC,GAAQ,IAAQ,CACrF,GAAM,CAACC,EAAMC,GAAWC,EAAiB,EACnCC,EAAcC,EAAuB,IAAI,EACzCC,EAAYb,EAAac,EAAKH,CAAW,EACzCI,EAAYC,EAAa,QAAU,SAEnC,CAAE,SAAUC,EAAmB,CACnC,GAAI,CAAC,CAACC,EACN,QAASP,EAGT,eAAkB,CAChBQ,IAAS,EACT,IAAMC,EAAOT,EAAY,QACrBS,GAAMX,EAAQO,EAAaI,EAAK,YAAcA,EAAK,YAAY,CACrE,EACA,cAAiBX,EAAQ,IAAA,EAAS,EAElC,WAAc,CACZ,IAAMW,EAAOT,EAAY,QACrBS,GAAMX,EAAQW,EAAK,sBAAsB,CAAC,CAACL,EAAU,CAC3D,EAEA,cAAiB,CACfM,IAAS,EACTV,EAAiB,SAAS,aAC1BF,EAAQ,IAAA,EAAS,CACnB,EACA,aAAgBA,EAAQ,IAAA,EAAS,CACnC,CAAC,EAED,MACE,kBAAA,cAAC,MAAD,CACE,UAAWP,EACT,CAAE,sBAAuBc,CAAW,EACpCM,EACAnB,EAAmBC,CAAK,CAC1B,EACA,MAAOI,EAAO,CAAE,GAAGe,GAAQR,GAAYP,CAAK,EAAIe,EAChD,GAAIhB,EACJ,IAAKM,CAGF,EADFW,CACE,CAET,CACF,EAEA,EAAS,YAAc,W"}
+{"version":3,"file":"collapse-Bc7fnmyU.js","names":["useForkedRef","React","classNames","getTransitionClass","phase","Collapse","forwardRef","rest","size","setSize","useState","collapseRef","useRef","forkedRef","ref","dimension","horizontal","useTransitionState","visible","onShow","node","onHide","className","style","children"],"sources":["../../src/components/collapse/Collapse.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, useRef, useState } from 'react'\nimport classNames from 'classnames'\n\nimport { TransitionPhase, useForkedRef, useTransitionState } from '../../hooks'\n\nexport interface CollapseProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Set horizontal collapsing to transition the width instead of height.\n   */\n  horizontal?: boolean\n  /**\n   * Callback fired when the component requests to be hidden.\n   */\n  onHide?: () => void\n  /**\n   * Callback fired when the component requests to be shown.\n   */\n  onShow?: () => void\n  /**\n   * Toggle the visibility of component.\n   */\n  visible?: boolean\n}\n\nconst getTransitionClass = (phase: TransitionPhase) =>\n  phase === 'entering' || phase === 'exiting'\n    ? 'collapsing'\n    : phase === 'entered'\n      ? 'collapse show'\n      : 'collapse'\n\n// chassis-css animates the size itself and needs both ends of it as lengths: `.collapsing` is 0,\n// and the content's own size is `auto`, which a transition can't start from or end at. So the\n// open end is measured and set inline for as long as the transition runs, the way chassis-css's\n// own collapse plugin does it.\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>(\n  ({ children, className, horizontal, onHide, onShow, style, visible, ...rest }, ref) => {\n    const [size, setSize] = useState<number>()\n    const collapseRef = useRef<HTMLDivElement>(null)\n    const forkedRef = useForkedRef(ref, collapseRef)\n    const dimension = horizontal ? 'width' : 'height'\n\n    const { phase } = useTransitionState({\n      in: !!visible,\n      nodeRef: collapseRef,\n      // Reading the content's size also computes the 0 of `.collapsing`, which the transition\n      // starts from.\n      onEntering: () => {\n        onShow?.()\n        const node = collapseRef.current\n        if (node) setSize(horizontal ? node.scrollWidth : node.scrollHeight)\n      },\n      onEntered: () => setSize(undefined),\n      // Still open here: pin the size it has, as a length.\n      onExit: () => {\n        const node = collapseRef.current\n        if (node) setSize(node.getBoundingClientRect()[dimension])\n      },\n      // Pinned and `.collapsing` now. Compute that, then let go, and it shrinks to 0.\n      onExiting: () => {\n        onHide?.()\n        void collapseRef.current?.offsetHeight\n        setSize(undefined)\n      },\n      onExited: () => setSize(undefined)\n    })\n\n    return (\n      <div\n        className={classNames(\n          { 'collapse-horizontal': horizontal },\n          className,\n          getTransitionClass(phase)\n        )}\n        style={size ? { ...style, [dimension]: size } : style}\n        {...rest}\n        ref={forkedRef}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n\nCollapse.displayName = 'Collapse'\n"],"mappings":"A,0NA4BA,MAAMG,EAAsB,GAC1BC,IAAU,YAAcA,IAAU,UAC9B,aACAA,IAAU,UACR,gBACA,WAMKC,EAAWC,GACrB,CAAE,WAAU,YAAW,aAAY,SAAQ,SAAQ,QAAO,UAAS,GAAGC,GAAQ,IAAQ,CACrF,GAAM,CAACC,EAAMC,GAAWC,EAAiB,EACnCC,EAAcC,EAAuB,IAAI,EACzCC,EAAYb,EAAac,EAAKH,CAAW,EACzCI,EAAYC,EAAa,QAAU,SAEnC,CAAE,SAAUC,EAAmB,CACnC,GAAI,CAAC,CAACC,EACN,QAASP,EAGT,eAAkB,CAChBQ,IAAS,EACT,IAAMC,EAAOT,EAAY,QACrBS,GAAMX,EAAQO,EAAaI,EAAK,YAAcA,EAAK,YAAY,CACrE,EACA,cAAiBX,EAAQ,IAAA,EAAS,EAElC,WAAc,CACZ,IAAMW,EAAOT,EAAY,QACrBS,GAAMX,EAAQW,EAAK,sBAAsB,CAAC,CAACL,EAAU,CAC3D,EAEA,cAAiB,CACfM,IAAS,EACTV,EAAiB,SAAS,aAC1BF,EAAQ,IAAA,EAAS,CACnB,EACA,aAAgBA,EAAQ,IAAA,EAAS,CACnC,CAAC,EAED,MACE,kBAAA,cAAC,MAAD,CACE,UAAWP,EACT,CAAE,sBAAuBc,CAAW,EACpCM,EACAnB,EAAmBC,CAAK,CAC1B,EACA,MAAOI,EAAO,CAAE,GAAGe,GAAQR,GAAYP,CAAK,EAAIe,EAChD,GAAIhB,EACJ,IAAKM,CAGF,EADFW,CACE,CAET,CACF,EAEA,EAAS,YAAc,W"}

package/dist/chunks/color-input-DBOd4Jba.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useFormField-q21MOgh8.js";import{t as n}from"./useFormReset-BK5Yb24_.js";import{t as r}from"./useHeldBack-o-CsPcSe.js";import{t as i}from"./renderFormField-CaZ8-xrn.js";import{t as a}from"./validationClassName-gRGs4KBm.js";import{t as o}from"./nativeFormReset-DgsRU9SA.js";import s,{forwardRef as c,useRef as l}from"react";import u from"classnames";const d=c(({className:c,help:d,id:f,invalid:p,invalidFeedback:m,label:h,size:g,valid:_,validFeedback:v,...y},b)=>{let x=l(null),S=e(b,x),{invalid:C,valid:w}=r(x,{invalid:p,valid:_});n(x,y.value??y.defaultValue,e=>{e!==void 0&&x.current&&o(x.current,e)},y.form);let{describedBy:T,feedbackId:E,helpId:D,inputId:O,labelId:k,labelledBy:A}=t({ariaDescribedBy:y[`aria-describedby`],ariaLabelledBy:y[`aria-labelledby`],help:d,id:f,invalid:C,invalidFeedback:m,label:h,valid:w,validFeedback:v}),j=u(`form-input`,g,a(C,w),c);return i({children:/* @__PURE__ */ s.createElement(`input`,{...y,"aria-describedby":T,"aria-labelledby":y[`aria-labelledby`]&&A,"aria-invalid":C||void 0,className:j,id:O,ref:S,type:`color`}),help:d,ids:{feedback:E,help:D,input:O,label:k},invalid:C,invalidFeedback:m,label:h,valid:w,validFeedback:v})});d.displayName=`ColorInput`;export{d as t};
+//# sourceMappingURL=color-input-DBOd4Jba.js.map

package/dist/chunks/color-input-DBOd4Jba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-input-DBOd4Jba.js","names":["useForkedRef","useFormReset","useHeldBack","renderFormField","validationClassName","resetNativeControl","React","classNames","ColorInput","forwardRef","invalidProp","validProp","rest","inputRef","useRef","forkedRef","ref","initial","useFormField","_className","size","invalid","valid","className","describedBy","labelledBy","inputId","feedbackId","helpId","labelId"],"sources":["../../src/components/color-input/ColorInput.tsx"],"sourcesContent":["import React, {\n  ChangeEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef, useFormField, useFormReset, useHeldBack } from '../../hooks'\nimport { resetNativeControl } from '../../utils/nativeFormReset'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\n// No `placeholder` or `readOnly`: neither applies to `type=\"color\"`.\nexport interface ColorInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'placeholder' | 'readOnly' | 'size'\n> {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the input, uncontrolled.\n   */\n  defaultValue?: string\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the input.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the input when `invalid` is set.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this input.\n   */\n  label?: ReactNode\n  /**\n   * Method called immediately after the `value` prop changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the input when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The `value` attribute of component.\n   *\n   * @controllable onChange\n   * */\n  value?: string\n}\n\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n  (\n    {\n      className,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      size,\n      valid: validProp,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n    // A color input always has a value and holds no form back, but a `validated` form shows it\n    // as valid (`useHeldBack`).\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n\n    // A reset of the form puts the input back to its first value, controlled or not, and reports\n    // it (`resetNativeControl`). With no value known, the browser's own reset stands.\n    useFormReset(\n      inputRef,\n      rest.value ?? rest.defaultValue,\n      (initial) => {\n        if (initial !== undefined && inputRef.current) resetNativeControl(inputRef.current, initial)\n      },\n      rest.form\n    )\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const _className = classNames(\n      'form-input',\n      size,\n      validationClassName(invalid, valid),\n      className\n    )\n\n    return renderFormField({\n      children: (\n        <input\n          {...rest}\n          aria-describedby={describedBy}\n          // A caller's `aria-labelledby` adds to the visible label, as in `TextInput`, rather than\n          // taking its place: it outranks the `<label for>`.\n          aria-labelledby={rest['aria-labelledby'] && labelledBy}\n          aria-invalid={invalid || undefined}\n          className={_className}\n          id={inputId}\n          ref={forkedRef}\n          type=\"color\"\n        />\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nColorInput.displayName = 'ColorInput'\n"],"mappings":"A,6bAuEA,MAAaQ,EAAaC,GAEtB,CACE,YACA,OACA,KACA,QAASC,EACT,kBACA,QACA,OACA,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWC,EAAyB,IAAI,EACxCC,EAAYf,EAAagB,EAAKH,CAAQ,EAGtC,CAAE,UAAS,SAAUX,EAAYW,EAAU,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAI3FV,EACEY,EACAD,EAAK,OAASA,EAAK,aAClB,GAAY,CACPK,IAAY,IAAA,IAAaJ,EAAS,SAASR,EAAmBQ,EAAS,QAASI,CAAO,CAC7F,EACAL,EAAK,IACP,EAEA,GAAM,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeM,EAAa,CACrF,gBAAiBN,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEKO,EAAaZ,EACjB,aACAa,EACAhB,EAAoBiB,EAASC,CAAK,EAClCC,CACF,EAEA,OAAOpB,EAAgB,CACrB,SACE,kBAAA,cAAC,QAAD,CACE,GAAIS,EACJ,mBAAkBY,EAGlB,kBAAiBZ,EAAK,oBAAsBa,EAC5C,eAAcJ,GAAW,IAAA,GACzB,UAAWF,EACX,GAAIO,EACJ,IAAKX,EACL,KAAK,OACN,CAAA,EAEH,OACA,IAAK,CAAE,SAAUY,EAAY,KAAMC,EAAQ,MAAOF,EAAS,MAAOG,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAW,YAAc,a"}

package/dist/chunks/combobox-DByuUtwh.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{c as ee}from"./slot-DagH0Gxq.js";import{t as te}from"./useForkedRef-WoqMqsWE.js";import{t as ne}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{t as re}from"./useHydrated-Dud4JEwp.js";import{i as ie,r as ae,s as oe,t as e}from"./overlayPlacement-D2vfhhg3.js";import{t}from"./useFormField-q21MOgh8.js";import{t as n}from"./useOverlayMaxHeight-5UnurH0W.js";import{t as r}from"./useHeldBack-o-CsPcSe.js";import{a as i,i as a,n as o,o as s,r as c,t as l}from"./ComboboxListBox-Db0rSM3w.js";import{t as u}from"./Portal-BTDylxAi.js";import{t as d}from"./renderFormField-CaZ8-xrn.js";import{t as se}from"./validationClassName-gRGs4KBm.js";import f,{forwardRef as p,useId as ce,useMemo as m,useRef as h}from"react";import g from"classnames";import{useComboBox as le,useFilter as ue,useOverlayPosition as de}from"react-aria";import{useComboBoxState as _}from"react-stately";const v=ee=>null;v.displayName=`ComboboxGroup`;const y=p(({"aria-describedby":p,"aria-label":y,"aria-labelledby":b,children:x,className:S,defaultValue:C,disabled:w,help:T,id:E,invalid:D,invalidFeedback:O,items:k,label:A,name:j,noResultsText:M=`No results found`,onChange:N,placeholder:P,required:F,size:I,valid:L,validFeedback:R,value:z,...B},V)=>{let H=m(()=>k?c(k):o(x,{Group:v,Item:s}),[k,x]),fe=m(()=>i(H),[H]),{contains:pe}=ue({sensitivity:`base`}),U=_({children:a,defaultItems:H,disabledKeys:fe,defaultFilter:pe,defaultValue:C,value:z,onChange:N,allowsEmptyCollection:!0,menuTrigger:`focus`}),W=h(null),me=te(V,W),G=h(null),K=h(null),he=!!F&&U.value==null;ne(()=>{G.current?.setCustomValidity(he?`Select an option from the list.`:``)});let{invalid:q,valid:J}=r(G,{invalid:D,valid:L}),Y=h(null),X=ce(),ge=re(),{describedBy:_e,feedbackId:ve,helpId:ye,inputId:Z,labelId:be,labelledBy:xe}=t({ariaDescribedBy:p,ariaLabelledBy:b,help:T,id:E,invalid:q,invalidFeedback:O,label:A,valid:J,validFeedback:R}),{inputProps:Q,listBoxProps:Se}=le({"aria-label":y,"aria-labelledby":xe,id:Z,inputRef:G,listBoxRef:K,popoverRef:Y,isDisabled:w,isRequired:F,placeholder:P},U),{overlayProps:Ce,placement:we}=de({targetRef:W,overlayRef:Y,placement:ie(`bottom-start`),offset:2,isOpen:U.isOpen,onClose:null});n(Y,U.isOpen);let Te=oe({close:U.close,isOpen:U.isOpen,triggerRef:W}),{menuStyle:Ee,placementAttr:De}=ae(Ce.style,`bottom-start`,we),Oe={...e,...Ee},ke=Q,$=U.collection.size===0,Ae=ee(_e,$&&ge&&X);return d({children:/* @__PURE__ */ f.createElement(f.Fragment,null,/* @__PURE__ */ f.createElement(`div`,{className:g(`form-input`,`combobox`,I,{disabled:w},se(q,J),S),ref:me,...B},/* @__PURE__ */ f.createElement(`input`,{autoComplete:`off`,className:`combobox-value`,...ke,"aria-describedby":Ae,"aria-invalid":q||void 0,"aria-required":void 0,ref:G,required:F||void 0})),/* @__PURE__ */ f.createElement(u,{container:Te},/* @__PURE__ */ f.createElement(`div`,{className:g(`menu`,{show:U.isOpen}),"data-cx-placement":De,style:Oe,hidden:!U.isOpen,ref:Y},/* @__PURE__ */ f.createElement(l,{state:U,listBoxProps:Se,listBoxRef:K}),$&&/* @__PURE__ */ f.createElement(`div`,{className:`combobox-no-results`,id:X,role:`status`},M))),j&&/* @__PURE__ */ f.createElement(`input`,{type:`hidden`,name:j,value:U.value??``,disabled:w})),help:T,ids:{feedback:ve,help:ye,input:Z,label:be},invalid:q,invalidFeedback:O,label:A,valid:J,validFeedback:R})});y.displayName=`Combobox`;export{v as n,y as t};
+//# sourceMappingURL=combobox-DByuUtwh.js.map

package/dist/chunks/{combobox-BQh3uJWB.js.map → combobox-DByuUtwh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-BQh3uJWB.js","names":["joinIds","useForkedRef","useIsomorphicLayoutEffect","useHydrated","useFloatingOverlay","useFormField","useOverlayMaxHeight","toAriaPlacement","resolveMenuOverlayPositioning","COMBOBOX_MENU_OVERLAY_STYLE","useHeldBack","getDisabledKeys","comboboxCollectionChildren","buildEntriesFromChildren","ComboboxItem","buildEntriesFromItemsDef","ComboboxListBox","Portal","renderFormField","validationClassName","React","classNames","ComboboxGroup","Combobox","forwardRef","ariaDescribedBy","ariaLabel","ariaLabelledBy","invalidProp","validProp","rest","entries","useMemo","items","children","disabledKeys","useFilter","state","useComboBoxState","contains","wrapperRef","useRef","forkedWrapperRef","ref","inputRef","listBoxRef","unselected","required","popoverRef","noResultsId","useId","hydrated","useComboBox","labelledBy","inputId","disabled","resolvedPlacement","useOverlayPosition","portalContainer","overlayProps","overlayStyle","menuStyle","inputHtmlProps","inputProps","showNoResults","inputDescribedBy","describedBy","size","invalid","valid","className","placementAttr","noResultsText","name","feedbackId","helpId","labelId"],"sources":["../../src/components/combobox/ComboboxGroup.tsx","../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nexport interface ComboboxGroupProps {\n  /**\n   * Items belonging to this group.\n   */\n  children: ReactNode\n  /**\n   * Header content for the group (`.menu-header`).\n   */\n  label: ReactNode\n}\n\n// `ComboboxGroup` is never actually mounted — like `ComboboxItem`, it's read as data by\n// `Combobox`, which splits its top-level children into groups (wrapping react-stately\n// `Section` nodes) and bare items. Groups and bare items can be mixed at the top level:\n//\n//   <Combobox aria-label=\"Language\">\n//     <ComboboxGroup label=\"Frontend\">\n//       <ComboboxItem id=\"html\">HTML</ComboboxItem>\n//       <ComboboxItem id=\"css\">CSS</ComboboxItem>\n//     </ComboboxGroup>\n//     <ComboboxItem id=\"python\">Python</ComboboxItem>\n//   </Combobox>\nexport const ComboboxGroup = (_props: ComboboxGroupProps): null => null\n\nComboboxGroup.displayName = 'ComboboxGroup'\n","import React, {\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n  useId,\n  useMemo,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport { useComboBox, useFilter, useOverlayPosition } from 'react-aria'\nimport { Key, useComboBoxState } from 'react-stately'\n\nimport {\n  useFloatingOverlay,\n  useForkedRef,\n  useFormField,\n  useHeldBack,\n  useIsomorphicLayoutEffect,\n  useOverlayMaxHeight\n} from '../../hooks'\nimport { useHydrated } from '../../hooks/useHydrated'\nimport { joinIds } from '../../utils/idRefs'\nimport {\n  buildEntriesFromChildren,\n  buildEntriesFromItemsDef,\n  ComboboxEntry,\n  comboboxCollectionChildren,\n  getDisabledKeys\n} from './comboboxCollection'\nimport {\n  COMBOBOX_MENU_OVERLAY_STYLE,\n  resolveMenuOverlayPositioning,\n  toAriaPlacement\n} from '../../utils/overlayPlacement'\nimport { Portal } from '../portal/Portal'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { MenuItemsDef } from '../menu/MenuItemDef'\nimport { ComboboxGroup } from './ComboboxGroup'\nimport { ComboboxItem } from './ComboboxItem'\nimport { ComboboxListBox } from './ComboboxListBox'\n\nexport interface ComboboxProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the combobox, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the combobox.\n   */\n  'aria-labelledby'?: string\n  /**\n   * `ComboboxItem` elements, optionally wrapped in `ComboboxGroup` — read as data by\n   * `Combobox` to build the option list. Not rendered directly. Ignored when `items` is set.\n   */\n  children?: ReactNode\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The initial selected option's id (uncontrolled).\n   */\n  defaultValue?: Key | null\n  /**\n   * Prevents the combobox from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the combobox.\n   */\n  help?: ReactNode\n  /**\n   * `id` forwarded to the input element — useful for pairing with a `<label for>`.\n   */\n  id?: string\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the combobox when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * Array of item/header/divider definitions for data-driven rendering. When provided, children\n   * are ignored. A `'header'` entry starts a group that all following items join until the next\n   * header or the end of the array. `'divider'` entries are a no-op here (dividers aren't\n   * meaningful for a listbox/option collection) — use `ComboboxGroup` composition instead if\n   * you need finer control over grouping. An entry's `href`/`onClick` are `Menu`-only and are not\n   * read here — use `onChange` to react to the selection instead.\n   */\n  items?: MenuItemsDef\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the input.\n   */\n  label?: ReactNode\n  /**\n   * `name` of an auto-created hidden input, kept in sync with the selection, for native form\n   * submission. Omit to skip creating one.\n   */\n  name?: string\n  /**\n   * Text shown in the listbox when no options match the current query.\n   */\n  noResultsText?: ReactNode\n  /**\n   * Callback fired when the selected option changes.\n   */\n  onChange?: (value: Key | null) => void\n  /**\n   * Placeholder shown in the input when nothing is selected.\n   */\n  placeholder?: string\n  /**\n   * Toggle the required state for the component. A required combobox with no option selected\n   * holds its form back from submitting, and takes focus: text typed without selecting an option\n   * is not a value.\n   */\n  required?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the combobox when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The selected option's id (controlled).\n   */\n  value?: Key | null\n}\n\n// See `unselected`.\nconst UNSELECTED_TEXT_MESSAGE = 'Select an option from the list.'\n\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      className,\n      defaultValue,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      items,\n      label,\n      name,\n      noResultsText = 'No results found',\n      onChange,\n      placeholder,\n      required,\n      size,\n      valid: validProp,\n      validFeedback,\n      value,\n      ...rest\n    }: ComboboxProps,\n    ref\n  ): ReactNode => {\n    // `entries`/`disabledKeys` only need to change when the data driving them does — without this,\n    // both re-derive from scratch on every render, including every keystroke while typing.\n    const entries = useMemo(\n      () =>\n        items\n          ? buildEntriesFromItemsDef(items)\n          : buildEntriesFromChildren(children, { Group: ComboboxGroup, Item: ComboboxItem }),\n      [items, children]\n    )\n    const disabledKeys = useMemo(() => getDisabledKeys(entries), [entries])\n\n    // Case- and accent-insensitive substring matching, mirroring chassis-css's own\n    // always-case-insensitive combobox.js filtering.\n    const { contains } = useFilter({ sensitivity: 'base' })\n\n    const state = useComboBoxState<ComboboxEntry>({\n      children: comboboxCollectionChildren,\n      defaultItems: entries,\n      disabledKeys,\n      defaultFilter: contains,\n      defaultValue,\n      value,\n      onChange,\n      allowsEmptyCollection: true,\n      // Matches chassis-css's vanilla combobox.js: the menu opens on focus, not only once the\n      // user starts typing.\n      menuTrigger: 'focus'\n    })\n\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const forkedWrapperRef = useForkedRef(ref, wrapperRef)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const listBoxRef = useRef<HTMLElement>(null)\n\n    // `required` asks for what the form submits under `name`: the selected option's id, not the\n    // text in the input. The native attribute on the input covers an empty one, and the two agree\n    // nearly always, since react-stately puts the selection's text back, none without one, when\n    // the list closes: on blur, Enter and Escape. Not while the user is still typing, though, and\n    // a form submitted then (a shortcut or a timer that calls `requestSubmit()`) would go with\n    // text in the input and nothing under `name`. A custom validity covers that: with nothing\n    // selected the input is invalid whatever its text. The message is never shown: react-aria\n    // cancels the input's `invalid` event, which keeps a browser's bubble away, and focuses the\n    // input instead.\n    //\n    // Set after each render, as the input may be a new one, in a layout effect declared before\n    // `useHeldBack`, whose own layout effect reads the validity after each render, and for an\n    // empty input too: the hook's `input` listener reads\n    // it before the render a keystroke causes, where the first character typed would have made\n    // an empty input valid.\n    const unselected = Boolean(required) && state.value == null\n    useIsomorphicLayoutEffect(() => {\n      inputRef.current?.setCustomValidity(unselected ? UNSELECTED_TEXT_MESSAGE : '')\n    })\n\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n    const popoverRef = useRef<HTMLDivElement>(null)\n    const noResultsId = useId()\n    const hydrated = useHydrated()\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy,\n      ariaLabelledBy,\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { inputProps, listBoxProps } = useComboBox<ComboboxEntry>(\n      {\n        'aria-label': ariaLabel,\n        'aria-labelledby': labelledBy,\n        id: inputId,\n        inputRef,\n        listBoxRef,\n        popoverRef,\n        isDisabled: disabled,\n        isRequired: required,\n        placeholder\n      },\n      state\n    )\n\n    const { overlayProps, placement: resolvedPlacement } = useOverlayPosition({\n      targetRef: wrapperRef,\n      overlayRef: popoverRef,\n      placement: toAriaPlacement('bottom-start'),\n      offset: 2,\n      isOpen: state.isOpen,\n      // Leaving `onClose` unset doesn't actually disable react-aria's close-on-scroll listener —\n      // only an explicit `null` does. Matches the fix already applied to `Autocomplete`'s identical\n      // positioning call.\n      onClose: null\n    })\n    useOverlayMaxHeight(popoverRef, state.isOpen)\n\n    // Portals the panel to `document.body` (or an enclosing open `<dialog>`) instead of rendering\n    // it inline, matching `Popover`/`Tooltip` — an inline-rendered panel gets clipped by any\n    // ancestor with `overflow: hidden`/`auto` (a `ModalBody`, a scrollable card, a table cell), and\n    // `Combobox` is commonly composed inside exactly those. See `COMBOBOX_MENU_OVERLAY_STYLE` for\n    // the styling this trades away by leaving the DOM position `.combobox + .menu` relies on.\n    const portalContainer = useFloatingOverlay({\n      close: state.close,\n      isOpen: state.isOpen,\n      triggerRef: wrapperRef\n    })\n\n    const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(\n      overlayProps.style,\n      'bottom-start',\n      resolvedPlacement\n    )\n    const overlayStyle: React.CSSProperties = { ...COMBOBOX_MENU_OVERLAY_STYLE, ...menuStyle }\n\n    const inputHtmlProps = inputProps as InputHTMLAttributes<HTMLInputElement>\n    const showNoResults = state.collection.size === 0\n    // Merges the no-results message into the input's own description (for AT that reads\n    // descriptions on demand) in addition to the `aria-live` region below (for AT that announces\n    // live-region changes proactively as the user types) — belt and braces, since screen reader\n    // support for announcing a freshly-mounted live region is inconsistent. Only once hydrated:\n    // the message is inside `Portal`, which renders nothing on the server and while hydrating, so\n    // an empty combobox's server HTML referred to an id no element had.\n    const inputDescribedBy = joinIds(describedBy, showNoResults && hydrated && noResultsId)\n\n    return renderFormField({\n      children: (\n        <>\n          <div\n            className={classNames(\n              'form-input',\n              'combobox',\n              size,\n              { disabled },\n              validationClassName(invalid, valid),\n              className\n            )}\n            ref={forkedWrapperRef}\n            {...rest}\n          >\n            <input\n              autoComplete=\"off\"\n              className=\"combobox-value\"\n              {...inputHtmlProps}\n              aria-describedby={inputDescribedBy}\n              aria-invalid={invalid || undefined}\n              // The native `required` below says the same.\n              aria-required={undefined}\n              ref={inputRef}\n              // On the visible input, not the hidden one that carries `name`: a hidden input is\n              // barred from constraint validation (FORMS.md, gotcha 9). react-aria writes\n              // `aria-required` alone, which no form checks. A disabled input isn't validated;\n              // the combobox has no read-only state to leave out.\n              required={required || undefined}\n            />\n          </div>\n          <Portal container={portalContainer}>\n            <div\n              className={classNames('menu', { show: state.isOpen })}\n              data-cx-placement={placementAttr}\n              style={overlayStyle}\n              hidden={!state.isOpen}\n              ref={popoverRef}\n            >\n              <ComboboxListBox state={state} listBoxProps={listBoxProps} listBoxRef={listBoxRef} />\n              {showNoResults && (\n                <div className=\"combobox-no-results\" id={noResultsId} role=\"status\">\n                  {noResultsText}\n                </div>\n              )}\n            </div>\n          </Portal>\n          {name && (\n            <input type=\"hidden\" name={name} value={state.value ?? ''} disabled={disabled} />\n          )}\n        </>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nCombobox.displayName = 'Combobox'\n"],"mappings":"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"}
+{"version":3,"file":"combobox-DByuUtwh.js","names":["joinIds","useForkedRef","useIsomorphicLayoutEffect","useHydrated","toAriaPlacement","resolveMenuOverlayPositioning","useFloatingOverlay","COMBOBOX_MENU_OVERLAY_STYLE","useOverlayMaxHeight","useHeldBack","getDisabledKeys","comboboxCollectionChildren","buildEntriesFromChildren","ComboboxItem","buildEntriesFromItemsDef","ComboboxListBox","Portal","renderFormField","validationClassName","React","classNames","ComboboxGroup","Combobox","forwardRef","ariaDescribedBy","ariaLabel","ariaLabelledBy","invalidProp","validProp","rest","entries","useMemo","items","children","disabledKeys","useFilter","state","useComboBoxState","contains","wrapperRef","useRef","forkedWrapperRef","ref","inputRef","listBoxRef","unselected","required","popoverRef","noResultsId","useId","hydrated","useFormField","useComboBox","labelledBy","inputId","disabled","resolvedPlacement","useOverlayPosition","portalContainer","overlayProps","overlayStyle","menuStyle","inputHtmlProps","inputProps","showNoResults","inputDescribedBy","describedBy","size","invalid","valid","className","placementAttr","noResultsText","name","feedbackId","helpId","labelId"],"sources":["../../src/components/combobox/ComboboxGroup.tsx","../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nexport interface ComboboxGroupProps {\n  /**\n   * Items belonging to this group.\n   */\n  children: ReactNode\n  /**\n   * Header content for the group (`.menu-header`).\n   */\n  label: ReactNode\n}\n\n// `ComboboxGroup` is never actually mounted — like `ComboboxItem`, it's read as data by\n// `Combobox`, which splits its top-level children into groups (wrapping react-stately\n// `Section` nodes) and bare items. Groups and bare items can be mixed at the top level:\n//\n//   <Combobox aria-label=\"Language\">\n//     <ComboboxGroup label=\"Frontend\">\n//       <ComboboxItem id=\"html\">HTML</ComboboxItem>\n//       <ComboboxItem id=\"css\">CSS</ComboboxItem>\n//     </ComboboxGroup>\n//     <ComboboxItem id=\"python\">Python</ComboboxItem>\n//   </Combobox>\nexport const ComboboxGroup = (_props: ComboboxGroupProps): null => null\n\nComboboxGroup.displayName = 'ComboboxGroup'\n","import React, {\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n  useId,\n  useMemo,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport { useComboBox, useFilter, useOverlayPosition } from 'react-aria'\nimport { Key, useComboBoxState } from 'react-stately'\n\nimport {\n  useFloatingOverlay,\n  useForkedRef,\n  useFormField,\n  useHeldBack,\n  useIsomorphicLayoutEffect,\n  useOverlayMaxHeight\n} from '../../hooks'\nimport { useHydrated } from '../../hooks/useHydrated'\nimport { joinIds } from '../../utils/idRefs'\nimport {\n  buildEntriesFromChildren,\n  buildEntriesFromItemsDef,\n  ComboboxEntry,\n  comboboxCollectionChildren,\n  getDisabledKeys\n} from './comboboxCollection'\nimport {\n  COMBOBOX_MENU_OVERLAY_STYLE,\n  resolveMenuOverlayPositioning,\n  toAriaPlacement\n} from '../../utils/overlayPlacement'\nimport { Portal } from '../portal/Portal'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { MenuItemsDef } from '../menu/MenuItemDef'\nimport { ComboboxGroup } from './ComboboxGroup'\nimport { ComboboxItem } from './ComboboxItem'\nimport { ComboboxListBox } from './ComboboxListBox'\n\nexport interface ComboboxProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the combobox, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the combobox.\n   */\n  'aria-labelledby'?: string\n  /**\n   * `ComboboxItem` elements, optionally wrapped in `ComboboxGroup` — read as data by\n   * `Combobox` to build the option list. Not rendered directly. Ignored when `items` is set.\n   */\n  children?: ReactNode\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The initial selected option's id (uncontrolled).\n   */\n  defaultValue?: Key | null\n  /**\n   * Prevents the combobox from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the combobox.\n   */\n  help?: ReactNode\n  /**\n   * `id` forwarded to the input element — useful for pairing with a `<label for>`.\n   */\n  id?: string\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the combobox when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * Array of item/header/divider definitions for data-driven rendering. When provided, children\n   * are ignored. A `'header'` entry starts a group that all following items join until the next\n   * header or the end of the array. `'divider'` entries are a no-op here (dividers aren't\n   * meaningful for a listbox/option collection) — use `ComboboxGroup` composition instead if\n   * you need finer control over grouping. An entry's `href`/`onClick` are `Menu`-only and are not\n   * read here — use `onChange` to react to the selection instead.\n   */\n  items?: MenuItemsDef\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the input.\n   */\n  label?: ReactNode\n  /**\n   * `name` of an auto-created hidden input, kept in sync with the selection, for native form\n   * submission. Omit to skip creating one.\n   */\n  name?: string\n  /**\n   * Text shown in the listbox when no options match the current query.\n   */\n  noResultsText?: ReactNode\n  /**\n   * Callback fired when the selected option changes.\n   */\n  onChange?: (value: Key | null) => void\n  /**\n   * Placeholder shown in the input when nothing is selected.\n   */\n  placeholder?: string\n  /**\n   * Toggle the required state for the component. A required combobox with no option selected\n   * holds its form back from submitting, and takes focus: text typed without selecting an option\n   * is not a value.\n   */\n  required?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the combobox when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The selected option's id (controlled).\n   */\n  value?: Key | null\n}\n\n// See `unselected`.\nconst UNSELECTED_TEXT_MESSAGE = 'Select an option from the list.'\n\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      className,\n      defaultValue,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      items,\n      label,\n      name,\n      noResultsText = 'No results found',\n      onChange,\n      placeholder,\n      required,\n      size,\n      valid: validProp,\n      validFeedback,\n      value,\n      ...rest\n    }: ComboboxProps,\n    ref\n  ): ReactNode => {\n    // `entries`/`disabledKeys` only need to change when the data driving them does — without this,\n    // both re-derive from scratch on every render, including every keystroke while typing.\n    const entries = useMemo(\n      () =>\n        items\n          ? buildEntriesFromItemsDef(items)\n          : buildEntriesFromChildren(children, { Group: ComboboxGroup, Item: ComboboxItem }),\n      [items, children]\n    )\n    const disabledKeys = useMemo(() => getDisabledKeys(entries), [entries])\n\n    // Case- and accent-insensitive substring matching, mirroring chassis-css's own\n    // always-case-insensitive combobox.js filtering.\n    const { contains } = useFilter({ sensitivity: 'base' })\n\n    const state = useComboBoxState<ComboboxEntry>({\n      children: comboboxCollectionChildren,\n      defaultItems: entries,\n      disabledKeys,\n      defaultFilter: contains,\n      defaultValue,\n      value,\n      onChange,\n      allowsEmptyCollection: true,\n      // Matches chassis-css's vanilla combobox.js: the menu opens on focus, not only once the\n      // user starts typing.\n      menuTrigger: 'focus'\n    })\n\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const forkedWrapperRef = useForkedRef(ref, wrapperRef)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const listBoxRef = useRef<HTMLElement>(null)\n\n    // `required` asks for what the form submits under `name`: the selected option's id, not the\n    // text in the input. The native attribute on the input covers an empty one, and the two agree\n    // nearly always, since react-stately puts the selection's text back, none without one, when\n    // the list closes: on blur, Enter and Escape. Not while the user is still typing, though, and\n    // a form submitted then (a shortcut or a timer that calls `requestSubmit()`) would go with\n    // text in the input and nothing under `name`. A custom validity covers that: with nothing\n    // selected the input is invalid whatever its text. The message is never shown: react-aria\n    // cancels the input's `invalid` event, which keeps a browser's bubble away, and focuses the\n    // input instead.\n    //\n    // Set after each render, as the input may be a new one, in a layout effect declared before\n    // `useHeldBack`, whose own layout effect reads the validity after each render, and for an\n    // empty input too: the hook's `input` listener reads\n    // it before the render a keystroke causes, where the first character typed would have made\n    // an empty input valid.\n    const unselected = Boolean(required) && state.value == null\n    useIsomorphicLayoutEffect(() => {\n      inputRef.current?.setCustomValidity(unselected ? UNSELECTED_TEXT_MESSAGE : '')\n    })\n\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n    const popoverRef = useRef<HTMLDivElement>(null)\n    const noResultsId = useId()\n    const hydrated = useHydrated()\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy,\n      ariaLabelledBy,\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { inputProps, listBoxProps } = useComboBox<ComboboxEntry>(\n      {\n        'aria-label': ariaLabel,\n        'aria-labelledby': labelledBy,\n        id: inputId,\n        inputRef,\n        listBoxRef,\n        popoverRef,\n        isDisabled: disabled,\n        isRequired: required,\n        placeholder\n      },\n      state\n    )\n\n    const { overlayProps, placement: resolvedPlacement } = useOverlayPosition({\n      targetRef: wrapperRef,\n      overlayRef: popoverRef,\n      placement: toAriaPlacement('bottom-start'),\n      offset: 2,\n      isOpen: state.isOpen,\n      // Leaving `onClose` unset doesn't actually disable react-aria's close-on-scroll listener —\n      // only an explicit `null` does. Matches the fix already applied to `Autocomplete`'s identical\n      // positioning call.\n      onClose: null\n    })\n    useOverlayMaxHeight(popoverRef, state.isOpen)\n\n    // Portals the panel to `document.body` (or an enclosing open `<dialog>`) instead of rendering\n    // it inline, matching `Popover`/`Tooltip` — an inline-rendered panel gets clipped by any\n    // ancestor with `overflow: hidden`/`auto` (a `ModalBody`, a scrollable card, a table cell), and\n    // `Combobox` is commonly composed inside exactly those. See `COMBOBOX_MENU_OVERLAY_STYLE` for\n    // the styling this trades away by leaving the DOM position `.combobox + .menu` relies on.\n    const portalContainer = useFloatingOverlay({\n      close: state.close,\n      isOpen: state.isOpen,\n      triggerRef: wrapperRef\n    })\n\n    const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(\n      overlayProps.style,\n      'bottom-start',\n      resolvedPlacement\n    )\n    const overlayStyle: React.CSSProperties = { ...COMBOBOX_MENU_OVERLAY_STYLE, ...menuStyle }\n\n    const inputHtmlProps = inputProps as InputHTMLAttributes<HTMLInputElement>\n    const showNoResults = state.collection.size === 0\n    // Merges the no-results message into the input's own description (for AT that reads\n    // descriptions on demand) in addition to the `aria-live` region below (for AT that announces\n    // live-region changes proactively as the user types) — belt and braces, since screen reader\n    // support for announcing a freshly-mounted live region is inconsistent. Only once hydrated:\n    // the message is inside `Portal`, which renders nothing on the server and while hydrating, so\n    // an empty combobox's server HTML referred to an id no element had.\n    const inputDescribedBy = joinIds(describedBy, showNoResults && hydrated && noResultsId)\n\n    return renderFormField({\n      children: (\n        <>\n          <div\n            className={classNames(\n              'form-input',\n              'combobox',\n              size,\n              { disabled },\n              validationClassName(invalid, valid),\n              className\n            )}\n            ref={forkedWrapperRef}\n            {...rest}\n          >\n            <input\n              autoComplete=\"off\"\n              className=\"combobox-value\"\n              {...inputHtmlProps}\n              aria-describedby={inputDescribedBy}\n              aria-invalid={invalid || undefined}\n              // The native `required` below says the same.\n              aria-required={undefined}\n              ref={inputRef}\n              // On the visible input, not the hidden one that carries `name`: a hidden input is\n              // barred from constraint validation (FORMS.md, gotcha 9). react-aria writes\n              // `aria-required` alone, which no form checks. A disabled input isn't validated;\n              // the combobox has no read-only state to leave out.\n              required={required || undefined}\n            />\n          </div>\n          <Portal container={portalContainer}>\n            <div\n              className={classNames('menu', { show: state.isOpen })}\n              data-cx-placement={placementAttr}\n              style={overlayStyle}\n              hidden={!state.isOpen}\n              ref={popoverRef}\n            >\n              <ComboboxListBox state={state} listBoxProps={listBoxProps} listBoxRef={listBoxRef} />\n              {showNoResults && (\n                <div className=\"combobox-no-results\" id={noResultsId} role=\"status\">\n                  {noResultsText}\n                </div>\n              )}\n            </div>\n          </Portal>\n          {name && (\n            <input type=\"hidden\" name={name} value={state.value ?? ''} disabled={disabled} />\n          )}\n        </>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nCombobox.displayName = 'Combobox'\n"],"mappings":"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"}

package/dist/chunks/context-HDVxTNPi.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-HDVxTNPi.js","names":["FormFieldContext","createContext"],"sources":["../../src/components/form-field/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\nexport interface FormFieldContextValue {\n  /**\n   * The ids of the help and feedback the wrapper renders, when they are rendered. The field is\n   * described by them too.\n   */\n  describedBy?: string\n  /**\n   * The id the wrapper's label points at with `htmlFor`. The field takes it as its own `id`\n   * unless it was given one.\n   */\n  inputId?: string\n  /**\n   * The id of the wrapper's label. The field is labelled by it too.\n   */\n  labelId?: string\n}\n\n// What a wrapper that renders the label itself hands to the field inside it, so the consumer\n// repeats no id: `FloatingInput` provides it, `useFormField` reads it. See FORMS.md.\nexport const FormFieldContext = createContext<FormFieldContextValue | null>(null)\n"],"mappings":"A,sCAqBA,MAAaA,EAAmBC,EAA4C,IAAI,E"}
+{"version":3,"file":"context-HDVxTNPi.js","names":["FormFieldContext","createContext"],"sources":["../../src/components/form-field/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\nexport interface FormFieldContextValue {\n  /**\n   * The ids of the help and feedback the wrapper renders, when they are rendered. The field is\n   * described by them too.\n   */\n  describedBy?: string\n  /**\n   * The id the wrapper's label points at with `htmlFor`. The field takes it as its own `id`\n   * unless it was given one.\n   */\n  inputId?: string\n  /**\n   * The id of the wrapper's label. The field is labelled by it too.\n   */\n  labelId?: string\n  /**\n   * Receives what the field shows as invalid and valid when that differs from its props alone: a\n   * submit it held back, or a `validated` form's verdict. `useHeldBack` calls it, so the wrapper\n   * renders its feedback with the field's mark.\n   */\n  reportValidation?: (invalid: boolean | undefined, valid: boolean | undefined) => void\n}\n\n// What a wrapper that renders the label itself hands to the field inside it, so the consumer\n// repeats no id: `FloatingInput` provides it, `useFormField` reads it. See FORMS.md.\nexport const FormFieldContext = createContext<FormFieldContextValue | null>(null)\n"],"mappings":"A,sCA2BA,MAAaA,EAAmBC,EAA4C,IAAI,E"}

package/dist/chunks/context-menu-CGOGliw6.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{y as e}from"./slot-DagH0Gxq.js";import{t}from"./useForkedRef-WoqMqsWE.js";import{t as n}from"./polymorphic-mAKwlLiW.js";import{t as r}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{n as i}from"./overlayStack-BXtTGCRm.js";import{i as ee,r as a,s as te}from"./overlayPlacement-D2vfhhg3.js";import{t as o}from"./useOpenStateProps-CdSO1nmI.js";import{t as s}from"./useOverlayMaxHeight-5UnurH0W.js";import{n as c}from"./insideEvents-CWcNrMu7.js";import{i as l,n as u,o as d,r as ne}from"./Menu-DBN4Mxak.js";import f,{useEffect as p,useId as re,useMemo as ie,useRef as m,useState as h}from"react";import ae from"classnames";import{mergeProps as oe,useOverlayPosition as se}from"react-aria";import{useMenuTriggerState as g}from"react-stately";const _=(e,t)=>({x:e,y:t,top:t,left:e,right:e,bottom:t,width:0,height:0,toJSON:()=>({x:e,y:t,width:0,height:0})});function v({children:n,autoClose:v=!0,className:y,component:ce,defaultVisible:le,disabled:b=!1,id:ue,onHide:de,onShow:fe,onVisibleChange:pe,visible:me,...he},ge){let x=ce??`div`,S=re(),C=e(x)??ue??`${S}-trigger`,w=`${S}-menu`,T=m(null),E=t(ge,T);r(()=>{T.current?.style.setProperty(`-webkit-touch-callout`,`none`)},[]);let D=m(null),O=m(null),k=m(null),A=m(/* @__PURE__ */ new Map),j=(e,t)=>{t?A.current.set(e,t):A.current.delete(e)},M=g(o({defaultVisible:le,onVisibleChange:pe,visible:me},`ContextMenu`)),N=m(null),[P,F]=h(0),I=m(null),L=e=>{b||(N.current=e,M.isOpen||(I.current=document.activeElement),F(e=>e+1),M.open(`first`))},R=()=>{I.current=null,M.close()},z=()=>M.close();p(()=>{if(M.isOpen)return;let e=I.current;if(I.current=null,!e||!document.contains(e))return;let t=document.activeElement,n=!t||t===document.body,r=!!t&&!!D.current?.contains(t);(n||r)&&e.focus()},[M.isOpen]);let B=te({close:M.close,isOpen:M.isOpen,onHide:de,onShow:fe,triggerRef:T}),V=`bottom-start`,{overlayProps:_e,placement:ve,updatePosition:ye}=se({targetRef:T,overlayRef:D,placement:ee(V),containerPadding:8,isOpen:M.isOpen,onClose:null,getTargetRect:()=>{let e=N.current;if(e)return e.kind===`point`?_(e.x,e.y):e.element.getBoundingClientRect()}});s(D,M.isOpen),r(()=>{M.isOpen&&ye()},[M.isOpen,P]);let{menuStyle:H,placementAttr:U}=a(_e.style,V,ve);p(()=>{if(!M.isOpen||v===!1)return;let e=()=>[D.current,...A.current.values()],t=t=>e().some(e=>!!e?.contains(t)),n=e=>c(e,D),r=[d(`pointerdown`,e=>{let r=e.target;t(r)||n(e)||v===`inside`||e.button===2&&T.current?.contains(r)||R()}),d(`click`,(n,r)=>{let i=n.target;t(i)&&v!==`outside`&&!l.has(n)&&(r||ne(i,e())||z())}),d(`keyup`,e=>{e.key!==`Tab`||t(e.target)||n(e)||R()})];return()=>{for(let e of r)e()}},[M.isOpen,v]),p(()=>{if(M.isOpen)return i({nodes:()=>[D.current,T.current],onEscape:z})},[M.isOpen]);let W=m(b);p(()=>{b&&!W.current&&R(),W.current=b},[b]);let G=e=>e.currentTarget.contains(e.target),be=e=>{b||e.defaultPrevented||(e.preventDefault(),G(e)&&(Y(),Q(),L({kind:`point`,x:e.clientX,y:e.clientY})))},K=e=>e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey,xe=e=>{b||e.defaultPrevented||!K(e)||(e.preventDefault(),G(e)&&L({kind:`element`,element:e.target}))},Se=e=>{!b&&K(e)&&e.preventDefault()},q=m(null),J=m(null),Ce=()=>{let e=T.current;e&&J.current!==null&&(e.style.setProperty(`-webkit-user-select`,J.current),e.style.setProperty(`user-select`,J.current),J.current=null)},Y=()=>{q.current&&=(window.clearTimeout(q.current.timer),null)},X=()=>{Y(),Ce()},we=()=>{X(),Q()},Z=m(null),Q=()=>{Z.current?.(),Z.current=null},Te=()=>{Q();let e=e=>{e.preventDefault(),e.stopPropagation(),l.add(e),Q()};window.addEventListener(`click`,e,{capture:!0});let t=window.setTimeout(Q,1e3);Z.current=()=>{window.removeEventListener(`click`,e,{capture:!0}),window.clearTimeout(t)}};p(()=>()=>{X(),Q()},[]);let Ee=e=>{if(b||e.pointerType===`mouse`||!G(e))return;X();let t=e.currentTarget;J.current=t.style.getPropertyValue(`user-select`),t.style.setProperty(`-webkit-user-select`,`none`),t.style.setProperty(`user-select`,`none`);let{clientX:n,clientY:r}=e;q.current={x:n,y:r,timer:window.setTimeout(()=>{q.current=null,Te(),L({kind:`point`,x:n,y:r})},500)}},De=e=>{let t=q.current;t&&Math.hypot(e.clientX-t.x,e.clientY-t.y)>10&&Y()},$=ie(()=>({autoClose:v,close:z,container:B??!0,focusStrategy:M.focusStrategy,hide:R,menuId:w,menuStyle:H,menuTriggerProps:{},overlayRef:D,placementAttr:U,portalContainer:B,reference:`toggle`,registerOverlay:j,show:e=>M.open(e??`first`),targetRef:k,toggle:e=>M.toggle(e??`first`),toggleNodeRef:O,triggerId:C,visible:M.isOpen}),[v,w,H,U,B,M.focusStrategy,M.isOpen,C]);return/* @__PURE__ */ f.createElement(u.Provider,{value:$},/* @__PURE__ */ f.createElement(x,{id:C,className:ae(`context-menu`,y),...oe({onContextMenu:be,onKeyDown:xe,onKeyUp:Se,onPointerDown:Ee,onPointerMove:De,onPointerUp:X,onPointerCancel:we,onPointerLeave:X},he),ref:E},n))}const y=n(v,`ContextMenu`);export{y as t};
+//# sourceMappingURL=context-menu-CGOGliw6.js.map

package/dist/chunks/context-menu-CGOGliw6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-CGOGliw6.js","names":["resolveSlottedId","createPolymorphicComponent","useIsomorphicLayoutEffect","pushOverlay","toAriaPlacement","resolveMenuOverlayPositioning","useFloatingOverlay","useOpenStateProps","useOverlayMaxHeight","isEventInside","menuToggleClicks","MenuContext","listenOnWindow","isFormControlClick","React","classNames","pointRect","y","x","ContextMenuRender","rest","Component","component","generatedId","useId","triggerId","id","menuId","regionRef","useRef","forkedRef","useForkedRef","ref","overlayRef","toggleNodeRef","targetRef","submenuOverlaysRef","registerOverlay","node","overlayId","state","useMenuTriggerState","anchorRef","anchorVersion","setAnchorVersion","useState","restoreFocusRef","openAt","disabled","anchor","version","hide","close","useEffect","element","active","focusIsLoose","focusIsInMenu","portalContainer","placement","resolvedPlacement","useOverlayPosition","updatePosition","overlayProps","autoClose","lists","isInMenu","target","isInOverlayOfMenu","event","cleanups","stopped","cleanup","wasDisabledRef","isInRegion","handleContextMenu","cancelLongPress","stopSwallowingClicks","isContextMenuKey","handleKeyDown","handleKeyUp","longPressRef","userSelectRef","restoreUserSelect","region","endPress","handlePointerCancel","clickSwallowRef","swallowNextClick","swallow","timer","handlePointerDown","handlePointerMove","press","contextValue","useMemo","focusStrategy","menuStyle","placementAttr","className","mergeProps","children","ContextMenu"],"sources":["../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import React, {\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport classNames from 'classnames'\nimport { mergeProps, useOverlayPosition } from 'react-aria'\nimport { useMenuTriggerState } from 'react-stately'\n\nimport {\n  useFloatingOverlay,\n  useForkedRef,\n  useIsomorphicLayoutEffect,\n  useOpenStateProps,\n  useOverlayMaxHeight\n} from '../../hooks'\nimport { resolveSlottedId } from '../../utils/elementKind'\nimport { isEventInside } from '../../utils/insideEvents'\nimport { resolveMenuOverlayPositioning, toAriaPlacement } from '../../utils/overlayPlacement'\nimport { pushOverlay } from '../../utils/overlayStack'\nimport { listenOnWindow } from '../../utils/windowEvents'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport {\n  MenuAutoClose,\n  MenuContext,\n  MenuContextProps,\n  MenuFocusStrategy,\n  isFormControlClick,\n  menuToggleClicks\n} from '../menu/Menu'\n\n// How long a touch or pen has to stay down, and how far it may travel meanwhile, for a long\n// press. react-aria's `useLongPress` uses the same threshold; it isn't used here because its\n// `usePress` prevents the default of key and pointer events on the element it is given, which\n// would break the buttons and links inside a region.\nconst LONG_PRESS_MS = 500\nconst LONG_PRESS_TOLERANCE_PX = 10\n// iOS emits a click when the finger that long-pressed lifts, on whatever is under it by then: the\n// first item of the menu that has just opened at the finger. A click this soon after a long press\n// is that release, not a choice.\nconst LONG_PRESS_CLICK_WINDOW_MS = 1000\n\n// Where the menu opens: at a point (the pointer, or a finger's long press), or at an element (the\n// one focused when the keyboard asked for it). Read from a ref inside `getTargetRect`, since\n// `useOverlayPosition` captures that function once.\ntype Anchor = { kind: 'point'; x: number; y: number } | { kind: 'element'; element: Element }\n\nconst pointRect = (x: number, y: number): DOMRect =>\n  ({\n    x,\n    y,\n    top: y,\n    left: x,\n    right: x,\n    bottom: y,\n    width: 0,\n    height: 0,\n    toJSON: () => ({ x, y, width: 0, height: 0 })\n  }) as DOMRect\n\ntype ContextMenuOwnProps<C extends ElementType> = {\n  /**\n   * Controls which presses close the menu. `true` closes on a click on an item and on a press\n   * outside the menu. `false` leaves closing to the Escape key and `visible`. `'inside'` closes\n   * only on a click on an item. `'outside'` closes only on a press outside the menu.\n   */\n  autoClose?: MenuAutoClose\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node, the region the menu opens from. Either a string to use an\n   * HTML element or a component.\n   *\n   * @default 'div'\n   */\n  component?: C\n  /**\n   * Whether the menu is open when it first renders. Use it instead of `visible` when nothing\n   * outside needs to control the menu. Opened this way, the menu sits under the region's start\n   * edge, since no pointer has asked for it anywhere.\n   */\n  defaultVisible?: boolean\n  /**\n   * Leaves the region to the browser: a right-click shows the browser's own menu, a long press\n   * and the keys do nothing.\n   */\n  disabled?: boolean\n  /**\n   * Callback fired when the menu hides.\n   */\n  onHide?: () => void\n  /**\n   * Callback fired when the menu shows.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired when the menu asks to show or hide: a right-click, a long press or Shift+F10\n   * in the region, a click on an item, a press outside, the Escape key, or the closing of the\n   * dialog it is in. Receives the state it asks for. With `visible` set, the menu changes only\n   * when `visible` does.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Whether the menu is open. Setting it makes the menu controlled: it shows and hides only when\n   * this changes, so pair it with `onVisibleChange`. Leave it unset, or use `defaultVisible`, for\n   * a menu that opens and closes itself.\n   */\n  visible?: boolean\n}\n\nexport type ContextMenuProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ContextMenuOwnProps<C>\n>\n\ntype ContextMenuComponent = (<C extends ElementType = 'div'>(\n  props: ContextMenuProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// The region a context menu belongs to. The region is the component's own element: `className`,\n// `style`, the rest of the props and the ref go to it. The menu is a `MenuList` among its\n// children, with `Menu`'s own items, headers, dividers and submenus: this component provides\n// `Menu`'s context, so `MenuList` renders, positions, portals and navigates the list as it does\n// under a `Menu`. What differs is the trigger, the whole region rather than a button, and the\n// position, the pointer rather than that button.\nfunction ContextMenuRender<C extends ElementType = 'div'>(\n  {\n    children,\n    autoClose = true,\n    className,\n    component,\n    defaultVisible,\n    disabled = false,\n    id,\n    onHide,\n    onShow,\n    onVisibleChange,\n    visible,\n    ...rest\n  }: ContextMenuProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const generatedId = useId()\n  // The list is labelled by the region, the way `Menu`'s is labelled by its toggle. A caller\n  // that names the list itself (`aria-label` on the `MenuList`) drops that link. Read in each\n  // render, so a changed `id` reaches the region and the label. Under `asChild` the child's own\n  // `id` wins the merge (`Slot`), so the label follows the element that renders.\n  const triggerId =\n    resolveSlottedId(Component) ?? (id as string | undefined) ?? `${generatedId}-trigger`\n  const menuId = `${generatedId}-menu`\n  const regionRef = useRef<HTMLElement | null>(null)\n  const forkedRef = useForkedRef(ref, regionRef)\n\n  // iOS shows its own callout for a long press on a link or an image; the region's menu takes\n  // its place. Set on the element rather than through `style`, which a slotted child's own\n  // `style` would replace. The property is inherited, so the region's children lose it too.\n  useIsomorphicLayoutEffect(() => {\n    regionRef.current?.style.setProperty('-webkit-touch-callout', 'none')\n  }, [])\n  const overlayRef = useRef<HTMLElement | null>(null)\n  // `MenuToggle` writes into these two: a `MenuToggle` inside a region belongs to no `Menu`, so\n  // it gets refs of its own to write to rather than the region's.\n  const toggleNodeRef = useRef<HTMLElement | null>(null)\n  const targetRef = useRef<HTMLElement | null>(null)\n  // Portaled `MenuSubmenu` panels register themselves here, so a press inside one counts as inside\n  // the menu (see `MenuContext.registerOverlay`).\n  const submenuOverlaysRef = useRef<Map<string, HTMLElement>>(new Map())\n  const registerOverlay = (overlayId: string, node: HTMLElement | null) => {\n    if (node) submenuOverlaysRef.current.set(overlayId, node)\n    else submenuOverlaysRef.current.delete(overlayId)\n  }\n\n  const state = useMenuTriggerState(\n    useOpenStateProps({ defaultVisible, onVisibleChange, visible }, 'ContextMenu')\n  )\n\n  const anchorRef = useRef<Anchor | null>(null)\n  // Bumped with each request to open, so the menu is placed again when a second right-click\n  // moves an open menu: `useOverlayPosition` positions on its own only when the open state\n  // changes.\n  const [anchorVersion, setAnchorVersion] = useState(0)\n  // The element focused when the menu opened, focused again when the menu closes from the\n  // keyboard or an item. Cleared by a press outside, which puts focus somewhere else itself.\n  const restoreFocusRef = useRef<HTMLElement | null>(null)\n\n  const openAt = (anchor: Anchor) => {\n    if (disabled) return\n    anchorRef.current = anchor\n    if (!state.isOpen) restoreFocusRef.current = document.activeElement as HTMLElement | null\n    setAnchorVersion((version) => version + 1)\n    state.open('first')\n  }\n\n  const hide = () => {\n    restoreFocusRef.current = null\n    state.close()\n  }\n  const close = () => state.close()\n\n  useEffect(() => {\n    if (state.isOpen) return\n    const element = restoreFocusRef.current\n    restoreFocusRef.current = null\n    if (!element || !document.contains(element)) return\n    // Only when the menu still holds focus, or nothing does: focus the user has put on another\n    // control since, or an app closing the menu through `visible` while they type elsewhere,\n    // stays there (`Popover` does the same).\n    const active = document.activeElement\n    const focusIsLoose = !active || active === document.body\n    const focusIsInMenu = !!active && !!overlayRef.current?.contains(active)\n    if (focusIsLoose || focusIsInMenu) element.focus()\n  }, [state.isOpen])\n\n  // Resolves the `<dialog>` the region is in, if any, so the list portals into its top layer and\n  // closes with it, and fires `onShow`/`onHide`.\n  const portalContainer = useFloatingOverlay({\n    close: state.close,\n    isOpen: state.isOpen,\n    onHide,\n    onShow,\n    triggerRef: regionRef\n  })\n\n  // A context menu opens toward the reading direction: its start edge at the pointer, and flipped\n  // above the pointer when there is no room below (`useOverlayPosition`'s own flip). `start` is\n  // the reading direction's already: `useOverlayPosition` mirrors it under RTL, so `bottom-end`\n  // there put the menu's left edge at the pointer, as in LTR.\n  const placement = 'bottom-start'\n\n  const {\n    overlayProps,\n    placement: resolvedPlacement,\n    updatePosition\n  } = useOverlayPosition({\n    // The region is the target `useOverlayPosition` measures; `getTargetRect` replaces its\n    // rectangle with the anchor's. A menu opened by `defaultVisible` or `visible` alone, with no\n    // anchor yet, sits under the region's start edge.\n    targetRef: regionRef,\n    overlayRef,\n    placement: toAriaPlacement(placement),\n    containerPadding: 8,\n    isOpen: state.isOpen,\n    // See `Menu`: `null` opts out of closing on any window scroll, so the menu scrolls with the\n    // page instead of vanishing.\n    onClose: null,\n    getTargetRect: () => {\n      const anchor = anchorRef.current\n      if (!anchor) return undefined\n      return anchor.kind === 'point'\n        ? pointRect(anchor.x, anchor.y)\n        : anchor.element.getBoundingClientRect()\n    }\n  })\n  useOverlayMaxHeight(overlayRef, state.isOpen)\n\n  useIsomorphicLayoutEffect(() => {\n    if (state.isOpen) updatePosition()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen, anchorVersion])\n\n  const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(\n    overlayProps.style,\n    placement,\n    resolvedPlacement\n  )\n\n  // Presses outside the menu, and clicks on its items. A press rather than a click outside, as\n  // a native menu closes: the click that follows a long press's release then finds no open menu\n  // to close, and a right-click elsewhere closes this menu before it opens another.\n  useEffect(() => {\n    if (!state.isOpen || autoClose === false) return undefined\n\n    const lists = () => [overlayRef.current, ...submenuOverlaysRef.current.values()]\n    const isInMenu = (target: Node) => lists().some((node) => !!node?.contains(target))\n\n    // An overlay opened from the menu (a popover on an item) is portaled out of the list, and\n    // React still renders it under it (`insideEvents`): a press there isn't one outside.\n    const isInOverlayOfMenu = (event: Event) => isEventInside(event, overlayRef)\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target as Node\n      if (isInMenu(target) || isInOverlayOfMenu(event) || autoClose === 'inside') return\n      // A right-click inside the region asks for the menu at a new place: the `contextmenu`\n      // event that follows moves it.\n      if (event.button === 2 && regionRef.current?.contains(target)) return\n      hide()\n    }\n\n    const handleClick = (event: MouseEvent, stopped: boolean) => {\n      const target = event.target as HTMLElement\n      if (!isInMenu(target) || autoClose === 'outside' || menuToggleClicks.has(event)) return\n      // A form control inside the menu is used in place, as in `Menu`, and so is a react-aria\n      // control there, whose click never bubbled up to `window` (`stopped`, `listenOnWindow`).\n      if (stopped || isFormControlClick(target, lists())) return\n      close()\n    }\n\n    // Tab has moved focus out of the menu by the time the key comes up.\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab' || isInMenu(event.target as Node) || isInOverlayOfMenu(event)) return\n      hide()\n    }\n\n    // On `window`, including a press that a react-aria pressable outside stopped\n    // (`listenOnWindow`).\n    const cleanups = [\n      listenOnWindow('pointerdown', handlePointerDown),\n      listenOnWindow('click', handleClick),\n      listenOnWindow('keyup', handleKeyUp)\n    ]\n    return () => {\n      for (const cleanup of cleanups) cleanup()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen, autoClose])\n\n  // Escape closes the menu wherever focus is, independent of `autoClose`, as in `Menu`: through\n  // the stack of open overlays, so the key closes the innermost one only.\n  useEffect(() => {\n    if (!state.isOpen) return undefined\n\n    return pushOverlay({\n      nodes: () => [overlayRef.current, regionRef.current],\n      onEscape: close\n    })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen])\n\n  // Becoming `disabled` closes an open menu. Not on mount: `disabled` with `visible` is the\n  // caller's to hold.\n  const wasDisabledRef = useRef(disabled)\n  useEffect(() => {\n    if (disabled && !wasDisabledRef.current) hide()\n    wasDisabledRef.current = disabled\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled])\n\n  // The list is a React child of the region, so its events reach these handlers through the\n  // portal: a right-click on an item, or Shift+F10 with an item focused, is not a request to open\n  // the menu somewhere else. Only what happens in the region's own element counts.\n  const isInRegion = (event: React.SyntheticEvent<HTMLElement>) =>\n    event.currentTarget.contains(event.target as Node)\n\n  // The browser's own menu is replaced. When `disabled`, the event isn't handled at all, so the\n  // browser's menu shows.\n  // One handled already, by a region nested in this one, isn't this region's: both opened.\n  const handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {\n    if (disabled || event.defaultPrevented) return\n    // Prevented for the list too: a browser that fires `contextmenu` for the context menu key on\n    // key up (Chromium) fires it at the item the key down has just focused.\n    event.preventDefault()\n    if (!isInRegion(event)) return\n    // A browser that fires `contextmenu` for a long press (Android) emits no click on release, so\n    // the press opens the menu here and nothing is left to swallow: armed, the next tap on an\n    // item would be dropped.\n    cancelLongPress()\n    stopSwallowingClicks()\n    openAt({ kind: 'point', x: event.clientX, y: event.clientY })\n  }\n\n  const isContextMenuKey = (event: React.KeyboardEvent<HTMLElement>) =>\n    event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)\n\n  // Shift+F10 and the context menu key, on any element in the region: the menu opens under that\n  // element. Preventing the default keeps the browser from firing its own `contextmenu` event\n  // for the key, which would move the menu to where the browser reports the key. Firefox fires\n  // it from the key down, Chromium from the key up, so both are prevented.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (disabled || event.defaultPrevented || !isContextMenuKey(event)) return\n    event.preventDefault()\n    if (!isInRegion(event)) return\n    openAt({ kind: 'element', element: event.target as Element })\n  }\n\n  const handleKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (!disabled && isContextMenuKey(event)) event.preventDefault()\n  }\n\n  // A long press by a finger or a pen. A browser that fires `contextmenu` for it as well (Android)\n  // opens the menu through `handleContextMenu` at the same point.\n  const longPressRef = useRef<{ timer: number; x: number; y: number } | null>(null)\n  // While a finger is down, the region selects no text: iOS starts selecting at about the same\n  // time the press becomes long. Restored when the finger lifts.\n  const userSelectRef = useRef<string | null>(null)\n  const restoreUserSelect = () => {\n    const region = regionRef.current\n    if (!region || userSelectRef.current === null) return\n    region.style.setProperty('-webkit-user-select', userSelectRef.current)\n    region.style.setProperty('user-select', userSelectRef.current)\n    userSelectRef.current = null\n  }\n  const cancelLongPress = () => {\n    if (!longPressRef.current) return\n    window.clearTimeout(longPressRef.current.timer)\n    longPressRef.current = null\n  }\n  const endPress = () => {\n    cancelLongPress()\n    restoreUserSelect()\n  }\n  // A cancelled pointer emits no click either.\n  const handlePointerCancel = () => {\n    endPress()\n    stopSwallowingClicks()\n  }\n  // The click the release of a long press emits (iOS) lands on the item that has just opened\n  // under the finger: swallowed before it reaches the item or the click-inside dismissal. Marked as\n  // the menu's own click (`menuToggleClicks`) too: the dismissal hears a stopped click a task later\n  // (`listenOnWindow`), and took this one for a click on the item.\n  const clickSwallowRef = useRef<(() => void) | null>(null)\n  const stopSwallowingClicks = () => {\n    clickSwallowRef.current?.()\n    clickSwallowRef.current = null\n  }\n  const swallowNextClick = () => {\n    stopSwallowingClicks()\n    const swallow = (event: MouseEvent) => {\n      event.preventDefault()\n      event.stopPropagation()\n      menuToggleClicks.add(event)\n      stopSwallowingClicks()\n    }\n    window.addEventListener('click', swallow, { capture: true })\n    const timer = window.setTimeout(stopSwallowingClicks, LONG_PRESS_CLICK_WINDOW_MS)\n    clickSwallowRef.current = () => {\n      window.removeEventListener('click', swallow, { capture: true })\n      window.clearTimeout(timer)\n    }\n  }\n\n  useEffect(\n    () => () => {\n      endPress()\n      stopSwallowingClicks()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  )\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLElement>) => {\n    if (disabled || event.pointerType === 'mouse' || !isInRegion(event)) return\n    endPress()\n    const region = event.currentTarget\n    userSelectRef.current = region.style.getPropertyValue('user-select')\n    region.style.setProperty('-webkit-user-select', 'none')\n    region.style.setProperty('user-select', 'none')\n    const { clientX: x, clientY: y } = event\n    longPressRef.current = {\n      x,\n      y,\n      timer: window.setTimeout(() => {\n        longPressRef.current = null\n        swallowNextClick()\n        openAt({ kind: 'point', x, y })\n      }, LONG_PRESS_MS)\n    }\n  }\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLElement>) => {\n    const press = longPressRef.current\n    if (!press) return\n    if (Math.hypot(event.clientX - press.x, event.clientY - press.y) > LONG_PRESS_TOLERANCE_PX) {\n      cancelLongPress()\n    }\n  }\n\n  const contextValue: MenuContextProps = useMemo(\n    () => ({\n      autoClose,\n      close,\n      container: portalContainer ?? true,\n      focusStrategy: state.focusStrategy as MenuFocusStrategy | null,\n      hide,\n      menuId,\n      menuStyle,\n      menuTriggerProps: {},\n      overlayRef,\n      placementAttr,\n      portalContainer,\n      reference: 'toggle',\n      registerOverlay,\n      show: (focusStrategy) => state.open(focusStrategy ?? 'first'),\n      targetRef,\n      toggle: (focusStrategy) => state.toggle(focusStrategy ?? 'first'),\n      toggleNodeRef,\n      triggerId,\n      visible: state.isOpen\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      autoClose,\n      menuId,\n      menuStyle,\n      placementAttr,\n      portalContainer,\n      state.focusStrategy,\n      state.isOpen,\n      triggerId\n    ]\n  )\n\n  return (\n    <MenuContext.Provider value={contextValue}>\n      <Component\n        id={triggerId}\n        className={classNames('context-menu', className)}\n        {...(mergeProps(\n          {\n            onContextMenu: handleContextMenu,\n            onKeyDown: handleKeyDown,\n            onKeyUp: handleKeyUp,\n            onPointerDown: handlePointerDown,\n            onPointerMove: handlePointerMove,\n            onPointerUp: endPress,\n            onPointerCancel: handlePointerCancel,\n            onPointerLeave: endPress\n          },\n          rest\n        ) as Record<string, unknown>)}\n        ref={forkedRef}\n      >\n        {children}\n      </Component>\n    </MenuContext.Provider>\n  )\n}\n\nexport const ContextMenu = createPolymorphicComponent<ContextMenuComponent>(\n  ContextMenuRender as ForwardRefRenderFunction<Element, ContextMenuProps<ElementType>>,\n  'ContextMenu'\n)\n"],"mappings":"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"}

package/dist/chunks/datagrid-Dv_9uFef.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useSelectionForMode-B_oTWvEy.js";import{t as n}from"./tableClassName-jRfRDXA3.js";import r,{createContext as i,forwardRef as a,useContext as o,useEffect as s,useMemo as c,useRef as l,useState as u}from"react";import d from"classnames";import{useCheckbox as f}from"react-aria";import{useToggleState as p}from"react-stately";import{Cell as m,CheckboxContext as h,Column as g,Rect as _,Row as v,Table as y,TableBody as b,TableHeader as x,TableLayout as S,TableLoadMoreItem as C,TableStateContext as w,Virtualizer as T,useSlottedContext as E}from"react-aria-components";const D=i(void 0),O=e=>{let t=e?.props?.pin;return t===`start`||t===`end`?t:void 0},k=e=>{let t=o(w)?.collection.columns;if(e==null||!t)return``;let n=null,r=null;return t.forEach((e,t)=>{let i=O(e);i===`start`?n=t:i===`end`&&r==null&&(r=t)}),e===n?`datagrid-pin-cue-start`:e===r?`datagrid-pin-cue-end`:``},A=({columnIndex:e,...t})=>{let n=k(e);return/* @__PURE__ */ r.createElement(`div`,{...t,className:d(t.className,n)||void 0})};var j=class extends S{constructor(...e){super(...e),this.positioned=/* @__PURE__ */ new WeakMap}pinOf(e){let t=e.type===`column`?e.index:e.colIndex??e.index;return O(this.collection.columns[t])}get hasEndPinnedColumn(){return this.collection.columns.some(e=>O(e)===`end`)}isStickyColumn(e){return this.pinOf(e)!=null}buildColumn(e,t,n){return this.unstickEndPinned(e,super.buildColumn(e,t,n))}buildCell(e,t,n){return this.unstickEndPinned(e,super.buildCell(e,t,n))}unstickEndPinned(e,t){return this.pinOf(e)===`end`&&(t.layoutInfo.isSticky=!1),t}buildHeaderRow(...e){let t=super.buildHeaderRow(...e),n=t.children??[];for(let e of n)e.node&&this.pinOf(e.node)===`end`&&(e.layoutInfo.zIndex=n.length+2);return t}buildRow(e,t,n){if(!this.hasEndPinnedColumn)return super.buildRow(e,t,n);let r=this.requestedRect;this.requestedRect=new _(r.x,r.y,1/0,r.height);try{return super.buildRow(e,t,n)}finally{this.requestedRect=r}}getVisibleLayoutInfos(e){let t=super.getVisibleLayoutInfos(e),{columns:n}=this.collection,r=this.virtualizer?.visibleRect;if(!r||!Number.isFinite(r.maxX)||!this.hasEndPinnedColumn)return t;let i=/* @__PURE__ */ new Map,a=0;for(let e=n.length-1;e>=0;e--){let t=n[e];t&&O(t)===`end`&&(i.set(e,a),a+=this.getLayoutInfo(t.key)?.rect.width??0)}let o=r.maxX-this.padding;return t.map(e=>{if(e.type!==`column`&&e.type!==`cell`)return e;let t=this.collection.getItem(e.key);if(!t)return e;let n=t.type===`column`?t.index:t.colIndex??t.index,r=i.get(n);if(r==null)return e;let a=Math.min(e.rect.x,o-r-e.rect.width);if(a===e.rect.x)return e;let s=this.positioned.get(e);if(s?.rect.x===a)return s;let c=e.copy();return c.rect.x=a,this.positioned.set(e,c),c})}buildRowGroup(...e){let t=super.buildRowGroup(...e);return t.layoutInfo.rect.height=Math.max(0,t.layoutInfo.rect.height),t}};const M=a(({align:i,bordered:a,borderless:o,children:f,className:p,color:m,disabledKeys:h,estimatedRowHeight:g,footer:_,hover:v,onSelectionChange:b,onSortChange:x,rowHeight:S,selectedKeys:C,selectionMode:w=`none`,sm:E,sortDescriptor:O,...k},A)=>{let M=t({onSelectionChange:b,selectedKeys:C,selectionMode:w}),N=S===`auto`,P=c(()=>new j(N?{estimatedRowHeight:g,headingHeight:g}:{rowHeight:S}),[N,S,g]),F=l(null),I=e(A,F),[L,R]=u(!1),[z,B]=u(!1);s(()=>{let e=F.current;if(!e)return;let t=()=>{let t=Math.abs(e.scrollLeft);R(t>0),B(Math.ceil(t+e.clientWidth)<e.scrollWidth)};t(),e.addEventListener(`scroll`,t,{passive:!0});let n=typeof ResizeObserver>`u`?null:new ResizeObserver(t);return n?.observe(e),e.firstElementChild&&n?.observe(e.firstElementChild),()=>{e.removeEventListener(`scroll`,t),n?.disconnect()}},[]);let V=d(`datagrid`,m,i&&n[i],{bordered:a,borderless:o,context:!!m,hoverable:v,sm:E,"datagrid-scrolled-start":L,"datagrid-scrolled-end":z},p);return/* @__PURE__ */ r.createElement(T,{layout:P,shouldObserveItemSize:N},/* @__PURE__ */ r.createElement(y,{"aria-label":k[`aria-label`],"aria-labelledby":k[`aria-labelledby`],className:V||void 0,disabledKeys:h,onSelectionChange:M.onSelectionChange,onSortChange:x,ref:I,selectedKeys:M.selectedKeys,selectionMode:w,sortDescriptor:O,render:e=>/* @__PURE__ */ r.createElement(`div`,{...e,"aria-describedby":e[`aria-describedby`]||void 0})},/* @__PURE__ */ r.createElement(D.Provider,{value:i},f)),_&&/* @__PURE__ */ r.createElement(`div`,{className:d(`datagrid-footer`,m,{borderless:o,context:!!m,sm:E})},_))});M.displayName=`DataGrid`;const N={id:`__datagrid-body-loader__`},P=({children:e,className:t,dependencies:n,isLoading:i,items:a,loadingContent:o,onLoadMore:s,renderEmptyState:l})=>{let u=s!=null&&a!=null,f=c(()=>u?[...a,N]:a,[u,a]),p=c(()=>u?[...n??[],i,s,o]:n,[n,u,i,s,o]),m=u?t=>t===N?/* @__PURE__ */ r.createElement(C,{className:`datagrid-loader`,isLoading:i,onLoadMore:i?void 0:s},o):e(t):e;return/* @__PURE__ */ r.createElement(b,{className:d(`datagrid-body`,t),dependencies:p,items:f,renderEmptyState:l},m)},F=({children:e,className:t,colSpan:n,id:i,textValue:a})=>{let s=o(D);return/* @__PURE__ */ r.createElement(m,{className:d(`datagrid-cell`,t),colSpan:n,id:i,render:(e,{columnIndex:t})=>/* @__PURE__ */ r.createElement(A,{...e,columnIndex:t}),textValue:a},s?/* @__PURE__ */ r.createElement(`div`,{className:`datagrid-cell-content`},e):e)},I=({allowsSorting:e,children:t,className:n,defaultWidth:i,id:a,isRowHeader:o,maxWidth:s,minWidth:c,pin:l,textValue:u})=>/* @__PURE__ */ r.createElement(g,{allowsSorting:e,className:d(`datagrid-col`,l&&`datagrid-col-pinned-${l}`,n),defaultWidth:i,id:a,isRowHeader:o,maxWidth:s,minWidth:c,textValue:u,render:e=>{let t=Number(e[`aria-colindex`]);return/* @__PURE__ */ r.createElement(A,{...e,columnIndex:Number.isNaN(t)?null:t-1})},pin:l},e?({sortDirection:e})=>/* @__PURE__ */ r.createElement(r.Fragment,null,t,/* @__PURE__ */ r.createElement(`span`,{"aria-hidden":`true`,className:`datagrid-sort-icon`},e===`ascending`?`▲`:e===`descending`?`▼`:`⇅`)):t),L=({children:e,className:t,columns:n,dependencies:i})=>/* @__PURE__ */ r.createElement(x,{className:d(`datagrid-header`,t),columns:n,dependencies:i},e),R=({children:e,className:t,columns:n,id:i,textValue:a})=>/* @__PURE__ */ r.createElement(v,{className:d(`datagrid-row`,t),columns:n,id:i,textValue:a},e),z=e=>{let t=E(h,`selection`);if(!t)throw Error(`${e} must be rendered inside a DataGrid with selection enabled.`);return t},B=({className:e})=>{let t=z(`DataGridSelectionCell`);return/* @__PURE__ */ r.createElement(H,{checkboxProps:t,className:e})},V=({className:e})=>{let t=z(`DataGridSelectAllCell`);return/* @__PURE__ */ r.createElement(H,{checkboxProps:t,className:e})},H=({checkboxProps:e,className:t})=>{let n=p(e),i=l(null),{inputProps:a}=f(e,n,i);return/* @__PURE__ */ r.createElement(`input`,{...a,"aria-describedby":void 0,className:t??`check-input`,ref:i})};export{I as a,M as c,L as i,B as n,F as o,R as r,P as s,V as t};
+//# sourceMappingURL=datagrid-Dv_9uFef.js.map

package/dist/chunks/datagrid-Dv_9uFef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid-Dv_9uFef.js","names":["AriaTable","AriaTableBody","AriaCell","AriaColumn","AriaTableHeader","AriaRow","useForkedRef","TABLE_ALIGN_CLASS_NAMES","React","classNames","Cell$1","Column$1","Row$1","TableBody$1","TableHeader$1","DataGridAlignContext","createContext","getColumnPin","pin","column","usePinCueClassName","columns","useContext","TableStateContext","columnIndex","start","end","index","PinCueElement","props","pinCueClassName","DataGridTableLayout","TableLayout","_args","colIndex","node","x","y","layoutNode","args","row","requested","Rect","infos","rect","visible","trailing","width","edge","info","offset","last","copy","group","DataGrid","forwardRef","rest","selection","useSelectionForMode","isVariableRowHeight","rowHeight","layout","useMemo","estimatedRowHeight","gridRef","useRef","ref","forwardedRef","scrolledStart","setScrolledStart","useState","scrolledEnd","setScrolledEnd","useEffect","grid","updateScrollState","scrolled","observer","_className","color","align","hover","className","Virtualizer","Table","children","footer","LOADER_ITEM","DataGridBody","hasLoader","onLoadMore","items","itemsWithLoader","dependenciesWithLoader","dependencies","isLoading","loadingContent","bodyChildren","item","TableLoadMoreItem","DataGridCell","DataGridColumn","allowsSorting","sortDirection","DataGridHeader","DataGridRow","useSelectionCheckboxProps","useSlottedContext","CheckboxContext","component","DataGridSelectionCell","checkboxProps","DataGridCheckboxInput","DataGridSelectAllCell","toggleState","useToggleState","useCheckbox","inputProps"],"sources":["../../src/components/datagrid/context.ts","../../src/components/datagrid/pinnedColumns.tsx","../../src/components/datagrid/DataGridTableLayout.ts","../../src/components/datagrid/DataGrid.tsx","../../src/components/datagrid/DataGridBody.tsx","../../src/components/datagrid/DataGridCell.tsx","../../src/components/datagrid/DataGridColumn.tsx","../../src/components/datagrid/DataGridHeader.tsx","../../src/components/datagrid/DataGridRow.tsx","../../src/components/datagrid/DataGridSelectionCell.tsx"],"sourcesContent":["import { createContext } from 'react'\n\n/**\n * The grid's `align`, read by `DataGridCell`: with one set, a cell renders its content in one\n * `.datagrid-cell-content` for `DataGrid.scss` to place (see the `align` rule there).\n */\nexport const DataGridAlignContext = createContext<'bottom' | 'middle' | 'top' | undefined>(\n  undefined\n)\n","import React, { useContext } from 'react'\nimport classNames from 'classnames'\nimport { TableStateContext } from 'react-aria-components'\n\nexport type ColumnPin = 'start' | 'end'\n\n/**\n * A column's `pin`, read off the resolved collection. `DataGridColumn` passes `pin` through to\n * react-aria-components' `Column`, whose collection builder keeps the props it is given, so it\n * reaches `column.props.pin` however the header was written: static children, fragments, a\n * wrapper component or the `columns` render function.\n */\nexport const getColumnPin = (\n  column: { props?: unknown } | null | undefined\n): ColumnPin | undefined => {\n  const pin = (column?.props as { pin?: unknown } | undefined)?.pin\n  return pin === 'start' || pin === 'end' ? pin : undefined\n}\n\n/**\n * The scroll-cue class of a column: `datagrid-pin-cue-start` on the last `pin=\"start\"` column,\n * `datagrid-pin-cue-end` on the first `pin=\"end\"` one, the boundary of each pinned group.\n * `DataGrid.scss` gives it the shadow while the grid carries `datagrid-scrolled-start`/\n * `datagrid-scrolled-end`. A class on the cell and a rule in the stylesheet, not a `<style>`\n * element written per grid: the HTML standard allows a `<style>` in `<body>` only with its rules\n * in `@scope`, which the browsers this package supports don't all have.\n */\nconst usePinCueClassName = (columnIndex: number | null | undefined): string => {\n  const columns = useContext(TableStateContext)?.collection.columns\n  if (columnIndex == null || !columns) return ''\n  let start: number | null = null\n  let end: number | null = null\n  columns.forEach((column, index) => {\n    const pin = getColumnPin(column)\n    if (pin === 'start') start = index\n    else if (pin === 'end' && end == null) end = index\n  })\n  if (columnIndex === start) return 'datagrid-pin-cue-start'\n  if (columnIndex === end) return 'datagrid-pin-cue-end'\n  return ''\n}\n\n/**\n * The element react-aria-components renders for a column header's or a cell's `render`, with the\n * scroll-cue class of its column added. A component, so the table state is read where the element\n * really renders: `DataGridColumn` and `DataGridCell` themselves also run in the pass that builds\n * the collection, which has no table state yet, and their render props are kept from that pass.\n */\nexport const PinCueElement = ({\n  columnIndex,\n  ...props\n}: React.ComponentProps<'div'> & { columnIndex: number | null | undefined }) => {\n  const pinCueClassName = usePinCueClassName(columnIndex)\n  return <div {...props} className={classNames(props.className, pinCueClassName) || undefined} />\n}\n","import { LayoutInfo, Rect, TableLayout } from 'react-aria-components'\n\nimport { getColumnPin } from './pinnedColumns'\n\ntype LayoutNode = ReturnType<TableLayout<unknown>['buildCell']>\ntype GridNode<T> = Parameters<TableLayout<T>['buildCell']>[0]\n\n/**\n * `DataGrid`'s own subclass of react-aria-components' `TableLayout`. It pins columns inside the\n * layout engine, from the rects the engine computes, so a pinned column is sized, stacked and\n * mounted by the same code that lays out every other cell.\n *\n * `pin=\"start\"` reuses the engine's sticky positioning (`isStickyColumn`, hardcoded to `false`\n * upstream): the same mechanism that keeps the header row at the top, `position: sticky` at the\n * column's own offset from the leading edge, mirrored for RTL by the engine itself.\n *\n * `pin=\"end\"` has no such mechanism. The engine's sticky cells are `inline-block`s in the row's\n * flow, so their in-flow position is the leading edge, and `position: sticky` toward the trailing\n * edge never moves them. So an end-pinned cell keeps its absolute position, and\n * `getVisibleLayoutInfos` moves it to `min(its own x, the visible rect's trailing edge minus the\n * end-pinned columns after it)`. The virtualizer renders again on every scroll (react-aria's\n * scroll view commits the new visible rect with `flushSync`), so the cell moves in the same\n * commit as the rows do. Every coordinate is logical: the engine writes `right` instead of `left`\n * under RTL, and its visible rect's `x` is the distance scrolled from the leading edge.\n *\n * Both sides are persisted: `isStickyColumn` returns `true` for them, which is what puts a\n * column's index in the list of cells the engine always renders. The end-pinned ones then have\n * `isSticky` taken back off in `buildColumn`/`buildCell`.\n */\nexport class DataGridTableLayout<T> extends TableLayout<T> {\n  // The positioned copy last returned for each end-pinned layout info, reused while its `x` holds\n  // so a vertical scroll doesn't re-render every pinned cell.\n  private positioned = new WeakMap<LayoutInfo, LayoutInfo>()\n\n  private pinOf(node: { type: string; index: number; colIndex?: number | null }) {\n    const colIndex = node.type === 'column' ? node.index : (node.colIndex ?? node.index)\n    return getColumnPin(this.collection.columns[colIndex])\n  }\n\n  private get hasEndPinnedColumn() {\n    return this.collection.columns.some((column) => getColumnPin(column) === 'end')\n  }\n\n  protected isStickyColumn(node: GridNode<T>): boolean {\n    return this.pinOf(node) != null\n  }\n\n  protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {\n    return this.unstickEndPinned(node, super.buildColumn(node, x, y))\n  }\n\n  protected buildCell(node: GridNode<T>, x: number, y: number): LayoutNode {\n    return this.unstickEndPinned(node, super.buildCell(node, x, y))\n  }\n\n  private unstickEndPinned(node: GridNode<T>, layoutNode: LayoutNode): LayoutNode {\n    if (this.pinOf(node) === 'end') layoutNode.layoutInfo.isSticky = false\n    return layoutNode\n  }\n\n  // The engine stacks header cells from the leading edge down (`columns.length - i + 1`), so a\n  // header to the right of another is below it. An end-pinned header covers the ones scrolling\n  // under it, so it goes above all of them; body cells already take the sticky cells' 2.\n  protected buildHeaderRow(...args: Parameters<TableLayout<T>['buildHeaderRow']>): LayoutNode {\n    const row = super.buildHeaderRow(...args)\n    const columns = row.children ?? []\n    for (const column of columns) {\n      if (column.node && this.pinOf(column.node as GridNode<T>) === 'end') {\n        column.layoutInfo.zIndex = columns.length + 2\n      }\n    }\n    return row\n  }\n\n  // A row stops building cells past the requested rect's trailing edge, so an end-pinned cell\n  // further right than the overscan had no layout to render. With an end-pinned column every row\n  // is built across its whole width: layout objects only, the DOM is still windowed.\n  protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {\n    if (!this.hasEndPinnedColumn) return super.buildRow(node, x, y)\n    const requested = this.requestedRect\n    this.requestedRect = new Rect(requested.x, requested.y, Infinity, requested.height)\n    try {\n      return super.buildRow(node, x, y)\n    } finally {\n      this.requestedRect = requested\n    }\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    const infos = super.getVisibleLayoutInfos(rect)\n    const { columns } = this.collection\n    const visible = this.virtualizer?.visibleRect\n    if (!visible || !Number.isFinite(visible.maxX) || !this.hasEndPinnedColumn) return infos\n\n    // Each end-pinned column's distance from the trailing edge: the widths of the end-pinned\n    // columns after it.\n    const trailing = new Map<number, number>()\n    let width = 0\n    for (let index = columns.length - 1; index >= 0; index--) {\n      const column = columns[index]\n      if (!column || getColumnPin(column) !== 'end') continue\n      trailing.set(index, width)\n      width += this.getLayoutInfo(column.key)?.rect.width ?? 0\n    }\n\n    const edge = visible.maxX - this.padding\n    return infos.map((info) => {\n      if (info.type !== 'column' && info.type !== 'cell') return info\n      const node = this.collection.getItem(info.key) as GridNode<T> | null\n      if (!node) return info\n      const colIndex = node.type === 'column' ? node.index : (node.colIndex ?? node.index)\n      const offset = trailing.get(colIndex)\n      if (offset == null) return info\n      const x = Math.min(info.rect.x, edge - offset - info.rect.width)\n      if (x === info.rect.x) return info\n      const last = this.positioned.get(info)\n      if (last?.rect.x === x) return last\n      const copy = info.copy()\n      copy.rect.x = x\n      this.positioned.set(info, copy)\n      return copy\n    })\n  }\n\n  // An empty body fills the viewport below the header. On the server the viewport has no size,\n  // so the body came out as tall as minus the header (`height: -40px`), which CSS doesn't allow.\n  protected buildRowGroup(...args: Parameters<TableLayout<T>['buildRowGroup']>) {\n    const group = super.buildRowGroup(...args)\n    group.layoutInfo.rect.height = Math.max(0, group.layoutInfo.rect.height)\n    return group\n  }\n}\n","import React, {\n  ReactElement,\n  ReactNode,\n  Ref,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport classNames from 'classnames'\nimport {\n  Key,\n  Selection,\n  SortDescriptor,\n  Table as AriaTable,\n  Virtualizer\n} from 'react-aria-components'\n\nimport { useForkedRef } from '../../hooks/useForkedRef'\nimport { useSelectionForMode } from '../../hooks/useSelectionForMode'\nimport { ContextColor } from '../../types'\nimport { TABLE_ALIGN_CLASS_NAMES } from '../../utils/tableClassName'\nimport { DataGridAlignContext } from './context'\nimport { DataGridBodyProps } from './DataGridBody'\nimport { DataGridHeaderProps } from './DataGridHeader'\nimport { DataGridTableLayout } from './DataGridTableLayout'\nimport './DataGrid.scss'\n\n// No `striped`/`stacked` props: zebra-striping via CSS `:nth-of-type` (Table's approach) isn't\n// virtualization-safe — a windowed row's DOM siblings are only the currently-mounted rows, not\n// every logical row, so the stripe parity would flip as the mounted window's starting index\n// changes during scroll. A correct implementation needs the row's real index at render time, not\n// a pure-CSS trick; deferred rather than shipped broken.\ninterface DataGridOwnProps<T extends object> {\n  /**\n   * An accessible label for the grid, used when there's no visible heading.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible heading element for the grid.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Set the vertical alignment of the body cells' content, as `Table`'s prop of the same name\n   * does. The header row keeps its own alignment, as a table's does.\n   */\n  align?: 'bottom' | 'middle' | 'top'\n  /**\n   * Add borders on all sides of the grid and cells.\n   */\n  bordered?: boolean\n  /**\n   * Remove borders on all sides of the grid and cells.\n   */\n  borderless?: boolean\n  /**\n   * A `DataGridHeader` and a `DataGridBody`, each built from `DataGridColumn`/`DataGridRow`/\n   * `DataGridCell`.\n   */\n  children: [ReactElement<DataGridHeaderProps<T>>, ReactElement<DataGridBodyProps<T>>]\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component.\n   */\n  color?: ContextColor\n  /**\n   * A list of row keys to disable. Disabled rows cannot be selected, focused, or interacted with.\n   */\n  disabledKeys?: Iterable<Key>\n  /**\n   * Content shown below the grid, e.g. a totals row or a \"load more\" control. Rendered as plain\n   * markup outside the grid's own scrollable/virtualized region — not part of the\n   * keyboard-navigable grid, and never scrolls out of view along with the body rows. Mirrors\n   * `Table`'s `footer` prop for API parity.\n   */\n  footer?: ReactNode\n  /**\n   * Enable a hover state on grid rows.\n   */\n  hover?: boolean\n  /**\n   * Handler that is called when the selection changes.\n   */\n  onSelectionChange?: (keys: Selection) => void\n  /**\n   * Handler that is called when a column is sorted.\n   */\n  onSortChange?: (descriptor: SortDescriptor) => void\n  /**\n   * The currently selected row keys (controlled).\n   */\n  selectedKeys?: Selection\n  /**\n   * The type of selection that is allowed.\n   */\n  selectionMode?: 'none' | 'single' | 'multiple'\n  /**\n   * Make the grid more compact by cutting all cell padding.\n   */\n  sm?: boolean\n  /**\n   * The current sort column and direction.\n   */\n  sortDescriptor?: SortDescriptor\n}\n\ntype DataGridRowHeightProps =\n  | {\n      /**\n       * Row height in pixels, or `\"auto\"` to measure each row from its own rendered content\n       * instead of a single fixed height shared by every row (pair it with a required\n       * `estimatedRowHeight`, and see the docs site's \"Variable row height\" section for the\n       * tradeoffs). A fixed number renders every row, including the header, at that exact\n       * height; content taller than it visually overflows rather than growing the row.\n       */\n      rowHeight: number\n      estimatedRowHeight?: never\n    }\n  | {\n      rowHeight: 'auto'\n      /**\n       * Seeds the virtualizer's scroll-position math for rows that haven't been measured yet.\n       * Required when `rowHeight=\"auto\"` — pick a value close to the typical row's real height\n       * to minimize scroll-jump on first measurement. A row's real height can still turn out far\n       * from this estimate once it renders, which can cause a visible scroll-jump for rows the\n       * viewport hasn't reached yet.\n       */\n      estimatedRowHeight: number\n    }\n\nexport type DataGridProps<T extends object> = DataGridOwnProps<T> & DataGridRowHeightProps\n\nconst DataGridInner = <T extends object>(\n  {\n    align,\n    bordered,\n    borderless,\n    children,\n    className,\n    color,\n    disabledKeys,\n    estimatedRowHeight,\n    footer,\n    hover,\n    onSelectionChange,\n    onSortChange,\n    rowHeight,\n    selectedKeys,\n    selectionMode = 'none',\n    sm,\n    sortDescriptor,\n    ...rest\n  }: DataGridProps<T>,\n  forwardedRef: Ref<HTMLDivElement>\n) => {\n  const selection = useSelectionForMode({ onSelectionChange, selectedKeys, selectionMode })\n  const isVariableRowHeight = rowHeight === 'auto'\n  const layout = useMemo(\n    () =>\n      new DataGridTableLayout<T>(\n        // `headingHeight` is pinned to `estimatedRowHeight` (fixed, not itself an estimate) in\n        // variable-height mode — leaving it unset falls back to `estimatedRowHeight` as an\n        // *estimate* for the header too, which sounds harmless but isn't: the header's own\n        // sticky-positioned outer wrapper (built once in `buildTableHeader`, see\n        // `DataGridTableLayout`'s doc comment for why the header is sticky at all) is never\n        // recomputed when a column-header cell's later real measurement corrects its height, so\n        // the outer wrapper's stale height desyncs from the cell's real one, spilling header\n        // content into the body's first row instead of the header growing to fit it. Fixing the\n        // header's height sidesteps that gap instead of shipping it.\n        isVariableRowHeight\n          ? { estimatedRowHeight, headingHeight: estimatedRowHeight }\n          : { rowHeight }\n      ),\n    [isVariableRowHeight, rowHeight, estimatedRowHeight]\n  )\n  const gridRef = useRef<HTMLDivElement>(null)\n  const ref = useForkedRef(forwardedRef, gridRef)\n\n  // Drives the pin=start/pin=end scroll-cue box-shadow — see `PinCueElement` — which should\n  // only appear once there's actually hidden content under the pinned column to cue.\n  const [scrolledStart, setScrolledStart] = useState(false)\n  const [scrolledEnd, setScrolledEnd] = useState(false)\n\n  useEffect(() => {\n    const grid = gridRef.current\n    if (!grid) return\n\n    const updateScrollState = () => {\n      // Under RTL, browsers count `scrollLeft` from 0 at the start down to minus the overflow, so\n      // the distance scrolled from the start is its absolute value in either direction.\n      const scrolled = Math.abs(grid.scrollLeft)\n      setScrolledStart(scrolled > 0)\n      setScrolledEnd(Math.ceil(scrolled + grid.clientWidth) < grid.scrollWidth)\n    }\n\n    updateScrollState()\n    grid.addEventListener('scroll', updateScrollState, { passive: true })\n    // The grid's own size, and its content's: a column set that changes (a column added, a\n    // `defaultWidth`, a `pin`) changes the scroll width with no scroll and no resize of the grid,\n    // and the cue kept its previous state until the user scrolled. The content is the one child\n    // react-aria's scroll view sizes to the layout.\n    const observer =\n      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateScrollState)\n    observer?.observe(grid)\n    if (grid.firstElementChild) observer?.observe(grid.firstElementChild)\n    return () => {\n      grid.removeEventListener('scroll', updateScrollState)\n      observer?.disconnect()\n    }\n  }, [])\n\n  const _className = classNames(\n    'datagrid',\n    color,\n    align && TABLE_ALIGN_CLASS_NAMES[align],\n    {\n      bordered,\n      borderless,\n      // The color class names the color; `.datagrid.context` (DataGrid.scss) paints with it, as\n      // `.table.context` does for `Table`.\n      context: !!color,\n      hoverable: hover,\n      sm,\n      'datagrid-scrolled-start': scrolledStart,\n      'datagrid-scrolled-end': scrolledEnd\n    },\n    className\n  )\n\n  return (\n    <Virtualizer layout={layout} shouldObserveItemSize={isVariableRowHeight}>\n      <AriaTable\n        aria-label={rest['aria-label']}\n        aria-labelledby={rest['aria-labelledby']}\n        className={_className || undefined}\n        disabledKeys={disabledKeys}\n        onSelectionChange={selection.onSelectionChange}\n        onSortChange={onSortChange}\n        ref={ref}\n        selectedKeys={selection.selectedKeys}\n        selectionMode={selectionMode}\n        sortDescriptor={sortDescriptor}\n        // react-aria joins the grid's descriptions without dropping an empty result, so a grid\n        // with none had `aria-describedby=\"\"`.\n        render={(props) => (\n          <div\n            {...(props as React.ComponentProps<'div'>)}\n            aria-describedby={props['aria-describedby'] || undefined}\n          />\n        )}\n      >\n        <DataGridAlignContext.Provider value={align}>{children}</DataGridAlignContext.Provider>\n      </AriaTable>\n      {footer && (\n        // A sibling of the grid, so it takes the color itself: nothing reaches it by inheritance.\n        <div className={classNames('datagrid-footer', color, { borderless, context: !!color, sm })}>\n          {footer}\n        </div>\n      )}\n    </Virtualizer>\n  )\n}\n\n// `forwardRef` erases type parameters, so the generic component is cast back to a generic\n// signature for callers — same pattern `Table` uses.\nexport const DataGrid = forwardRef(DataGridInner) as <T extends object>(\n  props: DataGridProps<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement\n\n;(DataGrid as { displayName?: string }).displayName = 'DataGrid'\n","import React, { ReactElement, ReactNode, useMemo } from 'react'\nimport classNames from 'classnames'\nimport {\n  TableBody as AriaTableBody,\n  TableBodyRenderProps,\n  TableLoadMoreItem\n} from 'react-aria-components'\n\n// A unique value appended to `items` internally to represent the trailing \"load more\" row in\n// react-aria-components' collection. `TableLoadMoreItem` has to be returned from the per-item\n// render function like any other row — react-aria-components' `useCachedChildren` only supports\n// EITHER `items` + a render function OR static `children`, never a mix of both in the same\n// `children` prop, so a `<TableLoadMoreItem>` placed as a plain JSX sibling inside `<TableBody>`\n// is silently dropped (or crashes, if `children` becomes an array mixing the render function in).\n// Checked by reference (`item === LOADER_ITEM`), so it can never collide with a real `T` the way a\n// `{ __loader: true }` marker object might if compared structurally. Its `id` matters too, not\n// just its identity: react-aria-components derives each rendered item's React key from\n// `rendered.props.id ?? item?.key ?? item?.id ?? <positional index>` (`useCachedChildren`) —\n// `TableLoadMoreItem` doesn't accept an `id` prop itself, so without this object's own `id` the\n// loader's key falls back to its position in the array, which collides with a real row whenever a\n// row's own `id` happens to equal that count (e.g. a 2-item list with a row literally id `\"2\"`).\nconst LOADER_ITEM = { id: '__datagrid-body-loader__' }\n\ninterface DataGridBodyOwnProps {\n  /**\n   * A string of all className you want applied to the body row group.\n   */\n  className?: string\n  /**\n   * Values that should invalidate the row cache when using the `items`/render-function form of\n   * `children` — e.g. a value from outside `items` that the render function reads. Without this,\n   * changing that outside value won't re-render already-cached rows, since dynamic rows are only\n   * rebuilt when `items` or `dependencies` change by reference, not on every parent re-render.\n   */\n  dependencies?: ReadonlyArray<unknown>\n  /**\n   * Content shown in place of rows when `items` is empty.\n   */\n  renderEmptyState?: (props: TableBodyRenderProps) => React.ReactNode\n}\n\n/**\n * The `items` + render-function form. `isLoading`/`loadingContent`/`onLoadMore` live here rather\n * than alongside the static form because the loader row is generated by appending to `items` and\n * rendering through that same function — there's no growing dataset to load more of, and nothing\n * to render the loader with, in a hand-written list of `DataGridRow` elements.\n */\ninterface DataGridBodyDynamicProps<T> {\n  /**\n   * A render function called once per item in `items`, returning that row's `DataGridRow`.\n   */\n  children: (item: T) => ReactElement\n  /**\n   * Whether more items are currently being fetched. Shows `loadingContent` in the loader row while\n   * true, and — until this goes back to `false` — suppresses further `onLoadMore` calls, so one\n   * scroll-into-view doesn't fire the callback again before the in-flight fetch resolves.\n   */\n  isLoading?: boolean\n  /**\n   * A list of row data objects, rendered via the function form of `children`.\n   */\n  items: Iterable<T>\n  /**\n   * Content rendered inside the loader row while `isLoading` is true, e.g. a spinner. Only takes\n   * effect alongside `onLoadMore`.\n   */\n  loadingContent?: ReactNode\n  /**\n   * Called when the grid scrolls near its last row, so more data can be fetched and appended to\n   * `items`. Pair with `isLoading` so a fetch already in flight isn't triggered again before it\n   * resolves.\n   */\n  onLoadMore?: () => void\n}\n\n/** The static form: `DataGridRow` elements written out directly. */\ninterface DataGridBodyStaticProps {\n  /**\n   * `DataGridRow` elements.\n   */\n  children: ReactElement | ReactElement[]\n  isLoading?: never\n  items?: never\n  loadingContent?: never\n  onLoadMore?: never\n}\n\n/**\n * Split into a static and a dynamic form so the two can't be mixed: the loader row is appended to\n * `items` and rendered through `children`, so `onLoadMore` alongside a static list of elements used\n * to type-check and then throw at render (\"children is not a function\") the moment the loader row\n * came up.\n */\nexport type DataGridBodyProps<T> = DataGridBodyOwnProps &\n  (DataGridBodyDynamicProps<T> | DataGridBodyStaticProps)\n\n/**\n * Body row group for `DataGrid`, containing `DataGridRow`s. Unlike `Table`'s sub-parts, this\n * renders directly — it's a thin wrapper over react-aria-components' own `TableBody`.\n *\n * Always carries the `datagrid-body` class — see `DataGridHeader`'s equivalent note.\n */\nexport const DataGridBody = <T extends object>({\n  children,\n  className,\n  dependencies,\n  isLoading,\n  items,\n  loadingContent,\n  onLoadMore,\n  renderEmptyState\n}: DataGridBodyProps<T>) => {\n  const hasLoader = onLoadMore != null && items != null\n\n  const itemsWithLoader = useMemo(() => {\n    if (!hasLoader) return items\n    return [...(items as Iterable<T>), LOADER_ITEM] as Iterable<T>\n  }, [hasLoader, items])\n\n  // react-aria-components caches each rendered row by item identity (see `dependencies`'s own doc\n  // comment above) — the loader branch below reads `isLoading`/`onLoadMore`/`loadingContent`, none\n  // of which are part of `items`, so without surfacing them here the cached loader row would keep\n  // whatever `isLoading` value (and stale `onLoadMore` closure) was in scope the first time it\n  // rendered, never picking up a later change.\n  const dependenciesWithLoader = useMemo(\n    () =>\n      hasLoader ? [...(dependencies ?? []), isLoading, onLoadMore, loadingContent] : dependencies,\n    [dependencies, hasLoader, isLoading, onLoadMore, loadingContent]\n  )\n\n  const bodyChildren = hasLoader\n    ? (item: T) =>\n        (item as unknown) === LOADER_ITEM ? (\n          <TableLoadMoreItem\n            className=\"datagrid-loader\"\n            isLoading={isLoading}\n            // Suppresses re-triggering onLoadMore while a fetch is already in flight — the\n            // underlying sentinel has no built-in debounce of its own and calls onLoadMore again\n            // whenever it (re-)observes the sentinel still intersecting, e.g. after the collection\n            // changes but the loader row hasn't yet scrolled out of view.\n            onLoadMore={isLoading ? undefined : onLoadMore}\n          >\n            {loadingContent}\n          </TableLoadMoreItem>\n        ) : (\n          // `hasLoader` implies the dynamic form of the props union, whose `children` is the\n          // render function — `onLoadMore` isn't assignable alongside static children.\n          (children as (item: T) => ReactElement)(item)\n        )\n    : children\n\n  return (\n    <AriaTableBody\n      className={classNames('datagrid-body', className)}\n      dependencies={dependenciesWithLoader}\n      items={itemsWithLoader}\n      renderEmptyState={renderEmptyState}\n    >\n      {bodyChildren}\n    </AriaTableBody>\n  )\n}\n","import React, { ReactNode, useContext } from 'react'\nimport { Key, Cell as AriaCell } from 'react-aria-components'\nimport classNames from 'classnames'\n\nimport { DataGridAlignContext } from './context'\nimport { PinCueElement } from './pinnedColumns'\n\nexport interface DataGridCellProps {\n  /**\n   * The contents of the cell.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the cell.\n   */\n  className?: string\n  /**\n   * Indicates how many columns the cell spans.\n   */\n  colSpan?: number\n  /**\n   * The unique id of the cell.\n   */\n  id?: Key\n  /**\n   * A string representation of the cell's contents, used for typeahead.\n   */\n  textValue?: string\n}\n\n/**\n * A cell within a `DataGrid` row. Unlike `Table`'s sub-parts, this renders directly — it's a\n * thin wrapper over react-aria-components' own `Cell`.\n */\nexport const DataGridCell = ({\n  children,\n  className,\n  colSpan,\n  id,\n  textValue\n}: DataGridCellProps) => {\n  // Under a grid with `align`, the content is one element for the cell, a column flexbox then,\n  // to place on the cross axis (`DataGrid.scss`): inline content keeps its flow inside it.\n  const align = useContext(DataGridAlignContext)\n  return (\n    <AriaCell\n      className={classNames('datagrid-cell', className)}\n      colSpan={colSpan}\n      id={id}\n      render={(props, { columnIndex }) => (\n        <PinCueElement {...(props as React.ComponentProps<'div'>)} columnIndex={columnIndex} />\n      )}\n      textValue={textValue}\n    >\n      {align ? <div className=\"datagrid-cell-content\">{children}</div> : children}\n    </AriaCell>\n  )\n}\n","import React, { ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Key, Column as AriaColumn } from 'react-aria-components'\nimport { ColumnSize, ColumnStaticSize } from 'react-stately'\n\nimport { PinCueElement } from './pinnedColumns'\n\nexport interface DataGridColumnProps {\n  /**\n   * Whether the column allows sorting. Adds a sort indicator and makes the header\n   * clickable/keyboard-activatable.\n   */\n  allowsSorting?: boolean\n  /**\n   * Rendered contents of the column header.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the column header.\n   */\n  className?: string\n  /**\n   * The initial width of the column, e.g. for a narrow selection/icon column — a plain number or\n   * `'<n>%'` for a fixed size, or `'<n>fr'` to share remaining space with other fractional\n   * columns in proportion (columns default to `'1fr'`, so they split space evenly unless given\n   * one of these). Unlike `Table`, which sizes a narrow column via `width: 1%` relying on native\n   * `<table>` auto-layout, `DataGrid`'s virtualized layout computes every column's width itself —\n   * a CSS `width` rule on the cell has no effect, so this prop is the only way to size a column.\n   */\n  defaultWidth?: ColumnSize | null\n  /**\n   * The unique id of the column, referenced by `sortDescriptor.column`.\n   */\n  id?: Key\n  /**\n   * Whether this column is a row header, announced by assistive technology during row\n   * navigation.\n   */\n  isRowHeader?: boolean\n  /**\n   * The maximum width of the column, as a fixed pixel number or `'<n>%'`.\n   */\n  maxWidth?: ColumnStaticSize | null\n  /**\n   * The minimum width of the column, as a fixed pixel number or `'<n>%'`.\n   */\n  minWidth?: ColumnStaticSize | null\n  /**\n   * Pin the column so it stays visible while the grid scrolls horizontally: `'start'` pins it to\n   * the leading edge, `'end'` to the trailing edge. Stacks correctly with other pinned columns on\n   * the same side, in declaration order.\n   */\n  pin?: 'start' | 'end'\n  /**\n   * A string representation of the column header, used for accessibility announcements. Defaults\n   * to `children` when it's a plain string — set this explicitly when the header contains\n   * anything else (an icon, a `Tooltip`, etc.).\n   */\n  textValue?: string\n}\n\n/**\n * A column within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin\n * wrapper over react-aria-components' own `Column`.\n *\n * When `allowsSorting` is set, renders a sort indicator after `children` — mirrors `Table`'s own\n * `TableColumnHeader`, but reads the active direction from react-aria-components' own\n * `ColumnRenderProps` (via the `children` render-prop form) instead of reaching into table state\n * directly, since this wrapper has no state of its own to read.\n */\nexport const DataGridColumn = ({\n  allowsSorting,\n  children,\n  className,\n  defaultWidth,\n  id,\n  isRowHeader,\n  maxWidth,\n  minWidth,\n  pin,\n  textValue\n}: DataGridColumnProps) => (\n  <AriaColumn\n    allowsSorting={allowsSorting}\n    className={classNames('datagrid-col', pin && `datagrid-col-pinned-${pin}`, className)}\n    defaultWidth={defaultWidth}\n    id={id}\n    isRowHeader={isRowHeader}\n    maxWidth={maxWidth}\n    minWidth={minWidth}\n    textValue={textValue}\n    // A column header's render props don't say which column it is, unlike a cell's\n    // `columnIndex`; its `aria-colindex` (1-based) does.\n    render={(props) => {\n      const colIndex = Number(props['aria-colindex'])\n      return (\n        <PinCueElement\n          {...(props as React.ComponentProps<'div'>)}\n          columnIndex={Number.isNaN(colIndex) ? null : colIndex - 1}\n        />\n      )\n    }}\n    // `pin` isn't a react-aria-components `Column` prop, but its collection builder preserves\n    // the full props object it's given verbatim (see react-stately's `Column.getCollectionNode`)\n    // — passing it through here is what makes it reach `column.props.pin`, which\n    // `DataGridTableLayout` positions both sides from and `PinCueElement` reads.\n    {...({ pin } as Record<string, unknown>)}\n  >\n    {allowsSorting\n      ? ({ sortDirection }) => (\n          <>\n            {children}\n            <span aria-hidden=\"true\" className=\"datagrid-sort-icon\">\n              {sortDirection === 'ascending' ? '▲' : sortDirection === 'descending' ? '▼' : '⇅'}\n            </span>\n          </>\n        )\n      : children}\n  </AriaColumn>\n)\n","import React, { ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { TableHeader as AriaTableHeader } from 'react-aria-components'\n\nexport interface DataGridHeaderProps<T> {\n  /**\n   * `DataGridColumn` elements, or a render function paired with `columns` for dynamic column\n   * generation.\n   */\n  children: ReactNode | ((column: T) => ReactElement)\n  /**\n   * A string of all className you want applied to the header row group.\n   */\n  className?: string\n  /**\n   * A list of column data objects, rendered via the function form of `children`.\n   */\n  columns?: Iterable<T>\n  /**\n   * Values that should invalidate the column cache when using the `columns`/render-function form\n   * of `children` — see `DataGridBody`'s `dependencies` for why this matters.\n   */\n  dependencies?: ReadonlyArray<unknown>\n}\n\n/**\n * Header row group for `DataGrid`, containing `DataGridColumn`s. Unlike `Table`'s sub-parts,\n * this renders directly — it's a thin wrapper over react-aria-components' own `TableHeader`.\n *\n * Always carries the `datagrid-header` class (not just the caller's `className`) — `DataGrid.scss`\n * uses it to tell header cells from body cells, since react-aria-components renders both as plain\n * `[role=\"rowgroup\"]` divs with no structural difference to select on otherwise.\n */\nexport const DataGridHeader = <T extends object>({\n  children,\n  className,\n  columns,\n  dependencies\n}: DataGridHeaderProps<T>) => (\n  <AriaTableHeader\n    className={classNames('datagrid-header', className)}\n    columns={columns}\n    dependencies={dependencies}\n  >\n    {children}\n  </AriaTableHeader>\n)\n","import React, { ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Key, Row as AriaRow } from 'react-aria-components'\n\nexport interface DataGridRowProps<T> {\n  /**\n   * `DataGridCell` elements, or a render function called once per column with that column's\n   * data — required when the row's parent `DataGridBody` uses the `items`/render-function form.\n   */\n  children: ReactNode | ((column: T) => ReactElement)\n  /**\n   * A string of all className you want applied to the row.\n   */\n  className?: string\n  /**\n   * A list of column data objects, rendered via the function form of `children`.\n   */\n  columns?: Iterable<T>\n  /**\n   * The unique id of the row, referenced by `selectedKeys`/`disabledKeys`.\n   */\n  id?: Key\n  /**\n   * A string representation of the row's contents, used for typeahead.\n   */\n  textValue?: string\n}\n\n/**\n * A row within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin\n * wrapper over react-aria-components' own `Row`.\n */\nexport const DataGridRow = <T extends object>({\n  children,\n  className,\n  columns,\n  id,\n  textValue\n}: DataGridRowProps<T>) => (\n  <AriaRow\n    className={classNames('datagrid-row', className)}\n    columns={columns}\n    id={id}\n    textValue={textValue}\n  >\n    {children}\n  </AriaRow>\n)\n","import React, { useRef } from 'react'\nimport { AriaCheckboxProps, useCheckbox } from 'react-aria'\nimport { useToggleState } from 'react-stately'\nimport { CheckboxContext, CheckboxProps, useSlottedContext } from 'react-aria-components'\n\nexport interface DataGridSelectionCellProps {\n  /**\n   * A string of all className you want applied to the checkbox, replacing the default\n   * `check-input`.\n   */\n  className?: string\n}\n\n/**\n * Reads the selection checkbox props react-aria-components' own `Row`/`TableHeader` publish on\n * `CheckboxContext`'s `selection` slot — the same ones its `<Checkbox slot=\"selection\">` would\n * consume, already carrying the localized label, the row-header `aria-labelledby`, and the\n * selected/disabled/indeterminate state.\n *\n * Reading them off that context (rather than calling react-aria's `useTableSelectionCheckbox`/\n * `useTableSelectAllCheckbox` against `TableStateContext` ourselves, as this file used to) is what\n * keeps this working when more than one copy of `react-aria` is installed. Those hooks resolve the\n * grid's id through a module-scoped `WeakMap` that only `useTable` populates, in whichever copy\n * ran it — always the copy bundled inside `react-aria-components` here, since its `Table` is what\n * calls `useTable`. `react-aria-components` pins `react-aria` to an exact version, so a consumer\n * whose own `react-aria` resolves anywhere else in our `^` range gets a second copy and the lookup\n * throws `Error: Unknown grid` on every selection cell. Letting react-aria-components compute the\n * props in its own copy sidesteps that entirely, and drops the duplicated `rowKey` this component\n * used to need — the context is already scoped to the row it's rendered in, so a `rowKey` that\n * disagreed with the surrounding `DataGridRow` can no longer silently toggle a different row.\n */\nconst useSelectionCheckboxProps = (component: string): AriaCheckboxProps => {\n  const props = useSlottedContext(CheckboxContext, 'selection') as CheckboxProps | null | undefined\n  if (!props) {\n    throw new Error(`${component} must be rendered inside a DataGrid with selection enabled.`)\n  }\n  return props as AriaCheckboxProps\n}\n\n/**\n * Selection checkbox for one `DataGrid` row — place inside a `DataGridCell`.\n *\n * react-aria-components' own `Checkbox` always visually hides its native `<input>` behind a custom\n * indicator the caller must supply. This renders a plain native `<input className=\"check-input\">`\n * instead, wired to the same state, so it picks up chassis-css's existing checkbox styling for\n * free with no new CSS of its own.\n */\nexport const DataGridSelectionCell = ({ className }: DataGridSelectionCellProps) => {\n  const checkboxProps = useSelectionCheckboxProps('DataGridSelectionCell')\n  return <DataGridCheckboxInput checkboxProps={checkboxProps} className={className} />\n}\n\n/**\n * \"Select all\" checkbox for `DataGrid`'s header row — place inside a `DataGridColumn`. See\n * `DataGridSelectionCell` for why this bypasses react-aria-components' own `Checkbox`.\n */\nexport const DataGridSelectAllCell = ({ className }: DataGridSelectionCellProps) => {\n  const checkboxProps = useSelectionCheckboxProps('DataGridSelectAllCell')\n  return <DataGridCheckboxInput checkboxProps={checkboxProps} className={className} />\n}\n\nconst DataGridCheckboxInput = ({\n  checkboxProps,\n  className\n}: {\n  checkboxProps: AriaCheckboxProps\n  className?: string\n}) => {\n  const toggleState = useToggleState(checkboxProps)\n  const ref = useRef<HTMLInputElement>(null)\n  const { inputProps } = useCheckbox(checkboxProps, toggleState, ref)\n\n  // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n  // gotcha 6).\n  return (\n    <input\n      {...inputProps}\n      aria-describedby={undefined}\n      className={className ?? 'check-input'}\n      ref={ref}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/chunks/datepicker-DuYmXiSe.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{u as e}from"./slot-DagH0Gxq.js";import{t}from"./useForkedRef-WoqMqsWE.js";import{i as n,n as r,s as i}from"./overlayPlacement-D2vfhhg3.js";import{t as a}from"./useFormField-q21MOgh8.js";import{t as o}from"./useFormReset-BK5Yb24_.js";import{t as s}from"./useOpenStateProps-CdSO1nmI.js";import{t as c}from"./useRequiredValueInput-CL7AIgqz.js";import{t as l}from"./Portal-BTDylxAi.js";import{t as u}from"./renderFormField-CaZ8-xrn.js";import{a as d,i as ee,n as te,o as f,r as p,t as m}from"./RangeCalendar-DRcg1Hp3.js";import{t as h}from"./validationClassName-gRGs4KBm.js";import{n as g,t as _}from"./DateField-G1TP9ayt.js";import v,{forwardRef as y,useMemo as ne,useRef as b,useState as re}from"react";import ie from"classnames";import{FocusScope as x,mergeProps as ae,useButton as S,useDateFormatter as C,useDatePicker as oe,useDateRangePicker as se,useDialog as ce,useOverlay as w,useOverlayPosition as T}from"react-aria";import{useDatePickerState as le,useDateRangePickerState as ue,useOverlayTriggerState as E}from"react-stately";import{toCalendarDate as D}from"@internationalized/date";const de=({overlayRef:e,state:t,triggerRef:a})=>{let{overlayProps:o}=w({isDismissable:!0,isOpen:t.isOpen,onClose:t.close,shouldCloseOnBlur:!0,shouldCloseOnInteractOutside:e=>!a.current?.contains(e)},e),{overlayProps:s,placement:c}=T({isOpen:t.isOpen,offset:2,onClose:null,overlayRef:e,placement:n(`bottom-start`),targetRef:a}),{style:l,...u}=ae(o,s);return{overlayStyle:{position:l?.position,top:l?.top,left:l?.left},placementAttr:r(`bottom-start`,c),overlayDismissProps:u,portalContainer:i({close:t.close,isOpen:t.isOpen,triggerRef:a})}},fe=y(({buttonProps:e,state:n},r)=>{let i=b(null),a=t(i,r),{buttonProps:o}=S({...e,onPress:()=>n.toggle()},i);return/* @__PURE__ */ v.createElement(`button`,{...o,className:`input-adorn`,ref:a,type:`button`},/* @__PURE__ */ v.createElement(`svg`,{fill:`none`,height:`16`,viewBox:`0 0 16 16`,width:`16`,xmlns:`http://www.w3.org/2000/svg`},/* @__PURE__ */ v.createElement(`rect`,{height:`12`,rx:`1.5`,stroke:`currentColor`,strokeWidth:`1.25`,width:`13`,x:`1.5`,y:`3`}),/* @__PURE__ */ v.createElement(`path`,{d:`M1.5 6.5h13`,stroke:`currentColor`,strokeWidth:`1.25`}),/* @__PURE__ */ v.createElement(`path`,{d:`M4.5 1.5v3M11.5 1.5v3`,stroke:`currentColor`,strokeLinecap:`round`,strokeWidth:`1.25`})))});fe.displayName=`CalendarToggleButton`;const pe=({isDisabled:e,onPress:t})=>{let n=b(null),r=f(),{buttonProps:i}=S({"aria-label":r.clear,isDisabled:e,onPress:t},n);return/* @__PURE__ */ v.createElement(`button`,{...i,className:`input-adorn`,ref:n,type:`button`},/* @__PURE__ */ v.createElement(`svg`,{fill:`none`,height:`16`,viewBox:`0 0 16 16`,width:`16`,xmlns:`http://www.w3.org/2000/svg`},/* @__PURE__ */ v.createElement(`path`,{d:`M4 4l8 8M12 4l-8 8`,stroke:`currentColor`,strokeLinecap:`round`,strokeWidth:`1.25`})))},me=({calendar:e,className:t,clearButton:n,disabled:r,field:i,fieldClassName:a,groupProps:o,groupRef:s,invalid:c,isOpen:u,overlayDismissProps:d,overlayRef:ee,overlayStyle:te,placementAttr:f,portalContainer:p,size:m,toggleButton:g,valid:_})=>/* @__PURE__ */ v.createElement(v.Fragment,null,/* @__PURE__ */ v.createElement(`div`,{...o,className:ie(`form-input`,m,{disabled:r},h(c,_),t),ref:s},/* @__PURE__ */ v.createElement(`div`,{className:a},i),n,g),/* @__PURE__ */ v.createElement(l,{container:p},/* @__PURE__ */ v.createElement(`div`,{className:`datepicker`,"data-cx-placement":f,hidden:!u,ref:ee,...d,style:te},u&&p&&/* @__PURE__ */ v.createElement(x,{contain:!0,restoreFocus:!0},e)))),O=y((e,t)=>e.selectionMode===`multiple`?/* @__PURE__ */ v.createElement(A,{...e,ref:t}):/* @__PURE__ */ v.createElement(k,{...e,ref:t}));O.displayName=`DatePicker`;const k=y(({className:n,defaultOpen:r,defaultValue:i,defaultVisible:l,disabled:d,firstDayOfWeek:f,granularity:m,help:h,hideTimeZone:y,hourCycle:re,id:ie,invalid:x,invalidFeedback:S,isDateUnavailable:C,isOpen:se,label:w,labels:T,maxValue:ue,minValue:E,name:D,onChange:O,onOpenChange:k,onVisibleChange:A,placeholderValue:he,required:j,selectionMode:M,shouldForceLeadingZeros:ge,size:_e,unavailableDates:N,valid:ve,validFeedback:P,value:F,visible:ye,visibleMonths:be,...I},L)=>{let R=ne(()=>p(N,C),[N,C]),z=b(null),xe=t(L,z),B=b(null),V=b(null),H=b(null),U=b(null),{inputProps:W,missing:Se,valid:G}=c(V,{focus:()=>g(z.current),invalid:x,required:j,valid:ve}),K={defaultValue:i,granularity:m,hideTimeZone:y,hourCycle:re,isDateUnavailable:R,isDisabled:d,isInvalid:x||Se||void 0,isRequired:j,maxValue:ue,minValue:E,onChange:O,placeholderValue:he,shouldForceLeadingZeros:ge,value:F},q=le({...s({defaultOpen:r,defaultVisible:l,isOpen:se,onOpenChange:k,onVisibleChange:A,visible:ye},`DatePicker`),...K});o(z,F===void 0?i??null:F,q.setValue);let J=x||q.displayValidation.isInvalid,Y=G&&!J,{describedBy:Ce,feedbackId:X,helpId:Z,inputId:Q,labelId:we,labelledBy:Te}=a({ariaDescribedBy:I[`aria-describedby`],ariaLabelledBy:I[`aria-labelledby`],help:h,id:ie,invalid:J,invalidFeedback:S,label:w,valid:Y,validFeedback:P}),{buttonProps:Ee,calendarProps:$,descriptionProps:De,dialogProps:Oe,errorMessageProps:ke,fieldProps:Ae,groupProps:je}=oe({...K,"aria-describedby":Ce,"aria-label":I[`aria-label`],"aria-labelledby":Te,id:Q},q,z),Me=e(je,De,ke),{overlayStyle:Ne,placementAttr:Pe,overlayDismissProps:Fe,portalContainer:Ie}=de({overlayRef:H,state:q,triggerRef:z}),{dialogProps:Le}=ce(Oe,B),Re=T?.calendar?{...Ee,"aria-label":T.calendar}:Ee;return/* @__PURE__ */ v.createElement(ee,{labels:T},u({children:/* @__PURE__ */ v.createElement(v.Fragment,null,me({calendar:/* @__PURE__ */ v.createElement(te,{...Le,autoFocus:!0,defaultFocusedValue:$.defaultFocusedValue,disabled:d,firstDayOfWeek:f,isDateUnavailable:R,maxValue:ue,minValue:E,onChange:$.onChange,ref:B,value:$.value,visibleMonths:be}),className:n,clearButton:q.value&&!d&&/* @__PURE__ */ v.createElement(pe,{onPress:()=>{q.setValue(null),U.current?.focus()}}),disabled:d,field:/* @__PURE__ */ v.createElement(_,{fieldProps:e(Ae,De,ke)}),fieldClassName:`w-100 overflow-x-scroll`,groupProps:{...ae(Me,I),"aria-describedby":Me[`aria-describedby`],"aria-labelledby":Te},groupRef:xe,invalid:J,isOpen:q.isOpen,overlayDismissProps:Fe,overlayRef:H,overlayStyle:Ne,placementAttr:Pe,portalContainer:Ie,size:_e,toggleButton:/* @__PURE__ */ v.createElement(fe,{buttonProps:e(Re,De,ke),ref:U,state:q}),valid:Y}),(D||j)&&/* @__PURE__ */ v.createElement(`input`,{disabled:d,name:D,type:`hidden`,value:q.value?q.value.toString():``,...W,ref:V})),help:h,ids:{feedback:X,help:Z,label:we},invalid:J,invalidFeedback:S,label:w,valid:Y,validFeedback:P}))});k.displayName=`DatePickerSingle`;const A=y(({className:e,defaultOpen:n,defaultValue:r,defaultVisible:i,disabled:l,firstDayOfWeek:f,help:m,id:h,invalid:g,invalidFeedback:_,isDateUnavailable:y,isOpen:ie,label:x,labels:S,maxValue:C,minValue:oe,name:se,onChange:w,onOpenChange:T,onVisibleChange:le,required:ue,selectionMode:D,size:O,unavailableDates:k,valid:A,validFeedback:j,value:M,visible:ge,visibleMonths:_e,...N},ve)=>{let P=ne(()=>p(k,y),[k,y]),F=M!==void 0,[ye,be]=re(r??[]),I=F?M??[]:ye,L=e=>{F||be(e),w?.(e)},R=E(s({defaultOpen:n,defaultVisible:i,isOpen:ie,onOpenChange:T,onVisibleChange:le,visible:ge},`DatePicker`)),z=b(null),xe=t(ve,z),B=b(null),V=b(null),H=b(null),U=b(null);o(z,M===void 0?r??[]:M??[],L);let{inputProps:W,missing:Se,valid:G}=c(V,{focus:()=>U.current?.focus(),invalid:g,required:ue&&I.length===0,valid:A}),K=g||Se,{describedBy:q,feedbackId:J,helpId:Y,inputId:Ce,labelId:X,labelledBy:Z}=a({ariaDescribedBy:N[`aria-describedby`],ariaLabelledBy:N[`aria-labelledby`],help:m,id:h,invalid:K,invalidFeedback:_,label:x,valid:G,validFeedback:j}),{overlayStyle:Q,placementAttr:we,overlayDismissProps:Te,portalContainer:Ee}=de({overlayRef:H,state:R,triggerRef:z}),{dialogProps:$}=ce({"aria-label":N[`aria-label`],"aria-labelledby":Z},B),De={...d,...S},Oe={"aria-describedby":q,"aria-expanded":R.isOpen,"aria-haspopup":`dialog`,"aria-label":De.calendar,isDisabled:l};return/* @__PURE__ */ v.createElement(ee,{labels:S},u({children:/* @__PURE__ */ v.createElement(v.Fragment,null,me({calendar:/* @__PURE__ */ v.createElement(te,{...$,autoFocus:!0,disabled:l,firstDayOfWeek:f,isDateUnavailable:P,maxValue:C,minValue:oe,onChange:L,ref:B,selectionMode:`multiple`,value:I,visibleMonths:_e}),className:e,clearButton:I.length>0&&!l&&/* @__PURE__ */ v.createElement(pe,{onPress:()=>{L([]),U.current?.focus()}}),disabled:l,field:/* @__PURE__ */ v.createElement(he,{values:I}),fieldClassName:`w-100 overflow-x-scroll`,groupProps:{...ae(N),"aria-describedby":q,"aria-disabled":l||void 0,"aria-labelledby":Z,id:Ce,role:`group`},groupRef:xe,invalid:K,isOpen:R.isOpen,overlayDismissProps:Te,overlayRef:H,overlayStyle:Q,placementAttr:we,portalContainer:Ee,size:O,toggleButton:/* @__PURE__ */ v.createElement(fe,{buttonProps:Oe,ref:U,state:R}),valid:G}),se&&I.map(e=>/* @__PURE__ */ v.createElement(`input`,{disabled:l,key:e.toString(),name:se,type:`hidden`,value:e.toString()})),W&&/* @__PURE__ */ v.createElement(`input`,{disabled:l,value:``,...W,ref:V})),help:m,ids:{feedback:J,help:Y,label:X},invalid:K,invalidFeedback:_,label:x,valid:G,validFeedback:j}))});A.displayName=`DatePickerMultiple`;const he=({values:e})=>{let t=C({dateStyle:`medium`,timeZone:`UTC`});return/* @__PURE__ */ v.createElement(`div`,{className:`datepicker-field`},e.length>0&&/* @__PURE__ */ v.createElement(v.Fragment,null,e.slice().sort((e,t)=>e.compare(t)).map(e=>t.format(D(e).toDate(`UTC`))).join(`, `)))},j=y(({className:n,defaultOpen:r,defaultValue:i,defaultVisible:l,disabled:d,firstDayOfWeek:te,granularity:f,help:h,hideTimeZone:y,hourCycle:re,id:ie,invalid:x,invalidFeedback:S,isDateUnavailable:C,isOpen:oe,label:w,labels:T,maxValue:le,minValue:E,name:D,onChange:O,onOpenChange:k,onVisibleChange:A,placeholderValue:he,presets:j,required:M,shouldForceLeadingZeros:ge,size:_e,unavailableDates:N,valid:ve,validFeedback:P,value:F,visible:ye,visibleMonths:be,...I},L)=>{let R=ne(()=>p(N,C),[N,C]),z=b(null),xe=t(L,z),B=b(null),V=b(null),H=b(null),U=b(null),W=b(null),Se=b(null),G={invalid:x,required:M,valid:ve},K=c(W,{...G,focus:()=>g(z.current)}),q=c(H,{...G,focus:()=>g(V.current)}),J=K.missing||q.missing,Y=K.valid&&q.valid,Ce={defaultValue:i,granularity:f,hideTimeZone:y,hourCycle:re,isDateUnavailable:R,isDisabled:d,isInvalid:x||J||void 0,isRequired:M,maxValue:le,minValue:E,onChange:O,placeholderValue:he,shouldForceLeadingZeros:ge,value:F},X=ue({...s({defaultOpen:r,defaultVisible:l,isOpen:oe,onOpenChange:k,onVisibleChange:A,visible:ye},`DateRangePicker`),...Ce});o(z,F===void 0?i??null:F,X.setValue);let Z=x||X.displayValidation.isInvalid,Q=Y&&!Z,{describedBy:we,feedbackId:Te,helpId:Ee,inputId:$,labelId:De,labelledBy:Oe}=a({ariaDescribedBy:I[`aria-describedby`],ariaLabelledBy:I[`aria-labelledby`],help:h,id:ie,invalid:Z,invalidFeedback:S,label:w,valid:Q,validFeedback:P}),{buttonProps:ke,calendarProps:Ae,descriptionProps:je,dialogProps:Me,endFieldProps:Ne,errorMessageProps:Pe,groupProps:Fe,startFieldProps:Ie}=se({...Ce,"aria-describedby":we,"aria-label":I[`aria-label`],"aria-labelledby":Oe,id:$},X,z),Le=e(Fe,je,Pe),{overlayStyle:Re,placementAttr:ze,overlayDismissProps:Be,portalContainer:Ve}=de({overlayRef:U,state:X,triggerRef:z}),{dialogProps:He}=ce(Me,B),Ue=T?.calendar?{...ke,"aria-label":T.calendar}:ke;return/* @__PURE__ */ v.createElement(ee,{labels:T},u({children:/* @__PURE__ */ v.createElement(v.Fragment,null,me({calendar:/* @__PURE__ */ v.createElement(m,{...He,autoFocus:!0,defaultFocusedValue:Ae.defaultFocusedValue,disabled:d,firstDayOfWeek:te,isDateUnavailable:R,maxValue:le,minValue:E,onChange:Ae.onChange,presets:j,ref:B,value:Ae.value,visibleMonths:be}),className:n,clearButton:(X.value?.start||X.value?.end)&&!d&&/* @__PURE__ */ v.createElement(pe,{onPress:()=>{X.setValue(null),Se.current?.focus()}}),disabled:d,field:/* @__PURE__ */ v.createElement(v.Fragment,null,/* @__PURE__ */ v.createElement(_,{fieldProps:e(Ie,je,Pe)}),/* @__PURE__ */ v.createElement(`span`,{"aria-hidden":`true`,className:`daterangepicker-separator`},`–`),/* @__PURE__ */ v.createElement(_,{fieldProps:e(Ne,je,Pe),fieldRef:V})),fieldClassName:`d-flex w-100`,groupProps:{...ae(Le,I),"aria-describedby":Le[`aria-describedby`],"aria-labelledby":Oe},groupRef:xe,invalid:Z,isOpen:X.isOpen,overlayDismissProps:Be,overlayRef:U,overlayStyle:Re,placementAttr:ze,portalContainer:Ve,size:_e,toggleButton:/* @__PURE__ */ v.createElement(fe,{buttonProps:e(Ue,je,Pe),ref:Se,state:X}),valid:Q}),(D||M)&&/* @__PURE__ */ v.createElement(v.Fragment,null,/* @__PURE__ */ v.createElement(`input`,{disabled:d,name:D&&`${D}Start`,type:`hidden`,value:X.value?.start?X.value.start.toString():``,...K.inputProps,ref:W}),/* @__PURE__ */ v.createElement(`input`,{disabled:d,name:D&&`${D}End`,type:`hidden`,value:X.value?.end?X.value.end.toString():``,...q.inputProps,ref:H}))),help:h,ids:{feedback:Te,help:Ee,label:De},invalid:Z,invalidFeedback:S,label:w,valid:Q,validFeedback:P}))});j.displayName=`DateRangePicker`;export{O as n,j as t};
+//# sourceMappingURL=datepicker-DuYmXiSe.js.map