@carbon/react 1.74.0 → 1.75.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -197,7 +197,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator,
     [`${prefix}--autoalign`]: autoAlign
@@ -344,6 +343,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       case InputKeyDownArrowDown:
         if (InputKeyDownArrowDown === type && !isOpen) {
           setIsOpen(true);
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
         }
         if (highlightedIndex > -1) {
           const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);

package/es/components/MultiSelect/MultiSelect.js

@@ -231,6 +231,16 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           setItemsCleared(false);
           setIsOpenWrapper(true);
         }
+        if (match(e, ArrowDown) && selectedItems.length === 0) {
+          setInputFocused(false);
+          setIsFocused(false);
+        }
+        if (match(e, Escape) && isOpen) {
+          setInputFocused(true);
+        }
+        if (match(e, Enter) && isOpen) {
+          setInputFocused(true);
+        }
       }
     }
   });
@@ -262,7 +272,6 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: !isOpen && isFluid && isFocused,
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });

package/es/components/OrderedList/OrderedList.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { type ComponentProps } from 'react';
-interface OrderedListProps extends ComponentProps<'ol'> {
+export interface OrderedListProps extends ComponentProps<'ol'> {
     nested?: boolean | undefined;
     native?: boolean | undefined;
     isExpressive?: boolean | undefined;

package/es/components/OverflowMenu/OverflowMenu.d.ts

@@ -118,7 +118,7 @@ export interface OverflowMenuProps {
      */
     innerRef?: React.Ref<any>;
 }
-interface OverflowMenuState {
+export interface OverflowMenuState {
     open: boolean;
     prevOpen?: boolean;
     hasMountedTrigger: boolean;

package/es/components/PaginationNav/PaginationNav.d.ts

@@ -17,7 +17,58 @@ declare const translationIds: {
  * Message ids that will be passed to translateWithId().
  */
 type TranslationKey = keyof typeof translationIds;
-interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
+export interface DirectionButtonProps {
+    /**
+     * The direction this button represents ("forward" or "backward").
+     */
+    direction?: 'forward' | 'backward';
+    /**
+     * Whether or not the button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The label shown in the button's tooltip.
+     */
+    label?: string;
+    /**
+     * The callback function called when the button is clicked.
+     */
+    onClick?: React.MouseEventHandler;
+}
+export interface PaginationItemProps extends TranslateWithId<'carbon.pagination-nav.item' | 'carbon.pagination-nav.active'> {
+    /**
+     * Whether or not this is the currently active page.
+     */
+    isActive?: boolean;
+    /**
+     * The callback function called when the item is clicked.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * The page number this item represents.
+     */
+    page?: number;
+}
+export interface PaginationOverflowProps extends TranslateWithId<'carbon.pagination-nav.item' | 'carbon.pagination-nav.active'> {
+    /**
+     * How many items to display in this overflow.
+     */
+    count?: number;
+    /**
+     * From which index on this overflow should start displaying pages.
+     */
+    fromIndex?: number;
+    /**
+     * The callback function called when the user selects a page from the overflow.
+     */
+    onSelect?: (id: number) => void;
+    /**
+     * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+     * Set this to true if you are having performance problems with large data sets.
+     */
+    disableOverflow?: boolean;
+}
+export interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
     /**
      * Additional CSS class names.
      */

package/es/components/Popover/index.d.ts

@@ -7,6 +7,11 @@
 import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
 import { type Boundary } from '@floating-ui/react';
+export interface PopoverContext {
+    setFloating: React.Ref<HTMLSpanElement>;
+    caretRef: React.Ref<HTMLSpanElement>;
+    autoAlign: boolean | null;
+}
 /**
  * Deprecated popover alignment values.
  * @deprecated Use NewPopoverAlignment instead.
@@ -14,7 +19,7 @@ import { type Boundary } from '@floating-ui/react';
 export type DeprecatedPopoverAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
 export type NewPopoverAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
 export type PopoverAlignment = DeprecatedPopoverAlignment | NewPopoverAlignment;
-interface PopoverBaseProps {
+export interface PopoverBaseProps {
     /**
      * Specify how the popover should align with the trigger element.
      */
@@ -73,4 +78,3 @@ export interface PopoverComponent {
 export declare const Popover: PopoverComponent;
 export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
-export {};

package/es/components/Portal/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface PortalProps {
+export interface PortalProps {
     /**
      * Specify the children elements to be rendered inside of the <Portal>
      */

package/es/components/ProgressIndicator/ProgressIndicator.Skeleton.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface ProgressIndicatorSkeletonProps {
+export interface ProgressIndicatorSkeletonProps {
     /**
      * Specify an optional className to add.
      */

package/es/components/SkeletonIcon/SkeletonIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface SkeletonIconProps {
+export interface SkeletonIconProps {
     /**
      * Specify an optional className to add.
      */

package/es/components/SkeletonText/SkeletonText.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface SkeletonTextProps {
+export interface SkeletonTextProps {
     /**
      * Specify an optional className to be applied to the container node.
      */

package/es/components/Tabs/Tabs.d.ts

@@ -147,7 +147,7 @@ export interface TabListProps extends DivAttributes {
      * Provide an accessible label to be read when a user interacts with this
      * component
      */
-    'aria-label': string;
+    'aria-label'?: string;
     /**
      * Provide child elements to be rendered inside `ContentTabs`.
      * These elements should render a `ContentTab`
@@ -205,7 +205,7 @@ declare namespace TabList {
          * Provide an accessible label to be read when a user interacts with this
          * component
          */
-        'aria-label': PropTypes.Validator<string>;
+        'aria-label': PropTypes.Requireable<string>;
         /**
          * Provide child elements to be rendered inside `ContentTabs`.
          * These elements should render a `ContentTab`

package/es/components/Tabs/Tabs.js

@@ -521,7 +521,7 @@ TabList.propTypes = {
    * Provide an accessible label to be read when a user interacts with this
    * component
    */
-  'aria-label': PropTypes.string.isRequired,
+  'aria-label': PropTypes.string,
   /**
    * Provide child elements to be rendered inside `ContentTabs`.
    * These elements should render a `ContentTab`

package/es/components/Tag/DismissibleTag.js

@@ -38,7 +38,7 @@ const DismissibleTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const tagLabelRef = useRef();
+  const tagLabelRef = useRef(null);
   const tagId = id || `tag-${useId()}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);

package/es/components/Tag/OperationalTag.js

@@ -42,7 +42,7 @@ const OperationalTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const tagRef = useRef();
+  const tagRef = useRef(null);
   const tagId = id || `tag-${useId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);

package/es/components/Tag/SelectableTag.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 export interface SelectableTagBaseProps {
@@ -33,7 +33,7 @@ export interface SelectableTagBaseProps {
     /**
      * Provide an optional function to be called when the tag is clicked.
      */
-    onClick?: (e: Event) => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Specify the state of the selectable tag.
      */

package/es/components/Tag/SelectableTag.js

@@ -32,7 +32,7 @@ const SelectableTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const tagRef = useRef();
+  const tagRef = useRef(null);
   const tagId = id || `tag-${useId()}`;
   const [selectedTag, setSelectedTag] = useState(selected);
   const tagClasses = cx(`${prefix}--tag--selectable`, className, {

package/es/components/Tag/Tag.d.ts

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-import { PolymorphicProps } from '../../types/common';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
+import { SelectableTagBaseProps } from './SelectableTag';
+import { OperationalTagBaseProps } from './OperationalTag';
+import { DismissibleTagBaseProps } from './DismissibleTag';
 export declare const TYPES: {
     red: string;
     magenta: string;
@@ -78,7 +81,8 @@ export interface TagBaseProps {
      */
     type?: keyof typeof TYPES;
 }
-export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
-declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
+export type TagProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TagBaseProps>;
+type TagComponent = <T extends React.ElementType = 'div'>(props: TagProps<T> | OperationalTagBaseProps | SelectableTagBaseProps | DismissibleTagBaseProps) => React.ReactElement | any;
+declare const Tag: TagComponent;
 export declare const types: string[];
 export default Tag;

package/es/components/Tag/Tag.js

@@ -40,7 +40,7 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef) {
+const Tag = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
   let {
     children,
     className,

package/es/components/Text/Text.d.ts

@@ -4,12 +4,14 @@
  * 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';
-import { PolymorphicProps } from '../../types/common';
+import React, { ReactNode } from 'react';
 import { TextDir } from './TextDirection';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface TextBaseProps {
     dir?: TextDir | undefined;
+    children?: ReactNode;
 }
-export type TextProps<T extends React.ElementType> = PolymorphicProps<T, TextBaseProps>;
-declare const Text: React.ForwardRefExoticComponent<Omit<TextProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement>>;
+export type TextProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TextBaseProps>;
+type TextComponent = <T extends React.ElementType = 'span'>(props: TextProps<T>) => React.ReactElement | any;
+declare const Text: TextComponent;
 export { Text };

package/es/components/Text/Text.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useContext } from 'react';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
-const Text = /*#__PURE__*/React__default.forwardRef(function Text(_ref, ref) {
+const Text = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     as,
     children,

package/es/components/Theme/index.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import React, { ElementType } from 'react';
 import { PolymorphicProps } from '../../types/common';
-interface GlobalThemeProps {
+export interface GlobalThemeProps {
     theme?: 'white' | 'g10' | 'g90' | 'g100';
     children?: React.ReactNode;
 }

package/es/components/Toggle/Toggle.Skeleton.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface ToggleSkeletonProps {
+export interface ToggleSkeletonProps {
     'aria-label'?: string;
     className?: string;
 }

package/es/components/ToggleSmall/ToggleSmall.Skeleton.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface ToggleSmallSkeletonProps {
+export interface ToggleSmallSkeletonProps {
     ['aria-label']: string;
     /**
      * Specify an optional className to add to the form item wrapper.

package/es/components/Toggletip/index.d.ts

@@ -35,7 +35,7 @@ export declare namespace ToggletipLabel {
         className: PropTypes.Requireable<string>;
     };
 }
-interface ToggletipProps<E extends ElementType> {
+export interface ToggletipProps<E extends ElementType> {
     align?: PopoverAlignment;
     alignmentAxisOffset?: number;
     as?: E;
@@ -84,7 +84,7 @@ export declare namespace Toggletip {
         defaultOpen: PropTypes.Requireable<boolean>;
     };
 }
-interface ToggletipButtonBaseProps {
+export interface ToggletipButtonBaseProps {
     children?: ReactNode;
     className?: string;
     label?: string;
@@ -95,7 +95,7 @@ export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps
  * clicks and keyboard interactions.
  */
 export declare const ToggletipButton: React.ForwardRefExoticComponent<Omit<ToggleTipButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
-interface ToggletipContentProps {
+export interface ToggletipContentProps {
     children?: ReactNode;
     className?: string;
 }
@@ -106,7 +106,7 @@ interface ToggletipContentProps {
  */
 declare const ToggletipContent: React.ForwardRefExoticComponent<ToggletipContentProps & React.RefAttributes<HTMLDivElement>>;
 export { ToggletipContent };
-interface ToggleTipActionsProps {
+export interface ToggleTipActionsProps {
     children?: ReactNode;
     className?: string;
 }

package/es/components/UIShell/Content.d.ts

@@ -82,7 +82,7 @@ declare const Content: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "time" | "date" | "step" | "page" | "location" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "date" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;

package/es/components/UIShell/Header.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface HeaderProps {
+export interface HeaderProps {
     children?: ReactNode;
     /**
      * Required props for the accessibility label of the header

package/es/components/UIShell/HeaderGlobalAction.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface HeaderGlobalActionProps {
+export interface HeaderGlobalActionProps {
     /**
      * Required props for the accessibility label of the button
      */

package/es/components/UIShell/HeaderMenu.d.ts

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
  * with managing focus. It also passes along refs to each child so that it can
  * help manage focus state of its children.
  */
-interface HeaderMenuProps {
+export interface HeaderMenuProps {
     /**
      * Required props for the accessibility label of the menu
      */

package/es/components/UIShell/HeaderPanel.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface HeaderPanelProps {
+export interface HeaderPanelProps {
     /**
      * Specify whether focus and blur listeners are added. They are by default.
      */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface SideNavHeaderProps {
+export interface SideNavHeaderProps {
     /**
      * The child nodes to be rendered
      */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface SideNavIconProps {
+export interface SideNavIconProps {
     /**
      * Provide a single icon as the child to `SideNavIcon` to render in the
      * container

package/es/components/UIShell/SideNavItem.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface SideNavItemProps {
+export interface SideNavItemProps {
     /**
      * Provide a single icon as the child to `SideNavItem` to render in the
      * container

package/es/components/UIShell/SideNavItems.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface SideNavItemsProps {
+export interface SideNavItemsProps {
     /**
      * Provide a single icon as the child to `SideNavIcon` to render in the
      * container

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface SideNavMenuProps {
+export interface SideNavMenuProps {
     /**
      * An optional CSS class to apply to the component.
      */

package/es/components/UIShell/SideNavMenuItem.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ElementType, ComponentProps } from 'react';
 import Link from './Link';
-interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
+export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
      * Specify the children to be rendered inside of the `SideNavMenuItem`
      */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ChangeEventHandler } from 'react';
-interface SideNavSwitcherProps {
+export interface SideNavSwitcherProps {
     /**
      * Provide an optional class to be applied to the containing node
      */

package/es/components/UIShell/Switcher.d.ts

@@ -11,7 +11,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface BaseSwitcherProps {
+export interface BaseSwitcherProps {
     /**
      * expects to receive <SwitcherItem />
      */

package/es/components/UIShell/SwitcherDivider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface SwitcherDividerProps {
+export interface SwitcherDividerProps {
     /**
      * Optionally provide a custom class to apply to the underlying `<li>` node
      */

package/es/components/UIShell/SwitcherItem.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributeAnchorTarget } from 'react';
-interface BaseSwitcherItemProps {
+export interface BaseSwitcherItemProps {
     /**
      * Specify the text content for the link
      */
@@ -52,14 +52,14 @@ interface BaseSwitcherItemProps {
      */
     rel?: string;
 }
-interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
+export interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;
     'aria-labelledby'?: never;
 }
-interface SwitcherItemWithAriaLabelledBy extends BaseSwitcherItemProps {
+export interface SwitcherItemWithAriaLabelledBy extends BaseSwitcherItemProps {
     'aria-label'?: never;
     'aria-labelledby': string;
 }
-type SwitcherItemProps = SwitcherItemWithAriaLabel | SwitcherItemWithAriaLabelledBy;
+export type SwitcherItemProps = SwitcherItemWithAriaLabel | SwitcherItemWithAriaLabelledBy;
 declare const SwitcherItem: React.ForwardRefExoticComponent<SwitcherItemProps & React.RefAttributes<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>;
 export default SwitcherItem;