@shoplflow/base 0.25.1 → 0.25.3

package/dist/index.d.cts

@@ -91,6 +91,7 @@ declare const colorTokens: {
     primary400: string;
 };
 declare const spacingTokens: {
+    spacing02: string;
     spacing04: string;
     spacing06: string;
     spacing08: string;
@@ -127,6 +128,8 @@ declare const typographyTokens: {
     body3_500: string;
     caption_700: string;
     caption_400: string;
+    paragraph1: string;
+    paragraph2: string;
 };
 
 declare type ColorTokens = keyof typeof colorTokens;
@@ -622,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 {
@@ -707,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";
@@ -982,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

@@ -91,6 +91,7 @@ declare const colorTokens: {
     primary400: string;
 };
 declare const spacingTokens: {
+    spacing02: string;
     spacing04: string;
     spacing06: string;
     spacing08: string;
@@ -127,6 +128,8 @@ declare const typographyTokens: {
     body3_500: string;
     caption_700: string;
     caption_400: string;
+    paragraph1: string;
+    paragraph2: string;
 };
 
 declare type ColorTokens = keyof typeof colorTokens;
@@ -622,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 {
@@ -707,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";
@@ -982,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';
@@ -371,6 +371,7 @@ var colorTokens = {
   primary300,
   primary400
 };
+var spacing02 = "var(--spacing02)";
 var spacing04 = "var(--spacing04)";
 var spacing06 = "var(--spacing06)";
 var spacing08 = "var(--spacing08)";
@@ -382,6 +383,7 @@ var spacing30 = "var(--spacing30)";
 var spacing32 = "var(--spacing32)";
 var spacing40 = "var(--spacing40)";
 var spacingTokens = {
+  spacing02,
   spacing04,
   spacing06,
   spacing08,
@@ -418,6 +420,8 @@ var body3_400 = ".body3_400";
 var body3_500 = ".body3_500";
 var caption_700 = ".caption_700";
 var caption_400 = ".caption_400";
+var paragraph1 = ".paragraph1";
+var paragraph2 = ".paragraph2";
 var typographyTokens = {
   heading1_700,
   heading1_400,
@@ -439,7 +443,9 @@ var typographyTokens = {
   body3_400,
   body3_500,
   caption_700,
-  caption_400
+  caption_400,
+  paragraph1,
+  paragraph2
 };
 
 // src/components/Stack/Stack.styled.ts
@@ -765,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,
@@ -1670,7 +1702,7 @@ function mergeRefs(...refs) {
     });
   };
 }
-function useMergeRefs(...refs) {
+function useMergeRefs2(...refs) {
   return useMemo(() => mergeRefs(...refs), refs);
 }
 var Popper = ({
@@ -1706,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]);
@@ -1717,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;
     }
@@ -2733,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("");