@splunk/react-ui 5.4.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 '@splunk/react-ui/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:
@@ -138,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>;
@@ -162,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/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/usePrevious.d.ts

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

package/useResizeObserver.js

@@ -8,12 +8,12 @@
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -22,7 +22,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -41,104 +41,71 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        default: () => /* reexport */ c
+        e.d(r, {
+        default: () => /* reexport */ u
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
+    const t = require("react");
+    // CONCATENATED MODULE: external "use-sync-external-store/shim"
+    const n = require("use-sync-external-store/shim");
     // CONCATENATED MODULE: ./src/useResizeObserver/useResizeObserver.ts
-    function n(e, t) {
-        return a(e) || l(e, t) || o(e, t) || i();
-    }
-    function i() {
-        throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-    }
-    function o(e, t) {
-        if (e) {
-            if ("string" == typeof e) return u(e, t);
-            var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? u(e, t) : void 0;
-        }
-    }
-    function u(e, t) {
-        (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
-        }
-        return n;
-    }
-    function l(e, t) {
-        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != r) {
-            var n, i, o, u, l = [], a = !0, f = !1;
-            try {
-                if (o = (r = r.call(e)).next, 0 === t) {
-                    if (Object(r) !== r) return;
-                    a = !1;
-                } else for (;!(a = (n = o.call(r)).done) && (l.push(n.value), l.length !== t); a = !0) {
-                }
-            } catch (e) {
-                f = !0, i = e;
-            } finally {
-                try {
-                    if (!a && null != r["return"] && (u = r["return"](), Object(u) !== u)) return;
-                } finally {
-                    if (f) throw i;
-                }
-            }
-            return l;
-        }
-    }
-    function a(e) {
-        if (Array.isArray(e)) return e;
-    }
+    // This shim is here for React 16 support
+    // Cache the server snapshot to avoid creating new objects on every render
+    var i = {
+        width: 0,
+        height: 0
+    };
     /**
  * 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
- */    var f = function e(t, i) {
-        var o = (0, r.useState)({
+ * @param onResize - Callback function that receives the new dimensions
+ */    var o = function e(r, o) {
+        var u = (0, t.useRef)({
             width: 0,
             height: 0
-        }), u = n(o, 2), l = u[0], a = u[1];
-        (0, r.useEffect)((function() {
-            var e = t.current;
-            if (typeof window !== "undefined" && window.ResizeObserver) {
-                var r = new ResizeObserver((function(e) {
-                    if (e[0]) {
-                        var r, n;
-                        var o = {
-                            width: (t === null || t === void 0 ? void 0 : (r = t.current) === null || r === void 0 ? void 0 : r.getBoundingClientRect().width) || 0,
-                            height: (t === null || t === void 0 ? void 0 : (n = t.current) === null || n === void 0 ? void 0 : n.getBoundingClientRect().height) || 0
-                        };
-                        a((function(e) {
-                            if (e.height !== o.height || e.width !== o.width) {
-                                i === null || i === void 0 ? void 0 : i(o);
-                                return o;
-                            }
-                            return e;
-                        }));
-                    }
-                }));
-                if (e) {
-                    r.observe(e);
-                }
-                return function() {
-                    if (e) {
-                        r.unobserve(e);
-                    }
+        });
+        var d = (0, t.useCallback)((function(e) {
+            var t = r.current;
+            if (!t || typeof window === "undefined" || !window.ResizeObserver) {
+                return function() {};
+ // No-op if not in browser or no ResizeObserver support
+                        }
+            var n = function t() {
+                var n, i;
+                var d = {
+                    width: (r === null || r === void 0 ? void 0 : (n = r.current) === null || n === void 0 ? void 0 : n.getBoundingClientRect().width) || 0,
+                    height: (r === null || r === void 0 ? void 0 : (i = r.current) === null || i === void 0 ? void 0 : i.getBoundingClientRect().height) || 0
                 };
-            }
-            // Return a no-op function to satisfy consistent-return rule
-                        return function() {};
-        }), [ i, t ]);
-        return l;
+                if (u.current.width !== d.width || u.current.height !== d.height) {
+                    u.current = d;
+                    o === null || o === void 0 ? void 0 : o(d);
+                    e();
+                }
+            };
+            var i = new ResizeObserver(n);
+            i.observe(t);
+            // Initial measurement
+                        n();
+            return function() {
+                i.disconnect();
+            };
+        }), [ r, o ]);
+        // Use useSyncExternalStore to handle the subscription to ensure proper synchronization with
+        // Reacts concurrent rendering, it handles cases where the resize event might be interrupted
+        // or batched with other updates
+                return (0, n.useSyncExternalStore)(d, (function() {
+            return u.current;
+        }), (function() {
+            return i;
+        }));
     };
-    /* harmony default export */    const c = f;
+    /* harmony default export */    const u = o;
     // CONCATENATED MODULE: ./src/useResizeObserver/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();

package/useRovingFocus.js

@@ -8,12 +8,12 @@
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -22,7 +22,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -41,19 +41,70 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        default: () => /* reexport */ u
+        e.d(r, {
+        default: () => /* reexport */ s
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
+    const t = require("react");
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
     const n = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: ./src/useRovingFocus/useRovingFocus.tsx
-    var a = {
+    function o(e) {
+        "@babel/helpers - typeof";
+        return o = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return typeof e;
+        } : function(e) {
+            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        }, o(e);
+    }
+    function u(e, r) {
+        var t = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            r && (n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }))), t.push.apply(t, n);
+        }
+        return t;
+    }
+    function i(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var t = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? u(Object(t), !0).forEach((function(r) {
+                a(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : u(Object(t)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+            }));
+        }
+        return e;
+    }
+    function a(e, r, t) {
+        return (r = c(r)) in e ? Object.defineProperty(e, r, {
+            value: t,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[r] = t, e;
+    }
+    function c(e) {
+        var r = f(e, "string");
+        return "symbol" == o(r) ? r : r + "";
+    }
+    function f(e, r) {
+        if ("object" != o(e) || !e) return e;
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var n = t.call(e, r || "default");
+            if ("object" != o(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === r ? String : Number)(e);
+    }
+    var l = {
         enableLoop: false,
         orientation: "horizontal",
         enableTab: false,
@@ -78,48 +129,52 @@
  *     <button type="button">second</button>
  * </div>
  * ```
- */    function o() {
-        var e = (0, r.useRef)(0);
-        var t = (0, r.useRef)([]);
-        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");
+ */    function b() {
+        var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var r = (0, t.useRef)(0);
+        var o = (0, t.useRef)([]);
+        var u = i(i({}, l), e);
+        var a = function e(t) {
+            r.current = t;
+            o.current.forEach((function(e, t) {
+                return t === r.current ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", "-1");
             }));
         };
-        var u = function r(a) {
-            t.current = a != null ? (0, n.getSortedTabbableElements)(a, {
+        var c = function e(t) {
+            o.current = t != null ? (0, n.getSortedTabbableElements)(t, {
                 ignoreTabIndex: true
             }) : [];
-            o(e.current);
+            a(r.current);
         };
-        var i = function e(r) {
-            var n = r.relatedTarget instanceof Element && t.current.includes(r.relatedTarget);
-            if (!n) {
-                o(0);
+        var f = function e(r) {
+            var t = r.relatedTarget instanceof HTMLElement && o.current.includes(r.relatedTarget);
+            if (!t) {
+                a(0);
             }
         };
-        var c = function e(r) {
-            var n = r.target instanceof Element ? t.current.indexOf(r.target) : -1;
-            if (n >= 0) {
-                o(n);
+        var b = function e(r) {
+            var t = r.target instanceof HTMLElement ? o.current.indexOf(r.target) : -1;
+            if (t >= 0) {
+                a(t);
             }
         };
-        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);
+        var s = function e(r) {
+            var t = r.nativeEvent.target;
+            var i = t instanceof HTMLElement ? o.current.indexOf(t) : -1;
+            if (i === -1) {
+                return;
             }
+            /*  Only apply focus if we are among the navigable items in this container */            (0, 
+            n.handleFocus)(r.key, o.current, i, u);
         };
         return {
-            ref: u,
-            onBlur: i,
-            onFocus: c,
-            onKeyDown: l
+            ref: c,
+            onBlur: f,
+            onFocus: b,
+            onKeyDown: s
         };
     }
-    /* harmony default export */    const u = o;
+    /* harmony default export */    const s = b;
     // CONCATENATED MODULE: ./src/useRovingFocus/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();