@janbox/storefront-ui 1.0.3 → 1.0.4

package/dist/components/virtualized-list.d.ts

@@ -2,8 +2,8 @@ import { JSX, Ref } from 'react';
 import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual';
 import { ScrollViewRef } from './scroll-view';
 import { ShallowMerge } from '../types';
-type VirtualizedListOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, HTMLDivElement>>[0], 'getScrollElement'>;
-type VirtualizedListProps = ShallowMerge<JSX.IntrinsicElements['div'], {
+type VirtualizedListOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, HTMLDivElement>>[0], "getScrollElement">;
+type VirtualizedListProps = ShallowMerge<JSX.IntrinsicElements["div"], {
     RowComponent: React.ComponentType<{
         row: VirtualItem;
     }>;

package/dist/components/virtualized-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtualized-list.d.ts","sourceRoot":"","sources":["../../src/components/virtualized-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAc,aAAa,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,sBAAsB,GAAG,IAAI,CAChC,UAAU,CAAC,OAAO,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,EACpE,kBAAkB,CACnB,CAAC;AAEF,KAAK,oBAAoB,GAAG,YAAY,CACtC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,GAAG,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC;IACxD,OAAO,EAAE,sBAAsB,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B,CACF,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAC;AAE1E,eAAO,MAAM,eAAe,6CAA8C,oBAAoB,qDAwC7F,CAAC"}
+{"version":3,"file":"virtualized-list.d.ts","sourceRoot":"","sources":["../../src/components/virtualized-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAU,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAc,aAAa,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,sBAAsB,GAAG,IAAI,CAChC,UAAU,CAAC,OAAO,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,EACpE,kBAAkB,CACnB,CAAC;AAEF,KAAK,oBAAoB,GAAG,YAAY,CACtC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,GAAG,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC;IACxD,OAAO,EAAE,sBAAsB,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B,CACF,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAC;AAE1E,eAAO,MAAM,eAAe,6CAKzB,oBAAoB,qDAgDtB,CAAC"}

package/dist/components/virtualized-list.js

@@ -4,7 +4,12 @@ import { useMergeRefs } from "@floating-ui/react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { motion } from "motion/react";
 import { ScrollView } from "./scroll-view.js";
-const VirtualizedList = ({ RowComponent, options, ref, ...props }) => {
+const VirtualizedList = ({
+  RowComponent,
+  options,
+  ref,
+  ...props
+}) => {
   var _a;
   const scrollRef = useRef(null);
   const mergedRefs = useMergeRefs([scrollRef, ref]);
@@ -32,7 +37,15 @@ const VirtualizedList = ({ RowComponent, options, ref, ...props }) => {
           style: {
             transform: `translateY(${((_a = items.at(0)) == null ? void 0 : _a.start) ?? 0}px)`
           },
-          children: items.map((virtualRow) => /* @__PURE__ */ jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, children: /* @__PURE__ */ jsx(RowComponent, { row: virtualRow }) }, virtualRow.key))
+          children: items.map((virtualRow) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-index": virtualRow.index,
+              ref: virtualizer.measureElement,
+              children: /* @__PURE__ */ jsx(RowComponent, { row: virtualRow })
+            },
+            virtualRow.key
+          ))
         }
       )
     }

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

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import { CascaderOption } from './types';
+import { InputProps } from '../input';
+import { SizeVariant } from '../../types';
+type CascaderFloatingContentProps = {
+    searchable: boolean;
+    selectedPath: string[];
+    options: CascaderOption[];
+    loadOptions?: (tree: CascaderOption[]) => Promise<CascaderOption[]>;
+    onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
+    inputProps?: InputProps;
+    listProps?: HTMLAttributes<HTMLDivElement>;
+    separator: React.ReactNode;
+    lazy: boolean;
+    xs?: {
+        size?: SizeVariant;
+    };
+    sm?: {
+        size?: SizeVariant;
+    };
+    md?: {
+        size?: SizeVariant;
+    };
+    lg?: {
+        size?: SizeVariant;
+    };
+};
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascader-floating-content.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader-floating-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAOf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAe7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAMtC,KAAK,4BAA4B,GAAG;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACxE,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC5B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC5B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC5B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,0HAcjC,4BAA4B,qDA+b9B,CAAC"}

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

@@ -0,0 +1,411 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useRef, useId, useState, useEffect, useMemo, useCallback } from "react";
+import { isString, isNil, trimStart } from "lodash-es";
+import { findOptionPath, isExpandable, hasChildren } from "./helpers.js";
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg.js";
+import CheckIcon from "../../assets/svg/done-check.svg.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { useFloatingContext } from "../floating/floating/helpers.js";
+import { ensureArray, matchSearch } from "../../utils/common.js";
+import { Input } from "../input/input.js";
+import { TextSkeleton } from "../loading/text-skeleton/text-skeleton.js";
+import { truncate } from "../../utils/emotion-helpers.js";
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+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 == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const windowScreen = useWindowScreen();
+  const [expandedPath, setExpandedPath] = useState([]);
+  const [dynamicChildren, setDynamicChildren] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    if (selectedPath.length === 0) return;
+    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) {
+      setExpandedPath(resolveExpandedPath(selectedPath, options));
+      return;
+    }
+    let cancelled = false;
+    const loadAlongPath = async () => {
+      var _a;
+      setIsLoading(true);
+      try {
+        let currentOpts = options;
+        const loadedChildren = {};
+        const pathSoFar = [];
+        const targetPath = resolveExpandedPath(selectedPath, options);
+        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)) {
+            const children = await loadOptions(pathSoFar);
+            if (cancelled) return;
+            const cacheKey = targetPath.slice(0, i + 1).join("/");
+            loadedChildren[cacheKey] = children;
+            currentOpts = children;
+          } else if ((_a = found.children) == null ? void 0 : _a.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;
+    };
+  }, []);
+  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) : void 0
+        };
+      });
+    };
+    return mergeRecursive(options, "");
+  }, [options, dynamicChildren, loadOptions]);
+  const handleBreadcrumbClick = (e) => {
+    const level = Number(e.currentTarget.dataset.index);
+    if (level < 0) {
+      setExpandedPath([]);
+    } else {
+      setExpandedPath(expandedPath.slice(0, level + 1));
+    }
+  };
+  const expandedOptions = useMemo(() => {
+    return findOptionPath(mergedOptions, expandedPath);
+  }, [mergedOptions, expandedPath]);
+  const currentOptions = useMemo(() => {
+    var _a;
+    if (expandedPath.length === 0) {
+      return mergedOptions;
+    }
+    let current = mergedOptions;
+    for (const value of expandedPath) {
+      const found = current.find((opt) => opt.value === value);
+      if ((_a = found == null ? void 0 : found.children) == null ? void 0 : _a.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) ? void 0 : getResponsiveProp({ xs, sm, md, lg }, "size", windowScreen.name);
+  const { inputSize: rowMinHeight = 0, inputPaddingX } = getSizeVariantState(responsiveSize);
+  const onInputChange = (e) => {
+    var _a;
+    e.target.value = trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a.call(inputProps, e);
+  };
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      var _a;
+      (_a = searchInputRef.current) == null ? void 0 : _a.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]
+  );
+  const renderBreadcrumbs = () => {
+    if (expandedPath.length === 0) return null;
+    return /* @__PURE__ */ jsxs(
+      "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"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-index": -1,
+              type: "button",
+              onClick: handleBreadcrumbClick,
+              css: {
+                color: getColorVar("neutral.500"),
+                transition: "color 150ms",
+                "&:hover": { color: getColorVar("primary.600") }
+              },
+              children: "All"
+            }
+          ),
+          expandedOptions.map((opt, idx) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              css: { display: "flex", alignItems: "center", gap: "0.25rem" },
+              children: [
+                /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400") }, children: separator }),
+                /* @__PURE__ */ jsx(
+                  "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 : void 0,
+                      transition: "color 150ms",
+                      "&:hover": { color: getColorVar("primary.600") }
+                    },
+                    children: opt.breadcrumbLabel ?? opt.label
+                  }
+                )
+              ]
+            },
+            `${uniqueId}-breadcrumb-${opt.value}`
+          ))
+        ]
+      }
+    );
+  };
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    if (isNil(rowData)) return /* @__PURE__ */ jsx(Fragment, {});
+    const isSelected = selectedPath.includes(rowData.value);
+    const handleSelect = async () => {
+      var _a, _b;
+      if (rowData.disabled || isLoading) return;
+      const parentPath = [];
+      let current = mergedOptions;
+      for (const value of expandedPath) {
+        const found = current.find((opt) => opt.value === value);
+        if ((_a = found == null ? void 0 : found.children) == null ? void 0 : _a.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 == null ? void 0 : onChange(newPath, newSelectedOptions);
+        (_b = context.onOpenChange) == null ? void 0 : _b.call(context, false);
+      }
+      setInputValue("");
+      setTimeout(() => {
+        var _a2;
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      });
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        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" } : {}
+        },
+        children: isLoading ? /* @__PURE__ */ jsx(TextSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { css: { flex: 1, ...truncate }, children: rowData.label }),
+          isExpandable(rowData) ? /* @__PURE__ */ jsx(
+            SvgLoader,
+            {
+              source: ArrowRightIcon,
+              width: 20,
+              height: 20,
+              css: { color: getColorVar("neutral.400") }
+            }
+          ) : isSelected && /* @__PURE__ */ jsx(
+            SvgLoader,
+            {
+              source: CheckIcon,
+              width: 20,
+              height: 20,
+              css: { color: getColorVar("primary.600") }
+            }
+          )
+        ] })
+      },
+      `${uniqueId}-option-${rowData.value}`
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "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")
+      },
+      children: [
+        !searchable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            css: {
+              paddingLeft: "0.5rem",
+              paddingRight: "0.5rem",
+              paddingTop: "0.5rem",
+              paddingBottom: "0.5rem"
+            },
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                xs: { size: xs == null ? void 0 : xs.size },
+                sm: { size: sm == null ? void 0 : sm.size },
+                md: { size: md == null ? void 0 : md.size },
+                lg: { size: lg == null ? void 0 : lg.size },
+                value: inputValue,
+                placeholder: "Search...",
+                ...inputProps,
+                onChange: onInputChange,
+                ref: searchInputRef
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          VirtualizedList,
+          {
+            ...listProps,
+            css: {
+              paddingLeft: 4,
+              paddingRight: 4,
+              ...isLoading ? { cursor: "wait", pointerEvents: "none" } : {}
+            },
+            options: {
+              count: 2,
+              estimateSize,
+              getItemKey,
+              overscan: lazy ? void 0 : currentOptions.length
+            },
+            style: {
+              maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+              ...listProps == null ? void 0 : listProps.style
+            },
+            RowComponent
+          }
+        ),
+        renderBreadcrumbs()
+      ]
+    }
+  );
+};
+export {
+  CascaderFloatingContent
+};

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

@@ -1,3 +1,3 @@
-import { CascaderOption, CascaderOptionValue, CascaderProps } from './types';
-export declare const Cascader: <V extends CascaderOptionValue = CascaderOptionValue, O extends CascaderOption<V> = CascaderOption<V>>({ ref, ..._props }: CascaderProps<V, O>) => import("@emotion/react/jsx-runtime").JSX.Element;
+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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cascader.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA2B7E,eAAO,MAAM,QAAQ,GACnB,CAAC,SAAS,mBAAmB,wBAC7B,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,0CAI1B,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,qDAigBrB,CAAC"}
+{"version":3,"file":"cascader.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAqBxC,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAuJzD,CAAC"}

package/dist/lib/cascader/cascader.js

@@ -1,42 +1,36 @@
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
-import { useRef, useId, useState, useMemo, useEffect, useCallback } from "react";
-import { isString, isNil, trimStart } from "lodash-es";
-import { getCascaderProps, findOptionPath, hasChildren } from "./helpers.js";
-import { SvgLoader } from "../../components/svg-loader.js";
-import { VirtualizedList } from "../../components/virtualized-list.js";
-import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
-import { useControllableState } from "../../hooks/use-controllable-state.js";
-import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef } from "react";
+import { isNil } from "lodash-es";
+import { CascaderFloatingContent } from "./cascader-floating-content.js";
+import { getCascaderProps } from "./helpers.js";
 import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
-import ArrowRightIcon from "../../assets/svg/arrow-right.svg.js";
-import CheckIcon from "../../assets/svg/done-check.svg.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { ensureArray, matchSearch } from "../../utils/common.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
 import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
+import { truncate } from "../../utils/emotion-helpers.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
-import { Input } from "../input/input.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const DEFAULT_SEPARATOR = "/";
-const DEFAULT_DISPLAY_ROW_COUNT = 5;
-const Cascader = ({
-  ref,
-  ..._props
-}) => {
-  var _a, _b, _c, _d, _e;
+const Cascader = ({ ref, ..._props }) => {
+  var _a;
   const {
     placement = "bottom-start",
     open,
     onOpenChange,
     searchable = false,
     value: selectedPath = [],
+    valueRenderer,
     options,
+    loadOptions,
     onChange,
     placeholder,
     listProps,
-    selectedRenderer,
     separator = DEFAULT_SEPARATOR,
     helperText,
     error,
@@ -47,70 +41,15 @@ const Cascader = ({
     menuWidth = "exact-reference",
     ...rest
   } = getCascaderProps(_props);
-  const searchInputRef = useRef(null);
   const floatingRef = useRef(null);
-  const uniqueId = useId();
-  const [inputValue, setInputValue] = useControllableState({
-    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
-    value: inputProps == null ? void 0 : inputProps.value
-  });
-  const windowScreen = useWindowScreen();
   const [isOpen, setIsOpen] = useControllableState({
     defaultValue: open ?? false,
     value: open
   });
-  const [expandedPath, setExpandedPath] = useState([]);
   const handleOpenChange = (nextOpen, event, reason) => {
     setIsOpen(nextOpen);
     onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
-    if (!nextOpen) {
-      setExpandedPath(selectedPath);
-    }
-  };
-  const handleBreadcrumbClick = (e) => {
-    const level = Number(e.currentTarget.dataset.index);
-    if (level < 0) {
-      setExpandedPath([]);
-    } else {
-      setExpandedPath(expandedPath.slice(0, level + 1));
-    }
   };
-  const selectedOptions = useMemo(() => {
-    return findOptionPath(options, selectedPath);
-  }, [options, selectedPath]);
-  const expandedOptions = useMemo(() => {
-    return findOptionPath(options, expandedPath);
-  }, [options, expandedPath]);
-  const currentOptions = useMemo(() => {
-    var _a2;
-    if (expandedPath.length === 0) {
-      return options;
-    }
-    let current = options;
-    for (const value of expandedPath) {
-      const found = current.find((opt) => opt.value === value);
-      if ((_a2 = found == null ? void 0 : found.children) == null ? void 0 : _a2.length) {
-        current = found.children;
-      } else {
-        break;
-      }
-    }
-    return current;
-  }, [options, 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) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
-  const { inputSize: rowMinHeight = 0, inputPaddingX } = getSizeVariantState(responsiveSize);
   const sizeOptions = {
     apply({ elements }) {
       const { width } = elements.reference.getBoundingClientRect();
@@ -135,215 +74,8 @@ const Cascader = ({
     if (isNil(textVariant)) return {};
     return getTypographyVar(textVariant);
   };
-  const onInputChange = (e) => {
-    var _a2;
-    e.target.value = trimStart(e.target.value);
-    setInputValue(e.target.value);
-    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
-  };
-  const displayValue = useMemo(() => {
-    if (selectedOptions.length === 0) return null;
-    if (selectedRenderer) {
-      return selectedRenderer(selectedOptions);
-    }
-    return selectedOptions.map((opt, idx) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        css: { display: "flex", alignItems: "center" },
-        children: [
-          opt.label,
-          idx < selectedOptions.length - 1 && /* @__PURE__ */ jsx("span", { css: { marginLeft: 4, marginRight: 4, opacity: 0.6 }, children: separator })
-        ]
-      },
-      `${uniqueId}-${opt.value}`
-    ));
-  }, [selectedOptions, selectedRenderer, separator, uniqueId]);
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      var _a2;
-      if (isOpen) {
-        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
-        setExpandedPath(selectedPath);
-      } else {
-        setInputValue("");
-      }
-    }, 100);
-    return () => clearTimeout(timer);
-  }, [isOpen]);
-  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]
-  );
-  const renderBreadcrumbs = () => {
-    if (expandedPath.length === 0) return null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        css: {
-          paddingLeft: inputPaddingX,
-          paddingRight: inputPaddingX,
-          minHeight: rowMinHeight,
-          borderTop: "1px solid",
-          borderColor: getColorVar("neutral.200"),
-          display: "flex",
-          alignItems: "center",
-          gap: 4,
-          flexWrap: "wrap",
-          paddingTop: 4,
-          paddingBottom: 4
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-index": -1,
-              type: "button",
-              onClick: handleBreadcrumbClick,
-              css: {
-                color: getColorVar("neutral.500"),
-                ":hover": { color: getColorVar("primary.600") },
-                transition: "color 150ms"
-              },
-              children: "All"
-            }
-          ),
-          expandedOptions.map((opt, idx) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              css: { display: "flex", alignItems: "center", gap: 4 },
-              children: [
-                /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400") }, children: separator }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "data-index": idx,
-                    type: "button",
-                    onClick: handleBreadcrumbClick,
-                    css: {
-                      color: getColorVar("neutral.600"),
-                      ":hover": { color: getColorVar("primary.600") },
-                      transition: "color 150ms",
-                      ...idx === expandedOptions.length - 1 ? {
-                        color: getColorVar("primary.600"),
-                        fontWeight: 500
-                      } : {}
-                    },
-                    children: opt.breadcrumbLabel ?? opt.label
-                  }
-                )
-              ]
-            },
-            `${uniqueId}-breadcrumb-${opt.value}`
-          ))
-        ]
-      }
-    );
-  };
-  const RowComponent = ({ row }) => {
-    const rowData = displayOptions.at(row.index);
-    if (isNil(rowData)) return /* @__PURE__ */ jsx(Fragment, {});
-    const isSelected = selectedPath.includes(rowData.value);
-    const handleSelect = () => {
-      var _a2, _b2, _c2, _d2;
-      if (rowData.disabled) return;
-      const parentPath = [];
-      let current = options;
-      for (const value of expandedPath) {
-        const found = current.find((opt) => opt.value === value);
-        if ((_a2 = found == null ? void 0 : found.children) == null ? void 0 : _a2.length) {
-          parentPath.push(value);
-          current = found.children;
-        } else {
-          break;
-        }
-      }
-      const newPath = [...parentPath, rowData.value];
-      const newSelectedOptions = findOptionPath(options, newPath);
-      if (hasChildren(rowData)) {
-        setExpandedPath(newPath);
-      } else {
-        onChange == null ? void 0 : onChange(newPath, newSelectedOptions);
-        (_d2 = (_b2 = floatingRef.current) == null ? void 0 : (_c2 = _b2.context).onOpenChange) == null ? void 0 : _d2.call(_c2, false);
-      }
-      setInputValue("");
-      setTimeout(() => {
-        var _a3;
-        (_a3 = searchInputRef.current) == null ? void 0 : _a3.focus();
-      });
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-hidden": true,
-        onClick: handleSelect,
-        css: {
-          minHeight: rowMinHeight,
-          paddingLeft: inputPaddingX,
-          paddingRight: inputPaddingX,
-          paddingTop: 4,
-          paddingBottom: 4,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          cursor: "pointer",
-          borderRadius: 8,
-          ":hover": { backgroundColor: getColorVar("neutral.100") },
-          transition: "color 150ms, background-color 150ms",
-          ...isSelected && !hasChildren(rowData) ? {
-            color: getColorVar("primary.600"),
-            backgroundColor: getColorVar("primary.100")
-          } : {},
-          ...rowData.disabled ? {
-            opacity: 0.5,
-            cursor: "not-allowed"
-          } : {}
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              css: {
-                flex: 1,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: rowData.label
-            }
-          ),
-          hasChildren(rowData) ? /* @__PURE__ */ jsx(
-            SvgLoader,
-            {
-              source: ArrowRightIcon,
-              width: 20,
-              height: 20,
-              css: { color: getColorVar("neutral.400") }
-            }
-          ) : isSelected && /* @__PURE__ */ jsx(
-            SvgLoader,
-            {
-              source: CheckIcon,
-              width: 20,
-              height: 20,
-              css: { color: getColorVar("primary.600") }
-            }
-          )
-        ]
-      },
-      `${uniqueId}-option-${rowData.value}`
-    );
-  };
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
       ...containerProps,
       css: {
@@ -351,6 +83,7 @@ const Cascader = ({
         flexDirection: "column",
         ...fullWidth ? { width: "100%" } : {}
       },
+      as: "div",
       children: [
         /* @__PURE__ */ jsxs(
           Floating,
@@ -394,94 +127,31 @@ const Cascader = ({
                         {
                           flex: 1,
                           textAlign: "left",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
+                          ...truncate
                         },
                         getTextCss((_a = rest.xs) == null ? void 0 : _a.size)
                       ],
-                      children: displayValue ? /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          css: {
-                            display: "flex",
-                            alignItems: "center",
-                            flexWrap: "wrap"
-                          },
-                          children: displayValue
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          css: { color: getColorVar("neutral.400"), display: "block" },
-                          children: placeholder
-                        }
-                      )
+                      children: selectedPath.length > 0 ? /* @__PURE__ */ jsx("div", { children: valueRenderer ?? selectedPath.join(" / ") }) : /* @__PURE__ */ jsx("div", { css: { color: getColorVar("neutral.400") }, children: placeholder })
                     }
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs(
-                "div",
+              /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
+                CascaderFloatingContent,
                 {
-                  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")
-                  },
-                  children: [
-                    !searchable && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        css: {
-                          paddingLeft: 8,
-                          paddingRight: 8,
-                          paddingTop: 8,
-                          paddingBottom: 8,
-                          borderColor: getColorVar("neutral.200")
-                        },
-                        children: /* @__PURE__ */ jsx(
-                          Input,
-                          {
-                            xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
-                            sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
-                            md: { size: (_d = rest.md) == null ? void 0 : _d.size },
-                            lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
-                            value: inputValue,
-                            placeholder: "Search...",
-                            ...inputProps,
-                            onChange: onInputChange,
-                            ref: searchInputRef
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      VirtualizedList,
-                      {
-                        ...listProps,
-                        css: { paddingLeft: 4, paddingRight: 4 },
-                        options: {
-                          count: displayOptions.length,
-                          estimateSize,
-                          getItemKey,
-                          overscan: lazy ? void 0 : currentOptions.length
-                        },
-                        style: {
-                          maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
-                          ...listProps == null ? void 0 : listProps.style
-                        },
-                        RowComponent
-                      }
-                    ),
-                    renderBreadcrumbs()
-                  ]
+                  searchable,
+                  selectedPath,
+                  options,
+                  loadOptions,
+                  onChange,
+                  inputProps,
+                  listProps,
+                  separator,
+                  lazy,
+                  xs: rest.xs,
+                  sm: rest.sm,
+                  md: rest.md,
+                  lg: rest.lg
                 }
               ) })
             ]

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

@@ -1,16 +1,20 @@
-import { CascaderOption, CascaderOptionValue, CascaderProps } from './types';
-export declare const getCascaderProps: <V extends CascaderOptionValue = CascaderOptionValue, O extends CascaderOption<V> = CascaderOption<V>>(extended: CascaderProps<V, O>) => CascaderProps<V, O>;
+import { CascaderOption, CascaderProps } from './types';
+export declare const getCascaderProps: (extended: CascaderProps) => CascaderProps;
 /**
  * Find option path by value array
  * Returns array of options from root to target
  */
-export declare const findOptionPath: <V extends CascaderOptionValue, O extends CascaderOption<V>>(options: O[], values: V[]) => O[];
+export declare const findOptionPath: (options: CascaderOption[], values: string[]) => CascaderOption[];
 /**
- * Check if option has children
+ * Check if option has children already loaded
  */
-export declare const hasChildren: <V extends CascaderOptionValue, O extends CascaderOption<V>>(option: O) => boolean;
+export declare const hasChildren: (option: CascaderOption) => boolean;
+/**
+ * Check if option can be expanded (has children or is not a leaf and can lazy load)
+ */
+export declare const isExpandable: (option: CascaderOption) => boolean;
 /**
  * Filter options by search text
  */
-export declare const filterOptions: <V extends CascaderOptionValue, O extends CascaderOption<V>>(options: O[], searchText: string) => O[];
+export declare const filterOptions: (options: CascaderOption[], searchText: string) => CascaderOption[];
 //# sourceMappingURL=helpers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAU7E,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,mBAAmB,wBAC7B,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,gCAEjB,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,wBAG9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,mBAAmB,EAAE,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,WAC9E,CAAC,EAAE,UACJ,CAAC,EAAE,KACV,CAAC,EAYH,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,mBAAmB,EAAE,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,KAAG,OAEnG,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,mBAAmB,EAAE,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,WAC7E,CAAC,EAAE,cACA,MAAM,KACjB,CAAC,EA2BH,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAUxD,eAAO,MAAM,gBAAgB,aAAc,aAAa,kBAEvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,YAAa,cAAc,EAAE,UAAU,MAAM,EAAE,KAAG,cAAc,EAY1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,WAAY,cAAc,KAAG,OAEpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,WAAY,cAAc,KAAG,OAKrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,YAAa,cAAc,EAAE,cAAc,MAAM,KAAG,cAAc,EA2B3F,CAAC"}

package/dist/lib/cascader/helpers.js

@@ -14,15 +14,21 @@ const findOptionPath = (options, values) => {
     const found = currentOptions.find((opt) => opt.value === value);
     if (!found) break;
     result.push(found);
-    currentOptions = found.children || [];
+    currentOptions = found.children ?? [];
   }
   return result;
 };
 const hasChildren = (option) => {
   return Array.isArray(option.children) && option.children.length > 0;
 };
+const isExpandable = (option) => {
+  if (option.isLeaf === true) return false;
+  if (hasChildren(option)) return true;
+  return option.isLeaf === false;
+};
 export {
   findOptionPath,
   getCascaderProps,
-  hasChildren
+  hasChildren,
+  isExpandable
 };

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

@@ -1,20 +1,24 @@
-import { HTMLAttributes, JSX } from 'react';
+import { HTMLAttributes, JSX, ReactNode } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
+import { ResponsiveDesign } from '@janbox/storefront-ui/types';
 import { InputProps } from '../input';
 import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
-import { ResponsiveDesign, ShallowMerge } from '../../types';
+import { ShallowMerge } from '../../types';
 import { PrimitiveProps } from '../primitive';
 export type CascaderResponsiveProps = InputMaskResponsiveProps;
 export type CascaderOptionValue = string | number;
-export interface CascaderOption<V extends CascaderOptionValue = CascaderOptionValue> {
-    value: V;
+export interface CascaderOption {
+    metadata?: Record<string, any>;
+    value: string;
     label: React.ReactNode;
     breadcrumbLabel?: React.ReactNode;
     searchLabel?: string | string[];
     disabled?: boolean;
-    children?: CascaderOption<V>[];
+    children?: CascaderOption[];
+    /** When true, this option is a leaf node and cannot be expanded. When false, it can be expanded even without children loaded yet. */
+    isLeaf?: boolean;
 }
-interface CascaderExtendedProps<V extends CascaderOptionValue, O extends CascaderOption<V>> extends ResponsiveDesign<CascaderResponsiveProps> {
+interface CascaderExtendedProps extends ResponsiveDesign<CascaderResponsiveProps> {
     /** Placement of the dropdown */
     placement?: Placement;
     /** Callback when dropdown open state changes */
@@ -25,17 +29,19 @@ interface CascaderExtendedProps<V extends CascaderOptionValue, O extends Cascade
     searchable?: boolean;
     /** Default selected path (array of values from root to leaf) */
     /** Controlled selected path */
-    value?: V[];
+    value?: string[];
+    valueRenderer?: ReactNode;
     /** Tree options data */
-    options: O[];
+    options: CascaderOption[];
+    /** Async function to load children. Receives the current expanded path as an array of selected options from root to the clicked node. */
+    loadOptions?: (tree: CascaderOption[]) => Promise<CascaderOption[]>;
     /** Callback when selection changes */
-    onChange?: (value: V[], selectedOptions: O[]) => void;
+    onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
     /** Placeholder text */
     placeholder?: string;
     /** Props for the options list container */
     listProps?: HTMLAttributes<HTMLDivElement>;
     /** Custom renderer for selected value display */
-    selectedRenderer?: (selectedOptions: O[]) => React.ReactNode;
     /** Separator for displaying selected path */
     separator?: React.ReactNode;
     /** Show error state */
@@ -53,6 +59,6 @@ interface CascaderExtendedProps<V extends CascaderOptionValue, O extends Cascade
     /** Width of the menu */
     menuWidth?: number | 'exact-reference' | 'min-reference';
 }
-export type CascaderProps<V extends CascaderOptionValue = CascaderOptionValue, O extends CascaderOption<V> = CascaderOption<V>> = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, CascaderExtendedProps<V, O>>;
+export type CascaderProps = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, CascaderExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,mBAAmB,GAAG,mBAAmB;IACjF,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,qBAAqB,CAC7B,CAAC,SAAS,mBAAmB,EAC7B,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,CAC3B,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IACjD,gCAAgC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,wBAAwB;IACxB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACtD,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7D,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,iCAAiC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,iBAAiB,GAAG,eAAe,CAAC;CAC1D;AAED,MAAM,MAAM,aAAa,CACvB,CAAC,SAAS,mBAAmB,GAAG,mBAAmB,EACnD,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,IAC7C,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qIAAqI;IACrI,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IAC/E,gCAAgC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,wBAAwB;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,yIAAyI;IACzI,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACpE,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACxE,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,iDAAiD;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,iCAAiC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,iBAAiB,GAAG,eAAe,CAAC;CAC1D;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from '@emotion/serialize';
 import { Screen } from '../theme';
+import type * as CSS from "csstype";
 export type Nullable<T> = T | null;
 export type Dict<T> = Record<string, T>;
 export type ShallowMerge<T1, T2> = Omit<T1, keyof T2> & T2;
@@ -11,7 +12,17 @@ export type ProgressDirection = "horizontal" | "vertical";
 export type ContentTranslation = {
     key: string;
 };
+/**
+ * Stricter version of Emotion's CSSObject.
+ *
+ * Overrides all standard CSS properties with `CSS.Properties` from csstype
+ * so values only accept `string | number`, never an array.
+ * Pseudos and nested selectors also recurse through StrictCSSObject.
+ */
+export type StyledCSS = Omit<CSSObject, keyof CSS.Properties | keyof CSS.Pseudos> & CSS.Properties<number | string> & {
+    [K in CSS.Pseudos]?: StyledCSS;
+};
 export type PropsWithCSS<T extends object = object> = T & {
-    css?: CSSObject;
+    css?: StyledCSS;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;GAMG;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,SAAS,EACT,MAAM,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,CACzC,GACC,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [