@s-ui/react-atom-checkbox/lib/index.js

AtomCheckbox is a component that displays an input checkbox w/ its expected behavior

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["defaultChecked", "checked", "checkedIcon", "uncheckedIcon", "disabled", "readOnly", "id", "defaultIndeterminate", "indeterminate", "indeterminateIcon", "icon", "iconSize", "name", "onChange", "status", "size", "value", "className"];
import { forwardRef, useRef } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import useControlledState from '@s-ui/react-hooks/lib/useControlledState';
import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs';
import CheckboxIcon from './CheckboxIcon.js';
import { BASE_CLASS, CHECKBOX_SIZES, CHECKBOX_STATUS, getIcon, getIsNative, getReadOnly, isFunction, pressedValue, updateStatus } from './config.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var AtomCheckbox = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
  var _ref$defaultChecked = _ref.defaultChecked,
    defaultCheckedProp = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked,
    checkedProp = _ref.checked,
    CheckedIcon = _ref.checkedIcon,
    UncheckedIcon = _ref.uncheckedIcon,
    disabled = _ref.disabled,
    readOnlyProp = _ref.readOnly,
    id = _ref.id,
    _ref$defaultIndetermi = _ref.defaultIndeterminate,
    defaultIndeterminateProp = _ref$defaultIndetermi === void 0 ? false : _ref$defaultIndetermi,
    indeterminateProp = _ref.indeterminate,
    IndeterminateIcon = _ref.indeterminateIcon,
    IconProp = _ref.icon,
    iconSize = _ref.iconSize,
    nameProp = _ref.name,
    onChangeFromProps = _ref.onChange,
    status = _ref.status,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? CHECKBOX_SIZES.MEDIUM : _ref$size,
    value = _ref.value,
    className = _ref.className,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var inputRef = useRef();
  var _useControlledState = useControlledState(checkedProp, defaultCheckedProp),
    checked = _useControlledState[0],
    setChecked = _useControlledState[1],
    isCheckedControlled = _useControlledState[2];
  var name = nameProp || id;
  var _useControlledState2 = useControlledState(indeterminateProp, defaultIndeterminateProp),
    indeterminate = _useControlledState2[0],
    setIndeterminate = _useControlledState2[1],
    isIndeterminateControlled = _useControlledState2[2];
  var ref = useMergeRefs(function (node) {
    return updateStatus(node, {
      isChecked: checked,
      isIndeterminate: indeterminate
    });
  }, inputRef, forwardedRef);
  var isControlled = isCheckedControlled || isIndeterminateControlled;
  var isNative = getIsNative({
    checked: checked,
    indeterminate: indeterminate
  }, {
    CheckedIcon: CheckedIcon,
    UncheckedIcon: UncheckedIcon,
    IndeterminateIcon: IndeterminateIcon,
    Icon: IconProp
  });
  var readOnlyAttributes = getReadOnly({
    readOnly: readOnlyProp,
    disabled: disabled,
    isNative: isNative
  });
  var Icon = getIcon({
    isNative: isNative,
    checked: checked,
    indeterminate: indeterminate
  }, {
    CheckedIcon: CheckedIcon,
    UncheckedIcon: UncheckedIcon,
    IndeterminateIcon: IndeterminateIcon,
    Icon: IconProp
  });
  var handleChange = function handleChange(ref) {
    return function (event) {
      if (!disabled) {
        var _event$target = event.target,
          _name = _event$target.name,
          _value = _event$target.value;
        var newChecked = isControlled ? indeterminate || !checked : event.target.checked;
        var newIndeterminate = false;
        if (!isControlled) {
          setChecked(newChecked);
          setIndeterminate(newIndeterminate);
        }
        if (readOnlyProp) {
          newChecked = checked;
          newIndeterminate = indeterminate;
          setChecked(checked);
          setIndeterminate(indeterminate);
          event.target.indeterminate = indeterminate;
        }
        isFunction(onChangeFromProps) && onChangeFromProps(event, {
          name: _name,
          value: _value,
          checked: newChecked,
          indeterminate: newIndeterminate
        });
        ref.current.focus();
      }
    };
  };
  var handleClick = function handleClick(ref) {
    return function (event) {
      event.preventDefault();
      event.stopPropagation();
      if (!disabled) {
        var newChecked = indeterminate || !checked;
        var newIndeterminate = false;
        if (!isControlled) {
          setChecked(newChecked);
          setIndeterminate(newIndeterminate);
        }
        if (readOnlyProp) {
          newChecked = checked;
          newIndeterminate = indeterminate;
          setChecked(checked);
          setIndeterminate(indeterminate);
          event.target.indeterminate = indeterminate;
        }
        isFunction(onChangeFromProps) && onChangeFromProps(event, {
          name: name,
          value: value,
          checked: newChecked,
          indeterminate: newIndeterminate
        });
        ref.current.focus();
      }
    };
  };
  return /*#__PURE__*/_jsxs("span", {
    className: cx(BASE_CLASS, BASE_CLASS + "--native-" + (isNative ? 'enabled' : 'disabled'), BASE_CLASS + "--size-" + size, className),
    children: [/*#__PURE__*/_jsx("input", _extends({
      ref: ref,
      type: "checkbox",
      id: id,
      name: name || id,
      value: value,
      disabled: disabled
    }, readOnlyAttributes, {
      checked: checked,
      "aria-checked": pressedValue({
        checked: checked,
        indeterminate: indeterminate
      }),
      "data-indeterminate": indeterminate ? 'true' : undefined,
      onChange: handleChange(inputRef)
    }, _extends({}, !isNative && {
      'aria-hidden': 'true'
    }, Object.values(CHECKBOX_STATUS).includes(status) && {
      'data-status': status
    }, props))), /*#__PURE__*/_jsx(CheckboxIcon, _extends({
      disabled: disabled,
      size: iconSize || size,
      status: status,
      checked: checked,
      "data-indeterminate": indeterminate,
      onClick: handleClick,
      isNative: isNative,
      icon: Icon
    }, props))]
  });
});
AtomCheckbox.displayName = 'AtomCheckbox';
export default AtomCheckbox;
export { CHECKBOX_STATUS as atomCheckboxStatus };
export { CHECKBOX_SIZES as atomCheckboxSizes };