@carbon/react 1.54.0 → 1.55.0-rc.0

package/lib/components/Slug/index.js

@@ -148,26 +148,21 @@ Slug.propTypes = {
    */
   align: PropTypes__default["default"].oneOf(['top', 'top-left',
   // deprecated use top-start instead
-  'top-right',
+  'top-start', 'top-right',
   // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
+  'top-end', 'bottom', 'bottom-left',
   // deprecated use bottom-start instead
-  'bottom-right',
+  'bottom-start', 'bottom-right',
   // deprecated use bottom-end instead
-
-  'left', 'left-bottom',
+  'bottom-end', 'left', 'left-bottom',
   // deprecated use left-end instead
-  'left-top',
+  'left-end', 'left-top',
   // deprecated use left-start instead
-
-  'right', 'right-bottom',
+  'left-start', 'right', 'right-bottom',
   // deprecated use right-end instead
-  'right-top',
+  'right-end', 'right-top',
   // deprecated use right-start instead
-
-  // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  'right-start']),
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */

package/lib/components/Tag/DismissibleTag.js

@@ -0,0 +1,129 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var Tag = require('./Tag.js');
+var iconsReact = require('@carbon/icons-react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _Close;
+const getInstanceId = setupGetInstanceId["default"]();
+const DismissibleTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    title = 'Clear filter',
+    onClose,
+    slug,
+    size,
+    type,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const tagClasses = cx__default["default"](`${prefix}--tag--filter`, className);
+  const handleClose = event => {
+    if (onClose) {
+      event.stopPropagation();
+      onClose(event);
+    }
+  };
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+
+  // Removing onClick from the spread operator
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {
+    onClick,
+    ...otherProps
+  } = other;
+  return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    type: type,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId
+  }, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: `${prefix}--tag__close-icon`,
+    onClick: handleClose,
+    disabled: disabled,
+    "aria-label": title,
+    title: title
+  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))));
+};
+DismissibleTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `DismissibleTag`
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify if the `DismissibleTag` is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes__default["default"].string,
+  /**
+   * Click handler for filter tag close button.
+   */
+  onClose: PropTypes__default["default"].func,
+  /**
+   * Optional prop to render a custom icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes__default["default"].oneOf(Object.keys(Tag.SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
+   */
+  slug: PropTypes__default["default"].node,
+  /**
+   * Text to show on clear filters
+   */
+  title: PropTypes__default["default"].string,
+  /**
+   * Specify the type of the `Tag`
+   */
+  type: PropTypes__default["default"].oneOf(Object.keys(Tag.TYPES))
+};
+
+exports["default"] = DismissibleTag;

package/lib/components/Tag/OperationalTag.js

@@ -0,0 +1,109 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var Tag = require('./Tag.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const getInstanceId = setupGetInstanceId["default"]();
+const TYPES = {
+  red: 'Red',
+  magenta: 'Magenta',
+  purple: 'Purple',
+  blue: 'Blue',
+  cyan: 'Cyan',
+  teal: 'Teal',
+  green: 'Green',
+  gray: 'Gray',
+  'cool-gray': 'Cool-Gray',
+  'warm-gray': 'Warm-Gray'
+};
+const OperationalTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    slug,
+    size,
+    type = 'gray',
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const tagClasses = cx__default["default"](`${prefix}--tag--operational`, className);
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    type: type,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId
+  }, other), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug));
+};
+OperationalTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `OperationalTag`
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify if the `OperationalTag` is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes__default["default"].string,
+  /**
+   * Optional prop to render a custom icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes__default["default"].oneOf(Object.keys(Tag.SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
+   */
+  slug: PropTypes__default["default"].node,
+  /**
+   * Specify the type of the `Tag`
+   */
+  type: PropTypes__default["default"].oneOf(Object.keys(TYPES))
+};
+
+exports["default"] = OperationalTag;

package/lib/components/Tag/SelectableTag.js

@@ -0,0 +1,108 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var Tag = require('./Tag.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const getInstanceId = setupGetInstanceId["default"]();
+const SelectableTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    selected = false,
+    slug,
+    size,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const [selectedTag, setSelectedTag] = React.useState(selected);
+  const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {
+    [`${prefix}--tag--selectable-selected`]: selectedTag
+  });
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+
+  // Removing onClick from the spread operator
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {
+    onClick,
+    ...otherProps
+  } = other;
+  return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    slug: slug,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId,
+    onClick: () => setSelectedTag(!selectedTag)
+  }, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug));
+};
+SelectableTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `SelectableTag`
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify if the `SelectableTag` is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes__default["default"].string,
+  /**
+   * Optional prop to render a custom icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Specify the state of the selectable tag.
+   */
+  selected: PropTypes__default["default"].bool,
+  /**
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes__default["default"].oneOf(Object.keys(Tag.SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
+   */
+  slug: PropTypes__default["default"].node
+};
+
+exports["default"] = SelectableTag;

package/lib/components/Tag/index.d.ts

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Tag from './Tag';
+import DismissibleTag from './DismissibleTag';
+import OperationalTag from './OperationalTag';
+import SelectableTag from './SelectableTag';
 export * from './Tag.Skeleton';
 export default Tag;
-export { Tag };
+export { Tag, DismissibleTag, OperationalTag, SelectableTag };

package/lib/components/TreeView/TreeNode.js

@@ -66,7 +66,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       return /*#__PURE__*/React__default["default"].cloneElement(node, {
         active,
         depth: depth + 1,
-        disabled,
+        disabled: disabled || node.props.disabled,
         onTreeSelect,
         selected,
         tabIndex: !node.props.disabled && -1 || null

package/lib/components/UIShell/SideNavMenu.js

@@ -38,9 +38,12 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
     tabIndex,
     title
   } = _ref;
-  const isRail = React.useContext(SideNav.SideNavContext);
+  const {
+    isRail
+  } = React.useContext(SideNav.SideNavContext);
   const prefix = usePrefix.usePrefix();
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
+  const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
   const className = cx__default["default"]({
     [`${prefix}--side-nav__item`]: true,
     [`${prefix}--side-nav__item--active`]: isActive || hasActiveDescendant(children) && !isExpanded,
@@ -48,6 +51,13 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
     [`${prefix}--side-nav__item--large`]: large,
     [customClassName]: !!customClassName
   });
+  if (!isSideNavExpanded && isExpanded && isRail) {
+    setIsExpanded(false);
+    setPrevExpanded(true);
+  } else if (isSideNavExpanded && prevExpanded && isRail) {
+    setIsExpanded(true);
+    setPrevExpanded(false);
+  }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

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

@@ -20,6 +20,10 @@ interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
      * `aria-current="page"`, as well.
      */
     isActive?: boolean;
+    /**
+     * Optionally provide an href for the underlying li`
+     */
+    href?: string;
 }
 declare const SideNavMenuItem: React.ForwardRefExoticComponent<SideNavMenuItemProps & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/lib/components/UIShell/SideNavMenuItem.js

@@ -29,6 +29,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     children,
     className: customClassName,
     isActive,
+    href,
     ...rest
   } = props;
   const className = cx__default["default"](`${prefix}--side-nav__menu-item`, customClassName);
@@ -38,7 +39,9 @@ const SideNavMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
   });
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
+    href: href
+  }, rest, {
     className: linkClassName,
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));
@@ -53,6 +56,10 @@ SideNavMenuItem.propTypes = {
    * Provide an optional class to be applied to the containing node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href: PropTypes__default["default"].string,
   /**
    * Optionally specify whether the link is "active". An active link is one that
    * has an href that is the same as the current page. Can also pass in

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

@@ -39,6 +39,10 @@ interface BaseSwitcherItemProps {
      * Specify whether the panel is selected
      */
     isSelected?: boolean;
+    /**
+     * Optionally provide an href for the underlying li`
+     */
+    href?: string;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/lib/components/UIShell/SwitcherItem.js

@@ -37,6 +37,7 @@ const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(props,
     index,
     handleSwitcherItemFocus,
     onKeyDown = () => {},
+    href,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -73,6 +74,7 @@ const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(props,
       setTabFocus(evt);
       onKeyDown(evt);
     },
+    href: href,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -94,6 +96,10 @@ SwitcherItem.propTypes = {
    * event handlers
    */
   handleSwitcherItemFocus: PropTypes__default["default"].func,
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href: PropTypes__default["default"].string,
   /**
    * Specify the index of the SwitcherItem
    */

package/lib/index.js

@@ -23,6 +23,8 @@ var ButtonSet = require('./components/ButtonSet/ButtonSet.js');
 var Checkbox = require('./components/Checkbox/Checkbox.js');
 var Checkbox_Skeleton = require('./components/Checkbox/Checkbox.Skeleton.js');
 var index$4 = require('./components/ClassPrefix/index.js');
+var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
+var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
 var ComboBox = require('./components/ComboBox/ComboBox.js');
 var index$5 = require('./components/ComboButton/index.js');
 var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
@@ -109,6 +111,9 @@ var Tabs = require('./components/Tabs/Tabs.js');
 var TabContent = require('./components/TabContent/TabContent.js');
 var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
 var Tag = require('./components/Tag/Tag.js');
+var DismissibleTag = require('./components/Tag/DismissibleTag.js');
+var OperationalTag = require('./components/Tag/OperationalTag.js');
+var SelectableTag = require('./components/Tag/SelectableTag.js');
 var Tag_Skeleton = require('./components/Tag/Tag.Skeleton.js');
 var TextArea = require('./components/TextArea/TextArea.js');
 var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
@@ -177,8 +182,6 @@ var FluidTextInput_Skeleton = require('./components/FluidTextInput/FluidTextInpu
 var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
 var Pagination = require('./components/Pagination/experimental/Pagination.js');
 var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
-var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
-var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
 var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var ContainedList = require('./components/ContainedList/ContainedList.js');
 var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
@@ -252,6 +255,8 @@ exports.ButtonSet = ButtonSet["default"];
 exports.Checkbox = Checkbox["default"];
 exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
 exports.ClassPrefix = index$4.ClassPrefix;
+exports.CodeSnippet = CodeSnippet["default"];
+exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
 exports.ComboBox = ComboBox["default"];
 exports.ComboButton = index$5.ComboButton;
 exports.ComposedModal = ComposedModal["default"];
@@ -358,6 +363,9 @@ exports.Tabs = Tabs.Tabs;
 exports.TabContent = TabContent["default"];
 exports.TabsSkeleton = Tabs_Skeleton["default"];
 exports.Tag = Tag["default"];
+exports.DismissibleTag = DismissibleTag["default"];
+exports.OperationalTag = OperationalTag["default"];
+exports.SelectableTag = SelectableTag["default"];
 exports.TagSkeleton = Tag_Skeleton["default"];
 exports.TextArea = TextArea["default"];
 exports.TextAreaSkeleton = TextArea_Skeleton["default"];
@@ -445,8 +453,6 @@ exports.unstable__FluidTextInputSkeleton = FluidTextInput_Skeleton["default"];
 exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination["default"];
 exports.CheckboxGroup = CheckboxGroup["default"];
-exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
-exports.CodeSnippet = CodeSnippet["default"];
 exports.ContainedListItem = ContainedListItem["default"];
 exports.ContainedList = ContainedList["default"];
 exports.useContextMenu = useContextMenu["default"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.54.0",
+  "version": "1.55.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,7 +51,7 @@
     "@carbon/feature-flags": "^0.19.0",
     "@carbon/icons-react": "^11.39.0",
     "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.54.0",
+    "@carbon/styles": "^1.55.0-rc.0",
     "@floating-ui/react": "^0.25.4",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "4bdd6802dd612af764ef76162141333d35bd84f4"
+  "gitHead": "600138750484cf814dc1b927ed4c277301b5290a"
 }