@mackin.com/styleguide 6.1.0 → 6.2.0

package/index.js

@@ -1591,7 +1591,7 @@ const Divider = (props) => {
 
 /** @jsx jsx */
 const ErrorModal = (props) => {
-    const { message } = props; __rest(props, ["message"]);
+    const { message } = props;
     const theme = useThemeSafely();
     const modalStyles = react.css `
 		.modalHeader {
@@ -3112,7 +3112,6 @@ const FileUploader = (p) => {
         message === 'failure' && (react.jsx(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: onClear }))));
 };
 const UploadInfoPanel = (p) => {
-    useThemeSafely();
     return (react.jsx(InfoPanel, { variant: p.variant },
         p.message,
         react.jsx(Button, { block: true, className: css.css({
@@ -3174,8 +3173,9 @@ const BoundStaticPager = (p) => {
 const Slider = (p) => {
     const theme = useThemeSafely();
     const currentValue = React.useRef(p.value);
+    const sliderContainer = React.useRef(null);
     const height = p.showValue ? `calc(${theme.controls.height} + 1.5rem)` : theme.controls.height;
-    return (react.jsx("div", { css: {
+    return (react.jsx("div", { ref: sliderContainer, css: {
             width: '100%',
             height,
         } },
@@ -3218,23 +3218,46 @@ const Slider = (p) => {
                         '&:hover': {
                             filter: theme.controls.hoverBrightness
                         }
-                    } }, props), p.showValue && react.jsx(HandleText, { value: currentValue.current, index: state.index, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth })));
+                    } }, props), p.showValue && (react.jsx(HandleText, { index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
+const rectsCollideX = (r1, r2) => {
+    if (r1.left >= r2.left && r1.left <= r2.right) {
+        return true;
+    }
+    if (r1.right >= r2.left && r1.right <= r2.right) {
+        return true;
+    }
+    return false;
+};
 const HandleText = (p) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const theme = useThemeSafely();
-    const value = Array.isArray(p.value) ? p.value[(_a = p.index) !== null && _a !== void 0 ? _a : 0] : p.value;
-    const displayValue = (_c = (_b = p.renderValue) === null || _b === void 0 ? void 0 : _b.call(p, value)) !== null && _c !== void 0 ? _c : value;
-    const renderValueWidth = (_d = p.renderValueWidth) !== null && _d !== void 0 ? _d : theme.controls.height;
-    const renderValueLeft = `calc(${renderValueWidth} * 0.5 * -1 + (${theme.controls.height} * 0.5))`;
+    const displayValue = (_b = (_a = p.renderValue) === null || _a === void 0 ? void 0 : _a.call(p, p.value)) !== null && _b !== void 0 ? _b : p.value;
+    const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : theme.controls.height;
+    const renderValueLeft = React.useMemo(() => {
+        return `calc(${renderValueWidth} * 0.5 * -1 + (${theme.controls.height} * 0.5))`;
+    }, [p.renderValueWidth]);
+    const [flipText, setFlipText] = React.useState(false);
+    React.useEffect(() => {
+        // this needs to fire on every render due to the other handle also moving.
+        var _a, _b;
+        if (p.index === 1) {
+            // only do this for the max/right-most handle
+            const [r1, r2] = Array.from((_b = (_a = p.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.slider-handle').values()) !== null && _b !== void 0 ? _b : []).map(e => e.getBoundingClientRect());
+            if (r1 && r2) {
+                setFlipText(rectsCollideX(r1, r2));
+            }
+        }
+    });
     return (react.jsx(Text, { ellipsis: true, css: {
             width: renderValueWidth,
             left: renderValueLeft,
-            bottom: '-1.5rem',
+            top: flipText ? undefined : theme.controls.height,
+            bottom: flipText ? theme.controls.height : undefined,
             position: 'absolute',
             overflow: 'hidden',
-        }, tag: "div", align: "center" }, displayValue));
+        }, className: "slider-handle", tag: "div", align: "center" }, displayValue));
 };
 
 /** @jsx jsx */

package/package.json

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