@commercetools/nimbus 0.0.7-rc15 → 0.0.7-rc16

package/dist/index.d.ts

@@ -11,10 +11,15 @@ import { AriaLinkOptions } from 'react-aria';
 import { AriaNumberFieldProps } from 'react-aria';
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { AriaToggleButtonProps } from 'react-aria';
+import { AutocompleteProps } from 'react-aria-components';
 import { CardContentProps } from './card.slots';
 import { CardHeaderProps } from './card.slots';
 import { CardProps as CardProps_2 } from './card.types';
 import { Code } from '@chakra-ui/react';
+import { ComboBoxOptionGroupProps as ComboBoxOptionGroupProps_2 } from './combobox.types';
+import { ComboBoxOptionProps as ComboBoxOptionProps_2 } from './combobox.types';
+import { ComboBoxProps } from 'react-aria-components';
+import { ComboBoxRootProps as ComboBoxRootProps_2 } from './combobox.types';
 import { ComponentProps } from 'react';
 import { default as default_2 } from 'react';
 import { DetailedHTMLProps } from 'react';
@@ -58,6 +63,7 @@ import { RecipeDefinition } from '@chakra-ui/react';
 import { RecipeProps } from '@chakra-ui/react';
 import { RecipeVariantProps } from '@chakra-ui/react';
 import { RecipeVariantRecord } from '@chakra-ui/react';
+import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { SelectOptionGroupProps as SelectOptionGroupProps_2 } from './select.types';
@@ -561,6 +567,7 @@ colorPalette: "neutral";
 }>;
 
 export declare interface ButtonProps extends FunctionalButtonProps {
+    slot?: string | null | undefined;
     ref?: React.Ref<HTMLButtonElement>;
 }
 
@@ -576,7 +583,8 @@ declare interface ButtonRecipeProps extends RecipeProps<"button">, UnstyledProp
  * This creates a complete set of props for the root element, combining
  * HTML attributes, Chakra's styling system, and our custom recipe props.
  */
-declare type ButtonRootProps = HTMLChakraProps<"button", ButtonRecipeProps>;
+declare interface ButtonRootProps extends HTMLChakraProps<"button", ButtonRecipeProps> {
+}
 
 export declare const Card: {
     Root: {
@@ -772,6 +780,252 @@ export { Code }
 declare interface ColorModeProviderProps extends ThemeProviderProps {
 }
 
+export declare const ComboBox: {
+    Root: {
+        <T extends object>({ children, ref, ...props }: ComboBoxRootProps_2<T>): JSX.Element;
+        displayName: string;
+    };
+    OptionGroup: {
+        <T extends object>({ children, label, items, ref, ...props }: ComboBoxOptionGroupProps_2<T> & RefAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Option: {
+        <T extends object>({ children, ref, ...props }: ComboBoxOptionProps_2<T>): JSX.Element;
+        displayName: string;
+    };
+};
+
+/** component prop interface */
+export declare type ComboBoxButtonGroupProps = {
+    selectedKeys?: ComboBoxMultiSelectRootProps<{}>["selectedKeys"];
+    onSelectionChange?: ComboBoxMultiSelectRootProps<{}>["onSelectionChange"];
+    onInputChange?: ComboBoxMultiSelectRootProps<{}>["onInputChange"];
+    onOpenChange?: ComboBoxSingleSelectRootProps<{}>["onOpenChange"];
+    containerRef?: RefObject<HTMLDivElement | null>;
+    isOpen?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+};
+
+/** The slot is a wrapper for multiple components,
+ *  and therefore not combined with the component props
+ *  because it is not used to style the component directly using asChild */
+export declare interface ComboBoxButtonGroupSlotProps extends HTMLChakraProps<"div", RecipeProps<"buttonGroup">> {
+}
+
+/** MultiSelect combobox */
+export declare interface ComboBoxMultiSelect<T extends object> extends Omit<AutocompleteProps, "children" | "filter" | "slot">, Omit<ListBoxProps<T>, "filter" | "autoFocus" | "style" | "slot"> {
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    defaultInputValue?: ComboBoxProps<T>["defaultInputValue"];
+    defaultItems?: ComboBoxProps<T>["defaultItems"];
+    validate?: ComboBoxProps<T>["validate"];
+    allowsCustomValue?: boolean;
+    onSubmitCustomValue?: (value: string) => void;
+    onOpenChange?: ComboBoxProps<T>["onOpenChange"];
+    autoFocus?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    itemId?: string;
+    itemValue?: string;
+    placeholder?: string;
+    ref?: Ref<HTMLDivElement>;
+    size?: RecipeVariantProps<typeof comboBoxSlotRecipe>["size"];
+}
+
+export declare interface ComboBoxMultiSelectInputSlotProps extends HTMLChakraProps<"input", RecipeProps<"multiSelectInput">> {
+}
+
+/** Combined props for the multi select root element (Chakra styles + Aria behavior + Recipe variants). */
+export declare interface ComboBoxMultiSelectRootProps<T extends object> extends Omit<ComboBoxMultiSelectRootSlotProps<T>, "selectionMode">, ComboBoxMultiSelect<T> {
+    ref?: Ref<HTMLDivElement>;
+}
+
+/** Base Chakra styling props for the root `div` slot when multi select*/
+export declare interface ComboBoxMultiSelectRootSlotProps<T extends object> extends HTMLChakraProps<"div", RecipeVariantProps<typeof comboBoxSlotRecipe> & ComboBoxMultiSelect<T>> {
+}
+
+/** component prop interface */
+export declare type ComboBoxMultiSelectValueProps<T extends object> = {
+    items: ComboBoxMultiSelectRootProps<T>["items"];
+    itemId: ComboBoxMultiSelectRootProps<T>["itemId"];
+    itemValue: ComboBoxMultiSelectRootProps<T>["itemValue"];
+    selectedKeys: ComboBoxMultiSelectRootProps<T>["selectedKeys"];
+    onSelectionChange: ComboBoxMultiSelectRootProps<T>["onSelectionChange"];
+    placeholder?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    containerRef?: RefObject<HTMLDivElement | null>;
+    size?: RecipeVariantProps<typeof comboBoxSlotRecipe>["size"];
+};
+
+export declare const _ComboBoxOption: {
+    <T extends object>({ children, ref, ...props }: ComboBoxOptionProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboBoxOptionContentSlotProps = HTMLChakraProps<"span", RecipeProps<"span">>;
+
+export declare const _ComboBoxOptionGroup: {
+    <T extends object>({ children, label, items, ref, ...props }: ComboBoxOptionGroupProps<T> & RefAttributes<HTMLDivElement>): JSX.Element;
+    displayName: string;
+};
+
+/** Combined props for the OptionGroup element (Chakra styles + Aria behavior + Recipe variants). */
+export declare interface ComboBoxOptionGroupProps<T extends object> extends ListBoxSectionProps<T>, Omit<ComboBoxOptionGroupSlotProps, keyof ListBoxSectionProps<T>> {
+    label?: ReactNode;
+}
+
+/** Base Chakra styling props for the root `div` slot. */
+declare type ComboBoxOptionGroupSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+
+export declare type ComboBoxOptionIndicatorSlotProps = HTMLChakraProps<"span", RecipeProps<"span">>;
+
+/** Combined props for the ListBoxItem element (Chakra styles + Aria behavior + Recipe variants). */
+export declare interface ComboBoxOptionProps<T extends object> extends ListBoxItemProps<T>, Omit<ComboBoxOptionSlotProps, keyof ListBoxItemProps<T>> {
+    ref?: Ref<HTMLDivElement>;
+}
+
+/** Base Chakra styling props for the root `div` slot. */
+declare type ComboBoxOptionSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+
+/** Combined props for the ListBox element used in Single Select (Chakra styles + Aria behavior + Recipe variants) */
+export declare interface ComboBoxOptionsProps<T extends object> extends ListBoxProps<T>, Omit<ComboBoxOptionsSlotProps, keyof ListBoxProps<T>> {
+    ref?: Ref<HTMLDivElement>;
+}
+
+/** Base Chakra styling props for the root `div` slot. */
+export declare interface ComboBoxOptionsSlotProps extends HTMLChakraProps<"div", RecipeProps<"options">> {
+}
+
+export declare interface ComboBoxPopoverSlotProps extends HTMLChakraProps<"div", RecipeProps<"popover">> {
+}
+
+export declare const _ComboBoxRoot: {
+    <T extends object>({ children, ref, ...props }: ComboBoxRootProps<T>): JSX.Element;
+    displayName: string;
+};
+
+/** Root element can either be single or multi select */
+export declare type ComboBoxRootProps<T extends object> = ComboBoxSingleSelectRootProps<T> | ComboBoxMultiSelectRootProps<T>;
+
+/** Combined props for the single select root element (Chakra styles + Aria behavior + Recipe variants). */
+export declare interface ComboBoxSingleSelectRootProps<T extends object> extends ComboBoxSingleSelectRootSlotProps<T>, ComboBoxWithCustomChildren<T> {
+    ref?: Ref<HTMLDivElement>;
+}
+
+/** Base Chakra styling props for the root `div` slot when single select*/
+export declare interface ComboBoxSingleSelectRootSlotProps<T extends object> extends HTMLChakraProps<"div", RecipeVariantProps<typeof comboBoxSlotRecipe> & ComboBoxWithCustomChildren<T>> {
+}
+
+/**
+ * Recipe configuration for the Combobox component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const comboBoxSlotRecipe: SlotRecipeDefinition<"option" | "popover" | "value" | "root" | "options" | "optionGroup" | "buttonGroup" | "multiSelectInput" | "optionIndicator" | "optionContent", {
+size: {
+sm: {
+value: {
+minH: "800";
+textStyle: "sm";
+};
+};
+md: {
+value: {
+minH: "1000";
+textStyle: "md";
+};
+};
+};
+variant: {
+solid: {
+root: {
+width: "7200";
+bg: "primary.1";
+};
+value: {
+width: "100%";
+"--border-width"?: "sizes.25" | undefined;
+"--border-color"?: "colors.neutral.7" | undefined;
+};
+};
+ghost: {
+root: {
+maxW: "7200";
+bg?: "transparent" | undefined;
+"&:hover"?: {
+bg: "primaryAlpha.2";
+} | undefined;
+};
+value: {
+bg: "transparent";
+"--border-width"?: "sizes.25" | undefined;
+"--border-color"?: "transparent" | undefined;
+};
+};
+};
+selectionMode: {
+multiple: {
+options: {
+boxShadow: "none";
+px: "200";
+my: "200";
+minW: "unset";
+"& section:first-of-type > header": {
+mt: number;
+};
+};
+option: {
+colorPalette: "primary";
+display: "flex";
+alignItems: "flex-start";
+justifyContent: "center";
+position: "relative";
+cursor: "pointer";
+gap: "200";
+mb: "var(--focus-ring-width)";
+"&:last-of-type": {
+mb: number;
+};
+'&[aria-selected="true"]': {
+bg: "unset";
+};
+'&[data-focused="true"]': {
+outlineWidth: "var(--focus-ring-width)";
+outlineColor: "var(--focus-ring-color)";
+outlineStyle: "var(--focus-ring-style)";
+bg: "unset";
+};
+_hover: {
+bg: "primary.2";
+};
+};
+};
+single: {};
+none: {};
+};
+}>;
+
+/** The slot is a wrapper for multiple components,
+ *  and therefore not combined with the component props
+ *  because it is not used to style the component directly using asChild */
+export declare interface ComboBoxValueSlotProps extends HTMLChakraProps<"div", RecipeProps<"value">> {
+}
+
+/** ComboBox with overridden children prop based on expected dom structure. */
+declare type ComboBoxWithCustomChildren<T extends object> = Omit<ComboBoxProps<T>, "children"> & {
+    onSubmitCustomValue?: (value: string) => void;
+    renderEmptyState?: ListBoxProps<T>["renderEmptyState"];
+    placeholder?: string;
+    isLoading?: boolean;
+    children: ReactNode | ((item: T) => default_2.ReactNode);
+    ref?: Ref<HTMLDivElement>;
+};
+
 /**
  * Properties from TimeFieldStateOptions that would conflict with similarly named
  * properties in TimeInputRootProps. We use this to prevent TypeScript interface
@@ -974,7 +1228,7 @@ declare interface FormFieldRootSlotProps extends HTMLChakraProps<"div", RecipeVa
 declare type FunctionalAvatarProps = AvatarRootProps & AvatarComponentProps;
 
 /** combine chakra-button props with aria-button props */
-declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, keyof AriaButtonProps> & {
+declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, keyof AriaButtonProps | "slot"> & {
     [key: `data-${string}`]: unknown;
 };
 
@@ -1731,6 +1985,15 @@ export declare interface SimpleGridProps extends SimpleGridProps_2 {
     ref?: React.Ref<HTMLDivElement>;
 }
 
+export declare interface SingleSelectInputProps {
+    placeholder?: string;
+    inputValue?: string;
+    allowsCustomValue?: boolean;
+    onSubmitCustomValue?: (value: string) => void;
+    onInputChange?: (value: string) => void;
+    ref?: default_2.Ref<HTMLInputElement>;
+}
+
 export declare const Stack: {
     (props: StackProps): JSX.Element;
     displayName: string;