@carbon/ibm-products 2.33.0 → 2.35.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +31990 -32061
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +38 -17
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +636 -24096
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +2342 -17830
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.d.ts +38 -2
- package/es/components/ActionSet/ActionSet.js +3 -5
- package/es/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
- package/es/components/ConditionBuilder/ConditionBuilder.d.ts +5 -0
- package/es/components/ConditionBuilder/ConditionBuilder.js +125 -0
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +10 -0
- package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +92 -0
- package/es/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.d.ts +38 -0
- package/es/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js +88 -0
- package/es/components/ConditionBuilder/assets/sampleInput.d.ts +58 -0
- package/es/components/ConditionBuilder/index.d.ts +1 -0
- package/es/components/CreateFullPage/CreateFullPage.js +3 -19
- package/es/components/CreateFullPage/CreateFullPageStep.js +22 -7
- package/es/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
- package/es/components/CreateSidePanel/CreateSidePanel.js +5 -2
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts +82 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +5 -117
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +12 -111
- package/es/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
- package/es/components/DataSpreadsheet/utils/commonEventHandlers.js +304 -0
- package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +2 -1
- package/es/components/Datagrid/useEditableCell.js +15 -0
- package/es/components/DelimitedList/DelimitedList.d.ts +27 -2
- package/es/components/DelimitedList/DelimitedList.js +0 -1
- package/es/components/EditInPlace/EditInPlace.d.ts +97 -5
- package/es/components/EditInPlace/EditInPlace.js +10 -6
- package/es/components/EditSidePanel/EditSidePanel.d.ts +92 -2
- package/es/components/EditSidePanel/EditSidePanel.js +8 -10
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts +61 -2
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -3
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts +61 -2
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -2
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts +61 -2
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -3
- package/es/components/ExportModal/ExportModal.d.ts +110 -2
- package/es/components/ExportModal/ExportModal.js +10 -4
- package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +83 -0
- package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +94 -0
- package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +8 -10
- package/es/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
- package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
- package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +157 -0
- package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +72 -0
- package/es/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +2 -2
- package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +5 -0
- package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +92 -0
- package/es/components/FilterPanel/index.d.ts +5 -0
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.d.ts +40 -2
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.d.ts +40 -2
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
- package/es/components/ImportModal/ImportModal.d.ts +136 -2
- package/es/components/ImportModal/ImportModal.js +3 -2
- package/es/components/InlineTip/InlineTip.d.ts +90 -2
- package/es/components/InlineTip/InlineTip.js +3 -2
- package/es/components/Nav/Nav.js +1 -1
- package/es/components/Nav/NavList.js +7 -7
- package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
- package/es/components/OptionsTile/OptionsTile.d.ts +77 -3
- package/es/components/OptionsTile/OptionsTile.js +9 -20
- package/es/components/PageHeader/PageHeader.js +3 -3
- package/es/components/PageHeader/PageHeaderUtils.d.ts +1 -1
- package/es/components/PageHeader/PageHeaderUtils.js +4 -3
- package/es/components/RemoveModal/RemoveModal.d.ts +81 -7
- package/es/components/RemoveModal/RemoveModal.js +1 -0
- package/es/components/ScrollGradient/ScrollGradient.d.ts +5 -0
- package/es/components/ScrollGradient/ScrollGradient.js +156 -0
- package/es/components/ScrollGradient/constants.d.ts +15 -0
- package/es/components/ScrollGradient/constants.js +121 -0
- package/es/components/ScrollGradient/index.d.ts +1 -0
- package/es/components/SidePanel/SidePanel.d.ts +144 -2
- package/es/components/SidePanel/SidePanel.js +100 -75
- package/es/components/StatusIcon/StatusIcon.d.ts +34 -2
- package/es/components/StatusIcon/StatusIcon.js +97 -95
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts +23 -2
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +6 -5
- package/es/components/TagOverflow/TagOverflow.d.ts +5 -0
- package/es/components/TagOverflow/TagOverflow.js +209 -0
- package/es/components/TagOverflow/constants.d.ts +14 -0
- package/es/components/TagOverflow/constants.js +30 -0
- package/es/components/TagOverflow/index.d.ts +1 -0
- package/es/components/Tearsheet/TearsheetNarrow.d.ts +105 -6
- package/es/components/Tearsheet/TearsheetNarrow.js +6 -1
- package/es/components/Toolbar/Toolbar.d.ts +23 -5
- package/es/components/Toolbar/Toolbar.js +30 -26
- package/es/components/TruncatedList/TruncatedList.js +5 -3
- package/es/components/UserAvatar/UserAvatar.js +7 -4
- package/es/components/index.d.ts +5 -2
- package/es/global/js/package-settings.d.ts +8 -0
- package/es/global/js/package-settings.js +8 -0
- package/es/index.js +9 -0
- package/es/settings.d.ts +8 -0
- package/lib/components/ActionSet/ActionSet.d.ts +38 -2
- package/lib/components/ActionSet/ActionSet.js +3 -5
- package/lib/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilder.d.ts +5 -0
- package/lib/components/ConditionBuilder/ConditionBuilder.js +132 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +10 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +100 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.d.ts +38 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js +98 -0
- package/lib/components/ConditionBuilder/assets/sampleInput.d.ts +58 -0
- package/lib/components/ConditionBuilder/index.d.ts +1 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +2 -18
- package/lib/components/CreateFullPage/CreateFullPageStep.js +20 -5
- package/lib/components/CreateSidePanel/CreateSidePanel.d.ts +81 -2
- package/lib/components/CreateSidePanel/CreateSidePanel.js +5 -2
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts +82 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +5 -117
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +12 -111
- package/lib/components/DataSpreadsheet/utils/commonEventHandlers.d.ts +4 -0
- package/lib/components/DataSpreadsheet/utils/commonEventHandlers.js +311 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -1
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts +1 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +4 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +2 -1
- package/lib/components/Datagrid/useEditableCell.js +19 -0
- package/lib/components/DelimitedList/DelimitedList.d.ts +27 -2
- package/lib/components/DelimitedList/DelimitedList.js +0 -1
- package/lib/components/EditInPlace/EditInPlace.d.ts +97 -5
- package/lib/components/EditInPlace/EditInPlace.js +10 -6
- package/lib/components/EditSidePanel/EditSidePanel.d.ts +92 -2
- package/lib/components/EditSidePanel/EditSidePanel.js +8 -10
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts +61 -2
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -3
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts +61 -2
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -2
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts +61 -2
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -3
- package/lib/components/ExportModal/ExportModal.d.ts +110 -2
- package/lib/components/ExportModal/ExportModal.js +10 -4
- package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +90 -0
- package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +101 -0
- package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +8 -10
- package/lib/components/FilterPanel/FilterPanelCheckbox/index.d.ts +1 -0
- package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts +10 -0
- package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +164 -0
- package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js +79 -0
- package/lib/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js +2 -2
- package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +5 -0
- package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +99 -0
- package/lib/components/FilterPanel/index.d.ts +5 -0
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.d.ts +40 -2
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.d.ts +40 -2
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
- package/lib/components/ImportModal/ImportModal.d.ts +136 -2
- package/lib/components/ImportModal/ImportModal.js +3 -2
- package/lib/components/InlineTip/InlineTip.d.ts +90 -2
- package/lib/components/InlineTip/InlineTip.js +3 -2
- package/lib/components/Nav/Nav.js +1 -1
- package/lib/components/Nav/NavList.js +7 -7
- package/lib/components/NotificationsPanel/NotificationsPanel.js +1 -1
- package/lib/components/OptionsTile/OptionsTile.d.ts +77 -3
- package/lib/components/OptionsTile/OptionsTile.js +9 -20
- package/lib/components/PageHeader/PageHeader.js +3 -3
- package/lib/components/PageHeader/PageHeaderUtils.d.ts +1 -1
- package/lib/components/PageHeader/PageHeaderUtils.js +4 -3
- package/lib/components/RemoveModal/RemoveModal.d.ts +81 -7
- package/lib/components/RemoveModal/RemoveModal.js +1 -0
- package/lib/components/ScrollGradient/ScrollGradient.d.ts +5 -0
- package/lib/components/ScrollGradient/ScrollGradient.js +163 -0
- package/lib/components/ScrollGradient/constants.d.ts +15 -0
- package/lib/components/ScrollGradient/constants.js +128 -0
- package/lib/components/ScrollGradient/index.d.ts +1 -0
- package/lib/components/SidePanel/SidePanel.d.ts +144 -2
- package/lib/components/SidePanel/SidePanel.js +100 -75
- package/lib/components/StatusIcon/StatusIcon.d.ts +34 -2
- package/lib/components/StatusIcon/StatusIcon.js +97 -95
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts +23 -2
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +6 -5
- package/lib/components/TagOverflow/TagOverflow.d.ts +5 -0
- package/lib/components/TagOverflow/TagOverflow.js +216 -0
- package/lib/components/TagOverflow/constants.d.ts +14 -0
- package/lib/components/TagOverflow/constants.js +34 -0
- package/lib/components/TagOverflow/index.d.ts +1 -0
- package/lib/components/Tearsheet/TearsheetNarrow.d.ts +105 -6
- package/lib/components/Tearsheet/TearsheetNarrow.js +6 -1
- package/lib/components/Toolbar/Toolbar.d.ts +23 -5
- package/lib/components/Toolbar/Toolbar.js +30 -26
- package/lib/components/TruncatedList/TruncatedList.js +5 -3
- package/lib/components/UserAvatar/UserAvatar.js +7 -4
- package/lib/components/index.d.ts +5 -2
- package/lib/global/js/package-settings.d.ts +8 -0
- package/lib/global/js/package-settings.js +8 -0
- package/lib/index.js +42 -0
- package/lib/settings.d.ts +8 -0
- package/package.json +3 -3
- package/scss/components/Coachmark/_coachmark-dragbar.scss +0 -1
- package/scss/components/Coachmark/_coachmark-tagline.scss +2 -2
- package/scss/components/ConditionBuilder/_carbon-imports.scss +9 -0
- package/scss/components/ConditionBuilder/_condition-builder.scss +25 -0
- package/scss/components/ConditionBuilder/_index-with-carbon.scss +9 -0
- package/scss/components/ConditionBuilder/_index.scss +8 -0
- package/scss/components/CreateFullPage/_create-full-page.scss +10 -10
- package/scss/components/Datagrid/styles/_useNestedRows.scss +5 -1
- package/scss/components/FilterPanel/_carbon-imports.scss +5 -0
- package/scss/components/FilterPanel/_filter-panel-accordion-item.scss +54 -0
- package/scss/components/FilterPanel/_filter-panel-accordion.scss +6 -0
- package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +60 -0
- package/scss/components/FilterPanel/_filter-panel-checkbox.scss +24 -3
- package/scss/components/FilterPanel/_filter-panel-group.scss +39 -0
- package/scss/components/FilterPanel/_filter-panel-label.scss +0 -8
- package/scss/components/FilterPanel/_filter-panel-search.scss +38 -0
- package/scss/components/FilterPanel/_filter-panel.scss +2 -0
- package/scss/components/FilterPanel/_index-with-carbon.scss +5 -0
- package/scss/components/FilterPanel/_index.scss +5 -0
- package/scss/components/Guidebanner/_guidebanner.scss +1 -1
- package/scss/components/InlineTip/_inline-tip.scss +1 -1
- package/scss/components/ProductiveCard/_productive-card.scss +13 -0
- package/scss/components/ScrollGradient/_carbon-imports.scss +9 -0
- package/scss/components/ScrollGradient/_index-with-carbon.scss +9 -0
- package/scss/components/ScrollGradient/_index.scss +8 -0
- package/scss/components/ScrollGradient/_scroll-gradient.scss +102 -0
- package/scss/components/SidePanel/_side-panel.scss +9 -9
- package/scss/components/TagOverflow/_carbon-imports.scss +9 -0
- package/scss/components/TagOverflow/_index-with-carbon.scss +9 -0
- package/scss/components/TagOverflow/_index.scss +8 -0
- package/scss/components/TagOverflow/_tag-overflow.scss +55 -0
- package/scss/components/Tearsheet/_tearsheet.scss +10 -0
- package/scss/components/UserAvatar/_user-avatar.scss +38 -4
- package/scss/components/_index-with-carbon.scss +3 -0
- package/scss/components/_index.scss +3 -0
@@ -0,0 +1,216 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
13
|
+
var React = require('react');
|
14
|
+
var index = require('../../node_modules/prop-types/index.js');
|
15
|
+
var cx = require('classnames');
|
16
|
+
var devtools = require('../../global/js/utils/devtools.js');
|
17
|
+
var settings = require('../../settings.js');
|
18
|
+
var react = require('@carbon/react');
|
19
|
+
var constants = require('./constants.js');
|
20
|
+
var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
|
21
|
+
var TagSet = require('../TagSet/TagSet.js');
|
22
|
+
|
23
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
24
|
+
|
25
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
26
|
+
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
27
|
+
|
28
|
+
var _excluded = ["className", "items", "tagComponent", "maxVisible", "multiline"],
|
29
|
+
_excluded2 = ["className", "id"];
|
30
|
+
var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
|
31
|
+
var componentName = 'TagOverflow';
|
32
|
+
|
33
|
+
// Default values for props
|
34
|
+
var defaults = {
|
35
|
+
items: []
|
36
|
+
};
|
37
|
+
|
38
|
+
/**
|
39
|
+
* TODO: A description of the component.
|
40
|
+
*/
|
41
|
+
exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
42
|
+
var className = _ref.className,
|
43
|
+
_ref$items = _ref.items,
|
44
|
+
items = _ref$items === void 0 ? defaults.items : _ref$items,
|
45
|
+
tagComponent = _ref.tagComponent,
|
46
|
+
maxVisible = _ref.maxVisible,
|
47
|
+
multiline = _ref.multiline,
|
48
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
49
|
+
var localContainerRef = React.useRef(null);
|
50
|
+
var containerRef = ref || localContainerRef;
|
51
|
+
var itemRefs = React.useRef(null);
|
52
|
+
var overflowRef = React.useRef(null);
|
53
|
+
// measurementOffset is the value of margin applied on each items
|
54
|
+
// This value is required for calculating how many items will fit within the container
|
55
|
+
var measurementOffset = 4;
|
56
|
+
var overflowIndicatorWidth = 40;
|
57
|
+
var _useState = React.useState(0),
|
58
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
59
|
+
containerWidth = _useState2[0],
|
60
|
+
setContainerWidth = _useState2[1];
|
61
|
+
var _useState3 = React.useState([]),
|
62
|
+
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
63
|
+
visibleItems = _useState4[0],
|
64
|
+
setVisibleItems = _useState4[1];
|
65
|
+
var _useState5 = React.useState([]),
|
66
|
+
_useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
|
67
|
+
overflowItems = _useState6[0],
|
68
|
+
setOverflowItems = _useState6[1];
|
69
|
+
var handleResize = function handleResize() {
|
70
|
+
setContainerWidth(containerRef.current.offsetWidth);
|
71
|
+
};
|
72
|
+
useResizeObserver.useResizeObserver(containerRef, handleResize);
|
73
|
+
var getMap = function getMap() {
|
74
|
+
if (!itemRefs.current) {
|
75
|
+
itemRefs.current = new Map();
|
76
|
+
}
|
77
|
+
return itemRefs.current;
|
78
|
+
};
|
79
|
+
var itemRefHandler = function itemRefHandler(id, node) {
|
80
|
+
var map = getMap();
|
81
|
+
if (id && node && map.get(id) !== node.offsetWidth) {
|
82
|
+
map.set(id, node.offsetWidth);
|
83
|
+
}
|
84
|
+
};
|
85
|
+
var getVisibleItems = React.useCallback(function () {
|
86
|
+
if (!itemRefs.current) {
|
87
|
+
return items;
|
88
|
+
}
|
89
|
+
if (multiline) {
|
90
|
+
var _visibleItems = maxVisible ? items === null || items === void 0 ? void 0 : items.slice(0, maxVisible) : items;
|
91
|
+
return _visibleItems;
|
92
|
+
}
|
93
|
+
var map = getMap();
|
94
|
+
var overflowContainerWidth = overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
|
95
|
+
var maxWidth = containerWidth - overflowContainerWidth;
|
96
|
+
var childrenWidth = 0;
|
97
|
+
var maxReached = false;
|
98
|
+
return items.reduce(function (prev, cur) {
|
99
|
+
if (!maxReached) {
|
100
|
+
var itemWidth = map.get(cur.id) + measurementOffset;
|
101
|
+
var fits = itemWidth + childrenWidth < maxWidth;
|
102
|
+
if (fits) {
|
103
|
+
childrenWidth += itemWidth;
|
104
|
+
prev.push(cur);
|
105
|
+
} else {
|
106
|
+
maxReached = true;
|
107
|
+
}
|
108
|
+
}
|
109
|
+
return prev;
|
110
|
+
}, []);
|
111
|
+
}, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible]);
|
112
|
+
var getCustomComponent = function getCustomComponent(item) {
|
113
|
+
var className = item.className,
|
114
|
+
id = item.id,
|
115
|
+
other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded2);
|
116
|
+
return /*#__PURE__*/React__default["default"].createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
|
117
|
+
className: cx__default["default"]("".concat(blockClass, "__item"), className),
|
118
|
+
ref: function ref(node) {
|
119
|
+
return itemRefHandler(id, node);
|
120
|
+
}
|
121
|
+
}));
|
122
|
+
};
|
123
|
+
React.useEffect(function () {
|
124
|
+
var visibleItemsArr = getVisibleItems();
|
125
|
+
if (maxVisible && maxVisible < visibleItemsArr.length) {
|
126
|
+
var _visibleItemsArr;
|
127
|
+
visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
|
128
|
+
}
|
129
|
+
var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
|
130
|
+
var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
|
131
|
+
return {
|
132
|
+
type: item.tagType,
|
133
|
+
label: item.label
|
134
|
+
};
|
135
|
+
});
|
136
|
+
setVisibleItems(visibleItemsArr);
|
137
|
+
setOverflowItems(overflowItemsArr);
|
138
|
+
}, [containerWidth, items, maxVisible, getVisibleItems]);
|
139
|
+
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
140
|
+
className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
|
141
|
+
ref: containerRef,
|
142
|
+
role: "main"
|
143
|
+
}, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
|
144
|
+
// Render custom components
|
145
|
+
if (tagComponent) {
|
146
|
+
return getCustomComponent(item);
|
147
|
+
} else {
|
148
|
+
// If there is no template prop, then render items as Tags
|
149
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
150
|
+
ref: function ref(node) {
|
151
|
+
return itemRefHandler(item.id, node);
|
152
|
+
},
|
153
|
+
key: item.id
|
154
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
|
155
|
+
align: "bottom",
|
156
|
+
label: item.label
|
157
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
|
158
|
+
className: "".concat(blockClass, "__item--tag"),
|
159
|
+
type: item.tagType
|
160
|
+
}, item.label)));
|
161
|
+
}
|
162
|
+
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
163
|
+
className: "".concat(blockClass, "__indicator"),
|
164
|
+
ref: overflowRef
|
165
|
+
}, overflowItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(TagSet.TagSet, {
|
166
|
+
tags: overflowItems,
|
167
|
+
allTagsModalTitle: "All tags",
|
168
|
+
containingElementRef: overflowRef,
|
169
|
+
allTagsModalSearchLabel: "Search all tags",
|
170
|
+
allTagsModalSearchPlaceholderText: "Search all tags",
|
171
|
+
showAllTagsLabel: "Show all tags"
|
172
|
+
})));
|
173
|
+
});
|
174
|
+
|
175
|
+
// Return a placeholder if not released and not enabled by feature flag
|
176
|
+
exports.TagOverflow = settings.pkg.checkComponentEnabled(exports.TagOverflow, componentName);
|
177
|
+
|
178
|
+
// The display name of the component, used by React. Note that displayName
|
179
|
+
// is used in preference to relying on function.name.
|
180
|
+
exports.TagOverflow.displayName = componentName;
|
181
|
+
var tagTypes = Object.keys(constants.TYPES);
|
182
|
+
|
183
|
+
// The types and DocGen commentary for the component props,
|
184
|
+
// in alphabetical order (for consistency).
|
185
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
186
|
+
exports.TagOverflow.propTypes = {
|
187
|
+
/**
|
188
|
+
* Provide an optional class to be applied to the containing node.
|
189
|
+
*/
|
190
|
+
className: index["default"].string,
|
191
|
+
/**
|
192
|
+
* The items to be shown in the TagOverflow. Each item is specified as an object with properties:
|
193
|
+
* **label**\* (required) to supply the item content,
|
194
|
+
* **id**\* (required) to uniquely identify the each item.
|
195
|
+
* **tagType** the type value to be passed to the Carbon Tag component
|
196
|
+
* if you are passing an tagComponent prop for rendering custom components,
|
197
|
+
* then pass the props required for your custom component as the properties of item object
|
198
|
+
*/
|
199
|
+
items: index["default"].arrayOf(index["default"].shape({
|
200
|
+
id: index["default"].string.isRequired,
|
201
|
+
label: index["default"].string.isRequired,
|
202
|
+
tagType: index["default"].oneOf(tagTypes)
|
203
|
+
}).isRequired),
|
204
|
+
/**
|
205
|
+
* maximum visible items
|
206
|
+
*/
|
207
|
+
maxVisible: index["default"].number,
|
208
|
+
/**
|
209
|
+
* display items in multiple lines
|
210
|
+
*/
|
211
|
+
multiline: index["default"].bool,
|
212
|
+
/** Component definition of the items to be rendered inside TagOverflow.
|
213
|
+
* If this is not passed, items will be rendered as Tag component
|
214
|
+
*/
|
215
|
+
tagComponent: index["default"].elementType
|
216
|
+
};
|
@@ -0,0 +1,14 @@
|
|
1
|
+
export const TYPES: {
|
2
|
+
red: string;
|
3
|
+
magenta: string;
|
4
|
+
purple: string;
|
5
|
+
blue: string;
|
6
|
+
cyan: string;
|
7
|
+
teal: string;
|
8
|
+
green: string;
|
9
|
+
gray: string;
|
10
|
+
'cool-gray': string;
|
11
|
+
'warm-gray': string;
|
12
|
+
'high-contrast': string;
|
13
|
+
outline: string;
|
14
|
+
};
|
@@ -0,0 +1,34 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
// Copyright IBM Corp. 2024, 2024
|
13
|
+
//
|
14
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
15
|
+
// LICENSE file in the root directory of this source tree.
|
16
|
+
//
|
17
|
+
|
18
|
+
// Copied from @carbon/react/es/components/Tag/Tag.js
|
19
|
+
var TYPES = {
|
20
|
+
red: 'Red',
|
21
|
+
magenta: 'Magenta',
|
22
|
+
purple: 'Purple',
|
23
|
+
blue: 'Blue',
|
24
|
+
cyan: 'Cyan',
|
25
|
+
teal: 'Teal',
|
26
|
+
green: 'Green',
|
27
|
+
gray: 'Gray',
|
28
|
+
'cool-gray': 'Cool-Gray',
|
29
|
+
'warm-gray': 'Warm-Gray',
|
30
|
+
'high-contrast': 'High-Contrast',
|
31
|
+
outline: 'Outline'
|
32
|
+
};
|
33
|
+
|
34
|
+
exports.TYPES = TYPES;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { TagOverflow } from "./TagOverflow";
|
@@ -1,3 +1,94 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
/// <reference path="../../../src/custom-typings/index.d.ts" />
|
8
|
+
import React, { ReactNode, PropsWithChildren } from 'react';
|
9
|
+
import PropTypes from 'prop-types';
|
10
|
+
import { ButtonProps } from '@carbon/react';
|
11
|
+
type closeIconDescriptionTypes = {
|
12
|
+
hasCloseIcon: true;
|
13
|
+
closeIconDescription: string;
|
14
|
+
};
|
15
|
+
interface TearsheetNarrowProps extends PropsWithChildren {
|
16
|
+
/**
|
17
|
+
* The navigation actions to be shown as buttons in the action area at the
|
18
|
+
* bottom of the tearsheet. Each action is specified as an object with
|
19
|
+
* optional fields: 'label' to supply the button label, 'kind' to select the
|
20
|
+
* button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
|
21
|
+
* display a loading indicator, and 'onClick' to receive notifications when
|
22
|
+
* the button is clicked. Additional fields in the object will be passed to
|
23
|
+
* the Button component, and these can include 'disabled', 'ref', 'className',
|
24
|
+
* and any other Button props. Any other fields in the object will be passed
|
25
|
+
* through to the button element as HTML attributes.
|
26
|
+
*
|
27
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
28
|
+
*/
|
29
|
+
actions?: ButtonProps[];
|
30
|
+
/**
|
31
|
+
* The aria-label for the tearsheet, which is optional.
|
32
|
+
* if it is not passed, the title will be used as the aria-label.
|
33
|
+
*/
|
34
|
+
ariaLabel?: string;
|
35
|
+
/**
|
36
|
+
* An optional class or classes to be added to the outermost element.
|
37
|
+
*/
|
38
|
+
className?: string;
|
39
|
+
/**
|
40
|
+
* The accessibility title for the close icon (if shown).
|
41
|
+
*
|
42
|
+
* **Note:** This prop is only required if a close icon is shown, i.e. if
|
43
|
+
* there are a no navigation actions and/or hasCloseIcon is true.
|
44
|
+
*/
|
45
|
+
closeIconDescription?: closeIconDescriptionTypes;
|
46
|
+
/**
|
47
|
+
* A description of the flow, displayed in the header area of the tearsheet.
|
48
|
+
*/
|
49
|
+
description?: ReactNode;
|
50
|
+
/**
|
51
|
+
* Enable a close icon ('x') in the header area of the tearsheet. By default,
|
52
|
+
* a tearsheet does not display a close icon, but one should be enabled if
|
53
|
+
* the tearsheet is read-only or has no navigation actions (sometimes called
|
54
|
+
* a "passive tearsheet").
|
55
|
+
*/
|
56
|
+
hasCloseIcon?: boolean;
|
57
|
+
/**
|
58
|
+
* A label for the tearsheet, displayed in the header area of the tearsheet
|
59
|
+
* to maintain context for the tearsheet (e.g. as the title changes from page
|
60
|
+
* to page of a multi-page task).
|
61
|
+
*/
|
62
|
+
label?: ReactNode;
|
63
|
+
/**
|
64
|
+
* An optional handler that is called when the user closes the tearsheet (by
|
65
|
+
* clicking the close button, if enabled, or clicking outside, if enabled).
|
66
|
+
* Returning `false` here prevents the modal from closing.
|
67
|
+
*/
|
68
|
+
onClose?: () => boolean | void;
|
69
|
+
/**
|
70
|
+
* Specifies whether the tearsheet is currently open.
|
71
|
+
*/
|
72
|
+
open?: boolean;
|
73
|
+
/**
|
74
|
+
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
75
|
+
*/
|
76
|
+
portalTarget?: ReactNode;
|
77
|
+
/**
|
78
|
+
* The main title of the tearsheet, displayed in the header area.
|
79
|
+
*/
|
80
|
+
title?: ReactNode;
|
81
|
+
/**
|
82
|
+
* **Deprecated**
|
83
|
+
*
|
84
|
+
* The position of the top of tearsheet in the viewport. The 'normal'
|
85
|
+
* position is a short distance down from the top of the
|
86
|
+
* viewport, leaving room at the top for a global header bar to show through
|
87
|
+
* from below. The 'lower' position (the default) provides a little extra room at the top
|
88
|
+
* to allow an action bar navigation or breadcrumbs to also show through.
|
89
|
+
*/
|
90
|
+
verticalPosition?: 'normal' | 'lower';
|
91
|
+
}
|
1
92
|
/**
|
2
93
|
* A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
|
3
94
|
* that keeps users in-context and focused by bringing actionable content front
|
@@ -6,9 +97,17 @@
|
|
6
97
|
* A narrow tearsheet comprises 3 zones: a heading area including a title, the
|
7
98
|
* main content area, and a set of action buttons.
|
8
99
|
*/
|
9
|
-
export let TearsheetNarrow: React.ForwardRefExoticComponent<React.RefAttributes<
|
10
|
-
export
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
100
|
+
export declare let TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<unknown>>;
|
101
|
+
export declare const deprecatedProps: {
|
102
|
+
/**
|
103
|
+
* **Deprecated**
|
104
|
+
*
|
105
|
+
* The position of the top of tearsheet in the viewport. The 'normal'
|
106
|
+
* position is a short distance down from the top of the
|
107
|
+
* viewport, leaving room at the top for a global header bar to show through
|
108
|
+
* from below. The 'lower' position (the default) provides a little extra room at the top
|
109
|
+
* to allow an action bar navigation or breadcrumbs to also show through.
|
110
|
+
*/
|
111
|
+
verticalPosition: PropTypes.Requireable<string>;
|
112
|
+
};
|
113
|
+
export {};
|
@@ -41,6 +41,7 @@ var defaults = {
|
|
41
41
|
* A narrow tearsheet comprises 3 zones: a heading area including a title, the
|
42
42
|
* main content area, and a set of action buttons.
|
43
43
|
*/
|
44
|
+
|
44
45
|
exports.TearsheetNarrow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
45
46
|
var _ref$verticalPosition = _ref.verticalPosition,
|
46
47
|
verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
|
@@ -91,7 +92,8 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
91
92
|
*
|
92
93
|
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
93
94
|
*/
|
94
|
-
actions: propsHelper.allPropTypes([
|
95
|
+
actions: propsHelper.allPropTypes([/**@ts-ignore */
|
96
|
+
ActionSet.ActionSet.validateActions(function () {
|
95
97
|
return 'lg';
|
96
98
|
}), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
|
97
99
|
kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
@@ -115,6 +117,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
115
117
|
* **Note:** This prop is only required if a close icon is shown, i.e. if
|
116
118
|
* there are a no navigation actions and/or hasCloseIcon is true.
|
117
119
|
*/
|
120
|
+
/**@ts-ignore */
|
118
121
|
closeIconDescription: index["default"].string.isRequired.if(function (_ref2) {
|
119
122
|
var actions = _ref2.actions,
|
120
123
|
hasCloseIcon = _ref2.hasCloseIcon;
|
@@ -130,6 +133,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
130
133
|
* the tearsheet is read-only or has no navigation actions (sometimes called
|
131
134
|
* a "passive tearsheet").
|
132
135
|
*/
|
136
|
+
/**@ts-ignore*/
|
133
137
|
hasCloseIcon: index["default"].bool,
|
134
138
|
/**
|
135
139
|
* A label for the tearsheet, displayed in the header area of the tearsheet
|
@@ -150,6 +154,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
150
154
|
/**
|
151
155
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
152
156
|
*/
|
157
|
+
/**@ts-ignore */
|
153
158
|
portalTarget: TearsheetShell.portalType,
|
154
159
|
/**
|
155
160
|
* The main title of the tearsheet, displayed in the header area.
|
@@ -1,6 +1,24 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2021, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
6
7
|
import React from 'react';
|
8
|
+
declare const blockClass: string;
|
9
|
+
interface ToolbarProps {
|
10
|
+
/** Provide an optional class to be applied to the containing node */
|
11
|
+
className?: string;
|
12
|
+
/** Determines whether the `Toolbar` is rendered vertically */
|
13
|
+
vertical?: boolean;
|
14
|
+
}
|
15
|
+
interface ToolbarContextType {
|
16
|
+
vertical?: boolean;
|
17
|
+
}
|
18
|
+
declare const ToolbarContext: React.Context<ToolbarContextType>;
|
19
|
+
/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
|
20
|
+
declare let Toolbar: React.ForwardRefExoticComponent<ToolbarProps & {
|
21
|
+
children?: React.ReactNode;
|
22
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
23
|
+
declare const componentName = "Toolbar";
|
24
|
+
export { blockClass, componentName, Toolbar, ToolbarContext };
|
@@ -26,50 +26,54 @@ var _excluded = ["children", "className", "vertical"];
|
|
26
26
|
var checkComponentEnabled = settings.pkg.checkComponentEnabled,
|
27
27
|
prefix = settings.pkg.prefix;
|
28
28
|
var blockClass = "".concat(prefix, "--toolbar");
|
29
|
-
var ToolbarContext = /*#__PURE__*/React.createContext();
|
29
|
+
var ToolbarContext = /*#__PURE__*/React.createContext({});
|
30
30
|
|
31
31
|
/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
|
32
|
-
exports.Toolbar = /*#__PURE__*/React.forwardRef(function (
|
33
|
-
var children =
|
34
|
-
className =
|
35
|
-
vertical =
|
36
|
-
rest = _rollupPluginBabelHelpers.objectWithoutProperties(
|
32
|
+
exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref, r) {
|
33
|
+
var children = _ref.children,
|
34
|
+
className = _ref.className,
|
35
|
+
vertical = _ref.vertical,
|
36
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
37
37
|
var focusableElements = React.useRef();
|
38
38
|
var getFocusableElements$1 = React.useCallback(function () {
|
39
39
|
return focusableElements.current;
|
40
40
|
}, [focusableElements]);
|
41
|
-
var
|
42
|
-
var ref = r ||
|
43
|
-
var _useState = React.useState(),
|
41
|
+
var localRef = React.useRef(null);
|
42
|
+
var ref = r || localRef;
|
43
|
+
var _useState = React.useState(-1),
|
44
44
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
45
45
|
focus = _useState2[0],
|
46
46
|
setFocus = _useState2[1];
|
47
47
|
React.useEffect(function () {
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
48
|
+
var _getFocusableElements2;
|
49
|
+
focusableElements.current = getFocusableElements.getFocusableElements(ref === null || ref === void 0 ? void 0 : ref['current']);
|
50
|
+
focus !== -1 && ((_getFocusableElements2 = getFocusableElements$1()) === null || _getFocusableElements2 === void 0 ? void 0 : _getFocusableElements2.forEach(function (element, index) {
|
51
|
+
element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', '-1');
|
52
|
+
}));
|
52
53
|
});
|
53
54
|
React.useEffect(function () {
|
54
|
-
|
55
|
+
var _getFocusableElements3;
|
56
|
+
focus !== -1 && ((_getFocusableElements3 = getFocusableElements$1()) === null || _getFocusableElements3 === void 0 ? void 0 : _getFocusableElements3[focus].focus());
|
55
57
|
}, [focus, getFocusableElements$1]);
|
56
|
-
var
|
57
|
-
|
58
|
-
arrowNext =
|
59
|
-
arrowPrevious =
|
58
|
+
var _ref2 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
|
59
|
+
_ref3 = _rollupPluginBabelHelpers.slicedToArray(_ref2, 2),
|
60
|
+
arrowNext = _ref3[0],
|
61
|
+
arrowPrevious = _ref3[1];
|
60
62
|
function onArrowDown(increment) {
|
63
|
+
var _getFocusableElements4;
|
61
64
|
var nextFocus = focus + increment;
|
62
|
-
getFocusableElements$1()[nextFocus] && setFocus(nextFocus);
|
65
|
+
((_getFocusableElements4 = getFocusableElements$1()) === null || _getFocusableElements4 === void 0 ? void 0 : _getFocusableElements4[nextFocus]) && setFocus(nextFocus);
|
63
66
|
}
|
64
|
-
function onFocus(
|
65
|
-
var target =
|
67
|
+
function onFocus(_ref4) {
|
68
|
+
var target = _ref4.target;
|
66
69
|
var elements = getFocusableElements$1();
|
67
|
-
elements.includes(target) && setFocus(elements.indexOf(target));
|
70
|
+
(elements === null || elements === void 0 ? void 0 : elements.includes(target)) && setFocus(elements.indexOf(target));
|
68
71
|
}
|
69
|
-
function onKeyDown(
|
70
|
-
var
|
71
|
-
|
72
|
-
|
72
|
+
function onKeyDown(_ref5) {
|
73
|
+
var _getFocusableElements5;
|
74
|
+
var key = _ref5.key,
|
75
|
+
target = _ref5.target;
|
76
|
+
if ((_getFocusableElements5 = getFocusableElements$1()) !== null && _getFocusableElements5 !== void 0 && _getFocusableElements5.includes(target)) {
|
73
77
|
switch (key) {
|
74
78
|
case arrowNext:
|
75
79
|
onArrowDown(1);
|
@@ -97,9 +97,11 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
|
|
97
97
|
var items = listRef.current.childNodes;
|
98
98
|
var _listHeight = 0;
|
99
99
|
for (var index = 0; index < numItemsToShow; index++) {
|
100
|
-
|
101
|
-
|
102
|
-
|
100
|
+
if (items[index]) {
|
101
|
+
var _window;
|
102
|
+
var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
|
103
|
+
_listHeight += parseInt(height);
|
104
|
+
}
|
103
105
|
}
|
104
106
|
setListHeight(_listHeight);
|
105
107
|
}
|
@@ -55,10 +55,12 @@ var componentName = 'UserAvatar';
|
|
55
55
|
|
56
56
|
var defaults = {
|
57
57
|
size: 'md',
|
58
|
-
tooltipAlignment: 'bottom'
|
58
|
+
tooltipAlignment: 'bottom',
|
59
|
+
backgroundColor: 'order-1-cyan'
|
59
60
|
};
|
60
61
|
exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
61
|
-
var backgroundColor = _ref.backgroundColor,
|
62
|
+
var _ref$backgroundColor = _ref.backgroundColor,
|
63
|
+
backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
|
62
64
|
className = _ref.className,
|
63
65
|
image = _ref.image,
|
64
66
|
imageDescription = _ref.imageDescription,
|
@@ -123,7 +125,8 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
123
125
|
// example: [`${blockClass}__here-if-small`]: size === 'sm',
|
124
126
|
}),
|
125
127
|
ref: ref,
|
126
|
-
role: "img"
|
128
|
+
role: "img",
|
129
|
+
"aria-hidden": "true"
|
127
130
|
}, devtools.getDevtoolsProps(componentName)), getItem());
|
128
131
|
};
|
129
132
|
if (tooltipText) {
|
@@ -150,7 +153,7 @@ exports.UserAvatar.propTypes = {
|
|
150
153
|
/**
|
151
154
|
* Provide the background color need to be set for UserAvatar.
|
152
155
|
*/
|
153
|
-
backgroundColor: index["default"].oneOf(['
|
156
|
+
backgroundColor: index["default"].oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
|
154
157
|
/**
|
155
158
|
* Provide an optional class to be applied to the containing node.
|
156
159
|
*/
|
@@ -49,8 +49,11 @@ export { SearchBar } from "./SearchBar";
|
|
49
49
|
export { Nav } from "./Nav";
|
50
50
|
export { StringFormatter } from "./StringFormatter";
|
51
51
|
export { UserAvatar } from "./UserAvatar";
|
52
|
+
export { ScrollGradient } from "./ScrollGradient";
|
52
53
|
export { StatusIndicator } from "./StatusIndicator";
|
54
|
+
export { TagOverflow } from "./TagOverflow";
|
53
55
|
export { ActionBar } from "./ActionBar";
|
56
|
+
export { ConditionBuilder } from "./ConditionBuilder";
|
54
57
|
export { ComboButton, ComboButtonItem } from "./ComboButton";
|
55
58
|
export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
|
56
59
|
export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";
|
@@ -59,9 +62,9 @@ export { HTTPError403, HTTPError404, HTTPErrorOther } from "./HTTPErrors";
|
|
59
62
|
export { Tearsheet, TearsheetNarrow } from "./Tearsheet";
|
60
63
|
export { Toolbar, ToolbarButton, ToolbarGroup } from "./Toolbar";
|
61
64
|
export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from "./WebTerminal";
|
62
|
-
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext } from "./Datagrid";
|
65
|
+
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext, useEditableCell } from "./Datagrid";
|
63
66
|
export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
|
64
67
|
export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
|
65
68
|
export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
|
66
69
|
export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
|
67
|
-
export { FilterPanel, FilterPanelCheckbox, FilterPanelLabel } from "./FilterPanel";
|
70
|
+
export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
|
@@ -80,13 +80,21 @@ declare namespace defaults {
|
|
80
80
|
let TruncatedList: boolean;
|
81
81
|
let DelimitedList: boolean;
|
82
82
|
let FullPageError: boolean;
|
83
|
+
let ScrollGradient: boolean;
|
83
84
|
let StringFormatter: boolean;
|
84
85
|
let StatusIndicator: boolean;
|
85
86
|
let StatusIndicatorStep: boolean;
|
87
|
+
let TagOverflow: boolean;
|
86
88
|
let ActionBar: boolean;
|
87
89
|
let FilterPanel: boolean;
|
90
|
+
let FilterPanelAccordion: boolean;
|
91
|
+
let FilterPanelAccordionItem: boolean;
|
88
92
|
let FilterPanelCheckbox: boolean;
|
93
|
+
let FilterPanelCheckboxWithOverflow: boolean;
|
94
|
+
let FilterPanelGroup: boolean;
|
89
95
|
let FilterPanelLabel: boolean;
|
96
|
+
let FilterPanelSearch: boolean;
|
97
|
+
let ConditionBuilder: boolean;
|
90
98
|
let Coachmark: boolean;
|
91
99
|
let CoachmarkBeacon: boolean;
|
92
100
|
let CoachmarkButton: boolean;
|
@@ -83,13 +83,21 @@ var defaults = {
|
|
83
83
|
TruncatedList: false,
|
84
84
|
DelimitedList: false,
|
85
85
|
FullPageError: false,
|
86
|
+
ScrollGradient: false,
|
86
87
|
StringFormatter: false,
|
87
88
|
StatusIndicator: false,
|
88
89
|
StatusIndicatorStep: false,
|
90
|
+
TagOverflow: false,
|
89
91
|
ActionBar: false,
|
90
92
|
FilterPanel: false,
|
93
|
+
FilterPanelAccordion: false,
|
94
|
+
FilterPanelAccordionItem: false,
|
91
95
|
FilterPanelCheckbox: false,
|
96
|
+
FilterPanelCheckboxWithOverflow: false,
|
97
|
+
FilterPanelGroup: false,
|
92
98
|
FilterPanelLabel: false,
|
99
|
+
FilterPanelSearch: false,
|
100
|
+
ConditionBuilder: false,
|
93
101
|
/* new component flags here - comment used by generate CLI */
|
94
102
|
|
95
103
|
// Novice to pro components not yet reviewed and released:
|