@mackin.com/styleguide 10.1.1 → 10.2.0

package/index.d.ts

@@ -667,17 +667,22 @@ interface PopoverProps {
 declare const Popover: (p: PopoverProps) => React.JSX.Element;
 
 interface ProgressBarProps {
+    /** The value in whole pct - 55 NOT 0.55. */
     pct: number;
+    /** If `true`, the bar will be rounded at the corners. */
     round?: boolean;
+    /** If `true`, the current percent will be shown as a label. */
     showPct?: boolean;
+    /** Where to place the pct label from `showPct`.  Defaults to `bottom`.  Ignored if `showPct` is false. */
+    showPctPosition?: 'bottom' | 'right';
+    /** This will be applied to the bar. */
     className?: string;
+    /** This will be applied to the bar fill.  Override this to change the transitions or remove them. */
+    barFillClassName?: string;
+    /** Applied to the percent label element.  Ignored if `showPct` is false. */
+    pctLabelClassName?: string;
 }
-declare const ProgressBar: (props: {
-    pct: number;
-    round?: boolean;
-    showPct?: boolean;
-    className?: string;
-}) => React.JSX.Element;
+declare const ProgressBar: (props: ProgressBarProps) => React.JSX.Element;
 
 type BaseProps$1 = Omit<TextInputProps, 'rightControl' | 'wrapperClassName' | 'type' | 'className'> & InputOnFocusProps;
 interface SearchBoxProps extends BaseProps$1 {

package/index.esm.js

@@ -982,11 +982,11 @@ const Autocomplete = (p) => {
             return p.options.slice(0, maxShowValues);
         }
         return p.options.slice();
-    }, [p.options]);
+    }, [p.options, p.allowScroll, maxShowValues]);
     const { getText, language } = useLocalization();
     const resultsText = React.useMemo(() => {
         return `${getText("Showing")} ${displayOptions.length.toLocaleString()} ${getText("of")} ${p.options.length.toLocaleString()} ${getText("results")}.`;
-    }, [language]);
+    }, [language, displayOptions, p.options]);
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -1409,7 +1409,7 @@ const Calendar = (p) => {
         const monthTitle = getText(format(monthStart, 'LLLL'));
         const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => getText(d));
         return { monthTitle, weekdays };
-    }, [language]);
+    }, [language, monthStart]);
     const days = getDaysInMonth(monthStart);
     const startDayOfWeek = getDay(monthStart);
     const dayEndIndex = startDayOfWeek + days - 1;
@@ -1766,7 +1766,7 @@ const ConfirmModal = (props) => {
         const confirmText = props.confirmText || getText('OK');
         const cancelText = props.cancelText || getText('Cancel');
         return { confirmText, cancelText };
-    }, [language]);
+    }, [language, props.confirmText, props.cancelText]);
     return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
         React.createElement("div", { className: css({ padding: '1rem' }) },
             React.createElement(Text, { align: "center" }, props.text),
@@ -1783,7 +1783,7 @@ const CopyButton = React.forwardRef((props, ref) => {
         const copiedText = getText('Copied!');
         const titleText = props.title || getText('Copy to clipboard');
         return { copiedText, titleText };
-    }, [language]);
+    }, [language, props.title]);
     return (React.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? copiedText : titleText, variant: "icon", onBlur: e => {
             var _a;
             setCopied(false);
@@ -1989,7 +1989,7 @@ const FileUploader = (p) => {
             }
         }
         return "";
-    }, [language]);
+    }, [language, files, p.instructionMessage, totalFileSize, message]);
     const setAllFiles = (inputFiles) => {
         if (input.current && inputFiles === undefined) {
             input.current.value = '';
@@ -2424,7 +2424,7 @@ const DateInput = React.forwardRef((props, ref) => {
     }, [dateValue, textValue, language]);
     const [showCalendar, setShowCalendar] = React.useState(false);
     const [calendarDate, setCalendarDate] = React.useState(getCalendarDate(props.value, props.min, props.max));
-    const monthTitle = React.useMemo(() => getText(format(calendarDate, 'LLLL')), [language]);
+    const monthTitle = React.useMemo(() => getText(format(calendarDate, 'LLLL')), [language, calendarDate]);
     // controls the one-time focus set on show
     const needsFocus = React.useRef(false);
     const toggleCalendar = React.useCallback((show) => {
@@ -3230,7 +3230,7 @@ const Pager = (props) => {
             pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : getText('Page')} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
         }
         return { itemText, pageText };
-    }, [language]);
+    }, [language, props.totalItems, props.pageIndex, props.totalPages]);
     const theme = useThemeSafely();
     const pagerStyles = css `
 		display: grid;
@@ -3282,7 +3282,7 @@ const BoundMemoryPager = (p) => {
         const limitText = (_a = p.limitText) !== null && _a !== void 0 ? _a : getText("Limit");
         const sortText = (_b = p.sortText) !== null && _b !== void 0 ? _b : getText("Sort");
         return { limitText, sortText };
-    }, [language]);
+    }, [language, p.limitText, p.sortText]);
     return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? pager.page : undefined, totalPages: 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.createElement(Label, { text: limitText, orientation: "horizontal" },
             React.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: 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.createElement(Label, { text: sortText, orientation: "horizontalReverse" },
             React.createElement(Picker, { value: (_a = pager.sort) !== null && _a !== void 0 ? _a : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
@@ -3299,7 +3299,7 @@ const BoundStaticPager = (p) => {
         const limitText = (_a = p.limitText) !== null && _a !== void 0 ? _a : getText("Limit");
         const sortText = (_b = p.sortText) !== null && _b !== void 0 ? _b : getText("Sort");
         return { limitText, sortText };
-    }, [language]);
+    }, [language, p.limitText, p.sortText]);
     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.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? result.page : undefined, totalPages: showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React.createElement(Label, { text: limitText, orientation: "horizontal" },
@@ -3665,6 +3665,7 @@ class ItemPager {
 }
 
 const ProgressBar = (props) => {
+    var _a;
     const bar = React.useRef(null);
     React.useEffect(() => {
         const pct = cleanPct(props.pct);
@@ -3690,12 +3691,23 @@ const ProgressBar = (props) => {
 			border-radius: 1rem;
 		`}
 	`;
-    return (React.createElement("div", { className: "progressBar" },
+    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
+    const wrapStyles = css({
+        label: 'ProgressBar',
+        display: 'flex',
+        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
+        alignItems: showPctPosition === 'right' ? 'center' : undefined,
+        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
+    });
+    const pctLabelStyles = (props.showPct && props.showPctPosition === 'right') ? css({
+        width: '3rem'
+    }) : undefined;
+    return (React.createElement("div", { className: cx(wrapStyles, "progressBar") },
         React.createElement("div", { className: cx(barStyles, props.className) },
-            React.createElement("div", { ref: bar, className: fillStyles })),
-        props.showPct && React.createElement(Text, { align: "center", tag: "div", spacedOut: true },
-            props.pct,
-            "\u00A0%")));
+            React.createElement("div", { ref: bar, className: cx(fillStyles, props.barFillClassName) })),
+        props.showPct && (React.createElement(Text, { align: "center", tag: "div", spacedOut: true, className: cx(pctLabelStyles, props.pctLabelClassName) },
+            cleanPct(props.pct),
+            "%"))));
 };
 const cleanPct = (value) => {
     if (value) {
@@ -3917,7 +3929,7 @@ const HandleText = (p) => {
     const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
     const renderValueLeft = useMemo(() => {
         return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
-    }, [p.renderValueWidth]);
+    }, [p.renderValueWidth, p.sliderHandleSize]);
     const [flipText, setFlipText] = useState(false);
     const offset = '2px';
     useEffect(() => {

package/index.js

@@ -1000,11 +1000,11 @@ const Autocomplete = (p) => {
             return p.options.slice(0, maxShowValues);
         }
         return p.options.slice();
-    }, [p.options]);
+    }, [p.options, p.allowScroll, maxShowValues]);
     const { getText, language } = useLocalization();
     const resultsText = React__namespace.useMemo(() => {
         return `${getText("Showing")} ${displayOptions.length.toLocaleString()} ${getText("of")} ${p.options.length.toLocaleString()} ${getText("results")}.`;
-    }, [language]);
+    }, [language, displayOptions, p.options]);
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -1427,7 +1427,7 @@ const Calendar = (p) => {
         const monthTitle = getText(dateFns.format(monthStart, 'LLLL'));
         const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => getText(d));
         return { monthTitle, weekdays };
-    }, [language]);
+    }, [language, monthStart]);
     const days = dateFns.getDaysInMonth(monthStart);
     const startDayOfWeek = dateFns.getDay(monthStart);
     const dayEndIndex = startDayOfWeek + days - 1;
@@ -1784,7 +1784,7 @@ const ConfirmModal = (props) => {
         const confirmText = props.confirmText || getText('OK');
         const cancelText = props.cancelText || getText('Cancel');
         return { confirmText, cancelText };
-    }, [language]);
+    }, [language, props.confirmText, props.cancelText]);
     return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, props.text),
@@ -1801,7 +1801,7 @@ const CopyButton = React__namespace.forwardRef((props, ref) => {
         const copiedText = getText('Copied!');
         const titleText = props.title || getText('Copy to clipboard');
         return { copiedText, titleText };
-    }, [language]);
+    }, [language, props.title]);
     return (React__namespace.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? copiedText : titleText, variant: "icon", onBlur: e => {
             var _a;
             setCopied(false);
@@ -2007,7 +2007,7 @@ const FileUploader = (p) => {
             }
         }
         return "";
-    }, [language]);
+    }, [language, files, p.instructionMessage, totalFileSize, message]);
     const setAllFiles = (inputFiles) => {
         if (input.current && inputFiles === undefined) {
             input.current.value = '';
@@ -2442,7 +2442,7 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
     }, [dateValue, textValue, language]);
     const [showCalendar, setShowCalendar] = React__namespace.useState(false);
     const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(props.value, props.min, props.max));
-    const monthTitle = React__namespace.useMemo(() => getText(dateFns.format(calendarDate, 'LLLL')), [language]);
+    const monthTitle = React__namespace.useMemo(() => getText(dateFns.format(calendarDate, 'LLLL')), [language, calendarDate]);
     // controls the one-time focus set on show
     const needsFocus = React__namespace.useRef(false);
     const toggleCalendar = React__namespace.useCallback((show) => {
@@ -3248,7 +3248,7 @@ const Pager = (props) => {
             pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : getText('Page')} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
         }
         return { itemText, pageText };
-    }, [language]);
+    }, [language, props.totalItems, props.pageIndex, props.totalPages]);
     const theme = useThemeSafely();
     const pagerStyles = css.css `
 		display: grid;
@@ -3300,7 +3300,7 @@ const BoundMemoryPager = (p) => {
         const limitText = (_a = p.limitText) !== null && _a !== void 0 ? _a : getText("Limit");
         const sortText = (_b = p.sortText) !== null && _b !== void 0 ? _b : getText("Sort");
         return { limitText, sortText };
-    }, [language]);
+    }, [language, p.limitText, p.sortText]);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? pager.page : undefined, totalPages: 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: limitText, orientation: "horizontal" },
             React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: 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: sortText, orientation: "horizontalReverse" },
             React__namespace.createElement(Picker, { value: (_a = pager.sort) !== null && _a !== void 0 ? _a : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
@@ -3317,7 +3317,7 @@ const BoundStaticPager = (p) => {
         const limitText = (_a = p.limitText) !== null && _a !== void 0 ? _a : getText("Limit");
         const sortText = (_b = p.sortText) !== null && _b !== void 0 ? _b : getText("Sort");
         return { limitText, sortText };
-    }, [language]);
+    }, [language, p.limitText, p.sortText]);
     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: showPageText ? result.page : undefined, totalPages: 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: limitText, orientation: "horizontal" },
@@ -3683,6 +3683,7 @@ class ItemPager {
 }
 
 const ProgressBar = (props) => {
+    var _a;
     const bar = React__namespace.useRef(null);
     React__namespace.useEffect(() => {
         const pct = cleanPct(props.pct);
@@ -3708,12 +3709,23 @@ const ProgressBar = (props) => {
 			border-radius: 1rem;
 		`}
 	`;
-    return (React__namespace.createElement("div", { className: "progressBar" },
+    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
+    const wrapStyles = css.css({
+        label: 'ProgressBar',
+        display: 'flex',
+        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
+        alignItems: showPctPosition === 'right' ? 'center' : undefined,
+        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
+    });
+    const pctLabelStyles = (props.showPct && props.showPctPosition === 'right') ? css.css({
+        width: '3rem'
+    }) : undefined;
+    return (React__namespace.createElement("div", { className: css.cx(wrapStyles, "progressBar") },
         React__namespace.createElement("div", { className: css.cx(barStyles, props.className) },
-            React__namespace.createElement("div", { ref: bar, className: fillStyles })),
-        props.showPct && React__namespace.createElement(Text, { align: "center", tag: "div", spacedOut: true },
-            props.pct,
-            "\u00A0%")));
+            React__namespace.createElement("div", { ref: bar, className: css.cx(fillStyles, props.barFillClassName) })),
+        props.showPct && (React__namespace.createElement(Text, { align: "center", tag: "div", spacedOut: true, className: css.cx(pctLabelStyles, props.pctLabelClassName) },
+            cleanPct(props.pct),
+            "%"))));
 };
 const cleanPct = (value) => {
     if (value) {
@@ -3935,7 +3947,7 @@ const HandleText = (p) => {
     const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
     const renderValueLeft = React.useMemo(() => {
         return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
-    }, [p.renderValueWidth]);
+    }, [p.renderValueWidth, p.sliderHandleSize]);
     const [flipText, setFlipText] = React.useState(false);
     const offset = '2px';
     React.useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "10.1.1",
+    "version": "10.2.0",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",