@mackin.com/styleguide 8.0.0-beta.19 → 8.0.0-beta.21

package/index.d.ts

@@ -455,6 +455,7 @@ declare const Nav: (props: {
     children?: React.ReactNode;
     responsive?: boolean | undefined;
     className?: string | undefined;
+    __debug?: boolean | undefined;
 }) => JSX.Element;
 
 interface OmniLinkProps {
@@ -498,7 +499,7 @@ interface PagerOptions<TItem> {
     sortOptions?: PagerSortOption<TItem>[];
     previous?: ItemPager<TItem>;
 }
-/** For in-memory paging. */
+/** In-memory pager. */
 declare class ItemPager<TItem> {
     constructor(allItems: TItem[], options?: PagerOptions<TItem>);
     get allItems(): TItem[];
@@ -614,6 +615,7 @@ interface Props<T> extends PagerStyleProps {
 }
 declare const BoundStaticPager: <T>(p: Props<T>) => JSX.Element;
 
+/** A page of data with helpers props.  */
 declare class PagedResult<T> {
     constructor(items?: T[], total?: number, page?: number, limit?: number);
     static fromDto<T>(dto: {
@@ -823,6 +825,9 @@ declare const ThemeProvider: <T extends MackinTheme>(p: {
     theme: T;
 }) => JSX.Element;
 
+/** React wrapper around window resizing and window.matchMedia.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+ */
 declare const useMediaQuery: (query: string) => boolean;
 
 /** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
@@ -983,7 +988,7 @@ interface ToggleButtonGroupProps {
 }
 declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
 
-declare const TogglePasswordInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "rightControl" | "value" | "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" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
+declare const TogglePasswordInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "rightControl" | "value" | "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" | "trim" | "emptyString" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
 
 declare const WaitingIndicator: (p: {
     show: boolean;
@@ -992,4 +997,15 @@ declare const WaitingIndicator: (p: {
     __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, 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 };
+/** Tells you actual width of the scroll bar.  This can vary by browser. */
+declare const useScrollbarSize: (recalc?: boolean | undefined) => number;
+
+/** Provides stateful notifications around async calls. */
+declare const useWaiting: <TArgs extends any[], TReturn>(func: (...args: TArgs) => Promise<TReturn>) => [boolean, (...args: TArgs) => Promise<TReturn>];
+
+/** useEffect but it will only fire when the actual truthiness of the value changes.
+ * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
+*/
+declare const useBooleanChanged: (effect: (current: boolean, previous: boolean) => void, dep: boolean | undefined) => void;
+
+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, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -1123,7 +1123,7 @@ const useLogger = (componentName, enabled) => {
     return (...messages) => {
         if (enabled) {
             // tslint:disable-next-line
-            console.log(componentName, ...messages);
+            console.log(`[${componentName}]`, ...messages);
         }
     };
 };
@@ -1403,11 +1403,41 @@ const Checkbox = (props) => {
             props.children)));
 };
 
+/** useEffect but it will only fire when the actual truthiness of the value changes.
+ * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
+*/
+const useBooleanChanged = (effect, dep) => {
+    /*
+        Why?
+        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
+        Components like Modal need to communicate when their show status changes.
+        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
+        This is what we want regardless of mount status:
+        true > false = Change
+        false > true = Change
+        true > true = No Change
+        false > false = No Change
+        undefined > false = No Change
+        undefined > true = Change
+    */
+    const lastValue = React.useRef(undefined);
+    React.useEffect(() => {
+        //console.log('[useBooleanChanged] useEffect called with', dep, 'was', lastValue.current ?? 'undefined')
+        if (!!lastValue.current !== !!dep) {
+            const previous = lastValue.current;
+            lastValue.current = dep;
+            effect(!!lastValue.current, !!previous);
+            //console.log('[useBooleanChanged] change called')
+        }
+    }, [dep]);
+};
+
 // Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
 const canUseDom = !!(typeof window !== 'undefined' &&
     window.document &&
     window.document.createElement);
 let size;
+/** Tells you actual width of the scroll bar.  This can vary by browser. */
 const useScrollbarSize = (recalc) => {
     if ((!size && size !== 0) || recalc) {
         if (canUseDom) {
@@ -1433,26 +1463,31 @@ 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((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const tryRemoveBodyStyles = () => {
+        if (backdrop.showCount <= 1 && htmlBodyStyles) {
+            log('backdrop.showCount', backdrop.showCount, 'removing singleton htmlBodyStyles');
+            document.body.classList.remove(htmlBodyStyles);
+        }
+    };
     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, (_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');
-                document.body.classList.remove(htmlBodyStyles);
+            if (p.show) {
+                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+                log('backdrop.setShow', false);
+                tryRemoveBodyStyles();
             }
             log('un-mounted');
         };
     }, []);
-    useIgnoreMount(() => {
+    useBooleanChanged((show, previousShow) => {
         var _a;
-        log('show changed', p.show);
-        backdrop.setShow(p.show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
-        log('backdrop.setShow', p.show);
+        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
+        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        log('backdrop.setShow', show);
         if (!htmlBodyStyles) {
             log('creating singleton htmlBodyStyles');
             htmlBodyStyles = css.css({
@@ -1460,17 +1495,14 @@ const Modal = (p) => {
                 paddingRight: `${useScrollbarSize()}px`
             });
         }
-        if (p.show) {
-            log('adding htmlBodyStyles');
+        if (show) {
+            log('adding singleton htmlBodyStyles');
             document.body.classList.add(htmlBodyStyles);
         }
         else {
-            if (backdrop.showCount <= 1) {
-                log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
-                document.body.classList.remove(htmlBodyStyles);
-            }
+            tryRemoveBodyStyles();
         }
-    }, [p.show]);
+    }, p.show);
     React__default['default'].useLayoutEffect(() => {
         var _a;
         if (p.show === true) {
@@ -2241,7 +2273,7 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
         React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
             inputElement,
             props.rightControl && (React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl))),
-        React__namespace.createElement(InputErrorDisplay, { error: props.error })));
+        React__namespace.createElement(InputErrorDisplay, { error: props.readOnly ? undefined : props.error })));
 });
 
 const tryClampRange = (value, min, max) => {
@@ -2738,6 +2770,9 @@ const Label = (props) => {
     From https://fireship.io/snippets/use-media-query-hook/.
     Tried using https://www.npmjs.com/package/react-media, but it cause Webpack build issues.
 */
+/** React wrapper around window resizing and window.matchMedia.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+ */
 const useMediaQuery = (query) => {
     const [matches, setMatches] = React.useState(false);
     React.useEffect(() => {
@@ -2753,11 +2788,13 @@ const useMediaQuery = (query) => {
 };
 
 const Nav = (props) => {
+    var _a, _b;
     const nav = React__namespace.useRef(null);
     const theme = useThemeSafely();
     const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
     const backdrop = React__namespace.useContext(BackdropContext);
     const isLargeScreen = useMediaQuery(`(min-width:${theme.breakpoints.desktop})`);
+    const log = useLogger(`Nav ${(_a = props.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = props.__debug) !== null && _b !== void 0 ? _b : false);
     const slideRight = css.keyframes `
 		0% {
 			transform: translateX(0);
@@ -2818,10 +2855,11 @@ const Nav = (props) => {
             props.toggle(false);
         }
     }, [backdrop.showing]);
-    useIgnoreMount(() => {
+    useBooleanChanged((current, previous) => {
         var _a;
-        backdrop.setShow(props.show, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
-    }, [props.show]);
+        log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
+        backdrop.setShow(current, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
+    }, props.show);
     React__namespace.useLayoutEffect(() => {
         if (nav && nav.current) {
             if (props.show) {
@@ -2852,6 +2890,7 @@ const Nav = (props) => {
     return (React__namespace.createElement("nav", { ref: nav, className: css.cx('nav', navStyles, props.className) }, props.children));
 };
 
+//TB: FUTURE make just a basic styled link so you don't have to go with React Router if you don't want to.
 const OmniLink = (props) => {
     var _a, _b, _c;
     const theme = useThemeSafely();
@@ -3215,6 +3254,7 @@ const BoundStaticPager = (p) => {
         } })));
 };
 
+/** A page of data with helpers props.  */
 class PagedResult {
     constructor(items = [], total = 0, page = 0, limit = 0) {
         this.items = items;
@@ -3225,10 +3265,6 @@ class PagedResult {
     static fromDto(dto) {
         return new PagedResult(dto.items, dto.total, dto.page, dto.limit);
     }
-    // allItems: T[]
-    // get pageItems(): T[] {
-    //     return this.allItems.slice(this.minPageItemIndex, this.maxPageItemIndex + 1)
-    // }
     /** Helper for items.length */
     get length() {
         return this.items ? this.items.length : 0;
@@ -3352,7 +3388,7 @@ class PagedResult {
     }
 }
 
-/** For in-memory paging. */
+/** In-memory pager. */
 class ItemPager {
     constructor(allItems, options) {
         var _a, _b, _c, _d;
@@ -3602,6 +3638,7 @@ const cleanPct = (value) => {
     return 0;
 };
 
+/** Provides stateful notifications around async calls. */
 const useWaiting = (func) => {
     // Guard against the owner of this hook being unmounted at the time of .finally.
     const isCancelled = React.useRef(false);
@@ -4244,7 +4281,10 @@ exports.defaultTheme = defaultTheme;
 exports.getCurrencyDisplay = getCurrencyDisplay;
 exports.getFileSizeDisplay = getFileSizeDisplay;
 exports.useAccordianState = useAccordianState;
+exports.useBooleanChanged = useBooleanChanged;
 exports.useIgnoreMount = useIgnoreMount;
 exports.useMediaQuery = useMediaQuery;
+exports.useScrollbarSize = useScrollbarSize;
 exports.useThemeSafely = useThemeSafely;
+exports.useWaiting = useWaiting;
 //# sourceMappingURL=index.js.map

package/package.json

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