@hitachivantara/uikit-react-core/dist/esm/Switch/Switch.js

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useCallback } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { getColor } from "@hitachivantara/uikit-styles";
import { useControlled } from "../hooks/useControlled.js";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { setId } from "../utils/setId.js";
import { useClasses } from "./Switch.styles.js";
import { staticClasses } from "./Switch.styles.js";
import { HvBaseSwitch } from "../BaseSwitch/BaseSwitch.js";
import { HvFormElement } from "../FormElement/FormElement.js";
import { HvLabel } from "../FormElement/Label/Label.js";
import { isInvalid } from "../FormElement/utils.js";
import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
const HvSwitch = forwardRef(
  function HvSwitch2(props, ref) {
    const {
      classes: classesProp,
      className,
      id,
      name,
      value = "on",
      required,
      readOnly,
      disabled,
      label,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      "aria-describedby": ariaDescribedBy,
      labelProps,
      checked,
      defaultChecked = false,
      onChange,
      status,
      statusMessage,
      "aria-errormessage": ariaErrorMessage,
      inputProps,
      color,
      ...others
    } = useDefaultProps("HvSwitch", props);
    const { classes, cx, css } = useClasses(classesProp);
    const elementId = useUniqueId(id);
    const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);
    const [validationState, setValidationState] = useControlled(
      status,
      "standBy"
    );
    const [validationMessage] = useControlled(statusMessage, "Required");
    const onLocalChange = useCallback(
      (evt, newChecked) => {
        setIsChecked(() => {
          if (required && !newChecked) {
            setValidationState("invalid");
          } else {
            setValidationState("valid");
          }
          return newChecked;
        });
        onChange?.(evt, newChecked, value);
      },
      [onChange, required, setIsChecked, setValidationState, value]
    );
    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
    const isStateInvalid = isInvalid(validationState);
    let errorMessageId;
    if (isStateInvalid) {
      errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
    }
    return /* @__PURE__ */ jsxs(
      HvFormElement,
      {
        id,
        name,
        status: validationState,
        disabled,
        required,
        readOnly,
        className: cx(classes.root, className),
        children: [
          label && /* @__PURE__ */ jsx(
            HvLabel,
            {
              showGutter: true,
              id: setId(elementId, "label"),
              htmlFor: setId(elementId, "input"),
              label,
              className: classes.label,
              ...labelProps
            }
          ),
          /* @__PURE__ */ jsx(
            "div",
            {
              className: cx(classes.switchContainer, {
                [classes.invalidSwitch]: isStateInvalid
              }),
              children: /* @__PURE__ */ jsx(
                HvBaseSwitch,
                {
                  ref,
                  id: label ? setId(elementId, "input") : setId(id, "input"),
                  name,
                  disabled,
                  readOnly,
                  required,
                  onChange: onLocalChange,
                  value,
                  checked: isChecked,
                  inputProps: {
                    "aria-invalid": isStateInvalid ? true : void 0,
                    "aria-errormessage": errorMessageId,
                    "aria-label": ariaLabel,
                    "aria-labelledby": ariaLabelledBy,
                    "aria-describedby": ariaDescribedBy,
                    ...inputProps
                  },
                  ...color && {
                    classes: {
                      switchBase: css({
                        "&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
                          backgroundColor: getColor(color),
                          borderColor: isSemantical(color) ? getColor(`${color}_120`) : "#00000032"
                        }
                      })
                    }
                  },
                  ...others
                }
              )
            }
          ),
          canShowError && /* @__PURE__ */ jsx(
            HvWarningText,
            {
              id: setId(elementId, "error"),
              className: classes.error,
              disableBorder: true,
              disableAdornment: true,
              hideText: true,
              children: validationMessage
            }
          )
        ]
      }
    );
  }
);
export {
  HvSwitch,
  staticClasses as switchClasses
};