@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.11
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 +1294 -331
- 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 +1171 -416
- 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 +1068 -262
- 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 +65 -15
- 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 +42 -0
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
- package/es/components/Datagrid/Datagrid/Datagrid.js +13 -37
- package/es/components/Datagrid/Datagrid/DatagridContent.js +159 -0
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +17 -4
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +44 -5
- 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 +29 -8
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +31 -9
- 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/Filtering/FilterFlyout.js +424 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +83 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +20 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +22 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +7 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +38 -0
- 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 +4 -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/useFiltering.js +90 -0
- 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/useParentDimensions.js +3 -1
- 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 +223 -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 +94 -0
- package/es/components/Datagrid/utils/getInlineEditColumns.js +158 -0
- package/es/components/Datagrid/utils/makeData.js +55 -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/FilterSummary/FilterSummary.js +54 -0
- package/es/components/FilterSummary/index.js +7 -0
- 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 +65 -14
- 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 +53 -0
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
- package/lib/components/Datagrid/Datagrid/Datagrid.js +16 -44
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +193 -0
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +17 -4
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +45 -5
- 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 +32 -8
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +33 -9
- 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/Filtering/FilterFlyout.js +443 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +35 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +33 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +15 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +47 -0
- 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 +25 -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/useFiltering.js +94 -0
- 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/useParentDimensions.js +3 -1
- 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 +248 -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 +102 -0
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +173 -0
- package/lib/components/Datagrid/utils/makeData.js +57 -3
- 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/FilterSummary/FilterSummary.js +72 -0
- package/lib/components/FilterSummary/index.js +15 -0
- 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 -1
- package/scss/components/Datagrid/_storybook-styles.scss +29 -5
- package/scss/components/Datagrid/styles/_datagrid.scss +105 -18
- package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
- package/scss/components/Datagrid/styles/_index.scss +2 -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/_FilterFlyout.scss +87 -0
- 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/FilterSummary/_filter-summary.scss +20 -0
- package/scss/components/FilterSummary/_index.scss +10 -0
- package/scss/components/FilterSummary/_storybook-styles.scss +14 -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 +4 -1
@@ -16,7 +16,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
17
17
|
*/
|
18
18
|
// Import portions of React that are needed.
|
19
|
-
import React, { useState, useEffect, useRef } from 'react';
|
19
|
+
import React, { useState, useEffect, useRef } from 'react';
|
20
|
+
import { motion, AnimatePresence } from 'framer-motion'; // Other standard imports.
|
20
21
|
|
21
22
|
import PropTypes from 'prop-types';
|
22
23
|
import cx from 'classnames';
|
@@ -30,8 +31,9 @@ import { SIDE_PANEL_SIZES } from './constants';
|
|
30
31
|
import { usePreviousValue } from '../../global/js/hooks'; // Carbon and package components we use.
|
31
32
|
|
32
33
|
import { Button } from '@carbon/react';
|
33
|
-
import { Close, ArrowLeft } from '@carbon/icons
|
34
|
+
import { Close, ArrowLeft } from '@carbon/react/icons';
|
34
35
|
import { ActionSet } from '../ActionSet';
|
36
|
+
import { overlayVariants, panelVariants } from './motion/variants';
|
35
37
|
var blockClass = "".concat(pkg.prefix, "--side-panel");
|
36
38
|
var componentName = 'SidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
|
37
39
|
// Default values for props
|
@@ -82,20 +84,15 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
82
84
|
title = _ref.title,
|
83
85
|
rest = _objectWithoutProperties(_ref, _excluded);
|
84
86
|
|
85
|
-
var _useState = useState(
|
87
|
+
var _useState = useState(false),
|
86
88
|
_useState2 = _slicedToArray(_useState, 2),
|
87
|
-
|
88
|
-
|
89
|
+
animationComplete = _useState2[0],
|
90
|
+
setAnimationComplete = _useState2[1];
|
89
91
|
|
90
|
-
var _useState3 = useState(
|
92
|
+
var _useState3 = useState(0),
|
91
93
|
_useState4 = _slicedToArray(_useState3, 2),
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
var _useState5 = useState(0),
|
96
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
97
|
-
panelHeight = _useState6[0],
|
98
|
-
setPanelHeight = _useState6[1];
|
94
|
+
panelHeight = _useState4[0],
|
95
|
+
setPanelHeight = _useState4[1];
|
99
96
|
|
100
97
|
var sidePanelRef = useRef();
|
101
98
|
var sidePanelOverlayRef = useRef();
|
@@ -125,8 +122,10 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
125
122
|
// height css custom property
|
126
123
|
|
127
124
|
if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
|
125
|
+
var _sidePanelOuter$style;
|
126
|
+
|
128
127
|
scrollableSection.scrollTop = 0;
|
129
|
-
sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
|
128
|
+
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"));
|
130
129
|
}
|
131
130
|
}
|
132
131
|
}, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]); // set initial focus when side panel opens
|
@@ -154,12 +153,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
154
153
|
}, [selectorPrimaryFocus, open, animationComplete]);
|
155
154
|
useEffect(function () {
|
156
155
|
if (open && actions && actions.length && animationComplete) {
|
156
|
+
var _sidePanelOuter$style2;
|
157
|
+
|
157
158
|
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
158
159
|
var actionsContainer = getActionsContainerElement();
|
159
160
|
var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
|
160
161
|
|
161
162
|
actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
|
162
|
-
sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
163
|
+
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);
|
163
164
|
}
|
164
165
|
}, [actions, condensedActions, open, animationComplete]); // Add console warning if labelText is provided without a title.
|
165
166
|
// This combination is not allowed.
|
@@ -172,13 +173,15 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
172
173
|
/* istanbul ignore next */
|
173
174
|
|
174
175
|
var handleResize = function handleResize(width, height) {
|
176
|
+
var _sidePanelOuter$style3;
|
177
|
+
|
175
178
|
setPanelHeight(height);
|
176
179
|
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
177
180
|
var actionsContainer = getActionsContainerElement();
|
178
|
-
var actionsHeight = actionsContainer.offsetHeight + 16; // add additional 1rem spacing to bottom padding
|
181
|
+
var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
|
179
182
|
|
180
183
|
actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
|
181
|
-
sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
184
|
+
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);
|
182
185
|
};
|
183
186
|
|
184
187
|
var getActionsContainerElement = function getActionsContainerElement() {
|
@@ -263,7 +266,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
263
266
|
});
|
264
267
|
}
|
265
268
|
|
266
|
-
if (open &&
|
269
|
+
if (open && !animateTitle) {
|
267
270
|
var _sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
268
271
|
|
269
272
|
var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
|
@@ -284,7 +287,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
284
287
|
_sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
|
285
288
|
_sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
|
286
289
|
}
|
287
|
-
}, [open, animateTitle, animationComplete,
|
290
|
+
}, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
|
288
291
|
|
289
292
|
useEffect(function () {
|
290
293
|
var handleOutsideClick = function handleOutsideClick(event) {
|
@@ -310,18 +313,11 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
310
313
|
return function () {
|
311
314
|
document.removeEventListener('click', handleOutsideClick);
|
312
315
|
};
|
313
|
-
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); //
|
314
|
-
|
315
|
-
useEffect(function () {
|
316
|
-
if (open) {
|
317
|
-
setRender(true);
|
318
|
-
}
|
319
|
-
}, [open]); // initializes the side panel to close
|
316
|
+
}, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initializes the side panel to close
|
320
317
|
|
321
318
|
var onAnimationEnd = function onAnimationEnd() {
|
322
319
|
if (!open) {
|
323
320
|
onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
324
|
-
setRender(false);
|
325
321
|
}
|
326
322
|
|
327
323
|
setAnimationComplete(true);
|
@@ -335,13 +331,8 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
335
331
|
}
|
336
332
|
}, [reducedMotion.matches]); // initializes the side panel to open
|
337
333
|
|
338
|
-
var _onAnimationStart = function onAnimationStart(
|
339
|
-
|
340
|
-
var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
|
341
|
-
|
342
|
-
if (isPanelTarget) {
|
343
|
-
setAnimationComplete(false);
|
344
|
-
}
|
334
|
+
var _onAnimationStart = function onAnimationStart() {
|
335
|
+
setAnimationComplete(false);
|
345
336
|
}; // used to reset margins of the slide in panel when closed/closing
|
346
337
|
|
347
338
|
|
@@ -358,13 +349,12 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
358
349
|
}, [open, placement, selectorPageContent, slideIn]);
|
359
350
|
useEffect(function () {
|
360
351
|
if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
|
361
|
-
setRender(false);
|
362
352
|
onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
363
353
|
}
|
364
354
|
}, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]); // used to set margins of content for slide in panel version
|
365
355
|
|
366
356
|
useEffect(function () {
|
367
|
-
if (
|
357
|
+
if (open && slideIn) {
|
368
358
|
var pageContentElement = document.querySelector(selectorPageContent);
|
369
359
|
|
370
360
|
if (placement && placement === 'right' && pageContentElement) {
|
@@ -377,7 +367,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
377
367
|
pageContentElement.style.marginLeft = SIDE_PANEL_SIZES[size];
|
378
368
|
}
|
379
369
|
}
|
380
|
-
}, [slideIn, selectorPageContent, placement,
|
370
|
+
}, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]); // adds focus trap functionality
|
381
371
|
|
382
372
|
/* istanbul ignore next */
|
383
373
|
|
@@ -483,20 +473,22 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
483
473
|
onResize: handleResize,
|
484
474
|
targetRef: contentRef
|
485
475
|
});
|
486
|
-
return
|
476
|
+
return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
|
487
477
|
id: "".concat(blockClass, "-outer"),
|
488
478
|
className: mainPanelClassNames,
|
489
|
-
style: {
|
490
|
-
animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(moderate02) : "side-panel-entrance-left ".concat(moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(moderate02) : "side-panel-exit-left ".concat(moderate02)) : null
|
491
|
-
},
|
492
|
-
onAnimationEnd: onAnimationEnd,
|
493
|
-
onAnimationStart: function onAnimationStart(event) {
|
494
|
-
return _onAnimationStart(event);
|
495
|
-
},
|
496
479
|
onBlur: handleBlur,
|
497
480
|
ref: contentRef,
|
498
481
|
role: "complementary",
|
499
|
-
"aria-label": title
|
482
|
+
"aria-label": title,
|
483
|
+
onAnimationComplete: onAnimationEnd,
|
484
|
+
onAnimationStart: function onAnimationStart(event) {
|
485
|
+
return _onAnimationStart(event);
|
486
|
+
},
|
487
|
+
variants: panelVariants,
|
488
|
+
initial: "hidden",
|
489
|
+
animate: "visible",
|
490
|
+
exit: "exit",
|
491
|
+
custom: placement
|
500
492
|
}), /*#__PURE__*/React.createElement("span", {
|
501
493
|
ref: startTrapRef,
|
502
494
|
tabIndex: "0",
|
@@ -516,13 +508,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
516
508
|
tabIndex: "0",
|
517
509
|
role: "link",
|
518
510
|
className: "".concat(blockClass, "__visually-hidden")
|
519
|
-
}, "Focus sentinel")), includeOverlay && /*#__PURE__*/React.createElement(
|
511
|
+
}, "Focus sentinel")), /*#__PURE__*/React.createElement(AnimatePresence, null, includeOverlay && /*#__PURE__*/React.createElement(motion.div, {
|
512
|
+
variants: overlayVariants,
|
513
|
+
initial: "hidden",
|
514
|
+
animate: "visible",
|
515
|
+
exit: "exit",
|
520
516
|
ref: sidePanelOverlayRef,
|
521
|
-
className: "".concat(blockClass, "__overlay")
|
522
|
-
|
523
|
-
animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(moderate02) : "side-panel-overlay-exit ".concat(moderate02)) : null
|
524
|
-
}
|
525
|
-
}));
|
517
|
+
className: "".concat(blockClass, "__overlay")
|
518
|
+
}))));
|
526
519
|
}); // Return a placeholder if not released and not enabled by feature flag
|
527
520
|
|
528
521
|
SidePanel = pkg.checkComponentEnabled(SidePanel, componentName);
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { DURATIONS, EASINGS } from '../../../global/js/utils/motionConstants';
|
8
|
+
export var overlayVariants = {
|
9
|
+
visible: {
|
10
|
+
opacity: 1,
|
11
|
+
transition: {
|
12
|
+
duration: DURATIONS.moderate02,
|
13
|
+
ease: EASINGS.productive.standard
|
14
|
+
}
|
15
|
+
},
|
16
|
+
hidden: {
|
17
|
+
opacity: 0
|
18
|
+
},
|
19
|
+
exit: {
|
20
|
+
opacity: 0
|
21
|
+
}
|
22
|
+
};
|
23
|
+
export var panelVariants = {
|
24
|
+
visible: {
|
25
|
+
x: 0,
|
26
|
+
transition: {
|
27
|
+
duration: DURATIONS.moderate02,
|
28
|
+
ease: EASINGS.productive.standard
|
29
|
+
}
|
30
|
+
},
|
31
|
+
hidden: function hidden(placement) {
|
32
|
+
return {
|
33
|
+
x: placement === 'right' ? '100%' : -320
|
34
|
+
};
|
35
|
+
},
|
36
|
+
exit: function exit(placement) {
|
37
|
+
return {
|
38
|
+
x: placement === 'right' ? '100%' : -320,
|
39
|
+
transition: {
|
40
|
+
duration: DURATIONS.moderate01,
|
41
|
+
ease: EASINGS.productive.exit
|
42
|
+
}
|
43
|
+
};
|
44
|
+
}
|
45
|
+
};
|
@@ -1,4 +1,10 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
//
|
3
|
+
// Copyright IBM Corp. 2022
|
4
|
+
//
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
7
|
+
//
|
2
8
|
import React, { forwardRef } from 'react';
|
3
9
|
import PropTypes from 'prop-types';
|
4
10
|
import { AddSelect } from '../AddSelect';
|
@@ -12,7 +12,7 @@ var _excluded = ["kind", "theme", "size", "className", "iconDescription"];
|
|
12
12
|
import React, { forwardRef } from 'react';
|
13
13
|
import PropTypes from 'prop-types';
|
14
14
|
import cx from 'classnames';
|
15
|
-
import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, Renew, Time } from '@carbon/icons
|
15
|
+
import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, Renew, Time } from '@carbon/react/icons';
|
16
16
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
17
17
|
import { pkg } from '../../settings';
|
18
18
|
var blockClass = "".concat(pkg.prefix, "--status-icon");
|
@@ -17,7 +17,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
|
17
17
|
import '../../global/js/utils/props-helper';
|
18
18
|
import { pkg } from '../../settings'; // Carbon and package components we use.
|
19
19
|
|
20
|
-
import { User, Group } from '@carbon/icons
|
20
|
+
import { User, Group } from '@carbon/react/icons';
|
21
21
|
import { IconButton } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
|
22
22
|
|
23
23
|
var blockClass = "".concat(pkg.prefix, "--user-profile-image");
|
@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
9
9
|
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; }
|
10
10
|
|
11
11
|
/**
|
12
|
-
* Copyright IBM Corp. 2020,
|
12
|
+
* Copyright IBM Corp. 2020, 2022
|
13
13
|
*
|
14
14
|
* This source code is licensed under the Apache-2.0 license found in the
|
15
15
|
* LICENSE file in the root directory of this source tree.
|
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
|
|
21
21
|
import cx from 'classnames';
|
22
22
|
import { pkg } from '../../settings'; // Carbon and package components we use.
|
23
23
|
|
24
|
-
import { Close, Help } from '@carbon/icons
|
24
|
+
import { Close, Help } from '@carbon/react/icons';
|
25
25
|
import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
|
26
26
|
import { moderate02 } from '@carbon/motion';
|
27
27
|
import { useWebTerminal } from './hooks';
|
@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
4
4
|
var _excluded = ["children"];
|
5
5
|
|
6
6
|
/**
|
7
|
-
* Copyright IBM Corp.
|
7
|
+
* Copyright IBM Corp. 2022, 2022
|
8
8
|
*
|
9
9
|
* This source code is licensed under the Apache-2.0 license found in the
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
@@ -1,4 +1,10 @@
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
+
//
|
3
|
+
// Copyright IBM Corp. 2022, 2022
|
4
|
+
//
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
7
|
+
//
|
2
8
|
import React, { useState, useCallback, createContext } from 'react';
|
3
9
|
import { useContext } from 'react';
|
4
10
|
import PropTypes from 'prop-types';
|
@@ -1,3 +1,9 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
1
7
|
export { WebTerminal } from './WebTerminal';
|
2
8
|
export { WebTerminalContentWrapper } from './WebTerminalContentWrapper';
|
3
9
|
export { useWebTerminal, WebTerminalProvider } from './hooks';
|
@@ -1,6 +1,12 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2020, 2022
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
1
7
|
import React from 'react';
|
2
8
|
import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from '@carbon/react';
|
3
|
-
import { Terminal, Search, User } from '@carbon/icons
|
9
|
+
import { Terminal, Search, User } from '@carbon/react/icons';
|
4
10
|
import { useWebTerminal } from '../hooks';
|
5
11
|
|
6
12
|
var Navigation = function Navigation() {
|
@@ -1,3 +1,10 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2020, 2021
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
1
8
|
/**
|
2
9
|
* Preview components are components only to be used
|
3
10
|
* in the context of storybook.
|
package/es/components/index.js
CHANGED
@@ -37,7 +37,8 @@ export { EditSidePanel } from './EditSidePanel';
|
|
37
37
|
export { OptionsTile } from './OptionsTile';
|
38
38
|
export { InlineEdit } from './InlineEdit';
|
39
39
|
export { DataSpreadsheet } from './DataSpreadsheet';
|
40
|
-
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle } from './Datagrid';
|
40
|
+
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit } from './Datagrid';
|
41
41
|
export { EditTearsheet } from './EditTearsheet';
|
42
42
|
export { EditTearsheetNarrow } from './EditTearsheetNarrow';
|
43
|
-
export { EditFullPage } from './EditFullPage';
|
43
|
+
export { EditFullPage } from './EditFullPage';
|
44
|
+
export { EditUpdateCards } from './EditUpdateCards';
|
@@ -13,4 +13,5 @@ export { useCreateComponentStepChange } from './useCreateComponentStepChange';
|
|
13
13
|
export { usePreviousValue } from './usePreviousValue';
|
14
14
|
export { useResetCreateComponent } from './useResetCreateComponent';
|
15
15
|
export { useRetrieveStepData } from './useRetrieveStepData';
|
16
|
-
export { useValidCreateStepCount } from './useValidCreateStepCount';
|
16
|
+
export { useValidCreateStepCount } from './useValidCreateStepCount';
|
17
|
+
export { useControllableState } from './useControllableState';
|
@@ -8,7 +8,7 @@ import { useEffect } from 'react';
|
|
8
8
|
export var useClickOutside = function useClickOutside(ref, callback) {
|
9
9
|
var handleClick = function handleClick(event) {
|
10
10
|
if (ref.current && !ref.current.contains(event.target)) {
|
11
|
-
callback();
|
11
|
+
callback(event.target);
|
12
12
|
}
|
13
13
|
};
|
14
14
|
|
@@ -0,0 +1,83 @@
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Copyright IBM Corp. 2016, 2022
|
5
|
+
*
|
6
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
8
|
+
*/
|
9
|
+
import { useEffect, useRef, useState } from 'react';
|
10
|
+
import pconsole from '../utils/pconsole';
|
11
|
+
/**
|
12
|
+
* This custom hook simplifies the behavior of a component if it has state that
|
13
|
+
* can be both controlled and uncontrolled. It functions identical to a
|
14
|
+
* useState() hook and provides [state, setState] for you to use. You can use
|
15
|
+
* the `onChange` argument to allow updates to the `state` to be communicated to
|
16
|
+
* owners of controlled components.
|
17
|
+
*
|
18
|
+
* Note: this hook will warn if a component is switching from controlled to
|
19
|
+
* uncontrolled, or vice-versa.
|
20
|
+
*
|
21
|
+
* @param {object} config
|
22
|
+
* @param {string} config.name - the name of the custom component
|
23
|
+
* @param {any} config.defaultValue - the default value used for the state. This will be
|
24
|
+
* the fallback value used if `value` is not defined.
|
25
|
+
* @param {Function} config.onChange - an optional function that is called when
|
26
|
+
* the value of the state changes. This is useful for communicating to parents of
|
27
|
+
* controlled components that the value is requesting to be changed.
|
28
|
+
* @param {any} config.value - a controlled value. Omitting this means that the state is
|
29
|
+
* uncontrolled
|
30
|
+
* @returns {[any, Function]}
|
31
|
+
*/
|
32
|
+
|
33
|
+
export function useControllableState(_ref) {
|
34
|
+
var defaultValue = _ref.defaultValue,
|
35
|
+
_ref$name = _ref.name,
|
36
|
+
name = _ref$name === void 0 ? 'custom' : _ref$name,
|
37
|
+
onChange = _ref.onChange,
|
38
|
+
value = _ref.value;
|
39
|
+
|
40
|
+
var _useState = useState(value !== null && value !== void 0 ? value : defaultValue),
|
41
|
+
_useState2 = _slicedToArray(_useState, 2),
|
42
|
+
state = _useState2[0],
|
43
|
+
internalSetState = _useState2[1];
|
44
|
+
|
45
|
+
var controlled = useRef(null);
|
46
|
+
|
47
|
+
if (controlled.current === null) {
|
48
|
+
controlled.current = value !== undefined;
|
49
|
+
}
|
50
|
+
|
51
|
+
function setState(stateOrUpdater) {
|
52
|
+
var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
|
53
|
+
|
54
|
+
if (controlled.current === false) {
|
55
|
+
internalSetState(value);
|
56
|
+
}
|
57
|
+
|
58
|
+
if (onChange) {
|
59
|
+
onChange(value);
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
useEffect(function () {
|
64
|
+
var controlledValue = value !== undefined; // Uncontrolled -> Controlled
|
65
|
+
// If the component prop is uncontrolled, the prop value should be undefined
|
66
|
+
|
67
|
+
if (controlled.current === false && controlledValue) {
|
68
|
+
pconsole.warn("A component is changing an uncontrolled %s component to be controlled.\n This is likely caused by the value changing to a defined value\n from undefined. Decide between using a controlled or uncontrolled\n value for the lifetime of the component.\n More info: https://reactjs.org/link/controlled-components");
|
69
|
+
} // Controlled -> Uncontrolled
|
70
|
+
// If the component prop is controlled, the prop value should be defined
|
71
|
+
|
72
|
+
|
73
|
+
if (controlled.current === true && !controlledValue) {
|
74
|
+
pconsole.warn("A component is changing a controlled %s component to be uncontrolled.\n 'This is likely caused by the value changing to an undefined value\n 'from a defined one. Decide between using a controlled or\n 'uncontrolled value for the lifetime of the component.\n 'More info: https://reactjs.org/link/controlled-components");
|
75
|
+
}
|
76
|
+
}, [name, value]);
|
77
|
+
|
78
|
+
if (controlled.current === true) {
|
79
|
+
return [value, setState];
|
80
|
+
}
|
81
|
+
|
82
|
+
return [state, setState];
|
83
|
+
}
|
@@ -5,6 +5,7 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
import { useEffect } from 'react';
|
8
|
+
import { getNumberOfHiddenSteps } from '../utils/getNumberOfHiddenSteps';
|
8
9
|
/**
|
9
10
|
* Resets the current step of the create component if it has been closed.
|
10
11
|
* @param {object} useResetCreateComponent - Create component that uses this custom hook
|
@@ -12,6 +13,7 @@ import { useEffect } from 'react';
|
|
12
13
|
* @param {object} useResetCreateComponent.previousState
|
13
14
|
* @param {boolean} useResetCreateComponent.open
|
14
15
|
* @param {Function} useResetCreateComponent.setCurrentStep
|
16
|
+
* @param {object} useResetCreateComponent.stepData
|
15
17
|
* @param {number} useResetCreateComponent.initialStep
|
16
18
|
* @param {number} useResetCreateComponent.totalSteps
|
17
19
|
* @param {string} useResetCreateComponent.componentName
|
@@ -22,13 +24,15 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
22
24
|
previousState = _ref.previousState,
|
23
25
|
open = _ref.open,
|
24
26
|
setCurrentStep = _ref.setCurrentStep,
|
27
|
+
stepData = _ref.stepData,
|
25
28
|
initialStep = _ref.initialStep,
|
26
29
|
totalSteps = _ref.totalSteps,
|
27
30
|
componentName = _ref.componentName;
|
28
31
|
useEffect(function () {
|
29
32
|
if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
|
30
33
|
if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
|
31
|
-
|
34
|
+
var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
|
35
|
+
setCurrentStep(Number(initialStep + numberOfHiddenSteps));
|
32
36
|
} else {
|
33
37
|
// default should be fist includedStep instead of just 1
|
34
38
|
setCurrentStep(firstIncludedStep);
|
@@ -39,5 +43,5 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
39
43
|
console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
|
40
44
|
}
|
41
45
|
}
|
42
|
-
}, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
|
46
|
+
}, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
|
43
47
|
};
|
@@ -36,6 +36,7 @@ var defaults = {
|
|
36
36
|
HTTPErrorOther: true,
|
37
37
|
ImportModal: true,
|
38
38
|
InlineEdit: true,
|
39
|
+
InlineEditV1: true,
|
39
40
|
NotificationsPanel: true,
|
40
41
|
NoDataEmptyState: true,
|
41
42
|
NoTagsEmptyState: true,
|
@@ -53,6 +54,9 @@ var defaults = {
|
|
53
54
|
TearsheetNarrow: true,
|
54
55
|
UnauthorizedEmptyState: true,
|
55
56
|
UserProfileImage: true,
|
57
|
+
WebTerminal: true,
|
58
|
+
WebTerminalContentWrapper: true,
|
59
|
+
WebTerminalProvider: true,
|
56
60
|
// other public components not yet reviewed and released:
|
57
61
|
MultiAddSelect: false,
|
58
62
|
SingleAddSelect: false,
|
@@ -60,16 +64,15 @@ var defaults = {
|
|
60
64
|
Toolbar: false,
|
61
65
|
ToolbarButton: false,
|
62
66
|
ToolbarGroup: false,
|
63
|
-
WebTerminal: false,
|
64
|
-
WebTerminalContentWrapper: false,
|
65
|
-
WebTerminalProvider: false,
|
66
67
|
EditSidePanel: false,
|
67
68
|
CancelableTextEdit: false,
|
68
69
|
DataSpreadsheet: false,
|
69
70
|
Datagrid: false,
|
70
71
|
EditTearsheet: false,
|
71
72
|
EditTearsheetNarrow: false,
|
72
|
-
EditFullPage: false
|
73
|
+
EditFullPage: false,
|
74
|
+
EditUpdateCards: false,
|
75
|
+
InlineEditV2: false
|
73
76
|
/* new component flags here - comment used by generate CLI */
|
74
77
|
|
75
78
|
},
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { motion } from '@carbon/motion';
|
2
|
+
/**
|
3
|
+
* This function turns a cubic-bezier() string to an
|
4
|
+
* array of values that we can use with framer-motion
|
5
|
+
* @param {string} type - The carbon motion type, either 'standard', 'entrance', or 'exit'
|
6
|
+
* @param {string} mode - The carbon motion mode, either 'productive', or 'expressive'
|
7
|
+
*/
|
8
|
+
|
9
|
+
export var getBezierValues = function getBezierValues(type, mode) {
|
10
|
+
var cubicBezier = motion(type, mode);
|
11
|
+
var extractStringFromParens = /\(([^)]+)\)/;
|
12
|
+
var desiredBezierStrings = extractStringFromParens.exec(cubicBezier)[1];
|
13
|
+
var formattedDesiredBezierStrings = desiredBezierStrings.trim().split(',').map(Number);
|
14
|
+
|
15
|
+
if (Array.isArray(formattedDesiredBezierStrings)) {
|
16
|
+
return formattedDesiredBezierStrings;
|
17
|
+
}
|
18
|
+
|
19
|
+
return [];
|
20
|
+
};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
export var getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
|
8
|
+
var numberOfHiddenSteps = 0;
|
9
|
+
stepData.forEach(function (step, stepIndex) {
|
10
|
+
if (stepIndex + 1 > initialStep) {
|
11
|
+
return;
|
12
|
+
}
|
13
|
+
|
14
|
+
if (step.shouldIncludeStep === false) {
|
15
|
+
numberOfHiddenSteps += 1;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
return numberOfHiddenSteps;
|
19
|
+
};
|