@splunk/react-ui 5.0.0-beta.4 → 5.0.0-rc.1

package/types/src/Multiselect/docs/examples/TabInput.d.ts

@@ -1,10 +1,3 @@
-import React, { Component } from 'react';
-import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
-declare class TabInput extends Component<object, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: object);
-    handleChange: MultiselectChangeHandler;
-    render(): React.JSX.Element;
-}
+import React from 'react';
+declare function TabInput(): React.JSX.Element;
 export default TabInput;

package/types/src/Popover/Popover.d.ts

@@ -66,8 +66,10 @@ interface PopoverPropsBase {
      */
     animationConfig?: SpringConfig;
     /**
-     * `'normal'` is the default appearance. `'inverted'` is used in Enterprise themes for Tooltips.
-     * `'none'` is a transparent box.
+     * `'normal'` is the default appearance.`'none'` is a transparent box.
+     *
+     * @deprecatedValue 'inverted'
+     * The 'inverted' value is deprecated and will be removed in a future major version.
      */
     appearance?: 'normal' | 'inverted' | 'none';
     /**

package/types/src/ResultsMenu/ResultsMenu.d.ts

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { ClassComponentProps } from '../utils/types';
+import { ComponentProps } from '../utils/types';
 type ResultsMenuScrollBottomHandler = (event: React.UIEvent<HTMLDivElement> | null) => void;
 interface ResultsMenuPropsBase {
     /**
@@ -29,6 +29,7 @@ interface ResultsMenuPropsBase {
      * - `roving`: Does not retain focus inside the menu. One tab stop. Uses up/down arrow keys to navigate and loop inside the menu.
      */
     focusMode?: 'roving' | 'normal' | 'never';
+    footerMessage?: React.ReactNode;
     /**
      * Whether or not to show the loading message and/or wait spinner. It's not recommended to
      * pass old children when loading new children. The loading animation will show below any
@@ -36,6 +37,7 @@ interface ResultsMenuPropsBase {
      */
     isLoading?: boolean;
     loadingMessage?: React.ReactNode;
+    menuId?: string;
     noOptionsMessage?: React.ReactNode;
     onScroll?: React.UIEventHandler<Element>;
     /**
@@ -47,8 +49,6 @@ interface ResultsMenuPropsBase {
      */
     onScrollBottom?: ResultsMenuScrollBottomHandler;
     placement?: string;
-    footerMessage?: React.ReactNode;
-    menuId?: string;
 }
 declare const propTypes: {
     animateLoading: PropTypes.Requireable<boolean>;
@@ -59,41 +59,30 @@ declare const propTypes: {
     footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     isLoading: PropTypes.Requireable<boolean>;
     loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    menuId: PropTypes.Requireable<string>;
     noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     onScroll: PropTypes.Requireable<(...args: any[]) => any>;
     onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
     placement: PropTypes.Requireable<string>;
-    menuId: PropTypes.Requireable<string>;
 };
-declare const defaultProps: Required<Pick<ResultsMenuPropsBase, 'animateLoading' | 'isLoading' | 'loadingMessage' | 'noOptionsMessage'>>;
-type ResultsMenuProps = ClassComponentProps<ResultsMenuPropsBase, typeof defaultProps, 'div'>;
-interface ResultsMenuState {
-    childrenCount?: number;
-    containerEl: HTMLDivElement | null;
-    menuEl: HTMLDivElement | null;
-    numberOfItemsLoaded: number;
-    windowTop: number;
-    scrollBottomTriggered: boolean;
-}
-declare class ResultsMenu extends Component<ResultsMenuProps, ResultsMenuState> {
-    private scrollBottomOffset;
-    private itemMinHeight;
-    static propTypes: React.WeakValidationMap<ResultsMenuProps>;
-    static defaultProps: Required<Pick<ResultsMenuPropsBase, "animateLoading" | "isLoading" | "loadingMessage" | "noOptionsMessage">>;
-    constructor(props: Readonly<ResultsMenuProps>);
-    componentDidUpdate(): void;
-    private handleMenuMount;
-    private handleMount;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleScroll;
-    private handleWheelMenu;
-    private handleScrollBottomOnFullMenu;
-    private handleScrollBottom;
-    private checkFullHeight;
-    private renderFooterMessage;
-    private createMenuContextValue;
-    render(): React.JSX.Element;
+type ResultsMenuProps = ComponentProps<ResultsMenuPropsBase, 'div'>;
+declare function ResultsMenu({ animateLoading, 'aria-multiselectable': ariaMultiselectable, children, childrenStart, elementRef, focusMode, footerMessage, isLoading, loadingMessage, menuId, noOptionsMessage, onScroll, onScrollBottom, placement, style, tabIndex, ...otherProps }: ResultsMenuProps): React.JSX.Element;
+declare namespace ResultsMenu {
+    var propTypes: {
+        animateLoading: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        childrenStart: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        elementRef: PropTypes.Requireable<object>;
+        focusMode: PropTypes.Requireable<string>;
+        footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        isLoading: PropTypes.Requireable<boolean>;
+        loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        menuId: PropTypes.Requireable<string>;
+        noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
+        placement: PropTypes.Requireable<string>;
+    };
 }
 export default ResultsMenu;
 export { propTypes };

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

@@ -218,8 +218,8 @@ interface ControlsProps extends Pick<SelectBaseProps, 'inputId' | 'inputRef' | '
     filterKeyword: string;
     hasChildren: boolean;
     menuListboxId: string;
-    onClearAll: React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>;
-    onSelectAll: React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>;
+    onClearAll: React.MouseEventHandler<HTMLButtonElement>;
+    onSelectAll: React.MouseEventHandler<HTMLButtonElement>;
     onTextBlur: TextBlurHandler;
     onTextChange: TextChangeHandler;
     onTextFocus: TextFocusHandler;

package/types/src/TabBar/TabBar.d.ts

@@ -21,17 +21,20 @@ interface TabBarPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDivElement>;
-    /** Position of icon in `TabBar.Tab` if it has an icon. Defaults to "left". */
+    /**
+     * Position of icon in `TabBar.Tab` if it has an icon. Defaults to "left".
+     * @deprecated This prop is deprecated and will be removed in the next major version.
+     */
     iconPosition?: 'above' | 'left';
     /** The layout of tabs. */
     layout?: 'horizontal' | 'vertical';
+    /** Max width of each `TabBar.Tab` in pixels. Leave blank for auto max width. */
+    maxTabWidth?: number;
     /** A callback that receives the event and data (`selectedTabId`). */
     onChange?: TabBarChangeHandler;
-    /** Width of each `TabBar.Tab` in pixels. Must be greater than 50 pixels. Leave blank for auto width. */
-    tabWidth?: number;
 }
 type TabBarProps = ComponentProps<TabBarPropsBase, 'div'>;
-declare function TabBar({ activeTabId, autoActivate, children, disabled, elementRef, iconPosition, layout, onChange, tabWidth, ...otherProps }: TabBarProps): React.JSX.Element;
+declare function TabBar({ activeTabId, autoActivate, children, disabled, elementRef, iconPosition, layout, maxTabWidth, onChange, ...otherProps }: TabBarProps): React.JSX.Element;
 declare namespace TabBar {
     var propTypes: {
         autoActivate: PropTypes.Requireable<boolean>;
@@ -42,8 +45,8 @@ declare namespace TabBar {
         elementRef: PropTypes.Requireable<object>;
         iconPosition: PropTypes.Requireable<string>;
         layout: PropTypes.Requireable<string>;
+        maxTabWidth: PropTypes.Requireable<number>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        tabWidth: PropTypes.Requireable<number>;
     };
     var Tab: {
         ({ ariaControls, count, disabled, elementRef, icon, label, maxCount, tabId: tabIdProp, to, tooltip, menu, index, ...otherProps }: import("./Tab").TabPropsBase & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "css" | keyof import("./Tab").TabPropsBase>): React.JSX.Element;

package/types/src/TabBar/TabBarContext.d.ts

@@ -6,9 +6,9 @@ export interface TabBarContext {
     focusedTabId?: string;
     iconPosition?: 'above' | 'left';
     layout?: 'horizontal' | 'vertical';
+    maxTabWidth?: number | null;
     onClick?: TabClickHandler;
     onFocus?: TabFocusHandler;
-    width?: number | null;
     onMenuOpen: (menusTabId: string) => void;
     onMenuClose: DropdownRequestCloseHandler;
     isMenuOpen: boolean;

package/types/src/TabLayout/TabLayout.d.ts

@@ -23,14 +23,17 @@ interface TabLayoutPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDivElement>;
-    /** Position of icon in `TabBar.Tab` if it has an icon. Defaults to "left". */
+    /**
+     * Position of icon in `TabBar.Tab` if it has an icon. Defaults to "left".
+     * @deprecated This prop is deprecated and will be removed in the next major version.
+     */
     iconPosition?: 'above' | 'left';
     /**
      * The layout direction for tabs.
      */
     layout?: 'horizontal' | 'vertical';
-    /** Width of each tab in pixels. Must be greater than 50 pixels. Leave blank for auto width. */
-    tabWidth?: number;
+    /** Max width of each `TabBar.Tab` in pixels. Leave blank for auto max width. */
+    maxTabWidth?: number;
     /**
      * A callback that receives the event and data (`selectedPanelId`). If activePanelId is set,
      * this callback is required.
@@ -55,7 +58,7 @@ type TabLayoutProps = ComponentProps<TabLayoutPropsBaseControlled | TabLayoutPro
  * The `TabLayout` is a group of managed `Panels`. Only one panel can be open at a time.
  * `TabLayout` supports both the controlled and uncontrolled patterns.
  */
-declare function TabLayout({ autoActivate, activePanelId: activePanelIdProp, children, defaultActivePanelId, elementRef, iconPosition, layout, onChange, tabWidth, ...otherProps }: TabLayoutProps): React.JSX.Element;
+declare function TabLayout({ autoActivate, activePanelId: activePanelIdProp, children, defaultActivePanelId, elementRef, iconPosition, layout, maxTabWidth, onChange, ...otherProps }: TabLayoutProps): React.JSX.Element;
 declare namespace TabLayout {
     var Panel: typeof import("./Panel").default;
     var propTypes: {
@@ -66,8 +69,8 @@ declare namespace TabLayout {
         elementRef: PropTypes.Requireable<object>;
         iconPosition: PropTypes.Requireable<string>;
         layout: PropTypes.Requireable<string>;
+        maxTabWidth: PropTypes.Requireable<number>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        tabWidth: PropTypes.Requireable<number>;
     };
 }
 export default TabLayout;

package/types/src/Typography/Typography.d.ts

@@ -4,14 +4,6 @@ import { TypographyVariant, TypographyParams } from '@splunk/themes/mixins';
 import { ComponentProps } from '../utils/types';
 type TypographyElementTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'blockquote' | 'dd' | 'dl' | 'dt' | 'figcaption' | 'figure' | 'li' | 'ol' | 'ul' | 'pre' | 'abbr' | 'cite' | 'code' | 'data' | 'dfn' | 'em' | 'u' | 'time' | 'sup' | 'sub' | 'strong' | 'small' | 'samp' | 's' | 'var' | 'ruby' | 'rt' | 'rp';
 interface TypographyPropsBase extends TypographyParams {
-    /**
-     * Text and inline icons
-     * */
-    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>;
     /**
      * Tag for the element to render children content into.
      * Use the most semantically appropriate tag.
@@ -19,26 +11,34 @@ interface TypographyPropsBase extends TypographyParams {
      */
     as: TypographyElementTypes;
     /**
-     * A variant from the Splunk Design System's Type: 'body', 'title1', 'title2', 'title3',
-     * 'title4', 'title5', 'title6', 'largeBody', 'smallBody', 'monoBody', or 'monoSmallBody'.
+     * Text and inline icons
+     * */
+    children: React.ReactNode;
+    /**
+     * Set the color to a system-standard color: e.g. `active` for `@splunk/themes/variables.contentColorActive`.
      */
-    variant?: TypographyVariant;
+    color?: 'active' | 'default' | 'disabled' | 'inverted' | 'muted' | 'inherit';
     /**
-     * Set the font-family to sans-serif or monospace based on current theme.
+     * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
-    family?: 'sansSerif' | 'monospace' | 'title';
+    elementRef?: React.Ref<HTMLElement>;
     /**
-     * Set the size to a system-standard size.
+     * Set the font-family to sans-serif or monospace based on current theme.
      */
-    size?: 24 | 20 | 18 | 16 | 14 | 12;
+    family?: 'sansSerif' | 'monospace' | 'title';
     /**
      * Set the line-height to a system-standard size.
      */
     lineHeight?: 'single' | 'tight' | 'snug' | 'comfortable' | 'relaxed' | 'spacious' | 'normal';
     /**
-     * Set the color to a system-standard color: e.g. `active` for `@splunk/themes/variables.contentColorActive`.
+     * Set the size to a system-standard size.
      */
-    color?: 'active' | 'default' | 'disabled' | 'inverted' | 'muted' | 'inherit';
+    size?: 24 | 20 | 18 | 16 | 14 | 12;
+    /**
+     * A variant from the Splunk Design System's Type: 'body', 'title1', 'title2', 'title3',
+     * 'title4', 'title5', 'title6', 'largeBody', 'smallBody', 'monoBody', or 'monoSmallBody'.
+     */
+    variant?: TypographyVariant;
     /**
      * Set the font-weight to a system-standard value.
      *
@@ -46,23 +46,28 @@ interface TypographyPropsBase extends TypographyParams {
      * See: [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
      */
     weight?: 'light' | 'normal' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
+    /**
+     * Remove all browser-default styles and apply theme-specific defaults.
+     */
+    withReset?: boolean;
 }
 type TypographyProps = ComponentProps<TypographyPropsBase, TypographyElementTypes>;
 /**
  * Typography renders text content with styling based on the Splunk Design System.
  */
-export declare function Typography({ children, as, elementRef, variant, family, size, lineHeight, color, weight, ...otherProps }: TypographyProps): React.JSX.Element;
+export declare function Typography({ as, children, color, elementRef, family, lineHeight, size, variant, weight, withReset, ...otherProps }: TypographyProps): React.JSX.Element;
 export declare namespace Typography {
     var propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         as: PropTypes.Validator<string>;
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        color: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
         family: PropTypes.Requireable<string>;
-        variant: PropTypes.Requireable<"body" | "title1" | "title2" | "title3" | "title4" | "title5" | "title6" | "largeBody" | "smallBody" | "monoBody" | "monoSmallBody">;
-        size: PropTypes.Requireable<number>;
         lineHeight: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<number>;
+        variant: PropTypes.Requireable<"body" | "title1" | "title2" | "title3" | "title4" | "title5" | "title6" | "largeBody" | "smallBody" | "monoBody" | "monoSmallBody">;
         weight: PropTypes.Requireable<string>;
+        withReset: PropTypes.Requireable<boolean>;
     };
 }
 export default Typography;

package/useRovingFocus.js

@@ -46,16 +46,14 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ i
+        default: () => /* reexport */ u
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
     const n = require("@splunk/ui-utils/focus");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const a = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: ./src/useRovingFocus/useRovingFocus.tsx
-    var o = {
+    var a = {
         enableLoop: false,
         orientation: "horizontal",
         enableTab: false,
@@ -80,49 +78,48 @@
  *     <button type="button">second</button>
  * </div>
  * ```
- */    function u() {
+ */    function o() {
         var e = (0, r.useRef)(0);
         var t = (0, r.useRef)([]);
-        var u = function r(n) {
+        var o = function r(n) {
             e.current = n;
             t.current.forEach((function(t, r) {
                 return r === e.current ? t.removeAttribute("tabindex") : t.setAttribute("tabindex", "-1");
             }));
         };
-        var i = function r(a) {
+        var u = function r(a) {
             t.current = a != null ? (0, n.getSortedTabbableElements)(a, {
                 ignoreTabIndex: true
             }) : [];
-            u(e.current);
+            o(e.current);
         };
-        var c = function e(r) {
+        var i = function e(r) {
             var n = r.relatedTarget instanceof Element && t.current.includes(r.relatedTarget);
             if (!n) {
-                u(0);
+                o(0);
             }
         };
-        var l = function e(r) {
+        var c = function e(r) {
             var n = r.target instanceof Element ? t.current.indexOf(r.target) : -1;
             if (n >= 0) {
-                u(n);
+                o(n);
             }
         };
-        var f = function e(r) {
-            var u = t.current.includes(r.nativeEvent.target);
-            /*  Only apply focus if we are among the navigable items in this container */            if (r.nativeEvent.target instanceof HTMLElement && u) {
-                var i = t.current.indexOf(r.nativeEvent.target);
-                var c = (0, a.keycode)(r.nativeEvent);
-                (0, n.handleFocus)(c, t.current, i, o);
+        var l = function e(r) {
+            var o = t.current.includes(r.nativeEvent.target);
+            /*  Only apply focus if we are among the navigable items in this container */            if (r.nativeEvent.target instanceof HTMLElement && o) {
+                var u = t.current.indexOf(r.nativeEvent.target);
+                (0, n.handleFocus)(r.key, t.current, u, a);
             }
         };
         return {
-            ref: i,
-            onBlur: c,
-            onFocus: l,
-            onKeyDown: f
+            ref: u,
+            onBlur: i,
+            onFocus: c,
+            onKeyDown: l
         };
     }
-    /* harmony default export */    const i = u;
+    /* harmony default export */    const u = o;
     // CONCATENATED MODULE: ./src/useRovingFocus/index.ts
     module.exports = t;
     /******/})();

package/types/src/Date/Icon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { SVGPropsOptionalViewBox } from '@splunk/react-icons/SVGEnterprise';
-export default function CalendarIcon(props: SVGPropsOptionalViewBox): React.JSX.Element;

package/types/src/TabBar/docs/examples/IconsAbove.d.ts

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

package/types/src/TabBar/docs/examples/VerticalIconsAbove.d.ts

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