@idea-fragments/react-components-zendesk 0.1.73 → 0.1.74

package/dist/types/accordions.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, FC } from 'react';
+
+type TimeLineItem = {
+    content: ReactNode;
+    dateTime?: string;
+    icon?: ReactNode;
+    key: string | number;
+};
+type TimelineProps = {
+    isAlternate?: boolean;
+    data: TimeLineItem[];
+};
+declare const Timeline: FC<TimelineProps>;
+
+export { TimeLineItem, Timeline, TimelineProps };

package/dist/types/alert.d.ts

@@ -0,0 +1,28 @@
+import { Nullable } from 'global';
+import { FC } from 'react';
+
+type StyledComponentProps = {
+    className?: string;
+};
+
+declare const ALERT_TYPES: {
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly ERROR: "error";
+    readonly WARNING: "warning";
+};
+type AlertType = (typeof ALERT_TYPES)[keyof typeof ALERT_TYPES];
+type AlertContent = {
+    title?: string;
+    body: any;
+    onClose?: () => void;
+    type?: AlertType;
+};
+type Props = {
+    isVisible: boolean;
+    closeAlert: () => void;
+    alertContent: Nullable<AlertContent>;
+} & StyledComponentProps;
+declare let Alert: FC<Props>;
+
+export { ALERT_TYPES, Alert, AlertContent, AlertType };

package/dist/types/chats.d.ts

@@ -0,0 +1,38 @@
+import * as styled_components from 'styled-components';
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { ReactNode, ChangeEvent, FC } from 'react';
+import { Nullable } from 'global';
+
+type CSS<T = any> = FlattenSimpleInterpolation | string | T;
+type CSSProp<T = any> = {
+    _css?: CSS<T>;
+    className?: string;
+};
+
+type ChatProps = {
+    chatBody: ReactNode;
+    footer?: ReactNode;
+    header?: ReactNode;
+    hideSendButton?: boolean;
+    onChange: (text: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    onSaveClicked?: () => void;
+    userInputValue?: string;
+} & CSSProp;
+declare const Chat: styled_components.StyledComponent<FC<ChatProps>, styled_components.DefaultTheme, {}, never>;
+
+type OverflowMenuItem = {
+    label: string;
+    action: () => void;
+};
+
+type ChatMessageProps = {
+    actions?: Nullable<OverflowMenuItem[]>;
+    dateTime: string;
+    icon: ReactNode;
+    iconBgColor?: string;
+    isUserMessage?: boolean;
+    message: string;
+} & CSSProp;
+declare const ChatMessage: styled_components.StyledComponent<FC<ChatMessageProps>, styled_components.DefaultTheme, {}, never>;
+
+export { Chat, ChatMessage, ChatMessageProps, ChatProps };

package/dist/types/forms.d.ts

@@ -0,0 +1,369 @@
+/// <reference types="trusted-types" />
+/// <reference types="react" />
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import react, { ReactNode, ChangeEvent, ComponentType, PropsWithChildren, FC, Ref } from 'react';
+import { ValueOf } from 'utils/types';
+import * as styled_components from 'styled-components';
+import { FlattenSimpleInterpolation, FlattenInterpolation, ThemeProps } from 'styled-components';
+import { Moment } from 'moment';
+import { IItemProps } from '@zendeskgarden/react-dropdowns/dist/typings/types';
+import { StateChangeOptions } from 'downshift';
+import { Nullable } from 'global';
+
+declare const VALIDATION_STATES: {
+    readonly ERROR: "error";
+    readonly WARNING: "warning";
+    readonly SUCCESS: "success";
+    readonly NONE: undefined;
+};
+
+type ValidationState = ValueOf<typeof VALIDATION_STATES>;
+type Validation = {
+    validation: ValidationState;
+    message?: ReactNode;
+};
+
+type ColorProps = {
+    accent?: boolean;
+    color?: string;
+    danger?: boolean;
+    neutral?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    success?: boolean;
+    warning?: boolean;
+};
+type ContainerProps = {
+    _css?: CSS;
+    color?: string;
+    compact?: boolean;
+    fluid?: boolean;
+    className?: any;
+};
+type CSS<T = any> = FlattenSimpleInterpolation | string | T;
+type CSSProp<T = any> = {
+    _css?: CSS<T>;
+    className?: string;
+};
+
+type FormFieldProps = {
+    disabled?: boolean;
+    emptyState?: ReactNode;
+    hint?: ReactNode;
+    label?: ReactNode;
+    message?: ReactNode;
+    required?: boolean;
+    validation?: Validation | undefined;
+} & ContainerProps;
+type TextFieldProps<V = string> = {
+    autoComplete?: string;
+    faux?: boolean;
+    small?: boolean;
+    type?: string;
+    value?: V;
+    onChange: (value: V, event: ChangeEvent<HTMLInputElement>) => void;
+} & FormFieldProps;
+
+type Props$7 = {
+    minimumDate?: Moment;
+    disabledDates: Array<Moment>;
+    onChange: (d: Moment) => void;
+} & Omit<TextFieldProps, "onChange">;
+declare const DatePickerSelector: {
+    (props: Props$7): react_jsx_runtime.JSX.Element;
+    COMPONENT_NAME: string;
+    defaultProps: {
+        onChange: (...args: any) => void;
+        emptyState: string;
+        disabledDates: never[];
+        disabled: boolean;
+    };
+};
+
+type ItemProps = Omit<IItemProps, "onClick"> & {
+    danger?: boolean;
+    disabled?: boolean;
+} & CSSProp;
+
+type SelectorItemKey = string | number | null | undefined;
+type SelectorOptionOptionalAttrs = {
+    Component?: ComponentType<PropsWithChildren<Record<string, any>>>;
+    componentProps?: Record<string, any>;
+    isClearingItem?: boolean;
+    isNextItem?: boolean;
+    isBackItem?: boolean;
+    isAddItem?: boolean;
+    isHeaderItem?: boolean;
+    itemProps?: Partial<ItemProps>;
+};
+type SelectorOption = {
+    [key: string]: any;
+} & SelectorOptionOptionalAttrs;
+type OnItemSelectedFunc = ((k: SelectorItemKey) => void) | ((o: SelectorOption | null | undefined) => void);
+type OnItemsSelectedFunc = ((ks: SelectorItemKey[]) => void) | ((o: SelectorOption[] | null | undefined) => void);
+type StateChange = StateChangeOptions<SelectorOption>;
+type Common = FormFieldProps & {
+    appendMenuToNode?: HTMLElement;
+    clearable?: boolean;
+    options: Array<SelectorOption>;
+    optionsKeyMap?: {
+        [key: string]: SelectorOption;
+    };
+    keyField: string;
+    labelField: string;
+    valueField?: string;
+    maxMenuHeight?: string;
+    menuPopperModifiers?: Record<string, any>[] | undefined;
+    placement?: MenuPlacement;
+    onStateChange?: (s: StateChange) => void;
+    invalidOnNoSelection?: boolean;
+    flat?: boolean;
+    open?: boolean;
+    small?: boolean;
+};
+type SelectorProps = {
+    selectedKey?: SelectorItemKey;
+    onChange?: OnItemSelectedFunc;
+} & Common;
+type MultiSelectorProps = {
+    selectedKeys?: SelectorItemKey[];
+    onChange?: OnItemsSelectedFunc;
+} & Common;
+
+type MenuPlacement = "start" | "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "end-top" | "end-bottom" | "start-top" | "start-bottom";
+type OptionalSelectorProps = {
+    keyField?: string;
+    labelField?: string;
+};
+type CommonProps = {
+    _css?: CSS;
+    appendMenuToNode?: HTMLElement;
+    async?: boolean;
+    isOpen?: boolean;
+    maxMenuHeight?: string;
+    menuCSS?: string | FlattenInterpolation<ThemeProps<any>>;
+    menuItemComponent?: ComponentType<any>;
+    placement?: MenuPlacement;
+    returnItemOnChange?: boolean;
+    shouldFilterOptions?: boolean;
+    small?: boolean;
+    trigger?: ReactNode;
+    useRawOptions?: boolean;
+};
+type SelectorsProps = (CommonProps & SelectorProps) | (CommonProps & MultiSelectorProps);
+type Props$6 = Omit<SelectorsProps, "keyField" | "labelField"> & OptionalSelectorProps;
+declare let Dropdown: FC<PropsWithChildren<Props$6>>;
+declare const Autocomplete: react.ComponentType<any>;
+declare const Select: react.ComponentType<any>;
+declare const MultiSelect: styled_components.StyledComponent<react.ComponentType<any>, styled_components.DefaultTheme, {}, never>;
+
+declare let Selector: ({ disabled, ...props }: SelectorProps) => react_jsx_runtime.JSX.Element;
+
+type Props$5 = {
+    maxItems?: number;
+    selectedKeys: Array<SelectorItemKey>;
+} & MultiSelectorProps;
+declare let MultiSelector: ({ maxItems, ...props }: Props$5) => react_jsx_runtime.JSX.Element;
+
+type Props$4 = {
+    children?: (o: SelectorOption) => void | ReactNode;
+    onSearchTextChange?: (s: string) => void;
+} & SelectorProps;
+declare let SearchableSelector: FC<Props$4>;
+
+type Props$3 = {
+    minimumDate?: Moment;
+} & TextFieldProps;
+declare const MonthYearSelector: (props: Props$3) => react_jsx_runtime.JSX.Element;
+
+type SelectorOptionKeyMapParams = Pick<SelectorProps, "keyField" | "options" | "optionsKeyMap">;
+declare class SelectorOptionKeyMap {
+    static call({ keyField, options, optionsKeyMap, }: SelectorOptionKeyMapParams): {
+        [key: string]: SelectorOption;
+    };
+}
+
+declare class ArrayToSelectorOptionsConverter {
+    static call(list: SelectorItemKey[]): SelectorOption[];
+}
+
+declare const EmailTextField: (props: TextFieldProps<any>) => react_jsx_runtime.JSX.Element;
+
+declare let NumberTextField: ({ onChange, value: numberValue, ...props }: TextFieldProps<number>) => react_jsx_runtime.JSX.Element;
+
+type Props$2 = TextFieldProps<any> & {
+    newPassword?: boolean;
+};
+declare const PasswordTextField: ({ newPassword, ...props }: Props$2) => react_jsx_runtime.JSX.Element;
+
+declare let TextField: react.ForwardRefExoticComponent<{
+    autoComplete?: string | undefined;
+    faux?: boolean | undefined;
+    small?: boolean | undefined;
+    type?: string | undefined;
+    value?: string | undefined;
+    onChange: (value: string, event: react.ChangeEvent<HTMLInputElement>) => void;
+} & {
+    disabled?: boolean | undefined;
+    emptyState?: react.ReactNode;
+    hint?: react.ReactNode;
+    label?: react.ReactNode;
+    message?: react.ReactNode;
+    required?: boolean | undefined;
+    validation?: Validation | undefined;
+} & ContainerProps & react.RefAttributes<unknown>>;
+
+type TextAreaProps = FormFieldProps & {
+    autoExpand?: boolean;
+    characterLimit?: number;
+    resizable?: boolean;
+    value?: string;
+    onChange: (text: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+};
+declare const TextArea: FC<TextAreaProps>;
+
+type FieldProps = TextFieldProps | TextAreaProps;
+type Props$1 = PropsWithChildren<{
+    WrappedComponent: ComponentType<Omit<FieldProps, "onChange" | "validation"> & {
+        onChange: ((e: ChangeEvent<HTMLInputElement>) => void) | ((e: ChangeEvent<HTMLTextAreaElement>) => void);
+        validation?: string;
+    }>;
+    compact?: boolean;
+}> & FieldProps;
+declare let TextFieldWrapper: react.ForwardRefExoticComponent<Props$1 & react.RefAttributes<unknown>>;
+
+declare const ALIGNMENTS: {
+    readonly start: "flex-start";
+    readonly center: "center";
+    readonly end: "flex-end";
+};
+type Alignment = ValueOf<typeof ALIGNMENTS>;
+
+type PromiseFunc<T = any, Rtn = any> = (...o: T[]) => Promise<Rtn>;
+
+declare const BUTTON_SIZES: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
+type ButtonSize = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];
+type AutoLoadable = {
+    autoLoadable: true;
+    onClick: PromiseFunc;
+};
+type ButtonBaseProps = PropsWithChildren<{
+    alignItems?: string;
+    alignSelf?: Alignment;
+    autoLoadable?: boolean;
+    disabled?: boolean;
+    flat?: boolean;
+    groupKey?: string;
+    icon?: Nullable<string | ComponentType>;
+    iconPosition?: "left" | "right";
+    iconSize?: string;
+    inline?: boolean;
+    innerAs?: string;
+    innerRef?: Ref<HTMLButtonElement>;
+    loading?: boolean;
+    pill?: boolean;
+    primary?: boolean;
+    size?: ButtonSize;
+    wrapInlineText?: boolean;
+    onClick: () => void;
+}> & CSSProp & ColorProps & ContainerProps;
+type ControlledLoadable = {
+    loading?: boolean;
+    onClick: () => void;
+};
+type ButtonProps = (ButtonBaseProps & ControlledLoadable) | (ButtonBaseProps & AutoLoadable);
+declare const Button: ComponentType<ButtonProps>;
+
+type Option = {
+    label: string;
+    value: string;
+};
+type CycleButtonProps = Omit<ButtonProps, "onClick"> & {
+    options: Array<Option>;
+    selectedOption: string;
+    onCycleChanged: (value: string) => void;
+};
+declare const CycleButton: ({ options, selectedOption, onCycleChanged, ...buttonProps }: CycleButtonProps) => react_jsx_runtime.JSX.Element;
+
+type FileChangeHandler = {
+    multiple?: false;
+    onFileChange: (f: File) => void;
+    onFilesChange?: (files: File[]) => void;
+} | {
+    multiple: true;
+    onFileChange?: (f: File) => void;
+    onFilesChange: (files: File[]) => void;
+};
+type FileButtonProps = Omit<ButtonProps, "onClick"> & FileChangeHandler;
+declare const FileButton: FC<FileButtonProps>;
+
+type IconButtonProps = Omit<ButtonProps, "children">;
+declare const IconButton: styled_components.StyledComponent<({ primary, flat, pill, ...props }: IconButtonProps) => JSX.Element, styled_components.DefaultTheme, IconButtonProps, never>;
+
+type CheckboxProps = FormFieldProps & {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange: (checked: boolean) => void;
+};
+declare let Checkbox: ({ checked: checkedProp, compact, emptyState, fluid, hint, indeterminate, label, message, validation, onChange, ...props }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+type MediaQuery = (styles: CSS) => CSS;
+
+type ResponsiveProps<P> = {
+    mediaQueryFunc: MediaQuery;
+    props: P;
+};
+type FlexBoxProps = {
+    alignItems?: string;
+    gap?: string | null | "unset";
+    fluid?: boolean;
+    inline?: boolean;
+    justifyContent?: string;
+    responsivePropsList?: ResponsiveProps<FlexBoxProps>[];
+    withRows?: boolean;
+    wrapped?: boolean;
+} & CSSProp;
+
+type FormProps = PropsWithChildren<{
+    onSubmit: PromiseFunc;
+}> & ContainerProps & FlexBoxProps;
+declare let Form: FC<FormProps>;
+
+type NPSScore = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+type NPSQuestionProps = {
+    label: ReactNode;
+    onChange: (n: NPSScore) => void;
+    value: Nullable<NPSScore>;
+};
+declare const NPSQuestion: FC<NPSQuestionProps>;
+
+type Props = {
+    checked?: boolean;
+    color?: string;
+    disabled?: boolean;
+    hint?: ReactNode;
+    label?: string;
+    onChange: (checked: boolean) => void;
+    success?: boolean;
+};
+type ToggleProps = Props;
+declare let Toggle: FC<Props>;
+
+type TaggedToggleProps = ToggleProps & {
+    active?: boolean;
+    activeText?: string;
+    inactiveText?: string;
+    toggleColor?: string;
+};
+declare const TaggedToggle: ({ active, checked, color, activeText, label, inactiveText, onChange, success, toggleColor, ...props }: TaggedToggleProps) => react_jsx_runtime.JSX.Element;
+
+type ValidatedFormProps = {
+    invalidFields: {
+        [key: string]: Array<string>;
+    };
+};
+
+export { ArrayToSelectorOptionsConverter, Autocomplete, BUTTON_SIZES, Button, ButtonProps, ButtonSize, Checkbox, CheckboxProps, CycleButton, DatePickerSelector, Dropdown, EmailTextField, FileButton, FileButtonProps, Form, FormFieldProps, FormProps, IconButton, IconButtonProps, MenuPlacement, MonthYearSelector, MultiSelect, MultiSelector, MultiSelectorProps, NPSQuestion, NPSQuestionProps, NPSScore, NumberTextField, OnItemSelectedFunc, OnItemsSelectedFunc, PasswordTextField, SearchableSelector, Select, Selector, SelectorItemKey, SelectorOption, SelectorOptionKeyMap, SelectorOptionKeyMapParams, SelectorOptionOptionalAttrs, SelectorProps, StateChange, TaggedToggle, TaggedToggleProps, TextArea, TextAreaProps, TextField, TextFieldProps, TextFieldWrapper, Toggle, ToggleProps, VALIDATION_STATES, ValidatedFormProps, Validation, ValidationState };

package/dist/types/hooks.d.ts

@@ -0,0 +1,198 @@
+import { FC, PropsWithChildren, ComponentType } from 'react';
+import { FlattenSimpleInterpolation, ThemedStyledProps } from 'styled-components';
+import { Nullable } from 'global';
+
+type CSS<T = any> = FlattenSimpleInterpolation | string | T;
+type CSSProp<T = any> = {
+    _css?: CSS<T>;
+    className?: string;
+};
+
+type LoadingFunc = <T>(p: Promise<T>) => Promise<T>;
+type LoaderProps = PropsWithChildren<{
+    as?: ComponentType;
+}> & CSSProp;
+type Return = {
+    isLoading: boolean;
+    Loader: FC<LoaderProps>;
+    withLoading: LoadingFunc;
+};
+declare const useLoaderV2: () => Return;
+
+type StyledProps<Props = {}> = ThemedStyledProps<Props, Theme>;
+
+type FullSpectrumColors = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+};
+type PartialSpectrumColors = {
+    400: string;
+    M400: string;
+    600: string;
+    M600: string;
+};
+type ContainerStyles = {
+    background?: string;
+    borderRadius?: string;
+    height?: string;
+    margin?: string;
+    padding?: string;
+    shadow?: string;
+    zIndex?: number;
+};
+type Styles = {
+    appBar: Required<Pick<ContainerStyles, "background" | "height" | "shadow" | "zIndex">> & {
+        screenPosition: "top" | "bottom";
+    };
+    border: {
+        color: string;
+    };
+    buttons: {
+        textTransform: Nullable<string>;
+    };
+    chat: {
+        message: {
+            currentUser: {
+                icon: {
+                    background: string;
+                };
+                text: {
+                    background: string;
+                };
+            };
+            other: {
+                icon: {
+                    background: string;
+                };
+                text: {
+                    background: string;
+                };
+            };
+        };
+    };
+    colorAccent: string;
+    colorDanger: string;
+    colorPrimary: string;
+    colorPrimaryDark: string;
+    colorSuccess: string;
+    colorTertiary: string;
+    colorWarning: string;
+    colors: {
+        black: string;
+        white: string;
+        product: {};
+        grey: FullSpectrumColors;
+        blue: FullSpectrumColors;
+        red: FullSpectrumColors;
+        yellow: FullSpectrumColors;
+        green: FullSpectrumColors;
+        kale: FullSpectrumColors;
+        fuschia: PartialSpectrumColors;
+        pink: PartialSpectrumColors;
+        crimson: PartialSpectrumColors;
+        orange: PartialSpectrumColors;
+        lemon: PartialSpectrumColors;
+        lime: PartialSpectrumColors;
+        mint: PartialSpectrumColors;
+        teal: PartialSpectrumColors;
+        azure: PartialSpectrumColors;
+        royal: PartialSpectrumColors;
+        purple: PartialSpectrumColors;
+    };
+    container: {
+        horizontalPadding: string;
+    };
+    drawer: {
+        width: string;
+    };
+    font: {
+        size: string;
+    };
+    footer: {
+        background: string;
+    };
+    infoPanel: {
+        background: string;
+    };
+    modal: {
+        backdrop: {
+            background: string;
+        };
+    };
+    nav: {
+        linkColor: string;
+    };
+    notifications: {
+        zIndex: number;
+    };
+    overlayBackground: string;
+    pageBackground: string;
+    scrollbar: {
+        thumbColor: string;
+        trackColor: string;
+    };
+    scrollbarColor: string;
+    section: ContainerStyles & {
+        body: {
+            padding: string;
+        };
+        header: {
+            padding: string;
+        };
+    };
+    sidebar: {
+        actionButton: {
+            borderRadius: string;
+            color: string;
+        };
+        background: string;
+        boxShadow: string;
+        padding: string;
+        width: string;
+        zIndex: number;
+    };
+    table: {
+        borderColor: string;
+        borderSize: string;
+        filterButtonIcon: Nullable<string>;
+    };
+    textColorDark: string;
+    textColorLight: string;
+    textColorOverPrimaryBg: string;
+    textColorPrimary: string;
+    textColorSecondary: string;
+    tooltip: {
+        darkBackground: string;
+    };
+    getTextColorForBackground: (p: StyledProps<{
+        color: string;
+    }>) => string;
+};
+type Theme = {
+    isDark: boolean;
+    styles: Styles;
+};
+
+declare const useTheme: () => Theme;
+
+declare const useIsMounted: () => () => boolean;
+
+type Measurements = {
+    isLargeComputer: boolean;
+    isLargeTablet: boolean;
+    isLargeTabletOrLarger: boolean;
+    isLargeTabletOrSmaller: boolean;
+    isPhone: boolean;
+    isSmallComputer: boolean;
+    isSmallComputerOrLarger: boolean;
+    isTablet: boolean;
+};
+declare const useDeviceSizeWatcher: () => Measurements;
+
+export { Measurements, useDeviceSizeWatcher, useIsMounted, useLoaderV2, useTheme };

package/dist/types/icon.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, SVGAttributes } from 'react';
+
+type SVGComponent = ComponentType<SVGAttributes<any>>;
+type Props = {
+    color?: string;
+    size?: number | string;
+    svg: string | Array<string> | SVGComponent;
+    title?: string;
+    onClick?: () => void;
+};
+type IconProps = Props;
+declare const Icon: {
+    ({ color, size, svg, title, onClick, }: Props): react_jsx_runtime.JSX.Element;
+    COMPONENT_NAME: string;
+};
+
+export { Icon, IconProps };