@koobiq/react-components 0.0.1-beta.30 → 0.0.1-beta.31

package/dist/components/InputNumber/InputNumber.d.ts

@@ -1,22 +1,38 @@
-export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseNumberFieldProps, "inputElementType">, "caption" | "label" | "style" | "className" | "disabled" | "required" | "error" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "hiddenLabel"> & {
+import { NumberField } from '@koobiq/react-primitives';
+import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputGroupProps, type FieldInputProps } from '../FieldComponents';
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/numberfield").AriaNumberFieldProps, "inputElementType">, "caption" | "label" | "style" | "className" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    hiddenLabel?: boolean;
+}> & {
     label?: import("react").ReactNode;
     className?: string;
     startAddon?: import("react").ReactNode;
     endAddon?: import("react").ReactNode;
     variant?: import("./types").InputNumberPropVariant;
-    error?: boolean;
+    isInvalid?: boolean;
     errorMessage?: string | number;
     fullWidth?: boolean;
-    disabled?: boolean;
-    hiddenLabel?: boolean;
+    isDisabled?: boolean;
+    isLabelHidden?: boolean;
     caption?: string | number;
-    required?: boolean;
+    isRequired?: boolean;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
     slotProps?: {
-        label?: import("../FieldComponents").FieldLabelProps;
-        input?: import("../FieldComponents").FieldInputProps;
-        caption?: import("../FieldComponents").FieldCaptionProps;
-        errorMessage?: import("../FieldComponents").FieldErrorProps;
+        root?: FieldControlProps<typeof NumberField>;
+        label?: FieldLabelProps;
+        input?: FieldInputProps;
+        caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
+        errorMessage?: FieldErrorProps;
     };
+} & {
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    hiddenLabel?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/InputNumber/InputNumber.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
 import { NumberField } from "@koobiq/react-primitives";
 import { InputNumberCounterControls } from "./components/InputNumberCounterControls.js";
@@ -15,7 +16,16 @@ const InputNumber = forwardRef(
     const {
       variant = "filled",
       fullWidth = false,
-      hiddenLabel = false,
+      hiddenLabel,
+      isLabelHidden: isLabelHiddenProp,
+      disabled,
+      isDisabled: isDisabledProp,
+      error,
+      isInvalid: isInvalidProp,
+      required,
+      isRequired: isRequiredProp,
+      readonly,
+      isReadOnly: isReadOnlyProp,
       label,
       startAddon,
       endAddon,
@@ -24,43 +34,83 @@ const InputNumber = forwardRef(
       caption,
       ...other
     } = props;
-    const domRef = useDOMRef(ref);
+    const inputRef = useDOMRef(ref);
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isRequired = isRequiredProp ?? required ?? false;
+    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+    const isInvalid = isInvalidProp ?? error ?? false;
+    const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'InputNumber: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "required" in props) {
+      deprecate(
+        'InputNumber: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "error" in props) {
+      deprecate(
+        'InputNumber: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+      deprecate(
+        'InputNumber: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+      deprecate(
+        'InputNumber: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
+      );
+    }
     const rootProps = mergeProps(
       {
         label,
         fullWidth,
+        isDisabled,
+        isRequired,
+        isReadOnly,
+        isInvalid,
         errorMessage,
         "data-variant": variant,
-        "data-fullwidth": fullWidth
+        "data-fullwidth": fullWidth,
+        ...other
       },
-      other
+      slotProps?.root
     );
-    return /* @__PURE__ */ jsx(FieldControl, { as: NumberField, ...rootProps, children: ({ error, required, disabled }) => {
-      const labelProps = mergeProps(
-        { hidden: hiddenLabel, required },
-        slotProps?.label
-      );
+    return /* @__PURE__ */ jsx(FieldControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
+      const labelProps = mergeProps({ isHidden: isLabelHidden, isRequired: isRequired2 }, slotProps?.label);
       const inputProps = mergeProps(
-        { error, variant, disabled, ref: domRef },
+        {
+          variant,
+          isInvalid: isInvalid2,
+          isDisabled: isDisabled2,
+          ref: inputRef
+        },
         slotProps?.input
       );
-      const captionProps = slotProps?.caption;
-      const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+      const captionProps = mergeProps(
+        { isInvalid: isInvalid2 },
+        slotProps?.caption
+      );
+      const errorProps = mergeProps({ isInvalid: isInvalid2 }, slotProps?.errorMessage);
+      const groupProps = mergeProps(
+        {
+          endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+            endAddon,
+            /* @__PURE__ */ jsx(InputNumberCounterControls, {})
+          ] }),
+          isInvalid: isInvalid2,
+          startAddon,
+          isDisabled: isDisabled2
+        },
+        slotProps?.group
+      );
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps?.children || label }),
-        /* @__PURE__ */ jsx(
-          FieldInputGroup,
-          {
-            error,
-            disabled,
-            startAddon,
-            endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
-              endAddon,
-              /* @__PURE__ */ jsx(InputNumberCounterControls, {})
-            ] }),
-            children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps })
-          }
-        ),
+        /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
         /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
         /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
       ] });

package/dist/components/InputNumber/components/InputNumberCounterControls.js

@@ -5,8 +5,8 @@ import s from "./InputNumberCounterControls.module.css.js";
 import { useFieldInputGroup } from "../../FieldComponents/FieldInputGroup/FieldInputGroupContext.js";
 import { IconButton } from "../../IconButton/IconButton.js";
 const InputNumberCounterControls = () => {
-  const { hovered, hasValue, focusWithin } = useFieldInputGroup();
-  const visible = (hovered || focusWithin) && hasValue;
+  const { isHovered, hasValue, isFocusWithin } = useFieldInputGroup();
+  const visible = (isHovered || isFocusWithin) && hasValue;
   return /* @__PURE__ */ jsxs("div", { className: clsx(s.base, visible && s.visible), children: [
     /* @__PURE__ */ jsx(
       IconButton,

package/dist/components/InputNumber/types.d.ts

@@ -1,9 +1,51 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
-import type { UseNumberFieldProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
+import type { NumberField, UseNumberFieldProps } from '@koobiq/react-primitives';
+import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputGroupProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
 export declare const inputNumberPropVariant: readonly ["filled", "transparent"];
 export type InputNumberPropVariant = (typeof inputNumberPropVariant)[number];
+type InputNumberDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     *
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     *
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     *
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
+    required?: boolean;
+    /**
+     * If `true`, the input can be selected but not changed by the user.
+     * @default false
+     *
+     * @deprecated
+     * The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     *
+     * @deprecated
+     * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
+     */
+    hiddenLabel?: boolean;
+};
 export type InputNumberProps = ExtendableProps<{
     /** The content to display as the label. */
     label?: ReactNode;
@@ -22,7 +64,7 @@ export type InputNumberProps = ExtendableProps<{
      * If `true`, the input will indicate an error.
      * @default false
      */
-    error?: boolean;
+    isInvalid?: boolean;
     /** Message for the error state. */
     errorMessage?: string | number;
     /**
@@ -34,29 +76,32 @@ export type InputNumberProps = ExtendableProps<{
      * If `true`, the component is disabled.
      * @default false
      */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
      * @default false
      */
-    hiddenLabel?: boolean;
+    isLabelHidden?: boolean;
     /** The helper text content. */
     caption?: string | number;
     /**
      * If `true`, the label is displayed as required and the input element is required.
      * @default false
      */
-    required?: boolean;
+    isRequired?: boolean;
     /** Inline styles. */
     style?: CSSProperties;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
+        root?: FieldControlProps<typeof NumberField>;
         label?: FieldLabelProps;
         input?: FieldInputProps;
         caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
     };
-}, Omit<UseNumberFieldProps, 'inputElementType'>>;
+} & InputNumberDeprecatedProps, Omit<UseNumberFieldProps, 'inputElementType'>>;
 export type InputNumberRef = ComponentRef<'input'>;
+export {};

package/dist/components/Provider/Provider.d.ts

@@ -3,6 +3,6 @@ import type { Breakpoints, ProviderProps } from './types';
 export { useLocale };
 export declare const defaultBreakpoints: Breakpoints;
 export declare const Provider: {
-    ({ breakpoints, breakpointsFallback, children, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ breakpoints, breakpointsFallback, children, router, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/Provider.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { I18nProvider } from "@koobiq/react-primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { I18nProvider, RouterProvider } from "@koobiq/react-primitives";
 import { useLocale } from "@koobiq/react-primitives";
 import { BreakpointsProvider } from "./BreakpointsProvider.js";
 import { ProviderContext } from "./ProviderContext.js";
@@ -22,13 +22,17 @@ const Provider = ({
   breakpoints = defaultBreakpoints,
   breakpointsFallback,
   children,
+  router,
   locale
-}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsxs(
   BreakpointsProvider,
   {
     breakpoints,
     defaultMatches: breakpointsFallback,
-    children
+    children: [
+      router?.navigate && /* @__PURE__ */ jsx(RouterProvider, { ...router, children }),
+      !router?.navigate && children
+    ]
   }
 ) }) });
 Provider.displayName = "Provider";

package/dist/components/Provider/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { I18nProviderProps } from '@koobiq/react-primitives';
+import type { I18nProviderProps, RouterProvider } from '@koobiq/react-primitives';
 export type Breakpoints = {
     xs?: number;
     s?: number;
@@ -18,4 +18,6 @@ export type ProviderProps = {
     breakpointsFallback?: boolean[];
     /** The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. Defaults to the browser/OS language setting. */
     locale?: I18nProviderProps['locale'];
+    /** Configuration object for routing. If provided, wraps children in a RouterProvider. */
+    router?: Omit<Parameters<typeof RouterProvider>[0], 'children'>;
 };

package/dist/components/Select/Select.js

@@ -1,8 +1,9 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useDOMRef, useBoolean, mergeProps, clsx, useElementSize } from "@koobiq/react-core";
+import { deprecate } from "@koobiq/logger";
+import { useDOMRef, useBoolean, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
 import { IconChevronDownS16 } from "@koobiq/react-icons";
-import { useSelectState, useSelect, HiddenSelect } from "@koobiq/react-primitives";
+import { useSelectState, removeDataAttributes, useSelect, HiddenSelect } from "@koobiq/react-primitives";
 import s from "./Select.module.css.js";
 import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
 import { PopoverInner } from "../Popover/Popover.js";
@@ -18,88 +19,102 @@ import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
 function SelectRender(props, ref) {
   const {
     fullWidth = false,
-    hiddenLabel = false,
     "data-testid": testId,
+    className,
+    style,
     open,
-    onOpenChange,
-    defaultOpen,
-    items,
+    isOpen: isOpenProp,
+    hiddenLabel,
+    isLabelHidden: isLabelHiddenProp,
+    disabled,
+    isDisabled: isDisabledProp,
     error,
+    isInvalid: isInvalidProp,
+    required,
+    isRequired: isRequiredProp,
     caption,
+    placeholder,
     endAddon,
-    required,
-    disabled,
-    children,
     slotProps,
     startAddon,
-    selectedKey,
-    placeholder,
+    label,
+    name,
     errorMessage,
-    disabledKeys,
-    onSelectionChange,
-    defaultSelectedKey,
-    renderValue: renderValueProp,
-    ...other
+    renderValue: renderValueProp
   } = props;
+  const isOpen = isOpenProp ?? open;
+  const isInvalid = isInvalidProp ?? error ?? false;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  const isRequired = isRequiredProp ?? required ?? false;
+  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Select: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "required" in props) {
+    deprecate(
+      'Select: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "error" in props) {
+    deprecate(
+      'Select: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Select: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+    deprecate(
+      'Select: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
+    );
+  }
+  const domRef = useDOMRef(ref);
   const state = useSelectState({
-    ...other,
-    items,
-    defaultOpen,
-    onOpenChange,
-    isOpen: open,
-    placeholder,
-    selectedKey,
-    disabledKeys,
-    errorMessage,
-    isInvalid: error,
-    onSelectionChange,
-    defaultSelectedKey,
-    isRequired: required,
-    isDisabled: disabled,
-    children
+    ...removeDataAttributes(props),
+    isOpen,
+    isInvalid,
+    isDisabled,
+    isRequired
   });
-  const domRef = useDOMRef(ref);
   const [opened, { on, off }] = useBoolean(state.isOpen);
   const {
     menuProps,
     valueProps,
     triggerProps,
-    labelProps: labelPropsCommon
+    labelProps: labelPropsAria,
+    descriptionProps,
+    errorMessageProps
   } = useSelect(
     {
-      ...other,
-      placeholder,
-      errorMessage,
-      disabledKeys,
-      isInvalid: error,
-      isRequired: required,
-      isDisabled: disabled
+      ...removeDataAttributes(props),
+      isOpen,
+      isInvalid,
+      isDisabled,
+      isRequired
     },
     { ...state, isOpen: state.isOpen || opened },
     domRef
   );
-  const rootProps = mergeProps(
-    {
-      "data-testid": testId,
-      "data-fullwidth": fullWidth,
-      "data-disabled": disabled,
-      "data-required": required,
-      "data-error": error,
-      className: clsx(s.base, fullWidth && s.fullWidth)
-    },
-    other
-  );
   const { ref: containerRef, width } = useElementSize();
+  const rootProps = mergeProps({
+    "data-testid": testId,
+    "data-invalid": isInvalid,
+    "data-fullwidth": fullWidth,
+    "data-disabled": isDisabled,
+    "data-required": isRequired,
+    className: clsx(s.base, fullWidth && s.fullWidth, className),
+    style
+  });
   const listProps = mergeProps(
     { className: s.list, state },
     slotProps?.list,
     menuProps
   );
-  const labelProps = mergeProps(
-    { hidden: hiddenLabel, required },
-    slotProps?.label,
-    labelPropsCommon
-  );
+  const labelProps = mergeProps({ isHidden: isLabelHidden, isRequired }, slotProps?.label, labelPropsAria);
   const groupProps = mergeProps(
     {
       slotProps: {
@@ -111,15 +126,15 @@ function SelectRender(props, ref) {
         endAddon,
         /* @__PURE__ */ jsx(IconChevronDownS16, {})
       ] }),
-      error,
+      isInvalid,
       ref: containerRef
     },
     slotProps?.group
   );
   const controlProps = mergeProps(
     {
-      error,
-      disabled,
+      isInvalid,
+      isDisabled,
       ref: domRef,
       placeholder
     },
@@ -127,8 +142,8 @@ function SelectRender(props, ref) {
     valueProps,
     triggerProps
   );
-  const captionProps = slotProps?.caption;
-  const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+  const captionProps = mergeProps({ isInvalid }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps({ isInvalid }, slotProps?.errorMessage, errorMessageProps);
   const popoverProps = mergeProps(
     {
       state,
@@ -152,15 +167,15 @@ function SelectRender(props, ref) {
   const renderValue = renderValueProp || renderDefaultValue;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: props.label }),
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: label }),
       /* @__PURE__ */ jsx(
         HiddenSelect,
         {
+          name,
+          label,
           state,
-          isDisabled: disabled,
           triggerRef: domRef,
-          label: props.label,
-          name: props.name
+          isDisabled
         }
       ),
       /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),

package/dist/components/Select/types.d.ts

@@ -5,6 +5,47 @@ import type { ListPropItems, ListPropChildren, ListPropDisabledKeys } from '../L
 import type { PopoverProps } from '../Popover';
 export type SelectKey = string | number;
 export type SelectPropOnSelectionChange = (selected: SelectKey) => void;
+type SelectDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     *
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     *
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     *
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
+    required?: boolean;
+    /**
+     * Sets the open state of the menu.
+     *
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     *
+     * @deprecated
+     * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
+     */
+    hiddenLabel?: boolean;
+};
 export type SelectProps<T extends object> = {
     /** Additional CSS-classes. */
     className?: string;
@@ -26,14 +67,14 @@ export type SelectProps<T extends object> = {
      * If `true`, the input will indicate an error.
      * @default false
      */
-    error?: boolean;
+    isInvalid?: boolean;
     /** Message for the error state */
     errorMessage?: string | number;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
      * @default false
      */
-    hiddenLabel?: boolean;
+    isLabelHidden?: boolean;
     /** The helper text content. */
     caption?: string | number;
     /**
@@ -45,12 +86,12 @@ export type SelectProps<T extends object> = {
      * If `true`, the component is disabled.
      * @default false
      */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /**
      * If `true`, the label is displayed as required and the input element is required.
      * @default false
      */
-    required?: boolean;
+    isRequired?: boolean;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** Ref to the control */
@@ -64,7 +105,7 @@ export type SelectProps<T extends object> = {
     /** Handler that is called when the selection changes. */
     onSelectionChange?: SelectPropOnSelectionChange;
     /** Sets the open state of the menu. */
-    open?: boolean;
+    isOpen?: boolean;
     /** Sets the default open state of the menu. */
     defaultOpen?: boolean;
     /** Method that is called when the open state of the menu changes. */
@@ -82,6 +123,7 @@ export type SelectProps<T extends object> = {
         group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
     };
-};
+} & SelectDeprecatedProps;
 export type SelectComponentProp = <T extends object>(props: SelectProps<T>) => ReactElement | null;
 export type SelectRef = ComponentRef<'button'>;
+export {};