@mackin.com/styleguide 8.9.5 → 8.11.1

package/index.d.ts

@@ -54,6 +54,8 @@ interface AutocompleteProps<T extends AutocompleteValue> {
     /** Defaults to 0ms. */
     getOptionsDebounceMs?: number;
     autoFocus?: boolean;
+    /** Will enable scrolling in the results list. */
+    allowScroll?: boolean;
     onChange: (value: string) => void;
     getOptions: (value: string) => Promise<T[]>;
     onPick: (value: T) => void;
@@ -882,18 +884,22 @@ interface SliderProps<T extends SliderValue> {
     renderValue?: (value: number) => string;
     /** Used with renderValue for the custom element width. Defaults to theme.controls.height * 2. */
     renderValueWidth?: string;
+    /** The with and height of the handles.  Defaults to theme.controls.height.  Do not use css to change the handle sizes. */
+    sliderHandleSize?: string;
     /** Styles of the overall slider. */
     className?: string;
-    /** Styles for the slider handles. */
+    /** Styles for the slider handles.  Do not use css to change the handle sizes.  Use 'sliderHandleSize'. */
     handleClassName?: string;
-    /** Styles for the first handle. */
+    /** Styles for the first handle.  Do not use css to change the handle sizes.  Use 'sliderHandleSize'.  */
     handle1ClassName?: string;
-    /** Styles for the second handle.  Ignored if the value is not an array. */
+    /** Styles for the second handle.  Ignored if the value is not an array.  Do not use css to change the handle sizes.  Use 'sliderHandleSize'.  */
     handle2ClassName?: string;
     /** Styles of the track. */
     trackClassName?: string;
     /** Styles applied to the track between two handlers.  Ignored if the value is not an array. */
     innerTrackClassName?: string;
+    /** Styles applied to the floating handle text with using 'showValue'. */
+    sliderTextClassName?: string;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => JSX.Element;
 

package/index.js

@@ -891,16 +891,19 @@ const TabLocker = (props) => {
 const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     const theme = useThemeSafely();
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
     const [values, setValues] = React__namespace.useState([]);
     const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
+    const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const shownValues = React__namespace.useMemo(() => {
-        var _a;
-        return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues);
+        if (!p.allowScroll) {
+            return values.slice(0, maxShowValues);
+        }
+        return values.slice();
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -914,7 +917,7 @@ const Autocomplete = (p) => {
         else {
             setValues([]);
         }
-    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: false, trailing: true }));
+    }, (_b = p.getOptionsDebounceMs) !== null && _b !== void 0 ? _b : 0, { leading: false, trailing: true }));
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -983,7 +986,7 @@ const Autocomplete = (p) => {
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
                 }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
-            showValues && (React__namespace.createElement(List, { ref: list, className: css.css({
+            showValues && (React__namespace.createElement(List, { ref: list, className: css.cx(css.css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1000,7 +1003,10 @@ const Autocomplete = (p) => {
                         borderBottomRightRadius: listBorderRadius,
                         borderBottomLeftRadius: listBorderRadius,
                     }
-                }) },
+                }), p.allowScroll && shownValues.length > maxShowValues && css.css({
+                    overflowY: 'scroll',
+                    maxHeight: `calc(${theme.controls.height} * ${maxShowValues})`
+                })) },
                 shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
                         React__namespace.createElement(Button, { onKeyDown: e => {
@@ -1029,7 +1035,7 @@ const Autocomplete = (p) => {
                             } },
                             React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, getAutocompleteValueText(value)))));
                 }),
-                shownValues.length < values.length && (React__namespace.createElement(ListItem, null,
+                !p.allowScroll && shownValues.length < values.length && (React__namespace.createElement(ListItem, null,
                     React__namespace.createElement(Text, { tag: "div", italics: true, align: "center" },
                         "Showing ",
                         shownValues.length.toLocaleString(),
@@ -3215,8 +3221,6 @@ const OmniLink = (props) => {
 };
 
 const roundPxPadding = '4px';
-//TB: needs to be 2rem padding for right caret
-//TB: the generated border is bad (border: 1pxsolidrgba(0, 0, 0, 0.125);)
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
@@ -3846,6 +3850,7 @@ const SearchBox = (props) => {
         }), props.buttonClassName), variant: "icon", small: true },
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
     //TB: FUTURE replace with new inputs
+    //TB: change the search icon to x when value is present
     const input = (React__namespace.createElement(Input, { inputClassName: props.inputClassName, autoFocus: props.autoFocus, id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton }));
     const wrapperClassName = css.cx('searchBox', props.className);
     if (!props.noForm) {
@@ -3883,10 +3888,12 @@ const GlobalStyles = (p) => {
 };
 
 const Slider = (p) => {
+    var _a;
     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;
+    const sliderHandleSize = (_a = p.sliderHandleSize) !== null && _a !== void 0 ? _a : theme.controls.height;
+    const height = p.showValue ? `calc(${sliderHandleSize} + 1.5rem)` : sliderHandleSize;
     return (React__default['default'].createElement("div", { ref: sliderContainer, className: css.cx(css.css({
             label: 'Slider',
             width: '100%',
@@ -3900,17 +3907,17 @@ const Slider = (p) => {
                 (_a = p.onUpdate) === null || _a === void 0 ? void 0 : _a.call(p, value);
             } : undefined, renderTrack: (props, state) => {
                 const { className } = props, rest = __rest(props, ["className"]);
-                return React__default['default'].createElement("div", Object.assign({ className: css.cx(className, css.css({
+                return (React__default['default'].createElement("div", Object.assign({ className: css.cx(className, p.trackClassName, css.css({
                         display: 'flex',
                         alignItems: 'center',
-                        height: theme.controls.height
-                    }), p.trackClassName) }, rest),
+                        height: sliderHandleSize
+                    })) }, rest),
                     React__default['default'].createElement("div", { className: css.css({
                             backgroundColor: theme.colors.secondary,
-                            height: `calc(${theme.controls.height} / 4)`,
+                            height: `calc(${sliderHandleSize} / 4)`,
                             borderRadius: theme.controls.roundRadius,
                             width: '100%'
-                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) }));
+                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
             }, renderThumb: (props, state) => {
                 const { className } = props, rest = __rest(props, ["className"]);
                 let specificThumbStyles;
@@ -3921,8 +3928,6 @@ const Slider = (p) => {
                     specificThumbStyles = p.handle2ClassName;
                 }
                 return (React__default['default'].createElement("div", Object.assign({ className: css.cx(className, css.css({
-                        width: theme.controls.height,
-                        height: theme.controls.height,
                         borderRadius: theme.controls.roundRadius,
                         backgroundColor: 'white',
                         border: theme.controls.border,
@@ -3940,7 +3945,10 @@ const Slider = (p) => {
                         '&:hover': {
                             filter: theme.controls.hoverBrightness
                         }
-                    }), specificThumbStyles, p.handleClassName) }, rest), p.showValue && (React__default['default'].createElement(HandleText, { index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    }), specificThumbStyles, p.handleClassName, css.css({
+                        width: sliderHandleSize,
+                        height: sliderHandleSize,
+                    })) }, rest), p.showValue && (React__default['default'].createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, 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) => {
@@ -3954,13 +3962,13 @@ const rectsCollideX = (r1, r2) => {
 };
 const HandleText = (p) => {
     var _a, _b, _c;
-    const theme = useThemeSafely();
     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 renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
     const renderValueLeft = React.useMemo(() => {
-        return `calc(${renderValueWidth} * 0.5 * -1 + (${theme.controls.height} * 0.5))`;
+        return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
     }, [p.renderValueWidth]);
     const [flipText, setFlipText] = React.useState(false);
+    const offset = '2px';
     React.useEffect(() => {
         // this needs to fire on every render due to the other handle also moving.
         var _a, _b;
@@ -3975,11 +3983,11 @@ const HandleText = (p) => {
     return (React__default['default'].createElement(Text, { ellipsis: true, className: css.cx('slider-handle', css.css({
             width: renderValueWidth,
             left: renderValueLeft,
-            top: flipText ? undefined : theme.controls.height,
-            bottom: flipText ? theme.controls.height : undefined,
+            top: flipText ? undefined : `calc(${p.sliderHandleSize} + ${offset})`,
+            bottom: flipText ? `calc(${p.sliderHandleSize} + ${offset})` : undefined,
             position: 'absolute',
             overflow: 'hidden',
-        })), tag: "div", align: "center" }, displayValue));
+        }), p.className), tag: "div", align: "center" }, displayValue));
 };
 
 const TabHeader = (p) => {

package/package.json

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