@mackin.com/styleguide 11.0.12 → 11.2.0

package/index.d.ts

@@ -65,6 +65,44 @@ interface AutocompleteProps extends BaseInputProps$1 {
 }
 declare const Autocomplete: (p: AutocompleteProps) => React.JSX.Element;
 
+interface AutoCompleteConfig {
+    /** Number of characters entered before getOptions is called.  Defaults to 3. */
+    minChars?: number;
+    /** Number of ms to debounce prior to calling getOptions on change.  Defaults to no debounce. */
+    debounceMs?: number;
+}
+
+declare class AutocompleteController {
+    constructor(getOptions: (value: string | undefined) => Promise<string[]>, config?: AutoCompleteConfig);
+    get value(): string | undefined;
+    get options(): string[];
+    onChange(newValue: string | undefined): Promise<void>;
+    onPick(newValue: string | undefined): void;
+    private readonly getOptions;
+    private readonly _minChars;
+    private _value;
+    private _options;
+}
+
+/** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
+declare class AutocompleteEntityController<T extends string | number> {
+    constructor(getOptions: (value: string | undefined) => Promise<Entity<T>[]>, config?: AutoCompleteConfig);
+    get entity(): Entity<T> | undefined;
+    get entities(): Entity<T>[];
+    get value(): string | undefined;
+    get options(): string[];
+    onChange(newValue: string | undefined): Promise<void>;
+    onPick(newValue: string | undefined): void;
+    private _ctrl;
+    private _pickedEntity;
+    private _options;
+    private trySyncCtrlOptions;
+}
+interface Entity<T extends string | number> {
+    id: T;
+    name: string;
+}
+
 /** @deprecated Use Backdrop2 going forward. */
 declare const Backdrop$1: (props: {
     show: boolean;
@@ -375,9 +413,6 @@ interface TextInputProps extends BaseProps$2 {
 }
 declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-/** useEffect but ignores the first call on component mount. */
-declare const useIgnoreMount: (effect: React__default.EffectCallback, deps?: React__default.DependencyList | undefined) => void;
-
 interface LabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
     text: string | JSX.Element;
     /** Displays the label NOT using a label element. */
@@ -397,6 +432,39 @@ interface LabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<H
 }
 declare const Label: (props: LabelProps) => React.JSX.Element;
 
+interface LinkContentProps {
+    rightIcon?: JSX.Element;
+    leftIcon?: JSX.Element;
+    children?: ReactNode;
+    waiting?: boolean;
+}
+
+interface LinkProps extends LinkContentProps, React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+    href: string;
+    block?: boolean;
+    /** Full width with max space between the text and the icon */
+    iconBlock?: boolean;
+    /** Corresponds to the button variants of the same name. */
+    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative' | 'text';
+    /** Only for button variants. */
+    round?: boolean;
+    /** Only for button variants. */
+    small?: boolean;
+    /** Only for button variants. */
+    waiting?: boolean;
+    disabled?: boolean;
+    /** Overrides the `theme.colors.link` for non-button variants or `theme.colors.font` for the `button` variant.  Does not apply to themed button variants like `primary`. */
+    colorOverride?: string;
+}
+declare const Link: (props: LinkProps) => React.JSX.Element;
+
+interface OmniLinkProps extends LinkProps {
+    noRouter?: boolean;
+    /** Ignored if 'noRouter' is false */
+    target?: string;
+}
+declare const OmniLink: (props: OmniLinkProps) => React.JSX.Element;
+
 interface ListProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
     altRowColor?: boolean;
     noLines?: boolean;
@@ -455,13 +523,6 @@ declare const Nav: (props: {
     __debug?: boolean;
 }) => React.JSX.Element;
 
-interface OmniLinkProps extends LinkProps {
-    noRouter?: boolean;
-    /** Ignored if 'noRouter' is false */
-    target?: string;
-}
-declare const OmniLink: (props: OmniLinkProps) => React.JSX.Element;
-
 interface PagedResultDto<T> {
     total: number;
     /** The zero-based page index. */
@@ -640,11 +701,35 @@ interface Props<T> extends PagerStyleProps {
 declare const BoundStaticPager: <T>(p: Props<T>) => React.JSX.Element;
 
 type PickerValue = string | number;
+
 type PickerOption<T> = T | {
     id: T;
     name?: string;
 };
-interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options' | 'string'> {
+
+interface SelectProps$1 extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options' | 'string' | 'multiple'> {
+}
+interface MultiPickerProps<T extends PickerValue> extends SelectProps$1 {
+    value: T[];
+    options: PickerOption<T>[];
+    onValueChange: (values: T[]) => void;
+    readOnly?: boolean;
+    /** If true, bottom spacing will be added to account for other inputs having space for error messages.
+     * If you plan on using 'error', make sure this is also set to true so the spacing is not added and removed when the error message is toggled.
+     */
+    controlAlign?: boolean;
+    /** An error message to display below the input.  If set, 'controlAlign' will be ignored and default to 'true'. */
+    error?: string;
+    /** This will be applied to the select element. */
+    className?: string;
+    /** Applies to the outer wrapper which contains the select and other elements. */
+    wrapperClassName?: string;
+    /** Applied to each option. */
+    optionClassName?: string;
+}
+declare const MultiPicker: <T extends PickerValue>(props: MultiPickerProps<T>) => React.JSX.Element;
+
+interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options' | 'string' | 'multiple'> {
 }
 interface PickerProps<T extends PickerValue> extends SelectProps {
     value: T;
@@ -664,6 +749,8 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
     wrapperClassName?: string;
     /** Applies to the custom down arrow. */
     iconClassName?: string;
+    /** Applied to each option. */
+    optionClassName?: string;
 }
 declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => React.JSX.Element;
 
@@ -746,13 +833,46 @@ interface SearchBoxProps extends BaseProps$1 {
     noSubmitWhenEmpty?: boolean;
     /** The submit button will change to clear if present and there is a value. */
     onClear?: () => void;
+    /** Not localized.  Defaults to 'Search'. */
+    searchButtonAriaLabel?: string;
+    /** Not localized.  Defaults to 'Clear'. */
+    clearButtonAriaLabel?: string;
 }
 declare const SearchBox: React.ForwardRefExoticComponent<Omit<SearchBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 type Alignment = 'left' | 'right' | 'center';
 
+/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
+declare const enumToEntities: <T extends {
+    [key: string]: string | number;
+}>(enumObj: T) => {
+    id: string | number;
+    name: string;
+}[];
+
+/** Displays the value in American dollars. */
+declare const getCurrencyDisplay: (value: number, isCents?: boolean, denomination?: string) => string;
+
 declare const GlobalStyles: () => null;
 
+declare enum StyleGuideLanguage {
+    English = 0,
+    Spanish = 1,
+    French = 2
+}
+
+declare const LocalizationProvider: (p: {
+    children: React__default.ReactNode;
+    language: StyleGuideLanguage;
+    __debug?: boolean;
+}) => React__default.JSX.Element;
+
+/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
+declare const modalScrollFixClassName = "modal-scroll-fix";
+
+/** Resets certain styles so there is more consistancy between browsers. */
+declare const NormalizeCss: () => null;
+
 interface MackinTheme {
     colors: {
         primary: string;
@@ -870,14 +990,45 @@ declare const ThemeProvider: <T extends MackinTheme>(p: {
     theme: T;
 }) => React__default.JSX.Element;
 
+interface ThemeRendererProps extends MackinTheme {
+    backgroundColor?: string;
+    color?: string;
+}
+declare const ThemeRenderer: (p: ThemeRendererProps) => React.JSX.Element;
+
+/** Allows for status notificaiton methods for screen readers.
+ * This hook does not have any dependencies, so it can be used in projects that don't important anything else from the style_guide. */
+declare function useAriaLiveRegion(): {
+    /**
+     * @param message - The text to be read by the screen reader.
+     * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`.
+     */
+    notify: (message: string, clearTimoutMs?: number) => void;
+    clearNotification: () => void;
+};
+
+/** useEffect but it will only fire when the actual truthiness of the value changes.
+ * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
+*/
+declare const useBooleanChanged: (effect: (current: boolean, previous: boolean) => void, dep: boolean | undefined) => void;
+
+/** useEffect but ignores the first call on component mount. */
+declare const useIgnoreMount: (effect: React__default.EffectCallback, deps?: React__default.DependencyList | undefined) => void;
+
 /** React wrapper around window resizing and window.matchMedia.
  * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  */
 declare const useMediaQuery: (query: string) => boolean;
 
+/** Tells you actual width of the scroll bar.  This can vary by browser. */
+declare const useScrollbarSize: (recalc?: boolean) => number;
+
 /** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
 declare const useThemeSafely: () => MackinTheme;
 
+/** Provides stateful notifications around async calls. */
+declare const useWaiting: <TArgs extends unknown[], TReturn>(func: (...args: TArgs) => Promise<TReturn>) => [boolean, (...args: TArgs) => Promise<TReturn>];
+
 type SliderValue = number | [number, number];
 interface SliderProps<T extends SliderValue> {
     min: number;
@@ -916,6 +1067,35 @@ interface SliderProps<T extends SliderValue> {
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => React__default.JSX.Element;
 
+interface TabContainerProps {
+    /** Required for generating element IDs for ARIA. */
+    id: string;
+    ariaLabel: string;
+    tabs: {
+        name: string | JSX.Element;
+        /** The HTML title of the tab button.  Defaults to 'name' prop. */
+        title?: string;
+        getContent: () => JSX.Element;
+    }[];
+    /** Defaults to 10rem. */
+    maxTabWidth?: string;
+    /** Defaults to 'tab'. */
+    variant?: 'tab' | 'button';
+    contentClassName?: string;
+    /** This is applied to the `containerClassName` prop of TabHeader. */
+    tabHeaderClassName?: string;
+    /** This is applied to the `tabClassName` prop of TabHeader. */
+    tabClassName?: string;
+    /** This is applied to the `tabHeaderDividerClassName` prop of TabHeader. */
+    tabHeaderDividerClassName?: string;
+    /** Defaults to 0. */
+    startingIndex?: number;
+    onTabChanged?: (tabIndex: number) => void;
+    /** If present, tab change will be delayed until this method resolves. */
+    onBeforeTabChanged?: (tabIndex: number) => Promise<void>;
+}
+declare const TabContainer: (p: TabContainerProps) => React.JSX.Element;
+
 interface TabHeaderTabProps {
     name: string | JSX.Element;
     /** The HTML title of the tab button.  Defaults to 'name' prop. */
@@ -1092,154 +1272,4 @@ declare const WaitingIndicator: (p: {
     __debug?: boolean;
 }) => React__default.JSX.Element;
 
-/** Tells you actual width of the scroll bar.  This can vary by browser. */
-declare const useScrollbarSize: (recalc?: boolean) => number;
-
-/** Provides stateful notifications around async calls. */
-declare const useWaiting: <TArgs extends unknown[], TReturn>(func: (...args: TArgs) => Promise<TReturn>) => [boolean, (...args: TArgs) => Promise<TReturn>];
-
-/** useEffect but it will only fire when the actual truthiness of the value changes.
- * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
-*/
-declare const useBooleanChanged: (effect: (current: boolean, previous: boolean) => void, dep: boolean | undefined) => void;
-
-/** Resets certain styles so there is more consistancy between browsers. */
-declare const NormalizeCss: () => null;
-
-/** Displays the value in American dollars. */
-declare const getCurrencyDisplay: (value: number, isCents?: boolean, denomination?: string) => string;
-
-/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
-declare const enumToEntities: <T extends {
-    [key: string]: string | number;
-}>(enumObj: T) => {
-    id: string | number;
-    name: string;
-}[];
-
-interface LinkContentProps {
-    rightIcon?: JSX.Element;
-    leftIcon?: JSX.Element;
-    children?: ReactNode;
-    waiting?: boolean;
-}
-
-interface LinkProps extends LinkContentProps, React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
-    href: string;
-    block?: boolean;
-    /** Full width with max space between the text and the icon */
-    iconBlock?: boolean;
-    /** Corresponds to the button variants of the same name. */
-    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative' | 'text';
-    /** Only for button variants. */
-    round?: boolean;
-    /** Only for button variants. */
-    small?: boolean;
-    /** Only for button variants. */
-    waiting?: boolean;
-    disabled?: boolean;
-    /** Overrides the `theme.colors.link` for non-button variants or `theme.colors.font` for the `button` variant.  Does not apply to themed button variants like `primary`. */
-    colorOverride?: string;
-}
-declare const Link: (props: LinkProps) => React.JSX.Element;
-
-interface ThemeRendererProps extends MackinTheme {
-    backgroundColor?: string;
-    color?: string;
-}
-declare const ThemeRenderer: (p: ThemeRendererProps) => React.JSX.Element;
-
-interface TabContainerProps {
-    /** Required for generating element IDs for ARIA. */
-    id: string;
-    ariaLabel: string;
-    tabs: {
-        name: string | JSX.Element;
-        /** The HTML title of the tab button.  Defaults to 'name' prop. */
-        title?: string;
-        getContent: () => JSX.Element;
-    }[];
-    /** Defaults to 10rem. */
-    maxTabWidth?: string;
-    /** Defaults to 'tab'. */
-    variant?: 'tab' | 'button';
-    contentClassName?: string;
-    /** This is applied to the `containerClassName` prop of TabHeader. */
-    tabHeaderClassName?: string;
-    /** This is applied to the `tabClassName` prop of TabHeader. */
-    tabClassName?: string;
-    /** This is applied to the `tabHeaderDividerClassName` prop of TabHeader. */
-    tabHeaderDividerClassName?: string;
-    /** Defaults to 0. */
-    startingIndex?: number;
-    onTabChanged?: (tabIndex: number) => void;
-    /** If present, tab change will be delayed until this method resolves. */
-    onBeforeTabChanged?: (tabIndex: number) => Promise<void>;
-}
-declare const TabContainer: (p: TabContainerProps) => React.JSX.Element;
-
-/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
-declare const modalScrollFixClassName = "modal-scroll-fix";
-
-interface AutoCompleteConfig {
-    /** Number of characters entered before getOptions is called.  Defaults to 3. */
-    minChars?: number;
-    /** Number of ms to debounce prior to calling getOptions on change.  Defaults to no debounce. */
-    debounceMs?: number;
-}
-
-declare class AutocompleteController {
-    constructor(getOptions: (value: string | undefined) => Promise<string[]>, config?: AutoCompleteConfig);
-    get value(): string | undefined;
-    get options(): string[];
-    onChange(newValue: string | undefined): Promise<void>;
-    onPick(newValue: string | undefined): void;
-    private readonly getOptions;
-    private readonly _minChars;
-    private _value;
-    private _options;
-}
-
-/** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
-declare class AutocompleteEntityController<T extends string | number> {
-    constructor(getOptions: (value: string | undefined) => Promise<Entity<T>[]>, config?: AutoCompleteConfig);
-    get entity(): Entity<T> | undefined;
-    get entities(): Entity<T>[];
-    get value(): string | undefined;
-    get options(): string[];
-    onChange(newValue: string | undefined): Promise<void>;
-    onPick(newValue: string | undefined): void;
-    private _ctrl;
-    private _pickedEntity;
-    private _options;
-    private trySyncCtrlOptions;
-}
-interface Entity<T extends string | number> {
-    id: T;
-    name: string;
-}
-
-declare enum StyleGuideLanguage {
-    English = 0,
-    Spanish = 1,
-    French = 2
-}
-
-declare const LocalizationProvider: (p: {
-    children: React__default.ReactNode;
-    language: StyleGuideLanguage;
-    __debug?: boolean;
-}) => React__default.JSX.Element;
-
-/** Allows for status notificaiton methods for screen readers.
- * This hook does not have any dependencies, so it can be used in projects that don't important anything else from the style_guide. */
-declare function useAriaLiveRegion(): {
-    /**
-     * @param message - The text to be read by the screen reader.
-     * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`.
-     */
-    notify: (message: string, clearTimoutMs?: number) => void;
-    clearNotification: () => void;
-};
-
-export { Accordion, type AccordionProps, type Alignment, Autocomplete, AutocompleteController, AutocompleteEntityController, type AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, ConfirmModal, type ConfirmModalProps, CopyButton, DateInput, type DateInputProps, DialogPopover, type DialogPopoverProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, type FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, type ImageProps, InfoPanel, InfoTip, type InfoTipProps, ItemPager, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, LocalizationProvider, type MackinTheme, Modal, type ModalProps, Nav, NormalizeCss, NumberInput, type NumberInputProps, OmniLink, type OmniLinkProps, PagedResult, type PagedResultDto, Pager, type PagerProps, Picker, type PickerOption, type PickerProps, type PickerValue, ProgressBar, type ProgressBarProps, SearchBox, type SearchBoxProps, Slider, type SliderProps, type SliderValue, StyleGuideLanguage, TabContainer, type TabContainerProps, TabHeader, type TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, TogglePasswordInput, TooltipPopover, type TooltipPopoverProps, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordionState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+export { Accordion, type AccordionProps, type Alignment, Autocomplete, AutocompleteController, AutocompleteEntityController, type AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, ConfirmModal, type ConfirmModalProps, CopyButton, DateInput, type DateInputProps, DialogPopover, type DialogPopoverProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, type FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, type ImageProps, InfoPanel, InfoTip, type InfoTipProps, ItemPager, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, LocalizationProvider, type MackinTheme, Modal, type ModalProps, MultiPicker, type MultiPickerProps, Nav, NormalizeCss, NumberInput, type NumberInputProps, OmniLink, type OmniLinkProps, PagedResult, type PagedResultDto, Pager, type PagerProps, Picker, type PickerOption, type PickerProps, type PickerValue, ProgressBar, type ProgressBarProps, SearchBox, type SearchBoxProps, Slider, type SliderProps, type SliderValue, StyleGuideLanguage, TabContainer, type TabContainerProps, TabHeader, type TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, TogglePasswordInput, TooltipPopover, type TooltipPopoverProps, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordionState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };