@proyecto-viviana/solidaria-components 0.5.1 → 0.7.0-rc.1

package/src/TagGroup.tsx

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2022 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-aria-components/src/TagGroup.tsx
+
 /**
  * TagGroup component for solidaria-components
  *
@@ -8,17 +22,15 @@
  * with support for keyboard navigation, selection, and removal.
  */
 
+import { createContext, createMemo, createSignal, useContext, For, Show } from "solid-js";
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
-  type JSX,
-  createContext,
-  createMemo,
-  createSignal,
-  splitProps,
-  useContext,
-  For,
-  Show,
-} from "solid-js";
-import {
+  createButton,
+  createFocusRing,
+  createHover,
+  createId,
+  createSlotId,
   createTagGroup,
   createTag,
   useLocale,
@@ -41,8 +53,15 @@ import {
   filterDOMProps,
   dataAttr,
   mergeRefs,
+  assignRef,
+  useSlot,
+  Provider,
 } from "./utils";
+import { LabelContext } from "./Label";
+import { TextContext } from "./Text";
+import { ButtonContext, type ButtonProps } from "./Button";
 import { SharedElementTransition } from "./SharedElementTransition";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
@@ -59,7 +78,10 @@ export interface TagGroupProps
   extends
     Omit<AriaTagGroupProps, "id">,
     SlotProps,
-    Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
+    Omit<
+      JSX.HTMLAttributes<HTMLDivElement>,
+      "class" | "style" | "children" | "aria-label" | "aria-labelledby" | "aria-describedby"
+    > {
   /** The children of the component. */
   children?: JSX.Element;
   /** The CSS className for the element. */
@@ -71,8 +93,10 @@ export interface TagGroupProps
 export interface TagListRenderProps {
   /** Whether the tag list is empty. */
   isEmpty: boolean;
-  /** Whether the tag list is focused. */
+  /** Whether the tag list itself is focused. */
   isFocused: boolean;
+  /** Whether the tag list itself is keyboard focused. */
+  isFocusVisible: boolean;
 }
 
 export interface TagListProps<T>
@@ -124,6 +148,8 @@ export interface TagRenderProps {
   isDisabled: boolean;
   /** Whether the tag is focused. */
   isFocused: boolean;
+  /** Whether the tag is keyboard focused. */
+  isFocusVisible: boolean;
   /** Whether the tag is pressed. */
   isPressed: boolean;
   /** Whether the tag allows removal. */
@@ -168,6 +194,19 @@ export const TagGroupContext = createContext<TagGroupContextValue | null>(null);
 export const TagListStateContext = createContext<ListState | null>(null);
 export const TagContext = createContext<TagContextValue | null>(null);
 
+// Label and help text are siblings of TagList, so the group mints their ids
+// and the list points the grid at them. Remove-button text, aria-live, and
+// focusing the list when the last tag disappears stay out of this path (#54).
+interface TagGroupFieldContextValue {
+  descriptionId: () => string | undefined;
+  errorMessageId: () => string | undefined;
+  labelledBy: () => string | undefined;
+  ariaLabel: () => string | undefined;
+  describedBy: () => string | undefined;
+}
+
+const TagGroupFieldContext = createContext<TagGroupFieldContextValue | null>(null);
+
 export function useTagGroupContext(): TagGroupContextValue | null {
   return useContext(TagGroupContext);
 }
@@ -186,9 +225,51 @@ export function useTagGroupContext(): TagGroupContextValue | null {
  * ```
  */
 export function TagGroup(props: TagGroupProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
+  const [local, domProps] = splitProps(props, [
+    "class",
+    "style",
+    "slot",
+    "children",
+    "label",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "description",
+    "errorMessage",
+  ]);
+
+  // Start true when nothing else names the group, matching useSlot: a Label
+  // child confirms it, and onSettled clears it when that child is absent.
+  const [labelRef, hasLabel] = useSlot(
+    !local["aria-label"] && !local["aria-labelledby"] && !local.label,
+  );
+  const labelId = createId();
+  const descriptionId = createSlotId([
+    () => Boolean(local.description),
+    () => Boolean(local.errorMessage),
+  ]);
+  const errorMessageId = createSlotId([
+    () => Boolean(local.description),
+    () => Boolean(local.errorMessage),
+  ]);
+  const field: TagGroupFieldContextValue = {
+    descriptionId,
+    errorMessageId,
+    labelledBy: () => local["aria-labelledby"] ?? (hasLabel() ? labelId : undefined),
+    ariaLabel: () => local["aria-label"],
+    describedBy: () => local["aria-describedby"],
+  };
+  const textSlots = {
+    slots: {
+      get description() {
+        return { id: descriptionId() };
+      },
+      get errorMessage() {
+        return { id: errorMessageId() };
+      },
+    },
+  };
 
-  // We need TagList to provide the state, so TagGroup just provides context
   return (
     <div
       {...domProps}
@@ -196,7 +277,19 @@ export function TagGroup(props: TagGroupProps): JSX.Element {
       style={typeof local.style === "object" ? local.style : undefined}
       slot={local.slot}
     >
-      {props.children}
+      <TagGroupFieldContext value={field}>
+        <LabelContext
+          value={{
+            ref: labelRef,
+            elementType: "span",
+            get id() {
+              return labelId;
+            },
+          }}
+        >
+          <TextContext value={textSlots}>{local.children}</TextContext>
+        </LabelContext>
+      </TagGroupFieldContext>
     </div>
   );
 }
@@ -267,24 +360,47 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   // under RTL. Thread the resolved layout direction into the hook (mirrors
   // ListBox, and useTagGroup passing `direction` to the ListKeyboardDelegate).
   const locale = useLocale();
+  const field = useContext(TagGroupFieldContext);
+
+  // Callback-valued props must not go through createMemo — a memo that
+  // stores a function is easy to unwrap/call, and the live getter
+  // `onRemove={handler()}` must re-read on each access.
+  const onRemove = () => local.onRemove;
+
+  const labelledBy = () => local["aria-labelledby"] ?? field?.labelledBy();
+  const describedBy = () => {
+    const ids = [
+      field?.descriptionId(),
+      field?.errorMessageId(),
+      local["aria-describedby"] ?? field?.describedBy(),
+    ].filter((id): id is string => !!id);
+    return ids.length > 0 ? ids.join(" ") : undefined;
+  };
 
-  // Create tag group accessibility props
   const tagGroupAria = createTagGroup(
     {
       get "aria-label"() {
-        return local["aria-label"] ?? (!local["aria-labelledby"] ? local.label : undefined);
+        if (local["aria-label"] != null) {
+          return local["aria-label"];
+        }
+        // A real label id suppresses the string fallback; the grid is named
+        // by aria-labelledby. TagList's own label still wins when no id is set.
+        if (labelledBy()) {
+          return field?.ariaLabel();
+        }
+        return local.label ?? field?.ariaLabel();
       },
       get "aria-labelledby"() {
-        return local["aria-labelledby"];
+        return labelledBy();
       },
       get "aria-describedby"() {
-        return local["aria-describedby"];
+        return describedBy();
       },
       get isDisabled() {
         return local.isDisabled;
       },
       get onRemove() {
-        return local.onRemove;
+        return onRemove();
       },
       get direction() {
         return locale().direction;
@@ -294,11 +410,14 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
     gridRef,
   );
 
-  const [isFocused, setIsFocused] = createSignal(false);
+  // Self ring: a focused row must not mark the list. Solid onFocus does not
+  // bubble, which matches useFocusRing() with no `within`.
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
   const renderValues = createMemo<TagListRenderProps>(() => ({
     isEmpty: local.items.length === 0,
     isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
   }));
 
   const renderProps = useRenderProps(
@@ -313,7 +432,7 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   const contextValue: TagGroupContextValue = {
     state,
     get onRemove() {
-      return local.onRemove;
+      return onRemove();
     },
     get isDisabled() {
       return local.isDisabled;
@@ -321,31 +440,27 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   };
 
   return (
-    <TagGroupContext.Provider value={contextValue}>
-      <TagListStateContext.Provider value={state}>
+    <TagGroupContext value={contextValue}>
+      <TagListStateContext value={state}>
         <div
           ref={setGridRef}
           {...domProps}
           {...tagGroupAria.gridProps}
           class={renderProps.class()}
           style={renderProps.style()}
-          // Track focus-within via the BUBBLING focusin/focusout pair (not the
-          // non-bubbling focus/blur the hook's trampoline uses) so this render-prop
-          // signal never clobbers `gridProps.onFocus` — the container focus
-          // trampoline that marshals entry onto the first/last row.
-          onFocusIn={() => {
-            setIsFocused(true);
+          // Chain after the grid trampoline. Replacing gridProps.onFocus would
+          // skip the move onto the first or last row.
+          onFocus={(event) => {
+            tagGroupAria.gridProps.onFocus?.(event);
+            focusProps.onFocus?.(event);
           }}
-          onFocusOut={(e) => {
-            const nextTarget = e.relatedTarget as Node | null;
-            if (nextTarget && e.currentTarget.contains(nextTarget)) {
-              return;
-            }
-
-            setIsFocused(false);
+          onBlur={(event) => {
+            tagGroupAria.gridProps.onBlur?.(event);
+            focusProps.onBlur?.(event);
           }}
           data-empty={dataAttr(local.items.length === 0)}
           data-focused={dataAttr(isFocused())}
+          data-focus-visible={dataAttr(isFocusVisible())}
         >
           <SharedElementTransition>
             <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>
@@ -353,8 +468,8 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
             </Show>
           </SharedElementTransition>
         </div>
-      </TagListStateContext.Provider>
-    </TagGroupContext.Provider>
+      </TagListStateContext>
+    </TagGroupContext>
   );
 }
 
@@ -392,6 +507,9 @@ export function Tag(props: TagProps): JSX.Element {
       get textValue() {
         return local.textValue;
       },
+      get onAction() {
+        return local.onAction ? () => local.onAction?.(local.id) : undefined;
+      },
     },
     state!,
     tagRef,
@@ -403,21 +521,21 @@ export function Tag(props: TagProps): JSX.Element {
     return {
       ...raw,
       onPress: () => {
-        if (!tagAria.isDisabled && groupContext?.onRemove) {
-          groupContext.onRemove(new Set([local.id]));
-          return;
-        }
         rawHandler?.();
       },
     };
   });
 
+  const allowsRemoving = createMemo(
+    () => Boolean(tagAria.allowsRemoving) || Boolean(groupContext?.onRemove),
+  );
   const renderValues = createMemo<TagRenderProps>(() => ({
     isSelected: tagAria.isSelected,
     isDisabled: tagAria.isDisabled,
     isFocused: tagAria.isFocused,
+    isFocusVisible: tagAria.isFocusVisible,
     isPressed: tagAria.isPressed,
-    allowsRemoving: tagAria.allowsRemoving,
+    allowsRemoving: allowsRemoving(),
     selectionMode: state?.selectionMode() ?? "none",
     removeButtonProps: normalizedRemoveButtonProps(),
   }));
@@ -440,15 +558,42 @@ export function Tag(props: TagProps): JSX.Element {
 
   const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
 
+  // Pin remove props carry no tabIndex. #318 keeps tabIndex -1 on TagRemoveButton.
+  const removeButtonSlot: ButtonProps = {
+    get id() {
+      return tagAria.removeButtonProps.id as string;
+    },
+    get "aria-label"() {
+      return tagAria.removeButtonProps["aria-label"] as string;
+    },
+    get "aria-labelledby"() {
+      return tagAria.removeButtonProps["aria-labelledby"] as string;
+    },
+    get isDisabled() {
+      return Boolean(tagAria.removeButtonProps.isDisabled);
+    },
+    onPress() {
+      const handler = tagAria.removeButtonProps.onPress;
+      if (typeof handler === "function") {
+        handler();
+      }
+    },
+  };
+  const buttonContextValue = {
+    slots: {
+      remove: removeButtonSlot,
+    },
+  };
+
   return (
-    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      <TagContext.Provider
+    <SelectionIndicatorContext value={selectionIndicatorContext()}>
+      <TagContext
         value={{
           get removeButtonProps() {
             return normalizedRemoveButtonProps();
           },
           get allowsRemoving() {
-            return tagAria.allowsRemoving;
+            return allowsRemoving();
           },
         }}
       >
@@ -458,40 +603,56 @@ export function Tag(props: TagProps): JSX.Element {
           {...tagAria.rowProps}
           class={renderProps.class()}
           style={renderProps.style()}
-          onClick={(event) => {
-            const rowClick = tagAria.rowProps.onClick;
-            if (typeof rowClick === "function") {
-              (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);
-            }
-
-            if (!tagAria.isDisabled && !(event.target as Element | null)?.closest("button")) {
-              local.onAction?.(local.id);
-            }
-          }}
           data-selected={dataAttr(tagAria.isSelected)}
           data-disabled={dataAttr(tagAria.isDisabled)}
           data-focused={dataAttr(tagAria.isFocused)}
+          data-focus-visible={dataAttr(tagAria.isFocusVisible)}
           data-pressed={dataAttr(tagAria.isPressed)}
-          data-allows-removing={dataAttr(tagAria.allowsRemoving)}
+          data-allows-removing={dataAttr(allowsRemoving())}
         >
           <div {...tagAria.gridCellProps} style={{ display: "contents" }}>
-            {renderProps.renderChildren()}
+            <Provider
+              values={[[ButtonContext, buttonContextValue]] as Array<[Context<unknown>, unknown]>}
+            >
+              {renderProps.renderChildrenStable()}
+            </Provider>
           </div>
         </div>
-      </TagContext.Provider>
-    </SelectionIndicatorContext.Provider>
+      </TagContext>
+    </SelectionIndicatorContext>
   );
 }
 
-export interface TagRemoveButtonProps {
-  /** The children of the button (usually an X icon). */
-  children?: JSX.Element;
-  /** The CSS className for the element. */
-  class?: string;
-  /** The inline style for the element. */
-  style?: JSX.CSSProperties;
+export interface TagRemoveButtonRenderProps {
+  /** Whether the remove button is pressed. */
+  isPressed: boolean;
+  /** Whether the remove button is disabled. */
+  isDisabled: boolean;
+  /** Whether the remove button is hovered. */
+  isHovered: boolean;
+  /** Whether the remove button is focused. */
+  isFocused: boolean;
+  /** Whether the remove button has focus visible. */
+  isFocusVisible: boolean;
+}
+
+export interface TagRemoveButtonProps
+  extends
+    SlotProps,
+    Omit<
+      JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+      "children" | "class" | "style" | "disabled" | "ref"
+    > {
+  /** The children of the button (usually an X icon) or a render function. */
+  children?: RenderChildren<TagRemoveButtonRenderProps>;
+  /** The CSS className for the element or a function. */
+  class?: ClassNameOrFunction<TagRemoveButtonRenderProps>;
+  /** The inline style for the element or a function. */
+  style?: StyleOrFunction<TagRemoveButtonRenderProps>;
   /** Explicit button props from Tag render props. */
   buttonProps?: Record<string, unknown>;
+  /** Ref to the button element. */
+  ref?: RefLike<HTMLButtonElement>;
 }
 
 /**
@@ -499,42 +660,168 @@ export interface TagRemoveButtonProps {
  * It should be placed inside a Tag component.
  */
 export function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {
+  const [local, domProps] = splitProps(props, ["children", "class", "style", "buttonProps", "ref"]);
+
   const tagContext = useContext(TagContext);
-  const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};
-  const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);
-  const rawId = getRemoveButtonProps().id;
-  const rawAriaLabel = getRemoveButtonProps()["aria-label"];
-  const rawAriaLabelledBy = getRemoveButtonProps()["aria-labelledby"];
-  const buttonId: string | undefined = typeof rawId === "string" ? rawId : undefined;
-  const ariaLabel: string = typeof rawAriaLabel === "string" ? rawAriaLabel : "Remove";
-  const ariaLabelledBy: string | undefined =
-    typeof rawAriaLabelledBy === "string" ? rawAriaLabelledBy : undefined;
+  const getRemoveButtonProps = () =>
+    (local.buttonProps ?? tagContext?.removeButtonProps ?? {}) as Record<string, unknown>;
+  const isDisabled = () => Boolean(getRemoveButtonProps().isDisabled);
+  const rawId = () => getRemoveButtonProps().id;
+  const rawAriaLabel = () => getRemoveButtonProps()["aria-label"];
+  const rawAriaLabelledBy = () => getRemoveButtonProps()["aria-labelledby"];
+  const rawTabIndex = () => getRemoveButtonProps().tabIndex;
+
+  const buttonId = () => (typeof rawId() === "string" ? (rawId() as string) : undefined);
+  const ariaLabel = () =>
+    typeof rawAriaLabel() === "string" ? (rawAriaLabel() as string) : "Remove";
+  const ariaLabelledBy = () =>
+    typeof rawAriaLabelledBy() === "string" ? (rawAriaLabelledBy() as string) : undefined;
+  const tabIndex = () =>
+    typeof rawTabIndex() === "number" ? (rawTabIndex() as number) : undefined;
+
+  const { buttonProps, isPressed } = createButton({
+    get id() {
+      return buttonId();
+    },
+    get "aria-label"() {
+      return ariaLabel();
+    },
+    get "aria-labelledby"() {
+      return ariaLabelledBy();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get excludeFromTabOrder() {
+      return tabIndex() === -1;
+    },
+    onPress: (e) => {
+      const handler = getRemoveButtonProps().onPress;
+      if (typeof handler === "function" && !isDisabled()) {
+        (handler as (e: unknown) => void)(e);
+      }
+    },
+  });
 
-  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return isDisabled();
+    },
+  });
+
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  const renderValues = createMemo<TagRemoveButtonRenderProps>(() => ({
+    isPressed: isPressed(),
+    isDisabled: isDisabled(),
+    isHovered: isHovered(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      get children() {
+        return local.children ?? "×";
+      },
+      get class() {
+        return local.class;
+      },
+      get style() {
+        return local.style;
+      },
+      defaultClassName: "solidaria-TagRemoveButton",
+    },
+    renderValues,
+  );
+
+  const cleanButtonProps = () => {
+    const { ref: _ref, ...rest } = buttonProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+
+  const handlePointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {
+    event.stopPropagation();
+    const handler = cleanButtonProps().onPointerDown;
+    if (typeof handler === "function") {
+      (handler as JSX.EventHandler<HTMLButtonElement, PointerEvent>)(event);
+    }
+  };
+
+  const handleMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {
     event.stopPropagation();
-    const handler = getRemoveButtonProps().onPress;
-    if (typeof handler === "function" && !getIsDisabled()) {
-      (handler as () => void)();
+    const handler = cleanButtonProps().onMouseDown;
+    if (typeof handler === "function") {
+      (handler as JSX.EventHandler<HTMLButtonElement, MouseEvent>)(event);
     }
   };
-  const stopRowPress: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {
+
+  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {
     event.stopPropagation();
+    const handler = cleanButtonProps().onClick;
+    if (typeof handler === "function") {
+      (handler as JSX.EventHandler<HTMLButtonElement, MouseEvent>)(event);
+    }
+  };
+
+  const handleKeyDown: JSX.EventHandler<HTMLButtonElement, KeyboardEvent> = (event) => {
+    const handler = cleanButtonProps().onKeyDown;
+    if (typeof handler === "function") {
+      (handler as JSX.EventHandler<HTMLButtonElement, KeyboardEvent>)(event);
+    }
+    if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+      event.stopPropagation();
+    }
+  };
+
+  const handleKeyUp: JSX.EventHandler<HTMLButtonElement, KeyboardEvent> = (event) => {
+    const handler = cleanButtonProps().onKeyUp;
+    if (typeof handler === "function") {
+      (handler as JSX.EventHandler<HTMLButtonElement, KeyboardEvent>)(event);
+    }
+    if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+      event.stopPropagation();
+    }
   };
 
   return (
     <button
+      {...domProps}
+      {...cleanButtonProps()}
+      {...cleanFocusProps()}
+      {...cleanHoverProps()}
+      ref={(el) => {
+        assignRef(local.ref, el);
+      }}
       type="button"
-      class={props.class ?? "solidaria-TagRemoveButton"}
-      style={props.style}
-      id={buttonId}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      disabled={getIsDisabled()}
+      id={buttonId()}
+      aria-label={ariaLabel()}
+      aria-labelledby={ariaLabelledBy()}
+      tabindex={tabIndex()}
+      disabled={isDisabled()}
+      class={renderProps.class()}
+      style={renderProps.style()}
       data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}
-      onPointerDown={stopRowPress}
+      data-pressed={dataAttr(isPressed())}
+      data-disabled={dataAttr(isDisabled())}
+      data-hovered={dataAttr(isHovered())}
+      data-focused={dataAttr(isFocused())}
+      data-focus-visible={dataAttr(isFocusVisible())}
+      onPointerDown={handlePointerDown}
+      onMouseDown={handleMouseDown}
       onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
     >
-      {props.children ?? "×"}
+      {renderProps.renderChildrenStable()}
     </button>
   );
 }