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

package/index.d.ts

@@ -282,13 +282,20 @@ interface InfoTipProps {
     onClose?: () => void;
     /** Defaults to 'info'. */
     variant?: 'info' | 'modal';
-    modalHeader?: string;
     /** Defaults to nav color. */
     bgColor?: string;
     /** Defaults to nav font color. */
     fontColor?: string;
+    /** For variant=modal only. */
+    modalHeader?: string;
+    /** For variant=modal only. */
     modalId?: string;
-    __debug?: boolean;
+    /** For variant=modal only. */
+    __modalDebug?: boolean;
+    /** Whether to move the popover on collision with the parent's bounds.  Default is false.  For variant=info only. */
+    reposition?: boolean;
+    /** Order of positions as the Popover colides with the window edge.  The default order is ['right', 'top', 'left', 'bottom'].  For variant=info only. */
+    positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
 }
 declare const InfoTip: (props: InfoTipProps) => JSX.Element;
 
@@ -686,7 +693,7 @@ interface PopoverProps {
     border?: string;
     /** Popover background.  Defaults to  theme.colors.bg. */
     backgroundColor?: string;
-    /** Order of positions as the Popover colides with the window edge. */
+    /** Order of positions as the Popover colides with the window edge.  The default order is ['right', 'top', 'left', 'bottom']. */
     positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
 }
 declare const Popover: (p: PopoverProps) => JSX.Element;
@@ -721,7 +728,14 @@ declare type Alignment = 'left' | 'right' | 'center';
 
 declare const GlobalStyles: () => null;
 
-declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
+declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
+/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
+declare const enumToEntities: <T extends {
+    [key: string]: string | number;
+}>(enumObj: T) => {
+    id: string | number;
+    name: string;
+}[];
 
 interface MackinTheme {
     colors: {
@@ -945,9 +959,11 @@ interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLA
     value?: string;
     /** By default all leading and trailing whitespace will be cleared on blur. */
     noTrim?: boolean;
+    /** Will mark the input as invalid and show this as the validation failed message. */
+    customError?: string;
     onValueChange: (value: string | undefined) => void;
 }
-declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "wrap" | "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"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "wrap" | "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" | "customError" | "onValueChange"> & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
 interface ToggleButtonProps {
@@ -1008,4 +1024,4 @@ declare const useWaiting: <TArgs extends any[], TReturn>(func: (...args: TArgs)
 */
 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 };
+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, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -1148,9 +1148,6 @@ const BackdropContextProvider = (p) => {
                 log('un-mounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
         useIgnoreMount(() => {
             log('showCount changed', showCount);
         }, [showCount]);
@@ -1202,9 +1199,6 @@ const BackdropOverlay = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
         useIgnoreMount(() => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
@@ -1455,7 +1449,6 @@ const useScrollbarSize = (recalc) => {
     return size;
 };
 
-let htmlBodyStyles;
 const Modal = (p) => {
     var _a, _b, _c, _d;
     const backdrop = React.useContext(BackdropContext);
@@ -1464,42 +1457,50 @@ const Modal = (p) => {
     const hasHeader = p.closeButton || p.heading;
     const contentRef = React__default['default'].useRef(null);
     const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const showing = React.useRef(p.show);
+    const bodyStyles = React.useRef('');
     const tryRemoveBodyStyles = () => {
-        if (backdrop.showCount <= 1 && htmlBodyStyles) {
-            log('backdrop.showCount', backdrop.showCount, 'removing singleton htmlBodyStyles');
-            document.body.classList.remove(htmlBodyStyles);
+        if (bodyStyles.current) {
+            log('removing singleton', bodyStyles.current);
+            document.body.classList.remove(bodyStyles.current);
         }
     };
     React.useEffect(() => {
         log('mounted');
         return () => {
             var _a;
-            // handle the use of modals that are rendered only as show=true and then unmounted.
-            if (p.show) {
+            if (showing.current) {
+                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
                 backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
                 log('backdrop.setShow', false);
                 tryRemoveBodyStyles();
             }
+            else {
+                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
+            }
             log('un-mounted');
         };
     }, []);
     useBooleanChanged((show, previousShow) => {
-        var _a;
+        var _a, _b, _c;
         log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
         backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        showing.current = show;
         log('backdrop.setShow', show);
-        if (!htmlBodyStyles) {
-            log('creating singleton htmlBodyStyles');
-            htmlBodyStyles = css.css({
+        if (!bodyStyles.current) {
+            bodyStyles.current = css.css({
+                label: 'ModalBodyOverrides_' + ((_c = (_b = p.id) === null || _b === void 0 ? void 0 : _b.replace(/\s+/, '')) !== null && _c !== void 0 ? _c : nanoid.nanoid()),
                 overflow: 'hidden',
                 paddingRight: `${useScrollbarSize()}px`
             });
+            log('creating singleton bodyStyles', bodyStyles.current);
         }
         if (show) {
-            log('adding singleton htmlBodyStyles');
-            document.body.classList.add(htmlBodyStyles);
+            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
+            document.body.classList.add(bodyStyles.current);
         }
         else {
+            log('this modal is hiding. try removing singleton bodyStyles');
             tryRemoveBodyStyles();
         }
     }, p.show);
@@ -1966,18 +1967,8 @@ const getFileSizeDisplay = (size) => {
     return value.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ` ${suffix}`;
 };
 
-const getCurrencyDisplay = (value, isCents, denomination = '$') => {
-    let actualValue = value || 0;
-    if (isCents) {
-        actualValue /= 100;
-    }
-    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-};
-const noop = () => {
-    // lil' noop would be a great rap name. (thanks linter)
-};
-
 const Header = (props) => {
+    var _a;
     const theme = useThemeSafely();
     const bodyStyles = css.css `
 		padding-top: calc(${theme.layout.headerHeight} + ${theme.layout.headerBodyOffset});
@@ -1989,7 +1980,9 @@ const Header = (props) => {
             document.body.classList.remove(bodyStyles);
         };
     });
-    const toggleMenu = props.toggleMenu || noop;
+    const toggleMenu = (_a = props.toggleMenu) !== null && _a !== void 0 ? _a : (() => {
+        /* noop */
+    });
     const headerStyles = css.css `
 		display: flex;
 		gap: ${theme.controls.gap};
@@ -2119,7 +2112,7 @@ const Popover = (p) => {
 };
 
 const InfoTip = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const [showTip, setShowTip] = React__namespace.useState(false);
     const theme = useThemeSafely();
     const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
@@ -2181,13 +2174,13 @@ 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.__debug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
+            React__namespace.createElement(Modal, { id: props.modalId, __debug: props.__modalDebug, 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))));
     }
     else {
-        return (React__namespace.createElement(Popover, { reposition: false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React__namespace.createElement("div", { className: css.css({
+        return (React__namespace.createElement(Popover, { positions: props.positions, reposition: (_c = props.reposition) !== null && _c !== void 0 ? _c : false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React__namespace.createElement("div", { className: css.css({
                     padding: '0.5rem',
                     fontSize: '0.75rem',
                     maxWidth: '22rem'
@@ -3709,6 +3702,28 @@ const GlobalStyles = () => {
     return null;
 };
 
+const getCurrencyDisplay = (value, isCents, denomination = '$') => {
+    let actualValue = value || 0;
+    if (isCents) {
+        actualValue /= 100;
+    }
+    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+};
+/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
+const enumToEntities = (enumObj) => {
+    const entities = [];
+    for (const key in enumObj) {
+        if (isNaN(parseInt(key, 10))) {
+            entities.push({
+                id: enumObj[key],
+                name: key
+            });
+        }
+    }
+    return entities;
+};
+//TB: FUTURE  Expose in UI.
+
 const Slider = (p) => {
     const theme = useThemeSafely();
     const currentValue = React.useRef(p.value);
@@ -3991,11 +4006,8 @@ const defaultRows = 10;
 const TextArea = React__namespace.forwardRef((props, ref) => {
     var _a, _b;
     const [localValue, setLocalValue] = React__namespace.useState(props.value);
-    const [validationError, setValidationError] = React__namespace.useState('');
-    const updateErrorMessage = React__namespace.useCallback(() => {
-        setValidationError(getValidationMessage(inputRef.current));
-    }, []);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
     const nativeProps = __rest(props, ["onValueChange"]);
     const theme = useThemeSafely();
     React__namespace.useEffect(() => {
@@ -4166,9 +4178,6 @@ const WaitingIndicator = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
     }
     React.useEffect(() => {
         log('show changed', p.show);
@@ -4278,6 +4287,7 @@ exports.Tr = Tr;
 exports.WaitingIndicator = WaitingIndicator;
 exports.calcDynamicThemeProps = calcDynamicThemeProps;
 exports.defaultTheme = defaultTheme;
+exports.enumToEntities = enumToEntities;
 exports.getCurrencyDisplay = getCurrencyDisplay;
 exports.getFileSizeDisplay = getFileSizeDisplay;
 exports.useAccordianState = useAccordianState;

package/package.json

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