@mackin.com/styleguide 9.1.0 → 9.2.2

package/index.d.ts

@@ -1090,4 +1090,42 @@ declare const TabContainer: (p: TabContainerProps) => JSX.Element;
 /** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
 declare const modalScrollFixClassName = "modal-scroll-fix";
 
-export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, SliderProps, SliderValue, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+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;
+}
+
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteController, AutocompleteEntityController, AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, SliderProps, SliderValue, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -4655,8 +4655,132 @@ const TabContainer = (p) => {
             }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
 };
 
+const defaultMinChars = 3;
+class AutocompleteController {
+    constructor(getOptions, config) {
+        var _a;
+        this._value = undefined;
+        this._options = [];
+        this._minChars = (_a = config === null || config === void 0 ? void 0 : config.minChars) !== null && _a !== void 0 ? _a : defaultMinChars;
+        if (config === null || config === void 0 ? void 0 : config.debounceMs) {
+            this.getOptions = createDebouncedPromise(getOptions, config === null || config === void 0 ? void 0 : config.debounceMs);
+        }
+        else {
+            this.getOptions = getOptions;
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    get options() {
+        return this._options;
+    }
+    async onChange(newValue) {
+        // don't make getOptions calls if the value hasn't changed.
+        if (newValue === this.value) {
+            return;
+        }
+        // nullish should not make the getOptions call and instead clear everything.
+        if (!newValue) {
+            this._value = newValue;
+            this._options = [];
+            return;
+        }
+        // sub min chars should clear everything and not attempt the getOptions call.
+        if (newValue.length < this._minChars) {
+            this._value = newValue;
+            this._options = [];
+            return;
+        }
+        try {
+            this._value = newValue;
+            this._options = (await this.getOptions(newValue));
+        }
+        catch (err) {
+            // this method will throw errors on debounce rejections. that is to be expected.
+            // for actual getOptions exceptions, the owner of that function will need to handle errors.
+        }
+    }
+    onPick(newValue) {
+        this._value = newValue;
+        this._options = [];
+    }
+}
+const createDebouncedPromise = (originalFunction, trailingTimeoutMs) => {
+    let timer;
+    let onCancel;
+    return (value) => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        if (onCancel) {
+            onCancel('Promise cancelled due to in-progress debounce call.');
+            onCancel = undefined;
+        }
+        return new Promise((res, rej) => {
+            onCancel = rej;
+            timer = setTimeout(() => {
+                originalFunction(value)
+                    .then(values => {
+                    res(values);
+                })
+                    .catch(err => {
+                    rej(err);
+                })
+                    .finally(() => {
+                    clearTimeout(timer);
+                });
+            }, trailingTimeoutMs);
+        });
+    };
+};
+
+/** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
+class AutocompleteEntityController {
+    constructor(getOptions, config) {
+        this._options = [];
+        const getStringOptions = async (value) => {
+            this._options = await getOptions(value);
+            return this._options.map(o => o.name);
+        };
+        this._ctrl = new AutocompleteController(getStringOptions, config);
+    }
+    get entity() {
+        return this._pickedEntity;
+    }
+    get entities() {
+        return this._options;
+    }
+    get value() {
+        return this._ctrl.value;
+    }
+    get options() {
+        return this._options.map(o => o.name);
+    }
+    async onChange(newValue) {
+        const clearEntity = newValue !== this._ctrl.value;
+        await this._ctrl.onChange(newValue);
+        if (clearEntity) {
+            this._pickedEntity = undefined;
+        }
+        this.trySyncCtrlOptions();
+    }
+    onPick(newValue) {
+        this._ctrl.onPick(newValue);
+        this._pickedEntity = this._options.find(o => o.name === this._ctrl.value);
+        this.trySyncCtrlOptions();
+    }
+    trySyncCtrlOptions() {
+        if (!this._ctrl.options.length) {
+            this._options = [];
+        }
+    }
+}
+
 exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
+exports.AutocompleteController = AutocompleteController;
+exports.AutocompleteEntityController = AutocompleteEntityController;
 exports.Backdrop = Backdrop$1;
 exports.Backdrop2 = Backdrop;
 exports.BoundMemoryPager = BoundMemoryPager;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "9.1.0",
+    "version": "9.2.2",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",