@mackin.com/styleguide 8.0.0-beta.15 → 8.0.0-beta.18

package/index.d.ts

@@ -57,6 +57,7 @@ interface AutocompleteProps<T extends AutocompleteValue> {
     getOptions: (value: string) => Promise<T[]>;
     onPick: (value: T) => void;
     onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 declare const Autocomplete: <T extends AutocompleteValue>(p: AutocompleteProps<T>) => JSX.Element;
 
@@ -81,15 +82,12 @@ declare const Backdrop: (p: {
     children: React__default.ReactNode;
     /** Fade in time.  Defaults to 250ms. */
     showTimeMs?: number;
-    debug?: boolean;
+    __debug?: boolean;
 }) => JSX.Element;
 
 declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
 interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
-    /** Defaults to 'center'. */
-    textAlign?: 'left' | 'center' | 'right';
-    block?: boolean;
     /** As round as can be. */
     round?: boolean;
     rightIcon?: JSX.Element;
@@ -103,7 +101,7 @@ interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes
     /** The minimum button size will be set to the themes' formButtonMinWidth. */
     enforceMinWidth?: boolean;
 }
-declare const Button: (props: ButtonProps) => JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "variant" | "round" | "rightIcon" | "leftIcon" | "iconBlock" | "small" | "readOnly" | "waiting" | "enforceMinWidth" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "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<HTMLButtonElement>>;
 
 interface CalendarProps {
     month: number;
@@ -159,7 +157,7 @@ interface ConfirmModalProps {
     className?: string;
     variant?: 'omg';
     id?: string;
-    debug?: boolean;
+    __debug?: boolean;
 }
 declare const ConfirmModal: (props: ConfirmModalProps) => JSX.Element;
 
@@ -170,13 +168,13 @@ interface CopyButtonProps {
 }
 declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
 
-declare const Divider: () => JSX.Element;
+declare const Divider: (p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>) => JSX.Element;
 
 declare const ErrorModal: (props: {
     message: string;
     show: boolean;
     id?: string;
-    debug?: boolean;
+    __debug?: boolean;
     close: () => void;
 }) => JSX.Element;
 
@@ -290,7 +288,7 @@ interface InfoTipProps {
     /** Defaults to nav font color. */
     fontColor?: string;
     modalId?: string;
-    modalDebug?: boolean;
+    __debug?: boolean;
 }
 declare const InfoTip: (props: InfoTipProps) => JSX.Element;
 
@@ -392,6 +390,9 @@ interface TextInputProps extends BaseProps {
 }
 declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "value" | "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" | "onChange" | "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" | "noTrim" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
 
+/** useEffect but ignores the first call on component mount. */
+declare const useIgnoreMount: (effect: React__default.EffectCallback, deps?: React__default.DependencyList | undefined) => void;
+
 interface LabelProps {
     text: string | JSX.Element;
     children: React.ReactNode;
@@ -440,7 +441,7 @@ interface ModalProps {
     scrollable?: boolean;
     id?: string;
     className?: string;
-    debug?: boolean;
+    __debug?: boolean;
     onClick?: () => void;
 }
 declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
@@ -448,6 +449,7 @@ declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
 declare const Nav: (props: {
     show: boolean;
     toggle: (show: boolean) => void;
+    id?: string | undefined;
     children?: React.ReactNode;
     responsive?: boolean | undefined;
     className?: string | undefined;
@@ -647,15 +649,16 @@ declare class PagedResult<T> {
 }
 
 declare type PickerValue = string | number;
-interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options' | 'onChange'> {
+declare type PickerOption<T> = T | {
+    id: T;
+    name?: string;
+};
+interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options'> {
 }
 interface PickerProps<T extends PickerValue> extends SelectProps {
     value: T;
-    options: (T | {
-        id: T;
-        name?: string;
-    })[];
-    onChange: (value: T, event: React.ChangeEvent<HTMLSelectElement>) => void;
+    options: PickerOption<T>[];
+    onValueChange: (value: T) => void;
     readOnly?: boolean;
     round?: boolean;
     /** If true, bottom padding will be added to account for other inputs having space for error messages. */
@@ -984,7 +987,7 @@ declare const WaitingIndicator: (p: {
     show: boolean;
     minShowTimeMs?: number;
     id?: string;
-    debug?: boolean;
+    __debug?: boolean;
 }) => JSX.Element;
 
-export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, 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, getFileSizeDisplay, useAccordianState, useMediaQuery, useThemeSafely };
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, 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, getFileSizeDisplay, useAccordianState, useIgnoreMount, useMediaQuery, useThemeSafely };

package/index.js

@@ -229,9 +229,9 @@ const useThemeSafely = () => {
     return defaultTheme;
 };
 
-const Button = (props) => {
-    var _a, _b;
-    const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth"]);
+const Button = React__namespace.forwardRef((props, ref) => {
+    var _a;
+    const nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -248,7 +248,6 @@ const Button = (props) => {
 		font-weight: bold;
 		flex-shrink: 0;
 		min-width: ${theme.controls.height};
-		text-align: ${(_a = props.textAlign) !== null && _a !== void 0 ? _a : 'center'};
 	
 		&:disabled {
 			opacity: ${theme.controls.disabledOpacity};
@@ -387,9 +386,6 @@ const Button = (props) => {
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
-		${props.block && `
-			width: 100%;
-		`}
 		${props.iconBlock && `
 			display: flex;
 			justify-content: space-between;
@@ -397,11 +393,11 @@ const Button = (props) => {
 		`}
 	`;
     const disabled = props.disabled || props.waiting;
-    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' }),
+    return (React__namespace.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: css.cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : '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)));
-};
+});
 
 const accordianExpandTimeMs = 250;
 const accordianMaxHeight = 1020;
@@ -409,7 +405,7 @@ const accordianTimingFunction = 'ease-in-out';
 // we need to apply the seperately so stuff doesn't hang over during expand/collapse.
 // if we remove this and just keep overflow:hidden, autocompletes will get cut off in the subpanels.
 const visibleStyle = css.css({
-    overflow: 'visible'
+    overflow: 'visible !important'
 });
 const Accordian = (props) => {
     var _a, _b, _c, _d;
@@ -451,12 +447,13 @@ const Accordian = (props) => {
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
     return (React__namespace.createElement("div", { className: "accordian" },
-        React__namespace.createElement(Button, { readOnly: props.disabled, block: (_d = props.block) !== null && _d !== void 0 ? _d : true, variant: props.variant, className: css.cx(css.css({
+        React__namespace.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
                 height: 'auto',
-                minHeight: theme.controls.height
+                minHeight: theme.controls.height,
+                width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
             }, props.className)), onClick: e => {
                 e.stopPropagation();
                 if (props.onChange) {
@@ -908,7 +905,7 @@ const Autocomplete = (p) => {
                     p.onChange(value);
                     onChangeForOptions.current(value);
                 }, onKeyDown: e => {
-                    var _a, _b;
+                    var _a, _b, _c;
                     if (showValues) {
                         if (e.key === 'ArrowDown') {
                             e.preventDefault();
@@ -921,6 +918,7 @@ const Autocomplete = (p) => {
                             (_b = getNextTabElement(-1, -1)) === null || _b === void 0 ? void 0 : _b.focus();
                         }
                     }
+                    (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
                 }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
             showValues && (React__namespace.createElement(List, { ref: list, className: css.css({
                     position: 'absolute',
@@ -1108,6 +1106,19 @@ const Backdrop$1 = (props) => {
         }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
+/** useEffect but ignores the first call on component mount. */
+const useIgnoreMount = (effect, deps) => {
+    const mounted = React__default['default'].useRef(false);
+    React__default['default'].useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+        }
+        else {
+            effect();
+        }
+    }, deps);
+};
+
 const useLogger = (componentName, enabled) => {
     return (...messages) => {
         if (enabled) {
@@ -1117,19 +1128,20 @@ const useLogger = (componentName, enabled) => {
     };
 };
 
+const portalId = 'backdrop';
 const BackdropContext = React__default['default'].createContext({
     showing: false,
     showCount: 0,
-    portalId: 'backdrop',
-    setShow: s => {
+    portalId: portalId,
+    setShow: (s, f) => {
         /* empty */
     }
 });
 const BackdropContextProvider = (p) => {
     var _a;
     const [showCount, setShowCount] = React.useState(0);
-    const log = useLogger('BackdropContextProvider', (_a = p.debug) !== null && _a !== void 0 ? _a : false);
-    if (p.debug) {
+    const log = useLogger('BackdropContextProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
@@ -1139,35 +1151,33 @@ const BackdropContextProvider = (p) => {
         React.useEffect(() => {
             log('re-rendered');
         });
-        React.useEffect(() => {
+        useIgnoreMount(() => {
             log('showCount changed', showCount);
         }, [showCount]);
     }
     return (React__default['default'].createElement(BackdropContext.Provider, { value: {
-            portalId: 'backdrop',
+            portalId: portalId,
             showing: showCount > 0,
             showCount: showCount,
-            setShow: (show) => {
+            setShow: (show, from) => {
                 if (show) {
                     setShowCount(s => {
                         const count = s + 1;
-                        log('setShowCount', count);
-                        log('showCount was', showCount);
+                        log(`setShow from ${from} ${s} -> ${count}`);
                         return count;
                     });
                 }
                 else {
                     setShowCount(s => {
                         const count = Math.max(0, s - 1);
-                        log('setShowCount', count);
-                        log('showCount was', showCount);
+                        log(`setShow from ${from} ${s} -> ${count}`);
                         return count;
                     });
                 }
             }
         } },
         p.children,
-        p.debug && (React__default['default'].createElement("p", { className: css.css({
+        p.__debug && (React__default['default'].createElement("p", { className: css.css({
                 position: 'fixed',
                 top: 0, right: 0,
                 backgroundColor: '#ff00004f',
@@ -1184,8 +1194,8 @@ const BackdropOverlay = (p) => {
     const context = React.useContext(BackdropContext);
     const theme = useThemeSafely();
     const showTimeMs = (_a = p.showTimeMs) !== null && _a !== void 0 ? _a : 250;
-    const log = useLogger('BackdropOverlay', (_b = p.debug) !== null && _b !== void 0 ? _b : false);
-    if (p.debug) {
+    const log = useLogger('BackdropOverlay', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
@@ -1195,12 +1205,12 @@ const BackdropOverlay = (p) => {
         React.useEffect(() => {
             log('re-rendered');
         });
-        React.useEffect(() => {
+        useIgnoreMount(() => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
     }
     return (React__default['default'].createElement("div", { onClick: () => {
-            context === null || context === void 0 ? void 0 : context.setShow(false);
+            context === null || context === void 0 ? void 0 : context.setShow(false, 'BackdropOverlay');
             log('onClick', 'setShow', false);
         }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css.css({
             cursor: 'pointer',
@@ -1216,12 +1226,12 @@ const BackdropOverlay = (p) => {
         }) }));
 };
 const Backdrop = (p) => {
-    return (React__default['default'].createElement(BackdropContextProvider, { debug: p.debug },
+    return (React__default['default'].createElement(BackdropContextProvider, { __debug: p.__debug },
         React__default['default'].createElement("div", { className: css.css({
                 height: '100%'
             }) },
             p.children,
-            React__default['default'].createElement(BackdropOverlay, { showTimeMs: p.showTimeMs, debug: p.debug }))));
+            React__default['default'].createElement(BackdropOverlay, { showTimeMs: p.showTimeMs, __debug: p.__debug }))));
 };
 
 const Calendar = (p) => {
@@ -1423,12 +1433,13 @@ const Modal = (p) => {
     const theme = useThemeSafely();
     const hasHeader = p.closeButton || p.heading;
     const contentRef = React__default['default'].useRef(null);
-    const log = useLogger(`Modal ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.debug) !== null && _b !== void 0 ? _b : false);
+    const log = useLogger(`Modal ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
     React.useEffect(() => {
         log('mounted');
         return () => {
+            var _a;
             // handle the use of modals that are rendered only as show=true and then unmounted.
-            backdrop.setShow(false);
+            backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
             log('backdrop.setShow', false);
             if (backdrop.showCount <= 1 && htmlBodyStyles) {
                 log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
@@ -1437,10 +1448,11 @@ const Modal = (p) => {
             log('un-mounted');
         };
     }, []);
-    React.useEffect(() => {
+    useIgnoreMount(() => {
+        var _a;
         log('show changed', p.show);
-        backdrop.setShow(p.show);
-        log('backdrop.setShow', true);
+        backdrop.setShow(p.show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        log('backdrop.setShow', p.show);
         if (!htmlBodyStyles) {
             log('creating singleton htmlBodyStyles');
             htmlBodyStyles = css.css({
@@ -1559,7 +1571,7 @@ const ConfirmModal = (props) => {
 			}
 		`}
 	`;
-    return (React__namespace.createElement(Modal, { id: props.id, debug: props.debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, props.text),
             React__namespace.createElement("div", { className: css.css({ textAlign: 'center' }) },
@@ -1589,12 +1601,12 @@ const CopyButton = (props) => {
         React__namespace.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
 };
 
-const Divider = () => {
+const Divider = (p) => {
     const theme = useThemeSafely();
-    return (React__namespace.createElement("hr", { className: css.cx("divider", css.css({
+    return (React__namespace.createElement("hr", Object.assign({}, p, { className: css.cx("divider", css.css({
             margin: theme.controls.dividerMargin,
             border: theme.controls.dividerBorder
-        })) }));
+        }), p.className) })));
 };
 
 const ErrorModal = (props) => {
@@ -1609,7 +1621,7 @@ const ErrorModal = (props) => {
 			color:  ${theme.colors.omgFont};
 		}
 	`;
-    return (React__namespace.createElement(Modal, { id: props.id, debug: props.debug, className: css.cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, message))));
 };
@@ -1889,9 +1901,10 @@ const FileUploader = (p) => {
 const UploadInfoPanel = (p) => {
     return (React__default['default'].createElement(InfoPanel, { variant: p.variant, className: css.css({ zIndex: 1 }) },
         p.message,
-        React__default['default'].createElement(Button, { block: true, className: css.css({
+        React__default['default'].createElement(Button, { className: css.css({
                 color: 'inherit',
-                marginTop: '1rem'
+                marginTop: '1rem',
+                width: '100%'
             }), onClick: e => {
                 e.stopPropagation();
                 p.onClear();
@@ -2136,7 +2149,7 @@ const InfoTip = (props) => {
     if (props.variant === 'modal') {
         return (React__namespace.createElement(React__namespace.Fragment, null,
             button,
-            React__namespace.createElement(Modal, { id: props.modalId, debug: props.modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
+            React__namespace.createElement(Modal, { id: props.modalId, __debug: props.__debug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
                     whiteSpace: 'normal'
                 }), closeButton: true },
                 React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
@@ -2222,7 +2235,9 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
 			right: calc(${theme.controls.padding} * 2);
 		`}
 	`;
-    return (React__namespace.createElement("div", null,
+    return (React__namespace.createElement("div", { className: css.css({
+            width: '100%'
+        }) },
         React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
             inputElement,
             props.rightControl && (React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl))),
@@ -2275,19 +2290,6 @@ const tryClampDecimals = (value, step = 0) => {
     return parseFloat(value.toFixed(decimals));
 };
 
-/** useEffect but ignores the first call on component mount. */
-const useIgnoreMount = (effect, deps) => {
-    const mounted = React__default['default'].useRef(false);
-    React__default['default'].useEffect(() => {
-        if (!mounted.current) {
-            mounted.current = true;
-        }
-        else {
-            effect();
-        }
-    }, deps);
-};
-
 /** Common state handling for displaying validation messages with inputs. */
 const useInputValidationMessage = (ref, props) => {
     const [validationError, setValidationError] = React__default['default'].useState('');
@@ -2816,8 +2818,9 @@ const Nav = (props) => {
             props.toggle(false);
         }
     }, [backdrop.showing]);
-    React__namespace.useEffect(() => {
-        backdrop.setShow(props.show);
+    useIgnoreMount(() => {
+        var _a;
+        backdrop.setShow(props.show, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
     }, [props.show]);
     React__namespace.useLayoutEffect(() => {
         if (nav && nav.current) {
@@ -3025,7 +3028,7 @@ const OmniLink = (props) => {
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onChange", "readOnly", "round", "controlAlign"]);
+    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -3095,6 +3098,7 @@ const Picker = (props) => {
                 (_a = selectProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(selectProps, e);
             }
         }, onChange: e => {
+            var _a;
             let val = e.target.value;
             if (isNumber) {
                 val = parseInt(val, 10);
@@ -3102,7 +3106,8 @@ const Picker = (props) => {
                     val = '';
                 }
             }
-            props.onChange(val, e);
+            props.onValueChange(val);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } }), (props.options || []).map(o => {
         var _a;
         let val;
@@ -3189,8 +3194,8 @@ const BoundMemoryPager = (p) => {
     var _a, _b, _c;
     const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? pager.page : undefined, totalPages: p.showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
+            React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
             p.onPage(d);
         } })));
 };
@@ -3201,8 +3206,8 @@ const BoundStaticPager = (p) => {
     const showLimit = !!(result.limit && p.limitOptions && p.limitOptions.length > 1 && p.onLimit);
     const showSort = !!(p.sort !== undefined && p.sortOptions && p.sortOptions.length > 1 && p.onSort);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? result.page : undefined, totalPages: p.showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onChange: v => {
+            React__namespace.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onValueChange: v => {
                     var _a;
                     (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
                 } }))) : undefined, page: d => {
@@ -4116,8 +4121,8 @@ const WaitingIndicator = (p) => {
     const [show, setShow] = React.useState(p.show);
     const hideTimer = React.useRef(0);
     const lastShowStatus = React.useRef(false);
-    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.debug) !== null && _b !== void 0 ? _b : false);
-    if (p.debug) {
+    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
@@ -4167,7 +4172,7 @@ const WaitingIndicator = (p) => {
             }
         }
     }, [p.show]);
-    return (React__default['default'].createElement(Modal, { id: p.id, debug: p.debug, className: "waitingIndicator", show: show, noBackground: true },
+    return (React__default['default'].createElement(Modal, { id: p.id, __debug: p.__debug, className: "waitingIndicator", show: show, noBackground: true },
         React__default['default'].createElement("div", { className: css.css({
                 color: 'white',
                 fontSize: '3rem'
@@ -4239,6 +4244,7 @@ exports.defaultTheme = defaultTheme;
 exports.getCurrencyDisplay = getCurrencyDisplay;
 exports.getFileSizeDisplay = getFileSizeDisplay;
 exports.useAccordianState = useAccordianState;
+exports.useIgnoreMount = useIgnoreMount;
 exports.useMediaQuery = useMediaQuery;
 exports.useThemeSafely = useThemeSafely;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "8.0.0-beta.15",
+	"version": "8.0.0-beta.18",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",