@mackin.com/styleguide 6.0.1-beta.1 → 6.2.0

package/index.d.ts

@@ -939,6 +939,8 @@ interface SliderProps<T extends SliderValue> {
     onUpdate?: (value: T) => void;
     /** Used with showValue.  Will be called to render the display string. */
     renderValue?: (value: number) => string;
+    /** Used with renderValue for the custom element width. Defaults to theme.controls.height * 2. */
+    renderValueWidth?: string;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => jsx.JSX.Element;
 

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 {
@@ -1835,6 +1835,7 @@ const FormColumnRow = (props) => {
 };
 
 /** @jsx jsx */
+//TB: have a sticky variant
 const Header = (props) => {
     const theme = useThemeSafely();
     const bodyStyles = css.css `
@@ -3111,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({
@@ -3173,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,
         } },
@@ -3217,22 +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 })));
+                    } }, 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;
     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;
-    return (react.jsx(Text, { css: {
-            //width: theme.controls.height,
-            width: `calc(${theme.controls.height} * 2)`,
-            left: `calc(${theme.controls.height} / 2 * -1)`,
-            bottom: '-1.5rem',
+    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,
+            top: flipText ? undefined : theme.controls.height,
+            bottom: flipText ? theme.controls.height : undefined,
             position: 'absolute',
-            overflow: 'hidden'
-        }, tag: "div", align: "center" }, displayValue));
+            overflow: 'hidden',
+        }, className: "slider-handle", tag: "div", align: "center" }, displayValue));
 };
 
 /** @jsx jsx */

package/package.json

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