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

package/src/button/FieldButton.tsx

@@ -1,4 +1,19 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * Copyright 2020 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/@adobe/react-spectrum/src/button/FieldButton.tsx
+
+// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/button/FieldButton.tsx.
+import type { JSX } from "@solidjs/web";
 import {
   Button as HeadlessButton,
   type ButtonProps as HeadlessButtonProps,
@@ -6,6 +21,7 @@ import {
 } from "@proyecto-viviana/solidaria-components";
 import { useProviderProps } from "../provider";
 import { style, focusRing } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface FieldButtonProps extends Omit<HeadlessButtonProps, "class" | "style"> {
   /** Additional CSS class name. */

package/src/button/LinkButton.tsx

@@ -1,10 +1,22 @@
-import {
-  children as resolveChildren,
-  mergeProps,
-  splitProps,
-  useContext,
-  type JSX,
-} from "solid-js";
+/*
+ * 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/Button.tsx
+
+// Port of packages/@react-spectrum/s2/src/Button.tsx.
+
+import { children as resolveChildren, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import {
   DialogTriggerContext,
   Link as HeadlessLink,
@@ -13,12 +25,13 @@ import {
   type LinkRenderProps,
 } from "@proyecto-viviana/solidaria-components";
 import type { StyleString } from "../style";
-import { fontRelative, style } from "../style" with { type: "macro" };
+import { style } from "../style" with { type: "macro" };
 import { IconContext } from "../icon/spectrum-icon";
 import { centerBaseline } from "../icon/center-baseline";
 import { SkeletonContext } from "../skeleton";
 import { TextContext } from "../text";
-import { useProviderProps } from "../provider";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
+import { useFormProps } from "../form";
 import { pressScale } from "../pressScale";
 import { useLinkButtonContext } from "./context";
 import { s2Button, s2ButtonText } from "./s2-button-styles";
@@ -31,6 +44,7 @@ import {
 } from "./spectrum-context";
 import type { ButtonFillStyle, ButtonSize, ButtonVariant, StaticColor } from "./types";
 import { getSingleTextChild } from "./text-child";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 type StyledLinkButtonBaseProps = Omit<
   HeadlessLinkProps,
@@ -60,14 +74,18 @@ export interface LinkButtonProps extends StyledLinkButtonBaseProps {
  * A LinkButton navigates like a link while using the S2 Button visual treatment.
  */
 export function LinkButton(props: LinkButtonProps): JSX.Element {
-  const providerProps = useProviderProps(props);
+  const providerProps = useProviderProps(props) as LinkButtonProps & ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useLinkButtonContext(), props.slot);
-  const defaultProps: Partial<LinkButtonProps> = {
-    variant: "primary",
-    size: "M",
-    fillStyle: "fill",
-  };
-  const merged = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);
+  // As Button: the Form fills what context and props leave unset; defaults are read-time.
+  const merged = useFormProps(mergeProps<LinkButtonProps>(flags, contextProps ?? {}, props));
   const [local, headlessProps] = splitProps(merged, [
     "variant",
     "fillStyle",
@@ -130,7 +148,7 @@ export function LinkButton(props: LinkButtonProps): JSX.Element {
       slot: "icon",
       render: centerBaseline({ slot: "icon", styles: style({ order: 0 }) }),
       styles: style({
-        size: fontRelative(20),
+        size: "1lh",
         marginStart: "--iconMargin",
         flexShrink: 0,
       }),
@@ -145,24 +163,28 @@ export function LinkButton(props: LinkButtonProps): JSX.Element {
       const content = () => resolvedChildren();
       const textChild = () => getSingleTextChild(content());
 
-      return textChild() !== undefined ? (
-        <span class={s2ButtonText({ isProgressVisible: false })} data-rsp-slot="text">
-          {textChild()}
-        </span>
-      ) : (
-        content()
+      return (
+        <>
+          {textChild() !== undefined ? (
+            <span class={s2ButtonText({ isProgressVisible: false })} data-rsp-slot="text">
+              {textChild()}
+            </span>
+          ) : (
+            content()
+          )}
+        </>
       );
     }
 
     return (
       <>
-        <SkeletonContext.Provider value={null}>
-          <TextContext.Provider value={textContextValue}>
-            <IconContext.Provider value={iconContextValue}>
+        <SkeletonContext value={null}>
+          <TextContext value={textContextValue}>
+            <IconContext value={iconContextValue}>
               <ResolvedContent />
-            </IconContext.Provider>
-          </TextContext.Provider>
-        </SkeletonContext.Provider>
+            </IconContext>
+          </TextContext>
+        </SkeletonContext>
       </>
     );
   }

package/src/button/LogicButton.tsx

@@ -1,4 +1,19 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * Copyright 2020 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/@adobe/react-spectrum/src/button/LogicButton.tsx
+
+// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/button/LogicButton.tsx.
+import type { JSX } from "@solidjs/web";
 import {
   ToggleButton as HeadlessToggleButton,
   type ToggleButtonProps as HeadlessToggleButtonProps,
@@ -6,6 +21,7 @@ import {
 } from "@proyecto-viviana/solidaria-components";
 import { useProviderProps } from "../provider";
 import { style, focusRing } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface LogicButtonProps extends Omit<
   HeadlessToggleButtonProps,

package/src/button/S2PendingProgressCircle.tsx

@@ -1,4 +1,19 @@
-import { type JSX } from "solid-js";
+/*
+ * 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/ProgressCircle.tsx
+
+// Port of packages/@react-spectrum/s2/src/ProgressCircle.tsx.
+import type { JSX } from "@solidjs/web";
 import { ProgressBar } from "@proyecto-viviana/solidaria-components";
 import type { StaticColor } from "./types";
 import type { ActionButtonSize } from "./group-context";

package/src/button/ToggleButton.tsx

@@ -1,13 +1,41 @@
-import { children as resolveChildren, type JSX, mergeProps, splitProps } from "solid-js";
+/*
+ * 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/ToggleButton.tsx
+
+// Port of packages/@react-spectrum/s2/src/ToggleButton.tsx.
+import {
+  children as resolveChildren,
+  createEffect,
+  createSignal,
+  merge,
+  onCleanup,
+  useContext,
+  createTrackedEffect,
+} from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   ToggleButton as HeadlessToggleButton,
+  MenuTriggerContext,
+  PopoverTriggerContext,
   type ToggleButtonProps as HeadlessToggleButtonProps,
   type ToggleButtonRenderProps,
 } from "@proyecto-viviana/solidaria-components";
-import { useProviderProps } from "../provider";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
+import { useFormProps } from "../form";
 import type { StaticColor } from "./types";
 import type { StyleString } from "../style";
-import { fontRelative, style } from "../style" with { type: "macro" };
+import { space, style } from "../style" with { type: "macro" };
+import { mergeProps as mergeAriaProps, useLocale } from "@proyecto-viviana/solidaria";
 import { mergeStyles } from "../style/runtime";
 import { centerBaseline } from "../icon/center-baseline";
 import { SkeletonContext } from "../skeleton";
@@ -35,6 +63,8 @@ import {
   type RefLike,
 } from "./spectrum-context";
 import { getSingleTextChild } from "./text-child";
+import CornerTriangle from "../icon/ui-icons/CornerTriangle";
+import { mergeProps, splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type ToggleButtonSize = ActionButtonSize;
 
@@ -79,17 +109,31 @@ export interface ToggleButtonProps extends StyledToggleButtonBaseProps {
   UNSAFE_style?: JSX.CSSProperties;
 }
 
+type RuntimeToggleButtonProps = ToggleButtonProps & { holdAffordance?: boolean };
+
 /**
  * ToggleButtons allow users to toggle a selection on or off.
  */
 export function ToggleButton(props: ToggleButtonProps): JSX.Element {
-  const providerProps = useProviderProps(props);
-  const contextProps = getSlottedContextProps(useToggleButtonContext(), props.slot);
+  const runtimeProps = props as RuntimeToggleButtonProps;
+  const providerProps = useProviderProps(runtimeProps) as RuntimeToggleButtonProps &
+    ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
+  const contextProps = getSlottedContextProps(useToggleButtonContext(), runtimeProps.slot);
   const groupContext = getSlottedContextProps(useToggleButtonGroupContext(), undefined);
-  const defaultProps: Partial<ToggleButtonProps> = {
-    size: "M",
-  };
-  const standaloneProps = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);
+  // As Button: the Form fills what context and props leave unset; defaults are read-time.
+  const standaloneProps = useFormProps(
+    contextProps
+      ? mergeAriaProps<RuntimeToggleButtonProps>(flags, contextProps, props)
+      : mergeAriaProps<RuntimeToggleButtonProps>(flags, props),
+  );
   const groupProps: Partial<ToggleButtonProps> & {
     density?: ActionButtonDensity;
     orientation?: ActionButtonOrientation;
@@ -121,7 +165,13 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
     },
   };
 
-  const mergedProps = mergeProps(standaloneProps, groupProps);
+  const mergedProps = mergeProps<
+    RuntimeToggleButtonProps & {
+      density?: ActionButtonDensity;
+      orientation?: ActionButtonOrientation;
+      isJustified?: boolean;
+    }
+  >(standaloneProps, groupProps);
   const [local, headlessProps] = splitProps(mergedProps, [
     "size",
     "staticColor",
@@ -131,18 +181,29 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
     "UNSAFE_className",
     "UNSAFE_style",
     "children",
+    "holdAffordance",
     "ref",
     "density",
     "orientation",
     "isJustified",
   ]);
   let buttonElement: HTMLButtonElement | undefined;
+  const [resolvedButtonElement, setResolvedButtonElement] = createSignal<HTMLButtonElement | null>(
+    null,
+  );
+  const menuTriggerContext = useContext(MenuTriggerContext);
+  const popoverTriggerContext = useContext(PopoverTriggerContext);
   const assignButtonRefs = mergeContextRefs(
     (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,
     props.ref,
   );
 
   const size = (): ToggleButtonSize => local.size ?? "M";
+  const cornerTriangleSize = (): "S" | "M" | "L" | "XL" => {
+    const currentSize = size();
+    return currentSize === "XS" ? "S" : currentSize;
+  };
+  const locale = useLocale();
   const density = (): ActionButtonDensity => local.density ?? "regular";
   const orientation = (): ActionButtonOrientation => local.orientation ?? "horizontal";
   const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
@@ -195,13 +256,76 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
 
   const getPressScaleStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties =>
     pressScale(() => buttonElement, mergedUnsafeStyle())(renderProps);
+  const menuTriggerButtonProps = (): Partial<HeadlessToggleButtonProps> => {
+    if (!menuTriggerContext) {
+      return {};
+    }
+
+    const { onKeyDown: _onKeyDown, ...triggerProps } = menuTriggerContext.triggerProps;
+    return mergeAriaProps<Partial<HeadlessToggleButtonProps>>(
+      triggerProps as Partial<HeadlessToggleButtonProps>,
+      {
+        onPressStart: menuTriggerContext.onPressStart,
+      } as Partial<HeadlessToggleButtonProps>,
+    );
+  };
+  // Resolved once, after the spreads, so nothing shadows it. The MenuTrigger
+  // publishes a concrete boolean (`solidaria-components/src/Menu.tsx:417`), and
+  // a present key wins a spread whatever it evaluates to, so carrying it in
+  // `menuTriggerButtonProps()` buried the Form and the Skeleton under a `false`.
+  // Upstream's MenuTrigger never sets the flag on its trigger, so ours is the
+  // last resort; group before own prop is ToggleButton's own upstream order
+  // (`@react-spectrum/s2@1.7.0/src/ToggleButton.tsx:90`), which `headlessProps`
+  // already carries.
+  const isDisabled = () => headlessProps.isDisabled ?? menuTriggerContext?.isDisabled?.();
+  const syncMenuTriggerAttribute = (element: HTMLButtonElement, name: string, value: unknown) => {
+    if (value == null) {
+      element.removeAttribute(name);
+      return;
+    }
+    element.setAttribute(name, String(value));
+  };
+
+  createTrackedEffect(() => {
+    const element = resolvedButtonElement();
+    if (!element || !menuTriggerContext || menuTriggerContext.triggerRef?.() !== element) {
+      return;
+    }
+
+    const triggerProps = menuTriggerContext.triggerProps as Record<string, unknown>;
+    syncMenuTriggerAttribute(element, "aria-haspopup", triggerProps["aria-haspopup"]);
+    syncMenuTriggerAttribute(element, "aria-expanded", triggerProps["aria-expanded"]);
+    syncMenuTriggerAttribute(element, "aria-controls", triggerProps["aria-controls"]);
+    syncMenuTriggerAttribute(element, "aria-disabled", triggerProps["aria-disabled"]);
+  });
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
+    const element = resolvedButtonElement();
+    if (!element || !menuTriggerContext || menuTriggerContext.triggerRef?.() !== element) {
+      return;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      (menuTriggerContext.triggerProps as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown?.(
+        event,
+      );
+    };
+
+    element.addEventListener("keydown", onKeyDown);
+    _s2Cleanups.push(() => element.removeEventListener("keydown", onKeyDown));
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
+  });
 
   function ToggleButtonContent() {
     const iconContextValue = {
       slot: "icon",
       render: centerBaseline({ slot: "icon", styles: style({ order: 0 }) }),
       styles: style({
-        size: fontRelative(20),
+        size: "1lh",
         marginStart: "--iconMargin",
         flexShrink: 0,
       }),
@@ -216,31 +340,71 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
       const content = () => resolvedChildren();
       const textChild = () => getSingleTextChild(content());
 
-      return textChild() !== undefined ? (
-        <span class={`${s2ToggleButtonText} ${style({ order: 1 })}`} data-rsp-slot="text">
-          {textChild()}
-        </span>
-      ) : (
-        content()
+      return (
+        <>
+          {textChild() !== undefined ? (
+            <span class={`${s2ToggleButtonText} ${style({ order: 1 })}`} data-rsp-slot="text">
+              {textChild()}
+            </span>
+          ) : (
+            content()
+          )}
+        </>
       );
     }
 
     return (
-      <SkeletonContext.Provider value={null}>
-        <TextContext.Provider value={textContextValue}>
-          <IconContext.Provider value={iconContextValue}>
+      <SkeletonContext value={null}>
+        <TextContext value={textContextValue}>
+          <IconContext value={iconContextValue}>
             <ResolvedContent />
-          </IconContext.Provider>
-        </TextContext.Provider>
-      </SkeletonContext.Provider>
+            {local.holdAffordance ? (
+              <CornerTriangle
+                size={cornerTriangleSize()}
+                class={style({
+                  position: "absolute",
+                  insetEnd: {
+                    size: {
+                      XS: space(3),
+                      S: space(3),
+                      M: 4,
+                      L: space(5),
+                      XL: space(6),
+                    },
+                  },
+                  bottom: {
+                    size: {
+                      XS: space(3),
+                      S: space(3),
+                      M: 4,
+                      L: space(5),
+                      XL: space(6),
+                    },
+                  },
+                  scaleX: {
+                    direction: {
+                      rtl: -1,
+                    },
+                  },
+                })({ direction: locale().direction, size: size() })}
+              />
+            ) : null}
+          </IconContext>
+        </TextContext>
+      </SkeletonContext>
     );
   }
 
   return (
     <HeadlessToggleButton
       {...headlessProps}
+      {...menuTriggerButtonProps()}
+      isDisabled={isDisabled()}
       ref={(element: HTMLButtonElement) => {
         buttonElement = element;
+        setResolvedButtonElement(element);
+        popoverTriggerContext?.setTriggerRef(element);
+        menuTriggerContext?.setTriggerRef?.(element);
         assignButtonRefs(element);
       }}
       class={getClassName}

package/src/button/context.ts

@@ -1,3 +1,22 @@
+/*
+ * 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/ActionButton.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButton.tsx
+
+// Port of packages/@react-spectrum/s2/src/ActionButton.tsx.
+// Port of packages/@react-spectrum/s2/src/Button.tsx.
+// Port of packages/@react-spectrum/s2/src/ToggleButton.tsx.
 import { createContext, useContext } from "solid-js";
 import type { ActionButtonProps } from "./ActionButton";
 import type { ButtonProps } from "./types";
@@ -7,8 +26,10 @@ import type { SpectrumContextValue } from "./spectrum-context";
 
 export const ButtonContext = createContext<SpectrumContextValue<ButtonProps>>(null);
 export const LinkButtonContext = createContext<SpectrumContextValue<LinkButtonProps>>(null);
-export const ActionButtonContext = createContext<SpectrumContextValue<ActionButtonProps>>(null);
-export const ToggleButtonContext = createContext<SpectrumContextValue<ToggleButtonProps>>(null);
+export const ActionButtonContext =
+  createContext<SpectrumContextValue<ActionButtonProps & { holdAffordance?: boolean }>>(null);
+export const ToggleButtonContext =
+  createContext<SpectrumContextValue<ToggleButtonProps & { holdAffordance?: boolean }>>(null);
 
 export function useButtonContext(): SpectrumContextValue<ButtonProps> {
   return useContext(ButtonContext);
@@ -18,10 +39,14 @@ export function useLinkButtonContext(): SpectrumContextValue<LinkButtonProps> {
   return useContext(LinkButtonContext);
 }
 
-export function useActionButtonContext(): SpectrumContextValue<ActionButtonProps> {
+export function useActionButtonContext(): SpectrumContextValue<
+  ActionButtonProps & { holdAffordance?: boolean }
+> {
   return useContext(ActionButtonContext);
 }
 
-export function useToggleButtonContext(): SpectrumContextValue<ToggleButtonProps> {
+export function useToggleButtonContext(): SpectrumContextValue<
+  ToggleButtonProps & { holdAffordance?: boolean }
+> {
   return useContext(ToggleButtonContext);
 }

package/src/button/group-context.ts

@@ -1,4 +1,24 @@
-import { createContext, useContext, type JSX } from "solid-js";
+/*
+ * 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/ActionButtonGroup.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ButtonGroup.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
+
+// Port of packages/@react-spectrum/s2/src/ActionButtonGroup.tsx.
+// Port of packages/@react-spectrum/s2/src/ButtonGroup.tsx.
+// Port of packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx.
+import { createContext, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Key } from "@proyecto-viviana/solid-stately";
 import type { StyleString } from "../style";
 import type { ButtonSize, StaticColor } from "./types";

package/src/button/pending-state.ts

@@ -1,25 +1,36 @@
-import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js";
+/*
+ * 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.
+ */
 
-export function createPendingState(isPending: Accessor<boolean | undefined>) {
-  const [isProgressVisible, setIsProgressVisible] = createSignal(false);
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx
 
-  createEffect(() => {
-    let timeout: ReturnType<typeof setTimeout> | undefined;
+// Port of packages/@react-spectrum/s2/src/Button.tsx.
+import { createEffect, createSignal } from "solid-js";
+import type { Accessor } from "solid-js";
 
-    if (isPending()) {
-      timeout = setTimeout(() => {
-        setIsProgressVisible(true);
-      }, 1000);
-    } else {
-      setIsProgressVisible(false);
-    }
+export function createPendingState(isPending: Accessor<boolean | undefined>) {
+  const [isProgressVisible, setIsProgressVisible] = createSignal(false, { ownedWrite: true });
 
-    onCleanup(() => {
-      if (timeout) {
-        clearTimeout(timeout);
+  createEffect(
+    () => isPending() ?? false,
+    (pending) => {
+      if (pending) {
+        const timeout = setTimeout(() => {
+          setIsProgressVisible(true);
+        }, 1000);
+        return () => clearTimeout(timeout);
       }
-    });
-  });
+      setIsProgressVisible(false);
+    },
+  );
 
   return { isProgressVisible };
 }