@splunk/react-ui 5.8.0 → 5.9.0

package/Text.js

@@ -89,9 +89,9 @@
     var m =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
     const g = require("@splunk/react-ui/Button");
-    var C =  e.n(g);
+    var h =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-ui/ControlGroup"
-    const h = require("@splunk/react-ui/ControlGroup");
+    const C = require("@splunk/react-ui/ControlGroup");
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
     const x = require("@splunk/react-ui/useControlled");
     var k =  e.n(x);
@@ -109,7 +109,7 @@
     const B = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Text/TextStyles.ts
     var I = "230px";
-    var P = O()(C()).withConfig({
+    var P = O()(h()).withConfig({
         displayName: "TextStyles__StyledClearButton",
         componentId: "eg7n6t-0"
     })([ "display:none;visibility:hidden;" ]);
@@ -142,7 +142,7 @@
         displayName: "TextStyles__StyledAdornment",
         componentId: "eg7n6t-3"
     })([ "display:inline-flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;color:", ";", " ", ";& > button{", "}& > button:focus,& > a:focus{box-shadow:", ";}" ], B.variables.contentColorMuted, (function() {
-        return (0, S.css)([ "height:calc(", " - 2px);" ], B.variables.inputHeight);
+        return (0, S.css)([ "height:calc(", " - ", " * 2);" ], B.variables.inputHeight, B.variables.inputBorderWidth);
     }), (function(e) {
         var r = e.$disabled;
         return r && (0, S.css)([ "color:", ";" ], B.variables.contentColorDisabled);
@@ -237,8 +237,8 @@
         }
         return ("string" === r ? String : Number)(e);
     }
-    function G() {
-        return G = Object.assign ? Object.assign.bind() : function(e) {
+    function W() {
+        return W = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -246,9 +246,9 @@
                 }
             }
             return e;
-        }, G.apply(null, arguments);
+        }, W.apply(null, arguments);
     }
-    function W(e, r) {
+    function G(e, r) {
         return Y(e) || Q(e, r) || X(e, r) || U();
     }
     function U() {
@@ -366,15 +366,15 @@
         var r;
         var o = e.append, i = o === void 0 ? false : o, u = e.autoCapitalize, c = e.autoComplete, d = e.autoCorrect, v = e.autoFocus, b = v === void 0 ? false : v, p = e.canClear, y = p === void 0 ? false : p, g = e.children, x = e.defaultValue, S = e.disabled, O = S === void 0 ? false : S, j = e.describedBy, E = e.elementRef, A = e.endAdornment, B = e.error, I = B === void 0 ? false : B, _ = e.inline, F = _ === void 0 ? false : _, H = e.inputClassName, M = e.inputId, R = e.inputRef, V = e.labelledBy, K = e.maxLength, L = e.name, U = e.onBlur, X = e.onChange, J = e.onClick, Q = e.onFocus, Y = e.onKeyDown, ee = e.onSelect, re = e.passwordVisibilityToggle, ne = re === void 0 ? false : re, oe = e.placeholder, ae = e.prepend, ie = ae === void 0 ? false : ae, le = e.required, ue = e.spellCheck, se = e.startAdornment, ce = e.tabIndex, de = ce === void 0 ? 0 : ce, ve = e.title, be = e.type, pe = be === void 0 ? "text" : be, fe = e.value, ye = Z(e, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "canClear", "children", "defaultValue", "disabled", "describedBy", "elementRef", "endAdornment", "error", "inline", "inputClassName", "inputId", "inputRef", "labelledBy", "maxLength", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onSelect", "passwordVisibilityToggle", "placeholder", "prepend", "required", "spellCheck", "startAdornment", "tabIndex", "title", "type", "value" ]);
         // @docs-props-type TextPropsBase
-                var me = (0, t.useContext)(h.ControlGroupContext);
+                var me = (0, t.useContext)(C.ControlGroupContext);
         var ge = k()({
             componentName: "Text",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0]
         });
-        var Ce = (0, t.useRef)(null);
-        var he = (0, t.useState)(x || ""), xe = W(he, 2), ke = xe[0], we = xe[1];
-        var Se = (0, t.useState)(true), Oe = W(Se, 2), je = Oe[0], Ee = Oe[1];
+        var he = (0, t.useRef)(null);
+        var Ce = (0, t.useState)(x || ""), xe = G(Ce, 2), ke = xe[0], we = xe[1];
+        var Se = (0, t.useState)(true), Oe = G(Se, 2), je = Oe[0], Ee = Oe[1];
         var Ae = (0, t.useMemo)((function() {
             return ge ? fe : ke;
         }), [ ge, fe, ke ]);
@@ -402,7 +402,7 @@
             if (!ge) {
                 we(t);
             }
-            Ce === null || Ce === void 0 ? void 0 : (r = Ce.current) === null || r === void 0 ? void 0 : r.focus();
+            he === null || he === void 0 ? void 0 : (r = he.current) === null || r === void 0 ? void 0 : r.focus();
             X === null || X === void 0 ? void 0 : X(e, {
                 value: t,
                 name: L
@@ -413,9 +413,9 @@
             e.stopPropagation();
         }), [ J ]);
         var qe = (0, t.useCallback)((function(e) {
-            if (document.activeElement !== Ce.current) {
+            if (document.activeElement !== he.current) {
                 var r;
-                (r = Ce.current) === null || r === void 0 ? void 0 : r.focus();
+                (r = he.current) === null || r === void 0 ? void 0 : r.focus();
             }
             J === null || J === void 0 ? void 0 : J(e);
         }), [ J ]);
@@ -433,9 +433,9 @@
             Y === null || Y === void 0 ? void 0 : Y(e);
         }), [ Y ]);
         var Ne = (0, t.useCallback)((function(e) {
-            Ce.current = e;
+            he.current = e;
             D(R, e);
-        }), [ R, Ce ]);
+        }), [ R, he ]);
         var Fe = (0, t.useCallback)((function(e) {
             ee === null || ee === void 0 ? void 0 : ee(e);
         }), [ ee ]);
@@ -450,7 +450,7 @@
             };
             if (A) {
                 
-                return n().createElement($, G({
+                return n().createElement($, W({
                     "data-test": "end-adornment",
                     onClick: $e
                 }, r), A);
@@ -459,7 +459,7 @@
                 var t = je ?  n().createElement(f(), null) :  n().createElement(m(), null);
                 var o = je ? (0, w._)("Show password") : (0, w._)("Hide password");
                 
-                return n().createElement($, r,  n().createElement(C(), {
+                return n().createElement($, r,  n().createElement(h(), {
                     appearance: "secondary",
                     "data-test": "password-toggle",
                     inline: false,
@@ -490,7 +490,7 @@
             };
             if (se) {
                 
-                return n().createElement($, G({
+                return n().createElement($, W({
                     "data-test": "start-adornment",
                     onClick: $e
                 }, e), se);
@@ -519,7 +519,7 @@
         }, l()(ye, [ "inputRef", "onBlur", "onClick", "onChange", "onFocus", "onKeyDown", "onSelect" ].concat(N(a()(ze)))));
         var Ke = je ? "password" : "text";
         var Le = ne ? Ke : pe;
-        var Ge = z(z({}, ze), {}, {
+        var We = z(z({}, ze), {}, {
             "data-test": "textbox",
             autoCapitalize: u,
             autoComplete: c,
@@ -546,22 +546,22 @@
             $error: I
         });
         // Do not render value in DOM when type is password, or passwordVisibilityToggle is enabled
-                var We = pe === "password" || ne ? undefined : Ae;
+                var Ge = pe === "password" || ne ? undefined : Ae;
         // Firefox hack (SUI-2716). Remove when fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1427173
                 var Ue = pe === "time";
         
-        return n().createElement(T, G({
+        return n().createElement(T, W({
             tabIndex: -1,
             $isTimeInput: Ue,
             "data-test": "text",
-            "data-test-value": We,
+            "data-test-value": Ge,
             "data-test-disabled": O === "dimmed" && "dimmed" || O && "disabled" || undefined,
             ref: E,
             flex: true,
             inline: F,
             onClick: qe,
             $disabled: !!O
-        }, Ve), Re(), O ?  n().createElement(q, G({
+        }, Ve), Re(), O ?  n().createElement(q, W({
             className: H,
             "data-test": "textbox",
             disabled: O === true,
@@ -569,7 +569,7 @@
             readOnly: true,
             type: Le,
             value: Ae
-        }, ze)) :  n().createElement(q, G({}, Ge, {
+        }, ze)) :  n().createElement(q, W({}, We, {
             onClick: Te
         })), g, Me());
     }

package/docs-llm/Avatar.md

@@ -160,14 +160,8 @@ import Layout from '@splunk/react-ui/Layout';
 import { pick, variables } from '@splunk/themes';
 
 const avatarColor = pick({
-    enterprise: {
-        light: variables.diverging3ColorB,
-        dark: variables.diverging1ColorA,
-    },
-    prisma: {
-        light: variables.sequential6D7,
-        dark: variables.sequential6D3,
-    },
+    light: variables.sequential6D7,
+    dark: variables.sequential6D3,
 });
 
 

package/docs-llm/Multiselect.md

@@ -324,6 +324,8 @@ export default MultiselectError;
 
 ### Disabled
 
+If you absolutely need to disable a `Multiselect` use `"disabled="dimmed"`. This ensures the `Multiselect` does not respond to events, but can still receive focus to so that users can navigate to the `Multiselect` when using assistive technologies.
+
 ```typescript
 import React, { useCallback, useState } from 'react';
 
@@ -338,7 +340,7 @@ function Disabled() {
     }, []);
 
     return (
-        <Multiselect values={selectedValues} onChange={handleChange} disabled inline>
+        <Multiselect values={selectedValues} onChange={handleChange} disabled="dimmed" inline>
             <Multiselect.Option label="Area chart" value="1" />
             <Multiselect.Option label="Bar chart" value="2" />
             <Multiselect.Option label="Bubble chart" value="3" />
@@ -856,7 +858,7 @@ export default Compact;
 | defaultPlacement | 'above' \| 'below' \| 'vertical' | no | 'vertical' | The default placement of the dropdown menu. It might be rendered in a different direction depending upon the space available. |
 | defaultValues | (string \| number \| boolean)[] | no |  | Set this property instead of value to keep the value uncontrolled. |
 | describedBy | string | no |  | The id of the description. When placed in a ControlGroup, this is automatically set to the ControlGroup's help component. |
-| disabled | boolean | no |  | Disable adding and removing. |
+| disabled | boolean \| 'dimmed' \| 'disabled' | no |  | Prevents user interaction and adds disabled styling.  If set to `dimmed`, the component is able to receive focus. If set to `disabled`, the component is unable to receive focus. |
 | elementRef | React.Ref<HTMLButtonElement \| HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts, and null when it unmounts. |
 | error | boolean | no |  | Display as in an error. |
 | filter | boolean \| 'controlled' | no |  | Determines whether to show the filter box. When true, the children are automatically filtered based on the label. When controlled, the parent component must provide a onFilterChange callback and update the children.  Only supported when `compact=true`. |
@@ -905,7 +907,7 @@ An option within a `Multiselect`.
 | children | React.ReactNode | no |  | When provided, `children` is rendered instead of the `label`.  Caution: The element(s) passed here must be pure. |
 | description | string | no |  | Additional information to explain the option, such as "Recommended". |
 | descriptionPosition | 'right' \| 'bottom' | no | 'bottom' | The description text may appear to the right of the label or under the label. |
-| disabled | boolean | no |  | If disabled=true, the option is grayed out and cannot be clicked. |
+| disabled | boolean \| 'dimmed' \| 'disabled' | no |  | Prevents user interaction and adds disabled styling.  If set to `dimmed`, the component is able to receive focus. If set to `disabled`, the component is unable to receive focus. |
 | hidden | boolean | no |  | Adding hidden options can be useful for resolving the selected display label and icon, when the option should not be in the list. This scenario can arise when Select's filter is controlled, because the selected item may be filtered out; and when a legacy option is valid, but should no longer be displayed as a selectable option. |
 | icon | React.ReactNode | no |  | The icon to show before the label. See the @splunk/react-icons package for drop in icons.  Caution: The element(s) passed here must be pure. All icons in the react-icons package are pure. |
 | label | string | yes |  | The text to show for the option when `children` is not defined. When filtering, the `label` is used for matching to the filter text. |

package/docs-llm/Notifications.md

@@ -0,0 +1,46 @@
+# Notifications
+
+## Overview
+
+# Notifications
+
+Notifications help users understand what happened, what needs attention, and what to do next.
+
+There are two notification components in Splunk UI:
+- [Message](./Message) is used for inline, contextual feedback near the content it refers to.
+- [Message Bar](./MessageBar) is used for page-level or system-level communication.
+
+These components use standardized icons and [`notificationColors` design tokens](../themes/variables#notification-colors) to communicate consistent tone and urgency, so users can quickly understand what to expect.
+
+## Toast Notifications (Deprecated)
+
+Toast notifications are **deprecated** and should not be used for new experiences.
+Even with careful implementation, this pattern still creates significant accessibility and usability barriers.
+
+Use persistent, user-dismissible notifications instead:
+- Use [Message](./Message) for inline, contextual feedback.
+- Use [Message Bar](./MessageBar) for page-level or system-level communication.
+
+### Migration Guide
+
+Review the CRUD Blueprint sections for [Create confirmation](../../DesignSystem/Blueprints/CRUD/Create#3-confirmation), [Update confirmation](../../DesignSystem/Blueprints/CRUD/Update#3-confirmation) and [Delete feedback](../../DesignSystem/Blueprints/CRUD/Delete#3-feedback) for guidance on scenarios where the toast pattern may have previously been used.
+
+Below are suggestions for how to migrate common scenarios:
+
+| Current Toast Pattern | Recommended Alternative | Reason |
+|---|---|---|
+| Success message after form submission | Message Bar at top of page, or inline Message next to changed element | Persistent confirmation is visible to all users regardless of timing |
+| Error feedback | Inline Message in form field, or Message Bar at top | Direct association with the error source helps users understand and fix the problem |
+| Temporary status updates | Message Bar for page-level updates, or Message for task-level updates | Clear scope and persistent visibility ensure all users receive the information |
+| Real-time alerts | Message Bar with optional dismiss action | Ensures users see critical information before it's dismissed |
+
+### Further Reading
+
+Below are additional resources to understand the issues with toast patterns:
+
+- [GitHub Primer: Accessible Notifications and Messages](https://primer.style/accessibility/patterns/accessible-notifications-and-messages/#toasts)
+- [Defining Toast Messages (Adrian Roselli)](https://adrianroselli.com/2020/01/defining-toast-messages.html)
+- [A Toast to an Accessible Toast... to Notifications (Scott O'Hara)](https://www.scottohara.me/blog/2019/07/08/a-toast-to-a11y-toasts.html)
+- [The Problem with Toast Messages and What to Do Instead (Adam Silver)](https://adamsilver.io/blog/the-problem-with-toast-messages-and-what-to-do-instead/)
+
+

package/docs-llm/Tree.md

@@ -163,8 +163,10 @@ import { variables } from '@splunk/themes';
 
 const StyledExpansionToggleWrapper = styled.span`
     display: inline-flex;
-    padding-inline-end: ${variables.spacingSmall};
     width: 16px;
+    justify-content: center;
+    align-items: center;
+    padding-inline: ${variables.spacingMedium};
 `;
 const StyledSpan = styled.span`
     display: inline-flex;
@@ -314,9 +316,12 @@ import { variables } from '@splunk/themes';
 const StyledExpansionToggleWrapper = styled.span`
     display: inline-flex;
     width: 16px;
+    justify-content: center;
+    align-items: center;
+    padding-inline: ${variables.spacingMedium};
 `;
 const StyledCheckbox = styled(Checkbox)`
-    padding-inline: ${variables.spacingSmall};
+    padding-inline-end: ${variables.spacingSmall};
 `;
 const StyledSpan = styled.span`
     align-items: center;

package/docs-llm/llms.txt

@@ -17,8 +17,6 @@ A library of UI components, all independent of the Splunk Enterprise environment
 - **JSON Tree**
 - **Link**
 - **Markdown**
-- **Message**
-- **Message Bar**
 - **Modal**
 - **Paginator**
 - **Progress**
@@ -68,6 +66,12 @@ A library of UI components, all independent of the Splunk Enterprise environment
 - **Anchor Menu**
 - **Breadcrumbs**
 
+## Notifications
+
+- **Notifications**
+- **Message**
+- **Message Bar**
+
 ## Utilities
 
 - **AnimationToggle**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -45,8 +45,8 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.8.0",
-    "@splunk/themes": "^1.5.0",
+    "@splunk/react-icons": "^5.9.0",
+    "@splunk/themes": "^1.6.0",
     "@splunk/ui-utils": "^1.12.0",
     "decimal.js-light": "^2.5.1",
     "intl-tel-input": "^25.3.2",
@@ -66,7 +66,7 @@
     "@splunk/docs-gen": "^1.4.0",
     "@splunk/eslint-config": "^5.0.0",
     "@splunk/eslint-plugin-splunk-ui": "^0.1.0",
-    "@splunk/react-docs": "^1.5.1",
+    "@splunk/react-docs": "^1.6.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.3",

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

@@ -36,8 +36,13 @@ interface CompactPropsBase {
      * ControlGroup's help component.
      */
     describedBy?: string;
-    /** Disable adding and removing. */
-    disabled?: boolean;
+    /**
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
+     */
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -171,7 +176,7 @@ declare namespace Compact {
         defaultPlacement: PropTypes.Requireable<string>;
         defaultValues: PropTypes.Requireable<any[]>;
         describedBy: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string | boolean>;

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

@@ -55,8 +55,13 @@ interface MultiselectPropsBase {
      * ControlGroup's help component.
      */
     describedBy?: string;
-    /** Disable adding and removing. */
-    disabled?: boolean;
+    /**
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
+     */
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
@@ -223,7 +228,7 @@ declare namespace Multiselect {
         defaultPlacement: PropTypes.Requireable<string>;
         defaultValues: PropTypes.Requireable<any[]>;
         describedBy: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string | boolean>;

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

@@ -32,8 +32,13 @@ interface NormalPropsBase {
      * ControlGroup's help component.
      */
     describedBy?: string;
-    /** Disable adding and removing. */
-    disabled?: boolean;
+    /**
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
+     */
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -138,7 +143,7 @@ declare namespace Normal {
         defaultPlacement: PropTypes.Requireable<string>;
         defaultValues: PropTypes.Requireable<any[]>;
         describedBy: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

@@ -26,9 +26,12 @@ interface OptionPropsBase {
      */
     descriptionPosition?: 'right' | 'bottom';
     /**
-     * If disabled=true, the option is grayed out and cannot be clicked.
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
      */
-    disabled?: boolean;
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * @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.
@@ -99,7 +102,7 @@ declare namespace Option {
         compact: PropTypes.Requireable<boolean>;
         description: PropTypes.Requireable<string>;
         descriptionPosition: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         /**
          * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
          */

package/types/src/Multiselect/docs/examples/Disabled.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 /**
  * @name Disabled
+ * @description If you absolutely need to disable a `Multiselect` use `"disabled="dimmed"`. This ensures the `Multiselect` does not respond to events, but can still receive focus to so that users can navigate to the `Multiselect` when using assistive technologies.
  */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

package/types/src/SelectBase/SelectBase.d.ts

@@ -58,7 +58,7 @@ interface SelectBasePropsBase {
      * Prevents user interaction and adds disabled styling.
      *
      * If set to `dimmed`, the component is able to receive focus.
-     * If set to `disabled`, the component is unable to receive focus (as a result of setting the html `disabled` attribute).
+     * If set to `disabled`, the component is unable to receive focus.
      */
     disabled?: boolean | 'dimmed' | 'disabled';
     /**