@mackin.com/styleguide 7.1.2 → 7.4.0

package/index.d.ts

@@ -247,9 +247,11 @@ declare const ErrorModal: (props: {
 declare type FormProps = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
 interface IProps extends FormProps {
     inline?: boolean;
+    /** If true, preventDefault and stopPropagation will be applied prior to onSubmit being called.  Defaults to true. */
+    ajax?: boolean;
 }
 /** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
-declare const Form: React.ForwardRefExoticComponent<Pick<IProps, "inline" | "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
+declare const Form: React.ForwardRefExoticComponent<Pick<IProps, "inline" | "ajax" | "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
 declare const FormFlexRow: (props: {
     children: React.ReactNode;
     className?: string;
@@ -268,9 +270,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,6 +349,7 @@ 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;
@@ -688,6 +693,8 @@ interface MackinTheme {
     fonts: {
         family: string;
         size: string;
+        sizeSmall: string;
+        sizeLarge: string;
         headerFamily: string;
     };
     controls: {
@@ -904,4 +911,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'
     });
@@ -1603,7 +1604,7 @@ const ErrorModal = (props) => {
 
 /** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
 const Form = React__namespace.forwardRef((props, ref) => {
-    const { inline, children, onSubmit, className } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className"]);
+    const { inline, children, onSubmit, className, ajax } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className", "ajax"]);
     const theme = useThemeSafely();
     return (React__namespace.createElement("form", Object.assign({}, rest, { ref: ref, className: css.cx('form', css.css({
             display: 'flex',
@@ -1611,8 +1612,10 @@ const Form = React__namespace.forwardRef((props, ref) => {
             alignItems: props.inline ? 'flex-end' : 'normal',
             gap: theme.controls.gap
         }), props.className), onSubmit: e => {
-            e.preventDefault();
-            e.stopPropagation();
+            if (ajax !== false) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
             if (onSubmit) {
                 onSubmit(e);
             }
@@ -1636,7 +1639,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 +1698,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 +1729,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,15 +2042,15 @@ 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, 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, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
+        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};
@@ -2050,7 +2059,7 @@ const Input = React__namespace.forwardRef((props, ref) => {
     }
     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, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
+        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 +3367,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.1.2",
+	"version": "7.4.0",
 	"description": "",
 	"main": "./index.js",
-"types": "./index.d.ts",
+	"types": "./index.d.ts",
 	"scripts": {},
 	"author": "Mackin",
 	"license": "ISC",