@cloudscape-design/components 3.0.221 → 3.0.222
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alert/index.js +4 -4
- package/alert/index.js.map +1 -1
- package/alert/internal.js +14 -15
- package/alert/internal.js.map +1 -1
- package/annotation-context/annotation/annotation-icon.js +1 -2
- package/annotation-context/annotation/annotation-icon.js.map +1 -1
- package/annotation-context/annotation/annotation-popover.js +6 -7
- package/annotation-context/annotation/annotation-popover.js.map +1 -1
- package/annotation-context/annotation/annotation-trigger.js +4 -6
- package/annotation-context/annotation/annotation-trigger.js.map +1 -1
- package/annotation-context/annotation/closed-annotation.js +4 -5
- package/annotation-context/annotation/closed-annotation.js.map +1 -1
- package/annotation-context/annotation/open-annotation.js +2 -3
- package/annotation-context/annotation/open-annotation.js.map +1 -1
- package/annotation-context/context.js +7 -7
- package/annotation-context/context.js.map +1 -1
- package/annotation-context/index.js +62 -69
- package/annotation-context/index.js.map +1 -1
- package/app-layout/content-wrapper/index.js +2 -3
- package/app-layout/content-wrapper/index.js.map +1 -1
- package/app-layout/defaults.js +13 -14
- package/app-layout/defaults.js.map +1 -1
- package/app-layout/drawer.js +16 -18
- package/app-layout/drawer.js.map +1 -1
- package/app-layout/index.js +111 -113
- package/app-layout/index.js.map +1 -1
- package/app-layout/mobile-toolbar/index.js +7 -9
- package/app-layout/mobile-toolbar/index.js.map +1 -1
- package/app-layout/navigation-panel.js +5 -8
- package/app-layout/navigation-panel.js.map +1 -1
- package/app-layout/notifications/index.js +2 -2
- package/app-layout/notifications/index.js.map +1 -1
- package/app-layout/toggles/index.js +14 -22
- package/app-layout/toggles/index.js.map +1 -1
- package/app-layout/tools-and-split-panel.js +6 -9
- package/app-layout/tools-and-split-panel.js.map +1 -1
- package/app-layout/utils/use-content-height.js +14 -15
- package/app-layout/utils/use-content-height.js.map +1 -1
- package/app-layout/utils/use-content-width.js +8 -8
- package/app-layout/utils/use-content-width.js.map +1 -1
- package/app-layout/utils/use-focus-control.js +7 -8
- package/app-layout/utils/use-focus-control.js.map +1 -1
- package/app-layout/utils/use-observed-element.js +3 -3
- package/app-layout/utils/use-observed-element.js.map +1 -1
- package/app-layout/utils/use-window-width.js +4 -4
- package/app-layout/utils/use-window-width.js.map +1 -1
- package/app-layout/visual-refresh/app-bar.js +19 -20
- package/app-layout/visual-refresh/app-bar.js.map +1 -1
- package/app-layout/visual-refresh/background.js +9 -10
- package/app-layout/visual-refresh/background.js.map +1 -1
- package/app-layout/visual-refresh/context.js +101 -59
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/header.js +6 -7
- package/app-layout/visual-refresh/header.js.map +1 -1
- package/app-layout/visual-refresh/index.js +3 -4
- package/app-layout/visual-refresh/index.js.map +1 -1
- package/app-layout/visual-refresh/layout.js +18 -21
- package/app-layout/visual-refresh/layout.js.map +1 -1
- package/app-layout/visual-refresh/main.js +17 -18
- package/app-layout/visual-refresh/main.js.map +1 -1
- package/app-layout/visual-refresh/navigation.js +22 -24
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh/notifications.js +6 -7
- package/app-layout/visual-refresh/notifications.js.map +1 -1
- package/app-layout/visual-refresh/split-panel.js +36 -43
- package/app-layout/visual-refresh/split-panel.js.map +1 -1
- package/app-layout/visual-refresh/tools.js +32 -34
- package/app-layout/visual-refresh/tools.js.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +5 -8
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/area-chart/chart-container.js +18 -19
- package/area-chart/chart-container.js.map +1 -1
- package/area-chart/elements/area-chart-filter.js +7 -8
- package/area-chart/elements/area-chart-filter.js.map +1 -1
- package/area-chart/elements/area-chart-legend.js +6 -9
- package/area-chart/elements/area-chart-legend.js.map +1 -1
- package/area-chart/elements/area-series.js +12 -13
- package/area-chart/elements/area-series.js.map +1 -1
- package/area-chart/elements/chart-popover.js +4 -6
- package/area-chart/elements/chart-popover.js.map +1 -1
- package/area-chart/elements/data-series.js +14 -17
- package/area-chart/elements/data-series.js.map +1 -1
- package/area-chart/elements/highlighted-point.js +6 -7
- package/area-chart/elements/highlighted-point.js.map +1 -1
- package/area-chart/elements/threshold-series.js +5 -7
- package/area-chart/elements/threshold-series.js.map +1 -1
- package/area-chart/elements/use-highlight-details.js +28 -30
- package/area-chart/elements/use-highlight-details.js.map +1 -1
- package/area-chart/elements/vertical-marker.js +6 -7
- package/area-chart/elements/vertical-marker.js.map +1 -1
- package/area-chart/index.js +4 -4
- package/area-chart/index.js.map +1 -1
- package/area-chart/internal.js +40 -41
- package/area-chart/internal.js.map +1 -1
- package/area-chart/model/async-store.js +23 -30
- package/area-chart/model/async-store.js.map +1 -1
- package/area-chart/model/compute-chart-props.js +11 -12
- package/area-chart/model/compute-chart-props.js.map +1 -1
- package/area-chart/model/create-series-decorator.js +11 -13
- package/area-chart/model/create-series-decorator.js.map +1 -1
- package/area-chart/model/interactions-store.js +47 -54
- package/area-chart/model/interactions-store.js.map +1 -1
- package/area-chart/model/use-chart-model.js +85 -89
- package/area-chart/model/use-chart-model.js.map +1 -1
- package/area-chart/model/use-filter-props.js +6 -6
- package/area-chart/model/use-filter-props.js.map +1 -1
- package/area-chart/model/use-highlight-props.js +6 -6
- package/area-chart/model/use-highlight-props.js.map +1 -1
- package/area-chart/model/utils.js +46 -59
- package/area-chart/model/utils.js.map +1 -1
- package/attribute-editor/additional-info.js +2 -5
- package/attribute-editor/additional-info.js.map +1 -1
- package/attribute-editor/index.js +5 -5
- package/attribute-editor/index.js.map +1 -1
- package/attribute-editor/internal.js +20 -20
- package/attribute-editor/internal.js.map +1 -1
- package/attribute-editor/row.js +17 -25
- package/attribute-editor/row.js.map +1 -1
- package/autosuggest/autosuggest-option.js +12 -12
- package/autosuggest/autosuggest-option.js.map +1 -1
- package/autosuggest/index.js +6 -6
- package/autosuggest/index.js.map +1 -1
- package/autosuggest/internal.js +39 -39
- package/autosuggest/internal.js.map +1 -1
- package/autosuggest/load-more-controller.js +10 -14
- package/autosuggest/load-more-controller.js.map +1 -1
- package/autosuggest/options-controller.js +31 -32
- package/autosuggest/options-controller.js.map +1 -1
- package/autosuggest/options-list.js +12 -13
- package/autosuggest/options-list.js.map +1 -1
- package/autosuggest/plain-list.js +15 -17
- package/autosuggest/plain-list.js.map +1 -1
- package/autosuggest/utils/utils.js +12 -12
- package/autosuggest/utils/utils.js.map +1 -1
- package/autosuggest/virtual-list.js +14 -16
- package/autosuggest/virtual-list.js.map +1 -1
- package/badge/index.js +6 -6
- package/badge/index.js.map +1 -1
- package/bar-chart/index.js +6 -6
- package/bar-chart/index.js.map +1 -1
- package/box/index.js +4 -4
- package/box/index.js.map +1 -1
- package/box/internal.js +12 -12
- package/box/internal.js.map +1 -1
- package/breadcrumb-group/index.js +4 -4
- package/breadcrumb-group/index.js.map +1 -1
- package/breadcrumb-group/internal.js +24 -25
- package/breadcrumb-group/internal.js.map +1 -1
- package/breadcrumb-group/item/item.js +32 -34
- package/breadcrumb-group/item/item.js.map +1 -1
- package/button/icon-helper.js +6 -6
- package/button/icon-helper.js.map +1 -1
- package/button/index.js +6 -6
- package/button/index.js.map +1 -1
- package/button/internal.js +32 -33
- package/button/internal.js.map +1 -1
- package/button-dropdown/category-elements/category-element.js +3 -5
- package/button-dropdown/category-elements/category-element.js.map +1 -1
- package/button-dropdown/category-elements/expandable-category-element.js +23 -26
- package/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
- package/button-dropdown/category-elements/mobile-expandable-category-element.js +27 -30
- package/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
- package/button-dropdown/index.js +6 -6
- package/button-dropdown/index.js.map +1 -1
- package/button-dropdown/internal.js +28 -29
- package/button-dropdown/internal.js.map +1 -1
- package/button-dropdown/item-element/index.js +30 -36
- package/button-dropdown/item-element/index.js.map +1 -1
- package/button-dropdown/items-list.js +3 -4
- package/button-dropdown/items-list.js.map +1 -1
- package/button-dropdown/mobile-expandable-group/mobile-expandable-group.js +2 -4
- package/button-dropdown/mobile-expandable-group/mobile-expandable-group.js.map +1 -1
- package/button-dropdown/tooltip.js +22 -24
- package/button-dropdown/tooltip.js.map +1 -1
- package/button-dropdown/utils/create-items-tree.js +21 -23
- package/button-dropdown/utils/create-items-tree.js.map +1 -1
- package/button-dropdown/utils/menu-item.js +6 -9
- package/button-dropdown/utils/menu-item.js.map +1 -1
- package/button-dropdown/utils/move-highlight.js +3 -4
- package/button-dropdown/utils/move-highlight.js.map +1 -1
- package/button-dropdown/utils/use-button-dropdown.js +31 -33
- package/button-dropdown/utils/use-button-dropdown.js.map +1 -1
- package/button-dropdown/utils/use-hidden-description.js +3 -3
- package/button-dropdown/utils/use-hidden-description.js.map +1 -1
- package/button-dropdown/utils/use-highlighted-menu.js +40 -42
- package/button-dropdown/utils/use-highlighted-menu.js.map +1 -1
- package/button-dropdown/utils/utils.js +5 -9
- package/button-dropdown/utils/utils.js.map +1 -1
- package/calendar/grid/index.js +25 -28
- package/calendar/grid/index.js.map +1 -1
- package/calendar/header/header-button.js +4 -6
- package/calendar/header/header-button.js.map +1 -1
- package/calendar/header/index.js +1 -2
- package/calendar/header/index.js.map +1 -1
- package/calendar/index.js +4 -4
- package/calendar/index.js.map +1 -1
- package/calendar/internal.js +27 -27
- package/calendar/internal.js.map +1 -1
- package/calendar/utils/intl.js +12 -13
- package/calendar/utils/intl.js.map +1 -1
- package/calendar/utils/navigation.js +3 -3
- package/calendar/utils/navigation.js.map +1 -1
- package/cards/cards-layout-helper.js +12 -12
- package/cards/cards-layout-helper.js.map +1 -1
- package/cards/index.js +53 -63
- package/cards/index.js.map +1 -1
- package/checkbox/index.js +4 -4
- package/checkbox/index.js.map +1 -1
- package/checkbox/internal.d.ts +1 -0
- package/checkbox/internal.d.ts.map +1 -1
- package/checkbox/internal.js +9 -9
- package/checkbox/internal.js.map +1 -1
- package/code-editor/ace-modes.js +1 -1
- package/code-editor/ace-modes.js.map +1 -1
- package/code-editor/ace-themes.js +2 -2
- package/code-editor/ace-themes.js.map +1 -1
- package/code-editor/error-screen.js +3 -4
- package/code-editor/error-screen.js.map +1 -1
- package/code-editor/index.js +61 -65
- package/code-editor/index.js.map +1 -1
- package/code-editor/listeners.js +5 -5
- package/code-editor/listeners.js.map +1 -1
- package/code-editor/loading-screen.js +2 -2
- package/code-editor/loading-screen.js.map +1 -1
- package/code-editor/pane.js +21 -25
- package/code-editor/pane.js.map +1 -1
- package/code-editor/preferences-modal.js +12 -13
- package/code-editor/preferences-modal.js.map +1 -1
- package/code-editor/resizable-box/index.js +14 -15
- package/code-editor/resizable-box/index.js.map +1 -1
- package/code-editor/setup-editor.js +20 -20
- package/code-editor/setup-editor.js.map +1 -1
- package/code-editor/status-bar.js +19 -22
- package/code-editor/status-bar.js.map +1 -1
- package/code-editor/tab-button.js +7 -10
- package/code-editor/tab-button.js.map +1 -1
- package/code-editor/util.js +6 -6
- package/code-editor/util.js.map +1 -1
- package/collection-preferences/index.js +21 -23
- package/collection-preferences/index.js.map +1 -1
- package/collection-preferences/utils.js +25 -57
- package/collection-preferences/utils.js.map +1 -1
- package/collection-preferences/visible-content.js +23 -27
- package/collection-preferences/visible-content.js.map +1 -1
- package/column-layout/index.js +6 -6
- package/column-layout/index.js.map +1 -1
- package/column-layout/internal.js +20 -21
- package/column-layout/internal.js.map +1 -1
- package/column-layout/util.js +2 -2
- package/column-layout/util.js.map +1 -1
- package/container/index.js +5 -5
- package/container/index.js.map +1 -1
- package/container/internal.js +30 -31
- package/container/internal.js.map +1 -1
- package/container/use-sticky-header.js +25 -25
- package/container/use-sticky-header.js.map +1 -1
- package/content-layout/index.js +2 -3
- package/content-layout/index.js.map +1 -1
- package/content-layout/internal.js +15 -16
- package/content-layout/internal.js.map +1 -1
- package/date-input/index.js +3 -4
- package/date-input/index.js.map +1 -1
- package/date-input/internal.js +8 -8
- package/date-input/internal.js.map +1 -1
- package/date-picker/index.js +28 -28
- package/date-picker/index.js.map +1 -1
- package/date-range-picker/calendar/grids/grid.js +54 -57
- package/date-range-picker/calendar/grids/grid.js.map +1 -1
- package/date-range-picker/calendar/grids/index.js +27 -28
- package/date-range-picker/calendar/grids/index.js.map +1 -1
- package/date-range-picker/calendar/header/header-button.js +4 -6
- package/date-range-picker/calendar/header/header-button.js.map +1 -1
- package/date-range-picker/calendar/header/index.js +6 -7
- package/date-range-picker/calendar/header/index.js.map +1 -1
- package/date-range-picker/calendar/index.js +40 -45
- package/date-range-picker/calendar/index.js.map +1 -1
- package/date-range-picker/calendar/range-inputs.js +5 -6
- package/date-range-picker/calendar/range-inputs.js.map +1 -1
- package/date-range-picker/calendar/utils.js +2 -2
- package/date-range-picker/calendar/utils.js.map +1 -1
- package/date-range-picker/dropdown.js +29 -34
- package/date-range-picker/dropdown.js.map +1 -1
- package/date-range-picker/index.js +40 -43
- package/date-range-picker/index.js.map +1 -1
- package/date-range-picker/mode-switcher.js +2 -3
- package/date-range-picker/mode-switcher.js.map +1 -1
- package/date-range-picker/relative-range/index.js +36 -40
- package/date-range-picker/relative-range/index.js.map +1 -1
- package/date-range-picker/time-offset.js +5 -5
- package/date-range-picker/time-offset.js.map +1 -1
- package/date-range-picker/utils.js +4 -5
- package/date-range-picker/utils.js.map +1 -1
- package/expandable-section/expandable-section-container.js +5 -5
- package/expandable-section/expandable-section-container.js.map +1 -1
- package/expandable-section/expandable-section-header.js +18 -23
- package/expandable-section/expandable-section-header.js.map +1 -1
- package/expandable-section/index.js +4 -4
- package/expandable-section/index.js.map +1 -1
- package/expandable-section/internal.js +22 -22
- package/expandable-section/internal.js.map +1 -1
- package/flashbar/collapsible-flashbar.js +103 -118
- package/flashbar/collapsible-flashbar.js.map +1 -1
- package/flashbar/common.js +26 -35
- package/flashbar/common.js.map +1 -1
- package/flashbar/constant.js +1 -1
- package/flashbar/constant.js.map +1 -1
- package/flashbar/flash.js +23 -26
- package/flashbar/flash.js.map +1 -1
- package/flashbar/index.js +3 -4
- package/flashbar/index.js.map +1 -1
- package/flashbar/internal/analytics.js +12 -12
- package/flashbar/internal/analytics.js.map +1 -1
- package/flashbar/non-collapsible-flashbar.js +10 -10
- package/flashbar/non-collapsible-flashbar.js.map +1 -1
- package/flashbar/utils.js +25 -27
- package/flashbar/utils.js.map +1 -1
- package/form/index.js +4 -4
- package/form/index.js.map +1 -1
- package/form/internal.js +5 -6
- package/form/internal.js.map +1 -1
- package/form-field/index.js +4 -4
- package/form-field/index.js.map +1 -1
- package/form-field/internal.js +20 -23
- package/form-field/internal.js.map +1 -1
- package/form-field/util.js +9 -10
- package/form-field/util.js.map +1 -1
- package/grid/index.js +6 -6
- package/grid/index.js.map +1 -1
- package/grid/internal.js +14 -15
- package/grid/internal.js.map +1 -1
- package/header/index.js +4 -4
- package/header/index.js.map +1 -1
- package/header/internal.js +15 -15
- package/header/internal.js.map +1 -1
- package/help-panel/index.js +7 -7
- package/help-panel/index.js.map +1 -1
- package/hotspot/index.js +12 -12
- package/hotspot/index.js.map +1 -1
- package/icon/index.js +4 -4
- package/icon/index.js.map +1 -1
- package/icon/internal.js +18 -18
- package/icon/internal.js.map +1 -1
- package/input/index.js +36 -17
- package/input/index.js.map +1 -1
- package/input/internal.js +30 -25
- package/input/internal.js.map +1 -1
- package/input/utils.js +4 -5
- package/input/utils.js.map +1 -1
- package/internal/animate.js +27 -32
- package/internal/animate.js.map +1 -1
- package/internal/base-component/index.js +2 -2
- package/internal/base-component/index.js.map +1 -1
- package/internal/breakpoints.js +7 -12
- package/internal/breakpoints.js.map +1 -1
- package/internal/components/abstract-switch/index.d.ts +2 -1
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +19 -19
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/abstract-switch/styles.css.js +13 -12
- package/internal/components/abstract-switch/styles.scoped.css +21 -21
- package/internal/components/abstract-switch/styles.selectors.js +13 -12
- package/internal/components/autosuggest-input/index.js +38 -38
- package/internal/components/autosuggest-input/index.js.map +1 -1
- package/internal/components/button-trigger/index.js +7 -7
- package/internal/components/button-trigger/index.js.map +1 -1
- package/internal/components/cartesian-chart/axis-label.js +1 -2
- package/internal/components/cartesian-chart/axis-label.js.map +1 -1
- package/internal/components/cartesian-chart/bottom-labels.js +20 -26
- package/internal/components/cartesian-chart/bottom-labels.js.map +1 -1
- package/internal/components/cartesian-chart/constants.js +5 -5
- package/internal/components/cartesian-chart/constants.js.map +1 -1
- package/internal/components/cartesian-chart/emphasized-baseline.js +4 -5
- package/internal/components/cartesian-chart/emphasized-baseline.js.map +1 -1
- package/internal/components/cartesian-chart/highlighted-point.js +1 -2
- package/internal/components/cartesian-chart/highlighted-point.js.map +1 -1
- package/internal/components/cartesian-chart/label-utils.js +20 -24
- package/internal/components/cartesian-chart/label-utils.js.map +1 -1
- package/internal/components/cartesian-chart/labels-measure.js +6 -7
- package/internal/components/cartesian-chart/labels-measure.js.map +1 -1
- package/internal/components/cartesian-chart/left-labels.js +13 -17
- package/internal/components/cartesian-chart/left-labels.js.map +1 -1
- package/internal/components/cartesian-chart/scales.js +21 -26
- package/internal/components/cartesian-chart/scales.js.map +1 -1
- package/internal/components/cartesian-chart/ticks.js +9 -10
- package/internal/components/cartesian-chart/ticks.js.map +1 -1
- package/internal/components/cartesian-chart/vertical-grid-lines.js +3 -4
- package/internal/components/cartesian-chart/vertical-grid-lines.js.map +1 -1
- package/internal/components/cartesian-chart/vertical-marker.js +3 -4
- package/internal/components/cartesian-chart/vertical-marker.js.map +1 -1
- package/internal/components/chart-filter/index.js +13 -14
- package/internal/components/chart-filter/index.js.map +1 -1
- package/internal/components/chart-legend/index.js +26 -29
- package/internal/components/chart-legend/index.js.map +1 -1
- package/internal/components/chart-plot/application-controller.js +21 -25
- package/internal/components/chart-plot/application-controller.js.map +1 -1
- package/internal/components/chart-plot/focus-outline.js +7 -8
- package/internal/components/chart-plot/focus-outline.js.map +1 -1
- package/internal/components/chart-plot/index.js +33 -34
- package/internal/components/chart-plot/index.js.map +1 -1
- package/internal/components/chart-popover/index.js +11 -12
- package/internal/components/chart-popover/index.js.map +1 -1
- package/internal/components/chart-series-details/index.js +13 -17
- package/internal/components/chart-series-details/index.js.map +1 -1
- package/internal/components/chart-series-marker/index.js +2 -3
- package/internal/components/chart-series-marker/index.js.map +1 -1
- package/internal/components/chart-status-container/index.js +8 -10
- package/internal/components/chart-status-container/index.js.map +1 -1
- package/internal/components/checkbox-icon/index.js +18 -19
- package/internal/components/checkbox-icon/index.js.map +1 -1
- package/internal/components/dark-ribbon/index.js +13 -14
- package/internal/components/dark-ribbon/index.js.map +1 -1
- package/internal/components/dropdown/context.js +4 -5
- package/internal/components/dropdown/context.js.map +1 -1
- package/internal/components/dropdown/dropdown-fit-handler.js +74 -81
- package/internal/components/dropdown/dropdown-fit-handler.js.map +1 -1
- package/internal/components/dropdown/index.js +57 -65
- package/internal/components/dropdown/index.js.map +1 -1
- package/internal/components/dropdown-footer/index.js +2 -6
- package/internal/components/dropdown-footer/index.js.map +1 -1
- package/internal/components/dropdown-status/index.js +5 -7
- package/internal/components/dropdown-status/index.js.map +1 -1
- package/internal/components/filtering-token/index.js +4 -6
- package/internal/components/filtering-token/index.js.map +1 -1
- package/internal/components/focus-lock/index.js +10 -11
- package/internal/components/focus-lock/index.js.map +1 -1
- package/internal/components/focus-lock/utils.js +4 -4
- package/internal/components/focus-lock/utils.js.map +1 -1
- package/internal/components/live-region/index.js +10 -10
- package/internal/components/live-region/index.js.map +1 -1
- package/internal/components/masked-input/index.js +22 -24
- package/internal/components/masked-input/index.js.map +1 -1
- package/internal/components/masked-input/keyboard-handler.js +18 -18
- package/internal/components/masked-input/keyboard-handler.js.map +1 -1
- package/internal/components/masked-input/use-mask.js +24 -28
- package/internal/components/masked-input/use-mask.js.map +1 -1
- package/internal/components/masked-input/utils/keys.js +4 -6
- package/internal/components/masked-input/utils/keys.js.map +1 -1
- package/internal/components/masked-input/utils/mask-format.js +103 -113
- package/internal/components/masked-input/utils/mask-format.js.map +1 -1
- package/internal/components/masked-input/utils/strings.js +1 -4
- package/internal/components/masked-input/utils/strings.js.map +1 -1
- package/internal/components/menu-dropdown/index.js +10 -12
- package/internal/components/menu-dropdown/index.js.map +1 -1
- package/internal/components/option/highlight-match.js +14 -18
- package/internal/components/option/highlight-match.js.map +1 -1
- package/internal/components/option/index.js +13 -13
- package/internal/components/option/index.js.map +1 -1
- package/internal/components/option/option-announcer.js +1 -1
- package/internal/components/option/option-announcer.js.map +1 -1
- package/internal/components/option/option-parts.js +28 -45
- package/internal/components/option/option-parts.js.map +1 -1
- package/internal/components/option/utils/filter-options.js +16 -19
- package/internal/components/option/utils/filter-options.js.map +1 -1
- package/internal/components/option/utils/flatten-options.js +15 -15
- package/internal/components/option/utils/flatten-options.js.map +1 -1
- package/internal/components/option/utils/prepare-options.js +3 -3
- package/internal/components/option/utils/prepare-options.js.map +1 -1
- package/internal/components/options-list/index.js +19 -20
- package/internal/components/options-list/index.js.map +1 -1
- package/internal/components/options-list/utils/test-indexes.js +11 -11
- package/internal/components/options-list/utils/test-indexes.js.map +1 -1
- package/internal/components/options-list/utils/use-highlight-option.js +17 -21
- package/internal/components/options-list/utils/use-highlight-option.js.map +1 -1
- package/internal/components/options-list/utils/use-ids.js +2 -2
- package/internal/components/options-list/utils/use-ids.js.map +1 -1
- package/internal/components/options-list/utils/use-keyboard.js +6 -8
- package/internal/components/options-list/utils/use-keyboard.js.map +1 -1
- package/internal/components/options-list/utils/use-open-state.js +6 -7
- package/internal/components/options-list/utils/use-open-state.js.map +1 -1
- package/internal/components/portal/index.js +5 -6
- package/internal/components/portal/index.js.map +1 -1
- package/internal/components/screenreader-only/index.js +1 -2
- package/internal/components/screenreader-only/index.js.map +1 -1
- package/internal/components/selectable-item/index.js +25 -26
- package/internal/components/selectable-item/index.js.map +1 -1
- package/internal/components/tab-trap/index.js +1 -2
- package/internal/components/tab-trap/index.js.map +1 -1
- package/internal/components/transition/index.js +16 -16
- package/internal/components/transition/index.js.map +1 -1
- package/internal/components/visual-context/index.js +6 -7
- package/internal/components/visual-context/index.js.map +1 -1
- package/internal/context/app-layout-context.js +2 -2
- package/internal/context/app-layout-context.js.map +1 -1
- package/internal/context/form-field-context.js +4 -4
- package/internal/context/form-field-context.js.map +1 -1
- package/internal/context/split-panel-context.js +3 -3
- package/internal/context/split-panel-context.js.map +1 -1
- package/internal/debounce.js +6 -11
- package/internal/debounce.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/events/index.js +12 -16
- package/internal/events/index.js.map +1 -1
- package/internal/focus-tracker.js +22 -27
- package/internal/focus-tracker.js.map +1 -1
- package/internal/generated/custom-css-properties/index.js +2 -2
- package/internal/generated/custom-css-properties/index.js.map +1 -1
- package/internal/hooks/check-controlled/index.js +1 -1
- package/internal/hooks/check-controlled/index.js.map +1 -1
- package/internal/hooks/container-queries/use-container-breakpoints.js +2 -2
- package/internal/hooks/container-queries/use-container-breakpoints.js.map +1 -1
- package/internal/hooks/container-queries/use-container-query.js +5 -6
- package/internal/hooks/container-queries/use-container-query.js.map +1 -1
- package/internal/hooks/container-queries/use-resize-observer.js +13 -13
- package/internal/hooks/container-queries/use-resize-observer.js.map +1 -1
- package/internal/hooks/focus-visible/index.js +8 -8
- package/internal/hooks/focus-visible/index.js.map +1 -1
- package/internal/hooks/forward-focus/index.js +5 -9
- package/internal/hooks/forward-focus/index.js.map +1 -1
- package/internal/hooks/forward-focus/radio-group.js +7 -7
- package/internal/hooks/forward-focus/radio-group.js.map +1 -1
- package/internal/hooks/use-base-component/component-metadata.js +5 -5
- package/internal/hooks/use-base-component/component-metadata.js.map +1 -1
- package/internal/hooks/use-base-component/index.js +1 -1
- package/internal/hooks/use-base-component/index.js.map +1 -1
- package/internal/hooks/use-controllable/index.js +16 -17
- package/internal/hooks/use-controllable/index.js.map +1 -1
- package/internal/hooks/use-date-cache/index.js +2 -2
- package/internal/hooks/use-date-cache/index.js.map +1 -1
- package/internal/hooks/use-debounce-callback/index.js +3 -7
- package/internal/hooks/use-debounce-callback/index.js.map +1 -1
- package/internal/hooks/use-dynamic-overlap/index.js +4 -4
- package/internal/hooks/use-dynamic-overlap/index.js.map +1 -1
- package/internal/hooks/use-effect-on-update.js +2 -2
- package/internal/hooks/use-effect-on-update.js.map +1 -1
- package/internal/hooks/use-focus-tracker.js +7 -8
- package/internal/hooks/use-focus-tracker.js.map +1 -1
- package/internal/hooks/use-has-rendered/index.js +6 -6
- package/internal/hooks/use-has-rendered/index.js.map +1 -1
- package/internal/hooks/use-merge-refs/index.js +5 -9
- package/internal/hooks/use-merge-refs/index.js.map +1 -1
- package/internal/hooks/use-mobile/index.js +7 -7
- package/internal/hooks/use-mobile/index.js.map +1 -1
- package/internal/hooks/use-mouse-down-target.js +5 -5
- package/internal/hooks/use-mouse-down-target.js.map +1 -1
- package/internal/hooks/use-mutation-observer/index.js +5 -5
- package/internal/hooks/use-mutation-observer/index.js.map +1 -1
- package/internal/hooks/use-portal-mode-classes/index.js +10 -12
- package/internal/hooks/use-portal-mode-classes/index.js.map +1 -1
- package/internal/hooks/use-previous/index.js +3 -3
- package/internal/hooks/use-previous/index.js.map +1 -1
- package/internal/hooks/use-scroll-sync/index.js +8 -9
- package/internal/hooks/use-scroll-sync/index.js.map +1 -1
- package/internal/hooks/use-singleton-handler/index.js +12 -14
- package/internal/hooks/use-singleton-handler/index.js.map +1 -1
- package/internal/hooks/use-stable-event-handler/index.js +3 -10
- package/internal/hooks/use-stable-event-handler/index.js.map +1 -1
- package/internal/hooks/use-telemetry/index.js +2 -2
- package/internal/hooks/use-telemetry/index.js.map +1 -1
- package/internal/hooks/use-telemetry/telemetry.js +3 -4
- package/internal/hooks/use-telemetry/telemetry.js.map +1 -1
- package/internal/hooks/use-unique-id/index.js +3 -3
- package/internal/hooks/use-unique-id/index.js.map +1 -1
- package/internal/hooks/use-visual-mode/index.js +11 -11
- package/internal/hooks/use-visual-mode/index.js.map +1 -1
- package/internal/is-development.js +1 -1
- package/internal/is-development.js.map +1 -1
- package/internal/logging.js +2 -2
- package/internal/logging.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/internal/metrics/log-clients.js +18 -27
- package/internal/metrics/log-clients.js.map +1 -1
- package/internal/metrics/metrics-formatters.js +11 -14
- package/internal/metrics/metrics-formatters.js.map +1 -1
- package/internal/metrics/metrics.js +27 -33
- package/internal/metrics/metrics.js.map +1 -1
- package/internal/motion.js +2 -2
- package/internal/motion.js.map +1 -1
- package/internal/styles/colors.js +1 -1
- package/internal/styles/colors.js.map +1 -1
- package/internal/utils/browser-scrollbar-size.js +5 -5
- package/internal/utils/browser-scrollbar-size.js.map +1 -1
- package/internal/utils/calculate-once.js +2 -2
- package/internal/utils/calculate-once.js.map +1 -1
- package/internal/utils/check-safe-url.js +4 -4
- package/internal/utils/check-safe-url.js.map +1 -1
- package/internal/utils/create-category-color-scale.js +6 -9
- package/internal/utils/create-category-color-scale.js.map +1 -1
- package/internal/utils/date-time/format-date-range.js +3 -3
- package/internal/utils/date-time/format-date-range.js.map +1 -1
- package/internal/utils/date-time/format-date.js +4 -4
- package/internal/utils/date-time/format-date.js.map +1 -1
- package/internal/utils/date-time/format-time.js +5 -5
- package/internal/utils/date-time/format-time.js.map +1 -1
- package/internal/utils/date-time/format-timezone-offset.js +4 -4
- package/internal/utils/date-time/format-timezone-offset.js.map +1 -1
- package/internal/utils/date-time/is-iso-date-only.js +1 -1
- package/internal/utils/date-time/is-iso-date-only.js.map +1 -1
- package/internal/utils/date-time/join-date-time.js +3 -3
- package/internal/utils/date-time/join-date-time.js.map +1 -1
- package/internal/utils/date-time/parse-date.js +5 -6
- package/internal/utils/date-time/parse-date.js.map +1 -1
- package/internal/utils/date-time/parse-timezone-offset.js +5 -5
- package/internal/utils/date-time/parse-timezone-offset.js.map +1 -1
- package/internal/utils/date-time/shift-timezone-offset.js +6 -6
- package/internal/utils/date-time/shift-timezone-offset.js.map +1 -1
- package/internal/utils/dom.js +12 -12
- package/internal/utils/dom.js.map +1 -1
- package/internal/utils/external-props.js +3 -3
- package/internal/utils/external-props.js.map +1 -1
- package/internal/utils/focus-svg-element.js +1 -1
- package/internal/utils/focus-svg-element.js.map +1 -1
- package/internal/utils/locale/merge-locales.js +1 -1
- package/internal/utils/locale/merge-locales.js.map +1 -1
- package/internal/utils/locale/normalize-locale.js +3 -3
- package/internal/utils/locale/normalize-locale.js.map +1 -1
- package/internal/utils/promises.js +7 -11
- package/internal/utils/promises.js.map +1 -1
- package/internal/utils/scrollable-containers.js +14 -18
- package/internal/utils/scrollable-containers.js.map +1 -1
- package/internal/utils/strings/join-strings.js +1 -5
- package/internal/utils/strings/join-strings.js.map +1 -1
- package/internal/utils/strings/pad-left-zeros.js +1 -1
- package/internal/utils/strings/pad-left-zeros.js.map +1 -1
- package/internal/utils/throttle.js +10 -15
- package/internal/utils/throttle.js.map +1 -1
- package/internal/utils/use-container-width.js +3 -5
- package/internal/utils/use-container-width.js.map +1 -1
- package/line-chart/index.js +6 -6
- package/line-chart/index.js.map +1 -1
- package/link/index.js +5 -5
- package/link/index.js.map +1 -1
- package/link/internal.js +25 -25
- package/link/internal.js.map +1 -1
- package/mixed-line-bar-chart/bar-groups.js +3 -4
- package/mixed-line-bar-chart/bar-groups.js.map +1 -1
- package/mixed-line-bar-chart/bar-series.js +24 -33
- package/mixed-line-bar-chart/bar-series.js.map +1 -1
- package/mixed-line-bar-chart/chart-container.js +123 -138
- package/mixed-line-bar-chart/chart-container.js.map +1 -1
- package/mixed-line-bar-chart/chart-filters.js +10 -17
- package/mixed-line-bar-chart/chart-filters.js.map +1 -1
- package/mixed-line-bar-chart/chart-legend.js +9 -13
- package/mixed-line-bar-chart/chart-legend.js.map +1 -1
- package/mixed-line-bar-chart/chart-popover.js +3 -4
- package/mixed-line-bar-chart/chart-popover.js.map +1 -1
- package/mixed-line-bar-chart/data-series.js +13 -17
- package/mixed-line-bar-chart/data-series.js.map +1 -1
- package/mixed-line-bar-chart/domain.js +32 -39
- package/mixed-line-bar-chart/domain.js.map +1 -1
- package/mixed-line-bar-chart/format-highlighted.js +13 -14
- package/mixed-line-bar-chart/format-highlighted.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-mouse-hover.js +32 -34
- package/mixed-line-bar-chart/hooks/use-mouse-hover.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-navigation.js +48 -57
- package/mixed-line-bar-chart/hooks/use-navigation.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-popover.js +7 -7
- package/mixed-line-bar-chart/hooks/use-popover.js.map +1 -1
- package/mixed-line-bar-chart/index.js +4 -4
- package/mixed-line-bar-chart/index.js.map +1 -1
- package/mixed-line-bar-chart/internal.js +47 -49
- package/mixed-line-bar-chart/internal.js.map +1 -1
- package/mixed-line-bar-chart/line-series.js +19 -24
- package/mixed-line-bar-chart/line-series.js.map +1 -1
- package/mixed-line-bar-chart/make-scaled-bar-groups.js +10 -11
- package/mixed-line-bar-chart/make-scaled-bar-groups.js.map +1 -1
- package/mixed-line-bar-chart/make-scaled-series.js +30 -38
- package/mixed-line-bar-chart/make-scaled-series.js.map +1 -1
- package/mixed-line-bar-chart/utils.js +18 -21
- package/mixed-line-bar-chart/utils.js.map +1 -1
- package/modal/body-scroll.js +4 -4
- package/modal/body-scroll.js.map +1 -1
- package/modal/index.js +4 -4
- package/modal/index.js.map +1 -1
- package/modal/internal.js +24 -25
- package/modal/internal.js.map +1 -1
- package/multiselect/index.js +5 -5
- package/multiselect/index.js.map +1 -1
- package/multiselect/internal.js +81 -88
- package/multiselect/internal.js.map +1 -1
- package/package.json +1 -1
- package/pagination/index.js +2 -3
- package/pagination/index.js.map +1 -1
- package/pagination/internal.js +16 -17
- package/pagination/internal.js.map +1 -1
- package/pagination/utils.js +12 -12
- package/pagination/utils.js.map +1 -1
- package/pie-chart/index.js +38 -39
- package/pie-chart/index.js.map +1 -1
- package/pie-chart/labels.js +38 -42
- package/pie-chart/labels.js.map +1 -1
- package/pie-chart/pie-chart.js +65 -67
- package/pie-chart/pie-chart.js.map +1 -1
- package/pie-chart/responsive-text.js +9 -10
- package/pie-chart/responsive-text.js.map +1 -1
- package/pie-chart/segments.js +27 -31
- package/pie-chart/segments.js.map +1 -1
- package/pie-chart/utils.js +32 -35
- package/pie-chart/utils.js.map +1 -1
- package/popover/arrow.js +2 -2
- package/popover/arrow.js.map +1 -1
- package/popover/body.js +16 -19
- package/popover/body.js.map +1 -1
- package/popover/container.js +52 -55
- package/popover/container.js.map +1 -1
- package/popover/index.js +6 -6
- package/popover/index.js.map +1 -1
- package/popover/internal.js +28 -28
- package/popover/internal.js.map +1 -1
- package/popover/utils/positions.js +54 -66
- package/popover/utils/positions.js.map +1 -1
- package/progress-bar/index.js +17 -17
- package/progress-bar/index.js.map +1 -1
- package/progress-bar/internal.js +12 -16
- package/progress-bar/internal.js.map +1 -1
- package/property-filter/controller.js +117 -125
- package/property-filter/controller.js.map +1 -1
- package/property-filter/filter-options.js +8 -11
- package/property-filter/filter-options.js.map +1 -1
- package/property-filter/index.js +50 -50
- package/property-filter/index.js.map +1 -1
- package/property-filter/property-editor.js +4 -5
- package/property-filter/property-editor.js.map +1 -1
- package/property-filter/property-filter-autosuggest.js +39 -39
- package/property-filter/property-filter-autosuggest.js.map +1 -1
- package/property-filter/token-editor.js +55 -66
- package/property-filter/token-editor.js.map +1 -1
- package/property-filter/token.js +9 -11
- package/property-filter/token.js.map +1 -1
- package/property-filter/use-load-items.js +8 -12
- package/property-filter/use-load-items.js.map +1 -1
- package/property-filter/utils.js +13 -18
- package/property-filter/utils.js.map +1 -1
- package/radio-group/index.js +3 -4
- package/radio-group/index.js.map +1 -1
- package/radio-group/internal.js +9 -9
- package/radio-group/internal.js.map +1 -1
- package/radio-group/radio-button.js +12 -15
- package/radio-group/radio-button.js.map +1 -1
- package/s3-resource-selector/index.js +29 -29
- package/s3-resource-selector/index.js.map +1 -1
- package/s3-resource-selector/s3-in-context/index.js +16 -18
- package/s3-resource-selector/s3-in-context/index.js.map +1 -1
- package/s3-resource-selector/s3-in-context/search-input.js +3 -4
- package/s3-resource-selector/s3-in-context/search-input.js.map +1 -1
- package/s3-resource-selector/s3-in-context/use-versions-fetch.js +16 -16
- package/s3-resource-selector/s3-in-context/use-versions-fetch.js.map +1 -1
- package/s3-resource-selector/s3-in-context/validation.js +6 -6
- package/s3-resource-selector/s3-in-context/validation.js.map +1 -1
- package/s3-resource-selector/s3-modal/basic-table.js +19 -20
- package/s3-resource-selector/s3-modal/basic-table.js.map +1 -1
- package/s3-resource-selector/s3-modal/buckets-table.js +11 -13
- package/s3-resource-selector/s3-modal/buckets-table.js.map +1 -1
- package/s3-resource-selector/s3-modal/column-formats.js +5 -5
- package/s3-resource-selector/s3-modal/column-formats.js.map +1 -1
- package/s3-resource-selector/s3-modal/empty-state.js +1 -2
- package/s3-resource-selector/s3-modal/empty-state.js.map +1 -1
- package/s3-resource-selector/s3-modal/index.js +37 -43
- package/s3-resource-selector/s3-modal/index.js.map +1 -1
- package/s3-resource-selector/s3-modal/objects-table.js +12 -14
- package/s3-resource-selector/s3-modal/objects-table.js.map +1 -1
- package/s3-resource-selector/s3-modal/table-utils.js +9 -12
- package/s3-resource-selector/s3-modal/table-utils.js.map +1 -1
- package/s3-resource-selector/s3-modal/versions-table.js +10 -12
- package/s3-resource-selector/s3-modal/versions-table.js.map +1 -1
- package/s3-resource-selector/utils.js +1 -1
- package/s3-resource-selector/utils.js.map +1 -1
- package/segmented-control/index.js +2 -3
- package/segmented-control/index.js.map +1 -1
- package/segmented-control/internal-segmented-control.js +16 -17
- package/segmented-control/internal-segmented-control.js.map +1 -1
- package/segmented-control/internal.js +14 -14
- package/segmented-control/internal.js.map +1 -1
- package/segmented-control/segment.js +3 -6
- package/segmented-control/segment.js.map +1 -1
- package/select/index.js +6 -6
- package/select/index.js.map +1 -1
- package/select/internal.js +58 -58
- package/select/internal.js.map +1 -1
- package/select/parts/filter.js +4 -4
- package/select/parts/filter.js.map +1 -1
- package/select/parts/item.js +10 -10
- package/select/parts/item.js.map +1 -1
- package/select/parts/multiselect-item.js +13 -14
- package/select/parts/multiselect-item.js.map +1 -1
- package/select/parts/plain-list.js +13 -15
- package/select/parts/plain-list.js.map +1 -1
- package/select/parts/trigger.js +7 -9
- package/select/parts/trigger.js.map +1 -1
- package/select/parts/virtual-list.js +27 -33
- package/select/parts/virtual-list.js.map +1 -1
- package/select/utils/check-option-value-field.js +2 -2
- package/select/utils/check-option-value-field.js.map +1 -1
- package/select/utils/connect-options.js +6 -7
- package/select/utils/connect-options.js.map +1 -1
- package/select/utils/get-item-props.js +4 -7
- package/select/utils/get-item-props.js.map +1 -1
- package/select/utils/render-options.js +13 -15
- package/select/utils/render-options.js.map +1 -1
- package/select/utils/use-announcement.js +10 -11
- package/select/utils/use-announcement.js.map +1 -1
- package/select/utils/use-load-items.js +16 -19
- package/select/utils/use-load-items.js.map +1 -1
- package/select/utils/use-native-search.js +20 -29
- package/select/utils/use-native-search.js.map +1 -1
- package/select/utils/use-select.js +89 -96
- package/select/utils/use-select.js.map +1 -1
- package/side-navigation/index.js +10 -10
- package/side-navigation/index.js.map +1 -1
- package/side-navigation/internal.js +35 -46
- package/side-navigation/internal.js.map +1 -1
- package/side-navigation/util.js +9 -12
- package/side-navigation/util.js.map +1 -1
- package/space-between/index.js +4 -4
- package/space-between/index.js.map +1 -1
- package/space-between/internal.js +7 -7
- package/space-between/internal.js.map +1 -1
- package/spinner/index.js +4 -4
- package/spinner/index.js.map +1 -1
- package/spinner/internal.js +4 -4
- package/spinner/internal.js.map +1 -1
- package/split-panel/bottom.js +22 -25
- package/split-panel/bottom.js.map +1 -1
- package/split-panel/icons/bottom-icon-refresh.js +11 -13
- package/split-panel/icons/bottom-icon-refresh.js.map +1 -1
- package/split-panel/icons/bottom-icon.js +1 -1
- package/split-panel/icons/bottom-icon.js.map +1 -1
- package/split-panel/icons/resize-handler.js +3 -6
- package/split-panel/icons/resize-handler.js.map +1 -1
- package/split-panel/icons/side-position-refresh.js +12 -14
- package/split-panel/icons/side-position-refresh.js.map +1 -1
- package/split-panel/icons/side-position.js +1 -1
- package/split-panel/icons/side-position.js.map +1 -1
- package/split-panel/index.js +65 -65
- package/split-panel/index.js.map +1 -1
- package/split-panel/preferences-modal.js +9 -9
- package/split-panel/preferences-modal.js.map +1 -1
- package/split-panel/side.js +12 -15
- package/split-panel/side.js.map +1 -1
- package/split-panel/utils/size-utils.js +3 -3
- package/split-panel/utils/size-utils.js.map +1 -1
- package/split-panel/utils/use-keyboard-events.js +13 -17
- package/split-panel/utils/use-keyboard-events.js.map +1 -1
- package/split-panel/utils/use-pointer-events.js +12 -13
- package/split-panel/utils/use-pointer-events.js.map +1 -1
- package/status-indicator/index.js +4 -4
- package/status-indicator/index.js.map +1 -1
- package/status-indicator/internal.js +9 -10
- package/status-indicator/internal.js.map +1 -1
- package/table/body-cell/click-away.js +9 -10
- package/table/body-cell/click-away.js.map +1 -1
- package/table/body-cell/index.js +18 -18
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/inline-editor.js +32 -46
- package/table/body-cell/inline-editor.js.map +1 -1
- package/table/body-cell/td-element.js +2 -4
- package/table/body-cell/td-element.js.map +1 -1
- package/table/body-cell/use-stable-scroll-position.js +10 -13
- package/table/body-cell/use-stable-scroll-position.js.map +1 -1
- package/table/header-cell/index.d.ts +4 -2
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +33 -34
- package/table/header-cell/index.js.map +1 -1
- package/table/header-cell/utils.js +10 -12
- package/table/header-cell/utils.js.map +1 -1
- package/table/index.js +5 -5
- package/table/index.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +94 -118
- package/table/internal.js.map +1 -1
- package/table/resizer/index.d.ts +5 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +40 -39
- package/table/resizer/index.js.map +1 -1
- package/table/selection-control/index.d.ts +4 -1
- package/table/selection-control/index.d.ts.map +1 -1
- package/table/selection-control/index.js +11 -11
- package/table/selection-control/index.js.map +1 -1
- package/table/sticky-header.d.ts +2 -2
- package/table/sticky-header.d.ts.map +1 -1
- package/table/sticky-header.js +16 -15
- package/table/sticky-header.js.map +1 -1
- package/table/sticky-scrollbar.js +5 -6
- package/table/sticky-scrollbar.js.map +1 -1
- package/table/sticky-scrolling.js +10 -10
- package/table/sticky-scrolling.js.map +1 -1
- package/table/thead.d.ts +11 -3
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +13 -13
- package/table/thead.js.map +1 -1
- package/table/tools-header.js +4 -5
- package/table/tools-header.js.map +1 -1
- package/table/use-column-widths.js +34 -44
- package/table/use-column-widths.js.map +1 -1
- package/table/use-row-events.js +10 -11
- package/table/use-row-events.js.map +1 -1
- package/table/use-selection.js +75 -81
- package/table/use-selection.js.map +1 -1
- package/table/use-sticky-header.js +16 -16
- package/table/use-sticky-header.js.map +1 -1
- package/table/use-sticky-scrollbar.js +42 -42
- package/table/use-sticky-scrollbar.js.map +1 -1
- package/table/use-table-focus-navigation.js +27 -28
- package/table/use-table-focus-navigation.js.map +1 -1
- package/table/utils.js +7 -7
- package/table/utils.js.map +1 -1
- package/tabs/index.js +30 -33
- package/tabs/index.js.map +1 -1
- package/tabs/scroll-utils.js +12 -13
- package/tabs/scroll-utils.js.map +1 -1
- package/tabs/smooth-scroll.js +17 -17
- package/tabs/smooth-scroll.js.map +1 -1
- package/tabs/tab-header-bar.js +61 -66
- package/tabs/tab-header-bar.js.map +1 -1
- package/tag-editor/index.js +59 -72
- package/tag-editor/index.js.map +1 -1
- package/tag-editor/internal.js +21 -29
- package/tag-editor/internal.js.map +1 -1
- package/tag-editor/utils.js +7 -8
- package/tag-editor/utils.js.map +1 -1
- package/tag-editor/validation.js +16 -18
- package/tag-editor/validation.js.map +1 -1
- package/text-content/index.js +6 -6
- package/text-content/index.js.map +1 -1
- package/text-filter/index.js +3 -4
- package/text-filter/index.js.map +1 -1
- package/text-filter/internal.js +10 -10
- package/text-filter/internal.js.map +1 -1
- package/textarea/index.js +23 -24
- package/textarea/index.js.map +1 -1
- package/theming/index.js +2 -3
- package/theming/index.js.map +1 -1
- package/tiles/index.js +3 -4
- package/tiles/index.js.map +1 -1
- package/tiles/internal.js +17 -17
- package/tiles/internal.js.map +1 -1
- package/tiles/tile.js +7 -9
- package/tiles/tile.js.map +1 -1
- package/time-input/index.js +5 -5
- package/time-input/index.js.map +1 -1
- package/time-input/internal.js +9 -9
- package/time-input/internal.js.map +1 -1
- package/toggle/index.js +3 -4
- package/toggle/index.js.map +1 -1
- package/toggle/internal.js +15 -16
- package/toggle/internal.js.map +1 -1
- package/token-group/dismiss-button.js +5 -7
- package/token-group/dismiss-button.js.map +1 -1
- package/token-group/index.js +4 -4
- package/token-group/index.js.map +1 -1
- package/token-group/internal.js +14 -14
- package/token-group/internal.js.map +1 -1
- package/token-group/toggle.js +7 -9
- package/token-group/toggle.js.map +1 -1
- package/top-navigation/1.0-beta/index.js +4 -4
- package/top-navigation/1.0-beta/index.js.map +1 -1
- package/top-navigation/1.0-beta/internal.js +43 -46
- package/top-navigation/1.0-beta/internal.js.map +1 -1
- package/top-navigation/1.0-beta/parts/overflow-menu.js +16 -17
- package/top-navigation/1.0-beta/parts/overflow-menu.js.map +1 -1
- package/top-navigation/1.0-beta/parts/utility.js +9 -12
- package/top-navigation/1.0-beta/parts/utility.js.map +1 -1
- package/top-navigation/1.0-beta/use-top-navigation.js +46 -54
- package/top-navigation/1.0-beta/use-top-navigation.js.map +1 -1
- package/top-navigation/index.js +4 -4
- package/top-navigation/index.js.map +1 -1
- package/top-navigation/internal.js +64 -71
- package/top-navigation/internal.js.map +1 -1
- package/top-navigation/parts/overflow-menu/header.js +3 -4
- package/top-navigation/parts/overflow-menu/header.js.map +1 -1
- package/top-navigation/parts/overflow-menu/index.js +4 -5
- package/top-navigation/parts/overflow-menu/index.js.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.js +56 -61
- package/top-navigation/parts/overflow-menu/menu-item.js.map +1 -1
- package/top-navigation/parts/overflow-menu/router.js +11 -13
- package/top-navigation/parts/overflow-menu/router.js.map +1 -1
- package/top-navigation/parts/overflow-menu/views/submenu.js +6 -8
- package/top-navigation/parts/overflow-menu/views/submenu.js.map +1 -1
- package/top-navigation/parts/overflow-menu/views/utilities.js +5 -7
- package/top-navigation/parts/overflow-menu/views/utilities.js.map +1 -1
- package/top-navigation/parts/utility.js +12 -15
- package/top-navigation/parts/utility.js.map +1 -1
- package/top-navigation/use-top-navigation.js +52 -59
- package/top-navigation/use-top-navigation.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js +5 -7
- package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/index.js +6 -7
- package/tutorial-panel/components/tutorial-detail-view/index.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/task-list.js +8 -15
- package/tutorial-panel/components/tutorial-detail-view/task-list.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/task.js +5 -6
- package/tutorial-panel/components/tutorial-detail-view/task.js.map +1 -1
- package/tutorial-panel/components/tutorial-list/index.js +19 -22
- package/tutorial-panel/components/tutorial-list/index.js.map +1 -1
- package/tutorial-panel/index.js +8 -8
- package/tutorial-panel/index.js.map +1 -1
- package/wizard/index.js +28 -28
- package/wizard/index.js.map +1 -1
- package/wizard/internal/analytics.js +32 -42
- package/wizard/internal/analytics.js.map +1 -1
- package/wizard/unmount.js +6 -13
- package/wizard/unmount.js.map +1 -1
- package/wizard/wizard-actions.js +7 -8
- package/wizard/wizard-actions.js.map +1 -1
- package/wizard/wizard-form-header.js +2 -3
- package/wizard/wizard-form-header.js.map +1 -1
- package/wizard/wizard-form.js +14 -16
- package/wizard/wizard-form.js.map +1 -1
- package/wizard/wizard-navigation.js +19 -25
- package/wizard/wizard-navigation.js.map +1 -1
package/pie-chart/utils.js
CHANGED
|
@@ -1,69 +1,66 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import styles from './styles.css.js';
|
|
3
|
-
export
|
|
2
|
+
export const dimensionsBySize = {
|
|
4
3
|
small: {
|
|
5
4
|
innerRadius: 33,
|
|
6
5
|
outerRadius: 50,
|
|
7
6
|
innerLabelPadding: 8,
|
|
8
7
|
padding: 8,
|
|
9
|
-
paddingLabels: 44
|
|
8
|
+
paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
|
|
10
9
|
},
|
|
11
10
|
medium: {
|
|
12
11
|
innerRadius: 66,
|
|
13
12
|
outerRadius: 100,
|
|
14
13
|
innerLabelPadding: 12,
|
|
15
14
|
padding: 12,
|
|
16
|
-
paddingLabels: 44
|
|
15
|
+
paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
|
|
17
16
|
},
|
|
18
17
|
large: {
|
|
19
18
|
innerRadius: 93,
|
|
20
19
|
outerRadius: 140,
|
|
21
20
|
innerLabelPadding: 12,
|
|
22
21
|
padding: 12,
|
|
23
|
-
paddingLabels: 44
|
|
24
|
-
}
|
|
22
|
+
paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
|
|
23
|
+
},
|
|
25
24
|
};
|
|
26
|
-
export
|
|
27
|
-
small:
|
|
28
|
-
medium:
|
|
29
|
-
large:
|
|
25
|
+
export const refreshDimensionsBySize = {
|
|
26
|
+
small: Object.assign(Object.assign({}, dimensionsBySize.small), { innerRadius: 38, cornerRadius: 3 }),
|
|
27
|
+
medium: Object.assign(Object.assign({}, dimensionsBySize.medium), { innerRadius: 75, cornerRadius: 4 }),
|
|
28
|
+
large: Object.assign(Object.assign({}, dimensionsBySize.large), { innerRadius: 105, cornerRadius: 5 }),
|
|
30
29
|
};
|
|
31
|
-
export
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
];
|
|
39
|
-
}; };
|
|
30
|
+
export const defaultDetails = (i18nStrings) => (datum, dataSum) => [
|
|
31
|
+
{ key: i18nStrings.detailsValue || '', value: datum.value },
|
|
32
|
+
{
|
|
33
|
+
key: i18nStrings.detailsPercentage || '',
|
|
34
|
+
value: `${((datum.value * 100) / dataSum).toFixed(0)}%`,
|
|
35
|
+
},
|
|
36
|
+
];
|
|
40
37
|
/**
|
|
41
38
|
* Adjusts the position of the given label nodes to avoid visual overlapping.
|
|
42
39
|
* @param nodes List of label nodes of the entire chart (both left and right side)
|
|
43
40
|
* @param markers Markers array that was calculated in <Labels>, but we just need the `endY` values
|
|
44
41
|
* @param leftSide Boolean flag whether we are processing the left or right side of the chart labels
|
|
45
42
|
*/
|
|
46
|
-
export
|
|
43
|
+
export const balanceLabelNodes = (nodes, markers, leftSide) => {
|
|
47
44
|
var _a;
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
const MARGIN = 10;
|
|
46
|
+
let previousBBox = null;
|
|
50
47
|
// When traversing the right side of labels, we start at the beginning of the array and go forwards.
|
|
51
48
|
// For the left side, we need to traverse backwards from the end, so that overlapping nodes are pushed down in the right order.
|
|
52
|
-
|
|
49
|
+
let i = leftSide ? nodes.length - 1 : 0;
|
|
53
50
|
while ((leftSide && i >= 0) || (!leftSide && i < nodes.length)) {
|
|
54
|
-
|
|
51
|
+
const node = nodes[i];
|
|
55
52
|
// Currently using dataset attributes to determine the base position.
|
|
56
53
|
// This implementation can be changed back to using `getBBox` when we drop IE11 support.
|
|
57
54
|
// Unfortunately, there is no good alternative for `getBBox` that is supported by IE11.
|
|
58
55
|
// `getBoundingClientRect` works for width and height calculations in SVG, but the x/y positions are inaccurate.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
x
|
|
63
|
-
y
|
|
64
|
-
height: node.getBoundingClientRect().height
|
|
56
|
+
const x = parseFloat(node.getAttribute('data-x') || '0');
|
|
57
|
+
const y = parseFloat(node.getAttribute('data-y') || '0');
|
|
58
|
+
const box = {
|
|
59
|
+
x,
|
|
60
|
+
y,
|
|
61
|
+
height: node.getBoundingClientRect().height,
|
|
65
62
|
};
|
|
66
|
-
|
|
63
|
+
const marker = markers[i];
|
|
67
64
|
if (leftSide) {
|
|
68
65
|
i--;
|
|
69
66
|
}
|
|
@@ -81,14 +78,14 @@ export var balanceLabelNodes = function (nodes, markers, leftSide) {
|
|
|
81
78
|
}
|
|
82
79
|
node.setAttribute('transform', '');
|
|
83
80
|
// Calculate how much the current node is overlapping with the previous one.
|
|
84
|
-
|
|
81
|
+
const offset = previousBBox.y + previousBBox.height + MARGIN - box.y;
|
|
85
82
|
if (offset > 0) {
|
|
86
83
|
// Move the label down.
|
|
87
|
-
node.setAttribute('transform',
|
|
84
|
+
node.setAttribute('transform', `translate(0 ${offset})`);
|
|
88
85
|
// Adjust the attached line accordingly.
|
|
89
|
-
|
|
86
|
+
const lineNode = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles['label-line']}`);
|
|
90
87
|
if (lineNode) {
|
|
91
|
-
|
|
88
|
+
const { endY } = marker;
|
|
92
89
|
lineNode.setAttribute('y2', '' + (endY + offset));
|
|
93
90
|
}
|
|
94
91
|
// Update the position accordingly to inform the next label
|
package/pie-chart/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/pie-chart/utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/pie-chart/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface Dimension {\n innerRadius: number;\n outerRadius: number;\n padding: number;\n paddingLabels: number;\n innerLabelPadding: number;\n cornerRadius?: number;\n}\n\nexport const dimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n small: {\n innerRadius: 33,\n outerRadius: 50,\n innerLabelPadding: 8,\n padding: 8, // = space-xs\n paddingLabels: 44, // = 2 * (size-lineHeight-body-100)\n },\n medium: {\n innerRadius: 66,\n outerRadius: 100,\n innerLabelPadding: 12,\n padding: 12, // = space-s\n paddingLabels: 44, // = 2 * (size-lineHeight-body-100)\n },\n large: {\n innerRadius: 93,\n outerRadius: 140,\n innerLabelPadding: 12,\n padding: 12, // = space-s\n paddingLabels: 44, // = 2 * (size-lineHeight-body-100)\n },\n};\n\nexport const refreshDimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n small: {\n ...dimensionsBySize.small,\n innerRadius: 38,\n cornerRadius: 3,\n },\n medium: {\n ...dimensionsBySize.medium,\n innerRadius: 75,\n cornerRadius: 4,\n },\n large: {\n ...dimensionsBySize.large,\n innerRadius: 105,\n cornerRadius: 5,\n },\n};\n\nexport const defaultDetails =\n (i18nStrings: PieChartProps.I18nStrings) => (datum: PieChartProps.Datum, dataSum: number) =>\n [\n { key: i18nStrings.detailsValue || '', value: datum.value },\n {\n key: i18nStrings.detailsPercentage || '',\n value: `${((datum.value * 100) / dataSum).toFixed(0)}%`,\n },\n ];\n\n/**\n * Adjusts the position of the given label nodes to avoid visual overlapping.\n * @param nodes List of label nodes of the entire chart (both left and right side)\n * @param markers Markers array that was calculated in <Labels>, but we just need the `endY` values\n * @param leftSide Boolean flag whether we are processing the left or right side of the chart labels\n */\nexport const balanceLabelNodes = (\n nodes: NodeListOf<SVGGElement>,\n markers: Array<{ endY: number }>,\n leftSide: boolean\n) => {\n const MARGIN = 10;\n\n let previousBBox: { x: number; y: number; height: number } | null = null;\n\n // When traversing the right side of labels, we start at the beginning of the array and go forwards.\n // For the left side, we need to traverse backwards from the end, so that overlapping nodes are pushed down in the right order.\n let i = leftSide ? nodes.length - 1 : 0;\n\n while ((leftSide && i >= 0) || (!leftSide && i < nodes.length)) {\n const node = nodes[i];\n\n // Currently using dataset attributes to determine the base position.\n // This implementation can be changed back to using `getBBox` when we drop IE11 support.\n // Unfortunately, there is no good alternative for `getBBox` that is supported by IE11.\n // `getBoundingClientRect` works for width and height calculations in SVG, but the x/y positions are inaccurate.\n const x = parseFloat(node.getAttribute('data-x') || '0');\n const y = parseFloat(node.getAttribute('data-y') || '0');\n const box = {\n x,\n y,\n height: node.getBoundingClientRect().height,\n };\n\n const marker = markers[i];\n\n if (leftSide) {\n i--;\n } else {\n i++;\n }\n\n if (!previousBBox) {\n previousBBox = box;\n node.setAttribute('transform', '');\n continue;\n }\n\n if ((!leftSide && box.x < 0) || (leftSide && box.x >= 0)) {\n // We have reached a label that is on the other side of the chart, so we're done.\n break;\n }\n\n node.setAttribute('transform', '');\n\n // Calculate how much the current node is overlapping with the previous one.\n const offset = previousBBox.y + previousBBox.height + MARGIN - box.y;\n\n if (offset > 0) {\n // Move the label down.\n node.setAttribute('transform', `translate(0 ${offset})`);\n\n // Adjust the attached line accordingly.\n const lineNode = node.parentNode?.querySelector(`.${styles['label-line']}`);\n if (lineNode) {\n const { endY } = marker;\n lineNode.setAttribute('y2', '' + (endY + offset));\n }\n\n // Update the position accordingly to inform the next label\n box.y += offset;\n }\n\n previousBBox = box;\n }\n};\n"]}
|
package/popover/arrow.js
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import styles from './styles.css.js';
|
|
6
|
-
|
|
6
|
+
const Arrow = (props) => (React.createElement("div", { className: clsx(styles.arrow, props.position && styles[`arrow-position-${props.position}`]) },
|
|
7
7
|
React.createElement("div", { className: styles['arrow-outer'] }),
|
|
8
|
-
React.createElement("div", { className: styles['arrow-inner'] })));
|
|
8
|
+
React.createElement("div", { className: styles['arrow-inner'] })));
|
|
9
9
|
export default React.memo(Arrow);
|
|
10
10
|
//# sourceMappingURL=arrow.js.map
|
package/popover/arrow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow.js","sourceRoot":"","sources":["../../../src/popover/arrow.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,
|
|
1
|
+
{"version":3,"file":"arrow.js","sourceRoot":"","sources":["../../../src/popover/arrow.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE,CAAC,CACnC,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,IAAI,MAAM,CAAC,kBAAkB,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9F,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,GAAI;IACzC,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,GAAI,CACrC,CACP,CAAC;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,KAAK,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 clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { InternalPosition } from './interfaces';\n\nexport interface ArrowProps {\n position: InternalPosition | null;\n}\n\nconst Arrow = (props: ArrowProps) => (\n <div className={clsx(styles.arrow, props.position && styles[`arrow-position-${props.position}`])}>\n <div className={styles['arrow-outer']} />\n <div className={styles['arrow-inner']} />\n </div>\n);\n\nexport default React.memo(Arrow);\n"]}
|
package/popover/body.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
3
|
import React, { useCallback, useEffect, useRef } from 'react';
|
|
@@ -8,13 +7,11 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
|
8
7
|
import { InternalButton } from '../button/internal';
|
|
9
8
|
import FocusLock from '../internal/components/focus-lock';
|
|
10
9
|
import styles from './styles.css.js';
|
|
11
|
-
export default function PopoverBody(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var dismissButtonRef = useRef(null);
|
|
17
|
-
var onKeyDown = useCallback(function (event) {
|
|
10
|
+
export default function PopoverBody({ dismissButton: showDismissButton, dismissAriaLabel, header, children, onDismiss, variant, overflowVisible, className, ariaLabelledby, }) {
|
|
11
|
+
const labelledById = useUniqueId('awsui-popover-');
|
|
12
|
+
const dismissButtonFocused = useRef(false);
|
|
13
|
+
const dismissButtonRef = useRef(null);
|
|
14
|
+
const onKeyDown = useCallback((event) => {
|
|
18
15
|
if (event.keyCode === KeyCode.escape) {
|
|
19
16
|
onDismiss();
|
|
20
17
|
}
|
|
@@ -22,27 +19,27 @@ export default function PopoverBody(_a) {
|
|
|
22
19
|
// Implement our own auto-focus rather than using FocusLock's,
|
|
23
20
|
// because we also want to focus the dismiss button when it
|
|
24
21
|
// is added dyamically (e.g. in chart popovers)
|
|
25
|
-
useEffect(
|
|
22
|
+
useEffect(() => {
|
|
26
23
|
var _a;
|
|
27
24
|
if (showDismissButton && !dismissButtonFocused.current) {
|
|
28
25
|
(_a = dismissButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
|
|
29
26
|
}
|
|
30
27
|
dismissButtonFocused.current = showDismissButton;
|
|
31
28
|
}, [showDismissButton]);
|
|
32
|
-
|
|
33
|
-
React.createElement(InternalButton, { variant: "icon", formAction: "none", iconName: "close", className: styles['dismiss-control'], ariaLabel: dismissAriaLabel, onClick:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
const dismissButton = (showDismissButton !== null && showDismissButton !== void 0 ? showDismissButton : null) && (React.createElement("div", { className: styles.dismiss },
|
|
30
|
+
React.createElement(InternalButton, { variant: "icon", formAction: "none", iconName: "close", className: styles['dismiss-control'], ariaLabel: dismissAriaLabel, onClick: () => onDismiss(), ref: dismissButtonRef })));
|
|
31
|
+
const isDialog = showDismissButton;
|
|
32
|
+
const shouldTrapFocus = showDismissButton && variant !== 'annotation';
|
|
33
|
+
const dialogProps = isDialog
|
|
37
34
|
? {
|
|
38
35
|
role: 'dialog',
|
|
39
36
|
'aria-modal': shouldTrapFocus ? true : undefined,
|
|
40
|
-
'aria-labelledby': ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : (header ? labelledById : undefined)
|
|
37
|
+
'aria-labelledby': ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : (header ? labelledById : undefined),
|
|
41
38
|
}
|
|
42
39
|
: {};
|
|
43
|
-
return (React.createElement("div",
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
return (React.createElement("div", Object.assign({ className: clsx(styles.body, className, {
|
|
41
|
+
[styles['body-overflow-visible']]: overflowVisible === 'both',
|
|
42
|
+
}), onKeyDown: onKeyDown }, dialogProps),
|
|
46
43
|
React.createElement(FocusLock, { disabled: !shouldTrapFocus, autoFocus: false },
|
|
47
44
|
header && (React.createElement("div", { className: clsx(styles['header-row'], showDismissButton && styles['has-dismiss']) },
|
|
48
45
|
dismissButton,
|
|
@@ -50,6 +47,6 @@ export default function PopoverBody(_a) {
|
|
|
50
47
|
React.createElement("h2", null, header)))),
|
|
51
48
|
React.createElement("div", { className: !header && showDismissButton ? styles['has-dismiss'] : undefined },
|
|
52
49
|
!header && dismissButton,
|
|
53
|
-
React.createElement("div", { className: clsx(styles.content,
|
|
50
|
+
React.createElement("div", { className: clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible }) }, children)))));
|
|
54
51
|
}
|
|
55
52
|
//# sourceMappingURL=body.js.map
|
package/popover/body.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.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, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport FocusLock from '../internal/components/focus-lock';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverBodyProps {\n dismissButton: boolean;\n dismissAriaLabel: string | undefined;\n onDismiss: () => void;\n\n header: React.ReactNode | undefined;\n children: React.ReactNode;\n variant?: 'annotation';\n overflowVisible?: 'content' | 'both';\n\n className?: string;\n ariaLabelledby?: string;\n}\n\nexport default function PopoverBody({\n dismissButton: showDismissButton,\n dismissAriaLabel,\n header,\n children,\n onDismiss,\n variant,\n overflowVisible,\n className,\n ariaLabelledby,\n}: PopoverBodyProps) {\n const labelledById = useUniqueId('awsui-popover-');\n const dismissButtonFocused = useRef(false);\n const dismissButtonRef = useRef<ButtonProps.Ref>(null);\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n onDismiss();\n }\n },\n [onDismiss]\n );\n\n // Implement our own auto-focus rather than using FocusLock's,\n // because we also want to focus the dismiss button when it\n // is added dyamically (e.g. in chart popovers)\n useEffect(() => {\n if (showDismissButton && !dismissButtonFocused.current) {\n dismissButtonRef.current?.focus({ preventScroll: true });\n }\n dismissButtonFocused.current = showDismissButton;\n }, [showDismissButton]);\n\n const dismissButton = (showDismissButton ?? null) && (\n <div className={styles.dismiss}>\n <InternalButton\n variant=\"icon\"\n formAction=\"none\"\n iconName=\"close\"\n className={styles['dismiss-control']}\n ariaLabel={dismissAriaLabel}\n onClick={() => onDismiss()}\n ref={dismissButtonRef}\n />\n </div>\n );\n\n const isDialog = showDismissButton;\n const shouldTrapFocus = showDismissButton && variant !== 'annotation';\n\n const dialogProps = isDialog\n ? {\n role: 'dialog',\n 'aria-modal': shouldTrapFocus ? true : undefined,\n 'aria-labelledby': ariaLabelledby ?? (header ? labelledById : undefined),\n }\n : {};\n\n return (\n <div\n className={clsx(styles.body, className, {\n [styles['body-overflow-visible']]: overflowVisible === 'both',\n })}\n onKeyDown={onKeyDown}\n {...dialogProps}\n >\n <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>\n {header && (\n <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>\n {dismissButton}\n <div className={styles.header} id={labelledById}>\n <h2>{header}</h2>\n </div>\n </div>\n )}\n <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>\n {!header && dismissButton}\n <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>\n {children}\n </div>\n </div>\n </FocusLock>\n </div>\n );\n}\n"]}
|
package/popover/container.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
3
|
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
@@ -8,30 +7,28 @@ import { useResizeObserver } from '../internal/hooks/container-queries';
|
|
|
8
7
|
import { calculatePosition } from './utils/positions';
|
|
9
8
|
import styles from './styles.css.js';
|
|
10
9
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
11
|
-
|
|
12
|
-
export default function PopoverContainer(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var _d = useState(null), internalPosition = _d[0], setInternalPosition = _d[1];
|
|
21
|
-
var isRefresh = useVisualRefresh();
|
|
10
|
+
const INITIAL_STYLES = { position: 'absolute', top: -9999, left: -9999 };
|
|
11
|
+
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, }) {
|
|
12
|
+
const bodyRef = useRef(null);
|
|
13
|
+
const contentRef = useRef(null);
|
|
14
|
+
const popoverRef = useRef(null);
|
|
15
|
+
const arrowRef = useRef(null);
|
|
16
|
+
const [popoverStyle, setPopoverStyle] = useState(INITIAL_STYLES);
|
|
17
|
+
const [internalPosition, setInternalPosition] = useState(null);
|
|
18
|
+
const isRefresh = useVisualRefresh();
|
|
22
19
|
// Store the handler in a ref so that it can still be replaced from outside of the listener closure.
|
|
23
|
-
|
|
20
|
+
const positionHandlerRef = useRef(() => { });
|
|
24
21
|
// Updates the position handler.
|
|
25
|
-
|
|
22
|
+
const updatePositionHandler = useCallback(() => {
|
|
26
23
|
if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {
|
|
27
24
|
return;
|
|
28
25
|
}
|
|
29
26
|
// Get important elements
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
const popover = popoverRef.current;
|
|
28
|
+
const body = bodyRef.current;
|
|
29
|
+
const arrow = arrowRef.current;
|
|
30
|
+
const document = popover.ownerDocument;
|
|
31
|
+
const track = trackRef.current;
|
|
35
32
|
// If the popover body isn't being rendered for whatever reason (e.g. "display: none" or JSDOM),
|
|
36
33
|
// or track does not belong to the document - bail on calculating dimensions.
|
|
37
34
|
if (popover.offsetWidth === 0 || popover.offsetHeight === 0 || !nodeContains(document.body, track)) {
|
|
@@ -40,8 +37,8 @@ export default function PopoverContainer(_a) {
|
|
|
40
37
|
// Imperatively move body off-screen to give it room to expand.
|
|
41
38
|
// Not doing this in React because this recalculation should happen
|
|
42
39
|
// in the span of a single frame without rerendering anything.
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
const prevTop = popover.style.top;
|
|
41
|
+
const prevLeft = popover.style.left;
|
|
45
42
|
popover.style.top = '0';
|
|
46
43
|
popover.style.left = '0';
|
|
47
44
|
// Imperatively remove body styles that can remain from the previous computation.
|
|
@@ -50,27 +47,27 @@ export default function PopoverContainer(_a) {
|
|
|
50
47
|
body.style.overflowY = '';
|
|
51
48
|
// Get rects representing key elements
|
|
52
49
|
// Use getComputedStyle for arrowRect to avoid modifications made by transform
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
const viewportRect = getViewportRect(document.defaultView);
|
|
51
|
+
const trackRect = track.getBoundingClientRect();
|
|
52
|
+
const arrowRect = {
|
|
56
53
|
width: parseFloat(getComputedStyle(arrow).width),
|
|
57
|
-
height: parseFloat(getComputedStyle(arrow).height)
|
|
54
|
+
height: parseFloat(getComputedStyle(arrow).height),
|
|
58
55
|
};
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
const containingBlock = getContainingBlock(popover);
|
|
57
|
+
const containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;
|
|
58
|
+
const bodyBorderWidth = getBorderWidth(body);
|
|
59
|
+
const contentRect = contentRef.current.getBoundingClientRect();
|
|
60
|
+
const contentBoundingBox = {
|
|
64
61
|
width: contentRect.width + 2 * bodyBorderWidth,
|
|
65
|
-
height: contentRect.height + 2 * bodyBorderWidth
|
|
62
|
+
height: contentRect.height + 2 * bodyBorderWidth,
|
|
66
63
|
};
|
|
67
64
|
// Calculate the arrow direction and viewport-relative position of the popover.
|
|
68
|
-
|
|
65
|
+
const { scrollable, internalPosition: newInternalPosition, boundingOffset, } = calculatePosition(position, trackRect, arrowRect, contentBoundingBox, containingBlock ? containingBlockRect : getDocumentRect(document), viewportRect, renderWithPortal);
|
|
69
66
|
// Get the position of the popover relative to the offset parent.
|
|
70
|
-
|
|
67
|
+
const popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);
|
|
71
68
|
// Cache the distance between the trigger and the popover (which stays the same as you scroll),
|
|
72
69
|
// and use that to recalculate the new popover position.
|
|
73
|
-
|
|
70
|
+
const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));
|
|
74
71
|
// Bring back the container to its original position to prevent any flashing.
|
|
75
72
|
popover.style.top = prevTop;
|
|
76
73
|
popover.style.left = prevLeft;
|
|
@@ -83,45 +80,45 @@ export default function PopoverContainer(_a) {
|
|
|
83
80
|
// Position the popover
|
|
84
81
|
setInternalPosition(newInternalPosition);
|
|
85
82
|
setPopoverStyle({ top: popoverOffset.top, left: popoverOffset.left });
|
|
86
|
-
positionHandlerRef.current =
|
|
87
|
-
|
|
83
|
+
positionHandlerRef.current = () => {
|
|
84
|
+
const newTrackOffset = toRelativePosition(track.getBoundingClientRect(), containingBlock ? containingBlock.getBoundingClientRect() : viewportRect);
|
|
88
85
|
setPopoverStyle({
|
|
89
86
|
top: newTrackOffset.top + trackRelativeOffset.top,
|
|
90
|
-
left: newTrackOffset.left + trackRelativeOffset.left
|
|
87
|
+
left: newTrackOffset.left + trackRelativeOffset.left,
|
|
91
88
|
});
|
|
92
89
|
};
|
|
93
90
|
}, [position, trackRef, renderWithPortal]);
|
|
94
91
|
// Recalculate position when properties change.
|
|
95
|
-
useLayoutEffect(
|
|
92
|
+
useLayoutEffect(() => {
|
|
96
93
|
updatePositionHandler();
|
|
97
94
|
}, [updatePositionHandler, trackKey]);
|
|
98
95
|
// Recalculate position when content size changes.
|
|
99
|
-
useResizeObserver(contentRef,
|
|
96
|
+
useResizeObserver(contentRef, () => updatePositionHandler());
|
|
100
97
|
// Recalculate position on DOM events.
|
|
101
|
-
useLayoutEffect(
|
|
98
|
+
useLayoutEffect(() => {
|
|
102
99
|
/*
|
|
103
100
|
This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),
|
|
104
101
|
and by tracking the click event we can adapt the popover's position to the new layout.
|
|
105
102
|
|
|
106
103
|
TODO: extend this to Enter and Spacebar?
|
|
107
104
|
*/
|
|
108
|
-
|
|
109
|
-
|
|
105
|
+
const updatePosition = () => requestAnimationFrame(() => updatePositionHandler());
|
|
106
|
+
const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());
|
|
110
107
|
window.addEventListener('click', updatePosition);
|
|
111
108
|
window.addEventListener('resize', updatePosition);
|
|
112
109
|
window.addEventListener('scroll', refreshPosition, true);
|
|
113
|
-
return
|
|
110
|
+
return () => {
|
|
114
111
|
window.removeEventListener('click', updatePosition);
|
|
115
112
|
window.removeEventListener('resize', updatePosition);
|
|
116
113
|
window.removeEventListener('scroll', refreshPosition, true);
|
|
117
114
|
};
|
|
118
115
|
}, [updatePositionHandler]);
|
|
119
|
-
return (React.createElement("div", { ref: popoverRef, style:
|
|
120
|
-
React.createElement("div", { ref: arrowRef, className: clsx(styles[
|
|
121
|
-
React.createElement("div", { ref: bodyRef, className: clsx(styles['container-body'], styles[
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
116
|
+
return (React.createElement("div", { ref: popoverRef, style: Object.assign(Object.assign({}, popoverStyle), { zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
|
|
117
|
+
React.createElement("div", { ref: arrowRef, className: clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`]), "aria-hidden": true }, arrow(internalPosition)),
|
|
118
|
+
React.createElement("div", { ref: bodyRef, className: clsx(styles['container-body'], styles[`container-body-size-${size}`], {
|
|
119
|
+
[styles['fixed-width']]: fixedWidth,
|
|
120
|
+
[styles[`container-body-variant-${variant}`]]: variant,
|
|
121
|
+
}) },
|
|
125
122
|
React.createElement("div", { ref: contentRef }, children))));
|
|
126
123
|
}
|
|
127
124
|
function getBorderWidth(element) {
|
|
@@ -133,7 +130,7 @@ function getBorderWidth(element) {
|
|
|
133
130
|
function toRelativePosition(element, parent) {
|
|
134
131
|
return {
|
|
135
132
|
top: element.top - parent.top,
|
|
136
|
-
left: element.left - parent.left
|
|
133
|
+
left: element.left - parent.left,
|
|
137
134
|
};
|
|
138
135
|
}
|
|
139
136
|
/**
|
|
@@ -144,16 +141,16 @@ function getViewportRect(window) {
|
|
|
144
141
|
top: 0,
|
|
145
142
|
left: 0,
|
|
146
143
|
width: window.innerWidth,
|
|
147
|
-
height: window.innerHeight
|
|
144
|
+
height: window.innerHeight,
|
|
148
145
|
};
|
|
149
146
|
}
|
|
150
147
|
function getDocumentRect(document) {
|
|
151
|
-
|
|
148
|
+
const { top, left } = document.documentElement.getBoundingClientRect();
|
|
152
149
|
return {
|
|
153
|
-
top
|
|
154
|
-
left
|
|
150
|
+
top,
|
|
151
|
+
left,
|
|
155
152
|
width: document.documentElement.scrollWidth,
|
|
156
|
-
height: document.documentElement.scrollHeight
|
|
153
|
+
height: document.documentElement.scrollHeight,
|
|
157
154
|
};
|
|
158
155
|
}
|
|
159
156
|
//# sourceMappingURL=container.js.map
|
package/popover/container.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.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, { CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getContainingBlock, nodeContains } from '../internal/utils/dom';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\nimport { BoundingOffset, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition } from './utils/positions';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface PopoverContainerProps {\n /** References the element the container is positioned against. */\n trackRef: React.RefObject<Element>;\n /**\n Used to update the container position in case track or track position changes:\n \n const trackRef = useRef<Element>(null)\n return (<>\n <Track style={getPosition(selectedItemId)} ref={trackRef} />\n <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n </>)\n */\n trackKey?: string | number;\n position: PopoverProps.Position;\n zIndex?: React.CSSProperties['zIndex'];\n arrow: (position: InternalPosition | null) => React.ReactNode;\n children: React.ReactNode;\n renderWithPortal?: boolean;\n size: PopoverProps.Size;\n fixedWidth: boolean;\n variant?: 'annotation';\n}\n\nconst INITIAL_STYLES: CSSProperties = { position: 'absolute', top: -9999, left: -9999 };\n\nexport default function PopoverContainer({\n position,\n trackRef,\n trackKey,\n arrow,\n children,\n zIndex,\n renderWithPortal,\n size,\n fixedWidth,\n variant,\n}: PopoverContainerProps) {\n const bodyRef = useRef<HTMLDivElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const [popoverStyle, setPopoverStyle] = useState<CSSProperties>(INITIAL_STYLES);\n const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n const isRefresh = useVisualRefresh();\n\n // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n const positionHandlerRef = useRef<() => void>(() => {});\n\n // Updates the position handler.\n const updatePositionHandler = useCallback(() => {\n if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n return;\n }\n\n // Get important elements\n const popover = popoverRef.current;\n const body = bodyRef.current;\n const arrow = arrowRef.current;\n const document = popover.ownerDocument;\n const track = trackRef.current;\n\n // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n // or track does not belong to the document - bail on calculating dimensions.\n if (popover.offsetWidth === 0 || popover.offsetHeight === 0 || !nodeContains(document.body, track)) {\n return;\n }\n\n // Imperatively move body off-screen to give it room to expand.\n // Not doing this in React because this recalculation should happen\n // in the span of a single frame without rerendering anything.\n const prevTop = popover.style.top;\n const prevLeft = popover.style.left;\n popover.style.top = '0';\n popover.style.left = '0';\n // Imperatively remove body styles that can remain from the previous computation.\n body.style.maxHeight = '';\n body.style.overflowX = '';\n body.style.overflowY = '';\n\n // Get rects representing key elements\n // Use getComputedStyle for arrowRect to avoid modifications made by transform\n const viewportRect = getViewportRect(document.defaultView!);\n const trackRect = track.getBoundingClientRect();\n const arrowRect = {\n width: parseFloat(getComputedStyle(arrow).width),\n height: parseFloat(getComputedStyle(arrow).height),\n };\n const containingBlock = getContainingBlock(popover);\n const containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;\n\n const bodyBorderWidth = getBorderWidth(body);\n const contentRect = contentRef.current.getBoundingClientRect();\n const contentBoundingBox = {\n width: contentRect.width + 2 * bodyBorderWidth,\n height: contentRect.height + 2 * bodyBorderWidth,\n };\n\n // Calculate the arrow direction and viewport-relative position of the popover.\n const {\n scrollable,\n internalPosition: newInternalPosition,\n boundingOffset,\n } = calculatePosition(\n position,\n trackRect,\n arrowRect,\n contentBoundingBox,\n containingBlock ? containingBlockRect : getDocumentRect(document),\n viewportRect,\n renderWithPortal\n );\n\n // Get the position of the popover relative to the offset parent.\n const popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);\n\n // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n // and use that to recalculate the new popover position.\n const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n // Bring back the container to its original position to prevent any flashing.\n popover.style.top = prevTop;\n popover.style.left = prevLeft;\n\n // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n if (scrollable) {\n body.style.maxHeight = boundingOffset.height + 'px';\n body.style.overflowX = 'hidden';\n body.style.overflowY = 'auto';\n }\n\n // Position the popover\n setInternalPosition(newInternalPosition);\n setPopoverStyle({ top: popoverOffset.top, left: popoverOffset.left });\n\n positionHandlerRef.current = () => {\n const newTrackOffset = toRelativePosition(\n track.getBoundingClientRect(),\n containingBlock ? containingBlock.getBoundingClientRect() : viewportRect\n );\n setPopoverStyle({\n top: newTrackOffset.top + trackRelativeOffset.top,\n left: newTrackOffset.left + trackRelativeOffset.left,\n });\n };\n }, [position, trackRef, renderWithPortal]);\n\n // Recalculate position when properties change.\n useLayoutEffect(() => {\n updatePositionHandler();\n }, [updatePositionHandler, trackKey]);\n\n // Recalculate position when content size changes.\n useResizeObserver(contentRef, () => updatePositionHandler());\n\n // Recalculate position on DOM events.\n useLayoutEffect(() => {\n /*\n This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n and by tracking the click event we can adapt the popover's position to the new layout.\n\n TODO: extend this to Enter and Spacebar?\n */\n const updatePosition = () => requestAnimationFrame(() => updatePositionHandler());\n const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n window.addEventListener('click', updatePosition);\n window.addEventListener('resize', updatePosition);\n window.addEventListener('scroll', refreshPosition, true);\n return () => {\n window.removeEventListener('click', updatePosition);\n window.removeEventListener('resize', updatePosition);\n window.removeEventListener('scroll', refreshPosition, true);\n };\n }, [updatePositionHandler]);\n\n return (\n <div\n ref={popoverRef}\n style={{ ...popoverStyle, zIndex }}\n className={clsx(styles.container, isRefresh && styles.refresh)}\n >\n <div\n ref={arrowRef}\n className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n aria-hidden={true}\n >\n {arrow(internalPosition)}\n </div>\n\n <div\n ref={bodyRef}\n className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n [styles['fixed-width']]: fixedWidth,\n [styles[`container-body-variant-${variant}`]]: variant,\n })}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n </div>\n );\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n return {\n top: element.top - parent.top,\n left: element.left - parent.left,\n };\n}\n\n/**\n * Get a BoundingOffset that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingOffset {\n return {\n top: 0,\n left: 0,\n width: window.innerWidth,\n height: window.innerHeight,\n };\n}\n\nfunction getDocumentRect(document: Document): BoundingOffset {\n const { top, left } = document.documentElement.getBoundingClientRect();\n return {\n top,\n left,\n width: document.documentElement.scrollWidth,\n height: document.documentElement.scrollHeight,\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.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, { CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getContainingBlock, nodeContains } from '../internal/utils/dom';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\nimport { BoundingOffset, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition } from './utils/positions';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface PopoverContainerProps {\n /** References the element the container is positioned against. */\n trackRef: React.RefObject<Element>;\n /**\n Used to update the container position in case track or track position changes:\n \n const trackRef = useRef<Element>(null)\n return (<>\n <Track style={getPosition(selectedItemId)} ref={trackRef} />\n <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n </>)\n */\n trackKey?: string | number;\n position: PopoverProps.Position;\n zIndex?: React.CSSProperties['zIndex'];\n arrow: (position: InternalPosition | null) => React.ReactNode;\n children: React.ReactNode;\n renderWithPortal?: boolean;\n size: PopoverProps.Size;\n fixedWidth: boolean;\n variant?: 'annotation';\n}\n\nconst INITIAL_STYLES: CSSProperties = { position: 'absolute', top: -9999, left: -9999 };\n\nexport default function PopoverContainer({\n position,\n trackRef,\n trackKey,\n arrow,\n children,\n zIndex,\n renderWithPortal,\n size,\n fixedWidth,\n variant,\n}: PopoverContainerProps) {\n const bodyRef = useRef<HTMLDivElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const [popoverStyle, setPopoverStyle] = useState<CSSProperties>(INITIAL_STYLES);\n const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n const isRefresh = useVisualRefresh();\n\n // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n const positionHandlerRef = useRef<() => void>(() => {});\n\n // Updates the position handler.\n const updatePositionHandler = useCallback(() => {\n if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n return;\n }\n\n // Get important elements\n const popover = popoverRef.current;\n const body = bodyRef.current;\n const arrow = arrowRef.current;\n const document = popover.ownerDocument;\n const track = trackRef.current;\n\n // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n // or track does not belong to the document - bail on calculating dimensions.\n if (popover.offsetWidth === 0 || popover.offsetHeight === 0 || !nodeContains(document.body, track)) {\n return;\n }\n\n // Imperatively move body off-screen to give it room to expand.\n // Not doing this in React because this recalculation should happen\n // in the span of a single frame without rerendering anything.\n const prevTop = popover.style.top;\n const prevLeft = popover.style.left;\n popover.style.top = '0';\n popover.style.left = '0';\n // Imperatively remove body styles that can remain from the previous computation.\n body.style.maxHeight = '';\n body.style.overflowX = '';\n body.style.overflowY = '';\n\n // Get rects representing key elements\n // Use getComputedStyle for arrowRect to avoid modifications made by transform\n const viewportRect = getViewportRect(document.defaultView!);\n const trackRect = track.getBoundingClientRect();\n const arrowRect = {\n width: parseFloat(getComputedStyle(arrow).width),\n height: parseFloat(getComputedStyle(arrow).height),\n };\n const containingBlock = getContainingBlock(popover);\n const containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;\n\n const bodyBorderWidth = getBorderWidth(body);\n const contentRect = contentRef.current.getBoundingClientRect();\n const contentBoundingBox = {\n width: contentRect.width + 2 * bodyBorderWidth,\n height: contentRect.height + 2 * bodyBorderWidth,\n };\n\n // Calculate the arrow direction and viewport-relative position of the popover.\n const {\n scrollable,\n internalPosition: newInternalPosition,\n boundingOffset,\n } = calculatePosition(\n position,\n trackRect,\n arrowRect,\n contentBoundingBox,\n containingBlock ? containingBlockRect : getDocumentRect(document),\n viewportRect,\n renderWithPortal\n );\n\n // Get the position of the popover relative to the offset parent.\n const popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);\n\n // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n // and use that to recalculate the new popover position.\n const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n // Bring back the container to its original position to prevent any flashing.\n popover.style.top = prevTop;\n popover.style.left = prevLeft;\n\n // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n if (scrollable) {\n body.style.maxHeight = boundingOffset.height + 'px';\n body.style.overflowX = 'hidden';\n body.style.overflowY = 'auto';\n }\n\n // Position the popover\n setInternalPosition(newInternalPosition);\n setPopoverStyle({ top: popoverOffset.top, left: popoverOffset.left });\n\n positionHandlerRef.current = () => {\n const newTrackOffset = toRelativePosition(\n track.getBoundingClientRect(),\n containingBlock ? containingBlock.getBoundingClientRect() : viewportRect\n );\n setPopoverStyle({\n top: newTrackOffset.top + trackRelativeOffset.top,\n left: newTrackOffset.left + trackRelativeOffset.left,\n });\n };\n }, [position, trackRef, renderWithPortal]);\n\n // Recalculate position when properties change.\n useLayoutEffect(() => {\n updatePositionHandler();\n }, [updatePositionHandler, trackKey]);\n\n // Recalculate position when content size changes.\n useResizeObserver(contentRef, () => updatePositionHandler());\n\n // Recalculate position on DOM events.\n useLayoutEffect(() => {\n /*\n This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n and by tracking the click event we can adapt the popover's position to the new layout.\n\n TODO: extend this to Enter and Spacebar?\n */\n const updatePosition = () => requestAnimationFrame(() => updatePositionHandler());\n const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n window.addEventListener('click', updatePosition);\n window.addEventListener('resize', updatePosition);\n window.addEventListener('scroll', refreshPosition, true);\n return () => {\n window.removeEventListener('click', updatePosition);\n window.removeEventListener('resize', updatePosition);\n window.removeEventListener('scroll', refreshPosition, true);\n };\n }, [updatePositionHandler]);\n\n return (\n <div\n ref={popoverRef}\n style={{ ...popoverStyle, zIndex }}\n className={clsx(styles.container, isRefresh && styles.refresh)}\n >\n <div\n ref={arrowRef}\n className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n aria-hidden={true}\n >\n {arrow(internalPosition)}\n </div>\n\n <div\n ref={bodyRef}\n className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n [styles['fixed-width']]: fixedWidth,\n [styles[`container-body-variant-${variant}`]]: variant,\n })}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n </div>\n );\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n return {\n top: element.top - parent.top,\n left: element.left - parent.left,\n };\n}\n\n/**\n * Get a BoundingOffset that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingOffset {\n return {\n top: 0,\n left: 0,\n width: window.innerWidth,\n height: window.innerHeight,\n };\n}\n\nfunction getDocumentRect(document: Document): BoundingOffset {\n const { top, left } = document.documentElement.getBoundingClientRect();\n return {\n top,\n left,\n width: document.documentElement.scrollWidth,\n height: document.documentElement.scrollHeight,\n };\n}\n"]}
|
package/popover/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 from 'react';
|
|
@@ -9,15 +9,15 @@ import useBaseComponent from '../internal/hooks/use-base-component';
|
|
|
9
9
|
import { isDevelopment } from '../internal/is-development';
|
|
10
10
|
import { warnOnce } from '../internal/logging';
|
|
11
11
|
export default function Popover(_a) {
|
|
12
|
-
var
|
|
12
|
+
var { position = 'right', size = 'medium', fixedWidth = false, triggerType = 'text', dismissButton = true, renderWithPortal = false, header } = _a, rest = __rest(_a, ["position", "size", "fixedWidth", "triggerType", "dismissButton", "renderWithPortal", "header"]);
|
|
13
13
|
if (isDevelopment) {
|
|
14
14
|
if (dismissButton && !header) {
|
|
15
|
-
warnOnce('Popover',
|
|
15
|
+
warnOnce('Popover', `You should provide a \`header\` when \`dismissButton\` is true.`);
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return (React.createElement(InternalPopover,
|
|
18
|
+
const baseComponentProps = useBaseComponent('Popover');
|
|
19
|
+
const externalProps = getExternalProps(rest);
|
|
20
|
+
return (React.createElement(InternalPopover, Object.assign({ header: header, position: position, size: size, fixedWidth: fixedWidth, triggerType: triggerType, dismissButton: dismissButton, renderWithPortal: renderWithPortal }, externalProps, baseComponentProps)));
|
|
21
21
|
}
|
|
22
22
|
applyDisplayName(Popover, 'Popover');
|
|
23
23
|
//# sourceMappingURL=index.js.map
|
package/popover/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/popover/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAK/C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EASjB;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/popover/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAK/C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EASjB;QATiB,EAC9B,QAAQ,GAAG,OAAO,EAClB,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,MAAM,EACpB,aAAa,GAAG,IAAI,EACpB,gBAAgB,GAAG,KAAK,EACxB,MAAM,OAEO,EADV,IAAI,cARuB,gGAS/B,CADQ;IAEP,IAAI,aAAa,EAAE;QACjB,IAAI,aAAa,IAAI,CAAC,MAAM,EAAE;YAC5B,QAAQ,CAAC,SAAS,EAAE,iEAAiE,CAAC,CAAC;SACxF;KACF;IAED,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,CACL,oBAAC,eAAe,kBACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,IAC9B,aAAa,EACb,kBAAkB,EACtB,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,OAAO,EAAE,SAAS,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 InternalPopover from './internal';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\nimport { PopoverProps } from './interfaces';\n\nexport { PopoverProps };\n\nexport default function Popover({\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n renderWithPortal = false,\n header,\n ...rest\n}: PopoverProps) {\n if (isDevelopment) {\n if (dismissButton && !header) {\n warnOnce('Popover', `You should provide a \\`header\\` when \\`dismissButton\\` is true.`);\n }\n }\n\n const baseComponentProps = useBaseComponent('Popover');\n const externalProps = getExternalProps(rest);\n return (\n <InternalPopover\n header={header}\n position={position}\n size={size}\n fixedWidth={fixedWidth}\n triggerType={triggerType}\n dismissButton={dismissButton}\n renderWithPortal={renderWithPortal}\n {...externalProps}\n {...baseComponentProps}\n />\n );\n}\n\napplyDisplayName(Popover, 'Popover');\n"]}
|