@carbon/ibm-products 2.43.2-canary.139 → 2.43.2-canary.145

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 (8) hide show
  1. package/es/components/Datagrid/useSortableColumns.js +14 -1
  2. package/es/components/Tearsheet/TearsheetShell.js +9 -4
  3. package/es/global/js/hooks/useFocus.js +3 -2
  4. package/lib/components/Datagrid/useSortableColumns.js +14 -1
  5. package/lib/components/Tearsheet/TearsheetShell.js +9 -4
  6. package/lib/global/js/hooks/useFocus.js +3 -2
  7. package/package.json +4 -4
  8. package/telemetry.yml +1 -1
package/es/components/Datagrid/useSortableColumns.js CHANGED
@@ -113,6 +113,15 @@ var useSortableColumns = function useSortableColumns(hooks) {
113
113
  }
114
114
  return /*#__PURE__*/React__default.createElement(ArrowsVertical, iconProps);
115
115
  };
116
+ var handleKey = function handleKey(e, columnId) {
117
+ var key = e.key;
118
+ if (key === 'Enter') {
119
+ setTimeout(function () {
120
+ var _document$getElementB;
121
+ return (_document$getElementB = document.getElementById(columnId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
122
+ }, 0);
123
+ }
124
+ };
116
125
  var Header = function Header(headerProp) {
117
126
  return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
118
127
  "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
@@ -131,7 +140,11 @@ var useSortableColumns = function useSortableColumns(hooks) {
131
140
  slug: headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.slug
132
141
  }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
133
142
  },
134
- className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false))
143
+ id: column === null || column === void 0 ? void 0 : column.id,
144
+ className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false)),
145
+ onKeyDown: function onKeyDown(event) {
146
+ return handleKey(event, column.id);
147
+ }
135
148
  }, column.Header);
136
149
  };
137
150
  return _objectSpread2(_objectSpread2({}, column), {}, {
package/es/components/Tearsheet/TearsheetShell.js CHANGED
@@ -139,11 +139,16 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
139
139
 
140
140
  // Callback to give the tearsheet the opportunity to claim focus
141
141
  handleStackChange.claimFocus = function () {
142
- if (selectorPrimaryFocus) {
143
- var _getSpecificElement;
144
- return (_getSpecificElement = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) === null || _getSpecificElement === void 0 ? void 0 : _getSpecificElement.focus();
142
+ if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
143
+ var _window;
144
+ var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
145
+ if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
146
+ return specifiedEl.focus();
147
+ }
145
148
  }
146
- firstElement === null || firstElement === void 0 || firstElement.focus();
149
+ setTimeout(function () {
150
+ return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
151
+ }, 0);
147
152
  };
148
153
  useEffect(function () {
149
154
  if (open) {
package/es/global/js/hooks/useFocus.js CHANGED
@@ -10,7 +10,8 @@ import { pkg } from '../../../settings.js';
10
10
  import { useCallback, useEffect } from 'react';
11
11
 
12
12
  var getSpecificElement = function getSpecificElement(parentEl, elementId) {
13
- return elementId ? parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId) : null;
13
+ var element = parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId);
14
+ return elementId && !(element !== null && element !== void 0 && element.disabled) ? element : null;
14
15
  };
15
16
  var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
16
17
  var carbonPrefix = usePrefix();
@@ -18,7 +19,7 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
18
19
  // Querying focusable element in the modal
19
20
  // Query to exclude hidden elements in the modal from querySelectorAll() method
20
21
  // feel free to include more if needed :)
21
- var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"])");
22
+ var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"],[disabled])");
22
23
  // Queries to include element types button, input, select, textarea
23
24
  var queryButton = "button".concat(notQuery);
24
25
  var queryInput = "input".concat(notQuery);
package/lib/components/Datagrid/useSortableColumns.js CHANGED
@@ -122,6 +122,15 @@ var useSortableColumns = function useSortableColumns(hooks) {
122
122
  }
123
123
  return /*#__PURE__*/React__default["default"].createElement(icons.ArrowsVertical, iconProps);
124
124
  };
125
+ var handleKey = function handleKey(e, columnId) {
126
+ var key = e.key;
127
+ if (key === 'Enter') {
128
+ setTimeout(function () {
129
+ var _document$getElementB;
130
+ return (_document$getElementB = document.getElementById(columnId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
131
+ }, 0);
132
+ }
133
+ };
125
134
  var Header = function Header(headerProp) {
126
135
  return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default["default"].createElement(DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/React__default["default"].createElement(react.Button, {
127
136
  "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
@@ -140,7 +149,11 @@ var useSortableColumns = function useSortableColumns(hooks) {
140
149
  slug: headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.slug
141
150
  }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
142
151
  },
143
- className: cx__default["default"]("".concat(settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false))
152
+ id: column === null || column === void 0 ? void 0 : column.id,
153
+ className: cx__default["default"]("".concat(settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false)),
154
+ onKeyDown: function onKeyDown(event) {
155
+ return handleKey(event, column.id);
156
+ }
144
157
  }, column.Header);
145
158
  };
146
159
  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, column), {}, {
package/lib/components/Tearsheet/TearsheetShell.js CHANGED
@@ -148,11 +148,16 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
148
148
 
149
149
  // Callback to give the tearsheet the opportunity to claim focus
150
150
  handleStackChange.claimFocus = function () {
151
- if (selectorPrimaryFocus) {
152
- var _getSpecificElement;
153
- return (_getSpecificElement = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) === null || _getSpecificElement === void 0 ? void 0 : _getSpecificElement.focus();
151
+ if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
152
+ var _window;
153
+ var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
154
+ if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
155
+ return specifiedEl.focus();
156
+ }
154
157
  }
155
- firstElement === null || firstElement === void 0 || firstElement.focus();
158
+ setTimeout(function () {
159
+ return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
160
+ }, 0);
156
161
  };
157
162
  React.useEffect(function () {
158
163
  if (open) {
package/lib/global/js/hooks/useFocus.js CHANGED
@@ -14,7 +14,8 @@ var settings = require('../../../settings.js');
14
14
  var React = require('react');
15
15
 
16
16
  var getSpecificElement = function getSpecificElement(parentEl, elementId) {
17
- return elementId ? parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId) : null;
17
+ var element = parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId);
18
+ return elementId && !(element !== null && element !== void 0 && element.disabled) ? element : null;
18
19
  };
19
20
  var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
20
21
  var carbonPrefix = react.usePrefix();
@@ -22,7 +23,7 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
22
23
  // Querying focusable element in the modal
23
24
  // Query to exclude hidden elements in the modal from querySelectorAll() method
24
25
  // feel free to include more if needed :)
25
- var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"])");
26
+ var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"],[disabled])");
26
27
  // Queries to include element types button, input, select, textarea
27
28
  var queryButton = "button".concat(notQuery);
28
29
  var queryInput = "input".concat(notQuery);
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.139+85430cbb6",
4
+ "version": "2.43.2-canary.145+330f4af0e",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -81,7 +81,7 @@
81
81
  "fs-extra": "^11.2.0",
82
82
  "glob": "^10.3.10",
83
83
  "jest": "^29.7.0",
84
- "jest-config-ibm-cloud-cognitive": "^1.6.0-rc.0",
84
+ "jest-config-ibm-cloud-cognitive": "^1.6.0",
85
85
  "jest-environment-jsdom": "^29.7.0",
86
86
  "namor": "^1.1.2",
87
87
  "npm-check-updates": "^16.14.12",
@@ -96,7 +96,7 @@
96
96
  "dependencies": {
97
97
  "@babel/runtime": "^7.23.9",
98
98
  "@carbon/feature-flags": "^0.20.0",
99
- "@carbon/ibm-products-styles": "^2.43.0-rc.0",
99
+ "@carbon/ibm-products-styles": "^2.43.0",
100
100
  "@carbon/telemetry": "^0.1.0",
101
101
  "@dnd-kit/core": "^6.0.8",
102
102
  "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
120
120
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
121
121
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
122
122
  },
123
- "gitHead": "85430cbb6ca99c21bc699f216f759d06cad7a8f8"
123
+ "gitHead": "330f4af0eacb12290c901c77036db7f6513911c8"
124
124
  }
package/telemetry.yml CHANGED
@@ -104,6 +104,7 @@ collect:
104
104
  - formTitle
105
105
  - fullHeightDatagrid
106
106
  - getActionsState
107
+ - getAsyncSubRows
107
108
  - getConditionState
108
109
  - getFilterFlyoutProps
109
110
  - getOptions
@@ -530,7 +531,6 @@ collect:
530
531
  - isStatement
531
532
  - onConnectorOperatorChange
532
533
  - onStatementChange
533
- - setShowDeletionPreviewForSubgroups
534
534
  # ConditionBuilderAdd
535
535
  - buttonLabel
536
536
  - enableSubGroup