braid-design-system/dist/lib/components/private/InlineField/StyledInput.cjs

Themeable design system for the SEEK Group

"use strict";
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const lib_components_Box_BackgroundContext_cjs = require("../../Box/BackgroundContext.cjs");
const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const lib_components_private_FieldOverlay_FieldOverlay_cjs = require("../FieldOverlay/FieldOverlay.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../buildDataAttributes.cjs");
const lib_components_private_validateTabIndex_cjs = require("../validateTabIndex.cjs");
const lib_components_private_InlineField_InlineField_css_cjs = require("./InlineField.css.cjs");
const lib_components_icons_IconMinus_IconMinus_cjs = require("../../icons/IconMinus/IconMinus.cjs");
const lib_components_icons_IconTick_IconTick_cjs = require("../../icons/IconTick/IconTick.cjs");
const tones = ["neutral", "critical"];
const Indicator = ({
  type,
  checked,
  hover = false,
  disabled = false
}) => {
  const isCheckbox = type === "checkbox";
  const iconTone = (() => {
    if (disabled) {
      return "secondary";
    }
    if (hover) {
      return "formAccent";
    }
  })();
  return isCheckbox ? /* @__PURE__ */ jsxRuntime.jsxs(
    lib_components_Box_Box_cjs.Box,
    {
      height: "full",
      transition: "fast",
      position: "relative",
      className: lib_components_private_InlineField_InlineField_css_cjs.checkboxIndicator,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          lib_components_Box_Box_cjs.Box,
          {
            position: "absolute",
            inset: 0,
            transition: "fast",
            opacity: checked !== "mixed" ? 0 : void 0,
            children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconMinus_IconMinus_cjs.IconMinus, { size: "fill", tone: iconTone })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          lib_components_Box_Box_cjs.Box,
          {
            position: "absolute",
            inset: 0,
            transition: "fast",
            opacity: checked !== true ? 0 : void 0,
            children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconTick_IconTick_cjs.IconTick, { size: "fill", tone: iconTone })
          }
        )
      ]
    }
  ) : /* @__PURE__ */ jsxRuntime.jsx(
    lib_components_Box_Box_cjs.Box,
    {
      background: !disabled ? "formAccent" : void 0,
      transition: "fast",
      width: "full",
      height: "full",
      borderRadius: "full",
      className: [
        lib_components_private_InlineField_InlineField_css_cjs.radioIndicator,
        disabled ? lib_components_private_InlineField_InlineField_css_cjs.disabledRadioIndicator : void 0
      ]
    }
  );
};
const StyledInput = react.forwardRef(
  ({
    id,
    name,
    value,
    checked,
    data,
    onChange,
    type,
    tone = "neutral",
    disabled = false,
    required,
    tabIndex,
    size = "standard",
    "aria-describedby": ariaDescribedBy,
    "aria-labelledby": ariaLabelledBy,
    "aria-label": ariaLabel,
    ...restProps
  }, forwardedRef) => {
    const defaultRef = react.useRef(null);
    const ref = forwardedRef || defaultRef;
    if (tones.indexOf(tone) === -1) {
      throw new Error(`Invalid tone: ${tone}`);
    }
    if (process.env.NODE_ENV !== "production") {
      lib_components_private_validateTabIndex_cjs.validateTabIndex(tabIndex);
    }
    const isCheckbox = type === "checkbox";
    const fieldBorderRadius = isCheckbox ? "standard" : "full";
    const accentBackground = disabled ? "neutralLight" : "formAccent";
    const isMixed = isCheckbox && checked === "mixed";
    const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
    const defaultBorder = checked ? "formAccent" : "default";
    const indeterminateRef = react.useRef(isMixed);
    const lastChecked = react.useRef(null);
    indeterminateRef.current = isMixed;
    if (isCheckbox && checked !== lastChecked.current && ref && typeof ref === "object" && ref.current) {
      ref.current.indeterminate = indeterminateRef.current;
    }
    react.useEffect(() => {
      if (isCheckbox && ref && typeof ref === "object" && ref.current) {
        ref.current.indeterminate = indeterminateRef.current;
      }
    }, [ref, isCheckbox]);
    react.useEffect(() => {
      if (isCheckbox) {
        lastChecked.current = checked;
      }
    }, [isCheckbox, checked]);
    const { lightMode } = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        lib_components_Box_Box_cjs.Box,
        {
          component: "input",
          type,
          id,
          name,
          value,
          onChange: (e) => {
            if (isMixed) {
              e.currentTarget.indeterminate = isMixed;
            }
            if (typeof onChange === "function") {
              onChange(e);
            }
          },
          checked: checked === "mixed" ? false : checked,
          position: "absolute",
          zIndex: 1,
          className: [
            lib_components_private_InlineField_InlineField_css_cjs.realField,
            lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size],
            isMixed ? lib_components_private_InlineField_InlineField_css_cjs.isMixed : void 0
          ],
          cursor: !disabled ? "pointer" : void 0,
          opacity: 0,
          "aria-describedby": ariaDescribedBy,
          "aria-labelledby": ariaLabelledBy,
          "aria-label": ariaLabel,
          "aria-checked": isMixed ? "mixed" : checked,
          "aria-required": required,
          disabled,
          ref,
          tabIndex,
          ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps })
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsxs(
        lib_components_Box_Box_cjs.Box,
        {
          flexShrink: 0,
          position: "relative",
          className: [lib_components_private_InlineField_InlineField_css_cjs.fakeField, lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size]],
          background: fieldBackground,
          borderRadius: fieldBorderRadius,
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
              {
                background: isCheckbox ? accentBackground : void 0,
                borderRadius: fieldBorderRadius,
                className: lib_components_private_InlineField_InlineField_css_cjs.selected,
                children: /* @__PURE__ */ jsxRuntime.jsx(Indicator, { type, disabled, checked })
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
              {
                variant: disabled ? "disabled" : defaultBorder,
                borderRadius: fieldBorderRadius,
                visible: type === "radio" || !checked || disabled,
                className: {
                  [lib_components_private_InlineField_InlineField_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
                }
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
              {
                variant: "critical",
                borderRadius: fieldBorderRadius,
                visible: tone === "critical" && !disabled
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
              {
                variant: "formAccent",
                borderRadius: fieldBorderRadius,
                className: lib_components_private_InlineField_InlineField_css_cjs.hoverOverlay,
                children: /* @__PURE__ */ jsxRuntime.jsx(Indicator, { type, hover: true, checked: true })
              }
            )
          ]
        }
      )
    ] });
  }
);
exports.StyledInput = StyledInput;