@recursica/mui-adapter 0.5.0 → 0.6.0

package/src/components/Switch/Switch.tsx

@@ -1,8 +1,155 @@
-import React from "react";
-import "./Switch.module.css";
+import { forwardRef } from "react";
+import {
+  Switch as MuiSwitch,
+  type SwitchProps as MuiSwitchProps,
+} from "@mui/material";
+import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 
-export type SwitchProps = React.HTMLAttributes<HTMLDivElement>;
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import { type RequireAccessibleLabel } from "../../utils/RequireAccessibleLabel";
+import {
+  FormControlLayout,
+  type FormControlLayoutProps,
+} from "../FormControlLayout/FormControlLayout";
+import styles from "./Switch.module.css";
 
-export const Switch: React.FC<SwitchProps> = (props) => {
-  return <div {...props}>Switch</div>;
-};
+import { SwitchGroup } from "./SwitchGroup";
+
+export type RecursicaSwitchProps = RequireAccessibleLabel<
+  Omit<MuiSwitchProps, "size" | "color" | "radius" | "variant"> &
+    ReadOnlyControlProps &
+    Pick<
+      FormControlLayoutProps,
+      "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
+    >
+>;
+
+export type SwitchProps = RecursicaOverStyled<RecursicaSwitchProps>;
+
+type SwitchComponent = any;
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  function Switch(props, ref) {
+    const {
+      overStyled = false,
+      readOnly,
+      readOnlyComponent,
+      disabled,
+      thumbIcon,
+      formLayout,
+      labelSize,
+      controlMaxWidth,
+      controlMinWidth,
+      ...rest
+    } = props;
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Actively delete dimension bindings that bypass the abstraction
+    delete restRecord["size"];
+    delete restRecord["color"];
+    delete restRecord["radius"];
+    delete restRecord["variant"];
+
+    const mergedClassNames: Partial<Record<string, string>> = {
+      root: styles.root,
+      body: styles.body,
+      track: styles.track,
+      thumb: styles.thumb,
+      trackLabel: styles.trackLabel,
+      labelWrapper: styles.labelWrapper,
+      label: styles.label,
+    };
+
+    const classNamesProp = restRecord.classNames;
+    if (
+      classNamesProp &&
+      typeof classNamesProp === "object" &&
+      !Array.isArray(classNamesProp)
+    ) {
+      const o = classNamesProp as Partial<Record<string, string>>;
+      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
+      mergedClassNames.body = o.body ? `${styles.body} ${o.body}` : styles.body;
+      mergedClassNames.track = o.track
+        ? `${styles.track} ${o.track}`
+        : styles.track;
+      mergedClassNames.thumb = o.thumb
+        ? `${styles.thumb} ${o.thumb}`
+        : styles.thumb;
+      mergedClassNames.trackLabel = o.trackLabel
+        ? `${styles.trackLabel} ${o.trackLabel}`
+        : styles.trackLabel;
+      mergedClassNames.labelWrapper = o.labelWrapper
+        ? `${styles.labelWrapper} ${o.labelWrapper}`
+        : styles.labelWrapper;
+      mergedClassNames.label = o.label
+        ? `${styles.label} ${o.label}`
+        : styles.label;
+    }
+
+    const classNameProp = restRecord.className as string | undefined;
+    const finalClass = classNameProp
+      ? `${styles.root} ${classNameProp}`
+      : styles.root;
+
+    if (readOnly && !!readOnlyComponent) {
+      const isChecked = !!(restRecord.checked ?? restRecord.defaultChecked);
+      const ReadOnlyComp = readOnlyComponent;
+      const roNode = (
+        <ReadOnlyComp
+          {...props}
+          checked={isChecked}
+          label={restRecord.label as React.ReactNode}
+        />
+      );
+
+      if (formLayout) {
+        return (
+          <FormControlLayout
+            formLayout={formLayout}
+            labelSize={labelSize}
+            controlMaxWidth={controlMaxWidth}
+            controlMinWidth={controlMinWidth}
+          >
+            {roNode}
+          </FormControlLayout>
+        );
+      }
+
+      return <>{roNode}</>;
+    }
+
+    // We omit Mui's sizing/coloring so we rely strictly on variables from Switch.module.css
+    const switchNode = (
+      <MuiSwitch
+        ref={ref}
+        className={finalClass}
+        classes={mergedClassNames}
+        disabled={readOnly || disabled}
+        data-disabled={readOnly || disabled || undefined}
+        // thumbIcon={thumbIcon ?? FinalThumbIcon}
+        {...(sanitizedProps as unknown as MuiSwitchProps)}
+      />
+    );
+
+    if (formLayout) {
+      return (
+        <FormControlLayout
+          formLayout={formLayout}
+          labelSize={labelSize}
+          controlMaxWidth={controlMaxWidth}
+          controlMinWidth={controlMinWidth}
+        >
+          {switchNode}
+        </FormControlLayout>
+      );
+    }
+
+    return switchNode;
+  },
+) as SwitchComponent;
+
+Switch.displayName = "Switch";

package/src/components/Switch/SwitchGroup.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import {
+  Switch as MuiSwitch,
+  type SwitchGroupProps as MuiSwitchGroupProps,
+} from "@mui/material";
+import { type ReadOnlyControlProps } from "@recursica/adapter-common";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
+import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
+import styles from "./Switch.module.css";
+
+export interface RecursicaSwitchGroupProps
+  extends Omit<MuiSwitchGroupProps, "size" | "labelProps">,
+    Omit<
+      RecursicaFormControlWrapperProps,
+      "controlMaxWidth" | "controlMinWidth"
+    >,
+    ReadOnlyControlProps {}
+
+export type SwitchGroupProps = RecursicaOverStyled<RecursicaSwitchGroupProps>;
+
+export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
+  function SwitchGroup(props, ref) {
+    const {
+      overStyled = false,
+      formLayout = "stacked",
+
+      // Label Wrappers
+      labelSize,
+      labelAlignment,
+      labelOptionalText,
+      labelWithEditIcon,
+      onLabelEditClick,
+
+      // Base Mui Extracted Attributes
+      label,
+      description,
+      assistiveText,
+      assistiveWithIcon,
+      error,
+      required,
+      withAsterisk,
+      id,
+      className,
+      style,
+      children,
+      readOnly,
+      readOnlyComponent,
+      emptyValueComponent,
+      value,
+      defaultValue,
+      ...rest
+    } = props;
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Delete prohibited sizing hooks from bypassing the variables
+    delete restRecord["size"];
+
+    return (
+      <WithReadOnlyWrapper
+        className={className}
+        style={style as React.CSSProperties}
+        controlMaxWidth="var(--recursica_ui-kit_components_switch-item_properties_label-max-width)"
+        controlMinWidth={undefined}
+        overStyled={overStyled as true}
+        // Strictly override. ARIA grouping prohibits interactive switches nested natively inside <label>.
+        formLayout={formLayout}
+        labelSize={labelSize}
+        labelAlignment={labelAlignment}
+        labelOptionalText={labelOptionalText}
+        labelWithEditIcon={labelWithEditIcon}
+        onLabelEditClick={onLabelEditClick}
+        label={label}
+        description={description}
+        assistiveText={assistiveText}
+        assistiveWithIcon={assistiveWithIcon}
+        error={error}
+        required={required}
+        withAsterisk={withAsterisk}
+        id={id}
+        readOnly={readOnly && !!readOnlyComponent}
+        readOnlyComponent={readOnlyComponent}
+        emptyValueComponent={emptyValueComponent}
+        readOnlyType="text"
+        readOnlyValue={value !== undefined ? value : defaultValue}
+        readOnlyNativeProps={props}
+        activeComponent={
+          <div
+            ref={ref}
+            /* Natively bind local disabled lock dynamically */
+            {...(sanitizedProps as unknown as MuiSwitchGroupProps)}
+            disabled={readOnly || (restRecord as any).disabled}
+            value={value}
+            defaultValue={defaultValue}
+          >
+            <div className={styles.groupRoot} data-layout={formLayout}>
+              {children}
+            </div>
+          </div>
+        }
+      />
+    );
+  },
+);
+
+const SwitchGroup = (() => {}) as any; // SwitchGroup.displayName = "SwitchGroup";