@ssa-ui-kit/core 1.0.2 → 1.0.4

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 (66) hide show
  1. package/dist/components/Button/fixtures.d.ts +8 -0
  2. package/dist/components/Button/types.d.ts +2 -0
  3. package/dist/components/FormHelperText/FormHelperText.d.ts +1 -1
  4. package/dist/components/ImageItem/ImageItem.d.ts +2 -0
  5. package/dist/components/ImageItem/index.d.ts +1 -0
  6. package/dist/components/ImageItem/types.d.ts +8 -0
  7. package/dist/components/Input/types.d.ts +1 -0
  8. package/dist/components/Label/Label.d.ts +1 -1
  9. package/dist/components/Label/LabelBase.d.ts +2 -0
  10. package/dist/components/Label/types.d.ts +1 -0
  11. package/dist/components/Typeahead/Typeahead.context.d.ts +36 -0
  12. package/dist/components/Typeahead/Typeahead.d.ts +11 -0
  13. package/dist/components/Typeahead/components/MultipleTrigger.d.ts +1 -0
  14. package/dist/components/Typeahead/components/NoOptions.d.ts +1 -0
  15. package/dist/components/Typeahead/components/SingleTrigger.d.ts +1 -0
  16. package/dist/components/Typeahead/components/TypeaheadItem.d.ts +8 -0
  17. package/dist/components/Typeahead/components/TypeaheadOption.d.ts +2 -0
  18. package/dist/components/Typeahead/components/TypeaheadOptions.d.ts +2 -0
  19. package/dist/components/Typeahead/components/TypeaheadTrigger.d.ts +1 -0
  20. package/dist/components/Typeahead/components/index.d.ts +7 -0
  21. package/dist/components/Typeahead/index.d.ts +5 -0
  22. package/dist/components/Typeahead/styles.d.ts +47 -0
  23. package/dist/components/Typeahead/types.d.ts +46 -0
  24. package/dist/components/Typeahead/useTypeahead.d.ts +36 -0
  25. package/dist/components/Typeahead/utils.d.ts +1 -0
  26. package/dist/components/index.d.ts +2 -0
  27. package/dist/index.js +1 -1
  28. package/dist/index.js.map +1 -1
  29. package/dist/types/emotion.d.ts +4 -1
  30. package/package.json +3 -3
  31. package/src/components/Badge/Badge.stories.tsx +1 -1
  32. package/src/components/Button/Button.tsx +10 -2
  33. package/src/components/Button/types.ts +2 -0
  34. package/src/components/FormHelperText/FormHelperText.tsx +2 -1
  35. package/src/components/ImageItem/ImageItem.spec.tsx +54 -0
  36. package/src/components/ImageItem/ImageItem.stories.tsx +33 -0
  37. package/src/components/ImageItem/ImageItem.tsx +43 -0
  38. package/src/components/ImageItem/index.ts +1 -0
  39. package/src/components/ImageItem/types.ts +7 -0
  40. package/src/components/Input/Input.spec.tsx +6 -8
  41. package/src/components/Input/Input.tsx +14 -8
  42. package/src/components/Input/types.ts +1 -0
  43. package/src/components/Label/Label.tsx +2 -0
  44. package/src/components/Label/LabelBase.tsx +3 -2
  45. package/src/components/Label/types.ts +1 -0
  46. package/src/components/Typeahead/Typeahead.context.ts +59 -0
  47. package/src/components/Typeahead/Typeahead.spec.tsx +506 -0
  48. package/src/components/Typeahead/Typeahead.stories.tsx +372 -0
  49. package/src/components/Typeahead/Typeahead.tsx +120 -0
  50. package/src/components/Typeahead/components/MultipleTrigger.tsx +116 -0
  51. package/src/components/Typeahead/components/NoOptions.tsx +7 -0
  52. package/src/components/Typeahead/components/SingleTrigger.tsx +71 -0
  53. package/src/components/Typeahead/components/TypeaheadItem.ts +14 -0
  54. package/src/components/Typeahead/components/TypeaheadOption.tsx +12 -0
  55. package/src/components/Typeahead/components/TypeaheadOptions.tsx +25 -0
  56. package/src/components/Typeahead/components/TypeaheadTrigger.tsx +26 -0
  57. package/src/components/Typeahead/components/index.ts +7 -0
  58. package/src/components/Typeahead/index.ts +5 -0
  59. package/src/components/Typeahead/styles.ts +193 -0
  60. package/src/components/Typeahead/types.ts +77 -0
  61. package/src/components/Typeahead/useTypeahead.tsx +321 -0
  62. package/src/components/Typeahead/utils.tsx +22 -0
  63. package/src/components/index.ts +2 -0
  64. package/src/themes/main.ts +3 -0
  65. package/src/types/emotion.ts +3 -0
  66. package/tsbuildcache +1 -1
@@ -22,6 +22,8 @@ export declare const secondaryBtnSpecs: {
22
22
  onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
23
23
  type?: "button" | "submit" | "reset" | undefined;
24
24
  block?: boolean | undefined;
25
+ startIconClassName?: string | undefined;
26
+ endIconClassName?: string | undefined;
25
27
  disabled?: boolean | undefined;
26
28
  startIcon?: "search" | "visible" | "calendar" | "diet" | "home" | "measurements" | "settings" | "sleep" | "stats" | "trainings" | "plus" | "minus" | "cross" | "check" | "check-circle" | "more" | "more-vertical" | "notification" | "user" | "union" | "invisible" | "log-in" | "log-out" | "email" | "lock" | "information" | "warning" | "attention" | "carrot-down" | "carrot-up" | "carrot-left" | "carrot-right" | "radio-on" | "circle" | "arrow-up" | "arrow-down" | "filter" | "archive" | "unarchive" | "bin" | "change" | "copy" | "robot" | "chart" | "clock" | "cogwheel" | "circular" | "ban-user" | "confirm-email" | "unlock" | "edit" | "import" | "pages" | "roles" | undefined;
27
29
  endIcon?: "search" | "visible" | "calendar" | "diet" | "home" | "measurements" | "settings" | "sleep" | "stats" | "trainings" | "plus" | "minus" | "cross" | "check" | "check-circle" | "more" | "more-vertical" | "notification" | "user" | "union" | "invisible" | "log-in" | "log-out" | "email" | "lock" | "information" | "warning" | "attention" | "carrot-down" | "carrot-up" | "carrot-left" | "carrot-right" | "radio-on" | "circle" | "arrow-up" | "arrow-down" | "filter" | "archive" | "unarchive" | "bin" | "change" | "copy" | "robot" | "chart" | "clock" | "cogwheel" | "circular" | "ban-user" | "confirm-email" | "unlock" | "edit" | "import" | "pages" | "roles" | undefined;
@@ -41,6 +43,8 @@ export declare const tertiaryBtnSpecs: {
41
43
  onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
42
44
  type?: "button" | "submit" | "reset" | undefined;
43
45
  block?: boolean | undefined;
46
+ startIconClassName?: string | undefined;
47
+ endIconClassName?: string | undefined;
44
48
  disabled?: boolean | undefined;
45
49
  startIcon?: "search" | "visible" | "calendar" | "diet" | "home" | "measurements" | "settings" | "sleep" | "stats" | "trainings" | "plus" | "minus" | "cross" | "check" | "check-circle" | "more" | "more-vertical" | "notification" | "user" | "union" | "invisible" | "log-in" | "log-out" | "email" | "lock" | "information" | "warning" | "attention" | "carrot-down" | "carrot-up" | "carrot-left" | "carrot-right" | "radio-on" | "circle" | "arrow-up" | "arrow-down" | "filter" | "archive" | "unarchive" | "bin" | "change" | "copy" | "robot" | "chart" | "clock" | "cogwheel" | "circular" | "ban-user" | "confirm-email" | "unlock" | "edit" | "import" | "pages" | "roles" | undefined;
46
50
  endIcon?: "search" | "visible" | "calendar" | "diet" | "home" | "measurements" | "settings" | "sleep" | "stats" | "trainings" | "plus" | "minus" | "cross" | "check" | "check-circle" | "more" | "more-vertical" | "notification" | "user" | "union" | "invisible" | "log-in" | "log-out" | "email" | "lock" | "information" | "warning" | "attention" | "carrot-down" | "carrot-up" | "carrot-left" | "carrot-right" | "radio-on" | "circle" | "arrow-up" | "arrow-down" | "filter" | "archive" | "unarchive" | "bin" | "change" | "copy" | "robot" | "chart" | "clock" | "cogwheel" | "circular" | "ban-user" | "confirm-email" | "unlock" | "edit" | "import" | "pages" | "roles" | undefined;
@@ -60,6 +64,8 @@ export declare const infoBtnSpecs: {
60
64
  onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
61
65
  type?: "button" | "submit" | "reset" | undefined;
62
66
  block?: boolean | undefined;
67
+ startIconClassName?: string | undefined;
68
+ endIconClassName?: string | undefined;
63
69
  disabled?: boolean | undefined;
64
70
  startIcon?: "search" | "visible" | "calendar" | "diet" | "home" | "measurements" | "settings" | "sleep" | "stats" | "trainings" | "plus" | "minus" | "cross" | "check" | "check-circle" | "more" | "more-vertical" | "notification" | "user" | "union" | "invisible" | "log-in" | "log-out" | "email" | "lock" | "information" | "warning" | "attention" | "carrot-down" | "carrot-up" | "carrot-left" | "carrot-right" | "radio-on" | "circle" | "arrow-up" | "arrow-down" | "filter" | "archive" | "unarchive" | "bin" | "change" | "copy" | "robot" | "chart" | "clock" | "cogwheel" | "circular" | "ban-user" | "confirm-email" | "unlock" | "edit" | "import" | "pages" | "roles" | undefined;
65
71
  endIcon?: "search" | "visible" | "calendar" | "diet" | "home" | "measurements" | "settings" | "sleep" | "stats" | "trainings" | "plus" | "minus" | "cross" | "check" | "check-circle" | "more" | "more-vertical" | "notification" | "user" | "union" | "invisible" | "log-in" | "log-out" | "email" | "lock" | "information" | "warning" | "attention" | "carrot-down" | "carrot-up" | "carrot-left" | "carrot-right" | "radio-on" | "circle" | "arrow-up" | "arrow-down" | "filter" | "archive" | "unarchive" | "bin" | "change" | "copy" | "robot" | "chart" | "clock" | "cogwheel" | "circular" | "ban-user" | "confirm-email" | "unlock" | "edit" | "import" | "pages" | "roles" | undefined;
@@ -79,6 +85,8 @@ export declare const attentionBtnSpecs: {
79
85
  onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
80
86
  type?: "button" | "submit" | "reset" | undefined;
81
87
  block?: boolean | undefined;
88
+ startIconClassName?: string | undefined;
89
+ endIconClassName?: string | undefined;
82
90
  disabled?: boolean | undefined;
83
91
  startIcon?: "search" | "visible" | "calendar" | "diet" | "home" | "measurements" | "settings" | "sleep" | "stats" | "trainings" | "plus" | "minus" | "cross" | "check" | "check-circle" | "more" | "more-vertical" | "notification" | "user" | "union" | "invisible" | "log-in" | "log-out" | "email" | "lock" | "information" | "warning" | "attention" | "carrot-down" | "carrot-up" | "carrot-left" | "carrot-right" | "radio-on" | "circle" | "arrow-up" | "arrow-down" | "filter" | "archive" | "unarchive" | "bin" | "change" | "copy" | "robot" | "chart" | "clock" | "cogwheel" | "circular" | "ban-user" | "confirm-email" | "unlock" | "edit" | "import" | "pages" | "roles" | undefined;
84
92
  endIcon?: "search" | "visible" | "calendar" | "diet" | "home" | "measurements" | "settings" | "sleep" | "stats" | "trainings" | "plus" | "minus" | "cross" | "check" | "check-circle" | "more" | "more-vertical" | "notification" | "user" | "union" | "invisible" | "log-in" | "log-out" | "email" | "lock" | "information" | "warning" | "attention" | "carrot-down" | "carrot-up" | "carrot-left" | "carrot-right" | "radio-on" | "circle" | "arrow-up" | "arrow-down" | "filter" | "archive" | "unarchive" | "bin" | "change" | "copy" | "robot" | "chart" | "clock" | "cogwheel" | "circular" | "ban-user" | "confirm-email" | "unlock" | "edit" | "import" | "pages" | "roles" | undefined;
@@ -11,6 +11,8 @@ export interface ButtonProps extends ButtonAriaProps {
11
11
  text?: string;
12
12
  startIcon?: React.ReactNode;
13
13
  endIcon?: React.ReactNode;
14
+ startIconClassName?: string;
15
+ endIconClassName?: string;
14
16
  variant?: keyof ButtonVariants | 'custom';
15
17
  type?: 'button' | 'reset' | 'submit';
16
18
  isDisabled?: boolean;
@@ -1,3 +1,3 @@
1
1
  import { FormHelperTextProps } from './types';
2
- declare const FormHelperText: ({ role, status, disabled, children, }: FormHelperTextProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
2
+ declare const FormHelperText: ({ role, status, disabled, children, ...rest }: FormHelperTextProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
3
3
  export default FormHelperText;
@@ -0,0 +1,2 @@
1
+ import { ImageItemProps } from './types';
2
+ export declare const ImageItem: ({ children, image, avatarSize, link, openLinkInNewTab, className, }: ImageItemProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -0,0 +1 @@
1
+ export * from './ImageItem';
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export type ImageItemProps = React.PropsWithChildren<{
3
+ image: string;
4
+ avatarSize?: number;
5
+ link?: string;
6
+ className?: string;
7
+ openLinkInNewTab?: boolean;
8
+ }>;
@@ -12,6 +12,7 @@ export interface InputProps extends Partial<Pick<UseFormReturn, 'register' | 'co
12
12
  validationSchema?: Record<string, unknown>;
13
13
  disabled?: boolean;
14
14
  className?: string;
15
+ wrapperClassName?: string;
15
16
  as?: React.ElementType;
16
17
  startElement?: React.ReactElement;
17
18
  endElement?: React.ReactElement;
@@ -1,3 +1,3 @@
1
1
  import { LabelProps } from './types';
2
- declare const Label: ({ children, htmlFor, className, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
2
+ declare const Label: ({ children, htmlFor, className, isDisabled, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
3
3
  export default Label;
@@ -2,4 +2,6 @@
2
2
  export declare const LabelBase: import("@emotion/styled").StyledComponent<{
3
3
  theme?: import("@emotion/react").Theme | undefined;
4
4
  as?: import("react").ElementType<any> | undefined;
5
+ } & {
6
+ isDisabled?: boolean | undefined;
5
7
  }, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
@@ -3,6 +3,7 @@ import { CommonProps } from '../../types/emotion';
3
3
  export interface LabelProps extends CommonProps {
4
4
  htmlFor?: string;
5
5
  children: React.ReactNode;
6
+ isDisabled?: boolean;
6
7
  onMouseEnter?: MouseEventHandler<HTMLLabelElement>;
7
8
  onMouseLeave?: MouseEventHandler<HTMLLabelElement>;
8
9
  }
@@ -0,0 +1,36 @@
1
+ import * as React from 'react';
2
+ import { UseTypeaheadResult } from './useTypeahead';
3
+ export declare const TypeaheadContext: React.Context<{
4
+ isOpen: boolean;
5
+ isDisabled: boolean | undefined;
6
+ optionsWithKey: Record<string | number, Record<string, string | number>>;
7
+ selectedItems: (string | number)[];
8
+ inputRef: React.RefObject<HTMLInputElement>;
9
+ firstSuggestion: string;
10
+ isMultiple: boolean | undefined;
11
+ typeaheadId: string;
12
+ triggerRef: React.MutableRefObject<HTMLDivElement | null>;
13
+ className: string | undefined;
14
+ startIcon: React.ReactNode;
15
+ endIcon: React.ReactNode;
16
+ startIconClassName: string | undefined;
17
+ endIconClassName: string | undefined;
18
+ name: string;
19
+ inputName: string;
20
+ inputValue: string;
21
+ validationSchema: Record<string, unknown> | undefined;
22
+ status: "error" | "basic" | "success";
23
+ placeholder: string | null | undefined;
24
+ options: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
25
+ register: import("react-hook-form").UseFormRegister<import("react-hook-form").FieldValues> | undefined;
26
+ setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues> | undefined;
27
+ handleChange: (changingValue?: string | number | undefined) => void;
28
+ handleClearAll: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
29
+ handleOpenChange: (open: boolean) => void;
30
+ handleInputChange: React.ChangeEventHandler<HTMLInputElement>;
31
+ handleInputClick: React.MouseEventHandler<HTMLInputElement>;
32
+ handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
33
+ handleSelectedClick: React.MouseEventHandler<HTMLDivElement>;
34
+ handleRemoveSelectedClick: (selectedItem: string | number) => React.MouseEventHandler<HTMLButtonElement>;
35
+ }>;
36
+ export declare const useTypeaheadContext: () => UseTypeaheadResult;
@@ -0,0 +1,11 @@
1
+ import { TypeaheadProps } from './types';
2
+ /**
3
+ * The structure of the component:
4
+ * - TypeaheadTrigger
5
+ * - TypeaheadOptions
6
+ * - FormHelperText
7
+ *
8
+ * Aria attributes are set according to
9
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
10
+ **/
11
+ export declare const Typeahead: ({ name, label, initialSelectedItems, isOpen, isDisabled, isMultiple, children, className, startIcon, endIcon, errors, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, optionsClassName, setValue, register, onChange, renderOption, }: TypeaheadProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -0,0 +1 @@
1
+ export declare const MultipleTrigger: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -0,0 +1 @@
1
+ export declare const NoOptions: ({ children, ...rest }: React.PropsWithChildren) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -0,0 +1 @@
1
+ export declare const SingleTrigger: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export declare const TypeaheadItemImage: import("@emotion/styled").StyledComponent<{
3
+ theme?: import("@emotion/react").Theme | undefined;
4
+ as?: import("react").ElementType<any> | undefined;
5
+ }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
6
+ export declare const TypeaheadItemIcon: import("@emotion/styled").StyledComponent<import("../..").IconProps & {
7
+ theme?: import("@emotion/react").Theme | undefined;
8
+ }, {}, {}>;
@@ -0,0 +1,2 @@
1
+ import { TypeaheadItemProps } from '../types';
2
+ export declare const TypeaheadOption: ({ children, ...rest }: TypeaheadItemProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -0,0 +1,2 @@
1
+ import { TypeaheadItemsListProps } from '../types';
2
+ export declare const TypeaheadOptions: ({ noItemsMessage, children, }: TypeaheadItemsListProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -0,0 +1 @@
1
+ export declare const TypeaheadTrigger: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
@@ -0,0 +1,7 @@
1
+ export * from './MultipleTrigger';
2
+ export * from './SingleTrigger';
3
+ export * from './TypeaheadTrigger';
4
+ export * from './TypeaheadItem';
5
+ export * from './TypeaheadOptions';
6
+ export * from './TypeaheadOption';
7
+ export * from './NoOptions';
@@ -0,0 +1,5 @@
1
+ export * from './Typeahead';
2
+ export * from './components/TypeaheadOptions';
3
+ export * from './components/TypeaheadOption';
4
+ export * from './components/TypeaheadItem';
5
+ export * from './utils';
@@ -0,0 +1,47 @@
1
+ /// <reference types="react" />
2
+ import { useTypeahead } from './useTypeahead';
3
+ import { TypeaheadItemProps } from './types';
4
+ export declare const TypeaheadOptionsBase: import("@emotion/styled").StyledComponent<{
5
+ theme?: import("@emotion/react").Theme | undefined;
6
+ as?: import("react").ElementType<any> | undefined;
7
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
8
+ export declare const TypeaheadOption: import("@emotion/styled").StyledComponent<{
9
+ theme?: import("@emotion/react").Theme | undefined;
10
+ as?: import("react").ElementType<any> | undefined;
11
+ } & TypeaheadItemProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
12
+ export declare const TypeaheadInput: string;
13
+ export declare const TypeaheadInputPlaceholder: string;
14
+ export declare const TypeaheadInputWrapper: string;
15
+ export declare const TypeaheadItem: import("@emotion/styled").StyledComponent<{
16
+ theme?: import("@emotion/react").Theme | undefined;
17
+ as?: import("react").ElementType<any> | undefined;
18
+ } & {
19
+ isDisabled?: boolean | undefined;
20
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
21
+ export declare const TypeaheadItemLabel: import("@emotion/styled").StyledComponent<{
22
+ theme?: import("@emotion/react").Theme | undefined;
23
+ as?: import("react").ElementType<any> | undefined;
24
+ } & {
25
+ isDisabled?: boolean | undefined;
26
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
27
+ export declare const TypeaheadItemCross: import("@emotion/styled").StyledComponent<import("../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
28
+ theme?: import("@emotion/react").Theme | undefined;
29
+ }, {}, {}>;
30
+ export declare const TypeaheadInputsGroupWrapper: import("@emotion/styled").StyledComponent<{
31
+ theme?: import("@emotion/react").Theme | undefined;
32
+ as?: import("react").ElementType<any> | undefined;
33
+ } & {
34
+ avatarSize?: number | undefined;
35
+ direction?: string | undefined;
36
+ alignItems?: string | undefined;
37
+ } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
38
+ theme?: import("@emotion/react").Theme | undefined;
39
+ } & {
40
+ isOpen: boolean;
41
+ }, {}, {}>;
42
+ export declare const TypeaheadTrigger: import("@emotion/styled").StyledComponent<Omit<import("react").HTMLProps<HTMLElement> & import("../Button/types").ButtonProps & import("../Popover/types").PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
43
+ theme?: import("@emotion/react").Theme | undefined;
44
+ } & {
45
+ isOpen: boolean;
46
+ status: ReturnType<typeof useTypeahead>['status'];
47
+ }, {}, {}>;
@@ -0,0 +1,46 @@
1
+ /// <reference types="react" />
2
+ import { CommonProps } from '../../types/emotion';
3
+ import { FieldError, FieldValues, UseFormReturn, UseFormSetValue } from 'react-hook-form';
4
+ export type TypeaheadValue = string | number;
5
+ export type TypeaheadOptionProps = Record<string, TypeaheadValue>;
6
+ export interface TypeaheadProps {
7
+ initialSelectedItems?: Array<TypeaheadValue>;
8
+ isMultiple?: boolean;
9
+ isDisabled?: boolean;
10
+ children?: React.ReactNode;
11
+ className?: string;
12
+ optionsClassName?: string;
13
+ isOpen?: boolean;
14
+ startIcon?: React.ReactNode;
15
+ endIcon?: React.ReactNode;
16
+ startIconClassName?: string;
17
+ endIconClassName?: string;
18
+ name?: string;
19
+ label?: string;
20
+ helperText?: string;
21
+ errors?: FieldError;
22
+ success?: boolean;
23
+ validationSchema?: Record<string, unknown>;
24
+ placeholder?: string | null;
25
+ setValue?: UseFormSetValue<FieldValues>;
26
+ register?: UseFormReturn['register'];
27
+ onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void;
28
+ renderOption?: (data: {
29
+ value: string | number;
30
+ input: string;
31
+ label: string;
32
+ }) => React.ReactNode;
33
+ }
34
+ export type UseTypeaheadProps = Pick<TypeaheadProps, 'initialSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'onChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'register' | 'setValue' | 'validationSchema' | 'errors' | 'success' | 'placeholder'>;
35
+ export interface TypeaheadItemsListProps extends CommonProps {
36
+ children?: React.ReactNode;
37
+ noItemsMessage?: string;
38
+ }
39
+ export interface TypeaheadItemProps extends CommonProps {
40
+ isActive?: boolean;
41
+ isDisabled?: boolean;
42
+ value?: string | number;
43
+ label?: string | number;
44
+ children?: React.ReactNode;
45
+ onClick?: (e: React.MouseEvent<HTMLElement>) => void;
46
+ }
@@ -0,0 +1,36 @@
1
+ import React, { MouseEventHandler } from 'react';
2
+ import { UseTypeaheadProps } from './types';
3
+ export declare const useTypeahead: ({ name, isOpen: isInitOpen, initialSelectedItems, isDisabled, isMultiple, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, errors, success, placeholder, register, setValue, onChange, renderOption, }: UseTypeaheadProps) => {
4
+ isOpen: boolean;
5
+ isDisabled: boolean | undefined;
6
+ optionsWithKey: Record<string | number, Record<string, string | number>>;
7
+ selectedItems: (string | number)[];
8
+ inputRef: React.RefObject<HTMLInputElement>;
9
+ firstSuggestion: string;
10
+ isMultiple: boolean | undefined;
11
+ typeaheadId: string;
12
+ triggerRef: React.MutableRefObject<HTMLDivElement | null>;
13
+ className: string | undefined;
14
+ startIcon: React.ReactNode;
15
+ endIcon: React.ReactNode;
16
+ startIconClassName: string | undefined;
17
+ endIconClassName: string | undefined;
18
+ name: string;
19
+ inputName: string;
20
+ inputValue: string;
21
+ validationSchema: Record<string, unknown> | undefined;
22
+ status: "error" | "basic" | "success";
23
+ placeholder: string | null | undefined;
24
+ options: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
25
+ register: import("react-hook-form").UseFormRegister<import("react-hook-form").FieldValues> | undefined;
26
+ setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues> | undefined;
27
+ handleChange: (changingValue?: string | number) => void;
28
+ handleClearAll: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
29
+ handleOpenChange: (open: boolean) => void;
30
+ handleInputChange: React.ChangeEventHandler<HTMLInputElement>;
31
+ handleInputClick: React.MouseEventHandler<HTMLInputElement>;
32
+ handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
33
+ handleSelectedClick: React.MouseEventHandler<HTMLDivElement>;
34
+ handleRemoveSelectedClick: (selectedItem: number | string) => MouseEventHandler<HTMLButtonElement>;
35
+ };
36
+ export type UseTypeaheadResult = ReturnType<typeof useTypeahead>;
@@ -0,0 +1 @@
1
+ export declare const highlightInputMatch: (item: string | undefined, keyword: string) => string | import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | undefined;
@@ -100,3 +100,5 @@ export * from './PieChart';
100
100
  export * from './CollapsibleNavBar';
101
101
  export * from './Filters';
102
102
  export * from './TableFilters';
103
+ export * from './Typeahead';
104
+ export * from './ImageItem';