@carbon/ibm-products 2.43.2-canary.12 → 2.43.2-canary.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +7 -4
- package/es/components/Datagrid/types/index.d.ts +13 -2
- package/es/components/Datagrid/useActionsColumn.d.ts +8 -1
- package/es/components/Datagrid/useActionsColumn.js +7 -6
- package/es/components/Tearsheet/Tearsheet.d.ts +8 -1
- package/es/components/Tearsheet/Tearsheet.js +9 -1
- package/es/components/Tearsheet/TearsheetNarrow.d.ts +11 -0
- package/es/components/Tearsheet/TearsheetNarrow.js +12 -0
- package/es/components/Tearsheet/TearsheetShell.d.ts +10 -0
- package/es/components/Tearsheet/TearsheetShell.js +17 -3
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +7 -4
- package/lib/components/Datagrid/types/index.d.ts +13 -2
- package/lib/components/Datagrid/useActionsColumn.d.ts +8 -1
- package/lib/components/Datagrid/useActionsColumn.js +7 -6
- package/lib/components/Tearsheet/Tearsheet.d.ts +8 -1
- package/lib/components/Tearsheet/Tearsheet.js +9 -1
- package/lib/components/Tearsheet/TearsheetNarrow.d.ts +11 -0
- package/lib/components/Tearsheet/TearsheetNarrow.js +12 -0
- package/lib/components/Tearsheet/TearsheetShell.d.ts +10 -0
- package/lib/components/Tearsheet/TearsheetShell.js +16 -2
- package/package.json +2 -2
- package/telemetry.yml +1 -0
@@ -211,9 +211,12 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
211
211
|
}
|
212
212
|
if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
|
213
213
|
if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
|
214
|
-
var _activeCellFullData$r;
|
215
214
|
var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
|
216
|
-
|
215
|
+
if (activeCellFullData) {
|
216
|
+
setActiveCellContent(activeCellFullData.render('Cell'));
|
217
|
+
} else {
|
218
|
+
setActiveCellContent(null);
|
219
|
+
}
|
217
220
|
}
|
218
221
|
if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
|
219
222
|
setActiveCellContent(null);
|
@@ -428,8 +431,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
428
431
|
var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
|
429
432
|
var activeCellValue;
|
430
433
|
if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
|
431
|
-
var _activeCellFullData$
|
432
|
-
activeCellValue = activeCellFullData ? (_activeCellFullData$
|
434
|
+
var _activeCellFullData$r;
|
435
|
+
activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
|
433
436
|
}
|
434
437
|
setCellEditorValue(activeCellValue || '');
|
435
438
|
if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
|
@@ -5,10 +5,10 @@ import { RadioButtonProps } from '@carbon/react/lib/components/RadioButton/Radio
|
|
5
5
|
import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
|
6
6
|
import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
|
7
7
|
import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
|
8
|
-
import { CSSProperties, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
|
8
|
+
import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
|
9
9
|
import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
|
10
10
|
import { CarbonIconType } from '@carbon/react/icons';
|
11
|
-
import { type ButtonProps } from '@carbon/react';
|
11
|
+
import { IconButton, type ButtonProps } from '@carbon/react';
|
12
12
|
import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
|
13
13
|
export type Size = 'xs' | 'sm' | 'md' | 'lg';
|
14
14
|
export interface ResizerProps {
|
@@ -122,6 +122,16 @@ interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectSta
|
|
122
122
|
}
|
123
123
|
export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
|
124
124
|
}
|
125
|
+
export interface RowAction {
|
126
|
+
id?: string;
|
127
|
+
itemText?: string;
|
128
|
+
icon?: ComponentType | FunctionComponent;
|
129
|
+
align?: React.ComponentProps<typeof IconButton>['align'];
|
130
|
+
shouldHideMenuItem?: (...args: any[]) => void;
|
131
|
+
shouldDisableMenuItem?: (...args: any[]) => void;
|
132
|
+
disabled?: boolean;
|
133
|
+
onClick?: (...args: any[]) => void;
|
134
|
+
}
|
125
135
|
export interface DataGridState<T extends object = any> extends TableCommonProps, UsePaginationInstanceProps<T>, Omit<TableInstance<T>, 'state' | 'headers' | 'rows' | 'columns'>, Omit<UseFiltersInstanceProps<T>, 'rows'>, UseRowSelectInstanceProps<T>, Pick<UseRowSelectInstanceProps<T>, 'toggleAllRowsSelected'> {
|
126
136
|
withVirtualScroll?: boolean;
|
127
137
|
DatagridPagination?: JSXElementConstructor<any>;
|
@@ -144,6 +154,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
|
|
144
154
|
batchActions?: boolean;
|
145
155
|
row: DatagridRow;
|
146
156
|
rows: Array<DatagridRow<any>>;
|
157
|
+
rowActions?: RowAction[];
|
147
158
|
columns: Array<DatagridColumn>;
|
148
159
|
key?: any;
|
149
160
|
rowSize?: Size;
|
@@ -1,2 +1,9 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2021, 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { Hooks } from 'react-table';
|
8
|
+
declare const useActionsColumn: (hooks: Hooks) => void;
|
1
9
|
export default useActionsColumn;
|
2
|
-
declare function useActionsColumn(hooks: any): void;
|
@@ -17,9 +17,10 @@ var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuIt
|
|
17
17
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
18
18
|
var useActionsColumn = function useActionsColumn(hooks) {
|
19
19
|
var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
|
20
|
-
var
|
21
|
-
|
22
|
-
|
20
|
+
var _ref = instance,
|
21
|
+
rowActions = _ref.rowActions,
|
22
|
+
isFetching = _ref.isFetching,
|
23
|
+
selectedRowIds = _ref.state.selectedRowIds;
|
23
24
|
var getDisabledState = function getDisabledState(rowIndex) {
|
24
25
|
var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
|
25
26
|
return Number(n);
|
@@ -79,10 +80,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
79
80
|
return;
|
80
81
|
}
|
81
82
|
e.stopPropagation();
|
82
|
-
_onClick(id, row, e);
|
83
|
+
_onClick === null || _onClick === void 0 || _onClick(id, row, e);
|
83
84
|
},
|
84
85
|
disabled: isDisabledByRow
|
85
|
-
}), /*#__PURE__*/React__default.createElement(Icon, null)));
|
86
|
+
}), Icon && /*#__PURE__*/React__default.createElement(Icon, null)));
|
86
87
|
})), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(OverflowMenu, {
|
87
88
|
align: "left",
|
88
89
|
size: "sm",
|
@@ -108,7 +109,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
108
109
|
disabled: isDisabledByRow,
|
109
110
|
onClick: function onClick(e) {
|
110
111
|
e.stopPropagation();
|
111
|
-
_onClick2(id, row, e);
|
112
|
+
_onClick2 === null || _onClick2 === void 0 || _onClick2(id, row, e);
|
112
113
|
},
|
113
114
|
key: id
|
114
115
|
}));
|
@@ -99,9 +99,16 @@ interface TearsheetProps extends PropsWithChildren {
|
|
99
99
|
*/
|
100
100
|
portalTarget: ReactNode;
|
101
101
|
/**
|
102
|
-
* Specify a CSS selector that matches the DOM element that should be
|
102
|
+
* Specify a CSS selector that matches the DOM element that should be
|
103
|
+
* focused when the Modal opens.
|
103
104
|
*/
|
104
105
|
selectorPrimaryFocus?: string;
|
106
|
+
/**
|
107
|
+
* Specify the CSS selectors that match the floating menus.
|
108
|
+
*
|
109
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
110
|
+
*/
|
111
|
+
selectorsFloatingMenus?: string[];
|
105
112
|
/**
|
106
113
|
* The main title of the tearsheet, displayed in the header area.
|
107
114
|
*/
|
@@ -190,9 +190,17 @@ Tearsheet.propTypes = _objectSpread2({
|
|
190
190
|
/**@ts-ignore */
|
191
191
|
portalTarget: portalType,
|
192
192
|
/**
|
193
|
-
* Specify a CSS selector that matches the DOM element that should be
|
193
|
+
* Specify a CSS selector that matches the DOM element that should be
|
194
|
+
* focused when the Modal opens.
|
194
195
|
*/
|
195
196
|
selectorPrimaryFocus: PropTypes.string,
|
197
|
+
/**
|
198
|
+
* Specify the CSS selectors that match the floating menus.
|
199
|
+
*
|
200
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
201
|
+
*/
|
202
|
+
/**@ts-ignore*/
|
203
|
+
selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
|
196
204
|
/**
|
197
205
|
* The main title of the tearsheet, displayed in the header area.
|
198
206
|
*/
|
@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
|
|
64
64
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
65
65
|
*/
|
66
66
|
portalTarget?: ReactNode;
|
67
|
+
/**
|
68
|
+
* Specify a CSS selector that matches the DOM element that should be
|
69
|
+
* focused when the Modal opens.
|
70
|
+
*/
|
71
|
+
selectorPrimaryFocus?: string;
|
72
|
+
/**
|
73
|
+
* Specify the CSS selectors that match the floating menus.
|
74
|
+
*
|
75
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
76
|
+
*/
|
77
|
+
selectorsFloatingMenus?: string[];
|
67
78
|
/**
|
68
79
|
* The main title of the tearsheet, displayed in the header area.
|
69
80
|
*/
|
@@ -148,6 +148,18 @@ TearsheetNarrow.propTypes = _objectSpread2({
|
|
148
148
|
*/
|
149
149
|
/**@ts-ignore */
|
150
150
|
portalTarget: portalType,
|
151
|
+
/**
|
152
|
+
* Specify a CSS selector that matches the DOM element that should be
|
153
|
+
* focused when the Modal opens.
|
154
|
+
*/
|
155
|
+
selectorPrimaryFocus: PropTypes.string,
|
156
|
+
/**
|
157
|
+
* Specify the CSS selectors that match the floating menus.
|
158
|
+
*
|
159
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
160
|
+
*/
|
161
|
+
/**@ts-ignore*/
|
162
|
+
selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
|
151
163
|
/**
|
152
164
|
* The main title of the tearsheet, displayed in the header area.
|
153
165
|
*/
|
@@ -81,7 +81,17 @@ interface TearsheetShellProps extends PropsWithChildren {
|
|
81
81
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
82
82
|
*/
|
83
83
|
portalTarget?: ReactNode;
|
84
|
+
/**
|
85
|
+
* Specify a CSS selector that matches the DOM element that should be
|
86
|
+
* focused when the Modal opens.
|
87
|
+
*/
|
84
88
|
selectorPrimaryFocus?: string;
|
89
|
+
/**
|
90
|
+
* Specify the CSS selectors that match the floating menus.
|
91
|
+
*
|
92
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
93
|
+
*/
|
94
|
+
selectorsFloatingMenus?: string[];
|
85
95
|
/**
|
86
96
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
87
97
|
*/
|
@@ -5,7 +5,7 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
8
|
+
import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
9
|
import React__default, { useRef, useState, useEffect } from 'react';
|
10
10
|
import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
|
11
11
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
@@ -20,7 +20,7 @@ import { useFocus } from '../../global/js/hooks/useFocus.js';
|
|
20
20
|
import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
|
21
21
|
import { ActionSet } from '../ActionSet/ActionSet.js';
|
22
22
|
|
23
|
-
var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
|
23
|
+
var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
|
24
24
|
|
25
25
|
// The block part of our conventional BEM class names (bc__E--M).
|
26
26
|
var bc = "".concat(pkg.prefix, "--tearsheet");
|
@@ -79,6 +79,8 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
79
79
|
open = _ref.open,
|
80
80
|
portalTargetIn = _ref.portalTarget,
|
81
81
|
selectorPrimaryFocus = _ref.selectorPrimaryFocus,
|
82
|
+
_ref$selectorsFloatin = _ref.selectorsFloatingMenus,
|
83
|
+
selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
|
82
84
|
size = _ref.size,
|
83
85
|
slug = _ref.slug,
|
84
86
|
title = _ref.title,
|
@@ -249,7 +251,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
249
251
|
onKeyDown: keyDownListener,
|
250
252
|
preventCloseOnClickOutside: !isPassive,
|
251
253
|
ref: modalRef,
|
252
|
-
selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
|
254
|
+
selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_toConsumableArray(selectorsFloatingMenus)),
|
253
255
|
size: "sm"
|
254
256
|
}), includeHeader && /*#__PURE__*/React__default.createElement(ModalHeader, {
|
255
257
|
className: cx("".concat(bc, "__header"), _defineProperty(_defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
|
@@ -445,6 +447,18 @@ TearsheetShell.propTypes = _objectSpread2({
|
|
445
447
|
*/
|
446
448
|
/**@ts-ignore*/
|
447
449
|
portalTarget: portalType,
|
450
|
+
/**
|
451
|
+
* Specify a CSS selector that matches the DOM element that should be
|
452
|
+
* focused when the Modal opens.
|
453
|
+
*/
|
454
|
+
selectorPrimaryFocus: PropTypes.string,
|
455
|
+
/**
|
456
|
+
* Specify the CSS selectors that match the floating menus.
|
457
|
+
*
|
458
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
459
|
+
*/
|
460
|
+
/**@ts-ignore*/
|
461
|
+
selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
|
448
462
|
/**
|
449
463
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
450
464
|
*/
|
@@ -220,9 +220,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
220
220
|
}
|
221
221
|
if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
|
222
222
|
if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
|
223
|
-
var _activeCellFullData$r;
|
224
223
|
var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
|
225
|
-
|
224
|
+
if (activeCellFullData) {
|
225
|
+
setActiveCellContent(activeCellFullData.render('Cell'));
|
226
|
+
} else {
|
227
|
+
setActiveCellContent(null);
|
228
|
+
}
|
226
229
|
}
|
227
230
|
if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
|
228
231
|
setActiveCellContent(null);
|
@@ -437,8 +440,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
437
440
|
var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
|
438
441
|
var activeCellValue;
|
439
442
|
if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
|
440
|
-
var _activeCellFullData$
|
441
|
-
activeCellValue = activeCellFullData ? (_activeCellFullData$
|
443
|
+
var _activeCellFullData$r;
|
444
|
+
activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
|
442
445
|
}
|
443
446
|
setCellEditorValue(activeCellValue || '');
|
444
447
|
if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
|
@@ -5,10 +5,10 @@ import { RadioButtonProps } from '@carbon/react/lib/components/RadioButton/Radio
|
|
5
5
|
import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
|
6
6
|
import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
|
7
7
|
import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
|
8
|
-
import { CSSProperties, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
|
8
|
+
import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
|
9
9
|
import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
|
10
10
|
import { CarbonIconType } from '@carbon/react/icons';
|
11
|
-
import { type ButtonProps } from '@carbon/react';
|
11
|
+
import { IconButton, type ButtonProps } from '@carbon/react';
|
12
12
|
import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
|
13
13
|
export type Size = 'xs' | 'sm' | 'md' | 'lg';
|
14
14
|
export interface ResizerProps {
|
@@ -122,6 +122,16 @@ interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectSta
|
|
122
122
|
}
|
123
123
|
export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
|
124
124
|
}
|
125
|
+
export interface RowAction {
|
126
|
+
id?: string;
|
127
|
+
itemText?: string;
|
128
|
+
icon?: ComponentType | FunctionComponent;
|
129
|
+
align?: React.ComponentProps<typeof IconButton>['align'];
|
130
|
+
shouldHideMenuItem?: (...args: any[]) => void;
|
131
|
+
shouldDisableMenuItem?: (...args: any[]) => void;
|
132
|
+
disabled?: boolean;
|
133
|
+
onClick?: (...args: any[]) => void;
|
134
|
+
}
|
125
135
|
export interface DataGridState<T extends object = any> extends TableCommonProps, UsePaginationInstanceProps<T>, Omit<TableInstance<T>, 'state' | 'headers' | 'rows' | 'columns'>, Omit<UseFiltersInstanceProps<T>, 'rows'>, UseRowSelectInstanceProps<T>, Pick<UseRowSelectInstanceProps<T>, 'toggleAllRowsSelected'> {
|
126
136
|
withVirtualScroll?: boolean;
|
127
137
|
DatagridPagination?: JSXElementConstructor<any>;
|
@@ -144,6 +154,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
|
|
144
154
|
batchActions?: boolean;
|
145
155
|
row: DatagridRow;
|
146
156
|
rows: Array<DatagridRow<any>>;
|
157
|
+
rowActions?: RowAction[];
|
147
158
|
columns: Array<DatagridColumn>;
|
148
159
|
key?: any;
|
149
160
|
rowSize?: Size;
|
@@ -1,2 +1,9 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2021, 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { Hooks } from 'react-table';
|
8
|
+
declare const useActionsColumn: (hooks: Hooks) => void;
|
1
9
|
export default useActionsColumn;
|
2
|
-
declare function useActionsColumn(hooks: any): void;
|
@@ -26,9 +26,10 @@ var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuIt
|
|
26
26
|
var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
|
27
27
|
var useActionsColumn = function useActionsColumn(hooks) {
|
28
28
|
var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
|
29
|
-
var
|
30
|
-
|
31
|
-
|
29
|
+
var _ref = instance,
|
30
|
+
rowActions = _ref.rowActions,
|
31
|
+
isFetching = _ref.isFetching,
|
32
|
+
selectedRowIds = _ref.state.selectedRowIds;
|
32
33
|
var getDisabledState = function getDisabledState(rowIndex) {
|
33
34
|
var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
|
34
35
|
return Number(n);
|
@@ -88,10 +89,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
88
89
|
return;
|
89
90
|
}
|
90
91
|
e.stopPropagation();
|
91
|
-
_onClick(id, row, e);
|
92
|
+
_onClick === null || _onClick === void 0 || _onClick(id, row, e);
|
92
93
|
},
|
93
94
|
disabled: isDisabledByRow
|
94
|
-
}), /*#__PURE__*/React__default["default"].createElement(Icon, null)));
|
95
|
+
}), Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null)));
|
95
96
|
})), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
|
96
97
|
align: "left",
|
97
98
|
size: "sm",
|
@@ -117,7 +118,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
117
118
|
disabled: isDisabledByRow,
|
118
119
|
onClick: function onClick(e) {
|
119
120
|
e.stopPropagation();
|
120
|
-
_onClick2(id, row, e);
|
121
|
+
_onClick2 === null || _onClick2 === void 0 || _onClick2(id, row, e);
|
121
122
|
},
|
122
123
|
key: id
|
123
124
|
}));
|
@@ -99,9 +99,16 @@ interface TearsheetProps extends PropsWithChildren {
|
|
99
99
|
*/
|
100
100
|
portalTarget: ReactNode;
|
101
101
|
/**
|
102
|
-
* Specify a CSS selector that matches the DOM element that should be
|
102
|
+
* Specify a CSS selector that matches the DOM element that should be
|
103
|
+
* focused when the Modal opens.
|
103
104
|
*/
|
104
105
|
selectorPrimaryFocus?: string;
|
106
|
+
/**
|
107
|
+
* Specify the CSS selectors that match the floating menus.
|
108
|
+
*
|
109
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
110
|
+
*/
|
111
|
+
selectorsFloatingMenus?: string[];
|
105
112
|
/**
|
106
113
|
* The main title of the tearsheet, displayed in the header area.
|
107
114
|
*/
|
@@ -198,9 +198,17 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
198
198
|
/**@ts-ignore */
|
199
199
|
portalTarget: TearsheetShell.portalType,
|
200
200
|
/**
|
201
|
-
* Specify a CSS selector that matches the DOM element that should be
|
201
|
+
* Specify a CSS selector that matches the DOM element that should be
|
202
|
+
* focused when the Modal opens.
|
202
203
|
*/
|
203
204
|
selectorPrimaryFocus: index["default"].string,
|
205
|
+
/**
|
206
|
+
* Specify the CSS selectors that match the floating menus.
|
207
|
+
*
|
208
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
209
|
+
*/
|
210
|
+
/**@ts-ignore*/
|
211
|
+
selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
|
204
212
|
/**
|
205
213
|
* The main title of the tearsheet, displayed in the header area.
|
206
214
|
*/
|
@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
|
|
64
64
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
65
65
|
*/
|
66
66
|
portalTarget?: ReactNode;
|
67
|
+
/**
|
68
|
+
* Specify a CSS selector that matches the DOM element that should be
|
69
|
+
* focused when the Modal opens.
|
70
|
+
*/
|
71
|
+
selectorPrimaryFocus?: string;
|
72
|
+
/**
|
73
|
+
* Specify the CSS selectors that match the floating menus.
|
74
|
+
*
|
75
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
76
|
+
*/
|
77
|
+
selectorsFloatingMenus?: string[];
|
67
78
|
/**
|
68
79
|
* The main title of the tearsheet, displayed in the header area.
|
69
80
|
*/
|
@@ -156,6 +156,18 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
156
156
|
*/
|
157
157
|
/**@ts-ignore */
|
158
158
|
portalTarget: TearsheetShell.portalType,
|
159
|
+
/**
|
160
|
+
* Specify a CSS selector that matches the DOM element that should be
|
161
|
+
* focused when the Modal opens.
|
162
|
+
*/
|
163
|
+
selectorPrimaryFocus: index["default"].string,
|
164
|
+
/**
|
165
|
+
* Specify the CSS selectors that match the floating menus.
|
166
|
+
*
|
167
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
168
|
+
*/
|
169
|
+
/**@ts-ignore*/
|
170
|
+
selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
|
159
171
|
/**
|
160
172
|
* The main title of the tearsheet, displayed in the header area.
|
161
173
|
*/
|
@@ -81,7 +81,17 @@ interface TearsheetShellProps extends PropsWithChildren {
|
|
81
81
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
82
82
|
*/
|
83
83
|
portalTarget?: ReactNode;
|
84
|
+
/**
|
85
|
+
* Specify a CSS selector that matches the DOM element that should be
|
86
|
+
* focused when the Modal opens.
|
87
|
+
*/
|
84
88
|
selectorPrimaryFocus?: string;
|
89
|
+
/**
|
90
|
+
* Specify the CSS selectors that match the floating menus.
|
91
|
+
*
|
92
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
93
|
+
*/
|
94
|
+
selectorsFloatingMenus?: string[];
|
85
95
|
/**
|
86
96
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
87
97
|
*/
|
@@ -29,7 +29,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
29
29
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
30
30
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
31
31
|
|
32
|
-
var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
|
32
|
+
var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
|
33
33
|
|
34
34
|
// The block part of our conventional BEM class names (bc__E--M).
|
35
35
|
var bc = "".concat(settings.pkg.prefix, "--tearsheet");
|
@@ -88,6 +88,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
88
88
|
open = _ref.open,
|
89
89
|
portalTargetIn = _ref.portalTarget,
|
90
90
|
selectorPrimaryFocus = _ref.selectorPrimaryFocus,
|
91
|
+
_ref$selectorsFloatin = _ref.selectorsFloatingMenus,
|
92
|
+
selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
|
91
93
|
size = _ref.size,
|
92
94
|
slug = _ref.slug,
|
93
95
|
title = _ref.title,
|
@@ -258,7 +260,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
258
260
|
onKeyDown: keyDownListener,
|
259
261
|
preventCloseOnClickOutside: !isPassive,
|
260
262
|
ref: modalRef,
|
261
|
-
selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
|
263
|
+
selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_rollupPluginBabelHelpers.toConsumableArray(selectorsFloatingMenus)),
|
262
264
|
size: "sm"
|
263
265
|
}), includeHeader && /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
|
264
266
|
className: cx__default["default"]("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
|
@@ -454,6 +456,18 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
|
|
454
456
|
*/
|
455
457
|
/**@ts-ignore*/
|
456
458
|
portalTarget: portalType,
|
459
|
+
/**
|
460
|
+
* Specify a CSS selector that matches the DOM element that should be
|
461
|
+
* focused when the Modal opens.
|
462
|
+
*/
|
463
|
+
selectorPrimaryFocus: index["default"].string,
|
464
|
+
/**
|
465
|
+
* Specify the CSS selectors that match the floating menus.
|
466
|
+
*
|
467
|
+
* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
|
468
|
+
*/
|
469
|
+
/**@ts-ignore*/
|
470
|
+
selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
|
457
471
|
/**
|
458
472
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
459
473
|
*/
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.43.2-canary.
|
4
|
+
"version": "2.43.2-canary.16+5740b3028",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -119,5 +119,5 @@
|
|
119
119
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
120
120
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
121
121
|
},
|
122
|
-
"gitHead": "
|
122
|
+
"gitHead": "5740b302856db495af369010c2c3800bc95f1f59"
|
123
123
|
}
|