@splunk/react-ui 5.4.0 → 5.6.0

package/TransitionOpen.js

@@ -181,9 +181,9 @@
     function k(e) {
         if (Array.isArray(e)) return e;
     }
-    function x(e, t) {
+    function F(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,
@@ -330,7 +331,7 @@
             }, a)
         };
     };
-    var _ = function e(t) {
+    var W = function e(t) {
         var r = t.animation, n = t.el, o = t.takeFocusProp;
         var i = 0;
         if (n) {
@@ -353,89 +354,95 @@
         }
         return i;
     };
+    var _ = {};
     var R = {};
-    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, u = 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, P = e.open, k = e.outerClassName, x = e.outerId, C = e.outerStyle, T = C === void 0 ? R : C, E = e.renderChildrenWhenCollapsed, I = e.retainFocus, D = e.takeFocus, H = F(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 = l()(P);
+        var $ = (0, r.useRef)(true);
+        var B = (0, r.useState)(i ? P : false), K = O(B, 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 && P !== L) {
+                X(true);
             }
-        }), [ w, H ]);
+        }), [ P, 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;
+            $.current = true;
             return function() {
-                L.current = false;
+                $.current = false;
             };
         }), []);
-        var ee = (0, r.useCallback)((function(e) {
-            G(e);
-            Z(_({
+        var te = (0, r.useCallback)((function(e) {
+            J(e);
+            ee(W({
                 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 ($.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: P,
+            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, ue = ie.transform;
+        var le;
+        /* 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 (o.startsWith("slideFrom") || U || E) {
+            le = 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 se = E && !P && !U ? 0 : ae;
+        var ce = (0, r.useMemo)((function() {
+            return N(N({}, T), le && A({}, le, se));
+        }), [ le, se, T ]);
+        var fe = (0, r.useMemo)((function() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return N(N({}, S), {}, {
-                transform: ie
+                transform: ue
             });
-        }), [ S, ie ]);
+        }), [ S, ue ]);
         
         return n().createElement(v, {
-            $hideOverflow: !w || K || false,
-            className: (0, c.toClassName)(f, P),
-            style: le,
-            id: k
-        }, (w || K || E) &&  n().createElement(y, g({
+            $hideOverflow: !P || U || false,
+            className: (0, c.toClassName)(f, k),
+            style: ce,
+            id: x
+        }, (P || 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
+            onKeyDown: I ? oe : undefined,
+            style: fe
         }), u));
     }
     D.propTypes = I;

package/cypress/support/commands.ts

@@ -19,3 +19,43 @@ Cypress.Commands.add('hover', (selector: string) => {
         return cy.wrap($el).trigger('mouseover', { force: true });
     });
 });
+
+const calcDiffPct = (target: number, actual: number) => {
+    try {
+        const diff = (200 * Math.abs(target - actual)) / (target + actual);
+        const side = actual > target ? 'ABOVE' : 'BELOW';
+
+        return { diff: Math.round(diff * 100) / 100, side };
+    } catch {
+        return { diff: 0, side: '' };
+    }
+};
+
+Cypress.Commands.add(
+    'verifyPerformance',
+    ({ testName, execute, threshold = 0.5, expectedRenderDurationInMs = 100 }) => {
+        let startTime = 0;
+
+        const allowableDurationInMs = expectedRenderDurationInMs * (1 + threshold);
+        cy.wrap(null)
+            .then(() => {
+                startTime = performance.now();
+                cy.log(`[${Math.round(startTime)}ms] Starting validation`);
+            })
+            .then(() => execute())
+            .then(() => {
+                const endTime = performance.now();
+                const durationInMs = Math.round(endTime - startTime);
+
+                const { diff, side } = calcDiffPct(expectedRenderDurationInMs, durationInMs);
+                const logMsg = `Test "${testName}" took ${durationInMs}ms to render (${diff}% ${side} ${expectedRenderDurationInMs}ms expectation)`;
+
+                cy.log(`[${Math.round(endTime)}ms] ${logMsg}`);
+
+                assert(
+                    allowableDurationInMs >= durationInMs,
+                    `${logMsg}, but should take less than ${allowableDurationInMs}ms`
+                );
+            });
+    }
+);

package/cypress/support/component.ts

@@ -1,6 +1,6 @@
-import { mount } from 'cypress/react';
 import { setProjectAnnotations } from '@storybook/react';
 import { configure } from '@testing-library/cypress';
+import { mount } from 'cypress/react';
 
 import * as sbPreview from '../../.storybook/preview';
 import './commands';

package/cypress/support/index.d.ts

@@ -2,5 +2,27 @@
 declare namespace Cypress {
     interface Chainable {
         hover(selector: string): Chainable; // to support hover custom command
+
+        /**
+         * Runs the custom 'profile' task and verifies the returned value is within the allowable threshold.
+         * Threshold of .5 and expectedRenderDurationInMs === 100 would allow the render to take up to 50% more, i.e 150ms
+         * @param args - The arguments for the performance verification.
+         * @param args.testName - The name of the test to be used in the profiling
+         * @param args.threshold - The threshold percentage for the performance test (default is 0.5, meaning 50% more than expected)
+         * @param args.expectedRenderDurationInMs - The expected render duration in milliseconds (default is 100ms)
+         * @example
+         * // Verify that the render duration for 'my-test' is within the threshold
+         * cy.verifyPerformance({
+         *   testName: 'my-test',
+         *   threshold: 0.5,
+         *   expectedRenderDurationInMs: 100
+         * });
+         */
+        verifyPerformance(args: {
+            testName: string;
+            execute: () => Chainable | void;
+            threshold?: number;
+            expectedRenderDurationInMs?: number;
+        }): void;
     }
 }

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.6.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.6.0",
+    "@splunk/themes": "^1.4.1",
+    "@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/AnchorMenu/AnchorMenu.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+interface AnchorMenuPropsBase {
+    /**
+     * The `itemId` prop of the currently active item.
+     */
+    activeItemId?: string;
+    children?: React.ReactNode;
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLElement>;
+    /**
+     * Hides the side border spine. Useful when the AnchorMenu is placed inside a container with its own border.
+     */
+    hideSpine?: boolean;
+    /**
+     * Label text to display above the menu items. Set to `null` to disable the label.
+     */
+    label?: string | null;
+}
+type AnchorMenuProps = ComponentProps<AnchorMenuPropsBase, 'nav'>;
+declare function AnchorMenu({ activeItemId, children, elementRef, hideSpine, label, ...otherProps }: AnchorMenuProps): React.JSX.Element;
+declare namespace AnchorMenu {
+    var propTypes: {
+        activeItemId: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        elementRef: PropTypes.Requireable<object>;
+        hideSpine: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<string>;
+    };
+    var Item: typeof import("./Item").default;
+}
+export type { AnchorMenuProps, AnchorMenuPropsBase };
+export default AnchorMenu;

package/types/src/AnchorMenu/AnchorMenuContext.d.ts

@@ -0,0 +1,6 @@
+export interface AnchorMenuContextValue {
+    activeItemId?: string;
+    hideSpine?: boolean;
+}
+declare const AnchorMenuContext: import("react").Context<AnchorMenuContextValue>;
+export default AnchorMenuContext;