@cloudscape-design/components 3.0.221 → 3.0.222
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/alert/index.js +4 -4
- package/alert/index.js.map +1 -1
- package/alert/internal.js +14 -15
- package/alert/internal.js.map +1 -1
- package/annotation-context/annotation/annotation-icon.js +1 -2
- package/annotation-context/annotation/annotation-icon.js.map +1 -1
- package/annotation-context/annotation/annotation-popover.js +6 -7
- package/annotation-context/annotation/annotation-popover.js.map +1 -1
- package/annotation-context/annotation/annotation-trigger.js +4 -6
- package/annotation-context/annotation/annotation-trigger.js.map +1 -1
- package/annotation-context/annotation/closed-annotation.js +4 -5
- package/annotation-context/annotation/closed-annotation.js.map +1 -1
- package/annotation-context/annotation/open-annotation.js +2 -3
- package/annotation-context/annotation/open-annotation.js.map +1 -1
- package/annotation-context/context.js +7 -7
- package/annotation-context/context.js.map +1 -1
- package/annotation-context/index.js +62 -69
- package/annotation-context/index.js.map +1 -1
- package/app-layout/content-wrapper/index.js +2 -3
- package/app-layout/content-wrapper/index.js.map +1 -1
- package/app-layout/defaults.js +13 -14
- package/app-layout/defaults.js.map +1 -1
- package/app-layout/drawer.js +16 -18
- package/app-layout/drawer.js.map +1 -1
- package/app-layout/index.js +111 -113
- package/app-layout/index.js.map +1 -1
- package/app-layout/mobile-toolbar/index.js +7 -9
- package/app-layout/mobile-toolbar/index.js.map +1 -1
- package/app-layout/navigation-panel.js +5 -8
- package/app-layout/navigation-panel.js.map +1 -1
- package/app-layout/notifications/index.js +2 -2
- package/app-layout/notifications/index.js.map +1 -1
- package/app-layout/toggles/index.js +14 -22
- package/app-layout/toggles/index.js.map +1 -1
- package/app-layout/tools-and-split-panel.js +6 -9
- package/app-layout/tools-and-split-panel.js.map +1 -1
- package/app-layout/utils/use-content-height.js +14 -15
- package/app-layout/utils/use-content-height.js.map +1 -1
- package/app-layout/utils/use-content-width.js +8 -8
- package/app-layout/utils/use-content-width.js.map +1 -1
- package/app-layout/utils/use-focus-control.js +7 -8
- package/app-layout/utils/use-focus-control.js.map +1 -1
- package/app-layout/utils/use-observed-element.js +3 -3
- package/app-layout/utils/use-observed-element.js.map +1 -1
- package/app-layout/utils/use-window-width.js +4 -4
- package/app-layout/utils/use-window-width.js.map +1 -1
- package/app-layout/visual-refresh/app-bar.js +19 -20
- package/app-layout/visual-refresh/app-bar.js.map +1 -1
- package/app-layout/visual-refresh/background.js +9 -10
- package/app-layout/visual-refresh/background.js.map +1 -1
- package/app-layout/visual-refresh/context.js +101 -59
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/header.js +6 -7
- package/app-layout/visual-refresh/header.js.map +1 -1
- package/app-layout/visual-refresh/index.js +3 -4
- package/app-layout/visual-refresh/index.js.map +1 -1
- package/app-layout/visual-refresh/layout.js +18 -21
- package/app-layout/visual-refresh/layout.js.map +1 -1
- package/app-layout/visual-refresh/main.js +17 -18
- package/app-layout/visual-refresh/main.js.map +1 -1
- package/app-layout/visual-refresh/navigation.js +22 -24
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh/notifications.js +6 -7
- package/app-layout/visual-refresh/notifications.js.map +1 -1
- package/app-layout/visual-refresh/split-panel.js +36 -43
- package/app-layout/visual-refresh/split-panel.js.map +1 -1
- package/app-layout/visual-refresh/tools.js +32 -34
- package/app-layout/visual-refresh/tools.js.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +5 -8
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/area-chart/chart-container.js +18 -19
- package/area-chart/chart-container.js.map +1 -1
- package/area-chart/elements/area-chart-filter.js +7 -8
- package/area-chart/elements/area-chart-filter.js.map +1 -1
- package/area-chart/elements/area-chart-legend.js +6 -9
- package/area-chart/elements/area-chart-legend.js.map +1 -1
- package/area-chart/elements/area-series.js +12 -13
- package/area-chart/elements/area-series.js.map +1 -1
- package/area-chart/elements/chart-popover.js +4 -6
- package/area-chart/elements/chart-popover.js.map +1 -1
- package/area-chart/elements/data-series.js +14 -17
- package/area-chart/elements/data-series.js.map +1 -1
- package/area-chart/elements/highlighted-point.js +6 -7
- package/area-chart/elements/highlighted-point.js.map +1 -1
- package/area-chart/elements/threshold-series.js +5 -7
- package/area-chart/elements/threshold-series.js.map +1 -1
- package/area-chart/elements/use-highlight-details.js +28 -30
- package/area-chart/elements/use-highlight-details.js.map +1 -1
- package/area-chart/elements/vertical-marker.js +6 -7
- package/area-chart/elements/vertical-marker.js.map +1 -1
- package/area-chart/index.js +4 -4
- package/area-chart/index.js.map +1 -1
- package/area-chart/internal.js +40 -41
- package/area-chart/internal.js.map +1 -1
- package/area-chart/model/async-store.js +23 -30
- package/area-chart/model/async-store.js.map +1 -1
- package/area-chart/model/compute-chart-props.js +11 -12
- package/area-chart/model/compute-chart-props.js.map +1 -1
- package/area-chart/model/create-series-decorator.js +11 -13
- package/area-chart/model/create-series-decorator.js.map +1 -1
- package/area-chart/model/interactions-store.js +47 -54
- package/area-chart/model/interactions-store.js.map +1 -1
- package/area-chart/model/use-chart-model.js +85 -89
- package/area-chart/model/use-chart-model.js.map +1 -1
- package/area-chart/model/use-filter-props.js +6 -6
- package/area-chart/model/use-filter-props.js.map +1 -1
- package/area-chart/model/use-highlight-props.js +6 -6
- package/area-chart/model/use-highlight-props.js.map +1 -1
- package/area-chart/model/utils.js +46 -59
- package/area-chart/model/utils.js.map +1 -1
- package/attribute-editor/additional-info.js +2 -5
- package/attribute-editor/additional-info.js.map +1 -1
- package/attribute-editor/index.js +5 -5
- package/attribute-editor/index.js.map +1 -1
- package/attribute-editor/internal.js +20 -20
- package/attribute-editor/internal.js.map +1 -1
- package/attribute-editor/row.js +17 -25
- package/attribute-editor/row.js.map +1 -1
- package/autosuggest/autosuggest-option.js +12 -12
- package/autosuggest/autosuggest-option.js.map +1 -1
- package/autosuggest/index.js +6 -6
- package/autosuggest/index.js.map +1 -1
- package/autosuggest/internal.js +39 -39
- package/autosuggest/internal.js.map +1 -1
- package/autosuggest/load-more-controller.js +10 -14
- package/autosuggest/load-more-controller.js.map +1 -1
- package/autosuggest/options-controller.js +31 -32
- package/autosuggest/options-controller.js.map +1 -1
- package/autosuggest/options-list.js +12 -13
- package/autosuggest/options-list.js.map +1 -1
- package/autosuggest/plain-list.js +15 -17
- package/autosuggest/plain-list.js.map +1 -1
- package/autosuggest/utils/utils.js +12 -12
- package/autosuggest/utils/utils.js.map +1 -1
- package/autosuggest/virtual-list.js +14 -16
- package/autosuggest/virtual-list.js.map +1 -1
- package/badge/index.js +6 -6
- package/badge/index.js.map +1 -1
- package/bar-chart/index.js +6 -6
- package/bar-chart/index.js.map +1 -1
- package/box/index.js +4 -4
- package/box/index.js.map +1 -1
- package/box/internal.js +12 -12
- package/box/internal.js.map +1 -1
- package/breadcrumb-group/index.js +4 -4
- package/breadcrumb-group/index.js.map +1 -1
- package/breadcrumb-group/internal.js +24 -25
- package/breadcrumb-group/internal.js.map +1 -1
- package/breadcrumb-group/item/item.js +32 -34
- package/breadcrumb-group/item/item.js.map +1 -1
- package/button/icon-helper.js +6 -6
- package/button/icon-helper.js.map +1 -1
- package/button/index.js +6 -6
- package/button/index.js.map +1 -1
- package/button/internal.js +32 -33
- package/button/internal.js.map +1 -1
- package/button-dropdown/category-elements/category-element.js +3 -5
- package/button-dropdown/category-elements/category-element.js.map +1 -1
- package/button-dropdown/category-elements/expandable-category-element.js +23 -26
- package/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
- package/button-dropdown/category-elements/mobile-expandable-category-element.js +27 -30
- package/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
- package/button-dropdown/index.js +6 -6
- package/button-dropdown/index.js.map +1 -1
- package/button-dropdown/internal.js +28 -29
- package/button-dropdown/internal.js.map +1 -1
- package/button-dropdown/item-element/index.js +30 -36
- package/button-dropdown/item-element/index.js.map +1 -1
- package/button-dropdown/items-list.js +3 -4
- package/button-dropdown/items-list.js.map +1 -1
- package/button-dropdown/mobile-expandable-group/mobile-expandable-group.js +2 -4
- package/button-dropdown/mobile-expandable-group/mobile-expandable-group.js.map +1 -1
- package/button-dropdown/tooltip.js +22 -24
- package/button-dropdown/tooltip.js.map +1 -1
- package/button-dropdown/utils/create-items-tree.js +21 -23
- package/button-dropdown/utils/create-items-tree.js.map +1 -1
- package/button-dropdown/utils/menu-item.js +6 -9
- package/button-dropdown/utils/menu-item.js.map +1 -1
- package/button-dropdown/utils/move-highlight.js +3 -4
- package/button-dropdown/utils/move-highlight.js.map +1 -1
- package/button-dropdown/utils/use-button-dropdown.js +31 -33
- package/button-dropdown/utils/use-button-dropdown.js.map +1 -1
- package/button-dropdown/utils/use-hidden-description.js +3 -3
- package/button-dropdown/utils/use-hidden-description.js.map +1 -1
- package/button-dropdown/utils/use-highlighted-menu.js +40 -42
- package/button-dropdown/utils/use-highlighted-menu.js.map +1 -1
- package/button-dropdown/utils/utils.js +5 -9
- package/button-dropdown/utils/utils.js.map +1 -1
- package/calendar/grid/index.js +25 -28
- package/calendar/grid/index.js.map +1 -1
- package/calendar/header/header-button.js +4 -6
- package/calendar/header/header-button.js.map +1 -1
- package/calendar/header/index.js +1 -2
- package/calendar/header/index.js.map +1 -1
- package/calendar/index.js +4 -4
- package/calendar/index.js.map +1 -1
- package/calendar/internal.js +27 -27
- package/calendar/internal.js.map +1 -1
- package/calendar/utils/intl.js +12 -13
- package/calendar/utils/intl.js.map +1 -1
- package/calendar/utils/navigation.js +3 -3
- package/calendar/utils/navigation.js.map +1 -1
- package/cards/cards-layout-helper.js +12 -12
- package/cards/cards-layout-helper.js.map +1 -1
- package/cards/index.js +53 -63
- package/cards/index.js.map +1 -1
- package/checkbox/index.js +4 -4
- package/checkbox/index.js.map +1 -1
- package/checkbox/internal.d.ts +1 -0
- package/checkbox/internal.d.ts.map +1 -1
- package/checkbox/internal.js +9 -9
- package/checkbox/internal.js.map +1 -1
- package/code-editor/ace-modes.js +1 -1
- package/code-editor/ace-modes.js.map +1 -1
- package/code-editor/ace-themes.js +2 -2
- package/code-editor/ace-themes.js.map +1 -1
- package/code-editor/error-screen.js +3 -4
- package/code-editor/error-screen.js.map +1 -1
- package/code-editor/index.js +61 -65
- package/code-editor/index.js.map +1 -1
- package/code-editor/listeners.js +5 -5
- package/code-editor/listeners.js.map +1 -1
- package/code-editor/loading-screen.js +2 -2
- package/code-editor/loading-screen.js.map +1 -1
- package/code-editor/pane.js +21 -25
- package/code-editor/pane.js.map +1 -1
- package/code-editor/preferences-modal.js +12 -13
- package/code-editor/preferences-modal.js.map +1 -1
- package/code-editor/resizable-box/index.js +14 -15
- package/code-editor/resizable-box/index.js.map +1 -1
- package/code-editor/setup-editor.js +20 -20
- package/code-editor/setup-editor.js.map +1 -1
- package/code-editor/status-bar.js +19 -22
- package/code-editor/status-bar.js.map +1 -1
- package/code-editor/tab-button.js +7 -10
- package/code-editor/tab-button.js.map +1 -1
- package/code-editor/util.js +6 -6
- package/code-editor/util.js.map +1 -1
- package/collection-preferences/index.js +21 -23
- package/collection-preferences/index.js.map +1 -1
- package/collection-preferences/utils.js +25 -57
- package/collection-preferences/utils.js.map +1 -1
- package/collection-preferences/visible-content.js +23 -27
- package/collection-preferences/visible-content.js.map +1 -1
- package/column-layout/index.js +6 -6
- package/column-layout/index.js.map +1 -1
- package/column-layout/internal.js +20 -21
- package/column-layout/internal.js.map +1 -1
- package/column-layout/util.js +2 -2
- package/column-layout/util.js.map +1 -1
- package/container/index.js +5 -5
- package/container/index.js.map +1 -1
- package/container/internal.js +30 -31
- package/container/internal.js.map +1 -1
- package/container/use-sticky-header.js +25 -25
- package/container/use-sticky-header.js.map +1 -1
- package/content-layout/index.js +2 -3
- package/content-layout/index.js.map +1 -1
- package/content-layout/internal.js +15 -16
- package/content-layout/internal.js.map +1 -1
- package/date-input/index.js +3 -4
- package/date-input/index.js.map +1 -1
- package/date-input/internal.js +8 -8
- package/date-input/internal.js.map +1 -1
- package/date-picker/index.js +28 -28
- package/date-picker/index.js.map +1 -1
- package/date-range-picker/calendar/grids/grid.js +54 -57
- package/date-range-picker/calendar/grids/grid.js.map +1 -1
- package/date-range-picker/calendar/grids/index.js +27 -28
- package/date-range-picker/calendar/grids/index.js.map +1 -1
- package/date-range-picker/calendar/header/header-button.js +4 -6
- package/date-range-picker/calendar/header/header-button.js.map +1 -1
- package/date-range-picker/calendar/header/index.js +6 -7
- package/date-range-picker/calendar/header/index.js.map +1 -1
- package/date-range-picker/calendar/index.js +40 -45
- package/date-range-picker/calendar/index.js.map +1 -1
- package/date-range-picker/calendar/range-inputs.js +5 -6
- package/date-range-picker/calendar/range-inputs.js.map +1 -1
- package/date-range-picker/calendar/utils.js +2 -2
- package/date-range-picker/calendar/utils.js.map +1 -1
- package/date-range-picker/dropdown.js +29 -34
- package/date-range-picker/dropdown.js.map +1 -1
- package/date-range-picker/index.js +40 -43
- package/date-range-picker/index.js.map +1 -1
- package/date-range-picker/mode-switcher.js +2 -3
- package/date-range-picker/mode-switcher.js.map +1 -1
- package/date-range-picker/relative-range/index.js +36 -40
- package/date-range-picker/relative-range/index.js.map +1 -1
- package/date-range-picker/time-offset.js +5 -5
- package/date-range-picker/time-offset.js.map +1 -1
- package/date-range-picker/utils.js +4 -5
- package/date-range-picker/utils.js.map +1 -1
- package/expandable-section/expandable-section-container.js +5 -5
- package/expandable-section/expandable-section-container.js.map +1 -1
- package/expandable-section/expandable-section-header.js +18 -23
- package/expandable-section/expandable-section-header.js.map +1 -1
- package/expandable-section/index.js +4 -4
- package/expandable-section/index.js.map +1 -1
- package/expandable-section/internal.js +22 -22
- package/expandable-section/internal.js.map +1 -1
- package/flashbar/collapsible-flashbar.js +103 -118
- package/flashbar/collapsible-flashbar.js.map +1 -1
- package/flashbar/common.js +26 -35
- package/flashbar/common.js.map +1 -1
- package/flashbar/constant.js +1 -1
- package/flashbar/constant.js.map +1 -1
- package/flashbar/flash.js +23 -26
- package/flashbar/flash.js.map +1 -1
- package/flashbar/index.js +3 -4
- package/flashbar/index.js.map +1 -1
- package/flashbar/internal/analytics.js +12 -12
- package/flashbar/internal/analytics.js.map +1 -1
- package/flashbar/non-collapsible-flashbar.js +10 -10
- package/flashbar/non-collapsible-flashbar.js.map +1 -1
- package/flashbar/utils.js +25 -27
- package/flashbar/utils.js.map +1 -1
- package/form/index.js +4 -4
- package/form/index.js.map +1 -1
- package/form/internal.js +5 -6
- package/form/internal.js.map +1 -1
- package/form-field/index.js +4 -4
- package/form-field/index.js.map +1 -1
- package/form-field/internal.js +20 -23
- package/form-field/internal.js.map +1 -1
- package/form-field/util.js +9 -10
- package/form-field/util.js.map +1 -1
- package/grid/index.js +6 -6
- package/grid/index.js.map +1 -1
- package/grid/internal.js +14 -15
- package/grid/internal.js.map +1 -1
- package/header/index.js +4 -4
- package/header/index.js.map +1 -1
- package/header/internal.js +15 -15
- package/header/internal.js.map +1 -1
- package/help-panel/index.js +7 -7
- package/help-panel/index.js.map +1 -1
- package/hotspot/index.js +12 -12
- package/hotspot/index.js.map +1 -1
- package/icon/index.js +4 -4
- package/icon/index.js.map +1 -1
- package/icon/internal.js +18 -18
- package/icon/internal.js.map +1 -1
- package/input/index.js +36 -17
- package/input/index.js.map +1 -1
- package/input/internal.js +30 -25
- package/input/internal.js.map +1 -1
- package/input/utils.js +4 -5
- package/input/utils.js.map +1 -1
- package/internal/animate.js +27 -32
- package/internal/animate.js.map +1 -1
- package/internal/base-component/index.js +2 -2
- package/internal/base-component/index.js.map +1 -1
- package/internal/breakpoints.js +7 -12
- package/internal/breakpoints.js.map +1 -1
- package/internal/components/abstract-switch/index.d.ts +2 -1
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +19 -19
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/abstract-switch/styles.css.js +13 -12
- package/internal/components/abstract-switch/styles.scoped.css +21 -21
- package/internal/components/abstract-switch/styles.selectors.js +13 -12
- package/internal/components/autosuggest-input/index.js +38 -38
- package/internal/components/autosuggest-input/index.js.map +1 -1
- package/internal/components/button-trigger/index.js +7 -7
- package/internal/components/button-trigger/index.js.map +1 -1
- package/internal/components/cartesian-chart/axis-label.js +1 -2
- package/internal/components/cartesian-chart/axis-label.js.map +1 -1
- package/internal/components/cartesian-chart/bottom-labels.js +20 -26
- package/internal/components/cartesian-chart/bottom-labels.js.map +1 -1
- package/internal/components/cartesian-chart/constants.js +5 -5
- package/internal/components/cartesian-chart/constants.js.map +1 -1
- package/internal/components/cartesian-chart/emphasized-baseline.js +4 -5
- package/internal/components/cartesian-chart/emphasized-baseline.js.map +1 -1
- package/internal/components/cartesian-chart/highlighted-point.js +1 -2
- package/internal/components/cartesian-chart/highlighted-point.js.map +1 -1
- package/internal/components/cartesian-chart/label-utils.js +20 -24
- package/internal/components/cartesian-chart/label-utils.js.map +1 -1
- package/internal/components/cartesian-chart/labels-measure.js +6 -7
- package/internal/components/cartesian-chart/labels-measure.js.map +1 -1
- package/internal/components/cartesian-chart/left-labels.js +13 -17
- package/internal/components/cartesian-chart/left-labels.js.map +1 -1
- package/internal/components/cartesian-chart/scales.js +21 -26
- package/internal/components/cartesian-chart/scales.js.map +1 -1
- package/internal/components/cartesian-chart/ticks.js +9 -10
- package/internal/components/cartesian-chart/ticks.js.map +1 -1
- package/internal/components/cartesian-chart/vertical-grid-lines.js +3 -4
- package/internal/components/cartesian-chart/vertical-grid-lines.js.map +1 -1
- package/internal/components/cartesian-chart/vertical-marker.js +3 -4
- package/internal/components/cartesian-chart/vertical-marker.js.map +1 -1
- package/internal/components/chart-filter/index.js +13 -14
- package/internal/components/chart-filter/index.js.map +1 -1
- package/internal/components/chart-legend/index.js +26 -29
- package/internal/components/chart-legend/index.js.map +1 -1
- package/internal/components/chart-plot/application-controller.js +21 -25
- package/internal/components/chart-plot/application-controller.js.map +1 -1
- package/internal/components/chart-plot/focus-outline.js +7 -8
- package/internal/components/chart-plot/focus-outline.js.map +1 -1
- package/internal/components/chart-plot/index.js +33 -34
- package/internal/components/chart-plot/index.js.map +1 -1
- package/internal/components/chart-popover/index.js +11 -12
- package/internal/components/chart-popover/index.js.map +1 -1
- package/internal/components/chart-series-details/index.js +13 -17
- package/internal/components/chart-series-details/index.js.map +1 -1
- package/internal/components/chart-series-marker/index.js +2 -3
- package/internal/components/chart-series-marker/index.js.map +1 -1
- package/internal/components/chart-status-container/index.js +8 -10
- package/internal/components/chart-status-container/index.js.map +1 -1
- package/internal/components/checkbox-icon/index.js +18 -19
- package/internal/components/checkbox-icon/index.js.map +1 -1
- package/internal/components/dark-ribbon/index.js +13 -14
- package/internal/components/dark-ribbon/index.js.map +1 -1
- package/internal/components/dropdown/context.js +4 -5
- package/internal/components/dropdown/context.js.map +1 -1
- package/internal/components/dropdown/dropdown-fit-handler.js +74 -81
- package/internal/components/dropdown/dropdown-fit-handler.js.map +1 -1
- package/internal/components/dropdown/index.js +57 -65
- package/internal/components/dropdown/index.js.map +1 -1
- package/internal/components/dropdown-footer/index.js +2 -6
- package/internal/components/dropdown-footer/index.js.map +1 -1
- package/internal/components/dropdown-status/index.js +5 -7
- package/internal/components/dropdown-status/index.js.map +1 -1
- package/internal/components/filtering-token/index.js +4 -6
- package/internal/components/filtering-token/index.js.map +1 -1
- package/internal/components/focus-lock/index.js +10 -11
- package/internal/components/focus-lock/index.js.map +1 -1
- package/internal/components/focus-lock/utils.js +4 -4
- package/internal/components/focus-lock/utils.js.map +1 -1
- package/internal/components/live-region/index.js +10 -10
- package/internal/components/live-region/index.js.map +1 -1
- package/internal/components/masked-input/index.js +22 -24
- package/internal/components/masked-input/index.js.map +1 -1
- package/internal/components/masked-input/keyboard-handler.js +18 -18
- package/internal/components/masked-input/keyboard-handler.js.map +1 -1
- package/internal/components/masked-input/use-mask.js +24 -28
- package/internal/components/masked-input/use-mask.js.map +1 -1
- package/internal/components/masked-input/utils/keys.js +4 -6
- package/internal/components/masked-input/utils/keys.js.map +1 -1
- package/internal/components/masked-input/utils/mask-format.js +103 -113
- package/internal/components/masked-input/utils/mask-format.js.map +1 -1
- package/internal/components/masked-input/utils/strings.js +1 -4
- package/internal/components/masked-input/utils/strings.js.map +1 -1
- package/internal/components/menu-dropdown/index.js +10 -12
- package/internal/components/menu-dropdown/index.js.map +1 -1
- package/internal/components/option/highlight-match.js +14 -18
- package/internal/components/option/highlight-match.js.map +1 -1
- package/internal/components/option/index.js +13 -13
- package/internal/components/option/index.js.map +1 -1
- package/internal/components/option/option-announcer.js +1 -1
- package/internal/components/option/option-announcer.js.map +1 -1
- package/internal/components/option/option-parts.js +28 -45
- package/internal/components/option/option-parts.js.map +1 -1
- package/internal/components/option/utils/filter-options.js +16 -19
- package/internal/components/option/utils/filter-options.js.map +1 -1
- package/internal/components/option/utils/flatten-options.js +15 -15
- package/internal/components/option/utils/flatten-options.js.map +1 -1
- package/internal/components/option/utils/prepare-options.js +3 -3
- package/internal/components/option/utils/prepare-options.js.map +1 -1
- package/internal/components/options-list/index.js +19 -20
- package/internal/components/options-list/index.js.map +1 -1
- package/internal/components/options-list/utils/test-indexes.js +11 -11
- package/internal/components/options-list/utils/test-indexes.js.map +1 -1
- package/internal/components/options-list/utils/use-highlight-option.js +17 -21
- package/internal/components/options-list/utils/use-highlight-option.js.map +1 -1
- package/internal/components/options-list/utils/use-ids.js +2 -2
- package/internal/components/options-list/utils/use-ids.js.map +1 -1
- package/internal/components/options-list/utils/use-keyboard.js +6 -8
- package/internal/components/options-list/utils/use-keyboard.js.map +1 -1
- package/internal/components/options-list/utils/use-open-state.js +6 -7
- package/internal/components/options-list/utils/use-open-state.js.map +1 -1
- package/internal/components/portal/index.js +5 -6
- package/internal/components/portal/index.js.map +1 -1
- package/internal/components/screenreader-only/index.js +1 -2
- package/internal/components/screenreader-only/index.js.map +1 -1
- package/internal/components/selectable-item/index.js +25 -26
- package/internal/components/selectable-item/index.js.map +1 -1
- package/internal/components/tab-trap/index.js +1 -2
- package/internal/components/tab-trap/index.js.map +1 -1
- package/internal/components/transition/index.js +16 -16
- package/internal/components/transition/index.js.map +1 -1
- package/internal/components/visual-context/index.js +6 -7
- package/internal/components/visual-context/index.js.map +1 -1
- package/internal/context/app-layout-context.js +2 -2
- package/internal/context/app-layout-context.js.map +1 -1
- package/internal/context/form-field-context.js +4 -4
- package/internal/context/form-field-context.js.map +1 -1
- package/internal/context/split-panel-context.js +3 -3
- package/internal/context/split-panel-context.js.map +1 -1
- package/internal/debounce.js +6 -11
- package/internal/debounce.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/events/index.js +12 -16
- package/internal/events/index.js.map +1 -1
- package/internal/focus-tracker.js +22 -27
- package/internal/focus-tracker.js.map +1 -1
- package/internal/generated/custom-css-properties/index.js +2 -2
- package/internal/generated/custom-css-properties/index.js.map +1 -1
- package/internal/hooks/check-controlled/index.js +1 -1
- package/internal/hooks/check-controlled/index.js.map +1 -1
- package/internal/hooks/container-queries/use-container-breakpoints.js +2 -2
- package/internal/hooks/container-queries/use-container-breakpoints.js.map +1 -1
- package/internal/hooks/container-queries/use-container-query.js +5 -6
- package/internal/hooks/container-queries/use-container-query.js.map +1 -1
- package/internal/hooks/container-queries/use-resize-observer.js +13 -13
- package/internal/hooks/container-queries/use-resize-observer.js.map +1 -1
- package/internal/hooks/focus-visible/index.js +8 -8
- package/internal/hooks/focus-visible/index.js.map +1 -1
- package/internal/hooks/forward-focus/index.js +5 -9
- package/internal/hooks/forward-focus/index.js.map +1 -1
- package/internal/hooks/forward-focus/radio-group.js +7 -7
- package/internal/hooks/forward-focus/radio-group.js.map +1 -1
- package/internal/hooks/use-base-component/component-metadata.js +5 -5
- package/internal/hooks/use-base-component/component-metadata.js.map +1 -1
- package/internal/hooks/use-base-component/index.js +1 -1
- package/internal/hooks/use-base-component/index.js.map +1 -1
- package/internal/hooks/use-controllable/index.js +16 -17
- package/internal/hooks/use-controllable/index.js.map +1 -1
- package/internal/hooks/use-date-cache/index.js +2 -2
- package/internal/hooks/use-date-cache/index.js.map +1 -1
- package/internal/hooks/use-debounce-callback/index.js +3 -7
- package/internal/hooks/use-debounce-callback/index.js.map +1 -1
- package/internal/hooks/use-dynamic-overlap/index.js +4 -4
- package/internal/hooks/use-dynamic-overlap/index.js.map +1 -1
- package/internal/hooks/use-effect-on-update.js +2 -2
- package/internal/hooks/use-effect-on-update.js.map +1 -1
- package/internal/hooks/use-focus-tracker.js +7 -8
- package/internal/hooks/use-focus-tracker.js.map +1 -1
- package/internal/hooks/use-has-rendered/index.js +6 -6
- package/internal/hooks/use-has-rendered/index.js.map +1 -1
- package/internal/hooks/use-merge-refs/index.js +5 -9
- package/internal/hooks/use-merge-refs/index.js.map +1 -1
- package/internal/hooks/use-mobile/index.js +7 -7
- package/internal/hooks/use-mobile/index.js.map +1 -1
- package/internal/hooks/use-mouse-down-target.js +5 -5
- package/internal/hooks/use-mouse-down-target.js.map +1 -1
- package/internal/hooks/use-mutation-observer/index.js +5 -5
- package/internal/hooks/use-mutation-observer/index.js.map +1 -1
- package/internal/hooks/use-portal-mode-classes/index.js +10 -12
- package/internal/hooks/use-portal-mode-classes/index.js.map +1 -1
- package/internal/hooks/use-previous/index.js +3 -3
- package/internal/hooks/use-previous/index.js.map +1 -1
- package/internal/hooks/use-scroll-sync/index.js +8 -9
- package/internal/hooks/use-scroll-sync/index.js.map +1 -1
- package/internal/hooks/use-singleton-handler/index.js +12 -14
- package/internal/hooks/use-singleton-handler/index.js.map +1 -1
- package/internal/hooks/use-stable-event-handler/index.js +3 -10
- package/internal/hooks/use-stable-event-handler/index.js.map +1 -1
- package/internal/hooks/use-telemetry/index.js +2 -2
- package/internal/hooks/use-telemetry/index.js.map +1 -1
- package/internal/hooks/use-telemetry/telemetry.js +3 -4
- package/internal/hooks/use-telemetry/telemetry.js.map +1 -1
- package/internal/hooks/use-unique-id/index.js +3 -3
- package/internal/hooks/use-unique-id/index.js.map +1 -1
- package/internal/hooks/use-visual-mode/index.js +11 -11
- package/internal/hooks/use-visual-mode/index.js.map +1 -1
- package/internal/is-development.js +1 -1
- package/internal/is-development.js.map +1 -1
- package/internal/logging.js +2 -2
- package/internal/logging.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/internal/metrics/log-clients.js +18 -27
- package/internal/metrics/log-clients.js.map +1 -1
- package/internal/metrics/metrics-formatters.js +11 -14
- package/internal/metrics/metrics-formatters.js.map +1 -1
- package/internal/metrics/metrics.js +27 -33
- package/internal/metrics/metrics.js.map +1 -1
- package/internal/motion.js +2 -2
- package/internal/motion.js.map +1 -1
- package/internal/styles/colors.js +1 -1
- package/internal/styles/colors.js.map +1 -1
- package/internal/utils/browser-scrollbar-size.js +5 -5
- package/internal/utils/browser-scrollbar-size.js.map +1 -1
- package/internal/utils/calculate-once.js +2 -2
- package/internal/utils/calculate-once.js.map +1 -1
- package/internal/utils/check-safe-url.js +4 -4
- package/internal/utils/check-safe-url.js.map +1 -1
- package/internal/utils/create-category-color-scale.js +6 -9
- package/internal/utils/create-category-color-scale.js.map +1 -1
- package/internal/utils/date-time/format-date-range.js +3 -3
- package/internal/utils/date-time/format-date-range.js.map +1 -1
- package/internal/utils/date-time/format-date.js +4 -4
- package/internal/utils/date-time/format-date.js.map +1 -1
- package/internal/utils/date-time/format-time.js +5 -5
- package/internal/utils/date-time/format-time.js.map +1 -1
- package/internal/utils/date-time/format-timezone-offset.js +4 -4
- package/internal/utils/date-time/format-timezone-offset.js.map +1 -1
- package/internal/utils/date-time/is-iso-date-only.js +1 -1
- package/internal/utils/date-time/is-iso-date-only.js.map +1 -1
- package/internal/utils/date-time/join-date-time.js +3 -3
- package/internal/utils/date-time/join-date-time.js.map +1 -1
- package/internal/utils/date-time/parse-date.js +5 -6
- package/internal/utils/date-time/parse-date.js.map +1 -1
- package/internal/utils/date-time/parse-timezone-offset.js +5 -5
- package/internal/utils/date-time/parse-timezone-offset.js.map +1 -1
- package/internal/utils/date-time/shift-timezone-offset.js +6 -6
- package/internal/utils/date-time/shift-timezone-offset.js.map +1 -1
- package/internal/utils/dom.js +12 -12
- package/internal/utils/dom.js.map +1 -1
- package/internal/utils/external-props.js +3 -3
- package/internal/utils/external-props.js.map +1 -1
- package/internal/utils/focus-svg-element.js +1 -1
- package/internal/utils/focus-svg-element.js.map +1 -1
- package/internal/utils/locale/merge-locales.js +1 -1
- package/internal/utils/locale/merge-locales.js.map +1 -1
- package/internal/utils/locale/normalize-locale.js +3 -3
- package/internal/utils/locale/normalize-locale.js.map +1 -1
- package/internal/utils/promises.js +7 -11
- package/internal/utils/promises.js.map +1 -1
- package/internal/utils/scrollable-containers.js +14 -18
- package/internal/utils/scrollable-containers.js.map +1 -1
- package/internal/utils/strings/join-strings.js +1 -5
- package/internal/utils/strings/join-strings.js.map +1 -1
- package/internal/utils/strings/pad-left-zeros.js +1 -1
- package/internal/utils/strings/pad-left-zeros.js.map +1 -1
- package/internal/utils/throttle.js +10 -15
- package/internal/utils/throttle.js.map +1 -1
- package/internal/utils/use-container-width.js +3 -5
- package/internal/utils/use-container-width.js.map +1 -1
- package/line-chart/index.js +6 -6
- package/line-chart/index.js.map +1 -1
- package/link/index.js +5 -5
- package/link/index.js.map +1 -1
- package/link/internal.js +25 -25
- package/link/internal.js.map +1 -1
- package/mixed-line-bar-chart/bar-groups.js +3 -4
- package/mixed-line-bar-chart/bar-groups.js.map +1 -1
- package/mixed-line-bar-chart/bar-series.js +24 -33
- package/mixed-line-bar-chart/bar-series.js.map +1 -1
- package/mixed-line-bar-chart/chart-container.js +123 -138
- package/mixed-line-bar-chart/chart-container.js.map +1 -1
- package/mixed-line-bar-chart/chart-filters.js +10 -17
- package/mixed-line-bar-chart/chart-filters.js.map +1 -1
- package/mixed-line-bar-chart/chart-legend.js +9 -13
- package/mixed-line-bar-chart/chart-legend.js.map +1 -1
- package/mixed-line-bar-chart/chart-popover.js +3 -4
- package/mixed-line-bar-chart/chart-popover.js.map +1 -1
- package/mixed-line-bar-chart/data-series.js +13 -17
- package/mixed-line-bar-chart/data-series.js.map +1 -1
- package/mixed-line-bar-chart/domain.js +32 -39
- package/mixed-line-bar-chart/domain.js.map +1 -1
- package/mixed-line-bar-chart/format-highlighted.js +13 -14
- package/mixed-line-bar-chart/format-highlighted.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-mouse-hover.js +32 -34
- package/mixed-line-bar-chart/hooks/use-mouse-hover.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-navigation.js +48 -57
- package/mixed-line-bar-chart/hooks/use-navigation.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-popover.js +7 -7
- package/mixed-line-bar-chart/hooks/use-popover.js.map +1 -1
- package/mixed-line-bar-chart/index.js +4 -4
- package/mixed-line-bar-chart/index.js.map +1 -1
- package/mixed-line-bar-chart/internal.js +47 -49
- package/mixed-line-bar-chart/internal.js.map +1 -1
- package/mixed-line-bar-chart/line-series.js +19 -24
- package/mixed-line-bar-chart/line-series.js.map +1 -1
- package/mixed-line-bar-chart/make-scaled-bar-groups.js +10 -11
- package/mixed-line-bar-chart/make-scaled-bar-groups.js.map +1 -1
- package/mixed-line-bar-chart/make-scaled-series.js +30 -38
- package/mixed-line-bar-chart/make-scaled-series.js.map +1 -1
- package/mixed-line-bar-chart/utils.js +18 -21
- package/mixed-line-bar-chart/utils.js.map +1 -1
- package/modal/body-scroll.js +4 -4
- package/modal/body-scroll.js.map +1 -1
- package/modal/index.js +4 -4
- package/modal/index.js.map +1 -1
- package/modal/internal.js +24 -25
- package/modal/internal.js.map +1 -1
- package/multiselect/index.js +5 -5
- package/multiselect/index.js.map +1 -1
- package/multiselect/internal.js +81 -88
- package/multiselect/internal.js.map +1 -1
- package/package.json +1 -1
- package/pagination/index.js +2 -3
- package/pagination/index.js.map +1 -1
- package/pagination/internal.js +16 -17
- package/pagination/internal.js.map +1 -1
- package/pagination/utils.js +12 -12
- package/pagination/utils.js.map +1 -1
- package/pie-chart/index.js +38 -39
- package/pie-chart/index.js.map +1 -1
- package/pie-chart/labels.js +38 -42
- package/pie-chart/labels.js.map +1 -1
- package/pie-chart/pie-chart.js +65 -67
- package/pie-chart/pie-chart.js.map +1 -1
- package/pie-chart/responsive-text.js +9 -10
- package/pie-chart/responsive-text.js.map +1 -1
- package/pie-chart/segments.js +27 -31
- package/pie-chart/segments.js.map +1 -1
- package/pie-chart/utils.js +32 -35
- package/pie-chart/utils.js.map +1 -1
- package/popover/arrow.js +2 -2
- package/popover/arrow.js.map +1 -1
- package/popover/body.js +16 -19
- package/popover/body.js.map +1 -1
- package/popover/container.js +52 -55
- package/popover/container.js.map +1 -1
- package/popover/index.js +6 -6
- package/popover/index.js.map +1 -1
- package/popover/internal.js +28 -28
- package/popover/internal.js.map +1 -1
- package/popover/utils/positions.js +54 -66
- package/popover/utils/positions.js.map +1 -1
- package/progress-bar/index.js +17 -17
- package/progress-bar/index.js.map +1 -1
- package/progress-bar/internal.js +12 -16
- package/progress-bar/internal.js.map +1 -1
- package/property-filter/controller.js +117 -125
- package/property-filter/controller.js.map +1 -1
- package/property-filter/filter-options.js +8 -11
- package/property-filter/filter-options.js.map +1 -1
- package/property-filter/index.js +50 -50
- package/property-filter/index.js.map +1 -1
- package/property-filter/property-editor.js +4 -5
- package/property-filter/property-editor.js.map +1 -1
- package/property-filter/property-filter-autosuggest.js +39 -39
- package/property-filter/property-filter-autosuggest.js.map +1 -1
- package/property-filter/token-editor.js +55 -66
- package/property-filter/token-editor.js.map +1 -1
- package/property-filter/token.js +9 -11
- package/property-filter/token.js.map +1 -1
- package/property-filter/use-load-items.js +8 -12
- package/property-filter/use-load-items.js.map +1 -1
- package/property-filter/utils.js +13 -18
- package/property-filter/utils.js.map +1 -1
- package/radio-group/index.js +3 -4
- package/radio-group/index.js.map +1 -1
- package/radio-group/internal.js +9 -9
- package/radio-group/internal.js.map +1 -1
- package/radio-group/radio-button.js +12 -15
- package/radio-group/radio-button.js.map +1 -1
- package/s3-resource-selector/index.js +29 -29
- package/s3-resource-selector/index.js.map +1 -1
- package/s3-resource-selector/s3-in-context/index.js +16 -18
- package/s3-resource-selector/s3-in-context/index.js.map +1 -1
- package/s3-resource-selector/s3-in-context/search-input.js +3 -4
- package/s3-resource-selector/s3-in-context/search-input.js.map +1 -1
- package/s3-resource-selector/s3-in-context/use-versions-fetch.js +16 -16
- package/s3-resource-selector/s3-in-context/use-versions-fetch.js.map +1 -1
- package/s3-resource-selector/s3-in-context/validation.js +6 -6
- package/s3-resource-selector/s3-in-context/validation.js.map +1 -1
- package/s3-resource-selector/s3-modal/basic-table.js +19 -20
- package/s3-resource-selector/s3-modal/basic-table.js.map +1 -1
- package/s3-resource-selector/s3-modal/buckets-table.js +11 -13
- package/s3-resource-selector/s3-modal/buckets-table.js.map +1 -1
- package/s3-resource-selector/s3-modal/column-formats.js +5 -5
- package/s3-resource-selector/s3-modal/column-formats.js.map +1 -1
- package/s3-resource-selector/s3-modal/empty-state.js +1 -2
- package/s3-resource-selector/s3-modal/empty-state.js.map +1 -1
- package/s3-resource-selector/s3-modal/index.js +37 -43
- package/s3-resource-selector/s3-modal/index.js.map +1 -1
- package/s3-resource-selector/s3-modal/objects-table.js +12 -14
- package/s3-resource-selector/s3-modal/objects-table.js.map +1 -1
- package/s3-resource-selector/s3-modal/table-utils.js +9 -12
- package/s3-resource-selector/s3-modal/table-utils.js.map +1 -1
- package/s3-resource-selector/s3-modal/versions-table.js +10 -12
- package/s3-resource-selector/s3-modal/versions-table.js.map +1 -1
- package/s3-resource-selector/utils.js +1 -1
- package/s3-resource-selector/utils.js.map +1 -1
- package/segmented-control/index.js +2 -3
- package/segmented-control/index.js.map +1 -1
- package/segmented-control/internal-segmented-control.js +16 -17
- package/segmented-control/internal-segmented-control.js.map +1 -1
- package/segmented-control/internal.js +14 -14
- package/segmented-control/internal.js.map +1 -1
- package/segmented-control/segment.js +3 -6
- package/segmented-control/segment.js.map +1 -1
- package/select/index.js +6 -6
- package/select/index.js.map +1 -1
- package/select/internal.js +58 -58
- package/select/internal.js.map +1 -1
- package/select/parts/filter.js +4 -4
- package/select/parts/filter.js.map +1 -1
- package/select/parts/item.js +10 -10
- package/select/parts/item.js.map +1 -1
- package/select/parts/multiselect-item.js +13 -14
- package/select/parts/multiselect-item.js.map +1 -1
- package/select/parts/plain-list.js +13 -15
- package/select/parts/plain-list.js.map +1 -1
- package/select/parts/trigger.js +7 -9
- package/select/parts/trigger.js.map +1 -1
- package/select/parts/virtual-list.js +27 -33
- package/select/parts/virtual-list.js.map +1 -1
- package/select/utils/check-option-value-field.js +2 -2
- package/select/utils/check-option-value-field.js.map +1 -1
- package/select/utils/connect-options.js +6 -7
- package/select/utils/connect-options.js.map +1 -1
- package/select/utils/get-item-props.js +4 -7
- package/select/utils/get-item-props.js.map +1 -1
- package/select/utils/render-options.js +13 -15
- package/select/utils/render-options.js.map +1 -1
- package/select/utils/use-announcement.js +10 -11
- package/select/utils/use-announcement.js.map +1 -1
- package/select/utils/use-load-items.js +16 -19
- package/select/utils/use-load-items.js.map +1 -1
- package/select/utils/use-native-search.js +20 -29
- package/select/utils/use-native-search.js.map +1 -1
- package/select/utils/use-select.js +89 -96
- package/select/utils/use-select.js.map +1 -1
- package/side-navigation/index.js +10 -10
- package/side-navigation/index.js.map +1 -1
- package/side-navigation/internal.js +35 -46
- package/side-navigation/internal.js.map +1 -1
- package/side-navigation/util.js +9 -12
- package/side-navigation/util.js.map +1 -1
- package/space-between/index.js +4 -4
- package/space-between/index.js.map +1 -1
- package/space-between/internal.js +7 -7
- package/space-between/internal.js.map +1 -1
- package/spinner/index.js +4 -4
- package/spinner/index.js.map +1 -1
- package/spinner/internal.js +4 -4
- package/spinner/internal.js.map +1 -1
- package/split-panel/bottom.js +22 -25
- package/split-panel/bottom.js.map +1 -1
- package/split-panel/icons/bottom-icon-refresh.js +11 -13
- package/split-panel/icons/bottom-icon-refresh.js.map +1 -1
- package/split-panel/icons/bottom-icon.js +1 -1
- package/split-panel/icons/bottom-icon.js.map +1 -1
- package/split-panel/icons/resize-handler.js +3 -6
- package/split-panel/icons/resize-handler.js.map +1 -1
- package/split-panel/icons/side-position-refresh.js +12 -14
- package/split-panel/icons/side-position-refresh.js.map +1 -1
- package/split-panel/icons/side-position.js +1 -1
- package/split-panel/icons/side-position.js.map +1 -1
- package/split-panel/index.js +65 -65
- package/split-panel/index.js.map +1 -1
- package/split-panel/preferences-modal.js +9 -9
- package/split-panel/preferences-modal.js.map +1 -1
- package/split-panel/side.js +12 -15
- package/split-panel/side.js.map +1 -1
- package/split-panel/utils/size-utils.js +3 -3
- package/split-panel/utils/size-utils.js.map +1 -1
- package/split-panel/utils/use-keyboard-events.js +13 -17
- package/split-panel/utils/use-keyboard-events.js.map +1 -1
- package/split-panel/utils/use-pointer-events.js +12 -13
- package/split-panel/utils/use-pointer-events.js.map +1 -1
- package/status-indicator/index.js +4 -4
- package/status-indicator/index.js.map +1 -1
- package/status-indicator/internal.js +9 -10
- package/status-indicator/internal.js.map +1 -1
- package/table/body-cell/click-away.js +9 -10
- package/table/body-cell/click-away.js.map +1 -1
- package/table/body-cell/index.js +18 -18
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/inline-editor.js +32 -46
- package/table/body-cell/inline-editor.js.map +1 -1
- package/table/body-cell/td-element.js +2 -4
- package/table/body-cell/td-element.js.map +1 -1
- package/table/body-cell/use-stable-scroll-position.js +10 -13
- package/table/body-cell/use-stable-scroll-position.js.map +1 -1
- package/table/header-cell/index.d.ts +4 -2
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +33 -34
- package/table/header-cell/index.js.map +1 -1
- package/table/header-cell/utils.js +10 -12
- package/table/header-cell/utils.js.map +1 -1
- package/table/index.js +5 -5
- package/table/index.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +94 -118
- package/table/internal.js.map +1 -1
- package/table/resizer/index.d.ts +5 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +40 -39
- package/table/resizer/index.js.map +1 -1
- package/table/selection-control/index.d.ts +4 -1
- package/table/selection-control/index.d.ts.map +1 -1
- package/table/selection-control/index.js +11 -11
- package/table/selection-control/index.js.map +1 -1
- package/table/sticky-header.d.ts +2 -2
- package/table/sticky-header.d.ts.map +1 -1
- package/table/sticky-header.js +16 -15
- package/table/sticky-header.js.map +1 -1
- package/table/sticky-scrollbar.js +5 -6
- package/table/sticky-scrollbar.js.map +1 -1
- package/table/sticky-scrolling.js +10 -10
- package/table/sticky-scrolling.js.map +1 -1
- package/table/thead.d.ts +11 -3
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +13 -13
- package/table/thead.js.map +1 -1
- package/table/tools-header.js +4 -5
- package/table/tools-header.js.map +1 -1
- package/table/use-column-widths.js +34 -44
- package/table/use-column-widths.js.map +1 -1
- package/table/use-row-events.js +10 -11
- package/table/use-row-events.js.map +1 -1
- package/table/use-selection.js +75 -81
- package/table/use-selection.js.map +1 -1
- package/table/use-sticky-header.js +16 -16
- package/table/use-sticky-header.js.map +1 -1
- package/table/use-sticky-scrollbar.js +42 -42
- package/table/use-sticky-scrollbar.js.map +1 -1
- package/table/use-table-focus-navigation.js +27 -28
- package/table/use-table-focus-navigation.js.map +1 -1
- package/table/utils.js +7 -7
- package/table/utils.js.map +1 -1
- package/tabs/index.js +30 -33
- package/tabs/index.js.map +1 -1
- package/tabs/scroll-utils.js +12 -13
- package/tabs/scroll-utils.js.map +1 -1
- package/tabs/smooth-scroll.js +17 -17
- package/tabs/smooth-scroll.js.map +1 -1
- package/tabs/tab-header-bar.js +61 -66
- package/tabs/tab-header-bar.js.map +1 -1
- package/tag-editor/index.js +59 -72
- package/tag-editor/index.js.map +1 -1
- package/tag-editor/internal.js +21 -29
- package/tag-editor/internal.js.map +1 -1
- package/tag-editor/utils.js +7 -8
- package/tag-editor/utils.js.map +1 -1
- package/tag-editor/validation.js +16 -18
- package/tag-editor/validation.js.map +1 -1
- package/text-content/index.js +6 -6
- package/text-content/index.js.map +1 -1
- package/text-filter/index.js +3 -4
- package/text-filter/index.js.map +1 -1
- package/text-filter/internal.js +10 -10
- package/text-filter/internal.js.map +1 -1
- package/textarea/index.js +23 -24
- package/textarea/index.js.map +1 -1
- package/theming/index.js +2 -3
- package/theming/index.js.map +1 -1
- package/tiles/index.js +3 -4
- package/tiles/index.js.map +1 -1
- package/tiles/internal.js +17 -17
- package/tiles/internal.js.map +1 -1
- package/tiles/tile.js +7 -9
- package/tiles/tile.js.map +1 -1
- package/time-input/index.js +5 -5
- package/time-input/index.js.map +1 -1
- package/time-input/internal.js +9 -9
- package/time-input/internal.js.map +1 -1
- package/toggle/index.js +3 -4
- package/toggle/index.js.map +1 -1
- package/toggle/internal.js +15 -16
- package/toggle/internal.js.map +1 -1
- package/token-group/dismiss-button.js +5 -7
- package/token-group/dismiss-button.js.map +1 -1
- package/token-group/index.js +4 -4
- package/token-group/index.js.map +1 -1
- package/token-group/internal.js +14 -14
- package/token-group/internal.js.map +1 -1
- package/token-group/toggle.js +7 -9
- package/token-group/toggle.js.map +1 -1
- package/top-navigation/1.0-beta/index.js +4 -4
- package/top-navigation/1.0-beta/index.js.map +1 -1
- package/top-navigation/1.0-beta/internal.js +43 -46
- package/top-navigation/1.0-beta/internal.js.map +1 -1
- package/top-navigation/1.0-beta/parts/overflow-menu.js +16 -17
- package/top-navigation/1.0-beta/parts/overflow-menu.js.map +1 -1
- package/top-navigation/1.0-beta/parts/utility.js +9 -12
- package/top-navigation/1.0-beta/parts/utility.js.map +1 -1
- package/top-navigation/1.0-beta/use-top-navigation.js +46 -54
- package/top-navigation/1.0-beta/use-top-navigation.js.map +1 -1
- package/top-navigation/index.js +4 -4
- package/top-navigation/index.js.map +1 -1
- package/top-navigation/internal.js +64 -71
- package/top-navigation/internal.js.map +1 -1
- package/top-navigation/parts/overflow-menu/header.js +3 -4
- package/top-navigation/parts/overflow-menu/header.js.map +1 -1
- package/top-navigation/parts/overflow-menu/index.js +4 -5
- package/top-navigation/parts/overflow-menu/index.js.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.js +56 -61
- package/top-navigation/parts/overflow-menu/menu-item.js.map +1 -1
- package/top-navigation/parts/overflow-menu/router.js +11 -13
- package/top-navigation/parts/overflow-menu/router.js.map +1 -1
- package/top-navigation/parts/overflow-menu/views/submenu.js +6 -8
- package/top-navigation/parts/overflow-menu/views/submenu.js.map +1 -1
- package/top-navigation/parts/overflow-menu/views/utilities.js +5 -7
- package/top-navigation/parts/overflow-menu/views/utilities.js.map +1 -1
- package/top-navigation/parts/utility.js +12 -15
- package/top-navigation/parts/utility.js.map +1 -1
- package/top-navigation/use-top-navigation.js +52 -59
- package/top-navigation/use-top-navigation.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js +5 -7
- package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/index.js +6 -7
- package/tutorial-panel/components/tutorial-detail-view/index.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/task-list.js +8 -15
- package/tutorial-panel/components/tutorial-detail-view/task-list.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/task.js +5 -6
- package/tutorial-panel/components/tutorial-detail-view/task.js.map +1 -1
- package/tutorial-panel/components/tutorial-list/index.js +19 -22
- package/tutorial-panel/components/tutorial-list/index.js.map +1 -1
- package/tutorial-panel/index.js +8 -8
- package/tutorial-panel/index.js.map +1 -1
- package/wizard/index.js +28 -28
- package/wizard/index.js.map +1 -1
- package/wizard/internal/analytics.js +32 -42
- package/wizard/internal/analytics.js.map +1 -1
- package/wizard/unmount.js +6 -13
- package/wizard/unmount.js.map +1 -1
- package/wizard/wizard-actions.js +7 -8
- package/wizard/wizard-actions.js.map +1 -1
- package/wizard/wizard-form-header.js +2 -3
- package/wizard/wizard-form-header.js.map +1 -1
- package/wizard/wizard-form.js +14 -16
- package/wizard/wizard-form.js.map +1 -1
- package/wizard/wizard-navigation.js +19 -25
- package/wizard/wizard-navigation.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"","sources":["../../../src/table/use-sticky-scrollbar.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\n\nimport { getOverflowParentDimensions, getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../internal/utils/browser-scrollbar-size';\nimport { supportsStickyPosition, getContainingBlock } from '../internal/utils/dom';\n\nconst updatePosition = (\n tableEl: HTMLElement | null,\n wrapperEl: HTMLElement | null,\n scrollbarEl: HTMLElement | null,\n scrollbarContentEl: HTMLElement | null,\n hasContainingBlock: boolean,\n consideredFooterHeight: number\n) => {\n if (!tableEl || !scrollbarEl || !wrapperEl) {\n return;\n }\n\n // parent is either some container or document itself\n const parent = getOverflowParentDimensions(wrapperEl)[0];\n const parentBottom = parent.top + parent.height;\n\n // table bottom is visible when\n // 1. table bottom reached end of the window\n // 2. table bottom is not overlapped by footer\n const { top: tableTop, bottom: tableBottom, width: tableWidth } = tableEl.getBoundingClientRect();\n const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n //scrollbar correction is needed for\n // #1 when scrollbars are constantly visible,\n // we want no visible break when switching between fake and real scrollbars\n // #2 when scrollbars are visible only on scrolling and half transparent (on mac)\n // we want to avoid any overlap between fake and real scrollbar\n // using 15 px as a height of transparent scrollbar on mac\n const scrollbarHeight = browserScrollbarSize().height;\n const scrollBarCorrection = scrollbarHeight > 0 ? scrollbarHeight : -15 / 2;\n const tableBottomIsVisible = parentBottom - consideredFooterHeight >= tableBottom + scrollBarCorrection;\n const tableTopIsHidden = tableTop >= parentBottom - consideredFooterHeight - scrollBarCorrection;\n const areaIsScrollable = tableWidth > wrapperWidth;\n\n if (tableBottomIsVisible || tableTopIsHidden || !areaIsScrollable) {\n scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n } else {\n // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n // that's why syncing it separately\n if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n requestAnimationFrame(() => {\n scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n });\n }\n\n scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n }\n\n if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n scrollbarEl.style.height = `${scrollbarHeight}px`;\n scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n }\n\n if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n const parent = getOverflowParentDimensions(wrapperEl)[0];\n\n const wrapperElRect = wrapperEl.getBoundingClientRect();\n const tableElRect = tableEl.getBoundingClientRect();\n scrollbarEl.style.width = `${wrapperElRect.width}px`;\n scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n // when using sticky scrollbars in containers\n // we agreed to ignore dynamic bottom calculations for footer overlap\n scrollbarEl.style.left = hasContainingBlock ? '0px' : `${wrapperElRect.left}px`;\n scrollbarEl.style.top = hasContainingBlock\n ? '0px'\n : `${Math.min(parent.top + parent.height, window.innerHeight - consideredFooterHeight)}px`;\n }\n};\n\nexport function useStickyScrollbar(\n scrollbarRef: RefObject<HTMLDivElement>,\n scrollbarContentRef: RefObject<HTMLDivElement>,\n tableRef: RefObject<HTMLTableElement>,\n wrapperRef: RefObject<HTMLDivElement>,\n footerHeight: number\n) {\n // We don't take into account containing-block calculations because that would\n // unnecessarily overcomplicate the position logic. For now, we assume that a\n // containing block, if present, is below the app layout and above the overflow\n // parent, which is a pretty safe assumption.\n const [hasContainingBlock, setHasContainingBlock] = useState(false);\n // We don't take into account footer height when the overflow parent is child of document body.\n // Because in this case, we think the footer is outside the overflow parent.\n const [hasOverflowParent, setHasOverflowParent] = useState(false);\n const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n useEffect(() => {\n if (supportsStickyPosition()) {\n const scrollHandler = () => {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n };\n scrollHandler();\n window.addEventListener('scroll', scrollHandler, true);\n return () => {\n window.removeEventListener('scroll', scrollHandler, true);\n };\n }\n }, [scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, scrollbarContentRef, hasContainingBlock]);\n\n const wrapperEl = wrapperRef.current;\n useEffect(() => {\n if (wrapperEl && supportsStickyPosition()) {\n setHasContainingBlock(!!getContainingBlock(wrapperEl));\n setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n }\n }, [wrapperEl]);\n\n useEffect(() => {\n if (supportsStickyPosition() && tableRef.current) {\n const observer = new ResizeObserver(entries => {\n if (scrollbarContentRef.current) {\n scrollbarContentRef.current.style.width = `${entries[0].borderBoxSize[0].inlineSize}px`;\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n }\n });\n observer.observe(tableRef.current);\n return () => {\n observer.disconnect();\n };\n }\n }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);\n\n useEffect(() => {\n if (supportsStickyPosition()) {\n const resizeHandler = () => {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n };\n window.addEventListener('resize', resizeHandler);\n return () => {\n window.removeEventListener('resize', resizeHandler);\n };\n }\n }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"","sources":["../../../src/table/use-sticky-scrollbar.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\n\nimport { getOverflowParentDimensions, getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../internal/utils/browser-scrollbar-size';\nimport { supportsStickyPosition, getContainingBlock } from '../internal/utils/dom';\n\nconst updatePosition = (\n tableEl: HTMLElement | null,\n wrapperEl: HTMLElement | null,\n scrollbarEl: HTMLElement | null,\n scrollbarContentEl: HTMLElement | null,\n hasContainingBlock: boolean,\n consideredFooterHeight: number\n) => {\n if (!tableEl || !scrollbarEl || !wrapperEl) {\n return;\n }\n\n // parent is either some container or document itself\n const parent = getOverflowParentDimensions(wrapperEl)[0];\n const parentBottom = parent.top + parent.height;\n\n // table bottom is visible when\n // 1. table bottom reached end of the window\n // 2. table bottom is not overlapped by footer\n const { top: tableTop, bottom: tableBottom, width: tableWidth } = tableEl.getBoundingClientRect();\n const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n //scrollbar correction is needed for\n // #1 when scrollbars are constantly visible,\n // we want no visible break when switching between fake and real scrollbars\n // #2 when scrollbars are visible only on scrolling and half transparent (on mac)\n // we want to avoid any overlap between fake and real scrollbar\n // using 15 px as a height of transparent scrollbar on mac\n const scrollbarHeight = browserScrollbarSize().height;\n const scrollBarCorrection = scrollbarHeight > 0 ? scrollbarHeight : -15 / 2;\n const tableBottomIsVisible = parentBottom - consideredFooterHeight >= tableBottom + scrollBarCorrection;\n const tableTopIsHidden = tableTop >= parentBottom - consideredFooterHeight - scrollBarCorrection;\n const areaIsScrollable = tableWidth > wrapperWidth;\n\n if (tableBottomIsVisible || tableTopIsHidden || !areaIsScrollable) {\n scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n } else {\n // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n // that's why syncing it separately\n if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n requestAnimationFrame(() => {\n scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n });\n }\n\n scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n }\n\n if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n scrollbarEl.style.height = `${scrollbarHeight}px`;\n scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n }\n\n if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n const parent = getOverflowParentDimensions(wrapperEl)[0];\n\n const wrapperElRect = wrapperEl.getBoundingClientRect();\n const tableElRect = tableEl.getBoundingClientRect();\n scrollbarEl.style.width = `${wrapperElRect.width}px`;\n scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n // when using sticky scrollbars in containers\n // we agreed to ignore dynamic bottom calculations for footer overlap\n scrollbarEl.style.left = hasContainingBlock ? '0px' : `${wrapperElRect.left}px`;\n scrollbarEl.style.top = hasContainingBlock\n ? '0px'\n : `${Math.min(parent.top + parent.height, window.innerHeight - consideredFooterHeight)}px`;\n }\n};\n\nexport function useStickyScrollbar(\n scrollbarRef: RefObject<HTMLDivElement>,\n scrollbarContentRef: RefObject<HTMLDivElement>,\n tableRef: RefObject<HTMLTableElement>,\n wrapperRef: RefObject<HTMLDivElement>,\n footerHeight: number\n) {\n // We don't take into account containing-block calculations because that would\n // unnecessarily overcomplicate the position logic. For now, we assume that a\n // containing block, if present, is below the app layout and above the overflow\n // parent, which is a pretty safe assumption.\n const [hasContainingBlock, setHasContainingBlock] = useState(false);\n // We don't take into account footer height when the overflow parent is child of document body.\n // Because in this case, we think the footer is outside the overflow parent.\n const [hasOverflowParent, setHasOverflowParent] = useState(false);\n const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n useEffect(() => {\n if (supportsStickyPosition()) {\n const scrollHandler = () => {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n };\n scrollHandler();\n window.addEventListener('scroll', scrollHandler, true);\n return () => {\n window.removeEventListener('scroll', scrollHandler, true);\n };\n }\n }, [scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, scrollbarContentRef, hasContainingBlock]);\n\n const wrapperEl = wrapperRef.current;\n useEffect(() => {\n if (wrapperEl && supportsStickyPosition()) {\n setHasContainingBlock(!!getContainingBlock(wrapperEl));\n setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n }\n }, [wrapperEl]);\n\n useEffect(() => {\n if (supportsStickyPosition() && tableRef.current) {\n const observer = new ResizeObserver(entries => {\n if (scrollbarContentRef.current) {\n scrollbarContentRef.current.style.width = `${entries[0].borderBoxSize[0].inlineSize}px`;\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n }\n });\n observer.observe(tableRef.current);\n return () => {\n observer.disconnect();\n };\n }\n }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);\n\n useEffect(() => {\n if (supportsStickyPosition()) {\n const resizeHandler = () => {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n };\n window.addEventListener('resize', resizeHandler);\n return () => {\n window.removeEventListener('resize', resizeHandler);\n };\n }\n }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
4
4
|
function iterateTableCells(table, func) {
|
|
5
|
-
table.querySelectorAll('tr').forEach(
|
|
6
|
-
row.querySelectorAll('td').forEach(
|
|
5
|
+
table.querySelectorAll('tr').forEach((row, rowIndex) => {
|
|
6
|
+
row.querySelectorAll('td').forEach((cell, cellIndex) => {
|
|
7
7
|
func(cell, rowIndex, cellIndex);
|
|
8
8
|
});
|
|
9
9
|
});
|
|
@@ -17,37 +17,36 @@ function iterateTableCells(table, func) {
|
|
|
17
17
|
* @param columnDefinitions - The column definitions for the table.
|
|
18
18
|
* @param numRows - The number of rows in the table.
|
|
19
19
|
*/
|
|
20
|
-
function useTableFocusNavigation(selectionType, tableRoot, columnDefinitions, numRows) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var cols = columnDefinitions.map(function (column) { return !!column.editConfig; });
|
|
20
|
+
function useTableFocusNavigation(selectionType = 'none', tableRoot, columnDefinitions, numRows) {
|
|
21
|
+
const currentFocusCell = useRef(null);
|
|
22
|
+
const focusableColumns = useMemo(() => {
|
|
23
|
+
const cols = columnDefinitions.map(column => !!column.editConfig);
|
|
25
24
|
if (selectionType !== 'none') {
|
|
26
25
|
cols.unshift(false);
|
|
27
26
|
}
|
|
28
27
|
return cols;
|
|
29
28
|
}, [columnDefinitions, selectionType]);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
const maxColumnIndex = useMemo(() => focusableColumns.length - 1, [focusableColumns]);
|
|
30
|
+
const minColumnIndex = useMemo(() => (selectionType !== 'none' ? 1 : 0), [selectionType]);
|
|
31
|
+
const focusCell = useCallback((rowIndex, columnIndex) => {
|
|
33
32
|
if (tableRoot === null || tableRoot === void 0 ? void 0 : tableRoot.current) {
|
|
34
|
-
iterateTableCells(tableRoot.current,
|
|
33
|
+
iterateTableCells(tableRoot.current, (cell, rIndex, cIndex) => {
|
|
35
34
|
var _a;
|
|
36
35
|
if (rIndex === rowIndex && cIndex === columnIndex) {
|
|
37
|
-
|
|
36
|
+
const editButton = cell.querySelector('button:last-child');
|
|
38
37
|
(_a = editButton === null || editButton === void 0 ? void 0 : editButton.focus) === null || _a === void 0 ? void 0 : _a.call(editButton, { preventScroll: true });
|
|
39
38
|
}
|
|
40
39
|
});
|
|
41
40
|
}
|
|
42
41
|
}, [tableRoot]);
|
|
43
|
-
|
|
42
|
+
const shiftFocus = useCallback((vertical, horizontal) => {
|
|
44
43
|
// istanbul ignore if next
|
|
45
44
|
if (!currentFocusCell.current) {
|
|
46
45
|
return;
|
|
47
46
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
const [rowIndex, columnIndex] = currentFocusCell.current.slice();
|
|
48
|
+
let newRowIndex = rowIndex;
|
|
49
|
+
let newColumnIndex = columnIndex;
|
|
51
50
|
if (vertical !== 0) {
|
|
52
51
|
newRowIndex = Math.min(numRows, Math.max(rowIndex + vertical, 0));
|
|
53
52
|
}
|
|
@@ -65,9 +64,9 @@ function useTableFocusNavigation(selectionType, tableRoot, columnDefinitions, nu
|
|
|
65
64
|
focusCell(newRowIndex, newColumnIndex);
|
|
66
65
|
}
|
|
67
66
|
}, [focusCell, focusableColumns, maxColumnIndex, minColumnIndex, numRows, tableRoot]);
|
|
68
|
-
|
|
67
|
+
const handleArrowKeyEvents = useCallback((event) => {
|
|
69
68
|
var _a, _b;
|
|
70
|
-
|
|
69
|
+
const abort = !!((_a = tableRoot.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-inline-editing-active = "true"]')) ||
|
|
71
70
|
!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.closest('[data-inline-editing-active]'));
|
|
72
71
|
if (abort) {
|
|
73
72
|
return;
|
|
@@ -94,37 +93,37 @@ function useTableFocusNavigation(selectionType, tableRoot, columnDefinitions, nu
|
|
|
94
93
|
return;
|
|
95
94
|
}
|
|
96
95
|
}, [shiftFocus, tableRoot]);
|
|
97
|
-
useEffect(
|
|
98
|
-
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
const eventListeners = new Map();
|
|
99
98
|
// istanbul ignore if
|
|
100
99
|
if (!tableRoot.current) {
|
|
101
100
|
return;
|
|
102
101
|
}
|
|
103
|
-
|
|
102
|
+
const tableElement = tableRoot.current;
|
|
104
103
|
// istanbul ignore next (tested in use-focus-navigation.test.tsx#L210)
|
|
105
104
|
function cleanUpListeners() {
|
|
106
|
-
iterateTableCells(tableElement,
|
|
107
|
-
|
|
105
|
+
iterateTableCells(tableElement, (cell, rowIndex, columnIndex) => {
|
|
106
|
+
const listeners = eventListeners.get([rowIndex, columnIndex]);
|
|
108
107
|
if (listeners === null || listeners === void 0 ? void 0 : listeners.focusin) {
|
|
109
108
|
cell.removeEventListener('focusin', listeners.focusin);
|
|
110
109
|
}
|
|
111
110
|
});
|
|
112
111
|
tableElement.removeEventListener('keydown', handleArrowKeyEvents);
|
|
113
112
|
}
|
|
114
|
-
iterateTableCells(tableElement,
|
|
113
|
+
iterateTableCells(tableElement, (cell, rowIndex, cellIndex) => {
|
|
115
114
|
if (!focusableColumns[cellIndex]) {
|
|
116
115
|
return;
|
|
117
116
|
}
|
|
118
|
-
|
|
119
|
-
focusin:
|
|
117
|
+
const listenerFns = {
|
|
118
|
+
focusin: () => {
|
|
120
119
|
currentFocusCell.current = [rowIndex, cellIndex];
|
|
121
|
-
}
|
|
120
|
+
},
|
|
122
121
|
};
|
|
123
122
|
eventListeners.set([rowIndex, cellIndex], listenerFns);
|
|
124
123
|
cell.addEventListener('focusin', listenerFns.focusin, { passive: true });
|
|
125
124
|
});
|
|
126
125
|
tableElement.addEventListener('keydown', handleArrowKeyEvents);
|
|
127
|
-
return
|
|
126
|
+
return () => tableElement && cleanUpListeners();
|
|
128
127
|
}, [focusableColumns, handleArrowKeyEvents, tableRoot]);
|
|
129
128
|
}
|
|
130
129
|
export default useTableFocusNavigation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table-focus-navigation.js","sourceRoot":"","sources":["../../../src/table/use-table-focus-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';\nimport { TableProps } from './interfaces';\n\nfunction iterateTableCells<T extends HTMLElement>(\n table: T,\n func: (cell: HTMLTableCellElement, rowIndex: number, columnIndex: number) => void\n) {\n table.querySelectorAll('tr').forEach((row: HTMLTableRowElement, rowIndex: number) => {\n row.querySelectorAll('td').forEach((cell, cellIndex) => {\n func(cell, rowIndex, cellIndex);\n });\n });\n}\n\n/**\n * This hook is used to navigate between table cells using the keyboard arrow keys.\n * All the functionality is implemented in the hook, so the table component does not\n * need to implement any keyboard event handlers.\n * @param enable - Toggle functionality of the hook\n * @param tableRoot - A ref to a table container. Ideally the root element of the table (<table>); tbody is also acceptable.\n * @param columnDefinitions - The column definitions for the table.\n * @param numRows - The number of rows in the table.\n */\nfunction useTableFocusNavigation<T extends { editConfig?: TableProps.EditConfig<any> }>(\n selectionType: 'single' | 'multi' | 'none' = 'none',\n tableRoot: RefObject<HTMLTableElement>,\n columnDefinitions: Readonly<T[]>,\n numRows: number\n) {\n const currentFocusCell = useRef<[number, number] | null>(null);\n\n const focusableColumns = useMemo(() => {\n const cols = columnDefinitions.map(column => !!column.editConfig);\n if (selectionType !== 'none') {\n cols.unshift(false);\n }\n return cols;\n }, [columnDefinitions, selectionType]);\n\n const maxColumnIndex = useMemo(() => focusableColumns.length - 1, [focusableColumns]);\n const minColumnIndex = useMemo(() => (selectionType !== 'none' ? 1 : 0), [selectionType]);\n\n const focusCell = useCallback(\n (rowIndex: number, columnIndex: number) => {\n if (tableRoot?.current) {\n iterateTableCells(tableRoot.current, (cell, rIndex, cIndex) => {\n if (rIndex === rowIndex && cIndex === columnIndex) {\n const editButton = cell.querySelector('button:last-child') as HTMLButtonElement | null;\n editButton?.focus?.({ preventScroll: true });\n }\n });\n }\n },\n [tableRoot]\n );\n\n const shiftFocus = useCallback(\n (vertical: -1 | 0 | 1, horizontal: -1 | 0 | 1) => {\n // istanbul ignore if next\n if (!currentFocusCell.current) {\n return;\n }\n const [rowIndex, columnIndex] = currentFocusCell.current.slice();\n let newRowIndex = rowIndex;\n let newColumnIndex = columnIndex;\n\n if (vertical !== 0) {\n newRowIndex = Math.min(numRows, Math.max(rowIndex + vertical, 0));\n }\n\n if (horizontal !== 0) {\n while (newColumnIndex <= maxColumnIndex && newColumnIndex >= minColumnIndex) {\n newColumnIndex += horizontal;\n if (focusableColumns[newColumnIndex]) {\n break;\n }\n }\n }\n\n if (\n (rowIndex !== newRowIndex || columnIndex !== newColumnIndex) &&\n currentFocusCell.current &&\n tableRoot.current\n ) {\n focusCell(newRowIndex, newColumnIndex);\n }\n },\n [focusCell, focusableColumns, maxColumnIndex, minColumnIndex, numRows, tableRoot]\n );\n\n const handleArrowKeyEvents = useCallback(\n (event: KeyboardEvent) => {\n const abort =\n !!tableRoot.current?.querySelector('[data-inline-editing-active = \"true\"]') ||\n !document.activeElement?.closest('[data-inline-editing-active]');\n\n if (abort) {\n return;\n }\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n shiftFocus(-1, 0);\n break;\n case 'ArrowDown':\n event.preventDefault();\n shiftFocus(1, 0);\n break;\n case 'ArrowLeft':\n event.preventDefault();\n shiftFocus(0, -1);\n break;\n case 'ArrowRight':\n event.preventDefault();\n shiftFocus(0, 1);\n break;\n // istanbul ignore next (default case = do nothing, not testable)\n default:\n return;\n }\n },\n [shiftFocus, tableRoot]\n );\n\n useEffect(() => {\n const eventListeners = new Map<[number, number], { focusin(evt: any): void }>();\n // istanbul ignore if\n if (!tableRoot.current) {\n return;\n }\n\n const tableElement = tableRoot.current;\n\n // istanbul ignore next (tested in use-focus-navigation.test.tsx#L210)\n function cleanUpListeners() {\n iterateTableCells(tableElement, (cell, rowIndex, columnIndex) => {\n const listeners = eventListeners.get([rowIndex, columnIndex]);\n if (listeners?.focusin) {\n cell.removeEventListener('focusin', listeners.focusin);\n }\n });\n tableElement.removeEventListener('keydown', handleArrowKeyEvents);\n }\n\n iterateTableCells(tableElement, (cell, rowIndex, cellIndex) => {\n if (!focusableColumns[cellIndex]) {\n return;\n }\n const listenerFns = {\n focusin: () => {\n currentFocusCell.current = [rowIndex, cellIndex];\n },\n };\n eventListeners.set([rowIndex, cellIndex], listenerFns);\n cell.addEventListener('focusin', listenerFns.focusin, { passive: true });\n });\n tableElement.addEventListener('keydown', handleArrowKeyEvents);\n\n return () => tableElement && cleanUpListeners();\n }, [focusableColumns, handleArrowKeyEvents, tableRoot]);\n}\n\nexport default useTableFocusNavigation;\n"]}
|
|
1
|
+
{"version":3,"file":"use-table-focus-navigation.js","sourceRoot":"","sources":["../../../src/table/use-table-focus-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';\nimport { TableProps } from './interfaces';\n\nfunction iterateTableCells<T extends HTMLElement>(\n table: T,\n func: (cell: HTMLTableCellElement, rowIndex: number, columnIndex: number) => void\n) {\n table.querySelectorAll('tr').forEach((row: HTMLTableRowElement, rowIndex: number) => {\n row.querySelectorAll('td').forEach((cell, cellIndex) => {\n func(cell, rowIndex, cellIndex);\n });\n });\n}\n\n/**\n * This hook is used to navigate between table cells using the keyboard arrow keys.\n * All the functionality is implemented in the hook, so the table component does not\n * need to implement any keyboard event handlers.\n * @param enable - Toggle functionality of the hook\n * @param tableRoot - A ref to a table container. Ideally the root element of the table (<table>); tbody is also acceptable.\n * @param columnDefinitions - The column definitions for the table.\n * @param numRows - The number of rows in the table.\n */\nfunction useTableFocusNavigation<T extends { editConfig?: TableProps.EditConfig<any> }>(\n selectionType: 'single' | 'multi' | 'none' = 'none',\n tableRoot: RefObject<HTMLTableElement>,\n columnDefinitions: Readonly<T[]>,\n numRows: number\n) {\n const currentFocusCell = useRef<[number, number] | null>(null);\n\n const focusableColumns = useMemo(() => {\n const cols = columnDefinitions.map(column => !!column.editConfig);\n if (selectionType !== 'none') {\n cols.unshift(false);\n }\n return cols;\n }, [columnDefinitions, selectionType]);\n\n const maxColumnIndex = useMemo(() => focusableColumns.length - 1, [focusableColumns]);\n const minColumnIndex = useMemo(() => (selectionType !== 'none' ? 1 : 0), [selectionType]);\n\n const focusCell = useCallback(\n (rowIndex: number, columnIndex: number) => {\n if (tableRoot?.current) {\n iterateTableCells(tableRoot.current, (cell, rIndex, cIndex) => {\n if (rIndex === rowIndex && cIndex === columnIndex) {\n const editButton = cell.querySelector('button:last-child') as HTMLButtonElement | null;\n editButton?.focus?.({ preventScroll: true });\n }\n });\n }\n },\n [tableRoot]\n );\n\n const shiftFocus = useCallback(\n (vertical: -1 | 0 | 1, horizontal: -1 | 0 | 1) => {\n // istanbul ignore if next\n if (!currentFocusCell.current) {\n return;\n }\n const [rowIndex, columnIndex] = currentFocusCell.current.slice();\n let newRowIndex = rowIndex;\n let newColumnIndex = columnIndex;\n\n if (vertical !== 0) {\n newRowIndex = Math.min(numRows, Math.max(rowIndex + vertical, 0));\n }\n\n if (horizontal !== 0) {\n while (newColumnIndex <= maxColumnIndex && newColumnIndex >= minColumnIndex) {\n newColumnIndex += horizontal;\n if (focusableColumns[newColumnIndex]) {\n break;\n }\n }\n }\n\n if (\n (rowIndex !== newRowIndex || columnIndex !== newColumnIndex) &&\n currentFocusCell.current &&\n tableRoot.current\n ) {\n focusCell(newRowIndex, newColumnIndex);\n }\n },\n [focusCell, focusableColumns, maxColumnIndex, minColumnIndex, numRows, tableRoot]\n );\n\n const handleArrowKeyEvents = useCallback(\n (event: KeyboardEvent) => {\n const abort =\n !!tableRoot.current?.querySelector('[data-inline-editing-active = \"true\"]') ||\n !document.activeElement?.closest('[data-inline-editing-active]');\n\n if (abort) {\n return;\n }\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n shiftFocus(-1, 0);\n break;\n case 'ArrowDown':\n event.preventDefault();\n shiftFocus(1, 0);\n break;\n case 'ArrowLeft':\n event.preventDefault();\n shiftFocus(0, -1);\n break;\n case 'ArrowRight':\n event.preventDefault();\n shiftFocus(0, 1);\n break;\n // istanbul ignore next (default case = do nothing, not testable)\n default:\n return;\n }\n },\n [shiftFocus, tableRoot]\n );\n\n useEffect(() => {\n const eventListeners = new Map<[number, number], { focusin(evt: any): void }>();\n // istanbul ignore if\n if (!tableRoot.current) {\n return;\n }\n\n const tableElement = tableRoot.current;\n\n // istanbul ignore next (tested in use-focus-navigation.test.tsx#L210)\n function cleanUpListeners() {\n iterateTableCells(tableElement, (cell, rowIndex, columnIndex) => {\n const listeners = eventListeners.get([rowIndex, columnIndex]);\n if (listeners?.focusin) {\n cell.removeEventListener('focusin', listeners.focusin);\n }\n });\n tableElement.removeEventListener('keydown', handleArrowKeyEvents);\n }\n\n iterateTableCells(tableElement, (cell, rowIndex, cellIndex) => {\n if (!focusableColumns[cellIndex]) {\n return;\n }\n const listenerFns = {\n focusin: () => {\n currentFocusCell.current = [rowIndex, cellIndex];\n },\n };\n eventListeners.set([rowIndex, cellIndex], listenerFns);\n cell.addEventListener('focusin', listenerFns.focusin, { passive: true });\n });\n tableElement.addEventListener('keydown', handleArrowKeyEvents);\n\n return () => tableElement && cleanUpListeners();\n }, [focusableColumns, handleArrowKeyEvents, tableRoot]);\n}\n\nexport default useTableFocusNavigation;\n"]}
|
package/table/utils.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { warnOnce } from '../internal/logging';
|
|
2
|
-
export
|
|
2
|
+
export const applyTrackBy = (trackBy, item) => {
|
|
3
3
|
if (typeof trackBy === 'function') {
|
|
4
4
|
return trackBy(item);
|
|
5
5
|
}
|
|
6
6
|
return item[trackBy];
|
|
7
7
|
};
|
|
8
|
-
export
|
|
8
|
+
export const getItemKey = (trackBy, item, index) => {
|
|
9
9
|
if (!trackBy) {
|
|
10
10
|
return index;
|
|
11
11
|
}
|
|
12
12
|
return applyTrackBy(trackBy, item);
|
|
13
13
|
};
|
|
14
|
-
export
|
|
14
|
+
export const getTrackableValue = (trackBy, item) => {
|
|
15
15
|
if (!trackBy) {
|
|
16
16
|
return item;
|
|
17
17
|
}
|
|
18
18
|
return applyTrackBy(trackBy, item);
|
|
19
19
|
};
|
|
20
|
-
export
|
|
20
|
+
export const getColumnKey = (column, index) => {
|
|
21
21
|
return column.id || index;
|
|
22
22
|
};
|
|
23
|
-
export
|
|
24
|
-
|
|
23
|
+
export const toContainerVariant = (variant) => {
|
|
24
|
+
const isDefaultVariant = !variant || variant === 'container';
|
|
25
25
|
return isDefaultVariant ? 'default' : variant;
|
|
26
26
|
};
|
|
27
27
|
export function checkSortingState(columnDefinitions, sortingComparator) {
|
|
28
|
-
|
|
28
|
+
const matchedColumn = columnDefinitions.filter(column => column.sortingComparator === sortingComparator)[0];
|
|
29
29
|
if (!matchedColumn) {
|
|
30
30
|
warnOnce('Table', 'Currently active sorting comparator was not found in any columns. Make sure to provide the same comparator function instance on each render.');
|
|
31
31
|
}
|
package/table/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/table/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/table/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAI,OAA8B,EAAE,IAAO,EAAE,EAAE;IACzE,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;QACjC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;KACtB;IACD,OAAQ,IAAY,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAI,OAA0C,EAAE,IAAO,EAAE,KAAa,EAAE,EAAE;IAClG,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,OAAO,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAI,OAA0C,EAAE,IAAO,EAAE,EAAE;IAC1F,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IACD,OAAO,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAI,MAAsC,EAAE,KAAa,EAAE,EAAE;IACvF,OAAO,MAAM,CAAC,EAAE,IAAI,KAAK,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAuC,EAAqC,EAAE;IAC/G,MAAM,gBAAgB,GAAG,CAAC,OAAO,IAAI,OAAO,KAAK,WAAW,CAAC;IAC7D,OAAO,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,UAAU,iBAAiB,CAC/B,iBAAgE,EAChE,iBAAmE;IAEnE,MAAM,aAAa,GAAG,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,iBAAiB,KAAK,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,IAAI,CAAC,aAAa,EAAE;QAClB,QAAQ,CACN,OAAO,EACP,8IAA8I,CAC/I,CAAC;KACH;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { InternalContainerProps } from '../container/internal';\nimport { TableProps } from './interfaces';\nimport { warnOnce } from '../internal/logging';\n\nexport const applyTrackBy = <T>(trackBy: TableProps.TrackBy<T>, item: T) => {\n if (typeof trackBy === 'function') {\n return trackBy(item);\n }\n return (item as any)[trackBy];\n};\n\nexport const getItemKey = <T>(trackBy: TableProps.TrackBy<T> | undefined, item: T, index: number) => {\n if (!trackBy) {\n return index;\n }\n return applyTrackBy(trackBy, item);\n};\n\nexport const getTrackableValue = <T>(trackBy: TableProps.TrackBy<T> | undefined, item: T) => {\n if (!trackBy) {\n return item;\n }\n return applyTrackBy(trackBy, item);\n};\n\nexport const getColumnKey = <T>(column: TableProps.ColumnDefinition<T>, index: number) => {\n return column.id || index;\n};\n\nexport const toContainerVariant = (variant: TableProps.Variant | undefined): InternalContainerProps['variant'] => {\n const isDefaultVariant = !variant || variant === 'container';\n return isDefaultVariant ? 'default' : variant;\n};\n\nexport function checkSortingState<T>(\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>,\n sortingComparator: TableProps.SortingColumn<T>['sortingComparator']\n) {\n const matchedColumn = columnDefinitions.filter(column => column.sortingComparator === sortingComparator)[0];\n if (!matchedColumn) {\n warnOnce(\n 'Table',\n 'Currently active sorting comparator was not found in any columns. Make sure to provide the same comparator function instance on each render.'\n );\n }\n}\n"]}
|
package/tabs/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import React, { useState } from 'react';
|
|
@@ -13,10 +13,10 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
|
13
13
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
14
14
|
import { checkSafeUrl } from '../internal/utils/check-safe-url';
|
|
15
15
|
import useFocusVisible from '../internal/hooks/focus-visible';
|
|
16
|
-
|
|
17
|
-
export
|
|
16
|
+
let lastGeneratedId = 0;
|
|
17
|
+
export const nextGeneratedId = () => `awsui-tabs-${lastGeneratedId++}-${Math.round(Math.random() * 10000)}`;
|
|
18
18
|
function firstEnabledTab(tabs) {
|
|
19
|
-
|
|
19
|
+
const enabledTabs = tabs.filter(tab => !tab.disabled);
|
|
20
20
|
if (enabledTabs.length > 0) {
|
|
21
21
|
return enabledTabs[0];
|
|
22
22
|
}
|
|
@@ -24,46 +24,43 @@ function firstEnabledTab(tabs) {
|
|
|
24
24
|
}
|
|
25
25
|
export default function Tabs(_a) {
|
|
26
26
|
var _b, _c;
|
|
27
|
-
var
|
|
28
|
-
for (
|
|
29
|
-
var tab = tabs_1[_i];
|
|
27
|
+
var { tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings } = _a, rest = __rest(_a, ["tabs", "variant", "onChange", "activeTabId", "ariaLabel", "ariaLabelledby", "disableContentPaddings", "i18nStrings"]);
|
|
28
|
+
for (const tab of tabs) {
|
|
30
29
|
checkSafeUrl('Tabs', tab.href);
|
|
31
30
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
const { __internalRootRef } = useBaseComponent('Tabs');
|
|
32
|
+
const [idNamespace] = useState(() => nextGeneratedId());
|
|
33
|
+
const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, (_c = (_b = firstEnabledTab(tabs)) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '', {
|
|
35
34
|
componentName: 'Tabs',
|
|
36
35
|
controlledProp: 'activeTabId',
|
|
37
|
-
changeHandler: 'onChange'
|
|
38
|
-
})
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
var isContentShown = isTabSelected && !selectedTab.disabled;
|
|
53
|
-
return React.createElement("div", __assign({}, contentAttributes), isContentShown && selectedTab.content);
|
|
36
|
+
changeHandler: 'onChange',
|
|
37
|
+
});
|
|
38
|
+
const baseProps = getBaseProps(rest);
|
|
39
|
+
const focusVisible = useFocusVisible();
|
|
40
|
+
const content = () => {
|
|
41
|
+
const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];
|
|
42
|
+
const renderContent = (tab) => {
|
|
43
|
+
const isTabSelected = tab === selectedTab;
|
|
44
|
+
const classes = clsx({
|
|
45
|
+
[styles['tabs-content']]: true,
|
|
46
|
+
[styles['tabs-content-active']]: isTabSelected,
|
|
47
|
+
});
|
|
48
|
+
const contentAttributes = Object.assign(Object.assign({}, focusVisible), { className: classes, role: 'tabpanel', id: `${idNamespace}-${tab.id}-panel`, key: `${idNamespace}-${tab.id}-panel`, tabIndex: 0, 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }) });
|
|
49
|
+
const isContentShown = isTabSelected && !selectedTab.disabled;
|
|
50
|
+
return React.createElement("div", Object.assign({}, contentAttributes), isContentShown && selectedTab.content);
|
|
54
51
|
};
|
|
55
|
-
return (React.createElement("div", { className: clsx(variant === 'container' ? styles['tabs-container-content-wrapper'] : styles['tabs-content-wrapper'],
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
return (React.createElement("div", { className: clsx(variant === 'container' ? styles['tabs-container-content-wrapper'] : styles['tabs-content-wrapper'], {
|
|
53
|
+
[styles['with-paddings']]: !disableContentPaddings,
|
|
54
|
+
}) }, tabs.map(renderContent)));
|
|
58
55
|
};
|
|
59
|
-
|
|
56
|
+
const header = (React.createElement(TabHeaderBar, { activeTabId: activeTabId, variant: variant, idNamespace: idNamespace, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, tabs: tabs, onChange: changeDetail => {
|
|
60
57
|
setActiveTabId(changeDetail.activeTabId);
|
|
61
58
|
fireNonCancelableEvent(onChange, changeDetail);
|
|
62
59
|
}, i18nStrings: i18nStrings }));
|
|
63
60
|
if (variant === 'container') {
|
|
64
|
-
return (React.createElement(InternalContainer,
|
|
61
|
+
return (React.createElement(InternalContainer, Object.assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true }), content()));
|
|
65
62
|
}
|
|
66
|
-
return (React.createElement("div",
|
|
63
|
+
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles.tabs), ref: __internalRootRef }),
|
|
67
64
|
header,
|
|
68
65
|
content()));
|
|
69
66
|
}
|
package/tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAI9D,IAAI,eAAe,GAAG,CAAC,CAAC;AACxB,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport InternalContainer from '../container/internal';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport useFocusVisible from '../internal/hooks/focus-visible';\n\nexport { TabsProps };\n\nlet lastGeneratedId = 0;\nexport const nextGeneratedId = () => `awsui-tabs-${lastGeneratedId++}-${Math.round(Math.random() * 10000)}`;\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n const enabledTabs = tabs.filter(tab => !tab.disabled);\n if (enabledTabs.length > 0) {\n return enabledTabs[0];\n }\n return null;\n}\n\nexport default function Tabs({\n tabs,\n variant = 'default',\n onChange,\n activeTabId: controlledTabId,\n ariaLabel,\n ariaLabelledby,\n disableContentPaddings = false,\n i18nStrings,\n ...rest\n}: TabsProps) {\n for (const tab of tabs) {\n checkSafeUrl('Tabs', tab.href);\n }\n const { __internalRootRef } = useBaseComponent('Tabs');\n const [idNamespace] = useState(() => nextGeneratedId());\n\n const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n componentName: 'Tabs',\n controlledProp: 'activeTabId',\n changeHandler: 'onChange',\n });\n\n const baseProps = getBaseProps(rest);\n\n const focusVisible = useFocusVisible();\n\n const content = () => {\n const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n const renderContent = (tab: TabsProps.Tab) => {\n const isTabSelected = tab === selectedTab;\n\n const classes = clsx({\n [styles['tabs-content']]: true,\n [styles['tabs-content-active']]: isTabSelected,\n });\n\n const contentAttributes: JSX.IntrinsicElements['div'] = {\n ...focusVisible,\n className: classes,\n role: 'tabpanel',\n id: `${idNamespace}-${tab.id}-panel`,\n key: `${idNamespace}-${tab.id}-panel`,\n tabIndex: 0,\n 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n };\n\n const isContentShown = isTabSelected && !selectedTab.disabled;\n return <div {...contentAttributes}>{isContentShown && selectedTab.content}</div>;\n };\n\n return (\n <div\n className={clsx(\n variant === 'container' ? styles['tabs-container-content-wrapper'] : styles['tabs-content-wrapper'],\n {\n [styles['with-paddings']]: !disableContentPaddings,\n }\n )}\n >\n {tabs.map(renderContent)}\n </div>\n );\n };\n\n const header = (\n <TabHeaderBar\n activeTabId={activeTabId}\n variant={variant}\n idNamespace={idNamespace}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n tabs={tabs}\n onChange={changeDetail => {\n setActiveTabId(changeDetail.activeTabId);\n fireNonCancelableEvent(onChange, changeDetail);\n }}\n i18nStrings={i18nStrings}\n />\n );\n\n if (variant === 'container') {\n return (\n <InternalContainer\n header={header}\n disableHeaderPaddings={true}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n disableContentPaddings={true}\n >\n {content()}\n </InternalContainer>\n );\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root, styles.tabs)} ref={__internalRootRef}>\n {header}\n {content()}\n </div>\n );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
|
package/tabs/scroll-utils.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import smoothScroll from './smooth-scroll';
|
|
4
|
-
export
|
|
4
|
+
export const onPaginationClick = (headerBarRef, direction) => {
|
|
5
5
|
if (!(headerBarRef === null || headerBarRef === void 0 ? void 0 : headerBarRef.current)) {
|
|
6
6
|
return;
|
|
7
7
|
}
|
|
8
|
-
|
|
8
|
+
const element = headerBarRef.current;
|
|
9
9
|
// Scroll each paginated section by 75% of what is already visible
|
|
10
|
-
|
|
10
|
+
const paginatedSectionSize = Math.ceil(element.clientWidth * 0.75);
|
|
11
11
|
if (direction === 1) {
|
|
12
12
|
smoothScroll(element, Math.min(element.scrollLeft + paginatedSectionSize, element.scrollWidth - element.offsetWidth));
|
|
13
13
|
}
|
|
@@ -15,28 +15,27 @@ export var onPaginationClick = function (headerBarRef, direction) {
|
|
|
15
15
|
smoothScroll(element, Math.max(element.scrollLeft - paginatedSectionSize, 0));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
|
-
export
|
|
19
|
-
|
|
18
|
+
export const hasHorizontalOverflow = (headerBar, leftOverflowButton) => {
|
|
19
|
+
const { offsetWidth, scrollWidth } = headerBar;
|
|
20
20
|
// Need to account for pagination button width when deciding if there would be overflow without them
|
|
21
|
-
|
|
21
|
+
const paginationButtonsWidth = leftOverflowButton.current && 2 * leftOverflowButton.current.offsetWidth;
|
|
22
22
|
return paginationButtonsWidth ? scrollWidth > offsetWidth + paginationButtonsWidth : scrollWidth > offsetWidth;
|
|
23
23
|
};
|
|
24
|
-
export
|
|
24
|
+
export const hasLeftOverflow = (headerBar) => {
|
|
25
25
|
return headerBar.scrollLeft > 0;
|
|
26
26
|
};
|
|
27
|
-
export
|
|
28
|
-
|
|
27
|
+
export const hasRightOverflow = (headerBar) => {
|
|
28
|
+
const { offsetWidth, scrollLeft, scrollWidth } = headerBar;
|
|
29
29
|
// scrollLeft can be a decimal value on systems using display scaling
|
|
30
30
|
return Math.ceil(scrollLeft) < scrollWidth - offsetWidth;
|
|
31
31
|
};
|
|
32
|
-
export
|
|
33
|
-
if (smooth === void 0) { smooth = true; }
|
|
32
|
+
export const scrollIntoView = (tabHeader, headerBar, smooth = true) => {
|
|
34
33
|
if (!tabHeader || !headerBar) {
|
|
35
34
|
return;
|
|
36
35
|
}
|
|
37
36
|
// Extra left and right margin to always make the focus ring visible
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
const margin = 2;
|
|
38
|
+
let updatedLeftScroll = headerBar.scrollLeft;
|
|
40
39
|
// Anchor tab to left of scroll parent
|
|
41
40
|
updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);
|
|
42
41
|
// Anchor tab to right of scroll parent
|
package/tabs/scroll-utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-utils.js","sourceRoot":"","sources":["../../../src/tabs/scroll-utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAE3C,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"scroll-utils.js","sourceRoot":"","sources":["../../../src/tabs/scroll-utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,YAA+C,EAAE,SAAiB,EAAQ,EAAE;IAC5G,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,EAAE;QAC1B,OAAO;KACR;IACD,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;IAErC,kEAAkE;IAClE,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEnE,IAAI,SAAS,KAAK,CAAC,EAAE;QACnB,YAAY,CACV,OAAO,EACP,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,oBAAoB,EAAE,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAC/F,CAAC;KACH;IACD,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;QACpB,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAC;KAC/E;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,SAAsB,EACtB,kBAAgD,EACvC,EAAE;IACX,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IAE/C,oGAAoG;IACpG,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,OAAO,IAAI,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC;IACxG,OAAO,sBAAsB,CAAC,CAAC,CAAC,WAAW,GAAG,WAAW,GAAG,sBAAsB,CAAC,CAAC,CAAC,WAAW,GAAG,WAAW,CAAC;AACjH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAsB,EAAW,EAAE;IACjE,OAAO,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,SAAsB,EAAW,EAAE;IAClE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IAC3D,qEAAqE;IACrE,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,WAAW,GAAG,WAAW,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAsB,EAAE,SAAsB,EAAE,MAAM,GAAG,IAAI,EAAQ,EAAE;IACpG,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE;QAC5B,OAAO;KACR;IACD,oEAAoE;IACpE,MAAM,MAAM,GAAG,CAAC,CAAC;IACjB,IAAI,iBAAiB,GAAG,SAAS,CAAC,UAAU,CAAC;IAE7C,sCAAsC;IACtC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,CAAC;IAC/E,uCAAuC;IACvC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAC1B,iBAAiB,EACjB,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,GAAG,MAAM,CAC9E,CAAC;IACF,IAAI,MAAM,EAAE;QACV,YAAY,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;KAC5C;SAAM;QACL,SAAS,CAAC,UAAU,GAAG,iBAAiB,CAAC;KAC1C;AACH,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport smoothScroll from './smooth-scroll';\n\nexport const onPaginationClick = (headerBarRef: React.RefObject<HTMLUListElement>, direction: number): void => {\n if (!headerBarRef?.current) {\n return;\n }\n const element = headerBarRef.current;\n\n // Scroll each paginated section by 75% of what is already visible\n const paginatedSectionSize = Math.ceil(element.clientWidth * 0.75);\n\n if (direction === 1) {\n smoothScroll(\n element,\n Math.min(element.scrollLeft + paginatedSectionSize, element.scrollWidth - element.offsetWidth)\n );\n }\n if (direction === -1) {\n smoothScroll(element, Math.max(element.scrollLeft - paginatedSectionSize, 0));\n }\n};\n\nexport const hasHorizontalOverflow = (\n headerBar: HTMLElement,\n leftOverflowButton: React.RefObject<HTMLElement>\n): boolean => {\n const { offsetWidth, scrollWidth } = headerBar;\n\n // Need to account for pagination button width when deciding if there would be overflow without them\n const paginationButtonsWidth = leftOverflowButton.current && 2 * leftOverflowButton.current.offsetWidth;\n return paginationButtonsWidth ? scrollWidth > offsetWidth + paginationButtonsWidth : scrollWidth > offsetWidth;\n};\n\nexport const hasLeftOverflow = (headerBar: HTMLElement): boolean => {\n return headerBar.scrollLeft > 0;\n};\n\nexport const hasRightOverflow = (headerBar: HTMLElement): boolean => {\n const { offsetWidth, scrollLeft, scrollWidth } = headerBar;\n // scrollLeft can be a decimal value on systems using display scaling\n return Math.ceil(scrollLeft) < scrollWidth - offsetWidth;\n};\n\nexport const scrollIntoView = (tabHeader: HTMLElement, headerBar: HTMLElement, smooth = true): void => {\n if (!tabHeader || !headerBar) {\n return;\n }\n // Extra left and right margin to always make the focus ring visible\n const margin = 2;\n let updatedLeftScroll = headerBar.scrollLeft;\n\n // Anchor tab to left of scroll parent\n updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);\n // Anchor tab to right of scroll parent\n updatedLeftScroll = Math.max(\n updatedLeftScroll,\n tabHeader.offsetLeft + tabHeader.offsetWidth - headerBar.offsetWidth + margin\n );\n if (smooth) {\n smoothScroll(headerBar, updatedLeftScroll);\n } else {\n headerBar.scrollLeft = updatedLeftScroll;\n }\n};\n"]}
|
package/tabs/smooth-scroll.js
CHANGED
|
@@ -3,34 +3,34 @@
|
|
|
3
3
|
import { isMotionDisabled } from '../internal/motion';
|
|
4
4
|
import isNativeSmoothScrollingSupported from './native-smooth-scroll-supported';
|
|
5
5
|
// The scroll speed depends on the scrolling distance. The equation below is an interpolation of measurements in Chrome.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
const getScrollSpeed = (pixels) => 0.0015 * Math.abs(pixels) + 0.558;
|
|
7
|
+
const getScrollTime = (pixels) => Math.round(Math.abs(pixels) / getScrollSpeed(pixels));
|
|
8
|
+
const now = () => (window.performance ? window.performance.now() : Date.now());
|
|
9
|
+
const ease = (k) => {
|
|
10
10
|
return 0.5 * (1 - Math.cos(Math.PI * k));
|
|
11
11
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
const step = (context) => {
|
|
13
|
+
const time = now();
|
|
14
|
+
const elapsed = Math.min((time - context.startTime) / context.scrollTime, 1);
|
|
15
|
+
const value = ease(elapsed);
|
|
16
|
+
const currentX = context.startX + (context.endX - context.startX) * value;
|
|
17
17
|
context.scrollable.scrollLeft = currentX;
|
|
18
18
|
// scroll more if we have not reached our destination
|
|
19
19
|
if (currentX !== context.endX) {
|
|
20
|
-
requestAnimationFrame(
|
|
20
|
+
requestAnimationFrame(() => step(context));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
const simulateSmoothScroll = (element, endX) => {
|
|
24
|
+
const startX = element.scrollLeft;
|
|
25
25
|
step({
|
|
26
26
|
scrollable: element,
|
|
27
|
-
startX
|
|
28
|
-
endX
|
|
27
|
+
startX,
|
|
28
|
+
endX,
|
|
29
29
|
startTime: now(),
|
|
30
|
-
scrollTime: getScrollTime(endX - startX)
|
|
30
|
+
scrollTime: getScrollTime(endX - startX),
|
|
31
31
|
});
|
|
32
32
|
};
|
|
33
|
-
|
|
33
|
+
const smoothScroll = (element, to) => {
|
|
34
34
|
if (isMotionDisabled(element)) {
|
|
35
35
|
element.scrollLeft = to;
|
|
36
36
|
return;
|
|
@@ -38,7 +38,7 @@ var smoothScroll = function (element, to) {
|
|
|
38
38
|
if (isNativeSmoothScrollingSupported() && element.scrollTo) {
|
|
39
39
|
element.scrollTo({
|
|
40
40
|
left: to,
|
|
41
|
-
behavior: 'smooth'
|
|
41
|
+
behavior: 'smooth',
|
|
42
42
|
});
|
|
43
43
|
return;
|
|
44
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smooth-scroll.js","sourceRoot":"","sources":["../../../src/tabs/smooth-scroll.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,gCAAgC,MAAM,kCAAkC,CAAC;AAUhF,wHAAwH;AACxH,
|
|
1
|
+
{"version":3,"file":"smooth-scroll.js","sourceRoot":"","sources":["../../../src/tabs/smooth-scroll.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,gCAAgC,MAAM,kCAAkC,CAAC;AAUhF,wHAAwH;AACxH,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;AAC7E,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAEhG,MAAM,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAE/E,MAAM,IAAI,GAAG,CAAC,CAAS,EAAU,EAAE;IACjC,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,IAAI,GAAG,CAAC,OAAsB,EAAQ,EAAE;IAC5C,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC;IACnB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAC7E,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IAC5B,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;IAC1E,OAAO,CAAC,UAAU,CAAC,UAAU,GAAG,QAAQ,CAAC;IACzC,qDAAqD;IACrD,IAAI,QAAQ,KAAK,OAAO,CAAC,IAAI,EAAE;QAC7B,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KAC5C;AACH,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAoB,EAAE,IAAY,EAAQ,EAAE;IACxE,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;IAClC,IAAI,CAAC;QACH,UAAU,EAAE,OAAO;QACnB,MAAM;QACN,IAAI;QACJ,SAAS,EAAE,GAAG,EAAE;QAChB,UAAU,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC;KACzC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,OAAoB,EAAE,EAAU,EAAE,EAAE;IACxD,IAAI,gBAAgB,CAAC,OAAO,CAAC,EAAE;QAC7B,OAAO,CAAC,UAAU,GAAG,EAAE,CAAC;QACxB,OAAO;KACR;IACD,IAAI,gCAAgC,EAAE,IAAI,OAAO,CAAC,QAAQ,EAAE;QAC1D,OAAO,CAAC,QAAQ,CAAC;YACf,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,OAAO;KACR;IACD,oBAAoB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { isMotionDisabled } from '../internal/motion';\nimport isNativeSmoothScrollingSupported from './native-smooth-scroll-supported';\n\ninterface ScrollContext {\n scrollable: HTMLElement;\n startX: number;\n endX: number;\n startTime: number;\n scrollTime: number;\n}\n\n// The scroll speed depends on the scrolling distance. The equation below is an interpolation of measurements in Chrome.\nconst getScrollSpeed = (pixels: number) => 0.0015 * Math.abs(pixels) + 0.558;\nconst getScrollTime = (pixels: number) => Math.round(Math.abs(pixels) / getScrollSpeed(pixels));\n\nconst now = () => (window.performance ? window.performance.now() : Date.now());\n\nconst ease = (k: number): number => {\n return 0.5 * (1 - Math.cos(Math.PI * k));\n};\n\nconst step = (context: ScrollContext): void => {\n const time = now();\n const elapsed = Math.min((time - context.startTime) / context.scrollTime, 1);\n const value = ease(elapsed);\n const currentX = context.startX + (context.endX - context.startX) * value;\n context.scrollable.scrollLeft = currentX;\n // scroll more if we have not reached our destination\n if (currentX !== context.endX) {\n requestAnimationFrame(() => step(context));\n }\n};\n\nconst simulateSmoothScroll = (element: HTMLElement, endX: number): void => {\n const startX = element.scrollLeft;\n step({\n scrollable: element,\n startX,\n endX,\n startTime: now(),\n scrollTime: getScrollTime(endX - startX),\n });\n};\n\nconst smoothScroll = (element: HTMLElement, to: number) => {\n if (isMotionDisabled(element)) {\n element.scrollLeft = to;\n return;\n }\n if (isNativeSmoothScrollingSupported() && element.scrollTo) {\n element.scrollTo({\n left: to,\n behavior: 'smooth',\n });\n return;\n }\n simulateSmoothScroll(element, to);\n};\n\nexport default smoothScroll;\n"]}
|