@mackin.com/styleguide 7.2.0 → 7.2.1

package/index.d.ts

@@ -904,4 +904,33 @@ declare const Backdrop: (p: {
 
 declare const useMediaQuery: (query: string) => boolean;
 
-export { Alignment, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
+interface AutoCompleteItem {
+    id: string | number;
+    name: string;
+}
+declare type AutocompleteValue = string | AutoCompleteItem;
+interface AutocompleteProps {
+    value: AutocompleteValue | undefined;
+    round?: boolean;
+    rounded?: boolean;
+    rightControl?: JSX.Element;
+    placeholder?: string;
+    id?: string;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    /** If not set, defaults to 100 */
+    maxLength?: number;
+    required?: boolean;
+    /** Limits what will be show in the autocomplete options. Default is 7. */
+    maxShownValues?: number;
+    /** The minimum characters before 'getOptions' is called.  No default. */
+    minChars?: number;
+    onChange: (value: string) => void;
+    getOptions: (value: string) => Promise<AutocompleteValue[]>;
+    onPick: (value: AutocompleteValue) => void;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+declare const Autocomplete: (p: AutocompleteProps) => JSX.Element;
+
+export { Alignment, Autocomplete, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };

package/index.js

@@ -3358,6 +3358,98 @@ const Backdrop = (props) => {
         }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
+const DEFAULT_MAX_SHOWN_VALUES = 7;
+const getAutocompleteValueText = (v) => {
+    if (!v) {
+        return '';
+    }
+    if (typeof v === 'string') {
+        return v;
+    }
+    return v.name;
+};
+const getAutocompleteValueId = (v) => {
+    if (typeof v === 'string') {
+        return v;
+    }
+    return v.id;
+};
+const Autocomplete = (p) => {
+    const element = React__namespace.useRef(null);
+    const input = React__namespace.useRef(null);
+    const [values, setValues] = React__namespace.useState([]);
+    const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
+    const shownValues = React__namespace.useMemo(() => {
+        var _a;
+        return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
+    }, [values]);
+    const theme = useThemeSafely();
+    const baseClass = css.css `
+		label: Autocomplete;
+		position: relative;
+		width: 100%;
+	`;
+    const listClass = css.css `
+		position: absolute;
+		width: 100%;
+		border: ${theme.controls.border};
+		box-shadow: ${theme.controls.boxShadow};
+		background-color: ${theme.colors.bg};
+		margin-top: -4px !important;
+		z-index: ${theme.zIndexes.backdrop};
+		${p.round || p.rounded && `
+			border-radius: ${theme.controls.roundedRadius};
+		`}
+	`;
+    const inputClass = css.css `
+		${showValues && `
+			z-index: ${theme.zIndexes.backdrop};
+			position: relative;
+		`}
+	`;
+    return (React__namespace.createElement("div", { ref: element, className: css.cx(baseClass, 'autocomplete') },
+        React__namespace.createElement(Backdrop, { onClick: () => setValues([]), show: showValues, allowScroll: true, transparent: true }),
+        React__namespace.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
+            React__namespace.createElement(Input, { ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rounded: p.rounded, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: css.cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
+                    const value = v;
+                    p.onChange(value);
+                    if (!p.minChars || value.length >= p.minChars) {
+                        p.getOptions(value)
+                            .then(vals => {
+                            setValues(vals);
+                        }).catch(err => {
+                            // ignore it
+                        });
+                    }
+                    else {
+                        setValues([]);
+                    }
+                }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
+            showValues && (React__namespace.createElement(List, { className: listClass },
+                shownValues.map(value => {
+                    return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
+                        React__namespace.createElement(Button, { onClick: () => {
+                                p.onPick(value);
+                                setValues([]);
+                                setTimeout(() => {
+                                    var _a;
+                                    // we need to wait until the component is re-rendered.
+                                    // outside changes to Inputs will be ignored if the component has focus.
+                                    (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }, 0);
+                            } },
+                            React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, getAutocompleteValueText(value)))));
+                }),
+                shownValues.length < values.length && (React__namespace.createElement(ListItem, null,
+                    React__namespace.createElement(Text, { tag: "div", italics: true, align: "center" },
+                        "Showing ",
+                        shownValues.length.toLocaleString(),
+                        " of ",
+                        values.length.toLocaleString(),
+                        " results."))))))));
+};
+
+exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop;
 exports.Backdrop2 = Backdrop$1;
 exports.BoundMemoryPager = BoundMemoryPager;

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "7.2.0",
+	"version": "7.2.1",
 	"description": "",
 	"main": "./index.js",
-"types": "./index.d.ts",
+	"types": "./index.d.ts",
 	"scripts": {},
 	"author": "Mackin",
 	"license": "ISC",