@janbox/storefront-ui 1.0.0

package/dist/lib/cascader/cascader.js

@@ -0,0 +1,497 @@
+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 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 { 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 { 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 {
+    placement = "bottom-start",
+    open,
+    onOpenChange,
+    searchable = false,
+    value: selectedPath = [],
+    options,
+    onChange,
+    placeholder,
+    listProps,
+    selectedRenderer,
+    separator = DEFAULT_SEPARATOR,
+    helperText,
+    error,
+    containerProps,
+    inputProps,
+    fullWidth = true,
+    lazy = true,
+    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();
+      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);
+  };
+  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",
+    {
+      ...containerProps,
+      css: {
+        display: "flex",
+        flexDirection: "column",
+        ...fullWidth ? { width: "100%" } : {}
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Floating,
+          {
+            clickProps: {
+              enabled: true
+            },
+            dismissProps: {
+              enabled: true
+            },
+            sizeOptions,
+            placement,
+            open: isOpen,
+            onOpenChange: handleOpenChange,
+            ref: floatingRef,
+            children: [
+              /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsx(
+                ForwardRefInputMask,
+                {
+                  type: "button",
+                  error: isOpen ? false : error,
+                  element: "button",
+                  suffix: /* @__PURE__ */ jsx(
+                    SvgLoader,
+                    {
+                      source: ArrowDownIcon,
+                      width: 20,
+                      height: 20,
+                      css: {
+                        transition: "transform 150ms",
+                        ...isOpen ? { transform: "rotate(-180deg)" } : {}
+                      }
+                    }
+                  ),
+                  ...rest,
+                  ref,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      css: [
+                        {
+                          flex: 1,
+                          textAlign: "left",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        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
+                        }
+                      )
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs(
+                "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")
+                  },
+                  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()
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
+};
+export {
+  Cascader
+};

package/dist/lib/cascader/helpers.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_index = require("../../utils/index.cjs");
+const defaultProps = {
+  xs: {
+    size: "md"
+  }
+};
+const getCascaderProps = (extended) => {
+  return utils_index.mergeComponentProps(defaultProps, extended);
+};
+const findOptionPath = (options, values) => {
+  const result = [];
+  let currentOptions = options;
+  for (const value of values) {
+    const found = currentOptions.find((opt) => opt.value === value);
+    if (!found) break;
+    result.push(found);
+    currentOptions = found.children || [];
+  }
+  return result;
+};
+const hasChildren = (option) => {
+  return Array.isArray(option.children) && option.children.length > 0;
+};
+exports.findOptionPath = findOptionPath;
+exports.getCascaderProps = getCascaderProps;
+exports.hasChildren = hasChildren;

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

@@ -0,0 +1,16 @@
+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>;
+/**
+ * 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[];
+/**
+ * Check if option has children
+ */
+export declare const hasChildren: <V extends CascaderOptionValue, O extends CascaderOption<V>>(option: O) => boolean;
+/**
+ * Filter options by search text
+ */
+export declare const filterOptions: <V extends CascaderOptionValue, O extends CascaderOption<V>>(options: O[], searchText: string) => O[];
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +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"}

package/dist/lib/cascader/helpers.js

@@ -0,0 +1,28 @@
+import { mergeComponentProps } from "../../utils/index.js";
+const defaultProps = {
+  xs: {
+    size: "md"
+  }
+};
+const getCascaderProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+const findOptionPath = (options, values) => {
+  const result = [];
+  let currentOptions = options;
+  for (const value of values) {
+    const found = currentOptions.find((opt) => opt.value === value);
+    if (!found) break;
+    result.push(found);
+    currentOptions = found.children || [];
+  }
+  return result;
+};
+const hasChildren = (option) => {
+  return Array.isArray(option.children) && option.children.length > 0;
+};
+export {
+  findOptionPath,
+  getCascaderProps,
+  hasChildren
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,58 @@
+import { HTMLAttributes, JSX } from 'react';
+import { Placement, UseFloatingOptions } from '@floating-ui/react';
+import { InputProps } from '../input';
+import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
+import { ResponsiveDesign, 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;
+    label: React.ReactNode;
+    breadcrumbLabel?: React.ReactNode;
+    searchLabel?: string | string[];
+    disabled?: boolean;
+    children?: CascaderOption<V>[];
+}
+interface CascaderExtendedProps<V extends CascaderOptionValue, O extends CascaderOption<V>> extends ResponsiveDesign<CascaderResponsiveProps> {
+    /** Placement of the dropdown */
+    placement?: Placement;
+    /** Callback when dropdown open state changes */
+    onOpenChange?: UseFloatingOptions['onOpenChange'];
+    /** Controlled open state */
+    open?: boolean;
+    /** Enable search within options */
+    searchable?: boolean;
+    /** Default selected path (array of values from root to leaf) */
+    /** Controlled selected path */
+    value?: V[];
+    /** Tree options data */
+    options: O[];
+    /** Callback when selection changes */
+    onChange?: (value: V[], selectedOptions: O[]) => 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 */
+    error?: boolean;
+    /** Helper text below the input */
+    helperText?: string;
+    /** Props for the container div */
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
+    /** Props for the search input */
+    inputProps?: InputProps;
+    /** Whether component takes full width */
+    fullWidth?: boolean;
+    /** Enable virtualized list */
+    lazy?: boolean;
+    /** 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 {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/types.ts"],"names":[],"mappings":"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"}