@mackin.com/styleguide 7.1.1 → 7.3.0

package/index.d.ts

@@ -268,9 +268,11 @@ declare const Header: (props: {
     toggleMenu?: () => void | undefined;
     /** If true, will hide menu button on larger screens */
     responsive?: boolean;
-    rightElements?: JSX.Element;
     inline?: boolean;
     className?: string;
+    leftElements?: JSX.Element;
+    rightElements?: JSX.Element;
+    /** Elements will appear in the center of the header and slightly below. */
     centerOffsetElements?: JSX.Element;
     noMenu?: boolean;
     /** Will fill the title center aligned with wrapping. */
@@ -345,10 +347,14 @@ interface InputProps {
     debounceMs?: number;
     /** Defaults to 'off'. */
     autoComplete?: string;
+    autoFocus?: boolean;
     /** Called with debounce when the input changes. */
     onChange?: (value: InputValue, name?: string) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Defaults to 100. Ignored for type=number and type=date. */
     maxLength?: number;
     /** Ignored for type=textarea. */
@@ -685,6 +691,8 @@ interface MackinTheme {
     fonts: {
         family: string;
         size: string;
+        sizeSmall: string;
+        sizeLarge: string;
         headerFamily: string;
     };
     controls: {
@@ -901,4 +909,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

@@ -108,6 +108,8 @@ const defaultTheme = {
     fonts: {
         family: 'Arial, Helvetica, sans-serif',
         size: '16px',
+        sizeSmall: '0.7rem',
+        sizeLarge: '1.3rem',
         headerFamily: 'Arial, Helvetica, sans-serif',
     },
     controls: {
@@ -567,7 +569,7 @@ const Text = (props) => {
     const styles = css.css({
         userSelect: 'text',
         label: 'Text'
-    }, tagStyles[tagChoice], alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: '0.7rem' }, props.larger && { fontSize: '1.3rem' }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
+    }, tagStyles[tagChoice], alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: theme.fonts.sizeSmall }, props.larger && { fontSize: theme.fonts.sizeLarge }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
@@ -800,7 +802,6 @@ const Pager = (props) => {
 			display: block;
 		}
 	`;
-    //TB: check this after fixing buttons
     const buttonStyles = css.css({
         backgroundColor: 'transparent'
     });
@@ -1636,7 +1637,6 @@ const FormColumnRow = (props) => {
         }), props.className) }, props.children));
 };
 
-//TB: have a sticky variant
 const Header = (props) => {
     const theme = useThemeSafely();
     const bodyStyles = css.css `
@@ -1696,6 +1696,12 @@ const Header = (props) => {
 		grid-auto-flow: column;
 		align-items: center;
 	`;
+    const leftElementStyles = props.leftElements && css.css({
+        display: 'grid',
+        gap: '0.5rem',
+        gridAutoFlow: 'column',
+        alignItems: 'center'
+    });
     const centerElementsStyles = props.centerOffsetElements && css.css `
 		position: absolute;
 		display: flex;
@@ -1721,6 +1727,7 @@ const Header = (props) => {
     return (React__namespace.createElement("div", { className: css.cx('header', headerStyles, props.className) },
         !props.noMenu && (React__namespace.createElement(Button, { variant: "icon", className: headerButtonStyles, onClick: toggleMenu },
             React__namespace.createElement(Icon, { id: "menu" }))),
+        props.leftElements && React__namespace.createElement("div", { className: leftElementStyles }, props.leftElements),
         title,
         props.rightElements && React__namespace.createElement("div", { className: rightElementStyles }, props.rightElements),
         props.centerOffsetElements && (React__namespace.createElement("div", { className: centerElementsStyles },
@@ -2033,24 +2040,24 @@ const Input = React__namespace.forwardRef((props, ref) => {
         };
     }
     if (props.type === 'number') {
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
             // set fixed default to defeat pasting stupid numbers
-            maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+            maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else if (props.type === 'date') {
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else if (props.type === 'textarea') {
-        inputElement = React__namespace.createElement("textarea", { ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(css.css `
+        inputElement = React__namespace.createElement("textarea", { autoFocus: props.autoFocus, ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(css.css `
 			${inputStyles}
 			max-width: 100%;
 			min-height: ${theme.controls.height};
 			padding-top: 0.75rem;
-			height:auto;`, props.inputClassName), placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+			height:auto;`, props.inputClassName), placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else {
         // text, password, email, and url
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     const inputWrapperStyles = css.css `
 		width:100%;
@@ -3358,6 +3365,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,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "7.1.1",
+	"version": "7.3.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",