@mackin.com/styleguide 9.1.0 → 9.2.0

package/index.d.ts

@@ -1090,4 +1090,43 @@ 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;
+}
+
+/** Extracted logic around autocomplete functionality for Autocomplete.tsx. */
+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,106 @@ const TabContainer = (p) => {
             }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
 };
 
+const defaultMinChars = 3;
+/** Extracted logic around autocomplete functionality for Autocomplete.tsx. */
+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 = lodash.debounce(getOptions, config.debounceMs, {
+                leading: false,
+                trailing: true
+            });
+        }
+        else {
+            this.getOptions = getOptions;
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    get options() {
+        return this._options;
+    }
+    async onChange(newValue) {
+        var _a;
+        // 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;
+            // debounce (if used) will return undefined until the actual function is executed.
+            // after that it will return the result of the last execution.
+            this._options = (_a = (await this.getOptions(newValue))) !== null && _a !== void 0 ? _a : [];
+        }
+        catch (err) {
+            // the getOptions method needs to handle it's own errors
+        }
+    }
+    onPick(newValue) {
+        this._value = newValue;
+        this._options = [];
+    }
+}
+
+/** 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) {
+        await this._ctrl.onChange(newValue);
+        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.0",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",