@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.
@@ -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