onekijs-ui 1.0.3 → 1.0.5

package/dist/components/list/typings.d.ts

@@ -77,7 +77,7 @@ export type ListConfig<T = any, I extends ListItem<T> = ListItem<T>> = {
     onItemUnselect?: ListItemHandler<T, I>;
     paddingEnd?: number;
     paddingStart?: number;
-    parentRef?: React.RefObject<HTMLDivElement>;
+    parentRef?: React.RefObject<HTMLDivElement | null>;
     overscan?: number;
     preload?: number;
     style?: React.CSSProperties;

package/dist/index.js

@@ -1692,8 +1692,9 @@ const DropdownButtonComponent = ({ animationTimeout = 100, attachDropdownToBody
     const classNames = addClassname('o-button-dropdown', className);
     const ref = React.useRef(null);
     const [Dropdown, triggerRef] = useDropdown();
-    useClickOutside(ref, () => onCollapse && onCollapse());
-    return (jsxRuntimeExports.jsxs("span", { ref: ref, children: [jsxRuntimeExports.jsxs(Button, { ...buttonProps, className: classNames, onClick: onClick ? undefined : open ? onCollapse : onDrop, ref: triggerRef, children: [jsxRuntimeExports.jsx("span", { className: "o-button-dropdown-content", onClick: onClick, children: children }), jsxRuntimeExports.jsx("span", { className: "o-button-dropdown-icon", children: jsxRuntimeExports.jsx(TogglerIcon, { width: "16px", height: "16px", open: open, closeArrowPosition: "s", openArrowPosition: "n", onClick: onClick ? (open ? onCollapse : onDrop) : undefined }) })] }), jsxRuntimeExports.jsx(Dropdown, { attachToBody: attachDropdownToBody, skidding: skidding, distance: distance, onUpdate: onUpdate, onDropStart: onDropStart, onDropping: onDropping, onDropDone: onDropDone, onCollapseStart: onCollapseStart, onCollapseDone: onCollapseDone, onCollapsing: onCollapsing, widthModifier: widthModifier, zIndex: zIndex, open: open, placement: placement, animationTimeout: animationTimeout, children: listElement })] }));
+    const dropdownRef = React.useRef(null);
+    useClickOutside([ref, dropdownRef], () => onCollapse && onCollapse());
+    return (jsxRuntimeExports.jsxs("span", { ref: ref, children: [jsxRuntimeExports.jsxs(Button, { ...buttonProps, className: classNames, onClick: onClick ? undefined : open ? onCollapse : onDrop, ref: triggerRef, children: [jsxRuntimeExports.jsx("span", { className: "o-button-dropdown-content", onClick: onClick, children: children }), jsxRuntimeExports.jsx("span", { className: "o-button-dropdown-icon", children: jsxRuntimeExports.jsx(TogglerIcon, { width: "16px", height: "16px", open: open, closeArrowPosition: "s", openArrowPosition: "n", onClick: onClick ? (open ? onCollapse : onDrop) : undefined }) })] }), jsxRuntimeExports.jsx(Dropdown, { attachToBody: attachDropdownToBody, skidding: skidding, distance: distance, onUpdate: onUpdate, onDropStart: onDropStart, onDropping: onDropping, onDropDone: onDropDone, onCollapseStart: onCollapseStart, onCollapseDone: onCollapseDone, onCollapsing: onCollapsing, widthModifier: widthModifier, zIndex: zIndex, open: open, placement: placement, animationTimeout: animationTimeout, children: jsxRuntimeExports.jsx("div", { ref: dropdownRef, children: listElement }) })] }));
 };
 
 const DropdownButton = styled(DropdownButtonComponent) `
@@ -1705,7 +1706,7 @@ const TooltipComponent = (props) => {
     const [show, setShow] = React.useState(true);
     const [open, setOpen] = React.useState(false);
     const arrowRef = React.useRef(null);
-    const { context, floatingStyles, middlewareData, refs } = react.useFloating({
+    const { context, floatingStyles, middlewareData, placement: resolvedPlacement, refs } = react.useFloating({
         open,
         onOpenChange: setOpen,
         placement,
@@ -1737,7 +1738,7 @@ const TooltipComponent = (props) => {
             document.removeEventListener('tooltipVisible', listener);
         };
     }, [uid]);
-    const element = (jsxRuntimeExports.jsxs("div", { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps({ className: 'o-tooltip-container' }), children: [jsxRuntimeExports.jsx("div", { ref: arrowRef, className: "o-tooltip-arrow", style: { left: middlewareData.arrow?.x, top: middlewareData.arrow?.y } }), content] }));
+    const element = (jsxRuntimeExports.jsxs("div", { ref: refs.setFloating, style: floatingStyles, "data-popper-placement": resolvedPlacement, ...getFloatingProps({ className: 'o-tooltip-container' }), children: [jsxRuntimeExports.jsx("div", { ref: arrowRef, className: "o-tooltip-arrow", style: { left: middlewareData.arrow?.x, top: middlewareData.arrow?.y } }), content] }));
     if (attachToBody) {
         return (jsxRuntimeExports.jsxs("div", { ref: refs.setReference, ...getReferenceProps(), children: [children, show && open && content && ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: classNames, children: element }), document.body)] }));
     }
@@ -5183,7 +5184,10 @@ const useElementScroll = ({ parentRef, horizontal, useObserver, initialRect }) =
     const [scrollOffset, setScrollOffset] = React.useState(0);
     const [element, setElement] = React.useState(parentRef.current);
     useIsomorphicLayoutEffect(() => {
-        setElement(parentRef.current);
+        const currentElement = parentRef.current;
+        if (currentElement !== element) {
+            setElement(currentElement);
+        }
     });
     useIsomorphicLayoutEffect(() => {
         if (!element) {
@@ -5220,7 +5224,10 @@ const useWindowRect = (windowRef, initialRect = { width: 0, height: 0 }) => {
     const [rect, setRect] = React.useState(initialRect);
     const [element, setElement] = React.useState(windowRef.current);
     useIsomorphicLayoutEffect(() => {
-        setElement(windowRef.current);
+        const currentElement = windowRef.current;
+        if (currentElement !== element) {
+            setElement(currentElement);
+        }
     });
     useIsomorphicLayoutEffect(() => {
         if (!element) {
@@ -5248,7 +5255,10 @@ const useWindowScroll = ({ windowRef, parentRef, horizontal, useWindowObserver,
     const rectKey = horizontal ? 'left' : 'top';
     const scrollKey = horizontal ? 'scrollX' : 'scrollY';
     useIsomorphicLayoutEffect(() => {
-        setElement(windowRef.current);
+        const currentElement = windowRef.current;
+        if (currentElement !== element) {
+            setElement(currentElement);
+        }
     });
     useIsomorphicLayoutEffect(() => {
         if (!element) {