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

Sign up to get free protection for your applications and to get access to all the features.
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