@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.5

package/TransitionOpen.js

@@ -78,8 +78,8 @@
     const s = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/style"
     const c = require("@splunk/ui-utils/style");
-    // CONCATENATED MODULE: external "react-spring"
-    const f = require("react-spring");
+    // CONCATENATED MODULE: external "@react-spring/web"
+    const f = require("@react-spring/web");
     // CONCATENATED MODULE: external "styled-components"
     const d = require("styled-components");
     var m =  e.n(d);

package/Tree.js

@@ -142,9 +142,9 @@
         var p = f().ul.withConfig({
             displayName: "TreeStyles__StyledUnorderedList",
             componentId: "sc-13pokwt-0"
-        })([ "", ";font-family:inherit;list-style:none;white-space:inherit;", ";" ], d.mixins.reset("ul"), (function(e) {
+        })([ "", ";color:inherit;font-family:inherit;list-style:none;white-space:inherit;", ";" ], d.mixins.reset("ul"), (function(e) {
             var r = e.$defaultIndent;
-            return r && (0, c.css)([ "padding-left:", ";" ], d.variables.spacingXXXLarge);
+            return r && (0, c.css)([ "padding-inline-start:", ";" ], d.variables.spacingXXXLarge);
         }));
         // CONCATENATED MODULE: ./src/Tree/TreeItem.tsx
         function y() {

package/Typography.js

@@ -68,8 +68,8 @@
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const a = require("prop-types");
-    var o =  e.n(a);
+    const o = require("prop-types");
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
     const i = require("styled-components");
     var l =  e.n(i);
@@ -90,14 +90,14 @@
     }
     function c(e, r) {
         if (null == e) return {};
-        var t, n, a = f(e, r);
+        var t, n, o = f(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
-        return a;
+        return o;
     }
     function f(e, r) {
         if (null == e) return {};
@@ -111,15 +111,16 @@
         return t;
     }
     var y = {
-        children: o().node.isRequired,
-        as: o().string.isRequired,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        family: o().oneOf([ "sansSerif", "monospace", "title" ]),
-        variant: o().oneOf(s.typographyVariants),
-        size: o().oneOf([ 24, 20, 18, 16, 14, 12 ]),
-        lineHeight: o().oneOf([ "single", "tight", "snug", "comfortable", "relaxed", "spacious", "normal" ]),
-        color: o().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
-        weight: o().oneOf([ "light", "normal", "semiBold", "bold", "extraBold", "heavy" ])
+        as: a().string.isRequired,
+        children: a().node.isRequired,
+        color: a().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        family: a().oneOf([ "sansSerif", "monospace", "title" ]),
+        lineHeight: a().oneOf([ "single", "tight", "snug", "comfortable", "relaxed", "spacious", "normal" ]),
+        size: a().oneOf([ 24, 20, 18, 16, 14, 12 ]),
+        variant: a().oneOf(s.typographyVariants),
+        weight: a().oneOf([ "light", "normal", "semiBold", "bold", "extraBold", "heavy" ]),
+        withReset: a().bool
     };
     var d = l().p.withConfig({
         displayName: "Typography__StyledTypography",
@@ -131,25 +132,26 @@
     /**
  * Typography renders text content with styling based on the Splunk Design System.
  */    function g(e) {
-        var r = e.children, a = e.as, o = e.elementRef, i = e.variant, l = e.family, s = e.size, u = e.lineHeight, f = e.color, y = e.weight, g = c(e, [ "children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight" ]);
+        var r = e.as, o = e.children, a = e.color, i = e.elementRef, l = e.family, s = e.lineHeight, u = e.size, f = e.variant, y = e.weight, g = e.withReset, h = g === void 0 ? true : g, v = c(e, [ "as", "children", "color", "elementRef", "family", "lineHeight", "size", "variant", "weight", "withReset" ]);
         // @docs-props-type TypographyPropsBase
-                var h = (0, t.useMemo)((function() {
+                var m = (0, t.useMemo)((function() {
             return {
+                color: a,
                 family: l,
-                size: s,
-                lineHeight: u,
-                color: f,
-                weight: y
+                lineHeight: s,
+                size: u,
+                weight: y,
+                withReset: h
             };
-        }), [ f, l, u, s, y ]);
+        }), [ a, l, s, u, y, h ]);
         
         return n().createElement(d, p({
-            as: a,
-            ref: o,
+            as: r,
             "data-test": "typography",
-            $variant: i,
-            $typographyParams: h
-        }, g), r);
+            ref: i,
+            $typographyParams: m,
+            $variant: f
+        }, v), o);
     }
     g.propTypes = y;
     /* harmony default export */    const h = g;

package/WaitSpinner.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ x
+        default: () => /* reexport */ z
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -109,12 +109,7 @@
     var b = c().circle.withConfig({
         displayName: "WaitSpinnerStyles__StyledFillPath",
         componentId: "sc-1nu971z-3"
-    })([ "fill:transparent;stroke-width:2;stroke:", ";stroke-dasharray:7 113;stroke-dashoffset:3;", "" ], (0, 
-    f.pickVariant)("$size", {
-        small: f.variables.contentColorDefault,
-        medium: f.variables.contentColorDefault,
-        large: f.variables.contentColorAccent
-    }), (function(e) {
+    })([ "fill:transparent;stroke-width:2;stroke:", ";stroke-dasharray:7 113;stroke-dashoffset:3;", "" ], f.variables.contentColorAccent, (function(e) {
         var t = e.$animated;
         return t && (0, l.css)([ "animation:", " ", " infinite;" ], h, p);
     }));
@@ -152,12 +147,12 @@
         }
         return r;
     }
-    var z = {
+    var O = {
         elementRef: i().oneOfType([ i().func, i().object ]),
         screenReaderText: i().oneOfType([ i().string, i().oneOf([ "null" ]) ]),
         size: i().oneOf([ "small", "medium", "large" ])
     };
-    function O(e) {
+    function x(e) {
         var t = e.elementRef, r = e.screenReaderText, a = r === void 0 ? (0, o._)("Waiting") : r, i = e.size, l = i === void 0 ? "small" : i, c = w(e, [ "elementRef", "screenReaderText", "size" ]);
         // @docs-props-type WaitSpinnerPropsBase
                 var f = (0, s.useAnimationToggle)() === "on";
@@ -185,8 +180,8 @@
             $size: l
         }))));
     }
-    O.propTypes = z;
-    /* harmony default export */    const x = O;
+    x.propTypes = O;
+    /* harmony default export */    const z = x;
     // CONCATENATED MODULE: ./src/WaitSpinner/index.ts
     module.exports = t;
     /******/})();

package/cypress/support/commands.ts

@@ -3,9 +3,19 @@ import 'cypress-real-events';
 
 // https://docs.cypress.io/api/commands/hover
 Cypress.Commands.add('hover', (selector: string) => {
-    if (Cypress.browser.name !== 'firefox') {
-        cy.get(selector).realHover();
-    } else {
-        cy.get(selector).trigger('mouseover', { force: true });
+    if (!selector) {
+        throw new Error('You must provide a valid selector to hover over.');
     }
+
+    return cy.get(selector).then(($el) => {
+        if ($el.length === 0) {
+            throw new Error(`No elements found for selector: ${selector}`);
+        }
+
+        if (Cypress.browser.name !== 'firefox') {
+            return cy.wrap($el).realHover();
+        }
+
+        return cy.wrap($el).trigger('mouseover', { force: true });
+    });
 });

package/cypress/support/index.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 declare namespace Cypress {
     interface Chainable {
-        hover(selector: string): void; // to support hover custom command
+        hover(selector: string): Chainable; // to support hover custom command
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.5",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,16 +44,15 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "5.0.0-beta.3",
-    "@splunk/themes": "1.0.0-beta.3",
+    "@react-spring/web": "^9.7.5",
+    "@splunk/react-icons": "5.0.0-beta.5",
+    "@splunk/themes": "1.0.0-beta.5",
     "@splunk/ui-utils": "^1.8.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
     "react-markdown": "^8.0.7",
-    "react-resize-detector": "^3.2.1",
-    "react-spring": "9.2.4",
     "remark-gfm": "^1.0.0",
     "tinycolor2": "^1.4.1",
     "use-typed-event-listener": "^3.0.0"
@@ -62,9 +61,9 @@
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "1.0.0-beta.14.v5.2",
+    "@splunk/docs-gen": "1.0.0-beta.14.v5.3",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "1.0.0-beta.21.v5.2",
+    "@splunk/react-docs": "1.0.0-beta.22.v5",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -86,14 +85,13 @@
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/react-resize-detector": "^3.1.1",
     "@types/sinon": "^4.3.3",
     "@types/styled-components": "^5.1.0",
     "@types/tinycolor2": "^1.4.2",
     "@types/webdriverio": "^5.0.0",
     "@types/webpack-env": "^1.15.2",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
     "axe-html-reporter": "^2.2.3",
     "axe-playwright": "^1.1.11",
     "babel-loader": "^8.3.0",
@@ -139,7 +137,7 @@
     "storybook": "^7.6.17",
     "styled-components": "^5.3.10",
     "stylelint": "^15.11.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.8.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

package/stubs-splunkui.d.ts

@@ -90,10 +90,6 @@ declare module '@splunk/ui-utils/style' {
     function toClassName(...args: ClassNameArg[]): string;
 }
 
-declare module '@splunk/ui-utils/userAgent' {
-    function isIE11(): boolean;
-}
-
 declare module '@splunk/react-docs/DocExample' {
     function getDependencyVersions(
         packageJSON: Record<string, unknown>,

package/types/src/Accordion/Accordion.d.ts

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Panel from './Panel';
-import { ClassComponentProps } from '../utils/types';
+import { ComponentProps } from '../utils/types';
 /** @public */
 type AccordionChangeHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
     event: React.MouseEvent<HTMLButtonElement>;
@@ -47,30 +48,22 @@ interface AccordionUncontrolledProps extends AccordionPropsBase {
     defaultOpenPanelId?: string | number;
     openPanelId?: never;
 }
-declare const defaultProps: {
-    inset: boolean;
-};
-type AccordionProps = ClassComponentProps<AccordionControlledProps | AccordionUncontrolledProps, typeof defaultProps, 'div'>;
-interface AccordionState {
-    openPanelId?: string | number;
-}
+type AccordionProps = ComponentProps<AccordionControlledProps | AccordionUncontrolledProps, 'div'>;
 /**
  * @deprecated
  * Accordion has been deprecated and will be removed in a future major version. Use Collapsible Panel's SingleOpenPanelGroup API instead.
  */
-declare class Accordion extends Component<AccordionProps, AccordionState> {
-    private controlledExternally;
-    static propTypes: React.WeakValidationMap<AccordionProps>;
-    static defaultProps: {
-        inset: boolean;
+declare function Accordion({ children, defaultOpenPanelId, elementRef, inset, onChange, openPanelId: openPanelIdProp, ...otherProps }: AccordionProps): React.JSX.Element;
+declare namespace Accordion {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        defaultOpenPanelId: PropTypes.Requireable<any>;
+        elementRef: PropTypes.Requireable<object>;
+        inset: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        openPanelId: PropTypes.Requireable<any>;
     };
-    static Panel: typeof Panel;
-    constructor(props: Readonly<AccordionProps>);
-    componentDidUpdate(prevProps: Readonly<AccordionProps>): void;
-    private getCurrentOpenPanel;
-    private handleChange;
-    private isControlled;
-    render(): React.JSX.Element;
+    var Panel: typeof import("./Panel").default;
 }
 export default Accordion;
 export { AccordionChangeHandler, Panel };

package/types/src/Accordion/AccordionContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollapsiblePanelChangeHandler } from '@splunk/react-ui/CollapsiblePanel';
 export interface AccordionContext {
     onChange?: CollapsiblePanelChangeHandler;

package/types/src/Animation/Animation.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps, UseSpringProps as RSUseSpringProps, UseTransitionProps as RSUseTransitionProps } from 'react-spring';
+import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps, UseSpringProps as RSUseSpringProps, UseTransitionProps as RSUseTransitionProps } from '@react-spring/web';
 declare function useAnimation({ immediate, ...otherProps }: RSUseSpringProps): {
     [x: string]: any;
     [x: number]: any;
 };
-declare function useAnimationTransition(items: any, { immediate, ...otherProps }: RSUseTransitionProps): import("react-spring").TransitionFn<any, {
+declare function useAnimationTransition(items: any, { immediate, ...otherProps }: RSUseTransitionProps): import("@react-spring/core").TransitionFn<any, {
     [x: string]: any;
     [x: number]: any;
     [Symbol.hasInstance]: (value: any) => boolean;

package/types/src/AnimationToggle/docs/examples/Provider.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-declare class Provider extends Component<{}, {
+declare class Provider extends Component<object, {
     animatedTransitions: boolean;
     open: boolean;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleButtonClick: () => void;
     handleSwitchClick: () => void;
     render(): React.JSX.Element;

package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-declare class ToggleComponent extends Component<{}, {
+declare class ToggleComponent extends Component<object, {
     animatedTransitions: boolean;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleSwitchClick: () => void;
     render(): React.JSX.Element;
 }

package/types/src/AnimationToggle/useAnimationToggle.d.ts

@@ -6,5 +6,5 @@
  * and the user prefers reduced motion, `'reduced'` is returned, `'on'` otherwise.
  * @public
  */
-declare const useAnimationToggle: () => 'on' | 'off' | 'reduced';
+declare const useAnimationToggle: () => "on" | "off" | "reduced";
 export { useAnimationToggle };

package/types/src/Button/Button.d.ts

@@ -12,7 +12,7 @@ interface ButtonPropsBase {
     action?: string;
     /** Changes the style of the button.
      */
-    appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'destructiveSecondary' | 'subtle';
+    appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'destructiveSecondary' | 'standalone' | 'subtle';
     /** Removes the right border and border-radius of the button so you can
      * append other elements to it. */
     append?: boolean;

package/types/src/ButtonGroup/ButtonGroupContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ButtonGroupContext {
     inline?: boolean;
     role?: string;

package/types/src/ButtonSimple/ButtonSimple.d.ts

@@ -2,14 +2,12 @@ import React from 'react';
 import { ButtonVariant } from './ButtonSimpleStyles';
 import buttonMixin from './mixin';
 import { ComponentProps } from '../utils/types';
-declare const appearances: readonly ["default", "secondary", "primary", "destructive", "destructiveSecondary", "subtle"];
-type Appearance = typeof appearances[number];
 interface ButtonSimplePropsBase {
     /** Returns a value on click. Use when composing or testing. */
     action?: string;
     /** Changes the style of the button.
      */
-    appearance?: Appearance;
+    appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'destructiveSecondary' | 'subtle' | 'standalone';
     /** Removes the right border and border-radius of the button so you can
      * append things to it. */
     append?: boolean;

package/types/src/ButtonSimple/mixin.d.ts

@@ -1,5 +1,5 @@
 import { AnyTheme, Interpolation, InterpolationResult, ThemedProps } from '@splunk/themes';
-declare const buttonVariants: readonly ["primary", "secondary", "destructive", "destructiveSecondary", "subtle"];
+declare const buttonVariants: readonly ["primary", "secondary", "destructive", "destructiveSecondary", "subtle", "standalone"];
 type ButtonVariant = typeof buttonVariants[number];
 type ButtonStyleProps = ThemedProps & Partial<{
     $append: boolean;

package/types/src/Calendar/Calendar.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DateTableChangeHandler } from './DateTable';
+import { DateGridChangeHandler } from './DateGrid';
 import { ComponentProps } from '../utils/types';
-type CalendarChangeHandler = DateTableChangeHandler;
+type CalendarChangeHandler = DateGridChangeHandler;
 declare const calendarActiveSelector = "[data-active-day=\"true\"]";
 interface CalendarPropsBase {
     /**

package/types/src/Calendar/{DateTable.d.ts → DateGrid.d.ts}

@@ -1,22 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
-type DateTableChangeHandler = (event: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>, data: {
+type DateGridChangeHandler = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
     value: string;
 }) => void;
-interface DateTablePropsBase {
+interface DateGridPropsBase {
     displayValue: string;
     highlightToday?: boolean;
     labelledBy?: string;
     locale?: string;
-    onChange?: DateTableChangeHandler;
-    onInternalChange?: DateTableChangeHandler;
+    onChange?: DateGridChangeHandler;
+    onInternalChange?: DateGridChangeHandler;
     selectedValue: string;
     todayValue?: string;
 }
-type DateTableProps = ComponentProps<DateTablePropsBase, 'table'>;
-declare function DateTable({ displayValue, highlightToday, labelledBy, locale, onChange, onInternalChange, selectedValue, todayValue, ...otherProps }: DateTableProps): React.JSX.Element;
-declare namespace DateTable {
+type DateGridProps = ComponentProps<DateGridPropsBase, 'div'>;
+declare function DateGrid({ displayValue, highlightToday, labelledBy, locale, onChange, onInternalChange, selectedValue, todayValue, ...otherProps }: DateGridProps): React.JSX.Element;
+declare namespace DateGrid {
     var propTypes: {
         displayValue: PropTypes.Validator<string>;
         highlightToday: PropTypes.Requireable<boolean>;
@@ -28,5 +28,5 @@ declare namespace DateTable {
         todayValue: PropTypes.Requireable<string>;
     };
 }
-export default DateTable;
-export { DateTableChangeHandler };
+export default DateGrid;
+export { DateGridChangeHandler };

package/types/src/Calendar/Day.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
-type DayClickHandler = (event: React.MouseEvent<HTMLTableCellElement>, data: {
+type DayClickHandler = (event: React.MouseEvent<HTMLDivElement>, data: {
     value: string;
 }) => void;
-type DayKeyDownHandler = (event: React.KeyboardEvent<HTMLTableCellElement>, data: {
+type DayKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>, data: {
     value: string;
 }) => void;
 interface DayPropsBase {
     /** Whether or not this day has the active cursor. */
     active?: boolean;
+    /** @private */
+    dayOfWeek?: number;
     /** Locale set by language and localization specifiers. */
     locale?: string;
     /** Callback for click */
@@ -23,11 +25,13 @@ interface DayPropsBase {
     /** Day number to be displayed */
     value: string;
 }
-type DayProps = ComponentProps<DayPropsBase, 'td'>;
-declare function Day({ active, locale, onClick, onKeyDown, selected, today, value, ...otherProps }: DayProps): React.JSX.Element;
+type DayProps = ComponentProps<DayPropsBase, 'div'>;
+declare function Day({ active, dayOfWeek, locale, onClick, onKeyDown, selected, today, value, ...otherProps }: DayProps): React.JSX.Element;
 declare namespace Day {
     var propTypes: {
         active: PropTypes.Requireable<boolean>;
+        /** @private. */
+        dayOfWeek: PropTypes.Requireable<number>;
         locale: PropTypes.Requireable<string>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onKeydown: PropTypes.Requireable<(...args: any[]) => any>;

package/types/src/Card/Card.d.ts

@@ -46,7 +46,7 @@ interface CardPropsBase {
     to?: string;
     /** Returns a value on click. Use when composing or if you have more than one selectable `Card`. */
     value?: any;
-    /** Overrides the HTML tag for the Card component. Defaults to `article`. */
+    /** Overrides the HTML tag for the Card component. Defaults to `article`. Ignored if `to` or `onClick` are present. */
     tag?: 'article' | 'div' | 'aside' | 'section';
 }
 interface CardPropsBaseNonClickable extends CardPropsBase {
@@ -60,12 +60,14 @@ interface CardPropsBaseOnClickClickable extends CardPropsBase {
     onClick: CardClickHandler;
     selected?: boolean;
     to?: string;
+    tag?: never;
 }
 interface CardPropsBaseClickable extends CardPropsBase {
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     onClick?: CardClickHandler;
     selected?: never;
     to?: string;
+    tag?: never;
 }
 type CardNonClickableProps = ComponentProps<CardPropsBaseNonClickable, 'div' | 'article'>;
 type CardClickableButtonProps = ComponentProps<CardPropsBaseOnClickClickable | CardPropsBaseClickable, 'button'>;

package/types/src/Card/Header.d.ts

@@ -20,6 +20,8 @@ interface HeaderPropsBase {
      */
     actionsSecondary?: React.ReactNode;
     /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
+     *
      * Make the title an anchor so it can be bookmarked with a fragment.
      */
     anchor?: string;

package/types/src/Card/docs/examples/HeadingTitle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function HeadingTitle(): React.JSX.Element;
+export default HeadingTitle;

package/types/src/CardLayout/CardLayoutContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CardLayoutContext {
     minWidth?: number | string;
     maxWidth?: number | string;

package/types/src/CardLayout/docs/examples/Interactive.d.ts

@@ -11,8 +11,8 @@ interface InteractiveState {
     setAsWidth: boolean;
     hasMaxWidth: boolean;
 }
-declare class Interactive extends Component<{}, InteractiveState> {
-    constructor(props: {});
+declare class Interactive extends Component<object, InteractiveState> {
+    constructor(props: object);
     handleChangeAmount: NumberChangeHandler;
     handleChangeMinWidth: NumberChangeHandler;
     handleChangeMaxWidth: NumberChangeHandler;

package/types/src/Clickable/Clickable.d.ts

@@ -37,13 +37,21 @@ interface ClickablePropsBase {
      */
     navigationLabel?: string;
     /**
-     * A URL for a link. If set and not disabled, an `a` element is used instead
+     * @private
+     */
+    tag?: 'a' | 'button';
+    /**
+     * A URL for a link. If set, an `a` element is used instead
      * of a `button` element (link mode).
      */
     to?: string;
 }
-type ClickableButtonProps = ComponentProps<ClickablePropsBase, 'button'>;
-type ClickableLinkProps = ComponentProps<ClickablePropsBase, 'a', 'href'>;
+type ClickableButtonProps = ComponentProps<ClickablePropsBase & {
+    to?: never;
+}, 'button'>;
+type ClickableLinkProps = ComponentProps<ClickablePropsBase & {
+    to: string;
+}, 'a', 'href'>;
 type ClickableProps = ClickableButtonProps | ClickableLinkProps;
 /**
  * `Clickable` renders as a `button` element, or as an `a` element if the `to` prop is set
@@ -51,4 +59,4 @@ type ClickableProps = ClickableButtonProps | ClickableLinkProps;
  */
 declare const Clickable: React.ForwardRefExoticComponent<ClickableProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Clickable;
-export { ClickableProps };
+export { ClickableButtonProps, ClickableLinkProps, ClickableProps, ClickablePropsBase };

package/types/src/CollapsiblePanel/SingleOpenPanelGroupContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollapsiblePanelChangeHandler } from '@splunk/react-ui/CollapsiblePanel';
 export interface SingleOpenPanelGroupContext {
     onChange?: CollapsiblePanelChangeHandler;

package/types/src/ComboBox/ComboBox.d.ts

@@ -137,8 +137,8 @@ type ComboBoxProps = ComponentProps<ComboBoxPropsBaseControlled | ComboBoxPropsB
  */
 declare function ComboBox({ animateLoading, append, children, controlledFilter, defaultPlacement, defaultValue, describedBy, disabled, elementRef, error, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onBlur, onChange, onClose, onFocus, onKeyDown, onOpen, onScroll, onScrollBottom, onSelect, placeholder, prepend, value: valueProp, virtualization, ...otherProps }: ComboBoxProps): React.JSX.Element;
 declare namespace ComboBox {
-    var Divider: typeof import("../Menu/Divider").default;
-    var Heading: typeof import("../Menu/Heading").default;
+    var Divider: typeof import("@splunk/react-ui/Menu").Divider;
+    var Heading: typeof import("@splunk/react-ui/Menu").Heading;
     var Option: typeof import("./Option").default;
     var propTypes: {
         animateLoading: PropTypes.Requireable<boolean>;
@@ -178,4 +178,4 @@ declare namespace ComboBox {
     };
 }
 export default ComboBox;
-export { ComboBoxBlurHandler, ComboBoxChangeHandler, ComboBoxFocusHandler, ComboBoxProps, Option, Divider, Heading, };
+export { ComboBoxBlurHandler, ComboBoxChangeHandler, ComboBoxFocusHandler, ComboBoxProps, ComboBoxScrollBottomHandler, Option, Divider, Heading, };