@carbon/ibm-products 2.43.2-canary.12 → 2.43.2-canary.16

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
- setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
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$r2;
432
- activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
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 rowActions = instance.rowActions,
21
- isFetching = instance.isFetching,
22
- selectedRowIds = instance.state.selectedRowIds;
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 focused when the Modal opens
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 focused when the Modal opens
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
- setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
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$r2;
441
- activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
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 rowActions = instance.rowActions,
30
- isFetching = instance.isFetching,
31
- selectedRowIds = instance.state.selectedRowIds;
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 focused when the Modal opens
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 focused when the Modal opens
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.12+b9055f1a5",
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": "b9055f1a58d6b8c093b418db05a7768000e6944f"
122
+ "gitHead": "5740b302856db495af369010c2c3800bc95f1f59"
123
123
  }
package/telemetry.yml CHANGED
@@ -288,6 +288,7 @@ collect:
288
288
  - selectionAreas
289
289
  - selectorPageContent
290
290
  - selectorPrimaryFocus
291
+ - selectorsFloatingMenus
291
292
  - sequence
292
293
  - setActiveCellCoordinates
293
294
  - setAllFilters