lecom-ui 5.3.15 → 5.3.17

package/dist/components/Button/CustomButton.js

@@ -2,48 +2,35 @@ import * as React from 'react';
 import opacity from 'hex-color-opacity';
 import { Button } from './Button.js';
 
+const SHADOW_SM_TAILWIND = "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0, 0, 0, 0.05)";
 const CustomButton = React.forwardRef(
   ({ customStyles, isActive, children, ...props }, ref) => {
     const { normal, hover, focus } = customStyles;
-    const [backgroundColor, setBackgroundColor] = React.useState(
-      () => opacity(normal.bgColor, normal.opacity)
-    );
-    const [color, setColor] = React.useState(normal.textColor);
+    const getStyle = (style) => ({
+      backgroundColor: opacity(style.bgColor, style.opacity),
+      color: style.textColor
+    });
+    const [styleState, setStyleState] = React.useState(() => getStyle(normal));
     React.useEffect(() => {
-      setBackgroundColor(opacity(normal.bgColor, normal.opacity));
-      setColor(normal.textColor);
-    }, [normal.bgColor, normal.opacity, normal.textColor]);
-    const handleOver = React.useCallback(() => {
-      setBackgroundColor(opacity(hover.bgColor, hover.opacity));
-      setColor(hover.textColor);
-    }, [hover.bgColor, hover.opacity, hover.textColor]);
-    const handleOut = React.useCallback(() => {
-      setBackgroundColor(opacity(normal.bgColor, normal.opacity));
-      setColor(normal.textColor);
-    }, [normal.bgColor, normal.opacity, normal.textColor]);
-    const shadowSmTailwind = "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0, 0, 0, 0.05)";
+      setStyleState(getStyle(normal));
+    }, [normal]);
+    const handleMouseOver = () => setStyleState(getStyle(hover));
+    const handleMouseOut = () => setStyleState(getStyle(normal));
     const mappedCustomStyles = React.useMemo(
       () => ({
-        backgroundColor: isActive ? opacity(focus.bgColor, focus.opacity) : backgroundColor,
-        color: isActive ? focus.textColor : color,
-        boxShadow: shadowSmTailwind
+        backgroundColor: isActive ? opacity(focus.bgColor, focus.opacity) : styleState.backgroundColor,
+        color: isActive ? focus.textColor : styleState.color,
+        boxShadow: SHADOW_SM_TAILWIND
       }),
-      [
-        isActive,
-        focus.bgColor,
-        focus.opacity,
-        focus.textColor,
-        backgroundColor,
-        color
-      ]
+      [isActive, focus, styleState]
     );
     return /* @__PURE__ */ React.createElement(
       Button,
       {
-        onMouseOver: handleOver,
-        onMouseOut: handleOut,
-        style: mappedCustomStyles,
         ref,
+        style: mappedCustomStyles,
+        onMouseOver: handleMouseOver,
+        onMouseOut: handleMouseOut,
         ...props
       },
       children

package/dist/components/Select/Select.js

@@ -7,54 +7,25 @@ import { ChevronDown, ChevronUp, Check } from 'lucide-react';
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
+const SHADOW_SM_TAILWIND = "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0, 0, 0, 0.05)";
 const SelectTrigger = React.forwardRef(({ className, children, customStyles, ...props }, ref) => {
-  const normal = customStyles?.normal;
-  const hover = customStyles?.hover;
-  const focus = customStyles?.focus;
-  const [state, setState] = React.useState(
-    "normal"
-  );
-  React.useEffect(() => {
-    setState("normal");
-  }, [customStyles]);
-  const getCurrentStyles = React.useCallback(() => {
-    const shadowSmTailwind = "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0, 0, 0, 0.05)";
-    if (!customStyles) return {};
-    if (state === "hover" && hover) {
-      return {
-        backgroundColor: opacity(hover.bgColor, hover.opacity),
-        color: hover.textColor,
-        boxShadow: shadowSmTailwind
-      };
-    }
-    if (state === "focus" && focus) {
-      return {
-        backgroundColor: opacity(focus.bgColor, focus.opacity),
-        color: focus.textColor,
-        boxShadow: shadowSmTailwind
-      };
-    }
-    if (normal) {
-      return {
-        backgroundColor: opacity(normal.bgColor, normal.opacity),
-        color: normal.textColor,
-        boxShadow: shadowSmTailwind
-      };
-    }
-    return {};
-  }, [customStyles, state, normal, hover, focus]);
-  const handleOver = React.useCallback(() => {
-    if (hover) setState("hover");
-  }, [hover]);
-  const handleOut = React.useCallback(() => {
-    setState("normal");
-  }, []);
-  const handleFocus = React.useCallback(() => {
-    if (focus) setState("focus");
-  }, [focus]);
-  const handleBlur = React.useCallback(() => {
-    setState("normal");
-  }, []);
+  const [state, setState] = React.useState("normal");
+  const { normal, hover, focus } = customStyles || {};
+  React.useEffect(() => setState("normal"), [customStyles]);
+  const currentStyles = React.useMemo(() => {
+    const styleByState = customStyles && customStyles[state] || normal;
+    if (!styleByState) return {};
+    const { bgColor, opacity: bgOpacity, textColor } = styleByState;
+    return {
+      backgroundColor: opacity(bgColor, bgOpacity),
+      color: textColor,
+      boxShadow: SHADOW_SM_TAILWIND
+    };
+  }, [customStyles, state, normal]);
+  const handleMouseOver = () => hover && setState("hover");
+  const handleMouseOut = () => setState("normal");
+  const handleFocus = () => focus && setState("focus");
+  const handleBlur = () => setState("normal");
   return /* @__PURE__ */ React.createElement(
     SelectPrimitive.Trigger,
     {
@@ -68,11 +39,11 @@ const SelectTrigger = React.forwardRef(({ className, children, customStyles, ...
         !customStyles && "border border-grey-400 bg-background",
         className
       ),
-      onMouseOver: handleOver,
-      onMouseOut: handleOut,
+      style: currentStyles,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
       onFocus: handleFocus,
       onBlur: handleBlur,
-      style: getCurrentStyles(),
       ...props
     },
     children,

package/dist/index.d.ts

@@ -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<HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLDivElement | HTMLButtonElement | HTMLLabelElement | HTMLParagraphElement | HTMLHeadingElement | 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"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLDivElement | HTMLButtonElement | 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"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;

package/package.json

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