@mackin.com/styleguide 7.7.2 → 7.9.1

package/index.d.ts

@@ -27,6 +27,8 @@ interface AutocompleteProps {
     /** The minimum characters before 'getOptions' is called.  No default. */
     minChars?: number;
     inputAriaAttributes?: React.AriaAttributes;
+    /** Defaults to 0ms. */
+    getOptionsDebounceMs?: number;
     onChange: (value: string) => void;
     getOptions: (value: string) => Promise<AutocompleteValue[]>;
     onPick: (value: AutocompleteValue) => void;
@@ -59,15 +61,7 @@ declare const Backdrop: (p: {
 }) => JSX.Element;
 
 declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
-interface ButtonProps {
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    type?: 'button' | 'submit';
-    children?: any;
-    style?: React.CSSProperties;
+interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     /** Defaults to 'center'. */
     textAlign?: 'left' | 'center' | 'right';
@@ -76,21 +70,16 @@ interface ButtonProps {
     round?: boolean;
     /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
-    className?: string;
     rightIcon?: JSX.Element;
     leftIcon?: JSX.Element;
     /** full width with max space between the text and the icon */
     iconBlock?: boolean;
     small?: boolean;
-    disabled?: boolean;
     /** The button will not respond to click or mouse events, but it will appear normal. */
     readonly?: boolean;
     waiting?: boolean;
     /** The minimum button size will be set to the themes' formButtonMinWidth. */
     enforceMinWidth?: boolean;
-    title?: string;
-    tabIndex?: number;
-    id?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 
@@ -374,9 +363,11 @@ interface NumberInputProps extends Omit<BaseInputProps, 'type' | 'value' | 'onCh
     min?: number;
     max?: number;
     step?: number;
+    /** Clamps the value to min/max for each input.  Defaults to 'true'. */
+    constrainOnInput?: boolean;
     onChange: (value: number | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-declare const NumberInput: React.ForwardRefExoticComponent<Pick<NumberInputProps, "value" | "onChange" | "min" | "max" | "step" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "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<HTMLInputElement>>;
+declare const NumberInput: React.ForwardRefExoticComponent<Pick<NumberInputProps, "value" | "onChange" | "min" | "max" | "step" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "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" | "constrainOnInput"> & React.RefAttributes<HTMLInputElement>>;
 
 interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value' | 'onChange'> {
     value: string | undefined;
@@ -413,20 +404,17 @@ interface LabelProps {
 }
 declare const Label: (props: LabelProps) => JSX.Element;
 
-declare const List: (props: {
-    children?: any;
+interface ListProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
     altRowColor?: boolean;
     noLines?: boolean;
-    className?: string;
     items?: (string | JSX.Element)[];
-}) => JSX.Element;
-declare const ListItem: (props: {
-    children?: any;
-    id?: string | number;
+}
+declare const List: React.ForwardRefExoticComponent<Pick<ListProps, "altRowColor" | "noLines" | "items" | "key" | "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<HTMLUListElement>>;
+interface ListItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
     /** For variant 'full', the content will take up the entire space of the parent (no padding applied by this component). */
     variant?: 'full';
-    className?: string;
-}) => JSX.Element;
+}
+declare const ListItem: (props: ListItemProps) => JSX.Element;
 
 interface ModalProps {
     show: boolean;
@@ -668,6 +656,7 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
     type?: 'select';
     /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
+    round?: boolean;
 }
 declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
 
@@ -992,4 +981,4 @@ declare const WaitingIndicator: (p: {
     debug?: boolean;
 }) => JSX.Element;
 
-export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, 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, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
+export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };

package/index.js

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var css = require('@emotion/css');
+var lodash = require('lodash');
 var React = require('react');
 var nanoid = require('nanoid');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
@@ -8,7 +9,6 @@ var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var dateFns = require('date-fns');
-var lodash = require('lodash');
 var reactDom = require('react-dom');
 var reactTinyPopover = require('react-tiny-popover');
 var reactRouterDom = require('react-router-dom');
@@ -271,6 +271,33 @@ const Backdrop$1 = (props) => {
         }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 const ICONS = {
     add: proSolidSvgIcons.faPlus,
     delete: proSolidSvgIcons.faTrashAlt,
@@ -313,7 +340,8 @@ const Icon = (props) => {
 };
 
 const Button = (props) => {
-    var _a;
+    var _a, _b;
+    const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rounded", "rightIcon", "leftIcon", "iconBlock", "small", "readonly", "waiting", "enforceMinWidth"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -482,7 +510,7 @@ const Button = (props) => {
 		`}
 	`;
     const disabled = props.disabled || props.waiting;
-    return (React__namespace.createElement("button", { id: props.id, tabIndex: props.tabIndex, title: props.title, disabled: disabled, style: props.style, onClick: props.onClick, className: css.cx('button', styles, props.className), onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, type: props.type || 'button' },
+    return (React__namespace.createElement("button", Object.assign({}, nativeProps, { disabled: disabled, className: css.cx('button', styles, props.className), type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button' }),
         props.leftIcon && React__namespace.createElement("span", { className: css.css({ marginRight: '0.5rem' }) }, props.leftIcon),
         props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children,
         props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
@@ -686,9 +714,10 @@ const Input = React__namespace.forwardRef((props, ref) => {
         props.rightControl && props.type !== 'textarea' && React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl)));
 });
 
-const List = (props) => {
+const List = React__namespace.forwardRef((props, ref) => {
     const children = props.items ? props.items.map((item, i) => React__namespace.createElement(ListItem, { key: i }, item)) : props.children;
     const theme = useThemeSafely();
+    const listProps = __rest(props, ["altRowColor", "noLines", "items"]);
     const listStyles = css.css `
 		margin: 0;
 		padding: 0;
@@ -704,9 +733,10 @@ const List = (props) => {
 			}
 		`}
 	`;
-    return (React__namespace.createElement("ul", { className: css.cx('list', listStyles, props.className) }, children));
-};
+    return (React__namespace.createElement("ul", Object.assign({}, listProps, { ref: ref, className: css.cx('list', listStyles, props.className) }), children));
+});
 const ListItem = (props) => {
+    const liProps = __rest(props, ["variant"]);
     const theme = useThemeSafely();
     const itemStyles = css.css `
 		border-bottom: ${theme.controls.border};
@@ -738,7 +768,7 @@ const ListItem = (props) => {
 			}
 		`}
 	`;
-    return (React__namespace.createElement("li", { className: css.cx('listItem', itemStyles, props.className) },
+    return (React__namespace.createElement("li", Object.assign({}, liProps, { className: css.cx('listItem', itemStyles, props.className) }),
         React__namespace.createElement("div", { className: css.css(contentStyle) }, props.children)));
 };
 
@@ -847,36 +877,55 @@ const getAutocompleteValueId = (v) => {
 };
 //TB: will need to use the new input
 const Autocomplete = (p) => {
+    var _a;
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
+    const list = 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 onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
+        if (!p.minChars || value.length >= p.minChars) {
+            p.getOptions(value)
+                .then(vals => {
+                setValues(vals);
+            }).catch(err => {
+                // ignore it
+            });
+        }
+        else {
+            setValues([]);
+        }
+    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: true, trailing: true }));
     const theme = useThemeSafely();
     const baseClass = css.css `
 		label: Autocomplete;
 		position: relative;
 		width: 100%;
 	`;
+    let listBorderRadius = '';
+    if (p.round || p.rounded || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
     const listClass = css.css({
         position: 'absolute',
         width: '100%',
         border: theme.controls.border,
-        borderRadius: p.round || p.rounded ? theme.controls.roundedRadius : theme.controls.borderRadius,
+        borderRadius: listBorderRadius,
         boxShadow: theme.controls.boxShadow,
         backgroundColor: theme.colors.bg,
         marginTop: `-4px !important`,
         zIndex: theme.zIndexes.backdrop,
         'li:first-child button': {
-            borderTopRightRadius: theme.controls.borderRadius,
-            borderTopLeftRadius: theme.controls.borderRadius,
+            borderTopRightRadius: listBorderRadius,
+            borderTopLeftRadius: listBorderRadius,
         },
         'li:last-child button': {
-            borderBottomRightRadius: theme.controls.borderRadius,
-            borderBottomLeftRadius: theme.controls.borderRadius,
+            borderBottomRightRadius: listBorderRadius,
+            borderBottomLeftRadius: listBorderRadius,
         }
     });
     const inputClass = css.css `
@@ -888,28 +937,64 @@ const Autocomplete = (p) => {
     const buttonStyles = css.css({
         borderRadius: 0,
     });
+    const buttonMarkerClass = 'ListItem__button';
+    const getNextTabElement = (fromIndex, direction) => {
+        var _a, _b, _c;
+        if (fromIndex === -1) {
+            let buttonIndex = 0;
+            if (direction === -1) {
+                buttonIndex = shownValues.length - 1;
+            }
+            return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
+        }
+        else {
+            const nextIndex = fromIndex + direction;
+            if (nextIndex >= shownValues.length || nextIndex < 0) {
+                return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
+            }
+            else {
+                return (_c = list.current) === null || _c === void 0 ? void 0 : _c.querySelector(`.${buttonMarkerClass}${nextIndex}`);
+            }
+        }
+    };
     return (React__namespace.createElement("div", { ref: element, className: css.cx(baseClass, 'autocomplete') },
         React__namespace.createElement(Backdrop$1, { onClick: () => setValues([]), show: showValues, allowScroll: true, transparent: true }),
         React__namespace.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
             React__namespace.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, 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([]);
+                    onChangeForOptions.current(value);
+                }, onKeyDown: e => {
+                    var _a, _b;
+                    if (showValues) {
+                        if (e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            (_a = getNextTabElement(-1, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                        }
+                        else if (e.key === 'ArrowUp') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            (_b = getNextTabElement(-1, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                        }
                     }
                 }, 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 => {
+            showValues && (React__namespace.createElement(List, { ref: list, className: listClass },
+                shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
-                        React__namespace.createElement(Button, { className: buttonStyles, onClick: () => {
+                        React__namespace.createElement(Button, { onKeyDown: e => {
+                                var _a, _b;
+                                if (e.key === 'ArrowDown') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    (_a = getNextTabElement(listItemIndex, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
+                                else if (e.key === 'ArrowUp') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                                }
+                            }, className: css.cx(buttonMarkerClass + listItemIndex, buttonStyles), onClick: () => {
                                 p.onPick(value);
                                 setValues([]);
                                 setTimeout(() => {
@@ -1138,33 +1223,6 @@ const Calendar = (p) => {
             cells)));
 };
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 const Checkbox = (props) => {
     const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readonly"]);
     const selected = props.checkedIcon || 'selected';
@@ -2195,7 +2253,7 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
         } })));
 });
 
-const parseNumber = (rawValue, step = 0, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
+const parseNumber = (rawValue, step = 0, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, applyMinMax) => {
     var _a;
     const decimals = step === 0 ? 0 : (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length;
     let value;
@@ -2211,24 +2269,29 @@ const parseNumber = (rawValue, step = 0, min = Number.MIN_SAFE_INTEGER, max = Nu
             else {
                 value = parseFloat(value.toFixed(decimals));
             }
-            value = Math.max(Math.min(value, max), min);
+            if (applyMinMax) {
+                value = Math.max(Math.min(value, max), min);
+            }
         }
     }
     return [value, value === null || value === void 0 ? void 0 : value.toString()];
 };
 const NumberInput = React__namespace.forwardRef((props, ref) => {
-    var _a;
-    const { value, onChange } = props, otherProps = __rest(props, ["value", "onChange"]);
-    return (React__namespace.createElement(BaseInput, Object.assign({}, otherProps, { ref: ref, maxLength: (_a = props.maxLength) !== null && _a !== void 0 ? _a : 50, type: "number", value: value !== null && value !== void 0 ? value : '', onChange: e => {
-            const [v, displayValue] = parseNumber(e.target.value, props.step, props.min, props.max);
+    var _a, _b;
+    const { value, onChange, constrainOnInput } = props, otherProps = __rest(props, ["value", "onChange", "constrainOnInput"]);
+    const applyInputConstraints = (_a = props.constrainOnInput) !== null && _a !== void 0 ? _a : true;
+    return (React__namespace.createElement(BaseInput, Object.assign({}, otherProps, { ref: ref, maxLength: (_b = props.maxLength) !== null && _b !== void 0 ? _b : 50, type: "number", value: value !== null && value !== void 0 ? value : '', onChange: e => {
+            const [v, displayValue] = parseNumber(e.target.value, props.step, props.min, props.max, applyInputConstraints);
             // make sure the displayed value always matches our parsed value.
             e.target.value = displayValue !== null && displayValue !== void 0 ? displayValue : '';
             onChange(v, e);
         }, onBlur: e => {
-            // catch all for things we missed.  
-            // onChange would have been called with undefined, but something strange might remain.
-            if (!e.target.checkValidity()) {
-                e.target.value = '';
+            if (applyInputConstraints) {
+                // catch all for things we missed.  
+                // onChange would have been called with undefined, but something strange might remain.
+                if (!e.target.checkValidity()) {
+                    e.target.value = '';
+                }
             }
         } })));
 });
@@ -2673,7 +2736,7 @@ const OmniLink = (props) => {
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onChange", "type", "rounded", "readonly"]);
+    , ["value", "options", "onChange", "type", "rounded", "round", "readonly"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -2709,6 +2772,9 @@ const Picker = (props) => {
 			${props.rounded && `
 				border-radius: ${theme.controls.roundedRadius};
 			`}
+			${props.round && `
+				border-radius: ${theme.controls.roundRadius};
+			`}
 			${props.readonly && `
 				background-color: transparent !important;
 				border: none;

package/package.json

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