@carbon/react 1.39.0 → 1.41.0-rc.0

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

@@ -0,0 +1,25 @@
+/**
+ * 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 SideNavIconProps {
+    /**
+     * Provide a single icon as the child to `SideNavIcon` to render in the
+     * container
+     */
+    children: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Specify whether the icon should be placed in a smaller bounding box
+     * Since the 'small' prop is not provided, we make it optional and set a default value to `false`.
+     */
+    small?: boolean;
+}
+declare const SideNavIcon: React.FC<SideNavIconProps>;
+export default SideNavIcon;

package/lib/components/UIShell/SideNavIcon.js

@@ -20,11 +20,11 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function SideNavIcon(_ref) {
+const SideNavIcon = _ref => {
   let {
     children,
     className: customClassName,
-    small
+    small = false
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
@@ -35,7 +35,7 @@ function SideNavIcon(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
   }, children);
-}
+};
 SideNavIcon.propTypes = {
   /**
    * Provide a single icon as the child to `SideNavIcon` to render in the
@@ -49,10 +49,7 @@ SideNavIcon.propTypes = {
   /**
    * Specify whether the icon should be placed in a smaller bounding box
    */
-  small: PropTypes__default["default"].bool.isRequired
-};
-SideNavIcon.defaultProps = {
-  small: false
+  small: PropTypes__default["default"].bool
 };
 
 exports["default"] = SideNavIcon;

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface SideNavLinkTextProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function SideNavLinkText({ className: customClassName, children, ...rest }: SideNavLinkTextProps): JSX.Element;
+declare namespace SideNavLinkText {
+    var propTypes: {
+        /**
+         * Provide the content for the link text
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide an optional class to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default SideNavLinkText;

package/lib/components/UIShell/SideNavLinkText.js

@@ -11,15 +11,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
-var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
+var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 function SideNavLinkText(_ref) {
   let {

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

@@ -0,0 +1,46 @@
+/**
+ * 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 SideNavMenuProps {
+    /**
+     * An optional CSS class to apply to the component.
+     */
+    className?: string;
+    /**
+     * The content to render within the SideNavMenu component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies whether the menu should be expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Indicates whether the SideNavMenu is active.
+     */
+    isActive?: boolean;
+    /**
+     * Specifies whether the SideNavMenu is in a large variation.
+     */
+    large?: boolean;
+    /**
+     * A custom icon to render next to the SideNavMenu title. This can be a function returning JSX or JSX itself.
+     */
+    renderIcon?: React.ComponentType;
+    /**
+     * Indicates if the side navigation container is expanded or collapsed.
+     */
+    isSideNavExpanded?: boolean;
+    /**
+     * The tabIndex for the button element.
+     * If not specified, the default validation will be applied.
+     */
+    tabIndex?: number;
+    title: string;
+}
+declare const SideNavMenu: React.ForwardRefExoticComponent<SideNavMenuProps & React.RefAttributes<HTMLElement>>;
+export default SideNavMenu;
+export { SideNavMenu };

package/lib/components/UIShell/SideNavMenu.js

@@ -26,8 +26,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _ChevronDown;
-const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenu(props, ref) {
-  const {
+const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenu(_ref, ref) {
+  let {
     className: customClassName,
     children,
     defaultExpanded = false,
@@ -37,7 +37,7 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
     isSideNavExpanded,
     tabIndex,
     title
-  } = props;
+  } = _ref;
   const isRail = React.useContext(SideNav.SideNavContext);
   const prefix = usePrefix.usePrefix();
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
@@ -121,6 +121,7 @@ SideNavMenu.propTypes = {
   /**
    * Pass in a custom icon to render next to the `SideNavMenu` title
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
@@ -131,30 +132,39 @@ SideNavMenu.propTypes = {
    */
   title: PropTypes__default["default"].string.isRequired
 };
+
+/**
+Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
+a single element, an array of elements, or null or undefined.
+**/
 function hasActiveChild(children) {
-  // if we have children, either a single or multiple, find if it is active
   if (Array.isArray(children)) {
     return children.some(child => {
-      if (!child.props) {
+      if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
         return false;
       }
-      if (child.props.isActive === true) {
-        return true;
-      }
-      if (child.props['aria-current']) {
+
+      /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
+      safety when accessing their props.
+      **/
+      const props = child.props;
+      if (props.isActive === true || props['aria-current']) {
         return true;
       }
       return false;
     });
   }
-  if (children.props) {
-    if (children.props.isActive === true || children.props['aria-current']) {
+
+  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
+
+  if ( /*#__PURE__*/React__default["default"].isValidElement(children)) {
+    const props = children.props;
+    if (props.isActive === true || props['aria-current']) {
       return true;
     }
   }
   return false;
 }
-var SideNavMenu$1 = SideNavMenu;
 
 exports.SideNavMenu = SideNavMenu;
-exports["default"] = SideNavMenu$1;
+exports["default"] = SideNavMenu;

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

@@ -0,0 +1,31 @@
+/**
+ * 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, { ChangeEventHandler } from 'react';
+interface SideNavSwitcherProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Provide the label for the switcher. This will be the first visible option
+     * when someone views this control
+     */
+    labelText: string;
+    /**
+     * Provide a callback function that is called whenever the switcher value is
+     * updated
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Provide an array of options to be rendered in the switcher as an
+     * `<option>`. The text value will be what is displayed to the user and is set
+     * as the `value` prop for each `<option>`.
+     */
+    options: string[];
+}
+declare const SideNavSwitcher: React.ForwardRefExoticComponent<SideNavSwitcherProps & React.RefAttributes<HTMLSelectElement>>;
+export default SideNavSwitcher;

package/lib/components/UIShell/SideNavSwitcher.js

@@ -13,8 +13,8 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
+var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _ChevronDown;
-const SideNavSwitcher = /*#__PURE__*/React__default["default"].forwardRef(function SideNavSwitcher(props, ref) {
+const SideNavSwitcher = /*#__PURE__*/React.forwardRef(function SideNavSwitcher(props, ref) {
   const id = useId.useId('side-nav-switcher');
   const prefix = usePrefix.usePrefix();
   const {
@@ -33,6 +33,7 @@ const SideNavSwitcher = /*#__PURE__*/React__default["default"].forwardRef(functi
     options
   } = props;
   const className = cx__default["default"](`${prefix}--side-nav__switcher`, customClassName);
+
   // Note for usage around `onBlur`: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
@@ -82,8 +83,8 @@ SideNavSwitcher.propTypes = {
    * `<option>`. The text value will be what is displayed to the user and is set
    * as the `value` prop for each `<option>`.
    */
+  // @ts-expect-error
   options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string).isRequired
 };
-var SideNavSwitcher$1 = SideNavSwitcher;
 
-exports["default"] = SideNavSwitcher$1;
+exports["default"] = SideNavSwitcher;

package/lib/index.js

@@ -48,6 +48,7 @@ var FluidForm = require('./components/FluidForm/FluidForm.js');
 var FormContext = require('./components/FluidForm/FormContext.js');
 var Form = require('./components/Form/Form.js');
 var FormGroup = require('./components/FormGroup/FormGroup.js');
+var FormItem = require('./components/FormItem/FormItem.js');
 var FormLabel = require('./components/FormLabel/FormLabel.js');
 var FlexGrid = require('./components/Grid/FlexGrid.js');
 var Grid = require('./components/Grid/Grid.js');
@@ -158,7 +159,6 @@ var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var Copy = require('./components/Copy/Copy.js');
 var CopyButton = require('./components/CopyButton/CopyButton.js');
 var ErrorBoundary = require('./components/ErrorBoundary/ErrorBoundary.js');
-var FormItem = require('./components/FormItem/FormItem.js');
 var InlineLoading = require('./components/InlineLoading/InlineLoading.js');
 var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
 var ProgressIndicator_Skeleton = require('./components/ProgressIndicator/ProgressIndicator.Skeleton.js');
@@ -269,6 +269,7 @@ exports.FluidForm = FluidForm["default"];
 exports.FormContext = FormContext.FormContext;
 exports.Form = Form["default"];
 exports.FormGroup = FormGroup["default"];
+exports.FormItem = FormItem["default"];
 exports.FormLabel = FormLabel["default"];
 exports.FlexGrid = FlexGrid.FlexGrid;
 exports.Grid = Grid.Grid;
@@ -411,7 +412,6 @@ exports.useContextMenu = useContextMenu["default"];
 exports.Copy = Copy["default"];
 exports.CopyButton = CopyButton["default"];
 exports.ErrorBoundary = ErrorBoundary["default"];
-exports.FormItem = FormItem["default"];
 exports.InlineLoading = InlineLoading["default"];
 exports.ModalWrapper = ModalWrapper["default"];
 exports.ProgressIndicatorSkeleton = ProgressIndicator_Skeleton["default"];

package/lib/internal/FloatingMenu.js

@@ -206,13 +206,13 @@ class FloatingMenu extends React__default["default"].Component {
       } = prevProps;
       const {
         menuOffset = {},
-        menuDirection
+        menuDirection = DIRECTION_BOTTOM
       } = _this.props;
       if (hasChangeInOffset(oldMenuOffset, menuOffset) || oldMenuDirection !== menuDirection || isAdjustment) {
         const {
           flipped,
           triggerRef,
-          updateOrientation
+          updateOrientation = null
         } = _this.props;
         const {
           current: triggerEl
@@ -466,11 +466,6 @@ _rollupPluginBabelHelpers.defineProperty(FloatingMenu, "propTypes", {
    */
   updateOrientation: PropTypes__default["default"].func
 });
-_rollupPluginBabelHelpers.defineProperty(FloatingMenu, "defaultProps", {
-  menuOffset: {},
-  menuDirection: DIRECTION_BOTTOM,
-  updateOrientation: null
-});
 var FloatingMenu$1 = FloatingMenu;
 
 exports.DIRECTION_BOTTOM = DIRECTION_BOTTOM;

package/lib/internal/Selection.js

@@ -199,9 +199,6 @@ _rollupPluginBabelHelpers.defineProperty(Selection, "propTypes", {
   onChange: PropTypes__default["default"].func,
   render: PropTypes__default["default"].func
 });
-_rollupPluginBabelHelpers.defineProperty(Selection, "defaultProps", {
-  initialSelectedItems: []
-});
 const removeAtIndex = (array, index) => {
   const result = array.slice();
   result.splice(index, 1);

package/lib/internal/noopFn.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export declare const noopFn: () => void;

package/lib/internal/noopFn.js

@@ -0,0 +1,14 @@
+/**
+ * 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 });
+
+const noopFn = () => {};
+
+exports.noopFn = noopFn;

package/lib/internal/useNormalizedInputProps.js

@@ -12,6 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('./usePrefix.js');
+require('../components/Text/index.js');
+var Text = require('../components/Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -76,13 +78,15 @@ function useNormalizedInputProps(_ref) {
   };
   if (normalizedProps.invalid) {
     normalizedProps.icon = iconsReact.WarningFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
+    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+      as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.invalidId
     }, invalidText);
   } else if (normalizedProps.warn) {
     normalizedProps.icon = iconsReact.WarningAltFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
+    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+      as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.warnId
     }, warnText);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.39.0",
+  "version": "1.41.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "build": "yarn clean && node tasks/build-styles.js && node tasks/build.js",
-    "clean": "rimraf es lib icons/index.js icons/index.esm.js storybook-static",
+    "clean": "rimraf es lib icons/index.js icons/index.d.ts icons/index.esm.js storybook-static",
     "postinstall": "carbon-telemetry collect --install",
     "storybook": "storybook dev -p 3000",
     "storybook:build": "storybook build"
@@ -47,13 +47,13 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.28.0",
-    "@carbon/layout": "^11.19.0",
-    "@carbon/styles": "^1.39.0",
+    "@carbon/icons-react": "^11.29.0-rc.0",
+    "@carbon/layout": "^11.20.0-rc.0",
+    "@carbon/styles": "^1.41.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.2.0",
+    "downshift": "8.2.2",
     "flatpickr": "4.6.9",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -77,7 +77,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.25.0",
+    "@carbon/themes": "^11.26.0-rc.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -87,6 +87,7 @@
     "@storybook/addon-docs": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-links": "^7.4.5",
     "@storybook/addon-notes": "^5.3.21",
     "@storybook/addon-storysource": "^7.1.0",
     "@storybook/react": "^7.1.0",
@@ -123,7 +124,7 @@
     "storybook-readme": "^5.0.9",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
-    "typescript": "^4.8.4",
+    "typescript-config-carbon": "^0.2.0-rc.0",
     "webpack": "^5.65.0",
     "webpack-dev-server": "^4.7.4"
   },
@@ -138,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "7c151d929564f2cf414f3a0fef4a5fc888242fae"
+  "gitHead": "da28d28a2d3a34503099e25255076efd3da4db9f"
 }