@domicile-desktop/component-library 0.0.0-alpha-dc90c701b510 → 0.0.0-alpha-e1a71faac2bd

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-dc90c701b510",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-dc90c701b510",
+    "@domicile-desktop/sdk": "0.0.0-alpha-e1a71faac2bd",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-e1a71faac2bd",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -76,6 +76,7 @@
     "./EmptyState": "./src/EmptyState/EmptyState.tsx",
     "./Field": "./src/Field/Field.tsx",
     "./FilePicker": "./src/FilePicker/FilePicker.tsx",
+    "./FluidItem": "./src/FluidItem/FluidItem.tsx",
     "./file-request": "./src/FilePicker/file-request.ts",
     "./folders": "./src/FilePicker/folders.ts",
     "./font": "./src/fonts/font.ts",
@@ -164,5 +165,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-dc90c701b510"
+  "version": "0.0.0-alpha-e1a71faac2bd"
 }

package/src/FluidItem/FluidItem.tsx

@@ -0,0 +1,170 @@
+import type { ReactNode } from "react";
+import { useLayoutEffect, useRef } from "react";
+
+import { css, cva } from "../../styled-system/css";
+import "../stylesheet";
+
+/**
+ * Calls `onWidth` with `element`'s width now and whenever it changes, until
+ * the returned function stops it.
+ */
+export type ObserveWidth = (
+  element: Element,
+  onWidth: (width: number) => void,
+) => () => void;
+
+type Props = {
+  /** What it shows. Nothing, such as `null` or `false`, closes it. */
+  children: ReactNode;
+  /**
+   * The space between it and its neighbors: `narrow` is 1.5 spacing steps,
+   * as between icons; `wide` is 4, as between bar items. Half sits on
+   * each side and closes with it, so the row sets no gap of its own and
+   * pulls its ends in by half of this.
+   */
+  gap?: Gap | undefined;
+  /** Injectable for tests; defaults to a `ResizeObserver`. */
+  observeWidth?: ObserveWidth | undefined;
+};
+
+/** The gaps a row of `FluidItem`s can have. */
+export type Gap = "none" | "narrow" | "wide";
+
+/**
+ * An item in a row that eases between widths: it opens and fades in when
+ * its content appears, follows its content as that grows and shrinks, and
+ * closes and fades out when its content goes. What goes is still drawn, out
+ * of reach, until it has faded.
+ *
+ * Its content can be any component, and needs no motion of its own: one that
+ * returns nothing to hide is enough.
+ */
+export const FluidItem = ({
+  children,
+  gap = "none",
+  observeWidth = resizeObserverWidth,
+}: Props) => {
+  const slot = useRef<HTMLSpanElement>(null);
+  const content = useRef<HTMLSpanElement>(null);
+  const live = useRef<HTMLSpanElement>(null);
+  const leaving = useRef<HTMLSpanElement>(null);
+
+  // In a layout effect, and by hand rather than through state, so what
+  // leaves is back in place before the frame that would show it gone.
+  useLayoutEffect(() => {
+    const parts = {
+      content: content.current,
+      leaving: leaving.current,
+      live: live.current,
+      slot: slot.current,
+    };
+    if (
+      parts.slot === null ||
+      parts.content === null ||
+      parts.live === null ||
+      parts.leaving === null
+    ) {
+      throw new Error("FluidItem rendered without its parts");
+    }
+    const { leaving: left, live: shown, slot: box } = parts;
+    let width = 0;
+    const draw = () => {
+      const showing = shown.hasChildNodes();
+      box.toggleAttribute("data-shown", showing);
+      box.style.setProperty("--fluid-width", `${showing ? width : 0}px`);
+    };
+    const mutations = new MutationObserver((records) => {
+      if (shown.hasChildNodes()) {
+        left.replaceChildren();
+      } else {
+        const gone = records
+          .flatMap((record) => [...record.removedNodes])
+          .filter((node) => !node.isConnected);
+        if (gone.length > 0) {
+          left.replaceChildren(...gone);
+        }
+      }
+      draw();
+    });
+    mutations.observe(shown, { childList: true });
+    const stopWatchingWidth = observeWidth(parts.content, (measured) => {
+      width = measured;
+      draw();
+    });
+    return () => {
+      mutations.disconnect();
+      stopWatchingWidth();
+    };
+  }, [observeWidth]);
+
+  return (
+    <span
+      className={slotStyles}
+      onTransitionEnd={(event) => {
+        // It has faded out, so what left can go.
+        if (
+          event.target === event.currentTarget &&
+          event.propertyName === "opacity" &&
+          !event.currentTarget.hasAttribute("data-shown")
+        ) {
+          leaving.current?.replaceChildren();
+        }
+      }}
+      ref={slot}
+    >
+      <span className={contentStyles({ gap })} ref={content}>
+        <span className={layerStyles} ref={live}>
+          {children}
+        </span>
+        <span aria-hidden className={layerStyles} inert ref={leaving} />
+      </span>
+    </span>
+  );
+};
+
+// The width eases to the measured one. Before the first measurement it is
+// `auto`, which does not animate, so what shows from the start does not open.
+// Clipped across only, so nothing above or below is cut.
+const slotStyles = css({
+  "&:not([data-shown])": { opacity: 0 },
+  display: "inline-flex",
+  flexShrink: 0,
+  inlineSize: "var(--fluid-width, auto)",
+  opacity: 1,
+  overflowX: "clip",
+  transition:
+    "inline-size {durations.normal} {easings.in-out}, opacity {durations.normal} {easings.default}",
+});
+
+// Its own width, so it can be measured whatever the slot is eased to. The gap
+// is inside, so it closes with the content.
+const contentStyles = cva({
+  base: {
+    alignItems: "center",
+    display: "inline-flex",
+    flexShrink: 0,
+    inlineSize: "max-content",
+  },
+  variants: {
+    gap: {
+      narrow: { paddingInline: 0.75 },
+      none: {},
+      wide: { paddingInline: 2 },
+    },
+  },
+});
+
+// Lays the content out as if the wrapper were not there.
+const layerStyles = css({ display: "contents" });
+
+/** `ObserveWidth` through a `ResizeObserver`. */
+const resizeObserverWidth: ObserveWidth = (element, onWidth) => {
+  const observer = new ResizeObserver(() => {
+    onWidth(element.getBoundingClientRect().width);
+  });
+  observer.observe(element);
+  onWidth(element.getBoundingClientRect().width);
+  return () => {
+    observer.disconnect();
+  };
+};

package/styled-system/styles.css

@@ -9974,6 +9974,18 @@
     border-inline-end: 1px solid var(--eieEZo);
 }
 
+  .pWVvC {
+    margin-inline: calc(var(--ebuyxV) * -1);
+}
+
+  .dMMjth {
+    gap: wide;
+}
+
+  .hcgsql {
+    transition: inline-size var(--cWTXGg) var(--gSAVQW), opacity var(--cWTXGg) var(--drrWcF);
+}
+
   .bCtaNN {
     transition: background-color var(--mUhz) var(--drrWcF);
 }
@@ -11024,6 +11036,18 @@
     margin-inline-start: calc(var(--ebuyxV) * -1);
 }
 
+  .VEKaB {
+    inline-size: var(--fluid-width, auto);
+}
+
+  .hKujQS {
+    display: contents;
+}
+
+  .gxuBUc {
+    inline-size: max-content;
+}
+
   .jDTsqy {
     block-size: var(--eUDwWi);
 }
@@ -11466,10 +11490,6 @@
     font-size: inherit;
 }
 
-  .gxuBUc {
-    inline-size: max-content;
-}
-
   .gNGMSf {
     max-inline-size: var(--available-width);
 }
@@ -12003,6 +12023,10 @@
     right: 100%;
 }
 
+  .yOEYy {
+    overflow-x: clip;
+}
+
   .ewrolA {
     width: standard;
 }
@@ -12747,6 +12771,10 @@
     font-weight: var(--hmvyHR);
 }
 
+  .jlsPPt:not([data-shown]) {
+    opacity: 0;
+}
+
   .YJgQP:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     cursor: default;
 }