@tcn/ui 0.17.0 → 0.18.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/AI_USAGE.md +59 -0
- package/CHANGELOG.md +1009 -0
- package/ai-docs/actions.md +43 -0
- package/ai-docs/decorators.md +34 -0
- package/ai-docs/feedback.md +31 -0
- package/ai-docs/form.md +58 -0
- package/ai-docs/inputs.md +71 -0
- package/ai-docs/layouts.md +76 -0
- package/ai-docs/mobile.md +34 -0
- package/ai-docs/navigation.md +48 -0
- package/ai-docs/overlay.md +58 -0
- package/ai-docs/stacks.md +59 -0
- package/ai-docs/surfaces.md +79 -0
- package/ai-docs/themes.md +47 -0
- package/ai-docs/tokens.md +35 -0
- package/ai-docs/typography.md +38 -0
- package/ai-docs/utils.md +51 -0
- package/dist/actions/index.d.ts +0 -1
- package/dist/actions/index.d.ts.map +1 -1
- package/dist/actions/index.js +6 -8
- package/dist/actions/index.js.map +1 -1
- package/dist/draggable.css +1 -1
- package/dist/draggable.module-DFYR5n3n.js +5 -0
- package/dist/draggable.module-DFYR5n3n.js.map +1 -0
- package/dist/field_set.css +1 -1
- package/dist/field_set.module-BpJTFCi4.js +5 -0
- package/dist/field_set.module-BpJTFCi4.js.map +1 -0
- package/dist/form/field/field.js +11 -10
- package/dist/form/field/field.js.map +1 -1
- package/dist/form/field_set/field_set.d.ts +6 -10
- package/dist/form/field_set/field_set.d.ts.map +1 -1
- package/dist/form/field_set/field_set.js +33 -61
- package/dist/form/field_set/field_set.js.map +1 -1
- package/dist/form/field_set/legend.d.ts +20 -0
- package/dist/form/field_set/legend.d.ts.map +1 -0
- package/dist/form/field_set/legend.js +28 -0
- package/dist/form/field_set/legend.js.map +1 -0
- package/dist/form/index.d.ts +2 -1
- package/dist/form/index.d.ts.map +1 -1
- package/dist/form/index.js +24 -22
- package/dist/form/index.js.map +1 -1
- package/dist/inputs/color_input/color_input.js +2 -3
- package/dist/inputs/color_input/color_input.js.map +1 -1
- package/dist/inputs/color_input/color_picker.js +11 -10
- package/dist/inputs/color_input/color_picker.js.map +1 -1
- package/dist/inputs/combo_box/combo_box.js +11 -10
- package/dist/inputs/combo_box/combo_box.js.map +1 -1
- package/dist/inputs/date_picker/date_picker.js +11 -10
- package/dist/inputs/date_picker/date_picker.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_header.d.ts.map +1 -1
- package/dist/inputs/date_picker/date_picker_header.js +15 -14
- package/dist/inputs/date_picker/date_picker_header.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_input.js +9 -9
- package/dist/inputs/date_picker/date_picker_time_selector.js +2 -3
- package/dist/inputs/date_picker/date_picker_time_selector.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_year_input.js +2 -3
- package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_year_selector.js +22 -22
- package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
- package/dist/inputs/mask_input/key_capture_input.js +21 -20
- package/dist/inputs/mask_input/key_capture_input.js.map +1 -1
- package/dist/inputs/mask_input/mask_input.js +18 -17
- package/dist/inputs/mask_input/mask_input.js.map +1 -1
- package/dist/inputs/multiselect/multiselect.js +11 -10
- package/dist/inputs/multiselect/multiselect.js.map +1 -1
- package/dist/inputs/multiselect/multiselect_inline_values.d.ts.map +1 -1
- package/dist/inputs/multiselect/multiselect_inline_values.js +15 -15
- package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
- package/dist/inputs/multiselect/multiselect_values.js +16 -17
- package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
- package/dist/inputs/phone_number_input/phone_number_context.js +13 -12
- package/dist/inputs/phone_number_input/phone_number_context.js.map +1 -1
- package/dist/inputs/phone_number_input/phone_number_input_adapter.js +2 -3
- package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
- package/dist/inputs/phone_number_input/sip_input.js +8 -9
- package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
- package/dist/inputs/select/select.js +9 -9
- package/dist/inputs/slider/slider.js +21 -20
- package/dist/inputs/slider/slider.js.map +1 -1
- package/dist/inputs/suggestions/suggestion_list.js +9 -9
- package/dist/inputs/switch/switch.js +16 -15
- package/dist/inputs/switch/switch.js.map +1 -1
- package/dist/inputs/unit_input/unit_input.js +11 -10
- package/dist/inputs/unit_input/unit_input.js.map +1 -1
- package/dist/mobile/inputs/date_picker/mobile_date_picker_header.js +11 -10
- package/dist/mobile/inputs/date_picker/mobile_date_picker_header.js.map +1 -1
- package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js +11 -10
- package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js.map +1 -1
- package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js +11 -10
- package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js.map +1 -1
- package/dist/multiselect_values.css +1 -1
- package/dist/navigation/tabs/state/link/tab_link.js +11 -10
- package/dist/navigation/tabs/state/link/tab_link.js.map +1 -1
- package/dist/overlay/frame/frame.d.ts.map +1 -1
- package/dist/overlay/frame/frame.js +117 -76
- package/dist/overlay/frame/frame.js.map +1 -1
- package/dist/overlay/menu/menu.js +21 -20
- package/dist/overlay/menu/menu.js.map +1 -1
- package/dist/overlay/popper/base/dismissal_decorator.js +3 -3
- package/dist/overlay/popper/base/dismissal_decorator.js.map +1 -1
- package/dist/overlay/popper/context_popper.js +11 -10
- package/dist/overlay/popper/context_popper.js.map +1 -1
- package/dist/overlay/popper/element_popper.js +11 -10
- package/dist/overlay/popper/element_popper.js.map +1 -1
- package/dist/overlay/popper/legacy/popper.js +28 -27
- package/dist/overlay/popper/legacy/popper.js.map +1 -1
- package/dist/overlay/popper/preview_popper.js +11 -10
- package/dist/overlay/popper/preview_popper.js.map +1 -1
- package/dist/overlay/tethered/tethered.js +11 -10
- package/dist/overlay/tethered/tethered.js.map +1 -1
- package/dist/resizable.css +1 -1
- package/dist/resizable.module-ur5FBfxo.js +5 -0
- package/dist/resizable.module-ur5FBfxo.js.map +1 -0
- package/dist/resize_handle.css +1 -1
- package/dist/stacks/box/box.d.ts +14 -0
- package/dist/stacks/box/box.d.ts.map +1 -1
- package/dist/stacks/box/box.js +98 -99
- package/dist/stacks/box/box.js.map +1 -1
- package/dist/stacks/box/end_resize_handle.js +5 -5
- package/dist/stacks/box/end_resize_handle.js.map +1 -1
- package/dist/stacks/box/resize_handlers.d.ts.map +1 -1
- package/dist/stacks/box/resize_handlers.js +12 -12
- package/dist/stacks/box/resize_handlers.js.map +1 -1
- package/dist/stacks/box/start_resize_handle.js +7 -7
- package/dist/stacks/box/start_resize_handle.js.map +1 -1
- package/dist/stacks/box/types.d.ts +3 -2
- package/dist/stacks/box/types.d.ts.map +1 -1
- package/dist/stacks/h_collapsible_box.js +14 -13
- package/dist/stacks/h_collapsible_box.js.map +1 -1
- package/dist/stacks/v_collapsible_box.js +14 -13
- package/dist/stacks/v_collapsible_box.js.map +1 -1
- package/dist/surfaces/alert/alert.js +7 -8
- package/dist/surfaces/alert/alert.js.map +1 -1
- package/dist/themes/stories/button_showcase.d.ts.map +1 -1
- package/dist/themes/stories/controls_fieldset.d.ts.map +1 -1
- package/dist/themes/stories/menu_showcase.d.ts.map +1 -1
- package/dist/themes/themes/ergo/ergo_theme.css +1 -1
- package/dist/themes/themes/ergo/ergo_theme.d.ts.map +1 -1
- package/dist/themes/themes/ergo/ergo_theme.js +336 -294
- package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
- package/dist/themes/themes/ergo/parts/actions.css +1 -0
- package/dist/themes/themes/ergo/parts/base.css +1 -0
- package/dist/themes/themes/ergo/parts/form.css +1 -0
- package/dist/themes/themes/ergo/parts/inputs.css +1 -0
- package/dist/themes/themes/ergo/parts/navigation.css +1 -0
- package/dist/themes/themes/windows_98/windows_98.css +1 -1
- package/dist/themes/themes/windows_98/windows_98_theme.js +32 -43
- package/dist/themes/themes/windows_98/windows_98_theme.js.map +1 -1
- package/dist/utils/decorators/clone_with_decorator.d.ts +21 -0
- package/dist/utils/decorators/clone_with_decorator.d.ts.map +1 -0
- package/dist/utils/decorators/clone_with_decorator.js +16 -0
- package/dist/utils/decorators/clone_with_decorator.js.map +1 -0
- package/dist/utils/decorators/draggable/context.d.ts.map +1 -0
- package/dist/utils/decorators/draggable/context.js.map +1 -0
- package/dist/utils/{dnd/handle.d.ts → decorators/draggable/drag_handle.d.ts} +1 -1
- package/dist/utils/decorators/draggable/drag_handle.d.ts.map +1 -0
- package/dist/utils/{dnd/handle.js → decorators/draggable/drag_handle.js} +2 -2
- package/dist/utils/decorators/draggable/drag_handle.js.map +1 -0
- package/dist/utils/decorators/draggable/draggable.d.ts.map +1 -0
- package/dist/utils/{dnd → decorators}/draggable/draggable.js +3 -3
- package/dist/utils/decorators/draggable/draggable.js.map +1 -0
- package/dist/utils/decorators/draggable/index.d.ts +11 -0
- package/dist/utils/decorators/draggable/index.d.ts.map +1 -0
- package/dist/utils/decorators/draggable/index.js +14 -0
- package/dist/utils/{dnd → decorators/draggable}/types.d.ts +1 -1
- package/dist/utils/decorators/draggable/types.d.ts.map +1 -0
- package/dist/utils/{dnd/hooks → decorators/draggable}/use_drag_container.d.ts +2 -2
- package/dist/utils/decorators/draggable/use_drag_container.d.ts.map +1 -0
- package/dist/utils/decorators/draggable/use_drag_container.js.map +1 -0
- package/dist/utils/decorators/draggable/use_draggable.d.ts.map +1 -0
- package/dist/utils/decorators/draggable/use_draggable.js.map +1 -0
- package/dist/utils/decorators/index.d.ts +3 -0
- package/dist/utils/decorators/index.d.ts.map +1 -0
- package/dist/utils/decorators/index.js +27 -0
- package/dist/utils/decorators/index.js.map +1 -0
- package/dist/utils/decorators/resizable/context.d.ts.map +1 -0
- package/dist/utils/{resize → decorators/resizable}/context.js +1 -1
- package/dist/utils/decorators/resizable/context.js.map +1 -0
- package/dist/utils/decorators/resizable/handle_config.d.ts.map +1 -0
- package/dist/utils/decorators/resizable/handle_config.js +62 -0
- package/dist/utils/decorators/resizable/handle_config.js.map +1 -0
- package/dist/utils/decorators/resizable/index.d.ts.map +1 -0
- package/dist/utils/decorators/resizable/index.js.map +1 -0
- package/dist/utils/decorators/resizable/resizable.d.ts.map +1 -0
- package/dist/utils/{resize → decorators/resizable}/resizable.js +2 -2
- package/dist/utils/decorators/resizable/resizable.js.map +1 -0
- package/dist/utils/decorators/resizable/resize_handle.d.ts.map +1 -0
- package/dist/utils/{resize → decorators/resizable}/resize_handle.js +2 -2
- package/dist/utils/decorators/resizable/resize_handle.js.map +1 -0
- package/dist/utils/{resize → decorators/resizable}/resize_strategy.d.ts +1 -1
- package/dist/utils/decorators/resizable/resize_strategy.d.ts.map +1 -0
- package/dist/utils/decorators/resizable/resize_strategy.js.map +1 -0
- package/dist/utils/{resize → decorators/resizable}/types.d.ts +2 -2
- package/dist/utils/decorators/resizable/types.d.ts.map +1 -0
- package/dist/utils/hooks/labelled_by_context.d.ts +21 -0
- package/dist/utils/hooks/labelled_by_context.d.ts.map +1 -0
- package/dist/utils/hooks/labelled_by_context.js +12 -0
- package/dist/utils/hooks/labelled_by_context.js.map +1 -0
- package/dist/utils/index.d.ts +8 -8
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +44 -40
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/listeners/click_away_listener.d.ts.map +1 -0
- package/dist/utils/{click_away_listener.js → listeners/click_away_listener.js} +1 -1
- package/dist/utils/listeners/click_away_listener.js.map +1 -0
- package/dist/utils/listeners/focus_redirect.d.ts.map +1 -0
- package/dist/utils/listeners/focus_redirect.js.map +1 -0
- package/dist/utils/listeners/index.d.ts +4 -0
- package/dist/utils/listeners/index.d.ts.map +1 -0
- package/dist/utils/listeners/index.js +10 -0
- package/dist/utils/listeners/index.js.map +1 -0
- package/dist/utils/listeners/mouse_leave_region.d.ts.map +1 -0
- package/dist/utils/listeners/mouse_leave_region.js.map +1 -0
- package/dist/utils/listeners/scroll_away_listener.d.ts.map +1 -0
- package/dist/utils/{scroll_away_listener.js → listeners/scroll_away_listener.js} +1 -1
- package/dist/utils/listeners/scroll_away_listener.js.map +1 -0
- package/dist/utils/system/index.d.ts +2 -0
- package/dist/utils/system/index.d.ts.map +1 -0
- package/dist/utils/system/index.js +2 -0
- package/dist/utils/system/index.js.map +1 -0
- package/dist/utils/system/variations.d.ts.map +1 -0
- package/dist/utils/system/variations.js +2 -0
- package/dist/utils/system/variations.js.map +1 -0
- package/dist/utils/types/sides.d.ts +3 -0
- package/dist/utils/types/sides.d.ts.map +1 -0
- package/package.json +7 -9
- package/src/actions/button/__stories__/button_group.stories.tsx +23 -24
- package/src/actions/index.ts +0 -1
- package/src/form/field/field.stories.tsx +2 -2
- package/src/form/field/h_field/h_field.stories.tsx +1 -1
- package/src/form/field/v_field/v_field.stories.tsx +1 -1
- package/src/form/field_set/field_set.module.css +0 -14
- package/src/form/field_set/field_set.stories.tsx +101 -1
- package/src/form/field_set/field_set.tsx +43 -57
- package/src/form/field_set/legend.tsx +44 -0
- package/src/form/index.ts +6 -1
- package/src/inputs/date_picker/date_picker_header.tsx +7 -5
- package/src/inputs/date_picker/date_picker_year_selector.tsx +5 -5
- package/src/inputs/multiselect/multiselect_inline_values.tsx +4 -3
- package/src/inputs/multiselect/multiselect_values.module.css +1 -0
- package/src/inputs/multiselect/multiselect_values.tsx +4 -4
- package/src/overlay/frame/frame.stories.tsx +2 -1
- package/src/overlay/frame/frame.tsx +68 -20
- package/src/overlay/popper/base/dismissal_decorator.tsx +3 -3
- package/src/overlay/popper/legacy/popper.stories.tsx +9 -2
- package/src/overlay/slide/slide.stories.tsx +1 -1
- package/src/stacks/box/box.tsx +29 -4
- package/src/stacks/box/end_resize_handle.tsx +1 -1
- package/src/stacks/box/resize_handlers.ts +1 -1
- package/src/stacks/box/start_resize_handle.tsx +1 -1
- package/src/stacks/box/types.ts +3 -2
- package/src/stacks/collapsible_box.stories.tsx +5 -5
- package/src/stacks/demo.stories.tsx +7 -7
- package/src/surfaces/page/page.stories.tsx +4 -4
- package/src/surfaces/window/window.stories.tsx +1 -1
- package/src/themes/stories/button_showcase.tsx +3 -1
- package/src/themes/stories/controls_fieldset.tsx +3 -1
- package/src/themes/stories/menu_showcase.tsx +3 -1
- package/src/themes/themes/ergo/INTERACTIVE.md +89 -0
- package/src/themes/themes/ergo/ROADMAP.md +116 -0
- package/src/themes/themes/ergo/ergo_theme.css +22 -717
- package/src/themes/themes/ergo/ergo_theme.ts +15 -1
- package/src/themes/themes/ergo/parts/actions.css +287 -0
- package/src/themes/themes/ergo/parts/base.css +62 -0
- package/src/themes/themes/ergo/parts/form.css +23 -0
- package/src/themes/themes/ergo/parts/inputs.css +252 -0
- package/src/themes/themes/ergo/parts/navigation.css +104 -0
- package/src/themes/themes/windows_98/windows_98.css +32 -43
- package/src/tokens/chip/chip.stories.tsx +5 -5
- package/src/utils/decorators/DECORATOR_PATTERN.md +86 -0
- package/src/utils/decorators/clone_with_decorator.ts +47 -0
- package/src/utils/{dnd → decorators/draggable}/__stories__/draggable.stories.tsx +7 -7
- package/src/utils/{dnd → decorators/draggable}/__stories__/use_draggable.stories.tsx +2 -2
- package/src/utils/{dnd/handle.tsx → decorators/draggable/drag_handle.tsx} +1 -1
- package/src/utils/{dnd → decorators}/draggable/draggable.tsx +2 -2
- package/src/utils/decorators/draggable/index.ts +15 -0
- package/src/utils/{dnd → decorators/draggable}/types.ts +1 -1
- package/src/utils/{dnd/hooks → decorators/draggable}/use_drag_container.ts +2 -2
- package/src/utils/decorators/index.ts +2 -0
- package/src/utils/{resize → decorators/resizable}/__stories__/resizable.stories.tsx +23 -23
- package/src/utils/{resize → decorators/resizable}/__tests__/handle_config.test.ts +19 -97
- package/src/utils/{resize → decorators/resizable}/__tests__/resize_strategy.test.ts +20 -20
- package/src/utils/{resize → decorators/resizable}/context.ts +1 -1
- package/src/utils/{resize → decorators/resizable}/handle_config.ts +7 -31
- package/src/utils/{resize → decorators/resizable}/resizable.tsx +1 -1
- package/src/utils/{resize → decorators/resizable}/resize_handle.module.css +1 -41
- package/src/utils/{resize → decorators/resizable}/resize_handle.tsx +1 -1
- package/src/utils/{resize → decorators/resizable}/resize_strategy.ts +1 -1
- package/src/utils/{resize → decorators/resizable}/types.ts +1 -7
- package/src/utils/hooks/labelled_by_context.ts +27 -0
- package/src/utils/index.ts +8 -8
- package/src/utils/{click_away_listener.tsx → listeners/click_away_listener.tsx} +1 -1
- package/src/utils/listeners/index.ts +3 -0
- package/src/utils/{scroll_away_listener.tsx → listeners/scroll_away_listener.tsx} +1 -1
- package/src/utils/system/index.ts +1 -0
- package/src/utils/types/sides.ts +2 -0
- package/dist/actions/button/slim_button/slim_button.d.ts +0 -9
- package/dist/actions/button/slim_button/slim_button.d.ts.map +0 -1
- package/dist/actions/button/slim_button/slim_button.js +0 -18
- package/dist/actions/button/slim_button/slim_button.js.map +0 -1
- package/dist/draggable.module-BgelQsuJ.js +0 -5
- package/dist/draggable.module-BgelQsuJ.js.map +0 -1
- package/dist/frame.css +0 -1
- package/dist/left_resize_handle.css +0 -1
- package/dist/resizable.module-I6iyBAvM.js +0 -5
- package/dist/resizable.module-I6iyBAvM.js.map +0 -1
- package/dist/right_resize_handle.css +0 -1
- package/dist/slim_button.css +0 -1
- package/dist/stacks/box/left_resize_handle.d.ts +0 -4
- package/dist/stacks/box/left_resize_handle.d.ts.map +0 -1
- package/dist/stacks/box/left_resize_handle.js +0 -36
- package/dist/stacks/box/left_resize_handle.js.map +0 -1
- package/dist/stacks/box/right_resize_handle.d.ts +0 -4
- package/dist/stacks/box/right_resize_handle.d.ts.map +0 -1
- package/dist/stacks/box/right_resize_handle.js +0 -36
- package/dist/stacks/box/right_resize_handle.js.map +0 -1
- package/dist/utils/click_away_listener.d.ts.map +0 -1
- package/dist/utils/click_away_listener.js.map +0 -1
- package/dist/utils/dnd/context.d.ts.map +0 -1
- package/dist/utils/dnd/context.js.map +0 -1
- package/dist/utils/dnd/draggable/draggable.d.ts.map +0 -1
- package/dist/utils/dnd/draggable/draggable.js.map +0 -1
- package/dist/utils/dnd/handle.d.ts.map +0 -1
- package/dist/utils/dnd/handle.js.map +0 -1
- package/dist/utils/dnd/hooks/use_drag_container.d.ts.map +0 -1
- package/dist/utils/dnd/hooks/use_drag_container.js.map +0 -1
- package/dist/utils/dnd/hooks/use_draggable.d.ts.map +0 -1
- package/dist/utils/dnd/hooks/use_draggable.js.map +0 -1
- package/dist/utils/dnd/types.d.ts.map +0 -1
- package/dist/utils/focus_redirect.d.ts.map +0 -1
- package/dist/utils/focus_redirect.js.map +0 -1
- package/dist/utils/mouse_leave_region.d.ts.map +0 -1
- package/dist/utils/mouse_leave_region.js.map +0 -1
- package/dist/utils/resize/context.d.ts.map +0 -1
- package/dist/utils/resize/context.js.map +0 -1
- package/dist/utils/resize/handle_config.d.ts.map +0 -1
- package/dist/utils/resize/handle_config.js +0 -85
- package/dist/utils/resize/handle_config.js.map +0 -1
- package/dist/utils/resize/index.d.ts.map +0 -1
- package/dist/utils/resize/resizable.d.ts.map +0 -1
- package/dist/utils/resize/resizable.js.map +0 -1
- package/dist/utils/resize/resize_handle.d.ts.map +0 -1
- package/dist/utils/resize/resize_handle.js.map +0 -1
- package/dist/utils/resize/resize_strategy.d.ts.map +0 -1
- package/dist/utils/resize/resize_strategy.js.map +0 -1
- package/dist/utils/resize/types.d.ts.map +0 -1
- package/dist/utils/scroll_away_listener.d.ts.map +0 -1
- package/dist/utils/scroll_away_listener.js.map +0 -1
- package/dist/utils/types/variations.d.ts.map +0 -1
- package/src/actions/button/__stories__/slim_button.stories.tsx +0 -274
- package/src/actions/button/slim_button/slim_button.module.css +0 -9
- package/src/actions/button/slim_button/slim_button.tsx +0 -26
- package/src/overlay/frame/frame.module.css +0 -5
- package/src/stacks/box/left_resize_handle.module.css +0 -12
- package/src/stacks/box/left_resize_handle.tsx +0 -39
- package/src/stacks/box/right_resize_handle.module.css +0 -12
- package/src/stacks/box/right_resize_handle.tsx +0 -38
- /package/dist/utils/{dnd → decorators/draggable}/context.d.ts +0 -0
- /package/dist/utils/{dnd → decorators/draggable}/context.js +0 -0
- /package/dist/utils/{dnd → decorators}/draggable/draggable.d.ts +0 -0
- /package/dist/utils/{resize → decorators/draggable}/index.js.map +0 -0
- /package/dist/utils/{dnd → decorators/draggable}/types.js +0 -0
- /package/dist/utils/{dnd → decorators/draggable}/types.js.map +0 -0
- /package/dist/utils/{dnd/hooks → decorators/draggable}/use_drag_container.js +0 -0
- /package/dist/utils/{dnd/hooks → decorators/draggable}/use_draggable.d.ts +0 -0
- /package/dist/utils/{dnd/hooks → decorators/draggable}/use_draggable.js +0 -0
- /package/dist/utils/{resize → decorators/resizable}/context.d.ts +0 -0
- /package/dist/utils/{resize → decorators/resizable}/handle_config.d.ts +0 -0
- /package/dist/utils/{resize → decorators/resizable}/index.d.ts +0 -0
- /package/dist/utils/{resize → decorators/resizable}/index.js +0 -0
- /package/dist/utils/{resize → decorators/resizable}/resizable.d.ts +0 -0
- /package/dist/utils/{resize → decorators/resizable}/resize_handle.d.ts +0 -0
- /package/dist/utils/{resize → decorators/resizable}/resize_strategy.js +0 -0
- /package/dist/utils/{resize → decorators/resizable}/types.js +0 -0
- /package/dist/utils/{resize → decorators/resizable}/types.js.map +0 -0
- /package/dist/utils/{click_away_listener.d.ts → listeners/click_away_listener.d.ts} +0 -0
- /package/dist/utils/{focus_redirect.d.ts → listeners/focus_redirect.d.ts} +0 -0
- /package/dist/utils/{focus_redirect.js → listeners/focus_redirect.js} +0 -0
- /package/dist/utils/{mouse_leave_region.d.ts → listeners/mouse_leave_region.d.ts} +0 -0
- /package/dist/utils/{mouse_leave_region.js → listeners/mouse_leave_region.js} +0 -0
- /package/dist/utils/{scroll_away_listener.d.ts → listeners/scroll_away_listener.d.ts} +0 -0
- /package/dist/utils/{types → system}/variations.d.ts +0 -0
- /package/src/utils/{dnd → decorators/draggable}/__stories__/draggable_stories.module.css +0 -0
- /package/src/utils/{dnd → decorators/draggable}/context.ts +0 -0
- /package/src/utils/{dnd → decorators}/draggable/draggable.module.css +0 -0
- /package/src/utils/{dnd/hooks → decorators/draggable}/use_draggable.ts +0 -0
- /package/src/utils/{resize → decorators/resizable}/__stories__/resizable_stories.module.css +0 -0
- /package/src/utils/{resize → decorators/resizable}/index.ts +0 -0
- /package/src/utils/{resize → decorators/resizable}/resizable.module.css +0 -0
- /package/src/utils/{click_away_listener.stories.tsx → listeners/click_away_listener.stories.tsx} +0 -0
- /package/src/utils/{focus_redirect.tsx → listeners/focus_redirect.tsx} +0 -0
- /package/src/utils/{mouse_leave_region.tsx → listeners/mouse_leave_region.tsx} +0 -0
- /package/src/utils/{scroll_away_listener.stories.tsx → listeners/scroll_away_listener.stories.tsx} +0 -0
- /package/src/utils/{types → system}/variations.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date_picker_year_selector.js","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport {
|
|
1
|
+
{"version":3,"file":"date_picker_year_selector.js","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '../../actions/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../typography/index.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_year_selector.module.css';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { clsx } from 'clsx';\n\nexport interface DatePickerYearSelectorProps {\n presenter: DatePickerPresenter;\n onClose: () => void;\n}\n\nexport function DatePickerYearSelector({\n presenter,\n onClose,\n}: DatePickerYearSelectorProps) {\n const { min, max, visibleYear, visibleMonth } = useSignalValue(\n presenter.stateBroadcast\n );\n\n const [offset, setOffset] = useState(0);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const minYear = min == null ? -Infinity : min.getFullYear();\n const maxYear = max == null ? Infinity : max.getFullYear();\n const years: React.ReactNode[] = [];\n const remainder = visibleYear % 20;\n let firstYear = visibleYear - remainder + offset;\n let lastYear = firstYear + 19;\n\n for (let x = 0; x < 20; x++) {\n let disabled = false;\n const date = new Date(visibleYear, visibleMonth, 1);\n date.setFullYear(visibleYear - remainder + x + offset);\n\n if (date.getFullYear() > maxYear || date.getFullYear() < minYear) {\n disabled = true;\n }\n\n const Button: any = HStack;\n\n years.push(\n <Button\n as=\"button\"\n key={x}\n width=\"flex\"\n disabled={disabled}\n className={clsx(styles['date-picker-year-button'], 'tcn-date-picker-year-button')}\n data-is-disabled={String(disabled)}\n data-is-selected={String(date.getFullYear() === visibleYear)}\n onClick={() => {\n presenter.setVisibleYear(date.getFullYear());\n onClose();\n }}\n >\n <BodyText>{date.getFullYear()}</BodyText>\n </Button>\n );\n }\n\n function focus() {\n if (containerRef.current != null) {\n containerRef.current.focus();\n }\n }\n\n useEffect(() => {\n if (containerRef.current != null) {\n containerRef.current.focus();\n }\n }, []);\n\n const firstRow = years.slice(0, 4);\n const secondRow = years.slice(4, 8);\n const thirdRow = years.slice(8, 12);\n const fourthRow = years.slice(12, 16);\n const fifthRow = years.slice(16, 20);\n\n function prev() {\n setOffset(offset - 20);\n }\n\n function next() {\n setOffset(offset + 20);\n }\n\n return (\n <VStack\n ref={containerRef}\n tabIndex={0}\n padding=\"8px\"\n className={clsx(\n styles['date-picker-year-selector'],\n 'tcn-date-picker-year-selector'\n )}\n gap=\"4px\"\n >\n <HStack gap=\"4px\">\n <Button utility onClick={prev} hierarchy=\"tertiary\">\n <ChevronLeftIcon flipOnRtl size=\"md\" />\n </Button>\n <Spacer />\n <Headline\n selectable={false}\n emphasis=\"faint\"\n hierarchy=\"tertiary\"\n >{`${firstYear}-${lastYear}`}</Headline>\n <Spacer />\n <Button utility hierarchy=\"tertiary\" onClick={next}>\n <ChevronRightIcon size=\"md\" />\n </Button>\n </HStack>\n <HStack gap=\"4px\">{firstRow}</HStack>\n <HStack gap=\"4px\">{secondRow}</HStack>\n <HStack gap=\"4px\">{thirdRow}</HStack>\n <HStack gap=\"4px\">{fourthRow}</HStack>\n <HStack gap=\"4px\">{fifthRow}</HStack>\n <FocusRedirect onRedirect={focus} />\n </VStack>\n );\n}\n"],"names":["DatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","disabled","date","Button","HStack","jsx","clsx","styles","BodyText","focus","useEffect","firstRow","secondRow","thirdRow","fourthRow","fifthRow","prev","next","jsxs","VStack","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","FocusRedirect"],"mappings":"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"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { jsx as L } from "react/jsx-runtime";
|
|
2
|
-
import "../../utils/click_away_listener.js";
|
|
3
|
-
import "../../utils/focus_redirect.js";
|
|
4
|
-
import "../../utils/scroll_away_listener.js";
|
|
2
|
+
import "../../utils/listeners/click_away_listener.js";
|
|
3
|
+
import "../../utils/listeners/focus_redirect.js";
|
|
4
|
+
import "../../utils/listeners/scroll_away_listener.js";
|
|
5
5
|
import _, { useRef as e } from "react";
|
|
6
6
|
import { useForkRef as j } from "../../utils/hooks/use_fork_ref.js";
|
|
7
7
|
import "../../utils/hooks/use_resize_observer.js";
|
|
8
|
-
import "../../utils/
|
|
8
|
+
import "../../utils/hooks/labelled_by_context.js";
|
|
9
|
+
import "../../utils/decorators/draggable/context.js";
|
|
9
10
|
import "clsx";
|
|
10
|
-
import "../../draggable.module-
|
|
11
|
-
import "../../utils/
|
|
12
|
-
import "../../resizable.module-
|
|
13
|
-
import "../../utils/
|
|
11
|
+
import "../../draggable.module-DFYR5n3n.js";
|
|
12
|
+
import "../../utils/decorators/resizable/context.js";
|
|
13
|
+
import "../../resizable.module-ur5FBfxo.js";
|
|
14
|
+
import "../../utils/decorators/resizable/resize_handle.js";
|
|
14
15
|
import { Input as B } from "../input/input.js";
|
|
15
|
-
const
|
|
16
|
-
const d = e(0), o = e(0), r = e(0),
|
|
16
|
+
const X = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...E }, v) {
|
|
17
|
+
const d = e(0), o = e(0), r = e(0), i = e(0), x = e(0), c = e(0), s = e(null), P = j(v, s);
|
|
17
18
|
function g(m) {
|
|
18
19
|
const t = s.current;
|
|
19
|
-
t != null && (d.current = t.value.length, o.current = t.selectionStart == null ? 0 : t.selectionStart, r.current = t.selectionEnd == null ? 0 : t.selectionEnd, c.current = r.current,
|
|
20
|
+
t != null && (d.current = t.value.length, o.current = t.selectionStart == null ? 0 : t.selectionStart, r.current = t.selectionEnd == null ? 0 : t.selectionEnd, c.current = r.current, i.current = Math.min(
|
|
20
21
|
o.current,
|
|
21
22
|
r.current
|
|
22
23
|
), x.current = Math.max(
|
|
@@ -28,10 +29,10 @@ const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...
|
|
|
28
29
|
const t = s.current;
|
|
29
30
|
if (t == null)
|
|
30
31
|
return;
|
|
31
|
-
const M = t.value.length, k = o.current !== r.current, R = t.selectionStart == null ? 0 : t.selectionStart, f = t.selectionEnd == null ? 0 : t.selectionEnd, w = Math.min(R, f), h = Math.max(R, f),
|
|
32
|
+
const M = t.value.length, k = o.current !== r.current, R = t.selectionStart == null ? 0 : t.selectionStart, f = t.selectionEnd == null ? 0 : t.selectionEnd, w = Math.min(R, f), h = Math.max(R, f), u = f;
|
|
32
33
|
if (k) {
|
|
33
34
|
const S = t.value.slice(
|
|
34
|
-
|
|
35
|
+
i.current,
|
|
35
36
|
h
|
|
36
37
|
), l = {
|
|
37
38
|
start: o.current,
|
|
@@ -42,28 +43,28 @@ const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...
|
|
|
42
43
|
"",
|
|
43
44
|
l,
|
|
44
45
|
c.current,
|
|
45
|
-
|
|
46
|
+
u,
|
|
46
47
|
t
|
|
47
48
|
);
|
|
48
49
|
} else if (d.current > M)
|
|
49
|
-
|
|
50
|
+
i.current === w ? n && n(
|
|
50
51
|
"",
|
|
51
52
|
"Delete",
|
|
52
53
|
null,
|
|
53
54
|
c.current,
|
|
54
|
-
|
|
55
|
+
u,
|
|
55
56
|
t
|
|
56
57
|
) : n && n(
|
|
57
58
|
"",
|
|
58
59
|
"Backspace",
|
|
59
60
|
null,
|
|
60
61
|
c.current,
|
|
61
|
-
|
|
62
|
+
u,
|
|
62
63
|
t
|
|
63
64
|
);
|
|
64
65
|
else {
|
|
65
66
|
const l = t.value.slice(
|
|
66
|
-
|
|
67
|
+
i.current,
|
|
67
68
|
h
|
|
68
69
|
);
|
|
69
70
|
n && n(
|
|
@@ -71,7 +72,7 @@ const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...
|
|
|
71
72
|
"",
|
|
72
73
|
null,
|
|
73
74
|
c.current,
|
|
74
|
-
|
|
75
|
+
u,
|
|
75
76
|
t
|
|
76
77
|
);
|
|
77
78
|
}
|
|
@@ -80,6 +81,6 @@ const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...
|
|
|
80
81
|
return /* @__PURE__ */ L(B, { ref: P, onKeyDown: g, onInput: I, ...E });
|
|
81
82
|
});
|
|
82
83
|
export {
|
|
83
|
-
|
|
84
|
+
X as KeyCaptureInput
|
|
84
85
|
};
|
|
85
86
|
//# sourceMappingURL=key_capture_input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"key_capture_input.js","sources":["../../../src/inputs/mask_input/key_capture_input.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React from 'react';\nimport { useRef } from 'react';\nimport { Input, InputProps } from '../input/input.js';\n\nexport interface Range {\n start: number;\n end: number;\n}\n\nexport interface KeyCaptureInputProps extends InputProps {\n onKeyCapture?: (\n input: string,\n key: string,\n selection: Range | null,\n cursorPosition: number,\n finalCursorPosition: number,\n inputElement: HTMLInputElement\n ) => void;\n}\n\nexport const KeyCaptureInput = React.forwardRef(function InputCapture(\n { onKeyCapture, onKeyDown, onInput, ...props }: KeyCaptureInputProps,\n ref\n) {\n const valueLengthRef = useRef(0);\n const selectionStartRef = useRef(0);\n const selectionEndRef = useRef(0);\n const minCursorPositionRef = useRef(0);\n const maxCursorPositionRef = useRef(0);\n const cursorPositionRef = useRef(0);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, inputRef);\n\n function handleKeydown(event: React.KeyboardEvent<HTMLInputElement>) {\n const inputElement = inputRef.current;\n\n if (inputElement == null) {\n return;\n }\n\n valueLengthRef.current = inputElement.value.length;\n selectionStartRef.current =\n inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n selectionEndRef.current =\n inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n cursorPositionRef.current = selectionEndRef.current;\n minCursorPositionRef.current = Math.min(\n selectionStartRef.current,\n selectionEndRef.current\n );\n\n maxCursorPositionRef.current = Math.max(\n selectionStartRef.current,\n selectionEndRef.current\n );\n\n onKeyDown && onKeyDown(event);\n }\n\n function handleInput(event: React.ChangeEvent<HTMLInputElement>) {\n const inputElement = inputRef.current;\n\n if (inputElement == null) {\n return;\n }\n\n const valueLength = inputElement.value.length;\n const hadSelection = selectionStartRef.current !== selectionEndRef.current;\n const inputSelectionStart =\n inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n const inputSelectionEnd =\n inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n const minCursorPosition = Math.min(inputSelectionStart, inputSelectionEnd);\n const maxCursorPosition = Math.max(inputSelectionStart, inputSelectionEnd);\n const cursorPosition = inputSelectionEnd;\n\n if (hadSelection) {\n const input = inputElement.value.slice(\n minCursorPositionRef.current,\n maxCursorPosition\n );\n const selection = {\n start: selectionStartRef.current,\n end: selectionEndRef.current,\n };\n onKeyCapture &&\n onKeyCapture(\n input,\n '',\n selection,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n } else {\n const collapsed = valueLengthRef.current > valueLength;\n if (collapsed) {\n const deleted = minCursorPositionRef.current === minCursorPosition;\n\n if (deleted) {\n onKeyCapture &&\n onKeyCapture(\n '',\n 'Delete',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n } else {\n onKeyCapture &&\n onKeyCapture(\n '',\n 'Backspace',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n }\n } else {\n const input = inputElement.value.slice(\n minCursorPositionRef.current,\n maxCursorPosition\n );\n onKeyCapture &&\n onKeyCapture(\n input,\n '',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n }\n }\n onInput && onInput(event);\n }\n\n return (\n <Input ref={forkedRef} onKeyDown={handleKeydown} onInput={handleInput} {...props} />\n );\n});\n"],"names":["KeyCaptureInput","React","onKeyCapture","onKeyDown","onInput","props","ref","valueLengthRef","useRef","selectionStartRef","selectionEndRef","minCursorPositionRef","maxCursorPositionRef","cursorPositionRef","inputRef","forkedRef","useForkRef","handleKeydown","event","inputElement","handleInput","valueLength","hadSelection","inputSelectionStart","inputSelectionEnd","minCursorPosition","maxCursorPosition","cursorPosition","input","selection","jsx","Input"],"mappings":"
|
|
1
|
+
{"version":3,"file":"key_capture_input.js","sources":["../../../src/inputs/mask_input/key_capture_input.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React from 'react';\nimport { useRef } from 'react';\nimport { Input, InputProps } from '../input/input.js';\n\nexport interface Range {\n start: number;\n end: number;\n}\n\nexport interface KeyCaptureInputProps extends InputProps {\n onKeyCapture?: (\n input: string,\n key: string,\n selection: Range | null,\n cursorPosition: number,\n finalCursorPosition: number,\n inputElement: HTMLInputElement\n ) => void;\n}\n\nexport const KeyCaptureInput = React.forwardRef(function InputCapture(\n { onKeyCapture, onKeyDown, onInput, ...props }: KeyCaptureInputProps,\n ref\n) {\n const valueLengthRef = useRef(0);\n const selectionStartRef = useRef(0);\n const selectionEndRef = useRef(0);\n const minCursorPositionRef = useRef(0);\n const maxCursorPositionRef = useRef(0);\n const cursorPositionRef = useRef(0);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, inputRef);\n\n function handleKeydown(event: React.KeyboardEvent<HTMLInputElement>) {\n const inputElement = inputRef.current;\n\n if (inputElement == null) {\n return;\n }\n\n valueLengthRef.current = inputElement.value.length;\n selectionStartRef.current =\n inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n selectionEndRef.current =\n inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n cursorPositionRef.current = selectionEndRef.current;\n minCursorPositionRef.current = Math.min(\n selectionStartRef.current,\n selectionEndRef.current\n );\n\n maxCursorPositionRef.current = Math.max(\n selectionStartRef.current,\n selectionEndRef.current\n );\n\n onKeyDown && onKeyDown(event);\n }\n\n function handleInput(event: React.ChangeEvent<HTMLInputElement>) {\n const inputElement = inputRef.current;\n\n if (inputElement == null) {\n return;\n }\n\n const valueLength = inputElement.value.length;\n const hadSelection = selectionStartRef.current !== selectionEndRef.current;\n const inputSelectionStart =\n inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n const inputSelectionEnd =\n inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n const minCursorPosition = Math.min(inputSelectionStart, inputSelectionEnd);\n const maxCursorPosition = Math.max(inputSelectionStart, inputSelectionEnd);\n const cursorPosition = inputSelectionEnd;\n\n if (hadSelection) {\n const input = inputElement.value.slice(\n minCursorPositionRef.current,\n maxCursorPosition\n );\n const selection = {\n start: selectionStartRef.current,\n end: selectionEndRef.current,\n };\n onKeyCapture &&\n onKeyCapture(\n input,\n '',\n selection,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n } else {\n const collapsed = valueLengthRef.current > valueLength;\n if (collapsed) {\n const deleted = minCursorPositionRef.current === minCursorPosition;\n\n if (deleted) {\n onKeyCapture &&\n onKeyCapture(\n '',\n 'Delete',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n } else {\n onKeyCapture &&\n onKeyCapture(\n '',\n 'Backspace',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n }\n } else {\n const input = inputElement.value.slice(\n minCursorPositionRef.current,\n maxCursorPosition\n );\n onKeyCapture &&\n onKeyCapture(\n input,\n '',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n }\n }\n onInput && onInput(event);\n }\n\n return (\n <Input ref={forkedRef} onKeyDown={handleKeydown} onInput={handleInput} {...props} />\n );\n});\n"],"names":["KeyCaptureInput","React","onKeyCapture","onKeyDown","onInput","props","ref","valueLengthRef","useRef","selectionStartRef","selectionEndRef","minCursorPositionRef","maxCursorPositionRef","cursorPositionRef","inputRef","forkedRef","useForkRef","handleKeydown","event","inputElement","handleInput","valueLength","hadSelection","inputSelectionStart","inputSelectionEnd","minCursorPosition","maxCursorPosition","cursorPosition","input","selection","jsx","Input"],"mappings":";;;;;;;;;;;;;;;AAqBO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,cAAAC,GAAc,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvCC,GACA;AACA,QAAMC,IAAiBC,EAAO,CAAC,GACzBC,IAAoBD,EAAO,CAAC,GAC5BE,IAAkBF,EAAO,CAAC,GAC1BG,IAAuBH,EAAO,CAAC,GAC/BI,IAAuBJ,EAAO,CAAC,GAC/BK,IAAoBL,EAAO,CAAC,GAC5BM,IAAWN,EAAgC,IAAI,GAC/CO,IAAYC,EAAWV,GAAKQ,CAAQ;AAE1C,WAASG,EAAcC,GAA8C;AACnE,UAAMC,IAAeL,EAAS;AAE9B,IAAIK,KAAgB,SAIpBZ,EAAe,UAAUY,EAAa,MAAM,QAC5CV,EAAkB,UAChBU,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACzDT,EAAgB,UACdS,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACvDN,EAAkB,UAAUH,EAAgB,SAC5CC,EAAqB,UAAU,KAAK;AAAA,MAClCF,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBE,EAAqB,UAAU,KAAK;AAAA,MAClCH,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBP,KAAaA,EAAUe,CAAK;AAAA,EAC9B;AAEA,WAASE,EAAYF,GAA4C;AAC/D,UAAMC,IAAeL,EAAS;AAE9B,QAAIK,KAAgB;AAClB;AAGF,UAAME,IAAcF,EAAa,MAAM,QACjCG,IAAeb,EAAkB,YAAYC,EAAgB,SAC7Da,IACJJ,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACnDK,IACJL,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACjDM,IAAoB,KAAK,IAAIF,GAAqBC,CAAiB,GACnEE,IAAoB,KAAK,IAAIH,GAAqBC,CAAiB,GACnEG,IAAiBH;AAEvB,QAAIF,GAAc;AAChB,YAAMM,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA,GAEIG,IAAY;AAAA,QAChB,OAAOpB,EAAkB;AAAA,QACzB,KAAKC,EAAgB;AAAA,MAAA;AAEvB,MAAAR,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACAC;AAAA,QACAhB,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN,WACoBZ,EAAe,UAAUc;AAIzC,MAFgBV,EAAqB,YAAYc,IAG/CvB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA,IAGJjB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,SAGD;AACL,YAAMS,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA;AAEF,MAAAxB,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACA;AAAA,QACAf,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN;AAEF,IAAAf,KAAWA,EAAQc,CAAK;AAAA,EAC1B;AAEA,SACE,gBAAAY,EAACC,KAAM,KAAKhB,GAAW,WAAWE,GAAe,SAASG,GAAc,GAAGf,EAAA,CAAO;AAEtF,CAAC;"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { jsx as V } from "react/jsx-runtime";
|
|
2
2
|
import { useSignalValue as B } from "@tcn/state";
|
|
3
|
-
import "../../utils/click_away_listener.js";
|
|
4
|
-
import "../../utils/focus_redirect.js";
|
|
5
|
-
import "../../utils/scroll_away_listener.js";
|
|
6
|
-
import A, { useRef as I, useState as j, useLayoutEffect as
|
|
3
|
+
import "../../utils/listeners/click_away_listener.js";
|
|
4
|
+
import "../../utils/listeners/focus_redirect.js";
|
|
5
|
+
import "../../utils/listeners/scroll_away_listener.js";
|
|
6
|
+
import A, { useRef as I, useState as j, useLayoutEffect as m } from "react";
|
|
7
7
|
import { useForkRef as K } from "../../utils/hooks/use_fork_ref.js";
|
|
8
8
|
import "../../utils/hooks/use_resize_observer.js";
|
|
9
|
-
import "../../utils/
|
|
9
|
+
import "../../utils/hooks/labelled_by_context.js";
|
|
10
|
+
import "../../utils/decorators/draggable/context.js";
|
|
10
11
|
import "clsx";
|
|
11
|
-
import "../../draggable.module-
|
|
12
|
-
import "../../utils/
|
|
13
|
-
import "../../resizable.module-
|
|
14
|
-
import "../../utils/
|
|
12
|
+
import "../../draggable.module-DFYR5n3n.js";
|
|
13
|
+
import "../../utils/decorators/resizable/context.js";
|
|
14
|
+
import "../../resizable.module-ur5FBfxo.js";
|
|
15
|
+
import "../../utils/decorators/resizable/resize_handle.js";
|
|
15
16
|
import { KeyCaptureInput as _ } from "./key_capture_input.js";
|
|
16
17
|
import { MaskPresenter as F } from "./mask_presenter.js";
|
|
17
|
-
const
|
|
18
|
+
const se = A.forwardRef(
|
|
18
19
|
function({
|
|
19
|
-
value:
|
|
20
|
+
value: f = "",
|
|
20
21
|
onChange: d,
|
|
21
22
|
mask: c,
|
|
22
23
|
onPaste: g,
|
|
@@ -40,14 +41,14 @@ const oe = A.forwardRef(
|
|
|
40
41
|
const a = e.valueBroadcast.get(), u = e.cursorPositionBroadcast.get();
|
|
41
42
|
r.value = a, r.setSelectionRange(u, u), d && d(a, e.isComplete());
|
|
42
43
|
}
|
|
43
|
-
|
|
44
|
+
m(() => {
|
|
44
45
|
const t = Array.isArray(c) ? c : [c], s = t.map((o) => o.mask).join("|"), n = e.maskConfigsBroadcast.get().map((o) => o.mask).join("|");
|
|
45
46
|
s !== n && e.setMaskConfigs(t);
|
|
46
|
-
}, [e, c]),
|
|
47
|
-
e.setValue(
|
|
47
|
+
}, [e, c]), m(() => {
|
|
48
|
+
e.setValue(f);
|
|
48
49
|
const t = e.selectionBroadcast.get(), s = e.cursorPositionBroadcast.get(), n = p.current;
|
|
49
50
|
n != null && (t != null ? n.setSelectionRange(t.start, t.end) : n.setSelectionRange(s, s));
|
|
50
|
-
}, [e,
|
|
51
|
+
}, [e, f]);
|
|
51
52
|
function M(t) {
|
|
52
53
|
const s = t.currentTarget, n = s.selectionStart, o = s.selectionEnd;
|
|
53
54
|
n != null && o != null && n !== o ? e.setSelection(n, o) : e.moveCursorTo(n || 0), e.insertText(w(t.clipboardData.getData("text/plain")));
|
|
@@ -74,7 +75,7 @@ const oe = A.forwardRef(
|
|
|
74
75
|
}
|
|
75
76
|
t.preventDefault(), v && v(t);
|
|
76
77
|
}
|
|
77
|
-
return
|
|
78
|
+
return m(() => {
|
|
78
79
|
let t = "unknown";
|
|
79
80
|
if (p.current == null)
|
|
80
81
|
return;
|
|
@@ -123,6 +124,6 @@ const oe = A.forwardRef(
|
|
|
123
124
|
}
|
|
124
125
|
);
|
|
125
126
|
export {
|
|
126
|
-
|
|
127
|
+
se as MaskInput
|
|
127
128
|
};
|
|
128
129
|
//# sourceMappingURL=mask_input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mask_input.js","sources":["../../../src/inputs/mask_input/mask_input.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { useForkRef } from '../../utils/index.js';\nimport React, { useRef, useState, useLayoutEffect } from 'react';\nimport { InputProps } from '../input/input.js';\nimport { KeyCaptureInput, Range } from './key_capture_input.js';\nimport { MaskConfig } from './mask_config.js';\nimport { MaskPresenter } from './mask_presenter.js';\n\nexport interface MaskInputProps extends Omit<InputProps, 'onChange' | 'placeholder'> {\n value?: string;\n mask: MaskConfig | MaskConfig[];\n onChange?: (value: string, isComplete: boolean) => void;\n preparePasteValue?: (value: string) => string;\n prepareCutValue?: (value: string) => string;\n prepareCopyValue?: (value: string) => string;\n}\n\nexport const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(\n function MaskInput(\n {\n value = '',\n onChange,\n mask,\n onPaste,\n onCut,\n onCopy,\n preparePasteValue = s => s,\n prepareCutValue = s => s,\n prepareCopyValue = s => s,\n ...props\n }: MaskInputProps,\n ref\n ) {\n // Fix copy on input, its not working\n const masks = Array.isArray(mask) ? mask : [mask];\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, inputRef);\n\n const [presenter] = useState(() => {\n const presenter = new MaskPresenter(masks);\n return presenter;\n });\n\n const internalValue = useSignalValue(presenter.valueBroadcast);\n useSignalValue(presenter.maskConfigsBroadcast);\n\n function handleInput(\n input: string,\n key: string,\n selection: Range | null,\n cursorPosition: number,\n _: number,\n inputElement: HTMLInputElement\n ) {\n if (selection != null) {\n presenter.setSelection(selection.start, selection.end);\n } else {\n presenter.forceMoveCursorTo(cursorPosition);\n }\n\n switch (key) {\n case 'Delete': {\n presenter.delete();\n }\n case 'Backspace': {\n presenter.backspace();\n }\n }\n\n presenter.insertText(input);\n\n const value = presenter.valueBroadcast.get();\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n inputElement.value = value;\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n onChange && onChange(value, presenter.isComplete());\n }\n\n useLayoutEffect(() => {\n const masks = Array.isArray(mask) ? mask : [mask];\n\n const oldMaskString = masks.map(m => m.mask).join('|');\n const newMaskString = presenter.maskConfigsBroadcast\n .get()\n .map(m => m.mask)\n .join('|');\n\n if (oldMaskString !== newMaskString) {\n presenter.setMaskConfigs(masks);\n }\n }, [presenter, mask]);\n\n useLayoutEffect(() => {\n presenter.setValue(value);\n const selection = presenter.selectionBroadcast.get();\n const cursorPosition = presenter.cursorPositionBroadcast.get();\n\n const input = inputRef.current;\n\n if (input != null) {\n const hasSelection = selection != null;\n\n if (hasSelection) {\n input.setSelectionRange(selection.start, selection.end);\n } else {\n input.setSelectionRange(cursorPosition, cursorPosition);\n }\n }\n }, [presenter, value]);\n\n function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n const inputElement = event.currentTarget;\n const start = inputElement.selectionStart;\n const end = inputElement.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n } else {\n presenter.moveCursorTo(start || 0);\n }\n\n presenter.insertText(preparePasteValue(event.clipboardData.getData('text/plain')));\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n inputElement.value = presenter.valueBroadcast.get();\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n event.preventDefault();\n onPaste && onPaste(event);\n onChange && onChange(presenter.valueBroadcast.get(), presenter.isComplete());\n }\n\n function handleCut(event: React.ClipboardEvent<HTMLInputElement>) {\n const inputElement = event.currentTarget;\n const start = inputElement.selectionStart;\n const end = inputElement.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n const value = prepareCutValue(presenter.getSelectedValue());\n presenter.clearRange(start, end);\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n event.clipboardData.setData('text/plain', value);\n inputElement.value = presenter.valueBroadcast.get();\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n }\n\n event.preventDefault();\n onCut && onCut(event);\n }\n\n function handleCopy(event: React.ClipboardEvent<HTMLInputElement>) {\n const input = event.currentTarget;\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n const value = prepareCopyValue(presenter.getSelectedValue());\n\n event.clipboardData.setData('text/plain', value);\n }\n\n event.preventDefault();\n onCopy && onCopy(event);\n }\n\n useLayoutEffect(() => {\n let mode = 'unknown';\n\n const input = inputRef.current;\n\n if (input == null) {\n return;\n }\n\n function handleMouseDown() {\n mode = 'mouse';\n }\n\n function handleKeyDown() {\n mode = 'keyboard';\n }\n\n function handleSelection() {\n const input = inputRef.current;\n\n if (input == null) {\n return;\n }\n\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n if (input !== document.activeElement || mode === 'keyboard') {\n mode = 'unknown';\n return;\n }\n\n const value = presenter.filledValueBroadcast.get();\n\n if (hasSelection && value.length === 0) {\n presenter.moveCursorTo(0);\n input.setSelectionRange(0, 0);\n mode = 'unknown';\n return;\n }\n\n if (!hasSelection) {\n presenter.moveCursorTo(end || 0);\n const cursorPosition = presenter.cursorPositionBroadcast.get();\n input.setSelectionRange(cursorPosition, cursorPosition);\n }\n\n mode = 'unknown';\n }\n\n document.addEventListener('selectionchange', handleSelection);\n document.addEventListener('mousedown', handleMouseDown);\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('selectionchange', handleSelection);\n document.removeEventListener('mousedown', handleMouseDown);\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [presenter]);\n\n return (\n <KeyCaptureInput\n value={internalValue}\n ref={forkedRef}\n onCopy={handleCopy}\n onPaste={handlePaste}\n onCut={handleCut}\n onKeyCapture={handleInput}\n {...props}\n />\n );\n }\n);\n"],"names":["MaskInput","React","value","onChange","mask","onPaste","onCut","onCopy","preparePasteValue","s","prepareCutValue","prepareCopyValue","props","ref","masks","inputRef","useRef","forkedRef","useForkRef","presenter","useState","MaskPresenter","internalValue","useSignalValue","handleInput","input","key","selection","cursorPosition","_","inputElement","resolvedCursorPosition","useLayoutEffect","oldMaskString","m","newMaskString","handlePaste","event","start","end","handleCut","handleCopy","mode","handleMouseDown","handleKeyDown","handleSelection","hasSelection","jsx","KeyCaptureInput"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mask_input.js","sources":["../../../src/inputs/mask_input/mask_input.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { useForkRef } from '../../utils/index.js';\nimport React, { useRef, useState, useLayoutEffect } from 'react';\nimport { InputProps } from '../input/input.js';\nimport { KeyCaptureInput, Range } from './key_capture_input.js';\nimport { MaskConfig } from './mask_config.js';\nimport { MaskPresenter } from './mask_presenter.js';\n\nexport interface MaskInputProps extends Omit<InputProps, 'onChange' | 'placeholder'> {\n value?: string;\n mask: MaskConfig | MaskConfig[];\n onChange?: (value: string, isComplete: boolean) => void;\n preparePasteValue?: (value: string) => string;\n prepareCutValue?: (value: string) => string;\n prepareCopyValue?: (value: string) => string;\n}\n\nexport const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(\n function MaskInput(\n {\n value = '',\n onChange,\n mask,\n onPaste,\n onCut,\n onCopy,\n preparePasteValue = s => s,\n prepareCutValue = s => s,\n prepareCopyValue = s => s,\n ...props\n }: MaskInputProps,\n ref\n ) {\n // Fix copy on input, its not working\n const masks = Array.isArray(mask) ? mask : [mask];\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, inputRef);\n\n const [presenter] = useState(() => {\n const presenter = new MaskPresenter(masks);\n return presenter;\n });\n\n const internalValue = useSignalValue(presenter.valueBroadcast);\n useSignalValue(presenter.maskConfigsBroadcast);\n\n function handleInput(\n input: string,\n key: string,\n selection: Range | null,\n cursorPosition: number,\n _: number,\n inputElement: HTMLInputElement\n ) {\n if (selection != null) {\n presenter.setSelection(selection.start, selection.end);\n } else {\n presenter.forceMoveCursorTo(cursorPosition);\n }\n\n switch (key) {\n case 'Delete': {\n presenter.delete();\n }\n case 'Backspace': {\n presenter.backspace();\n }\n }\n\n presenter.insertText(input);\n\n const value = presenter.valueBroadcast.get();\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n inputElement.value = value;\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n onChange && onChange(value, presenter.isComplete());\n }\n\n useLayoutEffect(() => {\n const masks = Array.isArray(mask) ? mask : [mask];\n\n const oldMaskString = masks.map(m => m.mask).join('|');\n const newMaskString = presenter.maskConfigsBroadcast\n .get()\n .map(m => m.mask)\n .join('|');\n\n if (oldMaskString !== newMaskString) {\n presenter.setMaskConfigs(masks);\n }\n }, [presenter, mask]);\n\n useLayoutEffect(() => {\n presenter.setValue(value);\n const selection = presenter.selectionBroadcast.get();\n const cursorPosition = presenter.cursorPositionBroadcast.get();\n\n const input = inputRef.current;\n\n if (input != null) {\n const hasSelection = selection != null;\n\n if (hasSelection) {\n input.setSelectionRange(selection.start, selection.end);\n } else {\n input.setSelectionRange(cursorPosition, cursorPosition);\n }\n }\n }, [presenter, value]);\n\n function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n const inputElement = event.currentTarget;\n const start = inputElement.selectionStart;\n const end = inputElement.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n } else {\n presenter.moveCursorTo(start || 0);\n }\n\n presenter.insertText(preparePasteValue(event.clipboardData.getData('text/plain')));\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n inputElement.value = presenter.valueBroadcast.get();\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n event.preventDefault();\n onPaste && onPaste(event);\n onChange && onChange(presenter.valueBroadcast.get(), presenter.isComplete());\n }\n\n function handleCut(event: React.ClipboardEvent<HTMLInputElement>) {\n const inputElement = event.currentTarget;\n const start = inputElement.selectionStart;\n const end = inputElement.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n const value = prepareCutValue(presenter.getSelectedValue());\n presenter.clearRange(start, end);\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n event.clipboardData.setData('text/plain', value);\n inputElement.value = presenter.valueBroadcast.get();\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n }\n\n event.preventDefault();\n onCut && onCut(event);\n }\n\n function handleCopy(event: React.ClipboardEvent<HTMLInputElement>) {\n const input = event.currentTarget;\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n const value = prepareCopyValue(presenter.getSelectedValue());\n\n event.clipboardData.setData('text/plain', value);\n }\n\n event.preventDefault();\n onCopy && onCopy(event);\n }\n\n useLayoutEffect(() => {\n let mode = 'unknown';\n\n const input = inputRef.current;\n\n if (input == null) {\n return;\n }\n\n function handleMouseDown() {\n mode = 'mouse';\n }\n\n function handleKeyDown() {\n mode = 'keyboard';\n }\n\n function handleSelection() {\n const input = inputRef.current;\n\n if (input == null) {\n return;\n }\n\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n if (input !== document.activeElement || mode === 'keyboard') {\n mode = 'unknown';\n return;\n }\n\n const value = presenter.filledValueBroadcast.get();\n\n if (hasSelection && value.length === 0) {\n presenter.moveCursorTo(0);\n input.setSelectionRange(0, 0);\n mode = 'unknown';\n return;\n }\n\n if (!hasSelection) {\n presenter.moveCursorTo(end || 0);\n const cursorPosition = presenter.cursorPositionBroadcast.get();\n input.setSelectionRange(cursorPosition, cursorPosition);\n }\n\n mode = 'unknown';\n }\n\n document.addEventListener('selectionchange', handleSelection);\n document.addEventListener('mousedown', handleMouseDown);\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('selectionchange', handleSelection);\n document.removeEventListener('mousedown', handleMouseDown);\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [presenter]);\n\n return (\n <KeyCaptureInput\n value={internalValue}\n ref={forkedRef}\n onCopy={handleCopy}\n onPaste={handlePaste}\n onCut={handleCut}\n onKeyCapture={handleInput}\n {...props}\n />\n );\n }\n);\n"],"names":["MaskInput","React","value","onChange","mask","onPaste","onCut","onCopy","preparePasteValue","s","prepareCutValue","prepareCopyValue","props","ref","masks","inputRef","useRef","forkedRef","useForkRef","presenter","useState","MaskPresenter","internalValue","useSignalValue","handleInput","input","key","selection","cursorPosition","_","inputElement","resolvedCursorPosition","useLayoutEffect","oldMaskString","m","newMaskString","handlePaste","event","start","end","handleCut","handleCopy","mode","handleMouseDown","handleKeyDown","handleSelection","hasSelection","jsx","KeyCaptureInput"],"mappings":"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"}
|
|
@@ -6,18 +6,19 @@ import { MultiselectInlineValues as E } from "./multiselect_inline_values.js";
|
|
|
6
6
|
import { MultiselectValues as N } from "./multiselect_values.js";
|
|
7
7
|
import { makeAvailableOptions as g, makeValuesAsOptions as I } from "../options/utils.js";
|
|
8
8
|
import { Select as x } from "../select/select.js";
|
|
9
|
-
import "../../utils/click_away_listener.js";
|
|
10
|
-
import "../../utils/focus_redirect.js";
|
|
11
|
-
import "../../utils/scroll_away_listener.js";
|
|
9
|
+
import "../../utils/listeners/click_away_listener.js";
|
|
10
|
+
import "../../utils/listeners/focus_redirect.js";
|
|
11
|
+
import "../../utils/listeners/scroll_away_listener.js";
|
|
12
12
|
import { useForkRef as L } from "../../utils/hooks/use_fork_ref.js";
|
|
13
13
|
import "../../utils/hooks/use_resize_observer.js";
|
|
14
|
-
import "../../utils/
|
|
14
|
+
import "../../utils/hooks/labelled_by_context.js";
|
|
15
|
+
import "../../utils/decorators/draggable/context.js";
|
|
15
16
|
import $ from "clsx";
|
|
16
|
-
import "../../draggable.module-
|
|
17
|
-
import "../../utils/
|
|
18
|
-
import "../../resizable.module-
|
|
19
|
-
import "../../utils/
|
|
20
|
-
import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z },
|
|
17
|
+
import "../../draggable.module-DFYR5n3n.js";
|
|
18
|
+
import "../../utils/decorators/resizable/context.js";
|
|
19
|
+
import "../../resizable.module-ur5FBfxo.js";
|
|
20
|
+
import "../../utils/decorators/resizable/resize_handle.js";
|
|
21
|
+
import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, se = A.forwardRef(function({
|
|
21
22
|
value: e = [],
|
|
22
23
|
disabled: l = !1,
|
|
23
24
|
children: S,
|
|
@@ -106,6 +107,6 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
|
|
|
106
107
|
);
|
|
107
108
|
});
|
|
108
109
|
export {
|
|
109
|
-
|
|
110
|
+
se as Multiselect
|
|
110
111
|
};
|
|
111
112
|
//# sourceMappingURL=multiselect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\nimport clsx from 'clsx';\n\nexport interface MultiselectProps\n extends Omit<\n SelectProps,\n 'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n > {\n children:\n | React.ReactElement<HTMLOptionElement>\n | React.ReactElement<HTMLOptionElement>[];\n onChange?: (values: string[]) => void;\n value?: string[];\n disabled?: boolean;\n inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n {\n value: values = [],\n disabled = false,\n children,\n className,\n onChange,\n inline = false,\n width = '100%',\n minWidth,\n maxWidth,\n ...props\n }: MultiselectProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n const selectRef = useForkRef(ref, internalSelectRef);\n const lastValue = values[values.length - 1] || null;\n const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n const childrenArray = React.Children.toArray(\n children\n ) as React.ReactElement<OptionProps>[];\n\n const availableOptions = makeAvailableOptions(childrenArray, values);\n const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n useLayoutEffect(() => {\n const valuesElement = valuesContainerRef.current;\n const shouldFocus = lastValue != null && valuesElement != null;\n if (shouldFocus) {\n (\n valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n )?.focus();\n\n // Safari doesn't respect the first focus if its called too quickly\n requestAnimationFrame(() => {\n internalSelectRef.current && internalSelectRef.current.focus();\n });\n }\n }, [lastValue]);\n\n function addValue(value: string) {\n if (!values.includes(value)) {\n onChange && onChange([...values, value]);\n }\n }\n\n function removeValue(option: React.ReactElement<OptionProps>) {\n const index = values.indexOf(option.props.value);\n\n if (index > -1) {\n const newValues = values.filter(v => v !== option.props.value);\n onChange && onChange(newValues);\n }\n }\n\n if (inline) {\n return (\n <>\n <Select\n ref={selectRef}\n disabled={disabled}\n onChange={addValue}\n width=\"auto\"\n value={null}\n placeholder=\"Select to Add\"\n {...props}\n >\n {availableOptions}\n </Select>\n <Spacer width=\"8px\" />\n <MultiselectInlineValues\n values={valuesAsOptions}\n onRemove={removeValue}\n disabled={disabled}\n />\n </>\n );\n }\n\n return (\n <VStack\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n className={clsx(styles['multiselect-container'], 'tcn-multiselect-container')}\n >\n <Select\n ref={ref}\n disabled={disabled}\n onChange={addValue}\n value={null}\n placeholder=\"Select to Add\"\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n {...props}\n >\n {availableOptions}\n </Select>\n <MultiselectValues\n disabled={disabled}\n values={valuesAsOptions}\n onRemove={removeValue}\n />\n </VStack>\n );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","clsx","styles","MultiselectValues"],"mappings":"
|
|
1
|
+
{"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\nimport clsx from 'clsx';\n\nexport interface MultiselectProps\n extends Omit<\n SelectProps,\n 'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n > {\n children:\n | React.ReactElement<HTMLOptionElement>\n | React.ReactElement<HTMLOptionElement>[];\n onChange?: (values: string[]) => void;\n value?: string[];\n disabled?: boolean;\n inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n {\n value: values = [],\n disabled = false,\n children,\n className,\n onChange,\n inline = false,\n width = '100%',\n minWidth,\n maxWidth,\n ...props\n }: MultiselectProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n const selectRef = useForkRef(ref, internalSelectRef);\n const lastValue = values[values.length - 1] || null;\n const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n const childrenArray = React.Children.toArray(\n children\n ) as React.ReactElement<OptionProps>[];\n\n const availableOptions = makeAvailableOptions(childrenArray, values);\n const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n useLayoutEffect(() => {\n const valuesElement = valuesContainerRef.current;\n const shouldFocus = lastValue != null && valuesElement != null;\n if (shouldFocus) {\n (\n valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n )?.focus();\n\n // Safari doesn't respect the first focus if its called too quickly\n requestAnimationFrame(() => {\n internalSelectRef.current && internalSelectRef.current.focus();\n });\n }\n }, [lastValue]);\n\n function addValue(value: string) {\n if (!values.includes(value)) {\n onChange && onChange([...values, value]);\n }\n }\n\n function removeValue(option: React.ReactElement<OptionProps>) {\n const index = values.indexOf(option.props.value);\n\n if (index > -1) {\n const newValues = values.filter(v => v !== option.props.value);\n onChange && onChange(newValues);\n }\n }\n\n if (inline) {\n return (\n <>\n <Select\n ref={selectRef}\n disabled={disabled}\n onChange={addValue}\n width=\"auto\"\n value={null}\n placeholder=\"Select to Add\"\n {...props}\n >\n {availableOptions}\n </Select>\n <Spacer width=\"8px\" />\n <MultiselectInlineValues\n values={valuesAsOptions}\n onRemove={removeValue}\n disabled={disabled}\n />\n </>\n );\n }\n\n return (\n <VStack\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n className={clsx(styles['multiselect-container'], 'tcn-multiselect-container')}\n >\n <Select\n ref={ref}\n disabled={disabled}\n onChange={addValue}\n value={null}\n placeholder=\"Select to Add\"\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n {...props}\n >\n {availableOptions}\n </Select>\n <MultiselectValues\n disabled={disabled}\n values={valuesAsOptions}\n onRemove={removeValue}\n />\n </VStack>\n );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","clsx","styles","MultiselectValues"],"mappings":";;;;;;;;;;;;;;;;;;;;gFA0BaA,KAAcC,EAAM,WAAW,SAC1C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC,EAAiC,IAAI,GACzDC,IAAYC,EAAWJ,GAAKC,CAAiB,GAC7CI,IAAYf,EAAOA,EAAO,SAAS,CAAC,KAAK,MACzCgB,IAAqBJ,EAA8B,IAAI,GACvDK,IAAgBlB,EAAM,SAAS;AAAA,IACnCG;AAAA,EAAA,GAGIgB,IAAmBC,EAAqBF,GAAejB,CAAM,GAC7DoB,IAAkBC,EAAoBJ,GAAejB,CAAM;AAEjE,EAAAsB,EAAgB,MAAM;AACpB,UAAMC,IAAgBP,EAAmB;AAEzC,IADoBD,KAAa,QAAQQ,KAAiB,SAGtDA,EAAc,cAAc,gBAAgBR,CAAS,IAAI,GACxD,MAAA,GAGH,sBAAsB,MAAM;AAC1B,MAAAJ,EAAkB,WAAWA,EAAkB,QAAQ,MAAA;AAAA,IACzD,CAAC;AAAA,EAEL,GAAG,CAACI,CAAS,CAAC;AAEd,WAASS,EAASC,GAAe;AAC/B,IAAKzB,EAAO,SAASyB,CAAK,KACxBrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAK,CAAC;AAAA,EAE3C;AAEA,WAASC,EAAYC,GAAyC;AAG5D,QAFc3B,EAAO,QAAQ2B,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMC,IAAY5B,EAAO,OAAO,OAAK6B,MAAMF,EAAO,MAAM,KAAK;AAC7D,MAAAvB,KAAYA,EAASwB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,SAAIvB,IAEA,gBAAAyB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,UAAAZ;AAAA,QACA,UAAUuB;AAAA,QACV,OAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAY;AAAA,QACX,GAAGf;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAc,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,IACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,UAAUM;AAAA,QACV,UAAAzB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAA6B;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,OAAA9B;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAW6B,EAAKC,EAAO,uBAAuB,GAAG,2BAA2B;AAAA,MAE5E,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAvB;AAAA,YACA,UAAAT;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAAlB;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACC,GAAGC;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,UAAAtC;AAAA,YACA,QAAQmB;AAAA,YACR,UAAUM;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,
|
|
1
|
+
{"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,kDAgC9B"}
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as p, jsx as t, Fragment as c } from "react/jsx-runtime";
|
|
2
2
|
import { s as e } from "../../multiselect_values.module-BMJOyYHe.js";
|
|
3
3
|
import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
|
|
4
4
|
import "../../actions/button/base_button/base_button.js";
|
|
5
5
|
import "../../actions/button/button_group/button_group.js";
|
|
6
|
-
import {
|
|
7
|
-
import "../../actions/button/button/button.js";
|
|
6
|
+
import { Button as h } from "../../actions/button/button/button.js";
|
|
8
7
|
import "../../actions/toggle/toggle.js";
|
|
9
8
|
import { Chip as u } from "../../tokens/chip/chip.js";
|
|
10
9
|
import "../../tokens/badge/badge.js";
|
|
11
10
|
import "../../tokens/bubble/bubble.js";
|
|
12
|
-
import
|
|
11
|
+
import o from "clsx";
|
|
13
12
|
import "../../stacks/h_stack.js";
|
|
14
13
|
import "../../value.module-DFaCouFD.js";
|
|
15
14
|
import "../../tokens/term/term.js";
|
|
16
15
|
function A({
|
|
17
|
-
values:
|
|
16
|
+
values: m,
|
|
18
17
|
disabled: s,
|
|
19
|
-
onRemove:
|
|
18
|
+
onRemove: l
|
|
20
19
|
}) {
|
|
21
|
-
const
|
|
20
|
+
const r = m.map((i, n) => /* @__PURE__ */ p(
|
|
22
21
|
u,
|
|
23
22
|
{
|
|
24
23
|
hAlign: "start",
|
|
25
|
-
className:
|
|
24
|
+
className: o(e.chip, "tcn-multiselect-chip"),
|
|
26
25
|
paddingInlineStart: "8px",
|
|
27
26
|
width: "auto",
|
|
28
27
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */
|
|
28
|
+
/* @__PURE__ */ t("span", { children: i.props.label }),
|
|
29
|
+
/* @__PURE__ */ t(
|
|
31
30
|
h,
|
|
32
31
|
{
|
|
32
|
+
utility: !0,
|
|
33
33
|
disabled: s,
|
|
34
34
|
size: "sm",
|
|
35
35
|
hierarchy: "tertiary",
|
|
36
|
-
className:
|
|
36
|
+
className: o(e.remove, "tcn-multiselect-chip-remove"),
|
|
37
37
|
onClick: () => {
|
|
38
|
-
|
|
38
|
+
l(i);
|
|
39
39
|
},
|
|
40
|
-
children: /* @__PURE__ */
|
|
40
|
+
children: /* @__PURE__ */ t(a, { size: "xs" })
|
|
41
41
|
}
|
|
42
42
|
)
|
|
43
43
|
]
|
|
44
44
|
},
|
|
45
|
-
|
|
45
|
+
n
|
|
46
46
|
));
|
|
47
|
-
return
|
|
47
|
+
return r.length === 0 ? null : /* @__PURE__ */ t(c, { children: r });
|
|
48
48
|
}
|
|
49
49
|
export {
|
|
50
50
|
A as MultiselectInlineValues
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport {
|
|
1
|
+
{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { Button } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n values,\n disabled,\n onRemove,\n}: MultiselectInlineValuesProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n width=\"auto\"\n >\n <span>{v.props.label}</span>\n <Button\n utility\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </Button>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAhBKP;AAAA,EAAA,CAmBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { jsxs as p, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { clsx as
|
|
3
|
-
import { s as
|
|
2
|
+
import { clsx as i } from "clsx";
|
|
3
|
+
import { s as r } from "../../multiselect_values.module-BMJOyYHe.js";
|
|
4
4
|
import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
|
|
5
5
|
import "../../actions/button/base_button/base_button.js";
|
|
6
6
|
import "../../actions/button/button_group/button_group.js";
|
|
7
|
-
import {
|
|
8
|
-
import "../../actions/button/button/button.js";
|
|
7
|
+
import { Button as u } from "../../actions/button/button/button.js";
|
|
9
8
|
import "../../actions/toggle/toggle.js";
|
|
10
|
-
import { Chip as
|
|
9
|
+
import { Chip as h } from "../../tokens/chip/chip.js";
|
|
11
10
|
import "../../tokens/badge/badge.js";
|
|
12
11
|
import "../../tokens/bubble/bubble.js";
|
|
13
12
|
import "../../stacks/h_stack.js";
|
|
@@ -19,24 +18,24 @@ function B({
|
|
|
19
18
|
className: l,
|
|
20
19
|
onRemove: n
|
|
21
20
|
}) {
|
|
22
|
-
const
|
|
23
|
-
|
|
21
|
+
const m = s.map((o, c) => /* @__PURE__ */ p(
|
|
22
|
+
h,
|
|
24
23
|
{
|
|
25
24
|
hAlign: "start",
|
|
26
|
-
|
|
27
|
-
className: r(i.chip, "tcn-multiselect-chip"),
|
|
25
|
+
className: i(r.chip, "tcn-multiselect-chip"),
|
|
28
26
|
paddingInlineStart: "8px",
|
|
29
27
|
children: [
|
|
30
|
-
/* @__PURE__ */ t("span", { children:
|
|
28
|
+
/* @__PURE__ */ t("span", { children: o.props.label }),
|
|
31
29
|
/* @__PURE__ */ t(
|
|
32
|
-
|
|
30
|
+
u,
|
|
33
31
|
{
|
|
32
|
+
utility: !0,
|
|
34
33
|
disabled: e,
|
|
35
34
|
size: "sm",
|
|
36
35
|
hierarchy: "tertiary",
|
|
37
|
-
className: r
|
|
36
|
+
className: i(r.remove, "tcn-multiselect-chip-remove"),
|
|
38
37
|
onClick: () => {
|
|
39
|
-
n(
|
|
38
|
+
n(o);
|
|
40
39
|
},
|
|
41
40
|
children: /* @__PURE__ */ t(a, { size: "xs" })
|
|
42
41
|
}
|
|
@@ -45,16 +44,16 @@ function B({
|
|
|
45
44
|
},
|
|
46
45
|
c
|
|
47
46
|
));
|
|
48
|
-
return
|
|
47
|
+
return m.length === 0 ? null : /* @__PURE__ */ t(
|
|
49
48
|
"div",
|
|
50
49
|
{
|
|
51
|
-
className:
|
|
52
|
-
|
|
50
|
+
className: i(
|
|
51
|
+
r["item-container"],
|
|
53
52
|
l,
|
|
54
53
|
"tcn-multiselect-values-container"
|
|
55
54
|
),
|
|
56
55
|
"data-is-disabled": e,
|
|
57
|
-
children:
|
|
56
|
+
children: m
|
|
58
57
|
}
|
|
59
58
|
);
|
|
60
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport {
|
|
1
|
+
{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n className?: string;\n}\n\nexport function MultiselectValues({\n values,\n disabled,\n className,\n onRemove,\n}: MultiselectValueProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n >\n <span>{v.props.label}</span>\n <Button\n utility\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </Button>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles['item-container'],\n className,\n 'tcn-multiselect-values-container'\n )}\n data-is-disabled={disabled}\n >\n {items}\n </div>\n );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import i from "react";
|
|
3
|
-
import "../../utils/click_away_listener.js";
|
|
4
|
-
import "../../utils/focus_redirect.js";
|
|
5
|
-
import "../../utils/scroll_away_listener.js";
|
|
3
|
+
import "../../utils/listeners/click_away_listener.js";
|
|
4
|
+
import "../../utils/listeners/focus_redirect.js";
|
|
5
|
+
import "../../utils/listeners/scroll_away_listener.js";
|
|
6
6
|
import { makeContextHook as m } from "../../utils/hooks/make_context_hook.js";
|
|
7
7
|
import "../../utils/hooks/use_resize_observer.js";
|
|
8
|
-
import "../../utils/
|
|
8
|
+
import "../../utils/hooks/labelled_by_context.js";
|
|
9
|
+
import "../../utils/decorators/draggable/context.js";
|
|
9
10
|
import "clsx";
|
|
10
|
-
import "../../draggable.module-
|
|
11
|
-
import "../../utils/
|
|
12
|
-
import "../../resizable.module-
|
|
13
|
-
import "../../utils/
|
|
14
|
-
const o = i.createContext(void 0),
|
|
15
|
-
function
|
|
11
|
+
import "../../draggable.module-DFYR5n3n.js";
|
|
12
|
+
import "../../utils/decorators/resizable/context.js";
|
|
13
|
+
import "../../resizable.module-ur5FBfxo.js";
|
|
14
|
+
import "../../utils/decorators/resizable/resize_handle.js";
|
|
15
|
+
const o = i.createContext(void 0), B = m(o, "PhoneBookContext");
|
|
16
|
+
function _({
|
|
16
17
|
children: t,
|
|
17
18
|
value: r
|
|
18
19
|
}) {
|
|
@@ -20,7 +21,7 @@ function B({
|
|
|
20
21
|
}
|
|
21
22
|
export {
|
|
22
23
|
o as PhoneBookContext,
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
_ as PhoneBookProvider,
|
|
25
|
+
B as usePhoneContext
|
|
25
26
|
};
|
|
26
27
|
//# sourceMappingURL=phone_number_context.js.map
|