baseui 12.0.0 → 12.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/accordion/accordion.js +4 -2
- package/accordion/accordion.js.flow +1 -1
- package/accordion/panel.js +3 -2
- package/accordion/stateful-panel-container.js +1 -0
- package/accordion/styled-components.js +8 -1
- package/accordion/types.d.ts +2 -2
- package/app-nav-bar/app-nav-bar.js +4 -2
- package/app-nav-bar/mobile-menu.js +2 -1
- package/app-nav-bar/styled-components.js +19 -1
- package/app-nav-bar/types.d.ts +2 -2
- package/app-nav-bar/user-menu.js +1 -1
- package/aspect-ratio-box/aspect-ratio-box-body.d.ts +1 -1
- package/aspect-ratio-box/aspect-ratio-box.js +3 -1
- package/aspect-ratio-box/types.d.ts +1 -1
- package/avatar/styled-components.js +4 -1
- package/badge/styled-components.js +16 -11
- package/badge/styled-components.js.flow +4 -4
- package/badge/types.d.ts +2 -2
- package/banner/index.d.ts +1 -1
- package/banner/styled-components.js +25 -12
- package/banner/types.d.ts +15 -15
- package/banner/types.js.flow +13 -11
- package/block/block.js +3 -1
- package/block/styled-components.js +2 -1
- package/block/types.d.ts +3 -4
- package/breadcrumbs/styled-components.js +5 -1
- package/button/styled-components.js +7 -0
- package/button/styled-components.js.flow +2 -0
- package/button/types.d.ts +4 -5
- package/button-group/stateful-button-group.js +1 -0
- package/button-group/stateful-container.js +3 -1
- package/button-group/styled-components.js +2 -1
- package/button-group/types.d.ts +4 -5
- package/card/styled-components.js +11 -4
- package/checkbox/styled-components.js +10 -4
- package/checkbox/styled-components.js.flow +1 -1
- package/checkbox/types.d.ts +36 -37
- package/combobox/combobox.js +78 -71
- package/combobox/styled-components.js +5 -1
- package/combobox/types.d.ts +4 -5
- package/data-table/column-anchor.js +3 -0
- package/data-table/column-datetime.js +10 -4
- package/data-table/column-numerical.js +4 -4
- package/data-table/column-string.js +3 -0
- package/data-table/column.js +6 -1
- package/data-table/data-table.js +6 -3
- package/data-table/filter-menu.js +2 -1
- package/data-table/header-cell.js +43 -34
- package/data-table/locale.d.ts +4 -0
- package/data-table/locale.js +3 -1
- package/data-table/locale.js.flow +5 -0
- package/data-table/measure-column-widths.js +5 -4
- package/data-table/stateful-container.js +2 -1
- package/data-table/stateful-data-table.js +4 -4
- package/data-table/types.d.ts +4 -5
- package/datepicker/calendar-header.js +1 -0
- package/datepicker/calendar.js +2 -0
- package/datepicker/datepicker.js +2 -0
- package/datepicker/day.js +2 -1
- package/datepicker/index.d.ts +1 -1
- package/datepicker/index.js +7 -0
- package/datepicker/index.js.flow +1 -1
- package/datepicker/stateful-calendar.js +7 -3
- package/datepicker/stateful-container.js +2 -0
- package/datepicker/stateful-datepicker.js +9 -4
- package/datepicker/styled-components.js +27 -4
- package/datepicker/types.d.ts +2 -2
- package/datepicker/utils/date-helpers.js +2 -1
- package/datepicker/utils/index.js +2 -1
- package/divider/styled-components.js +4 -3
- package/divider/types.d.ts +1 -1
- package/dnd-list/stateful-list-container.js +1 -0
- package/dnd-list/styled-components.js +7 -0
- package/dnd-list/types.d.ts +2 -2
- package/drawer/constants.js +1 -0
- package/drawer/drawer.js +2 -3
- package/drawer/drawer.js.flow +1 -3
- package/drawer/styled-components.js +9 -2
- package/drawer/types.d.ts +2 -2
- package/es/accordion/accordion.js +3 -3
- package/es/accordion/panel.js +3 -2
- package/es/accordion/stateful-panel-container.js +1 -0
- package/es/accordion/styled-components.js +8 -1
- package/es/app-nav-bar/app-nav-bar.js +6 -2
- package/es/app-nav-bar/mobile-menu.js +4 -2
- package/es/app-nav-bar/styled-components.js +19 -1
- package/es/app-nav-bar/user-menu.js +1 -1
- package/es/aspect-ratio-box/aspect-ratio-box.js +3 -1
- package/es/avatar/styled-components.js +4 -1
- package/es/badge/styled-components.js +11 -6
- package/es/banner/styled-components.js +16 -3
- package/es/block/block.js +3 -1
- package/es/block/styled-components.js +2 -1
- package/es/breadcrumbs/styled-components.js +5 -1
- package/es/button/button.js +8 -0
- package/es/button/styled-components.js +7 -0
- package/es/button-group/stateful-button-group.js +1 -0
- package/es/button-group/stateful-container.js +3 -1
- package/es/button-group/styled-components.js +2 -1
- package/es/card/index.js +2 -1
- package/es/card/styled-components.js +12 -4
- package/es/checkbox/index.js +1 -0
- package/es/checkbox/stateful-checkbox-container.js +3 -0
- package/es/checkbox/styled-components.js +10 -4
- package/es/combobox/combobox.js +76 -69
- package/es/combobox/styled-components.js +5 -1
- package/es/data-table/column-anchor.js +3 -0
- package/es/data-table/column-datetime.js +12 -5
- package/es/data-table/column-numerical.js +5 -4
- package/es/data-table/column-string.js +3 -0
- package/es/data-table/column.js +4 -1
- package/es/data-table/data-table.js +6 -3
- package/es/data-table/filter-menu.js +2 -1
- package/es/data-table/header-cell.js +41 -34
- package/es/data-table/locale.js +3 -1
- package/es/data-table/measure-column-widths.js +5 -4
- package/es/data-table/stateful-container.js +2 -1
- package/es/data-table/stateful-data-table.js +4 -4
- package/es/datepicker/calendar-header.js +1 -0
- package/es/datepicker/calendar.js +2 -0
- package/es/datepicker/datepicker.js +3 -1
- package/es/datepicker/day.js +2 -1
- package/es/datepicker/index.js +1 -1
- package/es/datepicker/stateful-calendar.js +4 -1
- package/es/datepicker/stateful-container.js +2 -0
- package/es/datepicker/stateful-datepicker.js +5 -1
- package/es/datepicker/styled-components.js +26 -3
- package/es/datepicker/utils/date-helpers.js +2 -1
- package/es/datepicker/utils/index.js +2 -1
- package/es/divider/styled-components.js +3 -2
- package/es/dnd-list/stateful-list-container.js +1 -0
- package/es/dnd-list/styled-components.js +7 -0
- package/es/drawer/constants.js +1 -0
- package/es/drawer/drawer.js +2 -5
- package/es/drawer/styled-components.js +9 -2
- package/es/file-uploader/styled-components.js +6 -1
- package/es/flex-grid/flex-grid-item.js +5 -6
- package/es/flex-grid/flex-grid.js +4 -1
- package/es/form-control/styled-components.js +6 -1
- package/es/header-navigation/styled-components.js +4 -1
- package/es/helper/styled-components.js +3 -1
- package/es/helpers/overrides.js +9 -5
- package/es/icon/build-icons.js +0 -2
- package/es/icon/index.js +1 -1
- package/es/icon/omit-dollar-prefixed-keys.js +1 -0
- package/es/icon/styled-components.js +2 -1
- package/es/input/base-input.js +1 -0
- package/es/input/masked-input.js +9 -2
- package/es/input/stateful-container.js +1 -0
- package/es/input/styled-components.js +18 -7
- package/es/input/utils.js +2 -0
- package/es/layer/layer.js +24 -0
- package/es/layer/layers-manager.js +91 -1
- package/es/layout-grid/styled-components.js +3 -0
- package/es/link/index.js +2 -1
- package/es/link/styled-components.js +2 -1
- package/es/list/list-heading.js +21 -17
- package/es/list/list-item.js +2 -1
- package/es/list/styled-components.js +17 -1
- package/es/locale/es_AR.js +3 -1
- package/es/locale/index.js +2 -1
- package/es/locale/tr_TR.js +3 -1
- package/es/map-marker/constants.js +14 -0
- package/es/map-marker/fixed-marker.js +1 -0
- package/es/map-marker/index.js +2 -1
- package/es/map-marker/location-puck.js +142 -0
- package/es/map-marker/pin-head.js +1 -0
- package/es/map-marker/styled-components.js +86 -2
- package/es/menu/index.js +1 -1
- package/es/menu/menu.js +14 -4
- package/es/menu/option-profile.js +1 -0
- package/es/menu/stateful-container.js +10 -0
- package/es/menu/styled-components.js +32 -2
- package/es/message-card/constants.js +19 -0
- package/es/message-card/index.js +10 -0
- package/es/message-card/message-card.js +114 -0
- package/es/message-card/styled-components.js +108 -0
- package/es/message-card/types.js +1 -0
- package/es/message-card/utils.js +27 -0
- package/es/modal/modal.js +4 -6
- package/es/modal/styled-components.js +8 -1
- package/es/pagination/stateful-container.js +1 -0
- package/es/pagination/stateful-pagination.js +1 -0
- package/es/pagination/styled-components.js +4 -1
- package/es/payment-card/styled-components.js +2 -1
- package/es/phone-input/base-country-picker.js +3 -1
- package/es/phone-input/country-select-dropdown.js +1 -0
- package/es/phone-input/styled-components.js +15 -4
- package/es/pin-code/styled-components.js +4 -1
- package/es/popover/popover.js +9 -12
- package/es/popover/styled-components.js +9 -4
- package/es/progress-bar/progressbar-rounded.js +1 -0
- package/es/progress-bar/styled-components.js +14 -2
- package/es/progress-steps/progress-steps.js +2 -1
- package/es/progress-steps/styled-components.js +20 -12
- package/es/radio/stateful-radiogroup-container.js +3 -0
- package/es/radio/styled-components.js +10 -3
- package/es/rating/emoticon-rating.js +2 -1
- package/es/rating/star-rating.js +2 -1
- package/es/rating/styled-components.js +5 -1
- package/es/select/autosize-input.js +2 -3
- package/es/select/default-props.js +1 -1
- package/es/select/dropdown.js +2 -1
- package/es/select/multi-value.js +2 -1
- package/es/select/select-component.js +10 -10
- package/es/select/single-select.js +2 -2
- package/es/select/stateful-select-container.js +2 -0
- package/es/select/styled-components.js +33 -6
- package/es/select/value.js +3 -4
- package/es/side-navigation/index.js +2 -1
- package/es/side-navigation/nav-item.js +1 -0
- package/es/side-navigation/nav.js +1 -1
- package/es/side-navigation/stateful-container.js +1 -0
- package/es/side-navigation/styled-components.js +8 -2
- package/es/skeleton/styled-components.js +3 -1
- package/es/slider/slider.js +4 -2
- package/es/slider/stateful-slider-container.js +2 -0
- package/es/slider/styled-components.js +9 -0
- package/es/snackbar/snackbar-element.js +1 -0
- package/es/snackbar/styled-components.js +9 -1
- package/es/spinner/styled-components.js +2 -1
- package/es/styles/__mocks__/styled.js +8 -5
- package/es/styles/styled.js +7 -6
- package/es/table/index.js +2 -1
- package/es/table/styled-components.js +13 -1
- package/es/table-grid/styled-components.js +4 -1
- package/es/table-semantic/styled-components.js +20 -3
- package/es/tabs/stateful-tabs.js +1 -0
- package/es/tabs/styled-components.js +5 -1
- package/es/tabs/tabs.js +4 -2
- package/es/tabs-motion/styled-components.js +32 -2
- package/es/tabs-motion/tab.js +1 -0
- package/es/tabs-motion/tabs.js +31 -6
- package/es/tag/styled-components.js +32 -1
- package/es/tag/tag.js +6 -2
- package/es/textarea/styled-components.js +20 -12
- package/es/textarea/textarea.js +4 -2
- package/es/themes/move-theme/typography.js +36 -0
- package/es/themes/shared/borders.js +8 -3
- package/es/themes/shared/typography.js +10 -10
- package/es/timezonepicker/timezone-picker.js +5 -1
- package/es/timezonepicker/tzdata.js +1 -1
- package/es/toast/styled-components.js +5 -1
- package/es/toast/toaster.js +0 -2
- package/es/tokens/colors.js +24 -0
- package/es/tooltip/styled-components.js +4 -1
- package/es/tree-view/index.js +2 -1
- package/es/tree-view/styled-components.js +7 -1
- package/es/tree-view/tree-view.js +3 -1
- package/es/types/globals.d.js +12 -0
- package/es/utils/deep-merge.js +0 -5
- package/es/utils/deprecated-component.js +1 -0
- package/es/utils/focusVisible.js +4 -2
- package/esm/accordion/accordion.js +4 -4
- package/esm/accordion/panel.js +3 -2
- package/esm/accordion/stateful-panel-container.js +1 -0
- package/esm/accordion/styled-components.js +8 -1
- package/esm/app-nav-bar/app-nav-bar.js +4 -2
- package/esm/app-nav-bar/mobile-menu.js +4 -2
- package/esm/app-nav-bar/styled-components.js +19 -1
- package/esm/app-nav-bar/user-menu.js +1 -1
- package/esm/aspect-ratio-box/aspect-ratio-box.js +3 -1
- package/esm/avatar/styled-components.js +4 -1
- package/esm/badge/styled-components.js +11 -6
- package/esm/banner/styled-components.js +16 -3
- package/esm/block/block.js +3 -1
- package/esm/block/styled-components.js +2 -1
- package/esm/breadcrumbs/styled-components.js +5 -1
- package/esm/button/styled-components.js +7 -0
- package/esm/button-group/stateful-button-group.js +1 -0
- package/esm/button-group/stateful-container.js +3 -1
- package/esm/button-group/styled-components.js +2 -1
- package/esm/card/index.js +2 -1
- package/esm/card/styled-components.js +12 -4
- package/esm/checkbox/index.js +1 -0
- package/esm/checkbox/styled-components.js +10 -4
- package/esm/combobox/combobox.js +78 -71
- package/esm/combobox/styled-components.js +5 -1
- package/esm/data-table/column-anchor.js +3 -0
- package/esm/data-table/column-datetime.js +12 -5
- package/esm/data-table/column-numerical.js +4 -4
- package/esm/data-table/column-string.js +3 -0
- package/esm/data-table/column.js +5 -1
- package/esm/data-table/data-table.js +6 -3
- package/esm/data-table/filter-menu.js +2 -1
- package/esm/data-table/header-cell.js +42 -34
- package/esm/data-table/locale.js +3 -1
- package/esm/data-table/measure-column-widths.js +5 -4
- package/esm/data-table/stateful-container.js +2 -1
- package/esm/data-table/stateful-data-table.js +4 -4
- package/esm/datepicker/calendar-header.js +1 -0
- package/esm/datepicker/calendar.js +2 -0
- package/esm/datepicker/datepicker.js +3 -1
- package/esm/datepicker/day.js +2 -1
- package/esm/datepicker/index.js +1 -1
- package/esm/datepicker/stateful-calendar.js +7 -3
- package/esm/datepicker/stateful-container.js +2 -0
- package/esm/datepicker/stateful-datepicker.js +9 -4
- package/esm/datepicker/styled-components.js +26 -3
- package/esm/datepicker/utils/date-helpers.js +2 -1
- package/esm/datepicker/utils/index.js +2 -1
- package/esm/divider/styled-components.js +3 -2
- package/esm/dnd-list/stateful-list-container.js +1 -0
- package/esm/dnd-list/styled-components.js +7 -0
- package/esm/drawer/constants.js +1 -0
- package/esm/drawer/drawer.js +2 -5
- package/esm/drawer/styled-components.js +9 -2
- package/esm/file-uploader/styled-components.js +6 -1
- package/esm/flex-grid/flex-grid-item.js +4 -5
- package/esm/flex-grid/flex-grid.js +7 -3
- package/esm/form-control/styled-components.js +6 -1
- package/esm/header-navigation/styled-components.js +4 -1
- package/esm/helper/styled-components.js +3 -1
- package/esm/helpers/overrides.js +9 -5
- package/esm/icon/build-icons.js +0 -2
- package/esm/icon/index.js +1 -1
- package/esm/icon/omit-dollar-prefixed-keys.js +1 -0
- package/esm/icon/styled-components.js +2 -1
- package/esm/input/base-input.js +1 -0
- package/esm/input/masked-input.js +5 -2
- package/esm/input/stateful-container.js +1 -0
- package/esm/input/styled-components.js +18 -7
- package/esm/input/utils.js +2 -0
- package/esm/layer/layer.js +24 -0
- package/esm/layer/layers-manager.js +97 -1
- package/esm/layout-grid/styled-components.js +3 -0
- package/esm/link/index.js +2 -1
- package/esm/link/styled-components.js +2 -1
- package/esm/list/list-heading.js +21 -17
- package/esm/list/list-item.js +2 -1
- package/esm/list/styled-components.js +17 -1
- package/esm/locale/es_AR.js +3 -1
- package/esm/locale/index.js +4 -1
- package/esm/locale/tr_TR.js +3 -1
- package/esm/map-marker/constants.js +12 -2
- package/esm/map-marker/index.js +2 -1
- package/esm/map-marker/location-puck.js +199 -0
- package/esm/map-marker/styled-components.js +82 -2
- package/esm/menu/index.js +1 -1
- package/esm/menu/menu.js +16 -4
- package/esm/menu/option-profile.js +1 -0
- package/esm/menu/stateful-container.js +1 -0
- package/esm/menu/styled-components.js +38 -6
- package/esm/message-card/constants.js +20 -0
- package/esm/message-card/index.js +10 -0
- package/esm/message-card/message-card.js +168 -0
- package/esm/message-card/styled-components.js +116 -0
- package/esm/message-card/types.js +1 -0
- package/esm/message-card/utils.js +26 -0
- package/esm/modal/modal.js +4 -6
- package/esm/modal/styled-components.js +8 -1
- package/esm/pagination/stateful-container.js +1 -0
- package/esm/pagination/stateful-pagination.js +1 -0
- package/esm/pagination/styled-components.js +4 -1
- package/esm/payment-card/styled-components.js +2 -1
- package/esm/phone-input/base-country-picker.js +3 -1
- package/esm/phone-input/country-select-dropdown.js +1 -0
- package/esm/phone-input/styled-components.js +20 -8
- package/esm/pin-code/styled-components.js +4 -1
- package/esm/popover/popover.js +9 -12
- package/esm/popover/styled-components.js +9 -4
- package/esm/progress-bar/progressbar-rounded.js +1 -0
- package/esm/progress-bar/styled-components.js +14 -2
- package/esm/progress-steps/progress-steps.js +2 -1
- package/esm/progress-steps/styled-components.js +28 -19
- package/esm/radio/styled-components.js +10 -3
- package/esm/rating/emoticon-rating.js +2 -1
- package/esm/rating/star-rating.js +2 -1
- package/esm/rating/styled-components.js +5 -1
- package/esm/select/autosize-input.js +2 -3
- package/esm/select/default-props.js +1 -1
- package/esm/select/dropdown.js +2 -1
- package/esm/select/multi-value.js +2 -1
- package/esm/select/select-component.js +10 -10
- package/esm/select/single-select.js +2 -2
- package/esm/select/styled-components.js +33 -6
- package/esm/select/value.js +3 -4
- package/esm/side-navigation/index.js +2 -1
- package/esm/side-navigation/nav-item.js +1 -0
- package/esm/side-navigation/nav.js +1 -1
- package/esm/side-navigation/stateful-container.js +1 -0
- package/esm/side-navigation/styled-components.js +13 -6
- package/esm/skeleton/styled-components.js +3 -1
- package/esm/slider/slider.js +4 -2
- package/esm/slider/styled-components.js +9 -0
- package/esm/snackbar/snackbar-element.js +1 -0
- package/esm/snackbar/styled-components.js +9 -1
- package/esm/spinner/styled-components.js +2 -1
- package/esm/styles/__mocks__/styled.js +8 -5
- package/esm/styles/styled.js +7 -6
- package/esm/table/index.js +2 -1
- package/esm/table/styled-components.js +13 -1
- package/esm/table-grid/styled-components.js +4 -1
- package/esm/table-semantic/styled-components.js +20 -3
- package/esm/tabs/stateful-tabs.js +1 -0
- package/esm/tabs/styled-components.js +5 -1
- package/esm/tabs/tabs.js +4 -2
- package/esm/tabs-motion/styled-components.js +68 -40
- package/esm/tabs-motion/tab.js +1 -0
- package/esm/tabs-motion/tabs.js +87 -58
- package/esm/tag/styled-components.js +5 -1
- package/esm/tag/tag.js +4 -2
- package/esm/textarea/styled-components.js +11 -6
- package/esm/textarea/textarea.js +4 -2
- package/esm/themes/move-theme/typography.js +36 -0
- package/esm/themes/shared/borders.js +8 -3
- package/esm/themes/shared/typography.js +10 -10
- package/esm/timezonepicker/timezone-picker.js +6 -2
- package/esm/timezonepicker/tzdata.js +1 -1
- package/esm/toast/styled-components.js +5 -1
- package/esm/toast/toaster.js +0 -2
- package/esm/tokens/colors.js +24 -0
- package/esm/tooltip/styled-components.js +4 -1
- package/esm/tree-view/index.js +2 -1
- package/esm/tree-view/styled-components.js +7 -1
- package/esm/tree-view/tree-view.js +3 -1
- package/esm/types/globals.d.js +12 -0
- package/esm/utils/deep-merge.js +0 -5
- package/esm/utils/deprecated-component.js +1 -0
- package/esm/utils/focusVisible.js +4 -2
- package/file-uploader/styled-components.js +6 -1
- package/flex-grid/flex-grid-item.d.ts +1 -1
- package/flex-grid/flex-grid-item.js +6 -8
- package/flex-grid/flex-grid.js +7 -3
- package/flex-grid/types.d.ts +1 -1
- package/form-control/styled-components.js +6 -1
- package/form-control/types.d.ts +1 -1
- package/header-navigation/styled-components.js +4 -1
- package/heading/types.d.ts +1 -1
- package/helper/styled-components.js +3 -1
- package/helpers/overrides.js +8 -3
- package/helpers/overrides.js.flow +1 -1
- package/helpers/types.d.ts +1 -1
- package/icon/build-icons.js +0 -2
- package/icon/build-icons.js.flow +0 -1
- package/icon/index.d.ts +1 -1
- package/icon/index.js +8 -1
- package/icon/index.js.flow +1 -1
- package/icon/omit-dollar-prefixed-keys.js +1 -0
- package/icon/styled-components.js +2 -1
- package/icon/types.d.ts +1 -1
- package/input/masked-input.js +5 -2
- package/input/stateful-container.js +1 -0
- package/input/styled-components.js +18 -7
- package/input/styled-components.js.flow +9 -2
- package/input/types.d.ts +16 -14
- package/input/types.js.flow +3 -0
- package/input/utils.js +2 -0
- package/layer/layer.js +24 -0
- package/layer/layer.js.flow +25 -0
- package/layer/layers-manager.d.ts +8 -0
- package/layer/layers-manager.js +97 -1
- package/layer/layers-manager.js.flow +84 -1
- package/layer/types.d.ts +23 -2
- package/layer/types.js.flow +22 -1
- package/layout-grid/styled-components.js +3 -0
- package/layout-grid/types.d.ts +2 -2
- package/link/index.js +2 -1
- package/link/styled-components.js +2 -1
- package/list/list-heading.js +21 -17
- package/list/list-item.js +2 -1
- package/list/styled-components.js +17 -1
- package/list/types.d.ts +2 -2
- package/locale/en_US.d.ts +1 -1
- package/locale/es_AR.d.ts +1 -1
- package/locale/es_AR.js +3 -1
- package/locale/index.js +4 -1
- package/locale/tr_TR.d.ts +1 -1
- package/locale/tr_TR.js +3 -1
- package/map-marker/constants.d.ts +14 -0
- package/map-marker/constants.js +16 -3
- package/map-marker/constants.js.flow +17 -0
- package/map-marker/index.d.ts +2 -1
- package/map-marker/index.js +24 -1
- package/map-marker/index.js.flow +5 -3
- package/map-marker/location-puck.d.ts +4 -0
- package/map-marker/location-puck.js +211 -0
- package/map-marker/location-puck.js.flow +18 -0
- package/map-marker/styled-components.d.ts +17 -1
- package/map-marker/styled-components.js +88 -2
- package/map-marker/styled-components.js.flow +58 -0
- package/map-marker/types.d.ts +33 -5
- package/map-marker/types.js.flow +37 -3
- package/menu/index.d.ts +2 -3
- package/menu/index.js +8 -1
- package/menu/index.js.flow +1 -0
- package/menu/menu.js +15 -3
- package/menu/menu.js.flow +11 -1
- package/menu/option-profile.js +1 -0
- package/menu/stateful-container.js +1 -0
- package/menu/styled-components.d.ts +1 -0
- package/menu/styled-components.js +40 -7
- package/menu/styled-components.js.flow +13 -0
- package/menu/types.d.ts +13 -13
- package/menu/types.js.flow +1 -0
- package/message-card/constants.d.ts +12 -0
- package/message-card/constants.js +25 -0
- package/message-card/index.d.ts +4 -0
- package/message-card/index.js +60 -0
- package/message-card/index.js.flow +72 -0
- package/message-card/message-card.d.ts +4 -0
- package/message-card/message-card.js +184 -0
- package/message-card/package.json +4 -0
- package/message-card/styled-components.d.ts +14 -0
- package/message-card/styled-components.js +124 -0
- package/message-card/types.d.ts +27 -0
- package/message-card/types.js +5 -0
- package/message-card/utils.d.ts +1 -0
- package/message-card/utils.js +36 -0
- package/modal/modal.js +4 -4
- package/modal/modal.js.flow +1 -3
- package/modal/styled-components.js +8 -1
- package/modal/types.d.ts +2 -2
- package/package.json +9 -11
- package/pagination/stateful-container.js +1 -0
- package/pagination/stateful-pagination.js +1 -0
- package/pagination/styled-components.js +4 -1
- package/pagination/types.d.ts +2 -2
- package/payment-card/styled-components.js +2 -1
- package/phone-input/base-country-picker.js +3 -1
- package/phone-input/country-select-dropdown.js +1 -0
- package/phone-input/styled-components.js +21 -9
- package/phone-input/types.d.ts +5 -6
- package/pin-code/styled-components.js +4 -1
- package/pin-code/types.d.ts +2 -2
- package/popover/popover.js +9 -12
- package/popover/popover.js.flow +2 -12
- package/popover/styled-components.js +12 -9
- package/popover/types.d.ts +2 -2
- package/progress-bar/progressbar-rounded.js +1 -0
- package/progress-bar/styled-components.js +14 -2
- package/progress-bar/types.d.ts +2 -2
- package/progress-steps/progress-steps.js +2 -1
- package/progress-steps/styled-components.js +28 -19
- package/radio/styled-components.js +10 -3
- package/radio/types.d.ts +19 -20
- package/rating/emoticon-rating.js +2 -1
- package/rating/star-rating.js +2 -1
- package/rating/styled-components.js +5 -1
- package/select/autosize-input.js +2 -1
- package/select/autosize-input.js.flow +1 -1
- package/select/default-props.js +1 -1
- package/select/dropdown.js +2 -1
- package/select/multi-value.js +1 -0
- package/select/select-component.d.ts +1 -1
- package/select/select-component.js +9 -7
- package/select/select-component.js.flow +1 -1
- package/select/single-select.d.ts +2 -2
- package/select/single-select.js +2 -2
- package/select/styled-components.js +33 -6
- package/select/styled-components.js.flow +25 -5
- package/select/types.d.ts +5 -6
- package/select/value.js +2 -3
- package/side-navigation/nav-item.js +1 -0
- package/side-navigation/nav.js +1 -1
- package/side-navigation/stateful-container.js +1 -0
- package/side-navigation/styled-components.js +13 -6
- package/side-navigation/types.d.ts +1 -1
- package/skeleton/styled-components.js +3 -1
- package/slider/slider.js +4 -2
- package/slider/styled-components.js +9 -0
- package/slider/types.d.ts +1 -1
- package/snackbar/snackbar-element.js +1 -0
- package/snackbar/styled-components.js +9 -1
- package/snackbar/types.d.ts +3 -4
- package/spinner/styled-components.js +2 -1
- package/spinner/types.d.ts +1 -1
- package/styles/__mocks__/styled.js +8 -3
- package/styles/styled.d.ts +1 -1
- package/styles/styled.js +7 -6
- package/table/styled-components.js +13 -1
- package/table/types.d.ts +2 -2
- package/table-grid/styled-components.js +4 -1
- package/table-semantic/styled-components.js +20 -3
- package/table-semantic/types.d.ts +2 -2
- package/tabs/stateful-tabs.js +1 -0
- package/tabs/styled-components.js +5 -1
- package/tabs/tabs.js +4 -2
- package/tabs/types.d.ts +2 -2
- package/tabs-motion/styled-components.d.ts +5 -0
- package/tabs-motion/styled-components.js +71 -41
- package/tabs-motion/styled-components.js.flow +21 -0
- package/tabs-motion/tab.js +1 -0
- package/tabs-motion/tabs.d.ts +1 -1
- package/tabs-motion/tabs.js +87 -57
- package/tabs-motion/tabs.js.flow +69 -38
- package/tabs-motion/types.d.ts +5 -2
- package/tabs-motion/types.js.flow +3 -0
- package/tabs-motion/utils.d.ts +1 -1
- package/tag/styled-components.js +5 -1
- package/tag/tag.js +4 -2
- package/tag/types.d.ts +4 -5
- package/textarea/styled-components.js +11 -6
- package/textarea/textarea.js +4 -2
- package/textarea/types.d.ts +6 -5
- package/textarea/types.js.flow +3 -1
- package/themes/move-theme/typography.d.ts +36 -0
- package/themes/move-theme/typography.js +36 -0
- package/themes/move-theme/typography.js.flow +12 -0
- package/themes/shared/borders.js +8 -3
- package/themes/shared/borders.js.flow +7 -3
- package/themes/shared/typography.js +10 -10
- package/themes/shared/typography.js.flow +10 -10
- package/themes/types.d.ts +3 -0
- package/themes/types.js.flow +3 -0
- package/timezonepicker/timezone-picker.js +6 -2
- package/timezonepicker/types.d.ts +1 -0
- package/timezonepicker/types.js.flow +1 -0
- package/timezonepicker/tzdata.js +1 -1
- package/toast/styled-components.js +5 -1
- package/toast/toaster.js.flow +1 -1
- package/toast/types.d.ts +2 -2
- package/tokens/colors.js +24 -0
- package/tokens/colors.js.flow +27 -0
- package/tokens/types.d.ts +24 -0
- package/tokens/types.js.flow +27 -0
- package/tooltip/styled-components.js +4 -1
- package/tree-view/styled-components.js +7 -1
- package/tree-view/tree-view.js +3 -1
- package/tree-view/types.d.ts +3 -4
- package/types/globals.d.js +14 -1
- package/utils/deep-merge.js +0 -6
- package/utils/deprecated-component.js +1 -0
- package/utils/focusVisible.d.ts +1 -1
- package/utils/focusVisible.js +4 -2
- package/card/images.d.ts +0 -2
- package/card/images.js +0 -17
- package/card/images.js.flow +0 -18
- package/es/card/images.js +0 -8
- package/esm/card/images.js +0 -8
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
/*
|
|
8
|
+
Copyright (c) Uber Technologies, Inc.
|
|
9
|
+
|
|
10
|
+
This source code is licensed under the MIT license found in the
|
|
11
|
+
LICENSE file in the root directory of this source tree.
|
|
12
|
+
*/
|
|
13
|
+
import { styled } from '../styles';
|
|
14
|
+
import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE } from './constants';
|
|
15
|
+
export var StyledRoot = styled('button', function (_ref) {
|
|
16
|
+
var $theme = _ref.$theme,
|
|
17
|
+
$backgroundColor = _ref.$backgroundColor,
|
|
18
|
+
$backgroundColorType = _ref.$backgroundColorType,
|
|
19
|
+
_ref$$imageLayout = _ref.$imageLayout,
|
|
20
|
+
$imageLayout = _ref$$imageLayout === void 0 ? IMAGE_LAYOUT.top : _ref$$imageLayout;
|
|
21
|
+
var lightBackgroundStyle = {
|
|
22
|
+
color: $theme.colors.contentOnColorInverse,
|
|
23
|
+
borderStyle: 'solid',
|
|
24
|
+
borderWidth: $theme.sizing.scale0,
|
|
25
|
+
borderColor: $theme.colors.borderOpaque
|
|
26
|
+
};
|
|
27
|
+
var darkBackgroundStyle = {
|
|
28
|
+
color: $theme.colors.contentOnColor,
|
|
29
|
+
border: 'none'
|
|
30
|
+
};
|
|
31
|
+
return _objectSpread(_objectSpread({
|
|
32
|
+
alignItems: 'stretch',
|
|
33
|
+
backgroundColor: $backgroundColor,
|
|
34
|
+
borderRadius: $theme.borders.radius400,
|
|
35
|
+
cursor: 'pointer',
|
|
36
|
+
display: 'flex',
|
|
37
|
+
flexDirection: $imageLayout === IMAGE_LAYOUT.top ? 'column' : 'row',
|
|
38
|
+
overflow: 'hidden',
|
|
39
|
+
padding: '0',
|
|
40
|
+
position: 'relative',
|
|
41
|
+
textAlign: 'start',
|
|
42
|
+
width: '100%',
|
|
43
|
+
boxShadow: "inset 999px 999px 0px ".concat($theme.colors.backgroundOverlayArt)
|
|
44
|
+
}, $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? lightBackgroundStyle : darkBackgroundStyle), {}, {
|
|
45
|
+
':focus': {
|
|
46
|
+
outlineWidth: '3px',
|
|
47
|
+
outlineStyle: 'solid',
|
|
48
|
+
outlineColor: $theme.colors.borderAccent,
|
|
49
|
+
outlineOffset: '-3px'
|
|
50
|
+
},
|
|
51
|
+
':hover:after': {
|
|
52
|
+
content: '""',
|
|
53
|
+
width: '100%',
|
|
54
|
+
height: '100%',
|
|
55
|
+
zIndex: '1',
|
|
56
|
+
position: 'absolute',
|
|
57
|
+
top: '0',
|
|
58
|
+
left: '0',
|
|
59
|
+
backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.10)'
|
|
60
|
+
},
|
|
61
|
+
':active:after': {
|
|
62
|
+
content: '""',
|
|
63
|
+
width: '100%',
|
|
64
|
+
height: '100%',
|
|
65
|
+
zIndex: '1',
|
|
66
|
+
position: 'absolute',
|
|
67
|
+
top: '0',
|
|
68
|
+
left: '0',
|
|
69
|
+
backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.20)'
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
StyledRoot.displayName = "StyledRoot";
|
|
74
|
+
export var StyledImage = styled('div', function (_ref2) {
|
|
75
|
+
var _ref2$$imageLayout = _ref2.$imageLayout,
|
|
76
|
+
$imageLayout = _ref2$$imageLayout === void 0 ? IMAGE_LAYOUT.top : _ref2$$imageLayout,
|
|
77
|
+
_ref2$$backgroundPosi = _ref2.$backgroundPosition,
|
|
78
|
+
$backgroundPosition = _ref2$$backgroundPosi === void 0 ? 'center' : _ref2$$backgroundPosi,
|
|
79
|
+
$src = _ref2.$src;
|
|
80
|
+
return _objectSpread({
|
|
81
|
+
backgroundImage: "url(".concat($src, ")"),
|
|
82
|
+
backgroundSize: 'cover',
|
|
83
|
+
backgroundPosition: $backgroundPosition
|
|
84
|
+
}, $imageLayout === IMAGE_LAYOUT.top ? {
|
|
85
|
+
height: '132px',
|
|
86
|
+
width: '100%'
|
|
87
|
+
} : {
|
|
88
|
+
width: '112px',
|
|
89
|
+
order: '1'
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
StyledImage.displayName = "StyledImage";
|
|
93
|
+
export var StyledContentContainer = styled('div', function (_ref3) {
|
|
94
|
+
var $theme = _ref3.$theme;
|
|
95
|
+
return {
|
|
96
|
+
width: '100%',
|
|
97
|
+
boxSizing: 'border-box',
|
|
98
|
+
paddingTop: $theme.sizing.scale600,
|
|
99
|
+
paddingRight: $theme.sizing.scale300,
|
|
100
|
+
paddingBottom: $theme.sizing.scale600,
|
|
101
|
+
paddingLeft: $theme.sizing.scale600
|
|
102
|
+
};
|
|
103
|
+
});
|
|
104
|
+
StyledContentContainer.displayName = "StyledContentContainer";
|
|
105
|
+
export var StyledHeadingContainer = styled('div', function (_ref4) {
|
|
106
|
+
var $theme = _ref4.$theme;
|
|
107
|
+
return _objectSpread({}, $theme.typography.HeadingXSmall);
|
|
108
|
+
});
|
|
109
|
+
StyledHeadingContainer.displayName = "StyledHeadingContainer";
|
|
110
|
+
export var StyledParagraphContainer = styled('div', function (_ref5) {
|
|
111
|
+
var $theme = _ref5.$theme;
|
|
112
|
+
return _objectSpread(_objectSpread({}, $theme.typography.ParagraphSmall), {}, {
|
|
113
|
+
marginTop: $theme.sizing.scale100
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
StyledParagraphContainer.displayName = "StyledParagraphContainer";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright (c) Uber Technologies, Inc.
|
|
3
|
+
|
|
4
|
+
This source code is licensed under the MIT license found in the
|
|
5
|
+
LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { colors } from '../tokens';
|
|
8
|
+
import { BACKGROUND_COLOR_TYPE } from './constants';
|
|
9
|
+
var LIGHT_COLORS = new Set([colors.red50, colors.red100, colors.red200, colors.red300, colors.green50, colors.green100, colors.green200, colors.green300, colors.teal50, colors.teal100, colors.teal200, colors.teal300, colors.blue50, colors.blue100, colors.blue200, colors.blue300, colors.cobalt50, colors.cobalt100, colors.cobalt200, colors.purple50, colors.purple100, colors.purple200, colors.purple300, colors.magenta50, colors.magenta100, colors.magenta200, colors.magenta300, colors.brown50, colors.brown100, colors.brown200, colors.brown300, colors.orange50, colors.orange100, colors.orange200, colors.orange300, colors.orange400, colors.lime50, colors.lime100, colors.lime200, colors.lime300, colors.lime400, colors.platinum50, colors.platinum100, colors.platinum200, colors.platinum300, colors.platinum400, colors.yellow50, colors.yellow100, colors.yellow200, colors.yellow300, colors.yellow400, colors.yellow500, colors.white, colors.gray50, colors.gray100, colors.gray200, colors.gray300, colors.gray400]);
|
|
10
|
+
var DARK_COLORS = new Set([colors.red400, colors.red500, colors.red600, colors.red700, colors.green400, colors.green500, colors.green600, colors.green700, colors.teal400, colors.teal500, colors.teal600, colors.teal700, colors.blue400, colors.blue500, colors.blue600, colors.blue700, colors.cobalt300, colors.cobalt400, colors.cobalt500, colors.cobalt600, colors.cobalt700, colors.purple400, colors.purple500, colors.purple600, colors.purple700, colors.magenta400, colors.magenta500, colors.magenta600, colors.magenta700, colors.brown400, colors.brown500, colors.brown600, colors.brown700, colors.orange500, colors.orange600, colors.orange700, colors.lime500, colors.lime600, colors.lime700, colors.platinum500, colors.platinum600, colors.platinum700, colors.platinum800, colors.yellow600, colors.yellow700, colors.gray500, colors.gray600, colors.gray700, colors.gray800, colors.gray900, colors.black]);
|
|
11
|
+
var POOR_CONTRAST_COLORS = new Set([colors.red300, colors.gray500, colors.yellow600]);
|
|
12
|
+
export function getBackgroundColorType(backgroundColor) {
|
|
13
|
+
if (process.env.NODE_ENV !== "production" && POOR_CONTRAST_COLORS.has(backgroundColor)) {
|
|
14
|
+
console.warn("The provided value for backgroundColor, ".concat(backgroundColor, ", is not supported because it does not pass accessibility contrast tests for either white or black text."));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
if (LIGHT_COLORS.has(backgroundColor)) {
|
|
18
|
+
return BACKGROUND_COLOR_TYPE.light;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (DARK_COLORS.has(backgroundColor)) {
|
|
22
|
+
return BACKGROUND_COLOR_TYPE.dark;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return null;
|
|
26
|
+
}
|
package/esm/modal/modal.js
CHANGED
|
@@ -44,8 +44,6 @@ LICENSE file in the root directory of this source tree.
|
|
|
44
44
|
*/
|
|
45
45
|
|
|
46
46
|
/* global document */
|
|
47
|
-
|
|
48
|
-
/* eslint-disable cup/no-undef */
|
|
49
47
|
import * as React from 'react';
|
|
50
48
|
import FocusLock from 'react-focus-lock';
|
|
51
49
|
import { LocaleContext } from '../locale';
|
|
@@ -206,7 +204,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
|
|
|
206
204
|
}
|
|
207
205
|
|
|
208
206
|
if (this.animateStartTimer) {
|
|
209
|
-
// eslint-disable-next-line cup/no-undef
|
|
210
207
|
cancelAnimationFrame(this.animateStartTimer);
|
|
211
208
|
}
|
|
212
209
|
}
|
|
@@ -225,8 +222,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
|
|
|
225
222
|
|
|
226
223
|
|
|
227
224
|
this.clearTimers();
|
|
228
|
-
this.disableMountNodeScroll();
|
|
229
|
-
|
|
225
|
+
this.disableMountNodeScroll();
|
|
230
226
|
this.animateStartTimer = requestAnimationFrame(function () {
|
|
231
227
|
_this2.setState({
|
|
232
228
|
isVisible: true
|
|
@@ -276,6 +272,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
|
|
|
276
272
|
if (mountNode) {
|
|
277
273
|
return mountNode;
|
|
278
274
|
} // Flow thinks body could be null (cast through any)
|
|
275
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
279
276
|
|
|
280
277
|
|
|
281
278
|
return document.body;
|
|
@@ -336,7 +333,8 @@ var Modal = /*#__PURE__*/function (_React$Component) {
|
|
|
336
333
|
}, /*#__PURE__*/React.createElement(Root, _extends({
|
|
337
334
|
"data-baseweb": "modal",
|
|
338
335
|
ref: _this3.rootRef
|
|
339
|
-
}, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer
|
|
336
|
+
}, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
337
|
+
, _extends({
|
|
340
338
|
ref: _this3.dialogContainerRef
|
|
341
339
|
}, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
|
|
342
340
|
tabIndex: -1,
|
|
@@ -47,6 +47,7 @@ export var Root = styled('div', function (props) {
|
|
|
47
47
|
};
|
|
48
48
|
});
|
|
49
49
|
Root.displayName = "Root";
|
|
50
|
+
Root.displayName = 'Root';
|
|
50
51
|
export var DialogContainer = styled('div', function (props) {
|
|
51
52
|
var $animate = props.$animate,
|
|
52
53
|
$isOpen = props.$isOpen,
|
|
@@ -72,6 +73,7 @@ export var DialogContainer = styled('div', function (props) {
|
|
|
72
73
|
}, $animate ? animationRules : null);
|
|
73
74
|
});
|
|
74
75
|
DialogContainer.displayName = "DialogContainer";
|
|
76
|
+
DialogContainer.displayName = 'DialogContainer';
|
|
75
77
|
export var Dialog = styled('div', function (props) {
|
|
76
78
|
var $animate = props.$animate,
|
|
77
79
|
$isOpen = props.$isOpen,
|
|
@@ -108,6 +110,7 @@ export var Dialog = styled('div', function (props) {
|
|
|
108
110
|
});
|
|
109
111
|
});
|
|
110
112
|
Dialog.displayName = "Dialog";
|
|
113
|
+
Dialog.displayName = 'Dialog';
|
|
111
114
|
export var Close = styled('button', function (props) {
|
|
112
115
|
var _ref;
|
|
113
116
|
|
|
@@ -150,6 +153,7 @@ export var Close = styled('button', function (props) {
|
|
|
150
153
|
}, _defineProperty(_ref, dir, $theme.sizing.scale500), _defineProperty(_ref, "width", $theme.sizing.scale800), _defineProperty(_ref, "height", $theme.sizing.scale800), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, "justifyContent", 'center'), _defineProperty(_ref, "alignItems", 'center'), _defineProperty(_ref, "cursor", 'pointer'), _ref;
|
|
151
154
|
});
|
|
152
155
|
Close.displayName = "Close";
|
|
156
|
+
Close.displayName = 'Close';
|
|
153
157
|
export var ModalHeader = styled('div', function (_ref2) {
|
|
154
158
|
var _objectSpread2;
|
|
155
159
|
|
|
@@ -163,6 +167,7 @@ export var ModalHeader = styled('div', function (_ref2) {
|
|
|
163
167
|
}, _defineProperty(_objectSpread2, marginStartDir, $theme.sizing.scale800), _defineProperty(_objectSpread2, marginEndDir, $theme.sizing.scale900), _objectSpread2));
|
|
164
168
|
});
|
|
165
169
|
ModalHeader.displayName = "ModalHeader";
|
|
170
|
+
ModalHeader.displayName = 'ModalHeader';
|
|
166
171
|
export var ModalBody = styled('div', function (_ref3) {
|
|
167
172
|
var $theme = _ref3.$theme;
|
|
168
173
|
return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
|
|
@@ -174,6 +179,7 @@ export var ModalBody = styled('div', function (_ref3) {
|
|
|
174
179
|
});
|
|
175
180
|
});
|
|
176
181
|
ModalBody.displayName = "ModalBody";
|
|
182
|
+
ModalBody.displayName = 'ModalBody';
|
|
177
183
|
export var ModalFooter = styled('div', function (_ref4) {
|
|
178
184
|
var $theme = _ref4.$theme;
|
|
179
185
|
return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
|
|
@@ -185,4 +191,5 @@ export var ModalFooter = styled('div', function (_ref4) {
|
|
|
185
191
|
textAlign: $theme.direction === 'rtl' ? 'left' : 'right'
|
|
186
192
|
});
|
|
187
193
|
});
|
|
188
|
-
ModalFooter.displayName = "ModalFooter";
|
|
194
|
+
ModalFooter.displayName = "ModalFooter";
|
|
195
|
+
ModalFooter.displayName = 'ModalFooter';
|
|
@@ -107,6 +107,7 @@ var PaginationStatefulContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
107
107
|
|
|
108
108
|
_defineProperty(PaginationStatefulContainer, "defaultProps", {
|
|
109
109
|
initialState: initialState,
|
|
110
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
110
111
|
stateReducer: function stateReducer(changeType, changes) {
|
|
111
112
|
return changes;
|
|
112
113
|
}
|
|
@@ -20,6 +20,7 @@ export var StyledRoot = styled('div', function (_ref) {
|
|
|
20
20
|
}, $theme.typography.font350);
|
|
21
21
|
});
|
|
22
22
|
StyledRoot.displayName = "StyledRoot";
|
|
23
|
+
StyledRoot.displayName = 'StyledRoot';
|
|
23
24
|
export var StyledMaxLabel = styled('span', function (_ref2) {
|
|
24
25
|
var _ref3;
|
|
25
26
|
|
|
@@ -29,6 +30,7 @@ export var StyledMaxLabel = styled('span', function (_ref2) {
|
|
|
29
30
|
return _ref3 = {}, _defineProperty(_ref3, marginStartDir, $theme.sizing.scale300), _defineProperty(_ref3, marginEndDir, $theme.sizing.scale600), _ref3;
|
|
30
31
|
});
|
|
31
32
|
StyledMaxLabel.displayName = "StyledMaxLabel";
|
|
33
|
+
StyledMaxLabel.displayName = 'StyledMaxLabel';
|
|
32
34
|
export var StyledDropdownContainer = styled('div', function (_ref4) {
|
|
33
35
|
var _ref5;
|
|
34
36
|
|
|
@@ -41,4 +43,5 @@ export var StyledDropdownContainer = styled('div', function (_ref4) {
|
|
|
41
43
|
outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none'
|
|
42
44
|
}, _defineProperty(_ref5, marginStartDir, $theme.sizing.scale600), _defineProperty(_ref5, marginEndDir, $theme.sizing.scale300), _ref5;
|
|
43
45
|
});
|
|
44
|
-
StyledDropdownContainer.displayName = "StyledDropdownContainer";
|
|
46
|
+
StyledDropdownContainer.displayName = "StyledDropdownContainer";
|
|
47
|
+
StyledDropdownContainer.displayName = 'StyledDropdownContainer';
|
|
@@ -16,4 +16,5 @@ export var IconWrapper = styled('div', function (props) {
|
|
|
16
16
|
var margin = (_margin = {}, _defineProperty(_margin, SIZE.mini, $theme.sizing.scale300), _defineProperty(_margin, SIZE.compact, $theme.sizing.scale500), _defineProperty(_margin, SIZE.default, $theme.sizing.scale600), _defineProperty(_margin, SIZE.large, $theme.sizing.scale700), _margin);
|
|
17
17
|
return _ref = {}, _defineProperty(_ref, $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft', margin[$size]), _defineProperty(_ref, "height", '100%'), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, "alignItems", 'center'), _ref;
|
|
18
18
|
});
|
|
19
|
-
IconWrapper.displayName = "IconWrapper";
|
|
19
|
+
IconWrapper.displayName = "IconWrapper";
|
|
20
|
+
IconWrapper.displayName = 'IconWrapper';
|
|
@@ -51,6 +51,7 @@ CountryPicker.defaultProps = {
|
|
|
51
51
|
required: defaultProps.required
|
|
52
52
|
};
|
|
53
53
|
var DropdownListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
54
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
54
55
|
var children = props.children,
|
|
55
56
|
rest = _objectWithoutProperties(props, _excluded);
|
|
56
57
|
|
|
@@ -203,7 +204,8 @@ export default function CountryPicker(props) {
|
|
|
203
204
|
|
|
204
205
|
return /*#__PURE__*/React.createElement(Select, _extends({
|
|
205
206
|
clearable: false,
|
|
206
|
-
disabled: disabled
|
|
207
|
+
disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
208
|
+
,
|
|
207
209
|
getOptionLabel: function getOptionLabel(_ref) {
|
|
208
210
|
var option = _ref.option,
|
|
209
211
|
optionState = _ref.optionState;
|
|
@@ -112,6 +112,7 @@ function CountrySelectDropdown(props) {
|
|
|
112
112
|
style = _ref2.style;
|
|
113
113
|
|
|
114
114
|
// resetMenu and getItemLabel should not end up on native html elements
|
|
115
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
115
116
|
var _children$index$props = // @ts-expect-error todo(flow->ts) type issue introduced in react 17
|
|
116
117
|
children[index].props,
|
|
117
118
|
item = _children$index$props.item,
|
|
@@ -23,6 +23,7 @@ export var StyledPhoneInputRoot = styled('div', {
|
|
|
23
23
|
display: 'flex'
|
|
24
24
|
});
|
|
25
25
|
StyledPhoneInputRoot.displayName = "StyledPhoneInputRoot";
|
|
26
|
+
StyledPhoneInputRoot.displayName = 'StyledPhoneInputRoot';
|
|
26
27
|
export var StyledFlagContainer = styled('span', function (_ref) {
|
|
27
28
|
var _sizeToFont;
|
|
28
29
|
|
|
@@ -33,9 +34,10 @@ export var StyledFlagContainer = styled('span', function (_ref) {
|
|
|
33
34
|
return {
|
|
34
35
|
fontSize: sizeToFont[$size]
|
|
35
36
|
};
|
|
36
|
-
});
|
|
37
|
-
|
|
37
|
+
});
|
|
38
38
|
StyledFlagContainer.displayName = "StyledFlagContainer";
|
|
39
|
+
StyledFlagContainer.displayName = 'StyledFlagContainer'; // An override component for the Select's Root styled element
|
|
40
|
+
|
|
39
41
|
export var StyledRoot = withStyle(SelectStyledRoot, function (props) {
|
|
40
42
|
var _sizeToWidth;
|
|
41
43
|
|
|
@@ -47,6 +49,7 @@ export var StyledRoot = withStyle(SelectStyledRoot, function (props) {
|
|
|
47
49
|
};
|
|
48
50
|
});
|
|
49
51
|
StyledRoot.displayName = "StyledRoot";
|
|
52
|
+
StyledRoot.displayName = 'StyledRoot';
|
|
50
53
|
export var StyledDialCode = styled('div', function (_ref2) {
|
|
51
54
|
var _ref3;
|
|
52
55
|
|
|
@@ -57,11 +60,13 @@ export var StyledDialCode = styled('div', function (_ref2) {
|
|
|
57
60
|
return _ref3 = {}, _defineProperty(_ref3, marginDir, sizing.scale100), _defineProperty(_ref3, "display", 'flex'), _defineProperty(_ref3, "alignItems", 'center'), _ref3;
|
|
58
61
|
});
|
|
59
62
|
StyledDialCode.displayName = "StyledDialCode";
|
|
63
|
+
StyledDialCode.displayName = 'StyledDialCode';
|
|
60
64
|
export var StyledCountrySelectContainer = styled('div', {
|
|
61
65
|
display: 'flex',
|
|
62
66
|
alignItems: 'center'
|
|
63
67
|
});
|
|
64
68
|
StyledCountrySelectContainer.displayName = "StyledCountrySelectContainer";
|
|
69
|
+
StyledCountrySelectContainer.displayName = 'StyledCountrySelectContainer';
|
|
65
70
|
export var StyledCountrySelectDropdownContainer = withStyle(StyledList, function (props) {
|
|
66
71
|
var _props$$height = props.$height,
|
|
67
72
|
$height = _props$$height === void 0 ? defaultProps.maxDropdownHeight : _props$$height;
|
|
@@ -72,6 +77,7 @@ export var StyledCountrySelectDropdownContainer = withStyle(StyledList, function
|
|
|
72
77
|
};
|
|
73
78
|
});
|
|
74
79
|
StyledCountrySelectDropdownContainer.displayName = "StyledCountrySelectDropdownContainer";
|
|
80
|
+
StyledCountrySelectDropdownContainer.displayName = 'StyledCountrySelectDropdownContainer';
|
|
75
81
|
export var StyledCountrySelectDropdownListItemElement = withStyle(StyledDropdownListItem, {
|
|
76
82
|
paddingTop: 0,
|
|
77
83
|
paddingBottom: 0,
|
|
@@ -82,13 +88,16 @@ export var StyledCountrySelectDropdownListItemElement = withStyle(StyledDropdown
|
|
|
82
88
|
height: '42px'
|
|
83
89
|
});
|
|
84
90
|
StyledCountrySelectDropdownListItemElement.displayName = "StyledCountrySelectDropdownListItemElement";
|
|
91
|
+
StyledCountrySelectDropdownListItemElement.displayName = 'StyledCountrySelectDropdownListItemElement';
|
|
85
92
|
export var StyledCountrySelectDropdownListItem = withWrapper(StyledCountrySelectDropdownListItemElement, function (Styled) {
|
|
86
|
-
return
|
|
87
|
-
|
|
88
|
-
|
|
93
|
+
return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
94
|
+
function StyledCountrySelectDropdownListItem(_ref4) {
|
|
95
|
+
var item = _ref4.item,
|
|
96
|
+
restProps = _objectWithoutProperties(_ref4, _excluded);
|
|
89
97
|
|
|
90
|
-
|
|
91
|
-
|
|
98
|
+
return /*#__PURE__*/React.createElement(Styled, restProps);
|
|
99
|
+
}
|
|
100
|
+
);
|
|
92
101
|
});
|
|
93
102
|
export var StyledCountrySelectDropdownFlagColumn = styled('div', function (_ref5) {
|
|
94
103
|
var _ref6;
|
|
@@ -100,6 +109,7 @@ export var StyledCountrySelectDropdownFlagColumn = styled('div', function (_ref5
|
|
|
100
109
|
return _ref6 = {}, _defineProperty(_ref6, paddingDir, sizing.scale600), _defineProperty(_ref6, "display", 'flex'), _defineProperty(_ref6, "alignItems", 'center'), _ref6;
|
|
101
110
|
});
|
|
102
111
|
StyledCountrySelectDropdownFlagColumn.displayName = "StyledCountrySelectDropdownFlagColumn";
|
|
112
|
+
StyledCountrySelectDropdownFlagColumn.displayName = 'StyledCountrySelectDropdownFlagColumn';
|
|
103
113
|
export var StyledCountrySelectDropdownNameColumn = styled('div', function (_ref7) {
|
|
104
114
|
var _ref7$$theme = _ref7.$theme,
|
|
105
115
|
direction = _ref7$$theme.direction,
|
|
@@ -108,6 +118,7 @@ export var StyledCountrySelectDropdownNameColumn = styled('div', function (_ref7
|
|
|
108
118
|
return _defineProperty({}, paddingDir, sizing.scale600);
|
|
109
119
|
});
|
|
110
120
|
StyledCountrySelectDropdownNameColumn.displayName = "StyledCountrySelectDropdownNameColumn";
|
|
121
|
+
StyledCountrySelectDropdownNameColumn.displayName = 'StyledCountrySelectDropdownNameColumn';
|
|
111
122
|
export var StyledCountrySelectDropdownDialcodeColumn = styled('div', function (_ref9) {
|
|
112
123
|
var _ref10;
|
|
113
124
|
|
|
@@ -118,4 +129,5 @@ export var StyledCountrySelectDropdownDialcodeColumn = styled('div', function (_
|
|
|
118
129
|
var marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
|
|
119
130
|
return _ref10 = {}, _defineProperty(_ref10, paddingDir, sizing.scale600), _defineProperty(_ref10, marginDir, 'auto'), _ref10;
|
|
120
131
|
});
|
|
121
|
-
StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
|
|
132
|
+
StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
|
|
133
|
+
StyledCountrySelectDropdownDialcodeColumn.displayName = 'StyledCountrySelectDropdownDialcodeColumn';
|
|
@@ -13,6 +13,7 @@ export var StyledRoot = styled('div', {
|
|
|
13
13
|
alignItems: 'center'
|
|
14
14
|
});
|
|
15
15
|
StyledRoot.displayName = "StyledRoot";
|
|
16
|
+
StyledRoot.displayName = 'StyledRoot';
|
|
16
17
|
export var StyledInputOverrideRoot = withStyle(StyledInputRoot, function (_ref) {
|
|
17
18
|
var _SIZE$mini$SIZE$compa;
|
|
18
19
|
|
|
@@ -25,9 +26,11 @@ export var StyledInputOverrideRoot = withStyle(StyledInputRoot, function (_ref)
|
|
|
25
26
|
};
|
|
26
27
|
});
|
|
27
28
|
StyledInputOverrideRoot.displayName = "StyledInputOverrideRoot";
|
|
29
|
+
StyledInputOverrideRoot.displayName = 'StyledInputOverrideRoot';
|
|
28
30
|
export var StyledInputOverrideInput = withStyle(StyledInputInput, {
|
|
29
31
|
textAlign: 'center',
|
|
30
32
|
paddingLeft: '0',
|
|
31
33
|
paddingRight: '0'
|
|
32
34
|
});
|
|
33
|
-
StyledInputOverrideInput.displayName = "StyledInputOverrideInput";
|
|
35
|
+
StyledInputOverrideInput.displayName = "StyledInputOverrideInput";
|
|
36
|
+
StyledInputOverrideInput.displayName = 'StyledInputOverrideInput';
|
package/esm/popover/popover.js
CHANGED
|
@@ -169,13 +169,11 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
169
169
|
var popper = _this.popperRef.current;
|
|
170
170
|
var anchor = _this.anchorRef.current; // Ignore document click if it came from popover or anchor
|
|
171
171
|
|
|
172
|
-
if (!popper || popper === target ||
|
|
173
|
-
target instanceof Node && popper.contains(target)) {
|
|
172
|
+
if (!popper || popper === target || target instanceof Node && popper.contains(target)) {
|
|
174
173
|
return;
|
|
175
174
|
}
|
|
176
175
|
|
|
177
|
-
if (!anchor || anchor === target ||
|
|
178
|
-
target instanceof Node && popper.contains(target)) {
|
|
176
|
+
if (!anchor || anchor === target || target instanceof Node && popper.contains(target)) {
|
|
179
177
|
return;
|
|
180
178
|
}
|
|
181
179
|
|
|
@@ -199,7 +197,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
199
197
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
200
198
|
this.init(prevProps, prevState);
|
|
201
199
|
|
|
202
|
-
if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
|
|
200
|
+
if (this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip && this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
|
|
203
201
|
this.setState({
|
|
204
202
|
autoFocusAfterPositioning: true
|
|
205
203
|
});
|
|
@@ -331,10 +329,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
331
329
|
value: function getAnchorProps() {
|
|
332
330
|
var isOpen = this.props.isOpen;
|
|
333
331
|
var anchorProps = {
|
|
334
|
-
'aria-haspopup': true,
|
|
335
|
-
'aria-expanded': isOpen ? true : false,
|
|
336
|
-
// @ts-expect-error todo(flow->ts): should it be here?
|
|
337
|
-
key: 'popover-anchor',
|
|
338
332
|
ref: this.anchorRef
|
|
339
333
|
};
|
|
340
334
|
var popoverId = this.getPopoverIdAttr();
|
|
@@ -342,6 +336,8 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
342
336
|
if (this.isAccessibilityTypeMenu()) {
|
|
343
337
|
var relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
|
|
344
338
|
anchorProps[relationAttr] = isOpen ? popoverId : null;
|
|
339
|
+
anchorProps['aria-haspopup'] = true;
|
|
340
|
+
anchorProps['aria-expanded'] = Boolean(isOpen);
|
|
345
341
|
} else if (this.isAccessibilityTypeTooltip()) {
|
|
346
342
|
anchorProps.id = this.getAnchorIdAttr();
|
|
347
343
|
anchorProps['aria-describedby'] = isOpen ? popoverId : null;
|
|
@@ -369,7 +365,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
369
365
|
bodyProps.id = popoverId;
|
|
370
366
|
} else if (this.isAccessibilityTypeTooltip()) {
|
|
371
367
|
bodyProps.id = popoverId;
|
|
372
|
-
bodyProps.role = 'tooltip';
|
|
373
368
|
}
|
|
374
369
|
|
|
375
370
|
if (this.isHoverTrigger()) {
|
|
@@ -433,7 +428,9 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
433
428
|
return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
|
|
434
429
|
}
|
|
435
430
|
|
|
436
|
-
return /*#__PURE__*/React.createElement("span",
|
|
431
|
+
return /*#__PURE__*/React.createElement("span", _extends({
|
|
432
|
+
key: "popover-anchor"
|
|
433
|
+
}, anchorProps), anchor);
|
|
437
434
|
}
|
|
438
435
|
}, {
|
|
439
436
|
key: "renderPopover",
|
|
@@ -509,7 +506,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
509
506
|
popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
|
|
510
507
|
onPopperUpdate: this.onPopperUpdate,
|
|
511
508
|
placement: this.state.placement
|
|
512
|
-
}, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
|
|
509
|
+
}, this.props.focusLock && this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip ? /*#__PURE__*/React.createElement(FocusLock, {
|
|
513
510
|
disabled: !this.props.focusLock,
|
|
514
511
|
noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
|
|
515
512
|
,
|
|
@@ -58,11 +58,12 @@ export function getBodyStyles(props) {
|
|
|
58
58
|
} : {});
|
|
59
59
|
}
|
|
60
60
|
export var Body = styled('div', getBodyStyles);
|
|
61
|
+
Body.displayName = "Body";
|
|
62
|
+
Body.displayName = 'Body';
|
|
61
63
|
/**
|
|
62
64
|
* Arrow shown between the popover and the anchor element
|
|
63
65
|
*/
|
|
64
66
|
|
|
65
|
-
Body.displayName = "Body";
|
|
66
67
|
export function getArrowStyles(props) {
|
|
67
68
|
var $arrowOffset = props.$arrowOffset,
|
|
68
69
|
$placement = props.$placement,
|
|
@@ -77,6 +78,8 @@ export function getArrowStyles(props) {
|
|
|
77
78
|
}, getArrowPositionStyles($arrowOffset, $placement));
|
|
78
79
|
}
|
|
79
80
|
export var Arrow = styled('div', getArrowStyles);
|
|
81
|
+
Arrow.displayName = "Arrow";
|
|
82
|
+
Arrow.displayName = 'Arrow';
|
|
80
83
|
/**
|
|
81
84
|
* Extra div that holds the popover content. This extra element
|
|
82
85
|
* is needed for the arrow–the arrow is just a 45deg rotated div,
|
|
@@ -84,7 +87,6 @@ export var Arrow = styled('div', getArrowStyles);
|
|
|
84
87
|
* clips the part of the arrow that extends into the popover.
|
|
85
88
|
*/
|
|
86
89
|
|
|
87
|
-
Arrow.displayName = "Arrow";
|
|
88
90
|
export function getInnerStyles(_ref) {
|
|
89
91
|
var $theme = _ref.$theme;
|
|
90
92
|
return {
|
|
@@ -98,13 +100,14 @@ export function getInnerStyles(_ref) {
|
|
|
98
100
|
};
|
|
99
101
|
}
|
|
100
102
|
export var Inner = styled('div', getInnerStyles);
|
|
103
|
+
Inner.displayName = "Inner";
|
|
104
|
+
Inner.displayName = 'Inner';
|
|
101
105
|
/**
|
|
102
106
|
* A drop-in component that provides the recommended padding
|
|
103
107
|
* for popovers. Mostly a convenience for users so they don't
|
|
104
108
|
* have to define this themselves.
|
|
105
109
|
*/
|
|
106
110
|
|
|
107
|
-
Inner.displayName = "Inner";
|
|
108
111
|
export var Padding = styled('div', {
|
|
109
112
|
paddingLeft: '12px',
|
|
110
113
|
paddingTop: '12px',
|
|
@@ -112,7 +115,9 @@ export var Padding = styled('div', {
|
|
|
112
115
|
paddingBottom: '12px'
|
|
113
116
|
});
|
|
114
117
|
Padding.displayName = "Padding";
|
|
118
|
+
Padding.displayName = 'Padding';
|
|
115
119
|
export var Hidden = styled('div', {
|
|
116
120
|
display: 'none'
|
|
117
121
|
});
|
|
118
|
-
Hidden.displayName = "Hidden";
|
|
122
|
+
Hidden.displayName = "Hidden";
|
|
123
|
+
Hidden.displayName = 'Hidden';
|