@elastic/eui 109.0.0 → 109.1.0
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/es/components/accessibility/skip_link/skip_link.js +10 -1
- package/es/components/bottom_bar/bottom_bar.js +12 -2
- package/es/components/button/button.js +20 -25
- package/es/components/button/button_display/_button_display.js +32 -30
- package/es/components/button/button_display/_button_display.styles.js +4 -4
- package/es/components/button/button_empty/button_empty.js +32 -14
- package/es/components/button/button_group/button_group.js +49 -31
- package/es/components/button/button_group/button_group_button.js +14 -2
- package/es/components/button/button_group/button_group_button.styles.js +12 -8
- package/es/components/button/button_icon/button_icon.js +30 -6
- package/es/components/card/card.js +20 -25
- package/es/components/card/card_select/card_select.js +20 -25
- package/es/components/code/code_block_virtualized.js +9 -7
- package/es/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.js +13 -1
- package/es/components/datagrid/body/cell/data_grid_cell.js +35 -12
- package/es/components/datagrid/body/data_grid_body.js +23 -6
- package/es/components/datagrid/body/data_grid_body_custom.js +23 -6
- package/es/components/datagrid/body/data_grid_body_virtualized.js +23 -6
- package/es/components/datagrid/body/header/data_grid_header_cell.js +23 -6
- package/es/components/datagrid/controls/column_selector.js +36 -19
- package/es/components/datagrid/controls/column_sorting.js +23 -6
- package/es/components/datagrid/controls/data_grid_toolbar_control.js +13 -7
- package/es/components/datagrid/data_grid.js +5 -1
- package/es/components/datagrid/utils/in_memory.js +25 -7
- package/es/components/date_picker/auto_refresh/auto_refresh.js +11 -2
- package/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js +31 -5
- package/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js +24 -3
- package/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js +26 -4
- package/es/components/date_picker/super_date_picker/date_popover/relative_tab.js +29 -3
- package/es/components/date_picker/super_date_picker/date_popover/timezone_display.js +98 -0
- package/es/components/date_picker/super_date_picker/date_popover/timezone_display.styles.js +19 -0
- package/es/components/date_picker/super_date_picker/pretty_duration.js +1 -8
- package/es/components/date_picker/super_date_picker/relative_utils.js +8 -0
- package/es/components/date_picker/super_date_picker/super_date_picker.js +118 -26
- package/es/components/date_picker/super_date_picker/time_window_buttons.js +185 -0
- package/es/components/facet/facet_button.js +9 -19
- package/es/components/filter_group/filter_button.js +14 -1
- package/es/components/flyout/flyout.js +27 -10
- package/es/components/form/form_control_button/form_control_button.js +13 -7
- package/es/components/header/header_links/header_link.js +13 -7
- package/es/components/header/header_section/header_section_item_button.js +13 -7
- package/es/components/icon/assets/boxes_vertical.js +1 -1
- package/es/components/icon/assets/checkInCircleFilled.js +1 -2
- package/es/components/icon/assets/errorFilled.js +1 -2
- package/es/components/icon/assets/warningFilled.js +1 -2
- package/es/components/icon/icon_map.js +3 -6
- package/es/components/list_group/list_group.js +13 -1
- package/es/components/list_group/list_group_item.js +13 -1
- package/es/components/list_group/list_group_item_extra_action.js +13 -1
- package/es/components/list_group/pinnable_list_group/pinnable_list_group.js +15 -2
- package/es/components/overlay_mask/overlay_mask.styles.js +1 -1
- package/es/components/pagination/pagination_button.js +13 -7
- package/es/components/popover/popover.js +22 -16
- package/es/components/provider/component_defaults/component_defaults.js +22 -2
- package/es/components/table/table_row.styles.js +1 -1
- package/es/components/tool_tip/tool_tip.js +24 -24
- package/es/global_styling/index.js +2 -1
- package/es/global_styling/mixins/_button.js +1 -1
- package/es/global_styling/utility/selectors.js +9 -0
- package/es/services/focus_trap/focus_trap_pub_sub.js +74 -0
- package/es/services/focus_trap/index.js +9 -0
- package/es/services/hooks/index.js +2 -1
- package/es/services/hooks/useEuiDisabledElement.js +195 -0
- package/es/services/index.js +1 -0
- package/es/services/popover/reposition_on_scroll.js +61 -0
- package/es/test/cypress/index.d.ts +12 -0
- package/es/test/cypress/index.js +9 -0
- package/es/test/cypress/matchers.d.ts +20 -0
- package/es/test/cypress/matchers.js +54 -0
- package/es/test/cypress/test_reposition_on_scroll.js +66 -0
- package/es/test/enzyme/enzyme_matchers.d.ts +36 -0
- package/es/test/enzyme/enzyme_matchers.js +43 -0
- package/es/test/enzyme/index.d.ts +14 -0
- package/es/test/enzyme/index.js +10 -0
- package/es/test/rtl/index.d.ts +9 -1
- package/es/test/rtl/index.js +2 -1
- package/es/test/rtl/matchers.d.ts +36 -0
- package/es/test/rtl/matchers.js +82 -0
- package/es/utils/element_can_be_disabled.js +16 -0
- package/es/utils/index.js +2 -1
- package/eui.d.ts +588 -180
- package/i18ntokens.json +1357 -1231
- package/lib/components/accessibility/skip_link/skip_link.js +10 -1
- package/lib/components/bottom_bar/bottom_bar.js +11 -1
- package/lib/components/button/button.js +21 -26
- package/lib/components/button/button_display/_button_display.js +31 -29
- package/lib/components/button/button_display/_button_display.styles.js +4 -4
- package/lib/components/button/button_empty/button_empty.js +31 -13
- package/lib/components/button/button_group/button_group.js +49 -31
- package/lib/components/button/button_group/button_group_button.js +14 -2
- package/lib/components/button/button_group/button_group_button.styles.js +10 -6
- package/lib/components/button/button_icon/button_icon.js +29 -5
- package/lib/components/card/card.js +21 -26
- package/lib/components/card/card_select/card_select.js +21 -26
- package/lib/components/code/code_block_virtualized.js +9 -7
- package/lib/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.js +13 -1
- package/lib/components/datagrid/body/cell/data_grid_cell.js +35 -12
- package/lib/components/datagrid/body/data_grid_body.js +23 -6
- package/lib/components/datagrid/body/data_grid_body_custom.js +23 -6
- package/lib/components/datagrid/body/data_grid_body_virtualized.js +23 -6
- package/lib/components/datagrid/body/header/data_grid_header_cell.js +23 -6
- package/lib/components/datagrid/controls/column_selector.js +36 -19
- package/lib/components/datagrid/controls/column_sorting.js +23 -6
- package/lib/components/datagrid/controls/data_grid_toolbar_control.js +13 -7
- package/lib/components/datagrid/data_grid.js +5 -1
- package/lib/components/datagrid/utils/in_memory.js +25 -7
- package/lib/components/date_picker/auto_refresh/auto_refresh.js +12 -3
- package/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js +30 -4
- package/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js +24 -3
- package/lib/components/date_picker/super_date_picker/date_popover/date_popover_content.js +26 -4
- package/lib/components/date_picker/super_date_picker/date_popover/relative_tab.js +29 -3
- package/lib/components/date_picker/super_date_picker/date_popover/timezone_display.js +104 -0
- package/lib/components/date_picker/super_date_picker/date_popover/timezone_display.styles.js +25 -0
- package/lib/components/date_picker/super_date_picker/pretty_duration.js +2 -9
- package/lib/components/date_picker/super_date_picker/relative_utils.js +9 -0
- package/lib/components/date_picker/super_date_picker/super_date_picker.js +118 -26
- package/lib/components/date_picker/super_date_picker/time_window_buttons.js +193 -0
- package/lib/components/facet/facet_button.js +9 -19
- package/lib/components/filter_group/filter_button.js +14 -1
- package/lib/components/flyout/flyout.js +26 -9
- package/lib/components/form/form_control_button/form_control_button.js +13 -7
- package/lib/components/header/header_links/header_link.js +13 -7
- package/lib/components/header/header_section/header_section_item_button.js +13 -7
- package/lib/components/icon/assets/boxes_vertical.js +1 -1
- package/lib/components/icon/assets/checkInCircleFilled.js +1 -2
- package/lib/components/icon/assets/errorFilled.js +1 -2
- package/lib/components/icon/assets/warningFilled.js +1 -2
- package/lib/components/icon/icon_map.js +3 -6
- package/lib/components/icon/svgs/boxes_vertical.svg +1 -1
- package/lib/components/icon/svgs/checkInCircleFilled.svg +1 -1
- package/lib/components/icon/svgs/errorFilled.svg +1 -1
- package/lib/components/icon/svgs/warningFilled.svg +1 -1
- package/lib/components/list_group/list_group.js +13 -1
- package/lib/components/list_group/list_group_item.js +13 -1
- package/lib/components/list_group/list_group_item_extra_action.js +13 -1
- package/lib/components/list_group/pinnable_list_group/pinnable_list_group.js +15 -2
- package/lib/components/overlay_mask/overlay_mask.styles.js +1 -1
- package/lib/components/pagination/pagination_button.js +13 -7
- package/lib/components/popover/popover.js +21 -15
- package/lib/components/provider/component_defaults/component_defaults.js +22 -2
- package/lib/components/table/table_row.styles.js +1 -1
- package/lib/components/tool_tip/tool_tip.js +24 -24
- package/lib/global_styling/index.js +16 -1
- package/lib/global_styling/mixins/_button.js +1 -1
- package/lib/global_styling/utility/selectors.js +15 -0
- package/lib/services/focus_trap/focus_trap_pub_sub.js +80 -0
- package/lib/services/focus_trap/index.js +12 -0
- package/lib/services/hooks/index.js +18 -1
- package/lib/services/hooks/useEuiDisabledElement.js +199 -0
- package/lib/services/index.js +8 -0
- package/lib/services/popover/reposition_on_scroll.js +67 -0
- package/lib/test/cypress/index.d.ts +12 -0
- package/lib/test/cypress/index.js +18 -0
- package/lib/test/cypress/matchers.d.ts +20 -0
- package/lib/test/cypress/matchers.js +61 -0
- package/lib/test/cypress/test_reposition_on_scroll.js +69 -0
- package/lib/test/enzyme/enzyme_matchers.d.ts +36 -0
- package/lib/test/enzyme/enzyme_matchers.js +49 -0
- package/lib/test/enzyme/index.d.ts +14 -0
- package/lib/test/enzyme/index.js +24 -0
- package/lib/test/rtl/index.d.ts +9 -1
- package/lib/test/rtl/index.js +24 -2
- package/lib/test/rtl/matchers.d.ts +36 -0
- package/lib/test/rtl/matchers.js +86 -0
- package/lib/utils/element_can_be_disabled.js +22 -0
- package/lib/utils/index.js +14 -1
- package/optimize/es/components/bottom_bar/bottom_bar.js +12 -2
- package/optimize/es/components/button/button_display/_button_display.js +24 -12
- package/optimize/es/components/button/button_display/_button_display.styles.js +4 -4
- package/optimize/es/components/button/button_empty/button_empty.js +18 -6
- package/optimize/es/components/button/button_group/button_group.js +10 -5
- package/optimize/es/components/button/button_group/button_group_button.js +1 -1
- package/optimize/es/components/button/button_group/button_group_button.styles.js +12 -8
- package/optimize/es/components/button/button_icon/button_icon.js +17 -5
- package/optimize/es/components/code/code_block_virtualized.js +9 -7
- package/optimize/es/components/datagrid/controls/column_selector.js +36 -19
- package/optimize/es/components/datagrid/data_grid.js +5 -1
- package/optimize/es/components/datagrid/utils/in_memory.js +2 -1
- package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js +12 -4
- package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js +5 -2
- package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js +7 -3
- package/optimize/es/components/date_picker/super_date_picker/date_popover/relative_tab.js +10 -2
- package/optimize/es/components/date_picker/super_date_picker/date_popover/timezone_display.js +97 -0
- package/optimize/es/components/date_picker/super_date_picker/date_popover/timezone_display.styles.js +19 -0
- package/optimize/es/components/date_picker/super_date_picker/pretty_duration.js +1 -8
- package/optimize/es/components/date_picker/super_date_picker/relative_utils.js +8 -0
- package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js +49 -25
- package/optimize/es/components/date_picker/super_date_picker/time_window_buttons.js +185 -0
- package/optimize/es/components/flyout/flyout.js +27 -10
- package/optimize/es/components/icon/assets/boxes_vertical.js +1 -1
- package/optimize/es/components/icon/assets/checkInCircleFilled.js +1 -2
- package/optimize/es/components/icon/assets/errorFilled.js +1 -2
- package/optimize/es/components/icon/assets/warningFilled.js +1 -2
- package/optimize/es/components/icon/icon_map.js +3 -6
- package/optimize/es/components/overlay_mask/overlay_mask.styles.js +1 -1
- package/optimize/es/components/popover/popover.js +22 -16
- package/optimize/es/components/table/table_row.styles.js +1 -1
- package/optimize/es/components/tool_tip/tool_tip.js +24 -24
- package/optimize/es/global_styling/index.js +2 -1
- package/optimize/es/global_styling/mixins/_button.js +1 -1
- package/optimize/es/global_styling/utility/selectors.js +9 -0
- package/optimize/es/services/focus_trap/focus_trap_pub_sub.js +74 -0
- package/optimize/es/services/focus_trap/index.js +9 -0
- package/optimize/es/services/hooks/index.js +2 -1
- package/optimize/es/services/hooks/useEuiDisabledElement.js +192 -0
- package/optimize/es/services/index.js +1 -0
- package/optimize/es/services/popover/reposition_on_scroll.js +61 -0
- package/optimize/es/test/cypress/index.d.ts +12 -0
- package/optimize/es/test/cypress/index.js +9 -0
- package/optimize/es/test/cypress/matchers.d.ts +20 -0
- package/optimize/es/test/cypress/matchers.js +54 -0
- package/optimize/es/test/cypress/test_reposition_on_scroll.js +63 -0
- package/optimize/es/test/enzyme/enzyme_matchers.d.ts +36 -0
- package/optimize/es/test/enzyme/enzyme_matchers.js +43 -0
- package/optimize/es/test/enzyme/index.d.ts +14 -0
- package/optimize/es/test/enzyme/index.js +10 -0
- package/optimize/es/test/rtl/index.d.ts +9 -1
- package/optimize/es/test/rtl/index.js +2 -1
- package/optimize/es/test/rtl/matchers.d.ts +36 -0
- package/optimize/es/test/rtl/matchers.js +82 -0
- package/optimize/es/utils/element_can_be_disabled.js +16 -0
- package/optimize/es/utils/index.js +2 -1
- package/optimize/lib/components/bottom_bar/bottom_bar.js +11 -1
- package/optimize/lib/components/button/button_display/_button_display.js +23 -11
- package/optimize/lib/components/button/button_display/_button_display.styles.js +4 -4
- package/optimize/lib/components/button/button_empty/button_empty.js +17 -5
- package/optimize/lib/components/button/button_group/button_group.js +10 -5
- package/optimize/lib/components/button/button_group/button_group_button.js +1 -1
- package/optimize/lib/components/button/button_group/button_group_button.styles.js +10 -6
- package/optimize/lib/components/button/button_icon/button_icon.js +16 -4
- package/optimize/lib/components/code/code_block_virtualized.js +9 -7
- package/optimize/lib/components/datagrid/controls/column_selector.js +36 -19
- package/optimize/lib/components/datagrid/data_grid.js +5 -1
- package/optimize/lib/components/datagrid/utils/in_memory.js +2 -1
- package/optimize/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js +11 -3
- package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js +5 -2
- package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_content.js +7 -3
- package/optimize/lib/components/date_picker/super_date_picker/date_popover/relative_tab.js +10 -2
- package/optimize/lib/components/date_picker/super_date_picker/date_popover/timezone_display.js +103 -0
- package/optimize/lib/components/date_picker/super_date_picker/date_popover/timezone_display.styles.js +25 -0
- package/optimize/lib/components/date_picker/super_date_picker/pretty_duration.js +2 -9
- package/optimize/lib/components/date_picker/super_date_picker/relative_utils.js +9 -0
- package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js +49 -25
- package/optimize/lib/components/date_picker/super_date_picker/time_window_buttons.js +193 -0
- package/optimize/lib/components/flyout/flyout.js +26 -9
- package/optimize/lib/components/icon/assets/boxes_vertical.js +1 -1
- package/optimize/lib/components/icon/assets/checkInCircleFilled.js +1 -2
- package/optimize/lib/components/icon/assets/errorFilled.js +1 -2
- package/optimize/lib/components/icon/assets/warningFilled.js +1 -2
- package/optimize/lib/components/icon/icon_map.js +3 -6
- package/optimize/lib/components/icon/svgs/boxes_vertical.svg +1 -1
- package/optimize/lib/components/icon/svgs/checkInCircleFilled.svg +1 -1
- package/optimize/lib/components/icon/svgs/errorFilled.svg +1 -1
- package/optimize/lib/components/icon/svgs/warningFilled.svg +1 -1
- package/optimize/lib/components/overlay_mask/overlay_mask.styles.js +1 -1
- package/optimize/lib/components/popover/popover.js +21 -15
- package/optimize/lib/components/table/table_row.styles.js +1 -1
- package/optimize/lib/components/tool_tip/tool_tip.js +24 -24
- package/optimize/lib/global_styling/index.js +16 -1
- package/optimize/lib/global_styling/mixins/_button.js +1 -1
- package/optimize/lib/global_styling/utility/selectors.js +15 -0
- package/optimize/lib/services/focus_trap/focus_trap_pub_sub.js +80 -0
- package/optimize/lib/services/focus_trap/index.js +12 -0
- package/optimize/lib/services/hooks/index.js +18 -1
- package/optimize/lib/services/hooks/useEuiDisabledElement.js +197 -0
- package/optimize/lib/services/index.js +8 -0
- package/optimize/lib/services/popover/reposition_on_scroll.js +67 -0
- package/optimize/lib/test/cypress/index.d.ts +12 -0
- package/optimize/lib/test/cypress/index.js +18 -0
- package/optimize/lib/test/cypress/matchers.d.ts +20 -0
- package/optimize/lib/test/cypress/matchers.js +61 -0
- package/optimize/lib/test/cypress/test_reposition_on_scroll.js +70 -0
- package/optimize/lib/test/enzyme/enzyme_matchers.d.ts +36 -0
- package/optimize/lib/test/enzyme/enzyme_matchers.js +50 -0
- package/optimize/lib/test/enzyme/index.d.ts +14 -0
- package/optimize/lib/test/enzyme/index.js +24 -0
- package/optimize/lib/test/rtl/index.d.ts +9 -1
- package/optimize/lib/test/rtl/index.js +24 -2
- package/optimize/lib/test/rtl/matchers.d.ts +36 -0
- package/optimize/lib/test/rtl/matchers.js +86 -0
- package/optimize/lib/utils/element_can_be_disabled.js +22 -0
- package/optimize/lib/utils/index.js +14 -1
- package/package.json +1 -1
- package/test-env/components/accessibility/skip_link/skip_link.js +10 -1
- package/test-env/components/bottom_bar/bottom_bar.js +11 -1
- package/test-env/components/button/button.js +21 -26
- package/test-env/components/button/button_display/_button_display.js +31 -29
- package/test-env/components/button/button_display/_button_display.styles.js +4 -4
- package/test-env/components/button/button_empty/button_empty.js +31 -13
- package/test-env/components/button/button_group/button_group.js +49 -31
- package/test-env/components/button/button_group/button_group_button.js +14 -2
- package/test-env/components/button/button_group/button_group_button.styles.js +10 -6
- package/test-env/components/button/button_icon/button_icon.js +29 -5
- package/test-env/components/card/card.js +21 -26
- package/test-env/components/card/card_select/card_select.js +21 -26
- package/test-env/components/code/code_block_virtualized.js +9 -7
- package/test-env/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.js +13 -1
- package/test-env/components/datagrid/body/cell/data_grid_cell.js +35 -12
- package/test-env/components/datagrid/body/data_grid_body.js +23 -6
- package/test-env/components/datagrid/body/data_grid_body_custom.js +23 -6
- package/test-env/components/datagrid/body/data_grid_body_virtualized.js +23 -6
- package/test-env/components/datagrid/body/header/data_grid_header_cell.js +23 -6
- package/test-env/components/datagrid/controls/column_selector.js +36 -19
- package/test-env/components/datagrid/controls/column_sorting.js +23 -6
- package/test-env/components/datagrid/controls/data_grid_toolbar_control.js +13 -7
- package/test-env/components/datagrid/data_grid.js +5 -1
- package/test-env/components/datagrid/utils/in_memory.js +25 -7
- package/test-env/components/date_picker/auto_refresh/auto_refresh.js +12 -3
- package/test-env/components/date_picker/super_date_picker/date_popover/absolute_tab.js +30 -4
- package/test-env/components/date_picker/super_date_picker/date_popover/date_popover_button.js +24 -3
- package/test-env/components/date_picker/super_date_picker/date_popover/date_popover_content.js +26 -4
- package/test-env/components/date_picker/super_date_picker/date_popover/relative_tab.js +29 -3
- package/test-env/components/date_picker/super_date_picker/date_popover/timezone_display.js +103 -0
- package/test-env/components/date_picker/super_date_picker/date_popover/timezone_display.styles.js +25 -0
- package/test-env/components/date_picker/super_date_picker/pretty_duration.js +2 -9
- package/test-env/components/date_picker/super_date_picker/relative_utils.js +9 -0
- package/test-env/components/date_picker/super_date_picker/super_date_picker.js +118 -26
- package/test-env/components/date_picker/super_date_picker/time_window_buttons.js +193 -0
- package/test-env/components/facet/facet_button.js +9 -19
- package/test-env/components/filter_group/filter_button.js +14 -1
- package/test-env/components/form/form_control_button/form_control_button.js +13 -7
- package/test-env/components/header/header_links/header_link.js +13 -7
- package/test-env/components/header/header_section/header_section_item_button.js +13 -7
- package/test-env/components/icon/assets/boxes_vertical.js +1 -1
- package/test-env/components/icon/assets/checkInCircleFilled.js +1 -2
- package/test-env/components/icon/assets/errorFilled.js +1 -2
- package/test-env/components/icon/assets/warningFilled.js +1 -2
- package/test-env/components/icon/icon_map.js +3 -6
- package/test-env/components/list_group/list_group.js +13 -1
- package/test-env/components/list_group/list_group_item.js +13 -1
- package/test-env/components/list_group/list_group_item_extra_action.js +13 -1
- package/test-env/components/list_group/pinnable_list_group/pinnable_list_group.js +15 -2
- package/test-env/components/overlay_mask/overlay_mask.styles.js +1 -1
- package/test-env/components/pagination/pagination_button.js +13 -7
- package/test-env/components/popover/popover.js +21 -15
- package/test-env/components/provider/component_defaults/component_defaults.js +22 -2
- package/test-env/components/table/table_row.styles.js +1 -1
- package/test-env/components/tool_tip/tool_tip.js +24 -24
- package/test-env/global_styling/index.js +16 -1
- package/test-env/global_styling/mixins/_button.js +1 -1
- package/test-env/global_styling/utility/selectors.js +15 -0
- package/test-env/services/focus_trap/focus_trap_pub_sub.js +80 -0
- package/test-env/services/focus_trap/index.js +12 -0
- package/test-env/services/hooks/index.js +18 -1
- package/test-env/services/hooks/useEuiDisabledElement.js +197 -0
- package/test-env/services/index.js +8 -0
- package/test-env/services/popover/reposition_on_scroll.js +67 -0
- package/test-env/test/cypress/index.js +18 -0
- package/test-env/test/cypress/matchers.js +61 -0
- package/test-env/test/cypress/test_reposition_on_scroll.js +70 -0
- package/test-env/test/enzyme/enzyme_matchers.js +50 -0
- package/test-env/test/enzyme/index.js +24 -0
- package/test-env/test/rtl/index.js +24 -2
- package/test-env/test/rtl/matchers.js +86 -0
- package/test-env/utils/element_can_be_disabled.js +22 -0
- package/test-env/utils/index.js +14 -1
|
@@ -27,7 +27,7 @@ var EuiIconBoxesVertical = function EuiIconBoxesVertical(_ref) {
|
|
|
27
27
|
}, props), title ? ___EmotionJSX("title", {
|
|
28
28
|
id: titleId
|
|
29
29
|
}, title) : null, ___EmotionJSX("path", {
|
|
30
|
-
d: "
|
|
30
|
+
d: "M6 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 8a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-1 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
|
|
31
31
|
}));
|
|
32
32
|
};
|
|
33
33
|
export var icon = EuiIconBoxesVertical;
|
|
@@ -27,8 +27,7 @@ var EuiIconCheckInCircleFilled = function EuiIconCheckInCircleFilled(_ref) {
|
|
|
27
27
|
}, props), title ? ___EmotionJSX("title", {
|
|
28
28
|
id: titleId
|
|
29
29
|
}, title) : null, ___EmotionJSX("path", {
|
|
30
|
-
|
|
31
|
-
d: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm3.65-10.857L6.91 9.8 4.35 7.286a.5.5 0 0 0-.7.714l2.909 2.857a.5.5 0 0 0 .7 0l5.091-5a.5.5 0 1 0-.7-.714Z"
|
|
30
|
+
d: "M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1ZM7 9.293 5.354 7.646l-.708.708L7 10.707l4.354-4.353-.707-.708L7 9.293Z"
|
|
32
31
|
}));
|
|
33
32
|
};
|
|
34
33
|
export var icon = EuiIconCheckInCircleFilled;
|
|
@@ -27,8 +27,7 @@ var EuiIconErrorFilled = function EuiIconErrorFilled(_ref) {
|
|
|
27
27
|
}, props), title ? ___EmotionJSX("title", {
|
|
28
28
|
id: titleId
|
|
29
29
|
}, title) : null, ___EmotionJSX("path", {
|
|
30
|
-
|
|
31
|
-
d: "M10 1a1 1 0 0 1 .707.293l4 4A1 1 0 0 1 15 6v5a1 1 0 0 1-.293.707l-4 4A1 1 0 0 1 10 16H5a1 1 0 0 1-.707-.293l-4-4A1 1 0 0 1 0 11V6a1 1 0 0 1 .293-.707l4-4A1 1 0 0 1 5 1h5ZM4.146 5.146a.5.5 0 0 1 .708 0L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708.708L8.207 8.5l2.647 2.646a.5.5 0 0 1-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 0 1-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 0 1 0-.708Z"
|
|
30
|
+
d: "M10.392 1.005a1 1 0 0 1 .608.288L14.707 5a1 1 0 0 1 .293.707v4.586a1 1 0 0 1-.293.707L11 14.707a1 1 0 0 1-.707.293H5.707a1 1 0 0 1-.634-.227L5 14.707 1.293 11a1 1 0 0 1-.288-.608L1 10.293V5.707A1 1 0 0 1 1.293 5L5 1.293A1 1 0 0 1 5.707 1h4.586l.099.005ZM8 7.293 5.354 4.646l-.708.708L7.293 8l-2.647 2.646.708.707L8 8.707l2.646 2.646.707-.707L8.707 8l2.646-2.646-.707-.708L8 7.293Z"
|
|
32
31
|
}));
|
|
33
32
|
};
|
|
34
33
|
export var icon = EuiIconErrorFilled;
|
|
@@ -27,8 +27,7 @@ var EuiIconWarningFilled = function EuiIconWarningFilled(_ref) {
|
|
|
27
27
|
}, props), title ? ___EmotionJSX("title", {
|
|
28
28
|
id: titleId
|
|
29
29
|
}, title) : null, ___EmotionJSX("path", {
|
|
30
|
-
|
|
31
|
-
d: "M8 1a1 1 0 0 1 .864.496l7 12A1 1 0 0 1 15 15H1a1 1 0 0 1-.864-1.504l7-12A1 1 0 0 1 8 1Zm.9 4.995-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995a.905.905 0 1 1 1.8 0ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
|
30
|
+
d: "M8 1a1 1 0 0 1 .863.496l7 12A1 1 0 0 1 15 15H1a1 1 0 0 1-.864-1.504l7-12A1 1 0 0 1 8 1Zm0 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-.5-6v5h1V5h-1Z"
|
|
32
31
|
}));
|
|
33
32
|
};
|
|
34
33
|
export var icon = EuiIconWarningFilled;
|
|
@@ -54,8 +54,7 @@ export var typeToPathMap = {
|
|
|
54
54
|
changePointDetection: 'change_point_detection',
|
|
55
55
|
check: 'check',
|
|
56
56
|
checkCircle: 'checkCircle',
|
|
57
|
-
checkInCircleFilled: '
|
|
58
|
-
// NOTE: To be deprecated in favor of `checkCircle`
|
|
57
|
+
checkInCircleFilled: 'checkInCircleFilled',
|
|
59
58
|
cheer: 'cheer',
|
|
60
59
|
classificationJob: 'ml_classification_job',
|
|
61
60
|
clickLeft: 'clickLeft',
|
|
@@ -160,8 +159,7 @@ export var typeToPathMap = {
|
|
|
160
159
|
eql: 'eql',
|
|
161
160
|
eraser: 'eraser',
|
|
162
161
|
error: 'error',
|
|
163
|
-
errorFilled: '
|
|
164
|
-
// NOTE: To be deprecated in favor of `error`
|
|
162
|
+
errorFilled: 'errorFilled',
|
|
165
163
|
esqlVis: 'esqlVis',
|
|
166
164
|
exit: 'exit',
|
|
167
165
|
expand: 'expand',
|
|
@@ -500,8 +498,7 @@ export var typeToPathMap = {
|
|
|
500
498
|
visualizeApp: 'app_visualize',
|
|
501
499
|
vulnerabilityManagementApp: 'app_vulnerability_management',
|
|
502
500
|
warning: 'warning',
|
|
503
|
-
warningFilled: '
|
|
504
|
-
// NOTE: To be deprecated in favor of `warning`
|
|
501
|
+
warningFilled: 'warningFilled',
|
|
505
502
|
watchesApp: 'app_watches',
|
|
506
503
|
web: 'web',
|
|
507
504
|
wordWrap: 'wordWrap',
|
|
@@ -189,7 +189,6 @@ EuiListGroup.propTypes = {
|
|
|
189
189
|
color: PropTypes.any,
|
|
190
190
|
"aria-label": PropTypes.string,
|
|
191
191
|
"aria-labelledby": PropTypes.string,
|
|
192
|
-
isDisabled: PropTypes.bool,
|
|
193
192
|
/**
|
|
194
193
|
* Overall size of button.
|
|
195
194
|
* Matches the sizes of other EuiButtons
|
|
@@ -219,6 +218,19 @@ EuiListGroup.propTypes = {
|
|
|
219
218
|
className: PropTypes.string,
|
|
220
219
|
"data-test-subj": PropTypes.string,
|
|
221
220
|
css: PropTypes.any,
|
|
221
|
+
/**
|
|
222
|
+
* Controls the disabled behavior via the native `disabled` attribute.
|
|
223
|
+
*/
|
|
224
|
+
isDisabled: PropTypes.bool,
|
|
225
|
+
/**
|
|
226
|
+
* NOTE: Beta feature, may be changed or removed in the future
|
|
227
|
+
*
|
|
228
|
+
* Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
|
|
229
|
+
* This results in a semantically disabled button without the default browser handling of the disabled state.
|
|
230
|
+
*
|
|
231
|
+
* Use e.g. when a disabled button should have a tooltip.
|
|
232
|
+
*/
|
|
233
|
+
hasAriaDisabled: PropTypes.bool,
|
|
222
234
|
buttonRef: PropTypes.any
|
|
223
235
|
}),
|
|
224
236
|
/**
|
|
@@ -274,7 +274,6 @@ EuiListGroupItem.propTypes = {
|
|
|
274
274
|
color: PropTypes.any,
|
|
275
275
|
"aria-label": PropTypes.string,
|
|
276
276
|
"aria-labelledby": PropTypes.string,
|
|
277
|
-
isDisabled: PropTypes.bool,
|
|
278
277
|
/**
|
|
279
278
|
* Overall size of button.
|
|
280
279
|
* Matches the sizes of other EuiButtons
|
|
@@ -304,6 +303,19 @@ EuiListGroupItem.propTypes = {
|
|
|
304
303
|
className: PropTypes.string,
|
|
305
304
|
"data-test-subj": PropTypes.string,
|
|
306
305
|
css: PropTypes.any,
|
|
306
|
+
/**
|
|
307
|
+
* Controls the disabled behavior via the native `disabled` attribute.
|
|
308
|
+
*/
|
|
309
|
+
isDisabled: PropTypes.bool,
|
|
310
|
+
/**
|
|
311
|
+
* NOTE: Beta feature, may be changed or removed in the future
|
|
312
|
+
*
|
|
313
|
+
* Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
|
|
314
|
+
* This results in a semantically disabled button without the default browser handling of the disabled state.
|
|
315
|
+
*
|
|
316
|
+
* Use e.g. when a disabled button should have a tooltip.
|
|
317
|
+
*/
|
|
318
|
+
hasAriaDisabled: PropTypes.bool,
|
|
307
319
|
buttonRef: PropTypes.any
|
|
308
320
|
}),
|
|
309
321
|
/**
|
|
@@ -54,7 +54,6 @@ EuiListGroupItemExtraAction.propTypes = {
|
|
|
54
54
|
color: PropTypes.any,
|
|
55
55
|
"aria-label": PropTypes.string,
|
|
56
56
|
"aria-labelledby": PropTypes.string,
|
|
57
|
-
isDisabled: PropTypes.bool,
|
|
58
57
|
/**
|
|
59
58
|
* Overall size of button.
|
|
60
59
|
* Matches the sizes of other EuiButtons
|
|
@@ -84,6 +83,19 @@ EuiListGroupItemExtraAction.propTypes = {
|
|
|
84
83
|
className: PropTypes.string,
|
|
85
84
|
"data-test-subj": PropTypes.string,
|
|
86
85
|
css: PropTypes.any,
|
|
86
|
+
/**
|
|
87
|
+
* Controls the disabled behavior via the native `disabled` attribute.
|
|
88
|
+
*/
|
|
89
|
+
isDisabled: PropTypes.bool,
|
|
90
|
+
/**
|
|
91
|
+
* NOTE: Beta feature, may be changed or removed in the future
|
|
92
|
+
*
|
|
93
|
+
* Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
|
|
94
|
+
* This results in a semantically disabled button without the default browser handling of the disabled state.
|
|
95
|
+
*
|
|
96
|
+
* Use e.g. when a disabled button should have a tooltip.
|
|
97
|
+
*/
|
|
98
|
+
hasAriaDisabled: PropTypes.bool,
|
|
87
99
|
buttonRef: PropTypes.any,
|
|
88
100
|
parentIsDisabled: PropTypes.bool
|
|
89
101
|
};
|
|
@@ -168,7 +168,6 @@ EuiPinnableListGroup.propTypes = {
|
|
|
168
168
|
color: PropTypes.any,
|
|
169
169
|
"aria-label": PropTypes.string,
|
|
170
170
|
"aria-labelledby": PropTypes.string,
|
|
171
|
-
isDisabled: PropTypes.bool,
|
|
172
171
|
/**
|
|
173
172
|
* Overall size of button.
|
|
174
173
|
* Matches the sizes of other EuiButtons
|
|
@@ -198,6 +197,19 @@ EuiPinnableListGroup.propTypes = {
|
|
|
198
197
|
className: PropTypes.string,
|
|
199
198
|
"data-test-subj": PropTypes.string,
|
|
200
199
|
css: PropTypes.any,
|
|
200
|
+
/**
|
|
201
|
+
* Controls the disabled behavior via the native `disabled` attribute.
|
|
202
|
+
*/
|
|
203
|
+
isDisabled: PropTypes.bool,
|
|
204
|
+
/**
|
|
205
|
+
* NOTE: Beta feature, may be changed or removed in the future
|
|
206
|
+
*
|
|
207
|
+
* Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
|
|
208
|
+
* This results in a semantically disabled button without the default browser handling of the disabled state.
|
|
209
|
+
*
|
|
210
|
+
* Use e.g. when a disabled button should have a tooltip.
|
|
211
|
+
*/
|
|
212
|
+
hasAriaDisabled: PropTypes.bool,
|
|
201
213
|
buttonRef: PropTypes.any
|
|
202
214
|
}),
|
|
203
215
|
/**
|
|
@@ -301,7 +313,6 @@ EuiPinnableListGroup.propTypes = {
|
|
|
301
313
|
color: PropTypes.any,
|
|
302
314
|
"aria-label": PropTypes.string,
|
|
303
315
|
"aria-labelledby": PropTypes.string,
|
|
304
|
-
isDisabled: PropTypes.bool,
|
|
305
316
|
size: PropTypes.any,
|
|
306
317
|
iconSize: PropTypes.any,
|
|
307
318
|
isSelected: PropTypes.bool,
|
|
@@ -310,6 +321,8 @@ EuiPinnableListGroup.propTypes = {
|
|
|
310
321
|
className: PropTypes.string,
|
|
311
322
|
"data-test-subj": PropTypes.string,
|
|
312
323
|
css: PropTypes.any,
|
|
324
|
+
isDisabled: PropTypes.bool,
|
|
325
|
+
hasAriaDisabled: PropTypes.bool,
|
|
313
326
|
buttonRef: PropTypes.any
|
|
314
327
|
}),
|
|
315
328
|
/**
|
|
@@ -12,7 +12,7 @@ export var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
|
|
|
12
12
|
var euiTheme = _ref.euiTheme,
|
|
13
13
|
highContrastMode = _ref.highContrastMode;
|
|
14
14
|
return {
|
|
15
|
-
euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;
|
|
15
|
+
euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
|
|
16
16
|
aboveHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
|
|
17
17
|
belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
|
|
18
18
|
};
|
|
@@ -71,13 +71,6 @@ export var EuiPaginationButton = function EuiPaginationButton(_ref) {
|
|
|
71
71
|
EuiPaginationButton.propTypes = {
|
|
72
72
|
href: PropTypes.string,
|
|
73
73
|
onClick: PropTypes.func,
|
|
74
|
-
/**
|
|
75
|
-
* `disabled` is also allowed
|
|
76
|
-
*/
|
|
77
|
-
/**
|
|
78
|
-
* `disabled` is also allowed
|
|
79
|
-
*/
|
|
80
|
-
isDisabled: PropTypes.bool,
|
|
81
74
|
target: PropTypes.string,
|
|
82
75
|
rel: PropTypes.string,
|
|
83
76
|
type: PropTypes.any,
|
|
@@ -116,10 +109,23 @@ EuiPaginationButton.propTypes = {
|
|
|
116
109
|
"data-text": PropTypes.string
|
|
117
110
|
}).isRequired, PropTypes.oneOf([false])]),
|
|
118
111
|
iconSize: PropTypes.any,
|
|
112
|
+
/**
|
|
113
|
+
* Controls the disabled behavior via the native `disabled` attribute.
|
|
114
|
+
*/
|
|
115
|
+
isDisabled: PropTypes.bool,
|
|
119
116
|
className: PropTypes.string,
|
|
120
117
|
"aria-label": PropTypes.string,
|
|
121
118
|
"data-test-subj": PropTypes.string,
|
|
122
119
|
css: PropTypes.any,
|
|
120
|
+
/**
|
|
121
|
+
* NOTE: Beta feature, may be changed or removed in the future
|
|
122
|
+
*
|
|
123
|
+
* Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
|
|
124
|
+
* This results in a semantically disabled button without the default browser handling of the disabled state.
|
|
125
|
+
*
|
|
126
|
+
* Use e.g. when a disabled button should have a tooltip.
|
|
127
|
+
*/
|
|
128
|
+
hasAriaDisabled: PropTypes.bool,
|
|
123
129
|
isActive: PropTypes.bool,
|
|
124
130
|
pageIndex: PropTypes.number.isRequired,
|
|
125
131
|
totalPages: PropTypes.number
|
|
@@ -41,17 +41,19 @@ import React, { Component } from 'react';
|
|
|
41
41
|
import classNames from 'classnames';
|
|
42
42
|
import { focusable } from 'tabbable';
|
|
43
43
|
import { EuiFocusTrap } from '../focus_trap';
|
|
44
|
-
import { keys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator } from '../../services';
|
|
44
|
+
import { keys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator, focusTrapPubSub } from '../../services';
|
|
45
45
|
import { setMultipleRefs } from '../../services/hooks/useCombinedRefs';
|
|
46
46
|
import { EuiScreenReaderOnly } from '../accessibility';
|
|
47
47
|
import { EuiPortal } from '../portal';
|
|
48
48
|
import { EuiMutationObserver } from '../observer/mutation_observer';
|
|
49
49
|
import { findPopoverPosition, getElementZIndex } from '../../services/popover';
|
|
50
|
+
import { createRepositionOnScroll } from '../../services/popover/reposition_on_scroll';
|
|
50
51
|
import { EuiI18n } from '../i18n';
|
|
51
52
|
import { EuiOutsideClickDetector } from '../outside_click_detector';
|
|
52
53
|
import { EuiPopoverArrow } from './popover_arrow';
|
|
53
54
|
import { euiPopoverStyles } from './popover.styles';
|
|
54
55
|
import { EuiPopoverPanel } from './popover_panel';
|
|
56
|
+
import { EuiComponentDefaultsContext } from '../provider/component_defaults';
|
|
55
57
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
56
58
|
export var popoverAnchorPosition = ['upCenter', 'upLeft', 'upRight', 'downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'];
|
|
57
59
|
var anchorPositionToPopoverPositionMap = {
|
|
@@ -103,7 +105,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
|
|
|
103
105
|
var _this;
|
|
104
106
|
_classCallCheck(this, EuiPopover);
|
|
105
107
|
_this = _callSuper(this, EuiPopover, [props]);
|
|
106
|
-
_defineProperty(_this, "
|
|
108
|
+
_defineProperty(_this, "repositionOnScroll", void 0);
|
|
109
|
+
_defineProperty(_this, "repositionTimeout", void 0);
|
|
107
110
|
_defineProperty(_this, "strandedFocusTimeout", void 0);
|
|
108
111
|
_defineProperty(_this, "closingTransitionTimeout", void 0);
|
|
109
112
|
_defineProperty(_this, "closingTransitionAnimationFrame", void 0);
|
|
@@ -182,12 +185,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
|
|
|
182
185
|
}),
|
|
183
186
|
durationMatch = _Array$prototype$slic.durationMatch,
|
|
184
187
|
delayMatch = _Array$prototype$slic.delayMatch;
|
|
185
|
-
clearTimeout(_this.
|
|
186
|
-
_this.
|
|
188
|
+
clearTimeout(_this.repositionTimeout);
|
|
189
|
+
_this.repositionTimeout = window.setTimeout(function () {
|
|
187
190
|
_this.setState({
|
|
188
191
|
isOpenStable: true
|
|
189
192
|
}, function () {
|
|
190
193
|
_this.positionPopoverFixed();
|
|
194
|
+
focusTrapPubSub.publish();
|
|
191
195
|
});
|
|
192
196
|
}, durationMatch + delayMatch);
|
|
193
197
|
});
|
|
@@ -297,6 +301,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
|
|
|
297
301
|
// once a stable position has been found, keep the contents on that side
|
|
298
302
|
isOpenStable: false // wait for any initial opening transitions to finish before marking as stable
|
|
299
303
|
};
|
|
304
|
+
_this.repositionOnScroll = createRepositionOnScroll(function () {
|
|
305
|
+
return {
|
|
306
|
+
repositionOnScroll: _this.props.repositionOnScroll,
|
|
307
|
+
componentDefaults: _this.context.EuiPopover,
|
|
308
|
+
repositionFn: _this.positionPopoverFixed
|
|
309
|
+
};
|
|
310
|
+
});
|
|
300
311
|
return _this;
|
|
301
312
|
}
|
|
302
313
|
_inherits(EuiPopover, _Component);
|
|
@@ -314,9 +325,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
|
|
|
314
325
|
_this2.onOpenPopover();
|
|
315
326
|
});
|
|
316
327
|
}
|
|
317
|
-
|
|
318
|
-
window.addEventListener('scroll', this.positionPopoverFixed, true);
|
|
319
|
-
}
|
|
328
|
+
this.repositionOnScroll.subscribe();
|
|
320
329
|
}
|
|
321
330
|
}, {
|
|
322
331
|
key: "componentDidUpdate",
|
|
@@ -333,13 +342,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
|
|
|
333
342
|
}
|
|
334
343
|
|
|
335
344
|
// update scroll listener
|
|
336
|
-
|
|
337
|
-
if (this.props.repositionOnScroll) {
|
|
338
|
-
window.addEventListener('scroll', this.positionPopoverFixed, true);
|
|
339
|
-
} else {
|
|
340
|
-
window.removeEventListener('scroll', this.positionPopoverFixed, true);
|
|
341
|
-
}
|
|
342
|
-
}
|
|
345
|
+
this.repositionOnScroll.update();
|
|
343
346
|
|
|
344
347
|
// The popover is being closed.
|
|
345
348
|
if (prevProps.isOpen && !this.props.isOpen) {
|
|
@@ -349,17 +352,19 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
|
|
|
349
352
|
_this3.setState({
|
|
350
353
|
isClosing: false
|
|
351
354
|
});
|
|
355
|
+
focusTrapPubSub.publish();
|
|
352
356
|
}, closingTransitionTime);
|
|
353
357
|
}
|
|
354
358
|
}
|
|
355
359
|
}, {
|
|
356
360
|
key: "componentWillUnmount",
|
|
357
361
|
value: function componentWillUnmount() {
|
|
358
|
-
|
|
359
|
-
clearTimeout(this.
|
|
362
|
+
this.repositionOnScroll.cleanup();
|
|
363
|
+
clearTimeout(this.repositionTimeout);
|
|
360
364
|
clearTimeout(this.strandedFocusTimeout);
|
|
361
365
|
clearTimeout(this.closingTransitionTimeout);
|
|
362
366
|
cancelAnimationFrame(this.closingTransitionAnimationFrame);
|
|
367
|
+
focusTrapPubSub.publish();
|
|
363
368
|
}
|
|
364
369
|
}, {
|
|
365
370
|
key: "render",
|
|
@@ -532,6 +537,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
|
|
|
532
537
|
}
|
|
533
538
|
}]);
|
|
534
539
|
}(Component);
|
|
540
|
+
_defineProperty(EuiPopover, "contextType", EuiComponentDefaultsContext);
|
|
535
541
|
_defineProperty(EuiPopover, "defaultProps", {
|
|
536
542
|
isOpen: false,
|
|
537
543
|
ownFocus: true,
|
|
@@ -66,7 +66,17 @@ EuiComponentDefaultsProvider.propTypes = {
|
|
|
66
66
|
* Provide a global configuration for `EuiFlyout`s.
|
|
67
67
|
* Defaults will be inherited by all `EuiFlyout`s.
|
|
68
68
|
*/
|
|
69
|
-
EuiFlyout: PropTypes.any
|
|
69
|
+
EuiFlyout: PropTypes.any,
|
|
70
|
+
/**
|
|
71
|
+
* Provide a global configuration for `EuiPopover`s.
|
|
72
|
+
* Defaults will be inherited by every `EuiPopover`.
|
|
73
|
+
*/
|
|
74
|
+
EuiPopover: PropTypes.any,
|
|
75
|
+
/**
|
|
76
|
+
* Provide a global configuration for `EuiToolTip`s.
|
|
77
|
+
* Defaults will be inherited by every `EuiToolTip`.
|
|
78
|
+
*/
|
|
79
|
+
EuiToolTip: PropTypes.any
|
|
70
80
|
})
|
|
71
81
|
};
|
|
72
82
|
export var useComponentDefaults = function useComponentDefaults() {
|
|
@@ -121,5 +131,15 @@ EuiProviderComponentDefaultsProps.propTypes = {
|
|
|
121
131
|
* Provide a global configuration for `EuiFlyout`s.
|
|
122
132
|
* Defaults will be inherited by all `EuiFlyout`s.
|
|
123
133
|
*/
|
|
124
|
-
EuiFlyout: PropTypes.any
|
|
134
|
+
EuiFlyout: PropTypes.any,
|
|
135
|
+
/**
|
|
136
|
+
* Provide a global configuration for `EuiPopover`s.
|
|
137
|
+
* Defaults will be inherited by every `EuiPopover`.
|
|
138
|
+
*/
|
|
139
|
+
EuiPopover: PropTypes.any,
|
|
140
|
+
/**
|
|
141
|
+
* Provide a global configuration for `EuiToolTip`s.
|
|
142
|
+
* Defaults will be inherited by every `EuiToolTip`.
|
|
143
|
+
*/
|
|
144
|
+
EuiToolTip: PropTypes.any
|
|
125
145
|
};
|
|
@@ -56,7 +56,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
|
|
|
56
56
|
// preceding table row via negative margins
|
|
57
57
|
'margin-top', mathWithUnits([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
|
|
58
58
|
return (x + y * 2) * -1;
|
|
59
|
-
})), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), " &:after{", logicalCSS('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150%
|
|
59
|
+
})), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), " &:after{", logicalCSS('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 150%, -50% 150%);>.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
};
|
|
@@ -28,9 +28,11 @@ import React, { Component } from 'react';
|
|
|
28
28
|
import PropTypes from "prop-types";
|
|
29
29
|
import classNames from 'classnames';
|
|
30
30
|
import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
|
|
31
|
+
import { createRepositionOnScroll } from '../../services/popover/reposition_on_scroll';
|
|
31
32
|
import { enqueueStateChange } from '../../services/react';
|
|
32
33
|
import { EuiResizeObserver } from '../observer/resize_observer';
|
|
33
34
|
import { EuiPortal } from '../portal';
|
|
35
|
+
import { EuiComponentDefaultsContext } from '../provider/component_defaults';
|
|
34
36
|
import { EuiToolTipPopover } from './tool_tip_popover';
|
|
35
37
|
import { EuiToolTipAnchor } from './tool_tip_anchor';
|
|
36
38
|
import { EuiToolTipArrow } from './tool_tip_arrow';
|
|
@@ -56,25 +58,15 @@ var DEFAULT_TOOLTIP_STYLES = {
|
|
|
56
58
|
visibility: 'hidden'
|
|
57
59
|
};
|
|
58
60
|
export var EuiToolTip = /*#__PURE__*/function (_Component) {
|
|
59
|
-
function EuiToolTip() {
|
|
61
|
+
function EuiToolTip(props) {
|
|
60
62
|
var _this;
|
|
61
63
|
_classCallCheck(this, EuiToolTip);
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
_this = _callSuper(this, EuiToolTip, [].concat(args));
|
|
64
|
+
_this = _callSuper(this, EuiToolTip, [props]);
|
|
65
|
+
_defineProperty(_this, "repositionOnScroll", void 0);
|
|
66
66
|
_defineProperty(_this, "_isMounted", false);
|
|
67
67
|
_defineProperty(_this, "anchor", null);
|
|
68
68
|
_defineProperty(_this, "popover", null);
|
|
69
69
|
_defineProperty(_this, "timeoutId", void 0);
|
|
70
|
-
_defineProperty(_this, "state", {
|
|
71
|
-
visible: false,
|
|
72
|
-
hasFocus: false,
|
|
73
|
-
calculatedPosition: _this.props.position,
|
|
74
|
-
toolTipStyles: DEFAULT_TOOLTIP_STYLES,
|
|
75
|
-
arrowStyles: undefined,
|
|
76
|
-
id: _this.props.id || htmlIdGenerator()()
|
|
77
|
-
});
|
|
78
70
|
_defineProperty(_this, "clearAnimationTimeout", function () {
|
|
79
71
|
if (_this.timeoutId) {
|
|
80
72
|
_this.timeoutId = clearTimeout(_this.timeoutId);
|
|
@@ -203,6 +195,21 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
|
|
|
203
195
|
_this.props.onMouseOut(event);
|
|
204
196
|
}
|
|
205
197
|
});
|
|
198
|
+
_this.state = {
|
|
199
|
+
visible: false,
|
|
200
|
+
hasFocus: false,
|
|
201
|
+
calculatedPosition: _this.props.position,
|
|
202
|
+
toolTipStyles: DEFAULT_TOOLTIP_STYLES,
|
|
203
|
+
arrowStyles: undefined,
|
|
204
|
+
id: _this.props.id || htmlIdGenerator()()
|
|
205
|
+
};
|
|
206
|
+
_this.repositionOnScroll = createRepositionOnScroll(function () {
|
|
207
|
+
return {
|
|
208
|
+
repositionOnScroll: _this.props.repositionOnScroll,
|
|
209
|
+
componentDefaults: _this.context.EuiToolTip,
|
|
210
|
+
repositionFn: _this.positionToolTip
|
|
211
|
+
};
|
|
212
|
+
});
|
|
206
213
|
return _this;
|
|
207
214
|
}
|
|
208
215
|
_inherits(EuiToolTip, _Component);
|
|
@@ -210,16 +217,14 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
|
|
|
210
217
|
key: "componentDidMount",
|
|
211
218
|
value: function componentDidMount() {
|
|
212
219
|
this._isMounted = true;
|
|
213
|
-
|
|
214
|
-
window.addEventListener('scroll', this.positionToolTip, true);
|
|
215
|
-
}
|
|
220
|
+
this.repositionOnScroll.subscribe();
|
|
216
221
|
}
|
|
217
222
|
}, {
|
|
218
223
|
key: "componentWillUnmount",
|
|
219
224
|
value: function componentWillUnmount() {
|
|
220
225
|
this.clearAnimationTimeout();
|
|
221
226
|
this._isMounted = false;
|
|
222
|
-
|
|
227
|
+
this.repositionOnScroll.cleanup();
|
|
223
228
|
}
|
|
224
229
|
}, {
|
|
225
230
|
key: "componentDidUpdate",
|
|
@@ -229,13 +234,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
|
|
|
229
234
|
}
|
|
230
235
|
|
|
231
236
|
// update scroll listener
|
|
232
|
-
|
|
233
|
-
if (this.props.repositionOnScroll) {
|
|
234
|
-
window.addEventListener('scroll', this.positionToolTip, true);
|
|
235
|
-
} else {
|
|
236
|
-
window.removeEventListener('scroll', this.positionToolTip, true);
|
|
237
|
-
}
|
|
238
|
-
}
|
|
237
|
+
this.repositionOnScroll.update();
|
|
239
238
|
}
|
|
240
239
|
}, {
|
|
241
240
|
key: "render",
|
|
@@ -297,6 +296,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
|
|
|
297
296
|
}
|
|
298
297
|
}]);
|
|
299
298
|
}(Component);
|
|
299
|
+
_defineProperty(EuiToolTip, "contextType", EuiComponentDefaultsContext);
|
|
300
300
|
_defineProperty(EuiToolTip, "defaultProps", {
|
|
301
301
|
position: 'top',
|
|
302
302
|
delay: 'regular',
|
|
@@ -10,4 +10,5 @@ export * from './reset/global_styles';
|
|
|
10
10
|
export * from './functions';
|
|
11
11
|
export * from './variables';
|
|
12
12
|
export * from './mixins';
|
|
13
|
-
export * from './utility/animations';
|
|
13
|
+
export * from './utility/animations';
|
|
14
|
+
export { euiDisabledSelector } from './utility/selectors';
|
|
@@ -138,7 +138,7 @@ var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext)
|
|
|
138
138
|
case 'fill':
|
|
139
139
|
{
|
|
140
140
|
var _buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
|
|
141
|
-
displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
|
|
141
|
+
displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : color !== 'disabled' ? euiThemeContext.euiTheme.colors.fullShade : '', ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
|
|
142
142
|
break;
|
|
143
143
|
}
|
|
144
144
|
case 'empty':
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
3
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
4
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
5
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
6
|
+
* Side Public License, v 1.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export var euiDisabledSelector = ":disabled, [aria-disabled=\"true\"]";
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
3
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
4
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
5
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
6
|
+
* Side Public License, v 1.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
var listeners = new Set();
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Subscribes a listener function to be called whenever focus trap updates are published.
|
|
13
|
+
*
|
|
14
|
+
* @param listener The function to be called on updates.
|
|
15
|
+
* @returns A function that, when called, will unsubscribe the listener. Please remember
|
|
16
|
+
* to call this function for proper cleanup.
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* useEffect(() => {
|
|
20
|
+
* const unsubscribe = focusTrapPubSub.subscribe(() => {
|
|
21
|
+
* console.log('focus trap updated');
|
|
22
|
+
* });
|
|
23
|
+
*
|
|
24
|
+
* return () => unsubscribe();
|
|
25
|
+
* }, []);
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
var subscribe = function subscribe(listener) {
|
|
29
|
+
listeners.add(listener);
|
|
30
|
+
return function () {
|
|
31
|
+
return unsubscribe(listener);
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Unsubscribes a listener from the focus trap PubSub service.
|
|
37
|
+
*
|
|
38
|
+
* @param listener The function to unsubscribe.
|
|
39
|
+
*/
|
|
40
|
+
var unsubscribe = function unsubscribe(listener) {
|
|
41
|
+
listeners.delete(listener);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Publishes an event to all subscribed listeners, signaling that
|
|
46
|
+
* components managing focus traps should re-evaluate their tracked elements.
|
|
47
|
+
*/
|
|
48
|
+
var publish = function publish() {
|
|
49
|
+
listeners.forEach(function (listener) {
|
|
50
|
+
return listener();
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* A lightweight, global PubSub service for loose coupling of components
|
|
56
|
+
* that need to interact with the same focus trap.
|
|
57
|
+
*
|
|
58
|
+
* This allows a component (like `EuiPopover`) to be rendered in a React Portal
|
|
59
|
+
* and still be included in the focus trap of another component (like `EuiFlyout`)
|
|
60
|
+
* without either component needing a direct reference to the other.
|
|
61
|
+
*
|
|
62
|
+
* How it works:
|
|
63
|
+
*
|
|
64
|
+
* 1. A container component (e.g., `EuiFlyout`) `subscribe`s to this service on mount.
|
|
65
|
+
* 2. An ephemeral component (e.g., `EuiPopover`) calls `publish` when its state
|
|
66
|
+
* changes in a way that affects the DOM (e.g., opening, closing, unmounting).
|
|
67
|
+
* 3. The container component's subscribed callback fires, causing it to re-query
|
|
68
|
+
* the DOM for any elements it should include in its focus trap.
|
|
69
|
+
*/
|
|
70
|
+
export var focusTrapPubSub = {
|
|
71
|
+
subscribe: subscribe,
|
|
72
|
+
unsubscribe: unsubscribe,
|
|
73
|
+
publish: publish
|
|
74
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
3
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
4
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
5
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
6
|
+
* Side Public License, v 1.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export { focusTrapPubSub } from './focus_trap_pub_sub';
|
|
@@ -12,4 +12,5 @@ export * from './useForceRender';
|
|
|
12
12
|
export * from './useLatest';
|
|
13
13
|
export * from './useDeepEqual';
|
|
14
14
|
export * from './useMouseMove';
|
|
15
|
-
export * from './useUpdateEffect';
|
|
15
|
+
export * from './useUpdateEffect';
|
|
16
|
+
export { useEuiDisabledElement } from './useEuiDisabledElement';
|