@carbon/react 1.37.0-rc.0 → 1.37.0-rc.1

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -9,15 +9,13 @@ import React from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { ListBoxProps } from '../ListBox/ListBox';
 import { OnChangeData } from '../Dropdown';
+import type { InternationalProps } from '../../types/common';
 interface SharedOptions {
     locale: string;
 }
 interface DownshiftTypedProps<ItemType> {
     itemToString?(item: ItemType): string;
 }
-interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
-    translateWithId?(messageId: MID, args?: ARGS): string;
-}
 interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
     compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
     selectedItems: ItemType[];

package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 PropTypes from 'prop-types';
+export interface SkeletonPlaceholderProps {
+    /**
+     * Add a custom class to the component to set the height and width
+     */
+    className?: string;
+}
+declare const SkeletonPlaceholder: {
+    ({ className, ...other }: SkeletonPlaceholderProps): JSX.Element;
+    propTypes: {
+        /**
+         * Add a custom class to the component
+         * to set the height and width
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default SkeletonPlaceholder;

package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -28,9 +28,8 @@ const SkeletonPlaceholder = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const skeletonPlaceholderClasses = cx__default["default"]({
-    [`${prefix}--skeleton__placeholder`]: true,
-    [className]: className
-  });
+    [`${prefix}--skeleton__placeholder`]: true
+  }, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: skeletonPlaceholderClasses
   }, other));
@@ -42,6 +41,5 @@ SkeletonPlaceholder.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var SkeletonPlaceholder$1 = SkeletonPlaceholder;
 
-exports["default"] = SkeletonPlaceholder$1;
+exports["default"] = SkeletonPlaceholder;

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

@@ -0,0 +1,9 @@
+/**
+ * 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 SkeletonPlaceholder from './SkeletonPlaceholder';
+export default SkeletonPlaceholder;
+export { SkeletonPlaceholder };

package/lib/components/StructuredList/StructuredList.js

@@ -171,11 +171,14 @@ function StructuredListRow(props) {
   return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "row"
   }, other, {
-    className: classes
+    className: classes,
+    "aria-busy": "true"
   }), children) :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-  React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
+  React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    "aria-busy": "true"
+  }, other, {
     role: "row",
     className: classes,
     onClick: () => {

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

@@ -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.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export interface TagSkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm` or
+     * default sizes.
+     */
+    size?: 'sm';
+}
+declare function TagSkeleton({ className, size, ...rest }: TagSkeletonProps): JSX.Element;
+declare namespace TagSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm` or
+         * default sizes.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+}
+export default TagSkeleton;
+export { TagSkeleton };

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

@@ -0,0 +1,122 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+declare const TYPES: {
+    red: string;
+    magenta: string;
+    purple: string;
+    blue: string;
+    cyan: string;
+    teal: string;
+    green: string;
+    gray: string;
+    'cool-gray': string;
+    'warm-gray': string;
+    'high-contrast': string;
+    outline: string;
+};
+export interface TagBaseProps {
+    /**
+     * Provide content to be rendered inside of a <Tag>
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className that is applied to the containing <span>
+     */
+    className?: string;
+    /**
+     * Specify if the <Tag> is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Determine if <Tag> is a filter/chip
+     */
+    filter?: boolean;
+    /**
+     * Specify the id for the tag.
+     */
+    id?: string;
+    /**
+     * Click handler for filter tag close button.
+     */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional prop to render a custom icon.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm` or
+     * 'md' (default) sizes.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Text to show on clear filters
+     */
+    title?: string;
+    /**
+     * Specify the type of the <Tag>
+     */
+    type?: keyof typeof TYPES;
+}
+export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
+declare const Tag: {
+    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, ...other }: TagProps<T>): JSX.Element;
+    propTypes: {
+        /**
+         * Provide an alternative tag or component to use instead of the default
+         * wrapping element
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Provide content to be rendered inside of a <Tag>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className that is applied to the containing <span>
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the <Tag> is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Determine if <Tag> is a filter/chip
+         */
+        filter: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the id for the tag.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Click handler for filter tag close button.
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional prop to render a custom icon.
+         * Can be a React component class
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm` or
+         * 'md' (default) sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Text to show on clear filters
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Specify the type of the <Tag>
+         */
+        type: PropTypes.Requireable<string>;
+    };
+};
+export declare const types: string[];
+export default Tag;

package/lib/components/Tag/Tag.js

@@ -65,6 +65,7 @@ const Tag = _ref => {
     [`${prefix}--tag--${type}`]: type,
     [`${prefix}--tag--interactive`]: other.onClick && !filter
   });
+  const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -78,8 +79,8 @@ const Tag = _ref => {
       id: tagId
     }, other), /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--tag__label`,
-      title: typeof children === 'string' ? children : null
-    }, children !== null && children !== undefined ? children : TYPES[type]), /*#__PURE__*/React__default["default"].createElement("button", {
+      title: typeof children === 'string' ? children : undefined
+    }, children !== null && children !== undefined ? children : typeText), /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -96,8 +97,8 @@ const Tag = _ref => {
   }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tag__custom-icon`
   }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement("span", {
-    title: typeof children === 'string' ? children : null
-  }, children !== null && children !== undefined ? children : TYPES[type]));
+    title: typeof children === 'string' ? children : undefined
+  }, children !== null && children !== undefined ? children : typeText));
 };
 Tag.propTypes = {
   /**
@@ -149,7 +150,6 @@ Tag.propTypes = {
   type: PropTypes__default["default"].oneOf(Object.keys(TYPES))
 };
 const types = Object.keys(TYPES);
-var Tag$1 = Tag;
 
-exports["default"] = Tag$1;
+exports["default"] = Tag;
 exports.types = types;

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

@@ -0,0 +1,11 @@
+/**
+ * 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 Tag from './Tag';
+export * from './Tag.Skeleton';
+export * from './Tag';
+export default Tag;
+export { Tag };

package/lib/components/TimePicker/TimePicker.js

@@ -120,12 +120,14 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
     };
     const mappedChildren = React__default["default"].Children.map(children, pickerSelect => {
       const item = pickerSelect;
-      return /*#__PURE__*/React__default["default"].cloneElement(item, {
-        ...item.props,
-        disabled: disabled,
-        readOnly: readOnly,
-        ...readOnlyEventHandlers
-      });
+      if (item) {
+        return /*#__PURE__*/React__default["default"].cloneElement(item, {
+          ...item.props,
+          disabled: disabled,
+          readOnly: readOnly,
+          ...readOnlyEventHandlers
+        });
+      }
     });
     return mappedChildren;
   }

package/lib/components/Toggle/Toggle.Skeleton.js

@@ -23,7 +23,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const ToggleSkeleton = _ref => {
   let {
-    'aria-label': ariaLabel = 'Toggle is loading',
     className,
     ...rest
   } = _ref;
@@ -31,9 +30,7 @@ const ToggleSkeleton = _ref => {
   const skeletonClassNames = cx__default["default"](`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: skeletonClassNames
-  }, rest, {
-    "aria-label": ariaLabel
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--toggle__skeleton-circle`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--toggle__skeleton-rectangle`

package/lib/components/Toggle/Toggle.js

@@ -96,7 +96,7 @@ function Toggle(_ref) {
       role: "switch",
       type: "button",
       "aria-checked": checked,
-      "aria-labelledby": ariaLabelledby,
+      "aria-labelledby": id,
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -73,9 +73,6 @@ _rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "propTypes", {
    */
   labelText: PropTypes__default["default"].string
 });
-_rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "defaultProps", {
-  ['aria-label']: 'Toggle is loading'
-});
 
 exports.ToggleSmallSkeleton = ToggleSmallSkeleton;
 exports["default"] = ToggleSmallSkeleton;

package/lib/components/UIShell/HeaderMenuItem.js

@@ -92,6 +92,5 @@ HeaderMenuItem.propTypes = {
    */
   tabIndex: PropTypes__default["default"].number
 };
-var HeaderMenuItem$1 = HeaderMenuItem;
 
-exports["default"] = HeaderMenuItem$1;
+exports["default"] = HeaderMenuItem;

package/lib/components/UIShell/Link.js

@@ -64,7 +64,6 @@ const LinkPropTypes = {
 };
 Link.displayName = 'Link';
 Link.propTypes = LinkPropTypes;
-var Link$1 = Link;
 
 exports.LinkPropTypes = LinkPropTypes;
-exports["default"] = Link$1;
+exports["default"] = Link;

package/lib/components/UIShell/SideNav.js

@@ -265,7 +265,5 @@ SideNav.propTypes = {
   // translateById: PropTypes.func,
 };
 
-var SideNav$1 = SideNav;
-
 exports.SideNavContext = SideNavContext;
-exports["default"] = SideNav$1;
+exports["default"] = SideNav;

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

@@ -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.
+ */
+export { default as Content } from './Content';
+export { default as Header } from './Header';
+export { default as HeaderContainer } from './HeaderContainer';
+export { default as HeaderGlobalAction } from './HeaderGlobalAction';
+export { default as HeaderGlobalBar } from './HeaderGlobalBar';
+export { default as HeaderMenu } from './HeaderMenu';
+export { default as HeaderMenuButton } from './HeaderMenuButton';
+export { default as HeaderMenuItem } from './HeaderMenuItem';
+export { default as HeaderName } from './HeaderName';
+export { default as HeaderNavigation } from './HeaderNavigation';
+export { default as HeaderPanel } from './HeaderPanel';
+export { default as HeaderSideNavItems } from './HeaderSideNavItems';
+export { default as Switcher } from './Switcher';
+export { default as SwitcherItem } from './SwitcherItem';
+export { default as SwitcherDivider } from './SwitcherDivider';
+export { default as SkipToContent } from './SkipToContent';
+export { default as SideNav } from './SideNav';
+export { default as SideNavDetails } from './SideNavDetails';
+export { default as SideNavDivider } from './SideNavDivider';
+export { default as SideNavFooter } from './SideNavFooter';
+export { default as SideNavHeader } from './SideNavHeader';
+export { default as SideNavIcon } from './SideNavIcon';
+export { default as SideNavItem } from './SideNavItem';
+export { default as SideNavItems } from './SideNavItems';
+export { default as SideNavLink } from './SideNavLink';
+export { default as SideNavLinkText } from './SideNavLinkText';
+export { default as SideNavMenu } from './SideNavMenu';
+export { default as SideNavMenuItem } from './SideNavMenuItem';
+export { default as SideNavSwitcher } from './SideNavSwitcher';