@carbon/ibm-products 2.43.2-canary.15 → 2.43.2-canary.3
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 +2 -3
- 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.map +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +2 -3
- 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 +2 -3
- 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/DataSpreadsheet/DataSpreadsheet.js +16 -29
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +1 -9
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -18
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +0 -8
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +6 -17
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -4
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +1 -3
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +3 -15
- package/es/components/DataSpreadsheet/types/index.d.ts +1 -1
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +2 -34
- package/es/components/Datagrid/types/index.d.ts +4 -18
- package/es/components/Datagrid/useActionsColumn.d.ts +1 -8
- package/es/components/Datagrid/useActionsColumn.js +6 -7
- package/es/components/Datagrid/useColumnRightAlign.d.ts +1 -8
- package/es/components/Datagrid/useColumnRightAlign.js +3 -4
- package/es/components/Datagrid/useNestedRows.js +9 -27
- package/es/components/Decorator/Decorator.js +1 -2
- package/es/components/DecoratorBase/DecoratorBase.js +5 -3
- package/es/components/DecoratorDualButton/DecoratorDualButton.js +1 -2
- package/es/components/DecoratorLink/DecoratorLink.js +1 -2
- package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +1 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +16 -29
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +1 -9
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -18
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +0 -8
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +6 -17
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -4
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +1 -3
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +3 -15
- package/lib/components/DataSpreadsheet/types/index.d.ts +1 -1
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +2 -34
- package/lib/components/Datagrid/types/index.d.ts +4 -18
- package/lib/components/Datagrid/useActionsColumn.d.ts +1 -8
- package/lib/components/Datagrid/useActionsColumn.js +6 -7
- package/lib/components/Datagrid/useColumnRightAlign.d.ts +1 -8
- package/lib/components/Datagrid/useColumnRightAlign.js +3 -4
- package/lib/components/Datagrid/useNestedRows.js +9 -27
- package/lib/components/Decorator/Decorator.js +1 -2
- package/lib/components/DecoratorBase/DecoratorBase.js +5 -3
- package/lib/components/DecoratorDualButton/DecoratorDualButton.js +1 -2
- package/lib/components/DecoratorLink/DecoratorLink.js +1 -2
- package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +1 -2
- package/package.json +3 -3
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +0 -1
- package/scss/components/StatusIcon/_status-icon.scss +4 -4
- package/scss/components/StringFormatter/_string-formatter.scss +2 -2
- package/scss/components/UserProfileImage/_user-profile-image.scss +2 -6
@@ -23,30 +23,12 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
|
|
23
23
|
var useNestedRows = function useNestedRows(hooks) {
|
24
24
|
useNestedRowExpander["default"](hooks);
|
25
25
|
var useInstance = function useInstance(instance) {
|
26
|
-
React.useEffect(function () {
|
27
|
-
var _ref = instance,
|
28
|
-
rows = _ref.rows;
|
29
|
-
var defaultExpandedRows = rows.filter(function (row) {
|
30
|
-
var _row$original;
|
31
|
-
return row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.defaultExpanded;
|
32
|
-
});
|
33
|
-
if (defaultExpandedRows !== null && defaultExpandedRows !== void 0 && defaultExpandedRows.length) {
|
34
|
-
defaultExpandedRows.map(function (defaultExpandedRow) {
|
35
|
-
if (!(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.isExpanded) && !(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.hasExpanded)) {
|
36
|
-
var _defaultExpandedRow$t;
|
37
|
-
defaultExpandedRow === null || defaultExpandedRow === void 0 || (_defaultExpandedRow$t = defaultExpandedRow.toggleRowExpanded) === null || _defaultExpandedRow$t === void 0 || _defaultExpandedRow$t.call(defaultExpandedRow);
|
38
|
-
defaultExpandedRow.hasExpanded = true;
|
39
|
-
return;
|
40
|
-
}
|
41
|
-
});
|
42
|
-
}
|
43
|
-
}, [instance, instance.rows]);
|
44
26
|
// This useEffect will expand rows if they exist in the initialState obj
|
45
27
|
React.useEffect(function () {
|
46
28
|
var rows = instance.rows,
|
47
29
|
initialState = instance.initialState;
|
48
|
-
var
|
49
|
-
expandedRowIds =
|
30
|
+
var _ref = initialState,
|
31
|
+
expandedRowIds = _ref.expandedRowIds;
|
50
32
|
if (expandedRowIds) {
|
51
33
|
Object.keys(expandedRowIds).forEach(function (key) {
|
52
34
|
var row = rows.filter(function (r) {
|
@@ -60,14 +42,14 @@ var useNestedRows = function useNestedRows(hooks) {
|
|
60
42
|
}
|
61
43
|
}, [instance]);
|
62
44
|
var marginLeft = 24;
|
63
|
-
var getRowProps = function getRowProps(props,
|
64
|
-
var row =
|
45
|
+
var getRowProps = function getRowProps(props, _ref2) {
|
46
|
+
var row = _ref2.row;
|
65
47
|
return [props, {
|
66
48
|
className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
|
67
49
|
}];
|
68
50
|
};
|
69
|
-
var getRowStyles = function getRowStyles(props,
|
70
|
-
var row =
|
51
|
+
var getRowStyles = function getRowStyles(props, _ref3) {
|
52
|
+
var row = _ref3.row;
|
71
53
|
return [props, {
|
72
54
|
style: {
|
73
55
|
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
@@ -77,9 +59,9 @@ var useNestedRows = function useNestedRows(hooks) {
|
|
77
59
|
var getIndentation = function getIndentation(depth) {
|
78
60
|
return 32 * depth + 16;
|
79
61
|
}; // row indentation padding
|
80
|
-
var getCellProps = function getCellProps(props,
|
81
|
-
var cell =
|
82
|
-
instance =
|
62
|
+
var getCellProps = function getCellProps(props, _ref4) {
|
63
|
+
var cell = _ref4.cell,
|
64
|
+
instance = _ref4.instance;
|
83
65
|
// we add a dynamic -ve margin right only if the cell is resized below minimum width i.e 50px, else we set the width based on indentation at different levels
|
84
66
|
var isFirstCell = instance.columns.findIndex(function (c) {
|
85
67
|
return c.id === cell.column.id;
|
@@ -95,8 +95,7 @@ exports.Decorator.propTypes = {
|
|
95
95
|
*/
|
96
96
|
small: index["default"].bool,
|
97
97
|
/**
|
98
|
-
*
|
99
|
-
* Useful if you want "invert" the component's theme.
|
98
|
+
* Determines the theme of the component.
|
100
99
|
*/
|
101
100
|
theme: index["default"].oneOf(['light', 'dark']),
|
102
101
|
/**
|
@@ -32,7 +32,8 @@ var defaults = {
|
|
32
32
|
onContextMenu: function onContextMenu() {},
|
33
33
|
onContextMenuLabel: function onContextMenuLabel() {},
|
34
34
|
onContextMenuValue: function onContextMenuValue() {},
|
35
|
-
scoreThresholds: [0, 4, 7, 10]
|
35
|
+
scoreThresholds: [0, 4, 7, 10],
|
36
|
+
theme: 'light'
|
36
37
|
};
|
37
38
|
|
38
39
|
/**
|
@@ -64,7 +65,8 @@ var DecoratorBase = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
64
65
|
_ref$scoreThresholds = _ref.scoreThresholds,
|
65
66
|
scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
|
66
67
|
small = _ref.small,
|
67
|
-
theme = _ref.theme,
|
68
|
+
_ref$theme = _ref.theme,
|
69
|
+
theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
|
68
70
|
truncateValue = _ref.truncateValue,
|
69
71
|
value = _ref.value,
|
70
72
|
valueTitle = _ref.valueTitle,
|
@@ -74,7 +76,7 @@ var DecoratorBase = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
74
76
|
var _value = utils.truncate(value, truncateValue);
|
75
77
|
|
76
78
|
// These class names apply to all types of DecoratorBase.
|
77
|
-
var classNames = cx__default["default"](blockClass, className,
|
79
|
+
var classNames = cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(theme), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
|
78
80
|
|
79
81
|
// These properties apply to all <DecoratorIcons>.
|
80
82
|
var decoratorIconsProps = {
|
@@ -119,8 +119,7 @@ exports.DecoratorDualButton.propTypes = {
|
|
119
119
|
*/
|
120
120
|
small: index["default"].bool,
|
121
121
|
/**
|
122
|
-
*
|
123
|
-
* Useful if you want "invert" the component's theme.
|
122
|
+
* Determines the theme of the component.
|
124
123
|
*/
|
125
124
|
theme: index["default"].oneOf(['light', 'dark']),
|
126
125
|
/**
|
@@ -109,8 +109,7 @@ exports.DecoratorLink.propTypes = {
|
|
109
109
|
*/
|
110
110
|
small: index["default"].bool,
|
111
111
|
/**
|
112
|
-
*
|
113
|
-
* Useful if you want "invert" the component's theme.
|
112
|
+
* Determines the theme of the component.
|
114
113
|
*/
|
115
114
|
theme: index["default"].oneOf(['light', 'dark']),
|
116
115
|
/**
|
@@ -109,8 +109,7 @@ exports.DecoratorSingleButton.propTypes = {
|
|
109
109
|
*/
|
110
110
|
small: index["default"].bool,
|
111
111
|
/**
|
112
|
-
*
|
113
|
-
* Useful if you want "invert" the component's theme.
|
112
|
+
* Determines the theme of the component.
|
114
113
|
*/
|
115
114
|
theme: index["default"].oneOf(['light', 'dark']),
|
116
115
|
/**
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.43.2-canary.
|
4
|
+
"version": "2.43.2-canary.3+0bc2c3d22",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -88,7 +88,7 @@
|
|
88
88
|
"rimraf": "^5.0.5",
|
89
89
|
"rollup": "^2.79.1",
|
90
90
|
"rollup-plugin-strip-banner": "^3.0.0",
|
91
|
-
"sass": "^1.
|
91
|
+
"sass": "^1.70.0",
|
92
92
|
"typescript-config-carbon": "^0.2.1",
|
93
93
|
"yargs": "^17.7.2"
|
94
94
|
},
|
@@ -119,5 +119,5 @@
|
|
119
119
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
120
120
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
121
121
|
},
|
122
|
-
"gitHead": "
|
122
|
+
"gitHead": "0bc2c3d226a8de3254a66789b1694154aea54dee"
|
123
123
|
}
|
@@ -73,7 +73,7 @@ $themes: ('light', 'dark');
|
|
73
73
|
|
74
74
|
$block-class: #{$pkg-prefix}--status-icon;
|
75
75
|
|
76
|
-
@function
|
76
|
+
@function --clr($name, $theme: light) {
|
77
77
|
// stylelint-disable-next-line carbon/theme-token-use
|
78
78
|
$color: map-get(map-get($colors, $name), $theme);
|
79
79
|
@return $color;
|
@@ -125,13 +125,13 @@ $block-class: #{$pkg-prefix}--status-icon;
|
|
125
125
|
// stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
|
126
126
|
animation: rotating 8000ms infinite linear;
|
127
127
|
// stylelint-disable-next-line carbon/theme-token-use
|
128
|
-
fill:
|
128
|
+
fill: --clr($icon, $theme);
|
129
129
|
} @else if $icon == running {
|
130
130
|
// stylelint-disable-next-line carbon/theme-token-use
|
131
|
-
fill:
|
131
|
+
fill: --clr($icon, $theme);
|
132
132
|
} @else {
|
133
133
|
// stylelint-disable-next-line carbon/theme-token-use
|
134
|
-
fill:
|
134
|
+
fill: --clr($icon, $theme);
|
135
135
|
@media (prefers-reduced-motion) {
|
136
136
|
.#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
|
137
137
|
animation: none;
|
@@ -79,7 +79,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
|
|
79
79
|
.#{$block-class}
|
80
80
|
.#{$popover-block-class}--top-right
|
81
81
|
.#{$popover-block-class}-caret {
|
82
|
-
/* stylelint-disable-next-line */
|
82
|
+
/* stylelint-disable-next-line declaration-no-important */
|
83
83
|
inset-block-start: -1px !important;
|
84
84
|
}
|
85
85
|
|
@@ -92,6 +92,6 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
|
|
92
92
|
.#{$block-class}
|
93
93
|
.#{$popover-block-class}--bottom-right
|
94
94
|
.#{$popover-block-class}-caret {
|
95
|
-
/* stylelint-disable-next-line */
|
95
|
+
/* stylelint-disable-next-line declaration-no-important */
|
96
96
|
inset-block-end: -1px !important;
|
97
97
|
}
|
@@ -44,7 +44,7 @@ $themes: (
|
|
44
44
|
|
45
45
|
$theme-keys: map-keys($themes);
|
46
46
|
|
47
|
-
@function
|
47
|
+
@function --get-background-color($color, $key, $contrast-key) {
|
48
48
|
@return map-get(
|
49
49
|
$carbon-colors,
|
50
50
|
#{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
|
@@ -59,11 +59,7 @@ $theme-keys: map-keys($themes);
|
|
59
59
|
@each $contrast-key in $theme-keys {
|
60
60
|
.#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
|
61
61
|
// stylelint-disable-next-line carbon/theme-token-use
|
62
|
-
background-color:
|
63
|
-
$color,
|
64
|
-
$key,
|
65
|
-
$contrast-key
|
66
|
-
);
|
62
|
+
background-color: --get-background-color($color, $key, $contrast-key);
|
67
63
|
}
|
68
64
|
}
|
69
65
|
}
|