@splunk/react-ui 4.22.0 → 4.22.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 Change Log
 ============
+4.22.1 - Nov 14, 2023
+----------
+Bug Fixes:
+* `Message` should now allow containing elements to be styled to take up the full width of the container (SUI-5843).
+* `ComboBox`, `Date`, `Number`, `Search`, `Text`, and `TextArea` should now provide `name` and `value` to the `onFocus` and `onBlur` callbacks (SUI-5844).
+* `List` will not incorrectly warn for the `type` prop (SUI-5845).
+
 4.22.0 - Nov 7, 2023
 ----------
 New Features:

package/ComboBox.js

@@ -600,8 +600,8 @@
                     e === null || e === void 0 ? void 0 : e.scrollIntoViewIfNeeded();
                 }
             }));
-            ce(ae(i), "handleInputFocus", (function(e) {
-                var t, n;
+            ce(ae(i), "handleInputFocus", (function(e, t) {
+                var n, o;
                 /* SUI-930 On IE 11 this handler is essentially deferred after calling
        * this.textInput.focus(). this.focusCalledInternally enables the focus event to be ignored
        * when the menu closes. */                if (i.focusCalledInternally) {
@@ -609,7 +609,7 @@
                 } else {
                     i.open();
                 }
-                (t = (n = i.props).onFocus) === null || t === void 0 ? void 0 : t.call(n, e);
+                (n = (o = i.props).onFocus) === null || n === void 0 ? void 0 : n.call(o, e, t);
             }));
             ce(ae(i), "handleChange", (function(e, t) {
                 var n, o;

package/Date.js

@@ -385,8 +385,8 @@
                     });
                 }
             }));
-            W(R(a), "handleFocus", (function(e) {
-                var t, n;
+            W(R(a), "handleFocus", (function(e, t) {
+                var n, o;
                 if (a.focusCalledInternally) {
                     a.focusCalledInternally = false;
                 } else if (!a.props.inputOnly) {
@@ -394,7 +394,7 @@
                         calendarOpen: true
                     });
                 }
-                (t = (n = a.props).onFocus) === null || t === void 0 ? void 0 : t.call(n, e);
+                (n = (o = a.props).onFocus) === null || n === void 0 ? void 0 : n.call(o, e, t);
             }));
             W(R(a), "handleClick", (function(e) {
                 var t, n, o;

package/List.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(t, {
         Item: () => /* reexport */ v,
-        default: () => /* reexport */ S
+        default: () => /* reexport */ P
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -76,11 +76,11 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/List/ListStyles.ts
-    var f = a().ol.withConfig({
-        displayName: "ListStyles__StyledOl",
+    var f = a().ul.withConfig({
+        displayName: "ListStyles__StyledUl",
         componentId: "sc-1yyh8l9-0"
     })([ "", ";", ";list-style-type:", ";padding-left:40px;margin-bottom:1.3em;margin-top:1em;" ], c.mixins.reset("block"), c.mixins.typography("body"), (function(e) {
-        var t = e.$type;
+        var t = e.$listStyleType;
         return t;
     }));
     var p = a().li.withConfig({
@@ -194,21 +194,26 @@
         ordered: i().bool,
         type: i().oneOf([ "disc", "decimal", "lower-alpha", "upper-alpha" ])
     };
-    function j(e) {
-        var t = e.children, r = e.elementRef, o = e.type, i = o === void 0 ? "disc" : o, l = e.ordered, a = O(e, [ "children", "elementRef", "type", "ordered" ]);
+    var j = {
+        type: "disc"
+    };
+    function S(e) {
+        var t = e.children, r = e.elementRef, o = e.type, i = e.ordered, l = O(e, [ "children", "elementRef", "type", "ordered" ]);
         // @docs-props-type ListPropsBase
+        // Default prop value is "disc", we cannot determine if user or defaultProps is setting the value
                 if (false) {}
         
         return n().createElement(f, b({
-            as: !l && i === "disc" ? "ul" : "ol",
+            as: i || o !== "disc" ? "ol" : "ul",
             "data-test": "list",
             ref: r,
-            $type: l || i === "decimal" ? "decimal" || 0 || 0 : i
-        }, a), t);
+            $listStyleType: i ? "decimal" : o
+        }, l), t);
     }
-    j.propTypes = g;
-    j.Item = v;
-    /* harmony default export */    const S = j;
+    S.propTypes = g;
+    S.defaultProps = j;
+    S.Item = v;
+    /* harmony default export */    const P = S;
     // CONCATENATED MODULE: ./src/List/index.ts
     module.exports = t;
     /******/})();

package/Message.js

@@ -180,7 +180,7 @@
     var D = I().div.withConfig({
         displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-0"
-    })([ "display:flex;align-items:baseline;", ";", " ", ";" ], (0, E.pick)({
+    })([ "display:flex;align-items:baseline;flex:1;", ";", " ", ";" ], (0, E.pick)({
         prisma: (0, P.css)([ "padding:", " 0;color:", ";" ], E.variables.spacingMedium, E.variables.contentColorActive),
         enterprise: (0, P.css)([ "padding:12px 0;" ])
     }), (0, E.pick)({

package/Number.js

@@ -481,10 +481,10 @@
             n = t.call(this, e);
             Q(H(n), "controlledExternally", void 0);
             Q(H(n), "text", null);
-            Q(H(n), "handleInputBlur", (function(e) {
-                var t, r;
+            Q(H(n), "handleInputBlur", (function(e, t) {
+                var r, o;
                 n.updateString();
-                (t = (r = n.props).onBlur) === null || t === void 0 ? void 0 : t.call(r, e);
+                (r = (o = n.props).onBlur) === null || r === void 0 ? void 0 : r.call(o, e, t);
             }));
             Q(H(n), "handleInputChange", (function(e, t) {
                 var r = t.value;

package/Search.js

@@ -582,7 +582,7 @@
             var r;
             (r = ye.current) === null || r === void 0 ? void 0 : r.focus();
         };
-        var qe = function e(r) {
+        var qe = function e(r, t) {
             /* SUI-930 On IE 11 this handler is essentially deferred after calling
      * this.textInput.focus(). this.focusCalledInternally enables the focus event to be ignored
      * when the menu closes. */
@@ -591,7 +591,7 @@
             } else {
                 Ee();
             }
-            V === null || V === void 0 ? void 0 : V(r);
+            V === null || V === void 0 ? void 0 : V(r, t);
         };
         var Ie = function e(r, t) {
             var n = t.value;

package/Text.js

@@ -84,8 +84,8 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/ControlGroup"
     const m = require("@splunk/react-ui/ControlGroup");
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const h = require("@splunk/react-icons/Cross");
-    var v =  e.n(h);
+    const v = require("@splunk/react-icons/Cross");
+    var h =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
     const b = require("@splunk/react-icons/enterprise/Close");
     var y =  e.n(b);
@@ -622,7 +622,7 @@
     }
     function me(e, t) {
         if (e == null) return {};
-        var r = he(e, t);
+        var r = ve(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
@@ -635,7 +635,7 @@
         }
         return r;
     }
-    function he(e, t) {
+    function ve(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -647,7 +647,7 @@
         }
         return r;
     }
-    function ve(e, t) {
+    function he(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
@@ -819,7 +819,7 @@
         } ]);
         function r(e) {
             var i;
-            ve(this, r);
+            he(this, r);
             i = t.call(this, e);
             Ee(ke(i), "controlledExternally", void 0);
             Ee(ke(i), "input", null);
@@ -873,11 +873,21 @@
             }));
             Ee(ke(i), "handleInputFocus", (function(e) {
                 var t, r;
-                (t = (r = i.props).onFocus) === null || t === void 0 ? void 0 : t.call(r, e);
+                var n = e.target.value;
+                var a = i.props.name;
+                (t = (r = i.props).onFocus) === null || t === void 0 ? void 0 : t.call(r, e, {
+                    value: n,
+                    name: a
+                });
             }));
             Ee(ke(i), "handleInputBlur", (function(e) {
                 var t, r;
-                (t = (r = i.props).onBlur) === null || t === void 0 ? void 0 : t.call(r, e);
+                var n = e.target.value;
+                var a = i.props.name;
+                (t = (r = i.props).onBlur) === null || t === void 0 ? void 0 : t.call(r, e, {
+                    value: n,
+                    name: a
+                });
             }));
             Ee(ke(i), "handleClear", (function(e) {
                 var t, r;
@@ -919,7 +929,7 @@
                     return n().createElement(re, m, a);
                 }
                 if (o && !l) {
-                    var h = i.state.hideVisibility ?  n().createElement(B, null) :  n().createElement(P, null);
+                    var v = i.state.hideVisibility ?  n().createElement(B, null) :  n().createElement(P, null);
                     
                     return n().createElement(re, m,  n().createElement(Q, {
                         appearance: p ? "secondary" : "pill",
@@ -927,7 +937,7 @@
                         inline: false,
                         onClick: i.handleVisibilityToggle,
                         type: "button",
-                        icon: h
+                        icon: v
                     }));
                 }
                 var b = i.context;
@@ -954,7 +964,7 @@
                         icon: u ?  n().createElement(y(), {
                             size: 1,
                             screenReaderText: x
-                        }) :  n().createElement(v(), {
+                        }) :  n().createElement(h(), {
                             "aria-label": x
                         }),
                         onClick: i.handleClear
@@ -979,7 +989,7 @@
                         icon: u ?  n().createElement(y(), {
                             inline: false,
                             screenReaderText: x
-                        }) :  n().createElement(v(), {
+                        }) :  n().createElement(h(), {
                             "aria-label": x,
                             height: f,
                             inline: false,
@@ -1077,13 +1087,13 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.append, i = t.autoCapitalize, a = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, p = t.className, u = t.classNamePrivate, m = t.disabled, h = t.describedBy, v = t.elementRef, b = t.error, y = t.inline, C = t.inputClassName, g = t.inputId, x = t.labelledBy, w = t.multiline, k = t.maxLength, S = t.name, A = t.passwordVisibilityToggle, T = t.placeholder, I = t.prepend, j = t.required, M = t.spellCheck, R = t.tabIndex, P = t.title, $ = t.type, _ = t.useSyntheticPlaceholder, B = me(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder" ]);
+                var t = this.props, r = t.append, i = t.autoCapitalize, a = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, p = t.className, u = t.classNamePrivate, m = t.disabled, v = t.describedBy, h = t.elementRef, b = t.error, y = t.inline, C = t.inputClassName, g = t.inputId, x = t.labelledBy, w = t.multiline, k = t.maxLength, S = t.name, A = t.passwordVisibilityToggle, T = t.placeholder, I = t.prepend, j = t.required, M = t.spellCheck, R = t.tabIndex, P = t.title, $ = t.type, _ = t.useSyntheticPlaceholder, B = me(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder" ]);
                 var D = fe(fe({
                     role: "textbox"
                 }, f()(B, (function(e, t) {
                     return t === "role" || t.indexOf("aria-") === 0;
                 }))), {}, {
-                    "aria-describedby": h,
+                    "aria-describedby": v,
                     "aria-labelledby": x,
                     "aria-invalid": b || undefined
                 });
@@ -1143,7 +1153,7 @@
                     className: (0, O.toClassName)(p, u),
                     "data-test": "text",
                     "data-test-value": H,
-                    elementRef: v,
+                    elementRef: h,
                     flex: true,
                     inline: y
                 }, N), this.renderStartAdornment(),  n().createElement(U, ae({

package/TextArea.js

@@ -83,10 +83,10 @@
     var f =  e.n(u);
     // CONCATENATED MODULE: external "lodash/omit"
     const h = require("lodash/omit");
-    var m =  e.n(h);
+    var v =  e.n(h);
     // CONCATENATED MODULE: external "lodash/pickBy"
-    const v = require("lodash/pickBy");
-    var b =  e.n(v);
+    const m = require("lodash/pickBy");
+    var b =  e.n(m);
     // CONCATENATED MODULE: external "lodash/throttle"
     const y = require("lodash/throttle");
     var g =  e.n(y);
@@ -609,12 +609,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function me(e, t, r) {
+    function ve(e, t, r) {
         if (t) he(e.prototype, t);
         if (r) he(e, r);
         return e;
     }
-    function ve(e, t) {
+    function me(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -748,9 +748,9 @@
         tabIndex: 0
     };
     /** Note: TextArea places role and aria props onto the input. All other props are placed on the wrapper. */    var Oe =  function(e) {
-        ve(r, e);
+        me(r, e);
         var t = ye(r);
-        me(r, null, [ {
+        ve(r, null, [ {
             key: "validateRows",
             // @docs-props-type TextAreaPropsBase
             value: function e(t) {
@@ -818,11 +818,21 @@
             }));
             ke(xe(a), "handleInputFocus", (function(e) {
                 var t, r;
-                (t = (r = a.props).onFocus) === null || t === void 0 ? void 0 : t.call(r, e);
+                var n = e.target.value;
+                var i = a.props.name;
+                (t = (r = a.props).onFocus) === null || t === void 0 ? void 0 : t.call(r, e, {
+                    value: n,
+                    name: i
+                });
             }));
             ke(xe(a), "handleInputBlur", (function(e) {
                 var t, r;
-                (t = (r = a.props).onBlur) === null || t === void 0 ? void 0 : t.call(r, e);
+                var n = e.target.value;
+                var i = a.props.name;
+                (t = (r = a.props).onBlur) === null || t === void 0 ? void 0 : t.call(r, e, {
+                    value: n,
+                    name: i
+                });
             }));
             ke(xe(a), "handleClear", (function(e) {
                 var t, r;
@@ -870,8 +880,8 @@
                     return n().createElement(Y, f, i);
                 }
                 var h = a.context;
-                var m = (e = h.labelAttrs) === null || e === void 0 ? void 0 : e.text;
-                var v = m ? (0, M._)("Clear ".concat(m, " text field")) : (0, M._)("Clear text field");
+                var v = (e = h.labelAttrs) === null || e === void 0 ? void 0 : e.text;
+                var m = v ? (0, M._)("Clear ".concat(v, " text field")) : (0, M._)("Clear text field");
                 if (!c && r === "search") {
                     
                     return n().createElement(Y, f,  n().createElement(F, {
@@ -880,7 +890,7 @@
                         inline: false,
                         icon:  n().createElement(S(), {
                             size: 1,
-                            screenReaderText: v
+                            screenReaderText: m
                         }),
                         onClick: a.handleClear
                     }),  n().createElement(H, {
@@ -903,7 +913,7 @@
                         appearance: "secondary",
                         onClick: a.handleClear,
                         icon:  n().createElement(C(), {
-                            "aria-label": v,
+                            "aria-label": m,
                             inline: false,
                             width: u,
                             height: u
@@ -954,7 +964,7 @@
             a.handleResize = g()(a.handleResize, 100);
             return a;
         }
-        me(r, [ {
+        ve(r, [ {
             key: "componentDidMount",
             value: function e() {
                 l()(this.syncHeightWithShadow);
@@ -999,16 +1009,16 @@
             key: "render",
             value: function e() {
                 var t = this;
-                var r = this.props, a = r.append, i = r.autoCapitalize, o = r.autoComplete, l = r.autoCorrect, s = r.autoFocus, c = r.children, p = r.className, u = r.classNamePrivate, h = r.disabled, v = r.describedBy, y = r.elementRef, g = r.error, x = r.inline, w = r.inputClassName, C = r.inputId, k = r.labelledBy, S = r.maxLength, A = r.name, O = r.placeholder, I = r.prepend, j = r.required, P = r.spellCheck, _ = r.tabIndex, M = r.title, $ = de(r, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "maxLength", "name", "placeholder", "prepend", "required", "spellCheck", "tabIndex", "title" ]);
+                var r = this.props, a = r.append, i = r.autoCapitalize, o = r.autoComplete, l = r.autoCorrect, s = r.autoFocus, c = r.children, p = r.className, u = r.classNamePrivate, h = r.disabled, m = r.describedBy, y = r.elementRef, g = r.error, x = r.inline, w = r.inputClassName, C = r.inputId, k = r.labelledBy, S = r.maxLength, A = r.name, O = r.placeholder, I = r.prepend, j = r.required, P = r.spellCheck, _ = r.tabIndex, M = r.title, $ = de(r, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "maxLength", "name", "placeholder", "prepend", "required", "spellCheck", "tabIndex", "title" ]);
                 var D = pe(pe({}, b()($, (function(e, t) {
                     return t === "role" || t.indexOf("aria-") === 0;
                 }))), {}, {
-                    "aria-describedby": v,
+                    "aria-describedby": m,
                     "aria-labelledby": k,
                     "aria-invalid": g || undefined,
                     "aria-multiline": true
                 });
-                var N = m()($, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick", "rowsMax", "rowsMin" ].concat(ne(d()(D))));
+                var N = v()($, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick", "rowsMax", "rowsMin" ].concat(ne(d()(D))));
                 var R = this.getDisplayValue();
                 var q = {
                     className: (0, T.toClassName)(p, w),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",

package/types/src/ComboBox/ComboBox.d.ts

@@ -9,6 +9,16 @@ declare type ComboBoxChangeHandler = (event: React.ChangeEvent<HTMLInputElement
 }) => void;
 /** @public */
 declare type ComboBoxScrollBottomHandler = (event: React.UIEvent<HTMLDivElement> | React.KeyboardEvent<HTMLInputElement> | null) => void;
+/** @public */
+declare type ComboBoxBlurHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
+/** @public */
+declare type ComboBoxFocusHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
 interface ComboBoxPropsBase {
     animateLoading?: boolean;
     /** Append removes rounded borders and border from the right side. */
@@ -68,9 +78,9 @@ interface ComboBoxPropsBase {
      * for example: "No matching dashboards". You can insert content such as an error message or
      * communicate a minimum number of characters to enter to see results. */
     noOptionsMessage?: React.ReactNode;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: ComboBoxBlurHandler;
     onChange?: ComboBoxChangeHandler;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: ComboBoxFocusHandler;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     onSelect?: React.ReactEventHandler<HTMLInputElement>;
     /**
@@ -165,4 +175,4 @@ declare class ComboBox extends Component<ComboBoxProps, ComboBoxState> {
     render(): JSX.Element;
 }
 export default ComboBox;
-export { ComboBoxChangeHandler, Option, Divider, Heading };
+export { ComboBoxBlurHandler, ComboBoxChangeHandler, ComboBoxFocusHandler, Option, Divider, Heading, };

package/types/src/Date/Date.d.ts

@@ -7,6 +7,16 @@ declare type DateChangeHandler = (event: React.MouseEvent<HTMLButtonElement | HT
     name?: string;
     value: string;
 }) => void;
+/** @public */
+declare type DateBlurHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
+/** @public */
+declare type DateFocusHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
 interface DatePropsBase {
     /** Default date to display. Set this instead of value to make the Date uncontrolled. */
     defaultValue?: string;
@@ -50,14 +60,14 @@ interface DatePropsBase {
      * control when multiple controls share an onChange callback. */
     name?: string;
     /** A callback for when the input loses focus. */
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: DateBlurHandler;
     /**
      * Return event and data object with date string (in YYYY-MM-DD format) when a date is
      * selected.
      */
     onChange?: DateChangeHandler;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: DateFocusHandler;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     /** @private */
     splunkTheme: AnyTheme;
@@ -140,5 +150,5 @@ declare const DateWithTheme: React.ForwardRefExoticComponent<Pick<Pick<Pick<Date
 };
 export default DateWithTheme;
 export { Date as DateWithoutTheme };
-export { DateChangeHandler };
+export { DateBlurHandler, DateChangeHandler, DateFocusHandler };
 export type { DatePropsBase, DatePropsBaseControlled, DatePropsBaseUncontrolled };

package/types/src/List/List.d.ts

@@ -18,17 +18,23 @@ interface ListPropsBase {
      */
     type?: 'disc' | 'decimal' | 'lower-alpha' | 'upper-alpha';
 }
+declare const defaultProps: Required<Pick<ListPropsBase, 'type'>>;
 interface ListOrderedPropsBase extends ListPropsBase {
     elementRef?: React.Ref<HTMLOListElement>;
-    ordered?: boolean;
-    type: 'decimal' | 'lower-alpha' | 'upper-alpha';
+    ordered: true;
+    type?: never;
+}
+interface ListOrderedTypePropsBase extends ListPropsBase {
+    elementRef?: React.Ref<HTMLOListElement>;
+    ordered?: never;
+    type?: 'decimal' | 'lower-alpha' | 'upper-alpha';
 }
 interface ListUnorderedPropsBase extends ListPropsBase {
     elementRef?: React.Ref<HTMLUListElement>;
     type?: 'disc';
 }
-declare type ListOrderedProps = ComponentProps<ListOrderedPropsBase, 'ol'>;
-declare type ListUnorderedProps = ComponentProps<ListUnorderedPropsBase, 'ul'>;
+declare type ListOrderedProps = ComponentProps<ListOrderedPropsBase | ListOrderedTypePropsBase, 'ol'> & typeof defaultProps;
+declare type ListUnorderedProps = ComponentProps<ListUnorderedPropsBase, 'ul'> & typeof defaultProps;
 declare type ListProps = ListOrderedProps | ListUnorderedProps;
 declare function List({ children, elementRef, type, ordered, ...otherProps }: ListProps): JSX.Element;
 declare namespace List {
@@ -38,6 +44,7 @@ declare namespace List {
         ordered: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
     };
+    var defaultProps: Required<Pick<ListPropsBase, "type">>;
     var Item: typeof import("./Item").default;
 }
 export default List;

package/types/src/Number/Number.d.ts

@@ -8,6 +8,16 @@ declare type NumberChangeHandler = (event: React.ChangeEvent<HTMLInputElement |
     name?: string;
     value?: number;
 }) => void;
+/** @public */
+declare type NumberBlurHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
+/** @public */
+declare type NumberFocusHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
 interface NumberPropsBase {
     /** Append removes the rounded borders and the border from the right side and moves the
      * increment and decrement buttons to the left. */
@@ -65,7 +75,7 @@ interface NumberPropsBase {
      * control when multiple controls share an onChange callback. */
     name?: string;
     /** A callback for when the input loses focus. */
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: NumberBlurHandler;
     /**
      * This is equivalent to onInput which is called on keydown, paste, and so on.
      * If value is set, this callback is required. This must set the value prop to retain the
@@ -73,7 +83,7 @@ interface NumberPropsBase {
      */
     onChange?: NumberChangeHandler;
     /** A callback for when the input takes focus. */
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: NumberFocusHandler;
     /** A keydown callback can be used to prevent a certain input by utilizing the event argument. */
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     /** A keyup callback. */
@@ -159,5 +169,5 @@ declare const NumberWithTheme: React.ForwardRefExoticComponent<Pick<Pick<Pick<Nu
 }, "ref" | "slot" | "style" | "title" | "children" | "value" | "onChange" | "onPause" | "name" | "className" | "color" | "id" | "lang" | "max" | "min" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "step" | "inline" | "elementRef" | "error" | "inputId" | "append" | "prepend" | "inputRef" | "labelledBy" | "locale" | "describedBy" | "useSyntheticPlaceholder" | "hideStepButtons" | "roundTo">>;
 export default NumberWithTheme;
 export type { Number as NumberWithoutTheme };
-export { NumberChangeHandler };
+export { NumberBlurHandler, NumberChangeHandler, NumberFocusHandler };
 export type { NumberPropsBase, NumberPropsBaseControlled, NumberPropsBaseUncontrolled };

package/types/src/Search/Search.d.ts

@@ -7,6 +7,16 @@ declare type SearchChangeHandler = (event: React.ChangeEvent<HTMLInputElement |
     name?: string;
     value: string;
 }) => void;
+/** @public */
+declare type SearchBlurHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
+/** @public */
+declare type SearchFocusHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
 interface SearchPropsBase {
     animateLoading?: boolean;
     /** All children must be instances of `Search.Option`. */
@@ -59,9 +69,9 @@ interface SearchPropsBase {
      * for example: "No matching dashboards". You can insert content such as an error message or
      * communicate a minimum number of characters to enter to see results. */
     noOptionsMessage?: React.ReactNode;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: SearchBlurHandler;
     onChange?: SearchChangeHandler;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: SearchFocusHandler;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     /**
      * A callback function invoked when the menu is scrolled.
@@ -98,4 +108,4 @@ declare namespace Search {
     var Heading: typeof import("../Menu/Heading").default;
 }
 export default Search;
-export { SearchChangeHandler, Option, Divider, Heading, SearchProps, SearchPropsBase, SearchPropsBaseControlled, SearchPropsBaseUncontrolled, };
+export { SearchBlurHandler, SearchChangeHandler, SearchFocusHandler, Option, Divider, Heading, SearchProps, SearchPropsBase, SearchPropsBaseControlled, SearchPropsBaseUncontrolled, };

package/types/src/Text/Text.d.ts

@@ -8,6 +8,16 @@ declare type TextChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HT
     name?: string;
     value: string;
 }) => void;
+/** @public */
+declare type TextBlurHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
+/** @public */
+declare type TextFocusHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
 interface TextPropsBase {
     /** Setting the appearance to search will create a rounded input. */
     appearance?: 'default' | 'search';
@@ -88,7 +98,7 @@ interface TextPropsBase {
      * control when multiple controls share an onChange callback. */
     name?: string;
     /** A callback for when the input loses focus. */
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: TextBlurHandler;
     /**
      * This is equivalent to onInput which is called on keydown, paste, and so on.
      * If value is set, this callback is required. This must set the value prop to retain the
@@ -96,7 +106,7 @@ interface TextPropsBase {
      */
     onChange?: TextChangeHandler;
     /** A callback for when the input takes focus. */
-    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus?: TextFocusHandler;
     /** A keydown callback can be used to prevent a certain input by utilizing the event argument. */
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     /** A callback for when the text selection or cursor position changes. */
@@ -221,5 +231,5 @@ declare const TextWithTheme: React.ForwardRefExoticComponent<Pick<Pick<Pick<Text
 };
 export default TextWithTheme;
 export type { Text as TextWithoutTheme };
-export { TextChangeHandler };
+export { TextBlurHandler, TextChangeHandler, TextFocusHandler };
 export type { TextPropsBase, TextPropsBaseControlled, TextPropsBaseUncontrolled };

package/types/src/TextArea/TextArea.d.ts

@@ -8,6 +8,16 @@ declare type TextAreaChangeHandler = (event: React.ChangeEvent<HTMLTextAreaEleme
     name?: string;
     value: string;
 }) => void;
+/** @public */
+declare type TextAreaBlurHandler = (event: React.FocusEvent<HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
+/** @public */
+declare type TextAreaFocusHandler = (event: React.FocusEvent<HTMLTextAreaElement>, data: {
+    name?: string;
+    value: string;
+}) => void;
 interface TextAreaPropsBase {
     /**
      * @deprecated The `search` appearance has been marked for deprecation and will be removed in a future major version.
@@ -89,7 +99,7 @@ interface TextAreaPropsBase {
      * control when multiple controls share an onChange callback. */
     name?: string;
     /** A callback for when the input loses focus. */
-    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    onBlur?: TextAreaBlurHandler;
     /**
      * This is equivalent to onInput which is called on keydown, paste, and so on.
      * If value is set, this callback is required. This must set the value prop to retain the
@@ -97,7 +107,7 @@ interface TextAreaPropsBase {
      */
     onChange?: TextAreaChangeHandler;
     /** A callback for when the input takes focus. */
-    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    onFocus?: TextAreaFocusHandler;
     /** A keydown callback can be used to prevent a certain input by utilizing the event argument. */
     onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
     /** A callback for when the user clicks the textbox.
@@ -201,5 +211,5 @@ declare const TextAreaWithTheme: React.ForwardRefExoticComponent<Pick<Pick<Pick<
 };
 export default TextAreaWithTheme;
 export type { TextArea as TextAreaWithoutTheme };
-export { TextAreaChangeHandler };
+export { TextAreaBlurHandler, TextAreaChangeHandler, TextAreaFocusHandler };
 export type { TextAreaPropsBase, TextAreaPropsBaseControlled, TextAreaPropsBaseUncontrolled };