@carbon/react 1.33.0-rc.0 → 1.33.0

package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -5,46 +5,47 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-export interface DataTableSkeletonProps {
+import { TableHTMLAttributes } from 'react';
+export interface DataTableSkeletonHeader {
     /**
-     * Specify an optional className to add.
+     * Optionally specify header label
      */
-    className?: string;
+    header?: string;
+    /**
+     * Optionally specify header key
+     */
+    key?: string;
+}
+export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableElement> {
     /**
      * Specify the number of columns that you want to render in the skeleton state
      */
-    columnCount: number;
+    columnCount?: number;
     /**
      * Optionally specify whether you want the Skeleton to be rendered as a
      * compact DataTable
      */
-    compact: boolean;
+    compact?: boolean;
     /**
      * Optionally specify the displayed headers
      */
-    headers?: [{
-        header: string;
-        key: string;
-    }] | {
-        header: string;
-        key: string;
-    };
+    headers?: DataTableSkeletonHeader[];
     /**
      * Specify the number of rows that you want to render in the skeleton state
      */
-    rowCount: number;
+    rowCount?: number;
     /**
      * Specify if the table header should be rendered as part of the skeleton.
      */
-    showHeader: boolean;
+    showHeader?: boolean;
     /**
      * Specify if the table toolbar should be rendered as part of the skeleton.
      */
-    showToolbar: boolean;
+    showToolbar?: boolean;
     /**
      * Optionally specify whether you want the DataTable to be zebra striped
      */
-    zebra: boolean;
+    zebra?: boolean;
 }
 declare const DataTableSkeleton: {
     ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {

package/es/components/Tag/Tag.js

@@ -41,6 +41,7 @@ const Tag = _ref => {
     disabled,
     onClose,
     size,
+    as: BaseComponent,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -61,7 +62,8 @@ const Tag = _ref => {
     }
   };
   if (filter) {
-    return /*#__PURE__*/React__default.createElement("div", _extends({
+    const ComponentTag = BaseComponent ?? 'div';
+    return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
       className: tagClasses,
       id: tagId
     }, other), /*#__PURE__*/React__default.createElement("span", {
@@ -76,7 +78,7 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }
-  const ComponentTag = other.onClick ? 'button' : 'div';
+  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
     disabled: ComponentTag === 'button' ? disabled : null,
     className: tagClasses,
@@ -88,6 +90,11 @@ const Tag = _ref => {
   }, children !== null && children !== undefined ? children : TYPES[type]));
 };
 Tag.propTypes = {
+  /**
+   * Provide an alternative tag or component to use instead of the default
+   * wrapping element
+   */
+  as: PropTypes.elementType,
   /**
    * Provide content to be rendered inside of a <Tag>
    */

package/es/components/TextArea/TextArea.js

@@ -61,7 +61,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
       if (!other.disabled && onChange) {
         // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
         setTimeout(() => {
-          setTextCount(evt.target.value?.length);
+          setTextCount(evt.target?.value?.length);
         }, 0);
         onChange(evt);
       }

package/es/components/UIShell/HeaderMenuButton.d.ts

@@ -28,6 +28,10 @@ declare namespace HeaderMenuButton {
          * Specify whether the menu button is "active".
          */
         isActive: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the menu button is collapsible.
+         */
+        isCollapsible: PropTypes.Requireable<boolean>;
         /**
          * Optionally provide an onClick handler that is called when the underlying
          * button fires it's onclick event

package/es/components/UIShell/HeaderMenuButton.js

@@ -64,6 +64,10 @@ HeaderMenuButton.propTypes = {
    * Specify whether the menu button is "active".
    */
   isActive: PropTypes.bool,
+  /**
+   * Specify whether the menu button is collapsible.
+   */
+  isCollapsible: PropTypes.bool,
   /**
    * Optionally provide an onClick handler that is called when the underlying
    * button fires it's onclick event

package/es/components/UIShell/HeaderPanel.js

@@ -39,7 +39,7 @@ const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(
   const eventHandlers = {};
   if (addFocusListeners) {
     eventHandlers.onBlur = event => {
-      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement.classList.contains('cds--switcher__item-link')) {
+      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains('cds--switcher__item-link')) {
         setExpandedState(false);
         setLastClickedElement(null);
         if (expanded) {

package/es/components/UIShell/Switcher.js

@@ -57,12 +57,23 @@ const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props,
     const switcherItem = switcherRef.current.children[nextValidIndex].children[0];
     switcherItem?.focus();
   };
-  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
-    handleSwitcherItemFocus,
-    index,
-    key: index,
-    expanded
-  }));
+  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
+    // handleSwitcherItemFocus should only be passed down if the child is a SwitcherItem
+    // SwitcherDivider, for example, does not accept a handleSwitcherItemFocus prop
+    if (child.type?.displayName === 'SwitcherItem') {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        handleSwitcherItemFocus,
+        index,
+        key: index,
+        expanded
+      });
+    }
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      index,
+      key: index,
+      expanded
+    });
+  });
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref,
     className: className

package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -5,46 +5,47 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-export interface DataTableSkeletonProps {
+import { TableHTMLAttributes } from 'react';
+export interface DataTableSkeletonHeader {
     /**
-     * Specify an optional className to add.
+     * Optionally specify header label
      */
-    className?: string;
+    header?: string;
+    /**
+     * Optionally specify header key
+     */
+    key?: string;
+}
+export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableElement> {
     /**
      * Specify the number of columns that you want to render in the skeleton state
      */
-    columnCount: number;
+    columnCount?: number;
     /**
      * Optionally specify whether you want the Skeleton to be rendered as a
      * compact DataTable
      */
-    compact: boolean;
+    compact?: boolean;
     /**
      * Optionally specify the displayed headers
      */
-    headers?: [{
-        header: string;
-        key: string;
-    }] | {
-        header: string;
-        key: string;
-    };
+    headers?: DataTableSkeletonHeader[];
     /**
      * Specify the number of rows that you want to render in the skeleton state
      */
-    rowCount: number;
+    rowCount?: number;
     /**
      * Specify if the table header should be rendered as part of the skeleton.
      */
-    showHeader: boolean;
+    showHeader?: boolean;
     /**
      * Specify if the table toolbar should be rendered as part of the skeleton.
      */
-    showToolbar: boolean;
+    showToolbar?: boolean;
     /**
      * Optionally specify whether you want the DataTable to be zebra striped
      */
-    zebra: boolean;
+    zebra?: boolean;
 }
 declare const DataTableSkeleton: {
     ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {

package/lib/components/Tag/Tag.js

@@ -51,6 +51,7 @@ const Tag = _ref => {
     disabled,
     onClose,
     size,
+    as: BaseComponent,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -71,7 +72,8 @@ const Tag = _ref => {
     }
   };
   if (filter) {
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    const ComponentTag = BaseComponent ?? 'div';
+    return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
       className: tagClasses,
       id: tagId
     }, other), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -86,7 +88,7 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
-  const ComponentTag = other.onClick ? 'button' : 'div';
+  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
     disabled: ComponentTag === 'button' ? disabled : null,
     className: tagClasses,
@@ -98,6 +100,11 @@ const Tag = _ref => {
   }, children !== null && children !== undefined ? children : TYPES[type]));
 };
 Tag.propTypes = {
+  /**
+   * Provide an alternative tag or component to use instead of the default
+   * wrapping element
+   */
+  as: PropTypes__default["default"].elementType,
   /**
    * Provide content to be rendered inside of a <Tag>
    */

package/lib/components/TextArea/TextArea.js

@@ -71,7 +71,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
       if (!other.disabled && onChange) {
         // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
         setTimeout(() => {
-          setTextCount(evt.target.value?.length);
+          setTextCount(evt.target?.value?.length);
         }, 0);
         onChange(evt);
       }

package/lib/components/UIShell/HeaderMenuButton.d.ts

@@ -28,6 +28,10 @@ declare namespace HeaderMenuButton {
          * Specify whether the menu button is "active".
          */
         isActive: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the menu button is collapsible.
+         */
+        isCollapsible: PropTypes.Requireable<boolean>;
         /**
          * Optionally provide an onClick handler that is called when the underlying
          * button fires it's onclick event

package/lib/components/UIShell/HeaderMenuButton.js

@@ -74,6 +74,10 @@ HeaderMenuButton.propTypes = {
    * Specify whether the menu button is "active".
    */
   isActive: PropTypes__default["default"].bool,
+  /**
+   * Specify whether the menu button is collapsible.
+   */
+  isCollapsible: PropTypes__default["default"].bool,
   /**
    * Optionally provide an onClick handler that is called when the underlying
    * button fires it's onclick event

package/lib/components/UIShell/HeaderPanel.js

@@ -49,7 +49,7 @@ const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function H
   const eventHandlers = {};
   if (addFocusListeners) {
     eventHandlers.onBlur = event => {
-      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement.classList.contains('cds--switcher__item-link')) {
+      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains('cds--switcher__item-link')) {
         setExpandedState(false);
         setLastClickedElement(null);
         if (expanded) {

package/lib/components/UIShell/Switcher.js

@@ -67,12 +67,23 @@ const Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Swit
     const switcherItem = switcherRef.current.children[nextValidIndex].children[0];
     switcherItem?.focus();
   };
-  const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
-    handleSwitcherItemFocus,
-    index,
-    key: index,
-    expanded
-  }));
+  const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
+    // handleSwitcherItemFocus should only be passed down if the child is a SwitcherItem
+    // SwitcherDivider, for example, does not accept a handleSwitcherItemFocus prop
+    if (child.type?.displayName === 'SwitcherItem') {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        handleSwitcherItemFocus,
+        index,
+        key: index,
+        expanded
+      });
+    }
+    return /*#__PURE__*/React__default["default"].cloneElement(child, {
+      index,
+      key: index,
+      expanded
+    });
+  });
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     className: className

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.33.0-rc.0",
+  "version": "1.33.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.15.0",
-    "@carbon/icons-react": "^11.22.0-rc.0",
-    "@carbon/layout": "^11.16.0-rc.0",
-    "@carbon/styles": "^1.33.0-rc.0",
+    "@carbon/icons-react": "^11.22.0",
+    "@carbon/layout": "^11.16.0",
+    "@carbon/styles": "^1.33.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -75,7 +75,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.21.0-rc.0",
+    "@carbon/themes": "^11.21.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -137,5 +137,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "b9e28c4e35eeddf4ecc3261630a8f3fecc7012d4"
+  "gitHead": "3a58934eed5588f5e8ee1facbb09584a41adc089"
 }