@splunk/react-ui 4.30.0 → 4.32.0

package/Link.js

@@ -111,7 +111,7 @@
     var k = f()(S()).withConfig({
         displayName: "LinkStyles__StyledClickable",
         componentId: "sc-1hhltcf-0"
-    })([ "", ";color:", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;border-radius:", ";&:not([disabled],[aria-disabled='true']){cursor:pointer;", ";&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], v.mixins.reset("inline"), (0, 
+    })([ "", ";color:", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;border-radius:", ";&:not([disabled],[aria-disabled='true']){cursor:pointer;", ";&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}" ], v.mixins.reset("inline"), (0, 
     v.pick)({
         enterprise: v.variables.linkColor,
         prisma: v.variables.interactiveColorPrimary
@@ -217,11 +217,11 @@
         return I(e, t);
     }
     function N(e) {
-        var t = z();
+        var t = A();
         return function n() {
-            var r = A(e), o;
+            var r = L(e), o;
             if (t) {
-                var i = A(this).constructor;
+                var i = L(this).constructor;
                 o = Reflect.construct(r, arguments, i);
             } else {
                 o = r.apply(this, arguments);
@@ -241,7 +241,7 @@
         }
         return e;
     }
-    function z() {
+    function A() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -252,13 +252,13 @@
             return false;
         }
     }
-    function A(e) {
-        A = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function L(e) {
+        L = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return A(e);
+        return L(e);
     }
-    function L(e, t, n) {
+    function z(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -298,8 +298,8 @@
                 o[i] = arguments[i];
             }
             e = t.call.apply(t, [ this ].concat(o));
-            L(D(e), "component", null);
-            L(D(e), "handleMount", (function(t) {
+            z(D(e), "component", null);
+            z(D(e), "handleMount", (function(t) {
                 e.component = t;
             }));
             return e;
@@ -333,9 +333,9 @@
         } ]);
         return n;
     }(n.Component);
-    L(H, "propTypes", B);
-    L(H, "defaultProps", F);
-    L(H, u.legacyRefMode, true);
+    z(H, "propTypes", B);
+    z(H, "defaultProps", F);
+    z(H, u.legacyRefMode, true);
     /* harmony default export */    const J = H;
     // CONCATENATED MODULE: ./src/Link/index.ts
     module.exports = t;

package/ModalLayer.js

@@ -262,6 +262,7 @@
             R(k(o), "renderLayer", (function() {
                 var e = o.props, t = e.getDefaultMotionStyle, n = e.getMotionStyle, i = e.renderModal, c = e.scrim;
                 var l = o.props.open || o.state.animating;
+                var u = l && c !== "hidden";
                 
                 return r().createElement(a.Spring, {
                     from: m(m({}, t === null || t === void 0 ? void 0 : t()), {}, {
@@ -277,7 +278,7 @@
                     
                     return r().createElement("div", null, 
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    i(e), l && (c === "visible" || "interactive") &&  r().createElement(d, {
+                    i(e), u &&  r().createElement(d, {
                         "data-test": "modal-overlay",
                         onMouseDown: c === "interactive" ? o.handleClickAway : undefined,
                         key: "clickAway",

package/SidePanel.js

@@ -364,7 +364,7 @@
             value: function e() {
                 var t = this.props, r = t.open, o = t.onRequestClose, i = t.useLayerForClickAway;
                 var a = this.state.panelAnimating;
-                var l = i ? "interactive" : "visible";
+                var l = i ? "interactive" : "hidden";
                 
                 return n().createElement(f(), {
                     childrenInAnimation: a,

package/TabBar.js

@@ -114,9 +114,9 @@
     var k =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const w = require("@splunk/react-ui/ScreenReaderContent");
-    var C =  e.n(w);
+    var S =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const S = require("@splunk/ui-utils/id");
+    const C = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const O = require("@splunk/react-ui/Clickable");
     var T =  e.n(O);
@@ -261,7 +261,7 @@
     var D = s().span.withConfig({
         displayName: "TabStyles__StyledCount",
         componentId: "sc-1ry8mzj-6"
-    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{background:", ";color:", ";}" ], c.variables.contentColorDefault, (0, 
+    })([ "display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:", ";margin-inline-start:", ";", " &[disabled]{color:", ";}" ], c.variables.contentColorDefault, (0, 
     c.pick)({
         enterprise: "inherit",
         prisma: "10px"
@@ -274,7 +274,7 @@
     }), (0, c.pick)({
         enterprise: (0, l.css)([ "&::before{content:'(';}&::after{content:')';}" ]),
         prisma: (0, l.css)([ "background:", ";" ], c.variables.neutral100)
-    }), c.variables.interactiveColorBackgroundDisabled, c.variables.contentColorDisabled);
+    }), c.variables.contentColorDisabled);
     var R = s().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
         componentId: "sc-1ry8mzj-7"
@@ -553,9 +553,9 @@
             re(Z(n), "handleBlur", (function() {
                 n.handleTooltipClose();
             }));
-            n.popoverId = (0, S.createDOMID)("popover");
-            n.ariaId = (0, S.createDOMID)("aria-id");
-            n.menuDescription = (0, S.createDOMID)("menu-description");
+            n.popoverId = (0, C.createDOMID)("popover");
+            n.ariaId = (0, C.createDOMID)("aria-id");
+            n.menuDescription = (0, C.createDOMID)("menu-description");
             n.state = {
                 open: false,
                 anchor: null
@@ -572,7 +572,7 @@
             key: "render",
             value: function e() {
                 var t = this.props, r = t.active, i = t.ariaControls, a = t.count, o = t.disabled, l = t.icon, s = t.label, c = t.tabId, u = t.maxCount, p = t.splunkTheme, v = t.to, h = t.tooltip, m = t.menu, x = t.tabKey, w = U(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "splunkTheme", "to", "tooltip", "menu", "tabKey" ]);
-                var S = this.state, O = S.anchor, T = S.open;
+                var C = this.state, O = C.anchor, T = C.open;
                 var I = this.context, j = I.appearance, q = I.disabled, A = I.iconSize, V = I.layout, B = I.width, F = I.onMenuOpen, W = I.onMenuClose, L = I.isMenuOpen, H = I.focusedTabKey;
                 var Y = w.style;
                 var G = q || o || false;
@@ -650,10 +650,10 @@
                     $withUnderline: j === "navigation"
                 }, l &&  n().createElement(E, {
                     $iconSize: J
-                }, l), s, !m && (a === 0 || a) &&  n().createElement(n().Fragment, null,  n().createElement(C(), null, " "),  n().createElement(D, {
+                }, l), s, !m && (a === 0 || a) &&  n().createElement(n().Fragment, null,  n().createElement(S(), null, " "),  n().createElement(D, {
                     "data-test": "count",
                     disabled: G
-                }, u ? K(a, u) : a)), !!m &&  n().createElement(C(), {
+                }, u ? K(a, u) : a)), !!m &&  n().createElement(S(), {
                     "aria-hidden": true,
                     id: this.menuDescription
                 }, (0, f._)("Press Shift + F10 to open the tab’s menu")))),  n().createElement(M, {
@@ -671,7 +671,7 @@
                     id: this.popoverId,
                     open: !!O && T,
                     align: "center"
-                },  n().createElement(R, null, h)), h &&  n().createElement(C(), {
+                },  n().createElement(R, null, h)), h &&  n().createElement(S(), {
                     "aria-hidden": "true",
                     id: this.ariaId
                 }, h));
@@ -813,8 +813,8 @@
     function ke(e) {
         var t = e.activeTabId, i = e.autoActivate, a = e.appearance, l = a === void 0 ? "navigation" : a, s = e.children, c = e.disabled, p = c === void 0 ? false : c, d = e.elementRef, f = e.iconSize, v = f === void 0 ? "inline" : f, b = e.layout, h = b === void 0 ? "horizontal" : b, y = e.onChange, m = e.tabWidth, g = ye(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
         // @docs-props-type TabBarPropsBase
-                var x = (0, r.useState)(false), k = pe(x, 2), w = k[0], C = k[1];
-        var S = (0, r.useState)(0), O = pe(S, 2), T = O[0], I = O[1];
+                var x = (0, r.useState)(false), k = pe(x, 2), w = k[0], S = k[1];
+        var C = (0, r.useState)(0), O = pe(C, 2), T = O[0], I = O[1];
         var j = (0, r.useRef)([]);
         var z = h === "vertical" ? "down" : "right";
         var M = h === "vertical" ? "up" : "left";
@@ -868,7 +868,7 @@
             } else if (t === "end") {
                 r = ce(j.current, T, j.current.length - 1);
             } else if (h === "horizontal" && e.shiftKey && t === "f10") {
-                C((function(e) {
+                S((function(e) {
                     if (e) {
                         var t;
                         // if we're closing, we want to shift focus to the tab
@@ -878,7 +878,7 @@
                     return !e;
                 }));
             } else if (h === "horizontal" && t === "down") {
-                C(true);
+                S(true);
             }
             if (r != null) {
                 var n;
@@ -889,13 +889,13 @@
         var R = (0, r.useCallback)((function(e) {
             // prevent clicking on the menu icon from changing the active tab
             e.stopPropagation();
-            C(true);
+            S(true);
         }), []);
         var q = (0, r.useCallback)((function(e) {
             var t = e.event;
             // prevent content clicks/enter key from changing the active tab
                         t === null || t === void 0 ? void 0 : t.stopPropagation();
-            C(false);
+            S(false);
         }), []);
         var A = (0, r.useMemo)((function() {
             return {

package/Text.js

@@ -309,14 +309,8 @@
     var U = N().span.withConfig({
         displayName: "TextStyles__StyledInputWrapper",
         componentId: "eg7n6t-3"
-    })([ "", ";flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}", " ", " ", " ", "" ], A.mixins.reset("inline-flex"), A.variables.inputHeight, (0, 
+    })([ "", ";flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}", " ", " ", " ", "" ], A.mixins.reset("inline-flex"), A.variables.inputHeight, A.variables.interactiveColorBorder, A.variables.borderRadius, (0, 
     A.pick)({
-        enterprise: {
-            light: A.variables.gray60,
-            dark: A.variables.gray20
-        },
-        prisma: A.variables.interactiveColorBorder
-    }), A.variables.borderRadius, (0, A.pick)({
         enterprise: {
             light: A.variables.white,
             dark: A.variables.gray22
@@ -331,13 +325,7 @@
     }), (function(e) {
         var t = e.$hasStartAdornment;
         return t && (0, D.css)([ "padding-left:0;" ]);
-    }), (0, A.pick)({
-        enterprise: {
-            light: A.variables.gray60,
-            dark: A.variables.gray20
-        },
-        prisma: A.variables.interactiveColorBorderHover
-    }), A.variables.focusShadow, A.variables.contentColorActive, (function(e) {
+    }), A.variables.interactiveColorBorderHover, A.variables.focusShadow, A.variables.contentColorActive, (function(e) {
         var t = e.$error;
         return t && (0, D.css)([ "&,&:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){box-shadow:", ";color:", ";}" ], A.variables.accentColorNegative, A.variables.focusShadow, A.variables.contentColorActive);
     }), (function(e) {
@@ -348,13 +336,9 @@
         return t && (0, D.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
     }), (function(e) {
         var t = e.disabled;
-        return t && (0, D.css)([ "", " box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);" ], (0, 
+        return t && (0, D.css)([ "border-color:", ";box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);", "" ], A.variables.interactiveColorBorderDisabled, (0, 
         A.pick)({
-            enterprise: {
-                light: (0, D.css)([ "background-color:", ";border-color:", ";" ], A.variables.gray96, A.variables.gray92),
-                dark: (0, D.css)([ "background-color:", ";border-color:", ";" ], A.variables.gray22, A.variables.gray30)
-            },
-            prisma: (0, D.css)([ "border-color:", ";" ], A.variables.interactiveColorBorderDisabled)
+            enterprise: (0, D.css)([ "background-color:", ";" ], A.variables.interactiveColorBackgroundDisabled)
         }));
     }));
     /* Some of these need greater specificity than input[type=text] */    var J = N().input.withConfig({
@@ -938,7 +922,8 @@
                     if (!k) {
                         
                         return n().createElement(re, m,  n().createElement(K, {
-                            $disabled: l
+                            $disabled: l,
+                            "data-test": "search-icon"
                         },  n().createElement(g(), {
                             screenReaderText: null,
                             hideDefaultTooltip: true,
@@ -959,6 +944,7 @@
                         }),
                         onClick: i.handleClear
                     }),  n().createElement(K, {
+                        "data-test": "search-icon",
                         $disabled: l
                     }, u ?  n().createElement(g(), {
                         screenReaderText: null,
@@ -1007,6 +993,7 @@
                 if (l && t === "search") {
                     
                     return n().createElement(re, p,  n().createElement(K, {
+                        "data-test": "search-icon",
                         $disabled: o
                     },  n().createElement(w(), {
                         "aria-label": "Search",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.30.0",
+  "version": "4.32.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -43,8 +43,8 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "^4.4.0",
-    "@splunk/themes": "^0.18.0",
+    "@splunk/react-icons": "^4.5.0",
+    "@splunk/themes": "^0.19.0",
     "@splunk/ui-utils": "^1.6.0",
     "commonmark": "^0.30.0",
     "commonmark-react-renderer": "^4.3.2",
@@ -61,9 +61,9 @@
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "1.0.0-beta.9",
+    "@splunk/docs-gen": "1.0.0-beta.11",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.13",
+    "@splunk/react-docs": "1.0.0-beta.15",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",

package/types/src/ButtonSimple/mixin.d.ts

@@ -0,0 +1,27 @@
+import { AnyTheme, Interpolation, InterpolationResult, ThemedProps } from '@splunk/themes';
+declare const buttonVariants: readonly ["primary", "secondary", "destructive", "ghost"];
+type ButtonVariant = typeof buttonVariants[number];
+type ButtonStyleProps = ThemedProps & Partial<{
+    $append: boolean;
+    $prepend: boolean;
+    $selected: boolean;
+    $error: boolean;
+    disabled: boolean;
+}>;
+interface ButtonParams<T extends AnyTheme, A extends ThemedProps> {
+    background?: InterpolationResult<T, A>;
+    backgroundActive?: InterpolationResult<T, A>;
+    backgroundDisabled?: InterpolationResult<T, A>;
+    backgroundDisabledSelected?: InterpolationResult<T, A>;
+    backgroundHover?: InterpolationResult<T, A>;
+    backgroundSelected?: InterpolationResult<T, A>;
+    borderColor?: InterpolationResult<T, A>;
+    borderColorDisabled?: InterpolationResult<T, A>;
+    color?: InterpolationResult<T, A>;
+    colorDisabled?: InterpolationResult<T, A>;
+}
+declare function button<T extends AnyTheme, A extends ButtonStyleProps>(): Interpolation<T, A>;
+declare function button<T extends AnyTheme, A extends ButtonStyleProps>(variant: ButtonVariant): Interpolation<T, A>;
+declare function button<T extends AnyTheme, A extends ButtonStyleProps>(params: ButtonParams<T, A>): Interpolation<T, A>;
+declare function button<T extends AnyTheme, A extends ButtonStyleProps>(variant: ButtonVariant, additionalParams: ButtonParams<T, A>): Interpolation<T, A>;
+export default button;

package/types/src/Card/Card.d.ts

@@ -35,7 +35,7 @@ interface CardPropsBase {
      */
     openInNewContext?: boolean;
     /**
-     * Renders `Card` as selected if set to `true`.
+     * Renders `Card` as selected if set to `true`. Use only when `onClick` is also provided.
      */
     selected?: boolean;
     /**
@@ -50,24 +50,32 @@ interface CardPropsBase {
     /** Returns a value on click. Use when composing or if you have more than one selectable `Card`. */
     value?: any;
 }
-declare const defaultProps: Required<Pick<CardPropsBase, 'openInNewContext' | 'selected' | 'showBorder'>>;
+declare const defaultProps: Required<Pick<CardPropsBase, 'openInNewContext' | 'showBorder'>>;
 interface CardPropsBaseNonClickable extends CardPropsBase {
     elementRef?: React.Ref<HTMLDivElement>;
     onClick?: never;
+    selected?: never;
     to?: never;
 }
+interface CardPropsBaseOnClickClickable extends CardPropsBase {
+    elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+    onClick: CardClickHandler;
+    selected?: boolean;
+    to?: string;
+}
 interface CardPropsBaseClickable extends CardPropsBase {
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     onClick?: CardClickHandler;
+    selected?: never;
     to?: string;
 }
 type CardNonClickableProps = ClassComponentProps<CardPropsBaseNonClickable, typeof defaultProps, 'div'>;
-type CardClickableButtonProps = ClassComponentProps<CardPropsBaseClickable, typeof defaultProps, 'button'>;
-type CardClickableLinkProps = ClassComponentProps<CardPropsBaseClickable, typeof defaultProps, 'a', 'href'>;
+type CardClickableButtonProps = ClassComponentProps<CardPropsBaseOnClickClickable | CardPropsBaseClickable, typeof defaultProps, 'button'>;
+type CardClickableLinkProps = ClassComponentProps<CardPropsBaseOnClickClickable | CardPropsBaseClickable, typeof defaultProps, 'a', 'href'>;
 type CardProps = CardNonClickableProps | CardClickableButtonProps | CardClickableLinkProps;
 declare class Card extends Component<CardProps, {}> {
     static propTypes: React.WeakValidationMap<CardProps>;
-    static defaultProps: Required<Pick<CardPropsBase, "selected" | "openInNewContext" | "showBorder">>;
+    static defaultProps: Required<Pick<CardPropsBase, "openInNewContext" | "showBorder">>;
     static Header: typeof Header;
     static Body: typeof Body;
     static Footer: typeof Footer;

package/types/src/Clickable/Clickable.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { legacyRefMode } from '@splunk/react-ui/Dropdown';
-import { NavigationContext, NavigationProviderClickHandler } from './NavigationProvider';
+import { NavigationContext } from './NavigationProvider';
 import { ClassComponentProps } from '../utils/types';
 export declare const isRootRelativeLink: (to: string | undefined) => boolean;
 export declare const isInternalLink: (to: string | undefined) => boolean;
@@ -56,14 +56,10 @@ declare class Clickable extends Component<ClickableProps> {
     private el;
     context: React.ContextType<typeof NavigationContext>;
     static contextType: React.Context<{
-        onClick?: NavigationProviderClickHandler | undefined;
+        onClick?: import("./NavigationProvider").NavigationProviderClickHandler | undefined;
+        onLinkClick?: import("./NavigationProvider").NavigationProviderClickHandler | undefined;
         prefix?: string | undefined;
-        transformUrl?: import("./NavigationProvider").NavigationProviderTransformUrl | undefined; /**
-         * The text representation of the navigational link.
-         * This should be provided if child content is not a string.
-         *
-         * Ignored if not in link mode.
-         */
+        transformUrl?: import("./NavigationProvider").NavigationProviderTransformUrl | undefined;
     }>;
     static propTypes: React.WeakValidationMap<ClickableProps>;
     static defaultProps: Required<Pick<ClickablePropsBase, "disabled" | "openInNewContext">>;

package/types/src/Clickable/NavigationProvider.d.ts

@@ -18,6 +18,11 @@ interface NavigationProviderPropsBase {
      * The function takes the event and an options argument with `to` and `openInNewContext`
      */
     onClick?: NavigationProviderClickHandler;
+    /**
+     * Triggers when a link is clicked, even if the link has its own `onClick` handler.
+     * The function takes the event and an options argument with `to` and `openInNewContext`
+     */
+    onLinkClick?: NavigationProviderClickHandler;
     /**
      * @deprecated Use the `transformUrl` prop instead.
      * If set, all links that use the NavigationProvider's context will have this prepended to them.
@@ -39,6 +44,7 @@ interface NavigationProviderPropsWithoutPrefix extends NavigationProviderPropsBa
 }
 type NavigationContextValue = {
     onClick?: NavigationProviderClickHandler;
+    onLinkClick?: NavigationProviderClickHandler;
     prefix?: string;
     transformUrl?: NavigationProviderTransformUrl;
 };
@@ -48,11 +54,12 @@ type NavigationProviderProps = NavigationProviderPropsWithPrefix | NavigationPro
  * Used to provide an override for the `onClick` for links for single page applications so that
  * internal links can navigate without a page reload.
  */
-declare function NavigationProvider({ children, onClick, prefix, transformUrl }: NavigationProviderProps): JSX.Element;
+declare function NavigationProvider({ children, onClick, onLinkClick, prefix, transformUrl, }: NavigationProviderProps): JSX.Element;
 declare namespace NavigationProvider {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onLinkClick: PropTypes.Requireable<(...args: any[]) => any>;
         prefix: PropTypes.Requireable<string>;
         transformUrl: PropTypes.Requireable<(...args: any[]) => any>;
     };

package/types/src/Divider/Divider.d.ts

@@ -8,12 +8,17 @@ interface DividerPropsBase {
     elementRef?: React.Ref<HTMLHRElement>;
     /** Sets the orientation of this `Divider`. */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Remove semantics of the divider.
+     */
+    decorative?: boolean;
 }
-type DividerProps = ComponentProps<DividerPropsBase, 'hr'>;
-declare function Divider({ elementRef, orientation, ...otherProps }: DividerProps): JSX.Element;
+type DividerProps = ComponentProps<DividerPropsBase, 'hr' | 'div'>;
+declare function Divider({ elementRef, decorative, orientation, ...otherProps }: DividerProps): JSX.Element;
 declare namespace Divider {
     var propTypes: {
         elementRef: PropTypes.Requireable<object>;
+        decorative: PropTypes.Requireable<boolean>;
         orientation: PropTypes.Requireable<string>;
     };
 }

package/types/src/Divider/docs/examples/Decorative.d.ts

@@ -0,0 +1,2 @@
+declare function Decorative(): JSX.Element;
+export default Decorative;

package/types/src/Divider/docs/examples/AriaHidden.d.ts

@@ -1,2 +0,0 @@
-declare function AriaHidden(): JSX.Element;
-export default AriaHidden;