@mackin.com/styleguide 8.6.0 → 8.7.0

package/index.d.ts

@@ -484,7 +484,7 @@ declare const OmniLink: (props: OmniLinkProps) => JSX.Element;
 
 declare type SortDirection = 'asc' | 'desc';
 interface PagerSortOption<TItem> {
-    id: string | number;
+    id: string;
     name?: string;
     sort: (items: TItem[]) => TItem[];
 }
@@ -709,11 +709,14 @@ interface SearchBoxProps {
     id?: string;
     placeholder?: string;
     round?: boolean;
-    className?: string;
     onSubmit?: () => Promise<void>;
     /** Defaults to 250ms */
     debounceMs?: number;
     autoFocus?: boolean;
+    /** This will be applied to the containing element (Form). */
+    className?: string;
+    buttonClassName?: string;
+    inputClassName?: string;
 }
 declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
 
@@ -863,7 +866,9 @@ interface SliderProps<T extends SliderValue> {
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => JSX.Element;
 
 interface TabHeaderTabProps {
-    name: string;
+    name: string | JSX.Element;
+    /** The HTML title of the tab button.  Defaults to 'name' prop. */
+    title?: string;
 }
 interface TabHeaderProps {
     tabs: TabHeaderTabProps[];

package/index.js

@@ -3772,14 +3772,14 @@ const SearchBox = (props) => {
         return (_c = props.onSubmit) === null || _c === void 0 ? void 0 : _c.call(props);
     });
     const theme = useThemeSafely();
-    const submitButton = (React__namespace.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.css({
+    const submitButton = (React__namespace.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.cx(css.css({
             color: `${theme.colors.font} !important;`,
             fontSize: '1rem'
-        }), variant: "icon", small: true },
+        }), 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, { 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 })));
+        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 GlobalStyles = (p) => {
@@ -3955,8 +3955,17 @@ const TabHeader = (p) => {
                     overflow: 'hidden',
                 });
             }
+            let title = tab.title;
+            let buttonContent;
+            if (typeof tab.name === 'string') {
+                title !== null && title !== void 0 ? title : (title = tab.name);
+                buttonContent = React__namespace.createElement(Text, { tag: "div", align: "center", ellipsis: true }, tab.name);
+            }
+            else {
+                buttonContent = tab.name;
+            }
             return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
-                React__namespace.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: tab.name, readOnly: active, onClick: () => {
+                React__namespace.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
                         const onChange = () => {
                             var _a;
                             setTabIndex(index);
@@ -3978,7 +3987,7 @@ const TabHeader = (p) => {
                         else {
                             onChange();
                         }
-                    } }, tab.name)));
+                    } }, buttonContent)));
         })),
         variant === 'tab' && (React__namespace.createElement("div", { className: css.cx(css.css({
                 label: 'TabHeaderDivider',

package/package.json

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