@mackin.com/styleguide 6.0.0 → 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 `
@@ -2067,7 +2068,7 @@ const formatLocalValue = (value, type) => {
     return newValue;
 };
 const Input = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const [localValue, setLocalValue] = React__namespace.useState(formatLocalValue(props.value, props.type));
     const debounceMs = (_a = props.debounceMs) !== null && _a !== void 0 ? _a : DEFAULT_DEBOUNCE_MS;
     const autoComplete = (_b = props.autoComplete) !== null && _b !== void 0 ? _b : 'off';
@@ -2075,9 +2076,10 @@ const Input = (props) => {
         wrappedOnChange: (props.onChange && debounceMs) ? lodash.debounce((value) => {
             var _a;
             (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
-        }, debounceMs) : props.onChange,
+        }, debounceMs) : undefined,
         focused: false
     });
+    const onChange = (_c = vars.current.wrappedOnChange) !== null && _c !== void 0 ? _c : props.onChange;
     const trySyncLocalValue = () => {
         if (vars.current.focused) {
             return;
@@ -2163,15 +2165,11 @@ const Input = (props) => {
                         numValue = props.max;
                     }
                     setLocalValue(numValue);
-                    if (vars.current.wrappedOnChange) {
-                        vars.current.wrappedOnChange(numValue);
-                    }
+                    onChange === null || onChange === void 0 ? void 0 : onChange(numValue);
                 }
                 else if (!value) {
                     setLocalValue(value);
-                    if (vars.current.wrappedOnChange) {
-                        vars.current.wrappedOnChange(undefined);
-                    }
+                    onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
                 }
             } });
     }
@@ -2179,10 +2177,10 @@ const Input = (props) => {
         inputElement = react.jsx("input", { style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
                 const value = e.target.value;
                 setLocalValue(value);
-                if (vars.current.wrappedOnChange) {
+                if (onChange) {
                     const dateParts = DATE_REGEX.exec(value);
                     if (!dateParts) {
-                        vars.current.wrappedOnChange(undefined);
+                        onChange(undefined);
                     }
                     else {
                         const year = parseInt(dateParts[3], 10);
@@ -2196,10 +2194,10 @@ const Input = (props) => {
                             if (props.max && ms > props.max) {
                                 ms = props.max;
                             }
-                            vars.current.wrappedOnChange(ms);
+                            onChange(ms);
                         }
                         else {
-                            vars.current.wrappedOnChange(undefined);
+                            onChange(undefined);
                         }
                     }
                 }
@@ -2215,9 +2213,7 @@ const Input = (props) => {
 			`, className: props.inputClassName, placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
                 const value = e.target.value;
                 setLocalValue(value);
-                if (vars.current.wrappedOnChange) {
-                    vars.current.wrappedOnChange(value);
-                }
+                onChange === null || onChange === void 0 ? void 0 : onChange(value);
             } });
     }
     else {
@@ -2225,9 +2221,7 @@ const Input = (props) => {
         inputElement = react.jsx("input", { style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
                 const value = e.target.value;
                 setLocalValue(value);
-                if (vars.current.wrappedOnChange) {
-                    vars.current.wrappedOnChange(value);
-                }
+                onChange === null || onChange === void 0 ? void 0 : onChange(value);
             } });
     }
     const inputWrapperStyles = react.css `
@@ -2667,7 +2661,15 @@ const useWaiting = (func) => {
 
 /** @jsx jsx */
 const SearchBox = (props) => {
-    const [waiting, onSubmit] = useWaiting(props.onSubmit || (() => Promise.resolve()));
+    const [waiting, onSubmit] = useWaiting(async () => {
+        var _a, _b, _c;
+        // the active element will be the input. if the submit action changes props.value it will
+        // be ignored due to Inputs focused handling.
+        if (document.activeElement) {
+            (_b = (_a = document.activeElement).blur) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        return (_c = props.onSubmit) === null || _c === void 0 ? void 0 : _c.call(props);
+    });
     const theme = useThemeSafely();
     const submitButton = (react.jsx(Button, { disabled: waiting, readonly: !props.onSubmit, type: "submit", css: {
             color: `${theme.colors.font} !important;`,
@@ -3216,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.0",
+	"version": "6.1.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",