@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.10
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -2
- package/css/index-full-carbon.css +1187 -325
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +6 -8
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +789 -171
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +4 -8
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +1068 -414
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +6 -8
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +981 -267
- package/css/index.css.map +1 -1
- package/css/index.min.css +6 -8
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.js +1 -1
- package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
- package/es/components/ActionSet/ActionSet.js +7 -3
- package/es/components/AddSelect/AddSelect.js +6 -6
- package/es/components/AddSelect/AddSelectBody.js +72 -31
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +12 -4
- package/es/components/AddSelect/AddSelectColumn.js +8 -8
- package/es/components/AddSelect/AddSelectFilter.js +10 -7
- package/es/components/AddSelect/AddSelectList.js +64 -29
- package/es/components/AddSelect/AddSelectMetaPanel.js +7 -1
- package/es/components/AddSelect/AddSelectSidebar.js +5 -2
- package/es/components/AddSelect/AddSelectSort.js +2 -2
- package/es/components/AddSelect/add-select-utils.js +9 -2
- package/es/components/AddSelect/hooks/useItemSort.js +6 -0
- package/es/components/AddSelect/hooks/useParentSelect.js +6 -0
- package/es/components/AddSelect/hooks/usePath.js +15 -1
- package/es/components/AddSelect/index.js +1 -1
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
- package/es/components/Card/Card.js +16 -6
- package/es/components/Card/CardFooter.js +3 -1
- package/es/components/Card/CardHeader.js +20 -1
- package/es/components/ComboButton/ComboButton.js +1 -1
- package/es/components/CreateFullPage/CreateFullPage.js +4 -1
- package/es/components/CreateTearsheet/CreateTearsheet.js +8 -1
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +64 -11
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
- package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +40 -0
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
- package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
- package/es/components/Datagrid/Datagrid/DatagridContent.js +154 -0
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +53 -6
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +9 -6
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
- package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +537 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
- package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
- package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
- package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
- package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
- package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
- package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
- package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
- package/es/components/Datagrid/index.js +3 -1
- package/es/components/Datagrid/useActionsColumn.js +28 -12
- package/es/components/Datagrid/useColumnOrder.js +8 -0
- package/es/components/Datagrid/useCustomizeColumns.js +5 -0
- package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
- package/es/components/Datagrid/useDisableSelectRows.js +6 -2
- package/es/components/Datagrid/useExpandedRow.js +0 -1
- package/es/components/Datagrid/useInfiniteScroll.js +5 -2
- package/es/components/Datagrid/useInlineEdit.js +71 -0
- package/es/components/Datagrid/useNestedRowExpander.js +47 -0
- package/es/components/Datagrid/useNestedRows.js +16 -4
- package/es/components/Datagrid/useRowExpander.js +12 -4
- package/es/components/Datagrid/useRowSize.js +17 -6
- package/es/components/Datagrid/useSelectAllToggle.js +17 -4
- package/es/components/Datagrid/useSelectRows.js +12 -2
- package/es/components/Datagrid/useSortableColumns.js +1 -1
- package/es/components/Datagrid/useStickyColumn.js +11 -0
- package/es/components/Datagrid/utils/DatagridActions.js +236 -0
- package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
- package/es/components/Datagrid/utils/Wrapper.js +21 -0
- package/es/components/Datagrid/utils/getArgTypes.js +89 -0
- package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
- package/es/components/Datagrid/utils/makeData.js +47 -2
- package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
- package/es/components/EditUpdateCards/index.js +7 -0
- package/es/components/ExportModal/ExportModal.js +1 -1
- package/es/components/ImportModal/ImportModal.js +3 -3
- package/es/components/InlineEdit/InlineEdit.js +28 -426
- package/es/components/InlineEditV1/InlineEditV1.js +447 -0
- package/es/components/InlineEditV1/index.js +7 -0
- package/es/components/InlineEditV2/InlineEditV2.js +289 -0
- package/es/components/InlineEditV2/index.js +7 -0
- package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
- package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
- package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
- package/es/components/MultiAddSelect/index.js +6 -0
- package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
- package/es/components/OptionsTile/OptionsTile.js +29 -13
- package/es/components/PageHeader/PageHeader.js +4 -4
- package/es/components/PageHeader/PageHeaderTitle.js +1 -1
- package/es/components/ProductiveCard/ProductiveCard.js +5 -0
- package/es/components/RemoveModal/RemoveModal.js +20 -3
- package/es/components/Saving/Saving.js +1 -1
- package/es/components/SidePanel/SidePanel.js +45 -52
- package/es/components/SidePanel/motion/variants.js +45 -0
- package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
- package/es/components/SingleAddSelect/index.js +6 -0
- package/es/components/StatusIcon/StatusIcon.js +1 -1
- package/es/components/UserProfileImage/UserProfileImage.js +1 -1
- package/es/components/WebTerminal/WebTerminal.js +2 -2
- package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
- package/es/components/WebTerminal/hooks/index.js +6 -0
- package/es/components/WebTerminal/index.js +6 -0
- package/es/components/WebTerminal/preview-components/Navigation.js +7 -1
- package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
- package/es/components/WebTerminal/preview-components/index.js +7 -0
- package/es/components/index.js +3 -2
- package/es/global/js/hooks/index.js +2 -1
- package/es/global/js/hooks/useClickOutside.js +1 -1
- package/es/global/js/hooks/useControllableState.js +83 -0
- package/es/global/js/hooks/useResetCreateComponent.js +6 -2
- package/es/global/js/package-settings.js +7 -4
- package/es/global/js/utils/getBezierValues.js +20 -0
- package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
- package/es/global/js/utils/motionConstants.js +45 -0
- package/es/global/js/utils/rangeWithCallback.js +13 -0
- package/es/global/js/utils/story-helper.js +5 -1
- package/es/global/js/utils/uuidv4.spec.js +4 -0
- package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
- package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
- package/lib/components/ActionSet/ActionSet.js +7 -3
- package/lib/components/AddSelect/AddSelect.js +5 -6
- package/lib/components/AddSelect/AddSelectBody.js +67 -30
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
- package/lib/components/AddSelect/AddSelectColumn.js +7 -7
- package/lib/components/AddSelect/AddSelectFilter.js +9 -6
- package/lib/components/AddSelect/AddSelectList.js +65 -30
- package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
- package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
- package/lib/components/AddSelect/AddSelectSort.js +5 -5
- package/lib/components/AddSelect/add-select-utils.js +9 -2
- package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
- package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
- package/lib/components/AddSelect/hooks/usePath.js +9 -1
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
- package/lib/components/Card/Card.js +16 -6
- package/lib/components/Card/CardFooter.js +3 -1
- package/lib/components/Card/CardHeader.js +21 -1
- package/lib/components/ComboButton/ComboButton.js +3 -3
- package/lib/components/CreateFullPage/CreateFullPage.js +4 -1
- package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -1
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +64 -10
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
- package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +51 -0
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
- package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +188 -0
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +63 -6
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +10 -7
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +562 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
- package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
- package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
- package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
- package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
- package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
- package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
- package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
- package/lib/components/Datagrid/index.js +17 -1
- package/lib/components/Datagrid/useActionsColumn.js +28 -13
- package/lib/components/Datagrid/useColumnOrder.js +17 -0
- package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
- package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
- package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
- package/lib/components/Datagrid/useExpandedRow.js +0 -1
- package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
- package/lib/components/Datagrid/useInlineEdit.js +85 -0
- package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
- package/lib/components/Datagrid/useNestedRows.js +17 -4
- package/lib/components/Datagrid/useRowExpander.js +17 -5
- package/lib/components/Datagrid/useRowSize.js +18 -13
- package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
- package/lib/components/Datagrid/useSelectRows.js +12 -2
- package/lib/components/Datagrid/useSortableColumns.js +5 -5
- package/lib/components/Datagrid/useStickyColumn.js +11 -0
- package/lib/components/Datagrid/utils/DatagridActions.js +260 -0
- package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
- package/lib/components/Datagrid/utils/Wrapper.js +33 -0
- package/lib/components/Datagrid/utils/getArgTypes.js +97 -0
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
- package/lib/components/Datagrid/utils/makeData.js +48 -2
- package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
- package/lib/components/EditUpdateCards/index.js +13 -0
- package/lib/components/ExportModal/ExportModal.js +3 -3
- package/lib/components/ImportModal/ImportModal.js +4 -4
- package/lib/components/InlineEdit/InlineEdit.js +27 -426
- package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
- package/lib/components/InlineEditV1/index.js +13 -0
- package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
- package/lib/components/InlineEditV2/index.js +13 -0
- package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
- package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
- package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
- package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
- package/lib/components/OptionsTile/OptionsTile.js +34 -17
- package/lib/components/PageHeader/PageHeader.js +5 -5
- package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
- package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
- package/lib/components/RemoveModal/RemoveModal.js +20 -3
- package/lib/components/Saving/Saving.js +5 -5
- package/lib/components/SidePanel/SidePanel.js +48 -53
- package/lib/components/SidePanel/motion/variants.js +55 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
- package/lib/components/StatusIcon/StatusIcon.js +45 -45
- package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
- package/lib/components/WebTerminal/WebTerminal.js +3 -3
- package/lib/components/WebTerminal/hooks/index.js +6 -0
- package/lib/components/WebTerminal/preview-components/Navigation.js +10 -4
- package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
- package/lib/components/index.js +21 -1
- package/lib/global/js/hooks/index.js +9 -1
- package/lib/global/js/hooks/useClickOutside.js +1 -1
- package/lib/global/js/hooks/useControllableState.js +94 -0
- package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
- package/lib/global/js/package-settings.js +7 -4
- package/lib/global/js/utils/getBezierValues.js +29 -0
- package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
- package/lib/global/js/utils/motionConstants.js +55 -0
- package/lib/global/js/utils/rangeWithCallback.js +22 -0
- package/lib/global/js/utils/story-helper.js +5 -1
- package/lib/global/js/utils/uuidv4.spec.js +4 -0
- package/package.json +18 -16
- package/scss/components/ActionSet/_action-set.scss +9 -4
- package/scss/components/AddSelect/_add-select.scss +132 -34
- package/scss/components/AddSelect/_index.scss +1 -1
- package/scss/components/AddSelect/_storybook-styles.scss +1 -1
- package/scss/components/Card/_card.scss +1 -0
- package/scss/components/Cascade/_cascade.scss +1 -1
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
- package/scss/components/Datagrid/_datagrid.scss +7 -0
- package/scss/components/Datagrid/_storybook-styles.scss +17 -5
- package/scss/components/Datagrid/styles/_datagrid.scss +87 -18
- package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
- package/scss/components/Datagrid/styles/_index.scss +1 -0
- package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +57 -11
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
- package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
- package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
- package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
- package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
- package/scss/components/EditUpdateCards/_index.scss +8 -0
- package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
- package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
- package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +4 -2
- package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
- package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
- package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
- package/scss/components/InlineEditV2/_index.scss +10 -0
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
- package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
- package/scss/components/MultiAddSelect/_multi-add-select.scss +7 -0
- package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
- package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
- package/scss/components/RemoveModal/_remove-modal.scss +0 -4
- package/scss/components/SidePanel/_side-panel.scss +3 -82
- package/scss/components/SidePanel/_storybook-styles.scss +6 -1
- package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
- package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
- package/scss/components/SingleAddSelect/_index.scss +7 -0
- package/scss/components/SingleAddSelect/_single-add-select.scss +7 -0
- package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
- package/scss/components/Tearsheet/_tearsheet.scss +2 -2
- package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
- package/scss/components/WebTerminal/_index.scss +7 -0
- package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
- package/scss/components/_index-released-only-with-carbon.scss +1 -1
- package/scss/components/_index-released-only.scss +2 -1
- package/scss/components/_index-with-carbon.scss +3 -1
- package/scss/components/_index.scss +3 -1
@@ -33,7 +33,7 @@ var _settings = require("../../settings");
|
|
33
33
|
|
34
34
|
var _hooks = require("../../global/js/hooks");
|
35
35
|
|
36
|
-
var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "preventCloseOnClickOutside", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
|
36
|
+
var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
|
37
37
|
|
38
38
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
39
39
|
|
@@ -56,6 +56,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
56
56
|
onRequestSubmit = _ref.onRequestSubmit,
|
57
57
|
open = _ref.open,
|
58
58
|
preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
|
59
|
+
primaryButtonDisabled = _ref.primaryButtonDisabled,
|
59
60
|
primaryButtonText = _ref.primaryButtonText,
|
60
61
|
resourceName = _ref.resourceName,
|
61
62
|
secondaryButtonText = _ref.secondaryButtonText,
|
@@ -77,7 +78,18 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
77
78
|
setUserInput(e.target.value);
|
78
79
|
};
|
79
80
|
|
80
|
-
var
|
81
|
+
var checkPrimaryButtonDisabled = function checkPrimaryButtonDisabled() {
|
82
|
+
// user control should be used primarily
|
83
|
+
if (primaryButtonDisabled) {
|
84
|
+
return true;
|
85
|
+
} else if (textConfirmation && userInput !== resourceName) {
|
86
|
+
return true;
|
87
|
+
}
|
88
|
+
|
89
|
+
return false;
|
90
|
+
};
|
91
|
+
|
92
|
+
var primaryButtonStatus = checkPrimaryButtonDisabled();
|
81
93
|
var blockClass = "".concat(_settings.pkg.prefix, "--remove-modal"); // Clear the user input this way so that if the onRequestSubmit handler fails for some reason
|
82
94
|
// the value of the input will still remain: we only want to empty the input value
|
83
95
|
// when open actually changes to false.
|
@@ -120,7 +132,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
120
132
|
type: "submit",
|
121
133
|
kind: "danger",
|
122
134
|
onClick: onRequestSubmit,
|
123
|
-
disabled:
|
135
|
+
disabled: primaryButtonStatus
|
124
136
|
}, primaryButtonText)));
|
125
137
|
}); // Return a placeholder if not released and not enabled by feature flag
|
126
138
|
|
@@ -182,6 +194,11 @@ RemoveModal.propTypes = {
|
|
182
194
|
*/
|
183
195
|
preventCloseOnClickOutside: _propTypes.default.bool,
|
184
196
|
|
197
|
+
/**
|
198
|
+
* Specify whether the primary button should be disabled. This value will override textConfirmation
|
199
|
+
*/
|
200
|
+
primaryButtonDisabled: _propTypes.default.bool,
|
201
|
+
|
185
202
|
/**
|
186
203
|
* Specify the text for the primary button
|
187
204
|
*/
|
@@ -21,7 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
21
|
|
22
22
|
var _react2 = require("@carbon/react");
|
23
23
|
|
24
|
-
var
|
24
|
+
var _icons = require("@carbon/react/icons");
|
25
25
|
|
26
26
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
27
27
|
|
@@ -59,7 +59,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
59
59
|
text: defaultText,
|
60
60
|
iconDescription: defaultIconDescription,
|
61
61
|
icon: function icon(props) {
|
62
|
-
return /*#__PURE__*/_react.default.createElement(
|
62
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
63
63
|
size: 16
|
64
64
|
}, props));
|
65
65
|
}
|
@@ -76,7 +76,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
76
76
|
text: successText,
|
77
77
|
iconDescription: successIconDescription,
|
78
78
|
icon: function icon(props) {
|
79
|
-
return /*#__PURE__*/_react.default.createElement(
|
79
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Save, (0, _extends2.default)({
|
80
80
|
size: 16
|
81
81
|
}, props));
|
82
82
|
}
|
@@ -84,7 +84,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
84
84
|
text: failText,
|
85
85
|
iconDescription: failIconDescription,
|
86
86
|
icon: function icon(props) {
|
87
|
-
return /*#__PURE__*/_react.default.createElement(
|
87
|
+
return /*#__PURE__*/_react.default.createElement(_icons.ErrorOutline, (0, _extends2.default)({
|
88
88
|
size: 16
|
89
89
|
}, props));
|
90
90
|
}
|
@@ -97,7 +97,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
97
97
|
className: "".concat(blockClass, "__message")
|
98
98
|
}, status === 'fail' && /*#__PURE__*/_react.default.createElement("div", {
|
99
99
|
className: "".concat(blockClass, "__error-icon")
|
100
|
-
}, /*#__PURE__*/_react.default.createElement(
|
100
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.ErrorFilled, {
|
101
101
|
size: 16
|
102
102
|
})), /*#__PURE__*/_react.default.createElement("p", {
|
103
103
|
className: "".concat(blockClass, "__text")
|
@@ -19,6 +19,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
19
19
|
|
20
20
|
var _react = _interopRequireWildcard(require("react"));
|
21
21
|
|
22
|
+
var _framerMotion = require("framer-motion");
|
23
|
+
|
22
24
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
23
25
|
|
24
26
|
var _classnames = _interopRequireDefault(require("classnames"));
|
@@ -41,10 +43,12 @@ var _hooks = require("../../global/js/hooks");
|
|
41
43
|
|
42
44
|
var _react2 = require("@carbon/react");
|
43
45
|
|
44
|
-
var
|
46
|
+
var _icons = require("@carbon/react/icons");
|
45
47
|
|
46
48
|
var _ActionSet = require("../ActionSet");
|
47
49
|
|
50
|
+
var _variants = require("./motion/variants");
|
51
|
+
|
48
52
|
var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
|
49
53
|
_excluded2 = ["label", "kind", "icon", "leading", "disabled", "className", "onClick"];
|
50
54
|
|
@@ -106,20 +110,15 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
106
110
|
title = _ref.title,
|
107
111
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
108
112
|
|
109
|
-
var _useState = (0, _react.useState)(
|
113
|
+
var _useState = (0, _react.useState)(false),
|
110
114
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
111
|
-
|
112
|
-
|
115
|
+
animationComplete = _useState2[0],
|
116
|
+
setAnimationComplete = _useState2[1];
|
113
117
|
|
114
|
-
var _useState3 = (0, _react.useState)(
|
118
|
+
var _useState3 = (0, _react.useState)(0),
|
115
119
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
var _useState5 = (0, _react.useState)(0),
|
120
|
-
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
121
|
-
panelHeight = _useState6[0],
|
122
|
-
setPanelHeight = _useState6[1];
|
120
|
+
panelHeight = _useState4[0],
|
121
|
+
setPanelHeight = _useState4[1];
|
123
122
|
|
124
123
|
var sidePanelRef = (0, _react.useRef)();
|
125
124
|
var sidePanelOverlayRef = (0, _react.useRef)();
|
@@ -149,8 +148,10 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
149
148
|
// height css custom property
|
150
149
|
|
151
150
|
if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
|
151
|
+
var _sidePanelOuter$style;
|
152
|
+
|
152
153
|
scrollableSection.scrollTop = 0;
|
153
|
-
sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
|
154
|
+
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 ? void 0 : _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
|
154
155
|
}
|
155
156
|
}
|
156
157
|
}, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]); // set initial focus when side panel opens
|
@@ -178,12 +179,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
178
179
|
}, [selectorPrimaryFocus, open, animationComplete]);
|
179
180
|
(0, _react.useEffect)(function () {
|
180
181
|
if (open && actions && actions.length && animationComplete) {
|
182
|
+
var _sidePanelOuter$style2;
|
183
|
+
|
181
184
|
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
182
185
|
var actionsContainer = getActionsContainerElement();
|
183
186
|
var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
|
184
187
|
|
185
188
|
actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
|
186
|
-
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
189
|
+
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 ? void 0 : _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
187
190
|
}
|
188
191
|
}, [actions, condensedActions, open, animationComplete]); // Add console warning if labelText is provided without a title.
|
189
192
|
// This combination is not allowed.
|
@@ -196,13 +199,15 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
196
199
|
/* istanbul ignore next */
|
197
200
|
|
198
201
|
var handleResize = function handleResize(width, height) {
|
202
|
+
var _sidePanelOuter$style3;
|
203
|
+
|
199
204
|
setPanelHeight(height);
|
200
205
|
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
201
206
|
var actionsContainer = getActionsContainerElement();
|
202
|
-
var actionsHeight = actionsContainer.offsetHeight + 16; // add additional 1rem spacing to bottom padding
|
207
|
+
var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
|
203
208
|
|
204
209
|
actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
|
205
|
-
sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
210
|
+
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 ? void 0 : _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
206
211
|
};
|
207
212
|
|
208
213
|
var getActionsContainerElement = function getActionsContainerElement() {
|
@@ -287,7 +292,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
287
292
|
});
|
288
293
|
}
|
289
294
|
|
290
|
-
if (open &&
|
295
|
+
if (open && !animateTitle) {
|
291
296
|
var _sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
292
297
|
|
293
298
|
var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
|
@@ -308,7 +313,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
308
313
|
_sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
|
309
314
|
_sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
|
310
315
|
}
|
311
|
-
}, [open, animateTitle, animationComplete,
|
316
|
+
}, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
|
312
317
|
|
313
318
|
(0, _react.useEffect)(function () {
|
314
319
|
var handleOutsideClick = function handleOutsideClick(event) {
|
@@ -334,18 +339,11 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
334
339
|
return function () {
|
335
340
|
document.removeEventListener('click', handleOutsideClick);
|
336
341
|
};
|
337
|
-
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); //
|
338
|
-
|
339
|
-
(0, _react.useEffect)(function () {
|
340
|
-
if (open) {
|
341
|
-
setRender(true);
|
342
|
-
}
|
343
|
-
}, [open]); // initializes the side panel to close
|
342
|
+
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initializes the side panel to close
|
344
343
|
|
345
344
|
var onAnimationEnd = function onAnimationEnd() {
|
346
345
|
if (!open) {
|
347
346
|
onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
348
|
-
setRender(false);
|
349
347
|
}
|
350
348
|
|
351
349
|
setAnimationComplete(true);
|
@@ -359,13 +357,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
359
357
|
}
|
360
358
|
}, [reducedMotion.matches]); // initializes the side panel to open
|
361
359
|
|
362
|
-
var _onAnimationStart = function onAnimationStart(
|
363
|
-
|
364
|
-
var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
|
365
|
-
|
366
|
-
if (isPanelTarget) {
|
367
|
-
setAnimationComplete(false);
|
368
|
-
}
|
360
|
+
var _onAnimationStart = function onAnimationStart() {
|
361
|
+
setAnimationComplete(false);
|
369
362
|
}; // used to reset margins of the slide in panel when closed/closing
|
370
363
|
|
371
364
|
|
@@ -382,13 +375,12 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
382
375
|
}, [open, placement, selectorPageContent, slideIn]);
|
383
376
|
(0, _react.useEffect)(function () {
|
384
377
|
if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
|
385
|
-
setRender(false);
|
386
378
|
onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
387
379
|
}
|
388
380
|
}, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]); // used to set margins of content for slide in panel version
|
389
381
|
|
390
382
|
(0, _react.useEffect)(function () {
|
391
|
-
if (
|
383
|
+
if (open && slideIn) {
|
392
384
|
var pageContentElement = document.querySelector(selectorPageContent);
|
393
385
|
|
394
386
|
if (placement && placement === 'right' && pageContentElement) {
|
@@ -401,7 +393,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
401
393
|
pageContentElement.style.marginLeft = _constants.SIDE_PANEL_SIZES[size];
|
402
394
|
}
|
403
395
|
}
|
404
|
-
}, [slideIn, selectorPageContent, placement,
|
396
|
+
}, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]); // adds focus trap functionality
|
405
397
|
|
406
398
|
/* istanbul ignore next */
|
407
399
|
|
@@ -435,7 +427,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
435
427
|
size: "sm",
|
436
428
|
disabled: false,
|
437
429
|
renderIcon: function renderIcon(props) {
|
438
|
-
return /*#__PURE__*/_react.default.createElement(
|
430
|
+
return /*#__PURE__*/_react.default.createElement(_icons.ArrowLeft, (0, _extends2.default)({
|
439
431
|
size: 20
|
440
432
|
}, props));
|
441
433
|
},
|
@@ -449,7 +441,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
449
441
|
kind: "ghost",
|
450
442
|
size: "sm",
|
451
443
|
renderIcon: function renderIcon(props) {
|
452
|
-
return /*#__PURE__*/_react.default.createElement(
|
444
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
|
453
445
|
size: 20
|
454
446
|
}, props));
|
455
447
|
},
|
@@ -506,20 +498,22 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
506
498
|
onResize: handleResize,
|
507
499
|
targetRef: contentRef
|
508
500
|
});
|
509
|
-
return
|
501
|
+
return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
|
510
502
|
id: "".concat(blockClass, "-outer"),
|
511
503
|
className: mainPanelClassNames,
|
512
|
-
style: {
|
513
|
-
animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(_motion.moderate02) : "side-panel-entrance-left ".concat(_motion.moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(_motion.moderate02) : "side-panel-exit-left ".concat(_motion.moderate02)) : null
|
514
|
-
},
|
515
|
-
onAnimationEnd: onAnimationEnd,
|
516
|
-
onAnimationStart: function onAnimationStart(event) {
|
517
|
-
return _onAnimationStart(event);
|
518
|
-
},
|
519
504
|
onBlur: handleBlur,
|
520
505
|
ref: contentRef,
|
521
506
|
role: "complementary",
|
522
|
-
"aria-label": title
|
507
|
+
"aria-label": title,
|
508
|
+
onAnimationComplete: onAnimationEnd,
|
509
|
+
onAnimationStart: function onAnimationStart(event) {
|
510
|
+
return _onAnimationStart(event);
|
511
|
+
},
|
512
|
+
variants: _variants.panelVariants,
|
513
|
+
initial: "hidden",
|
514
|
+
animate: "visible",
|
515
|
+
exit: "exit",
|
516
|
+
custom: placement
|
523
517
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
524
518
|
ref: startTrapRef,
|
525
519
|
tabIndex: "0",
|
@@ -539,13 +533,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
539
533
|
tabIndex: "0",
|
540
534
|
role: "link",
|
541
535
|
className: "".concat(blockClass, "__visually-hidden")
|
542
|
-
}, "Focus sentinel")), includeOverlay && /*#__PURE__*/_react.default.createElement(
|
536
|
+
}, "Focus sentinel")), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
|
537
|
+
variants: _variants.overlayVariants,
|
538
|
+
initial: "hidden",
|
539
|
+
animate: "visible",
|
540
|
+
exit: "exit",
|
543
541
|
ref: sidePanelOverlayRef,
|
544
|
-
className: "".concat(blockClass, "__overlay")
|
545
|
-
|
546
|
-
animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(_motion.moderate02) : "side-panel-overlay-exit ".concat(_motion.moderate02)) : null
|
547
|
-
}
|
548
|
-
}));
|
542
|
+
className: "".concat(blockClass, "__overlay")
|
543
|
+
}))));
|
549
544
|
}); // Return a placeholder if not released and not enabled by feature flag
|
550
545
|
|
551
546
|
|
@@ -0,0 +1,55 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.panelVariants = exports.overlayVariants = void 0;
|
7
|
+
|
8
|
+
var _motionConstants = require("../../../global/js/utils/motionConstants");
|
9
|
+
|
10
|
+
/**
|
11
|
+
* Copyright IBM Corp. 2022, 2022
|
12
|
+
*
|
13
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
14
|
+
* LICENSE file in the root directory of this source tree.
|
15
|
+
*/
|
16
|
+
var overlayVariants = {
|
17
|
+
visible: {
|
18
|
+
opacity: 1,
|
19
|
+
transition: {
|
20
|
+
duration: _motionConstants.DURATIONS.moderate02,
|
21
|
+
ease: _motionConstants.EASINGS.productive.standard
|
22
|
+
}
|
23
|
+
},
|
24
|
+
hidden: {
|
25
|
+
opacity: 0
|
26
|
+
},
|
27
|
+
exit: {
|
28
|
+
opacity: 0
|
29
|
+
}
|
30
|
+
};
|
31
|
+
exports.overlayVariants = overlayVariants;
|
32
|
+
var panelVariants = {
|
33
|
+
visible: {
|
34
|
+
x: 0,
|
35
|
+
transition: {
|
36
|
+
duration: _motionConstants.DURATIONS.moderate02,
|
37
|
+
ease: _motionConstants.EASINGS.productive.standard
|
38
|
+
}
|
39
|
+
},
|
40
|
+
hidden: function hidden(placement) {
|
41
|
+
return {
|
42
|
+
x: placement === 'right' ? '100%' : -320
|
43
|
+
};
|
44
|
+
},
|
45
|
+
exit: function exit(placement) {
|
46
|
+
return {
|
47
|
+
x: placement === 'right' ? '100%' : -320,
|
48
|
+
transition: {
|
49
|
+
duration: _motionConstants.DURATIONS.moderate01,
|
50
|
+
ease: _motionConstants.EASINGS.productive.exit
|
51
|
+
}
|
52
|
+
};
|
53
|
+
}
|
54
|
+
};
|
55
|
+
exports.panelVariants = panelVariants;
|
@@ -27,6 +27,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
27
27
|
|
28
28
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
29
29
|
|
30
|
+
//
|
31
|
+
// Copyright IBM Corp. 2022
|
32
|
+
//
|
33
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
34
|
+
// LICENSE file in the root directory of this source tree.
|
35
|
+
//
|
30
36
|
var componentName = 'SingleAddSelect';
|
31
37
|
var SingleAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
32
38
|
// remove multi add select specific props
|