@mackin.com/styleguide 7.11.0 → 7.12.0

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: {
@@ -989,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

@@ -1937,6 +1937,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 +2075,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 +2143,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'
@@ -3885,6 +3899,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.12.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",