@mantine/core 9.3.2 → 9.4.0

package/esm/components/Combobox/use-combobox/use-combobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-combobox.mjs","names":[],"sources":["../../../../src/components/Combobox/use-combobox/use-combobox.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { findElementBySelector, findElementsBySelector, getRootElement } from '../../../core/utils';\nimport { getFirstIndex, getNextIndex, getPreviousIndex } from './get-index/get-index';\n\nexport type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';\n\nexport interface ComboboxStore {\n  /** Current dropdown opened state */\n  dropdownOpened: boolean;\n\n  /** Opens dropdown */\n  openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n  /** Closes dropdown */\n  closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n  /** Toggles dropdown opened state */\n  toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n  /** Selected option index ref */\n  selectedOptionIndex: number;\n\n  /** Returns currently selected option index or `-1` if none of the options is selected */\n  getSelectedOptionIndex: () => number;\n\n  /** Selects `Combobox.Option` by index */\n  selectOption: (index: number) => void;\n\n  /** Selects first `Combobox.Option` with `active` prop.\n   *  If there are no such options, the function does nothing.\n   */\n  selectActiveOption: () => string | null;\n\n  /** Selects first `Combobox.Option` that is not disabled.\n   *  If there are no such options, the function does nothing.\n   * */\n  selectFirstOption: () => string | null;\n\n  /** Selects next `Combobox.Option` that is not disabled.\n   *  If the current option is the last one, the function selects first option, if `loop` is true.\n   */\n  selectNextOption: () => string | null;\n\n  /** Selects previous `Combobox.Option` that is not disabled.\n   *  If the current option is the first one, the function selects last option, if `loop` is true.\n   * */\n  selectPreviousOption: () => string | null;\n\n  /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */\n  resetSelectedOption: () => void;\n\n  /** Triggers `onClick` event of selected option.\n   *  If there is no selected option, the function does nothing.\n   */\n  clickSelectedOption: () => void;\n\n  /** Updates selected option index to currently selected or active option.\n   *  The function is required to be used with searchable components to update selected option index\n   *  when options list changes based on search query.\n   */\n  updateSelectedOptionIndex: (\n    target?: 'active' | 'selected' | number,\n    options?: { scrollIntoView?: boolean }\n  ) => void;\n\n  /** List id, used for `aria-*` attributes */\n  listId: string | null;\n\n  /** Sets list id */\n  setListId: (id: string) => void;\n\n  /** Ref of `Combobox.Search` input */\n  searchRef: React.RefObject<HTMLInputElement | null>;\n\n  /** Moves focus to `Combobox.Search` input */\n  focusSearchInput: () => void;\n\n  /** Ref of the target element */\n  targetRef: React.RefObject<HTMLElement | null>;\n\n  /** Moves focus to the target element */\n  focusTarget: () => void;\n}\n\nexport interface UseComboboxOptions {\n  /** Default value for `dropdownOpened`, `false` by default. Used when the component is uncontrolled */\n  defaultOpened?: boolean;\n\n  /** Controlled `dropdownOpened` state. When set, the dropdown opened state is controlled by the parent component */\n  opened?: boolean;\n\n  /** Called when `dropdownOpened` state changes. Required for controlled mode */\n  onOpenedChange?: (opened: boolean) => void;\n\n  /** Called when dropdown closes with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown closure */\n  onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;\n\n  /** Called when dropdown opens with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown opening */\n  onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;\n\n  /** Determines whether arrow key presses should loop through items (first to last and last to first). Defaults to `true` */\n  loop?: boolean;\n\n  /** `behavior` passed down to `element.scrollIntoView`. Controls the scrolling animation when options are scrolled into view. Defaults to `'instant'` */\n  scrollBehavior?: ScrollBehavior;\n}\n\nexport function useCombobox({\n  defaultOpened,\n  opened,\n  onOpenedChange,\n  onDropdownClose,\n  onDropdownOpen,\n  loop = true,\n  scrollBehavior = 'instant',\n}: UseComboboxOptions = {}): ComboboxStore {\n  const [dropdownOpened, setDropdownOpened] = useUncontrolled({\n    value: opened,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange: onOpenedChange,\n  });\n\n  const listId = useRef<string | null>(null);\n  const selectedOptionIndex = useRef<number>(-1);\n  const searchRef = useRef<HTMLInputElement | null>(null);\n  const targetRef = useRef<HTMLElement | null>(null);\n  const focusSearchTimeout = useRef<number>(-1);\n  const focusTargetTimeout = useRef<number>(-1);\n  const selectedIndexUpdateTimeout = useRef<number>(-1);\n\n  const openDropdown: ComboboxStore['openDropdown'] = useCallback(\n    (eventSource = 'unknown') => {\n      if (!dropdownOpened) {\n        setDropdownOpened(true);\n        onDropdownOpen?.(eventSource);\n      }\n    },\n    [setDropdownOpened, onDropdownOpen, dropdownOpened]\n  );\n\n  const closeDropdown: ComboboxStore['closeDropdown'] = useCallback(\n    (eventSource = 'unknown') => {\n      if (dropdownOpened) {\n        setDropdownOpened(false);\n        onDropdownClose?.(eventSource);\n      }\n    },\n    [setDropdownOpened, onDropdownClose, dropdownOpened]\n  );\n\n  const toggleDropdown: ComboboxStore['toggleDropdown'] = useCallback(\n    (eventSource = 'unknown') => {\n      if (dropdownOpened) {\n        closeDropdown(eventSource);\n      } else {\n        openDropdown(eventSource);\n      }\n    },\n    [closeDropdown, openDropdown, dropdownOpened]\n  );\n\n  const clearSelectedItem = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const selected = findElementBySelector(`#${listId.current} [data-combobox-selected]`, root);\n    selected?.removeAttribute('data-combobox-selected');\n    selected?.removeAttribute('aria-selected');\n  }, []);\n\n  const selectOption = useCallback(\n    (index: number) => {\n      const root = getRootElement(targetRef.current);\n      const list = findElementBySelector(`#${listId.current!}`, root);\n      const items = list\n        ? findElementsBySelector<HTMLDivElement>('[data-combobox-option]', list)\n        : null;\n\n      if (!items) {\n        return null;\n      }\n\n      const nextIndex = index >= items!.length ? 0 : index < 0 ? items!.length - 1 : index;\n      selectedOptionIndex.current = nextIndex;\n\n      if (items?.[nextIndex] && !items[nextIndex].hasAttribute('data-combobox-disabled')) {\n        clearSelectedItem();\n        items[nextIndex].setAttribute('data-combobox-selected', 'true');\n        items[nextIndex].setAttribute('aria-selected', 'true');\n        items[nextIndex].scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n        return items[nextIndex].id;\n      }\n\n      return null;\n    },\n    [scrollBehavior, clearSelectedItem]\n  );\n\n  const selectActiveOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const activeOption = findElementBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-active]`,\n      root\n    );\n\n    if (activeOption) {\n      const items = findElementsBySelector<HTMLDivElement>(\n        `#${listId.current} [data-combobox-option]`,\n        root\n      );\n      const index = items.findIndex((option) => option === activeOption);\n      return selectOption(index);\n    }\n\n    return selectOption(0);\n  }, [selectOption]);\n\n  const selectNextOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const items = findElementsBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-option]`,\n      root\n    );\n    return selectOption(getNextIndex(selectedOptionIndex.current, items, loop));\n  }, [selectOption, loop]);\n\n  const selectPreviousOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const items = findElementsBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-option]`,\n      root\n    );\n    return selectOption(getPreviousIndex(selectedOptionIndex.current, items, loop));\n  }, [selectOption, loop]);\n\n  const selectFirstOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const items = findElementsBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-option]`,\n      root\n    );\n    return selectOption(getFirstIndex(items));\n  }, [selectOption]);\n\n  const updateSelectedOptionIndex: ComboboxStore['updateSelectedOptionIndex'] = useCallback(\n    (target = 'selected', options) => {\n      if (typeof target === 'number') {\n        selectedOptionIndex.current = target;\n        const root = getRootElement(targetRef.current);\n\n        const items = findElementsBySelector<HTMLDivElement>(\n          `#${listId.current} [data-combobox-option]`,\n          root\n        );\n\n        if (options?.scrollIntoView) {\n          items[target]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n        }\n        return;\n      }\n\n      selectedIndexUpdateTimeout.current = window.setTimeout(() => {\n        const root = getRootElement(targetRef.current);\n        const items = findElementsBySelector<HTMLDivElement>(\n          `#${listId.current} [data-combobox-option]`,\n          root\n        );\n        const index = items.findIndex((option) => option.hasAttribute(`data-combobox-${target}`));\n\n        selectedOptionIndex.current = index;\n\n        if (options?.scrollIntoView) {\n          items[index]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n        }\n      }, 0);\n    },\n    []\n  );\n\n  const resetSelectedOption = useCallback(() => {\n    selectedOptionIndex.current = -1;\n    clearSelectedItem();\n  }, [clearSelectedItem]);\n\n  const clickSelectedOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const items = findElementsBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-option]`,\n      root\n    );\n    const item = items?.[selectedOptionIndex.current];\n    item?.click();\n  }, []);\n\n  const setListId = useCallback((id: string) => {\n    listId.current = id;\n  }, []);\n\n  const focusSearchInput = useCallback(() => {\n    focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);\n  }, []);\n\n  const focusTarget = useCallback(() => {\n    focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);\n  }, []);\n\n  const getSelectedOptionIndex = useCallback(() => selectedOptionIndex.current, []);\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(focusSearchTimeout.current);\n      window.clearTimeout(focusTargetTimeout.current);\n      window.clearTimeout(selectedIndexUpdateTimeout.current);\n    },\n    []\n  );\n\n  return {\n    dropdownOpened,\n    openDropdown,\n    closeDropdown,\n    toggleDropdown,\n\n    selectedOptionIndex: selectedOptionIndex.current,\n    getSelectedOptionIndex,\n    selectOption,\n    selectFirstOption,\n    selectActiveOption,\n    selectNextOption,\n    selectPreviousOption,\n    resetSelectedOption,\n    updateSelectedOptionIndex,\n\n    listId: listId.current,\n    setListId,\n    clickSelectedOption,\n\n    searchRef,\n    focusSearchInput,\n\n    targetRef,\n    focusTarget,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-combobox.mjs","names":[],"sources":["../../../../src/components/Combobox/use-combobox/use-combobox.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { findElementBySelector, findElementsBySelector, getRootElement } from '../../../core/utils';\nimport { getFirstIndex, getNextIndex, getPreviousIndex } from './get-index/get-index';\n\nexport type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';\n\nexport interface ComboboxStore {\n  /** Current dropdown opened state */\n  dropdownOpened: boolean;\n\n  /** Opens dropdown */\n  openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n  /** Closes dropdown */\n  closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n  /** Toggles dropdown opened state */\n  toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n  /** Selected option index ref */\n  selectedOptionIndex: number;\n\n  /** Returns currently selected option index or `-1` if none of the options is selected */\n  getSelectedOptionIndex: () => number;\n\n  /** Selects `Combobox.Option` by index */\n  selectOption: (index: number) => void;\n\n  /** Selects first `Combobox.Option` with `active` prop.\n   *  If there are no such options, the function does nothing.\n   */\n  selectActiveOption: () => string | null;\n\n  /** Selects first `Combobox.Option` that is not disabled.\n   *  If there are no such options, the function does nothing.\n   * */\n  selectFirstOption: () => string | null;\n\n  /** Selects next `Combobox.Option` that is not disabled.\n   *  If the current option is the last one, the function selects first option, if `loop` is true.\n   */\n  selectNextOption: () => string | null;\n\n  /** Selects previous `Combobox.Option` that is not disabled.\n   *  If the current option is the first one, the function selects last option, if `loop` is true.\n   * */\n  selectPreviousOption: () => string | null;\n\n  /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */\n  resetSelectedOption: () => void;\n\n  /** Triggers `onClick` event of selected option.\n   *  If there is no selected option, the function does nothing.\n   */\n  clickSelectedOption: () => void;\n\n  /** Updates selected option index to currently selected or active option.\n   *  The function is required to be used with searchable components to update selected option index\n   *  when options list changes based on search query.\n   */\n  updateSelectedOptionIndex: (\n    target?: 'active' | 'selected' | number,\n    options?: { scrollIntoView?: boolean }\n  ) => void;\n\n  /** List id, used for `aria-*` attributes */\n  listId: string | null;\n\n  /** Sets list id */\n  setListId: (id: string) => void;\n\n  /** Ref of `Combobox.Search` input */\n  searchRef: React.RefObject<HTMLInputElement | null>;\n\n  /** Moves focus to `Combobox.Search` input */\n  focusSearchInput: () => void;\n\n  /** Ref of the target element */\n  targetRef: React.RefObject<HTMLElement | null>;\n\n  /** Moves focus to the target element */\n  focusTarget: () => void;\n}\n\nexport interface UseComboboxOptions {\n  /** Default value for `dropdownOpened`, `false` by default. Used when the component is uncontrolled */\n  defaultOpened?: boolean;\n\n  /** Controlled `dropdownOpened` state. When set, the dropdown opened state is controlled by the parent component */\n  opened?: boolean;\n\n  /** Called when `dropdownOpened` state changes. Required for controlled mode */\n  onOpenedChange?: (opened: boolean) => void;\n\n  /** Called when dropdown closes with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown closure */\n  onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;\n\n  /** Called when dropdown opens with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown opening */\n  onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;\n\n  /** Determines whether arrow key presses should loop through items (first to last and last to first). Defaults to `true` */\n  loop?: boolean;\n\n  /** `behavior` passed down to `element.scrollIntoView`. Controls the scrolling animation when options are scrolled into view. Defaults to `'instant'` */\n  scrollBehavior?: ScrollBehavior;\n}\n\nexport function useCombobox({\n  defaultOpened,\n  opened,\n  onOpenedChange,\n  onDropdownClose,\n  onDropdownOpen,\n  loop = true,\n  scrollBehavior = 'instant',\n}: UseComboboxOptions = {}): ComboboxStore {\n  const [dropdownOpened, setDropdownOpened] = useUncontrolled({\n    value: opened,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange: onOpenedChange,\n  });\n\n  const listId = useRef<string | null>(null);\n  const selectedOptionIndex = useRef<number>(-1);\n  const searchRef = useRef<HTMLInputElement | null>(null);\n  const targetRef = useRef<HTMLElement | null>(null);\n  const focusSearchTimeout = useRef<number>(-1);\n  const focusTargetTimeout = useRef<number>(-1);\n  const selectedIndexUpdateTimeout = useRef<number>(-1);\n\n  const openDropdown: ComboboxStore['openDropdown'] = useCallback(\n    (eventSource = 'unknown') => {\n      if (!dropdownOpened) {\n        setDropdownOpened(true);\n        onDropdownOpen?.(eventSource);\n      }\n    },\n    [setDropdownOpened, onDropdownOpen, dropdownOpened]\n  );\n\n  const closeDropdown: ComboboxStore['closeDropdown'] = useCallback(\n    (eventSource = 'unknown') => {\n      if (dropdownOpened) {\n        setDropdownOpened(false);\n        onDropdownClose?.(eventSource);\n      }\n    },\n    [setDropdownOpened, onDropdownClose, dropdownOpened]\n  );\n\n  const toggleDropdown: ComboboxStore['toggleDropdown'] = useCallback(\n    (eventSource = 'unknown') => {\n      if (dropdownOpened) {\n        closeDropdown(eventSource);\n      } else {\n        openDropdown(eventSource);\n      }\n    },\n    [closeDropdown, openDropdown, dropdownOpened]\n  );\n\n  const clearSelectedItem = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const selected = findElementBySelector(`#${listId.current} [data-combobox-selected]`, root);\n    selected?.removeAttribute('data-combobox-selected');\n    selected?.removeAttribute('aria-selected');\n  }, []);\n\n  const selectOption = useCallback(\n    (index: number) => {\n      const root = getRootElement(targetRef.current);\n      const list = findElementBySelector(`#${listId.current!}`, root);\n      const items = list\n        ? findElementsBySelector<HTMLDivElement>('[data-combobox-option]', list)\n        : null;\n\n      if (!items) {\n        return null;\n      }\n\n      const nextIndex = index >= items!.length ? 0 : index < 0 ? items!.length - 1 : index;\n      selectedOptionIndex.current = nextIndex;\n\n      if (items?.[nextIndex] && !items[nextIndex].hasAttribute('data-combobox-disabled')) {\n        clearSelectedItem();\n        items[nextIndex].setAttribute('data-combobox-selected', 'true');\n        items[nextIndex].setAttribute('aria-selected', 'true');\n        items[nextIndex].scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n        return items[nextIndex].id;\n      }\n\n      return null;\n    },\n    [scrollBehavior, clearSelectedItem]\n  );\n\n  const selectActiveOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const activeOption = findElementBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-active]`,\n      root\n    );\n\n    if (activeOption) {\n      const items = findElementsBySelector<HTMLDivElement>(\n        `#${listId.current} [data-combobox-option]`,\n        root\n      );\n      const index = items.findIndex((option) => option === activeOption);\n      return selectOption(index);\n    }\n\n    return selectOption(0);\n  }, [selectOption]);\n\n  const selectNextOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const items = findElementsBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-option]`,\n      root\n    );\n    return selectOption(getNextIndex(selectedOptionIndex.current, items, loop));\n  }, [selectOption, loop]);\n\n  const selectPreviousOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const items = findElementsBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-option]`,\n      root\n    );\n    return selectOption(getPreviousIndex(selectedOptionIndex.current, items, loop));\n  }, [selectOption, loop]);\n\n  const selectFirstOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const items = findElementsBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-option]`,\n      root\n    );\n    return selectOption(getFirstIndex(items));\n  }, [selectOption]);\n\n  const updateSelectedOptionIndex: ComboboxStore['updateSelectedOptionIndex'] = useCallback(\n    (target = 'selected', options) => {\n      if (typeof target === 'number') {\n        selectedOptionIndex.current = target;\n        const root = getRootElement(targetRef.current);\n\n        const items = findElementsBySelector<HTMLDivElement>(\n          `#${listId.current} [data-combobox-option]`,\n          root\n        );\n\n        if (options?.scrollIntoView) {\n          items[target]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n        }\n        return;\n      }\n\n      selectedIndexUpdateTimeout.current = window.setTimeout(() => {\n        const root = getRootElement(targetRef.current);\n        const items = findElementsBySelector<HTMLDivElement>(\n          `#${listId.current} [data-combobox-option]`,\n          root\n        );\n        const index = items.findIndex((option) => option.hasAttribute(`data-combobox-${target}`));\n\n        selectedOptionIndex.current = index;\n\n        if (options?.scrollIntoView) {\n          items[index]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n        }\n      }, 0);\n    },\n    []\n  );\n\n  const resetSelectedOption = useCallback(() => {\n    selectedOptionIndex.current = -1;\n    clearSelectedItem();\n  }, [clearSelectedItem]);\n\n  const clickSelectedOption = useCallback(() => {\n    const root = getRootElement(targetRef.current);\n    const items = findElementsBySelector<HTMLDivElement>(\n      `#${listId.current} [data-combobox-option]`,\n      root\n    );\n    const item = items?.[selectedOptionIndex.current];\n    item?.click();\n  }, []);\n\n  const setListId = useCallback((id: string) => {\n    listId.current = id;\n  }, []);\n\n  const focusSearchInput = useCallback(() => {\n    focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);\n  }, []);\n\n  const focusTarget = useCallback(() => {\n    focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);\n  }, []);\n\n  const getSelectedOptionIndex = useCallback(() => selectedOptionIndex.current, []);\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(focusSearchTimeout.current);\n      window.clearTimeout(focusTargetTimeout.current);\n      window.clearTimeout(selectedIndexUpdateTimeout.current);\n    },\n    []\n  );\n\n  return {\n    dropdownOpened,\n    openDropdown,\n    closeDropdown,\n    toggleDropdown,\n\n    selectedOptionIndex: selectedOptionIndex.current,\n    getSelectedOptionIndex,\n    selectOption,\n    selectFirstOption,\n    selectActiveOption,\n    selectNextOption,\n    selectPreviousOption,\n    resetSelectedOption,\n    updateSelectedOptionIndex,\n\n    listId: listId.current,\n    setListId,\n    clickSelectedOption,\n\n    searchRef,\n    focusSearchInput,\n\n    targetRef,\n    focusTarget,\n  };\n}\n"],"mappings":"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"}

package/esm/components/Combobox/use-pills-reorder/use-pills-reorder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-pills-reorder.mjs","names":[],"sources":["../../../../src/components/Combobox/use-pills-reorder/use-pills-reorder.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { movePill, PillReorderPosition } from './move-pill';\n\nexport interface PillReorderProps {\n  draggable: boolean;\n  tabIndex: number;\n  'data-mantine-pill-index': number;\n  'aria-keyshortcuts': string;\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  onDragStart: (event: React.DragEvent<HTMLElement>) => void;\n  onDragOver: (event: React.DragEvent<HTMLElement>) => void;\n  onDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n  onDrop: (event: React.DragEvent<HTMLElement>) => void;\n  onDragEnd: (event: React.DragEvent<HTMLElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface PillsReorderListProps {\n  ref?: (node: HTMLDivElement | null) => void;\n}\n\nexport interface UsePillsReorderInput<T> {\n  value: T[];\n  onChange: (value: T[]) => void;\n  enabled: boolean | undefined;\n}\n\ninterface PillDragState {\n  draggedIndex: number | null;\n  currentDropTarget: HTMLElement | null;\n}\n\ninterface PendingFocus<T> {\n  container: HTMLElement | null;\n  index: number;\n  expectedValue: T[];\n}\n\nconst findSearchInput = (container: HTMLElement): HTMLInputElement | null => {\n  const lastChild = container.lastElementChild;\n  if (!lastChild) {\n    return null;\n  }\n  if (lastChild instanceof HTMLInputElement) {\n    return lastChild;\n  }\n  return lastChild.querySelector<HTMLInputElement>('input');\n};\n\nconst valuesMatch = <T>(a: T[], b: T[]): boolean => {\n  if (a === b) {\n    return true;\n  }\n  if (a.length !== b.length) {\n    return false;\n  }\n  for (let i = 0; i < a.length; i += 1) {\n    if (a[i] !== b[i]) {\n      return false;\n    }\n  }\n  return true;\n};\n\nexport function usePillsReorder<T>({ value, onChange, enabled }: UsePillsReorderInput<T>) {\n  const dragStateRef = useRef<PillDragState>({ draggedIndex: null, currentDropTarget: null });\n  const pendingFocusRef = useRef<PendingFocus<T> | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) {\n      return;\n    }\n    pendingFocusRef.current = null;\n    if (!valuesMatch(valueRef.current, pending.expectedValue)) {\n      return;\n    }\n    pending.container\n      ?.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${pending.index}\"]`)\n      ?.focus();\n  });\n\n  const setContainer = useCallback((node: HTMLDivElement | null) => {\n    containerRef.current = node;\n  }, []);\n\n  const getListProps = (): PillsReorderListProps => {\n    if (!enabled) {\n      return {};\n    }\n    return { ref: setContainer };\n  };\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!enabled || event.key !== 'ArrowLeft') {\n      return;\n    }\n\n    const input = event.currentTarget;\n    const caretAtStart =\n      input.value.length === 0 || (input.selectionStart === 0 && input.selectionEnd === 0);\n    if (!caretAtStart) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const pills = container.querySelectorAll<HTMLElement>('[data-mantine-pill-index]');\n    if (pills.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    pills[pills.length - 1].focus();\n  };\n\n  const getPillProps = (index: number): PillReorderProps | undefined => {\n    if (!enabled) {\n      return undefined;\n    }\n\n    return {\n      draggable: true,\n      tabIndex: -1,\n      'data-mantine-pill-index': index,\n      'aria-keyshortcuts': 'Alt+ArrowLeft Alt+ArrowRight',\n      onMouseDown: (event) => {\n        if (event.button === 0) {\n          event.stopPropagation();\n        }\n      },\n      onDragStart: (event) => {\n        event.stopPropagation();\n        event.dataTransfer.effectAllowed = 'move';\n        event.dataTransfer.setData('text/plain', String(index));\n        dragStateRef.current.draggedIndex = index;\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const ghost = target.cloneNode(true) as HTMLElement;\n        ghost.removeAttribute('data-dragging');\n        ghost.removeAttribute('data-drag-over');\n        ghost.style.position = 'fixed';\n        ghost.style.top = '-9999px';\n        ghost.style.left = '-9999px';\n        ghost.style.width = `${rect.width}px`;\n        ghost.style.height = `${rect.height}px`;\n        ghost.style.pointerEvents = 'none';\n        document.body.appendChild(ghost);\n        event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);\n\n        setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);\n\n        requestAnimationFrame(() => {\n          target.setAttribute('data-dragging', 'true');\n        });\n      },\n      onDragOver: (event) => {\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex === null || draggedIndex === index) {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const x = event.clientX - rect.left;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const isStart = isRtl ? x > rect.width / 2 : x < rect.width / 2;\n        const position: PillReorderPosition = isStart ? 'before' : 'after';\n\n        event.preventDefault();\n        event.stopPropagation();\n        event.dataTransfer.dropEffect = 'move';\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget && prevTarget !== target) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        target.setAttribute('data-drag-over', position);\n        dragStateRef.current.currentDropTarget = target;\n      },\n      onDragLeave: (event) => {\n        const target = event.currentTarget;\n        const related = event.relatedTarget as Node | null;\n        if (related && target.contains(related)) {\n          return;\n        }\n\n        target.removeAttribute('data-drag-over');\n        if (dragStateRef.current.currentDropTarget === target) {\n          dragStateRef.current.currentDropTarget = null;\n        }\n      },\n      onDrop: (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const target = event.currentTarget;\n        const position = target.getAttribute('data-drag-over') as PillReorderPosition | null;\n        target.removeAttribute('data-drag-over');\n\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex !== null && position && draggedIndex !== index) {\n          const nextValue = movePill(valueRef.current, draggedIndex, index, position);\n          if (nextValue !== valueRef.current) {\n            onChange(nextValue);\n          }\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onDragEnd: (event) => {\n        const target = event.currentTarget;\n        target.removeAttribute('data-dragging');\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onKeyDown: (event) => {\n        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const movingForward = isRtl ? event.key === 'ArrowLeft' : event.key === 'ArrowRight';\n        const targetIndex = movingForward ? index + 1 : index - 1;\n\n        if (event.altKey) {\n          if (targetIndex < 0 || targetIndex >= valueRef.current.length) {\n            return;\n          }\n\n          event.preventDefault();\n          event.stopPropagation();\n\n          const position: PillReorderPosition = movingForward ? 'after' : 'before';\n          const nextValue = movePill(valueRef.current, index, targetIndex, position);\n          if (nextValue === valueRef.current) {\n            return;\n          }\n\n          pendingFocusRef.current = {\n            container: target.parentElement,\n            index: targetIndex,\n            expectedValue: nextValue,\n          };\n          onChange(nextValue);\n          return;\n        }\n\n        if (targetIndex < 0) {\n          return;\n        }\n\n        const container = target.parentElement;\n        if (!container) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (targetIndex >= valueRef.current.length) {\n          findSearchInput(container)?.focus();\n          return;\n        }\n\n        container.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${targetIndex}\"]`)?.focus();\n      },\n    };\n  };\n\n  return { getPillProps, getListProps, handleInputKeyDown };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-pills-reorder.mjs","names":[],"sources":["../../../../src/components/Combobox/use-pills-reorder/use-pills-reorder.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { movePill, PillReorderPosition } from './move-pill';\n\nexport interface PillReorderProps {\n  draggable: boolean;\n  tabIndex: number;\n  'data-mantine-pill-index': number;\n  'aria-keyshortcuts': string;\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  onDragStart: (event: React.DragEvent<HTMLElement>) => void;\n  onDragOver: (event: React.DragEvent<HTMLElement>) => void;\n  onDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n  onDrop: (event: React.DragEvent<HTMLElement>) => void;\n  onDragEnd: (event: React.DragEvent<HTMLElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface PillsReorderListProps {\n  ref?: (node: HTMLDivElement | null) => void;\n}\n\nexport interface UsePillsReorderInput<T> {\n  value: T[];\n  onChange: (value: T[]) => void;\n  enabled: boolean | undefined;\n}\n\ninterface PillDragState {\n  draggedIndex: number | null;\n  currentDropTarget: HTMLElement | null;\n}\n\ninterface PendingFocus<T> {\n  container: HTMLElement | null;\n  index: number;\n  expectedValue: T[];\n}\n\nconst findSearchInput = (container: HTMLElement): HTMLInputElement | null => {\n  const lastChild = container.lastElementChild;\n  if (!lastChild) {\n    return null;\n  }\n  if (lastChild instanceof HTMLInputElement) {\n    return lastChild;\n  }\n  return lastChild.querySelector<HTMLInputElement>('input');\n};\n\nconst valuesMatch = <T>(a: T[], b: T[]): boolean => {\n  if (a === b) {\n    return true;\n  }\n  if (a.length !== b.length) {\n    return false;\n  }\n  for (let i = 0; i < a.length; i += 1) {\n    if (a[i] !== b[i]) {\n      return false;\n    }\n  }\n  return true;\n};\n\nexport function usePillsReorder<T>({ value, onChange, enabled }: UsePillsReorderInput<T>) {\n  const dragStateRef = useRef<PillDragState>({ draggedIndex: null, currentDropTarget: null });\n  const pendingFocusRef = useRef<PendingFocus<T> | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) {\n      return;\n    }\n    pendingFocusRef.current = null;\n    if (!valuesMatch(valueRef.current, pending.expectedValue)) {\n      return;\n    }\n    pending.container\n      ?.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${pending.index}\"]`)\n      ?.focus();\n  });\n\n  const setContainer = useCallback((node: HTMLDivElement | null) => {\n    containerRef.current = node;\n  }, []);\n\n  const getListProps = (): PillsReorderListProps => {\n    if (!enabled) {\n      return {};\n    }\n    return { ref: setContainer };\n  };\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!enabled || event.key !== 'ArrowLeft') {\n      return;\n    }\n\n    const input = event.currentTarget;\n    const caretAtStart =\n      input.value.length === 0 || (input.selectionStart === 0 && input.selectionEnd === 0);\n    if (!caretAtStart) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const pills = container.querySelectorAll<HTMLElement>('[data-mantine-pill-index]');\n    if (pills.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    pills[pills.length - 1].focus();\n  };\n\n  const getPillProps = (index: number): PillReorderProps | undefined => {\n    if (!enabled) {\n      return undefined;\n    }\n\n    return {\n      draggable: true,\n      tabIndex: -1,\n      'data-mantine-pill-index': index,\n      'aria-keyshortcuts': 'Alt+ArrowLeft Alt+ArrowRight',\n      onMouseDown: (event) => {\n        if (event.button === 0) {\n          event.stopPropagation();\n        }\n      },\n      onDragStart: (event) => {\n        event.stopPropagation();\n        event.dataTransfer.effectAllowed = 'move';\n        event.dataTransfer.setData('text/plain', String(index));\n        dragStateRef.current.draggedIndex = index;\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const ghost = target.cloneNode(true) as HTMLElement;\n        ghost.removeAttribute('data-dragging');\n        ghost.removeAttribute('data-drag-over');\n        ghost.style.position = 'fixed';\n        ghost.style.top = '-9999px';\n        ghost.style.left = '-9999px';\n        ghost.style.width = `${rect.width}px`;\n        ghost.style.height = `${rect.height}px`;\n        ghost.style.pointerEvents = 'none';\n        document.body.appendChild(ghost);\n        event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);\n\n        setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);\n\n        requestAnimationFrame(() => {\n          target.setAttribute('data-dragging', 'true');\n        });\n      },\n      onDragOver: (event) => {\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex === null || draggedIndex === index) {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const x = event.clientX - rect.left;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const isStart = isRtl ? x > rect.width / 2 : x < rect.width / 2;\n        const position: PillReorderPosition = isStart ? 'before' : 'after';\n\n        event.preventDefault();\n        event.stopPropagation();\n        event.dataTransfer.dropEffect = 'move';\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget && prevTarget !== target) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        target.setAttribute('data-drag-over', position);\n        dragStateRef.current.currentDropTarget = target;\n      },\n      onDragLeave: (event) => {\n        const target = event.currentTarget;\n        const related = event.relatedTarget as Node | null;\n        if (related && target.contains(related)) {\n          return;\n        }\n\n        target.removeAttribute('data-drag-over');\n        if (dragStateRef.current.currentDropTarget === target) {\n          dragStateRef.current.currentDropTarget = null;\n        }\n      },\n      onDrop: (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const target = event.currentTarget;\n        const position = target.getAttribute('data-drag-over') as PillReorderPosition | null;\n        target.removeAttribute('data-drag-over');\n\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex !== null && position && draggedIndex !== index) {\n          const nextValue = movePill(valueRef.current, draggedIndex, index, position);\n          if (nextValue !== valueRef.current) {\n            onChange(nextValue);\n          }\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onDragEnd: (event) => {\n        const target = event.currentTarget;\n        target.removeAttribute('data-dragging');\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onKeyDown: (event) => {\n        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const movingForward = isRtl ? event.key === 'ArrowLeft' : event.key === 'ArrowRight';\n        const targetIndex = movingForward ? index + 1 : index - 1;\n\n        if (event.altKey) {\n          if (targetIndex < 0 || targetIndex >= valueRef.current.length) {\n            return;\n          }\n\n          event.preventDefault();\n          event.stopPropagation();\n\n          const position: PillReorderPosition = movingForward ? 'after' : 'before';\n          const nextValue = movePill(valueRef.current, index, targetIndex, position);\n          if (nextValue === valueRef.current) {\n            return;\n          }\n\n          pendingFocusRef.current = {\n            container: target.parentElement,\n            index: targetIndex,\n            expectedValue: nextValue,\n          };\n          onChange(nextValue);\n          return;\n        }\n\n        if (targetIndex < 0) {\n          return;\n        }\n\n        const container = target.parentElement;\n        if (!container) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (targetIndex >= valueRef.current.length) {\n          findSearchInput(container)?.focus();\n          return;\n        }\n\n        container.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${targetIndex}\"]`)?.focus();\n      },\n    };\n  };\n\n  return { getPillProps, getListProps, handleInputKeyDown };\n}\n"],"mappings":"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"}

package/esm/components/ComboboxPopover/ComboboxPopover.mjs

@@ -0,0 +1,216 @@
+"use client";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
+import { genericFactory } from "../../core/factory/factory.mjs";
+import { ScrollArea } from "../ScrollArea/ScrollArea.mjs";
+import { getParsedComboboxData } from "../Combobox/get-parsed-combobox-data/get-parsed-combobox-data.mjs";
+import { getOptionsLockup } from "../Combobox/get-options-lockup/get-options-lockup.mjs";
+import Combobox_module_default from "../Combobox/Combobox.module.mjs";
+import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
+import { Combobox } from "../Combobox/Combobox.mjs";
+import { CheckIcon } from "../Checkbox/CheckIcon.mjs";
+import { isOptionsGroup } from "../Combobox/OptionsDropdown/is-options-group.mjs";
+import { defaultOptionsFilter } from "../Combobox/OptionsDropdown/default-options-filter.mjs";
+import { isEmptyComboboxData } from "../Combobox/OptionsDropdown/is-empty-combobox-data.mjs";
+import { OptionsDropdown } from "../Combobox/OptionsDropdown/OptionsDropdown.mjs";
+import { ComboboxPopoverTarget } from "./ComboboxPopoverTarget.mjs";
+import { useMemo } from "react";
+import { useUncontrolled } from "@mantine/hooks";
+import cx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/ComboboxPopover/ComboboxPopover.tsx
+function isValueChecked(value, optionValue) {
+	return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
+}
+function Option({ data, withCheckIcon, withAlignedLabels, value, checkIconPosition, unstyled, renderOption }) {
+	if (isOptionsGroup(data)) {
+		const options = data.items.map((item) => /* @__PURE__ */ jsx(Option, {
+			data: item,
+			value,
+			unstyled,
+			withCheckIcon,
+			withAlignedLabels,
+			checkIconPosition,
+			renderOption
+		}, `${item.value}`));
+		return /* @__PURE__ */ jsx(Combobox.Group, {
+			label: data.group,
+			children: options
+		});
+	}
+	const checked = isValueChecked(value, data.value);
+	const check = withCheckIcon && (checked ? /* @__PURE__ */ jsx(CheckIcon, { className: Combobox_module_default.optionsDropdownCheckIcon }) : withAlignedLabels ? /* @__PURE__ */ jsx("div", { className: Combobox_module_default.optionsDropdownCheckPlaceholder }) : null);
+	const defaultContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		checkIconPosition === "left" && check,
+		/* @__PURE__ */ jsx("span", { children: data.label }),
+		checkIconPosition === "right" && check
+	] });
+	return /* @__PURE__ */ jsx(Combobox.Option, {
+		value: data.value,
+		disabled: data.disabled,
+		className: cx({ [Combobox_module_default.optionsDropdownOption]: !unstyled }),
+		"data-reverse": checkIconPosition === "right" || void 0,
+		"data-checked": checked || void 0,
+		"aria-selected": checked,
+		active: checked,
+		children: typeof renderOption === "function" ? renderOption({
+			option: data,
+			checked
+		}) : defaultContent
+	});
+}
+function SearchableDropdown({ data, filter, search, limit, nothingFoundMessage, withScrollArea = true, maxDropdownHeight, value, checkIconPosition, withCheckIcon = false, withAlignedLabels = false, unstyled, renderOption, scrollAreaProps, onSearchChange }) {
+	const filteredData = (filter || defaultOptionsFilter)({
+		options: data,
+		search,
+		limit: limit ?? Infinity
+	});
+	const isEmpty = isEmptyComboboxData(filteredData);
+	const options = filteredData.map((item, index) => /* @__PURE__ */ jsx(Option, {
+		data: item,
+		withCheckIcon,
+		withAlignedLabels,
+		value,
+		checkIconPosition,
+		unstyled,
+		renderOption
+	}, isOptionsGroup(item) ? `group-${typeof item.group === "string" ? item.group : index}` : `${item.value}`));
+	return /* @__PURE__ */ jsxs(Combobox.Dropdown, {
+		"data-composed": true,
+		children: [/* @__PURE__ */ jsx(Combobox.Search, {
+			value: search,
+			onChange: onSearchChange,
+			placeholder: "Search..."
+		}), /* @__PURE__ */ jsxs(Combobox.Options, { children: [withScrollArea ? /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+			mah: maxDropdownHeight ?? 220,
+			type: "scroll",
+			scrollbarSize: "var(--combobox-padding)",
+			offsetScrollbars: "y",
+			...scrollAreaProps,
+			children: options
+		}) : options, isEmpty && nothingFoundMessage && /* @__PURE__ */ jsx(Combobox.Empty, { children: nothingFoundMessage })] })]
+	});
+}
+const defaultProps = {
+	withCheckIcon: true,
+	allowDeselect: true,
+	checkIconPosition: "left",
+	hiddenInputValuesDivider: ","
+};
+const ComboboxPopover = genericFactory((_props) => {
+	const props = useProps("ComboboxPopover", defaultProps, _props);
+	const { classNames, styles, unstyled, vars, children, multiple, value, defaultValue, onChange, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, selectFirstOptionOnDropdownOpen, withCheckIcon, withAlignedLabels, checkIconPosition, nothingFoundMessage, searchable, searchValue, defaultSearchValue, onSearchChange, allowDeselect, renderOption, scrollAreaProps, hiddenInputProps, name, form, hiddenInputValuesDivider, attributes, ...others } = props;
+	const parsedData = useMemo(() => getParsedComboboxData(data), [data]);
+	const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);
+	const [_value, setValue] = useUncontrolled({
+		value,
+		defaultValue,
+		finalValue: multiple ? [] : null,
+		onChange
+	});
+	const [_searchValue, setSearchValue] = useUncontrolled({
+		value: searchValue,
+		defaultValue: defaultSearchValue,
+		finalValue: "",
+		onChange: onSearchChange
+	});
+	const combobox = useCombobox({
+		opened: dropdownOpened,
+		defaultOpened: defaultDropdownOpened,
+		onDropdownOpen: () => {
+			onDropdownOpen?.();
+			if (searchable) combobox.focusSearchInput();
+			if (selectFirstOptionOnDropdownOpen) combobox.selectFirstOption();
+		},
+		onDropdownClose: () => {
+			onDropdownClose?.();
+			combobox.resetSelectedOption();
+			if (searchable) combobox.focusTarget();
+		}
+	});
+	const handleSearchChange = (val) => {
+		setSearchValue(val);
+		combobox.resetSelectedOption();
+	};
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		props,
+		styles,
+		classNames
+	});
+	const handleOptionSubmit = (val) => {
+		onOptionSubmit?.(val);
+		const option = optionsLockup[val];
+		if (multiple) {
+			const currentValue = Array.isArray(_value) ? _value : [];
+			if (currentValue.includes(option.value)) setValue(currentValue.filter((v) => v !== option.value));
+			else setValue([...currentValue, option.value]);
+			combobox.updateSelectedOptionIndex("selected");
+		} else {
+			setValue(allowDeselect && `${option.value}` === `${_value}` ? null : option.value);
+			combobox.closeDropdown();
+		}
+		if (searchable) handleSearchChange("");
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Combobox, {
+		store: combobox,
+		__staticSelector: "ComboboxPopover",
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		unstyled,
+		attributes,
+		onOptionSubmit: handleOptionSubmit,
+		...comboboxProps,
+		...others,
+		children: [children, searchable ? /* @__PURE__ */ jsx(SearchableDropdown, {
+			data: parsedData,
+			filter,
+			search: _searchValue,
+			limit,
+			nothingFoundMessage,
+			withScrollArea,
+			maxDropdownHeight,
+			value: _value,
+			checkIconPosition,
+			withCheckIcon,
+			withAlignedLabels,
+			unstyled,
+			renderOption,
+			scrollAreaProps,
+			onSearchChange: (event) => {
+				handleSearchChange(event.currentTarget.value);
+			}
+		}) : /* @__PURE__ */ jsx(OptionsDropdown, {
+			data: parsedData,
+			filter,
+			search: void 0,
+			limit,
+			hiddenWhenEmpty: !nothingFoundMessage,
+			withScrollArea,
+			maxDropdownHeight,
+			filterOptions: false,
+			value: _value,
+			checkIconPosition,
+			withCheckIcon,
+			withAlignedLabels,
+			nothingFoundMessage,
+			unstyled,
+			renderOption,
+			scrollAreaProps,
+			labelId: void 0,
+			"aria-label": void 0
+		})]
+	}), /* @__PURE__ */ jsx(Combobox.HiddenInput, {
+		name,
+		value: _value,
+		form,
+		valuesDivider: hiddenInputValuesDivider,
+		...hiddenInputProps
+	})] });
+});
+ComboboxPopover.classes = Combobox.classes;
+ComboboxPopover.displayName = "@mantine/core/ComboboxPopover";
+ComboboxPopover.Target = ComboboxPopoverTarget;
+//#endregion
+export { ComboboxPopover };
+
+//# sourceMappingURL=ComboboxPopover.mjs.map

package/esm/components/ComboboxPopover/ComboboxPopover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxPopover.mjs","names":["comboboxClasses"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopover.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  Factory,\n  genericFactory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n  Combobox,\n  ComboboxData,\n  ComboboxItem,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxProps,\n  defaultOptionsFilter,\n  getOptionsLockup,\n  getParsedComboboxData,\n  isOptionsGroup,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport { ComboboxParsedItem } from '../Combobox/Combobox.types';\nimport { isEmptyComboboxData } from '../Combobox/OptionsDropdown/is-empty-combobox-data';\nimport { ScrollArea, ScrollAreaProps } from '../ScrollArea';\nimport { ComboboxPopoverValue } from './ComboboxPopover.types';\nimport { ComboboxPopoverTarget } from './ComboboxPopoverTarget';\nimport comboboxClasses from '../Combobox/Combobox.module.css';\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\ninterface OptionProps {\n  data: ComboboxParsedItem<Primitive>;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction Option({\n  data,\n  withCheckIcon,\n  withAlignedLabels,\n  value,\n  checkIconPosition,\n  unstyled,\n  renderOption,\n}: OptionProps) {\n  if (isOptionsGroup(data)) {\n    const options = data.items.map((item) => (\n      <Option\n        data={item}\n        value={value}\n        key={`${item.value}`}\n        unstyled={unstyled}\n        withCheckIcon={withCheckIcon}\n        withAlignedLabels={withAlignedLabels}\n        checkIconPosition={checkIconPosition}\n        renderOption={renderOption}\n      />\n    ));\n    return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n  }\n\n  const checked = isValueChecked(value, data.value);\n  const check =\n    withCheckIcon &&\n    (checked ? (\n      <CheckIcon className={comboboxClasses.optionsDropdownCheckIcon} />\n    ) : withAlignedLabels ? (\n      <div className={comboboxClasses.optionsDropdownCheckPlaceholder} />\n    ) : null);\n\n  const defaultContent = (\n    <>\n      {checkIconPosition === 'left' && check}\n      <span>{data.label}</span>\n      {checkIconPosition === 'right' && check}\n    </>\n  );\n\n  return (\n    <Combobox.Option\n      value={data.value}\n      disabled={data.disabled}\n      className={cx({ [comboboxClasses.optionsDropdownOption]: !unstyled })}\n      data-reverse={checkIconPosition === 'right' || undefined}\n      data-checked={checked || undefined}\n      aria-selected={checked}\n      active={checked}\n    >\n      {typeof renderOption === 'function'\n        ? renderOption({ option: data, checked })\n        : defaultContent}\n    </Combobox.Option>\n  );\n}\n\ninterface SearchableDropdownProps {\n  data: ComboboxParsedItem<Primitive>[];\n  filter: OptionsFilter<Primitive> | undefined;\n  search: string;\n  limit: number | undefined;\n  nothingFoundMessage: React.ReactNode | undefined;\n  withScrollArea: boolean | undefined;\n  maxDropdownHeight: number | string | undefined;\n  value: Primitive | Primitive[] | null;\n  checkIconPosition: 'left' | 'right' | undefined;\n  withCheckIcon: boolean | undefined;\n  withAlignedLabels: boolean | undefined;\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n  scrollAreaProps: ScrollAreaProps | undefined;\n  onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nfunction SearchableDropdown({\n  data,\n  filter,\n  search,\n  limit,\n  nothingFoundMessage,\n  withScrollArea = true,\n  maxDropdownHeight,\n  value,\n  checkIconPosition,\n  withCheckIcon = false,\n  withAlignedLabels = false,\n  unstyled,\n  renderOption,\n  scrollAreaProps,\n  onSearchChange,\n}: SearchableDropdownProps) {\n  const filteredData = (filter || defaultOptionsFilter)({\n    options: data,\n    search,\n    limit: limit ?? Infinity,\n  });\n  const isEmpty = isEmptyComboboxData(filteredData);\n\n  const options = filteredData.map((item, index) => (\n    <Option\n      data={item}\n      key={\n        isOptionsGroup(item)\n          ? `group-${typeof item.group === 'string' ? item.group : index}`\n          : `${item.value}`\n      }\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      value={value}\n      checkIconPosition={checkIconPosition}\n      unstyled={unstyled}\n      renderOption={renderOption}\n    />\n  ));\n\n  return (\n    <Combobox.Dropdown data-composed>\n      <Combobox.Search value={search} onChange={onSearchChange} placeholder=\"Search...\" />\n      <Combobox.Options>\n        {withScrollArea ? (\n          <ScrollArea.Autosize\n            mah={maxDropdownHeight ?? 220}\n            type=\"scroll\"\n            scrollbarSize=\"var(--combobox-padding)\"\n            offsetScrollbars=\"y\"\n            {...scrollAreaProps}\n          >\n            {options}\n          </ScrollArea.Autosize>\n        ) : (\n          options\n        )}\n        {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n      </Combobox.Options>\n    </Combobox.Dropdown>\n  );\n}\n\nexport type ComboboxPopoverStylesNames = ComboboxLikeStylesNames;\n\nexport interface ComboboxPopoverProps<\n  Multiple extends boolean = false,\n  Value extends Primitive = string,\n> extends StylesApiProps<ComboboxPopoverFactory> {\n  /** If set, multiple items can be selected at the same time */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: ComboboxPopoverValue<Multiple, Value>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: ComboboxPopoverValue<Multiple, Value>;\n\n  /** Called when value changes */\n  onChange?: (value: ComboboxPopoverValue<Multiple, Value>) => void;\n\n  /** Data used to generate options */\n  data?: ComboboxData<Value>;\n\n  /** Controlled dropdown opened state */\n  dropdownOpened?: boolean;\n\n  /** Uncontrolled dropdown initial opened state */\n  defaultDropdownOpened?: boolean;\n\n  /** Called when dropdown opens */\n  onDropdownOpen?: () => void;\n\n  /** Called when dropdown closes */\n  onDropdownClose?: () => void;\n\n  /** Called when option is submitted from dropdown with mouse click or Enter key */\n  onOptionSubmit?: (value: Value) => void;\n\n  /** Props passed down to Combobox component */\n  comboboxProps?: ComboboxProps;\n\n  /** Function based on which items are filtered and sorted */\n  filter?: OptionsFilter<Value>;\n\n  /** Maximum number of options displayed at a time @default Infinity */\n  limit?: number;\n\n  /** Determines whether the options should be wrapped with ScrollArea.AutoSize @default true */\n  withScrollArea?: boolean;\n\n  /** max-height of the dropdown @default 250 */\n  maxDropdownHeight?: number | string;\n\n  /** If set, the first option is selected when dropdown opens @default false */\n  selectFirstOptionOnDropdownOpen?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Allows searching through options @default false */\n  searchable?: boolean;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it (only for single mode) @default true */\n  allowDeselect?: boolean;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n  /** Props passed down to the underlying ScrollArea component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Hidden input name for form submission */\n  name?: string;\n\n  /** Hidden input form for form submission */\n  form?: string;\n\n  /** Content of the component */\n  children?: React.ReactNode;\n\n  /** Divider used to separate values in the hidden input value attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n}\n\nexport type ComboboxPopoverFactory = Factory<{\n  props: ComboboxPopoverProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxPopoverStylesNames;\n  signature: <Multiple extends boolean = false, Value extends Primitive = string>(\n    props: ComboboxPopoverProps<Multiple, Value>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Target: typeof ComboboxPopoverTarget;\n  };\n}>;\n\nconst defaultProps = {\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n} satisfies Partial<ComboboxPopoverProps>;\n\nexport const ComboboxPopover = genericFactory<ComboboxPopoverFactory>((_props) => {\n  const props = useProps('ComboboxPopover', defaultProps as any, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    selectFirstOptionOnDropdownOpen,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    nothingFoundMessage,\n    searchable,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    renderOption,\n    scrollAreaProps,\n    hiddenInputProps,\n    name,\n    form,\n    hiddenInputValuesDivider,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (searchable) {\n        combobox.focusSearchInput();\n      }\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n      if (searchable) {\n        combobox.focusTarget();\n      }\n    },\n  });\n\n  const handleSearchChange = (val: string) => {\n    setSearchValue(val);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ComboboxPopoverFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleOptionSubmit = (val: string) => {\n    onOptionSubmit?.(val as any);\n    const option = optionsLockup[val];\n\n    if (multiple) {\n      const currentValue = Array.isArray(_value) ? _value : [];\n      if (currentValue.includes(option.value)) {\n        setValue(currentValue.filter((v: any) => v !== option.value) as any);\n      } else {\n        setValue([...currentValue, option.value] as any);\n      }\n      combobox.updateSelectedOptionIndex('selected');\n    } else {\n      const nextValue = allowDeselect && `${option.value}` === `${_value}` ? null : option.value;\n      setValue(nextValue as any);\n      combobox.closeDropdown();\n    }\n\n    if (searchable) {\n      handleSearchChange('');\n    }\n  };\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"ComboboxPopover\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        attributes={attributes}\n        onOptionSubmit={handleOptionSubmit}\n        {...comboboxProps}\n        {...others}\n      >\n        {children}\n        {searchable ? (\n          <SearchableDropdown\n            data={parsedData as any}\n            filter={filter as OptionsFilter<Primitive> | undefined}\n            search={_searchValue}\n            limit={limit}\n            nothingFoundMessage={nothingFoundMessage}\n            withScrollArea={withScrollArea}\n            maxDropdownHeight={maxDropdownHeight}\n            value={_value}\n            checkIconPosition={checkIconPosition}\n            withCheckIcon={withCheckIcon}\n            withAlignedLabels={withAlignedLabels}\n            unstyled={unstyled}\n            renderOption={renderOption}\n            scrollAreaProps={scrollAreaProps}\n            onSearchChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n            }}\n          />\n        ) : (\n          <OptionsDropdown\n            data={parsedData as any}\n            filter={filter as OptionsFilter<Primitive> | undefined}\n            search={undefined}\n            limit={limit}\n            hiddenWhenEmpty={!nothingFoundMessage}\n            withScrollArea={withScrollArea}\n            maxDropdownHeight={maxDropdownHeight}\n            filterOptions={false}\n            value={_value}\n            checkIconPosition={checkIconPosition}\n            withCheckIcon={withCheckIcon}\n            withAlignedLabels={withAlignedLabels}\n            nothingFoundMessage={nothingFoundMessage}\n            unstyled={unstyled}\n            renderOption={renderOption}\n            scrollAreaProps={scrollAreaProps}\n            labelId={undefined}\n            aria-label={undefined}\n          />\n        )}\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        value={_value}\n        form={form}\n        valuesDivider={hiddenInputValuesDivider}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nComboboxPopover.classes = Combobox.classes;\nComboboxPopover.displayName = '@mantine/core/ComboboxPopover';\nComboboxPopover.Target = ComboboxPopoverTarget;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAYA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAI,eAAe,IAAI,GAAG;EACxB,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,oBAAC,QAAD;GACE,MAAM;GACC;GAEG;GACK;GACI;GACA;GACL;EACf,GANM,GAAG,KAAK,OAMd,CACF;EACD,OAAO,oBAAC,SAAS,OAAV;GAAgB,OAAO,KAAK;aAAQ;EAAwB,CAAA;CACrE;CAEA,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;CAChD,MAAM,QACJ,kBACC,UACC,oBAAC,WAAD,EAAW,WAAWA,wBAAgB,yBAA2B,CAAA,IAC/D,oBACF,oBAAC,OAAD,EAAK,WAAWA,wBAAgB,gCAAkC,CAAA,IAChE;CAEN,MAAM,iBACJ,qBAAA,YAAA,EAAA,UAAA;EACG,sBAAsB,UAAU;EACjC,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;EACvB,sBAAsB,WAAW;CAClC,EAAA,CAAA;CAGJ,OACE,oBAAC,SAAS,QAAV;EACE,OAAO,KAAK;EACZ,UAAU,KAAK;EACf,WAAW,GAAG,GAAGA,wBAAgB,wBAAwB,CAAC,SAAS,CAAC;EACpE,gBAAc,sBAAsB,WAAW,KAAA;EAC/C,gBAAc,WAAW,KAAA;EACzB,iBAAe;EACf,QAAQ;YAEP,OAAO,iBAAiB,aACrB,aAAa;GAAE,QAAQ;GAAM;EAAQ,CAAC,IACtC;CACW,CAAA;AAErB;AAoBA,SAAS,mBAAmB,EAC1B,MACA,QACA,QACA,OACA,qBACA,iBAAiB,MACjB,mBACA,OACA,mBACA,gBAAgB,OAChB,oBAAoB,OACpB,UACA,cACA,iBACA,kBAC0B;CAC1B,MAAM,gBAAgB,UAAU,qBAAA,CAAsB;EACpD,SAAS;EACT;EACA,OAAO,SAAS;CAClB,CAAC;CACD,MAAM,UAAU,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,MAAM,UACtC,oBAAC,QAAD;EACE,MAAM;EAMS;EACI;EACZ;EACY;EACT;EACI;CACf,GAVG,eAAe,IAAI,IACf,SAAS,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,UACvD,GAAG,KAAK,OAQf,CACF;CAED,OACE,qBAAC,SAAS,UAAV;EAAmB,iBAAA;YAAnB,CACE,oBAAC,SAAS,QAAV;GAAiB,OAAO;GAAQ,UAAU;GAAgB,aAAY;EAAa,CAAA,GACnF,qBAAC,SAAS,SAAV,EAAA,UAAA,CACG,iBACC,oBAAC,WAAW,UAAZ;GACE,KAAK,qBAAqB;GAC1B,MAAK;GACL,eAAc;GACd,kBAAiB;GACjB,GAAI;aAEH;EACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,oBAAC,SAAS,OAAV,EAAA,UAAiB,oBAAoC,CAAA,CACxE,EAAA,CAAA,CACD;;AAEvB;AAqHA,MAAM,eAAe;CACnB,eAAe;CACf,eAAe;CACf,mBAAmB;CACnB,0BAA0B;AAC5B;AAEA,MAAa,kBAAkB,gBAAwC,WAAW;CAChF,MAAM,QAAQ,SAAS,mBAAmB,cAAqB,MAAM;CACrE,MAAM,EACJ,YACA,QACA,UACA,MACA,UACA,UACA,OACA,cACA,UACA,MACA,gBACA,uBACA,gBACA,iBACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,iCACA,eACA,mBACA,mBACA,qBACA,YACA,aACA,oBACA,gBACA,eACA,cACA,iBACA,kBACA,MACA,MACA,0BACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAa,cAAc,sBAAsB,IAAI,GAAG,CAAC,IAAI,CAAC;CACpE,MAAM,gBAAgB,cAAc,iBAAiB,UAAU,GAAG,CAAC,UAAU,CAAC;CAE9E,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,WAAY,CAAC,IAAY;EACrC;CACF,CAAC;CAED,MAAM,CAAC,cAAc,kBAAkB,gBAAgB;EACrD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,YACF,SAAS,iBAAiB;GAE5B,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;GAC7B,IAAI,YACF,SAAS,YAAY;EAEzB;CACF,CAAC;CAED,MAAM,sBAAsB,QAAgB;EAC1C,eAAe,GAAG;EAClB,SAAS,oBAAoB;CAC/B;CAEA,MAAM,EAAE,oBAAoB,mBAAmB,qBAA6C;EAC1F;EACA;EACA;CACF,CAAC;CAED,MAAM,sBAAsB,QAAgB;EAC1C,iBAAiB,GAAU;EAC3B,MAAM,SAAS,cAAc;EAE7B,IAAI,UAAU;GACZ,MAAM,eAAe,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC;GACvD,IAAI,aAAa,SAAS,OAAO,KAAK,GACpC,SAAS,aAAa,QAAQ,MAAW,MAAM,OAAO,KAAK,CAAQ;QAEnE,SAAS,CAAC,GAAG,cAAc,OAAO,KAAK,CAAQ;GAEjD,SAAS,0BAA0B,UAAU;EAC/C,OAAO;GAEL,SADkB,iBAAiB,GAAG,OAAO,YAAY,GAAG,WAAW,OAAO,OAAO,KAC5D;GACzB,SAAS,cAAc;EACzB;EAEA,IAAI,YACF,mBAAmB,EAAE;CAEzB;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,UAAD;EACE,OAAO;EACP,kBAAiB;EACjB,YAAY;EACZ,QAAQ;EACE;EACE;EACZ,gBAAgB;EAChB,GAAI;EACJ,GAAI;YATN,CAWG,UACA,aACC,oBAAC,oBAAD;GACE,MAAM;GACE;GACR,QAAQ;GACD;GACc;GACL;GACG;GACnB,OAAO;GACY;GACJ;GACI;GACT;GACI;GACG;GACjB,iBAAiB,UAAU;IACzB,mBAAmB,MAAM,cAAc,KAAK;GAC9C;EACD,CAAA,IAED,oBAAC,iBAAD;GACE,MAAM;GACE;GACR,QAAQ,KAAA;GACD;GACP,iBAAiB,CAAC;GACF;GACG;GACnB,eAAe;GACf,OAAO;GACY;GACJ;GACI;GACE;GACX;GACI;GACG;GACjB,SAAS,KAAA;GACT,cAAY,KAAA;EACb,CAAA,CAEK;KACV,oBAAC,SAAS,aAAV;EACQ;EACN,OAAO;EACD;EACN,eAAe;EACf,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC;AAED,gBAAgB,UAAU,SAAS;AACnC,gBAAgB,cAAc;AAC9B,gBAAgB,SAAS"}

package/esm/components/ComboboxPopover/ComboboxPopoverTarget.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { getRefProp } from "../../core/utils/get-ref-prop/get-ref-prop.mjs";
+import { getSingleElementChild } from "../../core/utils/get-single-element-child/get-single-element-child.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { Popover } from "../Popover/Popover.mjs";
+import { useComboboxContext } from "../Combobox/Combobox.context.mjs";
+import { useComboboxTargetProps } from "../Combobox/use-combobox-target-props/use-combobox-target-props.mjs";
+import { cloneElement } from "react";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/ComboboxPopover/ComboboxPopoverTarget.tsx
+const defaultProps = { refProp: "ref" };
+const ComboboxPopoverTarget = factory((props) => {
+	const { children, refProp, ref, ...others } = useProps("ComboboxPopoverTarget", defaultProps, props);
+	const child = getSingleElementChild(children);
+	if (!child) throw new Error("ComboboxPopover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
+	const ctx = useComboboxContext();
+	const targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));
+	const clonedElement = cloneElement(child, {
+		...useComboboxTargetProps({
+			targetType: "button",
+			withAriaAttributes: true,
+			withKeyboardNavigation: true,
+			withExpandedAttribute: true,
+			onKeyDown: child.props.onKeyDown,
+			onClick: (event) => {
+				ctx.store.toggleDropdown();
+				child.props.onClick?.(event);
+			},
+			autoComplete: "off"
+		}),
+		...others,
+		[refProp]: targetRef
+	});
+	return /* @__PURE__ */ jsx(Popover.Target, {
+		refProp,
+		children: clonedElement
+	});
+});
+ComboboxPopoverTarget.displayName = "@mantine/core/ComboboxPopoverTarget";
+//#endregion
+export { ComboboxPopoverTarget };
+
+//# sourceMappingURL=ComboboxPopoverTarget.mjs.map

package/esm/components/ComboboxPopover/ComboboxPopoverTarget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxPopoverTarget.mjs","names":[],"sources":["../../../src/components/ComboboxPopover/ComboboxPopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../core';\nimport { useComboboxContext } from '../Combobox/Combobox.context';\nimport { useComboboxTargetProps } from '../Combobox/use-combobox-target-props/use-combobox-target-props';\nimport { Popover } from '../Popover';\n\nexport interface ComboboxPopoverTargetProps {\n  children: React.ReactNode;\n\n  /** Key of the prop that is used to access element ref @default 'ref' */\n  refProp?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<ComboboxPopoverTargetProps>;\n\nexport type ComboboxPopoverTargetFactory = Factory<{\n  props: ComboboxPopoverTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxPopoverTarget = factory<ComboboxPopoverTargetFactory>((props) => {\n  const { children, refProp, ref, ...others } = useProps(\n    'ComboboxPopoverTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'ComboboxPopover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n  const targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'button',\n    withAriaAttributes: true,\n    withKeyboardNavigation: true,\n    withExpandedAttribute: true,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (event) => {\n      ctx.store.toggleDropdown();\n      (child.props as any).onClick?.(event);\n    },\n    autoComplete: 'off',\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,\n    ...others,\n    [refProp!]: targetRef,\n  } as any);\n\n  return <Popover.Target refProp={refProp}>{clonedElement}</Popover.Target>;\n});\n\nComboboxPopoverTarget.displayName = '@mantine/core/ComboboxPopoverTarget';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,eAAe,EACnB,SAAS,MACX;AAQA,MAAa,wBAAwB,SAAuC,UAAU;CACpF,MAAM,EAAE,UAAU,SAAS,KAAK,GAAG,WAAW,SAC5C,yBACA,cACA,KACF;CAEA,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,0KACF;CAGF,MAAM,MAAM,mBAAmB;CAC/B,MAAM,YAAY,aAAa,KAAK,IAAI,MAAM,WAAW,WAAW,KAAK,CAAC;CAe1E,MAAM,gBAAgB,aAAa,OAAO;EACxC,GAdkB,uBAAuB;GACzC,YAAY;GACZ,oBAAoB;GACpB,wBAAwB;GACxB,uBAAuB;GACvB,WAAY,MAAM,MAAc;GAChC,UAAU,UAAU;IAClB,IAAI,MAAM,eAAe;IACzB,MAAO,MAAc,UAAU,KAAK;GACtC;GACA,cAAc;EAChB,CAGe;EACb,GAAG;GACF,UAAW;CACd,CAAQ;CAER,OAAO,oBAAC,QAAQ,QAAT;EAAyB;YAAU;CAA8B,CAAA;AAC1E,CAAC;AAED,sBAAsB,cAAc"}

package/esm/components/DataList/DataList.context.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { createSafeContext } from "../../core/utils/create-safe-context/create-safe-context.mjs";
+//#region packages/@mantine/core/src/components/DataList/DataList.context.ts
+const [DataListProvider, useDataListContext] = createSafeContext("DataList component was not found in tree");
+//#endregion
+export { DataListProvider, useDataListContext };
+
+//# sourceMappingURL=DataList.context.mjs.map

package/esm/components/DataList/DataList.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.context.mjs","names":[],"sources":["../../../src/components/DataList/DataList.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { DataListFactory } from './DataList';\n\nexport interface DataListContextValue {\n  getStyles: GetStylesApi<DataListFactory>;\n}\n\nexport const [DataListProvider, useDataListContext] = createSafeContext<DataListContextValue>(\n  'DataList component was not found in tree'\n);\n"],"mappings":";;;AAOA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,0CACF"}

package/esm/components/DataList/DataList.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { getFontSize, getLineHeight, getSpacing } from "../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
+import { DataListProvider } from "./DataList.context.mjs";
+import DataList_module_default from "./DataList.module.mjs";
+import { DataListItem } from "./DataListItem/DataListItem.mjs";
+import { DataListItemLabel } from "./DataListItemLabel/DataListItemLabel.mjs";
+import { DataListItemValue } from "./DataListItemValue/DataListItemValue.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/DataList/DataList.tsx
+const defaultProps = { orientation: "horizontal" };
+const varsResolver = createVarsResolver((_, { size, gap, labelWidth }) => ({ root: {
+	"--data-list-fz": getFontSize(size),
+	"--data-list-lh": getLineHeight(size),
+	"--data-list-gap": getSpacing(gap),
+	"--data-list-label-width": labelWidth !== void 0 ? typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth : void 0
+} }));
+const DataList = factory((_props) => {
+	const props = useProps("DataList", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, children, gap, orientation, withDivider, labelWidth, mod, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: "DataList",
+		classes: DataList_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	return /* @__PURE__ */ jsx(DataListProvider, {
+		value: { getStyles },
+		children: /* @__PURE__ */ jsx(Box, {
+			...getStyles("root"),
+			component: "dl",
+			mod: [{
+				orientation,
+				"with-divider": withDivider
+			}, mod],
+			...others,
+			children
+		})
+	});
+});
+DataList.classes = DataList_module_default;
+DataList.varsResolver = varsResolver;
+DataList.displayName = "@mantine/core/DataList";
+DataList.Item = DataListItem;
+DataList.ItemLabel = DataListItemLabel;
+DataList.ItemValue = DataListItemValue;
+//#endregion
+export { DataList };
+
+//# sourceMappingURL=DataList.mjs.map

package/esm/components/DataList/DataList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.mjs","names":["classes"],"sources":["../../../src/components/DataList/DataList.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  getLineHeight,\n  getSpacing,\n  MantineSize,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { DataListProvider } from './DataList.context';\nimport { DataListItem, DataListItemStylesNames } from './DataListItem/DataListItem';\nimport {\n  DataListItemLabel,\n  DataListItemLabelStylesNames,\n} from './DataListItemLabel/DataListItemLabel';\nimport {\n  DataListItemValue,\n  DataListItemValueStylesNames,\n} from './DataListItemValue/DataListItemValue';\nimport classes from './DataList.module.css';\n\nexport type DataListStylesNames =\n  | 'root'\n  | DataListItemStylesNames\n  | DataListItemLabelStylesNames\n  | DataListItemValueStylesNames;\n\nexport type DataListCssVariables = {\n  root: '--data-list-fz' | '--data-list-lh' | '--data-list-gap' | '--data-list-label-width';\n};\n\nexport interface DataListProps\n  extends BoxProps, StylesApiProps<DataListFactory>, ElementProps<'dl'> {\n  /** DataList.Item components */\n  children?: React.ReactNode;\n\n  /** Controls `font-size` and `line-height` @default 'sm' */\n  size?: MantineSize;\n\n  /** Key of `theme.spacing` or any valid CSS value to set gap between items @default 'sm' */\n  gap?: MantineSpacing;\n\n  /** Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Adds border between items @default false */\n  withDivider?: boolean;\n\n  /** Controls min-width of the label (dt) element, any valid CSS value @default '120px' */\n  labelWidth?: React.CSSProperties['minWidth'];\n}\n\nexport type DataListFactory = Factory<{\n  props: DataListProps;\n  ref: HTMLDListElement;\n  stylesNames: DataListStylesNames;\n  vars: DataListCssVariables;\n  staticComponents: {\n    Item: typeof DataListItem;\n    ItemLabel: typeof DataListItemLabel;\n    ItemValue: typeof DataListItemValue;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<DataListProps>;\n\nconst varsResolver = createVarsResolver<DataListFactory>((_, { size, gap, labelWidth }) => ({\n  root: {\n    '--data-list-fz': getFontSize(size),\n    '--data-list-lh': getLineHeight(size),\n    '--data-list-gap': getSpacing(gap),\n    '--data-list-label-width':\n      labelWidth !== undefined\n        ? typeof labelWidth === 'number'\n          ? `${labelWidth}px`\n          : labelWidth\n        : undefined,\n  },\n}));\n\nexport const DataList = factory<DataListFactory>((_props) => {\n  const props = useProps('DataList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    gap,\n    orientation,\n    withDivider,\n    labelWidth,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<DataListFactory>({\n    name: 'DataList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <DataListProvider value={{ getStyles }}>\n      <Box<any>\n        {...getStyles('root')}\n        component=\"dl\"\n        mod={[{ orientation, 'with-divider': withDivider }, mod]}\n        {...others}\n      >\n        {children}\n      </Box>\n    </DataListProvider>\n  );\n});\n\nDataList.classes = classes;\nDataList.varsResolver = varsResolver;\nDataList.displayName = '@mantine/core/DataList';\nDataList.Item = DataListItem;\nDataList.ItemLabel = DataListItemLabel;\nDataList.ItemValue = DataListItemValue;\n"],"mappings":";;;;;;;;;;;;;;AAuEA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,KAAK,kBAAkB,EAC1F,MAAM;CACJ,kBAAkB,YAAY,IAAI;CAClC,kBAAkB,cAAc,IAAI;CACpC,mBAAmB,WAAW,GAAG;CACjC,2BACE,eAAe,KAAA,IACX,OAAO,eAAe,WACpB,GAAG,WAAW,MACd,aACF,KAAA;AACR,EACF,EAAE;AAEF,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,KACA,aACA,aACA,YACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,oBAAC,KAAD;GACE,GAAI,UAAU,MAAM;GACpB,WAAU;GACV,KAAK,CAAC;IAAE;IAAa,gBAAgB;GAAY,GAAG,GAAG;GACvD,GAAI;GAEH;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO;AAChB,SAAS,YAAY;AACrB,SAAS,YAAY"}

package/esm/components/DataList/DataList.module.mjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@mantine/core/src/components/DataList/DataList.module.css
+var DataList_module_default = {
+	"root": "m_f84d0407",
+	"item": "m_f848fe38",
+	"itemLabel": "m_c791b39c",
+	"itemValue": "m_c81ec619"
+};
+//#endregion
+export { DataList_module_default as default };
+
+//# sourceMappingURL=DataList.module.mjs.map

package/esm/components/DataList/DataList.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.module.mjs","names":[],"sources":["../../../src/components/DataList/DataList.module.css"],"sourcesContent":[".root {\n  --data-list-fz: var(--mantine-font-size-sm);\n  --data-list-lh: var(--mantine-line-height-sm);\n  --data-list-gap: var(--mantine-spacing-sm);\n  --data-list-label-width: rem(120px);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--data-list-gap);\n  font-size: var(--data-list-fz);\n  line-height: var(--data-list-lh);\n  margin: 0;\n  padding: 0;\n\n  &:where([data-with-divider]) {\n    gap: 0;\n  }\n}\n\n.item {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--mantine-spacing-xs);\n}\n\n.root:where([data-orientation='vertical']) > .item {\n  flex-direction: column;\n  gap: 0;\n}\n\n.itemLabel {\n  color: var(--mantine-color-dimmed);\n  font-size: var(--data-list-fz);\n  line-height: var(--data-list-lh);\n  min-width: var(--data-list-label-width);\n  margin: 0;\n}\n\n.root:where([data-orientation='vertical']) .itemLabel {\n  min-width: 100%;\n}\n\n.itemValue {\n  font-size: var(--data-list-fz);\n  line-height: var(--data-list-lh);\n  margin: 0;\n}\n\n.root:where([data-with-divider]) > .item:where(:not(:first-of-type)) {\n  border-top: rem(1px) solid var(--mantine-color-default-border);\n  padding-top: var(--data-list-gap);\n  margin-top: var(--data-list-gap);\n}\n"],"mappings":""}

package/esm/components/DataList/DataListItem/DataListItem.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useDataListContext } from "../DataList.context.mjs";
+import DataList_module_default from "../DataList.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/DataList/DataListItem/DataListItem.tsx
+const DataListItem = factory((_props) => {
+	const { classNames, className, style, styles, vars, children, mod, ...others } = useProps("DataListItem", null, _props);
+	const ctx = useDataListContext();
+	const stylesApiProps = {
+		classNames,
+		styles
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		...ctx.getStyles("item", {
+			...stylesApiProps,
+			className,
+			style
+		}),
+		mod,
+		...others,
+		children
+	});
+});
+DataListItem.classes = DataList_module_default;
+DataListItem.displayName = "@mantine/core/DataListItem";
+//#endregion
+export { DataListItem };
+
+//# sourceMappingURL=DataListItem.mjs.map

package/esm/components/DataList/DataListItem/DataListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataListItem.mjs","names":["classes"],"sources":["../../../../src/components/DataList/DataListItem/DataListItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useDataListContext } from '../DataList.context';\nimport classes from '../DataList.module.css';\n\nexport type DataListItemStylesNames = 'item';\n\nexport interface DataListItemProps\n  extends BoxProps, CompoundStylesApiProps<DataListItemFactory>, ElementProps<'div'> {\n  /** Item content */\n  children?: React.ReactNode;\n}\n\nexport type DataListItemFactory = Factory<{\n  props: DataListItemProps;\n  ref: HTMLDivElement;\n  stylesNames: DataListItemStylesNames;\n  compound: true;\n}>;\n\nexport const DataListItem = factory<DataListItemFactory>((_props) => {\n  const props = useProps('DataListItem', null, _props);\n  const { classNames, className, style, styles, vars, children, mod, ...others } = props;\n\n  const ctx = useDataListContext();\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box {...ctx.getStyles('item', { ...stylesApiProps, className, style })} mod={mod} {...others}>\n      {children}\n    </Box>\n  );\n});\n\nDataListItem.classes = classes;\nDataListItem.displayName = '@mantine/core/DataListItem';\n"],"mappings":";;;;;;;;AA2BA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,KAAK,GAAG,WADxD,SAAS,gBAAgB,MAAM,MACwC;CAErF,MAAM,MAAM,mBAAmB;CAC/B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,OACE,oBAAC,KAAD;EAAK,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EAAQ;EAAK,GAAI;EACpF;CACE,CAAA;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}