@carbon/react 1.54.0-rc.0 → 1.55.0-rc.0

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/feature-flags.js

@@ -34,5 +34,6 @@ FeatureFlags__namespace.merge({
   'enable-css-grid': true,
   'enable-v11-release': true,
   'enable-experimental-tile-contrast': false,
-  'enable-v12-tile-radio-icons': false
+  'enable-v12-tile-radio-icons': false,
+  'enable-v12-structured-list-visible-icons': false
 });

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/lib/internal/environment.js

@@ -14,6 +14,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+const canUseDOM = !!(typeof window !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.document &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.document.createElement);
 
 exports.canUseDOM = canUseDOM;

package/lib/internal/keyboard/navigation.js

@@ -43,7 +43,9 @@ const getNextIndex = (key, index, arrayLength) => {
  */
 const DOCUMENT_POSITION_BROAD_PRECEDING =
 // Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 
 /**
  * A flag `node.compareDocumentPosition(target)` returns,
@@ -51,7 +53,9 @@ typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_
  */
 const DOCUMENT_POSITION_BROAD_FOLLOWING =
 // Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 
 /**
  * CSS selector that selects major nodes that are sequential-focusable.

package/lib/internal/useOutsideClick.js

@@ -0,0 +1,35 @@
+/**
+ * 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 React = require('react');
+var useEvent = require('./useEvent.js');
+var environment = require('./environment.js');
+
+function useOutsideClick(ref, callback) {
+  const savedCallback = React.useRef(callback);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  // We conditionally guard the `useEvent` hook for SSR. `canUseDOM` can be
+  // treated as a constant as it will be false when executed in a Node.js
+  // environment and true when executed in the browser
+  if (environment.canUseDOM) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEvent.useEvent(window, 'click', event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        savedCallback.current(event);
+      }
+    });
+  }
+}
+
+exports.useOutsideClick = useOutsideClick;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.54.0-rc.0",
+  "version": "1.55.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.19.0-rc.0",
-    "@carbon/icons-react": "^11.39.0-rc.0",
+    "@carbon/feature-flags": "^0.19.0",
+    "@carbon/icons-react": "^11.39.0",
     "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.54.0-rc.0",
+    "@carbon/styles": "^1.55.0-rc.0",
     "@floating-ui/react": "^0.25.4",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
@@ -81,7 +81,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.34.0-rc.0",
+    "@carbon/themes": "^11.34.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "4e0c7c56e1217ff9b73042006e4ea1d12a39e769"
+  "gitHead": "600138750484cf814dc1b927ed4c277301b5290a"
 }