@ssa-ui-kit/core 1.0.1 → 1.0.3

package/.storybook/style.css

@@ -29,3 +29,12 @@ p {
 .language-jsx span {
   color: white;
 }
+
+#storybook-docs .sbdocs-preview,
+#storybook-docs .docs-story {
+  overflow: visible;
+}
+
+#storybook-docs .docs-story > div:first-of-type {
+  overflow: visible;
+}

package/dist/components/Button/fixtures.d.ts

@@ -22,6 +22,8 @@ export declare const secondaryBtnSpecs: {
     onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     block?: boolean | undefined;
+    startIconClassName?: string | undefined;
+    endIconClassName?: string | undefined;
     disabled?: boolean | undefined;
     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;
     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: {
     onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     block?: boolean | undefined;
+    startIconClassName?: string | undefined;
+    endIconClassName?: string | undefined;
     disabled?: boolean | undefined;
     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;
     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: {
     onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     block?: boolean | undefined;
+    startIconClassName?: string | undefined;
+    endIconClassName?: string | undefined;
     disabled?: boolean | undefined;
     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;
     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: {
     onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     block?: boolean | undefined;
+    startIconClassName?: string | undefined;
+    endIconClassName?: string | undefined;
     disabled?: boolean | undefined;
     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;
     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;

package/dist/components/Button/types.d.ts

@@ -11,6 +11,8 @@ export interface ButtonProps extends ButtonAriaProps {
     text?: string;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    startIconClassName?: string;
+    endIconClassName?: string;
     variant?: keyof ButtonVariants | 'custom';
     type?: 'button' | 'reset' | 'submit';
     isDisabled?: boolean;

package/dist/components/FormHelperText/FormHelperText.d.ts

@@ -1,3 +1,3 @@
 import { FormHelperTextProps } from './types';
-declare const FormHelperText: ({ role, status, disabled, children, }: FormHelperTextProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const FormHelperText: ({ role, status, disabled, children, ...rest }: FormHelperTextProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default FormHelperText;

package/dist/components/Input/types.d.ts

@@ -12,6 +12,7 @@ export interface InputProps extends Partial<Pick<UseFormReturn, 'register' | 'co
     validationSchema?: Record<string, unknown>;
     disabled?: boolean;
     className?: string;
+    wrapperClassName?: string;
     as?: React.ElementType;
     startElement?: React.ReactElement;
     endElement?: React.ReactElement;

package/dist/components/Label/Label.d.ts

@@ -1,3 +1,3 @@
 import { LabelProps } from './types';
-declare const Label: ({ children, htmlFor, className, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const Label: ({ children, htmlFor, className, isDisabled, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default Label;

package/dist/components/Label/LabelBase.d.ts

@@ -2,4 +2,6 @@
 export declare const LabelBase: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    isDisabled?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/dist/components/Label/types.d.ts

@@ -3,6 +3,7 @@ import { CommonProps } from '../../types/emotion';
 export interface LabelProps extends CommonProps {
     htmlFor?: string;
     children: React.ReactNode;
+    isDisabled?: boolean;
     onMouseEnter?: MouseEventHandler<HTMLLabelElement>;
     onMouseLeave?: MouseEventHandler<HTMLLabelElement>;
 }

package/dist/components/Typeahead/Typeahead.context.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { UseTypeaheadResult } from './useTypeahead';
+export declare const TypeaheadContext: React.Context<{
+    isOpen: boolean;
+    isDisabled: boolean | undefined;
+    optionsWithKey: Record<string | number, Record<string, string | number>>;
+    selectedItems: (string | number)[];
+    inputRef: React.RefObject<HTMLInputElement>;
+    firstSuggestion: string;
+    isMultiple: boolean | undefined;
+    typeaheadId: string;
+    triggerRef: React.MutableRefObject<HTMLDivElement | null>;
+    className: string | undefined;
+    startIcon: React.ReactNode;
+    endIcon: React.ReactNode;
+    startIconClassName: string | undefined;
+    endIconClassName: string | undefined;
+    name: string;
+    inputName: string;
+    inputValue: string;
+    validationSchema: Record<string, unknown> | undefined;
+    status: "error" | "basic" | "success";
+    placeholder: string | null | undefined;
+    options: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+    register: import("react-hook-form").UseFormRegister<import("react-hook-form").FieldValues> | undefined;
+    setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues> | undefined;
+    handleChange: (changingValue?: string | number | undefined) => void;
+    handleClearAll: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    handleOpenChange: (open: boolean) => void;
+    handleInputChange: React.ChangeEventHandler<HTMLInputElement>;
+    handleInputClick: React.MouseEventHandler<HTMLInputElement>;
+    handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+    handleSelectedClick: React.MouseEventHandler<HTMLDivElement>;
+    handleRemoveSelectedClick: (selectedItem: string | number) => React.MouseEventHandler<HTMLButtonElement>;
+}>;
+export declare const useTypeaheadContext: () => UseTypeaheadResult;

package/dist/components/Typeahead/Typeahead.d.ts

@@ -0,0 +1,11 @@
+import { TypeaheadProps } from './types';
+/**
+ * The structure of the component:
+ * - TypeaheadTrigger
+ * - TypeaheadOptions
+ * - FormHelperText
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+ **/
+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;

package/dist/components/Typeahead/components/MultipleTrigger.d.ts

@@ -0,0 +1 @@
+export declare const MultipleTrigger: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Typeahead/components/NoOptions.d.ts

@@ -0,0 +1 @@
+export declare const NoOptions: ({ children, ...rest }: React.PropsWithChildren) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Typeahead/components/SingleTrigger.d.ts

@@ -0,0 +1 @@
+export declare const SingleTrigger: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Typeahead/components/TypeaheadItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const TypeaheadItemImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const TypeaheadItemIcon: import("@emotion/styled").StyledComponent<import("../..").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/components/Typeahead/components/TypeaheadOption.d.ts

@@ -0,0 +1,2 @@
+import { TypeaheadItemProps } from '../types';
+export declare const TypeaheadOption: ({ children, ...rest }: TypeaheadItemProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Typeahead/components/TypeaheadOptions.d.ts

@@ -0,0 +1,2 @@
+import { TypeaheadItemsListProps } from '../types';
+export declare const TypeaheadOptions: ({ noItemsMessage, children, }: TypeaheadItemsListProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Typeahead/components/TypeaheadTrigger.d.ts

@@ -0,0 +1 @@
+export declare const TypeaheadTrigger: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Typeahead/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './MultipleTrigger';
+export * from './SingleTrigger';
+export * from './TypeaheadTrigger';
+export * from './TypeaheadItem';
+export * from './TypeaheadOptions';
+export * from './TypeaheadOption';
+export * from './NoOptions';

package/dist/components/Typeahead/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Typeahead';
+export * from './components/TypeaheadOptions';
+export * from './components/TypeaheadOption';
+export * from './components/TypeaheadItem';
+export * from './utils';

package/dist/components/Typeahead/styles.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { useTypeahead } from './useTypeahead';
+import { TypeaheadItemProps } from './types';
+export declare const TypeaheadOptionsBase: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const TypeaheadOption: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TypeaheadItemProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const TypeaheadInput: string;
+export declare const TypeaheadInputPlaceholder: string;
+export declare const TypeaheadInputWrapper: string;
+export declare const TypeaheadItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TypeaheadItemLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TypeaheadItemCross: import("@emotion/styled").StyledComponent<import("../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const TypeaheadInputsGroupWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    avatarSize?: number | undefined;
+    direction?: string | undefined;
+    alignItems?: string | undefined;
+} & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    isOpen: boolean;
+}, {}, {}>;
+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> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    isOpen: boolean;
+    status: ReturnType<typeof useTypeahead>['status'];
+}, {}, {}>;

package/dist/components/Typeahead/types.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { CommonProps } from '../../types/emotion';
+import { FieldError, FieldValues, UseFormReturn, UseFormSetValue } from 'react-hook-form';
+export type TypeaheadValue = string | number;
+export type TypeaheadOptionProps = Record<string, TypeaheadValue>;
+export interface TypeaheadProps {
+    initialSelectedItems?: Array<TypeaheadValue>;
+    isMultiple?: boolean;
+    isDisabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    optionsClassName?: string;
+    isOpen?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    startIconClassName?: string;
+    endIconClassName?: string;
+    name?: string;
+    label?: string;
+    helperText?: string;
+    errors?: FieldError;
+    success?: boolean;
+    validationSchema?: Record<string, unknown>;
+    placeholder?: string | null;
+    setValue?: UseFormSetValue<FieldValues>;
+    register?: UseFormReturn['register'];
+    onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void;
+    renderOption?: (data: {
+        value: string | number;
+        input: string;
+        label: string;
+    }) => React.ReactNode;
+}
+export type UseTypeaheadProps = Pick<TypeaheadProps, 'initialSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'onChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'register' | 'setValue' | 'validationSchema' | 'errors' | 'success' | 'placeholder'>;
+export interface TypeaheadItemsListProps extends CommonProps {
+    children?: React.ReactNode;
+    noItemsMessage?: string;
+}
+export interface TypeaheadItemProps extends CommonProps {
+    isActive?: boolean;
+    isDisabled?: boolean;
+    value?: string | number;
+    label?: string | number;
+    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}

package/dist/components/Typeahead/useTypeahead.d.ts

@@ -0,0 +1,36 @@
+import React, { MouseEventHandler } from 'react';
+import { UseTypeaheadProps } from './types';
+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) => {
+    isOpen: boolean;
+    isDisabled: boolean | undefined;
+    optionsWithKey: Record<string | number, Record<string, string | number>>;
+    selectedItems: (string | number)[];
+    inputRef: React.RefObject<HTMLInputElement>;
+    firstSuggestion: string;
+    isMultiple: boolean | undefined;
+    typeaheadId: string;
+    triggerRef: React.MutableRefObject<HTMLDivElement | null>;
+    className: string | undefined;
+    startIcon: React.ReactNode;
+    endIcon: React.ReactNode;
+    startIconClassName: string | undefined;
+    endIconClassName: string | undefined;
+    name: string;
+    inputName: string;
+    inputValue: string;
+    validationSchema: Record<string, unknown> | undefined;
+    status: "error" | "basic" | "success";
+    placeholder: string | null | undefined;
+    options: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+    register: import("react-hook-form").UseFormRegister<import("react-hook-form").FieldValues> | undefined;
+    setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues> | undefined;
+    handleChange: (changingValue?: string | number) => void;
+    handleClearAll: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    handleOpenChange: (open: boolean) => void;
+    handleInputChange: React.ChangeEventHandler<HTMLInputElement>;
+    handleInputClick: React.MouseEventHandler<HTMLInputElement>;
+    handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+    handleSelectedClick: React.MouseEventHandler<HTMLDivElement>;
+    handleRemoveSelectedClick: (selectedItem: number | string) => MouseEventHandler<HTMLButtonElement>;
+};
+export type UseTypeaheadResult = ReturnType<typeof useTypeahead>;

package/dist/components/Typeahead/utils.d.ts

@@ -0,0 +1 @@
+export declare const highlightInputMatch: (item: string | undefined, keyword: string) => string | import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | undefined;

package/dist/components/index.d.ts

@@ -100,3 +100,4 @@ export * from './PieChart';
 export * from './CollapsibleNavBar';
 export * from './Filters';
 export * from './TableFilters';
+export * from './Typeahead';