@carbon/react 1.25.0 → 1.26.0-rc.0

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

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+export interface SearchSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify whether the Search should be a small variant.
+     */
+    small?: boolean;
+}
+declare const SearchSkeleton: {
+    ({ small, className, ...rest }: SearchSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the Search should be a small variant
+         */
+        small: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        small: boolean;
+    };
+};
+export default SearchSkeleton;
+export { SearchSkeleton };

package/lib/components/Search/Search.js

@@ -54,7 +54,7 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
       onKeyDown = _ref.onKeyDown,
       onExpand = _ref.onExpand,
       _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'Search' : _ref$placeholder,
       renderIcon = _ref.renderIcon,
       _ref$role = _ref.role,
       role = _ref$role === void 0 ? 'searchbox' : _ref$role,
@@ -125,9 +125,10 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
     role: "search",
-    "aria-labelledby": searchId,
+    "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "aria-labelledby": uniqueId,
     role: onExpand ? 'button' : null,
     className: "".concat(prefix, "--search-magnifier"),
     onClick: onExpand

package/lib/components/Search/index.js

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

package/lib/components/StructuredList/StructuredList.js

@@ -256,7 +256,7 @@ StructuredListInput.propTypes = {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange: deprecate["default"](PropTypes__default["default"].func, "\nThe prop `onChange` will be removed in the next major version of Carbon."),
+  onChange: PropTypes__default["default"].func,
 
   /**
    * Provide a `title` for the input

package/lib/components/Tabs/Tabs.js

@@ -39,7 +39,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _ChevronLeft, _ChevronRight;
 
 var _excluded = ["activation", "aria-label", "children", "className", "contained", "iconSize", "leftOverflowButtonProps", "light", "rightOverflowButtonProps", "scrollDebounceWait", "scrollIntoView"],
-    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown"],
+    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "hasSecondaryLabel"],
     _excluded3 = ["children", "className", "defaultOpen", "enterDelayMs", "leaveDelayMs", "label"],
     _excluded4 = ["children", "className"];
 
@@ -177,7 +177,10 @@ function TabList(_ref2) {
       scrollLeft = _useState6[0],
       setScrollLeft = _useState6[1];
 
-  var className = cx__default["default"]("".concat(prefix, "--tabs"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--contained"), contained), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--default"), iconSize === 'default'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--lg"), iconSize === 'lg'), _cx)); // Previous Button
+  var hasSecondaryLabelTabs = contained && !!React__default["default"].Children.toArray(children).filter(function (child) {
+    return child.props.secondaryLabel;
+  }).length;
+  var className = cx__default["default"]("".concat(prefix, "--tabs"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--contained"), contained), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--default"), iconSize === 'default'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--lg"), iconSize === 'lg'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--tall"), hasSecondaryLabelTabs), _cx)); // Previous Button
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT > 0
@@ -337,7 +340,8 @@ function TabList(_ref2) {
     }, /*#__PURE__*/React__default["default"].cloneElement(child, {
       ref: function ref(node) {
         tabs.current[index] = node;
-      }
+      },
+      hasSecondaryLabel: hasSecondaryLabelTabs
     }));
   })), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     "aria-hidden": "true",
@@ -462,6 +466,8 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
       disabled = _ref5.disabled,
       _onClick = _ref5.onClick,
       onKeyDown = _ref5.onKeyDown,
+      secondaryLabel = _ref5.secondaryLabel,
+      hasSecondaryLabel = _ref5.hasSecondaryLabel,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded2);
 
   var prefix = usePrefix.usePrefix();
@@ -498,7 +504,11 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
     onKeyDown: onKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), children);
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--tabs__nav-item-label")
+  }, children), hasSecondaryLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item-secondary-label")
+  }, secondaryLabel));
 });
 Tab.propTypes = {
   /**
@@ -521,6 +531,11 @@ Tab.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
+  /*
+   * Internal use only, determines wether a tab should render as a secondary label tab
+   **/
+  hasSecondaryLabel: PropTypes__default["default"].bool,
+
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
@@ -536,7 +551,13 @@ Tab.propTypes = {
    * Useful for using Tab along with react-router or other client
    * side router libraries.
    **/
-  renderButton: PropTypes__default["default"].func
+  renderButton: PropTypes__default["default"].func,
+
+  /*
+   * An optional label to render under the primary tab label.
+  /* This prop is only useful for conained tabs
+   **/
+  secondaryLabel: PropTypes__default["default"].string
 };
 var IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref6, ref) {
   var children = _ref6.children,

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+export interface TextInputSkeletonProps extends React.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 TextInputSkeleton: {
+    ({ hideLabel, className, ...rest }: TextInputSkeletonProps): 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 TextInputSkeleton;
+export { TextInputSkeleton };

package/lib/components/TextInput/index.js

@@ -13,6 +13,7 @@ var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js')
 var ControlledPasswordInput = require('./ControlledPasswordInput.js');
 var PasswordInput = require('./PasswordInput.js');
 var TextInput = require('./TextInput.js');
+var TextInput_Skeleton = require('./TextInput.Skeleton.js');
 
 TextInput["default"].ControlledPasswordInput = ControlledPasswordInput["default"];
 TextInput["default"].PasswordInput = PasswordInput["default"];
@@ -24,3 +25,4 @@ if (process.env.NODE_ENV !== "production") {
 
 exports.TextInput = TextInput["default"];
 exports["default"] = TextInput["default"];
+exports.TextInputSkeleton = TextInput_Skeleton["default"];

package/lib/components/Tile/Tile.js

@@ -32,7 +32,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 
 var _excluded = ["children", "className", "light"],
-    _excluded2 = ["children", "className", "clicked", "href", "light", "onClick", "onKeyDown"],
+    _excluded2 = ["children", "className", "clicked", "disabled", "href", "light", "onClick", "onKeyDown"],
     _excluded3 = ["children", "className", "disabled", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
     _excluded4 = ["tabIndex", "className", "children", "expanded", "tileMaxHeight", "tilePadding", "onClick", "onKeyUp", "tileCollapsedIconText", "tileExpandedIconText", "tileCollapsedLabel", "tileExpandedLabel", "light"];
 var Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
@@ -74,6 +74,7 @@ var ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function C
       className = _ref2.className,
       _ref2$clicked = _ref2.clicked,
       clicked = _ref2$clicked === void 0 ? false : _ref2$clicked,
+      disabled = _ref2.disabled,
       href = _ref2.href,
       light = _ref2.light,
       _ref2$onClick = _ref2.onClick,
@@ -111,9 +112,10 @@ var ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function C
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
     className: classes,
     href: href,
-    onClick: handleOnClick,
+    onClick: !disabled ? handleOnClick : null,
     onKeyDown: handleOnKeyDown,
-    ref: ref
+    ref: ref,
+    disabled: disabled
   }, rest), children);
 });
 ClickableTile.displayName = 'ClickableTile';
@@ -133,6 +135,11 @@ ClickableTile.propTypes = {
    */
   clicked: PropTypes__default["default"].bool,
 
+  /**
+   * Specify whether the ClickableTile should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
   /**
    * The href for the link.
    */
@@ -369,7 +376,7 @@ function ExpandableTile(_ref4) {
       isExpanded = _useState18[0],
       setIsExpanded = _useState18[1];
 
-  var _useState19 = React.useState(false),
+  var _useState19 = React.useState(true),
       _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
       interactive = _useState20[0],
       setInteractive = _useState20[1];
@@ -439,11 +446,11 @@ function ExpandableTile(_ref4) {
     setIsTilePadding(paddingTop + paddingBottom);
   }, [isTileMaxHeight]);
   useIsomorphicEffect["default"](function () {
-    if (useNoInteractiveChildren.getInteractiveContent(belowTheFold.current)) {
-      setInteractive(true);
+    if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current)) {
+      setInteractive(false);
       return;
-    } else if (useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current)) {
-      setInteractive(true);
+    } else if (!useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current)) {
+      setInteractive(false);
     }
   }, []);
   useIsomorphicEffect["default"](function () {

package/lib/components/UIShell/HeaderMenu.js

@@ -16,6 +16,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -25,7 +26,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["isCurrentPage", "aria-label", "aria-labelledby", "className", "children", "renderMenuContent", "menuLinkName", "focusRef"];
+var _excluded = ["isActive", "isCurrentPage", "aria-label", "aria-labelledby", "className", "children", "renderMenuContent", "menuLinkName", "focusRef"];
 /**
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
  * will be a `HeaderMenuItem`. It handles certain keyboard events to help
@@ -159,6 +160,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       var prefix = this.context;
 
       var _this$props = this.props,
+          isActive = _this$props.isActive,
           isCurrentPage = _this$props.isCurrentPage,
           ariaLabel = _this$props['aria-label'],
           ariaLabelledBy = _this$props['aria-labelledby'],
@@ -174,7 +176,8 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         'aria-labelledby': ariaLabelledBy
       };
       var itemClassName = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
-      var linkClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-item--current"), isCurrentPage), _cx2)); // Notes on eslint comments and based on the examples in:
+      var isActivePage = isActive ? isActive : isCurrentPage;
+      var linkClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-item--current"), isActivePage), _cx2)); // Notes on eslint comments and based on the examples in:
       // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
       // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
       // users
@@ -228,9 +231,15 @@ _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", _rollupPluginB
   focusRef: PropTypes__default["default"].func,
 
   /**
-   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
    */
-  isCurrentPage: PropTypes__default["default"].bool,
+  isActive: PropTypes__default["default"].bool,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+   */
+  isCurrentPage: deprecate["default"](PropTypes__default["default"].bool, 'The `isCurrentPage` prop for `HeaderMenu` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
 
   /**
    * Provide a label for the link text

package/lib/components/UIShell/HeaderMenuItem.js

@@ -15,6 +15,7 @@ var React = require('react');
 var cx = require('classnames');
 var Link = require('./Link.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,11 +23,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
+var _excluded = ["className", "isActive", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
 var HeaderMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function HeaderMenuItem(_ref, ref) {
   var _cx;
 
   var className = _ref.className,
+      isActive = _ref.isActive,
       isCurrentPage = _ref.isCurrentPage,
       ariaCurrent = _ref['aria-current'],
       children = _ref.children,
@@ -36,7 +38,12 @@ var HeaderMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var linkClassName = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isCurrentPage && ariaCurrent !== 'page'), _cx));
+
+  if (isCurrentPage) {
+    isActive = isCurrentPage;
+  }
+
+  var linkClassName = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isActive && ariaCurrent !== 'page'), _cx));
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className,
     role: role
@@ -63,9 +70,15 @@ HeaderMenuItem.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPlugin
   className: PropTypes__default["default"].string,
 
   /**
-   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   */
+  isActive: PropTypes__default["default"].bool,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
    */
-  isCurrentPage: PropTypes__default["default"].bool,
+  isCurrentPage: deprecate["default"](PropTypes__default["default"].bool, 'The `isCurrentPage` prop for `HeaderMenuItem` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
 
   /**
    * Optionally supply a role for the underlying `<li>` node. Useful for resetting

package/lib/tools/wrapComponent.js

@@ -22,12 +22,21 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className"];
+/**
+ * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
+ * @returns
+ */
 
 var wrapComponent = function wrapComponent(_ref) {
   var name = _ref.name,
       getClassName = _ref.className,
       type = _ref.type;
 
+  /**
+   *
+   * @param {{ className?: string, [x: string]: any}} param0
+   * @returns
+   */
   function Component(_ref2) {
     var baseClassName = _ref2.className,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.25.0",
+  "version": "1.26.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.13.0",
     "@carbon/icons-react": "^11.17.0",
     "@carbon/layout": "^11.12.0",
-    "@carbon/styles": "^1.25.0",
+    "@carbon/styles": "^1.26.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -133,5 +133,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "47966b102beb1310c23bb0fc914a22f639dc08d6"
+  "gitHead": "14c6f7442f8915d508a0bada49bb05e0cac8464c"
 }