@carbon/ibm-products 1.34.1 → 1.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/index-full-carbon.css +46 -13
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -8
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +2 -9
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -7
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +46 -13
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -8
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +46 -13
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -8
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyDownloader.js +8 -18
- package/es/components/APIKeyModal/APIKeyModal.js +58 -140
- package/es/components/APIKeyModal/index.js +1 -0
- package/es/components/AboutModal/AboutModal.js +40 -45
- package/es/components/AboutModal/index.js +1 -0
- package/es/components/ActionBar/ActionBar.js +69 -82
- package/es/components/ActionBar/ActionBarItem.js +19 -20
- package/es/components/ActionBar/ActionBarOverflowItems.js +10 -10
- package/es/components/ActionBar/index.js +1 -0
- package/es/components/ActionSet/ActionSet.js +30 -39
- package/es/components/ActionSet/actions.js +1 -2
- package/es/components/ActionSet/index.js +1 -0
- package/es/components/AddSelect/AddSelect.js +3 -4
- package/es/components/AddSelect/AddSelectBody.js +67 -87
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +3 -4
- package/es/components/AddSelect/AddSelectColumn.js +27 -45
- package/es/components/AddSelect/AddSelectFilter.js +21 -34
- package/es/components/AddSelect/AddSelectList.js +19 -33
- package/es/components/AddSelect/AddSelectMetaPanel.js +3 -5
- package/es/components/AddSelect/AddSelectSidebar.js +14 -21
- package/es/components/AddSelect/AddSelectSort.js +6 -5
- package/es/components/AddSelect/add-select-utils.js +2 -23
- package/es/components/AddSelect/hooks/useItemSort.js +6 -8
- package/es/components/AddSelect/hooks/useParentSelect.js +3 -6
- package/es/components/AddSelect/hooks/usePath.js +6 -20
- package/es/components/AddSelect/index.js +1 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +62 -88
- package/es/components/BreadcrumbWithOverflow/index.js +2 -0
- package/es/components/ButtonMenu/ButtonMenu.js +32 -30
- package/es/components/ButtonMenu/ButtonMenuItem.js +10 -6
- package/es/components/ButtonMenu/index.js +1 -0
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +34 -52
- package/es/components/ButtonSetWithOverflow/index.js +1 -0
- package/es/components/Card/Card.js +53 -71
- package/es/components/Card/CardFooter.js +19 -18
- package/es/components/Card/CardHeader.js +13 -13
- package/es/components/Card/index.js +1 -0
- package/es/components/Cascade/Cascade.js +5 -14
- package/es/components/ComboButton/ComboButton.js +24 -35
- package/es/components/ComboButton/ComboButtonItem/index.js +4 -8
- package/es/components/ComboButton/index.js +1 -0
- package/es/components/CreateFullPage/CreateFullPage.js +64 -85
- package/es/components/CreateFullPage/CreateFullPageStep.js +28 -40
- package/es/components/CreateFullPage/index.js +1 -0
- package/es/components/CreateInfluencer/CreateInfluencer.js +14 -15
- package/es/components/CreateInfluencer/index.js +1 -0
- package/es/components/CreateModal/CreateModal.js +19 -31
- package/es/components/CreateModal/index.js +2 -0
- package/es/components/CreateSidePanel/CreateSidePanel.js +24 -37
- package/es/components/CreateSidePanel/index.js +1 -0
- package/es/components/CreateTearsheet/CreateTearsheet.js +65 -88
- package/es/components/CreateTearsheet/CreateTearsheetDivider.js +4 -4
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +31 -42
- package/es/components/CreateTearsheet/index.js +1 -0
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +46 -66
- package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +41 -57
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +30 -39
- package/es/components/CreateTearsheetNarrow/index.js +1 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +136 -225
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +62 -113
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +25 -56
- package/es/components/DataSpreadsheet/hooks/index.js +1 -0
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +6 -5
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +23 -44
- package/es/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +5 -5
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +18 -30
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +10 -14
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +34 -54
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +10 -10
- package/es/components/DataSpreadsheet/index.js +1 -0
- package/es/components/DataSpreadsheet/utils/checkActiveHeaderCell.js +4 -8
- package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +3 -4
- package/es/components/DataSpreadsheet/utils/createActiveCellFn.js +15 -19
- package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +15 -17
- package/es/components/DataSpreadsheet/utils/generateData.js +4 -13
- package/es/components/DataSpreadsheet/utils/getCellSize.js +1 -6
- package/es/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +1 -0
- package/es/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +7 -9
- package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +20 -34
- package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +20 -30
- package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +5 -4
- package/es/components/DataSpreadsheet/utils/handleEditSubmit.js +13 -20
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +22 -44
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +40 -75
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +6 -8
- package/es/components/DataSpreadsheet/utils/removeCellSelections.js +6 -8
- package/es/components/DataSpreadsheet/utils/selectAllCells.js +7 -11
- package/es/components/Datagrid/Datagrid/Datagrid.js +12 -12
- package/es/components/Datagrid/Datagrid/DatagridBody.js +4 -10
- package/es/components/Datagrid/Datagrid/DatagridContent.js +30 -40
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +7 -10
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -6
- package/es/components/Datagrid/Datagrid/DatagridHead.js +6 -6
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -9
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +5 -8
- package/es/components/Datagrid/Datagrid/DatagridRow.js +4 -12
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -18
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +24 -34
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +2 -7
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +26 -38
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +15 -21
- package/es/components/Datagrid/Datagrid/DraggableElement.js +74 -85
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +3 -5
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +6 -10
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +14 -26
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +54 -71
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +6 -13
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +11 -12
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +56 -106
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +7 -21
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +9 -14
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +2 -3
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +29 -63
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +14 -21
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -11
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +21 -34
- package/es/components/Datagrid/Datagrid/addons/RowSize/index.js +1 -0
- package/es/components/Datagrid/Datagrid/index.js +1 -0
- package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +10 -0
- package/es/components/Datagrid/Datagrid.stories/common.js +2 -11
- package/es/components/Datagrid/common-column-ids.js +1 -0
- package/es/components/Datagrid/useActionsColumn.js +15 -31
- package/es/components/Datagrid/useColumnCenterAlign.js +0 -8
- package/es/components/Datagrid/useColumnOrder.js +1 -0
- package/es/components/Datagrid/useColumnRightAlign.js +0 -8
- package/es/components/Datagrid/useCustomizeColumns.js +5 -13
- package/es/components/Datagrid/useDatagrid.js +0 -7
- package/es/components/Datagrid/useDefaultStringRenderer.js +0 -9
- package/es/components/Datagrid/useDisableSelectRows.js +2 -10
- package/es/components/Datagrid/useExpandedRow.js +5 -15
- package/es/components/Datagrid/useFlexResize.js +0 -7
- package/es/components/Datagrid/useFloatingScroll.js +9 -22
- package/es/components/Datagrid/useInfiniteScroll.js +10 -16
- package/es/components/Datagrid/useInlineEdit.js +1 -9
- package/es/components/Datagrid/useNestedRowExpander.js +0 -6
- package/es/components/Datagrid/useNestedRows.js +1 -7
- package/es/components/Datagrid/useOnRowClick.js +4 -9
- package/es/components/Datagrid/useParentDimensions.js +6 -16
- package/es/components/Datagrid/useResizeTable.js +1 -7
- package/es/components/Datagrid/useRowExpander.js +0 -5
- package/es/components/Datagrid/useRowIsMouseOver.js +6 -15
- package/es/components/Datagrid/useRowRenderer.js +0 -5
- package/es/components/Datagrid/useRowSize.js +8 -20
- package/es/components/Datagrid/useSelectAllToggle.js +11 -22
- package/es/components/Datagrid/useSelectRows.js +11 -27
- package/es/components/Datagrid/useSkeletonRows.js +1 -6
- package/es/components/Datagrid/useSortableColumns.js +2 -23
- package/es/components/Datagrid/useStickyColumn.js +2 -31
- package/es/components/Datagrid/utils/DatagridActions.js +7 -11
- package/es/components/Datagrid/utils/DatagridPagination.js +5 -6
- package/es/components/Datagrid/utils/Wrapper.js +1 -1
- package/es/components/Datagrid/utils/getArgTypes.js +1 -0
- package/es/components/Datagrid/utils/getInlineEditColumns.js +1 -2
- package/es/components/Datagrid/utils/makeData.js +1 -15
- package/es/components/EditFullPage/EditFullPage.js +27 -20
- package/es/components/EditFullPage/index.js +1 -0
- package/es/components/EditSidePanel/EditSidePanel.js +38 -51
- package/es/components/EditSidePanel/index.js +1 -0
- package/es/components/EditTearsheet/EditTearsheet.js +32 -42
- package/es/components/EditTearsheet/EditTearsheetForm.js +13 -19
- package/es/components/EditTearsheet/index.js +1 -0
- package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js +34 -48
- package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +27 -20
- package/es/components/EditTearsheetNarrow/index.js +1 -0
- package/es/components/EditUpdateCards/EditUpdateCards.js +142 -0
- package/es/components/EditUpdateCards/index.js +8 -0
- package/es/components/EmptyStates/EmptyState.js +18 -25
- package/es/components/EmptyStates/EmptyStateContent.js +16 -17
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +20 -24
- package/es/components/EmptyStates/ErrorEmptyState/index.js +1 -0
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +20 -24
- package/es/components/EmptyStates/NoDataEmptyState/index.js +1 -0
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +20 -24
- package/es/components/EmptyStates/NoTagsEmptyState/index.js +1 -0
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +20 -24
- package/es/components/EmptyStates/NotFoundEmptyState/index.js +1 -0
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +20 -24
- package/es/components/EmptyStates/NotificationsEmptyState/index.js +1 -0
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +20 -24
- package/es/components/EmptyStates/UnauthorizedEmptyState/index.js +1 -0
- package/es/components/EmptyStates/assets/ErrorIllustration.js +7 -6
- package/es/components/EmptyStates/assets/NoDataIllustration.js +7 -6
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +7 -6
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +7 -6
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +7 -6
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +7 -6
- package/es/components/EmptyStates/index.js +1 -0
- package/es/components/ExampleComponent/ExampleComponent.js +36 -44
- package/es/components/ExampleComponent/index.js +1 -0
- package/es/components/ExportModal/ExportModal.js +41 -80
- package/es/components/ExportModal/index.js +1 -0
- package/es/components/ExpressiveCard/ExpressiveCard.js +3 -20
- package/es/components/ExpressiveCard/index.js +1 -0
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +16 -18
- package/es/components/HTTPErrors/HTTPError403/index.js +1 -0
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +16 -18
- package/es/components/HTTPErrors/HTTPError404/index.js +1 -0
- package/es/components/HTTPErrors/HTTPErrorContent.js +15 -18
- package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +16 -18
- package/es/components/HTTPErrors/HTTPErrorOther/index.js +1 -0
- package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js +6 -3
- package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js +6 -3
- package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js +6 -3
- package/es/components/HTTPErrors/index.js +1 -0
- package/es/components/ImportModal/ImportModal.js +40 -92
- package/es/components/ImportModal/index.js +1 -0
- package/es/components/InlineEdit/InlineEdit.js +68 -98
- package/es/components/InlineEdit/index.js +1 -0
- package/es/components/InlineEditV2/InlineEditV2.js +29 -57
- package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
- package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +6 -9
- package/es/components/ModifiedTabs/ModifiedTabs.js +14 -19
- package/es/components/MultiAddSelect/MultiAddSelect.js +0 -23
- package/es/components/NotificationsPanel/NotificationsPanel.js +85 -126
- package/es/components/NotificationsPanel/NotificationsPanel_data.js +1 -0
- package/es/components/NotificationsPanel/index.js +1 -0
- package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +1 -2
- package/es/components/NotificationsPanel/utils.js +13 -19
- package/es/components/OptionsTile/OptionsTile.js +52 -80
- package/es/components/OptionsTile/index.js +1 -0
- package/es/components/PageHeader/PageHeader.js +119 -186
- package/es/components/PageHeader/PageHeaderDemo.data.js +0 -1
- package/es/components/PageHeader/PageHeaderTitle.js +18 -23
- package/es/components/PageHeader/PageHeaderUtils.js +18 -45
- package/es/components/PageHeader/index.js +1 -0
- package/es/components/ProductiveCard/ProductiveCard.js +7 -23
- package/es/components/ProductiveCard/index.js +1 -0
- package/es/components/RemoveModal/RemoveModal.js +25 -45
- package/es/components/RemoveModal/index.js +1 -0
- package/es/components/Saving/Saving.js +15 -30
- package/es/components/Saving/index.js +1 -0
- package/es/components/SidePanel/SidePanel.js +103 -150
- package/es/components/SidePanel/constants.js +1 -0
- package/es/components/SidePanel/index.js +1 -0
- package/es/components/SingleAddSelect/SingleAddSelect.js +0 -14
- package/es/components/StatusIcon/StatusIcon.js +5 -12
- package/es/components/StatusIcon/index.js +1 -0
- package/es/components/TagSet/TagSet.js +59 -93
- package/es/components/TagSet/TagSetModal.js +19 -30
- package/es/components/TagSet/TagSetOverflow.js +16 -25
- package/es/components/TagSet/index.js +1 -0
- package/es/components/Tearsheet/Tearsheet.js +26 -33
- package/es/components/Tearsheet/TearsheetNarrow.js +22 -25
- package/es/components/Tearsheet/TearsheetShell.js +80 -91
- package/es/components/Tearsheet/index.js +1 -0
- package/es/components/Toolbar/Toolbar.js +13 -27
- package/es/components/Toolbar/ToolbarButton.js +5 -9
- package/es/components/Toolbar/ToolbarGroup.js +4 -6
- package/es/components/Toolbar/index.js +1 -0
- package/es/components/UserProfileImage/UserProfileImage.js +26 -40
- package/es/components/UserProfileImage/index.js +2 -0
- package/es/components/WebTerminal/WebTerminal.js +41 -51
- package/es/components/WebTerminal/WebTerminalContentWrapper.js +14 -11
- package/es/components/WebTerminal/hooks/index.js +8 -7
- package/es/components/WebTerminal/index.js +1 -0
- package/es/components/WebTerminal/preview-components/Navigation.js +2 -4
- package/es/components/WebTerminal/preview-components/documentationLinks.js +1 -0
- package/es/components/_Canary/Canary.js +13 -13
- package/es/components/_Canary/index.js +1 -0
- package/es/components/index.js +2 -0
- package/es/global/js/hooks/index.js +1 -0
- package/es/global/js/hooks/useActiveElement.js +4 -6
- package/es/global/js/hooks/useClickOutside.js +1 -1
- package/es/global/js/hooks/useCreateComponentFocus.js +6 -5
- package/es/global/js/hooks/useCreateComponentStepChange.js +23 -54
- package/es/global/js/hooks/usePreviousValue.js +2 -1
- package/es/global/js/hooks/useResetCreateComponent.js +10 -9
- package/es/global/js/hooks/useRetrieveStepData.js +7 -10
- package/es/global/js/hooks/useValidCreateStepCount.js +2 -1
- package/es/global/js/hooks/useWindowResize.js +8 -16
- package/es/global/js/hooks/useWindowScroll.js +4 -14
- package/es/global/js/package-settings.js +6 -11
- package/es/global/js/utils/ClickListener.js +5 -10
- package/es/global/js/utils/DisplayBox.js +3 -2
- package/es/global/js/utils/Wrap.js +14 -17
- package/es/global/js/utils/deepCloneObject.js +5 -8
- package/es/global/js/utils/devtools.js +1 -4
- package/es/global/js/utils/getBezierValues.js +1 -2
- package/es/global/js/utils/getFocusableElements.js +1 -1
- package/es/global/js/utils/getScrollbarWidth.js +1 -0
- package/es/global/js/utils/keyboardNavigation.js +7 -5
- package/es/global/js/utils/lastIndexInArray.js +0 -2
- package/es/global/js/utils/motionConstants.js +2 -3
- package/es/global/js/utils/pconsole.js +1 -3
- package/es/global/js/utils/props-helper.js +19 -35
- package/es/global/js/utils/rangeWithCallback.js +1 -0
- package/es/global/js/utils/scrollableAncestor.js +5 -8
- package/es/global/js/utils/story-helper.js +9 -8
- package/es/global/js/utils/test-helper.js +25 -42
- package/es/global/js/utils/unwrap-if-fragment.js +8 -16
- package/es/global/js/utils/uuidv4.js +1 -2
- package/es/global/js/utils/uuidv4.spec.js +1 -1
- package/es/global/js/utils/wait.js +1 -1
- package/es/global/js/utils/wrapFocus.js +8 -14
- package/es/index.js +1 -0
- package/es/settings.js +24 -18
- package/lib/components/APIKeyModal/APIKeyDownloader.js +8 -31
- package/lib/components/APIKeyModal/APIKeyModal.js +57 -161
- package/lib/components/APIKeyModal/index.js +0 -1
- package/lib/components/AboutModal/AboutModal.js +33 -60
- package/lib/components/AboutModal/index.js +0 -1
- package/lib/components/ActionBar/ActionBar.js +62 -97
- package/lib/components/ActionBar/ActionBarItem.js +12 -26
- package/lib/components/ActionBar/ActionBarOverflowItems.js +8 -20
- package/lib/components/ActionBar/index.js +0 -2
- package/lib/components/ActionSet/ActionSet.js +26 -49
- package/lib/components/ActionSet/actions.js +1 -5
- package/lib/components/ActionSet/index.js +0 -1
- package/lib/components/AddSelect/AddSelect.js +2 -16
- package/lib/components/AddSelect/AddSelectBody.js +66 -117
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +3 -14
- package/lib/components/AddSelect/AddSelectColumn.js +26 -67
- package/lib/components/AddSelect/AddSelectFilter.js +20 -48
- package/lib/components/AddSelect/AddSelectList.js +19 -45
- package/lib/components/AddSelect/AddSelectMetaPanel.js +3 -17
- package/lib/components/AddSelect/AddSelectSidebar.js +13 -31
- package/lib/components/AddSelect/AddSelectSort.js +6 -15
- package/lib/components/AddSelect/add-select-utils.js +2 -33
- package/lib/components/AddSelect/hooks/useItemSort.js +6 -13
- package/lib/components/AddSelect/hooks/useParentSelect.js +3 -9
- package/lib/components/AddSelect/hooks/usePath.js +6 -21
- package/lib/components/AddSelect/index.js +0 -1
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +55 -102
- package/lib/components/BreadcrumbWithOverflow/index.js +0 -1
- package/lib/components/ButtonMenu/ButtonMenu.js +25 -35
- package/lib/components/ButtonMenu/ButtonMenuItem.js +9 -10
- package/lib/components/ButtonMenu/index.js +0 -2
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +33 -71
- package/lib/components/ButtonSetWithOverflow/index.js +0 -1
- package/lib/components/Card/Card.js +52 -84
- package/lib/components/Card/CardFooter.js +19 -28
- package/lib/components/Card/CardHeader.js +13 -23
- package/lib/components/Card/index.js +0 -3
- package/lib/components/Cascade/Cascade.js +4 -30
- package/lib/components/Cascade/index.js +0 -1
- package/lib/components/ComboButton/ComboButton.js +23 -49
- package/lib/components/ComboButton/ComboButtonItem/index.js +2 -10
- package/lib/components/ComboButton/index.js +0 -2
- package/lib/components/CreateFullPage/CreateFullPage.js +59 -103
- package/lib/components/CreateFullPage/CreateFullPageStep.js +27 -56
- package/lib/components/CreateFullPage/index.js +0 -2
- package/lib/components/CreateInfluencer/CreateInfluencer.js +13 -24
- package/lib/components/CreateInfluencer/index.js +0 -1
- package/lib/components/CreateModal/CreateModal.js +16 -39
- package/lib/components/CreateModal/index.js +0 -1
- package/lib/components/CreateSidePanel/CreateSidePanel.js +17 -46
- package/lib/components/CreateSidePanel/index.js +0 -1
- package/lib/components/CreateTearsheet/CreateTearsheet.js +64 -107
- package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +3 -14
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +30 -58
- package/lib/components/CreateTearsheet/index.js +0 -3
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +45 -79
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +41 -71
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +25 -47
- package/lib/components/CreateTearsheetNarrow/index.js +0 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +131 -256
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +61 -135
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +24 -75
- package/lib/components/DataSpreadsheet/hooks/index.js +0 -7
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +4 -7
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +23 -48
- package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +5 -9
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +18 -37
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +7 -18
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +33 -61
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +8 -14
- package/lib/components/DataSpreadsheet/index.js +0 -1
- package/lib/components/DataSpreadsheet/utils/checkActiveHeaderCell.js +1 -9
- package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +3 -7
- package/lib/components/DataSpreadsheet/utils/createActiveCellFn.js +15 -23
- package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +15 -22
- package/lib/components/DataSpreadsheet/utils/generateData.js +4 -16
- package/lib/components/DataSpreadsheet/utils/getCellSize.js +1 -8
- package/lib/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +1 -2
- package/lib/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +7 -12
- package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +19 -38
- package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +20 -33
- package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +5 -8
- package/lib/components/DataSpreadsheet/utils/handleEditSubmit.js +10 -24
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +22 -50
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +39 -84
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +6 -12
- package/lib/components/DataSpreadsheet/utils/removeCellSelections.js +4 -10
- package/lib/components/DataSpreadsheet/utils/selectAllCells.js +6 -16
- package/lib/components/Datagrid/Datagrid/Datagrid.js +11 -26
- package/lib/components/Datagrid/Datagrid/DatagridBody.js +5 -16
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +31 -64
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +8 -16
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -10
- package/lib/components/Datagrid/Datagrid/DatagridHead.js +6 -10
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +3 -17
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +4 -13
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +4 -26
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -26
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +23 -48
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +2 -14
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +26 -51
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +15 -31
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +75 -98
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +3 -14
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -21
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +14 -41
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +54 -84
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +5 -21
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js +1 -5
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +0 -3
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +11 -20
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +0 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +55 -125
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +0 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +6 -32
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +1 -3
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +0 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +8 -18
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +2 -5
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +28 -70
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +14 -27
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +5 -26
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +21 -44
- package/lib/components/Datagrid/Datagrid/addons/RowSize/index.js +0 -2
- package/lib/components/Datagrid/Datagrid/index.js +0 -1
- package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +10 -0
- package/lib/components/Datagrid/Datagrid.stories/common.js +2 -17
- package/lib/components/Datagrid/Datagrid.stories/index.js +0 -6
- package/lib/components/Datagrid/common-column-ids.js +1 -1
- package/lib/components/Datagrid/index.js +0 -19
- package/lib/components/Datagrid/useActionsColumn.js +15 -37
- package/lib/components/Datagrid/useColumnCenterAlign.js +0 -14
- package/lib/components/Datagrid/useColumnOrder.js +1 -4
- package/lib/components/Datagrid/useColumnRightAlign.js +0 -14
- package/lib/components/Datagrid/useCustomizeColumns.js +4 -20
- package/lib/components/Datagrid/useDatagrid.js +0 -20
- package/lib/components/Datagrid/useDefaultStringRenderer.js +0 -15
- package/lib/components/Datagrid/useDisableSelectRows.js +2 -11
- package/lib/components/Datagrid/useExpandedRow.js +5 -20
- package/lib/components/Datagrid/useFlexResize.js +0 -9
- package/lib/components/Datagrid/useFloatingScroll.js +10 -27
- package/lib/components/Datagrid/useInfiniteScroll.js +11 -21
- package/lib/components/Datagrid/useInlineEdit.js +2 -15
- package/lib/components/Datagrid/useNestedRowExpander.js +1 -13
- package/lib/components/Datagrid/useNestedRows.js +2 -11
- package/lib/components/Datagrid/useOnRowClick.js +4 -10
- package/lib/components/Datagrid/useParentDimensions.js +7 -18
- package/lib/components/Datagrid/useResizeTable.js +2 -8
- package/lib/components/Datagrid/useRowExpander.js +1 -8
- package/lib/components/Datagrid/useRowIsMouseOver.js +5 -19
- package/lib/components/Datagrid/useRowRenderer.js +1 -7
- package/lib/components/Datagrid/useRowSize.js +7 -24
- package/lib/components/Datagrid/useSelectAllToggle.js +12 -29
- package/lib/components/Datagrid/useSelectRows.js +11 -39
- package/lib/components/Datagrid/useSkeletonRows.js +1 -8
- package/lib/components/Datagrid/useSortableColumns.js +2 -29
- package/lib/components/Datagrid/useStickyColumn.js +1 -37
- package/lib/components/Datagrid/utils/DatagridActions.js +7 -21
- package/lib/components/Datagrid/utils/DatagridPagination.js +5 -11
- package/lib/components/Datagrid/utils/Wrapper.js +1 -5
- package/lib/components/Datagrid/utils/getArgTypes.js +1 -1
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +1 -6
- package/lib/components/Datagrid/utils/makeData.js +0 -24
- package/lib/components/EditFullPage/EditFullPage.js +22 -24
- package/lib/components/EditFullPage/index.js +0 -1
- package/lib/components/EditSidePanel/EditSidePanel.js +31 -59
- package/lib/components/EditSidePanel/index.js +0 -1
- package/lib/components/EditTearsheet/EditTearsheet.js +31 -59
- package/lib/components/EditTearsheet/EditTearsheetForm.js +12 -33
- package/lib/components/EditTearsheet/index.js +0 -2
- package/lib/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js +34 -61
- package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +22 -24
- package/lib/components/EditTearsheetNarrow/index.js +0 -1
- package/lib/components/EditUpdateCards/EditUpdateCards.js +140 -0
- package/lib/components/EditUpdateCards/index.js +12 -0
- package/lib/components/EmptyStates/EmptyState.js +13 -38
- package/lib/components/EmptyStates/EmptyStateContent.js +10 -25
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +15 -37
- package/lib/components/EmptyStates/ErrorEmptyState/index.js +0 -1
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +15 -37
- package/lib/components/EmptyStates/NoDataEmptyState/index.js +0 -1
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +15 -37
- package/lib/components/EmptyStates/NoTagsEmptyState/index.js +0 -1
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +15 -37
- package/lib/components/EmptyStates/NotFoundEmptyState/index.js +0 -1
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +15 -37
- package/lib/components/EmptyStates/NotificationsEmptyState/index.js +0 -1
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +15 -37
- package/lib/components/EmptyStates/UnauthorizedEmptyState/index.js +0 -1
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +2 -13
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +2 -13
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +2 -13
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +2 -13
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +2 -13
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +2 -13
- package/lib/components/EmptyStates/index.js +0 -7
- package/lib/components/ExampleComponent/ExampleComponent.js +29 -51
- package/lib/components/ExampleComponent/index.js +0 -1
- package/lib/components/ExportModal/ExportModal.js +40 -95
- package/lib/components/ExportModal/index.js +0 -1
- package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -32
- package/lib/components/ExpressiveCard/index.js +0 -1
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +11 -27
- package/lib/components/HTTPErrors/HTTPError403/index.js +0 -1
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +11 -27
- package/lib/components/HTTPErrors/HTTPError404/index.js +0 -1
- package/lib/components/HTTPErrors/HTTPErrorContent.js +9 -23
- package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +11 -27
- package/lib/components/HTTPErrors/HTTPErrorOther/index.js +0 -1
- package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js +6 -7
- package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js +6 -7
- package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js +6 -7
- package/lib/components/HTTPErrors/index.js +0 -3
- package/lib/components/ImportModal/ImportModal.js +39 -110
- package/lib/components/ImportModal/index.js +0 -1
- package/lib/components/InlineEdit/InlineEdit.js +61 -111
- package/lib/components/InlineEdit/index.js +0 -1
- package/lib/components/InlineEditV2/InlineEditV2.js +29 -74
- package/lib/components/InlineEditV2/index.js +0 -1
- package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -7
- package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +6 -15
- package/lib/components/ModifiedTabs/ModifiedTabs.js +14 -32
- package/lib/components/ModifiedTabs/index.js +0 -1
- package/lib/components/MultiAddSelect/MultiAddSelect.js +0 -34
- package/lib/components/MultiAddSelect/index.js +0 -1
- package/lib/components/NotificationsPanel/NotificationsPanel.js +78 -143
- package/lib/components/NotificationsPanel/NotificationsPanel_data.js +1 -4
- package/lib/components/NotificationsPanel/index.js +0 -1
- package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +1 -4
- package/lib/components/NotificationsPanel/utils.js +13 -21
- package/lib/components/OptionsTile/OptionsTile.js +45 -96
- package/lib/components/OptionsTile/index.js +0 -1
- package/lib/components/PageHeader/PageHeader.js +116 -212
- package/lib/components/PageHeader/PageHeaderDemo.data.js +0 -3
- package/lib/components/PageHeader/PageHeaderTitle.js +17 -35
- package/lib/components/PageHeader/PageHeaderUtils.js +17 -58
- package/lib/components/PageHeader/index.js +0 -1
- package/lib/components/ProductiveCard/ProductiveCard.js +6 -36
- package/lib/components/ProductiveCard/index.js +0 -1
- package/lib/components/RemoveModal/RemoveModal.js +24 -61
- package/lib/components/RemoveModal/index.js +0 -1
- package/lib/components/Saving/Saving.js +14 -44
- package/lib/components/Saving/index.js +0 -1
- package/lib/components/SidePanel/SidePanel.js +98 -173
- package/lib/components/SidePanel/constants.js +1 -1
- package/lib/components/SidePanel/index.js +0 -1
- package/lib/components/SidePanel/motion/variants.js +0 -2
- package/lib/components/SingleAddSelect/SingleAddSelect.js +0 -26
- package/lib/components/SingleAddSelect/index.js +0 -1
- package/lib/components/StatusIcon/StatusIcon.js +5 -23
- package/lib/components/StatusIcon/index.js +0 -1
- package/lib/components/TagSet/TagSet.js +58 -113
- package/lib/components/TagSet/TagSetModal.js +18 -46
- package/lib/components/TagSet/TagSetOverflow.js +15 -43
- package/lib/components/TagSet/index.js +0 -1
- package/lib/components/Tearsheet/Tearsheet.js +20 -42
- package/lib/components/Tearsheet/TearsheetNarrow.js +16 -34
- package/lib/components/Tearsheet/TearsheetShell.js +73 -114
- package/lib/components/Tearsheet/index.js +0 -2
- package/lib/components/Toolbar/Toolbar.js +12 -40
- package/lib/components/Toolbar/ToolbarButton.js +4 -22
- package/lib/components/Toolbar/ToolbarGroup.js +2 -16
- package/lib/components/Toolbar/index.js +0 -3
- package/lib/components/UserProfileImage/UserProfileImage.js +19 -48
- package/lib/components/UserProfileImage/index.js +0 -1
- package/lib/components/WebTerminal/WebTerminal.js +34 -67
- package/lib/components/WebTerminal/WebTerminalContentWrapper.js +9 -20
- package/lib/components/WebTerminal/hooks/index.js +8 -19
- package/lib/components/WebTerminal/index.js +0 -3
- package/lib/components/WebTerminal/preview-components/Navigation.js +2 -9
- package/lib/components/WebTerminal/preview-components/documentationLinks.js +1 -0
- package/lib/components/WebTerminal/preview-components/index.js +0 -2
- package/lib/components/_Canary/Canary.js +4 -17
- package/lib/components/_Canary/index.js +0 -1
- package/lib/components/index.js +7 -38
- package/lib/global/js/hooks/index.js +0 -10
- package/lib/global/js/hooks/useActiveElement.js +4 -10
- package/lib/global/js/hooks/useClickOutside.js +1 -4
- package/lib/global/js/hooks/useCreateComponentFocus.js +4 -8
- package/lib/global/js/hooks/useCreateComponentStepChange.js +23 -59
- package/lib/global/js/hooks/usePreviousValue.js +0 -3
- package/lib/global/js/hooks/useResetCreateComponent.js +8 -11
- package/lib/global/js/hooks/useRetrieveStepData.js +5 -12
- package/lib/global/js/hooks/useValidCreateStepCount.js +0 -3
- package/lib/global/js/hooks/useWindowResize.js +8 -21
- package/lib/global/js/hooks/useWindowScroll.js +4 -20
- package/lib/global/js/package-settings.js +5 -14
- package/lib/global/js/utils/ClickListener.js +3 -16
- package/lib/global/js/utils/DisplayBox.js +3 -9
- package/lib/global/js/utils/Wrap.js +8 -22
- package/lib/global/js/utils/deepCloneObject.js +5 -11
- package/lib/global/js/utils/devtools.js +1 -6
- package/lib/global/js/utils/getBezierValues.js +1 -5
- package/lib/global/js/utils/getFocusableElements.js +1 -4
- package/lib/global/js/utils/getScrollbarWidth.js +1 -2
- package/lib/global/js/utils/keyboardNavigation.js +7 -6
- package/lib/global/js/utils/lastIndexInArray.js +0 -4
- package/lib/global/js/utils/motionConstants.js +1 -5
- package/lib/global/js/utils/pconsole.js +1 -7
- package/lib/global/js/utils/props-helper.js +15 -57
- package/lib/global/js/utils/rangeWithCallback.js +1 -2
- package/lib/global/js/utils/scrollableAncestor.js +5 -12
- package/lib/global/js/utils/story-helper.js +7 -21
- package/lib/global/js/utils/test-helper.js +25 -69
- package/lib/global/js/utils/unwrap-if-fragment.js +7 -19
- package/lib/global/js/utils/uuidv4.js +1 -3
- package/lib/global/js/utils/uuidv4.spec.js +1 -3
- package/lib/global/js/utils/wait.js +1 -2
- package/lib/global/js/utils/wrapFocus.js +6 -16
- package/lib/index.js +0 -3
- package/lib/settings.js +24 -27
- package/package.json +8 -8
- package/scss/components/EditUpdateCards/_edit-update-cards.scss +87 -0
- package/scss/components/EditUpdateCards/_index.scss +8 -0
- package/scss/components/EditUpdateCards/_storybook-styles.scss +56 -0
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +11 -8
- package/scss/components/InlineEditV2/_storybook-styles.scss +3 -0
- package/scss/components/SidePanel/_side-panel.scss +2 -3
- package/scss/components/_index.scss +1 -1
|
@@ -2,15 +2,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
export var useItemSort = function useItemSort() {
|
|
4
4
|
var _useState = useState(''),
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
6
|
+
sortDirection = _useState2[0],
|
|
7
|
+
setSortDirection = _useState2[1];
|
|
9
8
|
var _useState3 = useState(''),
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
10
|
+
sortAttribute = _useState4[0],
|
|
11
|
+
setSortAttribute = _useState4[1];
|
|
14
12
|
return {
|
|
15
13
|
sortDirection: sortDirection,
|
|
16
14
|
setSortDirection: setSortDirection,
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
|
|
4
3
|
var useParentSelect = function useParentSelect() {
|
|
5
4
|
var _useState = useState(null),
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
6
|
+
parentSelected = _useState2[0],
|
|
7
|
+
setParentSelected = _useState2[1];
|
|
10
8
|
return {
|
|
11
9
|
parentSelected: parentSelected,
|
|
12
10
|
setParentSelected: setParentSelected
|
|
13
11
|
};
|
|
14
12
|
};
|
|
15
|
-
|
|
16
13
|
export default useParentSelect;
|
|
@@ -1,66 +1,52 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
|
-
|
|
5
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
-
|
|
7
5
|
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; }
|
|
8
|
-
|
|
9
6
|
import { useState } from 'react';
|
|
10
|
-
|
|
11
7
|
var usePath = function usePath() {
|
|
12
8
|
var itemsLabel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
13
|
-
|
|
14
9
|
var _useState = useState([{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
id: 'base_of_path',
|
|
11
|
+
title: itemsLabel
|
|
12
|
+
}]),
|
|
13
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
14
|
+
path = _useState2[0],
|
|
15
|
+
setPath = _useState2[1];
|
|
22
16
|
var handler = function handler(id, title, parentId) {
|
|
23
17
|
if (path.find(function (entry) {
|
|
24
18
|
return entry.id === id;
|
|
25
19
|
})) {
|
|
26
20
|
return;
|
|
27
21
|
}
|
|
28
|
-
|
|
29
22
|
var pathEntry = _objectSpread({
|
|
30
23
|
id: id,
|
|
31
24
|
title: title
|
|
32
25
|
}, parentId && {
|
|
33
26
|
parentId: parentId
|
|
34
27
|
});
|
|
35
|
-
|
|
36
28
|
if (path.find(function (entry) {
|
|
37
29
|
return entry.parentId === parentId;
|
|
38
30
|
})) {
|
|
39
31
|
var parentIdx = path.findIndex(function (entry) {
|
|
40
32
|
return entry.id === parentId;
|
|
41
33
|
});
|
|
42
|
-
|
|
43
34
|
var pathCopy = _toConsumableArray(path);
|
|
44
|
-
|
|
45
35
|
pathCopy.length = parentIdx + 1;
|
|
46
36
|
setPath([].concat(_toConsumableArray(pathCopy), [pathEntry]));
|
|
47
37
|
} else {
|
|
48
38
|
setPath([].concat(_toConsumableArray(path), [pathEntry]));
|
|
49
39
|
}
|
|
50
40
|
};
|
|
51
|
-
|
|
52
41
|
var pathClickHandler = function pathClickHandler(idx) {
|
|
53
42
|
var pathCopy = _toConsumableArray(path);
|
|
54
|
-
|
|
55
43
|
pathCopy.length = idx + 1;
|
|
56
44
|
setPath(_toConsumableArray(pathCopy));
|
|
57
45
|
};
|
|
58
|
-
|
|
59
46
|
return {
|
|
60
47
|
path: path,
|
|
61
48
|
setPath: handler,
|
|
62
49
|
pathOnclick: pathClickHandler
|
|
63
50
|
};
|
|
64
51
|
};
|
|
65
|
-
|
|
66
52
|
export default usePath;
|
|
@@ -3,73 +3,69 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
5
5
|
var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel"],
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
_excluded2 = ["label", "key", "title", "id"],
|
|
7
|
+
_excluded3 = ["className", "key", "label", "title"];
|
|
9
8
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
10
|
-
|
|
11
9
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
12
|
-
|
|
13
10
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
14
|
-
|
|
15
11
|
//
|
|
16
12
|
// Copyright IBM Corp. 2020, 2021
|
|
17
13
|
//
|
|
18
14
|
// This source code is licensed under the Apache-2.0 license found in the
|
|
19
15
|
// LICENSE file in the root directory of this source tree.
|
|
20
16
|
//
|
|
17
|
+
|
|
21
18
|
// Import portions of React that are needed.
|
|
22
|
-
import React, { useState, useEffect, useRef } from 'react';
|
|
19
|
+
import React, { useState, useEffect, useRef } from 'react';
|
|
23
20
|
|
|
21
|
+
// Other standard imports.
|
|
24
22
|
import PropTypes from 'prop-types';
|
|
25
23
|
import cx from 'classnames';
|
|
26
24
|
import { Link, TooltipIcon } from 'carbon-components-react';
|
|
27
25
|
import { pkg, carbon } from '../../settings';
|
|
28
26
|
import { useResizeDetector } from 'react-resize-detector';
|
|
29
|
-
import { ArrowLeft16 } from '@carbon/icons-react';
|
|
27
|
+
import { ArrowLeft16 } from '@carbon/icons-react';
|
|
30
28
|
|
|
29
|
+
// Carbon and package components we use.
|
|
31
30
|
import { Breadcrumb, BreadcrumbItem, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
|
|
32
31
|
import { OverflowMenuHorizontal32 } from '@carbon/icons-react';
|
|
33
32
|
import uuidv4 from '../../global/js/utils/uuidv4';
|
|
34
|
-
import '../../global/js/utils/props-helper';
|
|
33
|
+
import '../../global/js/utils/props-helper';
|
|
35
34
|
|
|
35
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
36
36
|
var blockClass = "".concat(pkg.prefix, "--breadcrumb-with-overflow");
|
|
37
|
-
var componentName = 'BreadcrumbWithOverflow';
|
|
37
|
+
var componentName = 'BreadcrumbWithOverflow';
|
|
38
|
+
|
|
39
|
+
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
|
38
40
|
|
|
39
41
|
/**
|
|
40
42
|
* The BreadcrumbWithOverflow is used internally by the PageHeader to wrap BreadcrumbItems.
|
|
41
43
|
*/
|
|
42
|
-
|
|
43
44
|
export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
44
45
|
var _backItem, _backItem2, _backItem3;
|
|
45
|
-
|
|
46
46
|
var breadcrumbs = _ref.breadcrumbs,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
className = _ref.className,
|
|
48
|
+
maxVisible = _ref.maxVisible,
|
|
49
|
+
noTrailingSlash = _ref.noTrailingSlash,
|
|
50
|
+
overflowAriaLabel = _ref.overflowAriaLabel,
|
|
51
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
53
52
|
var _useState = useState(3),
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
54
|
+
displayCount = _useState2[0],
|
|
55
|
+
setDisplayCount = _useState2[1];
|
|
58
56
|
var _useState3 = useState([]),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
57
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
58
|
+
displayedBreadcrumbItems = _useState4[0],
|
|
59
|
+
setDisplayedBreadcrumbItems = _useState4[1];
|
|
63
60
|
var breadcrumbItemWithOverflow = useRef(null);
|
|
64
61
|
var sizingContainerRef = useRef(null);
|
|
65
62
|
var internalId = useRef(uuidv4());
|
|
66
|
-
|
|
67
63
|
var _useState5 = useState([]),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
64
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
65
|
+
hiddenSizingItems = _useState6[0],
|
|
66
|
+
setHiddenSizingItems = _useState6[1];
|
|
72
67
|
|
|
68
|
+
// eslint-disable-next-line react/prop-types
|
|
73
69
|
var BreadcrumbOverflowMenu = function BreadcrumbOverflowMenu(_ref2) {
|
|
74
70
|
var overflowItems = _ref2.overflowItems;
|
|
75
71
|
return /*#__PURE__*/React.createElement(BreadcrumbItem, {
|
|
@@ -81,7 +77,8 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
81
77
|
renderIcon: OverflowMenuHorizontal32,
|
|
82
78
|
className: "".concat(blockClass, "__overflow-menu"),
|
|
83
79
|
menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")
|
|
84
|
-
},
|
|
80
|
+
},
|
|
81
|
+
// eslint-disable-next-line react/prop-types
|
|
85
82
|
overflowItems.map(function (item, index) {
|
|
86
83
|
return /*#__PURE__*/React.createElement(OverflowMenuItem, {
|
|
87
84
|
key: "breadcrumb-overflow-menu-item-".concat(internalId.current, "-").concat(index),
|
|
@@ -90,9 +87,9 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
90
87
|
itemText: item.props.children
|
|
91
88
|
});
|
|
92
89
|
})));
|
|
93
|
-
};
|
|
94
|
-
|
|
90
|
+
};
|
|
95
91
|
|
|
92
|
+
// create hidden sizing items
|
|
96
93
|
useEffect(function () {
|
|
97
94
|
// Hidden action bar and items used to calculate sizes
|
|
98
95
|
setHiddenSizingItems( /*#__PURE__*/React.createElement("div", {
|
|
@@ -106,11 +103,10 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
106
103
|
renderIcon: OverflowMenuHorizontal32
|
|
107
104
|
})), breadcrumbs.map(function (_ref3) {
|
|
108
105
|
var label = _ref3.label,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
106
|
+
key = _ref3.key,
|
|
107
|
+
title = _ref3.title,
|
|
108
|
+
id = _ref3.id,
|
|
109
|
+
rest = _objectWithoutProperties(_ref3, _excluded2);
|
|
114
110
|
return /*#__PURE__*/React.createElement(BreadcrumbItem, _extends({
|
|
115
111
|
key: key
|
|
116
112
|
}, rest, {
|
|
@@ -122,50 +118,48 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
122
118
|
}, [breadcrumbs, overflowAriaLabel]);
|
|
123
119
|
useEffect(function () {
|
|
124
120
|
// updates displayedBreadcrumbItems and overflowBreadcrumbItems based on displayCount and breadcrumbs
|
|
125
|
-
|
|
126
121
|
/* istanbul ignore if */
|
|
127
122
|
if (breadcrumbs.length === 0) {
|
|
128
123
|
setDisplayedBreadcrumbItems([]);
|
|
129
124
|
return;
|
|
130
125
|
}
|
|
131
|
-
|
|
132
126
|
var newDisplayedBreadcrumbItems = breadcrumbs.map(function (_ref4, index) {
|
|
133
127
|
var className = _ref4.className,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
128
|
+
key = _ref4.key,
|
|
129
|
+
label = _ref4.label,
|
|
130
|
+
title = _ref4.title,
|
|
131
|
+
rest = _objectWithoutProperties(_ref4, _excluded3);
|
|
139
132
|
return /*#__PURE__*/React.createElement(BreadcrumbItem, _extends({
|
|
140
133
|
key: key,
|
|
141
134
|
className: index > 0 || displayCount > 1 ? cx([className, "".concat(blockClass, "__displayed-breadcrumb")]) : className,
|
|
142
135
|
title: index + 1 === breadcrumbs.length ? title : null
|
|
143
136
|
}, rest), label);
|
|
144
|
-
});
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
// The breadcrumb has the form [first item] [overflow] [items 2...(n-1)] [last item].
|
|
145
140
|
// The overflow is only shown if there isn't space to display all the items, and in that case:
|
|
146
141
|
// * the last item is always displayed (even if there isn't really space for it -- it can contract to an ellipsis);
|
|
147
142
|
// * the first item is the next to be displayed, if there's space once the last item and overflow are shown;
|
|
148
143
|
// * any remaining space after the first item, last item and overflow are shown is used to show items (n-1), (n-2), (n-3), ..., until the space is used up ;
|
|
149
144
|
// Note that displayCount (min 1) has been computed based on the available space and the above sequence.
|
|
150
|
-
|
|
151
145
|
var overflowPosition = displayCount > 1 ? 1 : 0;
|
|
152
|
-
var newOverflowBreadcrumbItems = newDisplayedBreadcrumbItems.splice(overflowPosition, breadcrumbs.length - displayCount);
|
|
146
|
+
var newOverflowBreadcrumbItems = newDisplayedBreadcrumbItems.splice(overflowPosition, breadcrumbs.length - displayCount);
|
|
153
147
|
|
|
148
|
+
// if needed add overflow menu
|
|
154
149
|
if (newOverflowBreadcrumbItems.length) {
|
|
155
150
|
newDisplayedBreadcrumbItems.splice(overflowPosition, 0, /*#__PURE__*/React.createElement(BreadcrumbOverflowMenu, {
|
|
156
151
|
overflowItems: newOverflowBreadcrumbItems,
|
|
157
152
|
key: "displayed-breadcrumb-".concat(internalId, "-overflow")
|
|
158
153
|
}));
|
|
159
154
|
}
|
|
160
|
-
|
|
161
155
|
setDisplayedBreadcrumbItems(newDisplayedBreadcrumbItems);
|
|
162
156
|
}, [breadcrumbs, displayCount]);
|
|
163
|
-
|
|
164
157
|
var checkFullyVisibleBreadcrumbItems = function checkFullyVisibleBreadcrumbItems() {
|
|
165
158
|
var displayItemIndex = function displayItemIndex(itemCount, index) {
|
|
166
159
|
// In this data set the overflow measuring item is [0]
|
|
167
160
|
// so the first displayItem in the list is [1]
|
|
168
161
|
// we never return 0;
|
|
162
|
+
|
|
169
163
|
if (index === 0) {
|
|
170
164
|
return itemCount - 1; // the last item in the list
|
|
171
165
|
} else if (index === 1) {
|
|
@@ -183,14 +177,11 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
183
177
|
var spaceAvailable = breadcrumbItemWithOverflow.current.offsetWidth; // not sure how to test resize
|
|
184
178
|
|
|
185
179
|
/* istanbul ignore next */
|
|
186
|
-
|
|
187
180
|
if (sizingContainerRef.current) {
|
|
188
181
|
var sizingBreadcrumbItems = sizingContainerRef.current.querySelectorAll(".".concat(carbon.prefix, "--breadcrumb-item"));
|
|
189
182
|
var breadcrumbWidthsIncludingMargin = [];
|
|
190
|
-
|
|
191
183
|
var _iterator = _createForOfIteratorHelper(sizingBreadcrumbItems),
|
|
192
|
-
|
|
193
|
-
|
|
184
|
+
_step;
|
|
194
185
|
try {
|
|
195
186
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
196
187
|
var item = _step.value;
|
|
@@ -203,34 +194,33 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
203
194
|
} finally {
|
|
204
195
|
_iterator.f();
|
|
205
196
|
}
|
|
206
|
-
|
|
207
197
|
var overflowWidth = breadcrumbWidthsIncludingMargin[0];
|
|
208
|
-
|
|
209
198
|
for (var i = 0; i < breadcrumbWidthsIncludingMargin.length - 1; i++) {
|
|
210
199
|
// count used one less than length to account for the included overflow item
|
|
211
200
|
var index = displayItemIndex(breadcrumbWidthsIncludingMargin.length, i);
|
|
212
|
-
|
|
213
201
|
if (spaceAvailable >= breadcrumbWidthsIncludingMargin[index]) {
|
|
214
202
|
spaceAvailable -= breadcrumbWidthsIncludingMargin[index];
|
|
215
203
|
willFit += 1;
|
|
216
204
|
} else {
|
|
217
205
|
break;
|
|
218
206
|
}
|
|
219
|
-
}
|
|
220
|
-
|
|
207
|
+
}
|
|
221
208
|
|
|
209
|
+
// if not enough space for all breadcrumb items
|
|
222
210
|
if (willFit < breadcrumbWidthsIncludingMargin.length - 1) {
|
|
223
211
|
// -1 for overflow item
|
|
212
|
+
|
|
224
213
|
while (willFit > 0 && spaceAvailable < overflowWidth) {
|
|
225
|
-
willFit -= 1;
|
|
226
|
-
|
|
214
|
+
willFit -= 1;
|
|
215
|
+
|
|
216
|
+
// Highly unlikely any useful breadcrumb-item is smaller than the overflow menu, but we loop anyway just in case
|
|
227
217
|
|
|
218
|
+
// item removed is based on last item added which is the current value of willFit
|
|
228
219
|
var itemToRemove = displayItemIndex(breadcrumbWidthsIncludingMargin.length, willFit);
|
|
229
220
|
spaceAvailable += breadcrumbWidthsIncludingMargin[itemToRemove];
|
|
230
221
|
}
|
|
231
222
|
}
|
|
232
223
|
}
|
|
233
|
-
|
|
234
224
|
if (willFit <= 1) {
|
|
235
225
|
setDisplayCount(1);
|
|
236
226
|
} else {
|
|
@@ -238,36 +228,27 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
238
228
|
}
|
|
239
229
|
}
|
|
240
230
|
};
|
|
241
|
-
|
|
242
231
|
useEffect(function () {
|
|
243
|
-
checkFullyVisibleBreadcrumbItems();
|
|
232
|
+
checkFullyVisibleBreadcrumbItems();
|
|
233
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
244
234
|
}, [hiddenSizingItems, maxVisible]);
|
|
245
|
-
/* istanbul ignore next */
|
|
246
|
-
// not sure how to test resize
|
|
247
235
|
|
|
236
|
+
/* istanbul ignore next */ // not sure how to test resize
|
|
248
237
|
var handleResize = function handleResize() {
|
|
249
|
-
/* istanbul ignore next */
|
|
250
|
-
// not sure how to test resize
|
|
238
|
+
/* istanbul ignore next */ // not sure how to test resize
|
|
251
239
|
checkFullyVisibleBreadcrumbItems();
|
|
252
240
|
};
|
|
253
|
-
/* istanbul ignore next */
|
|
254
|
-
// not sure how to test resize
|
|
255
|
-
|
|
256
241
|
|
|
242
|
+
/* istanbul ignore next */ // not sure how to test resize
|
|
257
243
|
var handleBreadcrumbItemsResize = function handleBreadcrumbItemsResize() {
|
|
258
|
-
/* istanbul ignore next */
|
|
259
|
-
// not sure how to test resize
|
|
244
|
+
/* istanbul ignore next */ // not sure how to test resize
|
|
260
245
|
checkFullyVisibleBreadcrumbItems();
|
|
261
246
|
};
|
|
262
|
-
|
|
263
247
|
var backItem = breadcrumbs[breadcrumbs.length - 1];
|
|
264
|
-
/* istanbul ignore if */
|
|
265
|
-
// not sure how to test media queries
|
|
266
|
-
|
|
248
|
+
/* istanbul ignore if */ // not sure how to test media queries
|
|
267
249
|
if (backItem.isCurrentPage) {
|
|
268
250
|
backItem = breadcrumbs[breadcrumbs.length - 2];
|
|
269
251
|
}
|
|
270
|
-
|
|
271
252
|
useResizeDetector({
|
|
272
253
|
onResize: handleBreadcrumbItemsResize,
|
|
273
254
|
targetRef: sizingContainerRef
|
|
@@ -296,8 +277,9 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
|
296
277
|
});
|
|
297
278
|
}
|
|
298
279
|
})), displayedBreadcrumbItems)));
|
|
299
|
-
};
|
|
280
|
+
};
|
|
300
281
|
|
|
282
|
+
// Return a placeholder if not released and not enabled by feature flag
|
|
301
283
|
BreadcrumbWithOverflow = pkg.checkComponentEnabled(BreadcrumbWithOverflow, componentName);
|
|
302
284
|
BreadcrumbWithOverflow.propTypes = {
|
|
303
285
|
breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
|
|
@@ -305,22 +287,18 @@ BreadcrumbWithOverflow.propTypes = {
|
|
|
305
287
|
* Optional string representing the link location for the BreadcrumbItem
|
|
306
288
|
*/
|
|
307
289
|
href: PropTypes.string,
|
|
308
|
-
|
|
309
290
|
/**
|
|
310
291
|
* Provide if this breadcrumb item represents the current page
|
|
311
292
|
*/
|
|
312
293
|
isCurrentPage: PropTypes.bool,
|
|
313
|
-
|
|
314
294
|
/**
|
|
315
295
|
* Key required to render array efficiently
|
|
316
296
|
*/
|
|
317
297
|
key: PropTypes.string.isRequired,
|
|
318
|
-
|
|
319
298
|
/**
|
|
320
299
|
* Pass in content that will be inside of the BreadcrumbItem
|
|
321
300
|
*/
|
|
322
301
|
label: PropTypes.node,
|
|
323
|
-
|
|
324
302
|
/**
|
|
325
303
|
* A string based alternative to the children, required only if children is not of type string.
|
|
326
304
|
*/
|
|
@@ -329,22 +307,18 @@ BreadcrumbWithOverflow.propTypes = {
|
|
|
329
307
|
return typeof label !== 'string';
|
|
330
308
|
})
|
|
331
309
|
})),
|
|
332
|
-
|
|
333
310
|
/**
|
|
334
311
|
* className
|
|
335
312
|
*/
|
|
336
313
|
className: PropTypes.string,
|
|
337
|
-
|
|
338
314
|
/**
|
|
339
315
|
* maxVisible: maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1)
|
|
340
316
|
*/
|
|
341
317
|
maxVisible: PropTypes.number,
|
|
342
|
-
|
|
343
318
|
/**
|
|
344
319
|
* noTrailing slash - same as for Carbon
|
|
345
320
|
*/
|
|
346
321
|
noTrailingSlash: PropTypes.bool,
|
|
347
|
-
|
|
348
322
|
/**
|
|
349
323
|
* overflowAriaLabel label for open close button overflow used for breadcrumb items that do not fit.
|
|
350
324
|
*/
|
|
@@ -4,5 +4,7 @@
|
|
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
|
6
6
|
//
|
|
7
|
+
|
|
7
8
|
// NOTE: An index file is most useful when you have multiple components
|
|
9
|
+
|
|
8
10
|
export { BreadcrumbWithOverflow } from './BreadcrumbWithOverflow';
|
|
@@ -1,30 +1,36 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
|
|
4
|
-
|
|
5
4
|
/**
|
|
6
5
|
* Copyright IBM Corp. 2021, 2021
|
|
7
6
|
*
|
|
8
7
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
9
8
|
* LICENSE file in the root directory of this source tree.
|
|
10
9
|
*/
|
|
10
|
+
|
|
11
11
|
// Import portions of React that are needed.
|
|
12
|
-
import React from 'react';
|
|
12
|
+
import React from 'react';
|
|
13
13
|
|
|
14
|
+
// Other standard imports.
|
|
14
15
|
import PropTypes from 'prop-types';
|
|
15
16
|
import cx from 'classnames';
|
|
16
|
-
import { pkg, carbon } from '../../settings';
|
|
17
|
+
import { pkg, carbon } from '../../settings';
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
// Carbon and package components we use.
|
|
20
|
+
import { Button, OverflowMenu } from 'carbon-components-react';
|
|
19
21
|
|
|
22
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
20
23
|
var blockClass = "".concat(pkg.prefix, "--button-menu");
|
|
21
|
-
var componentName = 'ButtonMenu';
|
|
22
|
-
// Default values for props
|
|
24
|
+
var componentName = 'ButtonMenu';
|
|
23
25
|
|
|
26
|
+
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
|
27
|
+
|
|
28
|
+
// Default values for props
|
|
24
29
|
var defaults = {
|
|
25
30
|
size: 'default',
|
|
26
31
|
kind: 'primary'
|
|
27
32
|
};
|
|
33
|
+
|
|
28
34
|
/**
|
|
29
35
|
* Combining a standard button with an overflow menu, this component appears
|
|
30
36
|
* as a button and has all the usual carbon Button props and rendering, but
|
|
@@ -32,24 +38,24 @@ var defaults = {
|
|
|
32
38
|
* zero to many ButtonMenuItem, which is identical to the carbon
|
|
33
39
|
* OverflowMenuItem component.
|
|
34
40
|
*/
|
|
35
|
-
|
|
36
41
|
export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
37
42
|
var children = _ref.children,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
43
|
+
className = _ref.className,
|
|
44
|
+
iconDescription = _ref.iconDescription,
|
|
45
|
+
_ref$kind = _ref.kind,
|
|
46
|
+
kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
|
|
47
|
+
label = _ref.label,
|
|
48
|
+
menuOptionsClass = _ref.menuOptionsClass,
|
|
49
|
+
Icon = _ref.renderIcon,
|
|
50
|
+
_ref$size = _ref.size,
|
|
51
|
+
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
|
52
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
49
53
|
return /*#__PURE__*/React.createElement(OverflowMenu, _extends({}, rest, {
|
|
50
|
-
className: cx(blockClass,
|
|
54
|
+
className: cx(blockClass,
|
|
55
|
+
// Apply the block class to the main HTML element
|
|
51
56
|
className // Apply any supplied class names to the main HTML element.
|
|
52
57
|
),
|
|
58
|
+
|
|
53
59
|
menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass),
|
|
54
60
|
renderIcon: function renderIcon() {
|
|
55
61
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -62,54 +68,50 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
62
68
|
},
|
|
63
69
|
innerRef: ref
|
|
64
70
|
}), children);
|
|
65
|
-
});
|
|
71
|
+
});
|
|
66
72
|
|
|
67
|
-
|
|
73
|
+
// Return a placeholder if not released and not enabled by feature flag
|
|
74
|
+
ButtonMenu = pkg.checkComponentEnabled(ButtonMenu, componentName);
|
|
75
|
+
|
|
76
|
+
// The display name of the component, used by React. Note that displayName
|
|
68
77
|
// is used in preference to relying on function.name.
|
|
78
|
+
ButtonMenu.displayName = componentName;
|
|
69
79
|
|
|
70
|
-
|
|
80
|
+
// The types and DocGen commentary for the component props,
|
|
71
81
|
// in alphabetical order (for consistency).
|
|
72
82
|
// See https://www.npmjs.com/package/prop-types#usage.
|
|
73
|
-
|
|
74
83
|
ButtonMenu.propTypes = {
|
|
75
84
|
/**
|
|
76
85
|
* Provide the contents of the ButtonMenu. This should be one or more
|
|
77
86
|
* ButtonMenuItem components.
|
|
78
87
|
*/
|
|
79
88
|
children: PropTypes.arrayOf(PropTypes.element).isRequired,
|
|
80
|
-
|
|
81
89
|
/**
|
|
82
90
|
* Provide an optional class to be applied to the containing node.
|
|
83
91
|
*/
|
|
84
92
|
className: PropTypes.string,
|
|
85
|
-
|
|
86
93
|
/**
|
|
87
94
|
* If specifying the `renderIcon` prop, provide a description for that icon that can
|
|
88
95
|
* be read by screen readers
|
|
89
96
|
*/
|
|
90
97
|
iconDescription: Button.propTypes.iconDescription,
|
|
91
|
-
|
|
92
98
|
/**
|
|
93
99
|
* The three types the menu button supports: primary, tertiary and ghost.
|
|
94
100
|
*/
|
|
95
101
|
kind: PropTypes.oneOf(['primary', 'tertiary', 'ghost']),
|
|
96
|
-
|
|
97
102
|
/**
|
|
98
103
|
* The button label for the menu trigger.
|
|
99
104
|
*/
|
|
100
105
|
label: PropTypes.node,
|
|
101
|
-
|
|
102
106
|
/**
|
|
103
107
|
* class name applied to the overflow options
|
|
104
108
|
*/
|
|
105
109
|
menuOptionsClass: PropTypes.string,
|
|
106
|
-
|
|
107
110
|
/**
|
|
108
111
|
* Optional prop to allow overriding the icon rendering.
|
|
109
112
|
* Can be a React component class
|
|
110
113
|
*/
|
|
111
114
|
renderIcon: Button.propTypes.renderIcon,
|
|
112
|
-
|
|
113
115
|
/**
|
|
114
116
|
* The size of the button for the menu trigger. The values can be any valid
|
|
115
117
|
* value for the carbon Button component 'size' prop.
|