@lindle/linoardo 1.0.13 → 1.0.15

package/dist/index.d.ts

@@ -466,6 +466,15 @@ interface ExpansionPanelMultipleProps extends ExpansionPanelSharedProps {
     onChange?: (value: ExpansionPanelValue[]) => void;
 }
 type ExpansionPanelProps = ExpansionPanelSingleProps | ExpansionPanelMultipleProps;
+interface ExpansionPanelContextValue {
+    expandedValues: ExpansionPanelValue[];
+    toggle: (value: ExpansionPanelValue, disabled?: boolean) => void;
+    density: ExpansionPanelDensity;
+    color: Palette;
+    divider: boolean;
+    rounded: ExpansionPanelRounded;
+    variant: ExpansionPanelVariant;
+}
 interface ExpansionPanelItemProps extends Omit<DivAttributes, 'title'> {
     value?: ExpansionPanelValue;
     title?: react.ReactNode;
@@ -480,6 +489,8 @@ interface ExpansionPanelItemProps extends Omit<DivAttributes, 'title'> {
     headerClassName?: string;
     contentClassName?: string;
     color?: Palette;
+    /** @internal */
+    __expansionPanelContext?: ExpansionPanelContextValue | null;
 }
 
 declare const ExpansionPanelItem: react.ForwardRefExoticComponent<ExpansionPanelItemProps & react.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React3 from 'react';
-import { forwardRef, Component } 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,
@@ -702,7 +702,55 @@ var Menu = React3.forwardRef((props, ref) => {
 });
 Menu.displayName = "Menu";
 var Menu_default = Menu;
-var ExpansionPanelContext = React3.createContext(null);
+var EXPANSION_PANEL_CONTEXT_PROP = "__expansionPanelContext";
+var EXPANSION_PANEL_ITEM_MARKER = "__isExpansionPanelItem";
+var hasMarker = (type) => {
+  if (!type || typeof type !== "function" && typeof type !== "object") {
+    return false;
+  }
+  if (type[EXPANSION_PANEL_ITEM_MARKER]) {
+    return true;
+  }
+  const innerType = type.type;
+  if (innerType && innerType !== type) {
+    return hasMarker(innerType);
+  }
+  return false;
+};
+var traverseNode = (node, value) => {
+  if (Array.isArray(node)) {
+    let changed = false;
+    const nextArray = node.map((child) => {
+      const result = traverseNode(child, value);
+      if (result.changed) {
+        changed = true;
+      }
+      return result.node;
+    });
+    return { node: changed ? nextArray : node, changed };
+  }
+  if (node === null || node === void 0 || typeof node === "boolean" || typeof node === "string" || typeof node === "number") {
+    return { node, changed: false };
+  }
+  if (!isValidElement(node)) {
+    return { node, changed: false };
+  }
+  const { node: mappedChildren, changed: childrenChanged } = traverseNode(node.props.children, value);
+  const shouldInject = hasMarker(node.type);
+  if (!shouldInject && !childrenChanged) {
+    return { node, changed: false };
+  }
+  const injectedProps = shouldInject ? { [EXPANSION_PANEL_CONTEXT_PROP]: value } : void 0;
+  const cloned = mappedChildren === void 0 ? cloneElement(node, injectedProps) : cloneElement(node, injectedProps, mappedChildren);
+  return { node: cloned, changed: true };
+};
+var injectExpansionPanelContext = (children, value) => traverseNode(children, value).node;
+var markExpansionPanelItem = (component) => {
+  if (typeof component !== "function" && (typeof component !== "object" || component === null)) {
+    return;
+  }
+  component[EXPANSION_PANEL_ITEM_MARKER] = true;
+};
 var densityClasses2 = {
   comfortable: "py-5",
   default: "py-4",
@@ -736,12 +784,13 @@ var generateId = (prefix) => `${prefix}-${++uniqueIdCounter}`;
 var ExpansionPanelItemInner = class extends Component {
   constructor(props) {
     super(props);
+    this.getContext = () => this.props.__expansionPanelContext ?? null;
     this.handleToggle = () => {
       const { disabled = false } = this.props;
       if (disabled) {
         return;
       }
-      const context = this.context;
+      const context = this.getContext();
       const panelValue = this.props.value ?? this.generatedValue;
       if (context) {
         context.toggle(panelValue, disabled);
@@ -774,7 +823,7 @@ var ExpansionPanelItemInner = class extends Component {
       forwardedRef,
       ...rest
     } = this.props;
-    const context = this.context;
+    const context = this.getContext();
     const panelValue = value ?? this.generatedValue;
     const density = context?.density ?? "default";
     const color = colorOverride ?? context?.color ?? "primary";
@@ -871,9 +920,9 @@ var ExpansionPanelItemInner = class extends Component {
     );
   }
 };
-ExpansionPanelItemInner.contextType = ExpansionPanelContext;
 var ExpansionPanelItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
 ExpansionPanelItem.displayName = "ExpansionPanelItem";
+markExpansionPanelItem(ExpansionPanelItem);
 var ExpansionPanelItem_default = ExpansionPanelItem;
 var variantContainerClasses = {
   elevated: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10",
@@ -900,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) {
@@ -924,74 +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";
-    return /* @__PURE__ */ jsx(ExpansionPanelContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...rest,
-        ref: forwardedRef,
-        className: twMerge("expansion-panel flex w-full flex-col text-gray-900", variantClass, shapeClass, layoutClass, className),
-        children
-      }
-    ) });
-  }
+    }),
+    [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";