@mackin.com/styleguide 6.0.2 → 6.1.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

@@ -1835,6 +1835,7 @@ const FormColumnRow = (props) => {
 };
 
 /** @jsx jsx */
+//TB: have a sticky variant
 const Header = (props) => {
     const theme = useThemeSafely();
     const bodyStyles = css.css `
@@ -3217,21 +3218,22 @@ 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, { value: currentValue.current, index: state.index, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth })));
             } })));
 };
 const HandleText = (p) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     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)`,
+    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))`;
+    return (react.jsx(Text, { ellipsis: true, css: {
+            width: renderValueWidth,
+            left: renderValueLeft,
             bottom: '-1.5rem',
             position: 'absolute',
-            overflow: 'hidden'
+            overflow: 'hidden',
         }, tag: "div", align: "center" }, displayValue));
 };
 

package/package.json

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