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

package/src/Switch.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/Switch.tsx
+
 /**
  * ToggleSwitch component for solidaria-components
  *
@@ -8,17 +22,16 @@
  */
 
 import {
-  type JSX,
-  type Context,
   createContext,
   createMemo,
   createSignal,
   createUniqueId,
-  splitProps,
   untrack,
   useContext,
   Show,
 } from "solid-js";
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createSwitch,
   createFocusRing,
@@ -43,8 +56,10 @@ import {
   Provider,
   useRenderProps,
   filterDOMProps,
+  dataAttr,
 } from "./utils";
 import { TextContext } from "./Text";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface ToggleSwitchRenderProps {
   /** Whether the switch is selected. */
@@ -242,13 +257,13 @@ export function ToggleSwitch(props: ToggleSwitchProps): JSX.Element {
       {...cleanHoverProps()}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-selected={switchAria.isSelected() || undefined}
-      data-pressed={switchAria.isPressed() || undefined}
-      data-hovered={isHovered() || undefined}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
-      data-disabled={switchAria.isDisabled || undefined}
-      data-readonly={switchAria.isReadOnly || undefined}
+      data-selected={dataAttr(switchAria.isSelected())}
+      data-pressed={dataAttr(switchAria.isPressed())}
+      data-hovered={dataAttr(isHovered())}
+      data-focused={dataAttr(isFocused())}
+      data-focus-visible={dataAttr(isFocusVisible())}
+      data-disabled={dataAttr(switchAria.isDisabled)}
+      data-readonly={dataAttr(switchAria.isReadOnly)}
     >
       <VisuallyHidden>
         <input
@@ -466,15 +481,15 @@ function SwitchButtonImpl(props: {
       class={renderProps.class()}
       style={renderProps.style()}
       slot={props.buttonProps.slot}
-      data-selected={switchAria.isSelected() || undefined}
-      data-pressed={switchAria.isPressed() || undefined}
-      data-hovered={isHovered() || undefined}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
-      data-disabled={switchAria.isDisabled || undefined}
-      data-readonly={switchAria.isReadOnly || undefined}
-      data-invalid={switchAria.isInvalid || undefined}
-      data-required={ctx.isRequired || undefined}
+      data-selected={dataAttr(switchAria.isSelected())}
+      data-pressed={dataAttr(switchAria.isPressed())}
+      data-hovered={dataAttr(isHovered())}
+      data-focused={dataAttr(isFocused())}
+      data-focus-visible={dataAttr(isFocusVisible())}
+      data-disabled={dataAttr(switchAria.isDisabled)}
+      data-readonly={dataAttr(switchAria.isReadOnly)}
+      data-invalid={dataAttr(switchAria.isInvalid)}
+      data-required={dataAttr(ctx.isRequired)}
     >
       <VisuallyHidden>
         <input ref={ctx.setInputElement} {...cleanInputProps()} {...cleanFocusProps()} />
@@ -499,7 +514,8 @@ function SwitchButtonImpl(props: {
  */
 export function SwitchField(props: SwitchFieldProps): JSX.Element {
   const contextProps = useContext(SwitchFieldContext);
-  const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+  const contextSlotProps =
+    contextProps?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
   const contextBaseProps = createMemo<SwitchFieldProps>(() => {
     if (!contextProps) return {};
     const { slots: _slots, ...rest } = contextProps;
@@ -630,24 +646,24 @@ export function SwitchField(props: SwitchFieldProps): JSX.Element {
   };
 
   return (
-    <InternalSwitchContext.Provider value={internalContext}>
-      <FieldErrorContext.Provider value={fieldErrorContext}>
+    <InternalSwitchContext value={internalContext}>
+      <FieldErrorContext value={fieldErrorContext}>
         <div
           {...domProps()}
           class={renderProps.class()}
           style={renderProps.style()}
           slot={local.slot}
-          data-selected={switchAria.isSelected() || undefined}
-          data-disabled={switchAria.isDisabled || undefined}
-          data-readonly={switchAria.isReadOnly || undefined}
-          data-invalid={switchAria.isInvalid || undefined}
-          data-required={ariaProps.isRequired || false || undefined}
+          data-selected={dataAttr(switchAria.isSelected())}
+          data-disabled={dataAttr(switchAria.isDisabled)}
+          data-readonly={dataAttr(switchAria.isReadOnly)}
+          data-invalid={dataAttr(switchAria.isInvalid)}
+          data-required={dataAttr(ariaProps.isRequired || false)}
         >
           <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
             <FieldChildren />
           </Provider>
         </div>
-      </FieldErrorContext.Provider>
-    </InternalSwitchContext.Provider>
+      </FieldErrorContext>
+    </InternalSwitchContext>
   );
 }