@cloudscape-design/components 3.0.221 → 3.0.223
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/interfaces.d.ts +4 -0
- package/date-input/interfaces.d.ts.map +1 -1
- package/date-input/interfaces.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
package/pagination/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pagination/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pagination/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACvD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC1D,OAAO,oBAAC,kBAAkB,oBAAK,KAAK,EAAM,kBAAkB,EAAI,CAAC;AACnE,CAAC;AAED,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { PaginationProps } from './interfaces';\nimport InternalPagination from './internal';\n\nexport { PaginationProps };\n\nexport default function Pagination(props: PaginationProps) {\n const baseComponentProps = useBaseComponent('Pagination');\n return <InternalPagination {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Pagination, 'Pagination');\n"]}
|
package/pagination/internal.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 clsx from 'clsx';
|
|
@@ -9,55 +9,54 @@ import { getBaseProps } from '../internal/base-component';
|
|
|
9
9
|
import useFocusVisible from '../internal/hooks/focus-visible';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
import { getPaginationState, range } from './utils';
|
|
12
|
-
|
|
12
|
+
const defaultAriaLabels = {
|
|
13
13
|
nextPageLabel: '',
|
|
14
14
|
paginationLabel: '',
|
|
15
15
|
previousPageLabel: '',
|
|
16
|
-
pageLabel:
|
|
16
|
+
pageLabel: pageNumber => `${pageNumber}`,
|
|
17
17
|
};
|
|
18
|
-
function PageButton(
|
|
19
|
-
|
|
20
|
-
var focusVisible = useFocusVisible();
|
|
18
|
+
function PageButton({ className, ariaLabel, disabled, pageIndex, isCurrent = false, children, onClick, }) {
|
|
19
|
+
const focusVisible = useFocusVisible();
|
|
21
20
|
function handleClick(event) {
|
|
22
21
|
event.preventDefault();
|
|
23
22
|
onClick(pageIndex);
|
|
24
23
|
}
|
|
25
24
|
return (React.createElement("li", { className: styles['page-item'] },
|
|
26
|
-
React.createElement("button",
|
|
25
|
+
React.createElement("button", Object.assign({}, focusVisible, { className: clsx(className, styles.button, disabled && styles['button-disabled'], isCurrent && styles['button-current']), type: "button", "aria-label": ariaLabel, disabled: disabled, onClick: handleClick, "aria-current": isCurrent }), children)));
|
|
27
26
|
}
|
|
28
27
|
function PageNumber(_a) {
|
|
29
|
-
var pageIndex = _a
|
|
30
|
-
return (React.createElement(PageButton,
|
|
28
|
+
var { pageIndex } = _a, rest = __rest(_a, ["pageIndex"]);
|
|
29
|
+
return (React.createElement(PageButton, Object.assign({ className: styles['page-number'], pageIndex: pageIndex }, rest), pageIndex));
|
|
31
30
|
}
|
|
32
31
|
export default function InternalPagination(_a) {
|
|
33
32
|
var _b, _c, _d;
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
var { openEnd, currentPageIndex, ariaLabels, pagesCount, disabled, onChange, onNextPageClick, onPreviousPageClick, __internalRootRef = null } = _a, rest = __rest(_a, ["openEnd", "currentPageIndex", "ariaLabels", "pagesCount", "disabled", "onChange", "onNextPageClick", "onPreviousPageClick", "__internalRootRef"]);
|
|
34
|
+
const baseProps = getBaseProps(rest);
|
|
35
|
+
const pageNumberLabelFn = (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.pageLabel) !== null && _b !== void 0 ? _b : defaultAriaLabels.pageLabel;
|
|
36
|
+
const { leftDots, leftIndex, rightIndex, rightDots } = getPaginationState(currentPageIndex, pagesCount, openEnd);
|
|
38
37
|
function handlePrevPageClick(requestedPageIndex) {
|
|
39
38
|
handlePageClick(requestedPageIndex);
|
|
40
39
|
fireNonCancelableEvent(onPreviousPageClick, {
|
|
41
40
|
requestedPageAvailable: true,
|
|
42
|
-
requestedPageIndex: requestedPageIndex
|
|
41
|
+
requestedPageIndex: requestedPageIndex,
|
|
43
42
|
});
|
|
44
43
|
}
|
|
45
44
|
function handleNextPageClick(requestedPageIndex) {
|
|
46
45
|
handlePageClick(requestedPageIndex);
|
|
47
46
|
fireNonCancelableEvent(onNextPageClick, {
|
|
48
47
|
requestedPageAvailable: currentPageIndex < pagesCount,
|
|
49
|
-
requestedPageIndex: requestedPageIndex
|
|
48
|
+
requestedPageIndex: requestedPageIndex,
|
|
50
49
|
});
|
|
51
50
|
}
|
|
52
51
|
function handlePageClick(requestedPageIndex) {
|
|
53
52
|
fireNonCancelableEvent(onChange, { currentPageIndex: requestedPageIndex });
|
|
54
53
|
}
|
|
55
|
-
return (React.createElement("ul",
|
|
54
|
+
return (React.createElement("ul", Object.assign({ "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.paginationLabel }, baseProps, { className: clsx(baseProps.className, styles.root, disabled && styles['root-disabled']), ref: __internalRootRef }),
|
|
56
55
|
React.createElement(PageButton, { className: styles.arrow, pageIndex: currentPageIndex - 1, ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.previousPageLabel) !== null && _c !== void 0 ? _c : defaultAriaLabels.nextPageLabel, disabled: disabled || currentPageIndex === 1, onClick: handlePrevPageClick },
|
|
57
56
|
React.createElement(InternalIcon, { name: "angle-left", variant: disabled ? 'disabled' : 'normal' })),
|
|
58
57
|
React.createElement(PageNumber, { pageIndex: 1, isCurrent: currentPageIndex === 1, disabled: disabled, ariaLabel: pageNumberLabelFn(1), onClick: handlePageClick }),
|
|
59
58
|
leftDots && React.createElement("li", { className: styles.dots }, "..."),
|
|
60
|
-
range(leftIndex, rightIndex).map(
|
|
59
|
+
range(leftIndex, rightIndex).map(pageIndex => (React.createElement(PageNumber, { key: pageIndex, isCurrent: currentPageIndex === pageIndex, pageIndex: pageIndex, disabled: disabled, ariaLabel: pageNumberLabelFn(pageIndex), onClick: handlePageClick }))),
|
|
61
60
|
rightDots && React.createElement("li", { className: styles.dots }, "..."),
|
|
62
61
|
!openEnd && pagesCount > 1 && (React.createElement(PageNumber, { isCurrent: currentPageIndex === pagesCount, pageIndex: pagesCount, disabled: disabled, ariaLabel: pageNumberLabelFn(pagesCount), onClick: handlePageClick })),
|
|
63
62
|
React.createElement(PageButton, { className: styles.arrow, pageIndex: currentPageIndex + 1, ariaLabel: (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.nextPageLabel) !== null && _d !== void 0 ? _d : defaultAriaLabels.nextPageLabel, disabled: disabled || (!openEnd && (pagesCount === 0 || currentPageIndex === pagesCount)), onClick: handleNextPageClick },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/pagination/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIpD,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/pagination/internal.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 clsx from 'clsx';\nimport React from 'react';\nimport InternalIcon from '../icon/internal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport styles from './styles.css.js';\nimport { getPaginationState, range } from './utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { PaginationProps } from './interfaces';\n\nconst defaultAriaLabels: Required<PaginationProps.Labels> = {\n nextPageLabel: '',\n paginationLabel: '',\n previousPageLabel: '',\n pageLabel: pageNumber => `${pageNumber}`,\n};\n\ninterface PageButtonProps {\n className?: string;\n ariaLabel: string;\n disabled?: boolean;\n pageIndex: number;\n isCurrent?: boolean;\n children?: React.ReactNode;\n onClick: (requestedIndex: number) => void;\n}\n\nfunction PageButton({\n className,\n ariaLabel,\n disabled,\n pageIndex,\n isCurrent = false,\n children,\n onClick,\n}: PageButtonProps) {\n const focusVisible = useFocusVisible();\n function handleClick(event: React.MouseEvent) {\n event.preventDefault();\n onClick(pageIndex);\n }\n return (\n <li className={styles['page-item']}>\n <button\n {...focusVisible}\n className={clsx(\n className,\n styles.button,\n disabled && styles['button-disabled'],\n isCurrent && styles['button-current']\n )}\n type=\"button\"\n aria-label={ariaLabel}\n disabled={disabled}\n onClick={handleClick}\n aria-current={isCurrent}\n >\n {children}\n </button>\n </li>\n );\n}\n\nfunction PageNumber({ pageIndex, ...rest }: PageButtonProps) {\n return (\n <PageButton className={styles['page-number']} pageIndex={pageIndex} {...rest}>\n {pageIndex}\n </PageButton>\n );\n}\n\ntype InternalPaginationProps = PaginationProps & InternalBaseComponentProps;\n\nexport default function InternalPagination({\n openEnd,\n currentPageIndex,\n ariaLabels,\n pagesCount,\n disabled,\n onChange,\n onNextPageClick,\n onPreviousPageClick,\n __internalRootRef = null,\n ...rest\n}: InternalPaginationProps) {\n const baseProps = getBaseProps(rest);\n const pageNumberLabelFn = ariaLabels?.pageLabel ?? defaultAriaLabels.pageLabel;\n const { leftDots, leftIndex, rightIndex, rightDots } = getPaginationState(currentPageIndex, pagesCount, openEnd);\n\n function handlePrevPageClick(requestedPageIndex: number) {\n handlePageClick(requestedPageIndex);\n fireNonCancelableEvent(onPreviousPageClick, {\n requestedPageAvailable: true,\n requestedPageIndex: requestedPageIndex,\n });\n }\n\n function handleNextPageClick(requestedPageIndex: number) {\n handlePageClick(requestedPageIndex);\n fireNonCancelableEvent(onNextPageClick, {\n requestedPageAvailable: currentPageIndex < pagesCount,\n requestedPageIndex: requestedPageIndex,\n });\n }\n\n function handlePageClick(requestedPageIndex: number) {\n fireNonCancelableEvent(onChange, { currentPageIndex: requestedPageIndex });\n }\n\n return (\n <ul\n aria-label={ariaLabels?.paginationLabel}\n {...baseProps}\n className={clsx(baseProps.className, styles.root, disabled && styles['root-disabled'])}\n ref={__internalRootRef}\n >\n <PageButton\n className={styles.arrow}\n pageIndex={currentPageIndex - 1}\n ariaLabel={ariaLabels?.previousPageLabel ?? defaultAriaLabels.nextPageLabel}\n disabled={disabled || currentPageIndex === 1}\n onClick={handlePrevPageClick}\n >\n <InternalIcon name=\"angle-left\" variant={disabled ? 'disabled' : 'normal'} />\n </PageButton>\n <PageNumber\n pageIndex={1}\n isCurrent={currentPageIndex === 1}\n disabled={disabled}\n ariaLabel={pageNumberLabelFn(1)}\n onClick={handlePageClick}\n />\n {leftDots && <li className={styles.dots}>...</li>}\n {range(leftIndex, rightIndex).map(pageIndex => (\n <PageNumber\n key={pageIndex}\n isCurrent={currentPageIndex === pageIndex}\n pageIndex={pageIndex}\n disabled={disabled}\n ariaLabel={pageNumberLabelFn(pageIndex)}\n onClick={handlePageClick}\n />\n ))}\n {rightDots && <li className={styles.dots}>...</li>}\n {!openEnd && pagesCount > 1 && (\n <PageNumber\n isCurrent={currentPageIndex === pagesCount}\n pageIndex={pagesCount}\n disabled={disabled}\n ariaLabel={pageNumberLabelFn(pagesCount)}\n onClick={handlePageClick}\n />\n )}\n <PageButton\n className={styles.arrow}\n pageIndex={currentPageIndex + 1}\n ariaLabel={ariaLabels?.nextPageLabel ?? defaultAriaLabels.nextPageLabel}\n disabled={disabled || (!openEnd && (pagesCount === 0 || currentPageIndex === pagesCount))}\n onClick={handleNextPageClick}\n >\n <InternalIcon name=\"angle-right\" variant={disabled ? 'disabled' : 'normal'} />\n </PageButton>\n </ul>\n );\n}\n"]}
|
package/pagination/utils.js
CHANGED
|
@@ -2,29 +2,29 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
// TODO [mjawors] _.range
|
|
4
4
|
export function range(from, to) {
|
|
5
|
-
|
|
6
|
-
for (
|
|
5
|
+
const result = [];
|
|
6
|
+
for (let i = from; i <= to; i++) {
|
|
7
7
|
result.push(i);
|
|
8
8
|
}
|
|
9
9
|
return result;
|
|
10
10
|
}
|
|
11
11
|
export function getPaginationState(currentPageIndex, totalPagesCount, isOpenEnd) {
|
|
12
12
|
// Total number of elements handled here
|
|
13
|
-
|
|
13
|
+
const numberOfControls = 7;
|
|
14
14
|
// Max number of controls that can be displayed on the left and right hand side of the current page.
|
|
15
15
|
// Works only for odd numbers
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
const leftDelta = Math.floor(numberOfControls / 2);
|
|
17
|
+
let rightDelta = leftDelta;
|
|
18
18
|
// upper and lower limits for pages range
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
const lowerLimit = 2;
|
|
20
|
+
let upperLimit = totalPagesCount - 1;
|
|
21
21
|
if (isOpenEnd) {
|
|
22
22
|
rightDelta++;
|
|
23
23
|
upperLimit = totalPagesCount + 1;
|
|
24
24
|
}
|
|
25
25
|
// Left and right indices based on delta calculation
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
let leftIndex = currentPageIndex - leftDelta;
|
|
27
|
+
let rightIndex = currentPageIndex + rightDelta;
|
|
28
28
|
// adjust page indexes if page index is too small
|
|
29
29
|
if (leftIndex < lowerLimit) {
|
|
30
30
|
rightIndex += lowerLimit - leftIndex;
|
|
@@ -39,14 +39,14 @@ export function getPaginationState(currentPageIndex, totalPagesCount, isOpenEnd)
|
|
|
39
39
|
leftIndex = Math.max(leftIndex, 2);
|
|
40
40
|
rightIndex = Math.min(rightIndex, upperLimit);
|
|
41
41
|
// consider adding dots
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
const leftDots = leftIndex > 2;
|
|
43
|
+
const rightDots = isOpenEnd || rightIndex < upperLimit;
|
|
44
44
|
if (leftDots) {
|
|
45
45
|
leftIndex++;
|
|
46
46
|
}
|
|
47
47
|
if (rightDots) {
|
|
48
48
|
rightIndex--;
|
|
49
49
|
}
|
|
50
|
-
return { leftDots
|
|
50
|
+
return { leftDots, rightDots, leftIndex, rightIndex };
|
|
51
51
|
}
|
|
52
52
|
//# sourceMappingURL=utils.js.map
|
package/pagination/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/pagination/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,yBAAyB;AACzB,MAAM,UAAU,KAAK,CAAC,IAAY,EAAE,EAAU;IAC5C,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/pagination/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,yBAAyB;AACzB,MAAM,UAAU,KAAK,CAAC,IAAY,EAAE,EAAU;IAC5C,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;QAC/B,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KAChB;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,gBAAwB,EAAE,eAAuB,EAAE,SAAmB;IACvG,wCAAwC;IACxC,MAAM,gBAAgB,GAAG,CAAC,CAAC;IAC3B,oGAAoG;IACpG,6BAA6B;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;IACnD,IAAI,UAAU,GAAG,SAAS,CAAC;IAC3B,yCAAyC;IACzC,MAAM,UAAU,GAAG,CAAC,CAAC;IACrB,IAAI,UAAU,GAAG,eAAe,GAAG,CAAC,CAAC;IAErC,IAAI,SAAS,EAAE;QACb,UAAU,EAAE,CAAC;QACb,UAAU,GAAG,eAAe,GAAG,CAAC,CAAC;KAClC;IAED,oDAAoD;IACpD,IAAI,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAAC;IAC7C,IAAI,UAAU,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAE/C,iDAAiD;IACjD,IAAI,SAAS,GAAG,UAAU,EAAE;QAC1B,UAAU,IAAI,UAAU,GAAG,SAAS,CAAC;QACrC,SAAS,GAAG,UAAU,CAAC;KACxB;IAED,8CAA8C;IAC9C,IAAI,UAAU,GAAG,UAAU,EAAE;QAC3B,SAAS,IAAI,UAAU,GAAG,UAAU,CAAC;QACrC,UAAU,GAAG,UAAU,CAAC;KACzB;IAED,4DAA4D;IAC5D,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACnC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAE9C,uBAAuB;IACvB,MAAM,QAAQ,GAAG,SAAS,GAAG,CAAC,CAAC;IAC/B,MAAM,SAAS,GAAG,SAAS,IAAI,UAAU,GAAG,UAAU,CAAC;IAEvD,IAAI,QAAQ,EAAE;QACZ,SAAS,EAAE,CAAC;KACb;IAED,IAAI,SAAS,EAAE;QACb,UAAU,EAAE,CAAC;KACd;IAED,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AACxD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// TODO [mjawors] _.range\nexport function range(from: number, to: number) {\n const result = [];\n for (let i = from; i <= to; i++) {\n result.push(i);\n }\n return result;\n}\n\nexport function getPaginationState(currentPageIndex: number, totalPagesCount: number, isOpenEnd?: boolean) {\n // Total number of elements handled here\n const numberOfControls = 7;\n // Max number of controls that can be displayed on the left and right hand side of the current page.\n // Works only for odd numbers\n const leftDelta = Math.floor(numberOfControls / 2);\n let rightDelta = leftDelta;\n // upper and lower limits for pages range\n const lowerLimit = 2;\n let upperLimit = totalPagesCount - 1;\n\n if (isOpenEnd) {\n rightDelta++;\n upperLimit = totalPagesCount + 1;\n }\n\n // Left and right indices based on delta calculation\n let leftIndex = currentPageIndex - leftDelta;\n let rightIndex = currentPageIndex + rightDelta;\n\n // adjust page indexes if page index is too small\n if (leftIndex < lowerLimit) {\n rightIndex += lowerLimit - leftIndex;\n leftIndex = lowerLimit;\n }\n\n // adjust page indexes if page index is to big\n if (rightIndex > upperLimit) {\n leftIndex -= rightIndex - upperLimit;\n rightIndex = upperLimit;\n }\n\n // adjust indexes one more time to avoid out of range errors\n leftIndex = Math.max(leftIndex, 2);\n rightIndex = Math.min(rightIndex, upperLimit);\n\n // consider adding dots\n const leftDots = leftIndex > 2;\n const rightDots = isOpenEnd || rightIndex < upperLimit;\n\n if (leftDots) {\n leftIndex++;\n }\n\n if (rightDots) {\n rightIndex--;\n }\n\n return { leftDots, rightDots, leftIndex, rightIndex };\n}\n"]}
|
package/pie-chart/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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
@@ -18,72 +18,71 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
|
18
18
|
import createCategoryColorScale from '../internal/utils/create-category-color-scale';
|
|
19
19
|
import useContainerWidth from '../internal/utils/use-container-width';
|
|
20
20
|
import { nodeContains } from '../internal/utils/dom';
|
|
21
|
-
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return externalData.map(function (datum, i) { return ({
|
|
21
|
+
const PieChart = function PieChart(_a) {
|
|
22
|
+
var { variant = 'pie', size = 'medium', hideTitles = false, hideDescriptions = false, hideLegend = false, hideFilter = false, statusType = 'finished', data: externalData = [], i18nStrings = {}, highlightedSegment: controlledHighlightedSegment, visibleSegments: controlledVisibleSegments, onHighlightChange: controlledOnHighlightChange, onFilterChange, additionalFilters, legendTitle, detailPopoverSize = 'medium' } = _a, props = __rest(_a, ["variant", "size", "hideTitles", "hideDescriptions", "hideLegend", "hideFilter", "statusType", "data", "i18nStrings", "highlightedSegment", "visibleSegments", "onHighlightChange", "onFilterChange", "additionalFilters", "legendTitle", "detailPopoverSize"]);
|
|
23
|
+
const { __internalRootRef = null } = useBaseComponent('PieChart');
|
|
24
|
+
const baseProps = getBaseProps(props);
|
|
25
|
+
const isEmpty = !externalData || externalData.length === 0;
|
|
26
|
+
const containerAttr = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles.root) });
|
|
27
|
+
const containerRef = useRef(null);
|
|
28
|
+
const [containerWidth, measureRef] = useContainerWidth();
|
|
29
|
+
const data = useMemo(() => {
|
|
30
|
+
const colors = createCategoryColorScale(externalData, undefined, it => it.color || null);
|
|
31
|
+
return externalData.map((datum, i) => ({
|
|
33
32
|
index: i,
|
|
34
33
|
color: colors[i],
|
|
35
|
-
datum
|
|
36
|
-
})
|
|
34
|
+
datum,
|
|
35
|
+
}));
|
|
37
36
|
}, [externalData]);
|
|
38
|
-
|
|
37
|
+
const [highlightedSegment = null, setHighlightedSegment] = useControllable(controlledHighlightedSegment, controlledOnHighlightChange, null, {
|
|
39
38
|
componentName: 'PieChart',
|
|
40
39
|
controlledProp: 'highlightedSegment',
|
|
41
|
-
changeHandler: 'onHighlightChange'
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
useEffect(
|
|
40
|
+
changeHandler: 'onHighlightChange',
|
|
41
|
+
});
|
|
42
|
+
const [legendSegment, setLegendSegment] = useState(highlightedSegment);
|
|
43
|
+
useEffect(() => {
|
|
45
44
|
setLegendSegment(controlledHighlightedSegment || null);
|
|
46
45
|
}, [controlledHighlightedSegment]);
|
|
47
|
-
|
|
46
|
+
const [visibleSegments, setVisibleSegments] = useControllable(controlledVisibleSegments, onFilterChange, externalData, {
|
|
48
47
|
componentName: 'PieChart',
|
|
49
48
|
controlledProp: 'visibleSegments',
|
|
50
|
-
changeHandler: 'onFilterChange'
|
|
51
|
-
})
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
49
|
+
changeHandler: 'onFilterChange',
|
|
50
|
+
});
|
|
51
|
+
const [pinnedSegment, setPinnedSegment] = useState(null);
|
|
52
|
+
const visibleData = useMemo(() => data.filter(d => (visibleSegments === null || visibleSegments === void 0 ? void 0 : visibleSegments.indexOf(d.datum)) !== -1), [data, visibleSegments]);
|
|
53
|
+
const filterItems = data === null || data === void 0 ? void 0 : data.map(data => ({
|
|
55
54
|
label: data.datum.title,
|
|
56
55
|
color: data.color,
|
|
57
56
|
type: 'rectangle',
|
|
58
|
-
datum: data.datum
|
|
59
|
-
})
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
datum: data.datum,
|
|
58
|
+
}));
|
|
59
|
+
const legendItems = filterItems.filter(d => (visibleSegments === null || visibleSegments === void 0 ? void 0 : visibleSegments.indexOf(d.datum)) !== -1);
|
|
60
|
+
const filterChange = useCallback((selectedSeries) => {
|
|
62
61
|
setVisibleSegments(selectedSeries);
|
|
63
62
|
fireNonCancelableEvent(onFilterChange, {
|
|
64
|
-
visibleSegments: selectedSeries
|
|
63
|
+
visibleSegments: selectedSeries,
|
|
65
64
|
});
|
|
66
65
|
}, [setVisibleSegments, onFilterChange]);
|
|
67
|
-
|
|
66
|
+
const onHighlightChange = useCallback((segment) => {
|
|
68
67
|
setLegendSegment(segment);
|
|
69
68
|
setHighlightedSegment(segment);
|
|
70
69
|
fireNonCancelableEvent(controlledOnHighlightChange, { highlightedSegment: segment });
|
|
71
70
|
}, [controlledOnHighlightChange, setHighlightedSegment]);
|
|
72
|
-
|
|
71
|
+
const onBlur = (event) => {
|
|
73
72
|
if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {
|
|
74
73
|
highlightedSegment && onHighlightChange(null);
|
|
75
74
|
setLegendSegment(null);
|
|
76
75
|
}
|
|
77
76
|
};
|
|
78
|
-
|
|
79
|
-
return (React.createElement("div",
|
|
77
|
+
const mergedRef = useMergeRefs(containerRef, measureRef, __internalRootRef);
|
|
78
|
+
return (React.createElement("div", Object.assign({}, containerAttr, { ref: mergedRef, onBlur: onBlur }),
|
|
80
79
|
statusType === 'finished' && !isEmpty && (React.createElement(InternalBox, { className: styles['filter-container'], margin: { bottom: 'l' } },
|
|
81
|
-
React.createElement(InternalSpaceBetween, { size: "l", direction: "horizontal", className: clsx(
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
React.createElement(InternalSpaceBetween, { size: "l", direction: "horizontal", className: clsx({
|
|
81
|
+
[styles['has-default-filter']]: !hideFilter,
|
|
82
|
+
}) },
|
|
84
83
|
!hideFilter && (React.createElement(Filter, { series: filterItems, onChange: filterChange, selectedSeries: visibleSegments, i18nStrings: i18nStrings })),
|
|
85
84
|
additionalFilters))),
|
|
86
|
-
React.createElement(InternalPieChart,
|
|
85
|
+
React.createElement(InternalPieChart, Object.assign({}, props, { variant: variant, size: size, data: externalData, visibleData: visibleData, width: containerWidth, statusType: statusType, hideTitles: hideTitles, hideDescriptions: hideDescriptions, hideLegend: hideLegend, hideFilter: hideFilter, additionalFilters: additionalFilters, i18nStrings: i18nStrings, onHighlightChange: onHighlightChange, highlightedSegment: highlightedSegment, legendSegment: legendSegment, pinnedSegment: pinnedSegment, setPinnedSegment: setPinnedSegment, detailPopoverSize: detailPopoverSize })),
|
|
87
86
|
!hideLegend && !isEmpty && statusType === 'finished' && (React.createElement(InternalBox, { margin: { top: 'm' } },
|
|
88
87
|
React.createElement(Legend, { series: legendItems, highlightedSeries: legendSegment, legendTitle: legendTitle, ariaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.legendAriaLabel, onHighlightChange: onHighlightChange, plotContainerRef: containerRef })))));
|
|
89
88
|
};
|
package/pie-chart/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pie-chart/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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport Legend, { ChartLegendProps } from '../internal/components/chart-legend';\nimport Filter, { ChartFilterProps } from '../internal/components/chart-filter';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalBox from '../box/internal';\n\nimport InternalPieChart, { InternalChartDatum } from './pie-chart';\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport createCategoryColorScale from '../internal/utils/create-category-color-scale';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { nodeContains } from '../internal/utils/dom';\n\nexport { PieChartProps };\n\nconst PieChart = function PieChart<T extends PieChartProps.Datum = PieChartProps.Datum>({\n variant = 'pie',\n size = 'medium',\n hideTitles = false,\n hideDescriptions = false,\n hideLegend = false,\n hideFilter = false,\n statusType = 'finished',\n data: externalData = [],\n i18nStrings = {},\n highlightedSegment: controlledHighlightedSegment,\n visibleSegments: controlledVisibleSegments,\n onHighlightChange: controlledOnHighlightChange,\n onFilterChange,\n additionalFilters,\n legendTitle,\n detailPopoverSize = 'medium',\n ...props\n}: PieChartProps<T>) {\n const { __internalRootRef = null } = useBaseComponent('PieChart');\n const baseProps = getBaseProps(props);\n const isEmpty = !externalData || externalData.length === 0;\n const containerAttr = {\n ...baseProps,\n className: clsx(baseProps.className, styles.root),\n };\n const containerRef = useRef<HTMLDivElement>(null);\n const [containerWidth, measureRef] = useContainerWidth();\n\n const data: ReadonlyArray<InternalChartDatum<T>> = useMemo(() => {\n const colors = createCategoryColorScale(externalData, undefined, it => it.color || null);\n\n return externalData.map((datum, i) => ({\n index: i,\n color: colors[i],\n datum,\n }));\n }, [externalData]);\n\n const [highlightedSegment = null, setHighlightedSegment] = useControllable(\n controlledHighlightedSegment,\n controlledOnHighlightChange,\n null,\n {\n componentName: 'PieChart',\n controlledProp: 'highlightedSegment',\n changeHandler: 'onHighlightChange',\n }\n );\n const [legendSegment, setLegendSegment] = useState<null | T>(highlightedSegment);\n useEffect(() => {\n setLegendSegment(controlledHighlightedSegment || null);\n }, [controlledHighlightedSegment]);\n\n const [visibleSegments, setVisibleSegments] = useControllable(\n controlledVisibleSegments,\n onFilterChange,\n externalData,\n {\n componentName: 'PieChart',\n controlledProp: 'visibleSegments',\n changeHandler: 'onFilterChange',\n }\n );\n\n const [pinnedSegment, setPinnedSegment] = useState<T | null>(null);\n\n const visibleData = useMemo(\n () => data.filter(d => visibleSegments?.indexOf(d.datum) !== -1),\n [data, visibleSegments]\n );\n\n const filterItems: ChartFilterProps<T>['series'] = data?.map(data => ({\n label: data.datum.title,\n color: data.color,\n type: 'rectangle',\n datum: data.datum,\n }));\n\n const legendItems: ChartLegendProps<T>['series'] = filterItems.filter(d => visibleSegments?.indexOf(d.datum) !== -1);\n\n const filterChange = useCallback(\n (selectedSeries: ReadonlyArray<T>) => {\n setVisibleSegments(selectedSeries);\n fireNonCancelableEvent(onFilterChange, {\n visibleSegments: selectedSeries,\n });\n },\n [setVisibleSegments, onFilterChange]\n );\n\n const onHighlightChange = useCallback(\n (segment: T | null) => {\n setLegendSegment(segment);\n setHighlightedSegment(segment);\n fireNonCancelableEvent(controlledOnHighlightChange, { highlightedSegment: segment });\n },\n [controlledOnHighlightChange, setHighlightedSegment]\n );\n\n const onBlur = (event: React.FocusEvent) => {\n if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {\n highlightedSegment && onHighlightChange(null);\n setLegendSegment(null);\n }\n };\n\n const mergedRef = useMergeRefs(containerRef, measureRef, __internalRootRef);\n\n return (\n <div {...containerAttr} ref={mergedRef} onBlur={onBlur}>\n {statusType === 'finished' && !isEmpty && (\n <InternalBox className={styles['filter-container']} margin={{ bottom: 'l' }}>\n <InternalSpaceBetween\n size=\"l\"\n direction=\"horizontal\"\n className={clsx({\n [styles['has-default-filter']]: !hideFilter,\n })}\n >\n {!hideFilter && (\n <Filter\n series={filterItems}\n onChange={filterChange}\n selectedSeries={visibleSegments}\n i18nStrings={i18nStrings}\n />\n )}\n {additionalFilters}\n </InternalSpaceBetween>\n </InternalBox>\n )}\n\n <InternalPieChart\n {...props}\n variant={variant}\n size={size}\n data={externalData}\n visibleData={visibleData}\n width={containerWidth}\n statusType={statusType}\n hideTitles={hideTitles}\n hideDescriptions={hideDescriptions}\n hideLegend={hideLegend}\n hideFilter={hideFilter}\n additionalFilters={additionalFilters}\n i18nStrings={i18nStrings}\n onHighlightChange={onHighlightChange}\n highlightedSegment={highlightedSegment}\n legendSegment={legendSegment}\n pinnedSegment={pinnedSegment}\n setPinnedSegment={setPinnedSegment}\n detailPopoverSize={detailPopoverSize}\n />\n\n {!hideLegend && !isEmpty && statusType === 'finished' && (\n <InternalBox margin={{ top: 'm' }}>\n <Legend<T>\n series={legendItems}\n highlightedSeries={legendSegment}\n legendTitle={legendTitle}\n ariaLabel={i18nStrings?.legendAriaLabel}\n onHighlightChange={onHighlightChange}\n plotContainerRef={containerRef}\n />\n </InternalBox>\n )}\n </div>\n );\n};\n\napplyDisplayName(PieChart, 'PieChart');\nexport default PieChart;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pie-chart/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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport Legend, { ChartLegendProps } from '../internal/components/chart-legend';\nimport Filter, { ChartFilterProps } from '../internal/components/chart-filter';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalBox from '../box/internal';\n\nimport InternalPieChart, { InternalChartDatum } from './pie-chart';\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport createCategoryColorScale from '../internal/utils/create-category-color-scale';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { nodeContains } from '../internal/utils/dom';\n\nexport { PieChartProps };\n\nconst PieChart = function PieChart<T extends PieChartProps.Datum = PieChartProps.Datum>({\n variant = 'pie',\n size = 'medium',\n hideTitles = false,\n hideDescriptions = false,\n hideLegend = false,\n hideFilter = false,\n statusType = 'finished',\n data: externalData = [],\n i18nStrings = {},\n highlightedSegment: controlledHighlightedSegment,\n visibleSegments: controlledVisibleSegments,\n onHighlightChange: controlledOnHighlightChange,\n onFilterChange,\n additionalFilters,\n legendTitle,\n detailPopoverSize = 'medium',\n ...props\n}: PieChartProps<T>) {\n const { __internalRootRef = null } = useBaseComponent('PieChart');\n const baseProps = getBaseProps(props);\n const isEmpty = !externalData || externalData.length === 0;\n const containerAttr = {\n ...baseProps,\n className: clsx(baseProps.className, styles.root),\n };\n const containerRef = useRef<HTMLDivElement>(null);\n const [containerWidth, measureRef] = useContainerWidth();\n\n const data: ReadonlyArray<InternalChartDatum<T>> = useMemo(() => {\n const colors = createCategoryColorScale(externalData, undefined, it => it.color || null);\n\n return externalData.map((datum, i) => ({\n index: i,\n color: colors[i],\n datum,\n }));\n }, [externalData]);\n\n const [highlightedSegment = null, setHighlightedSegment] = useControllable(\n controlledHighlightedSegment,\n controlledOnHighlightChange,\n null,\n {\n componentName: 'PieChart',\n controlledProp: 'highlightedSegment',\n changeHandler: 'onHighlightChange',\n }\n );\n const [legendSegment, setLegendSegment] = useState<null | T>(highlightedSegment);\n useEffect(() => {\n setLegendSegment(controlledHighlightedSegment || null);\n }, [controlledHighlightedSegment]);\n\n const [visibleSegments, setVisibleSegments] = useControllable(\n controlledVisibleSegments,\n onFilterChange,\n externalData,\n {\n componentName: 'PieChart',\n controlledProp: 'visibleSegments',\n changeHandler: 'onFilterChange',\n }\n );\n\n const [pinnedSegment, setPinnedSegment] = useState<T | null>(null);\n\n const visibleData = useMemo(\n () => data.filter(d => visibleSegments?.indexOf(d.datum) !== -1),\n [data, visibleSegments]\n );\n\n const filterItems: ChartFilterProps<T>['series'] = data?.map(data => ({\n label: data.datum.title,\n color: data.color,\n type: 'rectangle',\n datum: data.datum,\n }));\n\n const legendItems: ChartLegendProps<T>['series'] = filterItems.filter(d => visibleSegments?.indexOf(d.datum) !== -1);\n\n const filterChange = useCallback(\n (selectedSeries: ReadonlyArray<T>) => {\n setVisibleSegments(selectedSeries);\n fireNonCancelableEvent(onFilterChange, {\n visibleSegments: selectedSeries,\n });\n },\n [setVisibleSegments, onFilterChange]\n );\n\n const onHighlightChange = useCallback(\n (segment: T | null) => {\n setLegendSegment(segment);\n setHighlightedSegment(segment);\n fireNonCancelableEvent(controlledOnHighlightChange, { highlightedSegment: segment });\n },\n [controlledOnHighlightChange, setHighlightedSegment]\n );\n\n const onBlur = (event: React.FocusEvent) => {\n if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {\n highlightedSegment && onHighlightChange(null);\n setLegendSegment(null);\n }\n };\n\n const mergedRef = useMergeRefs(containerRef, measureRef, __internalRootRef);\n\n return (\n <div {...containerAttr} ref={mergedRef} onBlur={onBlur}>\n {statusType === 'finished' && !isEmpty && (\n <InternalBox className={styles['filter-container']} margin={{ bottom: 'l' }}>\n <InternalSpaceBetween\n size=\"l\"\n direction=\"horizontal\"\n className={clsx({\n [styles['has-default-filter']]: !hideFilter,\n })}\n >\n {!hideFilter && (\n <Filter\n series={filterItems}\n onChange={filterChange}\n selectedSeries={visibleSegments}\n i18nStrings={i18nStrings}\n />\n )}\n {additionalFilters}\n </InternalSpaceBetween>\n </InternalBox>\n )}\n\n <InternalPieChart\n {...props}\n variant={variant}\n size={size}\n data={externalData}\n visibleData={visibleData}\n width={containerWidth}\n statusType={statusType}\n hideTitles={hideTitles}\n hideDescriptions={hideDescriptions}\n hideLegend={hideLegend}\n hideFilter={hideFilter}\n additionalFilters={additionalFilters}\n i18nStrings={i18nStrings}\n onHighlightChange={onHighlightChange}\n highlightedSegment={highlightedSegment}\n legendSegment={legendSegment}\n pinnedSegment={pinnedSegment}\n setPinnedSegment={setPinnedSegment}\n detailPopoverSize={detailPopoverSize}\n />\n\n {!hideLegend && !isEmpty && statusType === 'finished' && (\n <InternalBox margin={{ top: 'm' }}>\n <Legend<T>\n series={legendItems}\n highlightedSeries={legendSegment}\n legendTitle={legendTitle}\n ariaLabel={i18nStrings?.legendAriaLabel}\n onHighlightChange={onHighlightChange}\n plotContainerRef={containerRef}\n />\n </InternalBox>\n )}\n </div>\n );\n};\n\napplyDisplayName(PieChart, 'PieChart');\nexport default PieChart;\n"]}
|
package/pie-chart/labels.js
CHANGED
|
@@ -7,8 +7,7 @@ import styles from './styles.css.js';
|
|
|
7
7
|
import { dimensionsBySize, balanceLabelNodes } from './utils';
|
|
8
8
|
import { useResizeObserver } from '../internal/hooks/container-queries';
|
|
9
9
|
import ResponsiveText from './responsive-text';
|
|
10
|
-
function LabelElement(
|
|
11
|
-
var x = _a.x, y = _a.y, hideTitles = _a.hideTitles, hideDescriptions = _a.hideDescriptions, rightSide = _a.rightSide, title = _a.title, description = _a.description, containerBoundaries = _a.containerBoundaries;
|
|
10
|
+
function LabelElement({ x, y, hideTitles, hideDescriptions, rightSide, title, description, containerBoundaries, }) {
|
|
12
11
|
return (
|
|
13
12
|
// Reset the transform property to prepare for `balanceLabelNodes`.
|
|
14
13
|
// The dataset attributes are also needed in the function for IE11 support.
|
|
@@ -16,75 +15,72 @@ function LabelElement(_a) {
|
|
|
16
15
|
!hideTitles && (React.createElement(ResponsiveText, { x: x, y: y, rightSide: rightSide, containerBoundaries: containerBoundaries }, title)),
|
|
17
16
|
!hideDescriptions && description && (React.createElement(ResponsiveText, { x: x, y: y + (hideTitles ? 0 : 18), rightSide: rightSide, className: styles.label__description, containerBoundaries: containerBoundaries }, description))));
|
|
18
17
|
}
|
|
19
|
-
export default (
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var _a = dimensionsBySize[size], radius = _a.outerRadius, innerLabelPadding = _a.innerLabelPadding;
|
|
18
|
+
export default ({ pieData, size, highlightedSegment, segmentDescription, visibleDataSum, hideTitles, hideDescriptions, containerRef, }) => {
|
|
19
|
+
const containerBoundaries = useElementBoundaries(containerRef);
|
|
20
|
+
const markers = useMemo(() => {
|
|
21
|
+
const { outerRadius: radius, innerLabelPadding } = dimensionsBySize[size];
|
|
24
22
|
// More arc factories for the label positioning
|
|
25
|
-
|
|
23
|
+
const arcMarkerStart = arc()
|
|
26
24
|
.innerRadius(radius - 1)
|
|
27
25
|
.outerRadius(radius - 1);
|
|
28
|
-
|
|
26
|
+
const arcMarkerBreak = arc()
|
|
29
27
|
.innerRadius(radius + innerLabelPadding)
|
|
30
28
|
.outerRadius(radius + innerLabelPadding);
|
|
31
|
-
return pieData.map(
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
return pieData.map((datum, i) => {
|
|
30
|
+
const labelDatum = pieData[i];
|
|
31
|
+
const midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;
|
|
34
32
|
// Make the marker line longer if the segment is closer to the top or bottom of the chart
|
|
35
33
|
arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));
|
|
36
34
|
arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
const [startX, startY] = arcMarkerStart.centroid(datum);
|
|
36
|
+
const [breakX, breakY] = arcMarkerBreak.centroid(datum);
|
|
37
|
+
const rightSide = midAngle < Math.PI;
|
|
38
|
+
const endX = (radius + 20) * (rightSide ? 1 : -1);
|
|
39
|
+
const textX = endX + 5 * (rightSide ? 1 : -1);
|
|
42
40
|
return {
|
|
43
|
-
startX
|
|
44
|
-
startY
|
|
45
|
-
breakX
|
|
46
|
-
breakY
|
|
47
|
-
endX
|
|
41
|
+
startX,
|
|
42
|
+
startY,
|
|
43
|
+
breakX,
|
|
44
|
+
breakY,
|
|
45
|
+
endX,
|
|
48
46
|
endY: breakY,
|
|
49
|
-
textX
|
|
47
|
+
textX,
|
|
50
48
|
textY: breakY,
|
|
51
|
-
rightSide
|
|
52
|
-
datum
|
|
49
|
+
rightSide,
|
|
50
|
+
datum,
|
|
53
51
|
};
|
|
54
52
|
});
|
|
55
53
|
}, [pieData, size]);
|
|
56
|
-
|
|
57
|
-
useLayoutEffect(
|
|
54
|
+
const rootRef = useRef(null);
|
|
55
|
+
useLayoutEffect(() => {
|
|
58
56
|
if (!rootRef.current) {
|
|
59
57
|
return;
|
|
60
58
|
}
|
|
61
59
|
// Relax labels that are overlapping
|
|
62
|
-
|
|
60
|
+
const labelNodes = rootRef.current.querySelectorAll(`.${styles['label-text']}`);
|
|
63
61
|
balanceLabelNodes(labelNodes, markers, false);
|
|
64
62
|
balanceLabelNodes(labelNodes, markers, true);
|
|
65
63
|
}, [markers, pieData]);
|
|
66
|
-
return (React.createElement("g", { className: styles.markers, "aria-hidden": "true", ref: rootRef }, markers.map(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
var segment = datum.data.datum;
|
|
70
|
-
var description = segmentDescription === null || segmentDescription === void 0 ? void 0 : segmentDescription(segment, visibleDataSum);
|
|
64
|
+
return (React.createElement("g", { className: styles.markers, "aria-hidden": "true", ref: rootRef }, markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {
|
|
65
|
+
const segment = datum.data.datum;
|
|
66
|
+
const description = segmentDescription === null || segmentDescription === void 0 ? void 0 : segmentDescription(segment, visibleDataSum);
|
|
71
67
|
if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {
|
|
72
68
|
return null;
|
|
73
69
|
}
|
|
74
|
-
return (React.createElement("g", { key: datum.data.index, className: clsx(styles.label,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
70
|
+
return (React.createElement("g", { key: datum.data.index, className: clsx(styles.label, {
|
|
71
|
+
[styles['label--highlighted']]: highlightedSegment === segment,
|
|
72
|
+
[styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,
|
|
73
|
+
[styles['label--align-right']]: !rightSide,
|
|
74
|
+
}) },
|
|
79
75
|
React.createElement("line", { x1: startX, y1: startY, x2: breakX, y2: breakY }),
|
|
80
76
|
React.createElement("line", { x1: breakX, y1: breakY, x2: endX, y2: endY, className: styles['label-line'] }),
|
|
81
77
|
React.createElement(LabelElement, { x: textX, y: textY, rightSide: rightSide, title: segment.title, description: description, hideTitles: hideTitles, hideDescriptions: hideDescriptions, containerBoundaries: containerBoundaries })));
|
|
82
78
|
})));
|
|
83
|
-
}
|
|
79
|
+
};
|
|
84
80
|
function useElementBoundaries(ref) {
|
|
85
|
-
|
|
86
|
-
useResizeObserver(ref,
|
|
87
|
-
|
|
81
|
+
const [state, setState] = useState({ left: 0, right: 0 });
|
|
82
|
+
useResizeObserver(ref, entry => {
|
|
83
|
+
const elementRect = entry.target.getBoundingClientRect();
|
|
88
84
|
setState({ left: elementRect.left, right: elementRect.right });
|
|
89
85
|
});
|
|
90
86
|
return state;
|
package/pie-chart/labels.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../src/pie-chart/labels.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, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { InternalChartDatum } from './pie-chart';\nimport { dimensionsBySize, balanceLabelNodes } from './utils';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\nimport ResponsiveText from './responsive-text';\n\nexport interface LabelsProps<T> {\n pieData: PieArcDatum<InternalChartDatum<T>>[];\n visibleDataSum: number;\n size: NonNullable<PieChartProps['size']>;\n hideTitles: boolean;\n hideDescriptions: boolean;\n highlightedSegment: PieChartProps.Datum | null;\n segmentDescription?: PieChartProps.SegmentDescriptionFunction<T>;\n containerRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface LabelElementProps {\n x: number;\n y: number;\n rightSide: boolean;\n hideTitles: boolean;\n hideDescriptions: boolean;\n title: PieChartProps.Datum['title'];\n description?: string;\n containerBoundaries: null | { left: number; right: number };\n}\n\nfunction LabelElement({\n x,\n y,\n hideTitles,\n hideDescriptions,\n rightSide,\n title,\n description,\n containerBoundaries,\n}: LabelElementProps) {\n return (\n // Reset the transform property to prepare for `balanceLabelNodes`.\n // The dataset attributes are also needed in the function for IE11 support.\n <g className={styles['label-text']} transform=\"\" data-x={x} data-y={y}>\n {!hideTitles && (\n <ResponsiveText x={x} y={y} rightSide={rightSide} containerBoundaries={containerBoundaries}>\n {title}\n </ResponsiveText>\n )}\n {!hideDescriptions && description && (\n <ResponsiveText\n x={x}\n y={y + (hideTitles ? 0 : 18)}\n rightSide={rightSide}\n className={styles.label__description}\n containerBoundaries={containerBoundaries}\n >\n {description}\n </ResponsiveText>\n )}\n </g>\n );\n}\n\nexport default <T extends PieChartProps.Datum>({\n pieData,\n size,\n highlightedSegment,\n segmentDescription,\n visibleDataSum,\n hideTitles,\n hideDescriptions,\n containerRef,\n}: LabelsProps<T>) => {\n const containerBoundaries = useElementBoundaries(containerRef);\n\n const markers = useMemo(() => {\n const { outerRadius: radius, innerLabelPadding } = dimensionsBySize[size];\n\n // More arc factories for the label positioning\n const arcMarkerStart = arc<PieArcDatum<any>>()\n .innerRadius(radius - 1)\n .outerRadius(radius - 1);\n\n const arcMarkerBreak = arc<PieArcDatum<any>>()\n .innerRadius(radius + innerLabelPadding)\n .outerRadius(radius + innerLabelPadding);\n\n return pieData.map((datum, i) => {\n const labelDatum = pieData[i];\n const midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;\n\n // Make the marker line longer if the segment is closer to the top or bottom of the chart\n arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n const [startX, startY] = arcMarkerStart.centroid(datum);\n const [breakX, breakY] = arcMarkerBreak.centroid(datum);\n\n const rightSide = midAngle < Math.PI;\n const endX = (radius + 20) * (rightSide ? 1 : -1);\n const textX = endX + 5 * (rightSide ? 1 : -1);\n\n return {\n startX,\n startY,\n breakX,\n breakY,\n endX,\n endY: breakY,\n textX,\n textY: breakY,\n rightSide,\n datum,\n };\n });\n }, [pieData, size]);\n\n const rootRef = useRef<SVGGElement>(null);\n\n useLayoutEffect(() => {\n if (!rootRef.current) {\n return;\n }\n\n // Relax labels that are overlapping\n const labelNodes = rootRef.current.querySelectorAll<SVGGElement>(`.${styles['label-text']}`);\n balanceLabelNodes(labelNodes, markers, false);\n balanceLabelNodes(labelNodes, markers, true);\n }, [markers, pieData]);\n\n return (\n <g className={styles.markers} aria-hidden=\"true\" ref={rootRef}>\n {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n const segment = datum.data.datum;\n const description = segmentDescription?.(segment, visibleDataSum);\n if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n return null;\n }\n return (\n <g\n key={datum.data.index}\n className={clsx(styles.label, {\n [styles['label--highlighted']]: highlightedSegment === segment,\n [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,\n [styles['label--align-right']]: !rightSide,\n })}\n >\n <line x1={startX} y1={startY} x2={breakX} y2={breakY} />\n <line x1={breakX} y1={breakY} x2={endX} y2={endY} className={styles['label-line']} />\n <LabelElement\n x={textX}\n y={textY}\n rightSide={rightSide}\n title={segment.title}\n description={description}\n hideTitles={hideTitles}\n hideDescriptions={hideDescriptions}\n containerBoundaries={containerBoundaries}\n />\n </g>\n );\n })}\n </g>\n );\n};\n\nfunction useElementBoundaries(ref: React.RefObject<HTMLElement>): { left: number; right: number } {\n const [state, setState] = useState({ left: 0, right: 0 });\n useResizeObserver(ref, entry => {\n const elementRect = entry.target.getBoundingClientRect();\n setState({ left: elementRect.left, right: elementRect.right });\n });\n return state;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../src/pie-chart/labels.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, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { InternalChartDatum } from './pie-chart';\nimport { dimensionsBySize, balanceLabelNodes } from './utils';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\nimport ResponsiveText from './responsive-text';\n\nexport interface LabelsProps<T> {\n pieData: PieArcDatum<InternalChartDatum<T>>[];\n visibleDataSum: number;\n size: NonNullable<PieChartProps['size']>;\n hideTitles: boolean;\n hideDescriptions: boolean;\n highlightedSegment: PieChartProps.Datum | null;\n segmentDescription?: PieChartProps.SegmentDescriptionFunction<T>;\n containerRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface LabelElementProps {\n x: number;\n y: number;\n rightSide: boolean;\n hideTitles: boolean;\n hideDescriptions: boolean;\n title: PieChartProps.Datum['title'];\n description?: string;\n containerBoundaries: null | { left: number; right: number };\n}\n\nfunction LabelElement({\n x,\n y,\n hideTitles,\n hideDescriptions,\n rightSide,\n title,\n description,\n containerBoundaries,\n}: LabelElementProps) {\n return (\n // Reset the transform property to prepare for `balanceLabelNodes`.\n // The dataset attributes are also needed in the function for IE11 support.\n <g className={styles['label-text']} transform=\"\" data-x={x} data-y={y}>\n {!hideTitles && (\n <ResponsiveText x={x} y={y} rightSide={rightSide} containerBoundaries={containerBoundaries}>\n {title}\n </ResponsiveText>\n )}\n {!hideDescriptions && description && (\n <ResponsiveText\n x={x}\n y={y + (hideTitles ? 0 : 18)}\n rightSide={rightSide}\n className={styles.label__description}\n containerBoundaries={containerBoundaries}\n >\n {description}\n </ResponsiveText>\n )}\n </g>\n );\n}\n\nexport default <T extends PieChartProps.Datum>({\n pieData,\n size,\n highlightedSegment,\n segmentDescription,\n visibleDataSum,\n hideTitles,\n hideDescriptions,\n containerRef,\n}: LabelsProps<T>) => {\n const containerBoundaries = useElementBoundaries(containerRef);\n\n const markers = useMemo(() => {\n const { outerRadius: radius, innerLabelPadding } = dimensionsBySize[size];\n\n // More arc factories for the label positioning\n const arcMarkerStart = arc<PieArcDatum<any>>()\n .innerRadius(radius - 1)\n .outerRadius(radius - 1);\n\n const arcMarkerBreak = arc<PieArcDatum<any>>()\n .innerRadius(radius + innerLabelPadding)\n .outerRadius(radius + innerLabelPadding);\n\n return pieData.map((datum, i) => {\n const labelDatum = pieData[i];\n const midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;\n\n // Make the marker line longer if the segment is closer to the top or bottom of the chart\n arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n const [startX, startY] = arcMarkerStart.centroid(datum);\n const [breakX, breakY] = arcMarkerBreak.centroid(datum);\n\n const rightSide = midAngle < Math.PI;\n const endX = (radius + 20) * (rightSide ? 1 : -1);\n const textX = endX + 5 * (rightSide ? 1 : -1);\n\n return {\n startX,\n startY,\n breakX,\n breakY,\n endX,\n endY: breakY,\n textX,\n textY: breakY,\n rightSide,\n datum,\n };\n });\n }, [pieData, size]);\n\n const rootRef = useRef<SVGGElement>(null);\n\n useLayoutEffect(() => {\n if (!rootRef.current) {\n return;\n }\n\n // Relax labels that are overlapping\n const labelNodes = rootRef.current.querySelectorAll<SVGGElement>(`.${styles['label-text']}`);\n balanceLabelNodes(labelNodes, markers, false);\n balanceLabelNodes(labelNodes, markers, true);\n }, [markers, pieData]);\n\n return (\n <g className={styles.markers} aria-hidden=\"true\" ref={rootRef}>\n {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n const segment = datum.data.datum;\n const description = segmentDescription?.(segment, visibleDataSum);\n if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n return null;\n }\n return (\n <g\n key={datum.data.index}\n className={clsx(styles.label, {\n [styles['label--highlighted']]: highlightedSegment === segment,\n [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,\n [styles['label--align-right']]: !rightSide,\n })}\n >\n <line x1={startX} y1={startY} x2={breakX} y2={breakY} />\n <line x1={breakX} y1={breakY} x2={endX} y2={endY} className={styles['label-line']} />\n <LabelElement\n x={textX}\n y={textY}\n rightSide={rightSide}\n title={segment.title}\n description={description}\n hideTitles={hideTitles}\n hideDescriptions={hideDescriptions}\n containerBoundaries={containerBoundaries}\n />\n </g>\n );\n })}\n </g>\n );\n};\n\nfunction useElementBoundaries(ref: React.RefObject<HTMLElement>): { left: number; right: number } {\n const [state, setState] = useState({ left: 0, right: 0 });\n useResizeObserver(ref, entry => {\n const elementRect = entry.target.getBoundingClientRect();\n setState({ left: elementRect.left, right: elementRect.right });\n });\n return state;\n}\n"]}
|