@mantine/core 9.3.0 → 9.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/cjs/components/Blockquote/Blockquote.module.cjs.map +1 -1
  2. package/cjs/components/Checkbox/Checkbox.cjs +2 -1
  3. package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
  4. package/cjs/components/Collapse/Collapse.cjs +2 -1
  5. package/cjs/components/Collapse/Collapse.cjs.map +1 -1
  6. package/cjs/components/Combobox/Combobox.cjs +1 -0
  7. package/cjs/components/Combobox/Combobox.cjs.map +1 -1
  8. package/cjs/components/Dialog/Dialog.cjs.map +1 -1
  9. package/cjs/components/HoverCard/HoverCard.cjs +1 -0
  10. package/cjs/components/HoverCard/HoverCard.cjs.map +1 -1
  11. package/cjs/components/HoverCard/HoverCard.context.cjs.map +1 -1
  12. package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs +10 -2
  13. package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs.map +1 -1
  14. package/cjs/components/HoverCard/use-hover-card.cjs +24 -0
  15. package/cjs/components/HoverCard/use-hover-card.cjs.map +1 -1
  16. package/cjs/components/Input/Input.module.cjs.map +1 -1
  17. package/cjs/components/Menu/MenuContextMenu/MenuContextMenu.cjs +4 -3
  18. package/cjs/components/Menu/MenuContextMenu/MenuContextMenu.cjs.map +1 -1
  19. package/cjs/components/Menu/MenuSub/MenuSub.cjs +16 -13
  20. package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
  21. package/cjs/components/Pagination/Pagination.icons.cjs.map +1 -1
  22. package/cjs/components/PasswordInput/PasswordInput.cjs +3 -1
  23. package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
  24. package/cjs/components/Popover/Popover.cjs +2 -1
  25. package/cjs/components/Popover/Popover.cjs.map +1 -1
  26. package/cjs/components/Popover/Popover.context.cjs.map +1 -1
  27. package/cjs/components/Popover/PopoverContextMenu/PopoverContextMenu.cjs +4 -3
  28. package/cjs/components/Popover/PopoverContextMenu/PopoverContextMenu.cjs.map +1 -1
  29. package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs +1 -0
  30. package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs.map +1 -1
  31. package/cjs/components/Popover/use-popover.cjs +23 -11
  32. package/cjs/components/Popover/use-popover.cjs.map +1 -1
  33. package/cjs/components/SegmentedControl/SegmentedControl.module.cjs.map +1 -1
  34. package/cjs/components/Slider/Thumb/Thumb.cjs.map +1 -1
  35. package/cjs/components/Splitter/Splitter.cjs +5 -3
  36. package/cjs/components/Splitter/Splitter.cjs.map +1 -1
  37. package/cjs/components/Text/Text.module.cjs.map +1 -1
  38. package/cjs/components/Textarea/Autosize.cjs +14 -0
  39. package/cjs/components/Textarea/Autosize.cjs.map +1 -1
  40. package/cjs/components/Transition/Transition.cjs +17 -10
  41. package/cjs/components/Transition/Transition.cjs.map +1 -1
  42. package/cjs/components/Tree/TreeNode.cjs +8 -1
  43. package/cjs/components/Tree/TreeNode.cjs.map +1 -1
  44. package/cjs/core/Box/Box.cjs.map +1 -1
  45. package/cjs/core/styles-api/use-styles/use-styles.cjs.map +1 -1
  46. package/cjs/utils/Floating/use-context-menu-handlers.cjs +85 -0
  47. package/cjs/utils/Floating/use-context-menu-handlers.cjs.map +1 -0
  48. package/esm/components/Blockquote/Blockquote.module.mjs.map +1 -1
  49. package/esm/components/Checkbox/Checkbox.mjs +2 -1
  50. package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
  51. package/esm/components/Collapse/Collapse.mjs +2 -1
  52. package/esm/components/Collapse/Collapse.mjs.map +1 -1
  53. package/esm/components/Combobox/Combobox.mjs +1 -0
  54. package/esm/components/Combobox/Combobox.mjs.map +1 -1
  55. package/esm/components/Dialog/Dialog.mjs.map +1 -1
  56. package/esm/components/HoverCard/HoverCard.context.mjs.map +1 -1
  57. package/esm/components/HoverCard/HoverCard.mjs +1 -0
  58. package/esm/components/HoverCard/HoverCard.mjs.map +1 -1
  59. package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs +10 -2
  60. package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs.map +1 -1
  61. package/esm/components/HoverCard/use-hover-card.mjs +24 -0
  62. package/esm/components/HoverCard/use-hover-card.mjs.map +1 -1
  63. package/esm/components/Input/Input.module.mjs.map +1 -1
  64. package/esm/components/Menu/MenuContextMenu/MenuContextMenu.mjs +4 -3
  65. package/esm/components/Menu/MenuContextMenu/MenuContextMenu.mjs.map +1 -1
  66. package/esm/components/Menu/MenuSub/MenuSub.mjs +18 -15
  67. package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
  68. package/esm/components/Pagination/Pagination.icons.mjs.map +1 -1
  69. package/esm/components/PasswordInput/PasswordInput.mjs +3 -1
  70. package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
  71. package/esm/components/Popover/Popover.context.mjs.map +1 -1
  72. package/esm/components/Popover/Popover.mjs +2 -1
  73. package/esm/components/Popover/Popover.mjs.map +1 -1
  74. package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs +4 -3
  75. package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs.map +1 -1
  76. package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs +1 -0
  77. package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs.map +1 -1
  78. package/esm/components/Popover/use-popover.mjs +23 -11
  79. package/esm/components/Popover/use-popover.mjs.map +1 -1
  80. package/esm/components/SegmentedControl/SegmentedControl.module.mjs.map +1 -1
  81. package/esm/components/Slider/Thumb/Thumb.mjs.map +1 -1
  82. package/esm/components/Splitter/Splitter.mjs +5 -3
  83. package/esm/components/Splitter/Splitter.mjs.map +1 -1
  84. package/esm/components/Text/Text.module.mjs.map +1 -1
  85. package/esm/components/Textarea/Autosize.mjs +14 -0
  86. package/esm/components/Textarea/Autosize.mjs.map +1 -1
  87. package/esm/components/Transition/Transition.mjs +17 -10
  88. package/esm/components/Transition/Transition.mjs.map +1 -1
  89. package/esm/components/Tree/TreeNode.mjs +8 -1
  90. package/esm/components/Tree/TreeNode.mjs.map +1 -1
  91. package/esm/core/Box/Box.mjs.map +1 -1
  92. package/esm/core/styles-api/use-styles/use-styles.mjs.map +1 -1
  93. package/esm/utils/Floating/use-context-menu-handlers.mjs +85 -0
  94. package/esm/utils/Floating/use-context-menu-handlers.mjs.map +1 -0
  95. package/lib/components/Collapse/Collapse.d.ts +1 -1
  96. package/lib/components/Dialog/Dialog.d.ts +1 -1
  97. package/lib/components/HoverCard/HoverCard.context.d.ts +1 -0
  98. package/lib/components/HoverCard/use-hover-card.d.ts +1 -0
  99. package/lib/components/Input/use-input-props.d.ts +3 -3
  100. package/lib/components/MaskInput/use-mask-input-props.d.ts +2 -2
  101. package/lib/components/Menu/MenuContextMenu/MenuContextMenu.d.ts +2 -0
  102. package/lib/components/Menu/MenuSub/MenuSub.d.ts +2 -0
  103. package/lib/components/Pagination/Pagination.icons.d.ts +1 -1
  104. package/lib/components/Popover/Popover.context.d.ts +1 -0
  105. package/lib/components/Popover/Popover.d.ts +7 -0
  106. package/lib/components/Popover/PopoverContextMenu/PopoverContextMenu.d.ts +2 -0
  107. package/lib/components/Slider/Thumb/Thumb.d.ts +1 -1
  108. package/lib/components/Splitter/Splitter.d.ts +2 -0
  109. package/lib/components/Transition/Transition.d.ts +8 -1
  110. package/lib/core/Box/Box.d.ts +1 -1
  111. package/lib/core/styles-api/styles-api.types.d.ts +2 -2
  112. package/lib/core/styles-api/use-styles/use-styles.d.ts +1 -1
  113. package/lib/utils/Floating/{create-context-menu-handlers.d.ts → use-context-menu-handlers.d.ts} +9 -2
  114. package/package.json +2 -2
  115. package/styles/Blockquote.css +1 -1
  116. package/styles/Blockquote.layer.css +1 -1
  117. package/styles/Input.css +1 -1
  118. package/styles/Input.layer.css +1 -1
  119. package/styles/SegmentedControl.css +4 -1
  120. package/styles/SegmentedControl.layer.css +4 -1
  121. package/styles/Text.css +1 -1
  122. package/styles/Text.layer.css +1 -1
  123. package/styles.css +7 -4
  124. package/styles.layer.css +7 -4
  125. package/cjs/utils/Floating/create-context-menu-handlers.cjs +0 -38
  126. package/cjs/utils/Floating/create-context-menu-handlers.cjs.map +0 -1
  127. package/esm/utils/Floating/create-context-menu-handlers.mjs +0 -38
  128. package/esm/utils/Floating/create-context-menu-handlers.mjs.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"MenuSub.cjs","names":["useProps","SubMenuContext","useMenuContext","useDirection","getFloatingPosition","Popover","MenuSubTarget","MenuSubDropdown","MenuSubItem"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useRef } from 'react';\nimport {\n safePolygon,\n useFloating,\n useHover,\n useInteractions,\n type SafePolygonOptions,\n} from '@floating-ui/react';\nimport { useDisclosure, useId } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n FloatingAxesOffsets,\n FloatingPosition,\n getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n children: React.ReactNode;\n\n /** Called with current state when dropdown opens or closes */\n onChange?: (opened: boolean) => void;\n\n /** Open delay in ms, applicable when hover trigger is used */\n openDelay?: number;\n\n /** Close delay in ms, applicable when hover trigger is used */\n closeDelay?: number;\n\n /** Dropdown position relative to the target element @default 'right-start' */\n position?: FloatingPosition;\n\n /** Offset of the dropdown element @default 0 */\n offset?: number | FloatingAxesOffsets;\n\n /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n transitionProps?: TransitionOverride;\n\n /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */\n safeAreaPolygon?: boolean | SafePolygonOptions;\n}\n\nconst defaultProps = {\n offset: 0,\n position: 'right-start',\n safeAreaPolygon: true,\n transitionProps: { duration: 0 },\n openDelay: 0,\n middlewares: {\n shift: {\n // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n crossAxis: true,\n },\n },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps(\n 'MenuSub',\n defaultProps,\n _props\n );\n const id = useId();\n const [opened, { open, close }] = useDisclosure(false);\n const parentSubCtx = use(SubMenuContext);\n const menuCtx = useMenuContext();\n const { dir } = useDirection();\n const resolvedPosition = getFloatingPosition(dir, position);\n\n const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n const unregisterRef = useRef<(() => void) | null>(null);\n\n const activeChildCloseRef = useRef<(() => void) | null>(null);\n const registerOpenSub = useCallback((closeFn: () => void) => {\n const prev = activeChildCloseRef.current;\n if (prev && prev !== closeFn) {\n prev();\n }\n activeChildCloseRef.current = closeFn;\n return () => {\n if (activeChildCloseRef.current === closeFn) {\n activeChildCloseRef.current = null;\n }\n };\n }, []);\n\n const handleOpen = useCallback(() => {\n unregisterRef.current = levelRegister(close);\n open();\n }, [close, levelRegister, open]);\n\n const handleClose = useCallback(() => {\n unregisterRef.current?.();\n unregisterRef.current = null;\n close();\n }, [close]);\n\n const { context, refs } = useFloating({\n placement: resolvedPosition,\n open: opened,\n onOpenChange: (nextOpen) => {\n if (nextOpen) {\n handleOpen();\n } else {\n handleClose();\n }\n },\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n handleClose: safeAreaPolygon\n ? safePolygon(typeof safeAreaPolygon === 'object' ? safeAreaPolygon : undefined)\n : undefined,\n delay: { open: openDelay, close: closeDelay },\n }),\n ]);\n\n const focusFirstItem = () =>\n window.setTimeout(() => {\n document\n .getElementById(`${id}-dropdown`)\n ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n ?.focus();\n }, 16);\n\n const focusParentItem = () =>\n window.setTimeout(() => {\n document.getElementById(`${id}-target`)?.focus();\n }, 16);\n\n return (\n <SubMenuContext\n value={{\n opened,\n close: handleClose,\n open: handleOpen,\n focusFirstItem,\n focusParentItem,\n parentContext: parentSubCtx,\n setReference: refs.setReference,\n setFloating: refs.setFloating,\n getReferenceProps,\n getFloatingProps,\n registerOpenSub,\n }}\n >\n <Popover\n opened={opened}\n withinPortal={false}\n withArrow={false}\n id={id}\n position={position}\n {...others}\n >\n {children}\n </Popover>\n </SubMenuContext>\n );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EAAE,UAAU,YAAY,WAAW,UAAU,iBAAiB,GAAG,WAAWA,kBAAAA,SAChF,WACA,cACA,MACF;CACA,MAAM,MAAA,GAAA,eAAA,OAAW;CACjB,MAAM,CAAC,QAAQ,EAAE,MAAM,YAAA,GAAA,eAAA,eAAyB,KAAK;CACrD,MAAM,gBAAA,GAAA,MAAA,KAAmBC,wBAAAA,cAAc;CACvC,MAAM,UAAUC,qBAAAA,eAAe;CAC/B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,mBAAmBC,8BAAAA,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAC/D,MAAM,iBAAA,GAAA,MAAA,QAA4C,IAAI;CAEtD,MAAM,uBAAA,GAAA,MAAA,QAAkD,IAAI;CAC5D,MAAM,mBAAA,GAAA,MAAA,cAA+B,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,cAAA,GAAA,MAAA,mBAA+B;EACnC,cAAc,UAAU,cAAc,KAAK;EAC3C,KAAK;CACP,GAAG;EAAC;EAAO;EAAe;CAAI,CAAC;CAE/B,MAAM,eAAA,GAAA,MAAA,mBAAgC;EACpC,cAAc,UAAU;EACxB,cAAc,UAAU;EACxB,MAAM;CACR,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,SAAS,UAAA,GAAA,mBAAA,aAAqB;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,sBAAA,GAAA,mBAAA,iBAAqC,EAAA,GAAA,mBAAA,UACrD,SAAS;EAChB,aAAa,mBAAA,GAAA,mBAAA,aACG,OAAO,oBAAoB,WAAW,kBAAkB,KAAA,CAAS,IAC7E,KAAA;EACJ,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,iBAAA,GAAA,kBAAA,KAACH,wBAAAA,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,KAACI,gBAAAA,SAAD;GACU;GACR,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAASC,sBAAAA;AACjB,QAAQ,WAAWC,wBAAAA;AACnB,QAAQ,OAAOC,oBAAAA"}
1
+ {"version":3,"file":"MenuSub.cjs","names":["useProps","SubMenuContext","useMenuContext","useDirection","getFloatingPosition","Popover","MenuSubTarget","MenuSubDropdown","MenuSubItem"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useEffect, useRef } from 'react';\nimport {\n safePolygon,\n useFloating,\n useHover,\n useInteractions,\n type SafePolygonOptions,\n} from '@floating-ui/react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n FloatingAxesOffsets,\n FloatingPosition,\n getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n children: React.ReactNode;\n\n /** Controlled opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?: (opened: boolean) => void;\n\n /** Open delay in ms, applicable when hover trigger is used */\n openDelay?: number;\n\n /** Close delay in ms, applicable when hover trigger is used */\n closeDelay?: number;\n\n /** Dropdown position relative to the target element @default 'right-start' */\n position?: FloatingPosition;\n\n /** Offset of the dropdown element @default 0 */\n offset?: number | FloatingAxesOffsets;\n\n /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n transitionProps?: TransitionOverride;\n\n /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */\n safeAreaPolygon?: boolean | SafePolygonOptions;\n}\n\nconst defaultProps = {\n offset: 0,\n position: 'right-start',\n safeAreaPolygon: true,\n transitionProps: { duration: 0 },\n openDelay: 0,\n middlewares: {\n shift: {\n // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n crossAxis: true,\n },\n },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n const {\n children,\n closeDelay,\n openDelay,\n position,\n safeAreaPolygon,\n opened: openedProp,\n onChange,\n ...others\n } = useProps('MenuSub', defaultProps, _props);\n const id = useId();\n const [opened, setOpened] = useUncontrolled({\n value: openedProp,\n finalValue: false,\n onChange,\n });\n const parentSubCtx = use(SubMenuContext);\n const menuCtx = useMenuContext();\n const { dir } = useDirection();\n const resolvedPosition = getFloatingPosition(dir, position);\n\n const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n\n const activeChildCloseRef = useRef<(() => void) | null>(null);\n const registerOpenSub = useCallback((closeFn: () => void) => {\n const prev = activeChildCloseRef.current;\n if (prev && prev !== closeFn) {\n prev();\n }\n activeChildCloseRef.current = closeFn;\n return () => {\n if (activeChildCloseRef.current === closeFn) {\n activeChildCloseRef.current = null;\n }\n };\n }, []);\n\n const setOpenedRef = useRef(setOpened);\n setOpenedRef.current = setOpened;\n\n const handleOpen = useCallback(() => setOpenedRef.current(true), []);\n const handleClose = useCallback(() => setOpenedRef.current(false), []);\n\n useEffect(() => {\n if (!opened) {\n return undefined;\n }\n\n return levelRegister(handleClose);\n }, [opened, levelRegister, handleClose]);\n\n const { context, refs } = useFloating({\n placement: resolvedPosition,\n open: opened,\n onOpenChange: (nextOpen) => {\n if (nextOpen) {\n handleOpen();\n } else {\n handleClose();\n }\n },\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n handleClose: safeAreaPolygon\n ? safePolygon(typeof safeAreaPolygon === 'object' ? safeAreaPolygon : undefined)\n : undefined,\n delay: { open: openDelay, close: closeDelay },\n }),\n ]);\n\n const focusFirstItem = () =>\n window.setTimeout(() => {\n document\n .getElementById(`${id}-dropdown`)\n ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n ?.focus();\n }, 16);\n\n const focusParentItem = () =>\n window.setTimeout(() => {\n document.getElementById(`${id}-target`)?.focus();\n }, 16);\n\n return (\n <SubMenuContext\n value={{\n opened,\n close: handleClose,\n open: handleOpen,\n focusFirstItem,\n focusParentItem,\n parentContext: parentSubCtx,\n setReference: refs.setReference,\n setFloating: refs.setFloating,\n getReferenceProps,\n getFloatingProps,\n registerOpenSub,\n }}\n >\n <Popover\n opened={opened}\n onChange={(nextOpened) => (nextOpened ? handleOpen() : handleClose())}\n withinPortal={false}\n withArrow={false}\n id={id}\n position={position}\n {...others}\n >\n {children}\n </Popover>\n </SubMenuContext>\n );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.icons.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.icons.tsx"],"sourcesContent":["interface _PaginationIconProps {\n path: string;\n stroke?: any;\n style?: React.CSSProperties;\n className?: string;\n children?: React.ReactNode;\n}\n\nexport type PaginationIconProps = Omit<_PaginationIconProps, 'path'>;\nexport type PaginationIcon = React.FC<PaginationIconProps>;\n\nfunction PaginationIcon({ style, children, path, ...others }: _PaginationIconProps) {\n return (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n width: 'calc(var(--pagination-control-size) / 1.8)',\n height: 'calc(var(--pagination-control-size) / 1.8)',\n ...style,\n }}\n {...others}\n >\n <path d={path} fill=\"currentColor\" />\n </svg>\n );\n}\n\nexport const PaginationNextIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n />\n);\n\nexport const PaginationPreviousIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n />\n);\n\nexport const PaginationFirstIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n />\n);\n\nexport const PaginationLastIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n />\n);\n\nexport const PaginationDotsIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n />\n);\n"],"mappings":";;;AAWA,SAAS,eAAe,EAAE,OAAO,UAAU,MAAM,GAAG,UAAgC;CAClF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,SAAQ;EACR,OAAM;EACN,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,GAAG;GAAM,MAAK;EAAgB,CAAA;CACjC,CAAA;AAET;AAEA,MAAa,sBAAsB,UACjC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,0BAA0B,UACrC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,uBAAuB,UAClC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,sBAAsB,UACjC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,sBAAsB,UACjC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA"}
1
+ {"version":3,"file":"Pagination.icons.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.icons.tsx"],"sourcesContent":["interface _PaginationIconProps {\n path: string;\n stroke?: any;\n style?: React.CSSProperties;\n className?: string | undefined;\n children?: React.ReactNode;\n}\n\nexport type PaginationIconProps = Omit<_PaginationIconProps, 'path'>;\nexport type PaginationIcon = React.FC<PaginationIconProps>;\n\nfunction PaginationIcon({ style, children, path, ...others }: _PaginationIconProps) {\n return (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n width: 'calc(var(--pagination-control-size) / 1.8)',\n height: 'calc(var(--pagination-control-size) / 1.8)',\n ...style,\n }}\n {...others}\n >\n <path d={path} fill=\"currentColor\" />\n </svg>\n );\n}\n\nexport const PaginationNextIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n />\n);\n\nexport const PaginationPreviousIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n />\n);\n\nexport const PaginationFirstIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n />\n);\n\nexport const PaginationLastIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n />\n);\n\nexport const PaginationDotsIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n />\n);\n"],"mappings":";;;AAWA,SAAS,eAAe,EAAE,OAAO,UAAU,MAAM,GAAG,UAAgC;CAClF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,SAAQ;EACR,OAAM;EACN,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,GAAG;GAAM,MAAK;EAAgB,CAAA;CACjC,CAAA;AAET;AAEA,MAAa,sBAAsB,UACjC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,0BAA0B,UACrC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,uBAAuB,UAClC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,sBAAsB,UACjC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,sBAAsB,UACjC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA"}
@@ -31,7 +31,7 @@ const PasswordInput = require_factory.factory((_props) => {
31
31
  "InputWrapper",
32
32
  "PasswordInput"
33
33
  ], defaultProps, _props);
34
- const { classNames, className, style, styles, unstyled, vars, required, error, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, mod, attributes, ...others } = props;
34
+ const { classNames, className, style, styles, unstyled, vars, required, error, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, mod, attributes, dir, ...others } = props;
35
35
  const uuid = (0, _mantine_hooks.useId)(id);
36
36
  const [_visible, setVisibility] = (0, _mantine_hooks.useUncontrolled)({
37
37
  value: visible,
@@ -128,6 +128,7 @@ const PasswordInput = require_factory.factory((_props) => {
128
128
  ...wrapperProps,
129
129
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
130
130
  component: "div",
131
+ dir,
131
132
  error,
132
133
  leftSection,
133
134
  size,
@@ -159,6 +160,7 @@ const PasswordInput = require_factory.factory((_props) => {
159
160
  ...getStyles("innerInput"),
160
161
  disabled,
161
162
  id: uuid,
163
+ dir,
162
164
  ...rest,
163
165
  "aria-describedby": describedBy,
164
166
  autoComplete: rest.autoComplete || "off",
@@ -1 +1 @@
1
- {"version":3,"file":"PasswordInput.cjs","names":["PasswordToggleIcon","createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","extractStyleProps","ActionIcon","Input","classes","InputBase"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n | 'root'\n | 'visibilityToggle'\n | 'innerInput'\n | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n extends\n BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n StylesApiProps<PasswordInputFactory>,\n ElementProps<'input', 'size'> {\n /** A component to replace the visibility toggle icon */\n visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n /** Props passed down to the visibility toggle button */\n visibilityToggleButtonProps?: Record<string, any>;\n\n /** If set, the input value is visible */\n visible?: boolean;\n\n /** If set, the input value is visible by default */\n defaultVisible?: boolean;\n\n /** Called when visibility changes */\n onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n props: PasswordInputProps;\n ref: HTMLInputElement;\n stylesNames: PasswordInputStylesNames;\n vars: PasswordInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n visibilityToggleIcon: PasswordToggleIcon,\n size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n root: {\n '--psi-icon-size': getSize(size, 'psi-icon-size'),\n '--psi-button-size': getSize(size, 'psi-button-size'),\n },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n required,\n error,\n leftSection,\n disabled,\n id,\n variant,\n inputContainer,\n description,\n label,\n size,\n errorProps,\n descriptionProps,\n labelProps,\n withAsterisk,\n inputWrapperOrder,\n wrapperProps,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n leftSectionWidth,\n visible,\n defaultVisible,\n onVisibilityChange,\n visibilityToggleIcon: VisibilityToggleIcon,\n visibilityToggleButtonProps,\n rightSectionProps,\n leftSectionProps,\n leftSectionPointerEvents,\n withErrorStyles,\n mod,\n attributes,\n ...others\n } = props;\n\n const uuid = useId(id);\n\n const [_visible, setVisibility] = useUncontrolled({\n value: visible,\n defaultValue: defaultVisible,\n finalValue: false,\n onChange: onVisibilityChange,\n });\n\n const toggleVisibility = () => setVisibility(!_visible);\n\n const getStyles = useStyles<PasswordInputFactory>({\n name: 'PasswordInput',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const errorId = errorProps?.id || `${uuid}-error`;\n const descriptionId = descriptionProps?.id || `${uuid}-description`;\n const hasError = !!error && typeof error !== 'boolean';\n const hasDescription = !!description;\n const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n const visibilityToggleButton = (\n <ActionIcon<'button'>\n {...getStyles('visibilityToggle')}\n disabled={disabled}\n radius={radius}\n aria-pressed={_visible}\n tabIndex={-1}\n aria-label=\"Toggle password visibility\"\n {...visibilityToggleButtonProps}\n variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n color=\"gray\"\n unstyled={unstyled}\n onTouchEnd={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onTouchEnd?.(event);\n toggleVisibility();\n }}\n onMouseDown={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onMouseDown?.(event);\n toggleVisibility();\n }}\n onKeyDown={(event) => {\n visibilityToggleButtonProps?.onKeyDown?.(event);\n if (event.key === ' ') {\n event.preventDefault();\n toggleVisibility();\n }\n }}\n >\n <VisibilityToggleIcon reveal={_visible} />\n </ActionIcon>\n );\n\n return (\n <Input.Wrapper\n required={required}\n id={uuid}\n label={label}\n error={error}\n description={description}\n size={size}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n unstyled={unstyled}\n withAsterisk={withAsterisk}\n inputWrapperOrder={inputWrapperOrder}\n inputContainer={inputContainer}\n variant={variant}\n labelProps={{ ...labelProps, htmlFor: uuid }}\n descriptionProps={{ ...descriptionProps, id: descriptionId }}\n errorProps={{ ...errorProps, id: errorId }}\n mod={mod}\n attributes={attributes}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <Input\n component=\"div\"\n error={error}\n leftSection={leftSection}\n size={size}\n classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n styles={resolvedStyles}\n radius={radius}\n disabled={disabled}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n rightSectionWidth={rightSectionWidth}\n rightSection={rightSection ?? visibilityToggleButton}\n variant={variant}\n unstyled={unstyled}\n leftSectionWidth={leftSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n rightSectionProps={rightSectionProps}\n leftSectionProps={leftSectionProps}\n leftSectionPointerEvents={leftSectionPointerEvents}\n withAria={false}\n withErrorStyles={withErrorStyles}\n attributes={attributes}\n >\n <input\n required={required}\n data-invalid={!!error || undefined}\n data-with-left-section={!!leftSection || undefined}\n {...getStyles('innerInput')}\n disabled={disabled}\n id={uuid}\n {...rest}\n aria-describedby={describedBy}\n autoComplete={rest.autoComplete || 'off'}\n type={_visible ? 'text' : 'password'}\n />\n </Input>\n </Input.Wrapper>\n );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n export type Props = PasswordInputProps;\n export type StylesNames = PasswordInputStylesNames;\n export type CssVariables = PasswordInputCssVariables;\n export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"PasswordInput.cjs","names":["PasswordToggleIcon","createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","extractStyleProps","ActionIcon","Input","classes","InputBase"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n | 'root'\n | 'visibilityToggle'\n | 'innerInput'\n | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n extends\n BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n StylesApiProps<PasswordInputFactory>,\n ElementProps<'input', 'size'> {\n /** A component to replace the visibility toggle icon */\n visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n /** Props passed down to the visibility toggle button */\n visibilityToggleButtonProps?: Record<string, any>;\n\n /** If set, the input value is visible */\n visible?: boolean;\n\n /** If set, the input value is visible by default */\n defaultVisible?: boolean;\n\n /** Called when visibility changes */\n onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n props: PasswordInputProps;\n ref: HTMLInputElement;\n stylesNames: PasswordInputStylesNames;\n vars: PasswordInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n visibilityToggleIcon: PasswordToggleIcon,\n size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n root: {\n '--psi-icon-size': getSize(size, 'psi-icon-size'),\n '--psi-button-size': getSize(size, 'psi-button-size'),\n },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n required,\n error,\n leftSection,\n disabled,\n id,\n variant,\n inputContainer,\n description,\n label,\n size,\n errorProps,\n descriptionProps,\n labelProps,\n withAsterisk,\n inputWrapperOrder,\n wrapperProps,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n leftSectionWidth,\n visible,\n defaultVisible,\n onVisibilityChange,\n visibilityToggleIcon: VisibilityToggleIcon,\n visibilityToggleButtonProps,\n rightSectionProps,\n leftSectionProps,\n leftSectionPointerEvents,\n withErrorStyles,\n mod,\n attributes,\n dir,\n ...others\n } = props;\n\n const uuid = useId(id);\n\n const [_visible, setVisibility] = useUncontrolled({\n value: visible,\n defaultValue: defaultVisible,\n finalValue: false,\n onChange: onVisibilityChange,\n });\n\n const toggleVisibility = () => setVisibility(!_visible);\n\n const getStyles = useStyles<PasswordInputFactory>({\n name: 'PasswordInput',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const errorId = errorProps?.id || `${uuid}-error`;\n const descriptionId = descriptionProps?.id || `${uuid}-description`;\n const hasError = !!error && typeof error !== 'boolean';\n const hasDescription = !!description;\n const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n const visibilityToggleButton = (\n <ActionIcon<'button'>\n {...getStyles('visibilityToggle')}\n disabled={disabled}\n radius={radius}\n aria-pressed={_visible}\n tabIndex={-1}\n aria-label=\"Toggle password visibility\"\n {...visibilityToggleButtonProps}\n variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n color=\"gray\"\n unstyled={unstyled}\n onTouchEnd={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onTouchEnd?.(event);\n toggleVisibility();\n }}\n onMouseDown={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onMouseDown?.(event);\n toggleVisibility();\n }}\n onKeyDown={(event) => {\n visibilityToggleButtonProps?.onKeyDown?.(event);\n if (event.key === ' ') {\n event.preventDefault();\n toggleVisibility();\n }\n }}\n >\n <VisibilityToggleIcon reveal={_visible} />\n </ActionIcon>\n );\n\n return (\n <Input.Wrapper\n required={required}\n id={uuid}\n label={label}\n error={error}\n description={description}\n size={size}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n unstyled={unstyled}\n withAsterisk={withAsterisk}\n inputWrapperOrder={inputWrapperOrder}\n inputContainer={inputContainer}\n variant={variant}\n labelProps={{ ...labelProps, htmlFor: uuid }}\n descriptionProps={{ ...descriptionProps, id: descriptionId }}\n errorProps={{ ...errorProps, id: errorId }}\n mod={mod}\n attributes={attributes}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <Input\n component=\"div\"\n dir={dir}\n error={error}\n leftSection={leftSection}\n size={size}\n classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n styles={resolvedStyles}\n radius={radius}\n disabled={disabled}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n rightSectionWidth={rightSectionWidth}\n rightSection={rightSection ?? visibilityToggleButton}\n variant={variant}\n unstyled={unstyled}\n leftSectionWidth={leftSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n rightSectionProps={rightSectionProps}\n leftSectionProps={leftSectionProps}\n leftSectionPointerEvents={leftSectionPointerEvents}\n withAria={false}\n withErrorStyles={withErrorStyles}\n attributes={attributes}\n >\n <input\n required={required}\n data-invalid={!!error || undefined}\n data-with-left-section={!!leftSection || undefined}\n {...getStyles('innerInput')}\n disabled={disabled}\n id={uuid}\n dir={dir}\n {...rest}\n aria-describedby={describedBy}\n autoComplete={rest.autoComplete || 'off'}\n type={_visible ? 'text' : 'password'}\n />\n </Input>\n </Input.Wrapper>\n );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n export type Props = PasswordInputProps;\n export type StylesNames = PasswordInputStylesNames;\n export type CssVariables = PasswordInputCssVariables;\n export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}
@@ -57,7 +57,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((_, { radiu
57
57
  } }));
58
58
  function Popover(_props) {
59
59
  const props = require_use_props.useProps("Popover", defaultProps, _props);
60
- const { children, position, offset, onPositionChange, opened, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, width, middlewares, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, unstyled, classNames, styles, closeOnClickOutside, withinPortal, portalProps, closeOnEscape, clickOutsideEvents, trapFocus, onClose, onDismiss, onOpen, onChange, zIndex, radius, shadow, id, defaultOpened, __staticSelector, withRoles, disabled, returnFocus, variant, keepMounted, vars, floatingStrategy, withOverlay, overlayProps, hideDetached, attributes, preventPositionChangeWhenVisible, ...others } = props;
60
+ const { children, position, offset, onPositionChange, opened, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, width, middlewares, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, unstyled, classNames, styles, closeOnClickOutside, withinPortal, portalProps, closeOnEscape, clickOutsideEvents, trapFocus, onClose, onDismiss, onOpen, onChange, zIndex, radius, shadow, id, defaultOpened, __staticSelector, withRoles, disabled, returnFocus, variant, keepMounted, keepMountedMode, vars, floatingStrategy, withOverlay, overlayProps, hideDetached, attributes, preventPositionChangeWhenVisible, ...others } = props;
61
61
  const getStyles = require_use_styles.useStyles({
62
62
  name: __staticSelector,
63
63
  props,
@@ -172,6 +172,7 @@ function Popover(_props) {
172
172
  unstyled,
173
173
  variant,
174
174
  keepMounted,
175
+ keepMountedMode,
175
176
  getStyles,
176
177
  resolvedStyles,
177
178
  floatingStrategy,
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","getShadow","useProps","useStyles","useResolvedStylesApi","useDirection","useMantineEnv","usePopover","getFloatingPosition","PopoverContextProvider","Transition","OptionalPortal","Overlay","PopoverTarget","PopoverDropdown","PopoverContextMenu"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n createVarsResolver,\n ElementProps,\n ExtendComponent,\n Factory,\n getDefaultZIndex,\n getRadius,\n getShadow,\n MantineRadius,\n MantineShadow,\n StylesApiProps,\n useDirection,\n useMantineEnv,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport {\n PopoverContextMenu,\n PopoverContextMenuProps,\n} from './PopoverContextMenu/PopoverContextMenu';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n /** Dropdown position relative to the target element @default 'bottom' */\n position?: FloatingPosition;\n\n /** Offset of the dropdown element @default 8 */\n offset?: number | FloatingAxesOffsets;\n\n /** Called when dropdown position changes */\n onPositionChange?: (position: FloatingPosition) => void;\n\n /** Called when dropdown closes */\n onClose?: () => void;\n\n /** Called when the popover is dismissed by clicking outside or by pressing escape */\n onDismiss?: () => void;\n\n /** Called when dropdown opens */\n onOpen?: () => void;\n\n /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n keepMounted?: boolean;\n\n /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Called when exit transition ends */\n onExitTransitionEnd?: () => void;\n\n /** Called when enter transition ends */\n onEnterTransitionEnd?: () => void;\n\n /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n width?: PopoverWidth;\n\n /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n middlewares?: PopoverMiddlewares;\n\n /** Determines whether component should have an arrow @default false */\n withArrow?: boolean;\n\n /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n withOverlay?: boolean;\n\n /** Props passed down to `Overlay` component */\n overlayProps?: OverlayProps & ElementProps<'div'>;\n\n /** Arrow size in px @default 7 */\n arrowSize?: number;\n\n /** Arrow offset in px @default 5 */\n arrowOffset?: number;\n\n /** Arrow `border-radius` in px @default 0 */\n arrowRadius?: number;\n\n /** Arrow position */\n arrowPosition?: ArrowPosition;\n\n /** Determines whether dropdown should be rendered within the `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props to pass down to the `Portal` when `withinPortal` is true */\n portalProps?: BasePortalProps;\n\n /** Dropdown `z-index` @default 300 */\n zIndex?: string | number;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n shadow?: MantineShadow;\n\n /** If set, popover dropdown will not be rendered */\n disabled?: boolean;\n\n /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n returnFocus?: boolean;\n\n /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n floatingStrategy?: FloatingStrategy;\n\n /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n hideDetached?: boolean;\n\n /** If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. @default true */\n preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n __staticSelector?: string;\n\n /** `Popover.Target` and `Popover.Dropdown` components */\n children?: React.ReactNode;\n\n /** Initial opened state for uncontrolled component */\n defaultOpened?: boolean;\n\n /** Controlled dropdown opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?: (opened: boolean) => void;\n\n /** Determines whether dropdown should be closed on outside clicks @default true */\n closeOnClickOutside?: boolean;\n\n /** Events that trigger outside clicks */\n clickOutsideEvents?: string[];\n\n /** Determines whether focus should be trapped within dropdown @default false */\n trapFocus?: boolean;\n\n /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n closeOnEscape?: boolean;\n\n /** Id base to create accessibility connections */\n id?: string;\n\n /** Determines whether dropdown and target elements should have accessible roles @default true */\n withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n props: PopoverProps;\n stylesNames: PopoverStylesNames;\n vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n position: 'bottom',\n offset: 8,\n transitionProps: { transition: 'fade', duration: 150 },\n middlewares: { flip: true, shift: true, inline: false },\n arrowSize: 7,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n closeOnClickOutside: true,\n withinPortal: true,\n closeOnEscape: true,\n trapFocus: false,\n withRoles: true,\n returnFocus: false,\n withOverlay: false,\n hideDetached: true,\n preventPositionChangeWhenVisible: true,\n clickOutsideEvents: ['mousedown', 'touchstart'],\n zIndex: getDefaultZIndex('popover'),\n __staticSelector: 'Popover',\n width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n dropdown: {\n '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n '--popover-shadow': getShadow(shadow),\n },\n}));\n\nexport function Popover(_props: PopoverProps) {\n const props = useProps('Popover', defaultProps, _props);\n const {\n children,\n position,\n offset,\n onPositionChange,\n opened,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n width,\n middlewares,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n unstyled,\n classNames,\n styles,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n closeOnEscape,\n clickOutsideEvents,\n trapFocus,\n onClose,\n onDismiss,\n onOpen,\n onChange,\n zIndex,\n radius,\n shadow,\n id,\n defaultOpened,\n __staticSelector,\n withRoles,\n disabled,\n returnFocus,\n variant,\n keepMounted,\n vars,\n floatingStrategy,\n withOverlay,\n overlayProps,\n hideDetached,\n attributes,\n preventPositionChangeWhenVisible,\n ...others\n } = props;\n\n const getStyles = useStyles<PopoverFactory>({\n name: __staticSelector,\n props,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'dropdown',\n vars,\n varsResolver,\n });\n\n const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n const { dir } = useDirection();\n const env = useMantineEnv();\n\n const uid = useId(id);\n const popover = usePopover({\n middlewares,\n width,\n position: getFloatingPosition(dir, position),\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n arrowRef,\n arrowOffset,\n onPositionChange,\n opened,\n defaultOpened,\n onChange,\n onOpen,\n onClose,\n onDismiss,\n strategy: floatingStrategy,\n disabled,\n preventPositionChangeWhenVisible,\n keepMounted,\n });\n\n useClickOutside(\n () => {\n if (closeOnClickOutside) {\n popover.onClose();\n onDismiss?.();\n }\n },\n clickOutsideEvents,\n [targetNode, dropdownNode]\n );\n\n const reference = useCallback(\n (node: HTMLElement) => {\n setTargetNode(node);\n popover.floating.refs.setReference(node);\n },\n [popover.floating.refs.setReference]\n );\n\n const floating = useCallback(\n (node: HTMLElement) => {\n setDropdownNode(node);\n popover.floating.refs.setFloating(node);\n },\n [popover.floating.refs.setFloating]\n );\n\n const onExited = useCallback(() => {\n transitionProps?.onExited?.();\n onExitTransitionEnd?.();\n popover.resetLockedPlacement();\n }, [transitionProps?.onExited, onExitTransitionEnd, popover.resetLockedPlacement]);\n\n const onEntered = useCallback(() => {\n transitionProps?.onEntered?.();\n onEnterTransitionEnd?.();\n }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n return (\n <PopoverContextProvider\n value={{\n returnFocus,\n disabled,\n controlled: popover.controlled,\n reference,\n floating,\n x: popover.floating.x,\n y: popover.floating.y,\n arrowX: popover.floating?.middlewareData?.arrow?.x,\n arrowY: popover.floating?.middlewareData?.arrow?.y,\n opened: popover.opened,\n arrowRef,\n transitionProps: { ...transitionProps, onExited, onEntered },\n width,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n placement: popover.floating.placement,\n trapFocus,\n withinPortal,\n portalProps,\n zIndex,\n radius,\n shadow,\n closeOnEscape,\n onDismiss,\n onClose: popover.onClose,\n onToggle: popover.onToggle,\n getTargetId: () => uid,\n getDropdownId: () => `${uid}-dropdown`,\n withRoles,\n targetProps: others,\n __staticSelector,\n classNames,\n styles,\n unstyled,\n variant,\n keepMounted,\n getStyles,\n resolvedStyles,\n floatingStrategy,\n referenceHidden:\n hideDetached && env !== 'test'\n ? popover.floating.middlewareData.hide?.referenceHidden\n : false,\n }}\n >\n {children}\n {withOverlay && (\n <Transition\n transition=\"fade\"\n mounted={popover.opened}\n duration={transitionProps?.duration || 250}\n exitDuration={transitionProps?.exitDuration || 250}\n >\n {(transitionStyles) => (\n <OptionalPortal withinPortal={withinPortal}>\n <Overlay\n {...overlayProps}\n {...getStyles('overlay', {\n className: overlayProps?.className,\n style: [transitionStyles, overlayProps?.style],\n })}\n />\n </OptionalPortal>\n )}\n </Transition>\n )}\n </PopoverContextProvider>\n );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.ContextMenu = PopoverContextMenu;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n Extended.extend = Popover.extend;\n Extended.displayName = `WithProps(${Popover.displayName})`;\n return Extended;\n};\n\nexport namespace Popover {\n export type Props = PopoverProps;\n export type __Props = __PopoverProps;\n export type Factory = PopoverFactory;\n export type StylesNames = PopoverStylesNames;\n export type TargetProps = PopoverTargetProps;\n export type DropdownProps = PopoverDropdownProps;\n export type Width = PopoverWidth;\n export type ContextValue = PopoverContextValue;\n\n export namespace Target {\n export type Props = PopoverTargetProps;\n }\n\n export namespace Dropdown {\n export type Props = PopoverDropdownProps;\n }\n\n export namespace ContextMenu {\n export type Props = PopoverContextMenuProps;\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"Popover.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","getShadow","useProps","useStyles","useResolvedStylesApi","useDirection","useMantineEnv","usePopover","getFloatingPosition","PopoverContextProvider","Transition","OptionalPortal","Overlay","PopoverTarget","PopoverDropdown","PopoverContextMenu"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n createVarsResolver,\n ElementProps,\n ExtendComponent,\n Factory,\n getDefaultZIndex,\n getRadius,\n getShadow,\n MantineRadius,\n MantineShadow,\n StylesApiProps,\n useDirection,\n useMantineEnv,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport {\n PopoverContextMenu,\n PopoverContextMenuProps,\n} from './PopoverContextMenu/PopoverContextMenu';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n /** Dropdown position relative to the target element @default 'bottom' */\n position?: FloatingPosition;\n\n /** Offset of the dropdown element @default 8 */\n offset?: number | FloatingAxesOffsets;\n\n /** Called when dropdown position changes */\n onPositionChange?: (position: FloatingPosition) => void;\n\n /** Called when dropdown closes */\n onClose?: () => void;\n\n /** Called when the popover is dismissed by clicking outside or by pressing escape */\n onDismiss?: () => void;\n\n /** Called when dropdown opens */\n onOpen?: () => void;\n\n /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n keepMounted?: boolean;\n\n /**\n * Controls how the dropdown is hidden when `keepMounted` is set:\n * `'activity'` – hidden with React 19 `Activity` component,\n * `'display-none'` – hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\n\n /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Called when exit transition ends */\n onExitTransitionEnd?: () => void;\n\n /** Called when enter transition ends */\n onEnterTransitionEnd?: () => void;\n\n /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n width?: PopoverWidth;\n\n /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n middlewares?: PopoverMiddlewares;\n\n /** Determines whether component should have an arrow @default false */\n withArrow?: boolean;\n\n /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n withOverlay?: boolean;\n\n /** Props passed down to `Overlay` component */\n overlayProps?: OverlayProps & ElementProps<'div'>;\n\n /** Arrow size in px @default 7 */\n arrowSize?: number;\n\n /** Arrow offset in px @default 5 */\n arrowOffset?: number;\n\n /** Arrow `border-radius` in px @default 0 */\n arrowRadius?: number;\n\n /** Arrow position */\n arrowPosition?: ArrowPosition;\n\n /** Determines whether dropdown should be rendered within the `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props to pass down to the `Portal` when `withinPortal` is true */\n portalProps?: BasePortalProps;\n\n /** Dropdown `z-index` @default 300 */\n zIndex?: string | number;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n shadow?: MantineShadow;\n\n /** If set, popover dropdown will not be rendered */\n disabled?: boolean;\n\n /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n returnFocus?: boolean;\n\n /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n floatingStrategy?: FloatingStrategy;\n\n /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n hideDetached?: boolean;\n\n /** If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. @default true */\n preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n __staticSelector?: string;\n\n /** `Popover.Target` and `Popover.Dropdown` components */\n children?: React.ReactNode;\n\n /** Initial opened state for uncontrolled component */\n defaultOpened?: boolean;\n\n /** Controlled dropdown opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?: (opened: boolean) => void;\n\n /** Determines whether dropdown should be closed on outside clicks @default true */\n closeOnClickOutside?: boolean;\n\n /** Events that trigger outside clicks */\n clickOutsideEvents?: string[];\n\n /** Determines whether focus should be trapped within dropdown @default false */\n trapFocus?: boolean;\n\n /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n closeOnEscape?: boolean;\n\n /** Id base to create accessibility connections */\n id?: string;\n\n /** Determines whether dropdown and target elements should have accessible roles @default true */\n withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n props: PopoverProps;\n stylesNames: PopoverStylesNames;\n vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n position: 'bottom',\n offset: 8,\n transitionProps: { transition: 'fade', duration: 150 },\n middlewares: { flip: true, shift: true, inline: false },\n arrowSize: 7,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n closeOnClickOutside: true,\n withinPortal: true,\n closeOnEscape: true,\n trapFocus: false,\n withRoles: true,\n returnFocus: false,\n withOverlay: false,\n hideDetached: true,\n preventPositionChangeWhenVisible: true,\n clickOutsideEvents: ['mousedown', 'touchstart'],\n zIndex: getDefaultZIndex('popover'),\n __staticSelector: 'Popover',\n width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n dropdown: {\n '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n '--popover-shadow': getShadow(shadow),\n },\n}));\n\nexport function Popover(_props: PopoverProps) {\n const props = useProps('Popover', defaultProps, _props);\n const {\n children,\n position,\n offset,\n onPositionChange,\n opened,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n width,\n middlewares,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n unstyled,\n classNames,\n styles,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n closeOnEscape,\n clickOutsideEvents,\n trapFocus,\n onClose,\n onDismiss,\n onOpen,\n onChange,\n zIndex,\n radius,\n shadow,\n id,\n defaultOpened,\n __staticSelector,\n withRoles,\n disabled,\n returnFocus,\n variant,\n keepMounted,\n keepMountedMode,\n vars,\n floatingStrategy,\n withOverlay,\n overlayProps,\n hideDetached,\n attributes,\n preventPositionChangeWhenVisible,\n ...others\n } = props;\n\n const getStyles = useStyles<PopoverFactory>({\n name: __staticSelector,\n props,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'dropdown',\n vars,\n varsResolver,\n });\n\n const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n const { dir } = useDirection();\n const env = useMantineEnv();\n\n const uid = useId(id);\n const popover = usePopover({\n middlewares,\n width,\n position: getFloatingPosition(dir, position),\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n arrowRef,\n arrowOffset,\n onPositionChange,\n opened,\n defaultOpened,\n onChange,\n onOpen,\n onClose,\n onDismiss,\n strategy: floatingStrategy,\n disabled,\n preventPositionChangeWhenVisible,\n keepMounted,\n });\n\n useClickOutside(\n () => {\n if (closeOnClickOutside) {\n popover.onClose();\n onDismiss?.();\n }\n },\n clickOutsideEvents,\n [targetNode, dropdownNode]\n );\n\n const reference = useCallback(\n (node: HTMLElement) => {\n setTargetNode(node);\n popover.floating.refs.setReference(node);\n },\n [popover.floating.refs.setReference]\n );\n\n const floating = useCallback(\n (node: HTMLElement) => {\n setDropdownNode(node);\n popover.floating.refs.setFloating(node);\n },\n [popover.floating.refs.setFloating]\n );\n\n const onExited = useCallback(() => {\n transitionProps?.onExited?.();\n onExitTransitionEnd?.();\n popover.resetLockedPlacement();\n }, [transitionProps?.onExited, onExitTransitionEnd, popover.resetLockedPlacement]);\n\n const onEntered = useCallback(() => {\n transitionProps?.onEntered?.();\n onEnterTransitionEnd?.();\n }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n return (\n <PopoverContextProvider\n value={{\n returnFocus,\n disabled,\n controlled: popover.controlled,\n reference,\n floating,\n x: popover.floating.x,\n y: popover.floating.y,\n arrowX: popover.floating?.middlewareData?.arrow?.x,\n arrowY: popover.floating?.middlewareData?.arrow?.y,\n opened: popover.opened,\n arrowRef,\n transitionProps: { ...transitionProps, onExited, onEntered },\n width,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n placement: popover.floating.placement,\n trapFocus,\n withinPortal,\n portalProps,\n zIndex,\n radius,\n shadow,\n closeOnEscape,\n onDismiss,\n onClose: popover.onClose,\n onToggle: popover.onToggle,\n getTargetId: () => uid,\n getDropdownId: () => `${uid}-dropdown`,\n withRoles,\n targetProps: others,\n __staticSelector,\n classNames,\n styles,\n unstyled,\n variant,\n keepMounted,\n keepMountedMode,\n getStyles,\n resolvedStyles,\n floatingStrategy,\n referenceHidden:\n hideDetached && env !== 'test'\n ? popover.floating.middlewareData.hide?.referenceHidden\n : false,\n }}\n >\n {children}\n {withOverlay && (\n <Transition\n transition=\"fade\"\n mounted={popover.opened}\n duration={transitionProps?.duration || 250}\n exitDuration={transitionProps?.exitDuration || 250}\n >\n {(transitionStyles) => (\n <OptionalPortal withinPortal={withinPortal}>\n <Overlay\n {...overlayProps}\n {...getStyles('overlay', {\n className: overlayProps?.className,\n style: [transitionStyles, overlayProps?.style],\n })}\n />\n </OptionalPortal>\n )}\n </Transition>\n )}\n </PopoverContextProvider>\n );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.ContextMenu = PopoverContextMenu;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n Extended.extend = Popover.extend;\n Extended.displayName = `WithProps(${Popover.displayName})`;\n return Extended;\n};\n\nexport namespace Popover {\n export type Props = PopoverProps;\n export type __Props = __PopoverProps;\n export type Factory = PopoverFactory;\n export type StylesNames = PopoverStylesNames;\n export type TargetProps = PopoverTargetProps;\n export type DropdownProps = PopoverDropdownProps;\n export type Width = PopoverWidth;\n export type ContextValue = PopoverContextValue;\n\n export namespace Target {\n export type Props = PopoverTargetProps;\n }\n\n export namespace Dropdown {\n export type Props = PopoverDropdownProps;\n }\n\n export namespace ContextMenu {\n export type Props = PopoverContextMenuProps;\n }\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n ClassNames,\n createSafeContext,\n GetStylesApi,\n MantineRadius,\n MantineShadow,\n Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n x: number;\n y: number;\n arrowX: number | undefined;\n arrowY: number | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n opened: boolean;\n transitionProps?: TransitionOverride;\n reference: (node: HTMLElement) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean | undefined;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n trapFocus: boolean | undefined;\n placement: FloatingPosition;\n withinPortal: boolean | undefined;\n portalProps?: BasePortalProps;\n closeOnEscape: boolean | undefined;\n zIndex: string | number | undefined;\n radius?: MantineRadius | undefined;\n shadow?: MantineShadow | undefined;\n onClose?: () => void;\n onDismiss?: () => void;\n getDropdownId: () => string;\n getTargetId: () => string;\n controlled: boolean;\n onToggle: () => void;\n withRoles: boolean | undefined;\n targetProps: Record<string, any>;\n disabled: boolean | undefined;\n returnFocus: boolean | undefined;\n classNames: ClassNames<PopoverFactory> | undefined;\n styles: Styles<PopoverFactory> | undefined;\n unstyled: boolean | undefined;\n __staticSelector: string;\n variant: string | undefined;\n keepMounted: boolean | undefined;\n getStyles: GetStylesApi<PopoverFactory>;\n resolvedStyles: Record<string, any> | undefined;\n floatingStrategy: FloatingStrategy | undefined;\n referenceHidden: boolean | undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n 'Popover component was not found in the tree'\n);\n"],"mappings":";;AA4DA,MAAa,CAAC,wBAAwB,2FAAqBA,EAAAA,kBACzD,6CACF"}
1
+ {"version":3,"file":"Popover.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n ClassNames,\n createSafeContext,\n GetStylesApi,\n MantineRadius,\n MantineShadow,\n Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n x: number;\n y: number;\n arrowX: number | undefined;\n arrowY: number | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n opened: boolean;\n transitionProps?: TransitionOverride;\n reference: (node: HTMLElement) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean | undefined;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n trapFocus: boolean | undefined;\n placement: FloatingPosition;\n withinPortal: boolean | undefined;\n portalProps?: BasePortalProps;\n closeOnEscape: boolean | undefined;\n zIndex: string | number | undefined;\n radius?: MantineRadius | undefined;\n shadow?: MantineShadow | undefined;\n onClose?: () => void;\n onDismiss?: () => void;\n getDropdownId: () => string;\n getTargetId: () => string;\n controlled: boolean;\n onToggle: () => void;\n withRoles: boolean | undefined;\n targetProps: Record<string, any>;\n disabled: boolean | undefined;\n returnFocus: boolean | undefined;\n classNames: ClassNames<PopoverFactory> | undefined;\n styles: Styles<PopoverFactory> | undefined;\n unstyled: boolean | undefined;\n __staticSelector: string;\n variant: string | undefined;\n keepMounted: boolean | undefined;\n keepMountedMode: 'activity' | 'display-none' | undefined;\n getStyles: GetStylesApi<PopoverFactory>;\n resolvedStyles: Record<string, any> | undefined;\n floatingStrategy: FloatingStrategy | undefined;\n referenceHidden: boolean | undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n 'Popover component was not found in the tree'\n);\n"],"mappings":";;AA6DA,MAAa,CAAC,wBAAwB,2FAAqBA,EAAAA,kBACzD,6CACF"}
@@ -2,18 +2,19 @@
2
2
  const require_get_single_element_child = require("../../../core/utils/get-single-element-child/get-single-element-child.cjs");
3
3
  const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
4
4
  const require_Popover_context = require("../Popover.context.cjs");
5
- const require_create_context_menu_handlers = require("../../../utils/Floating/create-context-menu-handlers.cjs");
5
+ const require_use_context_menu_handlers = require("../../../utils/Floating/use-context-menu-handlers.cjs");
6
6
  let react = require("react");
7
7
  //#region packages/@mantine/core/src/components/Popover/PopoverContextMenu/PopoverContextMenu.tsx
8
8
  function PopoverContextMenu(props) {
9
- const { children, disabled } = require_use_props.useProps("PopoverContextMenu", null, props);
9
+ const { children, disabled, longPressDelay } = require_use_props.useProps("PopoverContextMenu", null, props);
10
10
  const child = require_get_single_element_child.getSingleElementChild(children);
11
11
  if (!child) throw new Error("Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
12
12
  const ctx = require_Popover_context.usePopoverContext();
13
- return (0, react.cloneElement)(child, require_create_context_menu_handlers.createContextMenuHandlers({
13
+ return (0, react.cloneElement)(child, require_use_context_menu_handlers.useContextMenuHandlers({
14
14
  childProps: child.props,
15
15
  disabled: disabled || ctx.disabled,
16
16
  opened: ctx.opened,
17
+ longPressDelay,
17
18
  setReference: ctx.reference,
18
19
  open: () => {
19
20
  if (!ctx.opened) ctx.onToggle();
@@ -1 +1 @@
1
- {"version":3,"file":"PopoverContextMenu.cjs","names":["useProps","getSingleElementChild","usePopoverContext","createContextMenuHandlers"],"sources":["../../../../src/components/Popover/PopoverContextMenu/PopoverContextMenu.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { getSingleElementChild, useProps } from '../../../core';\nimport { createContextMenuHandlers } from '../../../utils/Floating/create-context-menu-handlers';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverContextMenuProps {\n /** Element that opens the popover when right-clicked. Dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */\n children: React.ReactNode;\n\n /** If set, the right-click trigger is disabled and the browser's default context menu is shown */\n disabled?: boolean;\n}\n\nexport function PopoverContextMenu(props: PopoverContextMenuProps) {\n const { children, disabled } = useProps('PopoverContextMenu', null, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = usePopoverContext();\n\n const handlers = createContextMenuHandlers({\n childProps: child.props as any,\n disabled: disabled || ctx.disabled,\n opened: ctx.opened,\n setReference: ctx.reference as unknown as (node: object) => void,\n open: () => {\n if (!ctx.opened) {\n ctx.onToggle();\n }\n },\n });\n\n return cloneElement(child, handlers as any);\n}\n\nPopoverContextMenu.displayName = '@mantine/core/PopoverContextMenu';\n"],"mappings":";;;;;;;AAaA,SAAgB,mBAAmB,OAAgC;CACjE,MAAM,EAAE,UAAU,aAAaA,kBAAAA,SAAS,sBAAsB,MAAM,KAAK;CAEzE,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,uKACF;CAGF,MAAM,MAAMC,wBAAAA,kBAAkB;CAc9B,QAAA,GAAA,MAAA,cAAoB,OAZHC,qCAAAA,0BAA0B;EACzC,YAAY,MAAM;EAClB,UAAU,YAAY,IAAI;EAC1B,QAAQ,IAAI;EACZ,cAAc,IAAI;EAClB,YAAY;GACV,IAAI,CAAC,IAAI,QACP,IAAI,SAAS;EAEjB;CACF,CAEkC,CAAQ;AAC5C;AAEA,mBAAmB,cAAc"}
1
+ {"version":3,"file":"PopoverContextMenu.cjs","names":["useProps","getSingleElementChild","usePopoverContext","useContextMenuHandlers"],"sources":["../../../../src/components/Popover/PopoverContextMenu/PopoverContextMenu.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { getSingleElementChild, useProps } from '../../../core';\nimport { useContextMenuHandlers } from '../../../utils/Floating/use-context-menu-handlers';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverContextMenuProps {\n /** Element that opens the popover when right-clicked. Dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */\n children: React.ReactNode;\n\n /** If set, the right-click trigger is disabled and the browser's default context menu is shown */\n disabled?: boolean;\n\n /** Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default */\n longPressDelay?: number;\n}\n\nexport function PopoverContextMenu(props: PopoverContextMenuProps) {\n const { children, disabled, longPressDelay } = useProps('PopoverContextMenu', null, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = usePopoverContext();\n\n const handlers = useContextMenuHandlers({\n childProps: child.props as any,\n disabled: disabled || ctx.disabled,\n opened: ctx.opened,\n longPressDelay,\n setReference: ctx.reference as unknown as (node: object) => void,\n open: () => {\n if (!ctx.opened) {\n ctx.onToggle();\n }\n },\n });\n\n return cloneElement(child, handlers as any);\n}\n\nPopoverContextMenu.displayName = '@mantine/core/PopoverContextMenu';\n"],"mappings":";;;;;;;AAgBA,SAAgB,mBAAmB,OAAgC;CACjE,MAAM,EAAE,UAAU,UAAU,mBAAmBA,kBAAAA,SAAS,sBAAsB,MAAM,KAAK;CAEzF,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,uKACF;CAGF,MAAM,MAAMC,wBAAAA,kBAAkB;CAe9B,QAAA,GAAA,MAAA,cAAoB,OAbHC,kCAAAA,uBAAuB;EACtC,YAAY,MAAM;EAClB,UAAU,YAAY,IAAI;EAC1B,QAAQ,IAAI;EACZ;EACA,cAAc,IAAI;EAClB,YAAY;GACV,IAAI,CAAC,IAAI,QACP,IAAI,SAAS;EAEjB;CACF,CAEkC,CAAQ;AAC5C;AAEA,mBAAmB,cAAc"}
@@ -45,6 +45,7 @@ const PopoverDropdown = require_factory.factory((_props) => {
45
45
  transition: ctx.transitionProps?.transition || "fade",
46
46
  duration: ctx.transitionProps?.duration ?? 150,
47
47
  keepMounted: ctx.keepMounted,
48
+ keepMountedMode: ctx.keepMountedMode,
48
49
  exitDuration: typeof ctx.transitionProps?.exitDuration === "number" ? ctx.transitionProps.exitDuration : ctx.transitionProps?.duration,
49
50
  children: (transitionStyles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FocusTrap.FocusTrap, {
50
51
  active: ctx.trapFocus && ctx.opened,
@@ -1 +1 @@
1
- {"version":3,"file":"PopoverDropdown.cjs","names":["factory","useProps","usePopoverContext","useDirection","getArrowMergeDropdownStyles","OptionalPortal","Transition","FocusTrap","Box","closeOnEscape","rem","FloatingArrow","classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n closeOnEscape,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n rem,\n useDirection,\n useProps,\n} from '../../../core';\nimport { FloatingArrow, getArrowMergeDropdownStyles } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n props: PopoverDropdownProps;\n ref: HTMLDivElement;\n stylesNames: PopoverStylesNames;\n compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n const props = useProps('PopoverDropdown', null, _props);\n const {\n className,\n style,\n vars,\n children,\n onKeyDownCapture,\n variant,\n classNames,\n styles,\n ref,\n ...others\n } = props;\n\n const ctx = usePopoverContext();\n const { dir } = useDirection();\n\n const mergeStyles =\n ctx.arrowPosition === 'merge' && ctx.withArrow\n ? getArrowMergeDropdownStyles({ position: ctx.placement, dir })\n : undefined;\n\n const returnFocus = useFocusReturn({\n opened: ctx.opened,\n shouldReturnFocus: ctx.returnFocus,\n });\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-labelledby': ctx.getTargetId(),\n id: ctx.getDropdownId(),\n role: 'dialog',\n tabIndex: -1,\n }\n : {};\n\n const mergedRef = useMergedRef(ref, ctx.floating);\n\n if (ctx.disabled) {\n return null;\n }\n\n return (\n <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n <Transition\n mounted={ctx.opened}\n {...ctx.transitionProps}\n transition={ctx.transitionProps?.transition || 'fade'}\n duration={ctx.transitionProps?.duration ?? 150}\n keepMounted={ctx.keepMounted}\n exitDuration={\n typeof ctx.transitionProps?.exitDuration === 'number'\n ? ctx.transitionProps.exitDuration\n : ctx.transitionProps?.duration\n }\n >\n {(transitionStyles) => (\n <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n <Box\n {...accessibleProps}\n {...others}\n variant={variant}\n onKeyDownCapture={closeOnEscape(\n () => {\n ctx.onClose?.();\n ctx.onDismiss?.();\n },\n {\n active: ctx.closeOnEscape,\n onTrigger: returnFocus,\n onKeyDown: onKeyDownCapture,\n }\n )}\n data-position={ctx.placement}\n data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n {...ctx.getStyles('dropdown', {\n className,\n props,\n classNames,\n styles,\n style: [\n {\n ...transitionStyles,\n ...mergeStyles,\n zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n top: ctx.y ?? 0,\n left: ctx.x ?? 0,\n width: ctx.width === 'target' ? undefined : rem(ctx.width),\n ...(ctx.referenceHidden ? { display: 'none' } : null),\n },\n ctx.resolvedStyles?.dropdown,\n styles?.dropdown,\n style,\n ],\n })}\n >\n {children}\n\n <FloatingArrow\n ref={ctx.arrowRef}\n arrowX={ctx.arrowX}\n arrowY={ctx.arrowY}\n visible={ctx.withArrow}\n position={ctx.placement}\n arrowSize={ctx.arrowSize}\n arrowRadius={ctx.arrowRadius}\n arrowOffset={ctx.arrowOffset}\n arrowPosition={ctx.arrowPosition}\n {...ctx.getStyles('arrow', {\n props,\n classNames,\n styles,\n })}\n />\n </Box>\n </FocusTrap>\n )}\n </Transition>\n </OptionalPortal>\n );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkBA,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,MAAM,MAAM;CACtD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,wBAAAA,kBAAkB;CAC9B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,MAAM,cACJ,IAAI,kBAAkB,WAAW,IAAI,YACjCC,kCAAAA,4BAA4B;EAAE,UAAU,IAAI;EAAW;CAAI,CAAC,IAC5D,KAAA;CAEN,MAAM,eAAA,GAAA,eAAA,gBAA6B;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;CACzB,CAAC;CAED,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,YAAY;EACnC,IAAI,IAAI,cAAc;EACtB,MAAM;EACN,UAAU;CACZ,IACA,CAAC;CAEL,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,IAAI,QAAQ;CAEhD,IAAI,IAAI,UACN,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkBC,wBAAAA,oBACV;MACJ,IAAI,UAAU;MACd,IAAI,YAAY;KAClB,GACA;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;KACb,CACF;KACA,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAYC,YAAAA,IAAI,IAAI,KAAK;QACzD,GAAI,IAAI,kBAAkB,EAAE,SAAS,OAAO,IAAI;OAClD;OACA,IAAI,gBAAgB;OACpB,QAAQ;OACR;MACF;KACF,CAAC;eApCH,CAsCG,UAED,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;MACF,CAAC;KACF,CAAA,CACE;;GACI,CAAA;EAEH,CAAA;CACE,CAAA;AAEpB,CAAC;AAED,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,cAAc"}
1
+ {"version":3,"file":"PopoverDropdown.cjs","names":["factory","useProps","usePopoverContext","useDirection","getArrowMergeDropdownStyles","OptionalPortal","Transition","FocusTrap","Box","closeOnEscape","rem","FloatingArrow","classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n closeOnEscape,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n rem,\n useDirection,\n useProps,\n} from '../../../core';\nimport { FloatingArrow, getArrowMergeDropdownStyles } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n props: PopoverDropdownProps;\n ref: HTMLDivElement;\n stylesNames: PopoverStylesNames;\n compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n const props = useProps('PopoverDropdown', null, _props);\n const {\n className,\n style,\n vars,\n children,\n onKeyDownCapture,\n variant,\n classNames,\n styles,\n ref,\n ...others\n } = props;\n\n const ctx = usePopoverContext();\n const { dir } = useDirection();\n\n const mergeStyles =\n ctx.arrowPosition === 'merge' && ctx.withArrow\n ? getArrowMergeDropdownStyles({ position: ctx.placement, dir })\n : undefined;\n\n const returnFocus = useFocusReturn({\n opened: ctx.opened,\n shouldReturnFocus: ctx.returnFocus,\n });\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-labelledby': ctx.getTargetId(),\n id: ctx.getDropdownId(),\n role: 'dialog',\n tabIndex: -1,\n }\n : {};\n\n const mergedRef = useMergedRef(ref, ctx.floating);\n\n if (ctx.disabled) {\n return null;\n }\n\n return (\n <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n <Transition\n mounted={ctx.opened}\n {...ctx.transitionProps}\n transition={ctx.transitionProps?.transition || 'fade'}\n duration={ctx.transitionProps?.duration ?? 150}\n keepMounted={ctx.keepMounted}\n keepMountedMode={ctx.keepMountedMode}\n exitDuration={\n typeof ctx.transitionProps?.exitDuration === 'number'\n ? ctx.transitionProps.exitDuration\n : ctx.transitionProps?.duration\n }\n >\n {(transitionStyles) => (\n <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n <Box\n {...accessibleProps}\n {...others}\n variant={variant}\n onKeyDownCapture={closeOnEscape(\n () => {\n ctx.onClose?.();\n ctx.onDismiss?.();\n },\n {\n active: ctx.closeOnEscape,\n onTrigger: returnFocus,\n onKeyDown: onKeyDownCapture,\n }\n )}\n data-position={ctx.placement}\n data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n {...ctx.getStyles('dropdown', {\n className,\n props,\n classNames,\n styles,\n style: [\n {\n ...transitionStyles,\n ...mergeStyles,\n zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n top: ctx.y ?? 0,\n left: ctx.x ?? 0,\n width: ctx.width === 'target' ? undefined : rem(ctx.width),\n ...(ctx.referenceHidden ? { display: 'none' } : null),\n },\n ctx.resolvedStyles?.dropdown,\n styles?.dropdown,\n style,\n ],\n })}\n >\n {children}\n\n <FloatingArrow\n ref={ctx.arrowRef}\n arrowX={ctx.arrowX}\n arrowY={ctx.arrowY}\n visible={ctx.withArrow}\n position={ctx.placement}\n arrowSize={ctx.arrowSize}\n arrowRadius={ctx.arrowRadius}\n arrowOffset={ctx.arrowOffset}\n arrowPosition={ctx.arrowPosition}\n {...ctx.getStyles('arrow', {\n props,\n classNames,\n styles,\n })}\n />\n </Box>\n </FocusTrap>\n )}\n </Transition>\n </OptionalPortal>\n );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkBA,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,MAAM,MAAM;CACtD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,wBAAAA,kBAAkB;CAC9B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,MAAM,cACJ,IAAI,kBAAkB,WAAW,IAAI,YACjCC,kCAAAA,4BAA4B;EAAE,UAAU,IAAI;EAAW;CAAI,CAAC,IAC5D,KAAA;CAEN,MAAM,eAAA,GAAA,eAAA,gBAA6B;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;CACzB,CAAC;CAED,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,YAAY;EACnC,IAAI,IAAI,cAAc;EACtB,MAAM;EACN,UAAU;CACZ,IACA,CAAC;CAEL,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,IAAI,QAAQ;CAEhD,IAAI,IAAI,UACN,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,iBAAiB,IAAI;GACrB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkBC,wBAAAA,oBACV;MACJ,IAAI,UAAU;MACd,IAAI,YAAY;KAClB,GACA;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;KACb,CACF;KACA,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAYC,YAAAA,IAAI,IAAI,KAAK;QACzD,GAAI,IAAI,kBAAkB,EAAE,SAAS,OAAO,IAAI;OAClD;OACA,IAAI,gBAAgB;OACpB,QAAQ;OACR;MACF;KACF,CAAC;eApCH,CAsCG,UAED,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;MACF,CAAC;KACF,CAAA,CACE;;GACI,CAAA;EAEH,CAAA;CACE,CAAA;AAEpB,CAAC;AAED,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,cAAc"}
@@ -24,14 +24,18 @@ function getPopoverMiddlewares(options, getFloating, disableFlip, lockEnabled) {
24
24
  } : userFlip;
25
25
  middlewares.push((0, _floating_ui_react.flip)(flipOptions));
26
26
  }
27
- if (middlewaresOptions.shift) middlewares.push((0, _floating_ui_react.shift)(typeof middlewaresOptions.shift === "boolean" ? {
28
- limiter: (0, _floating_ui_react.limitShift)(),
29
- padding: 5
30
- } : {
31
- limiter: (0, _floating_ui_react.limitShift)(),
32
- padding: 5,
33
- ...middlewaresOptions.shift
34
- }));
27
+ if (middlewaresOptions.shift) {
28
+ const shiftOptions = typeof middlewaresOptions.shift === "boolean" ? {} : middlewaresOptions.shift;
29
+ middlewares.push((0, _floating_ui_react.shift)((state) => {
30
+ const isVerticalPlacement = state.placement.startsWith("top") || state.placement.startsWith("bottom");
31
+ return {
32
+ limiter: (0, _floating_ui_react.limitShift)(),
33
+ padding: 5,
34
+ ...options.width === "target" && isVerticalPlacement ? { mainAxis: false } : null,
35
+ ...shiftOptions
36
+ };
37
+ }));
38
+ }
35
39
  if (middlewaresOptions.inline) middlewares.push(typeof middlewaresOptions.inline === "boolean" ? (0, _floating_ui_react.inline)() : (0, _floating_ui_react.inline)(middlewaresOptions.inline));
36
40
  middlewares.push((0, _floating_ui_react.arrow)({
37
41
  element: options.arrowRef,
@@ -86,9 +90,17 @@ function usePopover(options) {
86
90
  whileElementsMounted: !options.keepMounted ? _floating_ui_react.autoUpdate : void 0
87
91
  });
88
92
  (0, react.useEffect)(() => {
89
- if (!floating.refs.reference.current || !floating.refs.floating.current) return;
90
- if (_opened) return (0, _floating_ui_react.autoUpdate)(floating.refs.reference.current, floating.refs.floating.current, floating.update);
91
- }, [_opened, floating.update]);
93
+ if (!options.keepMounted) return;
94
+ const referenceElement = floating.refs.reference.current;
95
+ const floatingElement = floating.refs.floating.current;
96
+ if (_opened && referenceElement && floatingElement) return (0, _floating_ui_react.autoUpdate)(referenceElement, floatingElement, floating.update);
97
+ }, [
98
+ options.keepMounted,
99
+ _opened,
100
+ floating.update,
101
+ floating.elements.reference,
102
+ floating.elements.floating
103
+ ]);
92
104
  const measuredAfterShowRef = (0, react.useRef)(false);
93
105
  (0, _mantine_hooks.useIsomorphicEffect)(() => {
94
106
  if (!_opened) {
@@ -1 +1 @@
1
- {"version":3,"file":"use-popover.cjs","names":["autoUpdate"],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n limitShift,\n Middleware,\n offset,\n shift,\n size,\n useFloating,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number | FloatingAxesOffsets;\n position: FloatingPosition;\n onPositionChange?: (position: FloatingPosition) => void;\n opened: boolean | undefined;\n defaultOpened: boolean | undefined;\n onChange?: (opened: boolean) => void;\n onClose?: () => void;\n onDismiss?: () => void;\n onOpen?: () => void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n arrowOffset: number;\n strategy?: FloatingStrategy;\n disabled: boolean | undefined;\n preventPositionChangeWhenVisible: boolean | undefined;\n keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n if (middlewares === undefined) {\n return { shift: true, flip: true };\n }\n\n const result = { ...middlewares };\n if (middlewares.shift === undefined) {\n result.shift = true;\n }\n\n if (middlewares.flip === undefined) {\n result.flip = true;\n }\n\n return result;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn<Element>,\n disableFlip: boolean,\n lockEnabled: boolean\n) {\n const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n if (middlewaresOptions.flip && !disableFlip) {\n const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n const flipOptions = lockEnabled\n ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n : userFlip;\n middlewares.push(flip(flipOptions));\n }\n\n if (middlewaresOptions.shift) {\n middlewares.push(\n shift(\n typeof middlewaresOptions.shift === 'boolean'\n ? { limiter: limitShift(), padding: 5 }\n : { limiter: limitShift(), padding: 5, ...middlewaresOptions.shift }\n )\n );\n }\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (middlewaresOptions.size || options.width === 'target') {\n middlewares.push(\n size({\n ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n apply({ rects, availableWidth, availableHeight, ...rest }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (middlewaresOptions.size) {\n // If custom apply function is given use that else set defaults\n if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n } else {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const previouslyOpened = useRef(_opened);\n\n const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition | null>(null);\n const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n const wasOpenedRef = useRef(_opened);\n if (_opened !== wasOpenedRef.current) {\n wasOpenedRef.current = _opened;\n if (_opened && lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n const onClose = () => {\n if (_opened && !options.disabled) {\n setOpened(false);\n }\n };\n\n const onToggle = () => {\n if (!options.disabled) {\n setOpened(!_opened);\n }\n };\n\n const floating: UseFloatingReturn<Element> = useFloating({\n open: _opened,\n strategy: options.strategy,\n placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n middleware: getPopoverMiddlewares(\n options,\n () => floating,\n lockEnabled && lockedPlacement !== null,\n lockEnabled\n ),\n whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n });\n\n useEffect(() => {\n if (!floating.refs.reference.current || !floating.refs.floating.current) {\n return;\n }\n\n if (_opened) {\n return autoUpdate(\n floating.refs.reference.current,\n floating.refs.floating.current,\n floating.update\n );\n }\n }, [_opened, floating.update]);\n\n const measuredAfterShowRef = useRef(false);\n\n useIsomorphicEffect(() => {\n if (!_opened) {\n measuredAfterShowRef.current = false;\n return;\n }\n\n if (!lockEnabled || lockedPlacement !== null) {\n return;\n }\n\n const flEl = floating.refs.floating.current as HTMLElement | null;\n if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) {\n return;\n }\n\n if (!measuredAfterShowRef.current) {\n measuredAfterShowRef.current = true;\n floating.update();\n return;\n }\n\n if (floating.isPositioned) {\n setLockedPlacement(floating.placement);\n }\n }, [\n lockEnabled,\n _opened,\n floating.isPositioned,\n floating.placement,\n lockedPlacement,\n floating.update,\n ]);\n\n const previousPlacementRef = useRef(floating.placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== floating.placement) {\n previousPlacementRef.current = floating.placement;\n options.onPositionChange?.(floating.placement);\n }\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (_opened !== previouslyOpened.current) {\n if (!_opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }\n\n previouslyOpened.current = _opened;\n }, [_opened, options.onClose, options.onOpen]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n resetLockedPlacement,\n };\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"use-popover.cjs","names":["autoUpdate"],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n limitShift,\n Middleware,\n offset,\n shift,\n size,\n useFloating,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number | FloatingAxesOffsets;\n position: FloatingPosition;\n onPositionChange?: (position: FloatingPosition) => void;\n opened: boolean | undefined;\n defaultOpened: boolean | undefined;\n onChange?: (opened: boolean) => void;\n onClose?: () => void;\n onDismiss?: () => void;\n onOpen?: () => void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n arrowOffset: number;\n strategy?: FloatingStrategy;\n disabled: boolean | undefined;\n preventPositionChangeWhenVisible: boolean | undefined;\n keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n if (middlewares === undefined) {\n return { shift: true, flip: true };\n }\n\n const result = { ...middlewares };\n if (middlewares.shift === undefined) {\n result.shift = true;\n }\n\n if (middlewares.flip === undefined) {\n result.flip = true;\n }\n\n return result;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn<Element>,\n disableFlip: boolean,\n lockEnabled: boolean\n) {\n const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n if (middlewaresOptions.flip && !disableFlip) {\n const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n const flipOptions = lockEnabled\n ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n : userFlip;\n middlewares.push(flip(flipOptions));\n }\n\n if (middlewaresOptions.shift) {\n const shiftOptions =\n typeof middlewaresOptions.shift === 'boolean' ? {} : middlewaresOptions.shift;\n middlewares.push(\n shift((state) => {\n const isVerticalPlacement =\n state.placement.startsWith('top') || state.placement.startsWith('bottom');\n return {\n limiter: limitShift(),\n padding: 5,\n ...(options.width === 'target' && isVerticalPlacement ? { mainAxis: false } : null),\n ...shiftOptions,\n };\n })\n );\n }\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (middlewaresOptions.size || options.width === 'target') {\n middlewares.push(\n size({\n ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n apply({ rects, availableWidth, availableHeight, ...rest }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (middlewaresOptions.size) {\n // If custom apply function is given use that else set defaults\n if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n } else {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const previouslyOpened = useRef(_opened);\n\n const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition | null>(null);\n const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n const wasOpenedRef = useRef(_opened);\n if (_opened !== wasOpenedRef.current) {\n wasOpenedRef.current = _opened;\n if (_opened && lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n const onClose = () => {\n if (_opened && !options.disabled) {\n setOpened(false);\n }\n };\n\n const onToggle = () => {\n if (!options.disabled) {\n setOpened(!_opened);\n }\n };\n\n const floating: UseFloatingReturn<Element> = useFloating({\n open: _opened,\n strategy: options.strategy,\n placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n middleware: getPopoverMiddlewares(\n options,\n () => floating,\n lockEnabled && lockedPlacement !== null,\n lockEnabled\n ),\n whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n });\n\n useEffect(() => {\n if (!options.keepMounted) {\n return undefined;\n }\n\n const referenceElement = floating.refs.reference.current;\n const floatingElement = floating.refs.floating.current;\n\n if (_opened && referenceElement && floatingElement) {\n return autoUpdate(referenceElement, floatingElement, floating.update);\n }\n\n return undefined;\n }, [\n options.keepMounted,\n _opened,\n floating.update,\n floating.elements.reference,\n floating.elements.floating,\n ]);\n\n const measuredAfterShowRef = useRef(false);\n\n useIsomorphicEffect(() => {\n if (!_opened) {\n measuredAfterShowRef.current = false;\n return;\n }\n\n if (!lockEnabled || lockedPlacement !== null) {\n return;\n }\n\n const flEl = floating.refs.floating.current as HTMLElement | null;\n if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) {\n return;\n }\n\n if (!measuredAfterShowRef.current) {\n measuredAfterShowRef.current = true;\n floating.update();\n return;\n }\n\n if (floating.isPositioned) {\n setLockedPlacement(floating.placement);\n }\n }, [\n lockEnabled,\n _opened,\n floating.isPositioned,\n floating.placement,\n lockedPlacement,\n floating.update,\n ]);\n\n const previousPlacementRef = useRef(floating.placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== floating.placement) {\n previousPlacementRef.current = floating.placement;\n options.onPositionChange?.(floating.placement);\n }\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (_opened !== previouslyOpened.current) {\n if (!_opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }\n\n previouslyOpened.current = _opened;\n }, [_opened, options.onClose, options.onOpen]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n resetLockedPlacement,\n };\n}\n"],"mappings":";;;;;AAuCA,SAAS,sBAAsB,aAAiE;CAC9F,IAAI,gBAAgB,KAAA,GAClB,OAAO;EAAE,OAAO;EAAM,MAAM;CAAK;CAGnC,MAAM,SAAS,EAAE,GAAG,YAAY;CAChC,IAAI,YAAY,UAAU,KAAA,GACxB,OAAO,QAAQ;CAGjB,IAAI,YAAY,SAAS,KAAA,GACvB,OAAO,OAAO;CAGhB,OAAO;AACT;AAEA,SAAS,sBACP,SACA,aACA,aACA,aACA;CACA,MAAM,qBAAqB,sBAAsB,QAAQ,WAAW;CACpE,MAAM,cAA4B,EAAA,GAAA,mBAAA,QAAQ,QAAQ,MAAM,IAAA,GAAA,mBAAA,MAAQ,CAAC;CAEjE,IAAI,mBAAmB,QAAQ,CAAC,aAAa;EAC3C,MAAM,WAAW,OAAO,mBAAmB,SAAS,YAAY,CAAC,IAAI,mBAAmB;EACxF,MAAM,cAAc,cAChB;GAAE,kBAAkB;GAA6B,GAAG;EAAS,IAC7D;EACJ,YAAY,MAAA,GAAA,mBAAA,MAAU,WAAW,CAAC;CACpC;CAEA,IAAI,mBAAmB,OAAO;EAC5B,MAAM,eACJ,OAAO,mBAAmB,UAAU,YAAY,CAAC,IAAI,mBAAmB;EAC1E,YAAY,MAAA,GAAA,mBAAA,QACH,UAAU;GACf,MAAM,sBACJ,MAAM,UAAU,WAAW,KAAK,KAAK,MAAM,UAAU,WAAW,QAAQ;GAC1E,OAAO;IACL,UAAA,GAAA,mBAAA,YAAoB;IACpB,SAAS;IACT,GAAI,QAAQ,UAAU,YAAY,sBAAsB,EAAE,UAAU,MAAM,IAAI;IAC9E,GAAG;GACL;EACF,CAAC,CACH;CACF;CAEA,IAAI,mBAAmB,QACrB,YAAY,KACV,OAAO,mBAAmB,WAAW,aAAA,GAAA,mBAAA,QAAmB,KAAA,GAAA,mBAAA,QAAW,mBAAmB,MAAM,CAC9F;CAGF,YAAY,MAAA,GAAA,mBAAA,OAAW;EAAE,SAAS,QAAQ;EAAU,SAAS,QAAQ;CAAY,CAAC,CAAC;CAEnF,IAAI,mBAAmB,QAAQ,QAAQ,UAAU,UAC/C,YAAY,MAAA,GAAA,mBAAA,MACL;EACH,GAAI,OAAO,mBAAmB,SAAS,YAAY,CAAC,IAAI,mBAAmB;EAC3E,MAAM,EAAE,OAAO,gBAAgB,iBAAiB,GAAG,QAAQ;GAEzD,MAAM,SADW,YACK,EAAE,KAAK,SAAS,SAAS,SAAS,CAAC;GAEzD,IAAI,mBAAmB,MAErB,IAAI,OAAO,mBAAmB,SAAS,YAAY,CAAC,CAAC,mBAAmB,KAAK,OAC3E,mBAAmB,KAAK,MAAM;IAAE;IAAO;IAAgB;IAAiB,GAAG;GAAK,CAAC;QAEjF,OAAO,OAAO,QAAQ;IACpB,UAAU,GAAG,eAAe;IAC5B,WAAW,GAAG,gBAAgB;GAChC,CAAC;GAIL,IAAI,QAAQ,UAAU,UACpB,OAAO,OAAO,QAAQ,EACpB,OAAO,GAAG,MAAM,UAAU,MAAM,IAClC,CAAC;EAEL;CACF,CAAC,CACH;CAGF,OAAO;AACT;AAEA,SAAgB,WAAW,SAA4B;CACrD,MAAM,CAAC,SAAS,cAAA,GAAA,eAAA,iBAA6B;EAC3C,OAAO,QAAQ;EACf,cAAc,QAAQ;EACtB,YAAY;EACZ,UAAU,QAAQ;CACpB,CAAC;CAED,MAAM,oBAAA,GAAA,MAAA,QAA0B,OAAO;CAEvC,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAAwD,IAAI;CACpF,MAAM,cAAc,QAAQ,qCAAqC;CAEjE,MAAM,gBAAA,GAAA,MAAA,QAAsB,OAAO;CACnC,IAAI,YAAY,aAAa,SAAS;EACpC,aAAa,UAAU;EACvB,IAAI,WAAW,oBAAoB,MACjC,mBAAmB,IAAI;CAE3B;CAEA,MAAM,wBAAA,GAAA,MAAA,mBAAyC,mBAAmB,IAAI,GAAG,CAAC,CAAC;CAE3E,MAAM,gBAAgB;EACpB,IAAI,WAAW,CAAC,QAAQ,UACtB,UAAU,KAAK;CAEnB;CAEA,MAAM,iBAAiB;EACrB,IAAI,CAAC,QAAQ,UACX,UAAU,CAAC,OAAO;CAEtB;CAEA,MAAM,YAAA,GAAA,mBAAA,aAAmD;EACvD,MAAM;EACN,UAAU,QAAQ;EAClB,WAAW,cAAe,mBAAmB,QAAQ,WAAY,QAAQ;EACzE,YAAY,sBACV,eACM,UACN,eAAe,oBAAoB,MACnC,WACF;EACA,sBAAsB,CAAC,QAAQ,cAAcA,mBAAAA,aAAa,KAAA;CAC5D,CAAC;CAED,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,QAAQ,aACX;EAGF,MAAM,mBAAmB,SAAS,KAAK,UAAU;EACjD,MAAM,kBAAkB,SAAS,KAAK,SAAS;EAE/C,IAAI,WAAW,oBAAoB,iBACjC,QAAA,GAAA,mBAAA,YAAkB,kBAAkB,iBAAiB,SAAS,MAAM;CAIxE,GAAG;EACD,QAAQ;EACR;EACA,SAAS;EACT,SAAS,SAAS;EAClB,SAAS,SAAS;CACpB,CAAC;CAED,MAAM,wBAAA,GAAA,MAAA,QAA8B,KAAK;CAEzC,CAAA,GAAA,eAAA,2BAA0B;EACxB,IAAI,CAAC,SAAS;GACZ,qBAAqB,UAAU;GAC/B;EACF;EAEA,IAAI,CAAC,eAAe,oBAAoB,MACtC;EAGF,MAAM,OAAO,SAAS,KAAK,SAAS;EACpC,IAAI,CAAC,QAAQ,KAAK,iBAAiB,KAAK,KAAK,gBAAgB,GAC3D;EAGF,IAAI,CAAC,qBAAqB,SAAS;GACjC,qBAAqB,UAAU;GAC/B,SAAS,OAAO;GAChB;EACF;EAEA,IAAI,SAAS,cACX,mBAAmB,SAAS,SAAS;CAEzC,GAAG;EACD;EACA;EACA,SAAS;EACT,SAAS;EACT;EACA,SAAS;CACX,CAAC;CAED,MAAM,wBAAA,GAAA,MAAA,QAA8B,SAAS,SAAS;CACtD,CAAA,GAAA,eAAA,2BAA0B;EACxB,IAAI,qBAAqB,YAAY,SAAS,WAAW;GACvD,qBAAqB,UAAU,SAAS;GACxC,QAAQ,mBAAmB,SAAS,SAAS;EAC/C;CACF,GAAG,CAAC,SAAS,SAAS,CAAC;CAEvB,CAAA,GAAA,eAAA,oBAAmB;EACjB,IAAI,YAAY,iBAAiB,SAC/B,IAAI,CAAC,SACH,QAAQ,UAAU;OAElB,QAAQ,SAAS;EAIrB,iBAAiB,UAAU;CAC7B,GAAG;EAAC;EAAS,QAAQ;EAAS,QAAQ;CAAM,CAAC;CAE7C,OAAO;EACL;EACA,YAAY,OAAO,QAAQ,WAAW;EACtC,QAAQ;EACR;EACA;EACA;CACF;AACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n --sc-padding-xs: 2px 6px;\n --sc-padding-sm: 3px 10px;\n --sc-padding-md: 4px 14px;\n --sc-padding-lg: 7px 16px;\n --sc-padding-xl: 10px 20px;\n\n --sc-transition-duration: 200ms;\n --sc-padding: var(--sc-padding-sm);\n --sc-transition-timing-function: ease;\n --sc-font-size: var(--mantine-font-size-sm);\n\n position: relative;\n display: inline-flex;\n flex-direction: row;\n width: auto;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n overflow: hidden;\n padding: 4px;\n\n &:where([data-full-width]) {\n display: flex;\n }\n\n &:where([data-orientation='vertical']) {\n display: flex;\n flex-direction: column;\n width: max-content;\n\n &:where([data-full-width]) {\n width: auto;\n }\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n}\n\n.indicator {\n position: absolute;\n display: block;\n z-index: 1;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n}\n\n.label {\n -webkit-tap-highlight-color: transparent;\n font-weight: var(--mantine-font-weight-medium);\n display: block;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n font-size: var(--sc-font-size);\n padding: var(--sc-padding);\n transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n cursor: pointer;\n\n /* outline is controlled by .input */\n outline: var(--segmented-control-outline, none);\n\n @mixin where-light {\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-1);\n }\n\n &:where([data-read-only]) {\n cursor: default;\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n }\n\n &:where([data-active]) {\n @mixin where-light {\n color: var(--sc-label-color, var(--mantine-color-black));\n }\n\n @mixin where-dark {\n color: var(--sc-label-color, var(--mantine-color-white));\n }\n\n &::before {\n .root:where([data-initialized]) & {\n display: none;\n }\n content: '';\n inset: 0;\n z-index: 0;\n position: absolute;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n }\n }\n\n &:where(:not([data-disabled], [data-active], [data-read-only])) {\n @mixin hover {\n @mixin where-light {\n color: var(--mantine-color-black);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n }\n }\n }\n\n fieldset:disabled & {\n @mixin hover {\n color: var(--mantine-color-disabled-color) !important;\n }\n }\n}\n\n.input {\n height: 0;\n width: 0;\n position: absolute;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n\n &[data-focus-ring='auto'] {\n &:focus:focus-visible {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n\n &[data-focus-ring='always'] {\n &:focus {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n}\n\n.control {\n position: relative;\n flex: 1;\n z-index: 2;\n transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n .root[data-with-items-borders] :where(&)::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n background-color: var(--separator-color);\n width: 1px;\n transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n }\n\n &[data-orientation='vertical'] {\n &::before {\n top: 0;\n inset-inline: 0;\n bottom: auto;\n height: 1px;\n width: auto;\n }\n }\n\n @mixin where-light {\n --separator-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --separator-color: var(--mantine-color-dark-4);\n }\n\n &:first-of-type {\n &::before {\n --separator-color: transparent;\n }\n }\n\n &[data-active] {\n [data-mantine-color-scheme] & {\n &,\n & + .control {\n &::before {\n --separator-color: transparent;\n }\n }\n }\n }\n}\n\n.innerLabel {\n position: relative;\n z-index: 2;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n --sc-padding-xs: 2px 6px;\n --sc-padding-sm: 3px 10px;\n --sc-padding-md: 4px 14px;\n --sc-padding-lg: 7px 16px;\n --sc-padding-xl: 10px 20px;\n\n --sc-transition-duration: 200ms;\n --sc-padding: var(--sc-padding-sm);\n --sc-transition-timing-function: ease;\n --sc-font-size: var(--mantine-font-size-sm);\n\n position: relative;\n display: inline-flex;\n flex-direction: row;\n width: auto;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n overflow: hidden;\n padding: 4px;\n\n &:where([data-full-width]) {\n display: flex;\n }\n\n &:where([data-orientation='vertical']) {\n display: flex;\n flex-direction: column;\n width: max-content;\n\n &:where([data-full-width]) {\n width: auto;\n }\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n}\n\n.indicator {\n position: absolute;\n display: block;\n z-index: 1;\n border-radius: max(\n calc(var(--sc-radius, var(--mantine-radius-default)) - 4px),\n calc(var(--sc-radius, var(--mantine-radius-default)) / 4)\n );\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n}\n\n.label {\n -webkit-tap-highlight-color: transparent;\n font-weight: var(--mantine-font-weight-medium);\n display: block;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n font-size: var(--sc-font-size);\n padding: var(--sc-padding);\n transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n cursor: pointer;\n\n /* outline is controlled by .input */\n outline: var(--segmented-control-outline, none);\n\n @mixin where-light {\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-1);\n }\n\n &:where([data-read-only]) {\n cursor: default;\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n }\n\n &:where([data-active]) {\n @mixin where-light {\n color: var(--sc-label-color, var(--mantine-color-black));\n }\n\n @mixin where-dark {\n color: var(--sc-label-color, var(--mantine-color-white));\n }\n\n &::before {\n .root:where([data-initialized]) & {\n display: none;\n }\n content: '';\n inset: 0;\n z-index: 0;\n position: absolute;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n }\n }\n\n &:where(:not([data-disabled], [data-active], [data-read-only])) {\n @mixin hover {\n @mixin where-light {\n color: var(--mantine-color-black);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n }\n }\n }\n\n fieldset:disabled & {\n @mixin hover {\n color: var(--mantine-color-disabled-color) !important;\n }\n }\n}\n\n.input {\n height: 0;\n width: 0;\n position: absolute;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n\n &[data-focus-ring='auto'] {\n &:focus:focus-visible {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n\n &[data-focus-ring='always'] {\n &:focus {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n}\n\n.control {\n position: relative;\n flex: 1;\n z-index: 2;\n transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n .root[data-with-items-borders] :where(&)::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n background-color: var(--separator-color);\n width: 1px;\n transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n }\n\n &[data-orientation='vertical'] {\n &::before {\n top: 0;\n inset-inline: 0;\n bottom: auto;\n height: 1px;\n width: auto;\n }\n }\n\n @mixin where-light {\n --separator-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --separator-color: var(--mantine-color-dark-4);\n }\n\n &:first-of-type {\n &::before {\n --separator-color: transparent;\n }\n }\n\n &[data-active] {\n [data-mantine-color-scheme] & {\n &,\n & + .control {\n &::before {\n --separator-color: transparent;\n }\n }\n }\n }\n}\n\n.innerLabel {\n position: relative;\n z-index: 2;\n}\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"Thumb.cjs","names":["useSliderContext","Box","Transition"],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n max: number;\n min: number;\n value: number;\n position: number;\n dragging: boolean;\n label: React.ReactNode;\n thumbValueText?: string | ((value: number) => string);\n onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n onMouseDown?: (event: any) => void;\n labelTransitionProps: TransitionOverride | undefined;\n labelAlwaysOn: boolean | undefined;\n thumbLabel: string | undefined;\n showLabelOnHover: boolean | undefined;\n isHovered?: boolean;\n children?: React.ReactNode;\n disabled: boolean | undefined;\n orientation?: 'horizontal' | 'vertical';\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport function Thumb({\n max,\n min,\n value,\n position,\n label,\n dragging,\n onMouseDown,\n onKeyDownCapture,\n labelTransitionProps,\n labelAlwaysOn,\n thumbLabel,\n thumbValueText,\n onFocus,\n onBlur,\n showLabelOnHover,\n isHovered,\n children = null,\n disabled,\n orientation = 'horizontal',\n ref,\n}: ThumbProps) {\n const { getStyles } = useSliderContext();\n\n const [focused, setFocused] = useState(false);\n\n const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n return (\n <Box<'div'>\n tabIndex={disabled ? -1 : 0}\n role=\"slider\"\n aria-label={thumbLabel}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={value}\n aria-valuetext={valueText}\n aria-disabled={disabled}\n aria-orientation={orientation}\n ref={ref}\n __vars={{ '--slider-thumb-offset': `${position}%` }}\n {...getStyles('thumb', { focusable: true })}\n mod={{ dragging, disabled }}\n onFocus={(event) => {\n setFocused(true);\n typeof onFocus === 'function' && onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n typeof onBlur === 'function' && onBlur(event);\n }}\n onTouchStart={onMouseDown}\n onMouseDown={onMouseDown}\n onKeyDownCapture={onKeyDownCapture}\n onClick={(event) => event.stopPropagation()}\n >\n {children}\n <Transition\n mounted={label != null && !!isVisible}\n transition=\"fade\"\n duration={0}\n {...labelTransitionProps}\n >\n {(transitionStyles) => (\n <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n )}\n </Transition>\n </Box>\n );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,OACa;CACb,MAAM,EAAE,cAAcA,uBAAAA,iBAAiB;CAEvC,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS,EAAE,WAAW,KAAK,CAAC;EAC1C,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;YAzB5C,CA2BG,UACD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;cAEF,qBACA,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;cAAI;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}
1
+ {"version":3,"file":"Thumb.cjs","names":["useSliderContext","Box","Transition"],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n max: number;\n min: number;\n value: number;\n position: number;\n dragging: boolean;\n label: React.ReactNode;\n thumbValueText?: string | ((value: number) => string);\n onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n onMouseDown?: (event: any) => void;\n labelTransitionProps: TransitionOverride | undefined;\n labelAlwaysOn: boolean | undefined;\n thumbLabel: string | undefined;\n showLabelOnHover: boolean | undefined;\n isHovered?: boolean;\n children?: React.ReactNode;\n disabled: boolean | undefined;\n orientation?: 'horizontal' | 'vertical';\n className?: string | undefined;\n style?: React.CSSProperties;\n}\n\nexport function Thumb({\n max,\n min,\n value,\n position,\n label,\n dragging,\n onMouseDown,\n onKeyDownCapture,\n labelTransitionProps,\n labelAlwaysOn,\n thumbLabel,\n thumbValueText,\n onFocus,\n onBlur,\n showLabelOnHover,\n isHovered,\n children = null,\n disabled,\n orientation = 'horizontal',\n ref,\n}: ThumbProps) {\n const { getStyles } = useSliderContext();\n\n const [focused, setFocused] = useState(false);\n\n const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n return (\n <Box<'div'>\n tabIndex={disabled ? -1 : 0}\n role=\"slider\"\n aria-label={thumbLabel}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={value}\n aria-valuetext={valueText}\n aria-disabled={disabled}\n aria-orientation={orientation}\n ref={ref}\n __vars={{ '--slider-thumb-offset': `${position}%` }}\n {...getStyles('thumb', { focusable: true })}\n mod={{ dragging, disabled }}\n onFocus={(event) => {\n setFocused(true);\n typeof onFocus === 'function' && onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n typeof onBlur === 'function' && onBlur(event);\n }}\n onTouchStart={onMouseDown}\n onMouseDown={onMouseDown}\n onKeyDownCapture={onKeyDownCapture}\n onClick={(event) => event.stopPropagation()}\n >\n {children}\n <Transition\n mounted={label != null && !!isVisible}\n transition=\"fade\"\n duration={0}\n {...labelTransitionProps}\n >\n {(transitionStyles) => (\n <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n )}\n </Transition>\n </Box>\n );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,OACa;CACb,MAAM,EAAE,cAAcA,uBAAAA,iBAAiB;CAEvC,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS,EAAE,WAAW,KAAK,CAAC;EAC1C,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;YAzB5C,CA2BG,UACD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;cAEF,qBACA,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;cAAI;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}
@@ -18,7 +18,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
18
18
  const defaultProps = {
19
19
  orientation: "horizontal",
20
20
  lineSize: 2,
21
- withHandle: true
21
+ withHandle: true,
22
+ resetOnDoubleClick: true
22
23
  };
23
24
  const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { lineSize, handleColor }) => ({ root: {
24
25
  "--splitter-line-size": require_rem.rem(lineSize),
@@ -26,7 +27,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { l
26
27
  } }));
27
28
  const Splitter = require_factory.factory((_props) => {
28
29
  const props = require_use_props.useProps("Splitter", defaultProps, _props);
29
- const { orientation, sizes: controlledSizes, onSizeChange, onResizeStart, onResizeEnd, onCollapseChange, redistribute, step, shiftStep, lineSize, handleColor, handleIcon, withHandle, splitterRef, children, className, classNames, style, styles, unstyled, vars, mod, attributes, ref, ...others } = props;
30
+ const { orientation, sizes: controlledSizes, onSizeChange, onResizeStart, onResizeEnd, onCollapseChange, redistribute, step, shiftStep, lineSize, handleColor, handleIcon, withHandle, resetOnDoubleClick, splitterRef, children, className, classNames, style, styles, unstyled, vars, mod, attributes, ref, ...others } = props;
30
31
  const { dir } = require_DirectionProvider.useDirection();
31
32
  const paneChildren = react.Children.toArray(children);
32
33
  const splitter = (0, _mantine_hooks.useSplitter)({
@@ -46,7 +47,8 @@ const Splitter = require_factory.factory((_props) => {
46
47
  redistribute,
47
48
  step,
48
49
  shiftStep,
49
- dir
50
+ dir,
51
+ resetOnDoubleClick
50
52
  });
51
53
  (0, react.useImperativeHandle)(splitterRef, () => splitter, [splitter]);
52
54
  const mergedRef = (0, _mantine_hooks.useMergedRef)(ref, splitter.ref);