plainframe-ui 0.1.4 → 0.1.6

package/dist/index.d.ts

@@ -1060,7 +1060,6 @@ declare const Rotate: React.FC<RotateProps>;
 type Align$1 = "left" | "center" | "right";
 type Variant$4 = "subtle" | "outlined" | "ghost";
 type SelectProps<T = unknown> = {
-    /** optional controlled value(s); if omitted, trigger text is derived from child selection props */
     value?: T | T[];
     defaultValue?: T | T[];
     onChange?: (value: T | T[]) => void;
@@ -1080,15 +1079,12 @@ type SelectProps<T = unknown> = {
     labelCss?: Interpolation<Theme>;
     triggerCss?: Interpolation<Theme>;
     menuCss?: Interpolation<Theme>;
-    /** you pass real MenuItem / MenuRadioItem / MenuCheckboxItem (and optional MenuRadioGroup) here */
     children: React.ReactNode;
     className?: string;
     menuSize?: "sm" | "md";
-    /** custom trigger renderer (receives the resolved label text or array of labels) */
     triggerRender?: (selected: string | string[] | undefined) => React.ReactNode;
 };
-declare function Select<T = unknown>({ value, defaultValue, onChange, // not wired here; your Menu components should manage selection & call you
-label, placeholder, startIcon, endIcon, disabled, size, variant, fullWidth, width, menuAlign, menuWidth, menuMaxHeight, wrapperCss, labelCss, triggerCss, menuCss, children, className, menuSize, triggerRender, }: SelectProps<T>): JSX.Element;
+declare function Select<T = unknown>({ value, defaultValue, onChange, label, placeholder, startIcon, endIcon, disabled, size, variant, fullWidth, width, menuAlign, menuWidth, menuMaxHeight, wrapperCss, labelCss, triggerCss, menuCss, children, className, menuSize, triggerRender, }: SelectProps<T>): JSX.Element;
 
 /** @jsxImportSource @emotion/react */
 

package/dist/index.js

@@ -2125,7 +2125,6 @@ import React8, {
   isValidElement as isValidElement4,
   cloneElement as cloneElement4,
   useRef as useRef5,
-  useLayoutEffect as useLayoutEffect2,
   useEffect as useEffect3
 } from "react";
 import { css as emCss } from "@emotion/react";
@@ -2294,80 +2293,7 @@ var SubMenuContent = ({ children, css: userCss }) => {
   const { open } = useSub();
   const parentLevel = useContext3(LevelCtx);
   const menuGap = useContext3(GapCtx);
-  const clipRef = useRef5(null);
   const innerRef = useRef5(null);
-  const seqRef = useRef5(0);
-  const firstRef = useRef5(true);
-  useLayoutEffect2(() => {
-    const clip = clipRef.current;
-    const inner = innerRef.current;
-    if (!clip || !inner) return;
-    const key = ++seqRef.current;
-    const dur = "360ms cubic-bezier(.25,.8,.4,1)";
-    if (firstRef.current) {
-      firstRef.current = false;
-      clip.style.transition = "none";
-      if (open) {
-        clip.style.maxHeight = "none";
-        clip.style.overflow = "visible";
-      } else {
-        clip.style.maxHeight = "0px";
-        clip.style.overflow = "hidden";
-      }
-      return;
-    }
-    const from = open ? 0 : inner.scrollHeight;
-    const to = open ? inner.scrollHeight : 0;
-    clip.style.transition = "none";
-    clip.style.overflow = "hidden";
-    clip.style.maxHeight = `${from}px`;
-    void clip.offsetHeight;
-    clip.style.transition = `max-height ${dur}`;
-    clip.style.maxHeight = `${to}px`;
-    const onEnd = (e) => {
-      if (e.target !== clip || e.propertyName !== "max-height") return;
-      if (key !== seqRef.current) return;
-      clip.style.transition = "none";
-      if (open) {
-        clip.style.maxHeight = "none";
-        clip.style.overflow = "visible";
-      } else {
-        clip.style.maxHeight = "0px";
-        clip.style.overflow = "hidden";
-      }
-      clip.removeEventListener("transitionend", onEnd);
-      clip.removeEventListener("transitioncancel", onCancel);
-    };
-    const onCancel = () => {
-      if (key !== seqRef.current) return;
-      clip.removeEventListener("transitionend", onEnd);
-      clip.removeEventListener("transitioncancel", onCancel);
-    };
-    clip.addEventListener("transitionend", onEnd);
-    clip.addEventListener("transitioncancel", onCancel);
-    return () => {
-      clip.removeEventListener("transitionend", onEnd);
-      clip.removeEventListener("transitioncancel", onCancel);
-    };
-  }, [open]);
-  useLayoutEffect2(() => {
-    const clip = clipRef.current;
-    const inner = innerRef.current;
-    if (!clip || !inner || !window.ResizeObserver) return;
-    const ro = new window.ResizeObserver(() => {
-      if (!open) return;
-      const isAnimating = clip.style.maxHeight !== "none" && (clip.style.transition || "").includes("max-height");
-      if (isAnimating) {
-        clip.style.transition = "none";
-        clip.style.maxHeight = "none";
-        clip.style.overflow = "visible";
-      }
-    });
-    ro.observe(inner);
-    return () => {
-      ro.disconnect();
-    };
-  }, [open]);
   useEffect3(() => {
     const root = innerRef.current;
     if (!root) return;
@@ -2404,25 +2330,16 @@ var SubMenuContent = ({ children, css: userCss }) => {
       });
     }
   }, [open]);
-  useEffect3(() => {
-    const clip = clipRef.current;
-    if (!clip) return;
-    const onFocusIn = () => {
-      clip.style.overflow = "visible";
-    };
-    const onFocusOut = (e) => {
-      if (!clip.contains(e.relatedTarget)) {
-        clip.style.overflow = open ? "visible" : "hidden";
-      }
-    };
-    clip.addEventListener("focusin", onFocusIn);
-    clip.addEventListener("focusout", onFocusOut);
-    return () => {
-      clip.removeEventListener("focusin", onFocusIn);
-      clip.removeEventListener("focusout", onFocusOut);
-    };
-  }, [open]);
+  const clipCss = emCss({
+    display: "grid",
+    gridTemplateRows: open ? "1fr" : "0fr",
+    transition: "grid-template-rows 360ms cubic-bezier(.25,.8,.4,1)",
+    overflow: "hidden",
+    contain: "layout style",
+    position: "relative"
+  });
   const innerCss = emCss({
+    minHeight: 0,
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -2430,7 +2347,7 @@ var SubMenuContent = ({ children, css: userCss }) => {
     margin: 0,
     padding: 0,
     opacity: open ? 1 : 0,
-    transform: open ? "translateY(0) scale(1)" : "translateY(16px) scale(0.96)",
+    transform: open ? "translateY(0) scale(1)" : "translateY(1rem) scale(0.95)",
     transition: "opacity 0.35s ease, transform 0.28s ease",
     pointerEvents: open ? "auto" : "none",
     willChange: "opacity, transform"
@@ -2442,20 +2359,15 @@ var SubMenuContent = ({ children, css: userCss }) => {
       "data-open": open ? "" : void 0,
       className: "plainframe-ui-submenu-content",
       css: [emCss({ width: "100%" }), userCss],
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx9("div", { className: "plainframe-ui-submenu-clip", css: clipCss, children: /* @__PURE__ */ jsx9(
         "div",
         {
-          ref: clipRef,
-          className: "plainframe-ui-submenu-clip",
-          css: emCss({
-            willChange: "max-height",
-            contain: "layout style",
-            position: "relative",
-            overflow: "hidden"
-          }),
-          children: /* @__PURE__ */ jsx9("div", { ref: innerRef, className: "plainframe-ui-submenu-inner", css: innerCss, children })
+          ref: innerRef,
+          className: "plainframe-ui-submenu-inner",
+          css: innerCss,
+          children
         }
-      )
+      ) })
     }
   ) });
 };
@@ -6046,9 +5958,8 @@ var Button = React20.memo(React20.forwardRef(({
 }, ref) => {
   const theme = usePlainframeUITheme();
   const focusRing = useFocusRing();
-  const normalizedVariant = variant === "ghost-destructive" ? "ghost-destructive" : variant;
   const S = useMemo10(() => getSize3(theme, size), [theme, size]);
-  const vis = useMemo10(() => resolveVisuals(theme, normalizedVariant), [theme, normalizedVariant]);
+  const vis = useMemo10(() => resolveVisuals(theme, variant), [theme, variant]);
   const isIconOnly = useMemo10(
     () => !startIcon && !endIcon && !hasText(children) && React20.Children.count(children) === 1,
     [startIcon, endIcon, children]
@@ -6232,7 +6143,7 @@ var Button = React20.memo(React20.forwardRef(({
     {
       ref,
       type: "type" in props && props.type ? props.type : "button",
-      "data-variant": normalizedVariant,
+      "data-variant": variant,
       className: ["plainframe-ui-button", className || ""].join(" ").trim(),
       css: [
         rootBase,
@@ -9865,12 +9776,10 @@ var RadioItem = ({
     fontSize: theme.fontSizes.md,
     fontWeight: 500,
     padding: theme.spacing.sm,
-    // Hover applies to the CIRCLE only if NOT checked
     "&:hover .plainframe-ui-radio-circle-outer": isDisabled || isChecked ? {} : {
       background: hoverCircleBg,
       boxShadow: variant === "outlined" ? `inset 0 0 0 ${theme.componentHeights.border} ${stroke}` : "none"
     },
-    // Focus ring hint on circle
     "&:focus-visible .plainframe-ui-radio-circle-outer": {
       outline: "none",
       filter: "brightness(1.06)"
@@ -10098,7 +10007,6 @@ function Select({
   value,
   defaultValue,
   onChange,
-  // not wired here; your Menu components should manage selection & call you
   label,
   placeholder = "Select\u2026",
   startIcon,