@mantine/core 9.6.3 → 9.7.0
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.
- package/cjs/components/ActionBar/ActionBar.cjs +0 -3
- package/cjs/components/ActionBar/ActionBar.cjs.map +1 -1
- package/cjs/components/ActionBar/ActionBar.module.cjs.map +1 -1
- package/cjs/components/AppShell/AppShell.cjs +33 -6
- package/cjs/components/AppShell/AppShell.cjs.map +1 -1
- package/cjs/components/AppShell/AppShell.context.cjs.map +1 -1
- package/cjs/components/AppShell/AppShell.module.cjs +2 -1
- package/cjs/components/AppShell/AppShell.module.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellAside/AppShellAside.cjs +28 -7
- package/cjs/components/AppShell/AppShellAside/AppShellAside.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellFooter/AppShellFooter.cjs +28 -7
- package/cjs/components/AppShell/AppShellFooter/AppShellFooter.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellHeader/AppShellHeader.cjs +28 -7
- package/cjs/components/AppShell/AppShellHeader/AppShellHeader.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.cjs +3 -2
- package/cjs/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.cjs +27 -16
- package/cjs/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.cjs +24 -16
- package/cjs/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.cjs +24 -16
- package/cjs/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.cjs +30 -19
- package/cjs/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.cjs +26 -0
- package/cjs/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.cjs.map +1 -0
- package/cjs/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.cjs +10 -0
- package/cjs/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.cjs.map +1 -0
- package/cjs/components/AppShell/AppShellMediaStyles/get-variables/get-variables.cjs +13 -5
- package/cjs/components/AppShell/AppShellMediaStyles/get-variables/get-variables.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellNavbar/AppShellNavbar.cjs +28 -7
- package/cjs/components/AppShell/AppShellNavbar/AppShellNavbar.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.cjs +270 -0
- package/cjs/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.cjs.map +1 -0
- package/cjs/components/AppShell/use-app-shell-resize/clamp-resize-size.cjs +15 -0
- package/cjs/components/AppShell/use-app-shell-resize/clamp-resize-size.cjs.map +1 -0
- package/cjs/components/AppShell/use-app-shell-resize/resize-section-config.cjs +51 -0
- package/cjs/components/AppShell/use-app-shell-resize/resize-section-config.cjs.map +1 -0
- package/cjs/components/AppShell/use-app-shell-resize/safe-area-inset.cjs +12 -0
- package/cjs/components/AppShell/use-app-shell-resize/safe-area-inset.cjs.map +1 -0
- package/cjs/components/AppShell/use-app-shell-resize/use-app-shell-resize.cjs +127 -0
- package/cjs/components/AppShell/use-app-shell-resize/use-app-shell-resize.cjs.map +1 -0
- package/cjs/components/AppShell/use-resizing/use-resizing.cjs +20 -2
- package/cjs/components/AppShell/use-resizing/use-resizing.cjs.map +1 -1
- package/cjs/components/Checkbox/Checkbox.cjs +10 -2
- package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/cjs/components/Checkbox/Checkbox.module.cjs +1 -0
- package/cjs/components/Checkbox/Checkbox.module.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs +10 -2
- package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.cjs +1 -0
- package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.cjs.map +1 -1
- package/cjs/components/Dialog/Dialog.cjs +0 -1
- package/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/cjs/components/Dialog/Dialog.module.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCard.cjs +34 -5
- package/cjs/components/HoverCard/HoverCard.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCard.context.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardDropdown/HoverCardDropdown.cjs +13 -18
- package/cjs/components/HoverCard/HoverCardDropdown/HoverCardDropdown.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs +6 -23
- package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs.map +1 -1
- package/cjs/components/HoverCard/use-hover-card.cjs +26 -12
- package/cjs/components/HoverCard/use-hover-card.cjs.map +1 -1
- package/cjs/components/Radio/Radio.cjs +10 -2
- package/cjs/components/Radio/Radio.cjs.map +1 -1
- package/cjs/components/Radio/Radio.module.cjs +1 -0
- package/cjs/components/Radio/Radio.module.cjs.map +1 -1
- package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs +10 -2
- package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs.map +1 -1
- package/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs +1 -0
- package/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs.map +1 -1
- package/cjs/components/Toggle/Toggle.cjs +80 -0
- package/cjs/components/Toggle/Toggle.cjs.map +1 -0
- package/cjs/components/Toggle/Toggle.module.cjs +7 -0
- package/cjs/components/Toggle/Toggle.module.cjs.map +1 -0
- package/cjs/components/Toolbar/Toolbar.cjs +107 -0
- package/cjs/components/Toolbar/Toolbar.cjs.map +1 -0
- package/cjs/components/Toolbar/Toolbar.context.cjs +8 -0
- package/cjs/components/Toolbar/Toolbar.context.cjs.map +1 -0
- package/cjs/components/Toolbar/Toolbar.module.cjs +12 -0
- package/cjs/components/Toolbar/Toolbar.module.cjs.map +1 -0
- package/cjs/components/Toolbar/ToolbarDivider/ToolbarDivider.cjs +31 -0
- package/cjs/components/Toolbar/ToolbarDivider/ToolbarDivider.cjs.map +1 -0
- package/cjs/components/Toolbar/ToolbarGroup/ToolbarGroup.cjs +31 -0
- package/cjs/components/Toolbar/ToolbarGroup/ToolbarGroup.cjs.map +1 -0
- package/cjs/components/Toolbar/ToolbarToggle/ToolbarToggle.cjs +47 -0
- package/cjs/components/Toolbar/ToolbarToggle/ToolbarToggle.cjs.map +1 -0
- package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.cjs +61 -0
- package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.cjs.map +1 -0
- package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.cjs +8 -0
- package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.cjs.map +1 -0
- package/cjs/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.cjs +51 -0
- package/cjs/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.cjs.map +1 -0
- package/cjs/components/Toolbar/use-toolbar-navigation.cjs +76 -0
- package/cjs/components/Toolbar/use-toolbar-navigation.cjs.map +1 -0
- package/cjs/components/Tooltip/Tooltip.cjs +9 -5
- package/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/cjs/components/Tooltip/use-tooltip.cjs +6 -3
- package/cjs/components/Tooltip/use-tooltip.cjs.map +1 -1
- package/cjs/components/Tour/Tour.cjs +283 -0
- package/cjs/components/Tour/Tour.cjs.map +1 -0
- package/cjs/components/Tour/Tour.context.cjs +25 -0
- package/cjs/components/Tour/Tour.context.cjs.map +1 -0
- package/cjs/components/Tour/Tour.module.cjs +19 -0
- package/cjs/components/Tour/Tour.module.cjs.map +1 -0
- package/cjs/components/Tour/TourBeacon/TourBeacon.cjs +54 -0
- package/cjs/components/Tour/TourBeacon/TourBeacon.cjs.map +1 -0
- package/cjs/components/Tour/TourBeaconPositioned.cjs +46 -0
- package/cjs/components/Tour/TourBeaconPositioned.cjs.map +1 -0
- package/cjs/components/Tour/TourBody/TourBody.cjs +37 -0
- package/cjs/components/Tour/TourBody/TourBody.cjs.map +1 -0
- package/cjs/components/Tour/TourCloseButton/TourCloseButton.cjs +26 -0
- package/cjs/components/Tour/TourCloseButton/TourCloseButton.cjs.map +1 -0
- package/cjs/components/Tour/TourNavigation/TourNavigation.cjs +63 -0
- package/cjs/components/Tour/TourNavigation/TourNavigation.cjs.map +1 -0
- package/cjs/components/Tour/TourOverlay/TourOverlay.cjs +70 -0
- package/cjs/components/Tour/TourOverlay/TourOverlay.cjs.map +1 -0
- package/cjs/components/Tour/TourRoot/TourRoot.cjs +125 -0
- package/cjs/components/Tour/TourRoot/TourRoot.cjs.map +1 -0
- package/cjs/components/Tour/TourStep/TourStep.cjs +10 -0
- package/cjs/components/Tour/TourStep/TourStep.cjs.map +1 -0
- package/cjs/components/Tour/TourTitle/TourTitle.cjs +38 -0
- package/cjs/components/Tour/TourTitle/TourTitle.cjs.map +1 -0
- package/cjs/components/Tour/TourTooltip/TourTooltip.cjs +87 -0
- package/cjs/components/Tour/TourTooltip/TourTooltip.cjs.map +1 -0
- package/cjs/components/Tour/get-overlay-hit-path.cjs +17 -0
- package/cjs/components/Tour/get-overlay-hit-path.cjs.map +1 -0
- package/cjs/components/Tour/is-element-in-view.cjs +30 -0
- package/cjs/components/Tour/is-element-in-view.cjs.map +1 -0
- package/cjs/components/Tour/press-aware-auto-update.cjs +38 -0
- package/cjs/components/Tour/press-aware-auto-update.cjs.map +1 -0
- package/cjs/components/Tour/use-target-rect.cjs +61 -0
- package/cjs/components/Tour/use-target-rect.cjs.map +1 -0
- package/cjs/components/Tour/use-tooltip-auto-focus.cjs +34 -0
- package/cjs/components/Tour/use-tooltip-auto-focus.cjs.map +1 -0
- package/cjs/components/Tour/use-tour-state.cjs +102 -0
- package/cjs/components/Tour/use-tour-state.cjs.map +1 -0
- package/cjs/components/Tour/use-tour.cjs +155 -0
- package/cjs/components/Tour/use-tour.cjs.map +1 -0
- package/cjs/components/TreeSelect/TreeSelect.cjs +29 -16
- package/cjs/components/TreeSelect/TreeSelect.cjs.map +1 -1
- package/cjs/index.cjs +41 -1
- package/esm/components/ActionBar/ActionBar.mjs +0 -3
- package/esm/components/ActionBar/ActionBar.mjs.map +1 -1
- package/esm/components/ActionBar/ActionBar.module.mjs.map +1 -1
- package/esm/components/AppShell/AppShell.context.mjs.map +1 -1
- package/esm/components/AppShell/AppShell.mjs +35 -8
- package/esm/components/AppShell/AppShell.mjs.map +1 -1
- package/esm/components/AppShell/AppShell.module.mjs +2 -1
- package/esm/components/AppShell/AppShell.module.mjs.map +1 -1
- package/esm/components/AppShell/AppShellAside/AppShellAside.mjs +29 -8
- package/esm/components/AppShell/AppShellAside/AppShellAside.mjs.map +1 -1
- package/esm/components/AppShell/AppShellFooter/AppShellFooter.mjs +29 -8
- package/esm/components/AppShell/AppShellFooter/AppShellFooter.mjs.map +1 -1
- package/esm/components/AppShell/AppShellHeader/AppShellHeader.mjs +29 -8
- package/esm/components/AppShell/AppShellHeader/AppShellHeader.mjs.map +1 -1
- package/esm/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.mjs +3 -2
- package/esm/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.mjs.map +1 -1
- package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.mjs +27 -16
- package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.mjs.map +1 -1
- package/esm/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.mjs +24 -16
- package/esm/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.mjs.map +1 -1
- package/esm/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.mjs +24 -16
- package/esm/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.mjs.map +1 -1
- package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs +30 -19
- package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs.map +1 -1
- package/esm/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.mjs +26 -0
- package/esm/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.mjs.map +1 -0
- package/esm/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.mjs +10 -0
- package/esm/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.mjs.map +1 -0
- package/esm/components/AppShell/AppShellMediaStyles/get-variables/get-variables.mjs +13 -5
- package/esm/components/AppShell/AppShellMediaStyles/get-variables/get-variables.mjs.map +1 -1
- package/esm/components/AppShell/AppShellNavbar/AppShellNavbar.mjs +29 -8
- package/esm/components/AppShell/AppShellNavbar/AppShellNavbar.mjs.map +1 -1
- package/esm/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.mjs +270 -0
- package/esm/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.mjs.map +1 -0
- package/esm/components/AppShell/use-app-shell-resize/clamp-resize-size.mjs +14 -0
- package/esm/components/AppShell/use-app-shell-resize/clamp-resize-size.mjs.map +1 -0
- package/esm/components/AppShell/use-app-shell-resize/resize-section-config.mjs +49 -0
- package/esm/components/AppShell/use-app-shell-resize/resize-section-config.mjs.map +1 -0
- package/esm/components/AppShell/use-app-shell-resize/safe-area-inset.mjs +12 -0
- package/esm/components/AppShell/use-app-shell-resize/safe-area-inset.mjs.map +1 -0
- package/esm/components/AppShell/use-app-shell-resize/use-app-shell-resize.mjs +127 -0
- package/esm/components/AppShell/use-app-shell-resize/use-app-shell-resize.mjs.map +1 -0
- package/esm/components/AppShell/use-resizing/use-resizing.mjs +21 -3
- package/esm/components/AppShell/use-resizing/use-resizing.mjs.map +1 -1
- package/esm/components/Checkbox/Checkbox.mjs +10 -2
- package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/esm/components/Checkbox/Checkbox.module.mjs +1 -0
- package/esm/components/Checkbox/Checkbox.module.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs +10 -2
- package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.mjs +1 -0
- package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.mjs.map +1 -1
- package/esm/components/Dialog/Dialog.mjs +0 -1
- package/esm/components/Dialog/Dialog.mjs.map +1 -1
- package/esm/components/Dialog/Dialog.module.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCard.context.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCard.mjs +34 -5
- package/esm/components/HoverCard/HoverCard.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCardDropdown/HoverCardDropdown.mjs +13 -18
- package/esm/components/HoverCard/HoverCardDropdown/HoverCardDropdown.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs +7 -24
- package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs.map +1 -1
- package/esm/components/HoverCard/use-hover-card.mjs +27 -13
- package/esm/components/HoverCard/use-hover-card.mjs.map +1 -1
- package/esm/components/Radio/Radio.mjs +10 -2
- package/esm/components/Radio/Radio.mjs.map +1 -1
- package/esm/components/Radio/Radio.module.mjs +1 -0
- package/esm/components/Radio/Radio.module.mjs.map +1 -1
- package/esm/components/Radio/RadioIndicator/RadioIndicator.mjs +10 -2
- package/esm/components/Radio/RadioIndicator/RadioIndicator.mjs.map +1 -1
- package/esm/components/Radio/RadioIndicator/RadioIndicator.module.mjs +1 -0
- package/esm/components/Radio/RadioIndicator/RadioIndicator.module.mjs.map +1 -1
- package/esm/components/Toggle/Toggle.mjs +80 -0
- package/esm/components/Toggle/Toggle.mjs.map +1 -0
- package/esm/components/Toggle/Toggle.module.mjs +7 -0
- package/esm/components/Toggle/Toggle.module.mjs.map +1 -0
- package/esm/components/Toolbar/Toolbar.context.mjs +8 -0
- package/esm/components/Toolbar/Toolbar.context.mjs.map +1 -0
- package/esm/components/Toolbar/Toolbar.mjs +107 -0
- package/esm/components/Toolbar/Toolbar.mjs.map +1 -0
- package/esm/components/Toolbar/Toolbar.module.mjs +12 -0
- package/esm/components/Toolbar/Toolbar.module.mjs.map +1 -0
- package/esm/components/Toolbar/ToolbarDivider/ToolbarDivider.mjs +31 -0
- package/esm/components/Toolbar/ToolbarDivider/ToolbarDivider.mjs.map +1 -0
- package/esm/components/Toolbar/ToolbarGroup/ToolbarGroup.mjs +31 -0
- package/esm/components/Toolbar/ToolbarGroup/ToolbarGroup.mjs.map +1 -0
- package/esm/components/Toolbar/ToolbarToggle/ToolbarToggle.mjs +47 -0
- package/esm/components/Toolbar/ToolbarToggle/ToolbarToggle.mjs.map +1 -0
- package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.mjs +8 -0
- package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.mjs.map +1 -0
- package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs +61 -0
- package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs.map +1 -0
- package/esm/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs +51 -0
- package/esm/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs.map +1 -0
- package/esm/components/Toolbar/use-toolbar-navigation.mjs +76 -0
- package/esm/components/Toolbar/use-toolbar-navigation.mjs.map +1 -0
- package/esm/components/Tooltip/Tooltip.mjs +9 -5
- package/esm/components/Tooltip/Tooltip.mjs.map +1 -1
- package/esm/components/Tooltip/use-tooltip.mjs +7 -4
- package/esm/components/Tooltip/use-tooltip.mjs.map +1 -1
- package/esm/components/Tour/Tour.context.mjs +22 -0
- package/esm/components/Tour/Tour.context.mjs.map +1 -0
- package/esm/components/Tour/Tour.mjs +283 -0
- package/esm/components/Tour/Tour.mjs.map +1 -0
- package/esm/components/Tour/Tour.module.mjs +19 -0
- package/esm/components/Tour/Tour.module.mjs.map +1 -0
- package/esm/components/Tour/TourBeacon/TourBeacon.mjs +54 -0
- package/esm/components/Tour/TourBeacon/TourBeacon.mjs.map +1 -0
- package/esm/components/Tour/TourBeaconPositioned.mjs +46 -0
- package/esm/components/Tour/TourBeaconPositioned.mjs.map +1 -0
- package/esm/components/Tour/TourBody/TourBody.mjs +37 -0
- package/esm/components/Tour/TourBody/TourBody.mjs.map +1 -0
- package/esm/components/Tour/TourCloseButton/TourCloseButton.mjs +26 -0
- package/esm/components/Tour/TourCloseButton/TourCloseButton.mjs.map +1 -0
- package/esm/components/Tour/TourNavigation/TourNavigation.mjs +63 -0
- package/esm/components/Tour/TourNavigation/TourNavigation.mjs.map +1 -0
- package/esm/components/Tour/TourOverlay/TourOverlay.mjs +70 -0
- package/esm/components/Tour/TourOverlay/TourOverlay.mjs.map +1 -0
- package/esm/components/Tour/TourRoot/TourRoot.mjs +125 -0
- package/esm/components/Tour/TourRoot/TourRoot.mjs.map +1 -0
- package/esm/components/Tour/TourStep/TourStep.mjs +10 -0
- package/esm/components/Tour/TourStep/TourStep.mjs.map +1 -0
- package/esm/components/Tour/TourTitle/TourTitle.mjs +38 -0
- package/esm/components/Tour/TourTitle/TourTitle.mjs.map +1 -0
- package/esm/components/Tour/TourTooltip/TourTooltip.mjs +87 -0
- package/esm/components/Tour/TourTooltip/TourTooltip.mjs.map +1 -0
- package/esm/components/Tour/get-overlay-hit-path.mjs +17 -0
- package/esm/components/Tour/get-overlay-hit-path.mjs.map +1 -0
- package/esm/components/Tour/is-element-in-view.mjs +30 -0
- package/esm/components/Tour/is-element-in-view.mjs.map +1 -0
- package/esm/components/Tour/press-aware-auto-update.mjs +38 -0
- package/esm/components/Tour/press-aware-auto-update.mjs.map +1 -0
- package/esm/components/Tour/use-target-rect.mjs +59 -0
- package/esm/components/Tour/use-target-rect.mjs.map +1 -0
- package/esm/components/Tour/use-tooltip-auto-focus.mjs +34 -0
- package/esm/components/Tour/use-tooltip-auto-focus.mjs.map +1 -0
- package/esm/components/Tour/use-tour-state.mjs +102 -0
- package/esm/components/Tour/use-tour-state.mjs.map +1 -0
- package/esm/components/Tour/use-tour.mjs +155 -0
- package/esm/components/Tour/use-tour.mjs.map +1 -0
- package/esm/components/TreeSelect/TreeSelect.mjs +30 -17
- package/esm/components/TreeSelect/TreeSelect.mjs.map +1 -1
- package/esm/index.mjs +21 -2
- package/lib/components/ActionBar/ActionBar.d.ts +1 -1
- package/lib/components/AppShell/AppShell.context.d.ts +4 -0
- package/lib/components/AppShell/AppShell.d.ts +5 -3
- package/lib/components/AppShell/AppShell.types.d.ts +70 -0
- package/lib/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.d.ts +6 -1
- package/lib/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.d.ts +3 -1
- package/lib/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.d.ts +3 -1
- package/lib/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.d.ts +3 -1
- package/lib/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.d.ts +3 -1
- package/lib/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.d.ts +2 -0
- package/lib/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.d.ts +1 -0
- package/lib/components/AppShell/AppShellMediaStyles/get-variables/get-variables.d.ts +6 -1
- package/lib/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.d.ts +10 -0
- package/lib/components/AppShell/index.d.ts +3 -2
- package/lib/components/AppShell/use-app-shell-resize/clamp-resize-size.d.ts +9 -0
- package/lib/components/AppShell/use-app-shell-resize/resize-section-config.d.ts +29 -0
- package/lib/components/AppShell/use-app-shell-resize/safe-area-inset.d.ts +1 -0
- package/lib/components/AppShell/use-app-shell-resize/use-app-shell-resize.d.ts +2 -0
- package/lib/components/AppShell/use-resizing/use-resizing.d.ts +2 -1
- package/lib/components/Checkbox/Checkbox.d.ts +2 -2
- package/lib/components/Checkbox/CheckboxIndicator/CheckboxIndicator.d.ts +2 -2
- package/lib/components/HoverCard/HoverCard.context.d.ts +8 -4
- package/lib/components/HoverCard/HoverCard.d.ts +41 -0
- package/lib/components/HoverCard/index.d.ts +1 -1
- package/lib/components/HoverCard/use-hover-card.d.ts +11 -0
- package/lib/components/Radio/Radio.d.ts +2 -2
- package/lib/components/Radio/RadioIndicator/RadioIndicator.d.ts +2 -2
- package/lib/components/Toggle/Toggle.d.ts +73 -0
- package/lib/components/Toggle/index.d.ts +7 -0
- package/lib/components/Toolbar/Toolbar.context.d.ts +7 -0
- package/lib/components/Toolbar/Toolbar.d.ts +58 -0
- package/lib/components/Toolbar/ToolbarDivider/ToolbarDivider.d.ts +16 -0
- package/lib/components/Toolbar/ToolbarGroup/ToolbarGroup.d.ts +16 -0
- package/lib/components/Toolbar/ToolbarToggle/ToolbarToggle.d.ts +44 -0
- package/lib/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.d.ts +7 -0
- package/lib/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.d.ts +42 -0
- package/lib/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.d.ts +22 -0
- package/lib/components/Toolbar/index.d.ts +32 -0
- package/lib/components/Toolbar/use-toolbar-navigation.d.ts +11 -0
- package/lib/components/Tooltip/Tooltip.d.ts +2 -0
- package/lib/components/Tooltip/use-tooltip.d.ts +2 -0
- package/lib/components/Tour/Tour.context.d.ts +66 -0
- package/lib/components/Tour/Tour.d.ts +144 -0
- package/lib/components/Tour/TourBeacon/TourBeacon.d.ts +23 -0
- package/lib/components/Tour/TourBeaconPositioned.d.ts +13 -0
- package/lib/components/Tour/TourBody/TourBody.d.ts +19 -0
- package/lib/components/Tour/TourCloseButton/TourCloseButton.d.ts +12 -0
- package/lib/components/Tour/TourNavigation/TourNavigation.d.ts +11 -0
- package/lib/components/Tour/TourOverlay/TourOverlay.d.ts +22 -0
- package/lib/components/Tour/TourRoot/TourRoot.d.ts +72 -0
- package/lib/components/Tour/TourStep/TourStep.d.ts +30 -0
- package/lib/components/Tour/TourTitle/TourTitle.d.ts +19 -0
- package/lib/components/Tour/TourTooltip/TourTooltip.d.ts +29 -0
- package/lib/components/Tour/get-overlay-hit-path.d.ts +2 -0
- package/lib/components/Tour/index.d.ts +23 -0
- package/lib/components/Tour/is-element-in-view.d.ts +1 -0
- package/lib/components/Tour/press-aware-auto-update.d.ts +2 -0
- package/lib/components/Tour/use-target-rect.d.ts +13 -0
- package/lib/components/Tour/use-tooltip-auto-focus.d.ts +7 -0
- package/lib/components/Tour/use-tour-state.d.ts +23 -0
- package/lib/components/Tour/use-tour.d.ts +40 -0
- package/lib/components/TreeSelect/TreeSelect.d.ts +14 -0
- package/lib/components/TreeSelect/index.d.ts +2 -2
- package/lib/components/index.d.ts +3 -0
- package/package.json +5 -5
- package/styles/ActionBar.css +1 -0
- package/styles/ActionBar.layer.css +1 -0
- package/styles/AppShell.css +68 -0
- package/styles/AppShell.layer.css +68 -0
- package/styles/Checkbox.css +20 -0
- package/styles/Checkbox.layer.css +20 -0
- package/styles/CheckboxIndicator.css +16 -0
- package/styles/CheckboxIndicator.layer.css +16 -0
- package/styles/Dialog.css +1 -0
- package/styles/Dialog.layer.css +1 -0
- package/styles/Radio.css +10 -0
- package/styles/Radio.layer.css +10 -0
- package/styles/RadioIndicator.css +11 -0
- package/styles/RadioIndicator.layer.css +11 -0
- package/styles/Toggle.css +98 -0
- package/styles/Toggle.layer.css +99 -0
- package/styles/Toolbar.css +220 -0
- package/styles/Toolbar.layer.css +221 -0
- package/styles/Tour.css +127 -0
- package/styles/Tour.layer.css +128 -0
- package/styles.css +575 -0
- package/styles.layer.css +575 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarToggle.cjs","names":["polymorphicFactory","useProps","useToolbarContext","Box","classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggle/ToolbarToggle.tsx"],"sourcesContent":["import {\n Box,\n BoxComponentProps,\n CompoundStylesApiProps,\n polymorphicFactory,\n PolymorphicFactory,\n useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleStylesNames = 'toggle';\n\nexport interface ToolbarToggleProps\n extends BoxComponentProps, CompoundStylesApiProps<ToolbarToggleFactory> {\n /** If set, the toggle is disabled */\n disabled?: boolean;\n\n /** If set, the toggle is displayed in active state */\n active?: boolean;\n\n /** If set, the toggle width adjusts to content instead of being square, `false` by default */\n autoWidth?: boolean;\n}\n\nexport type ToolbarToggleFactory = PolymorphicFactory<{\n props: ToolbarToggleProps;\n defaultRef: HTMLButtonElement;\n defaultComponent: 'button';\n stylesNames: ToolbarToggleStylesNames;\n compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarToggleProps> = {};\n\nexport const ToolbarToggle = polymorphicFactory<ToolbarToggleFactory>(\n (_props: ToolbarToggleProps & { component?: any }) => {\n const props = useProps('ToolbarToggle', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n disabled,\n active,\n autoWidth,\n children,\n component,\n onClick,\n ...others\n } = props as typeof props & {\n children?: React.ReactNode;\n component?: any;\n onClick?: React.MouseEventHandler<HTMLElement>;\n };\n const ctx = useToolbarContext();\n\n return (\n <Box\n component={component || 'button'}\n type={!component || component === 'button' ? 'button' : undefined}\n {...others}\n {...ctx.getStyles('toggle', { className, classNames, style, styles, focusable: true })}\n data-toolbar-toggle\n data-active={active || undefined}\n data-disabled={disabled || undefined}\n data-auto-width={autoWidth || undefined}\n disabled={disabled}\n aria-disabled={disabled || undefined}\n aria-pressed={active}\n tabIndex={disabled ? -1 : 0}\n onClick={(event: React.MouseEvent<HTMLElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n }}\n >\n {children}\n </Box>\n );\n }\n);\n\nToolbarToggle.classes = classes;\nToolbarToggle.displayName = '@mantine/core/ToolbarToggle';\n"],"mappings":";;;;;;;;AAiCA,MAAM,eAA4C,CAAC;AAEnD,MAAa,gBAAgBA,4BAAAA,oBAC1B,WAAqD;CAEpD,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,QACA,WACA,UACA,WACA,SACA,GAAG,WAbSC,kBAAAA,SAAS,iBAAiB,cAAc,MAc9C;CAKR,MAAM,MAAMC,wBAAAA,kBAAkB;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAW,aAAa;EACxB,MAAM,CAAC,aAAa,cAAc,WAAW,WAAW,KAAA;EACxD,GAAI;EACJ,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;GAAQ,WAAW;EAAK,CAAC;EACrF,uBAAA;EACA,eAAa,UAAU,KAAA;EACvB,iBAAe,YAAY,KAAA;EAC3B,mBAAiB,aAAa,KAAA;EACpB;EACV,iBAAe,YAAY,KAAA;EAC3B,gBAAc;EACd,UAAU,WAAW,KAAK;EAC1B,UAAU,UAAyC;GACjD,IAAI,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GACA,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CACF;AAEA,cAAc,UAAUC,uBAAAA;AACxB,cAAc,cAAc"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
|
|
3
|
+
const require_factory = require("../../../core/factory/factory.cjs");
|
|
4
|
+
const require_Box = require("../../../core/Box/Box.cjs");
|
|
5
|
+
const require_Toolbar_context = require("../Toolbar.context.cjs");
|
|
6
|
+
const require_Toolbar_module = require("../Toolbar.module.cjs");
|
|
7
|
+
const require_ToolbarToggleGroup_context = require("./ToolbarToggleGroup.context.cjs");
|
|
8
|
+
let _mantine_hooks = require("@mantine/hooks");
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.tsx
|
|
11
|
+
const defaultProps = {};
|
|
12
|
+
function normalizeGroupValue(type, value) {
|
|
13
|
+
if (type === "single") return Array.isArray(value) ? value[0] ?? null : value ?? null;
|
|
14
|
+
if (Array.isArray(value)) return value;
|
|
15
|
+
return value == null ? [] : [value];
|
|
16
|
+
}
|
|
17
|
+
const ToolbarToggleGroup = require_factory.factory((_props) => {
|
|
18
|
+
const { classNames, className, style, styles, vars, type, value, defaultValue, onChange, disabled, children, ...others } = require_use_props.useProps("ToolbarToggleGroup", defaultProps, _props);
|
|
19
|
+
const ctx = require_Toolbar_context.useToolbarContext();
|
|
20
|
+
const [_value, handleChange] = (0, _mantine_hooks.useUncontrolled)({
|
|
21
|
+
value,
|
|
22
|
+
defaultValue,
|
|
23
|
+
finalValue: type === "single" ? null : [],
|
|
24
|
+
onChange
|
|
25
|
+
});
|
|
26
|
+
const normalizedValue = normalizeGroupValue(type, _value);
|
|
27
|
+
const handleItemChange = (itemValue) => {
|
|
28
|
+
if (type === "single") handleChange(normalizedValue === itemValue ? null : itemValue);
|
|
29
|
+
else {
|
|
30
|
+
const currentValue = normalizedValue;
|
|
31
|
+
if (currentValue.includes(itemValue)) handleChange(currentValue.filter((v) => v !== itemValue));
|
|
32
|
+
else handleChange([...currentValue, itemValue]);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarToggleGroup_context.ToolbarToggleGroupProvider, {
|
|
36
|
+
value: {
|
|
37
|
+
value: normalizedValue,
|
|
38
|
+
onChange: handleItemChange,
|
|
39
|
+
type,
|
|
40
|
+
disabled: disabled || false
|
|
41
|
+
},
|
|
42
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
|
|
43
|
+
...others,
|
|
44
|
+
role: "group",
|
|
45
|
+
...ctx.getStyles("group", {
|
|
46
|
+
className,
|
|
47
|
+
classNames,
|
|
48
|
+
style,
|
|
49
|
+
styles
|
|
50
|
+
}),
|
|
51
|
+
"data-orientation": ctx.orientation,
|
|
52
|
+
children
|
|
53
|
+
})
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
ToolbarToggleGroup.classes = require_Toolbar_module.default;
|
|
57
|
+
ToolbarToggleGroup.displayName = "@mantine/core/ToolbarToggleGroup";
|
|
58
|
+
//#endregion
|
|
59
|
+
exports.ToolbarToggleGroup = ToolbarToggleGroup;
|
|
60
|
+
|
|
61
|
+
//# sourceMappingURL=ToolbarToggleGroup.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarToggleGroup.cjs","names":["factory","useProps","useToolbarContext","useUncontrolled","currentValue","ToolbarToggleGroupProvider","Box","classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.tsx"],"sourcesContent":["import { useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport {\n ToolbarToggleGroupProvider,\n type ToolbarToggleGroupContextValue,\n} from './ToolbarToggleGroup.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleGroupStylesNames = 'group';\n\ninterface ToolbarToggleGroupBaseProps\n extends\n BoxProps,\n CompoundStylesApiProps<ToolbarToggleGroupFactory>,\n Omit<ElementProps<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n /** Disables all toggle items within this group */\n disabled?: boolean;\n\n /** `Toolbar.ToggleItem` components */\n children: React.ReactNode;\n}\n\nexport interface ToolbarToggleGroupSingleProps extends ToolbarToggleGroupBaseProps {\n /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */\n type: 'single';\n\n /** Controlled value, `null` when no item is active */\n value?: string | null;\n\n /** Uncontrolled default value */\n defaultValue?: string | null;\n\n /** Called with the new value when an item is toggled, `null` when the active item is deselected */\n onChange?: (value: string | null) => void;\n}\n\nexport interface ToolbarToggleGroupMultipleProps extends ToolbarToggleGroupBaseProps {\n /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */\n type: 'multiple';\n\n /** Controlled value, array of active item values */\n value?: string[];\n\n /** Uncontrolled default value */\n defaultValue?: string[];\n\n /** Called with the array of active item values when an item is toggled */\n onChange?: (value: string[]) => void;\n}\n\nexport type ToolbarToggleGroupProps =\n | ToolbarToggleGroupSingleProps\n | ToolbarToggleGroupMultipleProps;\n\nexport type ToolbarToggleGroupFactory = Factory<{\n props: ToolbarToggleGroupProps;\n ref: HTMLDivElement;\n stylesNames: ToolbarToggleGroupStylesNames;\n compound: true;\n}>;\n\nconst defaultProps = {} as Partial<ToolbarToggleGroupProps>;\n\nfunction normalizeGroupValue(\n type: 'single' | 'multiple',\n value: string | string[] | null | undefined\n): string | string[] | null {\n if (type === 'single') {\n return Array.isArray(value) ? (value[0] ?? null) : (value ?? null);\n }\n\n if (Array.isArray(value)) {\n return value;\n }\n\n return value == null ? [] : [value];\n}\n\nexport const ToolbarToggleGroup = factory<ToolbarToggleGroupFactory>((_props) => {\n const props = useProps('ToolbarToggleGroup', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n type,\n value,\n defaultValue,\n onChange,\n disabled,\n children,\n ...others\n } = props as ToolbarToggleGroupBaseProps & {\n type: 'single' | 'multiple';\n value?: string | string[] | null;\n defaultValue?: string | string[] | null;\n onChange?: (value: any) => void;\n };\n\n const ctx = useToolbarContext();\n\n const finalValue = type === 'single' ? null : [];\n const [_value, handleChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue,\n onChange,\n });\n\n const normalizedValue = normalizeGroupValue(type, _value);\n\n const handleItemChange = (itemValue: string) => {\n if (type === 'single') {\n const currentValue = normalizedValue as string | null;\n handleChange(currentValue === itemValue ? null : itemValue);\n } else {\n const currentValue = normalizedValue as string[];\n if (currentValue.includes(itemValue)) {\n handleChange(currentValue.filter((v) => v !== itemValue));\n } else {\n handleChange([...currentValue, itemValue]);\n }\n }\n };\n\n const contextValue: ToolbarToggleGroupContextValue = {\n value: normalizedValue,\n onChange: handleItemChange,\n type,\n disabled: disabled || false,\n };\n\n return (\n <ToolbarToggleGroupProvider value={contextValue}>\n <Box\n {...others}\n role=\"group\"\n {...ctx.getStyles('group', { className, classNames, style, styles })}\n data-orientation={ctx.orientation}\n >\n {children}\n </Box>\n </ToolbarToggleGroupProvider>\n );\n});\n\nToolbarToggleGroup.classes = classes;\nToolbarToggleGroup.displayName = '@mantine/core/ToolbarToggleGroup';\n"],"mappings":";;;;;;;;;;AAsEA,MAAM,eAAe,CAAC;AAEtB,SAAS,oBACP,MACA,OAC0B;CAC1B,IAAI,SAAS,UACX,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,MAAM,OAAS,SAAS;CAG/D,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO;CAGT,OAAO,SAAS,OAAO,CAAC,IAAI,CAAC,KAAK;AACpC;AAEA,MAAa,qBAAqBA,gBAAAA,SAAoC,WAAW;CAE/E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,cACA,UACA,UACA,UACA,GAAG,WAbSC,kBAAAA,SAAS,sBAAsB,cAAc,MAcnD;CAOR,MAAM,MAAMC,wBAAAA,kBAAkB;CAG9B,MAAM,CAAC,QAAQ,iBAAA,GAAgBC,eAAAA,gBAAAA,CAAgB;EAC7C;EACA;EACA,YAJiB,SAAS,WAAW,OAAO,CAAC;EAK7C;CACF,CAAC;CAED,MAAM,kBAAkB,oBAAoB,MAAM,MAAM;CAExD,MAAM,oBAAoB,cAAsB;EAC9C,IAAI,SAAS,UAEX,aAAaC,oBAAiB,YAAY,OAAO,SAAS;OACrD;GACL,MAAM,eAAe;GACrB,IAAI,aAAa,SAAS,SAAS,GACjC,aAAa,aAAa,QAAQ,MAAM,MAAM,SAAS,CAAC;QAExD,aAAa,CAAC,GAAG,cAAc,SAAS,CAAC;EAE7C;CACF;CASA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mCAAAA,4BAAD;EAA4B,OAAO;GAPnC,OAAO;GACP,UAAU;GACV;GACA,UAAU,YAAY;EAIwB;EAC5C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,GAAI;GACJ,MAAK;GACL,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;GAAO,CAAC;GACnE,oBAAkB,IAAI;GAErB;EACE,CAAA;CACqB,CAAA;AAEhC,CAAC;AAED,mBAAmB,UAAUC,uBAAAA;AAC7B,mBAAmB,cAAc"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.ts
|
|
3
|
+
const [ToolbarToggleGroupProvider, useToolbarToggleGroupContext] = require("../../../core/utils/create-safe-context/create-safe-context.cjs").createSafeContext("Toolbar.ToggleGroup component was not found in tree");
|
|
4
|
+
//#endregion
|
|
5
|
+
exports.ToolbarToggleGroupProvider = ToolbarToggleGroupProvider;
|
|
6
|
+
exports.useToolbarToggleGroupContext = useToolbarToggleGroupContext;
|
|
7
|
+
|
|
8
|
+
//# sourceMappingURL=ToolbarToggleGroup.context.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarToggleGroup.context.cjs","names":["createSafeContext"],"sources":["../../../../src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.ts"],"sourcesContent":["import { createSafeContext } from '../../../core';\n\nexport interface ToolbarToggleGroupContextValue {\n value: string | string[] | null;\n onChange: (itemValue: string) => void;\n type: 'single' | 'multiple';\n disabled: boolean;\n}\n\nexport const [ToolbarToggleGroupProvider, useToolbarToggleGroupContext] =\n createSafeContext<ToolbarToggleGroupContextValue>(\n 'Toolbar.ToggleGroup component was not found in tree'\n );\n"],"mappings":";;AASA,MAAa,CAAC,4BAA4B,yGACxCA,CAAAA,CAAAA,kBACE,qDACF"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
|
|
3
|
+
const require_factory = require("../../../core/factory/factory.cjs");
|
|
4
|
+
const require_Box = require("../../../core/Box/Box.cjs");
|
|
5
|
+
const require_Toolbar_context = require("../Toolbar.context.cjs");
|
|
6
|
+
const require_Toolbar_module = require("../Toolbar.module.cjs");
|
|
7
|
+
const require_ToolbarToggleGroup_context = require("../ToolbarToggleGroup/ToolbarToggleGroup.context.cjs");
|
|
8
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
+
//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.tsx
|
|
10
|
+
const defaultProps = {};
|
|
11
|
+
const ToolbarToggleItem = require_factory.factory((_props) => {
|
|
12
|
+
const { classNames, className, style, styles, vars, value, disabled, autoWidth, children, onClick, ...others } = require_use_props.useProps("ToolbarToggleItem", defaultProps, _props);
|
|
13
|
+
const ctx = require_Toolbar_context.useToolbarContext();
|
|
14
|
+
const groupCtx = require_ToolbarToggleGroup_context.useToolbarToggleGroupContext();
|
|
15
|
+
const isActive = groupCtx.type === "single" ? groupCtx.value === value : groupCtx.value.includes(value);
|
|
16
|
+
const isDisabled = disabled || groupCtx.disabled;
|
|
17
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
|
|
18
|
+
component: "button",
|
|
19
|
+
...others,
|
|
20
|
+
type: "button",
|
|
21
|
+
...ctx.getStyles("toggle", {
|
|
22
|
+
className,
|
|
23
|
+
classNames,
|
|
24
|
+
style,
|
|
25
|
+
styles,
|
|
26
|
+
focusable: true
|
|
27
|
+
}),
|
|
28
|
+
"data-toolbar-toggle": true,
|
|
29
|
+
"data-active": isActive || void 0,
|
|
30
|
+
"data-disabled": isDisabled || void 0,
|
|
31
|
+
"data-auto-width": autoWidth || void 0,
|
|
32
|
+
disabled: isDisabled,
|
|
33
|
+
tabIndex: isDisabled ? -1 : 0,
|
|
34
|
+
"aria-pressed": isActive,
|
|
35
|
+
onClick: (event) => {
|
|
36
|
+
if (isDisabled) {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
groupCtx.onChange(value);
|
|
41
|
+
onClick?.(event);
|
|
42
|
+
},
|
|
43
|
+
children
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
ToolbarToggleItem.classes = require_Toolbar_module.default;
|
|
47
|
+
ToolbarToggleItem.displayName = "@mantine/core/ToolbarToggleItem";
|
|
48
|
+
//#endregion
|
|
49
|
+
exports.ToolbarToggleItem = ToolbarToggleItem;
|
|
50
|
+
|
|
51
|
+
//# sourceMappingURL=ToolbarToggleItem.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarToggleItem.cjs","names":["factory","useProps","useToolbarContext","useToolbarToggleGroupContext","Box","classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport { useToolbarToggleGroupContext } from '../ToolbarToggleGroup/ToolbarToggleGroup.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleItemStylesNames = 'toggle';\n\nexport interface ToolbarToggleItemProps\n extends BoxProps, CompoundStylesApiProps<ToolbarToggleItemFactory>, ElementProps<'button'> {\n /** Value used to identify the item in ToggleGroup */\n value: string;\n\n /** If set, the toggle item is disabled */\n disabled?: boolean;\n\n /** If set, the toggle item width adjusts to content instead of being square, `false` by default */\n autoWidth?: boolean;\n}\n\nexport type ToolbarToggleItemFactory = Factory<{\n props: ToolbarToggleItemProps;\n ref: HTMLButtonElement;\n stylesNames: ToolbarToggleItemStylesNames;\n compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarToggleItemProps> = {};\n\nexport const ToolbarToggleItem = factory<ToolbarToggleItemFactory>((_props) => {\n const props = useProps('ToolbarToggleItem', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n value,\n disabled,\n autoWidth,\n children,\n onClick,\n ...others\n } = props;\n const ctx = useToolbarContext();\n const groupCtx = useToolbarToggleGroupContext();\n\n const isActive =\n groupCtx.type === 'single'\n ? groupCtx.value === value\n : (groupCtx.value as string[]).includes(value);\n\n const isDisabled = disabled || groupCtx.disabled;\n\n return (\n <Box\n component=\"button\"\n {...others}\n type=\"button\"\n {...ctx.getStyles('toggle', { className, classNames, style, styles, focusable: true })}\n data-toolbar-toggle\n data-active={isActive || undefined}\n data-disabled={isDisabled || undefined}\n data-auto-width={autoWidth || undefined}\n disabled={isDisabled}\n tabIndex={isDisabled ? -1 : 0}\n aria-pressed={isActive}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n event.preventDefault();\n return;\n }\n groupCtx.onChange(value);\n onClick?.(event);\n }}\n >\n {children}\n </Box>\n );\n});\n\nToolbarToggleItem.classes = classes;\nToolbarToggleItem.displayName = '@mantine/core/ToolbarToggleItem';\n"],"mappings":";;;;;;;;;AAkCA,MAAM,eAAgD,CAAC;AAEvD,MAAa,oBAAoBA,gBAAAA,SAAmC,WAAW;CAE7E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,UACA,WACA,UACA,SACA,GAAG,WAZSC,kBAAAA,SAAS,qBAAqB,cAAc,MAalD;CACR,MAAM,MAAMC,wBAAAA,kBAAkB;CAC9B,MAAM,WAAWC,mCAAAA,6BAA6B;CAE9C,MAAM,WACJ,SAAS,SAAS,WACd,SAAS,UAAU,QAClB,SAAS,MAAmB,SAAS,KAAK;CAEjD,MAAM,aAAa,YAAY,SAAS;CAExC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,GAAI;EACJ,MAAK;EACL,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;GAAQ,WAAW;EAAK,CAAC;EACrF,uBAAA;EACA,eAAa,YAAY,KAAA;EACzB,iBAAe,cAAc,KAAA;EAC7B,mBAAiB,aAAa,KAAA;EAC9B,UAAU;EACV,UAAU,aAAa,KAAK;EAC5B,gBAAc;EACd,UAAU,UAA+C;GACvD,IAAI,YAAY;IACd,MAAM,eAAe;IACrB;GACF;GACA,SAAS,SAAS,KAAK;GACvB,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,UAAUC,uBAAAA;AAC5B,kBAAkB,cAAc"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
let react = require("react");
|
|
3
|
+
//#region packages/@mantine/core/src/components/Toolbar/use-toolbar-navigation.ts
|
|
4
|
+
function useToolbarNavigation({ orientation, loop, dir }) {
|
|
5
|
+
const toolbarRef = (0, react.useRef)(null);
|
|
6
|
+
const activeItemRef = (0, react.useRef)(null);
|
|
7
|
+
const getFocusableItems = (0, react.useCallback)(() => {
|
|
8
|
+
if (!toolbarRef.current) return [];
|
|
9
|
+
return Array.from(toolbarRef.current.querySelectorAll("[data-toolbar-toggle]:not([data-disabled])"));
|
|
10
|
+
}, []);
|
|
11
|
+
const syncTabIndex = (0, react.useCallback)(() => {
|
|
12
|
+
const items = getFocusableItems();
|
|
13
|
+
const tabStop = activeItemRef.current && items.includes(activeItemRef.current) ? activeItemRef.current : items[0];
|
|
14
|
+
items.forEach((item) => {
|
|
15
|
+
item.setAttribute("tabindex", item === tabStop ? "0" : "-1");
|
|
16
|
+
});
|
|
17
|
+
}, [getFocusableItems]);
|
|
18
|
+
(0, react.useEffect)(() => {
|
|
19
|
+
syncTabIndex();
|
|
20
|
+
const node = toolbarRef.current;
|
|
21
|
+
if (!node) return;
|
|
22
|
+
const observer = new MutationObserver(syncTabIndex);
|
|
23
|
+
observer.observe(node, {
|
|
24
|
+
childList: true,
|
|
25
|
+
subtree: true,
|
|
26
|
+
attributeFilter: ["data-disabled"]
|
|
27
|
+
});
|
|
28
|
+
return () => observer.disconnect();
|
|
29
|
+
}, [syncTabIndex]);
|
|
30
|
+
return {
|
|
31
|
+
toolbarRef,
|
|
32
|
+
handleKeyDown: (0, react.useCallback)((event) => {
|
|
33
|
+
const items = getFocusableItems();
|
|
34
|
+
if (items.length === 0) return;
|
|
35
|
+
const currentIndex = items.findIndex((item) => item === document.activeElement);
|
|
36
|
+
if (currentIndex === -1) return;
|
|
37
|
+
let nextIndex = null;
|
|
38
|
+
const forwardKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
|
|
39
|
+
const backwardKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
|
|
40
|
+
const isForward = orientation === "horizontal" && event.key === forwardKey || orientation === "vertical" && event.key === "ArrowDown";
|
|
41
|
+
const isBackward = orientation === "horizontal" && event.key === backwardKey || orientation === "vertical" && event.key === "ArrowUp";
|
|
42
|
+
if (isForward) {
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
if (currentIndex < items.length - 1) nextIndex = currentIndex + 1;
|
|
45
|
+
else if (loop) nextIndex = 0;
|
|
46
|
+
} else if (isBackward) {
|
|
47
|
+
event.preventDefault();
|
|
48
|
+
if (currentIndex > 0) nextIndex = currentIndex - 1;
|
|
49
|
+
else if (loop) nextIndex = items.length - 1;
|
|
50
|
+
} else if (event.key === "Home") {
|
|
51
|
+
event.preventDefault();
|
|
52
|
+
nextIndex = 0;
|
|
53
|
+
} else if (event.key === "End") {
|
|
54
|
+
event.preventDefault();
|
|
55
|
+
nextIndex = items.length - 1;
|
|
56
|
+
}
|
|
57
|
+
if (nextIndex !== null) items[nextIndex].focus();
|
|
58
|
+
}, [
|
|
59
|
+
orientation,
|
|
60
|
+
loop,
|
|
61
|
+
dir,
|
|
62
|
+
getFocusableItems
|
|
63
|
+
]),
|
|
64
|
+
handleItemFocus: (0, react.useCallback)((event) => {
|
|
65
|
+
const target = event.target;
|
|
66
|
+
if (getFocusableItems().includes(target)) {
|
|
67
|
+
activeItemRef.current = target;
|
|
68
|
+
syncTabIndex();
|
|
69
|
+
}
|
|
70
|
+
}, [getFocusableItems, syncTabIndex])
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
//#endregion
|
|
74
|
+
exports.useToolbarNavigation = useToolbarNavigation;
|
|
75
|
+
|
|
76
|
+
//# sourceMappingURL=use-toolbar-navigation.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-toolbar-navigation.cjs","names":["useRef","useCallback"],"sources":["../../../src/components/Toolbar/use-toolbar-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface UseToolbarNavigationOptions {\n orientation: 'horizontal' | 'vertical';\n loop: boolean;\n dir: 'ltr' | 'rtl';\n}\n\nexport function useToolbarNavigation({ orientation, loop, dir }: UseToolbarNavigationOptions) {\n const toolbarRef = useRef<HTMLDivElement>(null);\n const activeItemRef = useRef<HTMLElement | null>(null);\n\n const getFocusableItems = useCallback((): HTMLElement[] => {\n if (!toolbarRef.current) {\n return [];\n }\n return Array.from(\n toolbarRef.current.querySelectorAll<HTMLElement>('[data-toolbar-toggle]:not([data-disabled])')\n );\n }, []);\n\n const syncTabIndex = useCallback(() => {\n const items = getFocusableItems();\n const tabStop =\n activeItemRef.current && items.includes(activeItemRef.current)\n ? activeItemRef.current\n : items[0];\n\n items.forEach((item) => {\n item.setAttribute('tabindex', item === tabStop ? '0' : '-1');\n });\n }, [getFocusableItems]);\n\n useEffect(() => {\n syncTabIndex();\n\n const node = toolbarRef.current;\n if (!node) {\n return undefined;\n }\n\n const observer = new MutationObserver(syncTabIndex);\n observer.observe(node, { childList: true, subtree: true, attributeFilter: ['data-disabled'] });\n\n return () => observer.disconnect();\n }, [syncTabIndex]);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const items = getFocusableItems();\n if (items.length === 0) {\n return;\n }\n\n const currentIndex = items.findIndex((item) => item === document.activeElement);\n if (currentIndex === -1) {\n return;\n }\n\n let nextIndex: number | null = null;\n\n const forwardKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n const backwardKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n\n const isForward =\n (orientation === 'horizontal' && event.key === forwardKey) ||\n (orientation === 'vertical' && event.key === 'ArrowDown');\n\n const isBackward =\n (orientation === 'horizontal' && event.key === backwardKey) ||\n (orientation === 'vertical' && event.key === 'ArrowUp');\n\n if (isForward) {\n event.preventDefault();\n if (currentIndex < items.length - 1) {\n nextIndex = currentIndex + 1;\n } else if (loop) {\n nextIndex = 0;\n }\n } else if (isBackward) {\n event.preventDefault();\n if (currentIndex > 0) {\n nextIndex = currentIndex - 1;\n } else if (loop) {\n nextIndex = items.length - 1;\n }\n } else if (event.key === 'Home') {\n event.preventDefault();\n nextIndex = 0;\n } else if (event.key === 'End') {\n event.preventDefault();\n nextIndex = items.length - 1;\n }\n\n if (nextIndex !== null) {\n items[nextIndex].focus();\n }\n },\n [orientation, loop, dir, getFocusableItems]\n );\n\n const handleItemFocus = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n const target = event.target as HTMLElement;\n if (getFocusableItems().includes(target)) {\n activeItemRef.current = target;\n syncTabIndex();\n }\n },\n [getFocusableItems, syncTabIndex]\n );\n\n return { toolbarRef, handleKeyDown, handleItemFocus };\n}\n"],"mappings":";;;AAQA,SAAgB,qBAAqB,EAAE,aAAa,MAAM,OAAoC;CAC5F,MAAM,cAAA,GAAaA,MAAAA,OAAAA,CAAuB,IAAI;CAC9C,MAAM,iBAAA,GAAgBA,MAAAA,OAAAA,CAA2B,IAAI;CAErD,MAAM,qBAAA,GAAoBC,MAAAA,YAAAA,OAAiC;EACzD,IAAI,CAAC,WAAW,SACd,OAAO,CAAC;EAEV,OAAO,MAAM,KACX,WAAW,QAAQ,iBAA8B,4CAA4C,CAC/F;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAA,GAAeA,MAAAA,YAAAA,OAAkB;EACrC,MAAM,QAAQ,kBAAkB;EAChC,MAAM,UACJ,cAAc,WAAW,MAAM,SAAS,cAAc,OAAO,IACzD,cAAc,UACd,MAAM;EAEZ,MAAM,SAAS,SAAS;GACtB,KAAK,aAAa,YAAY,SAAS,UAAU,MAAM,IAAI;EAC7D,CAAC;CACH,GAAG,CAAC,iBAAiB,CAAC;CAEtB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,aAAa;EAEb,MAAM,OAAO,WAAW;EACxB,IAAI,CAAC,MACH;EAGF,MAAM,WAAW,IAAI,iBAAiB,YAAY;EAClD,SAAS,QAAQ,MAAM;GAAE,WAAW;GAAM,SAAS;GAAM,iBAAiB,CAAC,eAAe;EAAE,CAAC;EAE7F,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,YAAY,CAAC;CAmEjB,OAAO;EAAE;EAAY,gBAAA,GAjECA,MAAAA,YAAAA,EACnB,UAA+C;GAC9C,MAAM,QAAQ,kBAAkB;GAChC,IAAI,MAAM,WAAW,GACnB;GAGF,MAAM,eAAe,MAAM,WAAW,SAAS,SAAS,SAAS,aAAa;GAC9E,IAAI,iBAAiB,IACnB;GAGF,IAAI,YAA2B;GAE/B,MAAM,aAAa,QAAQ,QAAQ,cAAc;GACjD,MAAM,cAAc,QAAQ,QAAQ,eAAe;GAEnD,MAAM,YACH,gBAAgB,gBAAgB,MAAM,QAAQ,cAC9C,gBAAgB,cAAc,MAAM,QAAQ;GAE/C,MAAM,aACH,gBAAgB,gBAAgB,MAAM,QAAQ,eAC9C,gBAAgB,cAAc,MAAM,QAAQ;GAE/C,IAAI,WAAW;IACb,MAAM,eAAe;IACrB,IAAI,eAAe,MAAM,SAAS,GAChC,YAAY,eAAe;SACtB,IAAI,MACT,YAAY;GAEhB,OAAO,IAAI,YAAY;IACrB,MAAM,eAAe;IACrB,IAAI,eAAe,GACjB,YAAY,eAAe;SACtB,IAAI,MACT,YAAY,MAAM,SAAS;GAE/B,OAAO,IAAI,MAAM,QAAQ,QAAQ;IAC/B,MAAM,eAAe;IACrB,YAAY;GACd,OAAO,IAAI,MAAM,QAAQ,OAAO;IAC9B,MAAM,eAAe;IACrB,YAAY,MAAM,SAAS;GAC7B;GAEA,IAAI,cAAc,MAChB,MAAM,UAAU,CAAC,MAAM;EAE3B,GACA;GAAC;GAAa;GAAM;GAAK;EAAiB,CAcX;EAAG,kBAAA,GAXZA,MAAAA,YAAAA,EACrB,UAA4C;GAC3C,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG;IACxC,cAAc,UAAU;IACxB,aAAa;GACf;EACF,GACA,CAAC,mBAAmB,YAAY,CAGgB;CAAE;AACtD"}
|
|
@@ -49,7 +49,8 @@ const defaultProps = {
|
|
|
49
49
|
flip: true,
|
|
50
50
|
shift: true,
|
|
51
51
|
inline: false
|
|
52
|
-
}
|
|
52
|
+
},
|
|
53
|
+
hideDetached: true
|
|
53
54
|
};
|
|
54
55
|
const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, variant, autoContrast }) => {
|
|
55
56
|
const colors = theme.variantColorResolver({
|
|
@@ -66,7 +67,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { r
|
|
|
66
67
|
});
|
|
67
68
|
const Tooltip = require_factory.factory((_props) => {
|
|
68
69
|
const props = require_use_props.useProps("Tooltip", defaultProps, _props);
|
|
69
|
-
const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, interactive, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, ref, ...others } = props;
|
|
70
|
+
const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, interactive, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, hideDetached, ref, ...others } = props;
|
|
70
71
|
const { dir } = require_DirectionProvider.useDirection();
|
|
71
72
|
const arrowRef = (0, react.useRef)(null);
|
|
72
73
|
const tooltip = require_use_tooltip.useTooltip({
|
|
@@ -83,7 +84,8 @@ const Tooltip = require_factory.factory((_props) => {
|
|
|
83
84
|
offset: typeof offset === "number" ? offset + (withArrow ? arrowSize / 2 : 0) : offset,
|
|
84
85
|
inline,
|
|
85
86
|
strategy: floatingStrategy,
|
|
86
|
-
middlewares
|
|
87
|
+
middlewares,
|
|
88
|
+
hideDetached
|
|
87
89
|
});
|
|
88
90
|
(0, react.useEffect)(() => {
|
|
89
91
|
const targetNode = target instanceof HTMLElement ? target : typeof target === "string" ? document.querySelector(target) : target?.current || null;
|
|
@@ -142,7 +144,8 @@ const Tooltip = require_factory.factory((_props) => {
|
|
|
142
144
|
...mergeStyles,
|
|
143
145
|
zIndex,
|
|
144
146
|
top: tooltip.y ?? 0,
|
|
145
|
-
left: tooltip.x ?? 0
|
|
147
|
+
left: tooltip.x ?? 0,
|
|
148
|
+
...tooltip.referenceHidden ? { display: "none" } : null
|
|
146
149
|
}
|
|
147
150
|
}),
|
|
148
151
|
children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingArrow.FloatingArrow, {
|
|
@@ -192,7 +195,8 @@ const Tooltip = require_factory.factory((_props) => {
|
|
|
192
195
|
...mergeStyles,
|
|
193
196
|
zIndex,
|
|
194
197
|
top: tooltip.y ?? 0,
|
|
195
|
-
left: tooltip.x ?? 0
|
|
198
|
+
left: tooltip.x ?? 0,
|
|
199
|
+
...tooltip.referenceHidden ? { display: "none" } : null
|
|
196
200
|
}
|
|
197
201
|
}),
|
|
198
202
|
children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingArrow.FloatingArrow, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useRef","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","useMergedRef","getRefProp","cloneElement","cx","classes","TooltipFloating","TooltipGroup"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingArrow,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getArrowMergeDropdownStyles,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n TooltipGroup,\n type TooltipGroupProps,\n type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n /** Called when tooltip position changes */\n onPositionChange?: (position: FloatingPosition) => void;\n\n /** Open delay in ms */\n openDelay?: number;\n\n /** Close delay in ms @default 0 */\n closeDelay?: number;\n\n /** Controlled opened state */\n opened?: boolean;\n\n /** Uncontrolled tooltip initial opened state */\n defaultOpened?: boolean;\n\n /** Space between target element and tooltip in px @default 5 */\n offset?: number | FloatingAxesOffsets;\n\n /** If set, the tooltip has an arrow @default false */\n withArrow?: boolean;\n\n /** Arrow size in px @default 4 */\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 relative to the tooltip @default side */\n arrowPosition?: ArrowPosition;\n\n /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n events?: { hover: boolean; focus: boolean; touch: boolean };\n\n /** If set, the tooltip stays open while the pointer is over it @default false */\n interactive?: boolean;\n\n /** Must be set if the tooltip target is an inline element */\n inline?: boolean;\n\n /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n keepMounted?: boolean;\n\n /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n floatingStrategy?: FloatingStrategy;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** Selector, ref of an element or element itself that should be used for positioning */\n target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n}\n\nexport type TooltipFactory = Factory<{\n props: TooltipProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n staticComponents: {\n Floating: typeof TooltipFloating;\n Group: typeof TooltipGroup;\n };\n}>;\n\nconst defaultProps = {\n position: 'top',\n refProp: 'ref',\n withinPortal: true,\n arrowSize: 4,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n offset: 5,\n transitionProps: { duration: 100, transition: 'fade' },\n events: { hover: true, focus: false, touch: false },\n zIndex: getDefaultZIndex('popover'),\n middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n (theme, { radius, color, variant, autoContrast }) => {\n const colors = theme.variantColorResolver({\n theme,\n color: color || theme.primaryColor,\n autoContrast,\n variant: variant || 'filled',\n });\n\n return {\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? colors.background : undefined,\n '--tooltip-color': color ? colors.color : undefined,\n },\n };\n }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n const props = useProps('Tooltip', defaultProps, _props);\n const {\n children,\n position,\n refProp,\n label,\n openDelay,\n closeDelay,\n onPositionChange,\n opened,\n defaultOpened,\n withinPortal,\n radius,\n color,\n classNames,\n styles,\n unstyled,\n style,\n className,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n offset,\n transitionProps,\n multiline,\n events,\n interactive,\n zIndex,\n disabled,\n onClick,\n onMouseEnter,\n onMouseLeave,\n inline,\n variant,\n keepMounted,\n vars,\n portalProps,\n mod,\n floatingStrategy,\n middlewares,\n autoContrast,\n attributes,\n target,\n ref,\n ...others\n } = props;\n\n const { dir } = useDirection();\n const arrowRef = useRef<HTMLDivElement>(null);\n\n const tooltip = useTooltip({\n position: getFloatingPosition(dir, position),\n closeDelay,\n openDelay,\n onPositionChange,\n opened,\n defaultOpened,\n events,\n interactive,\n arrowRef,\n arrowOffset,\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n inline,\n strategy: floatingStrategy,\n middlewares,\n });\n\n useEffect(() => {\n const targetNode =\n target instanceof HTMLElement\n ? target\n : typeof target === 'string'\n ? document.querySelector(target)\n : target?.current || null;\n\n if (targetNode) {\n tooltip.reference(targetNode);\n }\n }, [target, tooltip]);\n\n const getStyles = useStyles<TooltipFactory>({\n name: 'Tooltip',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'tooltip',\n vars,\n varsResolver,\n });\n\n const child = getSingleElementChild(children);\n if (!target && !child) {\n throw new Error(\n '[@mantine/core] Tooltip 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 tooltipStyles = getStyles('tooltip');\n const interactiveMod = interactive && !disabled && !!tooltip.opened;\n const mergeStyles =\n arrowPosition === 'merge' && withArrow\n ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n : undefined;\n\n if (target) {\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' || undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltipStyles}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: tooltipStyles.className,\n style: {\n ...tooltipStyles.style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize!}\n arrowOffset={arrowOffset!}\n arrowRadius={arrowRadius!}\n arrowPosition={arrowPosition!}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n </>\n );\n }\n\n // fallback to children-based approach\n const childProps = child!.props as any;\n const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' || undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: getStyles('tooltip').className,\n style: {\n ...getStyles('tooltip').style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize}\n arrowOffset={arrowOffset}\n arrowRadius={arrowRadius}\n arrowPosition={arrowPosition}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n\n {cloneElement(\n child!,\n tooltip.getReferenceProps({\n onClick,\n onMouseEnter,\n onMouseLeave,\n onMouseMove: props.onMouseMove,\n onPointerDown: props.onPointerDown,\n onPointerEnter: props.onPointerEnter,\n ...childProps,\n className: cx(className, childProps.className),\n [refProp]: targetRef,\n })\n )}\n </>\n );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n export type Props = TooltipProps;\n export type Factory = TooltipFactory;\n export type CssVariables = TooltipCssVariables;\n export type StylesNames = TooltipStylesNames;\n\n export namespace Group {\n export type Props = TooltipGroupProps;\n export type ContextValue = TooltipGroupContextValue;\n }\n\n export namespace Floating {\n export type Props = TooltipFloatingProps;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useRef","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","useMergedRef","getRefProp","cloneElement","cx","classes","TooltipFloating","TooltipGroup"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingArrow,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getArrowMergeDropdownStyles,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n TooltipGroup,\n type TooltipGroupProps,\n type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n /** Called when tooltip position changes */\n onPositionChange?: (position: FloatingPosition) => void;\n\n /** Open delay in ms */\n openDelay?: number;\n\n /** Close delay in ms @default 0 */\n closeDelay?: number;\n\n /** Controlled opened state */\n opened?: boolean;\n\n /** Uncontrolled tooltip initial opened state */\n defaultOpened?: boolean;\n\n /** Space between target element and tooltip in px @default 5 */\n offset?: number | FloatingAxesOffsets;\n\n /** If set, the tooltip has an arrow @default false */\n withArrow?: boolean;\n\n /** Arrow size in px @default 4 */\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 relative to the tooltip @default side */\n arrowPosition?: ArrowPosition;\n\n /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n events?: { hover: boolean; focus: boolean; touch: boolean };\n\n /** If set, the tooltip stays open while the pointer is over it @default false */\n interactive?: boolean;\n\n /** Must be set if the tooltip target is an inline element */\n inline?: boolean;\n\n /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n keepMounted?: boolean;\n\n /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n floatingStrategy?: FloatingStrategy;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** Selector, ref of an element or element itself that should be used for positioning */\n target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n\n /** If set, the tooltip is hidden when the target element is removed from the DOM, hidden with `display: none` or scrolled out of the visible area. Has no effect on `Tooltip.Floating` @default true */\n hideDetached?: boolean;\n}\n\nexport type TooltipFactory = Factory<{\n props: TooltipProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n staticComponents: {\n Floating: typeof TooltipFloating;\n Group: typeof TooltipGroup;\n };\n}>;\n\nconst defaultProps = {\n position: 'top',\n refProp: 'ref',\n withinPortal: true,\n arrowSize: 4,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n offset: 5,\n transitionProps: { duration: 100, transition: 'fade' },\n events: { hover: true, focus: false, touch: false },\n zIndex: getDefaultZIndex('popover'),\n middlewares: { flip: true, shift: true, inline: false },\n hideDetached: true,\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n (theme, { radius, color, variant, autoContrast }) => {\n const colors = theme.variantColorResolver({\n theme,\n color: color || theme.primaryColor,\n autoContrast,\n variant: variant || 'filled',\n });\n\n return {\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? colors.background : undefined,\n '--tooltip-color': color ? colors.color : undefined,\n },\n };\n }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n const props = useProps('Tooltip', defaultProps, _props);\n const {\n children,\n position,\n refProp,\n label,\n openDelay,\n closeDelay,\n onPositionChange,\n opened,\n defaultOpened,\n withinPortal,\n radius,\n color,\n classNames,\n styles,\n unstyled,\n style,\n className,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n offset,\n transitionProps,\n multiline,\n events,\n interactive,\n zIndex,\n disabled,\n onClick,\n onMouseEnter,\n onMouseLeave,\n inline,\n variant,\n keepMounted,\n vars,\n portalProps,\n mod,\n floatingStrategy,\n middlewares,\n autoContrast,\n attributes,\n target,\n hideDetached,\n ref,\n ...others\n } = props;\n\n const { dir } = useDirection();\n const arrowRef = useRef<HTMLDivElement>(null);\n\n const tooltip = useTooltip({\n position: getFloatingPosition(dir, position),\n closeDelay,\n openDelay,\n onPositionChange,\n opened,\n defaultOpened,\n events,\n interactive,\n arrowRef,\n arrowOffset,\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n inline,\n strategy: floatingStrategy,\n middlewares,\n hideDetached,\n });\n\n useEffect(() => {\n const targetNode =\n target instanceof HTMLElement\n ? target\n : typeof target === 'string'\n ? document.querySelector(target)\n : target?.current || null;\n\n if (targetNode) {\n tooltip.reference(targetNode);\n }\n }, [target, tooltip]);\n\n const getStyles = useStyles<TooltipFactory>({\n name: 'Tooltip',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'tooltip',\n vars,\n varsResolver,\n });\n\n const child = getSingleElementChild(children);\n if (!target && !child) {\n throw new Error(\n '[@mantine/core] Tooltip 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 tooltipStyles = getStyles('tooltip');\n const interactiveMod = interactive && !disabled && !!tooltip.opened;\n const mergeStyles =\n arrowPosition === 'merge' && withArrow\n ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n : undefined;\n\n if (target) {\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' || undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltipStyles}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: tooltipStyles.className,\n style: {\n ...tooltipStyles.style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n ...(tooltip.referenceHidden ? { display: 'none' } : null),\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize!}\n arrowOffset={arrowOffset!}\n arrowRadius={arrowRadius!}\n arrowPosition={arrowPosition!}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n </>\n );\n }\n\n // fallback to children-based approach\n const childProps = child!.props as any;\n const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' || undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: getStyles('tooltip').className,\n style: {\n ...getStyles('tooltip').style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n ...(tooltip.referenceHidden ? { display: 'none' } : null),\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize}\n arrowOffset={arrowOffset}\n arrowRadius={arrowRadius}\n arrowPosition={arrowPosition}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n\n {cloneElement(\n child!,\n tooltip.getReferenceProps({\n onClick,\n onMouseEnter,\n onMouseLeave,\n onMouseMove: props.onMouseMove,\n onPointerDown: props.onPointerDown,\n onPointerEnter: props.onPointerEnter,\n ...childProps,\n className: cx(className, childProps.className),\n [refProp]: targetRef,\n })\n )}\n </>\n );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n export type Props = TooltipProps;\n export type Factory = TooltipFactory;\n export type CssVariables = TooltipCssVariables;\n export type StylesNames = TooltipStylesNames;\n\n export namespace Group {\n export type Props = TooltipGroupProps;\n export type ContextValue = TooltipGroupContextValue;\n }\n\n export namespace Floating {\n export type Props = TooltipFloatingProps;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
const require_Mantine_context = require("../../core/MantineProvider/Mantine.context.cjs");
|
|
2
3
|
const require_TooltipGroup = require("./TooltipGroup/TooltipGroup.cjs");
|
|
3
4
|
let react = require("react");
|
|
4
5
|
let _mantine_hooks = require("@mantine/hooks");
|
|
@@ -16,7 +17,7 @@ function getDefaultMiddlewares(middlewares) {
|
|
|
16
17
|
}
|
|
17
18
|
function getTooltipMiddlewares(settings) {
|
|
18
19
|
const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);
|
|
19
|
-
const middlewares = [(0, _floating_ui_react.offset)(settings.offset)];
|
|
20
|
+
const middlewares = [(0, _floating_ui_react.offset)(settings.offset), (0, _floating_ui_react.hide)()];
|
|
20
21
|
if (middlewaresOptions.shift) middlewares.push((0, _floating_ui_react.shift)(typeof middlewaresOptions.shift === "boolean" ? { padding: 8 } : {
|
|
21
22
|
padding: 8,
|
|
22
23
|
...middlewaresOptions.shift
|
|
@@ -35,11 +36,12 @@ function useTooltip(settings) {
|
|
|
35
36
|
const opened = typeof settings.opened === "boolean" ? settings.opened : uncontrolledOpened;
|
|
36
37
|
const withinGroup = (0, react.use)(require_TooltipGroup.TooltipGroupContext).withinGroup;
|
|
37
38
|
const uid = (0, _mantine_hooks.useId)();
|
|
39
|
+
const env = require_Mantine_context.useMantineEnv();
|
|
38
40
|
const onChange = (0, react.useCallback)((_opened) => {
|
|
39
41
|
setUncontrolledOpened(_opened);
|
|
40
42
|
if (_opened) setCurrentId(uid);
|
|
41
43
|
}, [uid]);
|
|
42
|
-
const { x, y, context, refs, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} } } = (0, _floating_ui_react.useFloating)({
|
|
44
|
+
const { x, y, context, refs, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideData } } = (0, _floating_ui_react.useFloating)({
|
|
43
45
|
strategy: settings.strategy,
|
|
44
46
|
placement: settings.position,
|
|
45
47
|
open: opened,
|
|
@@ -84,7 +86,8 @@ function useTooltip(settings) {
|
|
|
84
86
|
getReferenceProps,
|
|
85
87
|
isGroupPhase,
|
|
86
88
|
opened,
|
|
87
|
-
placement
|
|
89
|
+
placement,
|
|
90
|
+
referenceHidden: settings.hideDetached && env !== "test" ? hideData?.referenceHidden : false
|
|
88
91
|
};
|
|
89
92
|
}
|
|
90
93
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-tooltip.cjs","names":["offset","shift","flip","arrow","inline","useState","use","TooltipGroupContext","useId","useCallback","useFloating","autoUpdate","useDelayGroup","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useRef"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n inline,\n offset,\n safePolygon,\n shift,\n useDelayGroup,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n type Middleware,\n} from '@floating-ui/react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { type TooltipMiddlewares } from './Tooltip.types';\nimport { TooltipGroupContext } from './TooltipGroup/TooltipGroup';\n\ninterface UseTooltip {\n position: FloatingPosition;\n closeDelay?: number;\n openDelay?: number;\n onPositionChange?: (position: FloatingPosition) => void;\n opened?: boolean;\n defaultOpened?: boolean;\n offset: number | FloatingAxesOffsets;\n arrowRef?: React.RefObject<HTMLDivElement | null>;\n arrowOffset?: number;\n events?: { hover: boolean; focus: boolean; touch: boolean };\n interactive?: boolean;\n inline?: boolean;\n strategy?: FloatingStrategy;\n middlewares?: TooltipMiddlewares;\n}\n\nfunction getDefaultMiddlewares(middlewares: TooltipMiddlewares | undefined): TooltipMiddlewares {\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 getTooltipMiddlewares(settings: UseTooltip) {\n const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);\n const middlewares: Middleware[] = [offset(settings.offset)];\n\n if (middlewaresOptions.shift) {\n middlewares.push(\n shift(\n typeof middlewaresOptions.shift === 'boolean'\n ? { padding: 8 }\n : { padding: 8, ...middlewaresOptions.shift }\n )\n );\n }\n\n if (middlewaresOptions.flip) {\n middlewares.push(\n typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n );\n }\n\n middlewares.push(arrow({ element: settings.arrowRef!, padding: settings.arrowOffset }));\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n } else if (settings.inline) {\n middlewares.push(inline());\n }\n\n return middlewares;\n}\n\nexport function useTooltip(settings: UseTooltip) {\n const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n const controlled = typeof settings.opened === 'boolean';\n const opened = controlled ? settings.opened : uncontrolledOpened;\n const withinGroup = use(TooltipGroupContext).withinGroup;\n const uid = useId();\n\n const onChange = useCallback(\n (_opened: boolean) => {\n setUncontrolledOpened(_opened);\n\n if (_opened) {\n setCurrentId(uid);\n }\n },\n [uid]\n );\n\n const {\n x,\n y,\n context,\n refs,\n placement,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n } = useFloating({\n strategy: settings.strategy,\n placement: settings.position,\n open: opened,\n onOpenChange: onChange,\n middleware: getTooltipMiddlewares(settings),\n whileElementsMounted: autoUpdate,\n });\n\n const { delay: groupDelay, currentId, setCurrentId } = useDelayGroup(context, { id: uid });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n enabled: settings.events?.hover,\n delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n mouseOnly: !settings.events?.touch,\n handleClose: settings.interactive ? safePolygon() : null,\n }),\n useFocus(context, { enabled: settings.events?.focus, visibleOnly: true }),\n useRole(context, { role: 'tooltip' }),\n // Cannot be used with controlled tooltip, page jumps\n useDismiss(context, { enabled: typeof settings.opened === 'undefined' }),\n ]);\n\n const previousPlacementRef = useRef(placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== placement) {\n previousPlacementRef.current = placement;\n settings.onPositionChange?.(placement);\n }\n }, [placement]);\n\n const isGroupPhase = opened && currentId && currentId !== uid;\n\n return {\n x,\n y,\n arrowX,\n arrowY,\n reference: refs.setReference,\n floating: refs.setFloating,\n getFloatingProps,\n getReferenceProps,\n isGroupPhase,\n opened,\n placement,\n };\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-tooltip.cjs","names":["offset","hide","shift","flip","arrow","inline","useState","use","TooltipGroupContext","useId","useMantineEnv","useCallback","useFloating","autoUpdate","useDelayGroup","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useRef"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n offset,\n safePolygon,\n shift,\n useDelayGroup,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n type Middleware,\n} from '@floating-ui/react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { useMantineEnv } from '../../core';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { type TooltipMiddlewares } from './Tooltip.types';\nimport { TooltipGroupContext } from './TooltipGroup/TooltipGroup';\n\ninterface UseTooltip {\n position: FloatingPosition;\n closeDelay?: number;\n openDelay?: number;\n onPositionChange?: (position: FloatingPosition) => void;\n opened?: boolean;\n defaultOpened?: boolean;\n offset: number | FloatingAxesOffsets;\n arrowRef?: React.RefObject<HTMLDivElement | null>;\n arrowOffset?: number;\n events?: { hover: boolean; focus: boolean; touch: boolean };\n interactive?: boolean;\n inline?: boolean;\n strategy?: FloatingStrategy;\n middlewares?: TooltipMiddlewares;\n hideDetached?: boolean;\n}\n\nfunction getDefaultMiddlewares(middlewares: TooltipMiddlewares | undefined): TooltipMiddlewares {\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 getTooltipMiddlewares(settings: UseTooltip) {\n const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);\n const middlewares: Middleware[] = [offset(settings.offset), hide()];\n\n if (middlewaresOptions.shift) {\n middlewares.push(\n shift(\n typeof middlewaresOptions.shift === 'boolean'\n ? { padding: 8 }\n : { padding: 8, ...middlewaresOptions.shift }\n )\n );\n }\n\n if (middlewaresOptions.flip) {\n middlewares.push(\n typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n );\n }\n\n middlewares.push(arrow({ element: settings.arrowRef!, padding: settings.arrowOffset }));\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n } else if (settings.inline) {\n middlewares.push(inline());\n }\n\n return middlewares;\n}\n\nexport function useTooltip(settings: UseTooltip) {\n const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n const controlled = typeof settings.opened === 'boolean';\n const opened = controlled ? settings.opened : uncontrolledOpened;\n const withinGroup = use(TooltipGroupContext).withinGroup;\n const uid = useId();\n const env = useMantineEnv();\n\n const onChange = useCallback(\n (_opened: boolean) => {\n setUncontrolledOpened(_opened);\n\n if (_opened) {\n setCurrentId(uid);\n }\n },\n [uid]\n );\n\n const {\n x,\n y,\n context,\n refs,\n placement,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideData },\n } = useFloating({\n strategy: settings.strategy,\n placement: settings.position,\n open: opened,\n onOpenChange: onChange,\n middleware: getTooltipMiddlewares(settings),\n whileElementsMounted: autoUpdate,\n });\n\n const { delay: groupDelay, currentId, setCurrentId } = useDelayGroup(context, { id: uid });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n enabled: settings.events?.hover,\n delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n mouseOnly: !settings.events?.touch,\n handleClose: settings.interactive ? safePolygon() : null,\n }),\n useFocus(context, { enabled: settings.events?.focus, visibleOnly: true }),\n useRole(context, { role: 'tooltip' }),\n // Cannot be used with controlled tooltip, page jumps\n useDismiss(context, { enabled: typeof settings.opened === 'undefined' }),\n ]);\n\n const previousPlacementRef = useRef(placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== placement) {\n previousPlacementRef.current = placement;\n settings.onPositionChange?.(placement);\n }\n }, [placement]);\n\n const isGroupPhase = opened && currentId && currentId !== uid;\n\n return {\n x,\n y,\n arrowX,\n arrowY,\n reference: refs.setReference,\n floating: refs.setFloating,\n getFloatingProps,\n getReferenceProps,\n isGroupPhase,\n opened,\n placement,\n referenceHidden: settings.hideDetached && env !== 'test' ? hideData?.referenceHidden : false,\n };\n}\n"],"mappings":"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"}
|