@mantine/core 9.6.2 → 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/ComboboxPopover/ComboboxPopover.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/Input/InputWrapper/InputWrapper.cjs +1 -1
- package/cjs/components/Input/InputWrapper/InputWrapper.cjs.map +1 -1
- package/cjs/components/Marquee/Marquee.cjs.map +1 -1
- package/cjs/components/Marquee/Marquee.module.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs +10 -5
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/PinInput/PinInput.cjs.map +1 -1
- package/cjs/components/Portal/Portal.cjs +10 -1
- package/cjs/components/Portal/Portal.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/Rating/Rating.cjs +35 -12
- package/cjs/components/Rating/Rating.cjs.map +1 -1
- package/cjs/components/Select/Select.cjs +1 -1
- package/cjs/components/Select/Select.cjs.map +1 -1
- package/cjs/components/Slider/Thumb/Thumb.cjs +7 -2
- package/cjs/components/Slider/Thumb/Thumb.cjs.map +1 -1
- package/cjs/components/Table/Table.cjs +23 -10
- package/cjs/components/Table/Table.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/core/Box/Box.cjs +1 -1
- package/cjs/core/Box/Box.cjs.map +1 -1
- package/cjs/core/Box/style-props/style-props-data.cjs +2 -2
- package/cjs/core/Box/style-props/style-props-data.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/use-styles.cjs +32 -2
- package/cjs/core/styles-api/use-styles/use-styles.cjs.map +1 -1
- package/cjs/core/utils/shallow-equal/shallow-equal.cjs +19 -0
- package/cjs/core/utils/shallow-equal/shallow-equal.cjs.map +1 -0
- package/cjs/index.cjs +42 -2
- 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/ComboboxPopover/ComboboxPopover.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/Input/InputWrapper/InputWrapper.mjs +1 -1
- package/esm/components/Input/InputWrapper/InputWrapper.mjs.map +1 -1
- package/esm/components/Marquee/Marquee.mjs.map +1 -1
- package/esm/components/Marquee/Marquee.module.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs +12 -7
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/PinInput/PinInput.mjs.map +1 -1
- package/esm/components/Portal/Portal.mjs +10 -1
- package/esm/components/Portal/Portal.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/Rating/Rating.mjs +35 -12
- package/esm/components/Rating/Rating.mjs.map +1 -1
- package/esm/components/Select/Select.mjs +1 -1
- package/esm/components/Select/Select.mjs.map +1 -1
- package/esm/components/Slider/Thumb/Thumb.mjs +7 -2
- package/esm/components/Slider/Thumb/Thumb.mjs.map +1 -1
- package/esm/components/Table/Table.mjs +23 -10
- package/esm/components/Table/Table.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/core/Box/Box.mjs +2 -2
- package/esm/core/Box/Box.mjs.map +1 -1
- package/esm/core/Box/style-props/style-props-data.mjs +2 -2
- package/esm/core/Box/style-props/style-props-data.mjs.map +1 -1
- package/esm/core/styles-api/use-styles/use-styles.mjs +32 -2
- package/esm/core/styles-api/use-styles/use-styles.mjs.map +1 -1
- package/esm/core/utils/shallow-equal/shallow-equal.mjs +19 -0
- package/esm/core/utils/shallow-equal/shallow-equal.mjs.map +1 -0
- package/esm/index.mjs +22 -3
- 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/Combobox/Combobox.types.d.ts +1 -1
- package/lib/components/ComboboxPopover/ComboboxPopover.d.ts +1 -1
- 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/Marquee/Marquee.d.ts +1 -1
- package/lib/components/PinInput/PinInput.d.ts +1 -1
- package/lib/components/Radio/Radio.d.ts +2 -2
- package/lib/components/Radio/RadioIndicator/RadioIndicator.d.ts +2 -2
- package/lib/components/Slider/Thumb/Thumb.d.ts +1 -1
- 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 +3 -1
- 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/lib/core/Box/style-props/index.d.ts +1 -1
- package/lib/core/Box/style-props/style-props-data.d.ts +1 -1
- package/lib/core/styles-api/use-styles/use-styles.d.ts +2 -1
- package/lib/core/utils/shallow-equal/shallow-equal.d.ts +1 -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/Marquee.css +1 -1
- package/styles/Marquee.layer.css +1 -1
- 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 +576 -1
- package/styles.layer.css +576 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TourRoot.cjs","names":["createVarsResolver","getThemeColor","getShadow","factory","useProps","defaultLabels","useId","useState","useTourState","useCallback","useStyles","TourProvider","OptionalPortal","Box"],"sources":["../../../../src/components/Tour/TourRoot/TourRoot.tsx"],"sourcesContent":["import { useCallback, useId, useState } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getShadow,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport { OptionalPortal, type PortalProps } from '../../Portal';\nimport type { TransitionOverride } from '../../Transition';\nimport type { TourStylesNames, TourCssVariables } from '../Tour';\nimport { defaultLabels, TourLabels, TourProvider } from '../Tour.context';\nimport { useTourState } from '../use-tour-state';\nimport classes from '../Tour.module.css';\n\nexport interface TourRootProps\n extends BoxProps, StylesApiProps<TourRootFactory>, ElementProps<'div'> {\n /** Whether the tour is active @default false */\n active?: boolean;\n\n /** Total number of steps, used by `Tour.Navigation` and keyboard navigation to detect the last step */\n stepsCount: number;\n\n /** Called when the tour is closed */\n onClose?: () => void;\n\n /** Controlled current step index */\n step?: number;\n\n /** Uncontrolled default step index @default 0 */\n defaultStep?: number;\n\n /** Called when step changes */\n onStepChange?: (step: number) => void;\n\n /** Called when a step opens */\n onStepOpen?: (step: number) => void;\n\n /** Called when a step closes */\n onStepClose?: (step: number) => void;\n\n /** Whether `Tour.Overlay` is rendered @default true */\n withOverlay?: boolean;\n\n /** Whether pointer events pass through the spotlight cutout to the target element, the rest of the overlay keeps blocking clicks @default false */\n withOverlayInteraction?: boolean;\n\n /** Whether `Tour.CloseButton` is rendered @default true */\n withCloseButton?: boolean;\n\n /** Whether arrow keys navigate between steps @default true */\n withKeyboardNavigation?: boolean;\n\n /** Padding around the spotlight cutout in px @default 8 */\n spotlightPadding?: number;\n\n /** Border radius of the spotlight cutout in px @default 4 */\n spotlightRadius?: number;\n\n /** Whether pressing Escape closes the tour @default true */\n closeOnEscape?: boolean;\n\n /** Whether clicking the overlay closes the tour, with `withOverlayInteraction` only clicks outside the spotlight cutout close it @default false */\n closeOnOverlayClick?: boolean;\n\n /** Labels for tour UI elements */\n labels?: Partial<TourLabels>;\n\n /** Whether to render inside a portal @default true */\n withinPortal?: boolean;\n\n /** Props passed to the Portal component */\n portalProps?: Omit<PortalProps, 'children'>;\n\n /** z-index of the tour @default 10000 */\n zIndex?: string | number;\n\n /** Default transition props of `Tour.Tooltip` @default { duration: 200, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Tour step overlay color @default \"rgba(0, 0, 0, 0.5)\" */\n overlayColor?: string;\n\n /** Key of `theme.colors` or any valid CSS color, controls `Tour.Beacon` color and `Tour.Navigation` next button color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.shadows` or any valid CSS box-shadow value, controls the tooltip shadow @default 'md' */\n tooltipShadow?: string;\n\n /** Tour content: `Tour.Overlay`, `Tour.Tooltip`, `Tour.Beacon` and other compound components */\n children?: React.ReactNode;\n}\n\nexport type TourRootFactory = Factory<{\n props: TourRootProps;\n ref: HTMLDivElement;\n stylesNames: TourStylesNames;\n vars: TourCssVariables;\n}>;\n\nconst defaultProps = {\n active: false,\n withOverlay: true,\n withOverlayInteraction: false,\n withCloseButton: true,\n withKeyboardNavigation: true,\n spotlightPadding: 8,\n closeOnEscape: true,\n closeOnOverlayClick: false,\n withinPortal: true,\n zIndex: 10000,\n transitionProps: { duration: 200, transition: 'fade' },\n overlayColor: 'rgba(0, 0, 0, 0.5)',\n} satisfies Partial<TourRootProps>;\n\nconst varsResolver = createVarsResolver<TourRootFactory>(\n (theme, { zIndex, overlayColor, tooltipShadow, color }) => ({\n root: {\n '--tour-color': color ? getThemeColor(color, theme) : undefined,\n '--tour-z-index': zIndex?.toString(),\n '--tour-overlay-color': overlayColor,\n '--tour-tooltip-radius': undefined,\n '--tour-tooltip-shadow': getShadow(tooltipShadow),\n '--tour-beacon-size': undefined,\n '--tour-beacon-color': undefined,\n },\n })\n);\n\nexport const TourRoot = factory<TourRootFactory>((_props) => {\n const props = useProps('TourRoot', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n active,\n stepsCount,\n onClose,\n step: stepProp,\n defaultStep,\n onStepChange,\n onStepOpen,\n onStepClose,\n withOverlay,\n withOverlayInteraction,\n withCloseButton,\n withKeyboardNavigation,\n spotlightPadding,\n spotlightRadius,\n closeOnEscape,\n closeOnOverlayClick,\n labels: labelsProp,\n withinPortal,\n portalProps,\n zIndex,\n transitionProps,\n overlayColor,\n tooltipShadow,\n color,\n children,\n attributes,\n ...others\n } = props;\n\n const labels: TourLabels = { ...defaultLabels, ...labelsProp };\n const id = useId();\n const [registeredTitleId, registerTitle] = useState<string | null>(null);\n const [registeredBodyId, registerBody] = useState<string | null>(null);\n const titleId = registeredTitleId ?? `${id}-title`;\n const bodyId = registeredBodyId ?? `${id}-body`;\n const titleMounted = registeredTitleId !== null;\n const bodyMounted = registeredBodyId !== null;\n\n const { currentStep, setStep, close, targetRef } = useTourState({\n active,\n onClose,\n step: stepProp,\n defaultStep,\n onStepChange,\n onStepOpen: (index) => onStepOpen?.(index),\n onStepClose: (index) => onStepClose?.(index),\n mode: 'guided',\n stepsCount,\n closeOnEscape,\n withKeyboardNavigation,\n });\n\n const setTargetElement = useCallback(\n (element: HTMLElement | null) => {\n targetRef.current = element;\n },\n [targetRef]\n );\n\n const getStyles = useStyles<TourRootFactory>({\n name: 'Tour',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n if (!active) {\n return null;\n }\n\n return (\n <TourProvider\n value={{\n getStyles,\n step: currentStep,\n setStep,\n stepsCount,\n close,\n withOverlay: withOverlay!,\n withOverlayInteraction: withOverlayInteraction!,\n withCloseButton: withCloseButton!,\n spotlightPadding: spotlightPadding!,\n spotlightRadius: spotlightRadius ?? 4,\n closeOnOverlayClick: closeOnOverlayClick!,\n transitionProps,\n color,\n labels,\n titleId,\n bodyId,\n titleMounted,\n bodyMounted,\n registerTitle,\n registerBody,\n setTargetElement,\n }}\n >\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Box {...getStyles('root')} {...others}>\n {children}\n </Box>\n </OptionalPortal>\n </TourProvider>\n );\n});\n\nTourRoot.displayName = '@mantine/core/TourRoot';\n\nexport namespace TourRoot {\n export type Props = TourRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA2GA,MAAM,eAAe;CACnB,QAAQ;CACR,aAAa;CACb,wBAAwB;CACxB,iBAAiB;CACjB,wBAAwB;CACxB,kBAAkB;CAClB,eAAe;CACf,qBAAqB;CACrB,cAAc;CACd,QAAQ;CACR,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAO;CACrD,cAAc;AAChB;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,cAAc,eAAe,aAAa,EAC1D,MAAM;CACJ,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;CACtD,kBAAkB,QAAQ,SAAS;CACnC,wBAAwB;CACxB,yBAAyB,KAAA;CACzB,yBAAyBC,iBAAAA,UAAU,aAAa;CAChD,sBAAsB,KAAA;CACtB,uBAAuB,KAAA;AACzB,EACF,EACF;AAEA,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,YACA,SACA,MAAM,UACN,aACA,cACA,YACA,aACA,aACA,wBACA,iBACA,wBACA,kBACA,iBACA,eACA,qBACA,QAAQ,YACR,cACA,aACA,QACA,iBACA,cACA,eACA,OACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,SAAqB;EAAE,GAAGC,qBAAAA;EAAe,GAAG;CAAW;CAC7D,MAAM,MAAA,GAAKC,MAAAA,MAAAA,CAAM;CACjB,MAAM,CAAC,mBAAmB,kBAAA,GAAiBC,MAAAA,SAAAA,CAAwB,IAAI;CACvE,MAAM,CAAC,kBAAkB,iBAAA,GAAgBA,MAAAA,SAAAA,CAAwB,IAAI;CACrE,MAAM,UAAU,qBAAqB,GAAG,GAAG;CAC3C,MAAM,SAAS,oBAAoB,GAAG,GAAG;CACzC,MAAM,eAAe,sBAAsB;CAC3C,MAAM,cAAc,qBAAqB;CAEzC,MAAM,EAAE,aAAa,SAAS,OAAO,cAAcC,uBAAAA,aAAa;EAC9D;EACA;EACA,MAAM;EACN;EACA;EACA,aAAa,UAAU,aAAa,KAAK;EACzC,cAAc,UAAU,cAAc,KAAK;EAC3C,MAAM;EACN;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAA,GAAmBC,MAAAA,YAAAA,EACtB,YAAgC;EAC/B,UAAU,UAAU;CACtB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,QACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;EACE,OAAO;GACL;GACA,MAAM;GACN;GACA;GACA;GACa;GACW;GACP;GACC;GAClB,iBAAiB,mBAAmB;GACf;GACrB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;GAAgB,GAAI;GAA2B;GAC7C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,GAAI,UAAU,MAAM;IAAG,GAAI;IAC7B;GACE,CAAA;EACS,CAAA;CACJ,CAAA;AAElB,CAAC;AAED,SAAS,cAAc"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/core/src/components/Tour/TourStep/TourStep.tsx
|
|
3
|
+
function TourStep(_props) {
|
|
4
|
+
return null;
|
|
5
|
+
}
|
|
6
|
+
TourStep.displayName = "@mantine/core/TourStep";
|
|
7
|
+
//#endregion
|
|
8
|
+
exports.TourStep = TourStep;
|
|
9
|
+
|
|
10
|
+
//# sourceMappingURL=TourStep.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TourStep.cjs","names":[],"sources":["../../../../src/components/Tour/TourStep/TourStep.tsx"],"sourcesContent":["import type { FloatingPosition } from '../../../utils/Floating';\n\nexport interface TourStepProps {\n /** CSS selector or ref to the target element. Selectors are resolved again when the element mounts later, refs are resolved once when the step activates – use a selector for elements that are not mounted yet. */\n target?: string | React.RefObject<HTMLElement | null>;\n\n /** Step title */\n title?: React.ReactNode;\n\n /** Step body content */\n children?: React.ReactNode;\n\n /** Called when this step becomes active */\n onStepOpen?: () => void;\n\n /** Called when this step is deactivated */\n onStepClose?: () => void;\n\n /** Tooltip position relative to the target element @default 'bottom' */\n position?: FloatingPosition;\n\n /** Whether to display the overlay for this step (per-step override) */\n withOverlay?: boolean;\n\n /** Padding around the spotlight cutout in px (per-step override) */\n spotlightPadding?: number;\n\n /** Border radius of the spotlight cutout in px (per-step override) */\n spotlightRadius?: number;\n\n /** Whether to display a beacon for this step (per-step override) */\n withBeacon?: boolean;\n}\n\nexport function TourStep(_props: TourStepProps): React.ReactElement | null {\n return null;\n}\n\nTourStep.displayName = '@mantine/core/TourStep';\n\nexport namespace TourStep {\n export type Props = TourStepProps;\n}\n"],"mappings":";;AAkCA,SAAgB,SAAS,QAAkD;CACzE,OAAO;AACT;AAEA,SAAS,cAAc"}
|
|
@@ -0,0 +1,38 @@
|
|
|
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_Tour_context = require("../Tour.context.cjs");
|
|
6
|
+
const require_Tour_module = require("../Tour.module.cjs");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
+
//#region packages/@mantine/core/src/components/Tour/TourTitle/TourTitle.tsx
|
|
10
|
+
const defaultProps = {};
|
|
11
|
+
const TourTitle = require_factory.factory((_props) => {
|
|
12
|
+
const { children, classNames, className, style, styles, vars, id, ...others } = require_use_props.useProps("TourTitle", defaultProps, _props);
|
|
13
|
+
const ctx = require_Tour_context.useTourContext();
|
|
14
|
+
const { registerTitle } = ctx;
|
|
15
|
+
const resolvedId = id ?? ctx.titleId;
|
|
16
|
+
(0, react.useEffect)(() => {
|
|
17
|
+
registerTitle(resolvedId);
|
|
18
|
+
return () => registerTitle(null);
|
|
19
|
+
}, [registerTitle, resolvedId]);
|
|
20
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
|
|
21
|
+
component: "h3",
|
|
22
|
+
id: resolvedId,
|
|
23
|
+
...ctx.getStyles("title", {
|
|
24
|
+
className,
|
|
25
|
+
classNames,
|
|
26
|
+
style,
|
|
27
|
+
styles
|
|
28
|
+
}),
|
|
29
|
+
...others,
|
|
30
|
+
children
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
TourTitle.classes = require_Tour_module.default;
|
|
34
|
+
TourTitle.displayName = "@mantine/core/TourTitle";
|
|
35
|
+
//#endregion
|
|
36
|
+
exports.TourTitle = TourTitle;
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=TourTitle.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TourTitle.cjs","names":["factory","useProps","useTourContext","Box","classes"],"sources":["../../../../src/components/Tour/TourTitle/TourTitle.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useTourContext } from '../Tour.context';\nimport classes from '../Tour.module.css';\n\nexport type TourTitleStylesNames = 'title';\n\nexport interface TourTitleProps\n extends BoxProps, CompoundStylesApiProps<TourTitleFactory>, ElementProps<'h3'> {}\n\nexport type TourTitleFactory = Factory<{\n props: TourTitleProps;\n ref: HTMLHeadingElement;\n stylesNames: TourTitleStylesNames;\n compound: true;\n}>;\n\nconst defaultProps: Partial<TourTitleProps> = {};\n\nexport const TourTitle = factory<TourTitleFactory>((_props) => {\n const props = useProps('TourTitle', defaultProps, _props);\n const { children, classNames, className, style, styles, vars, id, ...others } = props;\n const ctx = useTourContext();\n const { registerTitle } = ctx;\n const resolvedId = id ?? ctx.titleId;\n\n useEffect(() => {\n registerTitle(resolvedId);\n return () => registerTitle(null);\n }, [registerTitle, resolvedId]);\n\n return (\n <Box\n component=\"h3\"\n id={resolvedId}\n {...ctx.getStyles('title', { className, classNames, style, styles })}\n {...others}\n >\n {children}\n </Box>\n );\n});\n\nTourTitle.classes = classes;\nTourTitle.displayName = '@mantine/core/TourTitle';\n\nexport namespace TourTitle {\n export type Props = TourTitleProps;\n}\n"],"mappings":";;;;;;;;;AAyBA,MAAM,eAAwC,CAAC;AAE/C,MAAa,YAAYA,gBAAAA,SAA2B,WAAW;CAE7D,MAAM,EAAE,UAAU,YAAY,WAAW,OAAO,QAAQ,MAAM,IAAI,GAAG,WADvDC,kBAAAA,SAAS,aAAa,cAAc,MACkC;CACpF,MAAM,MAAMC,qBAAAA,eAAe;CAC3B,MAAM,EAAE,kBAAkB;CAC1B,MAAM,aAAa,MAAM,IAAI;CAE7B,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,cAAc,UAAU;EACxB,aAAa,cAAc,IAAI;CACjC,GAAG,CAAC,eAAe,UAAU,CAAC;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,IAAI;EACJ,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,UAAU,UAAUC,oBAAAA;AACpB,UAAU,cAAc"}
|
|
@@ -0,0 +1,87 @@
|
|
|
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_DirectionProvider = require("../../../core/DirectionProvider/DirectionProvider.cjs");
|
|
6
|
+
const require_get_floating_position = require("../../../utils/Floating/get-floating-position/get-floating-position.cjs");
|
|
7
|
+
const require_Transition = require("../../Transition/Transition.cjs");
|
|
8
|
+
const require_FocusTrap = require("../../FocusTrap/FocusTrap.cjs");
|
|
9
|
+
const require_Tour_context = require("../Tour.context.cjs");
|
|
10
|
+
const require_press_aware_auto_update = require("../press-aware-auto-update.cjs");
|
|
11
|
+
const require_Tour_module = require("../Tour.module.cjs");
|
|
12
|
+
const require_use_tooltip_auto_focus = require("../use-tooltip-auto-focus.cjs");
|
|
13
|
+
let react = require("react");
|
|
14
|
+
let _mantine_hooks = require("@mantine/hooks");
|
|
15
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
16
|
+
let _floating_ui_react = require("@floating-ui/react");
|
|
17
|
+
//#region packages/@mantine/core/src/components/Tour/TourTooltip/TourTooltip.tsx
|
|
18
|
+
const defaultProps = { position: "bottom" };
|
|
19
|
+
const TourTooltip = require_factory.factory((_props) => {
|
|
20
|
+
const { classNames, className, style, styles, vars, targetElement, position, mounted, transitionProps, children, ref, role, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...others } = require_use_props.useProps("TourTooltip", defaultProps, _props);
|
|
21
|
+
const ctx = require_Tour_context.useTourContext();
|
|
22
|
+
const { dir } = require_DirectionProvider.useDirection();
|
|
23
|
+
const { setTargetElement } = ctx;
|
|
24
|
+
(0, react.useEffect)(() => {
|
|
25
|
+
setTargetElement(targetElement ?? null);
|
|
26
|
+
return () => setTargetElement(null);
|
|
27
|
+
}, [targetElement, setTargetElement]);
|
|
28
|
+
const { refs, floatingStyles } = (0, _floating_ui_react.useFloating)({
|
|
29
|
+
elements: { reference: targetElement },
|
|
30
|
+
placement: require_get_floating_position.getFloatingPosition(dir, position),
|
|
31
|
+
whileElementsMounted: require_press_aware_auto_update.pressAwareAutoUpdate,
|
|
32
|
+
middleware: [
|
|
33
|
+
(0, _floating_ui_react.offset)(12),
|
|
34
|
+
(0, _floating_ui_react.flip)(),
|
|
35
|
+
(0, _floating_ui_react.shift)({ padding: 8 })
|
|
36
|
+
]
|
|
37
|
+
});
|
|
38
|
+
const trapActive = !!mounted && ctx.withOverlay && !ctx.withOverlayInteraction;
|
|
39
|
+
const autoFocusRef = require_use_tooltip_auto_focus.useTooltipAutoFocus({
|
|
40
|
+
autoFocus: !!mounted && !trapActive,
|
|
41
|
+
opened: !!mounted,
|
|
42
|
+
step: ctx.step
|
|
43
|
+
});
|
|
44
|
+
const transition = {
|
|
45
|
+
...ctx.transitionProps,
|
|
46
|
+
...transitionProps
|
|
47
|
+
};
|
|
48
|
+
const mergedRef = (0, _mantine_hooks.useMergedRef)(refs.setFloating, autoFocusRef, ref);
|
|
49
|
+
const tooltipStyles = ctx.getStyles("tooltip", {
|
|
50
|
+
className,
|
|
51
|
+
classNames,
|
|
52
|
+
style,
|
|
53
|
+
styles
|
|
54
|
+
});
|
|
55
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Transition.Transition, {
|
|
56
|
+
mounted: !!mounted,
|
|
57
|
+
duration: transition.duration ?? 200,
|
|
58
|
+
transition: transition.transition ?? "fade",
|
|
59
|
+
timingFunction: transition.timingFunction,
|
|
60
|
+
children: (transitionStyles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FocusTrap.FocusTrap, {
|
|
61
|
+
active: trapActive,
|
|
62
|
+
innerRef: mergedRef,
|
|
63
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
|
|
64
|
+
role: role ?? "dialog",
|
|
65
|
+
tabIndex: tabIndex ?? -1,
|
|
66
|
+
"aria-labelledby": ariaLabelledBy ?? (ctx.titleMounted ? ctx.titleId : void 0),
|
|
67
|
+
"aria-label": ariaLabel ?? (ctx.titleMounted ? void 0 : ctx.labels.stepCounter(ctx.step + 1, ctx.stepsCount)),
|
|
68
|
+
"aria-describedby": ariaDescribedBy ?? (ctx.bodyMounted ? ctx.bodyId : void 0),
|
|
69
|
+
...tooltipStyles,
|
|
70
|
+
"data-centered": !targetElement || void 0,
|
|
71
|
+
style: {
|
|
72
|
+
...tooltipStyles.style,
|
|
73
|
+
...targetElement ? floatingStyles : {},
|
|
74
|
+
...transitionStyles
|
|
75
|
+
},
|
|
76
|
+
...others,
|
|
77
|
+
children: [trapActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FocusTrap.FocusTrap.InitialFocus, {}), children]
|
|
78
|
+
})
|
|
79
|
+
})
|
|
80
|
+
});
|
|
81
|
+
});
|
|
82
|
+
TourTooltip.classes = require_Tour_module.default;
|
|
83
|
+
TourTooltip.displayName = "@mantine/core/TourTooltip";
|
|
84
|
+
//#endregion
|
|
85
|
+
exports.TourTooltip = TourTooltip;
|
|
86
|
+
|
|
87
|
+
//# sourceMappingURL=TourTooltip.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TourTooltip.cjs","names":["factory","useProps","useTourContext","useDirection","useFloating","getFloatingPosition","pressAwareAutoUpdate","offset","flip","shift","useTooltipAutoFocus","useMergedRef","Transition","FocusTrap","Box","classes"],"sources":["../../../../src/components/Tour/TourTooltip/TourTooltip.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { flip, offset, shift, useFloating } from '@floating-ui/react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useDirection,\n useProps,\n} from '../../../core';\nimport { getFloatingPosition, type FloatingPosition } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { Transition, type TransitionOverride } from '../../Transition';\nimport { pressAwareAutoUpdate } from '../press-aware-auto-update';\nimport { useTourContext } from '../Tour.context';\nimport { useTooltipAutoFocus } from '../use-tooltip-auto-focus';\nimport classes from '../Tour.module.css';\n\nexport type TourTooltipStylesNames = 'tooltip';\n\nexport interface TourTooltipProps\n extends BoxProps, CompoundStylesApiProps<TourTooltipFactory>, ElementProps<'div'> {\n /** Target element to position against */\n targetElement?: HTMLElement | null;\n\n /** Tooltip position @default 'bottom' */\n position?: FloatingPosition;\n\n /** Whether the tooltip is visible */\n mounted?: boolean;\n\n /** Transition props for the tooltip, merged with `transitionProps` of `Tour.Root` */\n transitionProps?: TransitionOverride;\n}\n\nexport type TourTooltipFactory = Factory<{\n props: TourTooltipProps;\n ref: HTMLDivElement;\n stylesNames: TourTooltipStylesNames;\n compound: true;\n}>;\n\nconst defaultProps: Partial<TourTooltipProps> = {\n position: 'bottom',\n};\n\nexport const TourTooltip = factory<TourTooltipFactory>((_props) => {\n const props = useProps('TourTooltip', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n targetElement,\n position,\n mounted,\n transitionProps,\n children,\n ref,\n role,\n tabIndex,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...others\n } = props;\n\n const ctx = useTourContext();\n const { dir } = useDirection();\n const { setTargetElement } = ctx;\n\n useEffect(() => {\n setTargetElement(targetElement ?? null);\n return () => setTargetElement(null);\n }, [targetElement, setTargetElement]);\n\n const { refs, floatingStyles } = useFloating({\n elements: { reference: targetElement },\n placement: getFloatingPosition(dir, position!),\n whileElementsMounted: pressAwareAutoUpdate,\n middleware: [offset(12), flip(), shift({ padding: 8 })],\n });\n\n const trapActive = !!mounted && ctx.withOverlay && !ctx.withOverlayInteraction;\n const autoFocusRef = useTooltipAutoFocus({\n autoFocus: !!mounted && !trapActive,\n opened: !!mounted,\n step: ctx.step,\n });\n const transition = { ...ctx.transitionProps, ...transitionProps };\n const mergedRef = useMergedRef(refs.setFloating, autoFocusRef, ref);\n const tooltipStyles = ctx.getStyles('tooltip', { className, classNames, style, styles });\n\n return (\n <Transition\n mounted={!!mounted}\n duration={transition.duration ?? 200}\n transition={transition.transition ?? 'fade'}\n timingFunction={transition.timingFunction}\n >\n {(transitionStyles) => (\n <FocusTrap active={trapActive} innerRef={mergedRef}>\n <Box\n role={role ?? 'dialog'}\n tabIndex={tabIndex ?? -1}\n aria-labelledby={ariaLabelledBy ?? (ctx.titleMounted ? ctx.titleId : undefined)}\n aria-label={\n ariaLabel ??\n (ctx.titleMounted ? undefined : ctx.labels.stepCounter(ctx.step + 1, ctx.stepsCount))\n }\n aria-describedby={ariaDescribedBy ?? (ctx.bodyMounted ? ctx.bodyId : undefined)}\n {...tooltipStyles}\n data-centered={!targetElement || undefined}\n style={{\n ...tooltipStyles.style,\n ...(targetElement ? floatingStyles : {}),\n ...transitionStyles,\n }}\n {...others}\n >\n {trapActive && <FocusTrap.InitialFocus />}\n {children}\n </Box>\n </FocusTrap>\n )}\n </Transition>\n );\n});\n\nTourTooltip.classes = classes;\nTourTooltip.displayName = '@mantine/core/TourTooltip';\n\nexport namespace TourTooltip {\n export type Props = TourTooltipProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA6CA,MAAM,eAA0C,EAC9C,UAAU,SACZ;AAEA,MAAa,cAAcA,gBAAAA,SAA6B,WAAW;CAEjE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,eACA,UACA,SACA,iBACA,UACA,KACA,MACA,UACA,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,WAlBSC,kBAAAA,SAAS,eAAe,cAAc,MAmB5C;CAER,MAAM,MAAMC,qBAAAA,eAAe;CAC3B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,EAAE,qBAAqB;CAE7B,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,iBAAiB,iBAAiB,IAAI;EACtC,aAAa,iBAAiB,IAAI;CACpC,GAAG,CAAC,eAAe,gBAAgB,CAAC;CAEpC,MAAM,EAAE,MAAM,oBAAA,GAAmBC,mBAAAA,YAAAA,CAAY;EAC3C,UAAU,EAAE,WAAW,cAAc;EACrC,WAAWC,8BAAAA,oBAAoB,KAAK,QAAS;EAC7C,sBAAsBC,gCAAAA;EACtB,YAAY;IAACC,GAAAA,mBAAAA,OAAAA,CAAO,EAAE;IAAGC,GAAAA,mBAAAA,KAAAA,CAAK;IAAGC,GAAAA,mBAAAA,MAAAA,CAAM,EAAE,SAAS,EAAE,CAAC;EAAC;CACxD,CAAC;CAED,MAAM,aAAa,CAAC,CAAC,WAAW,IAAI,eAAe,CAAC,IAAI;CACxD,MAAM,eAAeC,+BAAAA,oBAAoB;EACvC,WAAW,CAAC,CAAC,WAAW,CAAC;EACzB,QAAQ,CAAC,CAAC;EACV,MAAM,IAAI;CACZ,CAAC;CACD,MAAM,aAAa;EAAE,GAAG,IAAI;EAAiB,GAAG;CAAgB;CAChE,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAa,KAAK,aAAa,cAAc,GAAG;CAClE,MAAM,gBAAgB,IAAI,UAAU,WAAW;EAAE;EAAW;EAAY;EAAO;CAAO,CAAC;CAEvF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;EACE,SAAS,CAAC,CAAC;EACX,UAAU,WAAW,YAAY;EACjC,YAAY,WAAW,cAAc;EACrC,gBAAgB,WAAW;EAEzB,WAAA,qBACA,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD;GAAW,QAAQ;GAAY,UAAU;GACvC,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;IACE,MAAM,QAAQ;IACd,UAAU,YAAY;IACtB,mBAAiB,mBAAmB,IAAI,eAAe,IAAI,UAAU,KAAA;IACrE,cACE,cACC,IAAI,eAAe,KAAA,IAAY,IAAI,OAAO,YAAY,IAAI,OAAO,GAAG,IAAI,UAAU;IAErF,oBAAkB,oBAAoB,IAAI,cAAc,IAAI,SAAS,KAAA;IACrE,GAAI;IACJ,iBAAe,CAAC,iBAAiB,KAAA;IACjC,OAAO;KACL,GAAG,cAAc;KACjB,GAAI,gBAAgB,iBAAiB,CAAC;KACtC,GAAG;IACL;IACA,GAAI;IAhBN,UAAA,CAkBG,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACD,kBAAAA,UAAU,cAAX,CAAyB,CAAA,GACvC,QACE;;EACI,CAAA;CAEH,CAAA;AAEhB,CAAC;AAED,YAAY,UAAUE,oBAAAA;AACtB,YAAY,cAAc"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/core/src/components/Tour/get-overlay-hit-path.ts
|
|
3
|
+
const OVERLAY_EXTENT = 1e5;
|
|
4
|
+
function getOverlayHitPath(targetRect, padding, radius) {
|
|
5
|
+
const outer = `M-100000 -100000H${OVERLAY_EXTENT}V${OVERLAY_EXTENT}H-100000Z`;
|
|
6
|
+
if (!targetRect) return outer;
|
|
7
|
+
const x = targetRect.left - padding;
|
|
8
|
+
const y = targetRect.top - padding;
|
|
9
|
+
const w = targetRect.width + padding * 2;
|
|
10
|
+
const h = targetRect.height + padding * 2;
|
|
11
|
+
const r = Math.max(0, Math.min(radius, w / 2, h / 2));
|
|
12
|
+
return `${outer}M${x + r} ${y}H${x + w - r}A${r} ${r} 0 0 1 ${x + w} ${y + r}V${y + h - r}A${r} ${r} 0 0 1 ${x + w - r} ${y + h}H${x + r}A${r} ${r} 0 0 1 ${x} ${y + h - r}V${y + r}A${r} ${r} 0 0 1 ${x + r} ${y}Z`;
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
exports.getOverlayHitPath = getOverlayHitPath;
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=get-overlay-hit-path.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-overlay-hit-path.cjs","names":[],"sources":["../../../src/components/Tour/get-overlay-hit-path.ts"],"sourcesContent":["import type { TargetRect } from './use-target-rect';\n\nconst OVERLAY_EXTENT = 100000;\n\nexport function getOverlayHitPath(\n targetRect: TargetRect | null | undefined,\n padding: number,\n radius: number\n) {\n const outer = `M${-OVERLAY_EXTENT} ${-OVERLAY_EXTENT}H${OVERLAY_EXTENT}V${OVERLAY_EXTENT}H${-OVERLAY_EXTENT}Z`;\n\n if (!targetRect) {\n return outer;\n }\n\n const x = targetRect.left - padding;\n const y = targetRect.top - padding;\n const w = targetRect.width + padding * 2;\n const h = targetRect.height + padding * 2;\n const r = Math.max(0, Math.min(radius, w / 2, h / 2));\n\n return (\n `${outer}M${x + r} ${y}H${x + w - r}A${r} ${r} 0 0 1 ${x + w} ${y + r}` +\n `V${y + h - r}A${r} ${r} 0 0 1 ${x + w - r} ${y + h}` +\n `H${x + r}A${r} ${r} 0 0 1 ${x} ${y + h - r}` +\n `V${y + r}A${r} ${r} 0 0 1 ${x + r} ${y}Z`\n );\n}\n"],"mappings":";;AAEA,MAAM,iBAAiB;AAEvB,SAAgB,kBACd,YACA,SACA,QACA;CACA,MAAM,QAAQ,oBAA0C,eAAe,GAAG,eAAe;CAEzF,IAAI,CAAC,YACH,OAAO;CAGT,MAAM,IAAI,WAAW,OAAO;CAC5B,MAAM,IAAI,WAAW,MAAM;CAC3B,MAAM,IAAI,WAAW,QAAQ,UAAU;CACvC,MAAM,IAAI,WAAW,SAAS,UAAU;CACxC,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,IAAI,GAAG,IAAI,CAAC,CAAC;CAEpD,OACE,GAAG,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,IAAI,EAAE,GAAG,IAAI,EAAA,GAChE,IAAI,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,IAAI,IAAI,EAAE,GAAG,IAAI,EAAA,GAC9C,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,IAAI,EAAA,GACtC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,IAAI,EAAE,GAAG,EAAE;AAE5C"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/core/src/components/Tour/is-element-in-view.ts
|
|
3
|
+
function isScrollable(element) {
|
|
4
|
+
const { overflow, overflowX, overflowY } = getComputedStyle(element);
|
|
5
|
+
return /(auto|scroll|hidden)/.test(`${overflow} ${overflowX} ${overflowY}`);
|
|
6
|
+
}
|
|
7
|
+
function isElementInView(element) {
|
|
8
|
+
const rect = element.getBoundingClientRect();
|
|
9
|
+
if (rect.width === 0 && rect.height === 0) return false;
|
|
10
|
+
const top = rect.top;
|
|
11
|
+
const left = rect.left;
|
|
12
|
+
const bottom = rect.top + rect.height;
|
|
13
|
+
const right = rect.left + rect.width;
|
|
14
|
+
if (top < 0 || left < 0 || bottom > window.innerHeight || right > window.innerWidth) return false;
|
|
15
|
+
let parent = element.parentElement;
|
|
16
|
+
while (parent && parent !== document.body) {
|
|
17
|
+
if (isScrollable(parent)) {
|
|
18
|
+
const parentRect = parent.getBoundingClientRect();
|
|
19
|
+
const clientTop = parentRect.top + parent.clientTop;
|
|
20
|
+
const clientLeft = parentRect.left + parent.clientLeft;
|
|
21
|
+
if (top < clientTop || left < clientLeft || bottom > clientTop + parent.clientHeight || right > clientLeft + parent.clientWidth) return false;
|
|
22
|
+
}
|
|
23
|
+
parent = parent.parentElement;
|
|
24
|
+
}
|
|
25
|
+
return true;
|
|
26
|
+
}
|
|
27
|
+
//#endregion
|
|
28
|
+
exports.isElementInView = isElementInView;
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=is-element-in-view.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"is-element-in-view.cjs","names":[],"sources":["../../../src/components/Tour/is-element-in-view.ts"],"sourcesContent":["function isScrollable(element: HTMLElement) {\n const { overflow, overflowX, overflowY } = getComputedStyle(element);\n return /(auto|scroll|hidden)/.test(`${overflow} ${overflowX} ${overflowY}`);\n}\n\nexport function isElementInView(element: HTMLElement) {\n const rect = element.getBoundingClientRect();\n\n if (rect.width === 0 && rect.height === 0) {\n return false;\n }\n\n const top = rect.top;\n const left = rect.left;\n const bottom = rect.top + rect.height;\n const right = rect.left + rect.width;\n\n if (top < 0 || left < 0 || bottom > window.innerHeight || right > window.innerWidth) {\n return false;\n }\n\n let parent = element.parentElement;\n\n while (parent && parent !== document.body) {\n if (isScrollable(parent)) {\n const parentRect = parent.getBoundingClientRect();\n const clientTop = parentRect.top + parent.clientTop;\n const clientLeft = parentRect.left + parent.clientLeft;\n\n if (\n top < clientTop ||\n left < clientLeft ||\n bottom > clientTop + parent.clientHeight ||\n right > clientLeft + parent.clientWidth\n ) {\n return false;\n }\n }\n\n parent = parent.parentElement;\n }\n\n return true;\n}\n"],"mappings":";;AAAA,SAAS,aAAa,SAAsB;CAC1C,MAAM,EAAE,UAAU,WAAW,cAAc,iBAAiB,OAAO;CACnE,OAAO,uBAAuB,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW;AAC5E;AAEA,SAAgB,gBAAgB,SAAsB;CACpD,MAAM,OAAO,QAAQ,sBAAsB;CAE3C,IAAI,KAAK,UAAU,KAAK,KAAK,WAAW,GACtC,OAAO;CAGT,MAAM,MAAM,KAAK;CACjB,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK,MAAM,KAAK;CAC/B,MAAM,QAAQ,KAAK,OAAO,KAAK;CAE/B,IAAI,MAAM,KAAK,OAAO,KAAK,SAAS,OAAO,eAAe,QAAQ,OAAO,YACvE,OAAO;CAGT,IAAI,SAAS,QAAQ;CAErB,OAAO,UAAU,WAAW,SAAS,MAAM;EACzC,IAAI,aAAa,MAAM,GAAG;GACxB,MAAM,aAAa,OAAO,sBAAsB;GAChD,MAAM,YAAY,WAAW,MAAM,OAAO;GAC1C,MAAM,aAAa,WAAW,OAAO,OAAO;GAE5C,IACE,MAAM,aACN,OAAO,cACP,SAAS,YAAY,OAAO,gBAC5B,QAAQ,aAAa,OAAO,aAE5B,OAAO;EAEX;EAEA,SAAS,OAAO;CAClB;CAEA,OAAO;AACT"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
let _floating_ui_react = require("@floating-ui/react");
|
|
3
|
+
//#region packages/@mantine/core/src/components/Tour/press-aware-auto-update.ts
|
|
4
|
+
function pressAwareAutoUpdate(reference, floating, update) {
|
|
5
|
+
const target = reference instanceof Element ? reference : null;
|
|
6
|
+
let pressed = false;
|
|
7
|
+
let pending = false;
|
|
8
|
+
let frame = -1;
|
|
9
|
+
const handlePointerDown = () => {
|
|
10
|
+
pressed = true;
|
|
11
|
+
};
|
|
12
|
+
const handlePointerUp = () => {
|
|
13
|
+
if (!pressed) return;
|
|
14
|
+
pressed = false;
|
|
15
|
+
if (pending) {
|
|
16
|
+
pending = false;
|
|
17
|
+
frame = requestAnimationFrame(update);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
target?.addEventListener("pointerdown", handlePointerDown);
|
|
21
|
+
window.addEventListener("pointerup", handlePointerUp, true);
|
|
22
|
+
window.addEventListener("pointercancel", handlePointerUp, true);
|
|
23
|
+
const cleanup = (0, _floating_ui_react.autoUpdate)(reference, floating, () => {
|
|
24
|
+
if (pressed) pending = true;
|
|
25
|
+
else update();
|
|
26
|
+
});
|
|
27
|
+
return () => {
|
|
28
|
+
cleanup();
|
|
29
|
+
cancelAnimationFrame(frame);
|
|
30
|
+
target?.removeEventListener("pointerdown", handlePointerDown);
|
|
31
|
+
window.removeEventListener("pointerup", handlePointerUp, true);
|
|
32
|
+
window.removeEventListener("pointercancel", handlePointerUp, true);
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
//#endregion
|
|
36
|
+
exports.pressAwareAutoUpdate = pressAwareAutoUpdate;
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=press-aware-auto-update.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"press-aware-auto-update.cjs","names":["autoUpdate"],"sources":["../../../src/components/Tour/press-aware-auto-update.ts"],"sourcesContent":["import { autoUpdate, type ReferenceType } from '@floating-ui/react';\n\nexport function pressAwareAutoUpdate(\n reference: ReferenceType,\n floating: HTMLElement,\n update: () => void\n) {\n const target = reference instanceof Element ? reference : null;\n let pressed = false;\n let pending = false;\n let frame = -1;\n\n const handlePointerDown = () => {\n pressed = true;\n };\n\n const handlePointerUp = () => {\n if (!pressed) {\n return;\n }\n\n pressed = false;\n\n if (pending) {\n pending = false;\n frame = requestAnimationFrame(update);\n }\n };\n\n target?.addEventListener('pointerdown', handlePointerDown);\n window.addEventListener('pointerup', handlePointerUp, true);\n window.addEventListener('pointercancel', handlePointerUp, true);\n\n const cleanup = autoUpdate(reference, floating, () => {\n if (pressed) {\n pending = true;\n } else {\n update();\n }\n });\n\n return () => {\n cleanup();\n cancelAnimationFrame(frame);\n target?.removeEventListener('pointerdown', handlePointerDown);\n window.removeEventListener('pointerup', handlePointerUp, true);\n window.removeEventListener('pointercancel', handlePointerUp, true);\n };\n}\n"],"mappings":";;;AAEA,SAAgB,qBACd,WACA,UACA,QACA;CACA,MAAM,SAAS,qBAAqB,UAAU,YAAY;CAC1D,IAAI,UAAU;CACd,IAAI,UAAU;CACd,IAAI,QAAQ;CAEZ,MAAM,0BAA0B;EAC9B,UAAU;CACZ;CAEA,MAAM,wBAAwB;EAC5B,IAAI,CAAC,SACH;EAGF,UAAU;EAEV,IAAI,SAAS;GACX,UAAU;GACV,QAAQ,sBAAsB,MAAM;EACtC;CACF;CAEA,QAAQ,iBAAiB,eAAe,iBAAiB;CACzD,OAAO,iBAAiB,aAAa,iBAAiB,IAAI;CAC1D,OAAO,iBAAiB,iBAAiB,iBAAiB,IAAI;CAE9D,MAAM,WAAA,GAAUA,mBAAAA,WAAAA,CAAW,WAAW,gBAAgB;EACpD,IAAI,SACF,UAAU;OAEV,OAAO;CAEX,CAAC;CAED,aAAa;EACX,QAAQ;EACR,qBAAqB,KAAK;EAC1B,QAAQ,oBAAoB,eAAe,iBAAiB;EAC5D,OAAO,oBAAoB,aAAa,iBAAiB,IAAI;EAC7D,OAAO,oBAAoB,iBAAiB,iBAAiB,IAAI;CACnE;AACF"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
let react = require("react");
|
|
3
|
+
let _mantine_hooks = require("@mantine/hooks");
|
|
4
|
+
//#region packages/@mantine/core/src/components/Tour/use-target-rect.ts
|
|
5
|
+
function resolveTarget(target) {
|
|
6
|
+
if (!target) return null;
|
|
7
|
+
return typeof target === "string" ? document.querySelector(target) : target.current || null;
|
|
8
|
+
}
|
|
9
|
+
function useTargetElement(target) {
|
|
10
|
+
const [element, setElement] = (0, react.useState)(null);
|
|
11
|
+
(0, _mantine_hooks.useIsomorphicEffect)(() => {
|
|
12
|
+
const el = resolveTarget(target);
|
|
13
|
+
setElement(el);
|
|
14
|
+
if (el || typeof target !== "string") return;
|
|
15
|
+
const mutationObserver = new MutationObserver(() => {
|
|
16
|
+
const found = resolveTarget(target);
|
|
17
|
+
if (found) {
|
|
18
|
+
mutationObserver.disconnect();
|
|
19
|
+
setElement(found);
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
mutationObserver.observe(document.body, {
|
|
23
|
+
childList: true,
|
|
24
|
+
subtree: true
|
|
25
|
+
});
|
|
26
|
+
return () => {
|
|
27
|
+
mutationObserver.disconnect();
|
|
28
|
+
};
|
|
29
|
+
}, [target]);
|
|
30
|
+
return element;
|
|
31
|
+
}
|
|
32
|
+
function useTargetRect(element) {
|
|
33
|
+
const [rect, setRect] = (0, react.useState)(null);
|
|
34
|
+
const updateRect = (0, react.useCallback)(() => {
|
|
35
|
+
if (!element) return;
|
|
36
|
+
const r = element.getBoundingClientRect();
|
|
37
|
+
setRect((previous) => previous && previous.top === r.top && previous.left === r.left && previous.width === r.width && previous.height === r.height ? previous : {
|
|
38
|
+
top: r.top,
|
|
39
|
+
left: r.left,
|
|
40
|
+
width: r.width,
|
|
41
|
+
height: r.height
|
|
42
|
+
});
|
|
43
|
+
}, [element]);
|
|
44
|
+
(0, react.useEffect)(() => {
|
|
45
|
+
if (!element) {
|
|
46
|
+
setRect(null);
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
updateRect();
|
|
50
|
+
}, [element, updateRect]);
|
|
51
|
+
return {
|
|
52
|
+
rect,
|
|
53
|
+
updateRect
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
//#endregion
|
|
57
|
+
exports.resolveTarget = resolveTarget;
|
|
58
|
+
exports.useTargetElement = useTargetElement;
|
|
59
|
+
exports.useTargetRect = useTargetRect;
|
|
60
|
+
|
|
61
|
+
//# sourceMappingURL=use-target-rect.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-target-rect.cjs","names":["useState","useCallback"],"sources":["../../../src/components/Tour/use-target-rect.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\n\nexport type TourTarget = string | React.RefObject<HTMLElement | null> | undefined;\n\nexport interface TargetRect {\n top: number;\n left: number;\n width: number;\n height: number;\n}\n\nexport function resolveTarget(target: TourTarget): HTMLElement | null {\n if (!target) {\n return null;\n }\n\n return typeof target === 'string'\n ? document.querySelector<HTMLElement>(target)\n : target.current || null;\n}\n\nexport function useTargetElement(target: TourTarget) {\n const [element, setElement] = useState<HTMLElement | null>(null);\n\n useIsomorphicEffect(() => {\n const el = resolveTarget(target);\n setElement(el);\n\n if (el || typeof target !== 'string') {\n return undefined;\n }\n\n const mutationObserver = new MutationObserver(() => {\n const found = resolveTarget(target);\n if (found) {\n mutationObserver.disconnect();\n setElement(found);\n }\n });\n\n mutationObserver.observe(document.body, { childList: true, subtree: true });\n\n return () => {\n mutationObserver.disconnect();\n };\n }, [target]);\n\n return element;\n}\n\nexport function useTargetRect(element: HTMLElement | null) {\n const [rect, setRect] = useState<TargetRect | null>(null);\n\n const updateRect = useCallback(() => {\n if (!element) {\n return;\n }\n\n const r = element.getBoundingClientRect();\n setRect((previous) =>\n previous &&\n previous.top === r.top &&\n previous.left === r.left &&\n previous.width === r.width &&\n previous.height === r.height\n ? previous\n : { top: r.top, left: r.left, width: r.width, height: r.height }\n );\n }, [element]);\n\n useEffect(() => {\n if (!element) {\n setRect(null);\n return;\n }\n\n updateRect();\n }, [element, updateRect]);\n\n return { rect, updateRect };\n}\n"],"mappings":";;;;AAYA,SAAgB,cAAc,QAAwC;CACpE,IAAI,CAAC,QACH,OAAO;CAGT,OAAO,OAAO,WAAW,WACrB,SAAS,cAA2B,MAAM,IAC1C,OAAO,WAAW;AACxB;AAEA,SAAgB,iBAAiB,QAAoB;CACnD,MAAM,CAAC,SAAS,eAAA,GAAcA,MAAAA,SAAAA,CAA6B,IAAI;CAE/D,CAAA,GAAA,eAAA,oBAAA,OAA0B;EACxB,MAAM,KAAK,cAAc,MAAM;EAC/B,WAAW,EAAE;EAEb,IAAI,MAAM,OAAO,WAAW,UAC1B;EAGF,MAAM,mBAAmB,IAAI,uBAAuB;GAClD,MAAM,QAAQ,cAAc,MAAM;GAClC,IAAI,OAAO;IACT,iBAAiB,WAAW;IAC5B,WAAW,KAAK;GAClB;EACF,CAAC;EAED,iBAAiB,QAAQ,SAAS,MAAM;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAE1E,aAAa;GACX,iBAAiB,WAAW;EAC9B;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO;AACT;AAEA,SAAgB,cAAc,SAA6B;CACzD,MAAM,CAAC,MAAM,YAAA,GAAWA,MAAAA,SAAAA,CAA4B,IAAI;CAExD,MAAM,cAAA,GAAaC,MAAAA,YAAAA,OAAkB;EACnC,IAAI,CAAC,SACH;EAGF,MAAM,IAAI,QAAQ,sBAAsB;EACxC,SAAS,aACP,YACA,SAAS,QAAQ,EAAE,OACnB,SAAS,SAAS,EAAE,QACpB,SAAS,UAAU,EAAE,SACrB,SAAS,WAAW,EAAE,SAClB,WACA;GAAE,KAAK,EAAE;GAAK,MAAM,EAAE;GAAM,OAAO,EAAE;GAAO,QAAQ,EAAE;EAAO,CACnE;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,SAAS;GACZ,QAAQ,IAAI;GACZ;EACF;EAEA,WAAW;CACb,GAAG,CAAC,SAAS,UAAU,CAAC;CAExB,OAAO;EAAE;EAAM;CAAW;AAC5B"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
let react = require("react");
|
|
3
|
+
let _mantine_hooks = require("@mantine/hooks");
|
|
4
|
+
//#region packages/@mantine/core/src/components/Tour/use-tooltip-auto-focus.ts
|
|
5
|
+
function isFocusLost() {
|
|
6
|
+
return document.activeElement === null || document.activeElement === document.body;
|
|
7
|
+
}
|
|
8
|
+
function useTooltipAutoFocus({ autoFocus, opened, step }) {
|
|
9
|
+
const autoFocusRef = (0, react.useRef)(autoFocus);
|
|
10
|
+
const nodeRef = (0, react.useRef)(null);
|
|
11
|
+
(0, _mantine_hooks.useIsomorphicEffect)(() => {
|
|
12
|
+
autoFocusRef.current = autoFocus;
|
|
13
|
+
});
|
|
14
|
+
(0, react.useEffect)(() => {
|
|
15
|
+
const node = nodeRef.current;
|
|
16
|
+
if (opened && node?.isConnected && isFocusLost()) node.focus({ preventScroll: true });
|
|
17
|
+
}, [step]);
|
|
18
|
+
return (0, react.useCallback)((node) => {
|
|
19
|
+
nodeRef.current = node;
|
|
20
|
+
if (!node) return;
|
|
21
|
+
const timeout = window.setTimeout(() => {
|
|
22
|
+
if (!autoFocusRef.current || !node.isConnected || node.contains(document.activeElement)) return;
|
|
23
|
+
node.focus({ preventScroll: true });
|
|
24
|
+
});
|
|
25
|
+
return () => {
|
|
26
|
+
window.clearTimeout(timeout);
|
|
27
|
+
if (nodeRef.current === node) nodeRef.current = null;
|
|
28
|
+
};
|
|
29
|
+
}, []);
|
|
30
|
+
}
|
|
31
|
+
//#endregion
|
|
32
|
+
exports.useTooltipAutoFocus = useTooltipAutoFocus;
|
|
33
|
+
|
|
34
|
+
//# sourceMappingURL=use-tooltip-auto-focus.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-tooltip-auto-focus.cjs","names":["useRef","useCallback"],"sources":["../../../src/components/Tour/use-tooltip-auto-focus.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\n\ninterface UseTooltipAutoFocusInput {\n autoFocus: boolean;\n opened: boolean;\n step: number;\n}\n\nfunction isFocusLost() {\n return document.activeElement === null || document.activeElement === document.body;\n}\n\nexport function useTooltipAutoFocus({ autoFocus, opened, step }: UseTooltipAutoFocusInput) {\n const autoFocusRef = useRef(autoFocus);\n const nodeRef = useRef<HTMLElement | null>(null);\n\n useIsomorphicEffect(() => {\n autoFocusRef.current = autoFocus;\n });\n\n useEffect(() => {\n const node = nodeRef.current;\n if (opened && node?.isConnected && isFocusLost()) {\n node.focus({ preventScroll: true });\n }\n }, [step]);\n\n return useCallback((node: HTMLElement | null) => {\n nodeRef.current = node;\n\n if (!node) {\n return undefined;\n }\n\n const timeout = window.setTimeout(() => {\n if (!autoFocusRef.current || !node.isConnected || node.contains(document.activeElement)) {\n return;\n }\n\n node.focus({ preventScroll: true });\n });\n\n return () => {\n window.clearTimeout(timeout);\n if (nodeRef.current === node) {\n nodeRef.current = null;\n }\n };\n }, []);\n}\n"],"mappings":";;;;AASA,SAAS,cAAc;CACrB,OAAO,SAAS,kBAAkB,QAAQ,SAAS,kBAAkB,SAAS;AAChF;AAEA,SAAgB,oBAAoB,EAAE,WAAW,QAAQ,QAAkC;CACzF,MAAM,gBAAA,GAAeA,MAAAA,OAAAA,CAAO,SAAS;CACrC,MAAM,WAAA,GAAUA,MAAAA,OAAAA,CAA2B,IAAI;CAE/C,CAAA,GAAA,eAAA,oBAAA,OAA0B;EACxB,aAAa,UAAU;CACzB,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,UAAU,MAAM,eAAe,YAAY,GAC7C,KAAK,MAAM,EAAE,eAAe,KAAK,CAAC;CAEtC,GAAG,CAAC,IAAI,CAAC;CAET,QAAA,GAAOC,MAAAA,YAAAA,EAAa,SAA6B;EAC/C,QAAQ,UAAU;EAElB,IAAI,CAAC,MACH;EAGF,MAAM,UAAU,OAAO,iBAAiB;GACtC,IAAI,CAAC,aAAa,WAAW,CAAC,KAAK,eAAe,KAAK,SAAS,SAAS,aAAa,GACpF;GAGF,KAAK,MAAM,EAAE,eAAe,KAAK,CAAC;EACpC,CAAC;EAED,aAAa;GACX,OAAO,aAAa,OAAO;GAC3B,IAAI,QAAQ,YAAY,MACtB,QAAQ,UAAU;EAEtB;CACF,GAAG,CAAC,CAAC;AACP"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_DirectionProvider = require("../../core/DirectionProvider/DirectionProvider.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
let _mantine_hooks = require("@mantine/hooks");
|
|
5
|
+
//#region packages/@mantine/core/src/components/Tour/use-tour-state.ts
|
|
6
|
+
function useTourState({ active, onClose, step, defaultStep, onStepChange, onStepOpen, onStepClose, mode, stepsCount, closeOnEscape, withKeyboardNavigation }) {
|
|
7
|
+
const { dir } = require_DirectionProvider.useDirection();
|
|
8
|
+
const targetRef = (0, react.useRef)(null);
|
|
9
|
+
const [currentStep, setCurrentStep, controlled] = (0, _mantine_hooks.useUncontrolled)({
|
|
10
|
+
value: step,
|
|
11
|
+
defaultValue: defaultStep,
|
|
12
|
+
finalValue: 0,
|
|
13
|
+
onChange: onStepChange
|
|
14
|
+
});
|
|
15
|
+
const [beaconOpenStep, setBeaconOpenStep] = (0, react.useState)(null);
|
|
16
|
+
const resetUncontrolledStep = (0, react.useEffectEvent)(() => {
|
|
17
|
+
const initialStep = defaultStep ?? 0;
|
|
18
|
+
if (!controlled && currentStep !== initialStep) setCurrentStep(initialStep);
|
|
19
|
+
});
|
|
20
|
+
const wasActiveRef = (0, react.useRef)(!!active);
|
|
21
|
+
(0, react.useEffect)(() => {
|
|
22
|
+
if (wasActiveRef.current && !active) resetUncontrolledStep();
|
|
23
|
+
wasActiveRef.current = !!active;
|
|
24
|
+
}, [active]);
|
|
25
|
+
const showTooltip = !!active && (mode === "guided" || beaconOpenStep !== null);
|
|
26
|
+
const displayStepIndex = mode === "beacon" && beaconOpenStep !== null ? beaconOpenStep : currentStep;
|
|
27
|
+
const openStep = showTooltip && displayStepIndex >= 0 ? displayStepIndex : null;
|
|
28
|
+
const reportedStepRef = (0, react.useRef)(null);
|
|
29
|
+
const emitStepClose = (0, react.useEffectEvent)((index) => onStepClose(index));
|
|
30
|
+
const emitStepOpen = (0, react.useEffectEvent)((index) => onStepOpen(index));
|
|
31
|
+
(0, react.useEffect)(() => {
|
|
32
|
+
const previousStep = reportedStepRef.current;
|
|
33
|
+
if (previousStep === openStep) return;
|
|
34
|
+
reportedStepRef.current = openStep;
|
|
35
|
+
if (previousStep !== null) emitStepClose(previousStep);
|
|
36
|
+
if (openStep !== null) emitStepOpen(openStep);
|
|
37
|
+
}, [openStep]);
|
|
38
|
+
const close = () => {
|
|
39
|
+
const openedStep = reportedStepRef.current;
|
|
40
|
+
if (openedStep !== null) {
|
|
41
|
+
reportedStepRef.current = null;
|
|
42
|
+
onStepClose(openedStep);
|
|
43
|
+
}
|
|
44
|
+
setBeaconOpenStep(null);
|
|
45
|
+
onClose?.();
|
|
46
|
+
};
|
|
47
|
+
const setStep = (index) => {
|
|
48
|
+
if (mode === "beacon" && beaconOpenStep !== null) setBeaconOpenStep(index);
|
|
49
|
+
setCurrentStep(index);
|
|
50
|
+
};
|
|
51
|
+
const openBeaconStep = (index) => {
|
|
52
|
+
setBeaconOpenStep(index);
|
|
53
|
+
setCurrentStep(index);
|
|
54
|
+
};
|
|
55
|
+
(0, _mantine_hooks.useFocusReturn)({
|
|
56
|
+
opened: !!active,
|
|
57
|
+
shouldReturnFocus: true
|
|
58
|
+
});
|
|
59
|
+
const isInsideTarget = (event) => !!targetRef.current && event.target instanceof Node && targetRef.current.contains(event.target);
|
|
60
|
+
const goToNextStep = (event) => {
|
|
61
|
+
if (isInsideTarget(event)) return;
|
|
62
|
+
event.preventDefault();
|
|
63
|
+
if (currentStep < stepsCount - 1) setCurrentStep(currentStep + 1);
|
|
64
|
+
else close();
|
|
65
|
+
};
|
|
66
|
+
const goToPreviousStep = (event) => {
|
|
67
|
+
if (isInsideTarget(event)) return;
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
if (currentStep > 0) setCurrentStep(currentStep - 1);
|
|
70
|
+
};
|
|
71
|
+
const arrowHotkeys = [];
|
|
72
|
+
if (active && mode === "guided" && withKeyboardNavigation) {
|
|
73
|
+
arrowHotkeys.push([
|
|
74
|
+
dir === "rtl" ? "ArrowLeft" : "ArrowRight",
|
|
75
|
+
goToNextStep,
|
|
76
|
+
{ preventDefault: false }
|
|
77
|
+
]);
|
|
78
|
+
arrowHotkeys.push([
|
|
79
|
+
dir === "rtl" ? "ArrowRight" : "ArrowLeft",
|
|
80
|
+
goToPreviousStep,
|
|
81
|
+
{ preventDefault: false }
|
|
82
|
+
]);
|
|
83
|
+
}
|
|
84
|
+
(0, _mantine_hooks.useHotkeys)(arrowHotkeys);
|
|
85
|
+
(0, _mantine_hooks.useWindowEvent)("keydown", (event) => {
|
|
86
|
+
if (event.key === "Escape" && showTooltip && closeOnEscape && !event.isComposing && event.target?.getAttribute?.("data-mantine-stop-propagation") !== "true") close();
|
|
87
|
+
}, { capture: true });
|
|
88
|
+
return {
|
|
89
|
+
currentStep,
|
|
90
|
+
setStep,
|
|
91
|
+
beaconOpenStep,
|
|
92
|
+
openBeaconStep,
|
|
93
|
+
showTooltip,
|
|
94
|
+
displayStepIndex,
|
|
95
|
+
close,
|
|
96
|
+
targetRef
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
//#endregion
|
|
100
|
+
exports.useTourState = useTourState;
|
|
101
|
+
|
|
102
|
+
//# sourceMappingURL=use-tour-state.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-tour-state.cjs","names":["useDirection","useRef","useUncontrolled","useState","useEffectEvent"],"sources":["../../../src/components/Tour/use-tour-state.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport {\n useFocusReturn,\n useHotkeys,\n useUncontrolled,\n useWindowEvent,\n type HotkeyItem,\n} from '@mantine/hooks';\nimport { useDirection } from '../../core';\n\nexport interface UseTourStateInput {\n active: boolean | undefined;\n onClose: (() => void) | undefined;\n step: number | undefined;\n defaultStep: number | undefined;\n onStepChange: ((step: number) => void) | undefined;\n onStepOpen: (step: number) => void;\n onStepClose: (step: number) => void;\n mode: 'guided' | 'beacon';\n stepsCount: number;\n closeOnEscape: boolean | undefined;\n withKeyboardNavigation: boolean | undefined;\n}\n\nexport function useTourState({\n active,\n onClose,\n step,\n defaultStep,\n onStepChange,\n onStepOpen,\n onStepClose,\n mode,\n stepsCount,\n closeOnEscape,\n withKeyboardNavigation,\n}: UseTourStateInput) {\n const { dir } = useDirection();\n const targetRef = useRef<HTMLElement | null>(null);\n\n const [currentStep, setCurrentStep, controlled] = useUncontrolled({\n value: step,\n defaultValue: defaultStep,\n finalValue: 0,\n onChange: onStepChange,\n });\n\n const [beaconOpenStep, setBeaconOpenStep] = useState<number | null>(null);\n\n const resetUncontrolledStep = useEffectEvent(() => {\n const initialStep = defaultStep ?? 0;\n if (!controlled && currentStep !== initialStep) {\n setCurrentStep(initialStep);\n }\n });\n\n const wasActiveRef = useRef(!!active);\n\n useEffect(() => {\n if (wasActiveRef.current && !active) {\n resetUncontrolledStep();\n }\n wasActiveRef.current = !!active;\n }, [active]);\n\n const showTooltip = !!active && (mode === 'guided' || beaconOpenStep !== null);\n const displayStepIndex =\n mode === 'beacon' && beaconOpenStep !== null ? beaconOpenStep : currentStep;\n const openStep = showTooltip && displayStepIndex >= 0 ? displayStepIndex : null;\n\n const reportedStepRef = useRef<number | null>(null);\n const emitStepClose = useEffectEvent((index: number) => onStepClose(index));\n const emitStepOpen = useEffectEvent((index: number) => onStepOpen(index));\n\n useEffect(() => {\n const previousStep = reportedStepRef.current;\n\n if (previousStep === openStep) {\n return;\n }\n\n reportedStepRef.current = openStep;\n\n if (previousStep !== null) {\n emitStepClose(previousStep);\n }\n\n if (openStep !== null) {\n emitStepOpen(openStep);\n }\n }, [openStep]);\n\n const close = () => {\n const openedStep = reportedStepRef.current;\n\n if (openedStep !== null) {\n reportedStepRef.current = null;\n onStepClose(openedStep);\n }\n\n setBeaconOpenStep(null);\n onClose?.();\n };\n\n const setStep = (index: number) => {\n if (mode === 'beacon' && beaconOpenStep !== null) {\n setBeaconOpenStep(index);\n }\n setCurrentStep(index);\n };\n\n const openBeaconStep = (index: number) => {\n setBeaconOpenStep(index);\n setCurrentStep(index);\n };\n\n useFocusReturn({ opened: !!active, shouldReturnFocus: true });\n\n const isInsideTarget = (event: KeyboardEvent) =>\n !!targetRef.current && event.target instanceof Node && targetRef.current.contains(event.target);\n\n const goToNextStep = (event: KeyboardEvent) => {\n if (isInsideTarget(event)) {\n return;\n }\n\n event.preventDefault();\n\n if (currentStep < stepsCount - 1) {\n setCurrentStep(currentStep + 1);\n } else {\n close();\n }\n };\n\n const goToPreviousStep = (event: KeyboardEvent) => {\n if (isInsideTarget(event)) {\n return;\n }\n\n event.preventDefault();\n\n if (currentStep > 0) {\n setCurrentStep(currentStep - 1);\n }\n };\n\n const arrowHotkeys: HotkeyItem[] = [];\n\n if (active && mode === 'guided' && withKeyboardNavigation) {\n arrowHotkeys.push([\n dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight',\n goToNextStep,\n { preventDefault: false },\n ]);\n arrowHotkeys.push([\n dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft',\n goToPreviousStep,\n { preventDefault: false },\n ]);\n }\n\n useHotkeys(arrowHotkeys);\n useWindowEvent(\n 'keydown',\n (event) => {\n if (\n event.key === 'Escape' &&\n showTooltip &&\n closeOnEscape &&\n !event.isComposing &&\n (event.target as HTMLElement | null)?.getAttribute?.('data-mantine-stop-propagation') !==\n 'true'\n ) {\n close();\n }\n },\n { capture: true }\n );\n\n return {\n currentStep,\n setStep,\n beaconOpenStep,\n openBeaconStep,\n showTooltip,\n displayStepIndex,\n close,\n targetRef,\n };\n}\n"],"mappings":";;;;;AAwBA,SAAgB,aAAa,EAC3B,QACA,SACA,MACA,aACA,cACA,YACA,aACA,MACA,YACA,eACA,0BACoB;CACpB,MAAM,EAAE,QAAQA,0BAAAA,aAAa;CAC7B,MAAM,aAAA,GAAYC,MAAAA,OAAAA,CAA2B,IAAI;CAEjD,MAAM,CAAC,aAAa,gBAAgB,eAAA,GAAcC,eAAAA,gBAAAA,CAAgB;EAChE,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,gBAAgB,sBAAA,GAAqBC,MAAAA,SAAAA,CAAwB,IAAI;CAExE,MAAM,yBAAA,GAAwBC,MAAAA,eAAAA,OAAqB;EACjD,MAAM,cAAc,eAAe;EACnC,IAAI,CAAC,cAAc,gBAAgB,aACjC,eAAe,WAAW;CAE9B,CAAC;CAED,MAAM,gBAAA,GAAeH,MAAAA,OAAAA,CAAO,CAAC,CAAC,MAAM;CAEpC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,aAAa,WAAW,CAAC,QAC3B,sBAAsB;EAExB,aAAa,UAAU,CAAC,CAAC;CAC3B,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,CAAC,CAAC,WAAW,SAAS,YAAY,mBAAmB;CACzE,MAAM,mBACJ,SAAS,YAAY,mBAAmB,OAAO,iBAAiB;CAClE,MAAM,WAAW,eAAe,oBAAoB,IAAI,mBAAmB;CAE3E,MAAM,mBAAA,GAAkBA,MAAAA,OAAAA,CAAsB,IAAI;CAClD,MAAM,iBAAA,GAAgBG,MAAAA,eAAAA,EAAgB,UAAkB,YAAY,KAAK,CAAC;CAC1E,MAAM,gBAAA,GAAeA,MAAAA,eAAAA,EAAgB,UAAkB,WAAW,KAAK,CAAC;CAExE,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,eAAe,gBAAgB;EAErC,IAAI,iBAAiB,UACnB;EAGF,gBAAgB,UAAU;EAE1B,IAAI,iBAAiB,MACnB,cAAc,YAAY;EAG5B,IAAI,aAAa,MACf,aAAa,QAAQ;CAEzB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,cAAc;EAClB,MAAM,aAAa,gBAAgB;EAEnC,IAAI,eAAe,MAAM;GACvB,gBAAgB,UAAU;GAC1B,YAAY,UAAU;EACxB;EAEA,kBAAkB,IAAI;EACtB,UAAU;CACZ;CAEA,MAAM,WAAW,UAAkB;EACjC,IAAI,SAAS,YAAY,mBAAmB,MAC1C,kBAAkB,KAAK;EAEzB,eAAe,KAAK;CACtB;CAEA,MAAM,kBAAkB,UAAkB;EACxC,kBAAkB,KAAK;EACvB,eAAe,KAAK;CACtB;CAEA,CAAA,GAAA,eAAA,eAAA,CAAe;EAAE,QAAQ,CAAC,CAAC;EAAQ,mBAAmB;CAAK,CAAC;CAE5D,MAAM,kBAAkB,UACtB,CAAC,CAAC,UAAU,WAAW,MAAM,kBAAkB,QAAQ,UAAU,QAAQ,SAAS,MAAM,MAAM;CAEhG,MAAM,gBAAgB,UAAyB;EAC7C,IAAI,eAAe,KAAK,GACtB;EAGF,MAAM,eAAe;EAErB,IAAI,cAAc,aAAa,GAC7B,eAAe,cAAc,CAAC;OAE9B,MAAM;CAEV;CAEA,MAAM,oBAAoB,UAAyB;EACjD,IAAI,eAAe,KAAK,GACtB;EAGF,MAAM,eAAe;EAErB,IAAI,cAAc,GAChB,eAAe,cAAc,CAAC;CAElC;CAEA,MAAM,eAA6B,CAAC;CAEpC,IAAI,UAAU,SAAS,YAAY,wBAAwB;EACzD,aAAa,KAAK;GAChB,QAAQ,QAAQ,cAAc;GAC9B;GACA,EAAE,gBAAgB,MAAM;EAC1B,CAAC;EACD,aAAa,KAAK;GAChB,QAAQ,QAAQ,eAAe;GAC/B;GACA,EAAE,gBAAgB,MAAM;EAC1B,CAAC;CACH;CAEA,CAAA,GAAA,eAAA,WAAA,CAAW,YAAY;CACvB,CAAA,GAAA,eAAA,eAAA,CACE,YACC,UAAU;EACT,IACE,MAAM,QAAQ,YACd,eACA,iBACA,CAAC,MAAM,eACN,MAAM,QAA+B,eAAe,+BAA+B,MAClF,QAEF,MAAM;CAEV,GACA,EAAE,SAAS,KAAK,CAClB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
|