@mirohq/design-system-combobox 1.0.9 → 1.1.0

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import react__default, { ReactNode, FC, ComponentPropsWithRef, ForwardRefExoticComponent } from 'react';
 import { FormElementProps } from '@mirohq/design-system-base-form';
+import * as _mirohq_design_system_base_input from '@mirohq/design-system-base-input';
 import { BaseInputStyledProps, BaseInputProps } from '@mirohq/design-system-base-input';
 import { CSSProperties } from '@stitches/react';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
@@ -10,28 +11,25 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import { PopoverPortalProps } from '@radix-ui/react-popover';
 import * as _ariakit_react from '@ariakit/react';
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
+import * as packages_components_internal_base_input_src_base_input from 'packages/components/internal/base-input/src/base-input';
 
-interface TriggerSharedProps extends Omit<BaseInputStyledProps, 'size'> {
+type InputProps = Omit<BaseInputStyledProps, 'size'> & {
     /**
-     * The content.
-     */
-    children?: react__default.ReactNode;
-    /**
-     * The size of the trigger.
+     * The size of the input.
      * @default 'large'
      */
     size?: BaseInputProps['size'];
     /**
-     * The content that will be rendered inside the Combobox.Trigger when no value or
+     * The content that will be rendered inside the Combobox.Input when no value or
      * defaultValue is set.
      */
     placeholder?: string;
     /**
-     * The label text for Trigger's action button when Combobox is empty and closed. Will be rendered in a Tooltip.
+     * The label text for Input's action button when Combobox is empty and closed. Will be rendered in a Tooltip.
      */
     openActionLabel: string;
     /**
-     * The label text for Trigger's action button when Combobox is empty and open. Will be rendered in a Tooltip.
+     * The label text for Input's action button when Combobox is empty and open. Will be rendered in a Tooltip.
      */
     closeActionLabel: string;
     /**
@@ -39,17 +37,32 @@ interface TriggerSharedProps extends Omit<BaseInputStyledProps, 'size'> {
      * @default true
      */
     clearable?: boolean;
-}
-type TriggerProps = TriggerSharedProps & ({
+} & ({
     clearable: false;
     clearActionLabel?: never;
 } | {
     /**
-     * The label text for Trigger's action button when Combobox has values selected. Will be rendered in a Tooltip.
+     * The label text for Input's action button when Combobox has values selected. Will be rendered in a Tooltip.
      */
     clearActionLabel: string;
 });
-declare const Trigger: react__default.ForwardRefExoticComponent<TriggerProps & react__default.RefAttributes<HTMLInputElement>>;
+declare const Input: react__default.ForwardRefExoticComponent<InputProps & react__default.RefAttributes<HTMLInputElement>>;
+
+interface TriggerPropsWithChildren {
+    /**
+     * Render the trigger as a custom component, passed in as a child
+     */
+    asChild: true;
+    /**
+     * The content that will be rendered inside the Combobox.Trigger instead of the Combobox.Input, when asChild is true
+     */
+    children: react__default.ReactNode;
+}
+type TriggerPropsWithInput = InputProps & {
+    asChild?: never;
+};
+type TriggerProps = TriggerPropsWithChildren | TriggerPropsWithInput;
+declare const Trigger: react__default.ForwardRefExoticComponent<TriggerProps & react__default.RefAttributes<HTMLDivElement>>;
 
 declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixPopover.PopoverContentProps & react.RefAttributes<HTMLDivElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixPopover.PopoverContentProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
 type StyledContentProps = StrictComponentProps<typeof StyledContent>;
@@ -325,6 +338,7 @@ declare const Combobox: ForwardRefExoticComponent<ComboboxProps> & Partials;
 interface Partials {
     Portal: typeof Portal;
     Trigger: typeof Trigger;
+    Input: typeof Input;
     Content: typeof Content;
     Item: typeof Item;
     Group: typeof Group;
@@ -334,4 +348,46 @@ interface Partials {
     NoResult: typeof NoResult;
 }
 
-export { Combobox, ContentProps as ComboboxContentProps, GroupLabelProps as ComboboxGroupLabelProps, GroupProps as ComboboxGroupProps, ItemProps as ComboboxItemProps, NoResultProps as ComboboxNoResultProps, PortalProps as ComboboxPortalProps, ComboboxProps, SeparatorProps as ComboboxSeparatorProps, TriggerProps as ComboboxTriggerProps, types as ComboboxTypes, ValueProps as ComboboxValueProps };
+declare const StyledBaseInput: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_base_input.BaseInputProps> & packages_components_internal_base_input_src_base_input.Partials>, "size"> & _stitches_react_types_styled_component.TransformProps<{
+    size?: "medium" | "large" | "x-large" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_base_input.BaseInputProps> & packages_components_internal_base_input_src_base_input.Partials, {
+    size?: "medium" | "large" | "x-large" | undefined;
+}, {}>;
+type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>;
+
+interface ItemData {
+    displayedText: string;
+    groupId: string | undefined;
+}
+interface ComboboxProviderSharedProps extends FormElementProps {
+    value?: string[] | string;
+    direction?: Direction;
+    autoFilter: boolean;
+}
+interface ComboboxContextProps extends ComboboxProviderSharedProps {
+    setOpenState: react__default.Dispatch<react__default.SetStateAction<boolean | undefined>>;
+    openState: boolean;
+    setValue: react__default.Dispatch<react__default.SetStateAction<string[] | string | undefined>>;
+    triggerRef: react__default.RefObject<HTMLInputElement>;
+    inputRef: react__default.RefObject<HTMLInputElement>;
+    contentRef: react__default.RefObject<HTMLDivElement>;
+    searchValue: string;
+    setSearchValue: react__default.Dispatch<react__default.SetStateAction<string | undefined>>;
+    placeholder?: string;
+    setPlaceholder: react__default.Dispatch<react__default.SetStateAction<string | undefined>>;
+    size: StyledBaseInputProps['size'];
+    setSize: react__default.Dispatch<react__default.SetStateAction<StyledBaseInputProps['size']>>;
+    /**
+     * includes all visible and hidden items to render Chips and get filtered items
+     */
+    itemsMap: Map<string, ItemData>;
+    setItemsMap: react__default.Dispatch<react__default.SetStateAction<Map<string, ItemData>>>;
+    /**
+     * @returns filtered items based on itemsMap
+     * @returns empty array when searchValue is empty or auto filtering is disabled
+     */
+    filteredItems: ItemData[];
+}
+declare const useComboboxContext: () => ComboboxContextProps;
+
+export { Combobox, ContentProps as ComboboxContentProps, GroupLabelProps as ComboboxGroupLabelProps, GroupProps as ComboboxGroupProps, InputProps as ComboboxInputProps, ItemProps as ComboboxItemProps, NoResultProps as ComboboxNoResultProps, PortalProps as ComboboxPortalProps, ComboboxProps, SeparatorProps as ComboboxSeparatorProps, TriggerProps as ComboboxTriggerProps, types as ComboboxTypes, ValueProps as ComboboxValueProps, useComboboxContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-combobox",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",