@splunk/react-ui 5.4.0 → 5.6.0

package/types/src/{Select → SelectBase}/SelectBase.d.ts

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import { Divider, Heading } from '@splunk/react-ui/Menu';
 import { TextBlurHandler, TextChangeHandler, TextFocusHandler } from '@splunk/react-ui/Text';
 import Option from './OptionBase';
+import SelectAllOption from './SelectAllOption';
 import { ComponentProps } from '../utils/types';
+import type { OptionClickHandler } from './OptionBase';
 type SelectBaseFilterChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent, data: {
     keyword: string;
 }) => void;
@@ -96,6 +98,11 @@ interface SelectBasePropsBase {
     /**
      * The loading message to show when isLoadingOptions. */
     loadingMessage?: React.ReactNode;
+    /**
+     * @private
+     * Escape hatch override of the maximum number of values before the toggle label will truncate to `X items selected`
+     */
+    maxLabelItems?: number;
     /**
      * Style properties to apply to the Menu. */
     menuStyle?: React.CSSProperties;
@@ -229,7 +236,7 @@ interface ControlsProps extends Pick<SelectBaseProps, 'inputId' | 'inputRef' | '
     textHasFocus: boolean;
 }
 declare const Controls: ({ activeItemId, filterA11yId, filterKeyword, hasChildren, inputId, inputRef, menuListboxId, multiple, onClearAll, onSelectAll, onTextBlur, onTextChange, onTextFocus, onTextKeyDown, optionSelection, placement, selectAllAppearance, textHasFocus, }: ControlsProps) => React.JSX.Element;
-declare function SelectBase({ allowKeyMatching, animateLoading, appearance, append, allowNewValues, children, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, labelText, loadingMessage, menuStyle, multiple, name, noOptionsMessage, onChange, onScroll, onScrollBottom, onFilterChange, onClick, onClose, onOpen, required, placeholder, prefixLabel, prepend, repositionMode, selectAllAppearance, showSelectedValuesFirst, suffixLabel, tabConfirmsNewValue, values, virtualization, toggle, toggleContent, ...otherProps }: SelectBaseProps): React.JSX.Element;
+declare function SelectBase({ allowKeyMatching, animateLoading, appearance, append, allowNewValues, children, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, labelText, loadingMessage, menuStyle, multiple, name, noOptionsMessage, onChange, onScroll, onScrollBottom, onFilterChange, onClick, onClose, onOpen, required, placeholder, prefixLabel, prepend, repositionMode, selectAllAppearance, showSelectedValuesFirst, suffixLabel, tabConfirmsNewValue, values, virtualization, toggle, toggleContent, maxLabelItems, ...otherProps }: SelectBaseProps): React.JSX.Element;
 declare namespace SelectBase {
     var propTypes: {
         allowKeyMatching: PropTypes.Requireable<boolean>;
@@ -253,6 +260,8 @@ declare namespace SelectBase {
         labelledBy: PropTypes.Requireable<string>;
         labelText: PropTypes.Requireable<string>;
         loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** @private. */
+        maxLabelItems: PropTypes.Requireable<number>;
         menuStyle: PropTypes.Requireable<object>;
         multiple: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
@@ -286,4 +295,4 @@ declare namespace SelectBase {
     var Heading: typeof import("@splunk/react-ui/Menu").Heading;
 }
 export default SelectBase;
-export { Controls, ChildrenElement, Divider, Heading, Option, SelectBaseChangeHandler, SelectBaseChangeReason, SelectBaseFilterChangeHandler, SelectBaseProps, isOption, };
+export { Controls, ChildrenElement, Divider, Heading, Option, SelectAllOption, OptionClickHandler, SelectBaseChangeHandler, SelectBaseChangeReason, SelectBaseFilterChangeHandler, SelectBaseProps, isOption, };

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

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

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

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

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

@@ -15,7 +15,7 @@ interface SwitchPropsBase {
     /**
      * Determines if the component renders as a checkbox or toggle.
      *
-     * @deprecatedValue 'checkbox'
+     * @deprecatedValue 'checkbox'. Consider using the `Checkbox` component instead.
      * The 'checkbox' value is deprecated and will be removed in a future major version.
      */
     appearance?: 'checkbox' | 'toggle';
@@ -57,10 +57,12 @@ interface SwitchPropsBase {
      */
     selected?: boolean | 'some';
     /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
      * The customized content presented to screen readers when selected.
      */
     selectedLabel?: string;
     /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
      * The customized content presented to screen readers when selected="some".
      */
     someSelectedLabel?: string;
@@ -69,6 +71,7 @@ interface SwitchPropsBase {
      */
     toggleRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>;
     /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
      * The customized content presented to screen readers when unselected.
      */
     unselectedLabel?: string;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { PinnedColumnsProp } from '@splunk/react-ui/Table';
 import { RowRequestMoveRowHandler } from './Row';
 import { ComponentProps } from '../utils/types';
 type BodyRequestMoveRowHandler = RowRequestMoveRowHandler;
@@ -20,13 +21,15 @@ interface BodyPropsBase {
     rowExpansion?: 'single' | 'multi' | 'none' | 'controlled';
     /** @private. Generally passed by Table rather than added directly. */
     onRequestMoveRow?: BodyRequestMoveRowHandler;
+    /** @private. */
+    pinnedColumns?: PinnedColumnsProp;
     /** Indicates the column to use as the primary label for each row.   */
     primaryColumnIndex?: number;
     /** @private. Generally passed by Table rather than added directly. */
     stripeRows?: boolean;
 }
 type BodyProps = ComponentProps<BodyPropsBase, 'tbody'>;
-declare function Body({ actions, children, elementRef, movableColumns, onRequestMoveRow, rowExpansion, primaryColumnIndex, stripeRows, ...otherProps }: BodyProps): React.JSX.Element | null;
+declare function Body({ actions, children, elementRef, pinnedColumns, movableColumns, onRequestMoveRow, rowExpansion, primaryColumnIndex, stripeRows, ...otherProps }: BodyProps): React.JSX.Element | null;
 declare namespace Body {
     var propTypes: {
         /** @private. Generally passed by Table rather than added directly. */
@@ -39,6 +42,8 @@ declare namespace Body {
         rowExpansion: PropTypes.Requireable<string>;
         /** @private. Generally passed by Table rather than added directly. */
         onRequestMoveRow: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @private. */
+        pinnedColumns: PropTypes.Requireable<object>;
         /** @private. Generally passed by Table rather than added directly. */
         primaryColumnIndex: PropTypes.Requireable<number>;
         /** @private. Generally passed by Table rather than added directly. */

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

@@ -24,6 +24,8 @@ interface CellPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLTableCellElement>;
+    /** @private. */
+    isPinned?: boolean;
     /**
      * @private
      * Used to style the primary cell when row is clickable
@@ -44,7 +46,7 @@ interface CellPropsBase {
     variant?: 'toggle' | 'expand' | 'drag' | 'actions';
 }
 type CellProps = ComponentProps<CellPropsBase, 'td'>;
-declare function Cell({ align, appearance, appearClickable, children, data, disabled, elementRef, isPrimaryCell, onClick, onKeyDown, stripe, variant, ...otherProps }: CellProps): React.JSX.Element;
+declare function Cell({ align, appearance, appearClickable, children, data, disabled, elementRef, isPinned, isPrimaryCell, onClick, onKeyDown, stripe, variant, ...otherProps }: CellProps): React.JSX.Element;
 declare namespace Cell {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -57,6 +59,8 @@ declare namespace Cell {
         elementRef: PropTypes.Requireable<object>;
         /** @private */
         isPrimaryCell: PropTypes.Requireable<boolean>;
+        /** @private */
+        isPinned: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /** @private */
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TableRequestMoveColumnHandler } from '@splunk/react-ui/Table';
+import { PinnedColumnsProp, TableRequestMoveColumnHandler } from '@splunk/react-ui/Table';
 import { ComponentProps } from '../utils/types';
 type HeadAutosizeColumnHandler = (event: React.MouseEvent<HTMLHRElement>, data: {
     columnId?: string;
@@ -42,11 +42,13 @@ interface HeadPropsBase {
     /** @private. */
     onRequestToggleAllRows?: () => void;
     /** @private. */
+    pinnedColumns?: PinnedColumnsProp;
+    /** @private. */
     rowSelection?: 'all' | 'some' | 'none';
 }
 type HeadProps = ComponentProps<HeadPropsBase, 'thead'>;
 declare const getCellWidths: (headEl: HTMLTableSectionElement | null) => number[];
-declare function Head({ actions, actionsColumnWidth, cellMinWidth, children, elementRef, hasDragColumn, hasInfoColumn, onAutosizeColumn, onRequestMoveColumn, onRequestResizeColumn, onRequestToggleAllRows, rowSelection, ...otherProps }: HeadProps): React.JSX.Element;
+declare function Head({ actions, actionsColumnWidth, cellMinWidth, children, elementRef, hasDragColumn, hasInfoColumn, pinnedColumns, onAutosizeColumn, onRequestMoveColumn, onRequestResizeColumn, onRequestToggleAllRows, rowSelection, ...otherProps }: HeadProps): React.JSX.Element;
 declare namespace Head {
     var propTypes: {
         /** @private. */
@@ -70,6 +72,8 @@ declare namespace Head {
         /** @private. */
         onRequestToggleAllRows: PropTypes.Requireable<(...args: any[]) => any>;
         /** @private. */
+        pinnedColumns: PropTypes.Requireable<object>;
+        /** @private. */
         rowSelection: PropTypes.Requireable<string>;
     };
     var splunkUiType: string;

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

@@ -46,6 +46,8 @@ interface HeadCellPropsBase {
     /** @private The index of the cell, skipping the info column. */
     index?: number;
     /** @private. */
+    isPinned?: boolean;
+    /** @private. */
     onAutosizeColumn?: HeadCellAutosizeColumnHandler;
     /**
      * A callback invoked when this head cell is clicked. If provided, this HeadCell is
@@ -97,7 +99,7 @@ interface HeadCellPropsBase {
     variant?: 'toggleAll' | 'info' | 'actions';
 }
 type HeadCellProps = ComponentProps<HeadCellPropsBase, 'th'>;
-declare function HeadCell({ align, appearClickable, children, columnId, elementRef, dragId, headCellScreenReaderText, id, index, onAutosizeColumn, onClick, onKeyDown, onRequestMoveColumn, onRequestResize, onSort, resizable, sortDir, sortKey, style, tooltip, truncate: truncateProp, variant, visible, width, ...otherProps }: HeadCellProps): React.JSX.Element;
+declare function HeadCell({ align, appearClickable, children, columnId, elementRef, dragId, headCellScreenReaderText, id, index, isPinned, onAutosizeColumn, onClick, onKeyDown, onRequestMoveColumn, onRequestResize, onSort, resizable, sortDir, sortKey, style, tooltip, truncate: truncateProp, variant, visible, width, ...otherProps }: HeadCellProps): React.JSX.Element;
 declare namespace HeadCell {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -112,6 +114,8 @@ declare namespace HeadCell {
         /** @private The index of the cell, skipping the info column. */
         index: PropTypes.Requireable<number>;
         /** @private. */
+        isPinned: PropTypes.Requireable<boolean>;
+        /** @private. */
         onAutosizeColumn: PropTypes.Requireable<(...args: any[]) => any>;
         /** @private. */
         onClick: PropTypes.Requireable<(...args: any[]) => any>;

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;
     /******/})();