@splunk/react-ui 5.4.0 → 5.5.0

package/TransitionOpen.js

@@ -72,8 +72,8 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
     const a = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const u = require("@splunk/react-ui/usePrevious");
-    var l =  e.n(u);
+    const l = require("@splunk/react-ui/usePrevious");
+    var u =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
     const s = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/style"
@@ -137,7 +137,7 @@
         }, g.apply(null, arguments);
     }
     function O(e, t) {
-        return k(e) || P(e, t) || j(e, t) || S();
+        return P(e) || F(e, t) || j(e, t) || S();
     }
     function S() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -156,34 +156,34 @@
         }
         return n;
     }
-    function P(e, t) {
+    function F(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
-            var n, o, i, a, u = [], l = !0, s = !1;
+            var n, o, i, a, l = [], u = !0, s = !1;
             try {
                 if (i = (r = r.call(e)).next, 0 === t) {
                     if (Object(r) !== r) return;
-                    l = !1;
-                } else for (;!(l = (n = i.call(r)).done) && (u.push(n.value), u.length !== t); l = !0) {
+                    u = !1;
+                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
                 }
             } catch (e) {
                 s = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!u && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
                 } finally {
                     if (s) throw o;
                 }
             }
-            return u;
+            return l;
         }
     }
-    function k(e) {
+    function P(e) {
         if (Array.isArray(e)) return e;
     }
-    function x(e, t) {
+    function k(e, t) {
         if (null == e) return {};
-        var r, n, o = F(e, t);
+        var r, n, o = x(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -192,7 +192,7 @@
         }
         return o;
     }
-    function F(e, t) {
+    function x(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -217,26 +217,26 @@
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
             t % 2 ? C(Object(r), !0).forEach((function(t) {
-                T(e, t, r[t]);
+                A(e, t, r[t]);
             })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : C(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function T(e, t, r) {
-        return (t = E(t)) in e ? Object.defineProperty(e, t, {
+    function A(e, t, r) {
+        return (t = T(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function E(e) {
-        var t = A(e, "string");
+    function T(e) {
+        var t = E(e, "string");
         return "symbol" == h(t) ? t : t + "";
     }
-    function A(e, t) {
+    function E(e, t) {
         if ("object" != h(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
@@ -256,6 +256,7 @@
         innerClassName: i().string,
         innerStyle: i().object,
         onAnimationEnd: i().func,
+        onAnimationStart: i().func,
         open: i().bool,
         outerClassName: i().string,
         outerId: i().string,
@@ -293,7 +294,7 @@
         var a = {
             value: n ? 0 : o
         };
-        var u = {
+        var l = {
             precision: 1
         };
  // Only use precision when not using transform, otherwise transform animation will break
@@ -301,7 +302,7 @@
                 if (r === "expandWidth" || r === "expandHeight" || r === "none") {
             return {
                 to: i,
-                config: u
+                config: l
             };
         }
         // Slide transitions require a valid value, render without transition first.
@@ -313,14 +314,14 @@
             return {
                 to: i,
                 from: a,
-                config: u
+                config: l
             };
         }
         // The top and left directions require an additional transform of their inner content to match the outer dimension animation.
         // This is needed to achieve a clipping effect from the outer div, rather than the consumer providing their own.
-                var l = r === "slideFromTop" ? "Y" : "X";
-        var s = "translate".concat(l, "(").concat(n ? 0 : -o, "px)");
-        var c = "translate".concat(l, "(").concat(n ? -o : 0, "px)");
+                var u = r === "slideFromTop" ? "Y" : "X";
+        var s = "translate".concat(u, "(").concat(n ? 0 : -o, "px)");
+        var c = "translate".concat(u, "(").concat(n ? -o : 0, "px)");
         return {
             to: N({
                 transform: s
@@ -330,7 +331,7 @@
             }, a)
         };
     };
-    var _ = function e(t) {
+    var R = function e(t) {
         var r = t.animation, n = t.el, o = t.takeFocusProp;
         var i = 0;
         if (n) {
@@ -353,90 +354,97 @@
         }
         return i;
     };
-    var R = {};
+    var _ = {};
     var W = {};
     function D(e) {
-        var t = e.animation, o = t === void 0 ? "expandHeight" : t, i = e.animateOnMount, u = e.children, f = e.className, d = e.elementRef, m = e.id, p = e.innerClassName, h = e.innerStyle, S = h === void 0 ? R : h, j = e.onAnimationEnd, w = e.open, P = e.outerClassName, k = e.outerId, F = e.outerStyle, C = F === void 0 ? W : F, E = e.renderChildrenWhenCollapsed, A = e.retainFocus, I = e.takeFocus, D = x(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
+        var t = e.animation, o = t === void 0 ? "expandHeight" : t, i = e.animateOnMount, l = e.children, f = e.className, d = e.elementRef, m = e.id, p = e.innerClassName, h = e.innerStyle, S = h === void 0 ? _ : h, j = e.onAnimationEnd, w = e.onAnimationStart, F = e.open, P = e.outerClassName, x = e.outerId, C = e.outerStyle, T = C === void 0 ? W : C, E = e.renderChildrenWhenCollapsed, I = e.retainFocus, D = e.takeFocus, H = k(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "onAnimationStart", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
         // @docs-props-type TransitionOpenPropsBase
-                var H = l()(w);
-        var L = (0, r.useRef)(true);
-        var $ = (0, r.useState)(i ? w : false), B = O($, 2), K = B[0], U = B[1];
-        var X = (0, r.useState)(null), Y = O(X, 2), z = Y[0], G = Y[1];
-        var J = (0, r.useState)(0), Q = O(J, 2), V = Q[0], Z = Q[1];
+                var L = u()(F);
+        var B = (0, r.useRef)(true);
+        var $ = (0, r.useState)(i ? F : false), K = O($, 2), U = K[0], X = K[1];
+        var Y = (0, r.useState)(null), z = O(Y, 2), G = z[0], J = z[1];
+        var Q = (0, r.useState)(0), V = O(Q, 2), Z = V[0], ee = V[1];
         (0, r.useEffect)((function() {
             // prevOpen starts undefined, and we don't want to make the comparison in that situation
-            if (H !== undefined && w !== H) {
-                U(true);
+            if (L !== undefined && F !== L) {
+                X(true);
             }
-        }), [ w, H ]);
+        }), [ F, L ]);
         // equivalent to componentDidMount and componentWillUnmount
                 (0, r.useEffect)((function() {
             // we need to set this to true on every mount because React.StrictMode will call the effect twice
             // and we need to ensure that allowAnimationUpdates is true while the component is mounted
-            L.current = true;
+            B.current = true;
             return function() {
-                L.current = false;
+                B.current = false;
             };
         }), []);
-        var ee = (0, r.useCallback)((function(e) {
-            G(e);
-            Z(_({
+        var te = (0, r.useCallback)((function(e) {
+            J(e);
+            ee(R({
                 animation: o,
                 el: e,
-                takeFocusProp: I
+                takeFocusProp: D
             }));
             b(d, e);
-        }), [ o, I, d ]);
-        var te = (0, r.useCallback)((function() {
-            if (L.current) {
-                U(false);
+        }), [ o, D, d ]);
+        var re = (0, r.useCallback)((function() {
+            w === null || w === void 0 ? void 0 : w();
+        }), [ w ]);
+        var ne = (0, r.useCallback)((function() {
+            if (B.current) {
+                X(false);
             }
             j === null || j === void 0 ? void 0 : j();
         }), [ j ]);
-        var re = (0, r.useCallback)((function(e) {
-            if (z) {
-                (0, s.handleTab)(z, e);
+        var oe = (0, r.useCallback)((function(e) {
+            if (G) {
+                (0, s.handleTab)(G, e);
             }
-        }), [ z ]);
-        var ne = (0, a.useAnimation)(N(N({}, M({
+        }), [ G ]);
+        var ie = (0, a.useAnimation)(N(N({}, M({
             animation: o,
-            open: w,
-            value: V
+            open: F,
+            value: Z
         })), {}, {
             immediate: o === "none",
-            onRest: te
-        })), oe = ne.value, ie = ne.transform;
-        var ae;
-        if (K || E) {
-            ae = q(o);
+            onRest: ne,
+            onStart: re
+        })), ae = ie.value, le = ie.transform;
+        var ue;
+        var se = [ "slideFromTop", "slideFromRight", "slideFromBottom", "slideFromLeft" ].includes(o);
+        /* to avoid setting and unsetting dimension which causes flickering
+     we always set the dimension if it is a slide animation
+     else only set it when animating || renderChildrenWhenCollapsed */        if (se || U || E) {
+            ue = q(o);
         }
         // if renderChildrenWhenCollapsed is true, we hide the content by setting the height of the wrapper to 0
-                var ue = E && !w && !K ? 0 : oe;
-        var le = (0, r.useMemo)((function() {
-            return N(N({}, C), ae && T({}, ae, ue));
-        }), [ ae, ue, C ]);
-        var se = (0, r.useMemo)((function() {
+                var ce = E && !F && !U ? 0 : ae;
+        var fe = (0, r.useMemo)((function() {
+            return N(N({}, T), ue && A({}, ue, ce));
+        }), [ ue, ce, T ]);
+        var de = (0, r.useMemo)((function() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return N(N({}, S), {}, {
-                transform: ie
+                transform: le
             });
-        }), [ S, ie ]);
+        }), [ S, le ]);
         
         return n().createElement(v, {
-            $hideOverflow: !w || K || false,
+            $hideOverflow: !F || U || false,
             className: (0, c.toClassName)(f, P),
-            style: le,
-            id: k
-        }, (w || K || E) &&  n().createElement(y, g({
+            style: fe,
+            id: x
+        }, (F || U || E) &&  n().createElement(y, g({
             "data-test": "transition-open"
-        }, D, {
-            ref: ee,
+        }, H, {
+            ref: te,
             tabIndex: -1,
             className: p,
             id: m,
-            onKeyDown: A ? re : undefined,
-            style: se
-        }), u));
+            onKeyDown: I ? oe : undefined,
+            style: de
+        }), l));
     }
     D.propTypes = I;
     /* harmony default export */    const H = D;

package/docker-compose.yml

@@ -1,53 +1,100 @@
 services:
-  prisma-storybook:
-    build: 
-      context: .
-      dockerfile: ../../infra/visual-tests/Dockerfile.storybook
-      args:
-        port: 6007
-        storybookfolder: storybook-static-visual-prisma
-        workdir: /react-ui
-    command: npx http-server storybook-static-visual-prisma --port 6007
-    ports:
-      - "6007:6007"
-  enterprise-storybook:
-    build: 
-      context: .
-      dockerfile: ../../infra/visual-tests/Dockerfile.storybook
-      args:
-        port: 6008
-        storybookfolder: storybook-static-visual-enterprise
-        workdir: /react-ui
-    command: npx http-server storybook-static-visual-enterprise --port 6008
-    ports:
-      - "6008:6008"
-  prisma-visual-test:
-    build: 
-      context: .
-      dockerfile: ../../infra/visual-tests/Dockerfile.visual
-      args:
-        workdir: /react-ui
-    env_file:
-      - ./.storybook-visual/config/.env.visual
-    working_dir: /react-ui
-    volumes:
-      - "./src:/react-ui/src"
-      - "./test-reports:/react-ui/test-reports"
-    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"
-  enterprise-visual-test:
-    build: 
-      context: .
-      dockerfile: ../../infra/visual-tests/Dockerfile.visual
-      args:
-        workdir: /react-ui
-    env_file:
-      - ./.storybook-visual/config/.env.visual
-    working_dir: /react-ui
-    volumes:
-      - "./src:/react-ui/src"
-      - "./test-reports:/react-ui/test-reports"
-    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"
+    prisma-storybook:
+        build:
+            context: .
+            dockerfile: ../../infra/visual-tests/Dockerfile.storybook
+            args:
+                port: 6007
+                storybookfolder: storybook-static-visual-prisma
+                workdir: /react-ui
+        command: npx http-server storybook-static-visual-prisma --port 6007
+        ports:
+            - '6007:6007'
+    enterprise-storybook:
+        build:
+            context: .
+            dockerfile: ../../infra/visual-tests/Dockerfile.storybook
+            args:
+                port: 6008
+                storybookfolder: storybook-static-visual-enterprise
+                workdir: /react-ui
+        command: npx http-server storybook-static-visual-enterprise --port 6008
+        ports:
+            - '6008:6008'
+    splunk-magnetic-storybook:
+        build:
+            context: .
+            dockerfile: ../../infra/visual-tests/Dockerfile.storybook
+            args:
+                port: 6009
+                storybookfolder: storybook-static-visual-splunk-magnetic
+                workdir: /react-ui
+        command: npx http-server storybook-static-visual-splunk-magnetic --port 6009
+        ports:
+            - '6009:6009'
+    prisma-visual-test:
+        build:
+            context: .
+            dockerfile: ../../infra/visual-tests/Dockerfile.visual
+            args:
+                workdir: /react-ui
+        env_file:
+            - ./.storybook-visual/config/.env.visual
+        environment:
+            - JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1
+            - JOB_BROWSER=${JOB_BROWSER}
+        working_dir: /react-ui
+        volumes:
+            - './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'
+        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"
+    enterprise-visual-test:
+        build:
+            context: .
+            dockerfile: ../../infra/visual-tests/Dockerfile.visual
+            args:
+                workdir: /react-ui
+        env_file:
+            - ./.storybook-visual/config/.env.visual
+        environment:
+            - JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1
+            - JOB_BROWSER=${JOB_BROWSER}
+        working_dir: /react-ui
+        volumes:
+            - './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'
+        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"
+    splunk-magnetic-visual-test:
+        build:
+            context: .
+            dockerfile: ../../infra/visual-tests/Dockerfile.visual
+            args:
+                workdir: /react-ui
+        env_file:
+            - ./.storybook-visual/config/.env.visual
+        environment:
+            - JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1
+            - JOB_BROWSER=${JOB_BROWSER}
+        working_dir: /react-ui
+        volumes:
+            - './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'
+        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/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack && yarn types:build",
     "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
+    "docs:llm": "NODE_ENV=production webpack --config docs-llm.gen.webpack.config.js",
     "docs:publish": "eval $(splunk-docs-package docs) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
     "docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
     "docs:start": "INTERNAL=true webpack serve --config docs.gen.webpack.config.js",
@@ -44,16 +45,18 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.4.0",
-    "@splunk/themes": "^1.3.0",
-    "@splunk/ui-utils": "^1.11.0",
+    "@splunk/react-icons": "^5.5.0",
+    "@splunk/themes": "^1.4.0",
+    "@splunk/ui-utils": "^1.12.0",
     "decimal.js-light": "^2.5.1",
+    "intl-tel-input": "^25.3.2",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
     "react-markdown": "^8.0.7",
     "remark-gfm": "^1.0.0",
     "tinycolor2": "^1.4.1",
+    "use-sync-external-store": "^1.6.0",
     "use-typed-event-listener": "^3.0.0"
   },
   "devDependencies": {
@@ -65,7 +68,7 @@
     "@splunk/react-docs": "^1.4.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
-    "@splunk/webpack-configs": "^7.0.2",
+    "@splunk/webpack-configs": "^7.0.3",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
@@ -87,6 +90,7 @@
     "@types/react-dom": "^18.2.0",
     "@types/styled-components": "^5.1.0",
     "@types/tinycolor2": "^1.4.2",
+    "@types/use-sync-external-store": "^1.5.0",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",

package/stubs-splunkui.d.ts

@@ -8,92 +8,6 @@ declare module '__FONTS_IMPORT__/*' {
     export default component;
 }
 
-declare module '@splunk/ui-utils/color' {
-    function expandShortHandHex<T extends string | null | undefined>(arg: T): T;
-    function hexToRgb(hex: string): [number, number, number] | null;
-    function isCSSColor(value: string): boolean;
-    function isValidHexColor(value: string): boolean;
-    function isValidRgb(value: string): boolean;
-    function namedColorToHex(colorName: string): string | undefined;
-
-    const extendedColorKeywords: string[];
-    const extendedColorKeywordsToHex: { string: string };
-}
-
-declare module '@splunk/ui-utils/filter' {
-    function keywordLocations(
-        phrase: string,
-        keywords: string[]
-    ): { keyword: string; start: number; end: number }[];
-    function stringToKeywords(filterPhrase?: string): string[];
-    function testPhrase(phrase: string, keywords: string[]): boolean;
-}
-
-declare module '@splunk/ui-utils/format' {
-    // for now, assume this is guaranteed to return a string (and not undefined, null, ...)
-    function sprintf(...args: any[]): string;
-}
-
-declare module '@splunk/ui-utils/focus' {
-    // getSortedTabbableElements returns Elements
-    // handleTab / takeFocus both call focus() which exists only on HTMLElement/SVGElement (modern browsers), but not Element
-    function getSortedTabbableElements(
-        container: Element,
-        options?: { ignoreTabIndex: boolean }
-    ): Element[];
-    function isTabKey(event: KeyboardEvent<Element>): boolean;
-    function handleTab(container: Element, event: KeyboardEvent): Element | null;
-    function takeFocus(container: Element, defaultElement?: 'first' | 'container'): Element | null;
-    function handleFocus(
-        key: string,
-        actionItems: Element[],
-        currentIndex: number,
-        options?: {
-            enableLoop?: boolean;
-            orientation?: 'horizontal' | 'vertical';
-            enableTab?: boolean;
-            enableHomeEnd?: boolean;
-        }
-    ): void;
-}
-
-declare module '@splunk/ui-utils/i18n' {
-    // for now, assume this is guaranteed to return a string (and not undefined, null, ...)
-    function _(...args: any[]): string;
-}
-
-declare module '@splunk/ui-utils/id' {
-    function createDOMID(prefix?: string): string;
-    function createGUID(): string;
-}
-
-declare module '@splunk/ui-utils/keyboard' {
-    function addsCharacter(event: KeyboardEvent): boolean | undefined;
-    function keycode(event: KeyboardEvent | number | string): string;
-    function isDecimal(event: KeyboardEvent, options?: { locale: string }): boolean;
-    function isMinus(event: KeyboardEvent): boolean;
-    function isNumber(event: KeyboardEvent): boolean;
-    function isNumeric(event: KeyboardEvent, options?: { locale: string }): boolean;
-}
-
-declare module '@splunk/ui-utils/promise' {
-    interface CancelablePromise<T> {
-        cancel: () => void;
-        promise: Promise<T>;
-    }
-
-    function makeCancelable<T>(arg: Promise<T>): CancelablePromise<T>;
-}
-
-declare module '@splunk/ui-utils/scroll' {
-    export function scrollIntoViewIfNeeded(el?: HTMLElement | null): void;
-}
-
-declare module '@splunk/ui-utils/style' {
-    type ClassNameArg = ClassNameArg | Record<string, unknown> | string | undefined | null;
-    function toClassName(...args: ClassNameArg[]): string;
-}
-
 declare module '@splunk/react-docs/DocExample' {
     function getDependencyVersions(
         packageJSON: Record<string, unknown>,

package/test-runner-jest.config.js

@@ -50,6 +50,7 @@ module.exports = {
                         : 'a11y-report.html',
             },
         ],
+        '../../infra/visual-tests/orphaned-snapshot-check-reporter.js',
     ],
     globals: {
         __DEV__: true,

package/types/src/Badge/Badge.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AnyTheme, Interpolation, OptionalThemedProps } from '@splunk/themes';
+import { ComponentProps } from '../utils/types';
+interface BadgePropsBase {
+    /** Changes the background color. Accepts `@splunk/themes` variable or any valid `color` value. */
+    backgroundColor?: React.CSSProperties['color'] | Interpolation<AnyTheme, OptionalThemedProps<AnyTheme>>;
+    children?: never;
+    /** A React ref which is set to the DOM element when the component mounts and null when it unmounts. */
+    elementRef?: React.Ref<HTMLSpanElement>;
+    /** The content of the badge. */
+    label: string;
+    /** Icon before the label. */
+    icon?: React.ReactNode;
+    /** Changes the text and icon color. Accepts `@splunk/themes` variable or any valid `color` value. */
+    foregroundColor?: React.CSSProperties['color'] | Interpolation<AnyTheme, OptionalThemedProps<AnyTheme>>;
+}
+type BadgeProps = ComponentProps<BadgePropsBase, 'span'>;
+declare function Badge({ backgroundColor, elementRef, label, icon, foregroundColor, ...otherProps }: BadgeProps): React.JSX.Element;
+declare namespace Badge {
+    var propTypes: {
+        backgroundColor: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | null | undefined>>;
+        elementRef: PropTypes.Requireable<object>;
+        label: PropTypes.Validator<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        foregroundColor: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | null | undefined>>;
+    };
+}
+export default Badge;

package/types/src/Badge/docs/examples/Basic.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * @name Basic
+ */
+export default function Basic(): React.JSX.Element;