lecom-ui 5.3.12 → 5.3.14

package/dist/components/Button/CustomButton.js

@@ -6,9 +6,19 @@ const CustomButton = React.forwardRef(
   ({ customStyles, isActive, children, ...props }, ref) => {
     const { normal, hover, focus } = customStyles;
     const [backgroundColor, setBackgroundColor] = React.useState(
-      opacity(normal.bgColor, normal.opacity)
+      () => opacity(normal.bgColor, normal.opacity)
     );
     const [color, setColor] = React.useState(normal.textColor);
+    React.useEffect(() => {
+      setBackgroundColor(
+        opacity(customStyles.normal.bgColor, customStyles.normal.opacity)
+      );
+      setColor(customStyles.normal.textColor);
+    }, [
+      customStyles.normal.bgColor,
+      customStyles.normal.opacity,
+      customStyles.normal.textColor
+    ]);
     const handleOver = () => {
       setBackgroundColor(opacity(hover.bgColor, hover.opacity));
       setColor(hover.textColor);

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

@@ -35,6 +35,32 @@ function buildColumns({
   columns,
   size = "middle"
 }) {
+  function renderSortArrow({
+    hasSort,
+    column,
+    externalColumn,
+    table
+  }) {
+    if (!hasSort) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(
+      ArrowUpDown,
+      {
+        size: 16,
+        className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
+        onClick: (event) => {
+          event.stopPropagation();
+          const sortingHandler = column.getToggleSortingHandler?.();
+          if (externalColumn.onSort) {
+            externalColumn.onSort({ table, column });
+          } else if (sortingHandler) {
+            sortingHandler(event);
+          }
+        }
+      }
+    );
+  }
   const mappedColumns = columns.map((externalColumn) => ({
     accessorKey: externalColumn.key,
     header: ({ table, column }) => {
@@ -54,26 +80,6 @@ function buildColumns({
       }
       const hasSort = !!externalColumn.onSort || !!externalColumn.onSortClient;
       const title = typeof externalColumn.title === "function" ? externalColumn.title({ table, column }) : externalColumn.title;
-      function renderSortArrow() {
-        if (!hasSort) {
-          return null;
-        }
-        return /* @__PURE__ */ React.createElement(
-          ArrowUpDown,
-          {
-            size: 16,
-            className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
-            onClick: (e) => {
-              e.stopPropagation();
-              const handler = column.getToggleSortingHandler?.();
-              if (handler) handler(e);
-              else if (externalColumn.onSort) {
-                externalColumn.onSort({ table, column });
-              }
-            }
-          }
-        );
-      }
       return /* @__PURE__ */ React.createElement(
         "div",
         {
@@ -92,7 +98,12 @@ function buildColumns({
           },
           externalColumn.title
         ) : title,
-        renderSortArrow()
+        renderSortArrow({
+          hasSort,
+          column,
+          externalColumn,
+          table
+        })
       );
     },
     cell: ({ row }) => {

package/dist/components/DataTable/Table.js

@@ -56,8 +56,7 @@ function Table({
       style: {
         ...styleColumn(header.column.columnDef.meta, "th"),
         ...header.column.columnDef.meta?.headerStyle
-      },
-      onClick: header.column.getToggleSortingHandler()
+      }
     },
     header.isPlaceholder ? null : flexRender(
       header.column.columnDef.header,

package/dist/components/Select/Select.js

@@ -15,6 +15,19 @@ const SelectTrigger = React.forwardRef(({ className, children, customStyles, ...
     normal ? opacity(normal.bgColor, normal.opacity) : void 0
   );
   const [color, setColor] = React.useState(normal?.textColor ?? void 0);
+  React.useEffect(() => {
+    if (customStyles?.normal) {
+      setBackgroundColor(
+        opacity(customStyles.normal.bgColor, customStyles.normal.opacity)
+      );
+      setColor(customStyles.normal.textColor);
+    }
+  }, [
+    customStyles?.normal,
+    customStyles?.normal?.bgColor,
+    customStyles?.normal?.opacity,
+    customStyles?.normal?.textColor
+  ]);
   const [isActive, setIsActive] = React.useState(false);
   const handleOver = React.useCallback(() => {
     if (hover) {

package/dist/index.d.ts

@@ -738,8 +738,8 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 
 declare const inputVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | "full" | null | undefined;
+    size?: "small" | "default" | "large" | null | undefined;
+    radius?: "small" | "default" | "large" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
     sufix?: React$1.ReactNode;
@@ -898,7 +898,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLInputElement | HTMLLabelElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLButtonElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -983,7 +983,7 @@ declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive
 declare const TooltipArrow: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React$1.RefAttributes<SVGSVGElement>>;
 declare const TooltipPortal: React$1.FC<TooltipPrimitive.TooltipPortalProps>;
 declare const tooltipContentVariants: (props?: ({
-    color?: "black" | "white" | null | undefined;
+    color?: "white" | "black" | null | undefined;
     arrow?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TooltipContentProps extends React$1.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipContentVariants> {
@@ -1054,7 +1054,7 @@ declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 
 declare const textareaVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    radius?: "default" | "small" | "large" | null | undefined;
+    radius?: "small" | "default" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
     resize?: 'none' | 'both' | 'horizontal' | 'vertical';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "5.3.12",
+  "version": "5.3.14",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",