lecom-ui 5.4.32 → 5.4.34

package/dist/components/Combobox/Combobox.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { cva } from 'class-variance-authority';
-import { ChevronUpIcon, ChevronDownIcon, Check } from 'lucide-react';
+import { ChevronUpIcon, ChevronDownIcon, Check, Plus } from 'lucide-react';
 import { initializeI18n } from '../../i18n/index.js';
 import { cn } from '../../lib/utils.js';
 import { Button } from '../Button/Button.js';
@@ -115,7 +115,7 @@ const ComboboxItemContent = ({
       ),
       "aria-current": isSelected ? "true" : void 0
     },
-    /* @__PURE__ */ React.createElement(Typography, { className: "w-4 h-4 flex items-center justify-center" }, option.value === value && /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Typography, { className: "w-4 h-4 flex items-center justify-center shrink-0" }, option.value === value && /* @__PURE__ */ React.createElement(
       Check,
       {
         className: cn(textColor, isSelected ? "text-primary-600" : ""),
@@ -123,18 +123,64 @@ const ComboboxItemContent = ({
         strokeWidth: isSelected ? 2.5 : 2
       }
     )),
-    option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: cn("mr-0.5 flex items-center justify-center shrink-0", textColor) }, option.prefix),
+    option.prefix && /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        className: cn(
+          "mr-0.5 flex items-center justify-center shrink-0",
+          textColor
+        )
+      },
+      option.prefix
+    ),
     /* @__PURE__ */ React.createElement(
       Typography,
       {
         variant: fontVariant,
-        className: cn(textColor, "whitespace-normal flex items-center justify-center")
+        className: cn(
+          textColor,
+          "whitespace-normal flex items-center justify-center break-words"
+        )
       },
       option.label
     )
   );
 };
 ComboboxItemContent.displayName = "ComboboxItemContent";
+const CreateOption = ({
+  searchTerm,
+  onCreateOption,
+  onClose,
+  size = "medium"
+}) => {
+  const { t } = useTranslation();
+  const fontVariant = getFontVariant(size);
+  const checkIconSize = CHECK_ICON_SIZES[size];
+  const handleCreate = () => {
+    onClose();
+    requestAnimationFrame(() => onCreateOption(searchTerm));
+  };
+  return /* @__PURE__ */ React.createElement(
+    CommandItem,
+    {
+      onSelect: handleCreate,
+      className: cn(
+        comboboxItemVariants({ size }),
+        "text-primary-600 hover:bg-primary-50"
+      )
+    },
+    /* @__PURE__ */ React.createElement(Typography, { className: "w-4 h-4 flex items-center justify-center shrink-0" }, /* @__PURE__ */ React.createElement(
+      Plus,
+      {
+        className: "text-primary-600",
+        size: checkIconSize,
+        strokeWidth: 2
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Typography, { variant: fontVariant, className: "text-primary-600" }, t("multiSelect.create"), " ", '"', searchTerm, '"')
+  );
+};
+CreateOption.displayName = "CreateOption";
 const ComboboxOptionsList = React.memo(
   ({ items, value, onChange, onClose, itemsClassName, size }) => /* @__PURE__ */ React.createElement(React.Fragment, null, items.map(
     (item, idx) => isComboboxGroup(item) ? /* @__PURE__ */ React.createElement(
@@ -171,6 +217,83 @@ const ComboboxOptionsList = React.memo(
   ))
 );
 ComboboxOptionsList.displayName = "ComboboxOptionsList";
+const useComboboxScrollToSelected = (open, value, commandListRef) => {
+  React.useEffect(() => {
+    if (!open) return;
+    if (!value) return;
+    requestAnimationFrame(() => {
+      const el = commandListRef.current?.querySelector(
+        `[data-combobox-value="${value}"]`
+      );
+      if (el) {
+        el.scrollIntoView({ block: "nearest" });
+      }
+    });
+  }, [open, value, commandListRef]);
+};
+const useComboboxState = (options, renderOptions, value, search, allowCreate, onCreateOption, placeholder, t) => {
+  const filteredOptions = React.useMemo(
+    () => !search ? renderOptions : filterComboboxOptions(renderOptions, search),
+    [renderOptions, search]
+  );
+  const selectedOption = React.useMemo(
+    () => getSelectedOption(options, value),
+    [options, value]
+  );
+  const showCreateOption = allowCreate && onCreateOption && search.trim() !== "";
+  const selectedLabel = selectedOption?.label || placeholder || t("multiSelect.placeholder");
+  const selectedPrefix = selectedOption?.prefix;
+  return {
+    filteredOptions,
+    selectedOption,
+    showCreateOption,
+    selectedLabel,
+    selectedPrefix
+  };
+};
+const ComboboxContent = ({
+  showCreateOption,
+  search,
+  onCreateOption,
+  onClose,
+  size,
+  notFoundContent,
+  filteredOptions,
+  value,
+  onChange,
+  itemsClassName
+}) => {
+  const { t } = useTranslation();
+  const hasResults = filteredOptions.length > 0;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !hasResults && /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent || t("multiSelect.empty")), /* @__PURE__ */ React.createElement(
+    ComboboxOptionsList,
+    {
+      items: filteredOptions,
+      value,
+      onChange,
+      onClose,
+      itemsClassName,
+      size
+    }
+  ), showCreateOption && onCreateOption && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "sticky bottom-0 bg-white pt-1",
+        hasResults && "border-t border-grey-200"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      CreateOption,
+      {
+        searchTerm: search,
+        onCreateOption,
+        onClose,
+        size
+      }
+    )
+  ));
+};
 const comboboxTriggerVariants = cva(
   "w-full px-4 text-left shadow-sm flex items-center justify-between transition",
   {
@@ -241,14 +364,24 @@ const ComboboxTriggerButton = React.forwardRef(
         disabled: disabled ?? false,
         ...props
       },
-      /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center gap-2 truncate min-w-[calc(100%-2.25rem)]", selectedPrefix && "min-w-[calc(100%-4.75rem)]") }, selectedPrefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center shrink-0" }, selectedPrefix), /* @__PURE__ */ React.createElement(
-        Typography,
+      /* @__PURE__ */ React.createElement(
+        "div",
         {
-          className: cn("truncate", colorClass),
-          variant: fontVariant
+          className: cn(
+            "flex items-center gap-2 truncate min-w-[calc(100%-2.25rem)]",
+            selectedPrefix && "min-w-[calc(100%-4.75rem)]"
+          )
         },
-        selectedLabel
-      )),
+        selectedPrefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center shrink-0" }, selectedPrefix),
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            className: cn("truncate", colorClass),
+            variant: fontVariant
+          },
+          selectedLabel
+        )
+      ),
       /* @__PURE__ */ React.createElement("div", { className: "w-5" }, /* @__PURE__ */ React.createElement(
         ChevronIcon,
         {
@@ -274,43 +407,42 @@ function Combobox({
   itemsClassName,
   rounded = "default",
   showSearch = true,
-  size = "medium"
+  size = "medium",
+  allowCreate = false,
+  onCreateOption
 }) {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState("");
   const commandListRef = React.useRef(null);
-  const filteredOptions = React.useMemo(
-    () => !search ? options : filterComboboxOptions(options, search),
-    [options, search]
-  );
-  const selectedOption = React.useMemo(
-    () => getSelectedOption(options, value),
-    [options, value]
+  const lastOpenOptionsRef = React.useRef(options);
+  React.useEffect(() => {
+    if (open) {
+      lastOpenOptionsRef.current = options;
+    }
+  }, [open, options]);
+  const renderOptions = open ? options : lastOpenOptionsRef.current;
+  const { filteredOptions, showCreateOption, selectedLabel, selectedPrefix } = useComboboxState(
+    options,
+    renderOptions,
+    value,
+    search,
+    allowCreate,
+    onCreateOption,
+    placeholder,
+    t
   );
-  const selectedLabel = selectedOption?.label || placeholder || t("multiSelect.placeholder");
-  const selectedPrefix = selectedOption?.prefix;
   const handleClose = React.useCallback(() => {
     setOpen(false);
   }, []);
-  React.useEffect(() => {
-    if (!open) return;
-    if (!value) return;
-    requestAnimationFrame(() => {
-      const el = commandListRef.current?.querySelector(
-        `[data-combobox-value="${value}"]`
-      );
-      if (el) {
-        el.scrollIntoView({ block: "nearest" });
-      }
-    });
-  }, [open, value]);
-  React.useEffect(() => {
-    if (!open) {
+  const handleOpenChange = React.useCallback((nextOpen) => {
+    setOpen(nextOpen);
+    if (nextOpen) {
       setSearch("");
     }
-  }, [open]);
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+  }, []);
+  useComboboxScrollToSelected(open, value, commandListRef);
+  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
     ComboboxTriggerButton,
     {
       open,
@@ -354,15 +486,19 @@ function Combobox({
           contentClassName
         )
       },
-      /* @__PURE__ */ React.createElement(CommandList, { className: "overflow-visible" }, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent || t("multiSelect.empty")), /* @__PURE__ */ React.createElement(
-        ComboboxOptionsList,
+      /* @__PURE__ */ React.createElement(CommandList, { className: "overflow-visible" }, /* @__PURE__ */ React.createElement(
+        ComboboxContent,
         {
-          items: filteredOptions,
+          showCreateOption,
+          search,
+          onCreateOption,
+          onClose: handleClose,
+          size,
+          notFoundContent,
+          filteredOptions,
           value,
           onChange,
-          onClose: handleClose,
-          itemsClassName,
-          size
+          itemsClassName
         }
       ))
     ))

package/dist/components/CustomTagInput/CustomTagInput.js

@@ -18,11 +18,13 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
   onDragEnd,
   isDragging,
   onMouseDown,
-  isAllSelected = false
+  isAllSelected = false,
+  defaultColor
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [editValue, setEditValue] = React.useState(item.label);
   const inputRef = React.useRef(null);
+  const tagColor = item.color || defaultColor;
   React.useEffect(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
@@ -80,7 +82,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
     [index, onDragOver]
   );
   if (isEditing) {
-    return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "px-2 py-0 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: tagColor, className: "px-2 py-0 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement(
       "input",
       {
         ref: inputRef,
@@ -89,7 +91,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
         onChange: (e) => setEditValue(e.target.value),
         onKeyDown: handleKeyDown,
         onBlur: handleBlur,
-        className: "bg-transparent border-none outline-none text-blue-700 body-small-400 min-w-[60px] w-full",
+        className: "bg-transparent border-none outline-none [color:inherit] body-small-400 min-w-[60px] w-full",
         onClick: (e) => e.stopPropagation(),
         style: { width: `${Math.min(Math.max(editValue.length * 8, 60), 250)}px` }
       }
@@ -99,7 +101,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
     Tag,
     {
       "data-tag": "true",
-      color: "blue",
+      color: tagColor,
       className: cn(
         "cursor-pointer group max-w-[15.625rem]",
         isDragging && "opacity-30 scale-95 transition-all",
@@ -117,7 +119,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
       GripVertical,
       {
         className: cn(
-          "w-4 h-4 opacity-100 transition-all cursor-grab flex-shrink-0 stroke-blue-600 fill-none hover:stroke-blue-800 hover:scale-110",
+          "w-4 h-4 opacity-100 transition-all cursor-grab flex-shrink-0 stroke-current fill-none hover:opacity-80 hover:scale-110",
           isAllSelected && "!stroke-grey-400"
         ),
         onMouseDown: (e) => e.stopPropagation(),
@@ -128,8 +130,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
       Typography,
       {
         variant: "body-small-400",
-        className: "truncate flex-1 min-w-0",
-        textColor: "text-blue-700",
+        className: "truncate flex-1 min-w-0 [color:inherit]",
         onClick: handleClick
       },
       item.label
@@ -138,7 +139,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
       X,
       {
         className: cn(
-          "w-4 h-4 cursor-pointer flex-shrink-0 stroke-blue-600 stroke-2 outline-none hover:stroke-blue-800 hover:scale-110 transition-all",
+          "w-4 h-4 cursor-pointer flex-shrink-0 stroke-current stroke-2 outline-none hover:opacity-80 hover:scale-110 transition-all",
           isAllSelected && "!stroke-grey-400"
         ),
         onClick: handleRemove,
@@ -167,7 +168,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
   onInlineCancel,
   onSpacerClick,
   onMouseDown,
-  isAllSelected = false
+  isAllSelected = false,
+  defaultColor
 }) {
   const showInlineInput = insertAtIndex === index;
   const showDragIndicator = dragOverIndex === index && draggedIndex !== null && draggedIndex !== index;
@@ -177,7 +179,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
     {
       onAdd: onInlineAdd,
       onCancel: onInlineCancel,
-      placeholder: inlinePlaceholder
+      placeholder: inlinePlaceholder,
+      color: defaultColor
     }
   ), /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-0.5 relative" }, /* @__PURE__ */ React.createElement(
     CustomTagItemComponent,
@@ -194,7 +197,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
       onDragEnd,
       isDragging: draggedIndex === index,
       onMouseDown,
-      isAllSelected
+      isAllSelected,
+      defaultColor
     }
   ), showDragIndicator && /* @__PURE__ */ React.createElement("div", { className: "w-1 h-6 bg-blue-500 rounded-full animate-pulse self-center" }), showSpacer && /* @__PURE__ */ React.createElement(
     "div",
@@ -208,7 +212,7 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
     }
   )));
 });
-const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placeholder }) {
+const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placeholder, color }) {
   const [value, setValue] = React.useState("");
   const inputRef = React.useRef(null);
   React.useEffect(() => {
@@ -237,7 +241,7 @@ const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placehol
       onCancel();
     }
   }, [value, onAdd, onCancel]);
-  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "px-2 py-0 max-w-[15.625rem]", "data-inline-input": "true" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color, className: "px-2 py-0 max-w-[15.625rem]", "data-inline-input": "true" }, /* @__PURE__ */ React.createElement(
     "input",
     {
       ref: inputRef,
@@ -247,7 +251,7 @@ const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placehol
       onKeyDown: handleKeyDown,
       onBlur: handleBlur,
       placeholder,
-      className: "bg-transparent border-none outline-none text-blue-700 body-small-400 min-w-[3.75rem] w-full px-1",
+      className: "bg-transparent border-none outline-none [color:inherit] body-small-400 min-w-[3.75rem] w-full px-1",
       onClick: (e) => e.stopPropagation(),
       style: { width: `${Math.min(Math.max(value.length * 8, 60), 250)}px` }
     }
@@ -680,7 +684,8 @@ function CustomTagInputRenderer({
   setInputValue,
   handleMouseDown,
   isAllSelected,
-  setIsAllSelected
+  setIsAllSelected,
+  defaultColor
 }) {
   const showFinalInlineInput = insertAtIndex === value.length;
   const inputPlaceholder = value.length === 0 ? placeholder : "";
@@ -706,14 +711,16 @@ function CustomTagInputRenderer({
       onInlineCancel: handleInlineCancel,
       onSpacerClick: handleSpacerClick,
       onMouseDown: handleMouseDown,
-      isAllSelected
+      isAllSelected,
+      defaultColor
     }
   )), showFinalInlineInput && /* @__PURE__ */ React.createElement(
     InlineInput,
     {
       onAdd: handleInlineAdd,
       onCancel: handleInlineCancel,
-      placeholder: inlinePlaceholder
+      placeholder: inlinePlaceholder,
+      color: defaultColor
     }
   ), !readOnly && /* @__PURE__ */ React.createElement(
     "span",
@@ -749,6 +756,7 @@ function CustomTagInput(props) {
     allowDuplicates = false,
     enableReorder = true,
     onTagEdit,
+    color = "blue",
     ...restProps
   } = props;
   const [inputValue, setInputValue] = React.useState("");
@@ -849,7 +857,8 @@ function CustomTagInput(props) {
           setInputValue,
           handleMouseDown,
           isAllSelected,
-          setIsAllSelected
+          setIsAllSelected,
+          defaultColor: color
         }
       )
     )

package/dist/components/DataTable/DataTable.js

@@ -107,7 +107,7 @@ function DataTable({
         });
       });
     }
-  }, [isLoading]);
+  }, [isLoading, sorting]);
   const throttle = React.useCallback(
     (func, delay) => {
       let timeoutId = null;
@@ -194,7 +194,7 @@ function DataTable({
         style: { maxHeight: styleDataTableContainer.height }
       },
       renderTable()
-    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
+    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "vertical" }))
   ), hasPagination());
 }
 const MemoizedDataTable = React.memo(DataTable);

package/dist/components/DataTable/DataTable.utils.js

@@ -122,7 +122,7 @@ function buildColumns({
           variant: size === "small" ? "body-medium-500" : "body-large-500",
           textColor: "text-grey-950",
           className: "whitespace-normal break-words max-sm:truncate",
-          title: externalColumn.title
+          title: externalColumn.showHeaderTooltip ? externalColumn.title : void 0
         },
         externalColumn.title
       ) : title, hasSort && renderSortArrow({ column, externalColumn, table }));

package/dist/components/DataTable/Table.js

@@ -71,7 +71,7 @@ function Table({
     "tr",
     {
       "data-state": onIsSelected?.(row) ? "selected" : "",
-      className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
+      className: "[&_td]:hover:!bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
     },
     row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
       "td",

package/dist/components/Header/SearchInput.js

@@ -9,6 +9,7 @@ const SearchInput = ({
   customStyles,
   placeholder,
   isActiveButton,
+  value,
   onChangeValue,
   onClickButton
 }) => {
@@ -44,9 +45,11 @@ const SearchInput = ({
     {
       id: "header-search-input-lecom-ui",
       placeholder,
+      size: "small",
       radius: "full",
+      value,
       prefixInset: /* @__PURE__ */ React.createElement(Search, { size: 20, color: mappedCustomStyles.color }),
-      className: "body-small-400 border-none",
+      className: "body-small-400 border-none h-8",
       containerClassName: "grow",
       onMouseOver: handleOver,
       onMouseOut: handleOut,

package/dist/components/Input/Input.js

@@ -3,7 +3,7 @@ import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 
 const inputVariants = cva(
-  `flex h-8 w-full rounded-sm border border-grey-400 bg-background px-3 py-2
+  `flex w-full rounded-sm border border-grey-400 bg-background px-3 py-2
   placeholder:text-grey-500 outline-none
   hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
   disabled:cursor-not-allowed disabled:bg-grey-100 disabled:border-grey-400
@@ -16,7 +16,7 @@ const inputVariants = cva(
         borderless: "border-none bg-transparent focus:bg-transparent focus:ring-0"
       },
       size: {
-        small: "h-8 body-small-400 px-3 py-0 placeholder:body-small-400",
+        small: "h-8 body-small-400 px-4 py-1 placeholder:body-small-400",
         default: "h-10 body-medium-400 px-3 py-2 placeholder:body-medium-400",
         large: "h-12  body-large-400 px-3 py-2 placeholder:body-large-400"
       },

package/dist/components/Layout/Layout.js

@@ -15,6 +15,9 @@ import { Typography } from '../Typography/Typography.js';
 
 initializeI18n();
 const Layout = ({ children, header, sideBar }) => {
+  if (!sideBar) {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col h-screen" }, /* @__PURE__ */ React.createElement(Header, { ...header }), /* @__PURE__ */ React.createElement("main", { className: "grow w-full" }, children));
+  }
   const { items, info, collapsible = "icon" } = sideBar;
   const sidebarState = getCookie("sidebar:state") === "true";
   return /* @__PURE__ */ React.createElement(SidebarProvider, { className: "flex-col", defaultOpen: sidebarState }, /* @__PURE__ */ React.createElement(Header, { ...header }), /* @__PURE__ */ React.createElement("div", { className: "flex grow" }, /* @__PURE__ */ React.createElement(Sidebar, { collapsible, variant: "sidebar" }, /* @__PURE__ */ React.createElement(SidebarContent, null, /* @__PURE__ */ React.createElement(SidebarGroup, null, /* @__PURE__ */ React.createElement(SidebarGroupContent, null, /* @__PURE__ */ React.createElement(SidebarMenu, null, items.map((item) => /* @__PURE__ */ React.createElement(SidebarMenuItem, { key: item.title }, /* @__PURE__ */ React.createElement(