@carbon/react 1.54.0-rc.0 → 1.55.0-rc.0

package/es/components/Button/Button.d.ts

@@ -14,7 +14,7 @@ export declare const ButtonTooltipAlignments: readonly ["start", "center", "end"
 export type ButtonTooltipAlignment = (typeof ButtonTooltipAlignments)[number];
 export declare const ButtonTooltipPositions: string[];
 export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
-interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify the message read by screen readers for the danger button variant
      */

package/es/components/Button/Button.js

@@ -8,11 +8,9 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useRef } from 'react';
-import cx from 'classnames';
 import { IconButton } from '../IconButton/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { useId } from '../../internal/useId.js';
+import ButtonBase from './ButtonBase.js';
 
 const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
 const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
@@ -24,18 +22,13 @@ function isIconOnlyButton(hasIconOnly, _kind) {
   }
   return false;
 }
-const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
-  let {
+const Button = /*#__PURE__*/React__default.forwardRef(function Button(props, ref) {
+  const tooltipRef = useRef(null);
+  const {
     as,
     children,
-    className,
-    dangerDescription = 'danger',
-    disabled = false,
     hasIconOnly = false,
-    href,
     iconDescription,
-    isExpressive = false,
-    isSelected,
     kind = 'primary',
     onBlur,
     onClick,
@@ -44,92 +37,21 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     onMouseLeave,
     renderIcon: ButtonImageElement,
     size,
-    tabIndex,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
-    type = 'button',
     ...rest
-  } = _ref;
-  const tooltipRef = useRef(null);
-  const prefix = usePrefix();
+  } = props;
   const handleClick = evt => {
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
       evt.preventDefault();
     }
   };
-  const buttonClasses = cx(className, {
-    [`${prefix}--btn`]: true,
-    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--xl`]: size === 'xl',
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--2xl`]: size === '2xl',
-    // TODO: V12 - Remove this class
-    [`${prefix}--layout--size-${size}`]: size,
-    [`${prefix}--btn--${kind}`]: kind,
-    [`${prefix}--btn--disabled`]: disabled,
-    [`${prefix}--btn--expressive`]: isExpressive,
-    [`${prefix}--btn--icon-only`]: hasIconOnly,
-    [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
-  });
-  const commonProps = {
-    tabIndex,
-    className: buttonClasses,
-    ref
-  };
-  const buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default.createElement(ButtonImageElement, {
-    "aria-label": iconDescription,
-    className: `${prefix}--btn__icon`,
-    "aria-hidden": "true"
-  });
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default.createElement(ButtonImageElement, null);
-  const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
-  let component = 'button';
-  const assistiveId = useId('danger-description');
-  const {
-    'aria-pressed': ariaPressed,
-    'aria-describedby': ariaDescribedBy
-  } = rest;
-  let otherProps = {
-    disabled,
-    type,
-    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
-    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
-  };
-  const anchorProps = {
-    href
-  };
-  let assistiveText = null;
-  if (dangerButtonVariants.includes(kind)) {
-    assistiveText = /*#__PURE__*/React__default.createElement("span", {
-      id: assistiveId,
-      className: `${prefix}--visually-hidden`
-    }, dangerDescription);
-  }
-  if (as) {
-    component = as;
-    otherProps = {
-      ...otherProps,
-      ...anchorProps
-    };
-  } else if (href && !disabled) {
-    component = 'a';
-    otherProps = anchorProps;
-  }
   if (!isIconOnlyButton(hasIconOnly)) {
-    return /*#__PURE__*/React__default.createElement(component, {
-      onMouseEnter,
-      onMouseLeave,
-      onFocus,
-      onBlur,
-      onClick,
-      ...rest,
-      ...commonProps,
-      ...otherProps
-    }, assistiveText, children, buttonImage);
+    return /*#__PURE__*/React__default.createElement(ButtonBase, _extends({
+      ref: ref
+    }, props));
   } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
@@ -146,7 +68,8 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     if (tooltipPosition === 'right' || tooltipPosition === 'left') {
       align = tooltipPosition;
     }
-    return /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    return /*#__PURE__*/React__default.createElement(IconButton, _extends({}, rest, {
+      ref: ref,
       as: as,
       align: align,
       label: iconDescription,
@@ -156,8 +79,9 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur,
-      onClick: composeEventHandlers([onClick, handleClick])
-    }, rest, commonProps, otherProps), iconOnlyImage ?? children);
+      onClick: composeEventHandlers([onClick, handleClick]),
+      renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
+    }), iconOnlyImage ?? children);
   }
 });
 Button.displayName = 'Button';

package/es/components/Button/ButtonBase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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';
+import { ButtonProps } from './Button';
+declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export default ButtonBase;

package/es/components/Button/ButtonBase.js

@@ -0,0 +1,110 @@
+/**
+ * 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__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { useId } from '../../internal/useId.js';
+
+const ButtonBase = /*#__PURE__*/React__default.forwardRef(function ButtonBase(_ref, ref) {
+  let {
+    as,
+    children,
+    className,
+    dangerDescription = 'danger',
+    disabled = false,
+    hasIconOnly = false,
+    href,
+    iconDescription,
+    isExpressive = false,
+    isSelected,
+    kind = 'primary',
+    onBlur,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    renderIcon: ButtonImageElement,
+    size,
+    tabIndex,
+    type = 'button',
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const buttonClasses = cx(className, {
+    [`${prefix}--btn`]: true,
+    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--xl`]: size === 'xl',
+    // TODO: V12 - Remove this class
+    [`${prefix}--btn--2xl`]: size === '2xl',
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
+    [`${prefix}--btn--${kind}`]: kind,
+    [`${prefix}--btn--disabled`]: disabled,
+    [`${prefix}--btn--expressive`]: isExpressive,
+    [`${prefix}--btn--icon-only`]: hasIconOnly && !className?.includes(`${prefix}--btn--icon-only`),
+    [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
+  });
+  const commonProps = {
+    tabIndex,
+    className: buttonClasses,
+    ref
+  };
+  const buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default.createElement(ButtonImageElement, {
+    "aria-label": iconDescription,
+    className: `${prefix}--btn__icon`,
+    "aria-hidden": "true"
+  });
+  const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
+  let component = 'button';
+  const assistiveId = useId('danger-description');
+  const {
+    'aria-pressed': ariaPressed,
+    'aria-describedby': ariaDescribedBy
+  } = rest;
+  let otherProps = {
+    disabled,
+    type,
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
+    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
+  };
+  const anchorProps = {
+    href
+  };
+  let assistiveText = null;
+  if (dangerButtonVariants.includes(kind)) {
+    assistiveText = /*#__PURE__*/React__default.createElement("span", {
+      id: assistiveId,
+      className: `${prefix}--visually-hidden`
+    }, dangerDescription);
+  }
+  if (as) {
+    component = as;
+    otherProps = {
+      ...otherProps,
+      ...anchorProps
+    };
+  } else if (href && !disabled) {
+    component = 'a';
+    otherProps = anchorProps;
+  }
+  return /*#__PURE__*/React__default.createElement(component, {
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    onClick,
+    ...rest,
+    ...commonProps,
+    ...otherProps
+  }, assistiveText, children, buttonImage);
+});
+
+export { ButtonBase as default };

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

@@ -0,0 +1,37 @@
+/**
+ * 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 CodeSnippetSkeletonProps extends React.HTMLAttributes<Omit<HTMLDivElement, 'children'>> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * The type of the code snippet, including single or multi
+     */
+    type?: 'single' | 'multi' | undefined;
+}
+declare function CodeSnippetSkeleton({ className: containerClassName, type, ...rest }: {
+    [x: string]: any;
+    className: any;
+    type?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+declare namespace CodeSnippetSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The type of the code snippet, including single or multi
+         */
+        type: PropTypes.Requireable<string>;
+    };
+}
+export default CodeSnippetSkeleton;
+export { CodeSnippetSkeleton };

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -0,0 +1,196 @@
+/**
+ * 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 { PropsWithChildren } from 'react';
+export interface CodeSnippetProps {
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * Specify a label to be read by screen readers on the containing textbox
+     * node
+     */
+    ['aria-label']?: string;
+    /**
+     * Deprecated, please use `aria-label` instead.
+     * Specify a label to be read by screen readers on the containing textbox
+     * node
+     */
+    ariaLabel?: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify the description for the Copy Button
+     */
+    copyButtonDescription?: string;
+    /**
+     * Optional text to copy. If not specified, the `children` node's `innerText`
+     * will be used as the copy value.
+     */
+    copyText?: string;
+    /**
+     * Specify whether or not the CodeSnippet should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the string displayed when the snippet is copied
+     */
+    feedback?: string;
+    /**
+     * Specify the time it takes for the feedback message to timeout
+     */
+    feedbackTimeout?: number;
+    /**
+     * Specify whether or not a copy button should be used/rendered.
+     */
+    hideCopyButton?: boolean;
+    /**
+     * Specify whether you are using the light variant of the Code Snippet,
+     * typically used for inline snippet to display an alternate color
+     */
+    light?: boolean;
+    /**
+     * Specify the maximum number of rows to be shown when in collapsed view
+     */
+    maxCollapsedNumberOfRows?: number;
+    /**
+     * Specify the maximum number of rows to be shown when in expanded view
+     */
+    maxExpandedNumberOfRows?: number;
+    /**
+     * Specify the minimum number of rows to be shown when in collapsed view
+     */
+    minCollapsedNumberOfRows?: number;
+    /**
+     * Specify the minimum number of rows to be shown when in expanded view
+     */
+    minExpandedNumberOfRows?: number;
+    /**
+     * An optional handler to listen to the `onClick` even fired by the Copy
+     * Button
+     */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * Specify a string that is displayed when the Code Snippet has been
+     * interacted with to show more lines
+     */
+    showLessText?: string;
+    /**
+     * Specify a string that is displayed when the Code Snippet text is more
+     * than 15 lines
+     */
+    showMoreText?: string;
+    /**
+     * Provide the type of Code Snippet
+     */
+    type?: 'single' | 'inline' | 'multi';
+    /**
+     * Specify whether or not to wrap the text.
+     */
+    wrapText?: boolean;
+}
+declare function CodeSnippet({ align, className, type, children, disabled, feedback, feedbackTimeout, onClick, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, copyText, copyButtonDescription, light, showMoreText, showLessText, hideCopyButton, wrapText, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minCollapsedNumberOfRows, minExpandedNumberOfRows, ...rest }: PropsWithChildren<CodeSnippetProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace CodeSnippet {
+    var propTypes: {
+        /**
+         * Specify how the trigger should align with the tooltip
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Specify a label to be read by screen readers on the containing textbox
+         * node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the containing textbox
+         * node
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide the content of your CodeSnippet as a node or string
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the description for the Copy Button
+         */
+        copyButtonDescription: PropTypes.Requireable<string>;
+        /**
+         * Optional text to copy. If not specified, the `children` node's `innerText`
+         * will be used as the copy value.
+         */
+        copyText: PropTypes.Requireable<string>;
+        /**
+         * Specify whether or not the CodeSnippet should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the string displayed when the snippet is copied
+         */
+        feedback: PropTypes.Requireable<string>;
+        /**
+         * Specify the time it takes for the feedback message to timeout
+         */
+        feedbackTimeout: PropTypes.Requireable<number>;
+        /**
+         * Specify whether or not a copy button should be used/rendered.
+         */
+        hideCopyButton: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether you are using the light variant of the Code Snippet,
+         * typically used for inline snippet to display an alternate color
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify the maximum number of rows to be shown when in collapsed view
+         */
+        maxCollapsedNumberOfRows: PropTypes.Requireable<number>;
+        /**
+         * Specify the maximum number of rows to be shown when in expanded view
+         */
+        maxExpandedNumberOfRows: PropTypes.Requireable<number>;
+        /**
+         * Specify the minimum number of rows to be shown when in collapsed view
+         */
+        minCollapsedNumberOfRows: PropTypes.Requireable<number>;
+        /**
+         * Specify the minimum number of rows to be shown when in expanded view
+         */
+        minExpandedNumberOfRows: PropTypes.Requireable<number>;
+        /**
+         * An optional handler to listen to the `onClick` even fired by the Copy
+         * Button
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify a string that is displayed when the Code Snippet has been
+         * interacted with to show more lines
+         */
+        showLessText: PropTypes.Requireable<string>;
+        /**
+         * Specify a string that is displayed when the Code Snippet text is more
+         * than 15 lines
+         */
+        showMoreText: PropTypes.Requireable<string>;
+        /**
+         * Provide the type of Code Snippet
+         */
+        type: PropTypes.Requireable<string>;
+        /**
+         * Specify whether or not to wrap the text.
+         */
+        wrapText: PropTypes.Requireable<boolean>;
+    };
+}
+export default CodeSnippet;

package/es/components/CodeSnippet/CodeSnippet.js

@@ -24,7 +24,7 @@ const rowHeightInPixels = 16;
 const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
-const defaultMinExpandedNumberOfRows = 0;
+const defaultMinExpandedNumberOfRows = 16;
 function CodeSnippet(_ref) {
   let {
     align = 'bottom',
@@ -55,9 +55,9 @@ function CodeSnippet(_ref) {
   const {
     current: uid
   } = useRef(uniqueId());
-  const codeContentRef = useRef();
-  const codeContainerRef = useRef();
-  const innerCodeRef = useRef();
+  const codeContentRef = useRef(null);
+  const codeContainerRef = useRef(null);
+  const innerCodeRef = useRef(null);
   const [hasLeftOverflow, setHasLeftOverflow] = useState(false);
   const [hasRightOverflow, setHasRightOverflow] = useState(false);
   const getCodeRef = useCallback(() => {
@@ -66,15 +66,17 @@ function CodeSnippet(_ref) {
     }
     if (type === 'multi') {
       return codeContentRef;
+    } else {
+      return innerCodeRef;
     }
   }, [type]);
   const prefix = usePrefix();
   const getCodeRefDimensions = useCallback(() => {
     const {
-      clientWidth: codeClientWidth,
-      scrollLeft: codeScrollLeft,
-      scrollWidth: codeScrollWidth
-    } = getCodeRef().current;
+      clientWidth: codeClientWidth = 0,
+      scrollLeft: codeScrollLeft = 0,
+      scrollWidth: codeScrollWidth = 0
+    } = getCodeRef().current || {};
     return {
       horizontalOverflow: codeScrollWidth > codeClientWidth,
       codeClientWidth,
@@ -101,7 +103,7 @@ function CodeSnippet(_ref) {
       if (codeContentRef?.current && type === 'multi') {
         const {
           height
-        } = innerCodeRef.current.getBoundingClientRect();
+        } = codeContentRef.current.getBoundingClientRect();
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {
@@ -115,13 +117,13 @@ function CodeSnippet(_ref) {
         handleScroll();
       }
     }
-  }, [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minExpandedNumberOfRows, rowHeightInPixels]);
+  });
   useEffect(() => {
     handleScroll();
   }, [handleScroll]);
   const handleCopyClick = evt => {
     if (copyText || innerCodeRef?.current) {
-      copy(copyText ?? innerCodeRef?.current?.innerText);
+      copy(copyText ?? innerCodeRef?.current?.innerText ?? '');
     }
     if (onClick) {
       onClick(evt);
@@ -159,7 +161,7 @@ function CodeSnippet(_ref) {
       ref: innerCodeRef
     }, children));
   }
-  let containerStyle = {};
+  const containerStyle = {};
   if (type === 'multi') {
     const styles = {};
     if (expandedCode) {
@@ -185,16 +187,16 @@ function CodeSnippet(_ref) {
     className: codeSnippetClasses
   }), /*#__PURE__*/React__default.createElement("div", _extends({
     ref: codeContainerRef,
-    role: type === 'single' || type === 'multi' ? 'textbox' : null,
-    tabIndex: (type === 'single' || type === 'multi') && !disabled ? 0 : null,
+    role: type === 'single' || type === 'multi' ? 'textbox' : undefined,
+    tabIndex: (type === 'single' || type === 'multi') && !disabled ? 0 : undefined,
     className: `${prefix}--snippet-container`,
     "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
-    "aria-readonly": type === 'single' || type === 'multi' ? true : null,
-    "aria-multiline": type === 'multi' ? true : null,
-    onScroll: type === 'single' && handleScroll || null
+    "aria-readonly": type === 'single' || type === 'multi' ? true : undefined,
+    "aria-multiline": type === 'multi' ? true : undefined,
+    onScroll: type === 'single' && handleScroll || undefined
   }, containerStyle), /*#__PURE__*/React__default.createElement("pre", {
     ref: codeContentRef,
-    onScroll: type === 'multi' && handleScroll || null
+    onScroll: type === 'multi' && handleScroll || undefined
   }, /*#__PURE__*/React__default.createElement("code", {
     ref: innerCodeRef
   }, children))), hasLeftOverflow && /*#__PURE__*/React__default.createElement("div", {

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

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

package/es/components/ComboBox/ComboBox.d.ts

@@ -6,7 +6,7 @@
  */
 import Downshift from 'downshift';
 import { ReactNodeLike } from 'prop-types';
-import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
+import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 interface OnChangeData<ItemType> {
@@ -159,7 +159,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     warnText?: ReactNode;
 }
-type ComboboxComponentProps<ItemType> = PropsWithoutRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
+type ComboboxComponentProps<ItemType> = PropsWithRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
 interface ComboBoxComponent {
     <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
 }