@janbox/storefront-ui 1.0.0

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

@@ -0,0 +1,348 @@
+"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 theme_palette = require("../../theme/palette.cjs");
+const theme_typography = require("../../theme/typography.cjs");
+const checkbox = require("../checkbox/checkbox.cjs");
+const textSkeleton = require("../loading/text-skeleton/text-skeleton.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_DISPLAY_ROW_COUNT = 5;
+const MultipleSelect = ({ ref, ...props }) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    placement = "bottom-start",
+    open,
+    onOpenChange,
+    searchable = true,
+    value,
+    optionValue,
+    optionLabel,
+    defaultValue,
+    options,
+    onChange,
+    placeholder,
+    listProps,
+    tagLabel,
+    // selectedRenderer,
+    optionSearchLabel,
+    helperText,
+    error,
+    containerProps,
+    inputProps,
+    displayCount = 1,
+    ...rest
+  } = helpers.getMultipleSelectProps(props);
+  const searchInputRef = react.useRef(null);
+  const floatingRef = react.useRef(null);
+  const uniqueId = react.useId();
+  const windowScreen = index.useWindowScreen();
+  const [inputValue, setInputValue] = useControllableState.useControllableState({
+    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const [isOpen, setIsOpen] = useControllableState.useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const [controllableValues, setControllableValues] = useControllableState.useControllableState({
+    defaultValue: defaultValue ?? [],
+    value
+  });
+  const getOptionValue = react.useCallback(
+    (option) => {
+      return typeof optionValue === "function" ? optionValue(option) : lodashEs.get(option, optionValue ?? "value");
+    },
+    [optionValue]
+  );
+  const getTagLabel = (option) => {
+    switch (typeof tagLabel) {
+      case "function":
+        return tagLabel(option);
+      case "string":
+        return lodashEs.get(option, tagLabel);
+      default:
+        return null;
+    }
+  };
+  const getOptionValueRef = react.useRef(getOptionValue);
+  getOptionValueRef.current = getOptionValue;
+  const selectedValueMap = react.useMemo(
+    () => new Map(
+      controllableValues.map((item) => {
+        const key = typeof item === "object" ? getOptionValue(item) : item;
+        return [
+          key,
+          typeof item === "object" ? item : options.find((option) => getOptionValue(option) === key) ?? {}
+        ];
+      })
+    ),
+    [controllableValues]
+  );
+  const getOptionLabel = react.useCallback(
+    (option) => {
+      return typeof optionLabel === "function" ? optionLabel(option) : lodashEs.get(option, optionLabel ?? "label");
+    },
+    [optionLabel]
+  );
+  const handleChange = (option, selected) => {
+    let preset = [...controllableValues];
+    if (selected) {
+      preset.push(option);
+    } else {
+      preset = preset.filter((item) => getOptionValue(item) !== getOptionValue(option));
+    }
+    setControllableValues(preset);
+    onChange == null ? void 0 : onChange(preset);
+  };
+  const responsiveSize = lodashEs.isNil(windowScreen.name) ? void 0 : utils_index.getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = utils_index.getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const displayOptions = react.useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => {
+      let searchLabels = [String(getOptionLabel(option))];
+      switch (typeof optionSearchLabel) {
+        case "function":
+          searchLabels = common.ensureArray(optionSearchLabel(option));
+          break;
+        case "string":
+          searchLabels = common.ensureArray(String(lodashEs.get(option, optionSearchLabel)));
+          break;
+        case "object":
+          searchLabels = optionSearchLabel.map((label) => String(lodashEs.get(option, label)));
+          break;
+      }
+      return common.matchSearch(searchLabels, inputValue);
+    });
+  }, [getOptionLabel, inputValue, optionSearchLabel, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    const rowValue = lodashEs.isNil(rowData) ? void 0 : getOptionValue(rowData);
+    const isSelected = lodashEs.isNil(rowValue) ? false : selectedValueMap.has(rowValue);
+    const onCheckboxChange = (e) => {
+      if (lodashEs.isNil(rowData)) return;
+      handleChange(rowData, e.target.checked);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      checkbox.Checkbox,
+      {
+        onChange: onCheckboxChange,
+        checked: isSelected,
+        containerProps: {
+          css: {
+            paddingTop: 2,
+            paddingBottom: 2,
+            paddingLeft: 12,
+            paddingRight: 12,
+            borderRadius: 8,
+            ":hover": { backgroundColor: theme_palette.getColorVar("neutral.100") },
+            minHeight: rowMinHeight,
+            width: "100%"
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: lodashEs.isNil(rowData) ? /* @__PURE__ */ jsxRuntime.jsx(textSkeleton.TextSkeleton, { css: { width: "100%" } }) : getOptionLabel(rowData) })
+      }
+    );
+  };
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      Object.assign(elements.floating.style, {
+        minWidth: `${width}px`
+      });
+    }
+  };
+  const estimateSize = react.useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKey = react.useCallback(
+    (index2) => {
+      const option = displayOptions.at(index2);
+      return option ? getOptionValue(option).toString() : `${uniqueId}-${index2}`;
+    },
+    [displayOptions, getOptionValue, uniqueId]
+  );
+  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);
+  };
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      var _a2;
+      if (isOpen) {
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      } else {
+        setInputValue("");
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [isOpen, setInputValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      floating.Floating,
+      {
+        clickProps: {
+          enabled: true
+        },
+        dismissProps: {
+          enabled: true
+        },
+        sizeOptions,
+        placement,
+        open: isOpen,
+        onOpenChange: prehandleOpenChange,
+        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", paddingTop: 4, paddingBottom: 4 }, getTextCss((_a = rest.xs) == null ? void 0 : _a.size)], children: selectedValueMap.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  css: {
+                    display: "flex",
+                    gap: 4,
+                    ...displayCount > 1 ? { flexWrap: "wrap" } : {}
+                  },
+                  children: [
+                    Array.from(selectedValueMap.values()).slice(0, displayCount).map((selectedOption) => {
+                      const rowValue = getOptionValue(selectedOption);
+                      const rowLabel = getTagLabel(selectedOption) ?? getOptionLabel(selectedOption);
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          css: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            overflow: "hidden",
+                            borderRadius: 8,
+                            backgroundColor: theme_palette.getColorVar("neutral.100"),
+                            paddingLeft: 8,
+                            paddingRight: 8,
+                            paddingTop: 4,
+                            paddingBottom: 4,
+                            fontSize: "0.75rem",
+                            lineHeight: "1rem"
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: lodashEs.isElement(rowLabel) ? rowLabel : /* @__PURE__ */ jsxRuntime.jsx("span", { children: rowLabel }) })
+                        },
+                        rowValue.toString()
+                      );
+                    }),
+                    displayCount < selectedValueMap.size && /* @__PURE__ */ jsxRuntime.jsx("div", { css: {
+                      borderRadius: 8,
+                      backgroundColor: theme_palette.getColorVar("neutral.100"),
+                      paddingLeft: 8,
+                      paddingRight: 8,
+                      paddingTop: 4,
+                      paddingBottom: 4,
+                      fontSize: "0.75rem",
+                      lineHeight: "1rem",
+                      flexShrink: 0
+                    }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { css: { fontWeight: 500 }, children: [
+                      "+",
+                      selectedValueMap.size - displayCount
+                    ] }) })
+                  ]
+                }
+              ) : /* @__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, paddingBottom: 12, position: "relative" }, 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,
+                ...inputProps,
+                onChange: onInputChange,
+                ref: searchInputRef
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              virtualizedList.VirtualizedList,
+              {
+                ...listProps,
+                css: { paddingLeft: 4, paddingRight: 4 },
+                options: {
+                  count: displayOptions.length,
+                  estimateSize,
+                  getItemKey
+                },
+                style: {
+                  maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+                  ...listProps == null ? void 0 : listProps.style
+                },
+                RowComponent
+              }
+            )
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
+  ] });
+};
+exports.MultipleSelect = MultipleSelect;

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

@@ -0,0 +1,3 @@
+import { MultipleSelectProps } from './types';
+export declare const MultipleSelect: <O extends object = object>({ ref, ...props }: MultipleSelectProps<O>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=multiple-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multiple-select.d.ts","sourceRoot":"","sources":["../../../src/lib/multiple-select/multiple-select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAA6B,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAyBzE,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,8BAA8B,mBAAmB,CAAC,CAAC,CAAC,qDA4WlG,CAAC"}