@mackin.com/styleguide 7.7.1 → 8.0.0-beta.1

package/index.d.ts

@@ -11,8 +11,6 @@ declare type AutocompleteValue = string | AutoCompleteItem;
 interface AutocompleteProps {
     value: AutocompleteValue | undefined;
     round?: boolean;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: boolean;
     rightControl?: JSX.Element;
     placeholder?: string;
     id?: string;
@@ -74,8 +72,6 @@ interface ButtonProps {
     block?: boolean;
     /** As round as can be. */
     round?: boolean;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: boolean;
     className?: string;
     rightIcon?: JSX.Element;
     leftIcon?: JSX.Element;
@@ -174,8 +170,6 @@ interface DatePickerProps {
     required?: boolean;
     /** Defaults to 250ms */
     debounceMs?: number;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: boolean;
     round?: boolean;
     /** This is the ms from Date.valueOf(). */
     min?: number;
@@ -331,7 +325,6 @@ interface InputProps {
     name?: string;
     style?: React.CSSProperties;
     value?: InputValue;
-    rounded?: boolean;
     placeholder?: string;
     id?: string;
     disabled?: boolean;
@@ -475,8 +468,6 @@ interface OmniLinkProps {
     title?: string;
     /** Only for button variants. */
     round?: boolean;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually.  Only for button variants. */
-    rounded?: boolean;
     /** Only for button variants. */
     small?: boolean;
     /** Overrides the default color (theme.colors.link) for non-button variants. To be used under exceptional circumstances. To change all link colors, override theme.colors.link directly. */
@@ -563,8 +554,6 @@ interface PagerStyleProps {
     noResultsText?: string;
     /** Used for localizations.  Defaults to 'Page' */
     pageText?: string;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: boolean;
     className?: string;
     leftControls?: JSX.Element;
     rightControls?: JSX.Element;
@@ -664,10 +653,6 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
     })[];
     onChange: (value: T, event: React.ChangeEvent<HTMLSelectElement>) => void;
     readonly?: boolean;
-    /** @deprecated Unused.  Picker will always render a 'select' element. */
-    type?: 'select';
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: boolean;
 }
 declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
 
@@ -711,8 +696,6 @@ interface SearchBoxProps {
     id?: string;
     placeholder?: string;
     round?: boolean;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: boolean;
     className?: string;
     onSubmit?: () => Promise<void>;
     /** Defaults to 250ms */
@@ -724,8 +707,6 @@ declare type Alignment = 'left' | 'right' | 'center';
 
 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;
 
 interface MackinTheme {
@@ -791,8 +772,6 @@ interface MackinTheme {
         focusOutlineShadow: string;
         focusOutlineRequiredShadow: string;
         roundRadius: string;
-        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-        roundedRadius: string;
         disabledOpacity: string;
         formButtonMinWidth: string;
         gap: string;
@@ -857,8 +836,6 @@ interface TabHeaderTabProps {
 interface TabHeaderProps {
     tabs: TabHeaderTabProps[];
     id?: string;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: boolean;
     /** Defaults to 10rem. */
     maxTabWidth?: string;
     onTabChanged?: (tabIndex: number) => void;
@@ -992,4 +969,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, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, 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, 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, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, 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, useMediaQuery, useThemeSafely };

package/index.js

@@ -110,8 +110,6 @@ const defaultTheme = {
         focusOutlineShadow: '',
         focusOutlineRequiredShadow: '',
         roundRadius: '3rem',
-        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-        roundedRadius: '0.5rem',
         disabledOpacity: '0.5',
         formButtonMinWidth: '7rem',
         gap: '1rem',
@@ -469,9 +467,6 @@ const Button = (props) => {
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
-		${props.rounded && `
-			border-radius: ${theme.controls.roundedRadius};
-		`}
 		${props.block && `
 			width: 100%;
 		`}
@@ -561,8 +556,6 @@ const Input = React__namespace.forwardRef((props, ref) => {
         borderRadius: theme.controls.roundRadius,
         paddingLeft: `calc(${theme.controls.padding} * 2)`,
         paddingRight: `calc(${theme.controls.padding} * 2)`
-    }, props.rounded && {
-        borderRadius: theme.controls.roundedRadius
     }, props.readOnly && {
         backgroundColor: 'transparent',
         cursor: 'default',
@@ -861,22 +854,26 @@ const Autocomplete = (p) => {
 		position: relative;
 		width: 100%;
 	`;
+    let listBorderRadius = '';
+    if (p.round || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
     const listClass = css.css({
         position: 'absolute',
         width: '100%',
         border: theme.controls.border,
-        borderRadius: p.round || p.rounded ? theme.controls.roundedRadius : theme.controls.borderRadius,
+        borderRadius: listBorderRadius,
         boxShadow: theme.controls.boxShadow,
         backgroundColor: theme.colors.bg,
         marginTop: `-4px !important`,
         zIndex: theme.zIndexes.backdrop,
         'li:first-child button': {
-            borderTopRightRadius: theme.controls.borderRadius,
-            borderTopLeftRadius: theme.controls.borderRadius,
+            borderTopRightRadius: listBorderRadius,
+            borderTopLeftRadius: listBorderRadius,
         },
         'li:last-child button': {
-            borderBottomRightRadius: theme.controls.borderRadius,
-            borderBottomLeftRadius: theme.controls.borderRadius,
+            borderBottomRightRadius: listBorderRadius,
+            borderBottomLeftRadius: listBorderRadius,
         }
     });
     const inputClass = css.css `
@@ -891,7 +888,7 @@ const Autocomplete = (p) => {
     return (React__namespace.createElement("div", { ref: element, className: css.cx(baseClass, 'autocomplete') },
         React__namespace.createElement(Backdrop$1, { onClick: () => setValues([]), show: showValues, allowScroll: true, transparent: true }),
         React__namespace.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
-            React__namespace.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rounded: p.rounded, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: css.cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
+            React__namespace.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: css.cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
                     const value = v;
                     p.onChange(value);
                     if (!p.minChars || value.length >= p.minChars) {
@@ -1840,13 +1837,6 @@ const getSizeString = (size) => {
     }
 };
 
-/** @deprecated This will not work correctly with emotion/css.  Use 'cx' for adding multiple class names together.  */
-const mergeClassNames = (...classes) => {
-    if (!classes) {
-        return undefined;
-    }
-    return classes.filter(c => c).map(c => c).join(' ');
-};
 const getCurrencyDisplay = (value, isCents, denomination = '$') => {
     let actualValue = value || 0;
     if (isCents) {
@@ -2641,9 +2631,6 @@ const OmniLink = (props) => {
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
-		${props.rounded && `
-			border-radius: ${theme.controls.roundedRadius};
-		`}
 		${props.small && `
 			font-size: 0.8rem;
 			height: ${theme.controls.heightSmall};
@@ -2673,7 +2660,7 @@ const OmniLink = (props) => {
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onChange", "type", "rounded", "readonly"]);
+    , ["value", "options", "onChange", "readonly"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -2706,9 +2693,6 @@ const Picker = (props) => {
 				outline: none;
 				box-shadow: ${theme.controls.focusOutlineShadow};
 			}
-			${props.rounded && `
-				border-radius: ${theme.controls.roundedRadius};
-			`}
 			${props.readonly && `
 				background-color: transparent !important;
 				border: none;
@@ -2795,9 +2779,6 @@ const Pager = (props) => {
 		@media(min-width: ${theme.breakpoints.tablet}) {
 			grid-template-columns: ${theme.controls.height} 1fr 1fr 1fr ${theme.controls.height};
 		}
-		${props.rounded && `
-			border-radius: ${theme.controls.roundedRadius};
-		`}
 	`;
     const controlStyles = css.css `
 		display: none;
@@ -2832,8 +2813,8 @@ const BoundMemoryPager = (p) => {
     var _a, _b, _c;
     const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? pager.page : undefined, totalPages: p.showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { type: "select", value: pager.limit, options: pager.limitOptions, onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { type: "select", value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
+            React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
             p.onPage(d);
         } })));
 };
@@ -2844,8 +2825,8 @@ const BoundStaticPager = (p) => {
     const showLimit = !!(result.limit && p.limitOptions && p.limitOptions.length > 1 && p.onLimit);
     const showSort = !!(p.sort !== undefined && p.sortOptions && p.sortOptions.length > 1 && p.onSort);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? result.page : undefined, totalPages: p.showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { type: "select", value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { type: "select", value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onChange: v => {
+            React__namespace.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onChange: v => {
                     var _a;
                     (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
                 } }))) : undefined, page: d => {
@@ -3279,7 +3260,7 @@ const SearchBox = (props) => {
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
     //TB: replace with new inputs
     return (React__namespace.createElement(Form, { role: "search", className: css.cx('searchBox', props.className), onSubmit: onSubmit },
-        React__namespace.createElement(Input, { id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, rounded: props.rounded, onChange: props.onChange, rightControl: submitButton })));
+        React__namespace.createElement(Input, { id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton })));
 };
 
 const GlobalStyles = () => {
@@ -3438,10 +3419,6 @@ const TabHeader = (p) => {
                     borderBottomRightRadius: 0,
                     borderBottom: 'none',
                     zIndex: 3,
-                }, active && p.rounded && {
-                    borderRadius: p.rounded && theme.controls.roundedRadius,
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
                 });
                 buttonVariant = 'link';
                 buttonStyles = css.css({
@@ -3459,7 +3436,7 @@ const TabHeader = (p) => {
                 });
             }
             return (React__namespace.createElement("li", { key: index, className: tabStyles },
-                React__namespace.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name, readonly: active, rounded: p.rounded && variant === 'button', onClick: () => {
+                React__namespace.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name, readonly: active, onClick: () => {
                         setTabIndex(index);
                         if (p.onTabChanged) {
                             p.onTabChanged(index);
@@ -3797,7 +3774,6 @@ exports.WaitingIndicator = WaitingIndicator;
 exports.calcDynamicThemeProps = calcDynamicThemeProps;
 exports.defaultTheme = defaultTheme;
 exports.getCurrencyDisplay = getCurrencyDisplay;
-exports.mergeClassNames = mergeClassNames;
 exports.useMediaQuery = useMediaQuery;
 exports.useThemeSafely = useThemeSafely;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "7.7.1",
+	"version": "8.0.0-beta.1",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",
@@ -10,15 +10,15 @@
 	"devDependencies": {},
 	"dependencies": {},
 	"optionalDependencies": {
-		"react-router-dom": "^5.1.2",
-		"react-tiny-popover": "^6.0.5",
+		"react-router-dom": "^5.3.0",
+		"react-tiny-popover": "^7.0.1",
 		"react-slider": "^1.3.1"
 	},
 	"peerDependencies": {
 		"nanoid": "^3.1.23",
 		"date-fns": "^2.13.0",
 		"lodash": "^4.17.15",
-		"react": "^16.12.0",
+		"react": "^17.0.2",
 		"@emotion/css": "^11.1.3",
 		"@fortawesome/fontawesome-svg-core": "^1.2.35",
 		"@fortawesome/pro-light-svg-icons": "^5.15.3",