@carbon/react 1.39.0-rc.0 → 1.40.0

package/lib/components/StructuredList/StructuredList.d.ts

@@ -0,0 +1,271 @@
+/**
+ * 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 { type HTMLAttributes, type ReactNode, type KeyboardEvent, type ChangeEvent, type MouseEvent } from 'react';
+import PropTypes from 'prop-types';
+type DivAttrs = HTMLAttributes<HTMLDivElement>;
+export interface StructuredListWrapperProps extends DivAttrs {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     */
+    'aria-label'?: string;
+    /**
+     * Provide the contents of your StructuredListWrapper
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify if structured list is condensed, default is false
+     */
+    isCondensed?: boolean;
+    /**
+     * Specify if structured list is flush, default is false
+     */
+    isFlush?: boolean;
+    /**
+     * Specify whether your StructuredListWrapper should have selections
+     */
+    selection?: boolean;
+}
+export declare function StructuredListWrapper(props: StructuredListWrapperProps): JSX.Element;
+export declare namespace StructuredListWrapper {
+    var propTypes: {
+        /**
+         * Specify a label to be read by screen readers on the container node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the container note.
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide the contents of your StructuredListWrapper
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if structured list is condensed, default is false
+         */
+        isCondensed: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if structured list is flush, not valid for selection variant, default is false
+         */
+        isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether your StructuredListWrapper should have selections
+         */
+        selection: PropTypes.Requireable<boolean>;
+    };
+}
+export interface StructuredListHeadProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListHead
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+}
+export declare function StructuredListHead(props: any): JSX.Element;
+export declare namespace StructuredListHead {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListHead
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export interface StructuredListBodyProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListBody
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    head?: boolean;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?(event: KeyboardEvent): void;
+}
+export declare function StructuredListBody(props: StructuredListBodyProps): JSX.Element;
+export declare namespace StructuredListBody {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListBody
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a handler that is invoked on the key down event for the control
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export interface StructuredListRowProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListRow
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether your StructuredListRow should be used as a header row
+     */
+    head?: boolean;
+    /**
+     * Provide a handler that is invoked on the click
+     */
+    onClick?(event: MouseEvent): void;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?(event: KeyboardEvent): void;
+}
+export declare function StructuredListRow(props: StructuredListRowProps): JSX.Element;
+export declare namespace StructuredListRow {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListRow
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether your StructuredListRow should be used as a header row
+         */
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether a `<label>` should be used
+         */
+        label: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide a handler that is invoked on the click
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a handler that is invoked on the key down event for the control,
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export interface StructuredListInputProps extends DivAttrs {
+    /**
+     * Specify an optional className to be applied to the input
+     */
+    className?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id?: string;
+    /**
+     * Provide a `name` for the input
+     */
+    name?: string;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Provide a `title` for the input
+     */
+    title?: string;
+}
+export declare function StructuredListInput(props: StructuredListInputProps): JSX.Element;
+export declare namespace StructuredListInput {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the input
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the underlying input should be checked by default
+         */
+        defaultChecked: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify a custom `id` for the input
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide a `name` for the input
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a `title` for the input
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Specify the value of the input
+         */
+        value: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    };
+}
+export interface StructuredListCellProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListCell
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether your StructuredListCell should be used as a header cell
+     */
+    head?: boolean;
+    /**
+     * Specify whether your StructuredListCell should have text wrapping
+     */
+    noWrap?: boolean;
+}
+export declare function StructuredListCell(props: StructuredListCellProps): JSX.Element;
+export declare namespace StructuredListCell {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListCell
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether your StructuredListCell should be used as a header cell
+         */
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether your StructuredListCell should have text wrapping
+         */
+        noWrap: PropTypes.Requireable<boolean>;
+    };
+}
+export {};

package/lib/components/StructuredList/StructuredList.js

@@ -30,18 +30,19 @@ function StructuredListWrapper(props) {
     children,
     selection,
     className,
-    ['aria-label']: ariaLabel,
+    ['aria-label']: ariaLabel = 'Structured list section',
+    // @ts-expect-error: Deprecated prop
     ariaLabel: deprecatedAriaLabel,
     isCondensed,
     isFlush,
     ...other
   } = props;
   const prefix = usePrefix.usePrefix();
-  const classes = cx__default["default"](`${prefix}--structured-list`, className, {
+  const classes = cx__default["default"](`${prefix}--structured-list`, {
     [`${prefix}--structured-list--selection`]: selection,
     [`${prefix}--structured-list--condensed`]: isCondensed,
     [`${prefix}--structured-list--flush`]: isFlush && !selection
-  });
+  }, className);
   const [selectedRow, setSelectedRow] = React__default["default"].useState(null);
   return /*#__PURE__*/React__default["default"].createElement(GridSelectedRowStateContext.Provider, {
     value: selectedRow
@@ -85,12 +86,6 @@ StructuredListWrapper.propTypes = {
    */
   selection: PropTypes__default["default"].bool
 };
-StructuredListWrapper.defaultProps = {
-  selection: false,
-  isCondensed: false,
-  isFlush: false,
-  ['aria-label']: 'Structured list section'
-};
 function StructuredListHead(props) {
   const {
     children,
@@ -142,9 +137,6 @@ StructuredListBody.propTypes = {
    */
   onKeyDown: PropTypes__default["default"].func
 };
-StructuredListBody.defaultProps = {
-  onKeyDown: () => {}
-};
 const GridRowContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListRow(props) {
   const {
@@ -163,11 +155,11 @@ function StructuredListRow(props) {
   const value = {
     id
   };
-  const classes = cx__default["default"](`${prefix}--structured-list-row`, className, {
+  const classes = cx__default["default"](`${prefix}--structured-list-row`, {
     [`${prefix}--structured-list-row--header-row`]: head,
     [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
     [`${prefix}--structured-list-row--selected`]: selectedRow === id
-  });
+  }, className);
   return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "row"
   }, other, {
@@ -181,9 +173,9 @@ function StructuredListRow(props) {
   }, other, {
     role: "row",
     className: classes,
-    onClick: () => {
-      setSelectedRow(id);
-      onClick && onClick();
+    onClick: event => {
+      setSelectedRow?.(id);
+      onClick && onClick(event);
     },
     onFocus: () => {
       setHasFocusWithin(true);
@@ -214,7 +206,7 @@ StructuredListRow.propTypes = {
    */
   label: deprecate["default"](PropTypes__default["default"].bool, `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`),
   /**
-   * Provide a handler that is invoked on the click,
+   * Provide a handler that is invoked on the click
    */
   onClick: PropTypes__default["default"].func,
   /**
@@ -222,10 +214,6 @@ StructuredListRow.propTypes = {
    */
   onKeyDown: PropTypes__default["default"].func
 };
-StructuredListRow.defaultProps = {
-  head: false,
-  onKeyDown: () => {}
-};
 function StructuredListInput(props) {
   const defaultId = useId.useId('structureListInput');
   const {
@@ -244,10 +232,10 @@ function StructuredListInput(props) {
   return /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
     type: "radio",
     tabIndex: 0,
-    checked: row && row.id === selectedRow,
+    checked: !!row && row.id === selectedRow,
     value: row?.id ?? '',
     onChange: event => {
-      setSelectedRow(event.target.value);
+      setSelectedRow?.(event.target.value);
       onChange && onChange(event);
     },
     id: id ?? defaultId,
@@ -286,9 +274,6 @@ StructuredListInput.propTypes = {
    */
   value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired, `\nThe prop \`value\` will be removed in the next major version of Carbon.`)
 };
-StructuredListInput.defaultProps = {
-  title: 'title'
-};
 function StructuredListCell(props) {
   const {
     children,
@@ -298,11 +283,11 @@ function StructuredListCell(props) {
     ...other
   } = props;
   const prefix = usePrefix.usePrefix();
-  const classes = cx__default["default"](className, {
+  const classes = cx__default["default"]({
     [`${prefix}--structured-list-th`]: head,
     [`${prefix}--structured-list-td`]: !head,
     [`${prefix}--structured-list-content--nowrap`]: noWrap
-  });
+  }, className);
   if (head) {
     return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
       className: classes,
@@ -332,10 +317,6 @@ StructuredListCell.propTypes = {
    */
   noWrap: PropTypes__default["default"].bool
 };
-StructuredListCell.defaultProps = {
-  head: false,
-  noWrap: false
-};
 
 exports.StructuredListBody = StructuredListBody;
 exports.StructuredListCell = StructuredListCell;

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

@@ -0,0 +1,8 @@
+/**
+ * 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 * from './StructuredList';
+export { default as StructuredListSkeleton, type StructuredListSkeletonProps, } from './StructuredList.Skeleton';

package/lib/components/UIShell/SideNavDivider.js

@@ -20,6 +20,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _hr;
 function SideNavDivider(_ref) {
   let {
     className
@@ -27,9 +28,8 @@ function SideNavDivider(_ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--side-nav__divider`, className);
   return /*#__PURE__*/React__default["default"].createElement("li", {
-    role: "separator",
     className: classNames
-  });
+  }, _hr || (_hr = /*#__PURE__*/React__default["default"].createElement("hr", null)));
 }
 SideNavDivider.propTypes = {
   /**

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/index.js

@@ -80,6 +80,8 @@ 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 StructuredList = require('./components/StructuredList/StructuredList.js');
+var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
 var Tabs = require('./components/Tabs/Tabs.js');
 var TabContent = require('./components/TabContent/TabContent.js');
 var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
@@ -219,8 +221,6 @@ var RadioTile = require('./components/RadioTile/RadioTile.js');
 var SecondaryButton = require('./components/SecondaryButton/SecondaryButton.js');
 var SkeletonIcon = require('./components/SkeletonIcon/SkeletonIcon.js');
 var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
-var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
-var StructuredList = require('./components/StructuredList/StructuredList.js');
 var Switch = require('./components/Switch/Switch.js');
 var IconSwitch = require('./components/Switch/IconSwitch.js');
 var Stack = require('./components/Stack/Stack.js');
@@ -305,6 +305,13 @@ exports.SelectItemGroup = SelectItemGroup["default"];
 exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
 exports.SkeletonText = SkeletonText["default"];
 exports.Slider = index$9["default"];
+exports.StructuredListBody = StructuredList.StructuredListBody;
+exports.StructuredListCell = StructuredList.StructuredListCell;
+exports.StructuredListHead = StructuredList.StructuredListHead;
+exports.StructuredListInput = StructuredList.StructuredListInput;
+exports.StructuredListRow = StructuredList.StructuredListRow;
+exports.StructuredListWrapper = StructuredList.StructuredListWrapper;
+exports.StructuredListSkeleton = StructuredList_Skeleton["default"];
 exports.IconTab = Tabs.IconTab;
 exports.Tab = Tabs.Tab;
 exports.TabList = Tabs.TabList;
@@ -472,13 +479,6 @@ exports.RadioTile = RadioTile["default"];
 exports.SecondaryButton = SecondaryButton["default"];
 exports.SkeletonIcon = SkeletonIcon["default"];
 exports.SliderSkeleton = Slider_Skeleton["default"];
-exports.StructuredListSkeleton = StructuredList_Skeleton["default"];
-exports.StructuredListBody = StructuredList.StructuredListBody;
-exports.StructuredListCell = StructuredList.StructuredListCell;
-exports.StructuredListHead = StructuredList.StructuredListHead;
-exports.StructuredListInput = StructuredList.StructuredListInput;
-exports.StructuredListRow = StructuredList.StructuredListRow;
-exports.StructuredListWrapper = StructuredList.StructuredListWrapper;
 exports.Switch = Switch["default"];
 exports.IconSwitch = IconSwitch["default"];
 exports.Stack = Stack.Stack;