@mirohq/design-system-combobox 0.1.6 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +35 -28
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +35 -28
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +51 -94
  6. package/package.json +2 -2
package/dist/types.d.ts CHANGED
@@ -1,81 +1,37 @@
1
1
  import * as react from 'react';
2
- import react__default, { ReactNode, FC, ComponentPropsWithRef } from 'react';
3
- import * as packages_components_input_src_types from 'packages/components/input/src/types';
4
- import { InputProps } from '@mirohq/design-system-input';
5
- import * as packages_components_internal_base_button_src_base_button from 'packages/components/internal/base-button/src/base-button';
6
- import * as _mirohq_design_system_hooks_use_press from '@mirohq/design-system-hooks/use-press';
7
- import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
2
+ import react__default, { ComponentPropsWithRef, InputHTMLAttributes, ReactNode, FC } from 'react';
3
+ import { FormElementProps } from '@mirohq/design-system-base-form';
8
4
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
9
- import { StrictComponentProps } from '@mirohq/design-system-stitches';
10
- import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
5
+ import { SafeProps, CSS, StrictComponentProps } from '@mirohq/design-system-stitches';
6
+ import * as packages_components_input_src_input from 'packages/components/input/src/input';
7
+ import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
8
+ import * as packages_components_input_src_types from 'packages/components/input/src/types';
11
9
  import { CSSProperties } from '@stitches/react';
12
10
  import * as RadixPopover from '@radix-ui/react-popover';
13
11
  import { PopoverPortalProps } from '@radix-ui/react-popover';
14
12
  import * as _ariakit_react from '@ariakit/react';
15
13
  import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
16
- import { FormElementProps } from '@mirohq/design-system-base-form';
17
14
 
18
- declare const StyledActionButton: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
19
- children?: react.ReactNode;
20
- }, "readOnlyAppearance" | "disableAppearance"> & _stitches_react_types_styled_component.TransformProps<{
21
- readOnlyAppearance?: boolean | "true" | undefined;
22
- disableAppearance?: boolean | "true" | undefined;
23
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
24
- label: string;
25
- }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
15
+ declare const StyledInput: react.ForwardRefExoticComponent<(Omit<Omit<Omit<packages_components_input_src_types.InputSharedProps & packages_components_input_src_types.ClearProps, _mirohq_design_system_stitches.ForbiddenProps> & {
26
16
  children?: react.ReactNode;
27
17
  }, "size"> & _stitches_react_types_styled_component.TransformProps<{
28
18
  size?: "large" | "x-large" | undefined;
29
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
30
- href: string;
31
- }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
32
- children?: react.ReactNode;
33
- }, "readOnlyAppearance" | "disableAppearance"> & _stitches_react_types_styled_component.TransformProps<{
34
- readOnlyAppearance?: boolean | "true" | undefined;
35
- disableAppearance?: boolean | "true" | undefined;
36
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
37
- label: string;
38
- }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
19
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<packages_components_input_src_types.InputSharedProps & {
20
+ clearable?: undefined;
21
+ }, _mirohq_design_system_stitches.ForbiddenProps> & {
39
22
  children?: react.ReactNode;
40
23
  }, "size"> & _stitches_react_types_styled_component.TransformProps<{
41
24
  size?: "large" | "x-large" | undefined;
42
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
43
- children?: react.ReactNode;
44
- }, "readOnlyAppearance" | "disableAppearance"> & _stitches_react_types_styled_component.TransformProps<{
45
- readOnlyAppearance?: boolean | "true" | undefined;
46
- disableAppearance?: boolean | "true" | undefined;
47
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
48
- label: string;
49
- }, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
50
- href: string;
51
- }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
52
- children?: react.ReactNode;
53
- }, "readOnlyAppearance" | "disableAppearance"> & _stitches_react_types_styled_component.TransformProps<{
54
- readOnlyAppearance?: boolean | "true" | undefined;
55
- disableAppearance?: boolean | "true" | undefined;
56
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
57
- label: string;
58
- }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
25
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLInputElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<packages_components_input_src_types.ClearableInputProps> & packages_components_input_src_input.Partials, {
59
26
  size?: "large" | "x-large" | undefined;
60
27
  }, {}>;
61
- declare type StyledActionButtonProps = StrictComponentProps<typeof StyledActionButton>;
62
28
 
63
- declare type TriggerActionButtonProps = Omit<StyledActionButtonProps, 'label'> & {
64
- /**
65
- * The label text for Trigger's action button when Combobox is empty and closed. Will be rendered in a Tooltip.
66
- */
67
- openActionLabel: string;
68
- /**
69
- * The label text for Trigger's action button when Combobox is empty and open. Will be rendered in a Tooltip.
70
- */
71
- closeActionLabel: string;
72
- /**
73
- * The label text for Trigger's action button when Combobox has values selected. Will be rendered in a Tooltip.
74
- */
75
- clearActionLabel: string;
76
- };
77
-
78
- declare type TriggerProps = InputProps & Pick<TriggerActionButtonProps, 'openActionLabel' | 'closeActionLabel' | 'clearActionLabel'> & {
29
+ declare type InputProps = InputHTMLAttributes<HTMLInputElement>;
30
+ declare type StyledInputProps = Omit<SafeProps<InputProps & {
31
+ css?: CSS;
32
+ }>, 'size'>;
33
+ declare type StyledTriggerProps = ComponentPropsWithRef<typeof StyledInput>;
34
+ declare type TriggerProps = FormElementProps & StyledInputProps & {
79
35
  /**
80
36
  * The content.
81
37
  */
@@ -84,46 +40,34 @@ declare type TriggerProps = InputProps & Pick<TriggerActionButtonProps, 'openAct
84
40
  * The size of the trigger.
85
41
  * @default 'large'
86
42
  */
87
- size?: InputProps['size'];
43
+ size?: StyledTriggerProps['size'];
88
44
  /**
89
45
  * The content that will be rendered inside the Combobox.Trigger when no value or
90
46
  * defaultValue is set.
91
47
  */
92
48
  placeholder?: string;
93
- };
94
- declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<packages_components_input_src_types.InputSharedProps & packages_components_input_src_types.ClearProps & Pick<TriggerActionButtonProps, "openActionLabel" | "closeActionLabel" | "clearActionLabel"> & {
95
- /**
96
- * The content.
97
- */
98
- children?: react__default.ReactNode;
99
- /**
100
- * The size of the trigger.
101
- * @default 'large'
102
- */
103
- size?: InputProps['size'];
104
49
  /**
105
- * The content that will be rendered inside the Combobox.Trigger when no value or
106
- * defaultValue is set.
50
+ * The label text for Trigger's action button when Combobox is empty and closed. Will be rendered in a Tooltip.
107
51
  */
108
- placeholder?: string | undefined;
109
- }, "ref"> | Omit<packages_components_input_src_types.InputSharedProps & {
110
- clearable?: undefined;
111
- } & Pick<TriggerActionButtonProps, "openActionLabel" | "closeActionLabel" | "clearActionLabel"> & {
52
+ openActionLabel: string;
112
53
  /**
113
- * The content.
54
+ * The label text for Trigger's action button when Combobox is empty and open. Will be rendered in a Tooltip.
114
55
  */
115
- children?: react__default.ReactNode;
56
+ closeActionLabel: string;
116
57
  /**
117
- * The size of the trigger.
118
- * @default 'large'
58
+ * Show a button to clear the Combobox value.
119
59
  */
120
- size?: InputProps['size'];
60
+ clearable?: boolean;
61
+ } & ({
62
+ clearable: false;
63
+ clearActionLabel?: never;
64
+ } | {
121
65
  /**
122
- * The content that will be rendered inside the Combobox.Trigger when no value or
123
- * defaultValue is set.
66
+ * The label text for Trigger's action button when Combobox has values selected. Will be rendered in a Tooltip.
124
67
  */
125
- placeholder?: string | undefined;
126
- }, "ref">) & react__default.RefAttributes<HTMLInputElement>>;
68
+ clearActionLabel: string;
69
+ });
70
+ declare const Trigger: react__default.ForwardRefExoticComponent<TriggerProps & react__default.RefAttributes<HTMLInputElement>>;
127
71
 
128
72
  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>>, {}, {}>;
129
73
  declare type StyledContentProps = StrictComponentProps<typeof StyledContent>;
@@ -317,13 +261,24 @@ interface ComboboxProps$1 extends FormElementProps {
317
261
  value?: string[];
318
262
  defaultValue?: string[];
319
263
  onValueChange?: (value: string[]) => void;
264
+ searchValue?: string;
320
265
  onSearchValueChange?: (value: string) => void;
321
266
  direction?: Direction;
322
267
  autoFilter?: boolean;
323
- noResultsText?: ReactNode;
324
268
  }
325
269
  declare type ComboboxProviderProps = ComboboxProps$1;
326
270
 
271
+ 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">>, {}, {}>;
272
+ declare type StyledNoResultProps = StrictComponentProps<typeof StyledNoResult>;
273
+
274
+ interface NoResultProps extends StyledNoResultProps {
275
+ /**
276
+ * The content.
277
+ */
278
+ children?: ReactNode;
279
+ }
280
+ declare const NoResult: react__default.ForwardRefExoticComponent<Omit<NoResultProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
281
+
327
282
  interface ComboboxProps extends ComboboxProviderProps, StyledComboboxProps {
328
283
  /**
329
284
  * The value of the combobox when initially rendered. Use when you do not need
@@ -339,6 +294,11 @@ interface ComboboxProps extends ComboboxProviderProps, StyledComboboxProps {
339
294
  * Event handler called when the value changes.
340
295
  */
341
296
  onValueChange?: (value: string[]) => void;
297
+ /**
298
+ * The controlled search value to filter items. Should be used in conjunction with
299
+ * onSearchValueChange.
300
+ */
301
+ searchValue?: string;
342
302
  /**
343
303
  * Event handler called when the trigger input value changes.
344
304
  */
@@ -378,10 +338,6 @@ interface ComboboxProps extends ComboboxProviderProps, StyledComboboxProps {
378
338
  * @default true
379
339
  */
380
340
  autoFilter?: boolean;
381
- /**
382
- * Text that is displayed when there are no items to display.
383
- */
384
- noResultsText: ReactNode;
385
341
  /**
386
342
  * The name of the combobox. Submitted with its owning form as part of a
387
343
  * name/value pair.
@@ -398,6 +354,7 @@ interface Partials {
398
354
  GroupLabel: typeof GroupLabel;
399
355
  Value: typeof Value;
400
356
  Separator: typeof Separator;
357
+ NoResult: typeof NoResult;
401
358
  }
402
359
 
403
- export { Combobox, ContentProps as ComboboxContentProps, GroupLabelProps as ComboboxGroupLabelProps, GroupProps as ComboboxGroupProps, ItemProps as ComboboxItemProps, PortalProps as ComboboxPortalProps, ComboboxProps, SeparatorProps as ComboboxSeparatorProps, TriggerProps as ComboboxTriggerProps, types as ComboboxTypes, ValueProps as ComboboxValueProps };
360
+ 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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-combobox",
3
- "version": "0.1.6",
3
+ "version": "0.3.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -31,9 +31,9 @@
31
31
  "@radix-ui/react-popover": "^1.0.7",
32
32
  "@radix-ui/react-use-controllable-state": "1.0.1",
33
33
  "@react-aria/utils": "^3.13.0",
34
+ "@mirohq/design-system-base-button": "^0.4.47",
34
35
  "@mirohq/design-system-base-form": "^0.2.15",
35
36
  "@mirohq/design-system-base-select": "^0.1.1",
36
- "@mirohq/design-system-base-button": "^0.4.47",
37
37
  "@mirohq/design-system-form": "^0.1.18",
38
38
  "@mirohq/design-system-icons": "^0.44.0",
39
39
  "@mirohq/design-system-input": "^0.2.7",