@martinsura/ui 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -517,7 +517,7 @@ var Textarea = ({ rows = 4, ...props }) => {
         placeholder: props.placeholder,
         disabled: props.disabled,
         onChange: (e) => props.onChange?.(e.target.value),
-        className: tailwindMerge.twMerge(inputBaseClass, "min-h-24 py-2", errorDisplay && "border-(--ui-danger)")
+        className: tailwindMerge.twMerge(inputBaseClass, "min-h-24 px-(--ui-px-md) py-2 [font-size:var(--ui-text-md)] rounded-(--ui-radius-md)", errorDisplay && "border-(--ui-danger)")
       }
     ),
     errorDisplay && /* @__PURE__ */ jsxRuntime.jsx(InputError, { error: String(errorDisplay) })
@@ -4500,6 +4500,374 @@ var MultiSelectInput = ({
     errorDisplay && /* @__PURE__ */ jsxRuntime.jsx(InputError, { error: String(errorDisplay), className: props.classNames?.error })
   ] });
 };
+function calcPosition3(el) {
+  const rect = el.getBoundingClientRect();
+  const maxDropdownHeight = 320;
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const openAbove = spaceBelow < maxDropdownHeight && rect.top > spaceBelow;
+  return {
+    top: openAbove ? rect.top - maxDropdownHeight - 2 : rect.bottom + 2,
+    left: rect.left,
+    width: rect.width,
+    openAbove
+  };
+}
+function flattenTree(options, parentLabels = [], parentKey = "") {
+  return options.flatMap((option, index) => {
+    const key = parentKey === "" ? String(index) : `${parentKey}.${index}`;
+    const path = [...parentLabels, option.label];
+    const current = {
+      key,
+      label: option.label,
+      pathLabel: path.join(" / "),
+      value: option.value,
+      selectable: option.selectable
+    };
+    return [current, ...flattenTree(option.children ?? [], path, key)];
+  });
+}
+var TreeSelectDropdown = (props) => {
+  const [search, setSearch] = react.useState("");
+  const [pos, setPos] = react.useState(null);
+  const [activePath, setActivePath] = react.useState([]);
+  const searchRef = react.useRef(null);
+  const popupRef = react.useRef(null);
+  const flattenedOptions = react.useMemo(() => flattenTree(props.options), [props.options]);
+  react.useEffect(() => {
+    if (!props.isOpen || !props.anchorRef.current) {
+      return;
+    }
+    setPos(calcPosition3(props.anchorRef.current));
+    setSearch("");
+    setActivePath([]);
+    if (props.showSearch !== false) {
+      setTimeout(() => searchRef.current?.focus(), 0);
+    }
+  }, [props.isOpen, props.anchorRef, props.showSearch]);
+  const handleMouseDown = react.useCallback(
+    (e) => {
+      if (popupRef.current && !popupRef.current.contains(e.target) && props.anchorRef.current && !props.anchorRef.current.contains(e.target)) {
+        props.onClose();
+      }
+    },
+    [props]
+  );
+  react.useEffect(() => {
+    if (!props.isOpen) {
+      return () => document.removeEventListener("mousedown", handleMouseDown);
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isTopmostFloatingRoot(popupRef.current)) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        props.onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [props.isOpen, handleMouseDown, props]);
+  if (!props.isOpen || !pos) {
+    return null;
+  }
+  const searchTerm = search.trim().toLowerCase();
+  const isSearching = searchTerm !== "";
+  const filteredOptions = isSearching ? flattenedOptions.filter((option) => option.selectable && option.pathLabel.toLowerCase().includes(searchTerm)) : [];
+  const columns = [];
+  if (!isSearching) {
+    let currentLevel = props.options;
+    columns.push(currentLevel);
+    for (const index of activePath) {
+      const activeOption = currentLevel[index];
+      if (!activeOption?.children?.length) {
+        break;
+      }
+      currentLevel = activeOption.children;
+      columns.push(currentLevel);
+    }
+  }
+  const handleOptionClick = (option, depth, index) => {
+    if (option.children?.length) {
+      setActivePath((prev) => [...prev.slice(0, depth), index]);
+      return;
+    }
+    if (!option.selectable) {
+      return;
+    }
+    props.onSelect(option.value);
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: popupRef,
+        "data-ui-floating-root": "",
+        style: { top: pos.top, left: pos.left, minWidth: pos.width },
+        className: "fixed z-1002 flex max-h-80 flex-col overflow-hidden rounded-(--ui-radius-lg) border border-(--ui-border) bg-white shadow-lg",
+        children: [
+          props.showSearch !== false && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: tailwindMerge.twMerge(
+                "flex items-center border-b border-(--ui-border)",
+                popupLayoutClasses.compactHeader,
+                "gap-(--ui-popup-gap)"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSearch, { size: 13, strokeWidth: 1.5, className: tailwindMerge.twMerge("shrink-0", neutralIconClasses.default) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: searchRef,
+                    type: "text",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    placeholder: "Hledat...",
+                    className: "flex-1 bg-transparent outline-none [font-size:var(--ui-popup-text)] placeholder:text-(--ui-text-soft)"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-h-64 overflow-hidden", children: props.loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-40 min-w-80 items-center justify-center px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "middle", color: "primary" }) }) : isSearching ? filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex min-h-40 min-w-80 items-center justify-center px-6 py-4 text-xs", neutralTextClasses.soft), children: "\u017D\xE1dn\xE9 v\xFDsledky" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 min-w-80 overflow-y-auto", children: filteredOptions.map((option) => {
+            const isSelected = props.selectedValue === option.value;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => props.onSelect(option.value),
+                className: tailwindMerge.twMerge(
+                  "flex cursor-pointer items-center justify-between select-none",
+                  popupLayoutClasses.compactRow,
+                  isSelected ? "font-medium text-(--ui-text-strong)" : "text-(--ui-text) hover:bg-(--ui-surface-subtle)"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.pathLabel }),
+                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { size: 13, strokeWidth: 2, className: "ml-3 shrink-0 text-(--ui-text)" })
+                ]
+              },
+              option.key
+            );
+          }) }) : columns.map((column, depth) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tailwindMerge.twMerge(
+                "min-w-72 overflow-y-auto",
+                depth > 0 && "border-l border-(--ui-border)"
+              ),
+              children: column.map((option, index) => {
+                const isSelected = props.selectedValue === option.value;
+                const isActiveBranch = activePath[depth] === index;
+                const hasChildren = (option.children?.length ?? 0) > 0;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    onMouseDown: (e) => e.preventDefault(),
+                    onMouseEnter: () => {
+                      if (hasChildren) {
+                        setActivePath((prev) => [...prev.slice(0, depth), index]);
+                      }
+                    },
+                    onClick: () => handleOptionClick(option, depth, index),
+                    className: tailwindMerge.twMerge(
+                      "flex select-none items-center justify-between",
+                      popupLayoutClasses.compactRow,
+                      hasChildren || option.selectable ? "cursor-pointer" : "cursor-default",
+                      isSelected ? "font-medium text-(--ui-text-strong)" : isActiveBranch ? "bg-(--ui-surface-subtle) text-(--ui-text-strong)" : "text-(--ui-text) hover:bg-(--ui-surface-subtle)",
+                      !option.selectable && !hasChildren && "text-(--ui-text-soft)"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-3 flex shrink-0 items-center gap-2", children: [
+                        isSelected && /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { size: 13, strokeWidth: 2, className: "text-(--ui-text)" }),
+                        hasChildren && /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronRight, { size: 13, strokeWidth: 1.5, className: tailwindMerge.twMerge(neutralIconClasses.default) })
+                      ] })
+                    ]
+                  },
+                  `${depth}-${index}-${String(option.value)}`
+                );
+              })
+            },
+            depth
+          )) })
+        ]
+      }
+    ),
+    document.body
+  );
+};
+function buildTreeOptions(options, labelKey, valueKey, childrenKey, disableBranchSelection, isOptionSelectable) {
+  return options.map((option) => {
+    const children = option[childrenKey];
+    const nestedOptions = Array.isArray(children) ? buildTreeOptions(children, labelKey, valueKey, childrenKey, disableBranchSelection, isOptionSelectable) : void 0;
+    const hasChildren = (nestedOptions?.length ?? 0) > 0;
+    return {
+      label: String(option[labelKey]),
+      value: option[valueKey],
+      selectable: isOptionSelectable ? isOptionSelectable(option) : !(disableBranchSelection && hasChildren),
+      children: nestedOptions
+    };
+  });
+}
+function findSelectedOption(options, value) {
+  for (const option of options) {
+    if (option.value === value) {
+      return option;
+    }
+    const nested = option.children ? findSelectedOption(option.children, value) : null;
+    if (nested) {
+      return nested;
+    }
+  }
+  return null;
+}
+function findSelectedPathLabel(options, value, parentLabels = []) {
+  for (const option of options) {
+    const path = [...parentLabels, option.label];
+    if (option.value === value) {
+      return path.join(" / ");
+    }
+    if (option.children?.length) {
+      const nested = findSelectedPathLabel(option.children, value, path);
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+  return null;
+}
+var TreeSelectInput = ({
+  options,
+  labelKey = "label",
+  valueKey = "value",
+  childrenKey = "children",
+  size = "middle",
+  showSearch = true,
+  disableBranchSelection = true,
+  selectedLabelMode = "path",
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const triggerRef = react.useRef(null);
+  const allOptions = react.useMemo(
+    () => buildTreeOptions(
+      options ?? [],
+      labelKey,
+      valueKey,
+      childrenKey,
+      disableBranchSelection,
+      props.isOptionSelectable
+    ),
+    [options, labelKey, valueKey, childrenKey, disableBranchSelection, props.isOptionSelectable]
+  );
+  const effectiveValue = props.treatZeroAsEmpty && props.value === 0 ? null : props.value ?? null;
+  const selectedOption = effectiveValue === null || effectiveValue === void 0 ? null : findSelectedOption(allOptions, effectiveValue);
+  const selectedPathLabel = effectiveValue === null || effectiveValue === void 0 ? null : findSelectedPathLabel(allOptions, effectiveValue);
+  const hasValue = effectiveValue !== null && effectiveValue !== void 0;
+  const allowClear = props.allowClear ?? false;
+  const resolveError = useErrorResolver();
+  const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
+  const errorDisplay = props.error ?? props.customError ?? (resolvedErrors.length > 0 ? resolvedErrors.join(", ") : void 0);
+  const hasError = !!errorDisplay;
+  const handleSelect = (value) => {
+    props.onChange?.(value);
+    setIsOpen(false);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    props.onChange?.(null);
+  };
+  const handleTriggerClick = () => {
+    if (!props.disabled) {
+      setIsOpen((current) => !current);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputField, { noMargin: props.noMargin, className: props.className, children: [
+    props.label && /* @__PURE__ */ jsxRuntime.jsx(
+      InputLabel,
+      {
+        label: props.label,
+        required: props.required,
+        className: props.classNames?.label,
+        requiredMarkClassName: props.classNames?.requiredMark
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        className: tailwindMerge.twMerge(
+          "flex cursor-pointer select-none items-center gap-1 border bg-white transition-colors",
+          triggerSizeClasses[size],
+          isOpen ? triggerBorderClasses.open : triggerBorderClasses.default,
+          props.disabled && triggerBorderClasses.disabled,
+          props.classNames?.trigger
+        ),
+        style: hasError ? { borderColor: "var(--ui-danger)" } : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: tailwindMerge.twMerge(
+                "flex min-w-0 flex-1 items-center truncate leading-none",
+                !selectedOption && neutralTextClasses.soft,
+                props.classNames?.value
+              ),
+              children: selectedLabelMode === "path" ? selectedPathLabel ?? selectedOption?.label ?? (props.placeholder ?? "") : selectedOption?.label ?? (props.placeholder ?? "")
+            }
+          ),
+          allowClear && hasValue && !props.disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: handleClear,
+              className: tailwindMerge.twMerge(
+                "flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center self-center",
+                neutralIconClasses.default,
+                neutralIconClasses.hover,
+                props.classNames?.clearButton
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 12, strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            iconsReact.IconChevronDown,
+            {
+              size: 13,
+              strokeWidth: 1.5,
+              className: tailwindMerge.twMerge(
+                "shrink-0 self-center transition-transform",
+                neutralIconClasses.default,
+                isOpen && "rotate-180",
+                props.classNames?.icon
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TreeSelectDropdown,
+      {
+        anchorRef: triggerRef,
+        isOpen,
+        options: allOptions,
+        selectedValue: effectiveValue,
+        onSelect: handleSelect,
+        onClose: () => setIsOpen(false),
+        loading: props.loading,
+        showSearch
+      }
+    ),
+    errorDisplay && /* @__PURE__ */ jsxRuntime.jsx(InputError, { error: String(errorDisplay), className: props.classNames?.error })
+  ] });
+};
 
 // src/notification/useNotification.ts
 var useNotification = () => {
@@ -4609,7 +4977,7 @@ var SkeletonTable = ({ rows = 5, columns = 4, className }) => /* @__PURE__ */ js
 ] }) });
 var GAP2 = 10;
 var VIEWPORT_MARGIN2 = 8;
-function calcPosition3(trigger, tooltip, placement) {
+function calcPosition4(trigger, tooltip, placement) {
   let resolvedPlacement = placement;
   if (placement === "top" && trigger.top < tooltip.height + GAP2 + VIEWPORT_MARGIN2) {
     resolvedPlacement = "bottom";
@@ -4693,7 +5061,7 @@ var Tooltip = ({
       }
       const triggerRect = triggerRef.current.getBoundingClientRect();
       const tooltipRect = tooltipRef.current.getBoundingClientRect();
-      const next = calcPosition3(triggerRect, tooltipRect, placement);
+      const next = calcPosition4(triggerRect, tooltipRect, placement);
       setPosition(next);
     };
     updatePosition();
@@ -4985,6 +5353,7 @@ exports.Textarea = Textarea;
 exports.Timeline = Timeline;
 exports.Toolbar = Toolbar;
 exports.Tooltip = Tooltip;
+exports.TreeSelectInput = TreeSelectInput;
 exports.UploadInput = UploadInput;
 exports.UploadProvider = UploadProvider;
 exports.getIcon = getIcon;