lecom-ui 5.4.31 → 5.4.32

package/README.md

@@ -1 +1 @@
-lecom-ui
+lecom-ui

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, Plus } from 'lucide-react';
+import { ChevronUpIcon, ChevronDownIcon, Check } 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 shrink-0" }, option.value === value && /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Typography, { className: "w-4 h-4 flex items-center justify-center" }, option.value === value && /* @__PURE__ */ React.createElement(
       Check,
       {
         className: cn(textColor, isSelected ? "text-primary-600" : ""),
@@ -123,64 +123,18 @@ 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")
       },
       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(
@@ -217,83 +171,6 @@ 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",
   {
@@ -364,24 +241,14 @@ const ComboboxTriggerButton = React.forwardRef(
         disabled: disabled ?? false,
         ...props
       },
-      /* @__PURE__ */ React.createElement(
-        "div",
+      /* @__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,
         {
-          className: cn(
-            "flex items-center gap-2 truncate min-w-[calc(100%-2.25rem)]",
-            selectedPrefix && "min-w-[calc(100%-4.75rem)]"
-          )
+          className: cn("truncate", colorClass),
+          variant: fontVariant
         },
-        selectedPrefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center shrink-0" }, selectedPrefix),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            className: cn("truncate", colorClass),
-            variant: fontVariant
-          },
-          selectedLabel
-        )
-      ),
+        selectedLabel
+      )),
       /* @__PURE__ */ React.createElement("div", { className: "w-5" }, /* @__PURE__ */ React.createElement(
         ChevronIcon,
         {
@@ -407,42 +274,43 @@ function Combobox({
   itemsClassName,
   rounded = "default",
   showSearch = true,
-  size = "medium",
-  allowCreate = false,
-  onCreateOption
+  size = "medium"
 }) {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState("");
   const commandListRef = React.useRef(null);
-  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 filteredOptions = React.useMemo(
+    () => !search ? options : filterComboboxOptions(options, search),
+    [options, search]
   );
+  const selectedOption = React.useMemo(
+    () => getSelectedOption(options, value),
+    [options, value]
+  );
+  const selectedLabel = selectedOption?.label || placeholder || t("multiSelect.placeholder");
+  const selectedPrefix = selectedOption?.prefix;
   const handleClose = React.useCallback(() => {
     setOpen(false);
   }, []);
-  const handleOpenChange = React.useCallback((nextOpen) => {
-    setOpen(nextOpen);
-    if (nextOpen) {
+  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) {
       setSearch("");
     }
-  }, []);
-  useComboboxScrollToSelected(open, value, commandListRef);
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
     ComboboxTriggerButton,
     {
       open,
@@ -486,19 +354,15 @@ function Combobox({
           contentClassName
         )
       },
-      /* @__PURE__ */ React.createElement(CommandList, { className: "overflow-visible" }, /* @__PURE__ */ React.createElement(
-        ComboboxContent,
+      /* @__PURE__ */ React.createElement(CommandList, { className: "overflow-visible" }, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent || t("multiSelect.empty")), /* @__PURE__ */ React.createElement(
+        ComboboxOptionsList,
         {
-          showCreateOption,
-          search,
-          onCreateOption,
-          onClose: handleClose,
-          size,
-          notFoundContent,
-          filteredOptions,
+          items: filteredOptions,
           value,
           onChange,
-          itemsClassName
+          onClose: handleClose,
+          itemsClassName,
+          size
         }
       ))
     ))

package/dist/components/DataTable/DataTable.js

@@ -107,7 +107,7 @@ function DataTable({
         });
       });
     }
-  }, [isLoading, sorting]);
+  }, [isLoading]);
   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: "vertical" }))
+    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
   ), 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.showHeaderTooltip ? externalColumn.title : void 0
+          title: externalColumn.title
         },
         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,7 +9,6 @@ const SearchInput = ({
   customStyles,
   placeholder,
   isActiveButton,
-  value,
   onChangeValue,
   onClickButton
 }) => {
@@ -45,11 +44,9 @@ 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 h-8",
+      className: "body-small-400 border-none",
       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 w-full rounded-sm border border-grey-400 bg-background px-3 py-2
+  `flex h-8 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-4 py-1 placeholder:body-small-400",
+        small: "h-8 body-small-400 px-3 py-0 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,9 +15,6 @@ 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(