@mantine/core 9.4.3-alpha.0 → 9.5.1-alpha.0

package/cjs/components/Combobox/use-combobox/use-combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-combobox.cjs","names":["getRootElement","findElementBySelector","findElementsBySelector","getNextIndex","getPreviousIndex","getFirstIndex"],"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.cjs","names":["getRootElement","findElementBySelector","findElementsBySelector","getNextIndex","getPreviousIndex","getFirstIndex"],"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/cjs/components/ComboboxPopover/ComboboxPopover.cjs

@@ -148,7 +148,8 @@ const ComboboxPopover = require_factory.genericFactory((_props) => {
 			else setValue([...currentValue, option.value]);
 			combobox.updateSelectedOptionIndex("selected");
 		} else {
-			setValue(allowDeselect && `${option.value}` === `${_value}` ? null : option.value);
+			const nextValue = allowDeselect && `${option.value}` === `${_value}` ? null : option.value;
+			setValue(nextValue);
 			combobox.closeDropdown();
 		}
 		if (searchable) handleSearchChange("");

package/cjs/components/ComboboxPopover/ComboboxPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxPopover.cjs","names":["isOptionsGroup","Combobox","CheckIcon","comboboxClasses","defaultOptionsFilter","isEmptyComboboxData","ScrollArea","genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","OptionsDropdown","ComboboxPopoverTarget"],"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,IAAIA,yBAAAA,eAAe,IAAI,GAAG;EACxB,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,MAAM;GACC;GAEG;GACK;GACI;GACA;GACL;EACf,GANM,GAAG,KAAK,OAMd,CACF;EACD,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,SAAS,OAAV;GAAgB,OAAO,KAAK;aAAQ;EAAwB,CAAA;CACrE;CAEA,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;CAChD,MAAM,QACJ,kBACC,UACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD,EAAW,WAAWC,wBAAAA,QAAgB,yBAA2B,CAAA,IAC/D,oBACF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAWA,wBAAAA,QAAgB,gCAAkC,CAAA,IAChE;CAEN,MAAM,iBACJ,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,sBAAsB,UAAU;EACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;EACvB,sBAAsB,WAAW;CAClC,EAAA,CAAA;CAGJ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,iBAAAA,SAAS,QAAV;EACE,OAAO,KAAK;EACZ,UAAU,KAAK;EACf,YAAA,GAAA,KAAA,QAAA,CAAc,GAAGE,wBAAAA,QAAgB,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,UAAUC,+BAAAA,qBAAAA,CAAsB;EACpD,SAAS;EACT;EACA,OAAO,SAAS;CAClB,CAAC;CACD,MAAM,UAAUC,+BAAAA,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,MAAM,UACtC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,MAAM;EAMS;EACI;EACZ;EACY;EACT;EACI;CACf,GAVGL,yBAAAA,eAAe,IAAI,IACf,SAAS,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,UACvD,GAAG,KAAK,OAQf,CACF;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,SAAS,UAAV;EAAmB,iBAAA;YAAnB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,iBAAAA,SAAS,QAAV;GAAiB,OAAO;GAAQ,UAAU;GAAgB,aAAY;EAAa,CAAA,GACnF,iBAAA,GAAA,kBAAA,KAAA,CAACA,iBAAAA,SAAS,SAAV,EAAA,UAAA,CACG,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACK,mBAAAA,WAAW,UAAZ;GACE,KAAK,qBAAqB;GAC1B,MAAK;GACL,eAAc;GACd,kBAAiB;GACjB,GAAI;aAEH;EACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,iBAAA,GAAA,kBAAA,IAAA,CAACL,iBAAAA,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,kBAAkBM,gBAAAA,gBAAwC,WAAW;CAChF,MAAM,QAAQC,kBAAAA,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,cAAA,GAAA,MAAA,QAAA,OAA2BC,iCAAAA,sBAAsB,IAAI,GAAG,CAAC,IAAI,CAAC;CACpE,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8BC,2BAAAA,iBAAiB,UAAU,GAAG,CAAC,UAAU,CAAC;CAE9E,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,gBAAA,CAA4B;EACzC;EACA;EACA,YAAY,WAAY,CAAC,IAAY;EACrC;CACF,CAAC;CAED,MAAM,CAAC,cAAc,mBAAA,GAAA,eAAA,gBAAA,CAAkC;EACrD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,WAAWC,qBAAAA,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,mBAAmBC,gCAAAA,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,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACX,iBAAAA,UAAD;EACE,OAAO;EACP,kBAAiB;EACjB,YAAY;EACZ,QAAQ;EACE;EACE;EACZ,gBAAgB;EAChB,GAAI;EACJ,GAAI;YATN,CAWG,UACA,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,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,iBAAA,GAAA,kBAAA,IAAA,CAACY,wBAAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAACZ,iBAAAA,SAAS,aAAV;EACQ;EACN,OAAO;EACD;EACN,eAAe;EACf,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC;AAED,gBAAgB,UAAUA,iBAAAA,SAAS;AACnC,gBAAgB,cAAc;AAC9B,gBAAgB,SAASa,8BAAAA"}
+{"version":3,"file":"ComboboxPopover.cjs","names":["isOptionsGroup","Combobox","CheckIcon","comboboxClasses","defaultOptionsFilter","isEmptyComboboxData","ScrollArea","genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","OptionsDropdown","ComboboxPopoverTarget"],"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":"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"}

package/cjs/components/Drawer/DrawerStack.cjs

@@ -11,7 +11,7 @@ function DrawerStack({ children }) {
 		value: {
 			stack,
 			addModal: (id, zIndex) => {
-				setStack((current) => [...new Set([...current, id])]);
+				setStack((current) => [.../* @__PURE__ */ new Set([...current, id])]);
 				setMaxZIndex((current) => typeof zIndex === "number" && typeof current === "number" ? Math.max(current, zIndex) : current);
 			},
 			removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),

package/cjs/components/Drawer/DrawerStack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerStack.cjs","names":["getDefaultZIndex"],"sources":["../../../src/components/Drawer/DrawerStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface DrawerStackContext {\n  stack: string[];\n  addModal: (id: string, zIndex: number | string) => void;\n  removeModal: (id: string) => void;\n  getZIndex: (id: string) => string;\n  currentId: string;\n  maxZIndex: string | number;\n}\n\nexport const DrawerStackContext = createContext<DrawerStackContext | null>(null);\n\nexport interface DrawerStackProps {\n  children: React.ReactNode;\n}\n\nexport function DrawerStack({ children }: DrawerStackProps) {\n  const [stack, setStack] = useState<string[]>([]);\n  const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n\n  return (\n    <DrawerStackContext\n      value={{\n        stack,\n        addModal: (id, zIndex) => {\n          setStack((current) => [...new Set([...current, id])]);\n          setMaxZIndex((current) =>\n            typeof zIndex === 'number' && typeof current === 'number'\n              ? Math.max(current, zIndex)\n              : current\n          );\n        },\n        removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n        getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n        currentId: stack[stack.length - 1],\n        maxZIndex,\n      }}\n    >\n      {children}\n    </DrawerStackContext>\n  );\n}\n\nDrawerStack.displayName = '@mantine/core/DrawerStack';\n"],"mappings":";;;;;AAYA,MAAa,sBAAA,GAAA,MAAA,cAAA,CAA8D,IAAI;AAM/E,SAAgB,YAAY,EAAE,YAA8B;CAC1D,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,SAAA,CAA+B,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,SAAA,CAA0CA,4BAAAA,iBAAiB,OAAO,CAAC;CAErF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;EACF;EAEC;CACiB,CAAA;AAExB;AAEA,YAAY,cAAc"}
+{"version":3,"file":"DrawerStack.cjs","names":["getDefaultZIndex"],"sources":["../../../src/components/Drawer/DrawerStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface DrawerStackContext {\n  stack: string[];\n  addModal: (id: string, zIndex: number | string) => void;\n  removeModal: (id: string) => void;\n  getZIndex: (id: string) => string;\n  currentId: string;\n  maxZIndex: string | number;\n}\n\nexport const DrawerStackContext = createContext<DrawerStackContext | null>(null);\n\nexport interface DrawerStackProps {\n  children: React.ReactNode;\n}\n\nexport function DrawerStack({ children }: DrawerStackProps) {\n  const [stack, setStack] = useState<string[]>([]);\n  const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n\n  return (\n    <DrawerStackContext\n      value={{\n        stack,\n        addModal: (id, zIndex) => {\n          setStack((current) => [...new Set([...current, id])]);\n          setMaxZIndex((current) =>\n            typeof zIndex === 'number' && typeof current === 'number'\n              ? Math.max(current, zIndex)\n              : current\n          );\n        },\n        removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n        getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n        currentId: stack[stack.length - 1],\n        maxZIndex,\n      }}\n    >\n      {children}\n    </DrawerStackContext>\n  );\n}\n\nDrawerStack.displayName = '@mantine/core/DrawerStack';\n"],"mappings":";;;;;AAYA,MAAa,sBAAA,GAAA,MAAA,cAAA,CAA8D,IAAI;AAM/E,SAAgB,YAAY,EAAE,YAA8B;CAC1D,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,SAAA,CAA+B,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,SAAA,CAA0CA,4BAAAA,iBAAiB,OAAO,CAAC;CAErF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;EACF;EAEC;CACiB,CAAA;AAExB;AAEA,YAAY,cAAc"}

package/cjs/components/FloatingIndicator/FloatingIndicator.cjs

@@ -16,6 +16,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { t
 const FloatingIndicator = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("FloatingIndicator", null, _props);
 	const { classNames, className, style, styles, unstyled, vars, target, parent, transitionDuration, mod, displayAfterTransitionEnd, onTransitionStart, onTransitionEnd, attributes, ref, ...others } = props;
+	const shouldReduceMotion = (0, _mantine_hooks.useReducedMotion)();
 	const getStyles = require_use_styles.useStyles({
 		name: "FloatingIndicator",
 		classes: require_FloatingIndicator_module.default,
@@ -28,7 +29,7 @@ const FloatingIndicator = require_factory.factory((_props) => {
 		attributes,
 		vars,
 		varsResolver,
-		stylesCtx: { shouldReduceMotion: (0, _mantine_hooks.useReducedMotion)() }
+		stylesCtx: { shouldReduceMotion }
 	});
 	const innerRef = (0, react.useRef)(null);
 	const { initialized, hidden } = require_use_floating_indicator.useFloatingIndicator({

package/cjs/components/FloatingIndicator/FloatingIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingIndicator.cjs","names":["createVarsResolver","factory","useProps","useStyles","useFloatingIndicator","Box","classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n  root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n  extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {\n  /** Target element over which the indicator is displayed.\n   * The indicator will be positioned to match the target's size and position.\n   * */\n  target: HTMLElement | null | undefined;\n\n  /** Parent container element that must have `position: relative`.\n   * The indicator's position is calculated relative to this element.\n   * */\n  parent: HTMLElement | null | undefined;\n\n  /** Transition duration in ms @default 150 */\n  transitionDuration?: number | string;\n\n  /** Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n   * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n   * the indicator from appearing at the wrong position during the parent's animation.\n   * @default false\n   * */\n  displayAfterTransitionEnd?: boolean;\n\n  /** Called when the indicator starts transitioning to a new position */\n  onTransitionStart?: () => void;\n\n  /** Called when the indicator finishes transitioning to a new position */\n  onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n  props: FloatingIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingIndicatorStylesNames;\n  vars: FloatingIndicatorCssVariables;\n  ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver<FloatingIndicatorFactory>(\n  (theme, { transitionDuration }, { shouldReduceMotion }) => {\n    const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n    const duration = reduceMotion\n      ? '0ms'\n      : typeof transitionDuration === 'number'\n        ? `${transitionDuration}ms`\n        : transitionDuration || '150ms';\n\n    return {\n      root: {\n        '--transition-duration': duration,\n      },\n    };\n  }\n);\n\nexport const FloatingIndicator = factory<FloatingIndicatorFactory>((_props) => {\n  const props = useProps('FloatingIndicator', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    target,\n    parent,\n    transitionDuration,\n    mod,\n    displayAfterTransitionEnd,\n    onTransitionStart,\n    onTransitionEnd,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const shouldReduceMotion = useReducedMotion();\n\n  const getStyles = useStyles<FloatingIndicatorFactory>({\n    name: 'FloatingIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    stylesCtx: { shouldReduceMotion },\n  });\n\n  const innerRef = useRef<HTMLDivElement>(null);\n  const { initialized, hidden } = useFloatingIndicator({\n    target,\n    parent,\n    ref: innerRef,\n    displayAfterTransitionEnd,\n    onTransitionStart,\n    onTransitionEnd,\n  });\n\n  const mergedRef = useMergedRef(ref, innerRef);\n\n  if (!target || !parent) {\n    return null;\n  }\n\n  return (\n    <Box ref={mergedRef} mod={[{ initialized, hidden }, mod]} {...getStyles('root')} {...others} />\n  );\n});\n\nFloatingIndicator.displayName = '@mantine/core/FloatingIndicator';\nFloatingIndicator.classes = classes;\nFloatingIndicator.varsResolver = varsResolver;\n\nexport namespace FloatingIndicator {\n  export type Props = FloatingIndicatorProps;\n  export type StylesNames = FloatingIndicatorStylesNames;\n  export type CssVariables = FloatingIndicatorCssVariables;\n  export type Factory = FloatingIndicatorFactory;\n}\n"],"mappings":";;;;;;;;;;;;AA0DA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,sBAAsB,EAAE,yBAAyB;CAQzD,OAAO,EACL,MAAM,EACJ,0BATiB,MAAM,uBAAuB,qBAAqB,SAEnE,QACA,OAAO,uBAAuB,WAC5B,GAAG,mBAAmB,MACtB,sBAAsB,QAK1B,EACF;AACF,CACF;AAEA,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,MAAM,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,QACA,oBACA,KACA,2BACA,mBACA,iBACA,YACA,KACA,GAAG,WACD;CAIJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,qBAAA,GAAA,eAAA,iBAAA,CAAiB,EAAE;CAClC,CAAC;CAED,MAAM,YAAA,GAAA,MAAA,OAAA,CAAkC,IAAI;CAC5C,MAAM,EAAE,aAAa,WAAWC,+BAAAA,qBAAqB;EACnD;EACA;EACA,KAAK;EACL;EACA;EACA;CACF,CAAC;CAED,MAAM,aAAA,GAAA,eAAA,aAAA,CAAyB,KAAK,QAAQ;CAE5C,IAAI,CAAC,UAAU,CAAC,QACd,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EAAK,KAAK;EAAW,KAAK,CAAC;GAAE;GAAa;EAAO,GAAG,GAAG;EAAG,GAAI,UAAU,MAAM;EAAG,GAAI;CAAS,CAAA;AAElG,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}
+{"version":3,"file":"FloatingIndicator.cjs","names":["createVarsResolver","factory","useProps","useStyles","useFloatingIndicator","Box","classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n  root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n  extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {\n  /** Target element over which the indicator is displayed.\n   * The indicator will be positioned to match the target's size and position.\n   * */\n  target: HTMLElement | null | undefined;\n\n  /** Parent container element that must have `position: relative`.\n   * The indicator's position is calculated relative to this element.\n   * */\n  parent: HTMLElement | null | undefined;\n\n  /** Transition duration in ms @default 150 */\n  transitionDuration?: number | string;\n\n  /** Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n   * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n   * the indicator from appearing at the wrong position during the parent's animation.\n   * @default false\n   * */\n  displayAfterTransitionEnd?: boolean;\n\n  /** Called when the indicator starts transitioning to a new position */\n  onTransitionStart?: () => void;\n\n  /** Called when the indicator finishes transitioning to a new position */\n  onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n  props: FloatingIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingIndicatorStylesNames;\n  vars: FloatingIndicatorCssVariables;\n  ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver<FloatingIndicatorFactory>(\n  (theme, { transitionDuration }, { shouldReduceMotion }) => {\n    const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n    const duration = reduceMotion\n      ? '0ms'\n      : typeof transitionDuration === 'number'\n        ? `${transitionDuration}ms`\n        : transitionDuration || '150ms';\n\n    return {\n      root: {\n        '--transition-duration': duration,\n      },\n    };\n  }\n);\n\nexport const FloatingIndicator = factory<FloatingIndicatorFactory>((_props) => {\n  const props = useProps('FloatingIndicator', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    target,\n    parent,\n    transitionDuration,\n    mod,\n    displayAfterTransitionEnd,\n    onTransitionStart,\n    onTransitionEnd,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const shouldReduceMotion = useReducedMotion();\n\n  const getStyles = useStyles<FloatingIndicatorFactory>({\n    name: 'FloatingIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    stylesCtx: { shouldReduceMotion },\n  });\n\n  const innerRef = useRef<HTMLDivElement>(null);\n  const { initialized, hidden } = useFloatingIndicator({\n    target,\n    parent,\n    ref: innerRef,\n    displayAfterTransitionEnd,\n    onTransitionStart,\n    onTransitionEnd,\n  });\n\n  const mergedRef = useMergedRef(ref, innerRef);\n\n  if (!target || !parent) {\n    return null;\n  }\n\n  return (\n    <Box ref={mergedRef} mod={[{ initialized, hidden }, mod]} {...getStyles('root')} {...others} />\n  );\n});\n\nFloatingIndicator.displayName = '@mantine/core/FloatingIndicator';\nFloatingIndicator.classes = classes;\nFloatingIndicator.varsResolver = varsResolver;\n\nexport namespace FloatingIndicator {\n  export type Props = FloatingIndicatorProps;\n  export type StylesNames = FloatingIndicatorStylesNames;\n  export type CssVariables = FloatingIndicatorCssVariables;\n  export type Factory = FloatingIndicatorFactory;\n}\n"],"mappings":";;;;;;;;;;;;AA0DA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,sBAAsB,EAAE,yBAAyB;CAQzD,OAAO,EACL,MAAM,EACJ,0BATiB,MAAM,uBAAuB,qBAAqB,SAEnE,QACA,OAAO,uBAAuB,WAC5B,GAAG,mBAAmB,MACtB,sBAAsB,QAK1B,EACF;AACF,CACF;AAEA,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,MAAM,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,QACA,oBACA,KACA,2BACA,mBACA,iBACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,sBAAA,GAAA,eAAA,iBAAA,CAAsC;CAE5C,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,mBAAmB;CAClC,CAAC;CAED,MAAM,YAAA,GAAA,MAAA,OAAA,CAAkC,IAAI;CAC5C,MAAM,EAAE,aAAa,WAAWC,+BAAAA,qBAAqB;EACnD;EACA;EACA,KAAK;EACL;EACA;EACA;CACF,CAAC;CAED,MAAM,aAAA,GAAA,eAAA,aAAA,CAAyB,KAAK,QAAQ;CAE5C,IAAI,CAAC,UAAU,CAAC,QACd,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EAAK,KAAK;EAAW,KAAK,CAAC;GAAE;GAAa;EAAO,GAAG,GAAG;EAAG,GAAI,UAAU,MAAM;EAAG,GAAI;CAAS,CAAA;AAElG,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}

package/cjs/components/FloatingWindow/FloatingWindow.cjs

@@ -5,6 +5,8 @@ const require_use_styles = require("../../core/styles-api/use-styles/use-styles.
 const require_factory = require("../../core/factory/factory.cjs");
 const require_Paper = require("../Paper/Paper.cjs");
 const require_OptionalPortal = require("../Portal/OptionalPortal.cjs");
+const require_FloatingWindow_context = require("./FloatingWindow.context.cjs");
+const require_FloatingWindowResizeHandle = require("./FloatingWindowResizeHandle.cjs");
 const require_FloatingWindow_module = require("./FloatingWindow.module.cjs");
 let react = require("react");
 let _mantine_hooks = require("@mantine/hooks");
@@ -14,9 +16,16 @@ const defaultProps = {
 	constrainToViewport: true,
 	zIndex: require_get_default_z_index.getDefaultZIndex("overlay")
 };
+function clampDimension(value, min, max) {
+	let v = value;
+	if (min != null) v = Math.max(v, min);
+	if (max != null) v = Math.min(v, max);
+	return v;
+}
 const FloatingWindow = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("FloatingWindow", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, mod, enabled, constrainToViewport, constrainOffset, dragHandleSelector, excludeDragHandleSelector, axis, initialPosition, onPositionChange, onDragStart, onDragEnd, setPositionRef, withinPortal, portalProps, zIndex, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, mod, enabled, constrainToViewport, constrainOffset, dragHandleSelector, excludeDragHandleSelector, axis, initialPosition, onPositionChange, onDragStart, onDragEnd, setPositionRef, withinPortal, portalProps, zIndex, dimensions, onSizeChange, onResizeStart, onResizeEnd, ref, ...others } = props;
+	const rootRef = (0, react.useRef)(null);
 	const getStyles = require_use_styles.useStyles({
 		name: "FloatingWindow",
 		classes: require_FloatingWindow_module.default,
@@ -41,20 +50,35 @@ const FloatingWindow = require_factory.factory((_props) => {
 		onDragEnd
 	});
 	(0, react.useImperativeHandle)(setPositionRef, () => floatingWindow.setPosition, [floatingWindow.setPosition]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
-		withinPortal,
-		...portalProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Paper.Paper, {
-			ref: (0, _mantine_hooks.useMergedRef)(ref, floatingWindow.ref),
-			mod: [{ dragging: floatingWindow.isDragging }, mod],
-			...getStyles("root"),
-			...others,
-			__vars: { "--floating-window-z-index": zIndex.toString() }
+	const cssVars = { "--floating-window-z-index": zIndex.toString() };
+	if (dimensions?.initialWidth != null) cssVars["--floating-window-width"] = `${clampDimension(dimensions.initialWidth, dimensions.minWidth, dimensions.maxWidth)}px`;
+	if (dimensions?.initialHeight != null) cssVars["--floating-window-height"] = `${clampDimension(dimensions.initialHeight, dimensions.minHeight, dimensions.maxHeight)}px`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingWindow_context.FloatingWindowProvider, {
+		value: {
+			rootRef,
+			dimensions,
+			constrainToViewport,
+			constrainOffset,
+			onSizeChange,
+			onResizeStart,
+			onResizeEnd
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
+			withinPortal,
+			...portalProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Paper.Paper, {
+				ref: (0, _mantine_hooks.useMergedRef)(ref, floatingWindow.ref, rootRef),
+				mod: [{ dragging: floatingWindow.isDragging }, mod],
+				...getStyles("root"),
+				...others,
+				__vars: cssVars
+			})
 		})
 	});
 });
 FloatingWindow.displayName = "@mantine/core/FloatingWindow";
 FloatingWindow.classes = require_FloatingWindow_module.default;
+FloatingWindow.ResizeHandle = require_FloatingWindowResizeHandle.FloatingWindowResizeHandle;
 //#endregion
 exports.FloatingWindow = FloatingWindow;
 

package/cjs/components/FloatingWindow/FloatingWindow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindow.cjs","names":["getDefaultZIndex","factory","useProps","useStyles","OptionalPortal","Paper","classes"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.tsx"],"sourcesContent":["import { useImperativeHandle } from 'react';\nimport {\n  SetFloatingWindowPosition,\n  useFloatingWindow,\n  UseFloatingWindowOptions,\n  useMergedRef,\n} from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport classes from './FloatingWindow.module.css';\n\nexport type FloatingWindowStylesNames = 'root';\n\nexport interface FloatingWindowProps\n  extends\n    UseFloatingWindowOptions,\n    PaperBaseProps,\n    BoxProps,\n    StylesApiProps<FloatingWindowFactory>,\n    ElementProps<'div', keyof UseFloatingWindowOptions> {\n  /** Assigns ref to set position programmatically */\n  setPositionRef?: React.RefObject<SetFloatingWindowPosition | null>;\n\n  /** Determines whether the window should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props passed down to `Portal` component */\n  portalProps?: Omit<PortalProps, 'children'>;\n\n  /** `z-index` of the root element @default 400 */\n  zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport type FloatingWindowFactory = Factory<{\n  props: FloatingWindowProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingWindowStylesNames;\n}>;\n\nconst defaultProps = {\n  constrainToViewport: true,\n  zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<FloatingWindowProps>;\n\nexport const FloatingWindow = factory<FloatingWindowFactory>((_props) => {\n  const props = useProps('FloatingWindow', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    mod,\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n    setPositionRef,\n    withinPortal,\n    portalProps,\n    zIndex,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<FloatingWindowFactory>({\n    name: 'FloatingWindow',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const floatingWindow = useFloatingWindow({\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n  });\n\n  useImperativeHandle(setPositionRef, () => floatingWindow.setPosition, [\n    floatingWindow.setPosition,\n  ]);\n\n  return (\n    <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n      <Paper\n        ref={useMergedRef(ref, floatingWindow.ref)}\n        mod={[{ dragging: floatingWindow.isDragging }, mod]}\n        {...getStyles('root')}\n        {...others}\n        __vars={{ '--floating-window-z-index': zIndex.toString() }}\n      />\n    </OptionalPortal>\n  );\n});\n\nFloatingWindow.displayName = '@mantine/core/FloatingWindow';\nFloatingWindow.classes = classes;\n\nexport namespace FloatingWindow {\n  export type Props = FloatingWindowProps;\n  export type StylesNames = FloatingWindowStylesNames;\n  export type Factory = FloatingWindowFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAiDA,MAAM,eAAe;CACnB,qBAAqB;CACrB,QAAQA,4BAAAA,iBAAiB,SAAS;AACpC;AAEA,MAAa,iBAAiBC,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,SACA,qBACA,iBACA,oBACA,2BACA,MACA,iBACA,kBACA,aACA,WACA,gBACA,cACA,aACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAiC;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAA,GAAA,eAAA,kBAAA,CAAmC;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,CAAA,GAAA,MAAA,oBAAA,CAAoB,sBAAsB,eAAe,aAAa,CACpE,eAAe,WACjB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;EAA8B;EAAc,GAAI;YAC9C,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;GACE,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,eAAe,GAAG;GACzC,KAAK,CAAC,EAAE,UAAU,eAAe,WAAW,GAAG,GAAG;GAClD,GAAI,UAAU,MAAM;GACpB,GAAI;GACJ,QAAQ,EAAE,6BAA6B,OAAO,SAAS,EAAE;EAC1D,CAAA;CACa,CAAA;AAEpB,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUC,8BAAAA"}
+{"version":3,"file":"FloatingWindow.cjs","names":["getDefaultZIndex","factory","useProps","useStyles","FloatingWindowProvider","OptionalPortal","Paper","classes","FloatingWindowResizeHandle"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.tsx"],"sourcesContent":["import { useImperativeHandle, useRef } from 'react';\nimport {\n  SetFloatingWindowPosition,\n  useFloatingWindow,\n  UseFloatingWindowOptions,\n  useMergedRef,\n} from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport {\n  FloatingWindowDimensions,\n  FloatingWindowProvider,\n  FloatingWindowSize,\n} from './FloatingWindow.context';\nimport { FloatingWindowResizeHandle } from './FloatingWindowResizeHandle';\nimport classes from './FloatingWindow.module.css';\n\nexport type FloatingWindowStylesNames = 'root';\n\nexport interface FloatingWindowProps\n  extends\n    UseFloatingWindowOptions,\n    PaperBaseProps,\n    BoxProps,\n    StylesApiProps<FloatingWindowFactory>,\n    ElementProps<'div', keyof UseFloatingWindowOptions> {\n  /** Assigns ref to set position programmatically */\n  setPositionRef?: React.RefObject<SetFloatingWindowPosition | null>;\n\n  /** Determines whether the window should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props passed down to `Portal` component */\n  portalProps?: Omit<PortalProps, 'children'>;\n\n  /** `z-index` of the root element @default 400 */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Dimensions configuration for resizable floating window */\n  dimensions?: FloatingWindowDimensions;\n\n  /** Called when the window is resized with `FloatingWindow.ResizeHandle` */\n  onSizeChange?: (size: FloatingWindowSize) => void;\n\n  /** Called when the resize with `FloatingWindow.ResizeHandle` starts. Not called for keyboard resize. */\n  onResizeStart?: () => void;\n\n  /** Called when the resize with `FloatingWindow.ResizeHandle` stops. Not called for keyboard resize. */\n  onResizeEnd?: () => void;\n}\n\nexport type FloatingWindowFactory = Factory<{\n  props: FloatingWindowProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingWindowStylesNames;\n  staticComponents: {\n    ResizeHandle: typeof FloatingWindowResizeHandle;\n  };\n}>;\n\nconst defaultProps = {\n  constrainToViewport: true,\n  zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<FloatingWindowProps>;\n\nfunction clampDimension(value: number, min?: number, max?: number): number {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  return v;\n}\n\nexport const FloatingWindow = factory<FloatingWindowFactory>((_props) => {\n  const props = useProps('FloatingWindow', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    mod,\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n    setPositionRef,\n    withinPortal,\n    portalProps,\n    zIndex,\n    dimensions,\n    onSizeChange,\n    onResizeStart,\n    onResizeEnd,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const getStyles = useStyles<FloatingWindowFactory>({\n    name: 'FloatingWindow',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const floatingWindow = useFloatingWindow({\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n  });\n\n  useImperativeHandle(setPositionRef, () => floatingWindow.setPosition, [\n    floatingWindow.setPosition,\n  ]);\n\n  const cssVars: Record<string, string | undefined> = {\n    '--floating-window-z-index': zIndex.toString(),\n  };\n\n  if (dimensions?.initialWidth != null) {\n    cssVars['--floating-window-width'] =\n      `${clampDimension(dimensions.initialWidth, dimensions.minWidth, dimensions.maxWidth)}px`;\n  }\n\n  if (dimensions?.initialHeight != null) {\n    cssVars['--floating-window-height'] =\n      `${clampDimension(dimensions.initialHeight, dimensions.minHeight, dimensions.maxHeight)}px`;\n  }\n\n  return (\n    <FloatingWindowProvider\n      value={{\n        rootRef,\n        dimensions,\n        constrainToViewport,\n        constrainOffset,\n        onSizeChange,\n        onResizeStart,\n        onResizeEnd,\n      }}\n    >\n      <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n        <Paper\n          ref={useMergedRef(ref, floatingWindow.ref, rootRef)}\n          mod={[{ dragging: floatingWindow.isDragging }, mod]}\n          {...getStyles('root')}\n          {...others}\n          __vars={cssVars}\n        />\n      </OptionalPortal>\n    </FloatingWindowProvider>\n  );\n});\n\nFloatingWindow.displayName = '@mantine/core/FloatingWindow';\nFloatingWindow.classes = classes;\nFloatingWindow.ResizeHandle = FloatingWindowResizeHandle;\n"],"mappings":";;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,qBAAqB;CACrB,QAAQA,4BAAAA,iBAAiB,SAAS;AACpC;AAEA,SAAS,eAAe,OAAe,KAAc,KAAsB;CACzE,IAAI,IAAI;CACR,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,OAAO;AACT;AAEA,MAAa,iBAAiBC,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,SACA,qBACA,iBACA,oBACA,2BACA,MACA,iBACA,kBACA,aACA,WACA,gBACA,cACA,aACA,QACA,YACA,cACA,eACA,aACA,KACA,GAAG,WACD;CAEJ,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiC,IAAI;CAE3C,MAAM,YAAYC,mBAAAA,UAAiC;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAA,GAAA,eAAA,kBAAA,CAAmC;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,CAAA,GAAA,MAAA,oBAAA,CAAoB,sBAAsB,eAAe,aAAa,CACpE,eAAe,WACjB,CAAC;CAED,MAAM,UAA8C,EAClD,6BAA6B,OAAO,SAAS,EAC/C;CAEA,IAAI,YAAY,gBAAgB,MAC9B,QAAQ,6BACN,GAAG,eAAe,WAAW,cAAc,WAAW,UAAU,WAAW,QAAQ,EAAE;CAGzF,IAAI,YAAY,iBAAiB,MAC/B,QAAQ,8BACN,GAAG,eAAe,WAAW,eAAe,WAAW,WAAW,WAAW,SAAS,EAAE;CAG5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;GAA8B;GAAc,GAAI;aAC9C,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IACE,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,eAAe,KAAK,OAAO;IAClD,KAAK,CAAC,EAAE,UAAU,eAAe,WAAW,GAAG,GAAG;IAClD,GAAI,UAAU,MAAM;IACpB,GAAI;IACJ,QAAQ;GACT,CAAA;EACa,CAAA;CACM,CAAA;AAE5B,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,eAAeC,mCAAAA"}

package/cjs/components/FloatingWindow/FloatingWindow.context.cjs

@@ -0,0 +1,8 @@
+"use client";
+//#region packages/@mantine/core/src/components/FloatingWindow/FloatingWindow.context.ts
+const [FloatingWindowProvider, useFloatingWindowContext] = require("../../core/utils/create-safe-context/create-safe-context.cjs").createSafeContext("FloatingWindow.ResizeHandle must be used within FloatingWindow");
+//#endregion
+exports.FloatingWindowProvider = FloatingWindowProvider;
+exports.useFloatingWindowContext = useFloatingWindowContext;
+
+//# sourceMappingURL=FloatingWindow.context.cjs.map

package/cjs/components/FloatingWindow/FloatingWindow.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWindow.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface FloatingWindowDimensions {\n  /** Initial width of the floating window in px */\n  initialWidth?: number;\n\n  /** Minimum width of the floating window in px */\n  minWidth?: number;\n\n  /** Maximum width of the floating window in px */\n  maxWidth?: number;\n\n  /** Initial height of the floating window in px */\n  initialHeight?: number;\n\n  /** Minimum height of the floating window in px */\n  minHeight?: number;\n\n  /** Maximum height of the floating window in px */\n  maxHeight?: number;\n}\n\nexport interface FloatingWindowSize {\n  /** Width of the floating window in px */\n  width: number;\n\n  /** Height of the floating window in px */\n  height: number;\n}\n\nexport interface FloatingWindowContextValue {\n  rootRef: React.RefObject<HTMLDivElement | null>;\n  dimensions: FloatingWindowDimensions | undefined;\n  constrainToViewport: boolean | undefined;\n  constrainOffset: number | undefined;\n  onResizeStart: (() => void) | undefined;\n  onResizeEnd: (() => void) | undefined;\n  onSizeChange: ((size: FloatingWindowSize) => void) | undefined;\n}\n\nexport const [FloatingWindowProvider, useFloatingWindowContext] =\n  createSafeContext<FloatingWindowContextValue>(\n    'FloatingWindow.ResizeHandle must be used within FloatingWindow'\n  );\n"],"mappings":";;AAwCA,MAAa,CAAC,wBAAwB,kGACpCA,CAAAA,CAAAA,kBACE,gEACF"}

package/cjs/components/FloatingWindow/FloatingWindow.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindow.module.cjs","names":[],"sources":["../../../src/components/FloatingWindow/FloatingWindow.module.css"],"sourcesContent":[".root {\n  position: fixed;\n  z-index: var(--floating-window-z-index);\n}\n"],"mappings":""}
+{"version":3,"file":"FloatingWindow.module.cjs","names":[],"sources":["../../../src/components/FloatingWindow/FloatingWindow.module.css"],"sourcesContent":[".root {\n  position: fixed;\n  z-index: var(--floating-window-z-index);\n  width: var(--floating-window-width, auto);\n  height: var(--floating-window-height, auto);\n}\n"],"mappings":""}

package/cjs/components/FloatingWindow/FloatingWindowResizeHandle.cjs

@@ -0,0 +1,186 @@
+"use client";
+const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
+const require_factory = require("../../core/factory/factory.cjs");
+const require_Box = require("../../core/Box/Box.cjs");
+const require_FloatingWindow_context = require("./FloatingWindow.context.cjs");
+let react = require("react");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/FloatingWindow/FloatingWindowResizeHandle.tsx
+const defaultProps = {};
+const KEYBOARD_STEP = 10;
+function clampDimension(value, min, max, viewportMax) {
+	let v = value;
+	if (min != null) v = Math.max(v, min);
+	if (max != null) v = Math.min(v, max);
+	if (viewportMax != null) v = Math.min(v, viewportMax);
+	return v;
+}
+function getViewportLimits(rect, constrainToViewport, constrainOffset) {
+	if (!constrainToViewport) return {
+		maxWidth: void 0,
+		maxHeight: void 0
+	};
+	const offset = constrainOffset ?? 0;
+	return {
+		maxWidth: window.innerWidth - rect.left - offset,
+		maxHeight: window.innerHeight - rect.top - offset
+	};
+}
+const FloatingWindowResizeHandle = require_factory.factory((_props) => {
+	const { children, ref, style, ...others } = require_use_props.useProps("FloatingWindowResizeHandle", defaultProps, _props);
+	const ctx = require_FloatingWindow_context.useFloatingWindowContext();
+	const handleRef = (0, react.useRef)(null);
+	const ctxRef = (0, react.useRef)(ctx);
+	ctxRef.current = ctx;
+	const valueNowRef = (0, react.useRef)(null);
+	const hasWidth = ctx.dimensions?.initialWidth != null || ctx.dimensions?.minWidth != null || ctx.dimensions?.maxWidth != null;
+	const hasHeight = ctx.dimensions?.initialHeight != null || ctx.dimensions?.minHeight != null || ctx.dimensions?.maxHeight != null;
+	(0, react.useEffect)(() => {
+		const handle = handleRef.current;
+		if (!handle) return;
+		const controller = new AbortController();
+		const { signal } = controller;
+		let isResizing = false;
+		let startX = 0;
+		let startY = 0;
+		let startWidth = 0;
+		let startHeight = 0;
+		const applySize = (width, height) => {
+			if (width === null && height === null) return;
+			const { dimensions, constrainToViewport, constrainOffset, onSizeChange } = ctxRef.current;
+			const root = ctxRef.current.rootRef.current;
+			if (!root) return;
+			const viewportLimits = getViewportLimits(root.getBoundingClientRect(), constrainToViewport, constrainOffset);
+			if (width !== null) {
+				const nextWidth = clampDimension(width, dimensions?.minWidth, dimensions?.maxWidth, viewportLimits.maxWidth);
+				root.style.width = `${nextWidth}px`;
+			}
+			if (height !== null) {
+				const nextHeight = clampDimension(height, dimensions?.minHeight, dimensions?.maxHeight, viewportLimits.maxHeight);
+				root.style.height = `${nextHeight}px`;
+			}
+			const resizedRect = root.getBoundingClientRect();
+			if (width !== null) {
+				valueNowRef.current = resizedRect.width;
+				handle.setAttribute("aria-valuenow", String(Math.round(resizedRect.width)));
+			}
+			onSizeChange?.({
+				width: resizedRect.width,
+				height: resizedRect.height
+			});
+		};
+		const onStart = (e) => {
+			if ("button" in e && e.button !== 0) return;
+			e.stopPropagation();
+			e.preventDefault();
+			if (!hasWidth && !hasHeight) return;
+			const root = ctxRef.current.rootRef.current;
+			if (!root) return;
+			const point = "touches" in e ? e.touches[0] : e;
+			startX = point.clientX;
+			startY = point.clientY;
+			const rect = root.getBoundingClientRect();
+			startWidth = rect.width;
+			startHeight = rect.height;
+			isResizing = true;
+			document.body.style.userSelect = "none";
+			document.body.style.webkitUserSelect = "none";
+			ctxRef.current.onResizeStart?.();
+			document.addEventListener("mousemove", onMove, { signal });
+			document.addEventListener("mouseup", onEnd, { signal });
+			document.addEventListener("touchmove", onMove, {
+				signal,
+				passive: false
+			});
+			document.addEventListener("touchend", onEnd, { signal });
+			document.addEventListener("touchcancel", onEnd, { signal });
+		};
+		const onMove = (e) => {
+			if (!isResizing) return;
+			e.preventDefault();
+			const point = "touches" in e ? e.touches[0] : e;
+			const deltaX = point.clientX - startX;
+			const deltaY = point.clientY - startY;
+			applySize(hasWidth ? startWidth + deltaX : null, hasHeight ? startHeight + deltaY : null);
+		};
+		const onEnd = () => {
+			if (!isResizing) return;
+			isResizing = false;
+			document.body.style.userSelect = "";
+			document.body.style.webkitUserSelect = "";
+			ctxRef.current.onResizeEnd?.();
+		};
+		const onKeyDown = (e) => {
+			const { dimensions } = ctxRef.current;
+			const root = ctxRef.current.rootRef.current;
+			if (!root) return;
+			const rect = root.getBoundingClientRect();
+			let newWidth = null;
+			let newHeight = null;
+			if (e.key === "ArrowRight" && hasWidth) newWidth = rect.width + KEYBOARD_STEP;
+			else if (e.key === "ArrowLeft" && hasWidth) newWidth = rect.width - KEYBOARD_STEP;
+			else if (e.key === "ArrowDown" && hasHeight) newHeight = rect.height + KEYBOARD_STEP;
+			else if (e.key === "ArrowUp" && hasHeight) newHeight = rect.height - KEYBOARD_STEP;
+			else if (e.key === "Home") {
+				if (hasWidth) newWidth = dimensions?.minWidth ?? rect.width;
+				if (hasHeight) newHeight = dimensions?.minHeight ?? rect.height;
+			} else if (e.key === "End") {
+				if (hasWidth) newWidth = dimensions?.maxWidth ?? rect.width;
+				if (hasHeight) newHeight = dimensions?.maxHeight ?? rect.height;
+			}
+			if (newWidth !== null || newHeight !== null) {
+				e.preventDefault();
+				applySize(newWidth, newHeight);
+			}
+		};
+		handle.addEventListener("mousedown", onStart, { signal });
+		handle.addEventListener("touchstart", onStart, {
+			signal,
+			passive: false
+		});
+		handle.addEventListener("keydown", onKeyDown, { signal });
+		return () => {
+			onEnd();
+			controller.abort();
+		};
+	}, [hasWidth, hasHeight]);
+	(0, react.useEffect)(() => {
+		const handle = handleRef.current;
+		if (!handle) return;
+		if (!hasWidth) {
+			valueNowRef.current = null;
+			handle.removeAttribute("aria-valuenow");
+			return;
+		}
+		if (valueNowRef.current !== null) return;
+		const initialWidth = ctx.dimensions?.initialWidth;
+		if (initialWidth == null) {
+			handle.removeAttribute("aria-valuenow");
+			return;
+		}
+		const width = clampDimension(initialWidth, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth, void 0);
+		handle.setAttribute("aria-valuenow", String(Math.round(width)));
+	}, [
+		hasWidth,
+		ctx.dimensions?.initialWidth,
+		ctx.dimensions?.minWidth,
+		ctx.dimensions?.maxWidth
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		ref: (0, _mantine_hooks.useMergedRef)(ref, handleRef),
+		role: "separator",
+		"aria-label": "Resize window",
+		"aria-valuemin": ctx.dimensions?.minWidth,
+		"aria-valuemax": ctx.dimensions?.maxWidth,
+		tabIndex: 0,
+		...others,
+		style: [{ touchAction: "none" }, style],
+		children
+	});
+});
+FloatingWindowResizeHandle.displayName = "@mantine/core/FloatingWindowResizeHandle";
+//#endregion
+exports.FloatingWindowResizeHandle = FloatingWindowResizeHandle;
+
+//# sourceMappingURL=FloatingWindowResizeHandle.cjs.map

package/cjs/components/FloatingWindow/FloatingWindowResizeHandle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWindowResizeHandle.cjs","names":["factory","useProps","useFloatingWindowContext","Box"],"sources":["../../../src/components/FloatingWindow/FloatingWindowResizeHandle.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps, factory, Factory, useProps } from '../../core';\nimport { useFloatingWindowContext } from './FloatingWindow.context';\n\nexport interface FloatingWindowResizeHandleProps extends BoxProps, ElementProps<'div', 'role'> {}\n\nexport type FloatingWindowResizeHandleFactory = Factory<{\n  props: FloatingWindowResizeHandleProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {} satisfies Partial<FloatingWindowResizeHandleProps>;\n\nconst KEYBOARD_STEP = 10;\n\nfunction clampDimension(\n  value: number,\n  min: number | undefined,\n  max: number | undefined,\n  viewportMax: number | undefined\n) {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  if (viewportMax != null) {\n    v = Math.min(v, viewportMax);\n  }\n  return v;\n}\n\nfunction getViewportLimits(\n  rect: DOMRect,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  if (!constrainToViewport) {\n    return { maxWidth: undefined, maxHeight: undefined };\n  }\n  const offset = constrainOffset ?? 0;\n  return {\n    maxWidth: window.innerWidth - rect.left - offset,\n    maxHeight: window.innerHeight - rect.top - offset,\n  };\n}\n\nexport const FloatingWindowResizeHandle = factory<FloatingWindowResizeHandleFactory>((_props) => {\n  const props = useProps('FloatingWindowResizeHandle', defaultProps, _props);\n  const { children, ref, style, ...others } = props;\n  const ctx = useFloatingWindowContext();\n  const handleRef = useRef<HTMLDivElement>(null);\n  const ctxRef = useRef(ctx);\n  ctxRef.current = ctx;\n  const valueNowRef = useRef<number | null>(null);\n\n  const hasWidth =\n    ctx.dimensions?.initialWidth != null ||\n    ctx.dimensions?.minWidth != null ||\n    ctx.dimensions?.maxWidth != null;\n  const hasHeight =\n    ctx.dimensions?.initialHeight != null ||\n    ctx.dimensions?.minHeight != null ||\n    ctx.dimensions?.maxHeight != null;\n\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) {\n      return;\n    }\n\n    const controller = new AbortController();\n    const { signal } = controller;\n    let isResizing = false;\n    let startX = 0;\n    let startY = 0;\n    let startWidth = 0;\n    let startHeight = 0;\n\n    const applySize = (width: number | null, height: number | null) => {\n      if (width === null && height === null) {\n        return;\n      }\n\n      const { dimensions, constrainToViewport, constrainOffset, onSizeChange } = ctxRef.current;\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const rect = root.getBoundingClientRect();\n      const viewportLimits = getViewportLimits(rect, constrainToViewport, constrainOffset);\n\n      if (width !== null) {\n        const nextWidth = clampDimension(\n          width,\n          dimensions?.minWidth,\n          dimensions?.maxWidth,\n          viewportLimits.maxWidth\n        );\n        root.style.width = `${nextWidth}px`;\n      }\n\n      if (height !== null) {\n        const nextHeight = clampDimension(\n          height,\n          dimensions?.minHeight,\n          dimensions?.maxHeight,\n          viewportLimits.maxHeight\n        );\n        root.style.height = `${nextHeight}px`;\n      }\n\n      const resizedRect = root.getBoundingClientRect();\n\n      if (width !== null) {\n        valueNowRef.current = resizedRect.width;\n        handle.setAttribute('aria-valuenow', String(Math.round(resizedRect.width)));\n      }\n\n      onSizeChange?.({ width: resizedRect.width, height: resizedRect.height });\n    };\n\n    const onStart = (e: MouseEvent | TouchEvent) => {\n      if ('button' in e && e.button !== 0) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      if (!hasWidth && !hasHeight) {\n        return;\n      }\n\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const point = 'touches' in e ? e.touches[0] : e;\n      startX = point.clientX;\n      startY = point.clientY;\n      const rect = root.getBoundingClientRect();\n      startWidth = rect.width;\n      startHeight = rect.height;\n      isResizing = true;\n\n      document.body.style.userSelect = 'none';\n      document.body.style.webkitUserSelect = 'none';\n\n      ctxRef.current.onResizeStart?.();\n\n      document.addEventListener('mousemove', onMove, { signal });\n      document.addEventListener('mouseup', onEnd, { signal });\n      document.addEventListener('touchmove', onMove, { signal, passive: false });\n      document.addEventListener('touchend', onEnd, { signal });\n      document.addEventListener('touchcancel', onEnd, { signal });\n    };\n\n    const onMove = (e: MouseEvent | TouchEvent) => {\n      if (!isResizing) {\n        return;\n      }\n\n      e.preventDefault();\n      const point = 'touches' in e ? e.touches[0] : e;\n      const deltaX = point.clientX - startX;\n      const deltaY = point.clientY - startY;\n      applySize(hasWidth ? startWidth + deltaX : null, hasHeight ? startHeight + deltaY : null);\n    };\n\n    const onEnd = () => {\n      if (!isResizing) {\n        return;\n      }\n\n      isResizing = false;\n      document.body.style.userSelect = '';\n      document.body.style.webkitUserSelect = '';\n      ctxRef.current.onResizeEnd?.();\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      const { dimensions } = ctxRef.current;\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const rect = root.getBoundingClientRect();\n      let newWidth: number | null = null;\n      let newHeight: number | null = null;\n\n      if (e.key === 'ArrowRight' && hasWidth) {\n        newWidth = rect.width + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowLeft' && hasWidth) {\n        newWidth = rect.width - KEYBOARD_STEP;\n      } else if (e.key === 'ArrowDown' && hasHeight) {\n        newHeight = rect.height + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowUp' && hasHeight) {\n        newHeight = rect.height - KEYBOARD_STEP;\n      } else if (e.key === 'Home') {\n        if (hasWidth) {\n          newWidth = dimensions?.minWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = dimensions?.minHeight ?? rect.height;\n        }\n      } else if (e.key === 'End') {\n        if (hasWidth) {\n          newWidth = dimensions?.maxWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = dimensions?.maxHeight ?? rect.height;\n        }\n      }\n\n      if (newWidth !== null || newHeight !== null) {\n        e.preventDefault();\n        applySize(newWidth, newHeight);\n      }\n    };\n\n    handle.addEventListener('mousedown', onStart, { signal });\n    handle.addEventListener('touchstart', onStart, { signal, passive: false });\n    handle.addEventListener('keydown', onKeyDown, { signal });\n\n    return () => {\n      onEnd();\n      controller.abort();\n    };\n  }, [hasWidth, hasHeight]);\n\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) {\n      return;\n    }\n\n    if (!hasWidth) {\n      valueNowRef.current = null;\n      handle.removeAttribute('aria-valuenow');\n      return;\n    }\n\n    if (valueNowRef.current !== null) {\n      return;\n    }\n\n    const initialWidth = ctx.dimensions?.initialWidth;\n\n    if (initialWidth == null) {\n      handle.removeAttribute('aria-valuenow');\n      return;\n    }\n\n    const width = clampDimension(\n      initialWidth,\n      ctx.dimensions?.minWidth,\n      ctx.dimensions?.maxWidth,\n      undefined\n    );\n\n    handle.setAttribute('aria-valuenow', String(Math.round(width)));\n  }, [hasWidth, ctx.dimensions?.initialWidth, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth]);\n\n  return (\n    <Box\n      ref={useMergedRef(ref, handleRef)}\n      role=\"separator\"\n      aria-label=\"Resize window\"\n      aria-valuemin={ctx.dimensions?.minWidth}\n      aria-valuemax={ctx.dimensions?.maxWidth}\n      tabIndex={0}\n      {...others}\n      style={[{ touchAction: 'none' }, style]}\n    >\n      {children}\n    </Box>\n  );\n});\n\nFloatingWindowResizeHandle.displayName = '@mantine/core/FloatingWindowResizeHandle';\n"],"mappings":"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"}