@splunk/react-ui 5.3.0 → 5.5.0

package/types/src/Table/Row.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TableRequestMoveRowHandler } from './Table';
+import { PinnedColumnsProp, TableRequestMoveRowHandler } from '@splunk/react-ui/Table';
 import { ComponentProps } from '../utils/types';
 /** @public */
 type RowActionPrimaryClickHandler = (event: React.MouseEvent, data?: any) => void;
@@ -77,6 +77,8 @@ interface RowPropsBase {
      * An event handler for toggle of the row. resize of columns. The function is passed the event and the `data` prop for this row.
      */
     onRequestToggle?: RowRequestToggleHandler;
+    /** @private. */
+    pinnedColumns?: PinnedColumnsProp;
     /**
      * @private. Generally passed by Table rather than added directly. Indicates the column to use as the primary label for each row.
      */
@@ -128,6 +130,8 @@ declare namespace Row {
         /** @private. Generally passed by `Table` rather than added directly. */
         onRequestMoveRow: PropTypes.Requireable<(...args: any[]) => any>;
         onRequestToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @private. */
+        pinnedColumns: PropTypes.Requireable<object>;
         /** @private. Generally passed by `Table` rather than added directly. */
         primaryColumnIndex: PropTypes.Requireable<number>;
         rowScreenReaderText: PropTypes.Requireable<string>;

package/types/src/Table/Table.d.ts

@@ -25,6 +25,10 @@ type TableRequestResizeColumnHandler = (event: React.MouseEvent<HTMLHRElement> |
     index: number;
     width: number;
 }) => void;
+/** @public */
+type PinnedColumnsProp = {
+    actions?: boolean;
+};
 interface TablePropsBase {
     /**
      * Adds table-level actions. Not compatible with `onRequestResize`.
@@ -63,6 +67,14 @@ interface TablePropsBase {
      *          the table.
      */
     headType?: 'docked' | 'fixed' | 'inline';
+    /**
+     * Controls how the Table handles horizontal content overflow:
+     *
+     *  * `auto`: The default behavior for overflow. `HeadCell` content will truncate and `Cell` content will wrap.
+     *            The Table will scroll horizontally when the container's width exceeds the Table's width.
+     *  * `scroll`: The Table will scroll horizontally. `HeadCell` content will not truncate and `Cell` content will wrap only for word breaks.
+     */
+    horizontalOverflow?: 'auto' | 'scroll';
     /**
      * Style specification for the inner container, which is the scrolling container.
      */
@@ -79,6 +91,11 @@ interface TablePropsBase {
      * Style specification for the outer container.
      */
     outerStyle?: React.CSSProperties;
+    /**
+     * Optionally pin the actions column to the end of the table by passing `pinnedColumns={{ actions: true }}.`
+     * When using pinned columns `horizontalOverflow` should be set to `scroll`.
+     */
+    pinnedColumns?: PinnedColumnsProp;
     /**
      * Adds a column to the table with an expansion button for each row that has expansion
      * content. Supported values:
@@ -119,6 +136,7 @@ interface TablePropsBase {
     /**
      * An event handler for resize of columns for the current column being resized. The function is passed an event and a data
      * object with `columnId`, `id`, `index`, and `width`.
+     * Every Table.HeadCell must have a width prop when using onRequestResizeColumn. Table with resizableFillLayout supports width of "auto".
      */
     onRequestResizeColumn?: TableRequestResizeColumnHandler;
     /**
@@ -137,10 +155,12 @@ declare namespace Table {
         dockScrollBar: PropTypes.Requireable<boolean>;
         elementRef: PropTypes.Requireable<object>;
         headType: PropTypes.Requireable<string>;
+        horizontalOverflow: PropTypes.Requireable<string>;
         innerStyle: PropTypes.Requireable<object>;
         onRequestToggleAllRows: PropTypes.Requireable<(...args: any[]) => any>;
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;
         outerStyle: PropTypes.Requireable<object>;
+        pinnedColumns: PropTypes.Requireable<object>;
         primaryColumnIndex: PropTypes.Requireable<number>;
         rowExpansion: PropTypes.Requireable<string>;
         rowSelection: PropTypes.Requireable<string>;
@@ -161,4 +181,4 @@ declare namespace Table {
 }
 export default Table;
 export { Body, Caption, Cell, Head, HeadCell, HeadDropdownCell, Row };
-export type { CellClickHandler, HeadCellSortHandler, HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestOpenHandler, RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowRequestToggleHandler, TableRequestMoveColumnHandler, TableRequestMoveRowHandler, TableRequestResizeColumnHandler, };
+export type { CellClickHandler, HeadCellSortHandler, HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestOpenHandler, RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowRequestToggleHandler, TableRequestMoveColumnHandler, TableRequestMoveRowHandler, TableRequestResizeColumnHandler, PinnedColumnsProp, };

package/types/src/Table/TableContext.d.ts

@@ -1,5 +1,6 @@
 export interface TableContext {
     headType?: 'docked' | 'fixed' | 'inline';
+    horizontalOverflow?: 'auto' | 'scroll';
     resizableFillLayout?: boolean;
     tableContainerWidthWithoutBorders?: number | null;
 }

package/types/src/Table/docs/examples/HorizontalOverflowScroll.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * @name Horizontal overflow scroll
+ * @description Table handles overflow by horizontally scrolling.
+ * Set `horizontalOverflow="scroll"` for `HeadCell` content to not truncate or `Cell` content to wrap for word breaks.
+ */
+declare function HorizontalOverflowScroll(): React.JSX.Element;
+export default HorizontalOverflowScroll;

package/types/src/Table/docs/examples/PinActionColumn.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Pin action column
+ * @description Pins action column to the end of the table.
+ */
+declare function PinActionColumn(): React.JSX.Element;
+export default PinActionColumn;

package/types/src/TransitionOpen/TransitionOpen.d.ts

@@ -17,6 +17,7 @@ interface TransitionOpenPropsBase {
     innerClassName?: string;
     innerStyle?: React.CSSProperties;
     onAnimationEnd?: () => void;
+    onAnimationStart?: () => void;
     /** Whether the component is currently open or not. */
     open?: boolean;
     /** An additional className to outer container. */
@@ -38,7 +39,7 @@ interface TransitionOpenPropsBase {
     takeFocus?: boolean;
 }
 type TransitionOpenProps = ComponentProps<TransitionOpenPropsBase, 'div'>;
-declare function TransitionOpen({ animation, animateOnMount, children, className, elementRef, id, innerClassName, innerStyle, onAnimationEnd, open, outerClassName, outerId, outerStyle, renderChildrenWhenCollapsed, retainFocus, takeFocus: takeFocusProp, ...otherProps }: TransitionOpenProps): React.JSX.Element;
+declare function TransitionOpen({ animation, animateOnMount, children, className, elementRef, id, innerClassName, innerStyle, onAnimationEnd, onAnimationStart, open, outerClassName, outerId, outerStyle, renderChildrenWhenCollapsed, retainFocus, takeFocus: takeFocusProp, ...otherProps }: TransitionOpenProps): React.JSX.Element;
 declare namespace TransitionOpen {
     var propTypes: {
         animation: PropTypes.Requireable<string>;
@@ -50,6 +51,7 @@ declare namespace TransitionOpen {
         innerClassName: PropTypes.Requireable<string>;
         innerStyle: PropTypes.Requireable<object>;
         onAnimationEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        onAnimationStart: PropTypes.Requireable<(...args: any[]) => any>;
         open: PropTypes.Requireable<boolean>;
         outerClassName: PropTypes.Requireable<string>;
         outerId: PropTypes.Requireable<string>;

package/types/src/Tree/TreeContext.d.ts

@@ -1,5 +1,5 @@
+import { RemoveNodeHandler, SetNodeHandler } from '@splunk/react-ui/Tree';
 import { TreeItemClickHandler, TreeItemKeyDownHandler } from './Item';
-import { RemoveNodeHandler, SetNodeHandler } from './Tree';
 export interface TreeContext {
     defaultIndent?: boolean;
     onItemKeyDown?: TreeItemKeyDownHandler;

package/types/src/useResizeObserver/useResizeObserver.d.ts

@@ -6,8 +6,10 @@ type Dimensions = {
 type ResizeHandler = (data: Dimensions) => void;
 /**
  * Watches a React ref element for changes in size.
+ * Uses useSyncExternalStore for better React 18 concurrent rendering support.
  *
  * @param ref - The React ref to observe size changes on
+ * @param onResize - Callback function that receives the new dimensions
  */
 declare const useResizeObserver: (ref: React.MutableRefObject<HTMLElement | null>, onResize?: ResizeHandler) => Dimensions;
 export default useResizeObserver;

package/types/src/useRovingFocus/useRovingFocus.d.ts

@@ -1,3 +1,9 @@
+type RovingFocusOptions = {
+    enableLoop?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    enableTab?: boolean;
+    enableHomeEnd?: boolean;
+};
 /**
  * This is a private hook not intended for use outside @splunk/react-ui
  *
@@ -18,10 +24,11 @@
  * </div>
  * ```
  */
-declare function useRovingFocus(): {
+declare function useRovingFocus(options?: {}): {
     ref: (element: HTMLDivElement | null) => void;
     onBlur: (e: React.FocusEvent) => void;
     onFocus: (e: React.FocusEvent) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 };
 export default useRovingFocus;
+export type { RovingFocusOptions };

package/useControlled.js

@@ -1,67 +1,34 @@
 /******/ (() => {
     // webpackBootstrap
     /******/ "use strict";
-    /******/    var e = {
-        /***/ 5919: 
-        /***/ e => {
-            e.exports = require("lodash/has");
-            /***/        },
-        /***/ 9497: 
-        /***/ e => {
-            e.exports = require("react");
-            /***/
-            /******/        }
-    };
-    /************************************************************************/
-    /******/ // The module cache
-    /******/    var r = {};
-    /******/
-    /******/ // The require function
-    /******/    function t(o) {
-        /******/ // Check if module is in cache
-        /******/ var n = r[o];
-        /******/        if (n !== undefined) {
-            /******/ return n.exports;
-            /******/        }
-        /******/ // Create a new module (and put it into the cache)
-        /******/        var u = r[o] = {
-            /******/ // no module.id needed
-            /******/ // no module.loaded needed
-            /******/ exports: {}
-            /******/        };
-        /******/
-        /******/ // Execute the module function
-        /******/        e[o](u, u.exports, t);
-        /******/
-        /******/ // Return the exports of the module
-        /******/        return u.exports;
-        /******/    }
+    /******/ // The require scope
+    /******/    var e = {};
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ t.n = e => {
-            /******/ var r = e && e.__esModule ? 
-            /******/ () => e["default"]
-            /******/ : () => e
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            t.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ t.d = (e, r) => {
-            /******/ for (var o in r) {
-                /******/ if (t.o(r, o) && !t.o(e, o)) {
-                    /******/ Object.defineProperty(e, o, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var o in t) {
+                /******/ if (e.o(t, o) && !e.o(r, o)) {
+                    /******/ Object.defineProperty(r, o, {
                         enumerable: true,
-                        get: r[o]
+                        get: t[o]
                     });
                     /******/                }
                 /******/            }
@@ -70,14 +37,14 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ t.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ t.r = e => {
+        /******/ e.r = e => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
                 /******/ Object.defineProperty(e, Symbol.toStringTag, {
                     value: "Module"
@@ -89,38 +56,36 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var o = {};
-    // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-        (() => {
-        // ESM COMPAT FLAG
-        t.r(o);
-        // EXPORTS
-                t.d(o, {
-            default: () => /* reexport */ l,
-            isAllowedType: () => /* reexport */ f,
-            isPrimitive: () => /* reexport */ a
-        });
-        // EXTERNAL MODULE: external "react"
-                var e = t(9497);
-        // CONCATENATED MODULE: external "lodash/isEqual"
-        const r = require("lodash/isEqual");
-        // EXTERNAL MODULE: external "lodash/has"
-                var n = t(5919);
-        var u =  t.n(n);
-        // CONCATENATED MODULE: ./src/useControlled/useControlled.tsx
-        function a(e) {
-            return e === null || e === undefined || typeof e === "boolean" || typeof e === "string" || typeof e === "number";
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ l,
+        isAllowedType: () => /* reexport */ f,
+        isPrimitive: () => /* reexport */ a
+    });
+    // CONCATENATED MODULE: external "react"
+    const t = require("react");
+    // CONCATENATED MODULE: external "lodash/isEqual"
+    const o = require("lodash/isEqual");
+    // CONCATENATED MODULE: external "lodash/has"
+    const n = require("lodash/has");
+    var u =  e.n(n);
+    // CONCATENATED MODULE: ./src/useControlled/useControlled.tsx
+    function a(e) {
+        return e === null || e === undefined || typeof e === "boolean" || typeof e === "string" || typeof e === "number";
+    }
+    function f(e) {
+        if (a(e)) {
+            return true;
         }
-        function f(e) {
-            if (a(e)) {
-                return true;
-            }
-            if (Array.isArray(e)) {
-                return e.every(a);
-            }
-            return false;
+        if (Array.isArray(e)) {
+            return e.every(a);
         }
-        /**
+        return false;
+    }
+    /**
  * This is a private component not intended for use outside @splunk/react-ui
  *
  * A hook that accepts a default value (as used in an uncontrolled component)
@@ -129,22 +94,21 @@
  * are not happening.
  *
  * Return the controlled state of the component.
- */        function i(r) {
-            var t = r.componentProps, o = r.componentName, n = o === void 0 ? "this component" : o, a = r.defaultValuePropName, f = a === void 0 ? "defaultValue" : a, i = r.valuePropName, l = i === void 0 ? "value" : i;
-            var s = (0, e.useRef)(u()(t, l));
-            var d = (0, e.useRef)(t[f]);
-            (0, e.useEffect)((function() {
-                if (false) {}
-            }), [ n, t, f, l ]);
-            (0, e.useEffect)((function() {
-                if (false) {}
-                if (false) {}
-                if (false) {}
-            }), [ n, t, f, l ]);
-            return s.current;
-        }
-        /* harmony default export */        const l = i;
-    }) // CONCATENATED MODULE: ./src/useControlled/index.ts
-    ();
-    module.exports = o;
+ */    function i(e) {
+        var r = e.componentProps, o = e.componentName, n = o === void 0 ? "this component" : o, a = e.defaultValuePropName, f = a === void 0 ? "defaultValue" : a, i = e.valuePropName, l = i === void 0 ? "value" : i;
+        var s = (0, t.useRef)(u()(r, l));
+        var d = (0, t.useRef)(r[f]);
+        (0, t.useEffect)((function() {
+            if (false) {}
+        }), [ n, r, f, l ]);
+        (0, t.useEffect)((function() {
+            if (false) {}
+            if (false) {}
+            if (false) {}
+        }), [ n, r, f, l ]);
+        return s.current;
+    }
+    /* harmony default export */    const l = i;
+    // CONCATENATED MODULE: ./src/useControlled/index.ts
+    module.exports = r;
     /******/})();

package/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/usePrevious';
+export * from './types/src/usePrevious';

package/usePrevious.js

@@ -1,48 +1,19 @@
 /******/ (() => {
     // webpackBootstrap
     /******/ "use strict";
-    /******/    var e = {
-        /***/ 9497: 
-        /***/ e => {
-            e.exports = require("react");
-            /***/
-            /******/        }
-    };
-    /************************************************************************/
-    /******/ // The module cache
-    /******/    var r = {};
-    /******/
-    /******/ // The require function
-    /******/    function t(o) {
-        /******/ // Check if module is in cache
-        /******/ var n = r[o];
-        /******/        if (n !== undefined) {
-            /******/ return n.exports;
-            /******/        }
-        /******/ // Create a new module (and put it into the cache)
-        /******/        var u = r[o] = {
-            /******/ // no module.id needed
-            /******/ // no module.loaded needed
-            /******/ exports: {}
-            /******/        };
-        /******/
-        /******/ // Execute the module function
-        /******/        e[o](u, u.exports, t);
-        /******/
-        /******/ // Return the exports of the module
-        /******/        return u.exports;
-        /******/    }
+    /******/ // The require scope
+    /******/    var e = {};
     /******/
     /************************************************************************/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ t.d = (e, r) => {
-            /******/ for (var o in r) {
-                /******/ if (t.o(r, o) && !t.o(e, o)) {
-                    /******/ Object.defineProperty(e, o, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var o in t) {
+                /******/ if (e.o(t, o) && !e.o(r, o)) {
+                    /******/ Object.defineProperty(r, o, {
                         enumerable: true,
-                        get: r[o]
+                        get: t[o]
                     });
                     /******/                }
                 /******/            }
@@ -51,14 +22,14 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ t.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
     /******/ /* webpack/runtime/make namespace object */
     /******/    (() => {
         /******/ // define __esModule on exports
-        /******/ t.r = e => {
+        /******/ e.r = e => {
             /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
                 /******/ Object.defineProperty(e, Symbol.toStringTag, {
                     value: "Module"
@@ -70,19 +41,17 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var o = {};
-    // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-        (() => {
-        // ESM COMPAT FLAG
-        t.r(o);
-        // EXPORTS
-                t.d(o, {
-            default: () => /* reexport */ n
-        });
-        // EXTERNAL MODULE: external "react"
-                var e = t(9497);
-        // CONCATENATED MODULE: ./src/usePrevious/usePrevious.tsx
-        /**
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ n
+    });
+    // CONCATENATED MODULE: external "react"
+    const t = require("react");
+    // CONCATENATED MODULE: ./src/usePrevious/usePrevious.tsx
+    /**
  * This is a private component not intended for use outside @splunk/react-ui
  *
  * Keeps the previous version of a value. Useful for emulating the "prevState"
@@ -91,15 +60,14 @@
  *
  * @param value - The value to store
  */
-        function r(r) {
-            var t = (0, e.useRef)();
-            (0, e.useEffect)((function() {
-                t.current = r;
-            }), [ r ]);
-            return t.current;
-        }
-        /* harmony default export */        const n = r;
-    }) // CONCATENATED MODULE: ./src/usePrevious/index.ts
-    ();
-    module.exports = o;
+    function o(e) {
+        var r = (0, t.useRef)();
+        (0, t.useEffect)((function() {
+            r.current = e;
+        }), [ e ]);
+        return r.current;
+    }
+    /* harmony default export */    const n = o;
+    // CONCATENATED MODULE: ./src/usePrevious/index.ts
+    module.exports = r;
     /******/})();