@shoplflow/base 0.25.2 → 0.25.3

package/dist/index.d.cts

@@ -625,6 +625,20 @@ declare const Popper: {
 declare const PopperTrigger: React__default.ForwardRefExoticComponent<PopperTriggerProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const PopperPortal: React__default.ForwardRefExoticComponent<PopperPortalProps & React__default.RefAttributes<HTMLDivElement>>;
 
+interface ScrollbarRefType {
+    scrollTop(top: number): void;
+    scrollLeft(left: number): void;
+    scrollToTop(): void;
+    scrollToBottom(): void;
+    scrollToLeft(): void;
+    scrollToRight(): void;
+    getScrollLeft(): number;
+    getScrollTop(): number;
+    getScrollWidth(): number;
+    getScrollHeight(): number;
+    getClientWidth(): number;
+    getClientHeight(): number;
+}
 interface ScrollAreaProps extends ScrollAreaOptionProps, ChildrenProps {
 }
 interface ScrollAreaOptionProps {
@@ -710,7 +724,7 @@ interface ScrollAreaOptionProps {
     style?: React$1.CSSProperties;
 }
 
-declare const ScrollArea: ({ children, ...rest }: ScrollAreaProps) => react_jsx_runtime.JSX.Element;
+declare const ScrollArea: React__default.ForwardRefExoticComponent<ScrollAreaProps & React__default.RefAttributes<ScrollbarRefType>>;
 
 declare const DropdownOptionVariants: {
     readonly CLICK: "CLICK";
@@ -985,4 +999,4 @@ declare const Tooltip: {
     Content: ({ content, ...args }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -625,6 +625,20 @@ declare const Popper: {
 declare const PopperTrigger: React__default.ForwardRefExoticComponent<PopperTriggerProps & React__default.RefAttributes<HTMLDivElement>>;
 declare const PopperPortal: React__default.ForwardRefExoticComponent<PopperPortalProps & React__default.RefAttributes<HTMLDivElement>>;
 
+interface ScrollbarRefType {
+    scrollTop(top: number): void;
+    scrollLeft(left: number): void;
+    scrollToTop(): void;
+    scrollToBottom(): void;
+    scrollToLeft(): void;
+    scrollToRight(): void;
+    getScrollLeft(): number;
+    getScrollTop(): number;
+    getScrollWidth(): number;
+    getScrollHeight(): number;
+    getClientWidth(): number;
+    getClientHeight(): number;
+}
 interface ScrollAreaProps extends ScrollAreaOptionProps, ChildrenProps {
 }
 interface ScrollAreaOptionProps {
@@ -710,7 +724,7 @@ interface ScrollAreaOptionProps {
     style?: React$1.CSSProperties;
 }
 
-declare const ScrollArea: ({ children, ...rest }: ScrollAreaProps) => react_jsx_runtime.JSX.Element;
+declare const ScrollArea: React__default.ForwardRefExoticComponent<ScrollAreaProps & React__default.RefAttributes<ScrollbarRefType>>;
 
 declare const DropdownOptionVariants: {
     readonly CLICK: "CLICK";
@@ -985,4 +999,4 @@ declare const Tooltip: {
     Content: ({ content, ...args }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -1,11 +1,11 @@
 import * as React2 from 'react';
-import React2__default, { forwardRef, createContext, useState, useEffect, useId, useCallback, useRef, useContext, useMemo } from 'react';
+import React2__default, { forwardRef, useRef, useState, useCallback, useEffect, createContext, useId, useContext, useMemo } from 'react';
 import styled5 from '@emotion/styled';
 import { motion, AnimatePresence } from 'framer-motion';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
-import { noop, OutSideClick, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
+import { useMergeRefs, noop, OutSideClick, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/react';
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
@@ -771,10 +771,36 @@ var ModalFooter = ({ children }) => {
 };
 ModalFooter[MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
-var ScrollArea = (_a) => {
+var ScrollArea = forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx(Scrollbars, __spreadProps(__spreadValues({ autoHide: true, autoHideTimeout: 1e3, autoHideDuration: 200 }, rest), { "data-shoplflow": "ScrollArea", children }));
-};
+  const scrollRef = useRef(null);
+  const mergeRef = useMergeRefs(scrollRef, ref);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+  const onResize = useCallback(() => {
+    setWindowWidth(window.innerWidth);
+    setWindowHeight(window.innerHeight);
+  }, []);
+  useEffect(() => {
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [onResize]);
+  return /* @__PURE__ */ jsx(Fragment, { children: Boolean(windowWidth) && Boolean(windowHeight) && /* @__PURE__ */ jsx(
+    Scrollbars,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+      ref: mergeRef
+    }, rest), {
+      autoHide: true,
+      autoHideTimeout: 1e3,
+      autoHideDuration: 200
+    }), rest), {
+      "data-shoplflow": "ScrollArea",
+      children
+    })
+  ) });
+});
 var ScrollArea_default = ScrollArea;
 var ModalBody = ({
   children,
@@ -1676,7 +1702,7 @@ function mergeRefs(...refs) {
     });
   };
 }
-function useMergeRefs(...refs) {
+function useMergeRefs2(...refs) {
   return useMemo(() => mergeRefs(...refs), refs);
 }
 var Popper = ({
@@ -1712,7 +1738,7 @@ var PopperTrigger = forwardRef(
   (_a, ref) => {
     var _b = _a, { children, isOpen = false } = _b, rest = __objRest(_b, ["children", "isOpen"]);
     const { setReference, setIsOpen } = usePopper();
-    const refs = useMergeRefs(ref, setReference);
+    const refs = useMergeRefs2(ref, setReference);
     useEffect(() => {
       setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
@@ -1723,7 +1749,7 @@ var PopperPortal = forwardRef(
   ({ children, animation: initialAnimation }, ref) => {
     const { floatingStyles, setFloating, isOpen } = usePopper();
     const animation = initialAnimation != null ? initialAnimation : fadeInOut;
-    const refs = useMergeRefs(ref, setFloating);
+    const refs = useMergeRefs2(ref, setFloating);
     if (!isOpen) {
       return null;
     }
@@ -2739,7 +2765,7 @@ var Input = forwardRef(
     const [isHovered, setIsHovered] = useState(false);
     const uniqueId = useId();
     const inputRef = React2__default.useRef(null);
-    const refs = useMergeRefs(ref, inputRef);
+    const refs = useMergeRefs2(ref, inputRef);
     const convertToString = useCallback((value2) => {
       if (typeof value2 !== "number") {
         return typeof value2 === "string" ? value2 : value2.join("");