@mackin.com/styleguide 7.10.0 → 7.12.1

package/index.d.ts

@@ -289,13 +289,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;
+    /** 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;
 
@@ -680,7 +687,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;
@@ -719,7 +726,14 @@ declare const GlobalStyles: () => null;
 
 /** @deprecated This will not work correctly with emotion/css.  Use 'cx' for adding multiple class names together.  */
 declare const mergeClassNames: (...classes: (string | boolean | undefined)[]) => string | undefined;
-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: {
@@ -810,6 +824,10 @@ interface MackinTheme {
         desktop: string;
         tablet: string;
     };
+    mediaQueries: {
+        desktop: string;
+        tablet: string;
+    };
 }
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
 declare const calcDynamicThemeProps: <T extends MackinTheme>(theme: T) => void;
@@ -985,4 +1003,4 @@ declare const WaitingIndicator: (p: {
     debug?: boolean;
 }) => JSX.Element;
 
-export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, 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, mergeClassNames, useMediaQuery, useThemeSafely };
+export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, 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, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, mergeClassNames, useMediaQuery, useThemeSafely };

package/index.js

@@ -47,6 +47,8 @@ const calcDynamicThemeProps = (theme) => {
     theme.controls.focusOutlineShadow = `0px 0px 4px 2px ${theme.colors.focusOutline}`;
     theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
     theme.controls.dividerBorder = `2px solid ${theme.colors.divider}`;
+    theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
+    theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
 };
 const defaultTheme = {
     colors: {
@@ -135,6 +137,10 @@ const defaultTheme = {
     breakpoints: {
         desktop: '800px',
         tablet: '768px'
+    },
+    mediaQueries: {
+        desktop: '',
+        tablet: ''
     }
 };
 calcDynamicThemeProps(defaultTheme);
@@ -1043,9 +1049,6 @@ const BackdropContextProvider = (p) => {
                 log('un-mounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
         React.useEffect(() => {
             log('showCount changed', showCount);
         }, [showCount]);
@@ -1099,9 +1102,6 @@ const BackdropOverlay = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
         React.useEffect(() => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
@@ -1331,13 +1331,14 @@ const Modal = (p) => {
     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 showing = React.useRef(p.show);
     React.useEffect(() => {
         log('mounted');
         return () => {
             // handle the use of modals that are rendered only as show=true and then unmounted.
             backdrop.setShow(false);
             log('backdrop.setShow', false);
-            if (backdrop.showCount <= 1 && htmlBodyStyles) {
+            if (showing.current && backdrop.showCount <= 1 && htmlBodyStyles) {
                 log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
                 document.body.classList.remove(htmlBodyStyles);
             }
@@ -1347,10 +1348,12 @@ const Modal = (p) => {
     React.useEffect(() => {
         log('show changed', p.show);
         backdrop.setShow(p.show);
+        showing.current = p.show;
         log('backdrop.setShow', true);
         if (!htmlBodyStyles) {
             log('creating singleton htmlBodyStyles');
             htmlBodyStyles = css.css({
+                label: 'ModalBodyOverrides',
                 overflow: 'hidden',
                 paddingRight: `${useScrollbarSize()}px`
             });
@@ -1931,6 +1934,20 @@ const getCurrencyDisplay = (value, isCents, denomination = '$') => {
 };
 const noop = () => {
     // lil' noop would be a great rap name. (thanks linter)
+};
+//TB: this will need to be exposed in v8 on the helpers page.
+/** 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;
 };
 
 const Header = (props) => {
@@ -2055,7 +2072,7 @@ const Image = (props) => {
 };
 
 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;
@@ -2123,7 +2140,7 @@ const InfoTip = (props) => {
                 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'
@@ -3767,9 +3784,6 @@ const WaitingIndicator = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
     }
     React.useEffect(() => {
         log('show changed', p.show);
@@ -3879,6 +3893,7 @@ exports.Tr = Tr;
 exports.WaitingIndicator = WaitingIndicator;
 exports.calcDynamicThemeProps = calcDynamicThemeProps;
 exports.defaultTheme = defaultTheme;
+exports.enumToEntities = enumToEntities;
 exports.getCurrencyDisplay = getCurrencyDisplay;
 exports.getFileSizeDisplay = getFileSizeDisplay;
 exports.mergeClassNames = mergeClassNames;

package/package.json

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