@splunk/react-ui 5.8.0 → 5.9.1

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/docker-compose.yml

@@ -9,7 +9,7 @@ services:
                 workdir: /react-ui
         command: npx http-server storybook-static-visual-prisma --port 6007
         ports:
-            - '6007:6007'
+            - "6007:6007"
     enterprise-storybook:
         build:
             context: .
@@ -20,7 +20,7 @@ services:
                 workdir: /react-ui
         command: npx http-server storybook-static-visual-enterprise --port 6008
         ports:
-            - '6008:6008'
+            - "6008:6008"
     splunk-magnetic-storybook:
         build:
             context: .
@@ -31,7 +31,7 @@ services:
                 workdir: /react-ui
         command: npx http-server storybook-static-visual-splunk-magnetic --port 6009
         ports:
-            - '6009:6009'
+            - "6009:6009"
     prisma-visual-test:
         build:
             context: .
@@ -45,12 +45,10 @@ services:
             - JOB_BROWSER=${JOB_BROWSER}
         working_dir: /react-ui
         volumes:
-            - './src:/react-ui/src'
-            - './test-reports:/react-ui/test-reports'
+            - "./src:/react-ui/src"
+            - "./test-reports:/react-ui/test-reports"
             # TODO(SUI-8236): can remove once webpack.test.config.js imports of infra/.config.js are removed as this won't be needed any longer (verify with no cache docker build something else didn't start using it though)
-            - '../../infra/.config.js:/infra/.config.js:ro'
-            - '../../infra/storybook/utils.js:/infra/storybook/utils.js:ro'
-            - '../../infra/visual-tests/orphaned-snapshot-check-reporter.js:/infra/visual-tests/orphaned-snapshot-check-reporter.js:ro'
+            - "../../infra:/infra:ro"
         depends_on:
             - prisma-storybook
         command: /bin/sh -c "npx wait-on http://prisma-storybook:6007 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} $${STORYBOOK_MAX_WORKERS} --url http://prisma-storybook:6007 --no-index-json"
@@ -67,12 +65,10 @@ services:
             - JOB_BROWSER=${JOB_BROWSER}
         working_dir: /react-ui
         volumes:
-            - './src:/react-ui/src'
-            - './test-reports:/react-ui/test-reports'
+            - "./src:/react-ui/src"
+            - "./test-reports:/react-ui/test-reports"
             # TODO(SUI-8236): can remove once webpack.test.config.js imports of infra/.config.js are removed as this won't be needed any longer (verify with no cache docker build something else didn't start using it though)
-            - '../../infra/.config.js:/infra/.config.js:ro'
-            - '../../infra/storybook/utils.js:/infra/storybook/utils.js:ro'
-            - '../../infra/visual-tests/orphaned-snapshot-check-reporter.js:/infra/visual-tests/orphaned-snapshot-check-reporter.js:ro'
+            - "../../infra:/infra:ro"
         depends_on:
             - enterprise-storybook
         command: /bin/sh -c "npx wait-on http://enterprise-storybook:6008 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} $${STORYBOOK_MAX_WORKERS} --url http://enterprise-storybook:6008 --no-index-json"
@@ -89,12 +85,10 @@ services:
             - JOB_BROWSER=${JOB_BROWSER}
         working_dir: /react-ui
         volumes:
-            - './src:/react-ui/src'
-            - './test-reports:/react-ui/test-reports'
+            - "./src:/react-ui/src"
+            - "./test-reports:/react-ui/test-reports"
             # TODO(SUI-8236): can remove once webpack.test.config.js imports of infra/.config.js are removed as this won't be needed any longer (verify with no cache docker build something else didn't start using it though)
-            - '../../infra/.config.js:/infra/.config.js:ro'
-            - '../../infra/storybook/utils.js:/infra/storybook/utils.js:ro'
-            - '../../infra/visual-tests/orphaned-snapshot-check-reporter.js:/infra/visual-tests/orphaned-snapshot-check-reporter.js:ro'
+            - "../../infra:/infra:ro"
         depends_on:
             - splunk-magnetic-storybook
         command: /bin/sh -c "npx wait-on http://splunk-magnetic-storybook:6009 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} $${STORYBOOK_MAX_WORKERS} --url http://splunk-magnetic-storybook:6009 --no-index-json"

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.staticA1,
+    dark: variables.staticA1,
 });
 
 

package/docs-llm/Collapsible Panel.md

@@ -58,6 +58,10 @@ Order panels logically, according to the specific reading order.
 > Image: Heart eye example with Collapsible panel label in sequential order 1 - 4 next to a grimacing face example where the Collapsible panel are out of order 2, 1, 4, 3
 
 
+
+### Keep headers consistent
+Stacked `CollapsiblePanels` must share an identical header structure to prevent jarring alignment shifts and layout "jumping." It is recommended to extend this uniformity across an entire page section to keep the user’s mental model predictable for a specific task or context. Across a full page, consistency is contextual; while a uniform layout is ideal, variations are permissible between distinct, visually separated sections that serve different functional purposes.
+
 ## Content guidelines
 
 ### Panel title:
@@ -73,6 +77,7 @@ Order panels logically, according to the specific reading order.
 [2]: ./Table
 [3]: ./TabBar
 
+
 ## Examples
 
 
@@ -156,14 +161,9 @@ If a CollapsiblePanel is passed disabled the default behavior is to render as "d
 ```typescript
 import React from 'react';
 
-import Clone from '@splunk/react-icons/enterprise/Clone';
 import MoreVertical from '@splunk/react-icons/enterprise/MoreVertical';
-import Refresh from '@splunk/react-icons/enterprise/Refresh';
-import Remove from '@splunk/react-icons/enterprise/Remove';
 import Button from '@splunk/react-ui/Button';
 import CollapsiblePanel from '@splunk/react-ui/CollapsiblePanel';
-import Dropdown from '@splunk/react-ui/Dropdown';
-import Menu from '@splunk/react-ui/Menu';
 import P from '@splunk/react-ui/Paragraph';
 import { _ } from '@splunk/ui-utils/i18n';
 
@@ -173,51 +173,20 @@ function Dimmed() {
         <div style={{ display: 'flex', width: 140, alignItems: 'center' }}>Splunk products</div>
     );
 
-    const actionsToggle = (
+    // In real usage, each CollapsiblePanel can provide its own `actions`.
+    // This example reuses one for brevity.
+    const actions = (
         <Button
             disabled="dimmed"
             appearance="secondary"
             data-test="actions-toggle"
             icon={<MoreVertical width="16px" height="16px" screenReaderText={_('Actions')} />}
-            style={{ marginLeft: 10 }}
         />
     );
 
-    const actions = (
-        <div
-            style={{
-                position: 'relative',
-                width: '100%',
-                display: 'flex',
-                justifyContent: 'flex-end',
-            }}
-        >
-            <div style={{ flex: '0 0 auto' }}>
-                <Dropdown defaultPlacement="right" toggle={actionsToggle}>
-                    <Menu>
-                        <Menu.Item startAdornment={<Refresh width="16px" height="16px" />}>
-                            Refresh
-                        </Menu.Item>
-                        <Menu.Divider />
-                        <Menu.Item startAdornment={<Clone width="16px" height="16px" />}>
-                            Duplicate
-                        </Menu.Item>
-                        <Menu.Item startAdornment={<Remove width="16px" height="16px" />}>
-                            Delete
-                        </Menu.Item>
-                    </Menu>
-                </Dropdown>
-            </div>
-        </div>
-    );
-
     return (
         <>
-            <CollapsiblePanel
-                panelId={1}
-                disabled="dimmed"
-                title="Introduction to Splunk Enterprise"
-            >
+            <CollapsiblePanel disabled="dimmed" title={title} actions={actions}>
                 <P>
                     Splunk Enterprise makes it simple to collect, analyze and act upon the untapped
                     value of the big data generated by your technology infrastructure, security
@@ -230,12 +199,7 @@ function Dimmed() {
                     analytics backbone.
                 </P>
             </CollapsiblePanel>
-            <CollapsiblePanel
-                panelId={2}
-                disabled="dimmed"
-                defaultOpen
-                title="Introduction to Splunk Enterprise"
-            >
+            <CollapsiblePanel defaultOpen disabled="dimmed" title={title} actions={actions}>
                 <P>
                     Splunk Enterprise makes it simple to collect, analyze and act upon the untapped
                     value of the big data generated by your technology infrastructure, security
@@ -248,16 +212,6 @@ function Dimmed() {
                     analytics backbone.
                 </P>
             </CollapsiblePanel>
-            <CollapsiblePanel disabled="dimmed" title={title} actions={actions}>
-                <P>
-                    Splunk Security modernizes security operations and protects businesses with
-                    data, analytics, automation and end-to-end integrations. Splunk Observability
-                    solves problems in seconds with end-to-end visibility across infrastructure,
-                    applications and digital customer experience. Splunk Cloud provides
-                    cloud-powered insights for petabyte-scale data analytics across the hybrid cloud
-                    with Splunk as a service.
-                </P>
-            </CollapsiblePanel>
         </>
     );
 }
@@ -376,7 +330,7 @@ export default MultiControlled;
 
 ### Actions
 
-Adding clickable items in the header.
+Adding clickable items in the header. Within a set of panels, keep headers consistent by either including `actions` on all panels or on none.
 
 ```typescript
 import React, { useState } from 'react';

package/docs-llm/Column Layout.md

@@ -349,8 +349,8 @@ export default AlignItems;
 
 ### ColumnLayout API
 
-`ColumnLayout` provides simple API for laying out content into columns. It is based on flexbox
-and has 12 columns.
+@deprecated
+ColumnLayout has been deprecated and will be removed in a future major version. Use CSS `grid` or `flex` instead.
 
 #### Props
 

package/docs-llm/Divider.md

@@ -83,6 +83,39 @@ export default Vertical;
 
 
 
+### Vertical with align-items
+
+```typescript
+import React from 'react';
+
+import styled from 'styled-components';
+
+import Portrait from '@splunk/react-icons/Portrait';
+import QuestionCircle from '@splunk/react-icons/QuestionCircle';
+import Button from '@splunk/react-ui/Button';
+import Divider from '@splunk/react-ui/Divider';
+import Layout from '@splunk/react-ui/Layout';
+
+const StyledDivider = styled(Divider)`
+    align-self: stretch;
+`;
+
+
+function VerticalWithAlignItems() {
+    return (
+        <Layout>
+            <Button icon={<QuestionCircle />} />
+            <StyledDivider orientation="vertical" />
+            <Button icon={<Portrait />} />
+        </Layout>
+    );
+}
+
+export default VerticalWithAlignItems;
+```
+
+
+
 ### StyledContainer
 
 ```typescript

package/docs-llm/Message Bar.md

@@ -116,6 +116,7 @@ Message Bar can have one of four types: "info", "warning", "error" or "success".
 ```typescript
 import React from 'react';
 
+import Heading from '@splunk/react-ui/Heading';
 import Layout from '@splunk/react-ui/Layout';
 import Link from '@splunk/react-ui/Link';
 import MessageBar from '@splunk/react-ui/MessageBar';
@@ -129,7 +130,9 @@ function Types() {
     return (
         <section>
             <Layout style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-                <h2 id={headingId}>Account notifications</h2>
+                <Heading level={2} id={headingId}>
+                    Account notifications
+                </Heading>
                 <MessageBar
                     type="info"
                     aria-labelledby={headingId}