@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/lib/multiple-select/multiple-select.jsx

@@ -0,0 +1,265 @@
+import { useCallback, useEffect, useId, useMemo, useRef } from 'react';
+import { get, isElement, isNil, trimStart } from 'lodash-es';
+import { getMultipleSelectProps } from './helpers';
+import { Input } from '../input';
+import { InputMask } from '../input-mask';
+import { SvgLoader, VirtualizedList } from '../../components';
+import { useControllableState } from '../../hooks';
+import { ensureArray, matchSearch } from '../../utils';
+import ArrowDownIcon from '../../assets/svg/arrow-down.svg?raw';
+import { Checkbox, Floating, FloatingContent, FloatingTrigger, FormHelperText, TextSkeleton } from '../..';
+import { useWindowScreen } from '../../hooks';
+import { getColorVar, getTypographyVar } from '../../theme';
+import { getResponsiveProp, getSizeVariantState } from '../../utils';
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+export const MultipleSelect = ({ ref, ...props }) => {
+    const { placement = 'bottom-start', open, onOpenChange, searchable = true, value, optionValue, optionLabel, defaultValue, options, onChange, placeholder, listProps, tagLabel, 
+    // selectedRenderer,
+    optionSearchLabel, helperText, error, containerProps, inputProps, displayCount = 1, ...rest } = getMultipleSelectProps(props);
+    const searchInputRef = useRef(null);
+    const floatingRef = useRef(null);
+    const uniqueId = useId();
+    const windowScreen = useWindowScreen();
+    const [inputValue, setInputValue] = useControllableState({
+        defaultValue: inputProps?.defaultValue ?? '',
+        value: inputProps?.value,
+    });
+    const [isOpen, setIsOpen] = useControllableState({
+        defaultValue: open ?? false,
+        value: open,
+    });
+    const prehandleOpenChange = (nextOpen, event, reason) => {
+        setIsOpen(nextOpen);
+        onOpenChange?.(nextOpen, event, reason);
+    };
+    const [controllableValues, setControllableValues] = useControllableState({
+        defaultValue: defaultValue ?? [],
+        value,
+    });
+    const getOptionValue = useCallback((option) => {
+        return typeof optionValue === 'function'
+            ? optionValue(option)
+            : get(option, optionValue ?? 'value');
+    }, [optionValue]);
+    const getTagLabel = (option) => {
+        switch (typeof tagLabel) {
+            case 'function':
+                return tagLabel(option);
+            case 'string':
+                return get(option, tagLabel);
+            default:
+                return null;
+        }
+    };
+    const getOptionValueRef = useRef(getOptionValue);
+    getOptionValueRef.current = getOptionValue;
+    const selectedValueMap = useMemo(() => new Map(controllableValues.map((item) => {
+        const key = typeof item === 'object' ? getOptionValue(item) : item;
+        return [
+            key,
+            (typeof item === 'object' ? item : (options.find((option) => getOptionValue(option) === key) ?? {})),
+        ];
+    })), [controllableValues]);
+    const getOptionLabel = useCallback((option) => {
+        return typeof optionLabel === 'function'
+            ? optionLabel(option)
+            : get(option, optionLabel ?? 'label');
+    }, [optionLabel]);
+    const handleChange = (option, selected) => {
+        let preset = [...controllableValues];
+        if (selected) {
+            preset.push(option);
+        }
+        else {
+            preset = preset.filter((item) => getOptionValue(item) !== getOptionValue(option));
+        }
+        setControllableValues(preset);
+        onChange?.(preset);
+    };
+    const responsiveSize = isNil(windowScreen.name) ? undefined : getResponsiveProp(rest, 'size', windowScreen.name);
+    const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
+    const displayOptions = useMemo(() => {
+        if (!inputValue) {
+            return options;
+        }
+        return options.filter((option) => {
+            let searchLabels = [String(getOptionLabel(option))];
+            switch (typeof optionSearchLabel) {
+                case 'function':
+                    searchLabels = ensureArray(optionSearchLabel(option));
+                    break;
+                case 'string':
+                    searchLabels = ensureArray(String(get(option, optionSearchLabel)));
+                    break;
+                case 'object':
+                    searchLabels = optionSearchLabel.map((label) => String(get(option, label)));
+                    break;
+                default:
+                    break;
+            }
+            return matchSearch(searchLabels, inputValue);
+        });
+    }, [getOptionLabel, inputValue, optionSearchLabel, options]);
+    const RowComponent = ({ row }) => {
+        const rowData = displayOptions.at(row.index);
+        const rowValue = isNil(rowData) ? undefined : getOptionValue(rowData);
+        const isSelected = isNil(rowValue) ? false : selectedValueMap.has(rowValue);
+        const onCheckboxChange = (e) => {
+            if (isNil(rowData))
+                return;
+            handleChange(rowData, e.target.checked);
+        };
+        return (<Checkbox onChange={onCheckboxChange} checked={isSelected} containerProps={{
+                css: {
+                    paddingTop: 2,
+                    paddingBottom: 2,
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                    borderRadius: 8,
+                    ':hover': { backgroundColor: getColorVar('neutral.100') },
+                    minHeight: rowMinHeight,
+                    width: '100%',
+                },
+            }}>
+        <div css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {isNil(rowData) ? <TextSkeleton css={{ width: '100%' }}/> : getOptionLabel(rowData)}
+        </div>
+      </Checkbox>);
+    };
+    const sizeOptions = {
+        apply({ elements }) {
+            const { width } = elements.reference.getBoundingClientRect();
+            Object.assign(elements.floating.style, {
+                minWidth: `${width}px`,
+            });
+        },
+    };
+    const estimateSize = useCallback((_index) => {
+        return rowMinHeight ?? 0;
+    }, [rowMinHeight]);
+    const getItemKey = useCallback((index) => {
+        const option = displayOptions.at(index);
+        return option ? getOptionValue(option).toString() : `${uniqueId}-${index}`;
+    }, [displayOptions, getOptionValue, uniqueId]);
+    const getTextCss = (sizeVariant) => {
+        if (isNil(sizeVariant))
+            return {};
+        const { textVariant } = getSizeVariantState(sizeVariant);
+        if (isNil(textVariant))
+            return {};
+        return getTypographyVar(textVariant);
+    };
+    const onInputChange = (e) => {
+        e.target.value = trimStart(e.target.value);
+        setInputValue(e.target.value);
+        inputProps?.onChange?.(e);
+    };
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (isOpen) {
+                searchInputRef.current?.focus();
+            }
+            else {
+                setInputValue('');
+            }
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [isOpen, setInputValue]);
+    return (<div {...containerProps} css={{ display: 'flex', flexDirection: 'column', width: '100%', ...containerProps?.css }}>
+      <Floating clickProps={{
+            enabled: true,
+        }} dismissProps={{
+            enabled: true,
+        }} sizeOptions={sizeOptions} placement={placement} open={isOpen} onOpenChange={prehandleOpenChange} ref={floatingRef}>
+        <FloatingTrigger>
+          <InputMask type="button" error={isOpen ? false : error} as="button" suffix={<SvgLoader source={ArrowDownIcon} width={20} height={20} css={{
+                transition: 'transform 150ms',
+                ...(isOpen ? { transform: 'rotate(-180deg)' } : {}),
+            }}/>} {...rest} ref={ref}>
+            <div css={[
+            {
+                flex: 1,
+                textAlign: 'left',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                paddingTop: 4,
+                paddingBottom: 4,
+            },
+            getTextCss(rest.xs?.size),
+        ]}>
+              {selectedValueMap.size > 0 ? (<div css={{
+                display: 'flex',
+                gap: 4,
+                ...(displayCount > 1 ? { flexWrap: 'wrap' } : {}),
+            }}>
+                  {Array.from(selectedValueMap.values())
+                .slice(0, displayCount)
+                .map((selectedOption) => {
+                const rowValue = getOptionValue(selectedOption);
+                const rowLabel = getTagLabel(selectedOption) ?? getOptionLabel(selectedOption);
+                return (<div css={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        overflow: 'hidden',
+                        borderRadius: 8,
+                        backgroundColor: getColorVar('neutral.100'),
+                        paddingLeft: 8,
+                        paddingRight: 8,
+                        paddingTop: 4,
+                        paddingBottom: 4,
+                        fontSize: '0.75rem',
+                        lineHeight: '1rem',
+                    }} key={rowValue.toString()}>
+                          <div css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {isElement(rowLabel) ? rowLabel : <span>{rowLabel}</span>}
+                          </div>
+                        </div>);
+            })}
+                  {displayCount < selectedValueMap.size && (<div css={{
+                    borderRadius: 8,
+                    backgroundColor: getColorVar('neutral.100'),
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                    fontSize: '0.75rem',
+                    lineHeight: '1rem',
+                    flexShrink: 0,
+                }}>
+                      <span css={{ fontWeight: 500 }}>+{selectedValueMap.size - displayCount}</span>
+                    </div>)}
+                </div>) : (<span css={{ color: getColorVar('neutral.400'), display: 'block' }}>{placeholder}</span>)}
+            </div>
+          </InputMask>
+        </FloatingTrigger>
+        <FloatingContent>
+          <div css={{
+            paddingTop: 8,
+            paddingBottom: 8,
+            border: '1px solid',
+            borderColor: getColorVar('border.default'),
+            borderRadius: 8,
+            boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+            fontSize: '0.875rem',
+            lineHeight: '1.25rem',
+            backgroundColor: getColorVar('surface.default'),
+        }}>
+            {searchable && (<div css={{ paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: 'relative' }}>
+                <Input xs={{ size: rest.xs?.size }} sm={{ size: rest.sm?.size }} md={{ size: rest.md?.size }} lg={{ size: rest.lg?.size }} value={inputValue} {...inputProps} onChange={onInputChange} ref={searchInputRef}/>
+              </div>)}
+            <VirtualizedList {...listProps} css={{ paddingLeft: 4, paddingRight: 4 }} options={{
+            count: displayOptions.length,
+            estimateSize,
+            getItemKey,
+        }} style={{
+            maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+            ...listProps?.style,
+        }} RowComponent={RowComponent}/>
+          </div>
+        </FloatingContent>
+      </Floating>
+      <FormHelperText error={error}>{helperText}</FormHelperText>
+    </div>);
+};

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

@@ -32,4 +32,3 @@ interface MultipleSelectExtendedProps<O extends object> extends ResponsiveDesign
 }
 export type MultipleSelectProps<O extends object = object> = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, MultipleSelectExtendedProps<O>>;
 export {};
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/nav-link/index.d.ts

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

package/dist/lib/nav-link/index.js

@@ -0,0 +1,2 @@
+export * from './nav-link';
+export * from './types';

package/dist/lib/nav-link/nav-link.d.ts

@@ -1,4 +1,3 @@
-export declare const NavLink: import('react').ForwardRefExoticComponent<Omit<import('react-router').NavLinkProps, "to"> & {
-    to?: import('react-router').NavLinkProps["to"];
-} & import('react').RefAttributes<HTMLAnchorElement>>;
-//# sourceMappingURL=nav-link.d.ts.map
+export declare const NavLink: import("react").ForwardRefExoticComponent<Omit<import("react-router").NavLinkProps, "to"> & {
+    to?: import("react-router").NavLinkProps["to"];
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/lib/nav-link/nav-link.jsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import { isFunction, isNil } from 'lodash-es';
+import { NavLink as ReactRouterNavLink } from 'react-router';
+import { Booleanish } from '../../constants';
+export const NavLink = forwardRef(({ children, style, className, to, ...props }, ref) => {
+    const styleFn = (renderProps) => {
+        return isFunction(style)
+            ? style({
+                ...renderProps,
+                isActive: renderProps.isActive && !isNil(to),
+            })
+            : style;
+    };
+    const classNameFn = (renderProps) => {
+        return isFunction(className)
+            ? className({
+                ...renderProps,
+                isActive: renderProps.isActive && !isNil(to),
+            })
+            : className;
+    };
+    const onClick = (e) => {
+        if (e.currentTarget.getAttribute('aria-disabled') === Booleanish.True) {
+            e.preventDefault();
+        }
+        if (isNil(to)) {
+            e.preventDefault();
+        }
+        props.onClick?.(e);
+    };
+    return (<ReactRouterNavLink {...props} style={styleFn} className={classNameFn} to={to ?? '#'} ref={ref} onClick={onClick}>
+        {(renderProps) => {
+            return (<>
+              {isFunction(children)
+                    ? children({
+                        ...renderProps,
+                        isActive: renderProps.isActive && !isNil(to),
+                    })
+                    : children}
+            </>);
+        }}
+      </ReactRouterNavLink>);
+});

package/dist/lib/nav-link/types.d.ts

@@ -3,4 +3,3 @@ import { ShallowMerge } from '../../types';
 export type NavLinkProps = ShallowMerge<ReactRouterNavLinkProps, {
     to?: ReactRouterNavLinkProps['to'];
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/nav-link/types.js

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

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

@@ -21,4 +21,3 @@ export declare const useNotifications: () => {
     pushNotifications: <T extends PushNotificationTemplate = PushNotificationTemplate>(notifications: T | T[]) => void;
 };
 export {};
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/notifications/helpers.js

@@ -1,43 +1,37 @@
-import { useCallback, useMemo } from "react";
-import "lodash-es";
-import "../../theme/palette.js";
-import { ensureArray } from "../../utils/common.js";
+import { useCallback, useMemo } from 'react';
+import { ensureArray } from '../../utils';
 let _state = { entries: [] };
-const _listeners = /* @__PURE__ */ new Set();
-const notificationStore = {
-  getSnapshot: () => _state,
-  getServerSnapshot: () => _state,
-  subscribe: (listener) => {
-    _listeners.add(listener);
-    return () => _listeners.delete(listener);
-  },
-  setState: (updater) => {
-    _state = updater(_state);
-    _listeners.forEach((l) => l());
-  }
+const _listeners = new Set();
+export const notificationStore = {
+    getSnapshot: () => _state,
+    getServerSnapshot: () => _state,
+    subscribe: (listener) => {
+        _listeners.add(listener);
+        return () => _listeners.delete(listener);
+    },
+    setState: (updater) => {
+        _state = updater(_state);
+        _listeners.forEach((l) => l());
+    },
 };
-const useNotifications = () => {
-  const pushNotifications = useCallback((notifications) => {
-    return notificationStore.setState((prev) => {
-      return {
-        ...prev,
-        entries: [
-          ...prev.entries,
-          ...ensureArray(notifications).map((notification) => ({
-            ...notification,
-            id: Math.random().toString(36).slice(2)
-          }))
-        ]
-      };
-    });
-  }, []);
-  return useMemo(() => {
-    return {
-      pushNotifications
-    };
-  }, [pushNotifications]);
-};
-export {
-  notificationStore,
-  useNotifications
+export const useNotifications = () => {
+    const pushNotifications = useCallback((notifications) => {
+        return notificationStore.setState((prev) => {
+            return {
+                ...prev,
+                entries: [
+                    ...prev.entries,
+                    ...ensureArray(notifications).map((notification) => ({
+                        ...notification,
+                        id: Math.random().toString(36).slice(2),
+                    })),
+                ],
+            };
+        });
+    }, []);
+    return useMemo(() => {
+        return {
+            pushNotifications,
+        };
+    }, [pushNotifications]);
 };

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

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

package/dist/lib/notifications/index.js

@@ -0,0 +1,2 @@
+export * from './notifications';
+export * from './helpers';

package/dist/lib/notifications/notifications.d.ts

@@ -1,2 +1 @@
 export declare const Notifications: () => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=notifications.d.ts.map

package/dist/lib/notifications/notifications.jsx

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+import { isNil } from 'lodash-es';
+import { AnimatePresence, motion, useAnimation } from 'motion/react';
+import { notificationStore } from './helpers';
+import { getColorShadesByVariant } from '../../utils';
+import { FLOATING_Z_INDEX, getTypographyVar, mediaQuery } from '../../theme';
+export const Notifications = () => {
+    const { entries } = useSyncExternalStore(notificationStore.subscribe, notificationStore.getSnapshot, notificationStore.getServerSnapshot);
+    return (<FloatingPortal>
+      <div css={{
+            zIndex: FLOATING_Z_INDEX + 1,
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            pointerEvents: 'none',
+            padding: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            gap: 8,
+        }}>
+        <AnimatePresence mode="popLayout">
+          {entries.map((notification) => {
+            return <Notification key={notification.id} notification={notification}/>;
+        })}
+        </AnimatePresence>
+      </div>
+    </FloatingPortal>);
+};
+const Notification = ({ notification }) => {
+    const { main, light } = getColorShadesByVariant(notification.color);
+    const timerRef = useRef(null);
+    const controls = useAnimation();
+    const progressControls = useAnimation();
+    const startTimeRef = useRef(Date.now());
+    const remainingTimeRef = useRef(notification.duration ?? 3000);
+    const removeNotification = useCallback(() => {
+        notificationStore.setState((prev) => ({
+            ...prev,
+            entries: prev.entries.filter((n) => n.id !== notification.id),
+        }));
+    }, [notification.id]);
+    const clearTimer = useCallback(() => {
+        if (isNil(timerRef.current))
+            return;
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    }, []);
+    const startTimer = useCallback((timeLeft) => {
+        clearTimer();
+        const duration = timeLeft ?? remainingTimeRef.current;
+        startTimeRef.current = Date.now();
+        timerRef.current = setTimeout(() => {
+            removeNotification();
+        }, duration);
+    }, [clearTimer, removeNotification]);
+    useEffect(() => {
+        startTimer(notification.duration ?? 3000);
+        // Start progress bar animation - chạy từ 0% sang 100%
+        progressControls.start({
+            scaleX: 1,
+            transition: {
+                duration: (notification.duration ?? 3000) / 1000,
+                ease: 'linear',
+            },
+        });
+        return () => {
+            clearTimer();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const handleMouseEnter = useCallback(() => {
+        // Tính thời gian còn lại
+        const elapsed = Date.now() - startTimeRef.current;
+        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+        clearTimer();
+        progressControls.stop();
+    }, [clearTimer, progressControls]);
+    const handleMouseLeave = useCallback(() => {
+        startTimer(remainingTimeRef.current);
+        // Tiếp tục progress bar với thời gian còn lại - chạy đến 100%
+        progressControls.start({
+            scaleX: 1,
+            transition: {
+                duration: remainingTimeRef.current / 1000,
+                ease: 'linear',
+            },
+        });
+    }, [startTimer, progressControls]);
+    return (<motion.div layout initial={{ opacity: 0, x: 100 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 300 }} transition={{ duration: 0.3 }} css={{
+            backgroundColor: light,
+            outlineColor: main,
+            width: 440,
+            borderRadius: 12,
+            outlineWidth: 1,
+            outlineOffset: -1,
+            outlineStyle: 'solid',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            maxWidth: '100%',
+            pointerEvents: 'auto',
+            cursor: 'grab',
+            padding: 16,
+            overflow: 'hidden',
+            position: 'relative',
+        }} drag="x" dragConstraints={{ left: 0, right: 0 }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onDragEnd={(_event, info) => {
+            if (Math.abs(info.offset.x) > 100) {
+                // vuốt đủ xa thì ẩn
+                controls.start({ x: info.offset.x > 0 ? 300 : -300, opacity: 0 }).then(removeNotification);
+            }
+            else {
+                // không đủ xa thì quay lại
+                controls.start({ x: 0 });
+            }
+        }}>
+      <div css={{
+            fontSize: getTypographyVar('sm').fontSize,
+            lineHeight: getTypographyVar('sm').lineHeight,
+            fontWeight: 500,
+            [mediaQuery('md')]: {
+                fontSize: getTypographyVar('base').fontSize,
+                lineHeight: getTypographyVar('base').lineHeight,
+            },
+        }}>
+        {notification.title ?? <>&nbsp;</>}
+      </div>
+      <div css={{
+            fontSize: getTypographyVar('xs').fontSize,
+            lineHeight: getTypographyVar('xs').lineHeight,
+            [mediaQuery('md')]: {
+                fontSize: getTypographyVar('sm').fontSize,
+                lineHeight: getTypographyVar('sm').lineHeight,
+            },
+        }}>
+        {notification.message ?? <>&nbsp;</>}
+      </div>
+      <div css={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 4,
+            paddingLeft: 4,
+            paddingRight: 4,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+        }}>
+        <motion.div css={{
+            height: 4,
+            width: '100%',
+            borderRadius: 9999,
+        }} style={{
+            backgroundImage: `linear-gradient(to right, ${light}, ${main})`,
+            transformOrigin: 'left',
+        }} initial={{ scaleX: 0 }} animate={progressControls}/>
+      </div>
+    </motion.div>);
+};

package/dist/lib/otp-input/index.d.ts

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

package/dist/lib/otp-input/index.js

@@ -0,0 +1 @@
+export * from './otp-input';

package/dist/lib/otp-input/otp-input.d.ts

@@ -1,3 +1,2 @@
 import { OtpInputProps } from './types';
 export declare const OtpInput: ({ length, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, }: OtpInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=otp-input.d.ts.map