@mackin.com/styleguide 7.11.0 → 7.13.0

package/index.d.ts

@@ -29,6 +29,8 @@ interface AutocompleteProps {
     inputAriaAttributes?: React.AriaAttributes;
     /** Defaults to 0ms. */
     getOptionsDebounceMs?: number;
+    /** Will enable scrolling in the results list. */
+    allowScroll?: boolean;
     onChange: (value: string) => void;
     getOptions: (value: string) => Promise<AutocompleteValue[]>;
     onPick: (value: AutocompleteValue) => void;
@@ -289,13 +291,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 +689,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 +728,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: {
@@ -989,4 +1005,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

@@ -891,7 +891,10 @@ const Autocomplete = (p) => {
     const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
     const shownValues = React__namespace.useMemo(() => {
         var _a;
-        return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
+        if (!p.allowScroll) {
+            return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
+        }
+        return values.slice();
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -923,6 +926,7 @@ const Autocomplete = (p) => {
         borderRadius: listBorderRadius,
         boxShadow: theme.controls.boxShadow,
         backgroundColor: theme.colors.bg,
+        color: theme.colors.font,
         marginTop: `-4px !important`,
         zIndex: theme.zIndexes.backdrop,
         'li:first-child button': {
@@ -932,7 +936,7 @@ const Autocomplete = (p) => {
         'li:last-child button': {
             borderBottomRightRadius: listBorderRadius,
             borderBottomLeftRadius: listBorderRadius,
-        }
+        },
     });
     const inputClass = css.css `
 		${showValues && `
@@ -985,7 +989,10 @@ const Autocomplete = (p) => {
                         }
                     }
                 }, 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: listClass },
+            showValues && (React__namespace.createElement(List, { ref: list, className: css.cx(listClass, p.allowScroll && css.css({
+                    overflowY: 'scroll',
+                    maxHeight: `calc(${theme.controls.height} * ${p.maxShownValues})`
+                })) },
                 shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
                         React__namespace.createElement(Button, { onKeyDown: e => {
@@ -1012,7 +1019,7 @@ const Autocomplete = (p) => {
                             } },
                             React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, getAutocompleteValueText(value)))));
                 }),
-                shownValues.length < values.length && (React__namespace.createElement(ListItem, null,
+                !p.allowScroll && shownValues.length < values.length && (React__namespace.createElement(ListItem, null,
                     React__namespace.createElement(Text, { tag: "div", italics: true, align: "center" },
                         "Showing ",
                         shownValues.length.toLocaleString(),
@@ -1049,9 +1056,6 @@ const BackdropContextProvider = (p) => {
                 log('un-mounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
         React.useEffect(() => {
             log('showCount changed', showCount);
         }, [showCount]);
@@ -1105,9 +1109,6 @@ const BackdropOverlay = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
         React.useEffect(() => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
@@ -1337,13 +1338,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);
             }
@@ -1353,10 +1355,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`
             });
@@ -1937,6 +1941,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) => {
@@ -2061,7 +2079,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;
@@ -2129,7 +2147,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'
@@ -3773,9 +3791,6 @@ const WaitingIndicator = (p) => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
     }
     React.useEffect(() => {
         log('show changed', p.show);
@@ -3885,6 +3900,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.11.0",
+	"version": "7.13.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",