@mackin.com/styleguide 8.8.0 → 8.9.2

package/index.d.ts

@@ -662,7 +662,7 @@ declare type PickerOption<T> = T | {
     id: T;
     name?: string;
 };
-interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options'> {
+interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options' | 'string'> {
 }
 interface PickerProps<T extends PickerValue> extends SelectProps {
     value: T;
@@ -672,6 +672,12 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
     round?: boolean;
     /** If true, bottom padding will be added to account for other inputs having space for error messages. */
     controlAlign?: boolean;
+    /** This will be applied to the select element. */
+    className?: string;
+    /** Applies to the outer wrapper which contains the select and other elements. */
+    wrapperClassName?: string;
+    /** Applies to the custom down arrow. */
+    iconClassName?: string;
 }
 declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
 
@@ -715,7 +721,6 @@ interface SearchBoxProps {
     id?: string;
     placeholder?: string;
     round?: boolean;
-    onSubmit?: () => Promise<void>;
     /** Defaults to 250ms */
     debounceMs?: number;
     autoFocus?: boolean;
@@ -723,6 +728,10 @@ interface SearchBoxProps {
     className?: string;
     buttonClassName?: string;
     inputClassName?: string;
+    /** This will be ignored if 'noForm' is true. */
+    onSubmit?: () => Promise<void>;
+    /** If true, the controls will not be wrapped in a Form component.  In addition, 'onSubmit' will be ignored. */
+    noForm?: boolean;
 }
 declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
 

package/index.js

@@ -3218,7 +3218,7 @@ const roundPxPadding = '4px';
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign"]);
+    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign", "wrapperClassName", "iconClassName"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -3314,20 +3314,21 @@ const Picker = (props) => {
         }
         return React__namespace.createElement("option", { key: val, value: val }, label);
     })));
-    return (React__namespace.createElement("span", { className: css.css({
+    return (React__namespace.createElement("span", { className: css.cx(css.css({
             label: 'PickerWrapper',
             position: 'relative',
             display: 'inline-block',
             width: '100%',
             paddingBottom: props.controlAlign ? theme.controls.inputErrorMinHeight : undefined
-        }) },
+        }), props.wrapperClassName) },
         select,
-        !props.readOnly && (React__namespace.createElement(Icon, { id: "sortDesc", className: css.css({
+        !props.readOnly && (React__namespace.createElement(Icon, { id: "sortDesc", className: css.cx(css.css({
                 position: 'absolute',
                 right: `calc(${theme.controls.padding} + ${props.round ? roundPxPadding : '0px'})`,
                 height: '100%',
-                pointerEvents: 'none'
-            }) }))));
+                pointerEvents: 'none',
+                color: theme.colors.font
+            }), props.iconClassName) }))));
 };
 
 const Pager = (props) => {
@@ -3836,8 +3837,12 @@ 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
-    return (React__namespace.createElement(Form, { role: "search", className: css.cx('searchBox', props.className), onSubmit: onSubmit },
-        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 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) {
+        return (React__namespace.createElement(Form, { role: "search", className: wrapperClassName, onSubmit: onSubmit }, input));
+    }
+    return (React__namespace.createElement("div", { className: wrapperClassName }, input));
 };
 
 const GlobalStyles = (p) => {

package/package.json

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