@carbon/react 1.22.0-rc.0 → 1.23.0-rc.0

package/lib/components/Select/Select.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { HTMLAttributes } from 'react';
+export interface SelectSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+}
+declare const SelectSkeleton: {
+    ({ hideLabel, className, ...rest }: SelectSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default SelectSkeleton;
+export { SelectSkeleton };

package/lib/components/Select/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Select = require('./Select.js');
+var Select_Skeleton = require('./Select.Skeleton.js');
 
 
 
 exports.Select = Select["default"];
 exports["default"] = Select["default"];
+exports.SelectSkeleton = Select_Skeleton["default"];

package/lib/components/TextArea/TextArea.js

@@ -114,6 +114,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
   useIsomorphicEffect["default"](function () {
     if (other.cols) {
       textareaRef.current.style.width = null;
+      textareaRef.current.style.resize = 'none';
     } else {
       textareaRef.current.style.width = "100%";
     }

package/lib/components/Toggle/Toggle.js

@@ -51,6 +51,7 @@ function Toggle(_ref) {
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
+  var buttonElement = React.useRef(null);
 
   var _useControllableState = useControllableState.useControllableState({
     value: toggled,
@@ -79,37 +80,53 @@ function Toggle(_ref) {
   var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
   var switchClasses = cx__default["default"]("".concat(prefix, "--toggle__switch"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: wrapperClasses
-  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
-    id: id,
-    className: "".concat(prefix, "--toggle__button"),
-    role: "switch",
-    type: "button",
-    "aria-checked": checked,
-    "aria-labelledby": ariaLabelledby,
-    disabled: disabled,
-    onClick: handleClick
-  })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
-    htmlFor: ariaLabelledby ? null : id,
-    className: "".concat(prefix, "--toggle__label")
-  }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: labelTextClasses
-  }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: appearanceClasses
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: switchClasses
-  }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: "".concat(prefix, "--toggle__check"),
-    width: "6px",
-    height: "5px",
-    viewBox: "0 0 6 5"
-  }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-  })))), renderSideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--toggle__text"),
-    "aria-hidden": "true"
-  }, sideLabel))));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default["default"].createElement("div", {
+      className: wrapperClasses,
+      onClick: ariaLabelledby ? function (e) {
+        // the underlying <button> can only be activated by keyboard as it is visually hidden;
+        // therefore, if this event's target is the <button>, it had to be triggered by
+        // the keyboard event which already calls handleClick. if we wouldn't catch this, the
+        // onClick and onToggle functions would be called twice whenever the user activates the
+        // toggle by keyboard and props['aria-labelledby'] is passed.
+        if (buttonElement.current && e.target !== buttonElement.current) {
+          handleClick(e);
+          buttonElement.current.focus();
+        }
+      } : null
+    }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
+      ref: buttonElement,
+      id: id,
+      className: "".concat(prefix, "--toggle__button"),
+      role: "switch",
+      type: "button",
+      "aria-checked": checked,
+      "aria-labelledby": ariaLabelledby,
+      disabled: disabled,
+      onClick: handleClick
+    })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
+      htmlFor: ariaLabelledby ? null : id,
+      className: "".concat(prefix, "--toggle__label")
+    }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: labelTextClasses
+    }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: appearanceClasses
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: switchClasses
+    }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
+      className: "".concat(prefix, "--toggle__check"),
+      width: "6px",
+      height: "5px",
+      viewBox: "0 0 6 5"
+    }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+    })))), renderSideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(prefix, "--toggle__text"),
+      "aria-hidden": "true"
+    }, sideLabel))))
+  );
 }
 Toggle.propTypes = {
   /**
@@ -133,7 +150,11 @@ Toggle.propTypes = {
   disabled: PropTypes__default["default"].bool,
 
   /**
-   * Specify whether the label should be hidden, or not
+   * If true, the side labels (props.labelA and props.labelB) will be replaced by
+   * props.labelText, so that the toggle doesn't render a top label. In order to fully
+   * hide any labels, you can use props['aria-labelledby'] to refer to another element
+   * that labels the toggle. props.labelText would no longer be required in that case
+   * and can therefore be omitted.
    */
   hideLabel: PropTypes__default["default"].bool,
 

package/lib/components/Toggletip/index.js

@@ -112,10 +112,34 @@ function Toggletip(_ref2) {
 
   function onKeyDown(event) {
     if (open && match.match(event, keys.Escape)) {
-      actions.close();
+      actions.close(); // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+
+      var button = ref.current.children[0];
+
+      if (button && button.type === 'button') {
+        button.focus();
+      }
     }
   }
 
+  function handleBlur(event) {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
+    }
+  } // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
+
+
+  useEvent.useWindowEvent('blur', function () {
+    if (open) {
+      actions.close();
+    }
+  });
   useEvent.useWindowEvent('click', function (event) {
     if (open && !ref.current.contains(event.target)) {
       actions.close();
@@ -132,6 +156,7 @@ function Toggletip(_ref2) {
     highContrast: true,
     open: open,
     onKeyDown: onKeyDown,
+    onBlur: handleBlur,
     ref: ref
   }, children));
 }

package/lib/components/Tooltip/Tooltip.js

@@ -27,7 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["align", "className", "children", "label", "description", "enterDelayMs", "leaveDelayMs", "defaultOpen"];
+var _excluded = ["align", "className", "children", "label", "description", "enterDelayMs", "leaveDelayMs", "defaultOpen", "closeOnActivation"];
 
 function Tooltip(_ref) {
   var _ref$align = _ref.align,
@@ -42,6 +42,8 @@ function Tooltip(_ref) {
       leaveDelayMs = _ref$leaveDelayMs === void 0 ? 300 : _ref$leaveDelayMs,
       _ref$defaultOpen = _ref.defaultOpen,
       defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      _ref$closeOnActivatio = _ref.closeOnActivation,
+      closeOnActivation = _ref$closeOnActivatio === void 0 ? false : _ref$closeOnActivatio,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var containerRef = React.useRef(null);
@@ -62,10 +64,28 @@ function Tooltip(_ref) {
     onBlur: function onBlur() {
       return setOpen(false);
     },
+    onClick: function onClick() {
+      return closeOnActivation && setOpen(false);
+    },
     // This should be placed on the trigger in case the element is disabled
     onMouseEnter: onMouseEnter
   };
 
+  function getChildEventHandlers(childProps) {
+    var eventHandlerFunctions = ['onFocus', 'onBlur', 'onClick', 'onMouseEnter'];
+    var eventHandlers = {};
+    eventHandlerFunctions.forEach(function (functionName) {
+      eventHandlers[functionName] = function (evt) {
+        triggerProps[functionName]();
+
+        if (childProps !== null && childProps !== void 0 && childProps[functionName]) {
+          childProps === null || childProps === void 0 ? void 0 : childProps[functionName](evt);
+        }
+      };
+    });
+    return eventHandlers;
+  }
+
   if (label) {
     triggerProps['aria-labelledby'] = id;
   } else {
@@ -77,6 +97,10 @@ function Tooltip(_ref) {
       event.stopPropagation();
       setOpen(false);
     }
+
+    if (open && closeOnActivation && (match.match(event, keys.Enter) || match.match(event, keys.Space))) {
+      setOpen(false);
+    }
   }
 
   function onMouseEnter() {
@@ -104,7 +128,7 @@ function Tooltip(_ref) {
     onMouseLeave: onMouseLeave,
     open: open,
     ref: containerRef
-  }), /*#__PURE__*/React__default["default"].cloneElement(child, triggerProps), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
+  }), /*#__PURE__*/React__default["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, triggerProps), getChildEventHandlers(child.props))), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
     "aria-hidden": "true",
     className: "".concat(prefix, "--tooltip-content"),
     id: id,
@@ -129,6 +153,11 @@ Tooltip.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
+  /**
+   * Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+   */
+  closeOnActivation: PropTypes__default["default"].bool,
+
   /**
    * Specify whether the tooltip should be open when it first renders
    */

package/lib/internal/FloatingMenu.js

@@ -277,10 +277,7 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       tabbableNode || // First sequentially focusable node
       focusableNode || // First programmatic focusable node
       menuBody;
-
-      if (_this.props.focusTrap) {
-        focusTarget.focus();
-      }
+      focusTarget.focus();
 
       if (focusTarget === menuBody && process.env.NODE_ENV !== "production") {
         process.env.NODE_ENV !== "production" ? warning.warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;

package/lib/internal/useNormalizedInputProps.js

@@ -20,12 +20,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 /**
  * @typedef {object} InputProps
  * @property {string} id - The input's id
- * @property {boolean} readOnly - Whether the input should be readonly
+ * @property {boolean | undefined} readOnly - Whether the input should be readonly
  * @property {boolean} disabled - Whether the input should be disabled
  * @property {boolean} invalid - Whether the input should be marked as invalid
- * @property {string} invalidText - The validation message displayed in case the input is considered invalid
+ * @property {React.ReactNode | undefined} invalidText - The validation message displayed in case the input is considered invalid
  * @property {boolean} warn - Whether the input should be in warning state
- * @property {string} warnText - The validation message displayed in case the input is in warning state
+ * @property {React.ReactNode | undefined} warnText - The validation message displayed in case the input is in warning state
  */
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.22.0-rc.0",
+  "version": "1.23.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.12.0",
-    "@carbon/icons-react": "^11.16.0-rc.0",
+    "@carbon/icons-react": "^11.16.0",
     "@carbon/layout": "^11.11.0",
-    "@carbon/styles": "^1.22.0-rc.0",
+    "@carbon/styles": "^1.23.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -89,8 +89,6 @@
     "@storybook/manager-webpack5": "^6.5.6",
     "@storybook/react": "^6.5.6",
     "@storybook/theming": "^6.5.6",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
@@ -135,5 +133,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "3e7357ecc2ee754a8d5a2c23c1082d5cdd425faa"
+  "gitHead": "61937768ed4c69f8ec98c7c193d3c30b12c03b46"
 }

package/es/_virtual/ResizeObserver.es.js

@@ -1,13 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { getAugmentedNamespace } from './_commonjsHelpers.js';
-import * as ResizeObserver_es from '../node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js';
-
-var require$$0 = /*@__PURE__*/getAugmentedNamespace(ResizeObserver_es);
-
-export { require$$0 as default };

package/es/_virtual/_commonjsHelpers.js

@@ -1,42 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			if (this instanceof a) {
-				var args = [null];
-				args.push.apply(args, arguments);
-				var Ctor = Function.bind.apply(f, args);
-				return new Ctor();
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-export { commonjsGlobal, getAugmentedNamespace, getDefaultExportFromCjs };

package/es/_virtual/index.js

@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var l10nExports = {};
-var l10n = {
-  get exports(){ return l10nExports; },
-  set exports(v){ l10nExports = v; },
-};
-
-export { l10n as __module, l10nExports as exports };

package/es/_virtual/rangePlugin.js

@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var rangePluginExports = {};
-var rangePlugin = {
-  get exports(){ return rangePluginExports; },
-  set exports(v){ rangePluginExports = v; },
-};
-
-export { rangePlugin as __module, rangePluginExports as exports };