@mackin.com/styleguide 8.9.4 → 8.11.0

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;
 
@@ -1140,4 +1146,4 @@ interface TabContainerProps {
 }
 declare const TabContainer: (p: TabContainerProps) => JSX.Element;
 
-export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, SliderProps, SliderValue, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -900,7 +900,10 @@ const Autocomplete = (p) => {
     const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
     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, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues);
+        }
+        return values.slice();
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -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 && css.css({
+                    overflowY: 'scroll',
+                    maxHeight: `calc(${theme.controls.height} * ${p.maxShownValues})`
+                })) },
                 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.4",
+    "version": "8.11.0",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",