@tcn/ui 0.2.0 → 0.3.1
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/dist/Color-ASIRERSW-B4GaVKuQ.js +990 -0
- package/dist/Color-ASIRERSW-B4GaVKuQ.js.map +1 -0
- package/dist/WithTooltip-IO6J4KBT-B1oq93K5.js +1485 -0
- package/dist/WithTooltip-IO6J4KBT-B1oq93K5.js.map +1 -0
- package/dist/actions/__docs__/components/gallery.d.ts +8 -0
- package/dist/actions/__docs__/components/gallery.d.ts.map +1 -0
- package/dist/actions/__docs__/components/gallery.js +20 -0
- package/dist/actions/__docs__/components/gallery.js.map +1 -0
- package/dist/actions/__docs__/components/showcase.d.ts +27 -0
- package/dist/actions/__docs__/components/showcase.d.ts.map +1 -0
- package/dist/actions/__docs__/components/showcase.js +15 -0
- package/dist/actions/__docs__/components/showcase.js.map +1 -0
- package/dist/actions/button/base_button/base_button.d.ts +2 -0
- package/dist/actions/button/base_button/base_button.d.ts.map +1 -1
- package/dist/actions/button/base_button/base_button.js +18 -16
- package/dist/actions/button/base_button/base_button.js.map +1 -1
- package/dist/actions/button/button/button.js +6 -6
- package/dist/actions/button/button_group/button_group.js +1 -1
- package/dist/actions/button/select_group/select_group.js +13 -13
- package/dist/actions/button/select_group/single_select_group.js +6 -6
- package/dist/actions/button/slim_button/slim_button.js +2 -2
- package/dist/actions/types.d.ts +2 -0
- package/dist/actions/types.d.ts.map +1 -0
- package/dist/actions/types.js +2 -0
- package/dist/actions/types.js.map +1 -0
- package/dist/divider.module-FptFV0PX.js +5 -0
- package/dist/divider.module-FptFV0PX.js.map +1 -0
- package/dist/feedback/loading/loading.js +12 -12
- package/dist/feedback/loading/loading.js.map +1 -1
- package/dist/feedback/progress/progress_bar.js +1 -1
- package/dist/form/field/common/field_control/field_control.js +8 -8
- package/dist/form/field/common/status_input/status_input.js +6 -6
- package/dist/form/field/field.js +6 -6
- package/dist/form/field/h_field/h_field.js +11 -11
- package/dist/form/field/v_field/v_field.js +10 -10
- package/dist/form/field_set/field_set.js +3 -3
- package/dist/formatter-QJ4M4OGQ-DaIl2Wi_.js +6 -0
- package/dist/formatter-QJ4M4OGQ-DaIl2Wi_.js.map +1 -0
- package/dist/frame.css +1 -0
- package/dist/gallery.css +1 -0
- package/dist/inputs/checkbox/checkbox.js +11 -11
- package/dist/inputs/color_input/color_input.js +1 -1
- package/dist/inputs/color_input/color_input.js.map +1 -1
- package/dist/inputs/color_input/color_picker.js +6 -6
- package/dist/inputs/combo_box/combo_box.js +17 -17
- package/dist/inputs/date_picker/date_picker.js +19 -19
- package/dist/inputs/date_picker/date_picker_body.js +2 -2
- package/dist/inputs/date_picker/date_picker_input.js +20 -20
- package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_year_input.js +1 -1
- package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_year_selector.js +1 -1
- package/dist/inputs/input/input.js +5 -5
- package/dist/inputs/mask_input/key_capture_input.js +8 -8
- package/dist/inputs/mask_input/mask_input.js +5 -5
- package/dist/inputs/multi_combo_box/multi_combo_box.js +17 -17
- package/dist/inputs/multiselect/multiselect.js +14 -14
- package/dist/inputs/multiselect/multiselect_row.js +8 -8
- package/dist/inputs/phone_number_input/phone_number_input.js +12 -12
- package/dist/inputs/radio/radio.js +10 -10
- package/dist/inputs/radio/radio_row.js +3 -3
- package/dist/inputs/select/select.js +15 -15
- package/dist/inputs/slider/slider.js +11 -11
- package/dist/inputs/suggestions/suggestion_list.js +2 -2
- package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
- package/dist/inputs/switch/switch.js +5 -5
- package/dist/inputs/textarea/textarea.js +7 -7
- package/dist/inputs/unit_input/unit_input.js +5 -5
- package/dist/layouts/body/h_body.js +7 -7
- package/dist/layouts/body/v_body.js +6 -6
- package/dist/layouts/column/column.js +17 -17
- package/dist/layouts/divider/divider.js +24 -23
- package/dist/layouts/divider/divider.js.map +1 -1
- package/dist/layouts/footer/footer.js +7 -7
- package/dist/layouts/grid/grid.js +24 -24
- package/dist/layouts/header/header.js +2 -2
- package/dist/layouts/index.d.ts +6 -5
- package/dist/layouts/index.d.ts.map +1 -1
- package/dist/layouts/index.js +28 -26
- package/dist/layouts/index.js.map +1 -1
- package/dist/layouts/list/item.js +2 -2
- package/dist/layouts/list/list.js +7 -7
- package/dist/layouts/list/section_header.js +6 -6
- package/dist/layouts/scaffold/scaffold.d.ts +9 -0
- package/dist/layouts/scaffold/scaffold.d.ts.map +1 -0
- package/dist/layouts/scaffold/scaffold.js +55 -0
- package/dist/layouts/scaffold/scaffold.js.map +1 -0
- package/dist/layouts/sidebar_end/sidebar_end.js +14 -14
- package/dist/layouts/sidebar_start/sidebar_start.js +10 -10
- package/dist/layouts/utility_bar/utility_bar.js +10 -10
- package/dist/modal.css +1 -1
- package/dist/overlay/frame/frame.d.ts.map +1 -1
- package/dist/overlay/frame/frame.js +22 -5
- package/dist/overlay/frame/frame.js.map +1 -1
- package/dist/overlay/index.d.ts +9 -2
- package/dist/overlay/index.d.ts.map +1 -1
- package/dist/overlay/index.js +22 -10
- package/dist/overlay/index.js.map +1 -1
- package/dist/overlay/menu/menu.d.ts +1 -1
- package/dist/overlay/menu/menu.d.ts.map +1 -1
- package/dist/overlay/menu/menu.js +36 -36
- package/dist/overlay/menu/menu.js.map +1 -1
- package/dist/overlay/popper/base/base_popper.d.ts +11 -0
- package/dist/overlay/popper/base/base_popper.d.ts.map +1 -0
- package/dist/overlay/popper/base/base_popper.js +27 -0
- package/dist/overlay/popper/base/base_popper.js.map +1 -0
- package/dist/overlay/popper/base/dismissal_decorator.d.ts +16 -0
- package/dist/overlay/popper/base/dismissal_decorator.d.ts.map +1 -0
- package/dist/overlay/popper/base/dismissal_decorator.js +69 -0
- package/dist/overlay/popper/base/dismissal_decorator.js.map +1 -0
- package/dist/overlay/popper/context_popper.d.ts +11 -0
- package/dist/overlay/popper/context_popper.d.ts.map +1 -0
- package/dist/overlay/popper/context_popper.js +33 -0
- package/dist/overlay/popper/context_popper.js.map +1 -0
- package/dist/overlay/popper/element_popper.d.ts +7 -0
- package/dist/overlay/popper/element_popper.d.ts.map +1 -0
- package/dist/overlay/popper/element_popper.js +33 -0
- package/dist/overlay/popper/element_popper.js.map +1 -0
- package/dist/overlay/popper/hooks/use_context_trigger.d.ts +7 -0
- package/dist/overlay/popper/hooks/use_context_trigger.d.ts.map +1 -0
- package/dist/overlay/popper/hooks/use_context_trigger.js +31 -0
- package/dist/overlay/popper/hooks/use_context_trigger.js.map +1 -0
- package/dist/overlay/popper/hooks/use_hover_trigger.d.ts +6 -0
- package/dist/overlay/popper/hooks/use_hover_trigger.d.ts.map +1 -0
- package/dist/overlay/popper/hooks/use_hover_trigger.js +17 -0
- package/dist/overlay/popper/hooks/use_hover_trigger.js.map +1 -0
- package/dist/overlay/popper/hooks/use_restore_focus.d.ts +2 -0
- package/dist/overlay/popper/hooks/use_restore_focus.d.ts.map +1 -0
- package/dist/overlay/popper/hooks/use_restore_focus.js +18 -0
- package/dist/overlay/popper/hooks/use_restore_focus.js.map +1 -0
- package/dist/overlay/popper/legacy/popper.d.ts.map +1 -0
- package/dist/overlay/popper/{popper.js → legacy/popper.js} +6 -6
- package/dist/overlay/popper/legacy/popper.js.map +1 -0
- package/dist/overlay/popper/preview_popper.d.ts +7 -0
- package/dist/overlay/popper/preview_popper.d.ts.map +1 -0
- package/dist/overlay/popper/preview_popper.js +46 -0
- package/dist/overlay/popper/preview_popper.js.map +1 -0
- package/dist/overlay/portal/portal_platform_context.js +4 -4
- package/dist/overlay/tethered/element_tethered.d.ts +8 -0
- package/dist/overlay/tethered/element_tethered.d.ts.map +1 -0
- package/dist/overlay/tethered/element_tethered.js +33 -0
- package/dist/overlay/tethered/element_tethered.js.map +1 -0
- package/dist/overlay/tethered/hooks/calculate_position.d.ts +19 -0
- package/dist/overlay/tethered/hooks/calculate_position.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/calculate_position.js +43 -0
- package/dist/overlay/tethered/hooks/calculate_position.js.map +1 -0
- package/dist/overlay/tethered/hooks/useTether.d.ts +19 -0
- package/dist/overlay/tethered/hooks/useTether.d.ts.map +1 -0
- package/dist/overlay/tethered/hooks/useTether.js +61 -0
- package/dist/overlay/tethered/hooks/useTether.js.map +1 -0
- package/dist/overlay/tethered/tethered.d.ts +20 -0
- package/dist/overlay/tethered/tethered.d.ts.map +1 -0
- package/dist/overlay/tethered/tethered.js +59 -0
- package/dist/overlay/tethered/tethered.js.map +1 -0
- package/dist/overlay/tethered/types.d.ts +3 -0
- package/dist/overlay/tethered/types.d.ts.map +1 -0
- package/dist/overlay/tethered/types.js +2 -0
- package/dist/overlay/tethered/types.js.map +1 -0
- package/dist/popper.css +1 -1
- package/dist/scaffold.css +1 -0
- package/dist/showcase-WfP6kBEb.js +58401 -0
- package/dist/showcase-WfP6kBEb.js.map +1 -0
- package/dist/showcase.css +1 -0
- package/dist/stacks/box/box.js +24 -24
- package/dist/stacks/h_collapsible_box.js +3 -3
- package/dist/stacks/h_stack.js +41 -41
- package/dist/stacks/spacer.js +11 -11
- package/dist/stacks/story_components/circle.js +10 -10
- package/dist/stacks/story_components/picture_placeholder.js +9 -9
- package/dist/stacks/story_components/rect.js +7 -7
- package/dist/stacks/story_components/style_box.js +4 -4
- package/dist/stacks/utils/use_is_collapsed.js +6 -6
- package/dist/stacks/v_collapsible_box.js +3 -3
- package/dist/stacks/v_stack.js +42 -42
- package/dist/stacks/z_stack.js +39 -39
- package/dist/surfaces/alert/alert.js +4 -4
- package/dist/surfaces/card/card.d.ts +2 -2
- package/dist/surfaces/card/card.d.ts.map +1 -1
- package/dist/surfaces/card/card.js +7 -7
- package/dist/surfaces/card/card.js.map +1 -1
- package/dist/surfaces/confirm/confirm.js +9 -9
- package/dist/surfaces/drawers/drawer_start/drawer_start.js +2 -2
- package/dist/surfaces/drawers/drawer_top/drawer_top.js +2 -2
- package/dist/surfaces/index.d.ts +2 -0
- package/dist/surfaces/index.d.ts.map +1 -1
- package/dist/surfaces/index.js +22 -18
- package/dist/surfaces/index.js.map +1 -1
- package/dist/surfaces/modal/modal.d.ts +3 -3
- package/dist/surfaces/modal/modal.d.ts.map +1 -1
- package/dist/surfaces/modal/modal.js +14 -14
- package/dist/surfaces/modal/modal.js.map +1 -1
- package/dist/surfaces/page/h_page.js +7 -7
- package/dist/surfaces/page/v_page.js +5 -5
- package/dist/surfaces/panel/h_panel.js +29 -30
- package/dist/surfaces/panel/h_panel.js.map +1 -1
- package/dist/surfaces/panel/v_panel.d.ts +3 -7
- package/dist/surfaces/panel/v_panel.d.ts.map +1 -1
- package/dist/surfaces/panel/v_panel.js +12 -54
- package/dist/surfaces/panel/v_panel.js.map +1 -1
- package/dist/surfaces/pop_confirm/pop_confirm.d.ts +5 -0
- package/dist/surfaces/pop_confirm/pop_confirm.d.ts.map +1 -0
- package/dist/surfaces/pop_confirm/pop_confirm.js +37 -0
- package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -0
- package/dist/surfaces/popconfirm/pop_confirm.d.ts +5 -0
- package/dist/surfaces/popconfirm/pop_confirm.d.ts.map +1 -0
- package/dist/surfaces/popconfirm/pop_confirm.js +13 -0
- package/dist/surfaces/popconfirm/pop_confirm.js.map +1 -0
- package/dist/surfaces/popover/popover.d.ts +1 -1
- package/dist/surfaces/popover/popover.d.ts.map +1 -1
- package/dist/surfaces/popover/popover.js +1 -1
- package/dist/surfaces/popover/popover.js.map +1 -1
- package/dist/surfaces/tooltip/tooltip.d.ts +10 -0
- package/dist/surfaces/tooltip/tooltip.d.ts.map +1 -0
- package/dist/surfaces/tooltip/tooltip.js +38 -0
- package/dist/surfaces/tooltip/tooltip.js.map +1 -0
- package/dist/surfaces/window/window.d.ts +3 -3
- package/dist/surfaces/window/window.d.ts.map +1 -1
- package/dist/surfaces/window/window.js +15 -13
- package/dist/surfaces/window/window.js.map +1 -1
- package/dist/syntaxhighlighter-IQDEPFLK-BX_eF8__.js +3777 -0
- package/dist/syntaxhighlighter-IQDEPFLK-BX_eF8__.js.map +1 -0
- package/dist/tethered.css +1 -0
- package/dist/themes/themes/ergo/ergo_theme.js +177 -206
- package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
- package/dist/tokens/badge/badge.js +9 -9
- package/dist/tokens/bubble/bubble.js +8 -8
- package/dist/tokens/chip/chip.js +3 -3
- package/dist/tooltip.css +1 -1
- package/dist/utility_bar.css +1 -1
- package/dist/utils/click_away_listener.d.ts +1 -0
- package/dist/utils/click_away_listener.d.ts.map +1 -1
- package/dist/utils/click_away_listener.js +12 -11
- package/dist/utils/click_away_listener.js.map +1 -1
- package/dist/utils/dnd/draggable/draggable.js +4 -4
- package/dist/utils/dnd/handle.js +8 -8
- package/dist/utils/focus_redirect.js +5 -5
- package/dist/utils/hooks/make_context_hook.js +4 -4
- package/dist/utils/hooks/use_media_query.js +2 -2
- package/dist/utils/hooks/use_media_query.js.map +1 -1
- package/dist/utils/index.d.ts +6 -5
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +26 -23
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/mouse_leave_region.d.ts +8 -0
- package/dist/utils/mouse_leave_region.d.ts.map +1 -0
- package/dist/utils/mouse_leave_region.js +26 -0
- package/dist/utils/mouse_leave_region.js.map +1 -0
- package/dist/utils/types/dimensions.d.ts +11 -1
- package/dist/utils/types/dimensions.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/actions/__docs__/actions.mdx +131 -0
- package/src/actions/__docs__/actions.stories.tsx +309 -0
- package/src/actions/__docs__/components/gallery.module.css +6 -0
- package/src/actions/__docs__/components/gallery.tsx +28 -0
- package/src/actions/__docs__/components/showcase.module.css +55 -0
- package/src/actions/__docs__/components/showcase.tsx +121 -0
- package/src/actions/button/base_button/base_button.tsx +5 -1
- package/src/actions/types.ts +6 -0
- package/src/inputs/color_input/color_input.tsx +1 -1
- package/src/inputs/date_picker/date_picker_input.tsx +1 -1
- package/src/inputs/date_picker/date_picker_year_input.tsx +1 -1
- package/src/inputs/suggestions/suggestion_list.tsx +1 -1
- package/src/layouts/index.ts +7 -5
- package/src/layouts/scaffold/scaffold.module.css +5 -0
- package/src/layouts/scaffold/scaffold.tsx +60 -0
- package/src/layouts/utility_bar/utility_bar.module.css +0 -3
- package/src/overlay/frame/frame.module.css +5 -0
- package/src/overlay/frame/frame.stories.tsx +1 -1
- package/src/overlay/frame/frame.tsx +19 -3
- package/src/overlay/index.ts +29 -2
- package/src/overlay/menu/menu.tsx +1 -1
- package/src/overlay/popper/__stories__/base_args.ts +75 -0
- package/src/overlay/popper/__stories__/context_popper.stories.tsx +77 -0
- package/src/overlay/popper/__stories__/element_popper.stories.tsx +80 -0
- package/src/overlay/popper/__stories__/preview_popper.stories.tsx +73 -0
- package/src/overlay/popper/base/base_popper.tsx +55 -0
- package/src/overlay/popper/base/dismissal_decorator.tsx +80 -0
- package/src/overlay/popper/context_popper.tsx +43 -0
- package/src/overlay/popper/element_popper.tsx +42 -0
- package/src/overlay/popper/hooks/use_context_trigger.ts +50 -0
- package/src/overlay/popper/hooks/use_hover_trigger.ts +24 -0
- package/src/overlay/popper/hooks/use_restore_focus.ts +16 -0
- package/src/overlay/popper/{popper.stories.tsx → legacy/popper.stories.tsx} +11 -5
- package/src/overlay/popper/{popper.tsx → legacy/popper.tsx} +3 -2
- package/src/overlay/popper/preview_popper.tsx +54 -0
- package/src/overlay/tethered/__stories__/element/element_tethered.stories.tsx +57 -0
- package/src/overlay/tethered/__stories__/element/element_tethered_stories.module.css +14 -0
- package/src/overlay/tethered/__stories__/shared/base_story_config.ts +52 -0
- package/src/overlay/tethered/__stories__/shared/components/sb_point.module.css +20 -0
- package/src/overlay/tethered/__stories__/shared/components/sb_point.tsx +34 -0
- package/src/overlay/tethered/__stories__/shared/components/sb_reference_points.tsx +54 -0
- package/src/overlay/tethered/__stories__/tethered/tethered.stories.tsx +90 -0
- package/src/overlay/tethered/__stories__/tethered/tethered_stories.module.css +25 -0
- package/src/overlay/tethered/element_tethered.tsx +62 -0
- package/src/overlay/tethered/hooks/calculate_position.ts +110 -0
- package/src/overlay/tethered/hooks/useTether.ts +85 -0
- package/src/overlay/tethered/tethered.module.css +8 -0
- package/src/overlay/tethered/tethered.tsx +72 -0
- package/src/overlay/tethered/types.ts +2 -0
- package/src/stacks/h_stack.stories.tsx +2 -2
- package/src/stacks/v_stack.stories.tsx +2 -2
- package/src/surfaces/card/card.stories.tsx +64 -0
- package/src/surfaces/card/card.tsx +4 -4
- package/src/surfaces/card/card_stories.module.css +13 -0
- package/src/surfaces/index.ts +2 -0
- package/src/surfaces/modal/__stories__/modal.stories.tsx +12 -1
- package/src/surfaces/modal/modal.module.css +2 -2
- package/src/surfaces/modal/modal.tsx +14 -12
- package/src/surfaces/panel/__stories__/panel.stories.tsx +1 -1
- package/src/surfaces/panel/v_panel.tsx +8 -53
- package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +70 -0
- package/src/surfaces/pop_confirm/pop_confirm.tsx +30 -0
- package/src/surfaces/popconfirm/pop_confirm.tsx +18 -0
- package/src/surfaces/popover/popover.tsx +1 -1
- package/src/surfaces/tooltip/tooltip.stories.tsx +54 -0
- package/src/surfaces/tooltip/tooltip.tsx +59 -0
- package/src/surfaces/window/window.stories.tsx +15 -1
- package/src/surfaces/window/window.tsx +16 -12
- package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_picker.tsx +7 -9
- package/src/themes/themes/ergo/__stories__/material.stories.tsx +2 -6
- package/src/themes/themes/ergo/__stories__/sb_materials.module.css +29 -21
- package/src/themes/themes/ergo/ergo_theme.css +177 -206
- package/src/utils/click_away_listener.tsx +1 -1
- package/src/utils/index.ts +7 -5
- package/src/utils/mouse_leave_region.tsx +38 -0
- package/src/utils/types/dimensions.ts +13 -1
- package/tsconfig.json +3 -0
- package/dist/overlay/popper/popper.d.ts.map +0 -1
- package/dist/overlay/popper/popper.js.map +0 -1
- package/dist/overlay/tooltip/tooltip.d.ts +0 -7
- package/dist/overlay/tooltip/tooltip.d.ts.map +0 -1
- package/dist/overlay/tooltip/tooltip.js +0 -20
- package/dist/overlay/tooltip/tooltip.js.map +0 -1
- package/dist/panel.module-DwGKncon.js +0 -5
- package/dist/panel.module-DwGKncon.js.map +0 -1
- package/src/overlay/tooltip/tooltip.stories.tsx +0 -22
- package/src/overlay/tooltip/tooltip.tsx +0 -24
- /package/dist/{panel.css → h_panel.css} +0 -0
- /package/dist/overlay/popper/{popper.d.ts → legacy/popper.d.ts} +0 -0
- /package/src/overlay/popper/{popper.module.css → legacy/popper.module.css} +0 -0
- /package/src/{overlay → surfaces}/tooltip/tooltip.module.css +0 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as C } from "react";
|
|
3
|
+
import { BasePopper as x } from "./base/base_popper.js";
|
|
4
|
+
import { Tethered as u } from "../tethered/tethered.js";
|
|
5
|
+
import { useContextTrigger as A } from "./hooks/use_context_trigger.js";
|
|
6
|
+
import { PopperDismissal as e } from "./base/dismissal_decorator.js";
|
|
7
|
+
const R = C(function({
|
|
8
|
+
anchorElement: t,
|
|
9
|
+
restoreFocus: p,
|
|
10
|
+
children: n,
|
|
11
|
+
acceptedRefs: i = [],
|
|
12
|
+
isException: m,
|
|
13
|
+
dismissals: s = [e.CLICK_AWAY, e.SCROLL_AWAY],
|
|
14
|
+
...f
|
|
15
|
+
}, c) {
|
|
16
|
+
const { isOpen: l, close: a, rectangle: o } = A(t);
|
|
17
|
+
return /* @__PURE__ */ r(
|
|
18
|
+
x,
|
|
19
|
+
{
|
|
20
|
+
open: l && o != null,
|
|
21
|
+
onDismissal: a,
|
|
22
|
+
restoreFocus: p,
|
|
23
|
+
dismissals: s,
|
|
24
|
+
acceptedRefs: i,
|
|
25
|
+
isException: m,
|
|
26
|
+
children: /* @__PURE__ */ r(u, { ref: c, anchor: o, ...f, children: n })
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
});
|
|
30
|
+
export {
|
|
31
|
+
R as ContextPopper
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=context_popper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context_popper.js","sources":["../../../src/overlay/popper/context_popper.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { Tethered, type TetheredProps } from '../tethered/tethered.js';\nimport { useContextTrigger } from './hooks/use_context_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\n\nexport type ContextPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n Omit<TetheredProps, 'anchor'> & {\n anchorElement: React.RefObject<HTMLElement>;\n };\n\nexport const ContextPopper = forwardRef<\n HTMLDivElement,\n PropsWithChildren<ContextPopperProps>\n>(function ContextPopper(\n {\n anchorElement,\n restoreFocus,\n children,\n acceptedRefs = [],\n isException,\n dismissals = [PopperDismissal.CLICK_AWAY, PopperDismissal.SCROLL_AWAY],\n ...tetheredProps\n },\n ref\n) {\n const { isOpen, close, rectangle } = useContextTrigger(anchorElement);\n\n return (\n <BasePopper\n open={isOpen && rectangle != null}\n onDismissal={close}\n restoreFocus={restoreFocus}\n dismissals={dismissals}\n acceptedRefs={acceptedRefs}\n isException={isException}\n >\n <Tethered ref={ref} anchor={rectangle} {...tetheredProps}>\n {children}\n </Tethered>\n </BasePopper>\n );\n});\n"],"names":["ContextPopper","forwardRef","anchorElement","restoreFocus","children","acceptedRefs","isException","dismissals","PopperDismissal","tetheredProps","ref","isOpen","close","rectangle","useContextTrigger","jsx","BasePopper","Tethered"],"mappings":";;;;;;AAWO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,aAAAC;AAAA,EACA,YAAAC,IAAa,CAACC,EAAgB,YAAYA,EAAgB,WAAW;AAAA,EACrE,GAAGC;AACL,GACAC,GACA;AACA,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,WAAAC,EAAA,IAAcC,EAAkBZ,CAAa;AAEpE,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAML,KAAUE,KAAa;AAAA,MAC7B,aAAaD;AAAA,MACb,cAAAT;AAAA,MACA,YAAAI;AAAA,MACA,cAAAF;AAAA,MACA,aAAAC;AAAA,MAEA,4BAACW,GAAA,EAAS,KAAAP,GAAU,QAAQG,GAAY,GAAGJ,GACxC,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BasePopperProps } from './base/base_popper.js';
|
|
2
|
+
import { ElementTetheredProps } from '../tethered/element_tethered.js';
|
|
3
|
+
export type ElementPopperProps = BasePopperProps & ElementTetheredProps;
|
|
4
|
+
export declare const ElementPopper: import('react').ForwardRefExoticComponent<BasePopperProps & ElementTetheredProps & {
|
|
5
|
+
children?: import('react').ReactNode | undefined;
|
|
6
|
+
} & import('react').RefAttributes<HTMLDivElement>>;
|
|
7
|
+
//# sourceMappingURL=element_popper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element_popper.d.ts","sourceRoot":"","sources":["../../../src/overlay/popper/element_popper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,iCAAiC,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG,oBAAoB,CAAC;AAExE,eAAO,MAAM,aAAa;;kDAgCxB,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as d } from "react";
|
|
3
|
+
import { BasePopper as s } from "./base/base_popper.js";
|
|
4
|
+
import { ElementTethered as E } from "../tethered/element_tethered.js";
|
|
5
|
+
const j = d(function({
|
|
6
|
+
restoreFocus: e,
|
|
7
|
+
open: o,
|
|
8
|
+
onDismissal: t,
|
|
9
|
+
isException: m,
|
|
10
|
+
acceptedRefs: p,
|
|
11
|
+
veil: n,
|
|
12
|
+
dismissals: f,
|
|
13
|
+
children: i,
|
|
14
|
+
...l
|
|
15
|
+
}, c) {
|
|
16
|
+
return /* @__PURE__ */ r(
|
|
17
|
+
s,
|
|
18
|
+
{
|
|
19
|
+
restoreFocus: e,
|
|
20
|
+
open: o,
|
|
21
|
+
onDismissal: t,
|
|
22
|
+
isException: m,
|
|
23
|
+
dismissals: f,
|
|
24
|
+
acceptedRefs: p,
|
|
25
|
+
veil: n,
|
|
26
|
+
children: /* @__PURE__ */ r(E, { ref: c, ...l, children: i })
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
});
|
|
30
|
+
export {
|
|
31
|
+
j as ElementPopper
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=element_popper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element_popper.js","sources":["../../../src/overlay/popper/element_popper.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport {\n ElementTethered,\n type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\n\nexport type ElementPopperProps = BasePopperProps & ElementTetheredProps;\n\nexport const ElementPopper = forwardRef<\n HTMLDivElement,\n PropsWithChildren<ElementPopperProps>\n>(function ElementPopper(\n {\n restoreFocus,\n open,\n onDismissal,\n isException,\n acceptedRefs,\n veil,\n dismissals,\n children,\n ...elementTetheredProps\n },\n ref\n) {\n return (\n <BasePopper\n restoreFocus={restoreFocus}\n open={open}\n onDismissal={onDismissal}\n isException={isException}\n dismissals={dismissals}\n acceptedRefs={acceptedRefs}\n veil={veil}\n >\n <ElementTethered ref={ref} {...elementTetheredProps}>\n {children}\n </ElementTethered>\n </BasePopper>\n );\n});\n"],"names":["ElementPopper","forwardRef","restoreFocus","open","onDismissal","isException","acceptedRefs","veil","dismissals","children","elementTetheredProps","ref","jsx","BasePopper","ElementTethered"],"mappings":";;;;AASO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAAX;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAG;AAAA,MACA,cAAAF;AAAA,MACA,MAAAC;AAAA,MAEA,UAAA,gBAAAK,EAACE,GAAA,EAAgB,KAAAH,GAAW,GAAGD,GAC5B,UAAAD,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Rectangle } from '../../../utils/types/dimensions.js';
|
|
2
|
+
export declare function useContextTrigger(anchorElement: React.RefObject<HTMLElement>): {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
close: () => void;
|
|
5
|
+
rectangle: Rectangle | null;
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=use_context_trigger.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_context_trigger.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/hooks/use_context_trigger.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAmBpE,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;;;EA6B5E"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { useState as u, useCallback as o, useLayoutEffect as f } from "react";
|
|
2
|
+
function a(e, n) {
|
|
3
|
+
return e ? {
|
|
4
|
+
position: { x: n.clientX, y: n.clientY },
|
|
5
|
+
dimensions: {
|
|
6
|
+
width: 8,
|
|
7
|
+
height: 8
|
|
8
|
+
}
|
|
9
|
+
} : null;
|
|
10
|
+
}
|
|
11
|
+
function p(e) {
|
|
12
|
+
const [n, r] = u(!1), [i, c] = u(null), l = o(() => {
|
|
13
|
+
r(!1);
|
|
14
|
+
}, []), s = o(
|
|
15
|
+
(t) => {
|
|
16
|
+
t.preventDefault(), c(a(e.current, t)), r(!0);
|
|
17
|
+
},
|
|
18
|
+
[e]
|
|
19
|
+
);
|
|
20
|
+
return f(() => {
|
|
21
|
+
const t = e.current;
|
|
22
|
+
if (t)
|
|
23
|
+
return t.addEventListener("contextmenu", s), () => {
|
|
24
|
+
t.removeEventListener("contextmenu", s);
|
|
25
|
+
};
|
|
26
|
+
}, [e, s]), { isOpen: n, close: l, rectangle: i };
|
|
27
|
+
}
|
|
28
|
+
export {
|
|
29
|
+
p as useContextTrigger
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=use_context_trigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_context_trigger.js","sources":["../../../../src/overlay/popper/hooks/use_context_trigger.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from 'react';\nimport type { Rectangle } from '../../../utils/types/dimensions.js';\n\nfunction getContextMenuRectangle(\n element: HTMLElement | null,\n mouseEvent: MouseEvent\n): Rectangle | null {\n if (!element) return null;\n\n const position = { x: mouseEvent.clientX, y: mouseEvent.clientY };\n\n return {\n position,\n dimensions: {\n width: 8,\n height: 8,\n },\n };\n}\n\nexport function useContextTrigger(anchorElement: React.RefObject<HTMLElement>) {\n const [isOpen, setIsOpen] = useState(false);\n const [rectangle, setRectangle] = useState<Rectangle | null>(null);\n\n const close = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleContextMenu = useCallback(\n (e: MouseEvent) => {\n e.preventDefault();\n setRectangle(getContextMenuRectangle(anchorElement.current, e));\n setIsOpen(true);\n },\n [anchorElement]\n );\n\n useLayoutEffect(() => {\n const element = anchorElement.current;\n if (!element) return;\n\n element.addEventListener('contextmenu', handleContextMenu);\n\n return () => {\n element.removeEventListener('contextmenu', handleContextMenu);\n };\n }, [anchorElement, handleContextMenu]);\n\n return { isOpen, close, rectangle };\n}\n"],"names":["getContextMenuRectangle","element","mouseEvent","useContextTrigger","anchorElement","isOpen","setIsOpen","useState","rectangle","setRectangle","close","useCallback","handleContextMenu","e","useLayoutEffect"],"mappings":";AAGA,SAASA,EACPC,GACAC,GACkB;AAClB,SAAKD,IAIE;AAAA,IACL,UAHe,EAAE,GAAGC,EAAW,SAAS,GAAGA,EAAW,QAAA;AAAA,IAItD,YAAY;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV,IATmB;AAWvB;AAEO,SAASC,EAAkBC,GAA6C;AAC7E,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAWC,CAAY,IAAIF,EAA2B,IAAI,GAE3DG,IAAQC,EAAY,MAAM;AAC9B,IAAAL,EAAU,EAAK;AAAA,EACjB,GAAG,CAAA,CAAE,GAECM,IAAoBD;AAAA,IACxB,CAACE,MAAkB;AACjB,MAAAA,EAAE,eAAA,GACFJ,EAAaT,EAAwBI,EAAc,SAASS,CAAC,CAAC,GAC9DP,EAAU,EAAI;AAAA,IAChB;AAAA,IACA,CAACF,CAAa;AAAA,EAAA;AAGhB,SAAAU,EAAgB,MAAM;AACpB,UAAMb,IAAUG,EAAc;AAC9B,QAAKH;AAEL,aAAAA,EAAQ,iBAAiB,eAAeW,CAAiB,GAElD,MAAM;AACX,QAAAX,EAAQ,oBAAoB,eAAeW,CAAiB;AAAA,MAC9D;AAAA,EACF,GAAG,CAACR,GAAeQ,CAAiB,CAAC,GAE9B,EAAE,QAAAP,GAAQ,OAAAK,GAAO,WAAAF,EAAA;AAC1B;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_hover_trigger.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/hooks/use_hover_trigger.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;;;EAqB5E"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useState as c, useCallback as s, useLayoutEffect as a } from "react";
|
|
2
|
+
function i(n) {
|
|
3
|
+
const [o, r] = c(!1), u = s(() => {
|
|
4
|
+
r(!1);
|
|
5
|
+
}, []), e = s(() => r(!0), []);
|
|
6
|
+
return a(() => {
|
|
7
|
+
const t = n.current;
|
|
8
|
+
if (t)
|
|
9
|
+
return t.addEventListener("mouseenter", e), () => {
|
|
10
|
+
t.removeEventListener("mouseenter", e);
|
|
11
|
+
};
|
|
12
|
+
}, [n, e]), { isOpen: o, close: u, open: e };
|
|
13
|
+
}
|
|
14
|
+
export {
|
|
15
|
+
i as usePreviewElement
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=use_hover_trigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_hover_trigger.js","sources":["../../../../src/overlay/popper/hooks/use_hover_trigger.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from 'react';\n\nexport function usePreviewElement(anchorElement: React.RefObject<HTMLElement>) {\n const [isOpen, setIsOpen] = useState(false);\n const close = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const open = useCallback(() => setIsOpen(true), []);\n\n // Open on hover on the anchor element\n useLayoutEffect(() => {\n const anchor = anchorElement.current;\n if (!anchor) return;\n\n anchor.addEventListener('mouseenter', open);\n\n return () => {\n anchor.removeEventListener('mouseenter', open);\n };\n }, [anchorElement, open]);\n\n return { isOpen, close, open };\n}\n"],"names":["usePreviewElement","anchorElement","isOpen","setIsOpen","useState","close","useCallback","open","useLayoutEffect","anchor"],"mappings":";AAEO,SAASA,EAAkBC,GAA6C;AAC7E,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAQC,EAAY,MAAM;AAC9B,IAAAH,EAAU,EAAK;AAAA,EACjB,GAAG,CAAA,CAAE,GAECI,IAAOD,EAAY,MAAMH,EAAU,EAAI,GAAG,CAAA,CAAE;AAGlD,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAASR,EAAc;AAC7B,QAAKQ;AAEL,aAAAA,EAAO,iBAAiB,cAAcF,CAAI,GAEnC,MAAM;AACX,QAAAE,EAAO,oBAAoB,cAAcF,CAAI;AAAA,MAC/C;AAAA,EACF,GAAG,CAACN,GAAeM,CAAI,CAAC,GAEjB,EAAE,QAAAL,GAAQ,OAAAG,GAAO,MAAAE,EAAA;AAC1B;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_restore_focus.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/hooks/use_restore_focus.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,QAanE"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useRef as u, useLayoutEffect as c } from "react";
|
|
2
|
+
function s(e, t) {
|
|
3
|
+
const n = u(null);
|
|
4
|
+
c(() => {
|
|
5
|
+
if (e)
|
|
6
|
+
n.current = window.document.activeElement;
|
|
7
|
+
else {
|
|
8
|
+
const o = n.current;
|
|
9
|
+
requestAnimationFrame(() => {
|
|
10
|
+
t && o?.focus();
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
}, [e, t]);
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
s as useRestoreFocus
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=use_restore_focus.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_restore_focus.js","sources":["../../../../src/overlay/popper/hooks/use_restore_focus.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\n\nexport function useRestoreFocus(open: boolean, restoreFocus: boolean) {\n const activeElementRef = useRef<HTMLElement | null>(null);\n\n useLayoutEffect(() => {\n if (open) {\n activeElementRef.current = window.document.activeElement as HTMLElement;\n } else {\n const restoreToElement = activeElementRef.current;\n requestAnimationFrame(() => {\n restoreFocus && restoreToElement?.focus();\n });\n }\n }, [open, restoreFocus]);\n}\n"],"names":["useRestoreFocus","open","restoreFocus","activeElementRef","useRef","useLayoutEffect","restoreToElement"],"mappings":";AAEO,SAASA,EAAgBC,GAAeC,GAAuB;AACpE,QAAMC,IAAmBC,EAA2B,IAAI;AAExD,EAAAC,EAAgB,MAAM;AACpB,QAAIJ;AACF,MAAAE,EAAiB,UAAU,OAAO,SAAS;AAAA,SACtC;AACL,YAAMG,IAAmBH,EAAiB;AAC1C,4BAAsB,MAAM;AAC1B,QAAAD,KAAgBI,GAAkB,MAAA;AAAA,MACpC,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAACL,GAAMC,CAAY,CAAC;AACzB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popper.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/C,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAGD,wBAAgB,MAAM,CAAC,EACrB,aAAa,EACb,cAAyB,EACzB,cAAsB,EACtB,cAAkB,EAClB,gBAA0B,EAC1B,gBAA0B,EAC1B,gBAAoB,EACpB,YAAoB,EACpB,IAAY,EACZ,WAAW,EACX,aAAkB,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,gBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,GACtB,EAAE,WAAW,kDA8Kb"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as p, jsxs as G } from "react/jsx-runtime";
|
|
2
|
-
import "
|
|
3
|
-
import
|
|
4
|
-
import { ScrollAwayListener as J } from "
|
|
2
|
+
import { ClickAwayListener as I } from "../../../utils/click_away_listener.js";
|
|
3
|
+
import "../../../utils/focus_redirect.js";
|
|
4
|
+
import { ScrollAwayListener as J } from "../../../utils/scroll_away_listener.js";
|
|
5
5
|
import { useRef as f, useState as K, useLayoutEffect as E } from "react";
|
|
6
|
-
import "
|
|
7
|
-
import { Portal as M } from "
|
|
8
|
-
import '
|
|
6
|
+
import "../../../utils/hooks/use_resize_observer.js";
|
|
7
|
+
import { Portal as M } from "../../portal/portal.js";
|
|
8
|
+
import '../../../popper.css';const Q = "_popover_fcfb66a", U = "_popover-veil_c56df66", P = { popover: Q, "popover-veil": U };
|
|
9
9
|
function ie({
|
|
10
10
|
anchorElement: n,
|
|
11
11
|
verticalAnchor: _ = "bottom",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popper.js","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"sourcesContent":["import { ClickAwayListener, ScrollAwayListener } from '../../../utils/index.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { Portal } from '../../portal/portal.js';\nimport styles from './popper.module.css';\n\nexport interface PopperProps {\n anchorElement: HTMLElement | null;\n verticalAnchor?: 'top' | 'center' | 'bottom';\n verticalOrigin?: 'top' | 'center' | 'bottom';\n verticalOffset?: number;\n horizontalAnchor?: 'start' | 'center' | 'end';\n horizontalOrigin?: 'start' | 'center' | 'end';\n horizontalOffset?: number;\n open: boolean;\n onClose: () => void;\n restoreFocus?: boolean;\n children: React.ReactNode;\n veil?: boolean;\n onVeilClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n clickAwayRefs?: React.RefObject<HTMLElement>[];\n isClickAwayException?: (target: HTMLElement) => boolean;\n isScrollAwayException?: (target: HTMLElement) => boolean;\n disableClickAway?: boolean;\n}\n\n// This component is being phased out in favor of ElementPopper - need to ensure parity beforehand.\nexport function Popper({\n anchorElement,\n verticalAnchor = 'bottom',\n verticalOrigin = 'top',\n verticalOffset = 0,\n horizontalAnchor = 'start',\n horizontalOrigin = 'start',\n horizontalOffset = 0,\n restoreFocus = false,\n veil = false,\n onVeilClick,\n clickAwayRefs = [],\n open,\n onClose,\n children,\n disableClickAway = false,\n isClickAwayException,\n isScrollAwayException,\n}: PopperProps) {\n const anchorElementRef = useRef(anchorElement);\n const [position, setPosition] = useState({ top: 0, left: 0 });\n const activeElementRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const canOpen = open && anchorElement != null;\n const finalClickAwayRefs: React.RefObject<HTMLElement>[] = clickAwayRefs ?? [];\n const enableClickAway = !disableClickAway;\n const veilRef = useRef<HTMLDivElement>(null);\n function close() {\n onClose && onClose();\n }\n\n // eslint-disable-next-line complexity\n const updatePosition = () => {\n if (!anchorElement || !popoverRef.current) return;\n\n const anchorRect = anchorElement.getBoundingClientRect();\n const popoverRect = popoverRef.current.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n // Determine the text direction (ltr or rtl)\n const computedStyle = getComputedStyle(anchorElement);\n const isRtl = computedStyle.direction === 'rtl';\n\n let top = anchorRect.top;\n let left = anchorRect.left;\n\n // Calculate vertical position\n switch (verticalAnchor) {\n case 'top':\n top += verticalOffset;\n break;\n case 'center':\n top += anchorRect.height / 2;\n break;\n case 'bottom':\n top += anchorRect.height - verticalOffset;\n break;\n }\n\n switch (verticalOrigin) {\n case 'top':\n break;\n case 'center':\n top -= popoverRect.height / 2;\n break;\n case 'bottom':\n top -= popoverRect.height;\n break;\n }\n\n // Calculate horizontal position with direction sensitivity\n if (horizontalAnchor === 'start') {\n left += isRtl ? anchorRect.width + horizontalOffset : horizontalOffset;\n } else if (horizontalAnchor === 'center') {\n left += anchorRect.width / 2;\n } else if (horizontalAnchor === 'end') {\n left += isRtl ? -horizontalOffset : anchorRect.width + horizontalOffset;\n }\n\n // Adjust the origin based on RTL direction\n let adjustedHorizontalOrigin = horizontalOrigin;\n if (isRtl) {\n if (horizontalOrigin === 'start') {\n adjustedHorizontalOrigin = 'end';\n } else if (horizontalOrigin === 'end') {\n adjustedHorizontalOrigin = 'start';\n }\n }\n\n // Apply adjusted origin to the position calculation\n if (adjustedHorizontalOrigin === 'start') {\n // No adjustment needed\n } else if (adjustedHorizontalOrigin === 'center') {\n left -= popoverRect.width / 2;\n } else if (adjustedHorizontalOrigin === 'end') {\n left -= popoverRect.width;\n }\n\n // Ensure the popover stays within the viewport\n // Prevent overflow to the right\n if (left + popoverRect.width > viewportWidth) {\n left = viewportWidth - popoverRect.width;\n }\n\n // Prevent overflow to the left\n if (left < 0) {\n left = 0;\n }\n\n // Prevent overflow to the bottom\n if (top + popoverRect.height > viewportHeight) {\n top = viewportHeight - popoverRect.height;\n }\n\n // Prevent overflow to the top\n if (top < 0) {\n top = 0;\n }\n\n // Only update if position has changed to avoid unnecessary re-renders\n if (top !== position.top || left !== position.left) {\n setPosition({ top, left });\n }\n };\n\n useLayoutEffect(() => {\n updatePosition();\n window.addEventListener('resize', updatePosition);\n return () => {\n window.removeEventListener('resize', updatePosition);\n };\n });\n\n useLayoutEffect(() => {\n if (open) {\n activeElementRef.current = window.document.activeElement as HTMLElement;\n } else {\n const restoreToElement = activeElementRef.current;\n requestAnimationFrame(() => {\n restoreFocus && restoreToElement?.focus();\n });\n }\n }, [open, restoreFocus]);\n\n if (!canOpen) {\n return null;\n }\n\n anchorElementRef.current = anchorElement;\n\n let content = (\n <ScrollAwayListener onScrollAway={close} isException={isScrollAwayException}>\n <div\n ref={popoverRef}\n className={styles.popover}\n style={{\n top: `${position.top}px`,\n left: `${position.left}px`,\n }}\n >\n {children}\n </div>\n </ScrollAwayListener>\n );\n\n if (enableClickAway) {\n content = (\n <ClickAwayListener\n onClickAway={close}\n refs={[anchorElementRef, ...finalClickAwayRefs]}\n isException={isClickAwayException}\n >\n {content}\n </ClickAwayListener>\n );\n }\n\n return (\n <Portal>\n {veil && (\n <div\n ref={veilRef}\n onClick={e => veilRef.current === e.target && onVeilClick && onVeilClick(e)}\n className={styles['popover-veil']}\n >\n {content}\n </div>\n )}\n {!veil && content}\n </Portal>\n );\n}\n"],"names":["Popper","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","restoreFocus","veil","onVeilClick","clickAwayRefs","open","onClose","children","disableClickAway","isClickAwayException","isScrollAwayException","anchorElementRef","useRef","position","setPosition","useState","activeElementRef","popoverRef","canOpen","finalClickAwayRefs","enableClickAway","veilRef","close","updatePosition","anchorRect","popoverRect","viewportWidth","viewportHeight","isRtl","top","left","adjustedHorizontalOrigin","useLayoutEffect","restoreToElement","content","jsx","ScrollAwayListener","styles","ClickAwayListener","Portal"],"mappings":";;;;;;;;AA0BO,SAASA,GAAO;AAAA,EACrB,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,eAAAC,IAAgB,CAAA;AAAA,EAChB,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,sBAAAC;AAAA,EACA,uBAAAC;AACF,GAAgB;AACd,QAAMC,IAAmBC,EAAOlB,CAAa,GACvC,CAACmB,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GACtDC,IAAmBJ,EAA2B,IAAI,GAClDK,IAAaL,EAAuB,IAAI,GACxCM,IAAUb,KAAQX,KAAiB,MACnCyB,IAAqDf,KAAiB,CAAA,GACtEgB,IAAkB,CAACZ,GACnBa,IAAUT,EAAuB,IAAI;AAC3C,WAASU,IAAQ;AACf,IAAAhB,KAAWA,EAAA;AAAA,EACb;AAGA,QAAMiB,IAAiB,MAAM;AAC3B,QAAI,CAAC7B,KAAiB,CAACuB,EAAW,QAAS;AAE3C,UAAMO,IAAa9B,EAAc,sBAAA,GAC3B+B,IAAcR,EAAW,QAAQ,sBAAA,GACjCS,IAAgB,OAAO,YACvBC,IAAiB,OAAO,aAIxBC,IADgB,iBAAiBlC,CAAa,EACxB,cAAc;AAE1C,QAAImC,IAAML,EAAW,KACjBM,IAAON,EAAW;AAGtB,YAAQ7B,GAAA;AAAA,MACN,KAAK;AACH,QAAAkC,KAAOhC;AACP;AAAA,MACF,KAAK;AACH,QAAAgC,KAAOL,EAAW,SAAS;AAC3B;AAAA,MACF,KAAK;AACH,QAAAK,KAAOL,EAAW,SAAS3B;AAC3B;AAAA,IAAA;AAGJ,YAAQD,GAAA;AAAA,MACN,KAAK;AACH;AAAA,MACF,KAAK;AACH,QAAAiC,KAAOJ,EAAY,SAAS;AAC5B;AAAA,MACF,KAAK;AACH,QAAAI,KAAOJ,EAAY;AACnB;AAAA,IAAA;AAIJ,IAAI3B,MAAqB,UACvBgC,KAAQF,IAAQJ,EAAW,QAAQxB,IAAmBA,IAC7CF,MAAqB,WAC9BgC,KAAQN,EAAW,QAAQ,IAClB1B,MAAqB,UAC9BgC,KAAQF,IAAQ,CAAC5B,IAAmBwB,EAAW,QAAQxB;AAIzD,QAAI+B,IAA2BhC;AAC/B,IAAI6B,MACE7B,MAAqB,UACvBgC,IAA2B,QAClBhC,MAAqB,UAC9BgC,IAA2B,WAK3BA,MAA6B,YAEtBA,MAA6B,WACtCD,KAAQL,EAAY,QAAQ,IACnBM,MAA6B,UACtCD,KAAQL,EAAY,SAKlBK,IAAOL,EAAY,QAAQC,MAC7BI,IAAOJ,IAAgBD,EAAY,QAIjCK,IAAO,MACTA,IAAO,IAILD,IAAMJ,EAAY,SAASE,MAC7BE,IAAMF,IAAiBF,EAAY,SAIjCI,IAAM,MACRA,IAAM,KAIJA,MAAQhB,EAAS,OAAOiB,MAASjB,EAAS,SAC5CC,EAAY,EAAE,KAAAe,GAAK,MAAAC,GAAM;AAAA,EAE7B;AAqBA,MAnBAE,EAAgB,OACdT,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAc,GACzC,MAAM;AACX,WAAO,oBAAoB,UAAUA,CAAc;AAAA,EACrD,EACD,GAEDS,EAAgB,MAAM;AACpB,QAAI3B;AACF,MAAAW,EAAiB,UAAU,OAAO,SAAS;AAAA,SACtC;AACL,YAAMiB,IAAmBjB,EAAiB;AAC1C,4BAAsB,MAAM;AAC1B,QAAAf,KAAgBgC,GAAkB,MAAA;AAAA,MACpC,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC5B,GAAMJ,CAAY,CAAC,GAEnB,CAACiB;AACH,WAAO;AAGT,EAAAP,EAAiB,UAAUjB;AAE3B,MAAIwC,IACF,gBAAAC,EAACC,GAAA,EAAmB,cAAcd,GAAO,aAAaZ,GACpD,UAAA,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKlB;AAAA,MACL,WAAWoB,EAAO;AAAA,MAClB,OAAO;AAAA,QACL,KAAK,GAAGxB,EAAS,GAAG;AAAA,QACpB,MAAM,GAAGA,EAAS,IAAI;AAAA,MAAA;AAAA,MAGvB,UAAAN;AAAA,IAAA;AAAA,EAAA,GAEL;AAGF,SAAIa,MACFc,IACE,gBAAAC;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,aAAahB;AAAA,MACb,MAAM,CAACX,GAAkB,GAAGQ,CAAkB;AAAA,MAC9C,aAAaV;AAAA,MAEZ,UAAAyB;AAAA,IAAA;AAAA,EAAA,sBAMJK,GAAA,EACE,UAAA;AAAA,IAAArC,KACC,gBAAAiC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKd;AAAA,QACL,SAAS,OAAKA,EAAQ,YAAY,EAAE,UAAUlB,KAAeA,EAAY,CAAC;AAAA,QAC1E,WAAWkC,EAAO,cAAc;AAAA,QAE/B,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,CAAChC,KAAQgC;AAAA,EAAA,GACZ;AAEJ;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BasePopperProps } from './base/base_popper.js';
|
|
2
|
+
import { ElementTetheredProps } from '../tethered/element_tethered.js';
|
|
3
|
+
export type PreviewPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> & ElementTetheredProps;
|
|
4
|
+
export declare const PreviewPopper: import('react').ForwardRefExoticComponent<Omit<BasePopperProps, "open" | "onDismissal"> & ElementTetheredProps & {
|
|
5
|
+
children?: import('react').ReactNode | undefined;
|
|
6
|
+
} & import('react').RefAttributes<HTMLElement>>;
|
|
7
|
+
//# sourceMappingURL=preview_popper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"preview_popper.d.ts","sourceRoot":"","sources":["../../../src/overlay/popper/preview_popper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,iCAAiC,CAAC;AAIzC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAC5E,oBAAoB,CAAC;AAEvB,eAAO,MAAM,aAAa;;+CAwCxB,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as e, Fragment as d } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as u, useRef as a } from "react";
|
|
3
|
+
import { BasePopper as R } from "./base/base_popper.js";
|
|
4
|
+
import "../../utils/click_away_listener.js";
|
|
5
|
+
import "../../utils/focus_redirect.js";
|
|
6
|
+
import "../../utils/scroll_away_listener.js";
|
|
7
|
+
import { useForkRef as w } from "../../utils/hooks/use_fork_ref.js";
|
|
8
|
+
import "../../utils/hooks/use_resize_observer.js";
|
|
9
|
+
import { ElementTethered as E } from "../tethered/element_tethered.js";
|
|
10
|
+
import { usePreviewElement as v } from "./hooks/use_hover_trigger.js";
|
|
11
|
+
import { PopperDismissal as g } from "./base/dismissal_decorator.js";
|
|
12
|
+
const T = u(function({
|
|
13
|
+
anchorElement: r,
|
|
14
|
+
restoreFocus: p,
|
|
15
|
+
children: m,
|
|
16
|
+
acceptedRefs: i = [],
|
|
17
|
+
isException: t,
|
|
18
|
+
dismissals: s = [g.MOUSE_LEAVE],
|
|
19
|
+
...f
|
|
20
|
+
}, n) {
|
|
21
|
+
const o = a(null), c = w(n, o), { isOpen: l, close: P } = v(r);
|
|
22
|
+
return /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
|
|
23
|
+
R,
|
|
24
|
+
{
|
|
25
|
+
restoreFocus: p,
|
|
26
|
+
open: l,
|
|
27
|
+
onDismissal: P,
|
|
28
|
+
isException: t,
|
|
29
|
+
dismissals: s,
|
|
30
|
+
acceptedRefs: [o, ...i],
|
|
31
|
+
children: /* @__PURE__ */ e(
|
|
32
|
+
E,
|
|
33
|
+
{
|
|
34
|
+
ref: c,
|
|
35
|
+
anchorElement: r,
|
|
36
|
+
...f,
|
|
37
|
+
children: m
|
|
38
|
+
}
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
) });
|
|
42
|
+
});
|
|
43
|
+
export {
|
|
44
|
+
T as PreviewPopper
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=preview_popper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"preview_popper.js","sources":["../../../src/overlay/popper/preview_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { useForkRef } from '../../utils/index.js';\nimport {\n ElementTethered,\n type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\nimport { usePreviewElement } from './hooks/use_hover_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\n\nexport type PreviewPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n ElementTetheredProps;\n\nexport const PreviewPopper = forwardRef<\n HTMLElement,\n PropsWithChildren<PreviewPopperProps>\n>(function PreviewPopper(\n {\n anchorElement,\n restoreFocus,\n children,\n acceptedRefs = [],\n isException,\n dismissals = [PopperDismissal.MOUSE_LEAVE],\n ...elementTetheredProps\n },\n ref\n) {\n const popperRef = useRef<HTMLElement>(null);\n const merged = useForkRef(ref, popperRef);\n\n const { isOpen, close } = usePreviewElement(anchorElement);\n\n return (\n <>\n <BasePopper\n restoreFocus={restoreFocus}\n open={isOpen}\n onDismissal={close}\n isException={isException}\n dismissals={dismissals}\n acceptedRefs={[popperRef, ...acceptedRefs]}\n >\n <ElementTethered\n ref={merged}\n anchorElement={anchorElement}\n {...elementTetheredProps}\n >\n {children}\n </ElementTethered>\n </BasePopper>\n </>\n );\n});\n"],"names":["PreviewPopper","forwardRef","anchorElement","restoreFocus","children","acceptedRefs","isException","dismissals","PopperDismissal","elementTetheredProps","ref","popperRef","useRef","merged","useForkRef","isOpen","close","usePreviewElement","jsx","Fragment","BasePopper","ElementTethered"],"mappings":";;;;;;;;;;;AAaO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,aAAAC;AAAA,EACA,YAAAC,IAAa,CAACC,EAAgB,WAAW;AAAA,EACzC,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GACpCC,IAASC,EAAWJ,GAAKC,CAAS,GAElC,EAAE,QAAAI,GAAQ,OAAAC,MAAUC,EAAkBf,CAAa;AAEzD,SACE,gBAAAgB,EAAAC,GAAA,EACE,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,cAAAjB;AAAA,MACA,MAAMY;AAAA,MACN,aAAaC;AAAA,MACb,aAAAV;AAAA,MACA,YAAAC;AAAA,MACA,cAAc,CAACI,GAAW,GAAGN,CAAY;AAAA,MAEzC,UAAA,gBAAAa;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,KAAKR;AAAA,UACL,eAAAX;AAAA,UACC,GAAGO;AAAA,UAEH,UAAAL;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import o, { useContext as r } from "react";
|
|
2
2
|
import { PortalPlatform as e } from "./portal_platform.js";
|
|
3
|
-
const a = new e(), t = o.createContext(a),
|
|
4
|
-
function
|
|
3
|
+
const a = new e(), t = o.createContext(a), f = t.Provider;
|
|
4
|
+
function n() {
|
|
5
5
|
return r(t);
|
|
6
6
|
}
|
|
7
7
|
export {
|
|
8
8
|
t as PortalPlatformContext,
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
f as PortalPlatformProvider,
|
|
10
|
+
n as usePortalPlatform
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=portal_platform_context.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TetheredProps } from './tethered.js';
|
|
2
|
+
export interface ElementTetheredProps extends Omit<TetheredProps, 'anchor'> {
|
|
3
|
+
anchorElement: React.RefObject<HTMLElement>;
|
|
4
|
+
}
|
|
5
|
+
export declare const ElementTethered: import('react').ForwardRefExoticComponent<ElementTetheredProps & {
|
|
6
|
+
children?: import('react').ReactNode | undefined;
|
|
7
|
+
} & import('react').RefAttributes<HTMLElement>>;
|
|
8
|
+
//# sourceMappingURL=element_tethered.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element_tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/element_tethered.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IACzE,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC7C;AAgBD,eAAO,MAAM,eAAe;;+CAuC1B,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as f, useState as w, useLayoutEffect as m } from "react";
|
|
3
|
+
import { Tethered as h } from "./tethered.js";
|
|
4
|
+
function v(n) {
|
|
5
|
+
if (!n) return null;
|
|
6
|
+
const e = n.getBoundingClientRect();
|
|
7
|
+
return {
|
|
8
|
+
position: { x: e.left, y: e.top },
|
|
9
|
+
dimensions: {
|
|
10
|
+
width: e.width,
|
|
11
|
+
height: e.height
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
const E = f(function({ anchorElement: e, children: i, ...s }, c) {
|
|
16
|
+
const [d, u] = w(null);
|
|
17
|
+
return m(() => {
|
|
18
|
+
const r = e.current;
|
|
19
|
+
if (!r) return;
|
|
20
|
+
const t = () => {
|
|
21
|
+
u(v(r));
|
|
22
|
+
};
|
|
23
|
+
t();
|
|
24
|
+
const o = new ResizeObserver(t);
|
|
25
|
+
return o.observe(r), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
|
|
26
|
+
o.disconnect(), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
|
|
27
|
+
};
|
|
28
|
+
}, [e]), /* @__PURE__ */ l(h, { ref: c, anchor: d, ...s, children: i });
|
|
29
|
+
});
|
|
30
|
+
export {
|
|
31
|
+
E as ElementTethered
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=element_tethered.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element_tethered.js","sources":["../../../src/overlay/tethered/element_tethered.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useState, type PropsWithChildren } from 'react';\nimport { type Rectangle } from '../../utils/index.js';\nimport { Tethered, type TetheredProps } from './tethered.js';\n\nexport interface ElementTetheredProps extends Omit<TetheredProps, 'anchor'> {\n anchorElement: React.RefObject<HTMLElement>;\n}\n\nfunction getElementRect(element: HTMLElement | null): Rectangle | null {\n if (!element) return null;\n\n const clientRect = element.getBoundingClientRect();\n\n return {\n position: { x: clientRect.left, y: clientRect.top },\n dimensions: {\n width: clientRect.width,\n height: clientRect.height,\n },\n };\n}\n\nexport const ElementTethered = forwardRef<\n HTMLElement,\n PropsWithChildren<ElementTetheredProps>\n>(function ElementTether({ anchorElement, children, ...rest }, ref) {\n const [rectangle, setRectangle] = useState<Rectangle | null>(null);\n\n useLayoutEffect(() => {\n const element = anchorElement.current;\n if (!element) return;\n\n const update = () => {\n setRectangle(getElementRect(element));\n };\n\n update();\n\n // Track size/position changes of the anchor element via ResizeObserver\n const resizeObserver = new ResizeObserver(update);\n resizeObserver.observe(element);\n\n // Track scroll-induced position changes\n // TODO: might need to bypass react state here (setRectangle on scroll event) - to an OV or setting css variables/attributes directly\n // This is a slight lag - not a huge deal, but could be improved.\n window.addEventListener('scroll', update, true);\n // Track window resize-induced position changes\n window.addEventListener('resize', update);\n\n return () => {\n resizeObserver.disconnect();\n window.removeEventListener('scroll', update, true);\n window.removeEventListener('resize', update);\n };\n }, [anchorElement]);\n\n return (\n <Tethered ref={ref} anchor={rectangle} {...rest}>\n {children}\n </Tethered>\n );\n});\n"],"names":["getElementRect","element","clientRect","ElementTethered","forwardRef","anchorElement","children","rest","ref","rectangle","setRectangle","useState","useLayoutEffect","update","resizeObserver","Tethered"],"mappings":";;;AAQA,SAASA,EAAeC,GAA+C;AACrE,MAAI,CAACA,EAAS,QAAO;AAErB,QAAMC,IAAaD,EAAQ,sBAAA;AAE3B,SAAO;AAAA,IACL,UAAU,EAAE,GAAGC,EAAW,MAAM,GAAGA,EAAW,IAAA;AAAA,IAC9C,YAAY;AAAA,MACV,OAAOA,EAAW;AAAA,MAClB,QAAQA,EAAW;AAAA,IAAA;AAAA,EACrB;AAEJ;AAEO,MAAMC,IAAkBC,EAG7B,SAAuB,EAAE,eAAAC,GAAe,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAClE,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA2B,IAAI;AAEjE,SAAAC,EAAgB,MAAM;AACpB,UAAMX,IAAUI,EAAc;AAC9B,QAAI,CAACJ,EAAS;AAEd,UAAMY,IAAS,MAAM;AACnB,MAAAH,EAAaV,EAAeC,CAAO,CAAC;AAAA,IACtC;AAEA,IAAAY,EAAA;AAGA,UAAMC,IAAiB,IAAI,eAAeD,CAAM;AAChD,WAAAC,EAAe,QAAQb,CAAO,GAK9B,OAAO,iBAAiB,UAAUY,GAAQ,EAAI,GAE9C,OAAO,iBAAiB,UAAUA,CAAM,GAEjC,MAAM;AACX,MAAAC,EAAe,WAAA,GACf,OAAO,oBAAoB,UAAUD,GAAQ,EAAI,GACjD,OAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAACR,CAAa,CAAC,qBAGfU,GAAA,EAAS,KAAAP,GAAU,QAAQC,GAAY,GAAGF,GACxC,UAAAD,GACH;AAEJ,CAAC;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { HorizontalTether, VerticalTether } from '../types.js';
|
|
2
|
+
import { Rectangle, Dimensions } from '../../../utils/index.js';
|
|
3
|
+
export interface CalculateTetheredPositionParams {
|
|
4
|
+
anchor: Rectangle;
|
|
5
|
+
tether: Rectangle;
|
|
6
|
+
direction: 'ltr' | 'rtl';
|
|
7
|
+
verticalAnchor: VerticalTether;
|
|
8
|
+
verticalOrigin: VerticalTether;
|
|
9
|
+
horizontalAnchor: HorizontalTether;
|
|
10
|
+
horizontalOrigin: HorizontalTether;
|
|
11
|
+
verticalOffset: number;
|
|
12
|
+
horizontalOffset: number;
|
|
13
|
+
viewport: Dimensions;
|
|
14
|
+
}
|
|
15
|
+
export declare const calculateTetheredPosition: ({ anchor, tether, direction, verticalAnchor, verticalOrigin, horizontalAnchor, horizontalOrigin, verticalOffset, horizontalOffset, viewport, }: CalculateTetheredPositionParams) => {
|
|
16
|
+
top: number;
|
|
17
|
+
left: number;
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=calculate_position.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculate_position.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/calculate_position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,UAAU,CAAC;CACtB;AAED,eAAO,MAAM,yBAAyB,GAAI,gJAWvC,+BAA+B;;;CAiFjC,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
const k = ({
|
|
2
|
+
anchor: d,
|
|
3
|
+
tether: e,
|
|
4
|
+
direction: a,
|
|
5
|
+
verticalAnchor: f,
|
|
6
|
+
verticalOrigin: h,
|
|
7
|
+
horizontalAnchor: b,
|
|
8
|
+
horizontalOrigin: w,
|
|
9
|
+
verticalOffset: g,
|
|
10
|
+
horizontalOffset: n,
|
|
11
|
+
viewport: m
|
|
12
|
+
}) => {
|
|
13
|
+
const c = a === "rtl";
|
|
14
|
+
let i = d.position.y, s = d.position.x;
|
|
15
|
+
switch (f) {
|
|
16
|
+
case "top":
|
|
17
|
+
i += g;
|
|
18
|
+
break;
|
|
19
|
+
case "center":
|
|
20
|
+
i += d.dimensions.height / 2;
|
|
21
|
+
break;
|
|
22
|
+
case "bottom":
|
|
23
|
+
i += d.dimensions.height - g;
|
|
24
|
+
break;
|
|
25
|
+
}
|
|
26
|
+
switch (h) {
|
|
27
|
+
case "top":
|
|
28
|
+
break;
|
|
29
|
+
case "center":
|
|
30
|
+
i -= e.dimensions.height / 2;
|
|
31
|
+
break;
|
|
32
|
+
case "bottom":
|
|
33
|
+
i -= e.dimensions.height;
|
|
34
|
+
break;
|
|
35
|
+
}
|
|
36
|
+
b === "start" ? s += c ? d.dimensions.width + n : n : b === "center" ? s += d.dimensions.width / 2 : b === "end" && (s += c ? -n : d.dimensions.width + n);
|
|
37
|
+
let t = w;
|
|
38
|
+
return c && (w === "start" ? t = "end" : w === "end" && (t = "start")), t === "start" || (t === "center" ? s -= e.dimensions.width / 2 : t === "end" && (s -= e.dimensions.width)), s + e.dimensions.width > m.width && (s = m.width - e.dimensions.width), s < 0 && (s = 0), i + e.dimensions.height > m.height && (i = m.height - e.dimensions.height), i < 0 && (i = 0), { top: i, left: s };
|
|
39
|
+
};
|
|
40
|
+
export {
|
|
41
|
+
k as calculateTetheredPosition
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=calculate_position.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculate_position.js","sources":["../../../../src/overlay/tethered/hooks/calculate_position.ts"],"sourcesContent":["import type { HorizontalTether, VerticalTether } from '../types.js';\nimport type { Rectangle } from '../../../utils/index.js';\nimport type { Dimensions } from '../../../utils/index.js';\n\nexport interface CalculateTetheredPositionParams {\n anchor: Rectangle;\n tether: Rectangle;\n direction: 'ltr' | 'rtl';\n verticalAnchor: VerticalTether;\n verticalOrigin: VerticalTether;\n horizontalAnchor: HorizontalTether;\n horizontalOrigin: HorizontalTether;\n verticalOffset: number;\n horizontalOffset: number;\n viewport: Dimensions;\n}\n\nexport const calculateTetheredPosition = ({\n anchor,\n tether,\n direction,\n verticalAnchor,\n verticalOrigin,\n horizontalAnchor,\n horizontalOrigin,\n verticalOffset,\n horizontalOffset,\n viewport,\n}: CalculateTetheredPositionParams) => {\n const isRtl = direction === 'rtl';\n\n let top = anchor.position.y;\n let left = anchor.position.x;\n\n // Calculate vertical position\n switch (verticalAnchor) {\n case 'top':\n top += verticalOffset;\n break;\n case 'center':\n top += anchor.dimensions.height / 2;\n break;\n case 'bottom':\n top += anchor.dimensions.height - verticalOffset;\n break;\n }\n\n switch (verticalOrigin) {\n case 'top':\n break;\n case 'center':\n top -= tether.dimensions.height / 2;\n break;\n case 'bottom':\n top -= tether.dimensions.height;\n break;\n }\n\n // Calculate horizontal position with direction sensitivity\n if (horizontalAnchor === 'start') {\n left += isRtl ? anchor.dimensions.width + horizontalOffset : horizontalOffset;\n } else if (horizontalAnchor === 'center') {\n left += anchor.dimensions.width / 2;\n } else if (horizontalAnchor === 'end') {\n left += isRtl ? -horizontalOffset : anchor.dimensions.width + horizontalOffset;\n }\n\n // Adjust the origin based on RTL direction\n let adjustedHorizontalOrigin = horizontalOrigin;\n if (isRtl) {\n if (horizontalOrigin === 'start') {\n adjustedHorizontalOrigin = 'end';\n } else if (horizontalOrigin === 'end') {\n adjustedHorizontalOrigin = 'start';\n }\n }\n\n // Apply adjusted origin to the position calculation\n if (adjustedHorizontalOrigin === 'start') {\n // No adjustment needed\n } else if (adjustedHorizontalOrigin === 'center') {\n left -= tether.dimensions.width / 2;\n } else if (adjustedHorizontalOrigin === 'end') {\n left -= tether.dimensions.width;\n }\n\n // Ensure the popover stays within the viewport\n // Prevent overflow to the right\n if (left + tether.dimensions.width > viewport.width) {\n left = viewport.width - tether.dimensions.width;\n }\n\n // Prevent overflow to the left\n if (left < 0) {\n left = 0;\n }\n\n // Prevent overflow to the bottom\n // FIXME: doesn't account for padding.\n if (top + tether.dimensions.height > viewport.height) {\n top = viewport.height - tether.dimensions.height;\n }\n\n // Prevent overflow to the top\n if (top < 0) {\n top = 0;\n }\n\n return { top, left };\n};\n"],"names":["calculateTetheredPosition","anchor","tether","direction","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","viewport","isRtl","top","left","adjustedHorizontalOrigin"],"mappings":"AAiBO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AACF,MAAuC;AACrC,QAAMC,IAAQR,MAAc;AAE5B,MAAIS,IAAMX,EAAO,SAAS,GACtBY,IAAOZ,EAAO,SAAS;AAG3B,UAAQG,GAAA;AAAA,IACN,KAAK;AACH,MAAAQ,KAAOJ;AACP;AAAA,IACF,KAAK;AACH,MAAAI,KAAOX,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAW,KAAOX,EAAO,WAAW,SAASO;AAClC;AAAA,EAAA;AAGJ,UAAQH,GAAA;AAAA,IACN,KAAK;AACH;AAAA,IACF,KAAK;AACH,MAAAO,KAAOV,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAU,KAAOV,EAAO,WAAW;AACzB;AAAA,EAAA;AAIJ,EAAII,MAAqB,UACvBO,KAAQF,IAAQV,EAAO,WAAW,QAAQQ,IAAmBA,IACpDH,MAAqB,WAC9BO,KAAQZ,EAAO,WAAW,QAAQ,IACzBK,MAAqB,UAC9BO,KAAQF,IAAQ,CAACF,IAAmBR,EAAO,WAAW,QAAQQ;AAIhE,MAAIK,IAA2BP;AAC/B,SAAII,MACEJ,MAAqB,UACvBO,IAA2B,QAClBP,MAAqB,UAC9BO,IAA2B,WAK3BA,MAA6B,YAEtBA,MAA6B,WACtCD,KAAQX,EAAO,WAAW,QAAQ,IACzBY,MAA6B,UACtCD,KAAQX,EAAO,WAAW,SAKxBW,IAAOX,EAAO,WAAW,QAAQQ,EAAS,UAC5CG,IAAOH,EAAS,QAAQR,EAAO,WAAW,QAIxCW,IAAO,MACTA,IAAO,IAKLD,IAAMV,EAAO,WAAW,SAASQ,EAAS,WAC5CE,IAAMF,EAAS,SAASR,EAAO,WAAW,SAIxCU,IAAM,MACRA,IAAM,IAGD,EAAE,KAAAA,GAAK,MAAAC,EAAA;AAChB;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { HorizontalTether, VerticalTether } from '../types.js';
|
|
2
|
+
import { Rectangle } from '../../../utils/index.js';
|
|
3
|
+
export interface UseTetherParams {
|
|
4
|
+
anchor: Rectangle | null;
|
|
5
|
+
verticalAnchor?: VerticalTether;
|
|
6
|
+
verticalOrigin?: VerticalTether;
|
|
7
|
+
horizontalOrigin?: HorizontalTether;
|
|
8
|
+
horizontalAnchor?: HorizontalTether;
|
|
9
|
+
verticalOffset?: number;
|
|
10
|
+
horizontalOffset?: number;
|
|
11
|
+
}
|
|
12
|
+
export declare function useTether({ anchor, verticalAnchor, verticalOrigin, horizontalAnchor, horizontalOrigin, verticalOffset, horizontalOffset, }: UseTetherParams): {
|
|
13
|
+
position: {
|
|
14
|
+
top: number;
|
|
15
|
+
left: number;
|
|
16
|
+
};
|
|
17
|
+
tetherRef: import('react').RefObject<HTMLDivElement>;
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=useTether.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTether.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGzD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,cAAyB,EACzB,cAAsB,EACtB,gBAA0B,EAC1B,gBAA0B,EAC1B,cAAkB,EAClB,gBAAoB,GACrB,EAAE,eAAe;;;;;;EA6DjB"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { useState as h, useRef as m, useCallback as l, useLayoutEffect as g } from "react";
|
|
2
|
+
import { calculateTetheredPosition as y } from "./calculate_position.js";
|
|
3
|
+
function E({
|
|
4
|
+
anchor: n,
|
|
5
|
+
verticalAnchor: r = "bottom",
|
|
6
|
+
verticalOrigin: s = "top",
|
|
7
|
+
horizontalAnchor: u = "start",
|
|
8
|
+
horizontalOrigin: d = "start",
|
|
9
|
+
verticalOffset: p = 0,
|
|
10
|
+
horizontalOffset: w = 0
|
|
11
|
+
}) {
|
|
12
|
+
const [o, c] = h({ top: 0, left: 0 }), i = m(null), f = l(() => {
|
|
13
|
+
if (!n || !i.current) return;
|
|
14
|
+
const t = i.current.getBoundingClientRect(), e = getComputedStyle(i.current);
|
|
15
|
+
return y({
|
|
16
|
+
anchor: n,
|
|
17
|
+
tether: {
|
|
18
|
+
dimensions: {
|
|
19
|
+
width: t.width,
|
|
20
|
+
height: t.height
|
|
21
|
+
},
|
|
22
|
+
position: {
|
|
23
|
+
x: t.left,
|
|
24
|
+
y: t.top
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
direction: e.direction,
|
|
28
|
+
verticalAnchor: r,
|
|
29
|
+
verticalOrigin: s,
|
|
30
|
+
horizontalAnchor: u,
|
|
31
|
+
horizontalOrigin: d,
|
|
32
|
+
verticalOffset: p,
|
|
33
|
+
horizontalOffset: w,
|
|
34
|
+
viewport: {
|
|
35
|
+
width: window.innerWidth,
|
|
36
|
+
height: window.innerHeight
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
}, [
|
|
40
|
+
n,
|
|
41
|
+
r,
|
|
42
|
+
s,
|
|
43
|
+
u,
|
|
44
|
+
d,
|
|
45
|
+
p,
|
|
46
|
+
w
|
|
47
|
+
]);
|
|
48
|
+
return g(() => {
|
|
49
|
+
const t = () => {
|
|
50
|
+
const e = f();
|
|
51
|
+
e && (o.top !== e.top || o.left !== e.left) && c(e);
|
|
52
|
+
};
|
|
53
|
+
return t(), window.addEventListener("resize", t), () => {
|
|
54
|
+
window.removeEventListener("resize", t);
|
|
55
|
+
};
|
|
56
|
+
}), { position: o, tetherRef: i };
|
|
57
|
+
}
|
|
58
|
+
export {
|
|
59
|
+
E as useTether
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=useTether.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTether.js","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport { type Rectangle } from '../../../utils/index.js';\nimport { calculateTetheredPosition } from './calculate_position.js';\n\nexport interface UseTetherParams {\n anchor: Rectangle | null;\n verticalAnchor?: VerticalTether;\n verticalOrigin?: VerticalTether;\n horizontalOrigin?: HorizontalTether;\n horizontalAnchor?: HorizontalTether;\n verticalOffset?: number;\n horizontalOffset?: number;\n}\n\nexport function useTether({\n anchor,\n verticalAnchor = 'bottom',\n verticalOrigin = 'top',\n horizontalAnchor = 'start',\n horizontalOrigin = 'start',\n verticalOffset = 0,\n horizontalOffset = 0,\n}: UseTetherParams) {\n const [position, setPosition] = useState({ top: 0, left: 0 });\n const tetherRef = useRef<HTMLDivElement>(null);\n\n const getPosition = useCallback(() => {\n if (!anchor || !tetherRef.current) return;\n\n const tether = tetherRef.current.getBoundingClientRect();\n const computedStyle = getComputedStyle(tetherRef.current);\n\n return calculateTetheredPosition({\n anchor: anchor,\n tether: {\n dimensions: {\n width: tether.width,\n height: tether.height,\n },\n position: {\n x: tether.left,\n y: tether.top,\n },\n },\n direction: computedStyle.direction as 'ltr' | 'rtl',\n verticalAnchor: verticalAnchor,\n verticalOrigin: verticalOrigin,\n horizontalAnchor: horizontalAnchor,\n horizontalOrigin: horizontalOrigin,\n verticalOffset: verticalOffset,\n horizontalOffset: horizontalOffset,\n viewport: {\n width: window.innerWidth,\n height: window.innerHeight,\n },\n });\n }, [\n anchor,\n verticalAnchor,\n verticalOrigin,\n horizontalAnchor,\n horizontalOrigin,\n verticalOffset,\n horizontalOffset,\n ]);\n\n // Update the position when the window is resized\n useLayoutEffect(() => {\n const update = () => {\n const newPosition = getPosition();\n if (!newPosition) return;\n if (position.top !== newPosition.top || position.left !== newPosition.left) {\n setPosition(newPosition);\n }\n };\n update();\n window.addEventListener('resize', update);\n return () => {\n window.removeEventListener('resize', update);\n };\n });\n\n return { position, tetherRef };\n}\n"],"names":["useTether","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","position","setPosition","useState","tetherRef","useRef","getPosition","useCallback","tether","computedStyle","calculateTetheredPosition","useLayoutEffect","update","newPosition"],"mappings":";;AAeO,SAASA,EAAU;AAAA,EACxB,QAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AACrB,GAAoB;AAClB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GACtDC,IAAYC,EAAuB,IAAI,GAEvCC,IAAcC,EAAY,MAAM;AACpC,QAAI,CAACb,KAAU,CAACU,EAAU,QAAS;AAEnC,UAAMI,IAASJ,EAAU,QAAQ,sBAAA,GAC3BK,IAAgB,iBAAiBL,EAAU,OAAO;AAExD,WAAOM,EAA0B;AAAA,MAC/B,QAAAhB;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,OAAOc,EAAO;AAAA,UACd,QAAQA,EAAO;AAAA,QAAA;AAAA,QAEjB,UAAU;AAAA,UACR,GAAGA,EAAO;AAAA,UACV,GAAGA,EAAO;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,WAAWC,EAAc;AAAA,MACzB,gBAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,UAAU;AAAA,QACR,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA;AAAA,IACjB,CACD;AAAA,EACH,GAAG;AAAA,IACDN;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,CACD;AAGD,SAAAW,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,YAAMC,IAAcP,EAAA;AACpB,MAAKO,MACDZ,EAAS,QAAQY,EAAY,OAAOZ,EAAS,SAASY,EAAY,SACpEX,EAAYW,CAAW;AAAA,IAE3B;AACA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAM,GACjC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,CAAC,GAEM,EAAE,UAAAX,GAAU,WAAAG,EAAA;AACrB;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { HorizontalTether, VerticalTether } from './types.js';
|
|
2
|
+
import { ZStackProps } from '../../stacks/index.js';
|
|
3
|
+
import { Rectangle } from '../../utils/index.js';
|
|
4
|
+
export interface BaseTetheredOwnProps {
|
|
5
|
+
verticalAnchor?: VerticalTether;
|
|
6
|
+
verticalOrigin?: VerticalTether;
|
|
7
|
+
horizontalOrigin?: HorizontalTether;
|
|
8
|
+
horizontalAnchor?: HorizontalTether;
|
|
9
|
+
verticalOffset?: number;
|
|
10
|
+
horizontalOffset?: number;
|
|
11
|
+
}
|
|
12
|
+
export interface TetheredOwnProp extends BaseTetheredOwnProps {
|
|
13
|
+
anchor: Rectangle | null;
|
|
14
|
+
}
|
|
15
|
+
export interface TetheredProps extends TetheredOwnProp, ZStackProps {
|
|
16
|
+
}
|
|
17
|
+
export declare const Tethered: import('react').ForwardRefExoticComponent<TetheredProps & {
|
|
18
|
+
children?: import('react').ReactNode | undefined;
|
|
19
|
+
} & import('react').RefAttributes<HTMLElement>>;
|
|
20
|
+
//# sourceMappingURL=tethered.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/tethered.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAQlE,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;CAC1B;AACD,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,WAAW;CAAG;AAEtE,eAAO,MAAM,QAAQ;;+CA8CpB,CAAC"}
|