@lindle/linoardo 1.0.14 → 1.0.15

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React3 from 'react';
-import { forwardRef, Component, isValidElement, cloneElement } from 'react';
+import { forwardRef, Component, useState, useRef, useEffect, useCallback, useMemo, isValidElement, cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -466,20 +466,20 @@ var ListItem = React3.forwardRef((props, ref) => {
   const sharp = sharpOverride ?? false;
   const accent = accentClasses[color] ?? accentClasses.primary;
   const shapeClass = divided || sharp ? "rounded-none" : "rounded-lg";
-  const Component3 = component ?? (href ? "a" : "div");
-  const interactive = typeof rest.onClick === "function" || Component3 === "a" || Component3 === "button";
+  const Component2 = component ?? (href ? "a" : "div");
+  const interactive = typeof rest.onClick === "function" || Component2 === "a" || Component2 === "button";
   const resolvedRole = role ?? "listitem";
-  const resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive && Component3 === "div" ? 0 : void 0);
-  const resolvedRel = Component3 === "a" ? rel : void 0;
-  const resolvedTarget = Component3 === "a" ? target : void 0;
-  const resolvedHref = Component3 === "a" ? href : void 0;
-  const resolvedType = Component3 === "button" ? type ?? "button" : void 0;
+  const resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive && Component2 === "div" ? 0 : void 0);
+  const resolvedRel = Component2 === "a" ? rel : void 0;
+  const resolvedTarget = Component2 === "a" ? target : void 0;
+  const resolvedHref = Component2 === "a" ? href : void 0;
+  const resolvedType = Component2 === "button" ? type ?? "button" : void 0;
   const disabledClass = disabled ? "pointer-events-none opacity-60" : "cursor-pointer";
   const navPaddingClass = nav ? "pl-5" : void 0;
   const insetClass = inset ? "pl-12" : void 0;
   const activeClasses = active ? accent.bg : void 0;
   return /* @__PURE__ */ jsxs(
-    Component3,
+    Component2,
     {
       ...rest,
       ref,
@@ -949,22 +949,41 @@ var normalizeValues = (value, allowMultiple) => {
   return normalized.length ? [normalized[0]] : [];
 };
 var clampValues = (values, allowMultiple) => allowMultiple ? uniqueValues(values) : values.length ? [values[0]] : [];
-var ExpansionPanelInner = class extends Component {
-  constructor(props) {
-    super(props);
-    this.isControlled = () => this.props.value !== void 0;
-    this.getExpandedValues = (allowMultiple = this.props.multiple ?? false) => {
-      if (this.isControlled()) {
-        return normalizeValues(this.props.value, allowMultiple);
-      }
-      return this.state.internalValues;
-    };
-    this.handleValueChange = (next) => {
-      const { onChange } = this.props;
-      const allowMultiple = this.props.multiple ?? false;
-      const isControlled = this.isControlled();
+var ExpansionPanelInner = (props, forwardedRef) => {
+  const {
+    variant = "elevated",
+    rounded = "lg",
+    density = "default",
+    color = "primary",
+    divider = true,
+    multiple = false,
+    className,
+    children,
+    value,
+    defaultValue,
+    onChange,
+    ...rest
+  } = props;
+  const allowMultiple = multiple ?? false;
+  const isControlled = value !== void 0;
+  const [internalValues, setInternalValues] = useState(
+    () => normalizeValues(defaultValue, allowMultiple)
+  );
+  const prevAllowMultipleRef = useRef(allowMultiple);
+  const prevIsControlledRef = useRef(isControlled);
+  useEffect(() => {
+    const prevAllowMultiple = prevAllowMultipleRef.current;
+    const wasControlled = prevIsControlledRef.current;
+    if (!isControlled && (allowMultiple !== prevAllowMultiple || wasControlled !== isControlled)) {
+      setInternalValues((prev) => clampValues(prev, allowMultiple));
+    }
+    prevAllowMultipleRef.current = allowMultiple;
+    prevIsControlledRef.current = isControlled;
+  }, [allowMultiple, isControlled]);
+  const handleValueChange = useCallback(
+    (next) => {
       if (!isControlled) {
-        this.setState({ internalValues: next });
+        setInternalValues(next);
       }
       if (onChange) {
         if (allowMultiple) {
@@ -973,75 +992,52 @@ var ExpansionPanelInner = class extends Component {
           onChange(next[0] ?? null);
         }
       }
-    };
-    this.handleToggle = (panelValue, disabled) => {
+    },
+    [allowMultiple, isControlled, onChange]
+  );
+  const handleToggle = useCallback(
+    (panelValue, disabled) => {
       if (disabled) {
         return;
       }
-      const allowMultiple = this.props.multiple ?? false;
-      const expandedValues = this.getExpandedValues(allowMultiple);
-      const isActive = expandedValues.includes(panelValue);
-      const next = allowMultiple ? isActive ? expandedValues.filter((v) => v !== panelValue) : [...expandedValues, panelValue] : isActive ? [] : [panelValue];
-      this.handleValueChange(next);
-    };
-    const allowMultiple = props.multiple ?? false;
-    this.state = {
-      internalValues: normalizeValues(props.defaultValue, allowMultiple)
-    };
-  }
-  componentDidUpdate(prevProps) {
-    const allowMultiple = this.props.multiple ?? false;
-    const prevAllowMultiple = prevProps.multiple ?? false;
-    const isControlled = this.isControlled();
-    const wasControlled = prevProps.value !== void 0;
-    if (!isControlled && (allowMultiple !== prevAllowMultiple || wasControlled !== isControlled)) {
-      this.setState((prevState) => ({
-        internalValues: clampValues(prevState.internalValues, allowMultiple)
-      }));
-    }
-  }
-  render() {
-    const {
-      variant = "elevated",
-      rounded = "lg",
-      density = "default",
-      color = "primary",
-      divider = true,
-      multiple = false,
-      className,
-      children,
-      forwardedRef,
-      value: _value,
-      defaultValue: _defaultValue,
-      onChange: _onChange,
-      ...rest
-    } = this.props;
-    const expandedValues = this.getExpandedValues(multiple);
-    const providerValue = {
+      const expandedValues2 = isControlled ? normalizeValues(value, allowMultiple) : internalValues;
+      const isActive = expandedValues2.includes(panelValue);
+      const next = allowMultiple ? isActive ? expandedValues2.filter((v) => v !== panelValue) : [...expandedValues2, panelValue] : isActive ? [] : [panelValue];
+      handleValueChange(next);
+    },
+    [allowMultiple, handleValueChange, internalValues, isControlled, value]
+  );
+  const expandedValues = useMemo(
+    () => isControlled ? normalizeValues(value, allowMultiple) : internalValues,
+    [allowMultiple, internalValues, isControlled, value]
+  );
+  const providerValue = useMemo(
+    () => ({
       expandedValues,
-      toggle: this.handleToggle,
+      toggle: handleToggle,
       density,
       color,
       divider,
       rounded,
       variant
-    };
-    const variantClass = divider ? variantContainerClasses[variant] : "bg-transparent border border-transparent shadow-none";
-    const shapeClass = roundedClasses2[rounded] ?? roundedClasses2.lg;
-    const layoutClass = divider ? "divide-y divide-gray-100 overflow-hidden" : "gap-4";
-    const enhancedChildren = injectExpansionPanelContext(children, providerValue);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...rest,
-        ref: forwardedRef,
-        className: twMerge("expansion-panel flex w-full flex-col text-gray-900", variantClass, shapeClass, layoutClass, className),
-        children: enhancedChildren
-      }
-    );
-  }
+    }),
+    [color, density, divider, expandedValues, handleToggle, rounded, variant]
+  );
+  const variantClass = divider ? variantContainerClasses[variant] : "bg-transparent border border-transparent shadow-none";
+  const shapeClass = roundedClasses2[rounded] ?? roundedClasses2.lg;
+  const layoutClass = divider ? "divide-y divide-gray-100 overflow-hidden" : "gap-4";
+  const enhancedChildren = injectExpansionPanelContext(children, providerValue);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: forwardedRef,
+      className: twMerge("expansion-panel flex w-full flex-col text-gray-900", variantClass, shapeClass, layoutClass, className),
+      children: enhancedChildren
+    }
+  );
 };
-var ExpansionPanel = forwardRef((props, ref) => /* @__PURE__ */ jsx(ExpansionPanelInner, { ...props, forwardedRef: ref }));
+var ExpansionPanel = forwardRef(ExpansionPanelInner);
 ExpansionPanel.displayName = "ExpansionPanel";
 var ExpansionPanel_default = ExpansionPanel;
 var containerBaseClasses = "fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none";