@splunk/react-ui 5.5.0 → 5.6.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 l = require("@splunk/react-ui/usePrevious");
-    var u =  e.n(l);
+    const u = require("@splunk/react-ui/usePrevious");
+    var l =  e.n(u);
     // 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 P(e) || F(e, t) || j(e, t) || S();
+        return k(e) || P(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,32 +156,32 @@
         }
         return n;
     }
-    function F(e, t) {
+    function P(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
-            var n, o, i, a, l = [], u = !0, s = !1;
+            var n, o, i, a, u = [], l = !0, s = !1;
             try {
                 if (i = (r = r.call(e)).next, 0 === t) {
                     if (Object(r) !== r) return;
-                    u = !1;
-                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
+                    l = !1;
+                } else for (;!(l = (n = i.call(r)).done) && (u.push(n.value), u.length !== t); l = !0) {
                 }
             } catch (e) {
                 s = !0, o = e;
             } finally {
                 try {
-                    if (!u && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
                 } finally {
                     if (s) throw o;
                 }
             }
-            return l;
+            return u;
         }
     }
-    function P(e) {
+    function k(e) {
         if (Array.isArray(e)) return e;
     }
-    function k(e, t) {
+    function F(e, t) {
         if (null == e) return {};
         var r, n, o = x(e, t);
         if (Object.getOwnPropertySymbols) {
@@ -294,7 +294,7 @@
         var a = {
             value: n ? 0 : o
         };
-        var l = {
+        var u = {
             precision: 1
         };
  // Only use precision when not using transform, otherwise transform animation will break
@@ -302,7 +302,7 @@
                 if (r === "expandWidth" || r === "expandHeight" || r === "none") {
             return {
                 to: i,
-                config: l
+                config: u
             };
         }
         // Slide transitions require a valid value, render without transition first.
@@ -314,14 +314,14 @@
             return {
                 to: i,
                 from: a,
-                config: l
+                config: u
             };
         }
         // 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 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)");
+                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)");
         return {
             to: N({
                 transform: s
@@ -331,7 +331,7 @@
             }, a)
         };
     };
-    var R = function e(t) {
+    var W = function e(t) {
         var r = t.animation, n = t.el, o = t.takeFocusProp;
         var i = 0;
         if (n) {
@@ -355,33 +355,33 @@
         return i;
     };
     var _ = {};
-    var W = {};
+    var R = {};
     function D(e) {
-        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" ]);
+        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 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 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 (L !== undefined && F !== L) {
+            if (L !== undefined && P !== L) {
                 X(true);
             }
-        }), [ F, L ]);
+        }), [ 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
-            B.current = true;
+            $.current = true;
             return function() {
-                B.current = false;
+                $.current = false;
             };
         }), []);
         var te = (0, r.useCallback)((function(e) {
             J(e);
-            ee(R({
+            ee(W({
                 animation: o,
                 el: e,
                 takeFocusProp: D
@@ -392,7 +392,7 @@
             w === null || w === void 0 ? void 0 : w();
         }), [ w ]);
         var ne = (0, r.useCallback)((function() {
-            if (B.current) {
+            if ($.current) {
                 X(false);
             }
             j === null || j === void 0 ? void 0 : j();
@@ -404,38 +404,37 @@
         }), [ G ]);
         var ie = (0, a.useAnimation)(N(N({}, M({
             animation: o,
-            open: F,
+            open: P,
             value: Z
         })), {}, {
             immediate: o === "none",
             onRest: ne,
             onStart: re
-        })), ae = ie.value, le = ie.transform;
-        var ue;
-        var se = [ "slideFromTop", "slideFromRight", "slideFromBottom", "slideFromLeft" ].includes(o);
+        })), 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 (se || U || E) {
-            ue = q(o);
+     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 ce = E && !F && !U ? 0 : ae;
+                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() {
-            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: le
+                transform: ue
             });
-        }), [ S, le ]);
+        }), [ S, ue ]);
         
         return n().createElement(v, {
-            $hideOverflow: !F || U || false,
-            className: (0, c.toClassName)(f, P),
-            style: fe,
+            $hideOverflow: !P || U || false,
+            className: (0, c.toClassName)(f, k),
+            style: ce,
             id: x
-        }, (F || U || E) &&  n().createElement(y, g({
+        }, (P || U || E) &&  n().createElement(y, g({
             "data-test": "transition-open"
         }, H, {
             ref: te,
@@ -443,8 +442,8 @@
             className: p,
             id: m,
             onKeyDown: I ? oe : undefined,
-            style: de
-        }), l));
+            style: fe
+        }), u));
     }
     D.propTypes = I;
     /* harmony default export */    const H = D;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -45,8 +45,8 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.5.0",
-    "@splunk/themes": "^1.4.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",

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;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+interface AnchorMenuItemPropsBase {
+    /**
+     * Content to render inside the anchor link menu item.
+     */
+    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<HTMLLIElement>;
+    /**
+     * A unique id for the item, used with the `AnchorMenu's` activeItemId prop.
+     * If not set, defaults to the `to` prop if present.
+     */
+    itemId?: string;
+    label?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    to?: string;
+}
+type AnchorMenuItemProps = ComponentProps<AnchorMenuItemPropsBase, 'li'>;
+declare function Item({ children, elementRef, itemId: itemIdProp, label, onClick, to, ...otherProps }: AnchorMenuItemProps): React.JSX.Element;
+declare namespace Item {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        elementRef: PropTypes.Requireable<object>;
+        itemId: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        to: PropTypes.Requireable<string>;
+    };
+}
+export type { AnchorMenuItemProps, AnchorMenuItemPropsBase };
+export default Item;

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './AnchorMenu';
+export * from './AnchorMenu';
+export * from './Item';

package/types/src/Menu/Item.d.ts

@@ -72,7 +72,7 @@ interface ItemPropsBase {
      * `selectableAppearance` of 'checkbox' defaults to `menuitemcheckbox`. Otherwise, the role defaults
      * to `menuitem`.
      */
-    role?: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' | 'listboxitem' | 'option';
+    role?: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' | 'listboxitem' | 'link' | 'option';
     /**
      * Enables selection for this item and reserves space for the control.
      * Required when using `selected` or `selectableAppearance`.

package/types/src/Multiselect/Compact.d.ts

@@ -74,6 +74,11 @@ interface CompactPropsBase {
     /**
      * The loading message to show when isLoadingOptions. */
     loadingMessage?: React.ReactNode;
+    /**
+     * @private
+     * Escape hatch override of the maximum number of values before the toggle label will truncate to `X items selected`
+     */
+    maxLabelItems?: number;
     /**
      * Style properties to apply to the Menu. */
     menuStyle?: React.CSSProperties;
@@ -177,6 +182,8 @@ declare namespace Compact {
         isLoadingOptions: PropTypes.Requireable<boolean>;
         labelledBy: PropTypes.Requireable<string>;
         loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** @private. */
+        maxLabelItems: PropTypes.Requireable<number>;
         menuStyle: PropTypes.Requireable<object>;
         name: PropTypes.Requireable<string>;
         noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Multiselect/Multiselect.d.ts

@@ -95,6 +95,11 @@ interface MultiselectPropsBase {
     /**
      * The loading message to show when isLoadingOptions. */
     loadingMessage?: React.ReactNode;
+    /**
+     * @private
+     * Escape hatch override of the maximum number of values before the toggle label will truncate to `X items selected`
+     */
+    maxLabelItems?: number;
     /**
      * Style properties to apply to the Menu. This is primarily used to override the width of
      * the menu should it need to be wider than the toggle Button. */
@@ -229,6 +234,8 @@ declare namespace Multiselect {
         isLoadingOptions: PropTypes.Requireable<boolean>;
         labelledBy: PropTypes.Requireable<string>;
         loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** @private. */
+        maxLabelItems: PropTypes.Requireable<number>;
         menuStyle: PropTypes.Requireable<object>;
         name: PropTypes.Requireable<string>;
         noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/SelectBase/SelectBase.d.ts

@@ -98,6 +98,11 @@ interface SelectBasePropsBase {
     /**
      * The loading message to show when isLoadingOptions. */
     loadingMessage?: React.ReactNode;
+    /**
+     * @private
+     * Escape hatch override of the maximum number of values before the toggle label will truncate to `X items selected`
+     */
+    maxLabelItems?: number;
     /**
      * Style properties to apply to the Menu. */
     menuStyle?: React.CSSProperties;
@@ -231,7 +236,7 @@ interface ControlsProps extends Pick<SelectBaseProps, 'inputId' | 'inputRef' | '
     textHasFocus: boolean;
 }
 declare const Controls: ({ activeItemId, filterA11yId, filterKeyword, hasChildren, inputId, inputRef, menuListboxId, multiple, onClearAll, onSelectAll, onTextBlur, onTextChange, onTextFocus, onTextKeyDown, optionSelection, placement, selectAllAppearance, textHasFocus, }: ControlsProps) => React.JSX.Element;
-declare function SelectBase({ allowKeyMatching, animateLoading, appearance, append, allowNewValues, children, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, labelText, loadingMessage, menuStyle, multiple, name, noOptionsMessage, onChange, onScroll, onScrollBottom, onFilterChange, onClick, onClose, onOpen, required, placeholder, prefixLabel, prepend, repositionMode, selectAllAppearance, showSelectedValuesFirst, suffixLabel, tabConfirmsNewValue, values, virtualization, toggle, toggleContent, ...otherProps }: SelectBaseProps): React.JSX.Element;
+declare function SelectBase({ allowKeyMatching, animateLoading, appearance, append, allowNewValues, children, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, labelText, loadingMessage, menuStyle, multiple, name, noOptionsMessage, onChange, onScroll, onScrollBottom, onFilterChange, onClick, onClose, onOpen, required, placeholder, prefixLabel, prepend, repositionMode, selectAllAppearance, showSelectedValuesFirst, suffixLabel, tabConfirmsNewValue, values, virtualization, toggle, toggleContent, maxLabelItems, ...otherProps }: SelectBaseProps): React.JSX.Element;
 declare namespace SelectBase {
     var propTypes: {
         allowKeyMatching: PropTypes.Requireable<boolean>;
@@ -255,6 +260,8 @@ declare namespace SelectBase {
         labelledBy: PropTypes.Requireable<string>;
         labelText: PropTypes.Requireable<string>;
         loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** @private. */
+        maxLabelItems: PropTypes.Requireable<number>;
         menuStyle: PropTypes.Requireable<object>;
         multiple: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;

package/types/src/Slider/Slider.d.ts

@@ -28,6 +28,11 @@ interface SliderPropsBase {
     error?: boolean;
     /** When false, display as inline-block with the default width. */
     inline?: boolean;
+    /**
+     * An id for the input, which may be necessary for accessibility, such as for aria
+     * attributes.
+     */
+    inputId?: string;
     /**
      * The id of the label. When placed in a ControlGroup, this is automatically set to the
      * ControlGroup's label.
@@ -80,7 +85,7 @@ interface SliderPropsBaseUncontrolled extends SliderPropsBase {
     value?: never;
 }
 type SliderProps = ComponentProps<SliderPropsBaseControlled | SliderPropsBaseUncontrolled, 'div'>;
-declare function Slider({ defaultValue, describedBy, disabled, displayValue, elementRef, error, inline, labelledBy, max, maxLabel, min, minLabel, name, onChange, required, step, stepMarks, thumbRef, value, ...otherProps }: SliderProps): React.JSX.Element;
+declare function Slider({ defaultValue, describedBy, disabled, displayValue, elementRef, error, inline, inputId, labelledBy, max, maxLabel, min, minLabel, name, onChange, required, step, stepMarks, thumbRef, value, ...otherProps }: SliderProps): React.JSX.Element;
 declare namespace Slider {
     var propTypes: {
         defaultValue: PropTypes.Requireable<number>;
@@ -90,6 +95,7 @@ declare namespace Slider {
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         inline: PropTypes.Requireable<boolean>;
+        inputId: PropTypes.Requireable<string>;
         labelledBy: PropTypes.Requireable<string>;
         max: PropTypes.Requireable<number>;
         maxLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Switch/Switch.d.ts

@@ -15,7 +15,7 @@ interface SwitchPropsBase {
     /**
      * Determines if the component renders as a checkbox or toggle.
      *
-     * @deprecatedValue 'checkbox'
+     * @deprecatedValue 'checkbox'. Consider using the `Checkbox` component instead.
      * The 'checkbox' value is deprecated and will be removed in a future major version.
      */
     appearance?: 'checkbox' | 'toggle';