@carbon/ibm-products 2.2.0 → 2.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +965 -434
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +354 -155
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +600 -236
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +516 -293
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.docs-page.js +26 -0
- package/es/components/AboutModal/AboutModal.docs-page.js +21 -0
- package/es/components/AboutModal/AboutModal.js +2 -4
- package/es/components/ActionBar/ActionBar.js +2 -6
- package/es/components/AddSelect/AddSelectFormControl.js +6 -6
- package/es/components/AddSelect/AddSelectRow.js +15 -5
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/es/components/ButtonMenu/ButtonMenu.js +4 -4
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
- package/es/components/Cascade/Cascade.docs-page.js +22 -0
- package/es/components/Cascade/Cascade.js +11 -1
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +39 -0
- package/es/components/CreateFullPage/CreateFullPage.js +13 -0
- package/es/components/CreateModal/CreateModal.docs-page.js +24 -0
- package/es/components/CreateModal/CreateModal.js +7 -0
- package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js +18 -0
- package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/es/components/CreateTearsheet/CreateTearsheet.docs-page.js +29 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +25 -10
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +39 -47
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +13 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +44 -15
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +16 -30
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/index.js +2 -1
- package/es/components/Datagrid/useActionsColumn.js +10 -7
- package/es/components/Datagrid/useCustomizeColumns.js +9 -7
- package/es/components/Datagrid/useExpandedRow.js +11 -7
- package/es/components/Datagrid/useFiltering.js +12 -8
- package/es/components/Datagrid/useInlineEdit.js +3 -0
- package/es/components/Datagrid/useNestedRows.js +10 -6
- package/es/components/Datagrid/useStickyColumn.js +10 -3
- package/es/components/Datagrid/utils/DatagridActions.js +12 -20
- package/es/components/EditFullPage/EditFullPage.docs-page.js +39 -0
- package/es/components/EditFullPage/EditFullPage.js +2 -1
- package/es/components/EditSidePanel/EditSidePanel.js +1 -1
- package/es/components/EditTearsheet/EditTearsheet.docs-page.js +25 -0
- package/es/components/EditTearsheet/EditTearsheet.js +4 -0
- package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/es/components/EditUpdateCards/EditUpdateCards.js +3 -2
- package/es/components/EmptyStates/EmptyState.js +4 -0
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
- package/es/components/ExampleComponent/ExampleComponent.docs-page.js +22 -0
- package/es/components/ExportModal/ExportModal.js +4 -0
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
- package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
- package/es/components/ImportModal/ImportModal.docs-page.js +18 -0
- package/es/components/ImportModal/ImportModal.js +13 -6
- package/es/components/MultiAddSelect/MultiAddSelect.docs-page.js +17 -0
- package/es/components/MultiAddSelect/MultiAddSelect.js +4 -0
- package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
- package/es/components/PageHeader/PageHeader.js +2 -6
- package/es/components/PageHeader/PageHeaderUtils.js +2 -2
- package/es/components/RemoveModal/RemoveModal.docs-page.js +18 -0
- package/es/components/RemoveModal/RemoveModal.js +6 -0
- package/es/components/SidePanel/SidePanel.js +1 -3
- package/es/components/SingleAddSelect/SingleAddSelect.docs-page.js +15 -0
- package/es/components/SingleAddSelect/SingleAddSelect.js +4 -0
- package/es/components/StatusIcon/StatusIcon.docs-page.js +17 -0
- package/es/components/StatusIcon/StatusIcon.js +10 -0
- package/es/components/TagSet/TagSet.js +4 -7
- package/es/components/Tearsheet/TearsheetShell.js +11 -6
- package/es/components/Toolbar/Toolbar.docs-page.js +14 -0
- package/es/components/UserProfileImage/UserProfileImage.docs-page.js +17 -0
- package/es/components/UserProfileImage/UserProfileImage.js +14 -3
- package/es/components/WebTerminal/WebTerminal.docs-page.js +52 -0
- package/es/components/WebTerminal/WebTerminal.js +4 -0
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/es/global/js/hooks/useResizeObserver.js +14 -28
- package/es/global/js/package-settings.js +14 -1
- package/es/global/js/utils/StoryDocsPage.js +218 -0
- package/es/global/js/utils/story-helper.js +108 -6
- package/lib/components/APIKeyModal/APIKeyModal.docs-page.js +37 -0
- package/lib/components/AboutModal/AboutModal.docs-page.js +32 -0
- package/lib/components/AboutModal/AboutModal.js +2 -4
- package/lib/components/ActionBar/ActionBar.js +2 -6
- package/lib/components/AddSelect/AddSelectFormControl.js +6 -6
- package/lib/components/AddSelect/AddSelectRow.js +15 -5
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/lib/components/ButtonMenu/ButtonMenu.js +4 -4
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
- package/lib/components/Cascade/Cascade.docs-page.js +33 -0
- package/lib/components/Cascade/Cascade.js +11 -1
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +50 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +13 -0
- package/lib/components/CreateModal/CreateModal.docs-page.js +35 -0
- package/lib/components/CreateModal/CreateModal.js +7 -0
- package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js +29 -0
- package/lib/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js +40 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +25 -10
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +37 -45
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +6 -6
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +20 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +42 -13
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +16 -30
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/index.js +8 -1
- package/lib/components/Datagrid/useActionsColumn.js +12 -7
- package/lib/components/Datagrid/useCustomizeColumns.js +10 -8
- package/lib/components/Datagrid/useExpandedRow.js +9 -6
- package/lib/components/Datagrid/useFiltering.js +10 -7
- package/lib/components/Datagrid/useInlineEdit.js +3 -0
- package/lib/components/Datagrid/useNestedRows.js +9 -6
- package/lib/components/Datagrid/useStickyColumn.js +10 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +49 -57
- package/lib/components/EditFullPage/EditFullPage.docs-page.js +50 -0
- package/lib/components/EditFullPage/EditFullPage.js +2 -1
- package/lib/components/EditSidePanel/EditSidePanel.js +1 -1
- package/lib/components/EditTearsheet/EditTearsheet.docs-page.js +36 -0
- package/lib/components/EditTearsheet/EditTearsheet.js +4 -0
- package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/lib/components/EditUpdateCards/EditUpdateCards.js +3 -2
- package/lib/components/EmptyStates/EmptyState.js +4 -0
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
- package/lib/components/ExampleComponent/ExampleComponent.docs-page.js +33 -0
- package/lib/components/ExportModal/ExportModal.js +4 -0
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
- package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
- package/lib/components/ImportModal/ImportModal.docs-page.js +26 -0
- package/lib/components/ImportModal/ImportModal.js +13 -6
- package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js +25 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.js +4 -0
- package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
- package/lib/components/PageHeader/PageHeader.js +2 -6
- package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
- package/lib/components/RemoveModal/RemoveModal.docs-page.js +26 -0
- package/lib/components/RemoveModal/RemoveModal.js +6 -0
- package/lib/components/SidePanel/SidePanel.js +1 -3
- package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js +23 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.js +4 -0
- package/lib/components/StatusIcon/StatusIcon.docs-page.js +28 -0
- package/lib/components/StatusIcon/StatusIcon.js +10 -0
- package/lib/components/TagSet/TagSet.js +4 -7
- package/lib/components/Tearsheet/TearsheetShell.js +11 -6
- package/lib/components/Toolbar/Toolbar.docs-page.js +25 -0
- package/lib/components/UserProfileImage/UserProfileImage.docs-page.js +28 -0
- package/lib/components/UserProfileImage/UserProfileImage.js +14 -3
- package/lib/components/WebTerminal/WebTerminal.docs-page.js +63 -0
- package/lib/components/WebTerminal/WebTerminal.js +4 -0
- package/lib/components/index.js +6 -0
- package/lib/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/lib/global/js/hooks/useResizeObserver.js +13 -27
- package/lib/global/js/package-settings.js +14 -1
- package/lib/global/js/utils/StoryDocsPage.js +225 -0
- package/lib/global/js/utils/story-helper.js +115 -7
- package/package.json +4 -4
- package/scss/components/AddSelect/_add-select.scss +10 -6
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +0 -1
- package/scss/components/ButtonMenu/_button-menu.scss +32 -1
- package/scss/components/Cascade/_storybook-styles.scss +3 -2
- package/scss/components/CreateFullPage/_create-full-page.scss +3 -3
- package/scss/components/CreateModal/_create-modal.scss +3 -3
- package/scss/components/CreateSidePanel/_create-side-panel.scss +4 -4
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
- package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +2 -2
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +5 -5
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
- package/scss/components/Datagrid/_datagrid.scss +4 -2
- package/scss/components/Datagrid/_storybook-styles.scss +18 -4
- package/scss/components/Datagrid/styles/_datagrid.scss +26 -13
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +7 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/EditSidePanel/_edit-side-panel.scss +2 -2
- package/scss/components/EditTearsheet/_edit-tearsheet.scss +2 -2
- package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/ImportModal/_import-modal.scss +1 -1
- package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -3
- package/scss/components/NotificationsPanel/_storybook-styles.scss +10 -2
- package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +4 -5
- package/scss/components/PageHeader/_storybook-styles.scss +24 -14
- package/scss/components/Saving/_saving.scss +1 -1
- package/scss/components/SidePanel/_side-panel.scss +3 -5
- package/scss/components/TagSet/_tag-set.scss +1 -1
- package/scss/components/Tearsheet/_tearsheet.scss +9 -8
- package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
- package/scss/components/WebTerminal/_storybook-styles.scss +11 -1
- package/scss/global/styles/_display-box.scss +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -21
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -30
- package/scss/components/HTTPErrors/_storybook-styles.scss +0 -6
@@ -1,4 +1,5 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
4
|
var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuAriaLabel", "menuOptionsClass", "renderIcon", "size"];
|
4
5
|
/**
|
@@ -55,15 +56,14 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
55
56
|
return /*#__PURE__*/React.createElement(OverflowMenu, _extends({}, rest, {
|
56
57
|
className: cx(blockClass,
|
57
58
|
// Apply the block class to the main HTML element
|
58
|
-
className // Apply any supplied class names to the main HTML element.
|
59
|
-
),
|
60
|
-
|
59
|
+
className, // Apply any supplied class names to the main HTML element.
|
60
|
+
"".concat(carbonPrefix, "--btn--").concat(size), _defineProperty({}, "".concat(blockClass, "__wrapper--").concat(kind), kind)),
|
61
61
|
"aria-label": menuAriaLabel,
|
62
62
|
menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass),
|
63
63
|
size: size,
|
64
64
|
renderIcon: function renderIcon() {
|
65
65
|
return /*#__PURE__*/React.createElement("div", {
|
66
|
-
className: cx(
|
66
|
+
className: cx("".concat(blockClass, "__trigger"))
|
67
67
|
}, label, Icon && /*#__PURE__*/React.createElement(Icon, {
|
68
68
|
"aria-hidden": "true",
|
69
69
|
"aria-label": iconDescription,
|
@@ -137,15 +137,9 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
|
|
137
137
|
}, prepareProps(other, ['iconDescription', 'renderIcon'])));
|
138
138
|
}).reverse());
|
139
139
|
});
|
140
|
-
useResizeObserver(sizingContainerRefSet,
|
141
|
-
|
142
|
-
|
143
|
-
useResizeObserver(sizingContainerRefCombo, {
|
144
|
-
callback: checkFullyVisibleItems
|
145
|
-
});
|
146
|
-
useResizeObserver(spaceAvailableRef, {
|
147
|
-
callback: checkFullyVisibleItems
|
148
|
-
});
|
140
|
+
useResizeObserver(sizingContainerRefSet, checkFullyVisibleItems);
|
141
|
+
useResizeObserver(sizingContainerRefCombo, checkFullyVisibleItems);
|
142
|
+
useResizeObserver(spaceAvailableRef, checkFullyVisibleItems);
|
149
143
|
return /*#__PURE__*/React.createElement("div", {
|
150
144
|
className: cx([blockClass, className, _defineProperty({}, "".concat(blockClass, "--right"), rightAlign)]),
|
151
145
|
ref: spaceAvailableRef
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
+
import * as stories from './Cascade.stories';
|
4
|
+
import { useOf } from '@storybook/blocks';
|
5
|
+
import { storyDocsGuidelines } from '../../global/js/utils/story-helper';
|
6
|
+
var DocsPage = function DocsPage() {
|
7
|
+
var _useOf = useOf('meta', ['meta']),
|
8
|
+
csfFile = _useOf.csfFile;
|
9
|
+
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
10
|
+
altGuidelinesHref: [storyDocsGuidelines(csfFile), {
|
11
|
+
href: 'https://www.carbondesignsystem.com/guidelines/motion/overview/',
|
12
|
+
label: 'Carbon motion guidelines'
|
13
|
+
}],
|
14
|
+
blocks: [{
|
15
|
+
story: stories.WithoutGrid
|
16
|
+
}, {
|
17
|
+
description: 'When using `Cascade` with grid support its important that you follow the example code structure and provide the rows and columns. The component will assume this structure and add the appropriate CSS classes to the columns.',
|
18
|
+
story: stories.WithGrid
|
19
|
+
}]
|
20
|
+
});
|
21
|
+
};
|
22
|
+
export default DocsPage;
|
@@ -21,6 +21,16 @@ var componentName = 'Cascade';
|
|
21
21
|
var defaults = {
|
22
22
|
grid: false
|
23
23
|
};
|
24
|
+
|
25
|
+
/**
|
26
|
+
|
27
|
+
This pattern is intended for use with cards, tiles, or similarly styled
|
28
|
+
components. Use this patterns in areas that are the primary focus on the page to
|
29
|
+
help the user along their journey or locate the most important information on
|
30
|
+
the page. It should not be used on a page if it is the secondary focus of the
|
31
|
+
page as that will distract the user.
|
32
|
+
|
33
|
+
*/
|
24
34
|
export var Cascade = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
25
35
|
var children = _ref.children,
|
26
36
|
className = _ref.className,
|
@@ -72,7 +82,7 @@ Cascade.propTypes = {
|
|
72
82
|
*/
|
73
83
|
className: PropTypes.string,
|
74
84
|
/**
|
75
|
-
* Specifies whether or not to wrap the child content in a
|
85
|
+
* Specifies whether or not to wrap the child content in a `<Grid />`.
|
76
86
|
* If this is set to true it's important that the children are being wrapped in rows in columns.
|
77
87
|
* Check the documentation for additional clarification.
|
78
88
|
*/
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
+
import * as stories from './CreateFullPage.stories';
|
4
|
+
var DocsPage = function DocsPage() {
|
5
|
+
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
+
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#full-page",
|
7
|
+
blocks: [{
|
8
|
+
description: "There are **2** components that make up a Create Full Page component, which can\nbe used in unison to create the desired look, or flow. Please note, to utilize\nthe Create Full Page component, you'll need to have a minimum of two steps. If\nyou are looking for a one step creation flow, consider Create Tearsheet, Create\nSide Panel, or Create Modal."
|
9
|
+
}, {
|
10
|
+
story: stories.createFullPage,
|
11
|
+
description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateFullPage />` component and the `<CreateFullPageStep />`\ncomponent with form items as children:\n",
|
12
|
+
source: {
|
13
|
+
code: "<CreateFullPage {...props}>\n <CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </Column>\n </Row>\n </CreateFullPageStep>\n </CreateFullPage>"
|
14
|
+
}
|
15
|
+
}, {
|
16
|
+
story: stories.createFullPageWithSections,
|
17
|
+
description: "This is used when you have several sections per step. This can be created by\npassing in the overall `<CreateFullPage />` component and the\n`<CreateFullPageStep />` component for the first `section`. All additional\n`sections` must be passed in as children, as shown below:",
|
18
|
+
source: {
|
19
|
+
code: "<CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n <span className={`#{$pkg-prefix}--create-full-page__section-divider`} />\n <h5 className={`#{$pkg-prefix}--create-full-page__step-title`}>Required title</h5>\n <h6 className={`#{$pkg-prefix}--create-full-page__step-subtitle`}>\n Optional subtitle\n </h6>\n <p className={`#{$pkg-prefix}--create-full-page__step-description`}>\n Optional description\n </p>\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-2\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n</CreateFullPageStep>"
|
20
|
+
}
|
21
|
+
}, {
|
22
|
+
title: 'Using custom components',
|
23
|
+
description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",
|
24
|
+
source: {
|
25
|
+
code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n return (\n <CreateFullPageStep\n {...rest}\n subtitle={subtitle}\n title=\"Step 1\"\n onNext={() => console.log('optional validation check')}\n onMount={() => console.log('optional onMount fn')}\n disableSubmit={false}\n >\n step content here\n </CreateFullPageStep>\n );\n};\n\nconst CreateComponent = () => {\n return (\n <CreateFullPage {...createFullPageProps}>\n <CreateStepCustom subtitle=\"Custom step subtitle\" />\n <CreateFullPageStep\n title=\"Topic name\"\n fieldsetLegendText=\"Topic information\"\n disableSubmit={!value}\n subtitle=\"This is the unique name used to recognize your topic\"\n description=\"It will also be used by your producers and consumers as part of the\n connection information, so make it something easy to recognize.\"\n >\n Content for second step\n </CreateFullPageStep>\n </CreateFullPage>\n );\n};"
|
26
|
+
}
|
27
|
+
}, {
|
28
|
+
title: 'Using dynamic steps',
|
29
|
+
description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
|
30
|
+
source: {
|
31
|
+
code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n useState(false);\n return (\n <CreateFullPage {...createFullPageProps}>\n <CreateFullPageStep {...step1Props}>\n Step 1 content\n <Checkbox\n labelText={`Include additional step`}\n id=\"include-additional-step-checkbox\"\n onChange={(value) => setShouldIncludeAdditionalStep(value)}\n checked={shouldIncludeAdditionalStep}\n />\n </CreateFullPageStep>\n <CreateFullPageStep\n {...step2Props}\n includeStep={shouldIncludeAdditionalStep}\n >\n Dynamic step content\n </CreateFullPageStep>\n <CreateFullPageStep {...step3Props}>\n Final step content\n </CreateFullPageStep>\n </CreateFullPage>\n );\n};"
|
32
|
+
}
|
33
|
+
}, {
|
34
|
+
title: 'Class names',
|
35
|
+
description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name | Element | Features |\n| ---------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-full-page__step-title` | title | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-full-page__step-subtitle` | subtitle | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-full-page__step-description` | description | `body-long-01` & `margin-bottom` of `$spacing-06` |\n| `#{$pkg-prefix}--create-full-page__step-fieldset` | fieldset | `margin-bottom` of `$spacing-05` to all children elements |\n| `#{$pkg-prefix}--create-full-page__section-divider` | divider | Includes a `1px` divider line inside the `main` content |\n"
|
36
|
+
}]
|
37
|
+
});
|
38
|
+
};
|
39
|
+
export default DocsPage;
|
@@ -35,6 +35,19 @@ export var StepsContext = /*#__PURE__*/createContext(null);
|
|
35
35
|
// This is a context supplied separately to each step in the container
|
36
36
|
// to let it know what number it is in the sequence of steps
|
37
37
|
export var StepNumberContext = /*#__PURE__*/createContext(-1);
|
38
|
+
|
39
|
+
/**
|
40
|
+
* Use with creations that must be completed in order for a service to be usable.
|
41
|
+
*
|
42
|
+
* ### Grid
|
43
|
+
*
|
44
|
+
* The `CreateFullPage` component utilizes Carbons' grid system in the inner
|
45
|
+
content of the main section inside of the component. You can read more guidance
|
46
|
+
on the Carbon's grid system
|
47
|
+
[here](https://www.carbondesignsystem.com/guidelines/2x-grid/overview). You can
|
48
|
+
include `<Row>` and `<Column>` components inside of each `CreateFullPageStep`
|
49
|
+
component to get the desired affect.
|
50
|
+
*/
|
38
51
|
export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
39
52
|
var backButtonText = _ref.backButtonText,
|
40
53
|
cancelButtonText = _ref.cancelButtonText,
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
+
import * as stories from './CreateModal.stories';
|
4
|
+
var DocsPage = function DocsPage() {
|
5
|
+
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
+
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#modal",
|
7
|
+
blocks: [{
|
8
|
+
story: stories.Default
|
9
|
+
}, {
|
10
|
+
title: 'Form validation',
|
11
|
+
description: "All forms, including that within the `CreateModal` should follow C&CS guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
|
12
|
+
}, {
|
13
|
+
title: 'Overriding Carbon theme',
|
14
|
+
description: "The design recommendation is to use a dark theme for the CreateModal if the\napplication is currently using a light theme, and vice versa. The theme applied\nto the CreateModal can easily be customized as follows:\n\nIn SCSS:",
|
15
|
+
source: {
|
16
|
+
language: 'css',
|
17
|
+
code: " .#{$pkg-prefix}--create-modal {\n @include carbon--theme(\n $theme: $carbon--theme--g90\n );\n }"
|
18
|
+
}
|
19
|
+
}, {
|
20
|
+
description: "Alternatively, the required Carbon theme can be set as above in a custom CSS\nclass which is then applied to the CreateModal using the `className` prop."
|
21
|
+
}]
|
22
|
+
});
|
23
|
+
};
|
24
|
+
export default DocsPage;
|
@@ -30,6 +30,13 @@ var isValidChildren = function isValidChildren() {
|
|
30
30
|
return;
|
31
31
|
};
|
32
32
|
};
|
33
|
+
|
34
|
+
/**
|
35
|
+
* The `CreateModal` component provides a way for a user to quickly generate a new
|
36
|
+
resource. It is triggered by a user’s action, appears on top of the main page
|
37
|
+
content, and is persistent until dismissed. The purpose of this modal should be
|
38
|
+
immediately apparent to the user, with a clear and obvious path to completion.
|
39
|
+
*/
|
33
40
|
export var CreateModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
34
41
|
var className = _ref2.className,
|
35
42
|
children = _ref2.children,
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
+
import * as stories from './CreateSidePanel.stories';
|
4
|
+
var DocsPage = function DocsPage() {
|
5
|
+
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
+
altGuidelinesHref: [{
|
7
|
+
href: 'https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#side-panel',
|
8
|
+
label: 'Carbon create flows side panel usage guidelines'
|
9
|
+
}],
|
10
|
+
blocks: [{
|
11
|
+
story: stories.Default
|
12
|
+
}, {
|
13
|
+
title: 'Form validation',
|
14
|
+
description: "All forms, including that within the `CreateSidePanel` should follow C&CS\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
|
15
|
+
}]
|
16
|
+
});
|
17
|
+
};
|
18
|
+
export default DocsPage;
|
@@ -31,7 +31,7 @@ var componentName = 'CreateSidePanel';
|
|
31
31
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
32
32
|
|
33
33
|
/**
|
34
|
-
*
|
34
|
+
* Use with medium complexity creations if the user needs page context. On-page content can be seen and interacted with.
|
35
35
|
*/
|
36
36
|
export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
37
37
|
var className = _ref.className,
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
+
import * as stories from './CreateTearsheet.stories';
|
4
|
+
var DocsPage = function DocsPage() {
|
5
|
+
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
+
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#wide-tearsheet",
|
7
|
+
blocks: [{
|
8
|
+
story: stories.multiStepTearsheet,
|
9
|
+
description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateTearsheet />` component and the `<CreateTearsheetStep />`\ncomponent with form items as children:",
|
10
|
+
source: {
|
11
|
+
code: " <CreateTearsheet {...props}>\n <CreateTearsheetStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n disableSubmit={}\n >\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </CreateTearsheetStep>\n </CreateTearsheet>"
|
12
|
+
}
|
13
|
+
}, {
|
14
|
+
title: 'Using custom components',
|
15
|
+
description: "It is possible to use custom components that return `CreateTearsheetStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateTearsheet`. _It is required that each child of the `CreateTearsheet`\neither be a custom step or a `CreateTearsheetStep`_. An example of this could\nlook like the following:",
|
16
|
+
source: {
|
17
|
+
code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n return (\n <CreateTearsheetStep\n {...rest}\n subtitle={subtitle}\n title=\"Step 1\"\n onNext={() => console.log('optional validation check')}\n onMount={() => console.log('optional onMount fn')}\n disableSubmit={false}\n >\n step content here\n </CreateTearsheetStep>\n );\n};\n\nconst CreateComponent = () => {\n return (\n <CreateTearsheet {...createTearsheetProps}>\n <CreateStepCustom subtitle=\"Custom step subtitle\" />\n <CreateTearsheetStep\n title=\"Topic name\"\n fieldsetLegendText=\"Topic information\"\n disableSubmit={!value}\n subtitle=\"This is the unique name used to recognize your topic\"\n description=\"It will also be used by your producers and consumers as part of the\n connection information, so make it something easy to recognize.\"\n >\n Content for second step\n </CreateTearsheetStep>\n </CreateTearsheet>\n );\n};"
|
18
|
+
}
|
19
|
+
}, {
|
20
|
+
title: 'Using dynamic steps',
|
21
|
+
description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
|
22
|
+
code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n useState(false);\n return (\n <CreateTearsheet {...createTearsheetProps}>\n <CreateTearsheetStep {...step1Props}>\n Step 1 content\n <Checkbox\n labelText={`Include additional step`}\n id=\"include-additional-step-checkbox\"\n onChange={(value) => setShouldIncludeAdditionalStep(value)}\n checked={shouldIncludeAdditionalStep}\n />\n </CreateTearsheetStep>\n <CreateTearsheetStep\n {...step2Props}\n includeStep={shouldIncludeAdditionalStep}\n >\n Dynamic step content\n </CreateTearsheetStep>\n <CreateTearsheetStep {...step3Props}>\n Final step content\n </CreateTearsheetStep>\n </CreateTearsheet>\n );\n};"
|
23
|
+
}, {
|
24
|
+
title: 'Class names',
|
25
|
+
description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name | Element | Features |\n| ----------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-tearsheet__step--title` | title | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-tearsheet__step--subtitle` | subtitle | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-tearsheet__step--description` | description | `body-long-01` & `margin-bottom` of `$spacing-06` |\n| `#{$pkg-prefix}--create-tearsheet__step--fieldset` | fieldset | `margin-bottom` of `$spacing-05` to all children elements |\n| `#{$pkg-prefix}--create-tearsheet__section--divider` | divider | Includes a `1px` divider line inside the `main` content |\n"
|
26
|
+
}]
|
27
|
+
});
|
28
|
+
};
|
29
|
+
export default DocsPage;
|
@@ -667,9 +667,6 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
667
667
|
defaultColumn: defaultColumn,
|
668
668
|
cellEditorValue: cellEditorValue
|
669
669
|
});
|
670
|
-
var handleActiveCellMouseEnter = useCallback(function () {
|
671
|
-
handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
|
672
|
-
}, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
|
673
670
|
|
674
671
|
// Only update if there are cell selection areas
|
675
672
|
// Find point object that matches currentMatcher and remove the second point
|
@@ -702,6 +699,9 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
702
699
|
});
|
703
700
|
}
|
704
701
|
}, [spreadsheetRef, currentMatcher]);
|
702
|
+
var handleActiveCellMouseEnter = useCallback(function () {
|
703
|
+
handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
|
704
|
+
}, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
|
705
705
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
|
706
706
|
className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__container-has-focus"), containerHasFocus), _defineProperty(_cx, "".concat(blockClass, "__").concat(theme), theme === 'dark'), _cx)),
|
707
707
|
ref: spreadsheetRef,
|
@@ -82,7 +82,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
82
82
|
return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
|
83
83
|
className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
84
84
|
role: withInlineEdit && 'grid',
|
85
|
-
tabIndex: withInlineEdit
|
85
|
+
tabIndex: withInlineEdit ? 0 : -1,
|
86
86
|
onKeyDown: withInlineEdit ? function (event) {
|
87
87
|
return handleGridKeyPress({
|
88
88
|
event: event,
|
@@ -35,6 +35,9 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
|
|
35
35
|
allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
|
36
36
|
columns = _ref.columns,
|
37
37
|
withStickyColumn = _ref.withStickyColumn;
|
38
|
+
var _ref2 = selectAllToggle || {},
|
39
|
+
onSelectAllRows = _ref2.onSelectAllRows,
|
40
|
+
labels = _ref2.labels;
|
38
41
|
var _useState = useState(SELECT_ALL_PAGE_ROWS),
|
39
42
|
_useState2 = _slicedToArray(_useState, 2),
|
40
43
|
selectAllMode = _useState2[0],
|
@@ -57,9 +60,6 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
|
|
57
60
|
return window.removeEventListener('resize', updateSize);
|
58
61
|
};
|
59
62
|
}, []);
|
60
|
-
var _ref2 = selectAllToggle || {},
|
61
|
-
onSelectAllRows = _ref2.onSelectAllRows,
|
62
|
-
labels = _ref2.labels;
|
63
63
|
if (labels) {
|
64
64
|
allPageRowsLabel = labels.allPageRows || allPageRowsLabel;
|
65
65
|
allRowsLabel = labels.allRows || allRowsLabel;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
/**
|
4
|
-
* Copyright IBM Corp. 2022,
|
4
|
+
* Copyright IBM Corp. 2022, 2023
|
5
5
|
*
|
6
6
|
* This source code is licensed under the Apache-2.0 license found in the
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
@@ -16,6 +16,7 @@ import { pkg, carbon } from '../../../settings';
|
|
16
16
|
import cx from 'classnames';
|
17
17
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
18
18
|
var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
|
19
|
+
var _Object$keys;
|
19
20
|
var _useState = useState(false),
|
20
21
|
_useState2 = _slicedToArray(_useState, 2),
|
21
22
|
displayAllInMenu = _useState2[0],
|
@@ -28,11 +29,12 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
28
29
|
_useState6 = _slicedToArray(_useState5, 2),
|
29
30
|
receivedInitialWidth = _useState6[0],
|
30
31
|
setReceivedInitialWidth = _useState6[1];
|
31
|
-
var
|
32
|
+
var selectedRowIds = datagridState.state.selectedRowIds,
|
32
33
|
toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
|
33
34
|
toolbarBatchActions = datagridState.toolbarBatchActions,
|
34
|
-
setGlobalFilter = datagridState.setGlobalFilter
|
35
|
-
|
35
|
+
setGlobalFilter = datagridState.setGlobalFilter,
|
36
|
+
rows = datagridState.rows;
|
37
|
+
var totalSelected = (_Object$keys = Object.keys(selectedRowIds || {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length;
|
36
38
|
|
37
39
|
// Get initial width of batch actions container,
|
38
40
|
// used to measure when all items are put inside
|
@@ -52,6 +54,19 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
52
54
|
setDisplayAllInMenu(false);
|
53
55
|
}
|
54
56
|
}, [width, ref, initialListWidth]);
|
57
|
+
var getSelectedRowData = function getSelectedRowData() {
|
58
|
+
var selectedRowIndexes = Object.keys(selectedRowIds);
|
59
|
+
var selectedRowData = selectedRowIndexes && selectedRowIndexes.length ? selectedRowIndexes.map(function (rowIndex) {
|
60
|
+
var filteredRow = rows.filter(function (row) {
|
61
|
+
return row.index === parseInt(rowIndex);
|
62
|
+
});
|
63
|
+
if (filteredRow.length) {
|
64
|
+
return filteredRow[0];
|
65
|
+
}
|
66
|
+
return [];
|
67
|
+
}) : [];
|
68
|
+
return selectedRowData;
|
69
|
+
};
|
55
70
|
|
56
71
|
// Render batch actions in ButtonMenu
|
57
72
|
var renderBatchActionOverflow = function renderBatchActionOverflow() {
|
@@ -74,8 +89,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
74
89
|
return /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
75
90
|
key: "".concat(batchAction.label, "-").concat(index),
|
76
91
|
itemText: batchAction.label,
|
77
|
-
onClick: function onClick() {
|
78
|
-
batchAction.onClick();
|
92
|
+
onClick: function onClick(event) {
|
93
|
+
batchAction.onClick(getSelectedRowData(), event);
|
79
94
|
if (batchAction.type === 'select_all') {
|
80
95
|
toggleAllRowsSelected(true);
|
81
96
|
}
|
@@ -87,8 +102,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
87
102
|
return /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
88
103
|
key: "".concat(batchAction.label, "-").concat(index),
|
89
104
|
itemText: batchAction.label,
|
90
|
-
onClick: function onClick() {
|
91
|
-
batchAction.onClick();
|
105
|
+
onClick: function onClick(event) {
|
106
|
+
batchAction.onClick(getSelectedRowData(), event);
|
92
107
|
if (batchAction.type === 'select_all') {
|
93
108
|
toggleAllRowsSelected(true);
|
94
109
|
}
|
@@ -112,8 +127,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
112
127
|
return /*#__PURE__*/React.createElement(TableBatchAction, {
|
113
128
|
key: "".concat(batchAction.label, "-").concat(index),
|
114
129
|
renderIcon: batchAction.renderIcon,
|
115
|
-
onClick: function onClick() {
|
116
|
-
batchAction.onClick();
|
130
|
+
onClick: function onClick(event) {
|
131
|
+
batchAction.onClick(getSelectedRowData(), event);
|
117
132
|
if (batchAction.type === 'select_all') {
|
118
133
|
toggleAllRowsSelected(true);
|
119
134
|
}
|
@@ -50,9 +50,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
50
50
|
var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
|
51
51
|
gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
|
52
52
|
};
|
53
|
-
useResizeObserver(gridRef,
|
54
|
-
callback: handleVirtualGridResize
|
55
|
-
});
|
53
|
+
useResizeObserver(gridRef, handleVirtualGridResize);
|
56
54
|
var syncScroll = function syncScroll(e) {
|
57
55
|
var virtualBody = e.target;
|
58
56
|
document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
|
@@ -20,7 +20,7 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
|
|
20
20
|
rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
|
21
21
|
return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
|
22
22
|
isOpen: isTearsheetOpen,
|
23
|
-
isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
|
23
|
+
isTableSortable: (instance === null || instance === void 0 ? void 0 : instance.isTableSortable) || false,
|
24
24
|
setIsTearsheetOpen: setIsTearsheetOpen,
|
25
25
|
columnDefinitions: instance.allColumns,
|
26
26
|
originalColumnDefinitions: instance.columns,
|
@@ -9,10 +9,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
9
9
|
*/
|
10
10
|
|
11
11
|
import { Filter } from '@carbon/react/icons';
|
12
|
-
import {
|
12
|
+
import { IconButton, usePrefix } from '@carbon/react';
|
13
13
|
import cx from 'classnames';
|
14
14
|
import PropTypes from 'prop-types';
|
15
|
-
import React, { useRef, useState } from 'react';
|
15
|
+
import React, { useRef, useState, useEffect } from 'react';
|
16
16
|
import { useClickOutside } from '../../../../../global/js/hooks';
|
17
17
|
import { pkg } from '../../../../../settings';
|
18
18
|
import { ActionSet } from '../../../../ActionSet';
|
@@ -45,11 +45,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
45
45
|
setAllFilters = _ref.setAllFilters,
|
46
46
|
_ref$data = _ref.data,
|
47
47
|
data = _ref$data === void 0 ? [] : _ref$data,
|
48
|
-
_ref$
|
49
|
-
|
50
|
-
// Save the initial filters we only need the filters once when it loads
|
51
|
-
var initialFiltersRef = useRef(initialFilters);
|
52
|
-
|
48
|
+
_ref$reactTableFilter = _ref.reactTableFiltersState,
|
49
|
+
reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
|
53
50
|
/** State */
|
54
51
|
var _useState = useState(false),
|
55
52
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -60,15 +57,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
60
57
|
filters: filters,
|
61
58
|
setAllFilters: setAllFilters,
|
62
59
|
variation: FLYOUT,
|
63
|
-
|
60
|
+
reactTableFiltersState: reactTableFiltersState,
|
61
|
+
onCancel: onCancel
|
64
62
|
}),
|
65
63
|
filtersState = _useFilters.filtersState,
|
66
64
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
67
65
|
prevFiltersRef = _useFilters.prevFiltersRef,
|
68
|
-
|
66
|
+
cancel = _useFilters.cancel,
|
69
67
|
reset = _useFilters.reset,
|
70
68
|
renderFilter = _useFilters.renderFilter,
|
71
|
-
filtersObjectArray = _useFilters.filtersObjectArray
|
69
|
+
filtersObjectArray = _useFilters.filtersObjectArray,
|
70
|
+
lastAppliedFilters = _useFilters.lastAppliedFilters;
|
72
71
|
|
73
72
|
/** Refs */
|
74
73
|
var filterFlyoutRef = useRef(null);
|
@@ -107,26 +106,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
107
106
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
108
107
|
prevFiltersRef.current = JSON.stringify(filtersState);
|
109
108
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
110
|
-
};
|
111
|
-
var cancel = function cancel() {
|
112
|
-
// Reverting to previous filters only applies when using batch actions
|
113
|
-
if (updateMethod === BATCH) {
|
114
|
-
revertToPreviousFilters();
|
115
|
-
onCancel();
|
116
|
-
}
|
117
|
-
closeFlyout();
|
118
|
-
};
|
119
109
|
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
|
124
|
-
if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
|
125
|
-
return;
|
126
|
-
}
|
127
|
-
cancel();
|
128
|
-
});
|
129
|
-
useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
|
110
|
+
// Update the last applied filters
|
111
|
+
lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
|
112
|
+
};
|
130
113
|
|
131
114
|
/** Renders all filters */
|
132
115
|
var renderFilters = function renderFilters() {
|
@@ -153,22 +136,31 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
153
136
|
buttonSize: "md"
|
154
137
|
});
|
155
138
|
};
|
139
|
+
|
140
|
+
/** Effects */
|
141
|
+
useClickOutside(filterFlyoutRef, function (target) {
|
142
|
+
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
143
|
+
var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
|
144
|
+
if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
|
145
|
+
return;
|
146
|
+
}
|
147
|
+
closeFlyout();
|
148
|
+
cancel();
|
149
|
+
});
|
150
|
+
useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
|
151
|
+
useEffect(function reflectLastAppliedFiltersWhenReactTableUpdates() {
|
152
|
+
lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
|
153
|
+
}, [reactTableFiltersState, lastAppliedFilters]);
|
156
154
|
return /*#__PURE__*/React.createElement("div", {
|
157
155
|
className: "".concat(componentClass, "__container")
|
158
|
-
}, /*#__PURE__*/React.createElement(
|
156
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
157
|
+
label: flyoutIconDescription,
|
159
158
|
kind: "ghost",
|
160
|
-
|
161
|
-
tooltipPosition: "bottom",
|
162
|
-
renderIcon: function renderIcon() {
|
163
|
-
return /*#__PURE__*/React.createElement(Filter, {
|
164
|
-
size: 16
|
165
|
-
});
|
166
|
-
},
|
167
|
-
iconDescription: flyoutIconDescription,
|
159
|
+
align: "bottom",
|
168
160
|
onClick: open ? closeFlyout : openFlyout,
|
169
161
|
className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
|
170
162
|
disabled: data.length === 0
|
171
|
-
}), /*#__PURE__*/React.createElement("div", {
|
163
|
+
}, /*#__PURE__*/React.createElement(Filter, null)), /*#__PURE__*/React.createElement("div", {
|
172
164
|
ref: filterFlyoutRef,
|
173
165
|
className: cx(componentClass, (_cx2 = {}, _defineProperty(_cx2, "".concat(componentClass, "--open"), open), _defineProperty(_cx2, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
|
174
166
|
}, /*#__PURE__*/React.createElement("div", {
|
@@ -196,14 +188,6 @@ FilterFlyout.propTypes = {
|
|
196
188
|
* Icon description for the filter flyout button
|
197
189
|
*/
|
198
190
|
flyoutIconDescription: PropTypes.string,
|
199
|
-
/**
|
200
|
-
* Filters that should be applied on load
|
201
|
-
*/
|
202
|
-
initialFilters: PropTypes.arrayOf(PropTypes.shape({
|
203
|
-
id: PropTypes.string.isRequired,
|
204
|
-
type: PropTypes.string.isRequired,
|
205
|
-
value: PropTypes.any.isRequired
|
206
|
-
})),
|
207
191
|
/**
|
208
192
|
* Callback when the apply button is clicked
|
209
193
|
*/
|
@@ -224,6 +208,14 @@ FilterFlyout.propTypes = {
|
|
224
208
|
* Label text of the primary action in the flyout
|
225
209
|
*/
|
226
210
|
primaryActionLabel: PropTypes.string,
|
211
|
+
/**
|
212
|
+
* Filters from react table's state
|
213
|
+
*/
|
214
|
+
reactTableFiltersState: PropTypes.arrayOf(PropTypes.shape({
|
215
|
+
id: PropTypes.string.isRequired,
|
216
|
+
type: PropTypes.string.isRequired,
|
217
|
+
value: PropTypes.any.isRequired
|
218
|
+
})),
|
227
219
|
/**
|
228
220
|
* Label text of the secondary action in the flyout
|
229
221
|
*/
|