@splunk/react-ui 4.32.0 → 4.34.0

package/Image.js

@@ -61,7 +61,7 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ X
+        default: () => /* reexport */ V
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -194,7 +194,7 @@
         displayName: "ImageStyles__StyledErrorMessage",
         componentId: "sc-16ooypp-5"
     })([ "margin-top:", ";" ], (0, b.pick)({
-        enterprise: b.variables.spacingQuarter,
+        enterprise: b.variables.spacingXSmall,
         prisma: "12px"
     }));
     // CONCATENATED MODULE: ./src/Image/Image.tsx
@@ -265,7 +265,7 @@
         return L(e, r);
     }
     function B(e) {
-        var r = W();
+        var r = X();
         return function t() {
             var a = z(e), o;
             if (r) {
@@ -281,15 +281,15 @@
         if (r && (F(r) === "object" || typeof r === "function")) {
             return r;
         }
-        return Q(e);
+        return W(e);
     }
-    function Q(e) {
+    function W(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function W() {
+    function X() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -339,7 +339,7 @@
     };
     /**
  * Image provides the ability to accept image files and present a preview of the image.
- */    var V =  function(e) {
+ */    var Q =  function(e) {
         N(t, e);
         var r = B(t);
         M(t, null, [ {
@@ -355,8 +355,8 @@
             var a;
             H(this, t);
             a = r.call(this, e);
-            G(Q(a), "fileReader", void 0);
-            G(Q(a), "handleAddFiles", (function(e) {
+            G(W(a), "fileReader", void 0);
+            G(W(a), "handleAddFiles", (function(e) {
                 if (e.length > 0) {
                     var r = e[0];
                     if (a.fileReader.readyState === 1) {
@@ -376,7 +376,7 @@
                     a.fileReader.readAsDataURL(r);
                 }
             }));
-            G(Q(a), "handleRemoveFile", (function() {
+            G(W(a), "handleRemoveFile", (function() {
                 var e, r;
                 if (a.fileReader.readyState === 1) {
                     a.fileReader.abort();
@@ -443,9 +443,9 @@
         } ]);
         return t;
     }(t.Component);
-    G(V, "propTypes", J);
-    G(V, "defaultProps", K);
-    /* harmony default export */    const X = V;
+    G(Q, "propTypes", J);
+    G(Q, "defaultProps", K);
+    /* harmony default export */    const V = Q;
     // CONCATENATED MODULE: ./src/Image/index.ts
     module.exports = r;
     /******/})();

package/JSONTree.js

@@ -168,10 +168,10 @@
                     N(r);
                     v === null || v === void 0 ? void 0 : v(r, n);
                 };
-                var B = function e(n) {
+                var U = function e(n) {
                     j === null || j === void 0 ? void 0 : j(n, r);
                 };
-                var U = function e(r) {
+                var B = function e(r) {
                     var n;
                     r.stopPropagation();
                     F === null || F === void 0 ? void 0 : (n = F.current) === null || n === void 0 ? void 0 : n.focus();
@@ -210,7 +210,7 @@
                         onClick: function e(r) {
                             var n, t;
                             J(!_, r);
-                            B(r);
+                            U(r);
                             (n = (t = S.props).onClick) === null || n === void 0 ? void 0 : n.call(t, r);
                         },
                         "aria-expanded": _
@@ -221,7 +221,7 @@
                     ref: M,
                     tabIndex: q,
                     onBlur: H,
-                    onFocus: U,
+                    onFocus: B,
                     onKeyDown: z,
                     role: "treeitem",
                     "aria-labelledby": u,
@@ -230,7 +230,7 @@
                     ref: F,
                     tabIndex: -1,
                     onFocus: X,
-                    onClick: B
+                    onClick: U
                 },  o().createElement(s, null, a), W(), !_ && l), _ &&  o().createElement(o().Fragment, null,  o().createElement(y, {
                     role: "group",
                     $defaultIndent: C
@@ -398,7 +398,7 @@
             function J(e) {
                 return _(e, "0");
             }
-            function B(e) {
+            function U(e) {
                 var r = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "0";
                 var n = _(e, r);
                 var t = r;
@@ -417,11 +417,11 @@
                 }
  // continue to find its last child recursively
                                 t = "".concat(t, "-0");
-                return B(e, t);
+                return U(e, t);
             }
             // CONCATENATED MODULE: ./src/Tree/Tree.tsx
-            function U() {
-                U = Object.assign || function(e) {
+            function B() {
+                B = Object.assign || function(e) {
                     for (var r = 1; r < arguments.length; r++) {
                         var n = arguments[r];
                         for (var t in n) {
@@ -432,7 +432,7 @@
                     }
                     return e;
                 };
-                return U.apply(this, arguments);
+                return B.apply(this, arguments);
             }
             function H(e, r) {
                 return Q(e) || G(e, r) || z(e, r) || X();
@@ -555,7 +555,7 @@
 
                       case "end":
                         r.preventDefault();
-                        v(B(s));
+                        v(U(s));
                         break;
 
                       default:
@@ -589,7 +589,7 @@
                         itemPaths: s,
                         focusedItemId: d
                     }
-                },  o().createElement(y, U({
+                },  o().createElement(y, B({
                     role: "tree",
                     $defaultIndent: a
                 }, i), r));
@@ -722,9 +722,9 @@
         // EXTERNAL MODULE: external "@splunk/themes"
                 var f = n(3563);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeStyles.ts
-        var d = (0, u.css)([ "", ";", ";&:focus-within{border:", ";}" ], f.mixins.reset("block"), f.mixins.typography({
+        var d = (0, u.css)([ "", ";", ";" ], f.mixins.reset("block"), f.mixins.typography({
             family: "monospace"
-        }), f.variables.activeBorder);
+        }));
         var v = c().code.withConfig({
             displayName: "JSONTreeStyles__StyledScrollCode",
             componentId: "vrdt21-0"
@@ -916,8 +916,8 @@
         const $ = require("@splunk/react-ui/Clickable");
         var J =  n.n($);
         // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-        const B = require("@splunk/react-ui/Tooltip");
-        var U =  n.n(B);
+        const U = require("@splunk/react-ui/Tooltip");
+        var B =  n.n(U);
         // CONCATENATED MODULE: ./src/JSONTree/JSONTreeItemStyles.ts
         var H = {
             string: f.variables.syntaxTeal,
@@ -980,7 +980,7 @@
         }), f.variables.focusShadowInset, (0, f.pick)({
             prisma: (0, u.css)([ "border-radius:", ";" ], f.variables.borderRadius)
         }));
-        var ee = c()(U()).withConfig({
+        var ee = c()(B()).withConfig({
             displayName: "JSONTreeItemStyles__StyledTooltip",
             componentId: "o558h3-5"
         })([ "font-family:", ";" ], f.variables.monoFontFamily);
@@ -1177,7 +1177,7 @@
                     representation: u
                 };
             };
-            var B = function n(t) {
+            var U = function n(t) {
                 var o = (0, e.useRef)(null);
                 if (b) {
                     return {
@@ -1200,7 +1200,7 @@
                 };
             };
             if (O()(p) && !g()(p) || m()(p) && p.length > 0) {
-                var U = C()(p).map((function(e, n, t) {
+                var B = C()(p).map((function(e, n, t) {
                     var o = p[e];
  // TS: should be safe based on (recursive) JSONElement type
                                         var a = m()(p) ? parseInt(e, 10) : e;
@@ -1209,7 +1209,7 @@
                         key: a,
                         value: o
                     }), u = l.representation, c = l.clickableValRef;
-                    var f = !m()(p) ? B(a) : {
+                    var f = !m()(p) ? U(a) : {
                         propertyElement: undefined,
                         clickableKeyRef: undefined
                     }, d = f.propertyElement, v = f.clickableKeyRef;
@@ -1247,10 +1247,10 @@
                         value: p,
                         index: 0,
                         renderExpandLink: $,
-                        representation: U
+                        representation: B
                     });
                 }
-                return U;
+                return B;
             }
  // edge case: a single number/string/boolean being rendered (still valid JSON)
                         var X = J({

package/MIGRATION.mdx

@@ -5,6 +5,105 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.34.0
+
+### Deprecated `Select`'s `appearance` values of `"flat"`, `"pill"`, and `"toggle"`
+
+#### Change
+
+`Select`'s `appearance` prop's `"flat"`, `"pill"`, and `"toggle"` values are deprecated and will be removed in the next major version.
+
+#### Context
+
+The `"pill"` value for `appearance` was only supported in Enterprise theme, and the `"flat"` and `"toggle"` values were only supported in the Prisma theme.
+
+As part of our effort to unify behaviors and APIs across themes, we are deprecating these appearances.
+
+#### Migration steps
+
+For Enterprise themes:
+* the `"pill"` value can be replaced with `"subtle"` with no other changes.
+
+For Prisma themes:
+* the `"flat"` appearance can be replaced by `"secondary"` or `"subtle"` depending on the context in which it appears.
+* the `"toggle"` appearance can be replaced with `"default"`.
+
+### Improved `Card.Header` accessibility when rendering actions
+
+#### Change
+
+* New `actions` prop to render card actions.
+* Default to rendering the container element as an `article` tag instead of a `div`.
+* New `tag` prop to control the HTML tag used for `Card`'s container element.
+
+#### Context
+
+Cards rendered the `secondaryActions` button with the same label -- "Actions".
+This would create an ambiguous label (especially when multiple cards are rendered) which may be confusing non-visual users.
+
+The new `actions` prop provides full control over the rendering of the actions to make sure the secondary actions button name can be made unique and not ambiguous for assistive technology users.
+
+Cards used a `div` as the container element which did not provide any semantic grouping of the content.
+The new `article` container element provides semantic clarity, improves accessibility, and future-proofs the code, as it clearly denotes self-contained, independently distributable content, which `div` does not.
+
+[MDN - Article Role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/article_role)
+
+#### Migration steps
+
+* Update `Card` to use the new `actions` prop instead of `secondaryActions` and add an unambiguous label for each action:
+
+```jsx
+<Card.Header title="My widget" actions={() => <>}>
+    <HeaderActions>
+        <Button icon={<Star/>} aria-label="Favorite My widget" />
+        <Dropdown toggle={<ActionsSecondaryToggle content="More actions for My widget" />}>
+            {actionsSecondaryMenuOne}
+        </Dropdown>
+    </HeaderActions>
+</Card.Header>
+```
+
+## 4.33.0
+
+### Deprecated `Button`'s `appearance` values of `"flat"`, `"pill"`, and `"toggle"`
+
+#### Change
+
+`Button`'s `appearance` prop's `"flat"`, `"pill"`, and `"toggle"` values are deprecated and will be removed in the next major version.
+
+#### Context
+
+The `"pill"` value for `appearance` was only supported in Enterprise themes, and the `"flat"` and `"toggle"` values were only supported in the Prisma themes.
+
+As part of our effort to unify behaviors and APIs across themes, we are deprecating these appearances.
+
+#### Migration steps
+
+For Enterprise themes:
+* the `"pill"` value can be replaced with `"subtle"` with no other changes.
+
+For Prisma themes:
+* the `"flat"` appearance can be replaced by `"secondary"` or `"subtle"` depending on the context in which it appears.
+* the `"toggle"` appearance can be replaced with `"default"`.
+
+### Deprecated `CollapsiblePanel`'s `titleWithActions` prop
+
+#### Change
+
+`CollapsiblePanel`'s `titleWithActions` prop has been deprecated and will be removed in the next major version.
+
+#### Context
+
+Previously, `titleWithActions` prop allowed for customized interactive elements to be added directly to the `title` prop. 
+Now, a new `actions` prop is introduced to reserve the `title` prop for text only. The `actions` prop should contain all customized 
+interactive actions that were previously placed in the `title` prop. This ensures that the controls are not read as part of the label, 
+while still providing the necessary interactivity.
+
+#### Migration steps
+
+Remove `CollapsiblePanel`'s `titleWithActions` prop. Extract the actions/interactive elements from the `title` prop 
+and move them to the new `actions` prop.
+
 ## 4.30.0
 
 ### Deprecated `NavigationProvider`'s `prefix` prop

package/Markdown.js

@@ -96,11 +96,11 @@
     var y = p().div.withConfig({
         displayName: "MarkdownStyles__StyledCodeBlock",
         componentId: "sc-1xadih-0"
-    })([ "padding:", ";margin:", " 0;background-color:", ";" ], (0, d.pick)({
-        enterprise: d.variables.spacingHalf,
-        prisma: (0, s.css)([ "10px ", "" ], d.variables.spacingLarge)
+    })([ "", ";margin:", " 0;background-color:", ";" ], (0, d.pick)({
+        enterprise: (0, s.css)([ "padding:", ";" ], d.variables.spacingSmall),
+        prisma: (0, s.css)([ "padding:10px ", ";" ], d.variables.spacingLarge)
     }), (0, d.pick)({
-        enterprise: d.variables.spacingHalf,
+        enterprise: d.variables.spacingSmall,
         prisma: d.variables.spacingLarge
     }), (0, d.pick)({
         enterprise: {
@@ -176,7 +176,7 @@
     // CONCATENATED MODULE: ./src/Markdown/renderers/MarkdownCode.tsx
     function w(e, r) {
         if (e == null) return {};
-        var n = P(e, r);
+        var n = S(e, r);
         var t, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
@@ -189,7 +189,7 @@
         }
         return n;
     }
-    function P(e, r) {
+    function S(e, r) {
         if (e == null) return {};
         var n = {};
         var t = Object.keys(e);
@@ -201,7 +201,7 @@
         }
         return n;
     }
-    var S = {
+    var P = {
         literal: i().string
     };
     function x(e) {
@@ -209,7 +209,7 @@
         
         return t().createElement(v, n, r);
     }
-    x.propTypes = S;
+    x.propTypes = P;
     /* harmony default export */    const R = x;
     // CONCATENATED MODULE: external "@splunk/react-ui/Code"
     const E = require("@splunk/react-ui/Code");
@@ -596,7 +596,7 @@
     // CONCATENATED MODULE: ./src/Markdown/renderers/MarkdownItem.tsx
     function we(e, r) {
         if (e == null) return {};
-        var n = Pe(e, r);
+        var n = Se(e, r);
         var t, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
@@ -609,7 +609,7 @@
         }
         return n;
     }
-    function Pe(e, r) {
+    function Se(e, r) {
         if (e == null) return {};
         var n = {};
         var t = Object.keys(e);
@@ -621,7 +621,7 @@
         }
         return n;
     }
-    var Se = {
+    var Pe = {
         children: i().node
     };
     function xe(e) {
@@ -629,7 +629,7 @@
         
         return t().createElement(ve.Item, n, r);
     }
-    xe.propTypes = Se;
+    xe.propTypes = Pe;
     /* harmony default export */    const Re = xe;
     // CONCATENATED MODULE: external "@splunk/react-ui/Paragraph"
     const Ee = require("@splunk/react-ui/Paragraph");