@janbox/storefront-ui 1.0.0

package/dist/lib/cascader/cascader.cjs

@@ -0,0 +1,497 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const lodashEs = require("lodash-es");
+const helpers = require("./helpers.cjs");
+const svgLoader = require("../../components/svg-loader.cjs");
+const virtualizedList = require("../../components/virtualized-list.cjs");
+const index = require("../../hooks/use-window-screen/index.cjs");
+const useControllableState = require("../../hooks/use-controllable-state.cjs");
+const utils_index = require("../../utils/index.cjs");
+const arrowDown = require("../../assets/svg/arrow-down.svg.cjs");
+const arrowRight = require("../../assets/svg/arrow-right.svg.cjs");
+const doneCheck = require("../../assets/svg/done-check.svg.cjs");
+const theme_palette = require("../../theme/palette.cjs");
+const theme_typography = require("../../theme/typography.cjs");
+const common = require("../../utils/common.cjs");
+const floating = require("../floating/floating/floating.cjs");
+const floatingTrigger = require("../floating/floating-trigger/floating-trigger.cjs");
+const inputMask = require("../input-mask/input-mask.cjs");
+const floatingContent = require("../floating/floating-content/floating-content.cjs");
+const input = require("../input/input.cjs");
+const formHelperText = require("../form-helper-text/form-helper-text.cjs");
+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
+  } = helpers.getCascaderProps(_props);
+  const searchInputRef = react.useRef(null);
+  const floatingRef = react.useRef(null);
+  const uniqueId = react.useId();
+  const [inputValue, setInputValue] = useControllableState.useControllableState({
+    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const windowScreen = index.useWindowScreen();
+  const [isOpen, setIsOpen] = useControllableState.useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const [expandedPath, setExpandedPath] = react.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 = react.useMemo(() => {
+    return helpers.findOptionPath(options, selectedPath);
+  }, [options, selectedPath]);
+  const expandedOptions = react.useMemo(() => {
+    return helpers.findOptionPath(options, expandedPath);
+  }, [options, expandedPath]);
+  const currentOptions = react.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 = react.useMemo(() => {
+    if (!inputValue) {
+      return currentOptions;
+    }
+    return currentOptions.filter((option) => {
+      const searchLabels = common.ensureArray(option.searchLabel ?? []);
+      if (!searchLabels.length && lodashEs.isString(option.label)) {
+        searchLabels.push(option.label);
+      }
+      return common.matchSearch(searchLabels, inputValue);
+    });
+  }, [inputValue, currentOptions]);
+  const responsiveSize = lodashEs.isNil(windowScreen.name) ? void 0 : utils_index.getResponsiveProp(rest, "size", windowScreen.name);
+  const { inputSize: rowMinHeight = 0, inputPaddingX } = utils_index.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 (lodashEs.isNil(sizeVariant)) return {};
+    const { textVariant } = utils_index.getSizeVariantState(sizeVariant);
+    if (lodashEs.isNil(textVariant)) return {};
+    return theme_typography.getTypographyVar(textVariant);
+  };
+  const onInputChange = (e) => {
+    var _a2;
+    e.target.value = lodashEs.trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
+  };
+  const displayValue = react.useMemo(() => {
+    if (selectedOptions.length === 0) return null;
+    if (selectedRenderer) {
+      return selectedRenderer(selectedOptions);
+    }
+    return selectedOptions.map((opt, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        css: { display: "flex", alignItems: "center" },
+        children: [
+          opt.label,
+          idx < selectedOptions.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { css: { marginLeft: 4, marginRight: 4, opacity: 0.6 }, children: separator })
+        ]
+      },
+      `${uniqueId}-${opt.value}`
+    ));
+  }, [selectedOptions, selectedRenderer, separator, uniqueId]);
+  react.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 = react.useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKey = react.useCallback(
+    (index2) => {
+      const option = displayOptions.at(index2);
+      return option ? option.value : `${uniqueId}-${index2}`;
+    },
+    [displayOptions, uniqueId]
+  );
+  const renderBreadcrumbs = () => {
+    if (expandedPath.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        css: {
+          paddingLeft: inputPaddingX,
+          paddingRight: inputPaddingX,
+          minHeight: rowMinHeight,
+          borderTop: "1px solid",
+          borderColor: theme_palette.getColorVar("neutral.200"),
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          flexWrap: "wrap",
+          paddingTop: 4,
+          paddingBottom: 4
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              "data-index": -1,
+              type: "button",
+              onClick: handleBreadcrumbClick,
+              css: {
+                color: theme_palette.getColorVar("neutral.500"),
+                ":hover": { color: theme_palette.getColorVar("primary.600") },
+                transition: "color 150ms"
+              },
+              children: "All"
+            }
+          ),
+          expandedOptions.map((opt, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              css: { display: "flex", alignItems: "center", gap: 4 },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("neutral.400") }, children: separator }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    "data-index": idx,
+                    type: "button",
+                    onClick: handleBreadcrumbClick,
+                    css: {
+                      color: theme_palette.getColorVar("neutral.600"),
+                      ":hover": { color: theme_palette.getColorVar("primary.600") },
+                      transition: "color 150ms",
+                      ...idx === expandedOptions.length - 1 ? {
+                        color: theme_palette.getColorVar("primary.600"),
+                        fontWeight: 500
+                      } : {}
+                    },
+                    children: opt.breadcrumbLabel ?? opt.label
+                  }
+                )
+              ]
+            },
+            `${uniqueId}-breadcrumb-${opt.value}`
+          ))
+        ]
+      }
+    );
+  };
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    if (lodashEs.isNil(rowData)) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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 = helpers.findOptionPath(options, newPath);
+      if (helpers.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__ */ jsxRuntime.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: theme_palette.getColorVar("neutral.100") },
+          transition: "color 150ms, background-color 150ms",
+          ...isSelected && !helpers.hasChildren(rowData) ? {
+            color: theme_palette.getColorVar("primary.600"),
+            backgroundColor: theme_palette.getColorVar("primary.100")
+          } : {},
+          ...rowData.disabled ? {
+            opacity: 0.5,
+            cursor: "not-allowed"
+          } : {}
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              css: {
+                flex: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: rowData.label
+            }
+          ),
+          helpers.hasChildren(rowData) ? /* @__PURE__ */ jsxRuntime.jsx(
+            svgLoader.SvgLoader,
+            {
+              source: arrowRight,
+              width: 20,
+              height: 20,
+              css: { color: theme_palette.getColorVar("neutral.400") }
+            }
+          ) : isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+            svgLoader.SvgLoader,
+            {
+              source: doneCheck,
+              width: 20,
+              height: 20,
+              css: { color: theme_palette.getColorVar("primary.600") }
+            }
+          )
+        ]
+      },
+      `${uniqueId}-option-${rowData.value}`
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...containerProps,
+      css: {
+        display: "flex",
+        flexDirection: "column",
+        ...fullWidth ? { width: "100%" } : {}
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          floating.Floating,
+          {
+            clickProps: {
+              enabled: true
+            },
+            dismissProps: {
+              enabled: true
+            },
+            sizeOptions,
+            placement,
+            open: isOpen,
+            onOpenChange: handleOpenChange,
+            ref: floatingRef,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(floatingTrigger.FloatingTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                inputMask.InputMask,
+                {
+                  type: "button",
+                  error: isOpen ? false : error,
+                  element: "button",
+                  suffix: /* @__PURE__ */ jsxRuntime.jsx(
+                    svgLoader.SvgLoader,
+                    {
+                      source: arrowDown,
+                      width: 20,
+                      height: 20,
+                      css: {
+                        transition: "transform 150ms",
+                        ...isOpen ? { transform: "rotate(-180deg)" } : {}
+                      }
+                    }
+                  ),
+                  ...rest,
+                  ref,
+                  children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          css: {
+                            display: "flex",
+                            alignItems: "center",
+                            flexWrap: "wrap"
+                          },
+                          children: displayValue
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          css: { color: theme_palette.getColorVar("neutral.400"), display: "block" },
+                          children: placeholder
+                        }
+                      )
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(floatingContent.FloatingContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  css: {
+                    paddingTop: 8,
+                    paddingBottom: 8,
+                    border: "1px solid",
+                    borderColor: theme_palette.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: theme_palette.getColorVar("surface.default")
+                  },
+                  children: [
+                    !searchable && /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        css: {
+                          paddingLeft: 8,
+                          paddingRight: 8,
+                          paddingTop: 8,
+                          paddingBottom: 8,
+                          borderColor: theme_palette.getColorVar("neutral.200")
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          input.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__ */ jsxRuntime.jsx(
+                      virtualizedList.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__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
+};
+exports.Cascader = Cascader;

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

@@ -0,0 +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;
+//# sourceMappingURL=cascader.d.ts.map

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

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