@splunk/react-ui 5.8.0 → 5.9.1

package/File.js

@@ -136,7 +136,7 @@
         return !n && (0, h.css)([ "&:hover{background-color:", ";", "{color:", ";}", "{fill:", ";}}" ], w.variables.actionColorBackgroundSubtleHover, /* sc-sel */ _, w.variables.contentColorAccentStrong, /* sc-sel */ E, w.variables.contentColorAccentStrong);
     }), (function(e) {
         var n = e.$screenMode;
-        return n === "normal" && (0, h.css)([ "border:", " dashed ", ";" ], w.variables.inputBorderWidth, w.variables.borderColor);
+        return n === "normal" && (0, h.css)([ "border:", " dashed ", ";" ], w.variables.inputBorderWidth, w.variables.interactiveColorBorder);
     }), (function(e) {
         var n = e.$dragOver, r = e.$focused, t = e.$error;
         return (n || r && !t) && (0, h.css)([ "", "{color:", ";}", "{fill:", ";}" ], /* sc-sel */ _, w.variables.contentColorAccentStrong, /* sc-sel */ E, w.variables.contentColorAccentStrong);
@@ -148,7 +148,7 @@
         return n && (0, h.css)([ "box-shadow:", ";" ], w.variables.focusShadow);
     }), (function(e) {
         var n = e.$disabled;
-        return n && (0, h.css)([ "border-color:", ";cursor:not-allowed;", ",", "{color:", ";}", "{fill:", ";}" ], w.variables.borderColorWeak, /* sc-sel */ _, /* sc-sel */ R, w.variables.contentColorDisabled, /* sc-sel */ E, w.variables.contentColorDisabled);
+        return n && (0, h.css)([ "border-color:", ";cursor:not-allowed;", ",", "{color:", ";}", "{fill:", ";}" ], w.variables.interactiveColorBorderDisabled, /* sc-sel */ _, /* sc-sel */ R, w.variables.contentColorDisabled, /* sc-sel */ E, w.variables.contentColorDisabled);
     }), (function(e) {
         var n = e.$error, r = e.$dragOver;
         return n && !r && (0, h.css)([ "border-color:", ";" ], w.variables.interactiveColorAccentError);
@@ -167,10 +167,10 @@
     })([ "display:flex;flex-direction:column;gap:", ";" ], w.variables.spacingXSmall);
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowsCircularDouble"
     const j = require("@splunk/react-icons/ArrowsCircularDouble");
-    var N =  e.n(j);
+    var D =  e.n(j);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const D = require("@splunk/react-icons/Cross");
-    var M =  e.n(D);
+    const N = require("@splunk/react-icons/Cross");
+    var M =  e.n(N);
     // CONCATENATED MODULE: external "@splunk/react-icons/TrashCanCross"
     const $ = require("@splunk/react-icons/TrashCanCross");
     var B =  e.n($);
@@ -179,10 +179,10 @@
     var X =  e.n(L);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileCss"
     const U = require("@splunk/react-icons/FileCss");
-    var W =  e.n(U);
+    var z =  e.n(U);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileCsv"
-    const z = require("@splunk/react-icons/FileCsv");
-    var H =  e.n(z);
+    const H = require("@splunk/react-icons/FileCsv");
+    var W =  e.n(H);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileDat"
     const J = require("@splunk/react-icons/FileDat");
     var G =  e.n(J);
@@ -248,10 +248,10 @@
     var Pe =  e.n(Te);
     // CONCATENATED MODULE: external "@splunk/react-icons/FilePng"
     const je = require("@splunk/react-icons/FilePng");
-    var Ne =  e.n(je);
+    var De =  e.n(je);
     // CONCATENATED MODULE: external "@splunk/react-icons/FilePpt"
-    const De = require("@splunk/react-icons/FilePpt");
-    var Me =  e.n(De);
+    const Ne = require("@splunk/react-icons/FilePpt");
+    var Me =  e.n(Ne);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileRar"
     const $e = require("@splunk/react-icons/FileRar");
     var Be =  e.n($e);
@@ -260,10 +260,10 @@
     var Xe =  e.n(Le);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileSql"
     const Ue = require("@splunk/react-icons/FileSql");
-    var We =  e.n(Ue);
+    var ze =  e.n(Ue);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileSvg"
-    const ze = require("@splunk/react-icons/FileSvg");
-    var He =  e.n(ze);
+    const He = require("@splunk/react-icons/FileSvg");
+    var We =  e.n(He);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileText"
     const Je = require("@splunk/react-icons/FileText");
     var Ge =  e.n(Je);
@@ -341,8 +341,8 @@
     var xn = {
         aif: X(),
         aiff: X(),
-        css: W(),
-        csv: H(),
+        css: z(),
+        csv: W(),
         dat: G(),
         db: Z(),
         dbf: Q(),
@@ -364,12 +364,12 @@
         mpg: Re(),
         pdf: Ae(),
         php: Pe(),
-        png: Ne(),
+        png: De(),
         ppt: Me(),
         rar: Be(),
         rtf: Xe(),
-        sql: We(),
-        svg: He(),
+        sql: ze(),
+        svg: We(),
         txt: Ge(),
         tgz: Ze(),
         tiff: Qe(),
@@ -501,7 +501,7 @@
             onClick: q,
             "aria-label": F,
             appearance: "subtle"
-        },  t().createElement(N(), {
+        },  t().createElement(D(), {
             "aria-label": (0, m._)("Retry")
         })), !_ && (p === undefined && !o ?  t().createElement(wn, {
             "data-test": "remove",
@@ -577,12 +577,12 @@
             search: ""
         }
     };
-    function Nn() {
+    function Dn() {
         var e = typeof document !== "undefined" ? document : jn;
         return e;
     }
-    var Dn = Nn();
-    /* harmony default export */    const Mn = /* unused pure expression or super */ null && Dn;
+    var Nn = Dn();
+    /* harmony default export */    const Mn = /* unused pure expression or super */ null && Nn;
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
     var $n = {
@@ -658,13 +658,13 @@
             return e;
         }, Un.apply(null, arguments);
     }
-    function Wn(e, n) {
-        return Vn(e) || Gn(e, n) || Hn(e, n) || zn();
+    function zn(e, n) {
+        return Vn(e) || Gn(e, n) || Wn(e, n) || Hn();
     }
-    function zn() {
+    function Hn() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function Hn(e, n) {
+    function Wn(e, n) {
         if (e) {
             if ("string" == typeof e) return Jn(e, n);
             var r = {}.toString.call(e).slice(8, -1);
@@ -750,13 +750,13 @@
  * file readers, only a reference to the file. This can be used to post binary content, or
  * upload using an array buffer.
  */    function Yn(e) {
-        var n = e.accept, a = e.allowMultiple, o = e.children, s = e.disabled, u = e.dropAnywhere, d = e.elementRef, p = e.error, b = e.fullscreen, h = e.help, k = e.inputId, S = e.name, q = e.onRequestAdd, w = e.onRequestRemove, C = e.onRequestRetry, x = e.required, j = e.supportsMessage, N = Zn(e, [ "accept", "allowMultiple", "children", "disabled", "dropAnywhere", "elementRef", "error", "fullscreen", "help", "inputId", "name", "onRequestAdd", "onRequestRemove", "onRequestRetry", "required", "supportsMessage" ]);
+        var n = e.accept, a = e.allowMultiple, o = e.children, s = e.disabled, u = e.dropAnywhere, d = e.elementRef, p = e.error, b = e.fullscreen, h = e.help, k = e.inputId, S = e.name, q = e.onRequestAdd, w = e.onRequestRemove, C = e.onRequestRetry, x = e.required, j = e.supportsMessage, D = Zn(e, [ "accept", "allowMultiple", "children", "disabled", "dropAnywhere", "elementRef", "error", "fullscreen", "help", "inputId", "name", "onRequestAdd", "onRequestRemove", "onRequestRetry", "required", "supportsMessage" ]);
         // @docs-props-type FilePropsBase
-                var D = (0, r.useState)(false), M = Wn(D, 2), $ = M[0], B = M[1];
-        var L = (0, r.useState)(false), X = Wn(L, 2), U = X[0], W = X[1];
+                var N = (0, r.useState)(false), M = zn(N, 2), $ = M[0], B = M[1];
+        var L = (0, r.useState)(false), X = zn(L, 2), U = X[0], z = X[1];
         /* Each time a file is uploaded this is incremented and used to generate the
-   * file input's key. In this way we get a new input without a value. */        var z = (0, 
-        r.useState)(0), H = Wn(z, 2), J = H[0], G = H[1];
+   * file input's key. In this way we get a new input without a value. */        var H = (0, 
+        r.useState)(0), W = zn(H, 2), J = W[0], G = W[1];
         var V = (0, r.useMemo)((function() {
             return k || (0, y.createDOMID)("file");
         }), [ k ]);
@@ -780,10 +780,10 @@
             Z((n = e.currentTarget.files) !== null && n !== void 0 ? n : undefined);
         }), [ Z ]);
         var Q = (0, r.useCallback)((function() {
-            W(true);
+            z(true);
         }), []);
         var Y = (0, r.useCallback)((function() {
-            W(false);
+            z(false);
         }), []);
         var ee = (0, r.useCallback)((function(e) {
             if (!$) {
@@ -856,7 +856,7 @@
             "data-test": "file",
             "data-test-disabled": s ? "disabled" : undefined,
             "data-test-error": !!p
-        }, N),  t().createElement("label", {
+        }, D),  t().createElement("label", {
             htmlFor: V,
             "data-test": "file-label"
         },  t().createElement(O, {

package/LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2026 Cisco Systems, Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/MIGRATION.md

@@ -2,6 +2,46 @@
 
 This document lists migration guidance for new features and breaking changes.
 
+## 5.10.0
+
+### Deprecated `ColumnLayout`
+
+#### Change
+`ColumnLayout` has been deprecated and will be removed in a future major version.
+
+#### Context
+`ColumnLayout` is a flexbox-based component that provides a 12-column grid abstraction. It exists for historical and backwards-compatibility reasons. We recommend migrating to CSS `grid` directly, which provides better styling control, supports intrinsic sizing, allows the use of design tokens for spacing, and avoids the overhead of a React component.
+
+#### Migration steps
+If you aren't familiar with CSS grid layout, explore some of the following resources before migrating:
+- [CSS grid layout guide](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout)
+- [Basic concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Basic_concepts)
+- [CSS grid property reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid)
+
+Replace `ColumnLayout`, `ColumnLayout.Row`, and `ColumnLayout.Column` with CSS `grid`. Use `gridColumn` with `span` for column widths, and replace the `gutter` prop with `gap`:
+
+```jsx
+// Before
+<ColumnLayout gutter={8}>
+    <ColumnLayout.Row>
+        <ColumnLayout.Column span={3}>Column</ColumnLayout.Column>
+        <ColumnLayout.Column span={9}>Content</ColumnLayout.Column>
+    </ColumnLayout.Row>
+</ColumnLayout>
+
+// After
+const StyledGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: ${variables.spacingSmall};
+`;
+
+<StyledGrid>
+    <div style={{ gridColumn: 'span 3' }}>Column</div>
+    <div style={{ gridColumn: 'span 9' }}>Content</div>
+</StyledGrid>
+```
+
 ## 5.5.0
 
 ### Deprecated `Switch`'s `selectedLabel`, `someSelectedLabel`, and `unselectedLabel` props