@mirohq/design-system-combobox 1.1.0-stop-using-strict-component-props.0 → 1.1.0

package/dist/types.d.ts

@@ -1,36 +1,35 @@
 import * as react from 'react';
-import react__default, { ComponentPropsWithRef, ReactNode, FC, ForwardRefExoticComponent } 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';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import { StrictComponentProps } from '@mirohq/design-system-stitches';
 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;
     /**
@@ -38,20 +37,35 @@ 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 = ComponentPropsWithRef<typeof StyledContent>;
+type StyledContentProps = StrictComponentProps<typeof StyledContent>;
 
 type PointerDownOutsideEvent = CustomEvent<{
     originalEvent: PointerEvent;
@@ -170,7 +184,7 @@ interface ContentProps extends StyledContentProps {
 declare const Content: react__default.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
 declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<(props: _ariakit_react.ComboboxItemProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<(props: _ariakit_react.ComboboxItemProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>, {}, {}>;
-type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>;
+type StyledItemProps = StrictComponentProps<typeof StyledItem>;
 
 interface ItemProps extends StyledItemProps {
     /**
@@ -204,15 +218,13 @@ interface PortalProps extends PopoverPortalProps {
 declare const Portal: ({ forceMount: forceMountProp, ...restProps }: PortalProps) => react__default.ReactNode;
 
 declare const StyledGroup: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<(props: _ariakit_react.GroupProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<(props: _ariakit_react.GroupProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>, {}, {}>;
-type StyledGroupProps = ComponentPropsWithRef<typeof StyledGroup>;
+type StyledGroupProps = StrictComponentProps<typeof StyledGroup>;
 
 type GroupProps = StyledGroupProps;
-declare const Group: react__default.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<(props: _ariakit_react.GroupProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+declare const Group: react__default.ForwardRefExoticComponent<Omit<StyledGroupProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
 declare const StyledGroupLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<(props: _ariakit_react.GroupLabelProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<(props: _ariakit_react.GroupLabelProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>, {}, {}>;
-type StyledGroupLabelProps = ComponentPropsWithRef<typeof StyledGroupLabel>;
+type StyledGroupLabelProps = StrictComponentProps<typeof StyledGroupLabel>;
 
 interface GroupLabelProps extends StyledGroupLabelProps {
 }
@@ -232,7 +244,7 @@ interface ValueProps {
 declare const Value: FC<ValueProps>;
 
 declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
-type StyledSeparatorProps = ComponentPropsWithRef<typeof StyledSeparator>;
+type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>;
 
 interface SeparatorProps extends StyledSeparatorProps {
 }
@@ -242,7 +254,7 @@ declare const StyledComboboxContent: react.ForwardRefExoticComponent<Omit<Omit<_
 type StyledComboboxProps = ComponentPropsWithRef<typeof StyledComboboxContent>;
 
 declare const StyledNoResult: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
-type StyledNoResultProps = ComponentPropsWithRef<typeof StyledNoResult>;
+type StyledNoResultProps = StrictComponentProps<typeof StyledNoResult>;
 
 interface NoResultProps extends StyledNoResultProps {
     /**
@@ -326,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;
@@ -335,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.1.0-stop-using-strict-component-props.0",
+  "version": "1.1.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -32,19 +32,19 @@
     "@radix-ui/react-use-controllable-state": "1.0.1",
     "@react-aria/utils": "^3.13.0",
     "@mirohq/design-system-base-form": "^1.0.0",
-    "@mirohq/design-system-base-input": "^1.0.1-stop-using-strict-component-props.0",
+    "@mirohq/design-system-base-input": "^1.0.0",
     "@mirohq/design-system-base-select": "^1.0.0",
-    "@mirohq/design-system-chip": "^1.1.0-stop-using-strict-component-props.0",
     "@mirohq/design-system-base-tooltip": "^1.0.0",
-    "@mirohq/design-system-icons": "^1.5.0",
-    "@mirohq/design-system-use-aria-disabled": "^1.0.0",
+    "@mirohq/design-system-chip": "^1.0.9",
+    "@mirohq/design-system-icons": "^1.6.2",
     "@mirohq/design-system-primitive": "^2.0.0",
-    "@mirohq/design-system-scroll-area": "^1.1.0-stop-using-strict-component-props.0",
+    "@mirohq/design-system-scroll-area": "^1.0.0",
+    "@mirohq/design-system-stitches": "^3.0.0",
+    "@mirohq/design-system-use-aria-disabled": "^1.0.0",
     "@mirohq/design-system-use-id": "^1.0.0",
     "@mirohq/design-system-use-layout-effect": "^1.0.0",
-    "@mirohq/design-system-utils": "^1.0.0",
-    "@mirohq/design-system-stitches": "^3.0.0",
-    "@mirohq/design-system-use-previous": "^1.0.0"
+    "@mirohq/design-system-use-previous": "^1.0.0",
+    "@mirohq/design-system-utils": "^1.0.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",