@wavv/ui 1.9.4 → 1.9.5

package/build/types/components/draftUtils.d.ts

@@ -0,0 +1,49 @@
+import { EditorState, CompositeDecorator, RawDraftContentState, ContentState, RawDraftEntity } from 'draft-js';
+import { MergeField } from './types';
+export declare const decorator: CompositeDecorator;
+export declare const decode: (data: RawDraftContentState) => string;
+export declare const encode: (text: string, fields: MergeField[], displayValue: boolean) => ContentState;
+/**
+ * Returns a new EditorState using the content passed in.
+ * @param {string} value - The string of text to go in the editor
+ * @param {array} fields - Array of field objects
+ * @param {boolean} displayValue - Flag to display the merge fields value or label
+ */
+export declare const createStateWithContent: (value: string, fields: MergeField[], displayValue: boolean) => EditorState;
+/**
+ * Returns the raw form of the Editor content.
+ * @param {EditorState} state - The current state of the editor
+ * @param {boolean} decoded - Whether or not the state is to be decoded into plain text
+ */
+export declare const getRawState: (state: EditorState, decoded?: boolean) => string | RawDraftContentState;
+/**
+ * Returns an array of entities contained in the EditorState.
+ * @param {EditorState} state - The current state of the editor
+ */
+export declare const getEntities: (state: EditorState) => RawDraftEntity<{
+    [key: string]: any;
+}>[];
+/**
+ * Checks if the editor contains any merged but unknown fields. Returns a true or false
+ * @param {EditorState} state - The current state of the editor
+ */
+export declare const hasMissingEntities: (state: EditorState) => boolean;
+/**
+ * Returns a new EditorState with a merge field inserted at the cursor, then places the cursor at the end of the newly inserted text.
+ * @param {object} field - The merge field object to be inserted
+ * @param {array} fields - Array of field objects
+ * @param {EditorState} state - The current state of the editor
+ * @param {boolean} displayValue - Flag to display the merge fields value or label
+ */
+export declare const insertFieldEntity: (field: MergeField, fields: MergeField[], state: EditorState, displayValue: boolean) => EditorState;
+/**
+ * Returns a new EditorState with the cursor focused at the end of the text.
+ * @param {EditorState} state - The current state of the editor
+ */
+export declare const getFocusStateAtEnd: (state: EditorState) => EditorState;
+/**
+ * Returns a new EditorState with the pasted content merged in with the current state.
+ * @param {string} text - The text string being pasted
+ * @param {EditorState} state - The current state of the editor
+ */
+export declare const getPastedState: (text: string, state: EditorState) => EditorState;

package/build/types/components/helpers/getIcon.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { IconProps } from '../Icon/Icon';
+import { IconNames } from '../Icon/icons';
+import { TooltipProps } from '../Tooltip';
+export type IconType = IconNames | IconProps | ReactElement<IconProps> | ReactElement<TooltipProps>;
+type ReducedIconProps = Omit<IconProps, 'name' | 'svg'>;
+declare const getIcon: (icon: IconType, props?: ReducedIconProps) => ReactElement<IconProps | TooltipProps>;
+export default getIcon;

package/build/types/components/helpers/getPopPosition.d.ts

@@ -0,0 +1,6 @@
+import { ArrowAlign, PopPosition, PopSide } from '../types';
+declare const getPopPosition: (pos?: PopPosition) => {
+    side: PopSide;
+    align: ArrowAlign;
+};
+export default getPopPosition;

package/build/types/components/helpers/isPropAllowed.d.ts

@@ -0,0 +1,2 @@
+declare const isPropAllowed: (prop: string, propArray: string[]) => boolean;
+export default isPropAllowed;

package/build/types/components/helpers/styledProps.d.ts

@@ -0,0 +1,26 @@
+import type { Position, Margin, Padding, WidthHeight } from '../types';
+export declare const widthHeightProps: ({ width, height }: WidthHeight) => {
+    width: string | number | undefined;
+    height: string | number | undefined;
+};
+export declare const paddingProps: ({ padding, paddingTop, paddingBottom, paddingRight, paddingLeft }: Padding) => {
+    padding: string | number | undefined;
+    paddingTop: string | number | undefined;
+    paddingBottom: string | number | undefined;
+    paddingRight: string | number | undefined;
+    paddingLeft: string | number | undefined;
+};
+export declare const marginProps: ({ margin, marginTop, marginBottom, marginRight, marginLeft }: Margin) => {
+    margin: string | number | undefined;
+    marginTop: string | number | undefined;
+    marginBottom: string | number | undefined;
+    marginRight: string | number | undefined;
+    marginLeft: string | number | undefined;
+};
+export declare const positionProps: ({ position, top, bottom, right, left }: Position) => {
+    position: import("../types").PositionType | undefined;
+    top: string | number | undefined;
+    bottom: string | number | undefined;
+    right: string | number | undefined;
+    left: string | number | undefined;
+};

package/build/types/components/types.d.ts

@@ -0,0 +1,80 @@
+import { ElementType, FocusEvent } from 'react';
+export type { ThemeProp } from '../theme';
+export type Margin = {
+    margin?: number | string;
+    marginTop?: number | string;
+    marginBottom?: number | string;
+    marginRight?: number | string;
+    marginLeft?: number | string;
+};
+export type Padding = {
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingBottom?: number | string;
+    paddingRight?: number | string;
+    paddingLeft?: number | string;
+};
+export type PositionType = 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed';
+export type Position = {
+    position?: PositionType;
+    top?: number | string;
+    bottom?: number | string;
+    right?: number | string;
+    left?: number | string;
+};
+export type MinWidth = {
+    minWidth?: number | string;
+};
+export type MinHeight = {
+    minHeight?: number | string;
+};
+export type MaxWidth = {
+    maxWidth?: number | string;
+};
+export type MaxHeight = {
+    maxHeight?: number | string;
+};
+export type Width = {
+    width?: number | string;
+};
+export type Height = {
+    height?: number | string;
+};
+export type WidthHeight = Width & Height;
+export type MaxWidthHeight = MaxWidth & MaxHeight;
+export type MinWidthHeight = MinWidth & MinHeight;
+export type MarginPadding = Margin & Padding;
+export type FlexPosition = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type As = {
+    as?: ElementType<unknown>;
+};
+export type InputFocusEvent = FocusEvent<HTMLInputElement>;
+export type MergeField = {
+    id: string;
+    label: string;
+    value?: string;
+};
+export type InputRef = {
+    focus: () => void;
+    blur: () => void;
+    select: () => void;
+    hasFocus: boolean;
+};
+export type MultiSelectRef = Omit<InputRef, 'hasFocus' | 'select'>;
+export type AudioRef = {
+    play?: () => void;
+    pause?: () => void;
+    stop?: () => void;
+};
+export type DraftEditorRef = {
+    insertField: (field: MergeField) => void;
+    focusAtEnd: () => void;
+};
+type Top = 'top center' | 'top left' | 'top right';
+type Bottom = 'bottom center' | 'bottom left' | 'bottom right';
+type Left = 'left center' | 'left top' | 'left bottom';
+type Right = 'right center' | 'right top' | 'right bottom';
+export type PopSide = 'top' | 'bottom' | 'right' | 'left';
+export type PopPosition = PopSide | Top | Bottom | Left | Right;
+export type ArrowAlign = 'center' | 'start' | 'end';

package/build/types/global-styles/ResetStyles.d.ts

@@ -0,0 +1,9 @@
+import 'sanitize.css';
+type ResetStylesProps = {
+    /** An array of font families to pass to the font loader */
+    families?: string[];
+    /** The default font family to set */
+    fontFamily?: string;
+};
+declare const ResetStyles: ({ families, fontFamily }: ResetStylesProps) => import("react/jsx-runtime").JSX.Element;
+export default ResetStyles;

package/build/types/global-styles/ScrollbarStyles.d.ts

@@ -0,0 +1,2 @@
+declare const ScrollbarStyles: () => import("react/jsx-runtime").JSX.Element;
+export default ScrollbarStyles;

package/build/types/global-styles/ToastStyles.d.ts

@@ -0,0 +1,2 @@
+declare const ToastStyles: () => import("react/jsx-runtime").JSX.Element;
+export default ToastStyles;

package/build/types/global-styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ScrollbarStyles } from './ScrollbarStyles';
+export { default as ResetStyles } from './ResetStyles';
+export { default as ToastStyles } from './ToastStyles';

package/build/types/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { default as useOnClickOutside } from './useOnClickOutside';
+export { default as useWindowSize } from './useWindowSize';
+export { default as useSelectAll } from './useSelectAll';
+export { default as useEventListener } from './useEventListener';
+export { default as useSelect } from './useSelect';
+export { default as useElementObserver } from './useElementObserver';
+export { default as usePrevious } from './usePrevious';

package/build/types/hooks/useConfirm.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    header?: string;
+    text?: string;
+    cancelText?: string;
+    confirmText?: string;
+    input?: boolean;
+    inputLabel?: string;
+    inputPlaceholder?: string;
+    inputValue?: string;
+    negative?: boolean;
+};
+declare const useConfirm: ({ header, text, cancelText, confirmText, negative, input, inputLabel, inputPlaceholder, inputValue, }?: Props) => readonly [() => Promise<boolean | string>, () => import("react/jsx-runtime").JSX.Element];
+export default useConfirm;

package/build/types/hooks/useElementObserver.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * A React hook that fires a callback whenever ResizeObserver detects a change to its size
+ * @param target A React ref created by useRef()
+ * @param callback Invoked with a single HTMLElement any time the target resizes
+ */
+declare const useElementObserver: <T extends HTMLElement>(target: RefObject<T>, callback: (node: T) => void) => void;
+export default useElementObserver;

package/build/types/hooks/useEventListener.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useEventListener: <T extends Event>(element: MutableRefObject<HTMLElement> | HTMLElement | Document | Window, type: keyof WindowEventMap, listener: (event: T) => void, condition?: boolean, dependencies?: unknown[]) => void;
+export default useEventListener;

package/build/types/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useOnClickOutside: <T extends HTMLElement>(onClickOutside: () => void, condition?: boolean, exclusions?: string[]) => MutableRefObject<T | null>;
+export default useOnClickOutside;

package/build/types/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(value: T) => T;
+export default usePrevious;

package/build/types/hooks/useSelect.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { OptionItem, SetValueFunc } from '../components/Dropdown/DropdownUtils';
+type UseSelectProps<OptionType> = {
+    /** The options that will be displayed in the list */
+    options: OptionType[];
+    /** The function called when an option is selected */
+    select: SetValueFunc;
+    /** The function to close the open option list */
+    close: Function;
+    /** The function to open the closed option list */
+    open: Function;
+    /** The condition for when the list of options is open */
+    isOpen: boolean;
+    /** The condition for when the select element is focused */
+    isFocused?: boolean;
+    /** The text from a search Droppdown */
+    searchText?: string;
+};
+declare const useSelect: <OptionType extends OptionItem>({ options, select, close, open, searchText, isOpen, isFocused, }: UseSelectProps<OptionType>) => readonly [number, import("react").RefObject<HTMLDivElement>];
+export default useSelect;

package/build/types/hooks/useSelectAll.d.ts

@@ -0,0 +1,12 @@
+type ListItem = {
+    id: number | string;
+    [otherProps: string]: unknown;
+};
+declare const useSelectAll: (items: ListItem[], defaultSelected?: boolean) => {
+    list: ListItem[];
+    partial: boolean;
+    allSelected: boolean;
+    onSelectAll: (selectAll: boolean) => void;
+    onChildChange: (val: boolean, id: number | string) => void;
+};
+export default useSelectAll;

package/build/types/hooks/useWindowSize.d.ts

@@ -0,0 +1,5 @@
+declare const useWindowSize: () => {
+    width: number | null;
+    height: number | null;
+};
+export default useWindowSize;

package/build/types/index.d.ts

@@ -0,0 +1,64 @@
+export { default as Accordion } from './components/Accordion';
+export { default as Audio } from './components/Audio';
+export { default as BarChart } from './components/BarChart';
+export { default as Button } from './components/Button';
+export { default as Calendar } from './components/Calendar';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Code } from './components/Code';
+export { default as DocTable } from './components/DocTable';
+export { default as DraftEditor } from './components/DraftEditor';
+export { default as Dropdown } from './components/Dropdown';
+export { default as DropdownMenu } from './components/DropdownMenu';
+export { default as Form } from './components/Form';
+export { default as Grid } from './components/Grid';
+export { default as Icon } from './components/Icon';
+export { default as ImageViewer } from './components/ImageViewer';
+export { default as InlineCode } from './components/InlineCode';
+export { default as Input } from './components/Input';
+export { default as InputUtils } from './components/InputHelpers';
+export { default as Label } from './components/Label';
+export { default as LineChart } from './components/LineChart';
+export { default as Menu } from './components/Menu';
+export { default as Message } from './components/Message';
+export { default as MessageHr } from './components/MessageHr';
+export { default as Modal } from './components/Modal';
+export { default as MultiSelect } from './components/MultiSelect';
+export { default as Notification } from './components/Notification';
+export { default as Options } from './components/Options';
+export { default as Pagination } from './components/Pagination';
+export { default as PieChart } from './components/PieChart';
+export { default as Progress } from './components/Progress';
+export { default as Radio } from './components/Radio';
+export { default as ResetStyles } from './global-styles/ResetStyles';
+export { default as ScrollbarStyles } from './global-styles/ScrollbarStyles';
+export { default as ToastStyles } from './global-styles/ToastStyles';
+export { default as Slider } from './components/Slider';
+export { default as Spacer } from './components/Spacer';
+export { default as Spinner } from './components/Spinner';
+export { default as TransferList } from './components/TransferList';
+export { default as Table } from './components/Table';
+export { default as Toggle } from './components/Toggle';
+export { default as Tooltip } from './components/Tooltip';
+export { default as Tabs } from './components/Tabs';
+export { default as theme } from './theme';
+export { default as colors } from './theme/colors';
+export { default as darkScale } from './theme/darkScale';
+export { default as lightScale } from './theme/lightScale';
+export type { ITheme, ThemeProp } from './theme/ThemeTypes';
+export type { IconNames } from './components/Icon/icons';
+export type { TabItem } from './components/Tabs';
+export type { DropdownOption } from './components/Dropdown';
+export type { Item as TransferItem, Action as TransferAction, Next as TransferNext } from './components/TransferList';
+export type { AudioRef, DraftEditorRef, InputRef, MultiSelectRef, Margin, Padding, Position, MinWidth, MaxWidth, MinHeight, MaxHeight, MinWidthHeight, MaxWidthHeight, Width, Height, WidthHeight, MarginPadding, FlexPosition, As, } from './components/types';
+export { default as useEventListener } from './hooks/useEventListener';
+export { default as useOnClickOutside } from './hooks/useOnClickOutside';
+export { default as useSelect } from './hooks/useSelect';
+export { default as useSelectAll } from './hooks/useSelectAll';
+export { default as useWindowSize } from './hooks/useWindowSize';
+export { default as useConfirm } from './hooks/useConfirm';
+export { default as useElementObserver } from './hooks/useElementObserver';
+export { default as usePrevious } from './hooks/usePrevious';
+export { default as formatDate } from './utils/formatDate';
+export { default as copyToClipboard } from './utils/copyToClipboard';
+export { default as numberWithCommas } from './utils/numberWithCommas';
+export { widthHeightProps, paddingProps, marginProps, positionProps } from './components/helpers/styledProps';

package/build/types/theme/ThemeTypes.d.ts

@@ -0,0 +1,294 @@
+import { IColors } from './colors';
+type ButtonSize = {
+    height: number;
+    iconSize: number;
+    font: number;
+    padding: number;
+    iconOnlyPadding: number;
+};
+type LinkColors = {
+    secondaryColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    positiveColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    negativeColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    cautionColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+};
+export type ButtonState = {
+    color: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    outlineColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    outlineBackground: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    border: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    divider: string;
+};
+export interface ITheme {
+    name: 'light' | 'dark';
+    accent: string;
+    accentShade: string;
+    background0: string;
+    background1: string;
+    background2: string;
+    background3: string;
+    background4: string;
+    background5: string;
+    /** 5% opacity */
+    scale0: string;
+    /** 10% opacity */
+    scale1: string;
+    /** 20% opacity */
+    scale2: string;
+    /** 30% opacity */
+    scale3: string;
+    /** 40% opacity */
+    scale4: string;
+    /** 50% opacity */
+    scale5: string;
+    /** 60% opacity */
+    scale6: string;
+    /** 70% opacity */
+    scale7: string;
+    /** 80% opacity */
+    scale8: string;
+    /** 90% opacity */
+    scale9: string;
+    /** 100% opacity */
+    scale10: string;
+    button: {
+        small: ButtonSize;
+        medium: ButtonSize;
+        large: ButtonSize;
+        primary: ButtonState;
+        secondary: ButtonState;
+        negative: ButtonState;
+        positive: ButtonState;
+        caution: ButtonState;
+        subtle: ButtonState & LinkColors;
+        link: ButtonState & LinkColors;
+        disabled: ButtonState;
+        color: {
+            default: string;
+        };
+    };
+    calendar: {
+        background: {
+            container: string;
+            hover: string;
+            active: string;
+            activeHover: string;
+        };
+        color: {
+            disabled: string;
+            default: string;
+            active: string;
+            current: string;
+            outside: string;
+            weekday: string;
+            monthYear: string;
+            iconDefault: string;
+            iconHover: string;
+        };
+    };
+    color: IColors;
+    defaultBorder: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.05)' */
+    elevation0: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.1)' */
+    elevation1: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.15)' */
+    elevation2: string;
+    /** '0px 4px 8px 2px rgba(0, 0, 0, 0.2)' */
+    elevation3: string;
+    /** '0px 4px 8px 2px rgba(0, 0, 0, 0.25)' */
+    elevation4: string;
+    size: {
+        /** 4px */
+        xs: number;
+        /** 8px */
+        sm: number;
+        /** 16px */
+        md: number;
+        /** 24px */
+        lg: number;
+    };
+    font: {
+        weight: {
+            /** 400 */
+            default: number;
+            /** 500 */
+            medium: number;
+            /** 600 */
+            semiBold: number;
+            /** 700 */
+            bold: number;
+        };
+        size: {
+            /** 10px */
+            xs: number;
+            /** 12px */
+            sm: number;
+            /** 14px */
+            md: number;
+            /** 16px */
+            lg: number;
+            /** 18px */
+            xl: number;
+        };
+        family: {
+            /** "'Roboto', sans-serif" */
+            default: string;
+            /** "'Roboto', sans-serif" */
+            medium: string;
+            /** "'Roboto', sans-serif" */
+            light: string;
+        };
+    };
+    formControl: {
+        color: {
+            default: string;
+            hover: string;
+            active: string;
+            activeHover: string;
+            disabled: string;
+        };
+    };
+    input: {
+        borderRadius: number;
+        background: {
+            default: string;
+            hover: string;
+            focused: string;
+            disabled: string;
+        };
+        color: {
+            default: string;
+            disabled: string;
+            placeholder: string;
+            description: string;
+            descriptionError: string;
+        };
+        borderColor: {
+            default: string;
+            hover: string;
+            focused: string;
+            disabled: string;
+            error: string;
+        };
+        labelColor: {
+            default: string;
+            hover: string;
+            filled: string;
+            focused: string;
+            disabled: string;
+        };
+    };
+    menu: {
+        background: string;
+    };
+    menuItem: {
+        borderColor: string;
+        background: {
+            active: string;
+            hover: string;
+            inactive: string;
+        };
+        color: {
+            active: string;
+            hover: string;
+            inactive: string;
+        };
+    };
+    modal: {
+        background: string;
+        color: {
+            header: string;
+            body: string;
+        };
+    };
+    options: {
+        background: string;
+    };
+    optionItem: {
+        background: {
+            active: string;
+            inactive: string;
+        };
+        color: {
+            active: string;
+            inactive: string;
+            accent: string;
+        };
+    };
+    table: {
+        color: {
+            header: string;
+            body: string;
+        };
+        borderColor: string;
+    };
+    toast: {
+        color: string;
+        background: {
+            deafult: string;
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        border: {
+            deafult: string;
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+    };
+    toggle: {
+        slider: string;
+    };
+    tooltip: {
+        background: string;
+        color: {
+            default: string;
+            subtext: string;
+        };
+    };
+}
+export type ThemeProp = {
+    theme?: ITheme;
+};
+export {};