@carbon/ibm-products 2.41.1-canary.5 → 2.41.1-canary.8

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.
Files changed (52) hide show
  1. package/css/index-full-carbon.css +6 -0
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +6 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +6 -0
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +6 -0
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Datagrid/Datagrid/DatagridContent.js +21 -1
  18. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +12 -2
  19. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.d.ts +3 -3
  20. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +5 -5
  21. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.d.ts +3 -1
  22. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +12 -3
  23. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +7 -0
  24. package/es/components/Datagrid/useCustomizeColumns.js +0 -4
  25. package/es/components/Datagrid/useEditableCell.js +1 -1
  26. package/es/components/Datagrid/useInlineEdit.d.ts +1 -1
  27. package/es/components/Datagrid/useInlineEdit.js +9 -16
  28. package/es/components/FeatureFlags/index.d.ts +37 -0
  29. package/es/components/FeatureFlags/index.js +151 -0
  30. package/es/components/index.d.ts +1 -0
  31. package/es/feature-flags.d.ts +1 -0
  32. package/es/global/js/hooks/usePortalTarget.js +4 -2
  33. package/es/index.js +1 -0
  34. package/lib/components/Datagrid/Datagrid/DatagridContent.js +49 -29
  35. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +13 -19
  36. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.d.ts +3 -3
  37. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +5 -5
  38. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.d.ts +3 -1
  39. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +12 -3
  40. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +7 -0
  41. package/lib/components/Datagrid/useCustomizeColumns.js +0 -4
  42. package/lib/components/Datagrid/useEditableCell.js +1 -1
  43. package/lib/components/Datagrid/useInlineEdit.d.ts +1 -1
  44. package/lib/components/Datagrid/useInlineEdit.js +8 -15
  45. package/lib/components/FeatureFlags/index.d.ts +37 -0
  46. package/lib/components/FeatureFlags/index.js +162 -0
  47. package/lib/components/index.d.ts +1 -0
  48. package/lib/feature-flags.d.ts +1 -0
  49. package/lib/global/js/hooks/usePortalTarget.js +4 -2
  50. package/lib/index.js +4 -0
  51. package/package.json +8 -4
  52. package/scss/components/Datagrid/styles/_useInlineEdit.scss +6 -0
@@ -24,18 +24,18 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
24
24
  var InlineEditButton = function InlineEditButton(_ref) {
25
25
  var label = _ref.label,
26
26
  Icon = _ref.renderIcon,
27
- disabled = _ref.disabled,
28
27
  LabelIcon = _ref.labelIcon,
29
28
  placeholder = _ref.placeholder,
29
+ disabledCell = _ref.disabledCell,
30
30
  nonEditCell = _ref.nonEditCell,
31
31
  isActiveCell = _ref.isActiveCell,
32
32
  columnConfig = _ref.columnConfig,
33
33
  type = _ref.type;
34
34
  return /*#__PURE__*/React__default["default"].createElement("div", {
35
- className: cx__default["default"]("".concat(blockClass, "__inline-edit-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection')),
35
+ className: cx__default["default"]("".concat(blockClass, "__inline-edit-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button--disabled"), disabledCell), "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection')),
36
36
  tabIndex: isActiveCell ? 0 : -1,
37
- "data-disabled": disabled || nonEditCell,
38
- "aria-disabled": disabled || nonEditCell,
37
+ "data-disabled": disabledCell,
38
+ "aria-disabled": disabledCell,
39
39
  role: "button",
40
40
  title: label
41
41
  }, LabelIcon && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -50,7 +50,7 @@ var InlineEditButton = function InlineEditButton(_ref) {
50
50
  };
51
51
  InlineEditButton.propTypes = {
52
52
  columnConfig: index["default"].object,
53
- disabled: index["default"].bool,
53
+ disabledCell: index["default"].bool,
54
54
  isActiveCell: index["default"].bool,
55
55
  label: index["default"].oneOfType([index["default"].string, index["default"].number]),
56
56
  labelIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
@@ -1,6 +1,7 @@
1
- export function InlineEditCell({ cell, config, instance, placeholder, tabIndex, value, nonEditCell, type, }: {
1
+ export function InlineEditCell({ cell, config, disabledCell, instance, placeholder, tabIndex, value, nonEditCell, type, }: {
2
2
  cell: any;
3
3
  config: any;
4
+ disabledCell?: boolean | undefined;
4
5
  instance: any;
5
6
  placeholder?: string | undefined;
6
7
  tabIndex: any;
@@ -12,6 +13,7 @@ export namespace InlineEditCell {
12
13
  namespace propTypes {
13
14
  let cell: PropTypes.Requireable<object>;
14
15
  let config: PropTypes.Requireable<object>;
16
+ let disabledCell: PropTypes.Requireable<boolean>;
15
17
  let instance: PropTypes.Requireable<PropTypes.InferProps<{
16
18
  columns: PropTypes.Requireable<(object | null | undefined)[]>;
17
19
  onDataUpdate: PropTypes.Requireable<(...args: any[]) => any>;
@@ -31,6 +31,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
31
31
  var _config$validator, _value$text;
32
32
  var cell = _ref.cell,
33
33
  config = _ref.config,
34
+ _ref$disabledCell = _ref.disabledCell,
35
+ disabledCell = _ref$disabledCell === void 0 ? false : _ref$disabledCell,
34
36
  instance = _ref.instance,
35
37
  _ref$placeholder = _ref.placeholder,
36
38
  placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
@@ -328,6 +330,11 @@ var InlineEditCell = function InlineEditCell(_ref) {
328
330
  return icons.Calendar;
329
331
  }
330
332
  };
333
+ var renderRegularCell = function renderRegularCell() {
334
+ return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, inputProps, {
335
+ id: cellId
336
+ }));
337
+ };
331
338
  var renderDateCell = function renderDateCell() {
332
339
  var _config$inputProps, _outerButtonElement$c;
333
340
  var datePickerPreparedProps = propsHelper.prepareProps(config.inputProps, ['datePickerInputProps']);
@@ -443,15 +450,16 @@ var InlineEditCell = function InlineEditCell(_ref) {
443
450
  "data-cell-id": cellId,
444
451
  "data-column-index": columnIndex,
445
452
  "data-row-index": cell.row.index,
446
- "data-disabled": nonEditCell,
453
+ "data-disabled": disabledCell,
447
454
  "data-inline-type": type,
448
455
  onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
449
456
  onKeyDown: !nonEditCell ? handleKeyDown : null,
450
- className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)))
451
- }, !inEditMode && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
457
+ className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)), "".concat(blockClass, "__static--outer-cell"), !disabledCell))
458
+ }, !nonEditCell && !disabledCell && renderRegularCell(), (!inEditMode || disabledCell) && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
452
459
  isActiveCell: cellId === activeCellId,
453
460
  renderIcon: setRenderIcon(),
454
461
  label: type === 'selection' ? (_value$text = value === null || value === void 0 ? void 0 : value.text) !== null && _value$text !== void 0 ? _value$text : value : type === 'date' ? buildDate(value) : value,
462
+ disabledCell: disabledCell,
455
463
  labelIcon: (value === null || value === void 0 ? void 0 : value.icon) || null,
456
464
  placeholder: placeholder,
457
465
  tabIndex: tabIndex,
@@ -464,6 +472,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
464
472
  InlineEditCell.propTypes = {
465
473
  cell: index["default"].object,
466
474
  config: index["default"].object,
475
+ disabledCell: index["default"].bool,
467
476
  instance: index["default"].shape({
468
477
  columns: index["default"].arrayOf(index["default"].object),
469
478
  onDataUpdate: index["default"].func,
@@ -81,6 +81,13 @@ var inlineEditReducer = function inlineEditReducer(state, action) {
81
81
  }
82
82
  break;
83
83
  }
84
+ case 'SET_FEATURE_FLAGS':
85
+ {
86
+ var _action$payload2;
87
+ return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
88
+ featureFlags: (_action$payload2 = action.payload) !== null && _action$payload2 !== void 0 ? _action$payload2 : {}
89
+ });
90
+ }
84
91
  default:
85
92
  return state;
86
93
  }
@@ -11,7 +11,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
13
  var React = require('react');
14
- var settings = require('../../settings.js');
15
14
  var ButtonWrapper = require('./Datagrid/addons/CustomizeColumns/ButtonWrapper.js');
16
15
  var TearsheetWrapper = require('./Datagrid/addons/CustomizeColumns/TearsheetWrapper.js');
17
16
 
@@ -36,9 +35,6 @@ function _interopNamespace(e) {
36
35
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
37
36
 
38
37
  var useCustomizeColumns = function useCustomizeColumns(hooks) {
39
- React__namespace.useEffect(function () {
40
- settings.pkg.checkReportFeatureEnabled('Datagrid.useCustomizeColumns');
41
- }, []);
42
38
  var _React$useState = React__namespace.useState(false),
43
39
  _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
44
40
  isTearsheetOpen = _React$useState2[0],
@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
12
12
  var useInlineEdit = require('./useInlineEdit.js');
13
13
 
14
14
  var useEditableCell = function useEditableCell(hooks) {
15
- useInlineEdit["default"](hooks, 'usingEditableCell');
15
+ useInlineEdit["default"](hooks);
16
16
  };
17
17
  var useEditableCell$1 = useEditableCell;
18
18
 
@@ -1,2 +1,2 @@
1
1
  export default useInlineEdit;
2
- declare function useInlineEdit(hooks: any, usingEditableCell: any): void;
2
+ declare function useInlineEdit(hooks: any): void;
@@ -9,7 +9,6 @@
9
9
 
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
- var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
12
  var React = require('react');
14
13
  var settings = require('../../settings.js');
15
14
  var cx = require('classnames');
@@ -21,27 +20,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
20
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
22
21
 
23
22
  var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
24
- var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
25
- React.useEffect(function () {
26
- if (!usingEditableCell) {
27
- settings.pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
28
- }
29
- if (usingEditableCell) {
30
- settings.pkg.checkReportFeatureEnabled('Datagrid.useEditableCell');
31
- }
32
- }, [usingEditableCell]);
23
+ var useInlineEdit = function useInlineEdit(hooks) {
33
24
  var addInlineEdit = function addInlineEdit(props, _ref) {
34
- var _cell$column;
25
+ var _cell$column, _cell$column2;
35
26
  var cell = _ref.cell,
36
27
  instance = _ref.instance;
37
28
  var columnInlineEditConfig = cell.column.inlineEdit;
38
29
  var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 || (_cell$column = _cell$column.inlineEdit) === null || _cell$column === void 0 ? void 0 : _cell$column.type;
30
+ var isDisabled = (_cell$column2 = cell.column) === null || _cell$column2 === void 0 ? void 0 : _cell$column2.isDisabled;
39
31
  var renderInlineEditComponent = function renderInlineEditComponent(type) {
40
32
  return /*#__PURE__*/React__default["default"].createElement(InlineEditCell.InlineEditCell, {
41
33
  config: columnInlineEditConfig,
42
34
  tabIndex: -1,
43
35
  value: cell.value,
44
36
  cell: cell,
37
+ isDisabled: isDisabled,
45
38
  instance: instance,
46
39
  type: type
47
40
  });
@@ -52,15 +45,15 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
52
45
  }];
53
46
  }
54
47
  return [props, {
55
- className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__cell-inline-edit"), !!usingEditableCell || settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit') ? true : '')),
48
+ className: cx__default["default"]("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell-inline-edit")),
56
49
  role: 'gridcell',
57
- children: (!!usingEditableCell || settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit')) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/React__default["default"].createElement(InlineEditCell.InlineEditCell, {
50
+ children: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/React__default["default"].createElement(InlineEditCell.InlineEditCell, {
58
51
  config: columnInlineEditConfig,
59
52
  tabIndex: -1,
60
53
  value: cell.value,
61
54
  cell: cell,
62
55
  instance: instance,
63
- disabled: true,
56
+ disabledCell: isDisabled,
64
57
  nonEditCell: true,
65
58
  type: "text"
66
59
  }))
@@ -69,7 +62,7 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
69
62
  hooks.getCellProps.push(addInlineEdit);
70
63
  hooks.useInstance.push(function (instance) {
71
64
  Object.assign(instance, {
72
- withInlineEdit: !!usingEditableCell || settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit') ? true : false
65
+ withInlineEdit: true
73
66
  });
74
67
  });
75
68
  };
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Supports an object of feature flag values with the `flags` prop, merging them
3
+ * along with the current `FeatureFlagContext` to provide consumers to check if
4
+ * a feature flag is enabled or disabled in a given React tree
5
+ */
6
+ export function FeatureFlags({ children, flags }: {
7
+ children: any;
8
+ flags?: {} | undefined;
9
+ }): import("react/jsx-runtime").JSX.Element;
10
+ export namespace FeatureFlags {
11
+ namespace propTypes {
12
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
13
+ let flags: PropTypes.Requireable<{
14
+ [x: string]: boolean | null | undefined;
15
+ }>;
16
+ }
17
+ }
18
+ /**
19
+ * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
20
+ * or disable feature flags in a given React tree
21
+ */
22
+ export const FeatureFlagContext: React.Context<any>;
23
+ /**
24
+ * Access all feature flag information for the given FeatureFlagContext
25
+ *
26
+ * @returns {FeatureFlagScope}
27
+ */
28
+ export function useFeatureFlags(): FeatureFlagScope;
29
+ /**
30
+ * Access whether a given flag is enabled or disabled in a given
31
+ * FeatureFlagContext
32
+ *
33
+ * @returns {boolean}
34
+ */
35
+ export function useFeatureFlag(flag: any): boolean;
36
+ import PropTypes from 'prop-types';
37
+ import React from 'react';
@@ -0,0 +1,162 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
+ var React = require('react');
14
+ var index = require('../../node_modules/prop-types/index.js');
15
+ var FeatureFlags$1 = require('@carbon/feature-flags');
16
+
17
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
+
19
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
+
21
+ /**
22
+ * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
23
+ * or disable feature flags in a given React tree
24
+ */
25
+ var FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
26
+
27
+ /**
28
+ * Supports an object of feature flag values with the `flags` prop, merging them
29
+ * along with the current `FeatureFlagContext` to provide consumers to check if
30
+ * a feature flag is enabled or disabled in a given React tree
31
+ */
32
+ function FeatureFlags(_ref) {
33
+ var children = _ref.children,
34
+ _ref$flags = _ref.flags,
35
+ flags = _ref$flags === void 0 ? {} : _ref$flags;
36
+ var parentScope = React.useContext(FeatureFlagContext);
37
+ var _useState = React.useState(parentScope),
38
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
39
+ prevParentScope = _useState2[0],
40
+ setPrevParentScope = _useState2[1];
41
+ var _useState3 = React.useState(function () {
42
+ var scope = FeatureFlags$1.createScope(flags);
43
+ scope.mergeWithScope(parentScope);
44
+ return scope;
45
+ }),
46
+ _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
47
+ scope = _useState4[0],
48
+ updateScope = _useState4[1];
49
+ if (parentScope !== prevParentScope) {
50
+ var _scope = FeatureFlags$1.createScope(flags);
51
+ _scope.mergeWithScope(parentScope);
52
+ updateScope(_scope);
53
+ setPrevParentScope(parentScope);
54
+ }
55
+
56
+ // We use a custom hook to detect if any of the keys or their values change
57
+ // for flags that are passed in. If they have changed, then we re-create the
58
+ // FeatureFlagScope using the new flags
59
+ useChangedValue(flags, isEqual, function (changedFlags) {
60
+ var scope = FeatureFlags$1.createScope(changedFlags);
61
+ scope.mergeWithScope(parentScope);
62
+ updateScope(scope);
63
+ });
64
+ return /*#__PURE__*/React__default["default"].createElement(FeatureFlagContext.Provider, {
65
+ value: scope
66
+ }, children);
67
+ }
68
+ FeatureFlags.propTypes = {
69
+ children: index["default"].node,
70
+ /**
71
+ * Provide the feature flags to enabled or disabled in the current React tree
72
+ */
73
+ flags: index["default"].objectOf(index["default"].bool)
74
+ };
75
+
76
+ /**
77
+ * This hook will store previous versions of the given `value` and compare the
78
+ * current value to the previous one using the `compare` function. If the
79
+ * compare function returns true, then the given `callback` is invoked in an
80
+ * effect.
81
+ *
82
+ * @param {any} value
83
+ * @param {Function} compare
84
+ * @param {Function} callback
85
+ */
86
+ function useChangedValue(value, compare, callback) {
87
+ var initialRender = React.useRef(false);
88
+ var savedCallback = React.useRef(callback);
89
+ var _useState5 = React.useState(value),
90
+ _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
91
+ prevValue = _useState6[0],
92
+ setPrevValue = _useState6[1];
93
+ if (!compare(prevValue, value)) {
94
+ setPrevValue(value);
95
+ }
96
+ React.useEffect(function () {
97
+ savedCallback.current = callback;
98
+ });
99
+ React.useEffect(function () {
100
+ // We only want the callback triggered after the first render
101
+ if (initialRender.current) {
102
+ savedCallback.current(prevValue);
103
+ }
104
+ }, [prevValue]);
105
+ React.useEffect(function () {
106
+ initialRender.current = true;
107
+ }, []);
108
+ }
109
+
110
+ /**
111
+ * Access whether a given flag is enabled or disabled in a given
112
+ * FeatureFlagContext
113
+ *
114
+ * @returns {boolean}
115
+ */
116
+ function useFeatureFlag(flag) {
117
+ var scope = React.useContext(FeatureFlagContext);
118
+ // console.log(scope);
119
+ return scope.enabled(flag);
120
+ }
121
+
122
+ /**
123
+ * Access all feature flag information for the given FeatureFlagContext
124
+ *
125
+ * @returns {FeatureFlagScope}
126
+ */
127
+ function useFeatureFlags() {
128
+ return React.useContext(FeatureFlagContext);
129
+ }
130
+
131
+ /**
132
+ * Compare two objects and determine if they are equal. This is a shallow
133
+ * comparison since the objects we are comparing are objects with boolean flags
134
+ * from the flags prop in the `FeatureFlags` component
135
+ *
136
+ * @param {object} a
137
+ * @param {object} b
138
+ * @returns {boolean}
139
+ */
140
+ function isEqual(a, b) {
141
+ if (a === b) {
142
+ return true;
143
+ }
144
+ for (var _i = 0, _Object$keys = Object.keys(a); _i < _Object$keys.length; _i++) {
145
+ var key = _Object$keys[_i];
146
+ if (a[key] !== b[key]) {
147
+ return false;
148
+ }
149
+ }
150
+ for (var _i2 = 0, _Object$keys2 = Object.keys(b); _i2 < _Object$keys2.length; _i2++) {
151
+ var _key = _Object$keys2[_i2];
152
+ if (b[_key] !== a[_key]) {
153
+ return false;
154
+ }
155
+ }
156
+ return true;
157
+ }
158
+
159
+ exports.FeatureFlagContext = FeatureFlagContext;
160
+ exports.FeatureFlags = FeatureFlags;
161
+ exports.useFeatureFlag = useFeatureFlag;
162
+ exports.useFeatureFlags = useFeatureFlags;
@@ -69,3 +69,4 @@ export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerE
69
69
  export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
70
70
  export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
71
71
  export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
72
+ export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from "./FeatureFlags";
@@ -0,0 +1 @@
1
+ export {};
@@ -13,8 +13,10 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
13
13
  var React = require('react');
14
14
  var settings = require('../../../settings.js');
15
15
  var reactDom = require('react-dom');
16
+ var index = require('../../../components/FeatureFlags/index.js');
16
17
 
17
18
  var usePortalTarget = function usePortalTarget(portalTargetIn) {
19
+ var enablePortalTarget = index.useFeatureFlag('default-portal-target-body');
18
20
  var _useState = React.useState(null),
19
21
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
20
22
  portalTarget = _useState2[0],
@@ -23,11 +25,11 @@ var usePortalTarget = function usePortalTarget(portalTargetIn) {
23
25
  if (portalTargetIn) {
24
26
  setPortalTarget(portalTargetIn);
25
27
  } else {
26
- if (settings.pkg.isFeatureEnabled('default-portal-target-body')) {
28
+ if (settings.pkg.isFeatureEnabled('default-portal-target-body') || enablePortalTarget) {
27
29
  setPortalTarget(document.body);
28
30
  }
29
31
  }
30
- }, [portalTargetIn]);
32
+ }, [portalTargetIn, enablePortalTarget]);
31
33
  var renderPortalUse = React.useCallback(function (children) {
32
34
  return portalTarget ? /*#__PURE__*/reactDom.createPortal(children, portalTarget) : children;
33
35
  }, [portalTarget]);
package/lib/index.js CHANGED
@@ -137,6 +137,7 @@ var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/Filter
137
137
  var FilterPanelSearch = require('./components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js');
138
138
  var ConditionBuilder = require('./components/ConditionBuilder/ConditionBuilder.js');
139
139
  var GetStartedCard = require('./components/GetStartedCard/GetStartedCard.js');
140
+ var index$2 = require('./components/FeatureFlags/index.js');
140
141
 
141
142
 
142
143
 
@@ -581,3 +582,6 @@ Object.defineProperty(exports, 'GetStartedCard', {
581
582
  enumerable: true,
582
583
  get: function () { return GetStartedCard.GetStartedCard; }
583
584
  });
585
+ exports.unstable_FeatureFlags = index$2.FeatureFlags;
586
+ exports.unstable_useFeatureFlag = index$2.useFeatureFlag;
587
+ exports.unstable_useFeatureFlags = index$2.useFeatureFlags;
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.41.1-canary.5+e4c6a2c8e",
4
+ "version": "2.41.1-canary.8+51226bf58",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -17,7 +17,10 @@
17
17
  "sideEffects": [
18
18
  "**/global/js/utils/props-helper.js",
19
19
  "**/*.css",
20
- "**/*.scss"
20
+ "**/*.scss",
21
+ "es/feature-flags.js",
22
+ "lib/feature-flags.js",
23
+ "src/feature-flags.js"
21
24
  ],
22
25
  "files": [
23
26
  "css",
@@ -92,7 +95,8 @@
92
95
  },
93
96
  "dependencies": {
94
97
  "@babel/runtime": "^7.23.9",
95
- "@carbon/ibm-products-styles": "^2.38.0",
98
+ "@carbon/feature-flags": "^0.20.0",
99
+ "@carbon/ibm-products-styles": "^2.38.1-canary.8+51226bf58",
96
100
  "@carbon/telemetry": "^0.1.0",
97
101
  "@dnd-kit/core": "^6.0.8",
98
102
  "@dnd-kit/modifiers": "^7.0.0",
@@ -116,5 +120,5 @@
116
120
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
117
121
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
118
122
  },
119
- "gitHead": "e4c6a2c8e8d42dd74abf2370331dde96c258de1c"
123
+ "gitHead": "51226bf58e4a0593e41cfcb37192784b8a6291c6"
120
124
  }
@@ -80,6 +80,12 @@ $row-heights: (
80
80
  align-items: center;
81
81
  }
82
82
 
83
+ .#{variables.$block-class}__static--outer-cell {
84
+ display: flex;
85
+ height: -webkit-fill-available;
86
+ align-items: center;
87
+ }
88
+
83
89
  .#{variables.$block-class}__inline-edit--outer-cell-button {
84
90
  width: 100%;
85
91
  height: calc(100% + 2px); // account for borders