@splunk/react-ui 5.6.0 → 5.7.0

package/Menu.js

@@ -103,11 +103,11 @@
         componentId: "sc-4kc053-1"
     })([ "", ";display:flex;align-self:flex-start;align-items:center;float:right;padding-left:", ";max-width:50%;min-height:20px;text-align:right;" ], y, p.variables.spacingLarge);
     var w = (0, c.css)([ "", " flex:0 0 auto;& > svg{height:20px;}" ], p.mixins.reset("inline-flex"));
-    var O = u().div.withConfig({
+    var k = u().div.withConfig({
         displayName: "ItemStyles__StyledItemSelectedAdornment",
         componentId: "sc-4kc053-2"
     })([ "", ";padding-left:", ";align-items:flex-start;color:", ";" ], w, p.variables.spacingLarge, p.variables.contentColorActive);
-    var k = u().span.withConfig({
+    var O = u().span.withConfig({
         displayName: "ItemStyles__StyledItemAdornment",
         componentId: "sc-4kc053-3"
     })([ "", ";", " padding-right:", ";align-items:center;color:", ";" ], w, (function(e) {
@@ -139,7 +139,7 @@
         var t = e.$selected, r = e.$active;
         return t && (0, c.css)([ "font-weight:", ";", "" ], p.variables.fontWeightSemiBold, r && (0, 
         c.css)([ "font-weight:", ";" ], p.variables.fontWeightBold));
-    }), p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, p.variables.contentColorDisabled, /* sc-sel */ h, /* sc-sel */ S, /* sc-sel */ O, /* sc-sel */ k, p.variables.contentColorDisabled);
+    }), p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, p.variables.contentColorDisabled, /* sc-sel */ h, /* sc-sel */ S, /* sc-sel */ k, /* sc-sel */ O, p.variables.contentColorDisabled);
     var I = u().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
@@ -426,7 +426,7 @@
         openInNewContext: l().oneOfType([ l().bool, l().string ]),
         /** @private */
         preventFocus: l().bool,
-        role: l().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "option" ]),
+        role: l().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "link", "option" ]),
         selectable: l().bool,
         selectableAppearance: l().oneOf([ "checkmark", "checkbox" ]),
         selected: l().oneOfType([ l().bool, l().oneOf([ "some" ]) ]),
@@ -497,7 +497,7 @@
         }
         var Q = l && c === "right";
         var U = l && !Q;
-        var Y = q && N === "checkmark" &&  n().createElement(O, null,  n().createElement(ne(), {
+        var Y = q && N === "checkmark" &&  n().createElement(k, null,  n().createElement(ne(), {
             "data-test": "selected-checkmark",
             inline: true
         }));
@@ -531,7 +531,7 @@
             checked: q === "some" ? "indeterminate" : q,
             disabled: !!u,
             inert: true
-        }), $ &&  n().createElement(k, null, $),  n().createElement(E, {
+        }), $ &&  n().createElement(O, null, $),  n().createElement(E, {
             $descriptionBottom: !!U,
             $truncate: R !== null && R !== void 0 ? R : false
         },  n().createElement(_, {
@@ -541,7 +541,7 @@
             "data-test": "description"
         }, l), Q &&  n().createElement(S, {
             "data-test": "description"
-        }, l)), d &&  n().createElement(k, {
+        }, l)), d &&  n().createElement(O, {
             endAdornment: d
         }, d), Y));
     }
@@ -551,18 +551,18 @@
     // only for styled components using Item
         // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
     const we = require("@splunk/react-ui/Scroll");
-    var Oe =  e.n(we);
+    var ke =  e.n(we);
     // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
-    var ke = (0, c.css)([ "border-top:1px solid ", ";" ], p.variables.borderColor);
-    var xe = (0, c.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], p.mixins.reset("block"), p.variables.backgroundColorPopup, p.variables.borderRadius, p.variables.spacingSmall, p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, ke);
+    var Oe = (0, c.css)([ "border-top:1px solid ", ";" ], p.variables.borderColor);
+    var xe = (0, c.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], p.mixins.reset("block"), p.variables.backgroundColorPopup, p.variables.borderRadius, p.variables.spacingSmall, p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, Oe);
     var Ce = u().div.withConfig({
         displayName: "MenuStyles__Styled",
         componentId: "sc-1olffp9-0"
     })([ "", "" ], xe);
-    var Ie = u()(Oe()).withConfig({
+    var Ie = u()(ke()).withConfig({
         displayName: "MenuStyles__StyledScroll",
         componentId: "sc-1olffp9-1"
-    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ce, /* sc-sel */ Ce, ke);
+    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ce, /* sc-sel */ Ce, Oe);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.

package/Multiselect.js

@@ -130,6 +130,9 @@
         description: i().string,
         descriptionPosition: i().oneOf([ "right", "bottom" ]),
         disabled: i().bool,
+        /**
+   * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
+   */
         elementRef: i().oneOfType([ i().func, i().object ]),
         hidden: i().bool,
         icon: i().node,

package/Slider.js

@@ -782,6 +782,7 @@
             onFocus: ge,
             ref: Ce,
             role: "slider",
+            type: "button",
             disabled: i,
             $thumbPosition: Ve,
             $stepWidth: Be,

package/package.json

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

package/types/src/Button/Button.d.ts

@@ -50,11 +50,11 @@ interface ButtonPropsBase {
      * its container.  */
     inline?: boolean;
     /**
-     * Displays the chevron-down icon to indicate that the button behaves as a menu.
+     * Uses interactive styling and adds the chevron-down icon to indicate menu behavior.
      *
-     * To meet accessibility requirements, this prop should be used together with the `Dropdown` component.
-     *
-     * If `Dropdown` is not used, this prop should be used together with `aria-controls` and `aria-expanded`.
+     * **Accessibility:** This prop should be used with the `Dropdown` component, which manages
+     * the required `aria-controls` and `aria-expanded` attributes. If not using `Dropdown`,
+     * you must manually provide these ARIA attributes.
      */
     isMenu?: boolean;
     /**

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

@@ -28,9 +28,7 @@ interface ButtonSimplePropsBase {
      */
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     /**
-     * Converts the component from an action element (Button) into a control element (toggle).
-     * When `isMenu` is set to `true`, the styles of the default or subtle appearances are overridden
-     * to adapt the Button for use as a toggle for Dropdown/Select.
+     * Uses interactive styling for menu toggle behavior.
      */
     isMenu?: boolean;
     /** Opens the 'to' link in a new tab. */

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

@@ -30,6 +30,10 @@ interface HeaderPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * The icon to show before the title.
+     */
+    icon?: React.ReactNode;
     /**
      * Used as the subheading.
      */
@@ -57,7 +61,7 @@ type HeaderProps = ComponentProps<HeaderWithActions | HeaderWithActionsRenderPro
 /**
  * A styled container for `Card` header content.
  */
-declare function Header({ actions, actionPrimary, actionsSecondary, anchor, children, subtitle, title, truncateTitle, ...otherProps }: HeaderProps): React.JSX.Element;
+declare function Header({ actions, actionPrimary, actionsSecondary, anchor, children, icon, subtitle, title, truncateTitle, ...otherProps }: HeaderProps): React.JSX.Element;
 declare namespace Header {
     var propTypes: {
         actionPrimary: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -65,6 +69,7 @@ declare namespace Header {
         anchor: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         elementRef: PropTypes.Requireable<object>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         truncateTitle: PropTypes.Requireable<boolean>;

package/types/src/Card/docs/examples/Icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Card with icon
+ * @description A Card can have an icon in the header.
+ */
+declare function WithIcon(): React.JSX.Element;
+export default WithIcon;

package/types/src/Multiselect/Option.d.ts

@@ -30,6 +30,7 @@ interface OptionPropsBase {
      */
     disabled?: boolean;
     /**
+     * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
@@ -99,6 +100,9 @@ declare namespace Option {
         description: PropTypes.Requireable<string>;
         descriptionPosition: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
+        /**
+         * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
+         */
         elementRef: PropTypes.Requireable<object>;
         hidden: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;