@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/tree/index.tsx

@@ -1,15 +1,30 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/TreeView.tsx
+
+// Port of packages/@react-spectrum/s2/src/TreeView.tsx.
+
 import {
   children as resolveChildren,
   createContext,
   createEffect,
   createMemo,
   createSignal,
-  mergeProps,
   onCleanup,
-  splitProps,
   useContext,
-  type JSX,
+  createTrackedEffect,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Tree as HeadlessTree,
   TreeItem as HeadlessTreeItem,
@@ -40,19 +55,13 @@ import {
 } from "../button/spectrum-context";
 import { IconContext } from "../icon";
 import Checkmark from "../icon/ui-icons/Checkmark";
-import Chevron from "../icon/ui-icons/Chevron";
 import { ActionMenuContext } from "../menu/ActionMenu";
 import { ProgressCircle } from "../progress/ProgressCircle";
-import { useProviderProps } from "../provider";
+import { mergeProps, createStringFormatter } from "@proyecto-viviana/solidaria";
+import { s2IntlStrings } from "../intl";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
 import type { StyleString } from "../style";
-import {
-  baseColor,
-  colorMix,
-  focusRing,
-  fontRelative,
-  space,
-  style,
-} from "../style" with { type: "macro" };
+import { baseColor, focusRing, space, style } from "../style" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
 import { edgeToText } from "../style/spectrum-theme" with { type: "macro" };
 import type { UnsafeClassName } from "../s2-internal/style-utils";
@@ -61,6 +70,7 @@ import {
   getAllowedOverrides,
 } from "../s2-internal/style-utils" with { type: "macro" };
 import { Text, TextContext } from "../text";
+import { attrString, splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type TreeSelectionStyle = "checkbox" | "highlight";
 export type TreeLoadingState =
@@ -259,9 +269,6 @@ const emptyState = style({
   font: "body-sm",
 });
 
-const selectedBackground = colorMix("gray-25", "gray-900", 7);
-const selectedActiveBackground = colorMix("gray-25", "gray-900", 10);
-
 type TreeRowLayerProps = Partial<TreeItemRenderProps> & {
   isLink?: boolean;
   selectionStyle?: TreeSelectionStyle;
@@ -331,30 +338,36 @@ const treeViewRowBackground = style<TreeRowLayerProps>({
   inset: 0,
   backgroundColor: {
     default: "gray-25",
+    /* Glasselated: the register paints tree rows with its own three-step row
+     * vocabulary — `--surface-hover` under the pointer, `--surface-active-soft`
+     * on the current row, `--surface-active` when the current row is also
+     * hovered or pressed. It draws one "current row" look regardless of how the
+     * row got selected, so both selection styles land on the same fills. */
     isHovered: {
-      default: "gray-900/5",
+      default: "surface-hover",
       selectionStyle: {
-        checkbox: selectedBackground,
+        checkbox: "[var(--surface-active-soft)]",
       },
     },
     isPressed: {
-      default: "gray-900/10",
+      default: "[var(--surface-active)]",
       selectionStyle: {
-        checkbox: selectedActiveBackground,
+        checkbox: "[var(--surface-active)]",
       },
     },
     isSelected: {
+      default: "[var(--surface-active-soft)]",
       selectionStyle: {
         checkbox: {
-          default: selectedBackground,
-          isHovered: selectedActiveBackground,
-          isPressed: selectedActiveBackground,
-          isFocusVisible: selectedActiveBackground,
+          default: "[var(--surface-active-soft)]",
+          isHovered: "[var(--surface-active)]",
+          isPressed: "[var(--surface-active)]",
+          isFocusVisible: "[var(--surface-active)]",
         },
         highlight: {
-          default: colorMix("gray-25", "blue-900", 10),
-          isHovered: colorMix("gray-25", "blue-900", 15),
-          isPressed: colorMix("gray-25", "blue-900", 15),
+          default: "[var(--surface-active-soft)]",
+          isHovered: "[var(--surface-active)]",
+          isPressed: "[var(--surface-active)]",
         },
       },
     },
@@ -432,15 +445,25 @@ const treeExpandButton = style<TreeRowLayerProps>({
   disableTapHighlight: true,
 });
 
-const treeExpandIcon = style<TreeRowLayerProps>({
+/* Glasselated: the register draws an OUTLINE tree — the disclosure affordance is
+ * the same mono ">" mark the nav rail and the list rows use, rotated 90° when the
+ * branch is open, not a filled chevron glyph. */
+const treeExpandMark = style<TreeRowLayerProps>({
+  fontFamily: "code",
+  fontSize: "[12px]",
+  fontWeight: "semi-bold",
+  lineHeight: "[1]",
+  color: {
+    default: "[var(--accent-primary)]",
+    isDisabled: {
+      default: "disabled",
+      forcedColors: "GrayText",
+    },
+  },
   rotate: {
     isExpanded: 90,
   },
   transition: "default",
-  "--iconPrimary": {
-    type: "fill",
-    value: "currentColor",
-  },
 });
 
 const treeCheckbox = style({
@@ -503,7 +526,7 @@ const treeSlotIcon = style({
   gridArea: "icon",
   gridRowEnd: "span 2",
   display: "block",
-  size: fontRelative(20),
+  size: "1lh",
   alignSelf: "center",
   marginEnd: "text-to-visual",
   "--iconPrimary": {
@@ -517,6 +540,10 @@ const treeLabel = style<TreeRowLayerProps>({
   minWidth: 0,
   alignSelf: "center",
   font: controlFont(),
+  /* Glasselated: tree rows are list rows — mono 12.5/600, same as ListView. */
+  fontFamily: "code",
+  fontSize: "[12.5px]",
+  fontWeight: "semi-bold",
   color: "inherit",
   overflow: "hidden",
   textOverflow: "ellipsis",
@@ -528,8 +555,10 @@ const treeDescription = style<TreeRowLayerProps>({
   minWidth: 0,
   alignSelf: "center",
   font: "ui-sm",
+  fontFamily: "code",
+  fontSize: "[11px]",
   color: {
-    default: baseColor("neutral-subdued"),
+    default: "[var(--terminal-dim)]",
     isDisabled: {
       default: "disabled",
       forcedColors: "GrayText",
@@ -685,12 +714,20 @@ function mergeRegisteredTreeItems<T extends object>(
 }
 
 export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
-  const providerProps = useProviderProps(props);
+  const providerProps = useProviderProps(props) as TreeProps<T> & ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(
     useContext(TreeViewContext) as SpectrumContextValue<TreeProps<T>>,
     props.slot,
   );
-  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props) as TreeProps<T>;
+  const mergedProps = mergeProps<TreeProps<T>>(flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "children",
     "items",
@@ -710,8 +747,8 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   ]);
   const selectionStyle = (): TreeSelectionStyle => local.selectionStyle ?? "checkbox";
   const isLoading = () => local.loadingState === "loading" || local.loadingState === "loadingMore";
-  const [staticItems, setStaticItems] = createSignal<StaticTreeItem[]>([]);
-  const [registrationVersion, setRegistrationVersion] = createSignal(0);
+  const [staticItems, setStaticItems] = createSignal<StaticTreeItem[]>([], { ownedWrite: true });
+  const [registrationVersion, setRegistrationVersion] = createSignal(0, { ownedWrite: true });
   const registeredItems = new Map<Key, ItemRegistration>();
   const usesStaticChildren = () => local.items == null;
   const syncRegisteredItems = () => {
@@ -776,12 +813,14 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   );
   const [actionSelectedKeys, setActionSelectedKeys] = createSignal<"all" | Set<Key>>(
     selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
+    { ownedWrite: true },
+  );
+  createEffect(
+    () => selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
+    (keys) => {
+      setActionSelectedKeys(keys);
+    },
   );
-  createEffect(() => {
-    setActionSelectedKeys(
-      selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
-    );
-  });
   const onSelectionChange = (keys: "all" | Set<Key>) => {
     setActionSelectedKeys(keys === "all" ? "all" : new Set(keys));
     headlessProps.onSelectionChange?.(keys);
@@ -844,9 +883,16 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
 
     return renderRegistrationItems(local.items ?? []);
   };
+  const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
   const loadMoreContent = () => (
     <div class={treeLoadMore} data-rsp-slot="load-more">
-      {isLoading() ? <ProgressCircle isIndeterminate size="S" aria-label="Loading more" /> : null}
+      {isLoading() ? (
+        <ProgressCircle
+          isIndeterminate
+          size="S"
+          aria-label={stringFormatter().format("table.loadingMore")}
+        />
+      ) : null}
     </div>
   );
 
@@ -860,13 +906,13 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   // the wrapper is `display: contents`, so layout is untouched.
   // (A Tree hydration abort that once looked like a return-shape problem was
   // actually a repeated `local.children` read in ResolvedItemContent /
-  // TreeItemContent — see the read-once comments there.)
+  // TreeItemContent — see the shared-evaluation comments there.)
   const collection = () => (
-    <InternalTreeViewContext.Provider value={treeContext()}>
+    <InternalTreeViewContext value={treeContext()}>
       <div hidden inert aria-hidden="true" style={{ display: "none" }}>
-        <StaticTreeCollectionContext.Provider value={registrationContext}>
+        <StaticTreeCollectionContext value={registrationContext}>
           {registrationChildren()}
-        </StaticTreeCollectionContext.Provider>
+        </StaticTreeCollectionContext>
       </div>
       <HeadlessTree
         {...headlessProps}
@@ -889,7 +935,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
       >
         {(item: TreeItemData<T>, state: TreeRenderItemState) => renderItem(item, state)}
       </HeadlessTree>
-    </InternalTreeViewContext.Provider>
+    </InternalTreeViewContext>
   );
 
   const hasChrome = () => Boolean(local.label || local.description || local.renderActionBar);
@@ -932,14 +978,14 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
     "ref",
   ]);
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (!staticCollection) {
       return;
     }
 
     staticCollection.registerItem({
       id: props.id,
-      textValue: headlessProps.textValue ?? headlessProps["aria-label"],
+      textValue: attrString(headlessProps.textValue ?? headlessProps["aria-label"]),
       isDisabled: !!local.isDisabled,
       hasChildItems: !!local.hasChildItems,
       props: staticCollection.mode === "static" ? (props as TreeItemProps<object>) : undefined,
@@ -1004,13 +1050,13 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
     !renderProps.isDisabled;
 
   function ItemChildren(renderProps: TreeItemRenderProps) {
-    createEffect(() => applyItemSlotClasses(itemElement, renderProps, context));
+    createTrackedEffect(() => applyItemSlotClasses(itemElement, renderProps, context));
 
     function ResolvedItemContent() {
       const resolvedChildren = resolveChildren(() => {
-        // Read `local.children` once — a repeated props-children read re-instantiates child
-        // components on the server only, desynchronizing Solid's hydration keys and aborting
-        // hydration for the whole route. See Tab's ResolvedTabContent for the full note.
+        // Share the authored-child value for classification and insertion here.
+        // Keep evaluation under this owner; repeated construction is not a
+        // universal getter-read rule or a global hydration-counter model.
         const rawChildren = local.children;
         return typeof rawChildren === "function" ? rawChildren(renderProps) : rawChildren;
       });
@@ -1035,21 +1081,21 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
     }
 
     return (
-      <TextContext.Provider value={textContext(renderProps) as SpectrumContextValue<any>}>
-        <IconContext.Provider
+      <TextContext value={textContext(renderProps) as SpectrumContextValue<any>}>
+        <IconContext
           value={{
             slot: "icon",
             styles: treeSlotIcon,
           }}
         >
-          <ActionButtonGroupContext.Provider
+          <ActionButtonGroupContext
             value={{
               slot: "actions",
               size: "S",
               styles: treeActions,
             }}
           >
-            <ActionMenuContext.Provider
+            <ActionMenuContext
               value={{
                 slot: "actionmenu",
                 size: "S",
@@ -1078,16 +1124,17 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
                 </span>
               ) : null}
               <ResolvedItemContent />
-            </ActionMenuContext.Provider>
-          </ActionButtonGroupContext.Provider>
-        </IconContext.Provider>
-      </TextContext.Provider>
+            </ActionMenuContext>
+          </ActionButtonGroupContext>
+        </IconContext>
+      </TextContext>
     );
   }
 
   return (
     <HeadlessTreeItem
       {...headlessProps}
+      id={props.id}
       ref={(element) => assignItemRef(element)}
       hasChildItems={local.hasChildItems}
       isDisabled={local.isDisabled}
@@ -1119,9 +1166,9 @@ export function TreeItemContent(props: TreeItemContentProps): JSX.Element {
     <HeadlessTreeItemContent {...headlessProps}>
       {(renderProps: HeadlessTreeItemContentRenderProps) => {
         const content = () => {
-          // Read `local.children` once — a repeated props-children read re-instantiates child
-          // components on the server only, desynchronizing Solid's hydration keys and aborting
-          // hydration for the whole route. See Tab's ResolvedTabContent for the full note.
+          // Share the authored-child value for classification and insertion here.
+          // Keep evaluation under this owner; repeated construction is not a
+          // universal getter-read rule or a global hydration-counter model.
           const rawChildren = local.children;
           return typeof rawChildren === "function" ? rawChildren(renderProps) : rawChildren;
         };
@@ -1160,7 +1207,7 @@ export function TreeExpandButton(
       <button
         {...headlessProps}
         type="button"
-        tabIndex={-1}
+        tabindex={-1}
         class={className()}
         style={local.style}
         aria-label="Expand"
@@ -1172,17 +1219,19 @@ export function TreeExpandButton(
         data-rsp-slot="expand-button"
       >
         {(() => {
-          // Read `local.children` once — a repeated props-children read re-instantiates child
-          // components on the server only, desynchronizing Solid's hydration keys and aborting
-          // hydration for the whole route. See Tab's ResolvedTabContent for the full note.
+          // Share the authored-child value for classification and insertion here.
+          // Keep evaluation under this owner; repeated construction is not a
+          // universal getter-read rule or a global hydration-counter model.
           const rawChildren = local.children;
           return typeof rawChildren === "function"
             ? rawChildren(renderState())
             : (rawChildren ?? (
-                <Chevron
-                  size="S"
-                  class={treeExpandIcon({ ...renderState(), isExpanded: false })}
-                />
+                <span
+                  aria-hidden="true"
+                  class={treeExpandMark({ ...renderState(), isExpanded: false })}
+                >
+                  {">"}
+                </span>
               ));
         })()}
       </button>
@@ -1198,10 +1247,9 @@ export function TreeExpandButton(
     >
       {local.children ??
         (({ isExpanded }: { isExpanded: boolean }) => (
-          <Chevron
-            size="S"
-            class={treeExpandIcon({ ...renderState(), isExpanded })}
-          />
+          <span aria-hidden="true" class={treeExpandMark({ ...renderState(), isExpanded })}>
+            {">"}
+          </span>
         ))}
     </HeadlessTreeExpandButton>
   );
@@ -1243,9 +1291,7 @@ export function TreeSelectionCheckbox(props: {
         aria-label={props["aria-label"] ?? "Select"}
       />
       <span class={treeCheckboxBox(renderProps())}>
-        {renderProps().isSelected ? (
-          <Checkmark size="XS" class={treeCheckboxIcon} />
-        ) : null}
+        {renderProps().isSelected ? <Checkmark size="XS" class={treeCheckboxIcon} /> : null}
       </span>
     </span>
   );
@@ -1253,6 +1299,7 @@ export function TreeSelectionCheckbox(props: {
 
 export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
   const staticCollection = useContext(StaticTreeCollectionContext);
+  const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
   const isLoading = () =>
     props.isLoading || props.loadingState === "loading" || props.loadingState === "loadingMore";
 
@@ -1272,7 +1319,11 @@ export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
       <div class={treeLoadMore} data-rsp-slot="load-more">
         {props.children ??
           (isLoading() ? (
-            <ProgressCircle isIndeterminate size="S" aria-label="Loading more" />
+            <ProgressCircle
+              isIndeterminate
+              size="S"
+              aria-label={stringFormatter().format("table.loadingMore")}
+            />
           ) : null)}
       </div>
     </HeadlessTreeLoadMoreItem>

package/src/utils/createMediaQuery.ts

@@ -1,40 +1,60 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/useMediaQuery.ts
+
 /**
  * createMediaQuery — a SolidJS reactive media-query primitive.
  *
- * Based on @react-spectrum/utils' useMediaQuery: subscribes to
- * `window.matchMedia` and updates when the query's match state changes. Returns
+ * Based on packages/@react-spectrum/s2/src/useMediaQuery.ts.
+ * It subscribes to `window.matchMedia` and updates when the query's match state changes.
+ * Returns
  * `false` during SSR (and before mount) so the server and first client render
  * agree, then resolves to the real value once mounted on the client.
  */
-import { createSignal, onCleanup, onMount } from "solid-js";
+import { createEffect, createSignal } from "solid-js";
 
 export function createMediaQuery(query: string): () => boolean {
   const supportsMatchMedia =
     typeof window !== "undefined" && typeof window.matchMedia === "function";
 
-  const [matches, setMatches] = createSignal(false);
+  // First paint stays `false` (SSR/hydration agreement). The effect then
+  // writes the live match — `ownedWrite` because that write is in apply.
+  const [matches, setMatches] = createSignal(false, { ownedWrite: true });
+
+  createEffect(
+    () => query,
+    () => {
+      if (!supportsMatchMedia) {
+        return;
+      }
 
-  onMount(() => {
-    if (!supportsMatchMedia) {
-      return;
-    }
+      const mq = window.matchMedia(query);
+      setMatches(mq.matches);
 
-    const mq = window.matchMedia(query);
-    setMatches(mq.matches);
+      const onChange = (event: MediaQueryListEvent): void => {
+        setMatches(event.matches);
+      };
 
-    const onChange = (event: MediaQueryListEvent): void => {
-      setMatches(event.matches);
-    };
+      if (typeof mq.addEventListener === "function") {
+        mq.addEventListener("change", onChange);
+        return () => mq.removeEventListener("change", onChange);
+      }
 
-    if (typeof mq.addEventListener === "function") {
-      mq.addEventListener("change", onChange);
-      onCleanup(() => mq.removeEventListener("change", onChange));
-    } else {
       // Safari < 14 only supports the deprecated MediaQueryList listener API.
       mq.addListener(onChange);
-      onCleanup(() => mq.removeListener(onChange));
-    }
-  });
+      return () => mq.removeListener(onChange);
+    },
+  );
 
   return matches;
 }

package/src/view/Content.tsx

@@ -1,5 +1,6 @@
-import { type JSX, splitProps } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { style } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface ContentProps {
   /** Additional CSS class name. */