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

package/dist/types/navigation.d.ts

@@ -0,0 +1,97 @@
+import React, { FC, PropsWithChildren, ComponentType, Ref } from 'react';
+import { Nullable } from 'global';
+import { ValueOf } from 'utils/types';
+import * as styled_components from 'styled-components';
+import { FlattenSimpleInterpolation } from 'styled-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const Breadcrumbs: FC<PropsWithChildren<{}>>;
+
+type PromiseFunc<T = any, Rtn = any> = (...o: T[]) => Promise<Rtn>;
+
+declare const ALIGNMENTS: {
+    readonly start: "flex-start";
+    readonly center: "center";
+    readonly end: "flex-end";
+};
+type Alignment = ValueOf<typeof ALIGNMENTS>;
+
+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;
+};
+
+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);
+
+type ButtonLinkProps = {
+    to?: any;
+    href?: string;
+    external?: boolean;
+    LinkComponent?: string | ComponentType<{
+        className: string;
+        to: any;
+    } & any>;
+    onClick?: ButtonProps["onClick"];
+} & Omit<ButtonProps, "onClick"> & ColorProps & ContainerProps;
+declare const ButtonLink: React.ForwardRefExoticComponent<{
+    to?: any;
+    href?: string | undefined;
+    external?: boolean | undefined;
+    LinkComponent?: string | React.ComponentType<any> | undefined;
+    onClick?: ((() => void) & (() => void)) | ((() => void) & PromiseFunc<any, any>) | undefined;
+} & Omit<ButtonProps, "onClick"> & ColorProps & ContainerProps & React.RefAttributes<any>>;
+
+declare const InlineButtonLink: styled_components.StyledComponent<(props: any) => react_jsx_runtime.JSX.Element, styled_components.DefaultTheme, {}, never>;
+
+export { Breadcrumbs, ButtonLink, ButtonLinkProps, InlineButtonLink };

package/dist/types/notifications.d.ts

@@ -0,0 +1,73 @@
+import React, { FC, ReactNode } from 'react';
+import { ValueOf } from 'utils/types';
+import * as styled_components from 'styled-components';
+import * as prop_types from 'prop-types';
+import * as _zendeskgarden_react_notifications from '@zendeskgarden/react-notifications';
+
+declare const INFO_PANEL_TYPES: {
+    readonly INFO: 0;
+    readonly SUCCESS: 1;
+    readonly WARNING: 2;
+    readonly DANGER: 3;
+};
+type InfoPanelType = ValueOf<typeof INFO_PANEL_TYPES>;
+type Props$2 = {
+    children: ReactNode;
+    className?: string;
+    iconVerticalAlignment?: "center";
+    type: InfoPanelType;
+};
+declare let InfoPanel: FC<Props$2>;
+
+type UserFeedbackProps = {
+    danger?: boolean;
+    info?: boolean;
+    success?: boolean;
+    warning?: boolean;
+};
+
+type Props$1 = {
+    body: ReactNode;
+    notDismissible?: boolean;
+    title?: string;
+    onClose?: () => void;
+} & UserFeedbackProps;
+type NotificationProps$1 = Props$1;
+declare const Notification: FC<Props$1>;
+declare const ToastProvider: styled_components.StyledComponent<{
+    ({ limit, zIndex, placementProps, children }: React.PropsWithChildren<_zendeskgarden_react_notifications.IToastProviderProps>): JSX.Element;
+    displayName: string;
+    defaultProps: {
+        limit: number;
+    };
+    propTypes: {
+        limit: prop_types.Requireable<number>;
+        zIndex: prop_types.Requireable<number>;
+        placementProps: prop_types.Requireable<object>;
+    };
+}, styled_components.DefaultTheme, {
+    zIndex: 1000;
+}, "zIndex">;
+
+type NotificationProps = Omit<NotificationProps$1, "body"> & {
+    body?: ReactNode;
+};
+type Return = {
+    notify: (props: NotificationProps) => void;
+};
+declare const useToastNotifier: () => Return;
+
+type Props = {
+    body: ReactNode;
+    notDismissible?: boolean;
+    noActionButton?: boolean;
+    showTitle?: boolean;
+    title?: string;
+    buttonText?: string;
+    onActionButtonClick?: () => void;
+    onClose?: () => void;
+} & UserFeedbackProps;
+type GlobalAlertProps = Props;
+declare const GlobalAlert: FC<Props>;
+
+export { GlobalAlert, GlobalAlertProps, INFO_PANEL_TYPES, InfoPanel, Notification, NotificationProps$1 as NotificationProps, ToastProvider, useToastNotifier };

package/dist/types/styles.d.ts

@@ -0,0 +1,313 @@
+import * as _zendeskgarden_react_theming from '@zendeskgarden/react-theming';
+import * as styled_components from 'styled-components';
+import { ThemedStyledProps, FlattenSimpleInterpolation } from 'styled-components';
+import { Nullable } from 'global';
+import { ValueOf } from 'utils/types';
+import { PropsWithChildren, FC } from 'react';
+
+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 hasGoodContrast: (a: string, b: string) => boolean;
+declare const fade: (c: string, amount?: number) => string;
+declare const light: (c: string, amount?: number) => string;
+declare const lighter: (c: string) => string;
+declare const lightness: (c: string, amount?: number) => string;
+declare const lightnessDelta: (c: string, delta: number) => string;
+declare const veryLight: (c: string) => string;
+declare const dark: (c: string, amount?: number) => string;
+declare const darker: (c: string) => string;
+declare const veryDark: (c: string) => string;
+declare const desaturate: (c: string) => string;
+declare const saturate: (c: string) => string;
+
+declare const SPACINGS: Readonly<{
+    XS: ".5rem";
+    SM: "1rem";
+    MD: "1.5rem";
+    LG: "2rem";
+    XL: "2.5rem";
+    XXL: "3rem";
+    XXXL: "4rem";
+    XXXXL: "5rem";
+}>;
+declare const SPACE_DIRECTIONS: Readonly<{
+    DOWN: "down";
+    RIGHT: "right";
+}>;
+
+declare const FONT_TAGS: {
+    readonly DIV: "div";
+    readonly LABEL: "label";
+    readonly H1: "h1";
+    readonly H2: "h2";
+    readonly H3: "h3";
+    readonly H4: "h4";
+    readonly H5: "h5";
+    readonly H6: "h6";
+    readonly P: "p";
+    readonly SPAN: "span";
+};
+declare const FONT_SIZES: {
+    readonly XXS: ".8rem";
+    readonly XS: ".9rem";
+    readonly SM: "1rem";
+    readonly MD: "1.3rem";
+    readonly LG: "1.7rem";
+    readonly XL: "2.3rem";
+    readonly XXL: "3.3rem";
+    readonly XXXL: "4rem";
+    readonly XXXXL: "5rem";
+    readonly XXXXXL: "6rem";
+};
+declare const FONT_SIZES_EM: Readonly<{
+    XXS: string;
+    XS: string;
+    SM: string;
+    MD: string;
+    LG: string;
+    XL: string;
+    XXL: string;
+    XXXL: string;
+    XXXXL: string;
+    XXXXXL: string;
+}>;
+declare const FONT_WEIGHTS: {
+    readonly THIN: "100";
+    readonly LIGHT: "300";
+    readonly REGULAR: "400";
+    readonly MEDIUM: "500";
+    readonly BOLD: "700";
+    readonly BLACK: "800";
+};
+type FontSize = ValueOf<typeof FONT_SIZES>;
+type FontWeight = ValueOf<typeof FONT_WEIGHTS>;
+type FontTag = ValueOf<typeof FONT_TAGS>;
+type TextAlignment = "center" | "left" | "right";
+type CommonTextProps = {
+    align?: TextAlignment;
+    as?: FontTag;
+    hasSubText?: boolean;
+    size?: FontSize;
+    weight?: FontWeight;
+};
+
+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;
+};
+
+declare const backgroundPrimaryWithText: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+declare const textColorForBackground: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<{
+    color?: string | undefined;
+}, styled_components.DefaultTheme>>;
+declare const textColorPrimary: styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
+declare const textWithColor: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<{
+    color: string;
+    inline?: boolean | undefined;
+}, styled_components.DefaultTheme>>;
+
+declare const PHONE_SIZE = 560;
+declare const TABLET_SIZE = 840;
+type MediaQuery = (styles: CSS) => CSS;
+type MediaQueriesI = {
+    forPhones: MediaQuery;
+    forTablets: MediaQuery;
+    forTabletsAndUp: MediaQuery;
+    forLargeTabletsAndUp: MediaQuery;
+    forSmallComputersAndUp: MediaQuery;
+    forLargeComputers: MediaQuery;
+};
+declare const mediaQueries: (wideLayout?: boolean) => MediaQueriesI;
+declare const rem: (px: number) => string;
+declare const unit: (px: number) => string;
+declare const remSize: (e?: HTMLElement) => number;
+
+type Props = PropsWithChildren<{
+    theme: object;
+}>;
+declare const ThemeProvider: FC<Props>;
+
+declare const THEMES: {
+    light: Theme;
+    light2: Theme;
+    dark: Theme;
+    __ZENDESK_DEFAULT_THEME__: _zendeskgarden_react_theming.IGardenTheme;
+};
+
+export { CSS, CSSProp, ColorProps, CommonTextProps, ContainerProps, ContainerStyles, FONT_SIZES, FONT_SIZES_EM, FONT_TAGS, FONT_WEIGHTS, FontSize, FontTag, FontWeight, MediaQueriesI, MediaQuery, PHONE_SIZE, Props, SPACE_DIRECTIONS, SPACINGS, StyledProps, Styles, TABLET_SIZE, THEMES, TextAlignment, Theme, ThemeProvider, backgroundPrimaryWithText, dark, darker, desaturate, fade, hasGoodContrast, light, lighter, lightness, lightnessDelta, mediaQueries, rem, remSize, saturate, textColorForBackground, textColorPrimary, textWithColor, unit, veryDark, veryLight };

package/dist/types/tables.d.ts

@@ -0,0 +1,179 @@
+/// <reference types="trusted-types" />
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Nullable } from 'global';
+import { PropsWithChildren, ComponentType, Ref, ReactNode } from 'react';
+import { ValueOf } from 'utils/types';
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { IItemProps } from '@zendeskgarden/react-dropdowns/dist/typings/types';
+
+declare const ALIGNMENTS: {
+    readonly start: "flex-start";
+    readonly center: "center";
+    readonly end: "flex-end";
+};
+type Alignment = ValueOf<typeof ALIGNMENTS>;
+
+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 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);
+
+type ItemProps = Omit<IItemProps, "onClick"> & {
+    danger?: boolean;
+    disabled?: boolean;
+} & CSSProp;
+
+type TableAction = {
+    buttonProps?: Partial<ButtonProps>;
+    Component?: ComponentType<PropsWithChildren<Record<string, any>>>;
+    componentProps?: Record<string, any>;
+    label: string;
+    notCompactable?: boolean;
+    onClick: () => void;
+    dropdownItemProps?: Partial<ItemProps>;
+};
+type ItemKey = number | string;
+type ItemContainerStyles = string;
+type ItemAction = {
+    action: () => void;
+    label: string;
+};
+type ItemFilterOptions = {
+    fieldName: string;
+    label: string;
+} & ({
+    options: {
+        label: string;
+        value: string;
+    }[];
+    type: "multi-select" | "select" | "searchable-select";
+} | {
+    options?: undefined;
+    type: "text";
+});
+type FilterState = Record<string, string | string[] | undefined>;
+type Item = {
+    [key: string]: ReactNode;
+} & {
+    actions?: Array<ItemAction>;
+    checkDisabled?: boolean;
+    clickDisabled?: boolean;
+    containerStyles?: ItemContainerStyles;
+    key: ItemKey;
+};
+type SortConfig = {
+    fieldName: string;
+    label: string;
+};
+type ColumnConfig = {
+    collapsible: boolean;
+    css?: CSS;
+    filter?: ItemFilterOptions;
+    flexible?: boolean;
+    important: boolean;
+    name: string;
+    sort?: SortConfig;
+    width?: string;
+};
+type PaginationData = {
+    page: number;
+    pageSize: number;
+    totalCount: number;
+};
+type SortDirection = "asc" | "desc" | undefined;
+type SortState = Record<string, SortDirection>;
+type DesktopTableV2Props = {
+    showStickyShadow?: boolean;
+    showStickyBorder?: boolean;
+};
+type TableProps = {
+    actions?: TableAction[];
+    checkable?: boolean;
+    checkedItems?: Set<ItemKey>;
+    columnConfigs: Array<ColumnConfig>;
+    desktopTableProps?: DesktopTableV2Props;
+    emptyState?: ReactNode;
+    filterState?: FilterState;
+    helpText?: ReactNode;
+    items: Array<Item>;
+    maxHeight?: string;
+    mobileListview?: boolean;
+    mobileListviewNodes?: ReactNode[];
+    onColumnSort?: (s: SortState) => void;
+    onFiltersChange?: (changes: FilterState) => void;
+    onItemChecked?: (key: ItemKey, isChecked: boolean) => void;
+    onItemClick?: (key: ItemKey) => void;
+    onItemHoverEnd?: (key: ItemKey) => void;
+    onItemHoverStart?: (key: ItemKey) => void;
+    onItemsChecked?: (rows: Set<ItemKey>) => void;
+    sortState?: SortState;
+    title?: string;
+    useDropdownFilters?: boolean;
+    useLegacyDesktopTable?: boolean;
+    useLegacyMobileTable?: boolean;
+};
+type Props = TableProps & {
+    className?: string;
+    pagination?: PaginationData;
+    onPageChange?: (p: number) => void;
+    onPageSizeChange?: (size: number) => void;
+};
+type FinalizedTableProps = Props;
+declare let Table: ({ actions, className, desktopTableProps, onItemsChecked, onPageChange, onPageSizeChange, pagination, useLegacyDesktopTable, useLegacyMobileTable, ...props }: Props) => react_jsx_runtime.JSX.Element;
+
+export { ColumnConfig, DesktopTableV2Props, FilterState, FinalizedTableProps, Item, ItemAction, ItemContainerStyles, ItemFilterOptions, ItemKey, PaginationData, SortConfig, SortDirection, SortState, Table, TableAction, TableProps };