@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/src/ActionGroup.tsx

@@ -1,3 +1,18 @@
+/*
+ * 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/react-aria/src/actiongroup/useActionGroup.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts
+
 /**
  * ActionGroup component for solidaria-components
  *
@@ -6,19 +21,14 @@
  * Provides proper dynamic roles (toolbar/radiogroup), keyboard
  * navigation, and ARIA attributes.
  *
- * No RAC equivalent exists — this bridges solidaria ARIA hooks
- * directly to a headless component.
+ * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and
+ * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria
+ * Components has no ActionGroup component, so this file wires the two hooks.
  */
 
-import {
-  type JSX,
-  type ParentProps,
-  createContext,
-  createMemo,
-  splitProps,
-  useContext,
-  For,
-} from "solid-js";
+import { createContext, createMemo, useContext, For } from "solid-js";
+import type { ParentProps } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createActionGroup,
   createActionGroupItem,
@@ -30,12 +40,14 @@ import {
   type Key,
   type SelectionMode,
 } from "@proyecto-viviana/solid-stately";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  dataAttr,
 } from "./utils";
 
 export interface ActionGroupRenderProps {
@@ -192,8 +204,8 @@ export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
   );
 
   return (
-    <ActionGroupContext.Provider value={{ state: state as ListState<ActionGroupItem> }}>
-      <ActionGroupStateContext.Provider value={state as ListState<ActionGroupItem>}>
+    <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>
+      <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>
         <div
           {...filteredDOMProps()}
           {...actionGroupProps}
@@ -205,7 +217,7 @@ export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
           style={renderProps.style()}
           slot={local.slot}
           data-orientation={orientation()}
-          data-disabled={local.isDisabled || undefined}
+          data-disabled={dataAttr(local.isDisabled)}
         >
           <For each={local.items}>
             {(item) => (
@@ -222,8 +234,8 @@ export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
             )}
           </For>
         </div>
-      </ActionGroupStateContext.Provider>
-    </ActionGroupContext.Provider>
+      </ActionGroupStateContext>
+    </ActionGroupContext>
   );
 }
 
@@ -265,9 +277,9 @@ function ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element
   return (
     <button
       {...restButtonProps}
-      data-selected={isSelected() || undefined}
-      data-disabled={isDisabled() || undefined}
-      data-focused={isFocused() || undefined}
+      data-selected={dataAttr(isSelected())}
+      data-disabled={dataAttr(isDisabled())}
+      data-focused={dataAttr(isFocused())}
     >
       {props.renderChild(props.item, renderProps())}
     </button>

package/src/Alert.tsx

@@ -4,17 +4,23 @@
  * Minimal headless Alert that owns ARIA semantics (role="alert")
  * and provides render props for styling. The UI layer consumes this
  * for styling/composition only.
+ *
+ * This is a local Solid component. The pinned React Aria Components source
+ * has no Alert counterpart.
  */
 
-import { type JSX, createContext, createMemo, splitProps, useContext } from "solid-js";
+import { createContext, createMemo, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
   filterDOMProps,
+  dataAttr,
 } from "./utils";
 import { Button, type ButtonProps } from "./Button";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type AlertVariant = "info" | "success" | "warning" | "error";
 
@@ -108,20 +114,20 @@ export function Alert(props: AlertProps): JSX.Element {
   // Children are accessed lazily inside the Provider scope (via local.children
   // in JSX) so sub-components like AlertDismissButton can read AlertContext.
   return (
-    <AlertContext.Provider value={contextValue}>
+    <AlertContext value={contextValue}>
       <div
         {...domProps()}
         role="alert"
         class={computedClass()}
         style={computedStyle()}
         data-variant={variant()}
-        data-dismissible={isDismissible() || undefined}
+        data-dismissible={dataAttr(isDismissible())}
       >
         {typeof local.children === "function"
           ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())
           : local.children}
       </div>
-    </AlertContext.Provider>
+    </AlertContext>
   );
 }
 

package/src/Autocomplete.tsx

@@ -1,3 +1,17 @@
+/*
+ * 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-aria-components/src/Autocomplete.tsx
+
 /**
  * Autocomplete component for solidaria-components
  *
@@ -7,15 +21,9 @@
  * Port of react-aria-components/src/Autocomplete.tsx
  */
 
-import {
-  type JSX,
-  type ParentProps,
-  createContext,
-  useContext,
-  createMemo,
-  splitProps,
-  createSignal,
-} from "solid-js";
+import { createContext, useContext, createMemo, createSignal } from "solid-js";
+import type { ParentProps } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createAutocomplete,
   type AriaAutocompleteOptions,
@@ -29,6 +37,7 @@ import {
   type CollectionNode,
 } from "@proyecto-viviana/solid-stately";
 import { type SlotProps } from "./utils";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface AutocompleteProps<T = unknown>
   extends
@@ -163,12 +172,12 @@ export function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Elem
   }));
 
   return (
-    <AutocompleteStateContext.Provider value={state}>
-      <AutocompleteContext.Provider value={inputContextValue()}>
-        <AutocompleteCollectionContext.Provider value={collectionContextValue()}>
+    <AutocompleteStateContext value={state}>
+      <AutocompleteContext value={inputContextValue()}>
+        <AutocompleteCollectionContext value={collectionContextValue()}>
           {props.children}
-        </AutocompleteCollectionContext.Provider>
-      </AutocompleteContext.Provider>
-    </AutocompleteStateContext.Provider>
+        </AutocompleteCollectionContext>
+      </AutocompleteContext>
+    </AutocompleteStateContext>
   );
 }

package/src/Breadcrumbs.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/Breadcrumbs.tsx
+
 /**
  * Breadcrumbs component for solidaria-components
  *
@@ -6,17 +20,16 @@
  */
 
 import {
-  type Accessor,
-  type JSX,
   createContext,
   createMemo,
   createSignal,
   children as resolveChildren,
-  splitProps,
   useContext,
   For,
   Show,
 } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { ElementTag } from "./ElementTag";
 import {
   createBreadcrumbs,
@@ -28,6 +41,7 @@ import {
   type AriaBreadcrumbItemProps,
   type PressEvent,
 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -35,6 +49,8 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  dataAttr,
+  attrTrue,
 } from "./utils";
 
 type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
@@ -142,7 +158,7 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
   const hasCollectionItems = () => local.items !== undefined;
   const getItemKey = (item: T, index: number): string | number =>
     local.getKey?.(item) ?? defaultItemKey(item, index);
-  const [staticItemCount, setStaticItemCount] = createSignal(0);
+  const [staticItemCount, setStaticItemCount] = createSignal(0, { ownedWrite: true });
   let nextStaticIndex = 0;
   const resetStaticItems = () => {
     nextStaticIndex = 0;
@@ -186,7 +202,7 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
     filterDOMProps(rest as Record<string, unknown>, { global: true }),
   );
   return (
-    <BreadcrumbsContext.Provider
+    <BreadcrumbsContext
       value={{
         isDisabled,
         onAction: local.onAction,
@@ -215,7 +231,7 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
         ref={(element) => assignRef(local.ref, element)}
         class={renderProps.class()}
         style={renderProps.style()}
-        data-disabled={isDisabled() || undefined}
+        data-disabled={dataAttr(isDisabled())}
       >
         <Show
           when={hasCollectionItems()}
@@ -229,16 +245,16 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
 
               return (
                 <li style={{ display: "flex", "align-items": "center" }}>
-                  <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>
+                  <BreadcrumbItemContext value={{ itemKey, isLast }}>
                     {renderItem?.(item)}
-                  </BreadcrumbItemContext.Provider>
+                  </BreadcrumbItemContext>
                 </li>
               );
             }}
           </For>
         </Show>
       </ol>
-    </BreadcrumbsContext.Provider>
+    </BreadcrumbsContext>
   );
 }
 
@@ -418,15 +434,15 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       {...mergedItemProps()}
       ref={(element: HTMLElement) => assignRef(local.ref, element)}
       aria-current={isCurrent() ? (ariaProps["aria-current"] ?? "page") : undefined}
-      aria-disabled={isDisabled() || isCurrent() || undefined}
+      aria-disabled={attrTrue(isDisabled() || isCurrent())}
       class={renderProps.class()}
       style={mergedStyle()}
-      data-current={isCurrent() || undefined}
-      data-disabled={isDisabled() || undefined}
-      data-pressed={isPressed() || undefined}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
-      data-hovered={isHovered() || undefined}
+      data-current={dataAttr(isCurrent())}
+      data-disabled={dataAttr(isDisabled())}
+      data-pressed={dataAttr(isPressed())}
+      data-focused={dataAttr(isFocused())}
+      data-focus-visible={dataAttr(isFocusVisible())}
+      data-hovered={dataAttr(isHovered())}
     >
       {renderProps.renderChildren()}
     </ElementTag>