@carbon/ibm-products 1.12.0 → 1.13.0

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 (47) hide show
  1. package/css/index-full-carbon.css +60 -13
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +6 -6
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +14 -6
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +60 -13
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +5 -5
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +60 -13
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +6 -6
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/ActionBar/ActionBar.js +3 -1
  18. package/es/components/ActionBar/ActionBarOverflowItems.js +5 -3
  19. package/es/components/AddSelect/AddSelectList.js +27 -1
  20. package/es/components/AddSelect/AddSelectSidebar.js +15 -5
  21. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
  22. package/es/components/DataSpreadsheet/DataSpreadsheet.js +87 -31
  23. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +87 -33
  24. package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -4
  25. package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
  26. package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
  27. package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
  28. package/es/components/TagSet/TagSet.js +12 -3
  29. package/es/components/UserProfileImage/UserProfileImage.js +37 -9
  30. package/lib/components/ActionBar/ActionBar.js +3 -1
  31. package/lib/components/ActionBar/ActionBarOverflowItems.js +5 -3
  32. package/lib/components/AddSelect/AddSelectList.js +28 -1
  33. package/lib/components/AddSelect/AddSelectSidebar.js +15 -11
  34. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
  35. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +89 -30
  36. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +86 -33
  37. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -3
  38. package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
  39. package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
  40. package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
  41. package/lib/components/TagSet/TagSet.js +12 -3
  42. package/lib/components/UserProfileImage/UserProfileImage.js +37 -9
  43. package/package.json +9 -9
  44. package/scss/components/AddSelect/_add-select.scss +14 -2
  45. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +37 -5
  46. package/scss/components/HTTPErrors/_http-errors.scss +16 -16
  47. package/scss/components/PageHeader/_page-header.scss +4 -0
@@ -24,10 +24,9 @@ var HTTPErrorSvgOther = function HTTPErrorSvgOther(_ref) {
24
24
  return /*#__PURE__*/_react.default.createElement("svg", {
25
25
  xmlns: "http://www.w3.org/2000/svg",
26
26
  xmlnsXlink: "http://www.w3.org/1999/xlink",
27
- width: 1584,
28
- height: 916,
29
27
  viewBox: "0 0 1584 916",
30
- className: className
28
+ className: className,
29
+ preserveAspectRatio: "xMinYMax meet"
31
30
  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
32
31
  id: "prefix__clip-path"
33
32
  }, /*#__PURE__*/_react.default.createElement("path", {
@@ -57,7 +57,7 @@ var allTagsModalSearchThreshold = 10; // Default values for props
57
57
 
58
58
  var defaults = {
59
59
  align: 'start',
60
- allTagsModalTarget: document.body,
60
+ // allTagsModalTarget: document.body,
61
61
  overflowAlign: 'center',
62
62
  overflowDirection: 'bottom'
63
63
  };
@@ -65,8 +65,7 @@ var defaults = {
65
65
  var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
66
66
  var _ref$align = _ref.align,
67
67
  align = _ref$align === void 0 ? defaults.align : _ref$align,
68
- _ref$allTagsModalTarg = _ref.allTagsModalTarget,
69
- allTagsModalTarget = _ref$allTagsModalTarg === void 0 ? defaults.allTagsModalTarget : _ref$allTagsModalTarg,
68
+ allTagsModalTargetIn = _ref.allTagsModalTarget,
70
69
  className = _ref.className,
71
70
  maxVisible = _ref.maxVisible,
72
71
  _ref$overflowAlign = _ref.overflowAlign,
@@ -113,10 +112,20 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
113
112
 
114
113
  var overflowTag = (0, _react.useRef)(null);
115
114
 
115
+ var _useState11 = (0, _react.useState)(null),
116
+ _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
117
+ allTagsModalTarget = _useState12[0],
118
+ setAllTagsModalTarget = _useState12[1];
119
+
116
120
  var handleShowAllClick = function handleShowAllClick() {
117
121
  setShowAllModalOpen(true);
118
122
  };
119
123
 
124
+ (0, _react.useEffect)(function () {
125
+ var _document;
126
+
127
+ setAllTagsModalTarget(allTagsModalTargetIn !== null && allTagsModalTargetIn !== void 0 ? allTagsModalTargetIn : (_document = document) === null || _document === void 0 ? void 0 : _document.body);
128
+ }, [allTagsModalTargetIn]);
120
129
  (0, _react.useEffect)(function () {
121
130
  var newSizingTags = []; // create sizing tags
122
131
 
@@ -27,7 +27,7 @@ var _iconsReact = require("@carbon/icons-react");
27
27
 
28
28
  var _carbonComponentsReact = require("carbon-components-react");
29
29
 
30
- var _excluded = ["backgroundColor", "className", "kind", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
30
+ var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
31
31
  // The block part of our conventional BEM class names (blockClass__E--M).
32
32
  var blockClass = "".concat(_settings.pkg.prefix, "--user-profile-image");
33
33
  var componentName = 'UserProfileImage'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -40,6 +40,7 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
40
40
  var backgroundColor = _ref.backgroundColor,
41
41
  className = _ref.className,
42
42
  kind = _ref.kind,
43
+ icon = _ref.icon,
43
44
  initials = _ref.initials,
44
45
  image = _ref.image,
45
46
  imageDescription = _ref.imageDescription,
@@ -70,18 +71,40 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
70
71
  return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
71
72
  };
72
73
 
73
- var FillItem = image ? function () {
74
- return /*#__PURE__*/_react.default.createElement("img", {
75
- alt: imageDescription,
76
- src: image,
77
- className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
78
- });
79
- } : initials ? formatInitials : kind && size && icons[kind][size];
74
+ var getFillItem = function getFillItem() {
75
+ if (image) {
76
+ return function () {
77
+ return /*#__PURE__*/_react.default.createElement("img", {
78
+ alt: imageDescription,
79
+ src: image,
80
+ className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
81
+ });
82
+ };
83
+ }
84
+
85
+ if (initials) {
86
+ return formatInitials;
87
+ }
88
+
89
+ if (kind && size) {
90
+ return icons[kind][size];
91
+ }
92
+
93
+ return icon;
94
+ }; // if user doesn't provide a color just generate a random one
95
+
96
+
97
+ var getRandomColor = function getRandomColor() {
98
+ var colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
99
+ return colors[Math.floor(Math.random() * colors.length)];
100
+ };
101
+
102
+ var FillItem = getFillItem();
80
103
 
81
104
  var renderUserProfileImage = function renderUserProfileImage() {
82
105
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
83
106
  ref: ref,
84
- className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor)])
107
+ className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
85
108
  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(FillItem, null));
86
109
  };
87
110
 
@@ -107,6 +130,11 @@ UserProfileImage.propTypes = {
107
130
  */
108
131
  className: _propTypes.default.string,
109
132
 
133
+ /**
134
+ * Provide a custom icon to use if you need to use an icon other than the included ones
135
+ */
136
+ icon: _propTypes.default.object,
137
+
110
138
  /**
111
139
  * When passing the image prop, supply a full path to the image to be displayed.
112
140
  */
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": "1.12.0",
4
+ "version": "1.13.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -60,11 +60,11 @@
60
60
  "fs-extra": "^10.0.1",
61
61
  "glob": "^7.2.0",
62
62
  "jest": "^27.5.1",
63
- "jest-config-ibm-cloud-cognitive": "^0.23.13",
63
+ "jest-config-ibm-cloud-cognitive": "^0.23.14",
64
64
  "npm-check-updates": "^12.5.4",
65
65
  "npm-run-all": "^4.1.5",
66
66
  "rimraf": "^3.0.2",
67
- "sass": "^1.49.9",
67
+ "sass": "^1.49.10",
68
68
  "yargs": "^17.4.0"
69
69
  },
70
70
  "dependencies": {
@@ -76,17 +76,17 @@
76
76
  },
77
77
  "peerDependencies": {
78
78
  "@carbon/colors": "^10.37.1",
79
- "@carbon/icons-react": "^10.48.0",
79
+ "@carbon/icons-react": "^10.49.0",
80
80
  "@carbon/import-once": "^10.7.0",
81
81
  "@carbon/layout": "^10.37.1",
82
82
  "@carbon/motion": "^10.29.0",
83
- "@carbon/themes": "^10.53.2",
84
- "@carbon/type": "^10.43.2",
85
- "carbon-components": "^10.55.2",
86
- "carbon-components-react": "^7.55.2",
83
+ "@carbon/themes": "^10.54.0",
84
+ "@carbon/type": "^10.44.0",
85
+ "carbon-components": "^10.56.0",
86
+ "carbon-components-react": "^7.56.0",
87
87
  "carbon-icons": "^7.0.7",
88
88
  "react": "^16.8.6 || ^17.0.1",
89
89
  "react-dom": "^16.8.6 || ^17.0.1"
90
90
  },
91
- "gitHead": "85ac9b35afdba4e7e2d63c29cf4150347028e00d"
91
+ "gitHead": "553ac70187737c4946fc4ffd98fdfcafcc258ab2"
92
92
  }
@@ -73,10 +73,14 @@
73
73
  align-items: center;
74
74
  }
75
75
 
76
+ &-checkbox-label-wrapper {
77
+ display: flex;
78
+ margin-left: $spacing-03;
79
+ }
80
+
76
81
  &-checkbox-label-text {
77
82
  display: flex;
78
83
  flex-direction: column;
79
- padding-left: $spacing-05;
80
84
  }
81
85
 
82
86
  &-checkbox-wrapper.#{$carbon-prefix}--form-item {
@@ -86,6 +90,14 @@
86
90
  &-checkbox-wrapper .#{$carbon-prefix}--checkbox-label-text {
87
91
  display: none;
88
92
  }
93
+
94
+ &-cell-avatar {
95
+ margin-right: $spacing-03;
96
+ }
97
+
98
+ &-cell-icon {
99
+ margin-right: $spacing-03;
100
+ }
89
101
  }
90
102
 
91
103
  // sidebar
@@ -253,7 +265,7 @@
253
265
  }
254
266
 
255
267
  .#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
256
- padding-left: $spacing-05;
268
+ padding-left: $spacing-03;
257
269
  }
258
270
  }
259
271
 
@@ -22,8 +22,12 @@
22
22
  @mixin data-spreadsheet {
23
23
  // The block part of our conventional BEM class names (blockClass__E--M).
24
24
  $block-class: #{$pkg-prefix}--data-spreadsheet;
25
+ $body-cell-background: $field-01;
26
+ $header-cell-background: $ui-03;
25
27
 
26
28
  .#{$block-class} {
29
+ --#{$block-class}--total-width: 0;
30
+
27
31
  display: inline-block;
28
32
  border-spacing: 0;
29
33
 
@@ -60,8 +64,13 @@
60
64
  .#{$block-class}__td-th.#{$block-class}__td {
61
65
  @include set-header-borders();
62
66
 
63
- background-color: $ui-01;
67
+ background-color: $header-cell-background;
64
68
  cursor: pointer;
69
+
70
+ &:hover,
71
+ &:focus {
72
+ background-color: $hover-selected-ui;
73
+ }
65
74
  }
66
75
  .#{$block-class}__td-th.#{$block-class}__td {
67
76
  @include carbon--font-weight('semibold');
@@ -74,8 +83,9 @@
74
83
  .#{$block-class}__td {
75
84
  @include set-body-borders();
76
85
 
86
+ overflow: hidden;
77
87
  margin: 0;
78
- background-color: $ui-background;
88
+ background-color: $body-cell-background;
79
89
  cursor: cell;
80
90
  text-align: left;
81
91
  }
@@ -91,14 +101,34 @@
91
101
  position: absolute;
92
102
  z-index: 4;
93
103
  display: none;
104
+ overflow: hidden;
94
105
  /* stylelint-disable-next-line carbon/layout-token-use */
95
106
  padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
96
- background-color: $ui-background;
107
+ background-color: $body-cell-background;
97
108
  resize: none;
98
109
  &.#{$carbon-prefix}--text-area {
99
110
  min-width: initial;
100
111
  min-height: initial;
101
112
  }
113
+ &.#{$block-class}__cell-editor--active {
114
+ outline: $spacing-01 solid $interactive-01;
115
+ outline-offset: -2px;
116
+ }
117
+ }
118
+ .#{$block-class}__cell-editor-ruler {
119
+ @include carbon--type-style('body-short-01');
120
+
121
+ position: absolute;
122
+ overflow: hidden;
123
+ width: fit-content;
124
+ max-width: var(--#{$block-class}--total-width);
125
+ /* stylelint-disable-next-line carbon/layout-token-use */
126
+ padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
127
+ visibility: hidden;
128
+
129
+ &:focus {
130
+ outline: $spacing-01 solid $interactive-01;
131
+ }
102
132
  }
103
133
  .#{$block-class}__active-cell--highlight {
104
134
  @include carbon--type-style('body-short-01');
@@ -107,13 +137,15 @@
107
137
  position: absolute;
108
138
  z-index: 3;
109
139
  display: none;
140
+ overflow: hidden;
110
141
  // Could be fixed by using border-right but the fact that
111
142
  // this element is positioned absolute prevents that from working
112
143
  /* stylelint-disable-next-line carbon/layout-token-use */
113
144
  padding-right: calc(#{$spacing-03} - 1px);
114
145
  padding-bottom: $spacing-01;
115
146
  border: $spacing-01 solid $interactive-01;
116
- background-color: $ui-background;
147
+ background-color: $body-cell-background;
148
+ color: $text-01;
117
149
  text-align: left;
118
150
 
119
151
  &[data-active-row-index='header'],
@@ -146,7 +178,7 @@
146
178
  }
147
179
  .#{$block-class}__th--active-header,
148
180
  .#{$block-class}__td-th--active-header.#{$block-class}__td {
149
- background-color: $ui-03;
181
+ background-color: $hover-selected-ui;
150
182
  }
151
183
  }
152
184
  }
@@ -18,14 +18,15 @@
18
18
  $block-class: #{$pkg-prefix}--http-errors;
19
19
 
20
20
  .#{$block-class} .#{$block-class}__content {
21
- @include carbon--breakpoint(sm) {
22
- position: fixed;
23
- z-index: 2;
24
- top: 50%;
25
- left: 50%;
26
- transform: translate(-50%, -150%);
27
- }
21
+ position: fixed;
22
+ z-index: 2;
23
+ top: 50%;
24
+ left: 50%;
25
+ transform: translate(-50%, -75%);
28
26
  @include carbon--breakpoint(md) {
27
+ transform: translate(-50%, -100%);
28
+ }
29
+ @include carbon--breakpoint(lg) {
29
30
  transform: translate(-50%, -50%);
30
31
  }
31
32
  }
@@ -54,15 +55,14 @@
54
55
  margin-bottom: $spacing-02;
55
56
  }
56
57
  .#{$block-class} .#{$block-class}__image {
57
- @include carbon--breakpoint(sm) {
58
- position: fixed;
59
- top: 50%;
60
- left: 50%;
61
- width: 100%;
62
- transform: translate(-50%, -40%);
63
- }
64
- @include carbon--breakpoint(md) {
65
- transform: translate(-50%, -50%);
58
+ position: fixed;
59
+ bottom: 0;
60
+ left: 0;
61
+ width: 100%;
62
+ max-height: 100%;
63
+ @include carbon--breakpoint-down(md) {
64
+ left: 10%;
65
+ transform: scale(1.5);
66
66
  }
67
67
  }
68
68
  }
@@ -356,6 +356,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
356
356
  .#{$block-class}__title-row {
357
357
  margin-top: 0;
358
358
  margin-bottom: 0;
359
+ transform: translateY(
360
+ $spacing-01
361
+ ); // position adjusted for editable title focus outline
359
362
 
360
363
  @include carbon--breakpoint-up('md') {
361
364
  flex-wrap: nowrap; /* assume enough space */
@@ -363,6 +366,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
363
366
 
364
367
  &.#{$block-class}__title-row--under-action-bar {
365
368
  margin-top: $spacing-05;
369
+ transform: translateY(0); // Not needed under action bar
366
370
  }
367
371
 
368
372
  + .#{$block-class}__last-row-buffer--active {