@carbon/react 1.42.0 → 1.43.0-rc.0

package/lib/components/TextInput/TextInput.js

@@ -52,6 +52,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     warnText,
     enableCounter = false,
     maxCount,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -123,7 +124,8 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     [`${prefix}--text-input__field-outer-wrapper--inline`]: inline
   });
   const fieldWrapperClasses = cx__default["default"](`${prefix}--text-input__field-wrapper`, {
-    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
+    [`${prefix}--text-input__field-wrapper--slug`]: slug
   });
   const iconClasses = cx__default["default"]({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
@@ -162,6 +164,14 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
   } = React.useContext(FormContext.FormContext);
   const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   const Icon = normalizedProps.icon;
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -173,7 +183,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     "data-invalid": normalizedProps.invalid || null
   }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
-  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+  }), input, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-input__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
@@ -260,6 +270,10 @@ TextInput.propTypes = {
    * Specify the size of the Text Input. Currently supports the following:
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `TextInput` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify the type of the `<input>`
    */

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

@@ -0,0 +1,29 @@
+/**
+ * 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 React from 'react';
+interface SideNavHeaderProps {
+    /**
+     * The child nodes to be rendered
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded?: boolean;
+    /**
+     * Provide an icon to render in the header of the side navigation. Should be
+     * a React class.
+     */
+    renderIcon: React.ComponentType;
+}
+declare const SideNavHeader: React.FC<SideNavHeaderProps>;
+export default SideNavHeader;

package/lib/components/UIShell/SideNavHeader.js

@@ -23,8 +23,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const SideNavHeader = _ref => {
   let {
-    className: customClassName,
     children,
+    className: customClassName,
     renderIcon: IconElement
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -52,8 +52,8 @@ SideNavHeader.propTypes = {
    * Provide an icon to render in the header of the side navigation. Should be
    * a React class.
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]).isRequired
 };
-var SideNavHeader$1 = SideNavHeader;
 
-exports["default"] = SideNavHeader$1;
+exports["default"] = SideNavHeader;

package/lib/components/UIShell/SideNavItems.js

@@ -32,14 +32,12 @@ const SideNavItems = _ref => {
   const childrenWithExpandedState = React__default["default"].Children.map(children, child => {
     if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      const childType = child.type;
-      if (childType && childType.displayName) {
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          ...(_utils.CARBON_SIDENAV_ITEMS.includes(childType.displayName) ? {
-            isSideNavExpanded
-          } : {})
-        });
-      }
+      const childDisplayName = child.type?.displayName;
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        ...(_utils.CARBON_SIDENAV_ITEMS.includes(childDisplayName) ? {
+          isSideNavExpanded
+        } : {})
+      });
     }
   });
   return /*#__PURE__*/React__default["default"].createElement("ul", {

package/lib/index.d.ts

@@ -114,6 +114,7 @@ export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/Overflow
 export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
 export * from './components/Popover';
 export * from './components/ProgressBar';
+export { Slug as unstable__Slug, SlugContent as unstable__SlugContent, SlugActions as unstable__SlugActions, } from './components/Slug';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export { Text as unstable_Text, TextDirection as unstable_TextDirection, } from './components/Text';

package/lib/index.js

@@ -22,13 +22,13 @@ var Button_Skeleton = require('./components/Button/Button.Skeleton.js');
 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$3 = require('./components/ClassPrefix/index.js');
+var index$4 = require('./components/ClassPrefix/index.js');
 var ComboBox = require('./components/ComboBox/ComboBox.js');
-var index$4 = require('./components/ComboButton/index.js');
+var index$5 = require('./components/ComboButton/index.js');
 var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
 var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
 var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
-var index$5 = require('./components/ContentSwitcher/index.js');
+var index$6 = require('./components/ContentSwitcher/index.js');
 var DangerButton = require('./components/DangerButton/DangerButton.js');
 require('./components/DataTable/index.js');
 var DataTableSkeleton = require('./components/DataTableSkeleton/DataTableSkeleton.js');
@@ -57,17 +57,17 @@ var Column = require('./components/Grid/Column.js');
 var ColumnHang = require('./components/Grid/ColumnHang.js');
 var GridContext = require('./components/Grid/GridContext.js');
 var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
-var index$6 = require('./components/IdPrefix/index.js');
+var index$7 = require('./components/IdPrefix/index.js');
 var Link = require('./components/Link/Link.js');
 var ListItem = require('./components/ListItem/ListItem.js');
 var Loading = require('./components/Loading/Loading.js');
-var index$7 = require('./components/MenuButton/index.js');
+var index$8 = require('./components/MenuButton/index.js');
 var Modal = require('./components/Modal/Modal.js');
 var Notification = require('./components/Notification/Notification.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
 var NumberInput = require('./components/NumberInput/NumberInput.js');
 var OrderedList = require('./components/OrderedList/OrderedList.js');
-var index$8 = require('./components/OverflowMenu/index.js');
+var index$9 = require('./components/OverflowMenu/index.js');
 var OverflowMenuItem = require('./components/OverflowMenuItem/OverflowMenuItem.js');
 var Pagination_Skeleton = require('./components/Pagination/Pagination.Skeleton.js');
 var RadioButton = require('./components/RadioButton/RadioButton.js');
@@ -81,7 +81,7 @@ var SelectItem = require('./components/SelectItem/SelectItem.js');
 var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js');
 var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
 var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
-var index$9 = require('./components/Slider/index.js');
+var index$a = require('./components/Slider/index.js');
 var StructuredList = require('./components/StructuredList/StructuredList.js');
 var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
 var Tabs = require('./components/Tabs/Tabs.js');
@@ -93,13 +93,13 @@ var TextArea = require('./components/TextArea/TextArea.js');
 var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
 require('./components/TextInput/index.js');
 var Tile = require('./components/Tile/Tile.js');
-var index$a = require('./components/TileGroup/index.js');
+var index$b = require('./components/TileGroup/index.js');
 var TimePicker = require('./components/TimePicker/TimePicker.js');
 var TimePickerSelect = require('./components/TimePickerSelect/TimePickerSelect.js');
 var Toggle = require('./components/Toggle/Toggle.js');
 var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
 var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
-var index$b = require('./components/Toggletip/index.js');
+var index$c = require('./components/Toggletip/index.js');
 var Content = require('./components/UIShell/Content.js');
 var Header = require('./components/UIShell/Header.js');
 var HeaderContainer = require('./components/UIShell/HeaderContainer.js');
@@ -131,17 +131,18 @@ var SideNavMenuItem = require('./components/UIShell/SideNavMenuItem.js');
 var SideNavSwitcher = require('./components/UIShell/SideNavSwitcher.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var index = require('./components/FeatureFlags/index.js');
-var index$c = require('./components/Heading/index.js');
-var index$d = require('./components/IconButton/index.js');
-var index$e = require('./components/Layer/index.js');
+var index$d = require('./components/Heading/index.js');
+var index$e = require('./components/IconButton/index.js');
+var index$f = require('./components/Layer/index.js');
 var index$1 = require('./components/Layout/index.js');
 var index$2 = require('./components/OverflowMenuV2/index.js');
-var index$f = require('./components/Popover/index.js');
-var index$g = require('./components/Stack/index.js');
+var index$g = require('./components/Popover/index.js');
+var index$3 = require('./components/Slug/index.js');
+var index$h = require('./components/Stack/index.js');
 var DefinitionTooltip = require('./components/Tooltip/DefinitionTooltip.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
 require('./components/Text/index.js');
-var index$h = require('./components/Theme/index.js');
+var index$i = require('./components/Theme/index.js');
 var usePrefix = require('./internal/usePrefix.js');
 var useIdPrefix = require('./internal/useIdPrefix.js');
 var FluidDatePicker_Skeleton = require('./components/FluidDatePicker/FluidDatePicker.Skeleton.js');
@@ -243,14 +244,14 @@ exports.ButtonSkeleton = Button_Skeleton["default"];
 exports.ButtonSet = ButtonSet["default"];
 exports.Checkbox = Checkbox["default"];
 exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
-exports.ClassPrefix = index$3.ClassPrefix;
+exports.ClassPrefix = index$4.ClassPrefix;
 exports.ComboBox = ComboBox["default"];
-exports.ComboButton = index$4.ComboButton;
+exports.ComboButton = index$5.ComboButton;
 exports.ComposedModal = ComposedModal["default"];
 exports.ModalBody = ComposedModal.ModalBody;
 exports.ModalHeader = ModalHeader.ModalHeader;
 exports.ModalFooter = ModalFooter.ModalFooter;
-exports.ContentSwitcher = index$5["default"];
+exports.ContentSwitcher = index$6["default"];
 exports.DangerButton = DangerButton["default"];
 exports.DataTableSkeleton = DataTableSkeleton["default"];
 exports.DatePicker = DatePicker["default"];
@@ -278,11 +279,11 @@ exports.Column = Column["default"];
 exports.ColumnHang = ColumnHang.ColumnHang;
 exports.GridSettings = GridContext.GridSettings;
 exports.IconSkeleton = Icon_Skeleton["default"];
-exports.IdPrefix = index$6.IdPrefix;
+exports.IdPrefix = index$7.IdPrefix;
 exports.Link = Link["default"];
 exports.ListItem = ListItem["default"];
 exports.Loading = Loading["default"];
-exports.MenuButton = index$7.MenuButton;
+exports.MenuButton = index$8.MenuButton;
 exports.Modal = Modal["default"];
 exports.ActionableNotification = Notification.ActionableNotification;
 exports.InlineNotification = Notification.InlineNotification;
@@ -292,7 +293,7 @@ exports.ToastNotification = Notification.ToastNotification;
 exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
 exports.NumberInput = NumberInput.NumberInput;
 exports.OrderedList = OrderedList["default"];
-exports.OverflowMenu = index$8["default"];
+exports.OverflowMenu = index$9["default"];
 exports.OverflowMenuItem = OverflowMenuItem["default"];
 exports.PaginationSkeleton = Pagination_Skeleton["default"];
 exports.RadioButton = RadioButton["default"];
@@ -306,7 +307,7 @@ exports.SelectItem = SelectItem["default"];
 exports.SelectItemGroup = SelectItemGroup["default"];
 exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
 exports.SkeletonText = SkeletonText["default"];
-exports.Slider = index$9["default"];
+exports.Slider = index$a["default"];
 exports.StructuredListBody = StructuredList.StructuredListBody;
 exports.StructuredListCell = StructuredList.StructuredListCell;
 exports.StructuredListHead = StructuredList.StructuredListHead;
@@ -333,17 +334,17 @@ exports.SelectableTile = Tile.SelectableTile;
 exports.Tile = Tile.Tile;
 exports.TileAboveTheFoldContent = Tile.TileAboveTheFoldContent;
 exports.TileBelowTheFoldContent = Tile.TileBelowTheFoldContent;
-exports.TileGroup = index$a["default"];
+exports.TileGroup = index$b["default"];
 exports.TimePicker = TimePicker["default"];
 exports.TimePickerSelect = TimePickerSelect["default"];
 exports.Toggle = Toggle.Toggle;
 exports.ToggleSkeleton = Toggle_Skeleton["default"];
 exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
-exports.Toggletip = index$b.Toggletip;
-exports.ToggletipActions = index$b.ToggletipActions;
-exports.ToggletipButton = index$b.ToggletipButton;
-exports.ToggletipContent = index$b.ToggletipContent;
-exports.ToggletipLabel = index$b.ToggletipLabel;
+exports.Toggletip = index$c.Toggletip;
+exports.ToggletipActions = index$c.ToggletipActions;
+exports.ToggletipButton = index$c.ToggletipButton;
+exports.ToggletipContent = index$c.ToggletipContent;
+exports.ToggletipLabel = index$c.ToggletipLabel;
 exports.Content = Content["default"];
 exports.Header = Header["default"];
 exports.HeaderContainer = HeaderContainer["default"];
@@ -377,23 +378,26 @@ exports.UnorderedList = UnorderedList["default"];
 exports.unstable_FeatureFlags = index.FeatureFlags;
 exports.unstable_useFeatureFlag = index.useFeatureFlag;
 exports.unstable_useFeatureFlags = index.useFeatureFlags;
-exports.Heading = index$c.Heading;
-exports.Section = index$c.Section;
-exports.IconButton = index$d.IconButton;
-exports.Layer = index$e.Layer;
-exports.useLayer = index$e.useLayer;
+exports.Heading = index$d.Heading;
+exports.Section = index$d.Section;
+exports.IconButton = index$e.IconButton;
+exports.Layer = index$f.Layer;
+exports.useLayer = index$f.useLayer;
 exports.unstable_Layout = index$1.Layout;
 exports.unstable_OverflowMenuV2 = index$2.OverflowMenuV2;
-exports.Popover = index$f.Popover;
-exports.PopoverContent = index$f.PopoverContent;
-exports.HStack = index$g.HStack;
-exports.VStack = index$g.VStack;
+exports.Popover = index$g.Popover;
+exports.PopoverContent = index$g.PopoverContent;
+exports.unstable__Slug = index$3.Slug;
+exports.unstable__SlugActions = index$3.SlugActions;
+exports.unstable__SlugContent = index$3.SlugContent;
+exports.HStack = index$h.HStack;
+exports.VStack = index$h.VStack;
 exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
 exports.Tooltip = Tooltip.Tooltip;
-exports.GlobalTheme = index$h.GlobalTheme;
-exports.Theme = index$h.Theme;
-exports.ThemeContext = index$h.ThemeContext;
-exports.useTheme = index$h.useTheme;
+exports.GlobalTheme = index$i.GlobalTheme;
+exports.Theme = index$i.Theme;
+exports.ThemeContext = index$i.ThemeContext;
+exports.useTheme = index$i.useTheme;
 exports.PrefixContext = usePrefix.PrefixContext;
 exports.usePrefix = usePrefix.usePrefix;
 exports.useIdPrefix = useIdPrefix.useIdPrefix;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.42.0",
+  "version": "1.43.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,13 +48,13 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.30.0",
+    "@carbon/icons-react": "^11.31.0-rc.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.42.0",
+    "@carbon/styles": "^1.43.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.2.2",
+    "downshift": "8.2.3",
     "flatpickr": "4.6.9",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -140,5 +140,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "7e1982e232895b6223b88bca246f754ecd2609ac"
+  "gitHead": "dc9f4b277a5b45f97d37cd58ecdb1e919000f64b"
 }

package/scss/utilities/_ai-gradient.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/utilities/ai-gradient';