@janbox/storefront-ui 1.0.13 → 1.0.15

package/dist/lib/button/helpers.js

@@ -1,74 +1,63 @@
-import { screens } from "../../theme/screens.js";
-import "../../theme/palette.js";
-import { getTypographyVar } from "../../theme/typography.js";
-import { mergeComponentProps, getSizeVariantState } from "../../utils/index.js";
+import { getTypographyVar, screens } from '../../theme';
+import { getSizeVariantState, mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    css: {
-      borderTopLeftRadius: 8,
-      borderBottomLeftRadius: 8,
-      borderTopRightRadius: 8,
-      borderBottomRightRadius: 8,
-      columnGap: 8
+    xs: {
+        css: {
+            borderTopLeftRadius: 8,
+            borderBottomLeftRadius: 8,
+            borderTopRightRadius: 8,
+            borderBottomRightRadius: 8,
+            columnGap: 8,
+        },
+        size: 'md',
     },
-    size: "md"
-  },
-  variant: "contained",
-  color: "primary",
-  type: "button"
+    variant: 'contained',
+    color: 'primary',
+    type: 'button',
 };
 const getButtonResponsiveCssBySize = (size) => {
-  const { inputSize, inputPaddingX } = getSizeVariantState(size);
-  switch (size) {
-    case "sm":
-      return {
-        paddingLeft: inputPaddingX,
-        paddingRight: inputPaddingX,
-        minHeight: inputSize,
-        fontWeight: 400,
-        fontSize: getTypographyVar("sm").fontSize,
-        lineHeight: getTypographyVar("sm").lineHeight
-      };
-    case "md":
-      return {
-        paddingLeft: inputPaddingX,
-        paddingRight: inputPaddingX,
-        minHeight: inputSize,
-        fontWeight: 500,
-        fontSize: getTypographyVar("sm").fontSize,
-        lineHeight: getTypographyVar("sm").lineHeight
-      };
-    case "lg":
-      return {
-        paddingLeft: inputPaddingX,
-        paddingRight: inputPaddingX,
-        minHeight: inputSize,
-        fontWeight: 600,
-        fontSize: getTypographyVar("base").fontSize,
-        lineHeight: getTypographyVar("base").lineHeight
-      };
-    default:
-      return {};
-  }
+    const { inputSize, inputPaddingX } = getSizeVariantState(size);
+    switch (size) {
+        case 'sm':
+            return {
+                paddingLeft: inputPaddingX,
+                paddingRight: inputPaddingX,
+                minHeight: inputSize,
+                fontWeight: 400,
+                fontSize: getTypographyVar('sm').fontSize,
+                lineHeight: getTypographyVar('sm').lineHeight,
+            };
+        case 'md':
+            return {
+                paddingLeft: inputPaddingX,
+                paddingRight: inputPaddingX,
+                minHeight: inputSize,
+                fontWeight: 500,
+                fontSize: getTypographyVar('sm').fontSize,
+                lineHeight: getTypographyVar('sm').lineHeight,
+            };
+        case 'lg':
+            return {
+                paddingLeft: inputPaddingX,
+                paddingRight: inputPaddingX,
+                minHeight: inputSize,
+                fontWeight: 600,
+                fontSize: getTypographyVar('base').fontSize,
+                lineHeight: getTypographyVar('base').lineHeight,
+            };
+        default:
+            return {};
+    }
 };
-const getButtonProps = (extended) => {
-  return mergeComponentProps(
-    defaultProps,
-    extended,
-    ...screens.map((screen) => {
-      return (current) => {
-        var _a;
-        const size = (_a = current[screen]) == null ? void 0 : _a.size;
-        const propsBySize = {};
-        propsBySize[screen] = {
-          css: getButtonResponsiveCssBySize(size)
+export const getButtonProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended, ...screens.map((screen) => {
+        return (current) => {
+            const size = current[screen]?.size;
+            const propsBySize = {};
+            propsBySize[screen] = {
+                css: getButtonResponsiveCssBySize(size),
+            };
+            return propsBySize;
         };
-        return propsBySize;
-      };
-    }),
-    extended
-  );
-};
-export {
-  getButtonProps
+    }), extended);
 };

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

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

package/dist/lib/button/index.js

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

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

@@ -22,4 +22,3 @@ type ButtonExtendedProps = ResponsiveDesign<ButtonResponsiveProps> & {
 };
 export type ButtonProps = ShallowMerge<JSX.IntrinsicElements['button'], ButtonExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/button/types.js

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

package/dist/lib/cascader/cascader-floating-content.d.ts

@@ -27,4 +27,3 @@ type CascaderFloatingContentProps = {
 };
 export declare const CascaderFloatingContent: ({ searchable, selectedPath, options, loadOptions, onChange, inputProps, listProps, separator, lazy, xs, sm, md, lg, }: CascaderFloatingContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=cascader-floating-content.d.ts.map

package/dist/lib/cascader/cascader-floating-content.jsx

@@ -0,0 +1,341 @@
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { isNil, isString, trimStart } from 'lodash-es';
+import { findOptionPath, hasChildren, isExpandable } from './helpers';
+import { Input } from '../input';
+import { TextSkeleton } from '../loading/text-skeleton';
+import ArrowRightIcon from '@/assets/svg/arrow-right.svg?raw';
+import CheckIcon from '@/assets/svg/done-check.svg?raw';
+import { SvgLoader, VirtualizedList } from '../../components';
+import { truncateStyle } from '../../constants/emotion';
+import { ensureArray, getResponsiveProp, getSizeVariantState, matchSearch } from '../../utils';
+import { useControllableState, useWindowScreen } from '../../hooks';
+import { useFloatingContext } from '../floating';
+import { getColorVar, getTypographyVar } from '../../theme';
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+export const CascaderFloatingContent = ({ searchable, selectedPath, options, loadOptions, onChange, inputProps, listProps, separator, lazy, xs, sm, md, lg, }) => {
+    const { context } = useFloatingContext();
+    const searchInputRef = useRef(null);
+    const uniqueId = useId();
+    const [inputValue, setInputValue] = useControllableState({
+        defaultValue: inputProps?.defaultValue ?? '',
+        value: inputProps?.value,
+    });
+    const windowScreen = useWindowScreen();
+    // Track current navigation path (for displaying children)
+    const [expandedPath, setExpandedPath] = useState([]);
+    // Lazy loading state: merged options tree with dynamically loaded children
+    const [dynamicChildren, setDynamicChildren] = useState({});
+    const [isLoading, setIsLoading] = useState(false);
+    // On mount, resolve the expandedPath from selectedPath.
+    // For lazy mode, this progressively loads children along the path.
+    useEffect(() => {
+        if (selectedPath.length === 0)
+            return;
+        // Determine target: if the last segment is a leaf, expand to its parent level
+        const resolveExpandedPath = (fullPath, opts) => {
+            const pathOptions = findOptionPath(opts, fullPath);
+            const lastOption = pathOptions[pathOptions.length - 1];
+            if (lastOption && !isExpandable(lastOption)) {
+                return fullPath.slice(0, -1);
+            }
+            return fullPath;
+        };
+        if (!loadOptions) {
+            // Non-lazy: options are fully available, resolve synchronously
+            setExpandedPath(resolveExpandedPath(selectedPath, options));
+            return;
+        }
+        // Lazy: progressively load children along the selectedPath
+        let cancelled = false;
+        const loadAlongPath = async () => {
+            setIsLoading(true);
+            try {
+                let currentOpts = options;
+                const loadedChildren = {};
+                const pathSoFar = [];
+                // Walk each segment except the last (leaf) to load its children
+                const targetPath = resolveExpandedPath(selectedPath, options);
+                // If we can already resolve the full path without loading, just set it
+                const existingPath = findOptionPath(options, targetPath);
+                if (existingPath.length === targetPath.length) {
+                    if (!cancelled)
+                        setExpandedPath(targetPath);
+                    return;
+                }
+                for (let i = 0; i < targetPath.length; i++) {
+                    if (cancelled)
+                        return;
+                    const value = targetPath[i];
+                    const found = currentOpts.find((opt) => opt.value === value);
+                    if (!found)
+                        break;
+                    pathSoFar.push(found);
+                    if (isExpandable(found) && !hasChildren(found)) {
+                        // Need to load children for this node
+                        const children = await loadOptions(pathSoFar);
+                        if (cancelled)
+                            return;
+                        const cacheKey = targetPath.slice(0, i + 1).join('/');
+                        loadedChildren[cacheKey] = children;
+                        currentOpts = children;
+                    }
+                    else if (found.children?.length) {
+                        currentOpts = found.children;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (!cancelled) {
+                    if (Object.keys(loadedChildren).length > 0) {
+                        setDynamicChildren((prev) => ({ ...prev, ...loadedChildren }));
+                    }
+                    setExpandedPath(targetPath);
+                }
+            }
+            finally {
+                if (!cancelled)
+                    setIsLoading(false);
+            }
+        };
+        loadAlongPath();
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Merge external options with dynamically loaded children
+    const mergedOptions = useMemo(() => {
+        if (!loadOptions || Object.keys(dynamicChildren).length === 0)
+            return options;
+        const mergeRecursive = (opts, parentKey) => {
+            return opts.map((opt) => {
+                const key = parentKey ? `${parentKey}/${opt.value}` : opt.value;
+                const loaded = dynamicChildren[key];
+                const children = loaded ?? opt.children;
+                return {
+                    ...opt,
+                    children: children ? mergeRecursive(children, key) : undefined,
+                };
+            });
+        };
+        return mergeRecursive(options, '');
+    }, [options, dynamicChildren, loadOptions]);
+    // Navigate to a specific level via breadcrumb click
+    const handleBreadcrumbClick = (e) => {
+        const level = Number(e.currentTarget.dataset.index);
+        if (level < 0) {
+            setExpandedPath([]);
+        }
+        else {
+            setExpandedPath(expandedPath.slice(0, level + 1));
+        }
+    };
+    // Get expanded path options for breadcrumb display
+    const expandedOptions = useMemo(() => {
+        return findOptionPath(mergedOptions, expandedPath);
+    }, [mergedOptions, expandedPath]);
+    // Get current level options to display
+    const currentOptions = useMemo(() => {
+        if (expandedPath.length === 0) {
+            return mergedOptions;
+        }
+        let current = mergedOptions;
+        for (const value of expandedPath) {
+            const found = current.find((opt) => opt.value === value);
+            if (found?.children?.length) {
+                current = found.children;
+            }
+            else {
+                break;
+            }
+        }
+        return current;
+    }, [mergedOptions, expandedPath]);
+    const displayOptions = useMemo(() => {
+        if (!inputValue) {
+            return currentOptions;
+        }
+        return currentOptions.filter((option) => {
+            const searchLabels = ensureArray(option.searchLabel ?? []);
+            if (!searchLabels.length && isString(option.label)) {
+                searchLabels.push(option.label);
+            }
+            return matchSearch(searchLabels, inputValue);
+        });
+    }, [inputValue, currentOptions]);
+    const responsiveSize = isNil(windowScreen.name)
+        ? undefined
+        : getResponsiveProp({ xs, sm, md, lg }, 'size', windowScreen.name);
+    const { inputSize: rowMinHeight = 0, inputPaddingX } = getSizeVariantState(responsiveSize);
+    const onInputChange = (e) => {
+        e.target.value = trimStart(e.target.value);
+        setInputValue(e.target.value);
+        inputProps?.onChange?.(e);
+    };
+    // Focus search input on mount (component only mounts when floating is open)
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            searchInputRef.current?.focus();
+        }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+    const estimateSize = useCallback((_index) => {
+        return rowMinHeight ?? 0;
+    }, [rowMinHeight]);
+    const getItemKey = useCallback((index) => {
+        const option = displayOptions.at(index);
+        return option ? option.value : `${uniqueId}-${index}`;
+    }, [displayOptions, uniqueId]);
+    // Render breadcrumbs navigation
+    const renderBreadcrumbs = () => {
+        if (expandedPath.length === 0)
+            return null;
+        return (<div css={{
+                paddingLeft: inputPaddingX,
+                paddingRight: inputPaddingX,
+                minHeight: rowMinHeight,
+                borderTop: `1px solid ${getColorVar('neutral.200')}`,
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.25rem',
+                flexWrap: 'wrap',
+                paddingTop: '0.25rem',
+                paddingBottom: '0.25rem',
+            }}>
+        {/* Root/All button */}
+        <button data-index={-1} type="button" onClick={handleBreadcrumbClick} css={{
+                color: getColorVar('neutral.500'),
+                transition: 'color 150ms',
+                '&:hover': { color: getColorVar('primary.600') },
+            }}>
+          All
+        </button>
+
+        {/* Path items */}
+        {expandedOptions.map((opt, idx) => (<div key={`${uniqueId}-breadcrumb-${opt.value}`} css={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+            <span css={{ color: getColorVar('neutral.400') }}>{separator}</span>
+            <button data-index={idx} type="button" onClick={handleBreadcrumbClick} css={{
+                    color: idx === expandedOptions.length - 1 ? getColorVar('primary.600') : getColorVar('neutral.600'),
+                    fontWeight: idx === expandedOptions.length - 1 ? 500 : undefined,
+                    transition: 'color 150ms',
+                    '&:hover': { color: getColorVar('primary.600') },
+                }}>
+              {opt.breadcrumbLabel ?? opt.label}
+            </button>
+          </div>))}
+      </div>);
+    };
+    const RowComponent = ({ row }) => {
+        const rowData = displayOptions.at(row.index);
+        if (isNil(rowData))
+            return <></>;
+        const isSelected = selectedPath.includes(rowData.value);
+        const handleSelect = async () => {
+            if (rowData.disabled || isLoading)
+                return;
+            const parentPath = [];
+            let current = mergedOptions;
+            for (const value of expandedPath) {
+                const found = current.find((opt) => opt.value === value);
+                if (found?.children?.length) {
+                    parentPath.push(value);
+                    current = found.children;
+                }
+                else {
+                    break;
+                }
+            }
+            const newPath = [...parentPath, rowData.value];
+            const newSelectedOptions = findOptionPath(mergedOptions, newPath);
+            if (isExpandable(rowData)) {
+                if (!hasChildren(rowData) && loadOptions) {
+                    const cacheKey = newPath.join('/');
+                    setIsLoading(true);
+                    try {
+                        const children = await loadOptions(newSelectedOptions);
+                        setDynamicChildren((prev) => ({ ...prev, [cacheKey]: children }));
+                        setExpandedPath(newPath);
+                    }
+                    finally {
+                        setIsLoading(false);
+                    }
+                }
+                else {
+                    setExpandedPath(newPath);
+                }
+            }
+            else {
+                onChange?.(newPath, newSelectedOptions);
+                context.onOpenChange?.(false);
+            }
+            setInputValue('');
+            setTimeout(() => {
+                searchInputRef.current?.focus();
+            });
+        };
+        return (<div key={`${uniqueId}-option-${rowData.value}`} aria-hidden role="button" onClick={handleSelect} css={{
+                minHeight: rowMinHeight,
+                paddingLeft: inputPaddingX,
+                paddingRight: inputPaddingX,
+                paddingTop: '0.25rem',
+                paddingBottom: '0.25rem',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+                borderRadius: '0.5rem',
+                transition: 'background-color 150ms, color 150ms',
+                '&:hover': { backgroundColor: getColorVar('neutral.100') },
+                ...(isSelected && !isExpandable(rowData)
+                    ? {
+                        color: getColorVar('primary.600'),
+                        backgroundColor: getColorVar('primary.100'),
+                    }
+                    : {}),
+                ...(rowData.disabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}),
+            }}>
+        {isLoading ? (<TextSkeleton />) : (<>
+            <div css={{ flex: 1, ...truncateStyle }}>{rowData.label}</div>
+            {isExpandable(rowData) ? (<SvgLoader source={ArrowRightIcon} width={20} height={20} css={{ color: getColorVar('neutral.400') }}/>) : (isSelected && (<SvgLoader source={CheckIcon} width={20} height={20} css={{ color: getColorVar('primary.600') }}/>))}
+          </>)}
+      </div>);
+    };
+    return (<div css={{
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
+            border: `1px solid ${getColorVar('border.default')}`,
+            borderRadius: '0.5rem',
+            boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+            fontSize: getTypographyVar('sm').fontSize,
+            lineHeight: getTypographyVar('sm').lineHeight,
+            backgroundColor: getColorVar('surface.default'),
+        }}>
+      {/* 1. Top - Search input (optional) */}
+      {!searchable && (<div css={{
+                paddingLeft: '0.5rem',
+                paddingRight: '0.5rem',
+                paddingTop: '0.5rem',
+                paddingBottom: '0.5rem',
+            }}>
+          <Input xs={{ size: xs?.size }} sm={{ size: sm?.size }} md={{ size: md?.size }} lg={{ size: lg?.size }} value={inputValue} placeholder="Search..." {...inputProps} onChange={onInputChange} ref={searchInputRef}/>
+        </div>)}
+
+      {/* 2. Center - Current level options */}
+      <VirtualizedList {...listProps} css={{
+            paddingLeft: 4,
+            paddingRight: 4,
+            ...(isLoading ? { cursor: 'wait', pointerEvents: 'none' } : {}),
+        }} options={{
+            count: displayOptions.length,
+            estimateSize,
+            getItemKey,
+            overscan: lazy ? undefined : currentOptions.length,
+        }} style={{
+            maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+            ...listProps?.style,
+        }} RowComponent={RowComponent}/>
+
+      {/* 3. Bottom - Breadcrumbs navigation */}
+      {renderBreadcrumbs()}
+    </div>);
+};

package/dist/lib/cascader/cascader.d.ts

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

package/dist/lib/cascader/cascader.jsx

@@ -0,0 +1,86 @@
+import { useRef } from 'react';
+import { isNil } from 'lodash-es';
+import { CascaderFloatingContent } from './cascader-floating-content';
+import { getCascaderProps } from './helpers';
+import { InputMask } from '../input-mask';
+import ArrowDownIcon from '@/assets/svg/arrow-down.svg?raw';
+import { getColorVar, getTypographyVar } from '../../theme';
+import { truncateStyle } from '../../constants/emotion';
+import { getSizeVariantState } from '../../utils';
+import { useControllableState } from '../../hooks';
+import { Floating, FloatingContent, FloatingTrigger } from '../floating';
+import { FormHelperText } from '../form-helper-text';
+import { SvgLoader } from '../../components';
+import { Primitive } from '../primitive';
+const DEFAULT_SEPARATOR = '/';
+export const Cascader = ({ ref, ..._props }) => {
+    const { placement = 'bottom-start', open, onOpenChange, searchable = false, value: selectedPath = [], valueRenderer, options, loadOptions, onChange, placeholder, listProps, separator = DEFAULT_SEPARATOR, helperText, error, containerProps, inputProps, fullWidth = true, lazy = true, menuWidth = 'exact-reference', ...rest } = getCascaderProps(_props);
+    const floatingRef = useRef(null);
+    const [isOpen, setIsOpen] = useControllableState({
+        defaultValue: open ?? false,
+        value: open,
+    });
+    const handleOpenChange = (nextOpen, event, reason) => {
+        setIsOpen(nextOpen);
+        onOpenChange?.(nextOpen, event, reason);
+    };
+    const sizeOptions = {
+        apply({ elements }) {
+            const { width } = elements.reference.getBoundingClientRect();
+            const sizeStyle = {};
+            switch (menuWidth) {
+                case 'exact-reference':
+                    sizeStyle.width = `${width}px`;
+                    break;
+                case 'min-reference':
+                    sizeStyle.minWidth = `${width}px`;
+                    break;
+                default:
+                    sizeStyle.width = `${menuWidth}px`;
+                    break;
+            }
+            Object.assign(elements.floating.style, sizeStyle);
+        },
+    };
+    const getTextCss = (sizeVariant) => {
+        if (isNil(sizeVariant))
+            return {};
+        const { textVariant } = getSizeVariantState(sizeVariant);
+        if (isNil(textVariant))
+            return {};
+        return getTypographyVar(textVariant);
+    };
+    return (<Primitive {...containerProps} css={{
+            display: 'flex',
+            flexDirection: 'column',
+            ...(fullWidth ? { width: '100%' } : {}),
+        }} as="div">
+      <Floating clickProps={{
+            enabled: true,
+        }} dismissProps={{
+            enabled: true,
+        }} sizeOptions={sizeOptions} placement={placement} open={isOpen} onOpenChange={handleOpenChange} 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',
+                ...truncateStyle,
+            },
+            getTextCss(rest.xs?.size),
+        ]}>
+              {selectedPath.length > 0 ? (<div>{valueRenderer ?? selectedPath.join(' / ')}</div>) : (<div css={{ color: getColorVar('neutral.400') }}>{placeholder}</div>)}
+            </div>
+          </InputMask>
+        </FloatingTrigger>
+        <FloatingContent>
+          <CascaderFloatingContent searchable={searchable} selectedPath={selectedPath} options={options} loadOptions={loadOptions} onChange={onChange} inputProps={inputProps} listProps={listProps} separator={separator} lazy={lazy} xs={rest.xs} sm={rest.sm} md={rest.md} lg={rest.lg}/>
+        </FloatingContent>
+      </Floating>
+      <FormHelperText error={error}>{helperText}</FormHelperText>
+    </Primitive>);
+};

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

@@ -17,4 +17,3 @@ export declare const isExpandable: (option: CascaderOption) => boolean;
  * Filter options by search text
  */
 export declare const filterOptions: (options: CascaderOption[], searchText: string) => CascaderOption[];
-//# sourceMappingURL=helpers.d.ts.map