@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.
- package/css/index-full-carbon.css +6 -0
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +6 -0
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +6 -0
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +6 -0
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +21 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +12 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.d.ts +3 -3
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +5 -5
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.d.ts +3 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +12 -3
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +7 -0
- package/es/components/Datagrid/useCustomizeColumns.js +0 -4
- package/es/components/Datagrid/useEditableCell.js +1 -1
- package/es/components/Datagrid/useInlineEdit.d.ts +1 -1
- package/es/components/Datagrid/useInlineEdit.js +9 -16
- package/es/components/FeatureFlags/index.d.ts +37 -0
- package/es/components/FeatureFlags/index.js +151 -0
- package/es/components/index.d.ts +1 -0
- package/es/feature-flags.d.ts +1 -0
- package/es/global/js/hooks/usePortalTarget.js +4 -2
- package/es/index.js +1 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +49 -29
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +13 -19
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.d.ts +3 -3
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +5 -5
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.d.ts +3 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +12 -3
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +7 -0
- package/lib/components/Datagrid/useCustomizeColumns.js +0 -4
- package/lib/components/Datagrid/useEditableCell.js +1 -1
- package/lib/components/Datagrid/useInlineEdit.d.ts +1 -1
- package/lib/components/Datagrid/useInlineEdit.js +8 -15
- package/lib/components/FeatureFlags/index.d.ts +37 -0
- package/lib/components/FeatureFlags/index.js +162 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/feature-flags.d.ts +1 -0
- package/lib/global/js/hooks/usePortalTarget.js +4 -2
- package/lib/index.js +4 -0
- package/package.json +8 -4
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +6 -0
package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js
CHANGED
@@ -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"),
|
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":
|
38
|
-
"aria-disabled":
|
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
|
-
|
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]),
|
package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.d.ts
CHANGED
@@ -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":
|
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,
|
package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js
CHANGED
@@ -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
|
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
|
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
|
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"),
|
48
|
+
className: cx__default["default"]("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell-inline-edit")),
|
56
49
|
role: 'gridcell',
|
57
|
-
children:
|
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
|
-
|
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:
|
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.
|
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/
|
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": "
|
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
|