@janbox/storefront-ui 1.0.13 → 1.0.15

package/dist/lib/loading/text-skeleton/text-skeleton.jsx

@@ -0,0 +1,13 @@
+import { animatePulseStyle } from '../../../constants/emotion';
+import { getColorVar } from '../../../theme';
+export const TextSkeleton = (props) => {
+    return (<span css={{ width: '100%', overflow: 'hidden', display: 'inline-flex', alignItems: 'center' }} {...props}>
+      <span css={[
+            animatePulseStyle,
+            { flex: '1 1 0%', borderRadius: '0.125rem', lineHeight: 1, backgroundColor: getColorVar('neutral.200') },
+        ]}>
+        &nbsp;
+      </span>
+      &nbsp;
+    </span>);
+};

package/dist/lib/loading/text-skeleton/types.d.ts

@@ -1,3 +1,2 @@
 import { JSX } from 'react';
 export type TextSkeletonProps = JSX.IntrinsicElements['p'];
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/loading/text-skeleton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/marquee/index.d.ts

@@ -1,3 +1,2 @@
 export * from './marquee';
 export * from './marquee-item';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/marquee/index.js

@@ -0,0 +1,2 @@
+export * from './marquee';
+export * from './marquee-item';

package/dist/lib/marquee/marquee/helpers.d.ts

@@ -1,3 +1,2 @@
 import { MarqueeProps } from './types';
 export declare const getMarqueeProps: (extended: MarqueeProps) => MarqueeProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/marquee/marquee/helpers.js

@@ -1,15 +1,12 @@
-import { mergeComponentProps } from "../../../utils/index.js";
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {
-  autoScrollOptions: {
-    playOnInit: true,
-    stopOnFocusIn: false,
-    stopOnInteraction: false,
-    stopOnMouseEnter: false
-  }
+    autoScrollOptions: {
+        playOnInit: true,
+        stopOnFocusIn: false,
+        stopOnInteraction: false,
+        stopOnMouseEnter: false,
+    },
 };
-const getMarqueeProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getMarqueeProps
+export const getMarqueeProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/marquee/marquee/index.d.ts

@@ -1,4 +1,3 @@
 export * from './marquee';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/marquee/marquee/index.js

@@ -0,0 +1,3 @@
+export * from './marquee';
+export * from './types';
+export * from './helpers';

package/dist/lib/marquee/marquee/marquee.d.ts

@@ -1,3 +1,2 @@
 import { MarqueeProps } from './types';
 export declare const Marquee: ({ ref, ..._props }: MarqueeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=marquee.d.ts.map

package/dist/lib/marquee/marquee/marquee.jsx

@@ -0,0 +1,88 @@
+import { Fragment, useEffect, useRef } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import AutoScroll from 'embla-carousel-auto-scroll';
+import useEmblaCarousel from 'embla-carousel-react';
+import { getMarqueeProps } from './helpers';
+import { MarqueeDataAttributes } from './types';
+import { Icon } from '../../icon';
+import { HTMLClasses } from '../../../constants';
+import { mediaQuery } from '../../../theme';
+import { flattenChildren } from '../../../utils';
+export const Marquee = ({ ref, ..._props }) => {
+    const { children, xs, sm, md, autoScrollOptions, separatorIcon, ...rest } = getMarqueeProps(_props);
+    const rootEl = useRef(null);
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+        slides: `.${HTMLClasses.MARQUEE_SLIDE}`,
+    }, [AutoScroll(autoScrollOptions)]);
+    const mergedRefs = useMergeRefs([emblaRef, ref, rootEl]);
+    useEffect(() => {
+        const mutationObserver = new MutationObserver((records) => {
+            const target = records.at(0)?.target;
+            if (!target)
+                return;
+            const playState = target.getAttribute(MarqueeDataAttributes.PlayState);
+            const autoScrollPlugin = emblaApi?.plugins().autoScroll;
+            if (playState === 'on') {
+                autoScrollPlugin?.play(0);
+            }
+            else {
+                autoScrollPlugin?.stop();
+            }
+        });
+        if (rootEl.current) {
+            mutationObserver.observe(rootEl.current, {
+                attributes: true,
+                attributeFilter: [MarqueeDataAttributes.PlayState],
+            });
+        }
+        return () => {
+            mutationObserver.disconnect();
+        };
+    }, [emblaApi]);
+    useEffect(() => {
+        const onAutoScrollPlay = () => {
+            rootEl.current?.setAttribute(MarqueeDataAttributes.PlayState, 'on');
+        };
+        const onAutoScrollStop = () => {
+            rootEl.current?.setAttribute(MarqueeDataAttributes.PlayState, 'off');
+        };
+        emblaApi?.on('autoScroll:play', onAutoScrollPlay);
+        emblaApi?.on('autoScroll:stop', onAutoScrollStop);
+        return () => {
+            emblaApi?.off('autoScroll:play', onAutoScrollPlay);
+            emblaApi?.off('autoScroll:stop', onAutoScrollStop);
+        };
+    }, [emblaApi]);
+    return (<div css={[
+            {
+                overflow: 'hidden',
+                maxWidth: '100%',
+            },
+            createStyle(xs),
+            {
+                [mediaQuery('sm')]: createStyle(sm),
+                [mediaQuery('md')]: createStyle(md),
+            },
+        ]} {...rest} ref={mergedRefs}>
+      <div css={{ display: 'flex', alignItems: 'center', '& > *': { flexShrink: 0, flexGrow: 0, overflow: 'hidden' } }}>
+        {flattenChildren(children).map((child, index) => (<Fragment key={`marquee-item-${index}`}>
+            <div className={HTMLClasses.MARQUEE_SLIDE}>{child}</div>
+            {!!separatorIcon && (<div className={HTMLClasses.MARQUEE_SLIDE}>
+                <Icon {...separatorIcon}/>
+              </div>)}
+          </Fragment>))}
+      </div>
+    </div>);
+};
+const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
+    return [
+        {
+            width,
+            height,
+            '& > *': css,
+        },
+        css,
+    ];
+};

package/dist/lib/marquee/marquee/types.d.ts

@@ -14,4 +14,3 @@ export type MarqueeProps = ShallowMerge<MarqueeHTMLProps, {
     separatorIcon?: IconProps;
 }> & ResponsiveDesign<MarqueeResponsiveProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/marquee/marquee/types.js

@@ -1,7 +1,4 @@
-var MarqueeDataAttributes = /* @__PURE__ */ ((MarqueeDataAttributes2) => {
-  MarqueeDataAttributes2["PlayState"] = "data-marquee-play-state";
-  return MarqueeDataAttributes2;
-})(MarqueeDataAttributes || {});
-export {
-  MarqueeDataAttributes
-};
+export var MarqueeDataAttributes;
+(function (MarqueeDataAttributes) {
+    MarqueeDataAttributes["PlayState"] = "data-marquee-play-state";
+})(MarqueeDataAttributes || (MarqueeDataAttributes = {}));

package/dist/lib/marquee/marquee-item/index.d.ts

@@ -1,3 +1,2 @@
 export * from './marquee-item';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/marquee/marquee-item/index.js

@@ -0,0 +1,2 @@
+export * from './marquee-item';
+export * from './types';

package/dist/lib/marquee/marquee-item/marquee-item.d.ts

@@ -1,3 +1,2 @@
 import { MarqueeItemProps } from './types';
 export declare const MarqueeItem: ({ ref, ...props }: MarqueeItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=marquee-item.d.ts.map

package/dist/lib/marquee/marquee-item/marquee-item.jsx

@@ -0,0 +1,5 @@
+export const MarqueeItem = ({ ref, ...props }) => {
+    return (<div {...props} css={{
+            display: 'contents',
+        }} ref={ref}/>);
+};

package/dist/lib/marquee/marquee-item/types.d.ts

@@ -1,3 +1,2 @@
 import { JSX } from 'react';
 export type MarqueeItemProps = JSX.IntrinsicElements['div'];
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/marquee/marquee-item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/menu/index.d.ts

@@ -2,4 +2,3 @@ export * from './menu';
 export * from './menu-trigger';
 export * from './menu-list';
 export * from './menu-item';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/menu/index.js

@@ -0,0 +1,4 @@
+export * from './menu';
+export * from './menu-trigger';
+export * from './menu-list';
+export * from './menu-item';

package/dist/lib/menu/menu/index.d.ts

@@ -1,4 +1,3 @@
 export * from './menu';
 export * from './types';
 export * from './menu';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/menu/menu/index.js

@@ -0,0 +1,3 @@
+export * from './menu';
+export * from './types';
+export * from './menu';

package/dist/lib/menu/menu/menu.d.ts

@@ -1,3 +1,2 @@
 import { MenuProps } from './types';
 export declare const Menu: ({ hoverProps, dismissProps, clickProps, ...props }: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=menu.d.ts.map

package/dist/lib/menu/menu/menu.jsx

@@ -0,0 +1,23 @@
+import { safePolygon } from '@floating-ui/react';
+import { useControllableState } from '../../../hooks';
+import { Floating } from '../../..';
+export const Menu = ({ hoverProps, dismissProps, clickProps, ...props }) => {
+    const [open, setOpen] = useControllableState({
+        defaultValue: false,
+        value: props.open,
+    });
+    const onOpenChange = (open, event, reason) => {
+        setOpen(open);
+        props.onOpenChange?.(open, event, reason);
+    };
+    return (<Floating dismissProps={{
+            enabled: true,
+            ...dismissProps,
+        }} clickProps={{
+            enabled: true,
+            ...clickProps,
+        }} hoverProps={{
+            handleClose: safePolygon(),
+            ...hoverProps,
+        }} {...props} open={open} onOpenChange={onOpenChange}/>);
+};

package/dist/lib/menu/menu/types.d.ts

@@ -1,3 +1,2 @@
 import { FloatingProps } from '../../..';
 export type MenuProps = FloatingProps;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/menu/menu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/menu/menu-item/helpers.d.ts

@@ -1,3 +1,2 @@
 import { MenuItemProps } from './types';
-export declare const getMenuItemProps: (extended: MenuItemProps) => import('../..').ButtonProps;
-//# sourceMappingURL=helpers.d.ts.map
+export declare const getMenuItemProps: (extended: MenuItemProps) => import("../..").ButtonProps;

package/dist/lib/menu/menu-item/helpers.js

@@ -1,16 +1,13 @@
-import { mergeComponentProps } from "../../../utils/index.js";
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {
-  variant: "text",
-  color: "neutral",
-  xs: {
-    css: {
-      width: "100%"
-    }
-  }
+    variant: 'text',
+    color: 'neutral',
+    xs: {
+        css: {
+            width: '100%',
+        },
+    },
 };
-const getMenuItemProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getMenuItemProps
+export const getMenuItemProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/menu/menu-item/index.d.ts

@@ -1,3 +1,2 @@
 export * from './menu-item';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/menu/menu-item/index.js

@@ -0,0 +1,2 @@
+export * from './menu-item';
+export * from './types';

package/dist/lib/menu/menu-item/menu-item.d.ts

@@ -1,2 +1 @@
-export declare const MenuItem: import('react').ForwardRefExoticComponent<Omit<import('../../button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=menu-item.d.ts.map
+export declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<import("../../button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/lib/menu/menu-item/menu-item.jsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { getMenuItemProps } from './helpers';
+import { Button } from '../../button';
+import { Booleanish } from '../../../constants';
+import { useFloatingContext } from '../../..';
+import { HTMLDatasetAttributes } from '../../../constants';
+export const MenuItem = forwardRef((_props, ref) => {
+    const { children, ...props } = getMenuItemProps(_props);
+    const { context } = useFloatingContext();
+    const onClick = (e) => {
+        // MenuItem có thể nằm riêng biệt mà không phụ thuộc vào MenuList
+        if (e.currentTarget.parentElement?.getAttribute(HTMLDatasetAttributes.DATA_MENU_LIST) === Booleanish.True) {
+            context?.onOpenChange(false, e.nativeEvent, 'click');
+        }
+        props.onClick?.(e);
+    };
+    return (<Button {...props} css={{
+            justifyContent: 'start',
+            textAlign: 'left',
+            width: '100%',
+        }} onClick={onClick} ref={ref}>
+      {children}
+    </Button>);
+});

package/dist/lib/menu/menu-item/types.d.ts

@@ -1,3 +1,2 @@
 import { ButtonProps } from '../../button';
 export type MenuItemProps = ButtonProps;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/menu/menu-item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/menu/menu-list/index.d.ts

@@ -1,3 +1,2 @@
 export * from './menu-list';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/menu/menu-list/index.js

@@ -0,0 +1,2 @@
+export * from './menu-list';
+export * from './types';

package/dist/lib/menu/menu-list/menu-list.d.ts

@@ -1,3 +1,2 @@
 import { MenuListProps } from './types';
 export declare const MenuList: ({ children, ...props }: MenuListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=menu-list.d.ts.map

package/dist/lib/menu/menu-list/menu-list.jsx

@@ -0,0 +1,18 @@
+import { FloatingContent } from '../../../lib/floating/floating-content';
+import { HTMLDatasetAttributes } from '../../../constants';
+import { getColorVar } from '../../../theme';
+export const MenuList = ({ children, ...props }) => {
+    return (<FloatingContent css={{
+            backgroundColor: getColorVar('surface.default'),
+            padding: '0.25rem',
+            borderRadius: '0.75rem',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: getColorVar('neutral.100'),
+            boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
+            display: 'flex',
+            flexDirection: 'column',
+        }} {...props} {...{ [HTMLDatasetAttributes.DATA_MENU_LIST]: true }}>
+      {children}
+    </FloatingContent>);
+};

package/dist/lib/menu/menu-list/types.d.ts

@@ -3,4 +3,3 @@ export declare enum MenuListDataAttributes {
     DataMenuList = "data-menu-list"
 }
 export type MenuListProps = FloatingContentProps;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/menu/menu-list/types.js

@@ -1,7 +1,4 @@
-var MenuListDataAttributes = /* @__PURE__ */ ((MenuListDataAttributes2) => {
-  MenuListDataAttributes2["DataMenuList"] = "data-menu-list";
-  return MenuListDataAttributes2;
-})(MenuListDataAttributes || {});
-export {
-  MenuListDataAttributes
-};
+export var MenuListDataAttributes;
+(function (MenuListDataAttributes) {
+    MenuListDataAttributes["DataMenuList"] = "data-menu-list";
+})(MenuListDataAttributes || (MenuListDataAttributes = {}));

package/dist/lib/menu/menu-trigger/index.d.ts

@@ -1,3 +1,2 @@
 export * from './menu-trigger';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/menu/menu-trigger/index.js

@@ -0,0 +1,2 @@
+export * from './menu-trigger';
+export * from './types';

package/dist/lib/menu/menu-trigger/menu-trigger.d.ts

@@ -1,3 +1,2 @@
 import { MenuTriggerProps } from './types';
 export declare const MenuTrigger: ({ ...props }: MenuTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=menu-trigger.d.ts.map

package/dist/lib/menu/menu-trigger/menu-trigger.jsx

@@ -0,0 +1,4 @@
+import { FloatingTrigger } from '../../..';
+export const MenuTrigger = ({ ...props }) => {
+    return <FloatingTrigger {...props}/>;
+};

package/dist/lib/menu/menu-trigger/types.d.ts

@@ -1,3 +1,2 @@
 import { FloatingTriggerProps } from '../../..';
 export type MenuTriggerProps = FloatingTriggerProps;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/menu/menu-trigger/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/multiple-select/helpers.d.ts

@@ -1,3 +1,2 @@
 import { MultipleSelectProps } from './types';
 export declare const getMultipleSelectProps: <O extends object = object>(extended: MultipleSelectProps<O>) => MultipleSelectProps<O>;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/multiple-select/helpers.js

@@ -1,12 +1,9 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+    xs: {
+        size: 'md',
+    },
 };
-const getMultipleSelectProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getMultipleSelectProps
+export const getMultipleSelectProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/multiple-select/index.d.ts

@@ -1,4 +1,3 @@
 export * from './multiple-select';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/multiple-select/index.js

@@ -0,0 +1,3 @@
+export * from './multiple-select';
+export * from './types';
+export * from './helpers';

package/dist/lib/multiple-select/multiple-select.d.ts

@@ -1,3 +1,2 @@
 import { MultipleSelectProps } from './types';
 export declare const MultipleSelect: <O extends object = object>({ ref, ...props }: MultipleSelectProps<O>) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=multiple-select.d.ts.map