@mackin.com/styleguide 8.0.0-beta.22 → 8.0.0-beta.23

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: {
@@ -1008,4 +1022,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]);
@@ -1464,6 +1458,7 @@ 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 tryRemoveBodyStyles = () => {
         if (backdrop.showCount <= 1 && htmlBodyStyles) {
             log('backdrop.showCount', backdrop.showCount, 'removing singleton htmlBodyStyles');
@@ -1474,10 +1469,7 @@ const Modal = (p) => {
         log('mounted');
         return () => {
             var _a;
-            // handle the use of modals that are rendered only as show=true and then unmounted.
-            //TB: BUG, handle unmounted if already showing.
-            // p.show here doesn't work.  we need some sort of ref that is controlled via the p.show call below
-            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);
@@ -1493,10 +1485,12 @@ const Modal = (p) => {
         var _a;
         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({
+                label: 'ModalBodyOverrides',
                 overflow: 'hidden',
                 paddingRight: `${useScrollbarSize()}px`
             });
@@ -1973,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});
@@ -1996,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};
@@ -2126,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;
@@ -2188,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'
@@ -3716,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);
@@ -4173,9 +4181,6 @@ const WaitingIndicator = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
     }
     React.useEffect(() => {
         log('show changed', p.show);
@@ -4285,6 +4290,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.22",
+	"version": "8.0.0-beta.23",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",