@mackin.com/styleguide 11.1.0 → 11.2.0

package/index.d.ts

@@ -833,6 +833,10 @@ interface SearchBoxProps extends BaseProps$1 {
     noSubmitWhenEmpty?: boolean;
     /** The submit button will change to clear if present and there is a value. */
     onClear?: () => void;
+    /** Not localized.  Defaults to 'Search'. */
+    searchButtonAriaLabel?: string;
+    /** Not localized.  Defaults to 'Clear'. */
+    clearButtonAriaLabel?: string;
 }
 declare const SearchBox: React.ForwardRefExoticComponent<Omit<SearchBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 

package/index.esm.js

@@ -4259,9 +4259,9 @@ const useWaiting = (func) => {
 };
 
 const SearchBox = React.forwardRef((props, ref) => {
-    const { wrapperClassName, buttonClassName, inputWrapperClassName, inputClassName, onSubmit, noForm, noSubmitWhenEmpty, onClear } = props, inputProps = __rest(props, ["wrapperClassName", "buttonClassName", "inputWrapperClassName", "inputClassName", "onSubmit", "noForm", "noSubmitWhenEmpty", "onClear"]);
+    const { wrapperClassName, buttonClassName, inputWrapperClassName, inputClassName, onSubmit, noForm, noSubmitWhenEmpty, onClear, searchButtonAriaLabel, clearButtonAriaLabel } = props, inputProps = __rest(props, ["wrapperClassName", "buttonClassName", "inputWrapperClassName", "inputClassName", "onSubmit", "noForm", "noSubmitWhenEmpty", "onClear", "searchButtonAriaLabel", "clearButtonAriaLabel"]);
+    const searchBoxMarkerClass = 'searchBoxInput';
     const [waiting, handleSubmit] = useWaiting(async () => {
-        var _a, _b;
         if (noForm) {
             return;
         }
@@ -4271,12 +4271,17 @@ const SearchBox = React.forwardRef((props, ref) => {
         if ((noSubmitWhenEmpty !== null && noSubmitWhenEmpty !== void 0 ? noSubmitWhenEmpty : true) && !props.value) {
             return;
         }
-        // the active element will be the input. if the submit action changes props.value it will
+        // the active element should 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);
+        const focusElement = document.activeElement;
+        if (focusElement && focusElement.classList.contains(searchBoxMarkerClass)) {
+            focusElement.blur();
         }
-        return onSubmit();
+        return onSubmit().then(() => {
+            if (focusElement) {
+                focusElement.focus();
+            }
+        });
     });
     const theme = useThemeSafely();
     const buttonStyles = cx(css({
@@ -4285,10 +4290,10 @@ const SearchBox = React.forwardRef((props, ref) => {
     }), buttonClassName);
     let clearButton;
     if (onClear && !!props.value) {
-        clearButton = (React.createElement(Button, { onClick: onClear, tabIndex: -1, disabled: waiting, className: buttonStyles, variant: "icon", small: true },
+        clearButton = (React.createElement(Button, { "aria-label": clearButtonAriaLabel, onClick: onClear, tabIndex: -1, disabled: waiting, className: buttonStyles, variant: "icon", small: true },
             React.createElement(Icon, { id: "clear" })));
     }
-    const saveButton = (React.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: buttonStyles, variant: "icon", small: true },
+    const saveButton = (React.createElement(Button, { "aria-label": searchButtonAriaLabel, tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: buttonStyles, variant: "icon", small: true },
         React.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
     const rightControls = clearButton ? React.createElement(React.Fragment, null,
         clearButton,
@@ -4299,12 +4304,29 @@ const SearchBox = React.forwardRef((props, ref) => {
             paddingRight: `calc(${theme.controls.height} + ${theme.controls.heightSmall})`
         });
     }
-    const input = (React.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, wrapperClassName: inputWrapperClassName, className: cx(clearButtonInputStyles, inputClassName), rightControl: rightControls })));
+    const input = (React.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, wrapperClassName: inputWrapperClassName, className: cx(searchBoxMarkerClass, clearButtonInputStyles, inputClassName), rightControl: rightControls })));
     const searchBoxWrapperStyles = cx(css({
         label: 'SearchBox'
     }), wrapperClassName);
     if (!noForm) {
-        return (React.createElement(Form, { role: "search", className: searchBoxWrapperStyles, onSubmit: handleSubmit }, input));
+        return (React.createElement(Form, { role: "search", className: searchBoxWrapperStyles, onSubmit: handleSubmit, onKeyDown: e => {
+                if (e.code === 'Escape' && onClear) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    // the active element should be the input. if the clear action changes props.value it will
+                    // be ignored due to Inputs focused handling.
+                    const focusElement = document.activeElement;
+                    if (focusElement && focusElement.classList.contains(searchBoxMarkerClass)) {
+                        focusElement.blur();
+                    }
+                    onClear();
+                    if (focusElement) {
+                        setTimeout(() => {
+                            focusElement.focus();
+                        }, 0);
+                    }
+                }
+            } }, input));
     }
     return (React.createElement("div", { className: searchBoxWrapperStyles }, input));
 });

package/index.js

@@ -4277,9 +4277,9 @@ const useWaiting = (func) => {
 };
 
 const SearchBox = React__namespace.forwardRef((props, ref) => {
-    const { wrapperClassName, buttonClassName, inputWrapperClassName, inputClassName, onSubmit, noForm, noSubmitWhenEmpty, onClear } = props, inputProps = __rest(props, ["wrapperClassName", "buttonClassName", "inputWrapperClassName", "inputClassName", "onSubmit", "noForm", "noSubmitWhenEmpty", "onClear"]);
+    const { wrapperClassName, buttonClassName, inputWrapperClassName, inputClassName, onSubmit, noForm, noSubmitWhenEmpty, onClear, searchButtonAriaLabel, clearButtonAriaLabel } = props, inputProps = __rest(props, ["wrapperClassName", "buttonClassName", "inputWrapperClassName", "inputClassName", "onSubmit", "noForm", "noSubmitWhenEmpty", "onClear", "searchButtonAriaLabel", "clearButtonAriaLabel"]);
+    const searchBoxMarkerClass = 'searchBoxInput';
     const [waiting, handleSubmit] = useWaiting(async () => {
-        var _a, _b;
         if (noForm) {
             return;
         }
@@ -4289,12 +4289,17 @@ const SearchBox = React__namespace.forwardRef((props, ref) => {
         if ((noSubmitWhenEmpty !== null && noSubmitWhenEmpty !== void 0 ? noSubmitWhenEmpty : true) && !props.value) {
             return;
         }
-        // the active element will be the input. if the submit action changes props.value it will
+        // the active element should 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);
+        const focusElement = document.activeElement;
+        if (focusElement && focusElement.classList.contains(searchBoxMarkerClass)) {
+            focusElement.blur();
         }
-        return onSubmit();
+        return onSubmit().then(() => {
+            if (focusElement) {
+                focusElement.focus();
+            }
+        });
     });
     const theme = useThemeSafely();
     const buttonStyles = css.cx(css.css({
@@ -4303,10 +4308,10 @@ const SearchBox = React__namespace.forwardRef((props, ref) => {
     }), buttonClassName);
     let clearButton;
     if (onClear && !!props.value) {
-        clearButton = (React__namespace.createElement(Button, { onClick: onClear, tabIndex: -1, disabled: waiting, className: buttonStyles, variant: "icon", small: true },
+        clearButton = (React__namespace.createElement(Button, { "aria-label": clearButtonAriaLabel, onClick: onClear, tabIndex: -1, disabled: waiting, className: buttonStyles, variant: "icon", small: true },
             React__namespace.createElement(Icon, { id: "clear" })));
     }
-    const saveButton = (React__namespace.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: buttonStyles, variant: "icon", small: true },
+    const saveButton = (React__namespace.createElement(Button, { "aria-label": searchButtonAriaLabel, tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: buttonStyles, variant: "icon", small: true },
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
     const rightControls = clearButton ? React__namespace.createElement(React__namespace.Fragment, null,
         clearButton,
@@ -4317,12 +4322,29 @@ const SearchBox = React__namespace.forwardRef((props, ref) => {
             paddingRight: `calc(${theme.controls.height} + ${theme.controls.heightSmall})`
         });
     }
-    const input = (React__namespace.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, wrapperClassName: inputWrapperClassName, className: css.cx(clearButtonInputStyles, inputClassName), rightControl: rightControls })));
+    const input = (React__namespace.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, wrapperClassName: inputWrapperClassName, className: css.cx(searchBoxMarkerClass, clearButtonInputStyles, inputClassName), rightControl: rightControls })));
     const searchBoxWrapperStyles = css.cx(css.css({
         label: 'SearchBox'
     }), wrapperClassName);
     if (!noForm) {
-        return (React__namespace.createElement(Form, { role: "search", className: searchBoxWrapperStyles, onSubmit: handleSubmit }, input));
+        return (React__namespace.createElement(Form, { role: "search", className: searchBoxWrapperStyles, onSubmit: handleSubmit, onKeyDown: e => {
+                if (e.code === 'Escape' && onClear) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    // the active element should be the input. if the clear action changes props.value it will
+                    // be ignored due to Inputs focused handling.
+                    const focusElement = document.activeElement;
+                    if (focusElement && focusElement.classList.contains(searchBoxMarkerClass)) {
+                        focusElement.blur();
+                    }
+                    onClear();
+                    if (focusElement) {
+                        setTimeout(() => {
+                            focusElement.focus();
+                        }, 0);
+                    }
+                }
+            } }, input));
     }
     return (React__namespace.createElement("div", { className: searchBoxWrapperStyles }, input));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "11.1.0",
+    "version": "11.2.0",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",