@commercetools-uikit/checkbox-input/dist/commercetools-uikit-checkbox-input.cjs.prod.js

An input component that works as checkbox input.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
var _styled = require('@emotion/styled/base');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var react = require('@emotion/react');
var designSystem = require('@commercetools-uikit/design-system');
var utils = require('@commercetools-uikit/utils');
var react$1 = require('react');
var inputUtils = require('@commercetools-uikit/input-utils');
var jsxRuntime = require('@emotion/react/jsx-runtime');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var _styled__default = /*#__PURE__*/_interopDefault(_styled);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);

function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const SvgChecked = props => jsxRuntime.jsxs("svg", _objectSpread$3(_objectSpread$3({
  xmlns: "http://www.w3.org/2000/svg",
  width: 12,
  height: 9,
  fill: "none",
  viewBox: "0 0 12 9",
  "aria-hidden": "true"
}, props), {}, {
  children: [jsxRuntime.jsx("path", {
    fill: "#000",
    fillRule: "evenodd",
    d: "M.293 4.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414",
    clipRule: "evenodd"
  }), jsxRuntime.jsx("path", {
    fill: "#000",
    fillRule: "evenodd",
    d: "M11.707.293a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414l7-7a1 1 0 0 1 1.414 0",
    clipRule: "evenodd"
  })]
}));
SvgChecked.displayName = 'SvgChecked';
const CheckedIcon = props => jsxRuntime.jsx(react.ClassNames, {
  children: _ref => {
    let createClass = _ref.css;
    return jsxRuntime.jsx(SvgChecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
      className: createClass(designSystem.getIconStyles(props))
    }));
  }
});
CheckedIcon.displayName = 'CheckedIcon';
var CheckedIcon$1 = CheckedIcon;

function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const SvgIndeterminate = props => jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({
  xmlns: "http://www.w3.org/2000/svg",
  width: 12,
  height: 2,
  fill: "none",
  viewBox: "0 0 12 2",
  "aria-hidden": "true"
}, props), {}, {
  children: jsxRuntime.jsx("path", {
    stroke: "#000",
    strokeLinecap: "round",
    strokeWidth: 2,
    d: "M11 1H1"
  })
}));
SvgIndeterminate.displayName = 'SvgIndeterminate';
const IndeterminateIcon = props => jsxRuntime.jsx(react.ClassNames, {
  children: _ref => {
    let createClass = _ref.css;
    return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$2(_objectSpread$2({}, props), {}, {
      className: createClass(designSystem.getIconStyles(props))
    }));
  }
});
IndeterminateIcon.displayName = 'IndeterminateIcon';
var IndeterminateIcon$1 = IndeterminateIcon;

function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const Checkbox = props => {
  const ref = react$1.useRef({
    indeterminate: false
  });
  react$1.useEffect(() => {
    if (props.isIndeterminate) {
      ref.current.indeterminate = true;
    }
  }, [props.isIndeterminate]);
  return jsxRuntime.jsx("input", _objectSpread$1(_objectSpread$1(_objectSpread$1({
    type: "checkbox"
    // @ts-ignore
    ,
    ref: ref
  }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props)), {}, {
    /* ARIA */
    "aria-readonly": props.isReadOnly,
    "aria-checked": props.isChecked,
    css: inputUtils.accessibleHiddenInputStyles,
    id: props.id,
    name: props.name,
    value: props.value,
    disabled: props.isDisabled || props.isReadOnly,
    readOnly: props.isReadOnly,
    checked: props.isChecked && !props.isIndeterminate,
    onChange: !props.isReadOnly ? props.onChange : undefined
  }));
};
Checkbox.displayName = 'Checkbox';
var Checkbox$1 = Checkbox;

const _excluded = ["isChecked", "isDisabled", "hasError"];
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const sequentialId = utils.createSequentialId('checkbox-input-');
const getBorderColor = props => {
  if (props.hasError) {
    return designSystem.designTokens.colorError;
  }
  if (props.isDisabled) {
    return designSystem.designTokens.colorNeutral;
  }
  if (props.isReadOnly) {
    return designSystem.designTokens.colorNeutral60;
  }
  if (props.isChecked || props.isIndeterminate) {
    return designSystem.designTokens.colorPrimary;
  }
  return designSystem.designTokens.colorNeutral60;
};
const getBackgroundColor = props => {
  if (props.isChecked || props.isIndeterminate) {
    if (props.hasError) {
      return designSystem.designTokens.colorError;
    }
    if (props.isDisabled) {
      return designSystem.designTokens.colorNeutral;
    }
    if (props.isReadOnly) {
      return designSystem.designTokens.colorNeutral60;
    }
    return designSystem.designTokens.colorPrimary;
  }
  return designSystem.designTokens.colorSurface;
};
const getTextColor = props => {
  if (props.hasError) {
    return designSystem.designTokens.colorError;
  }
  if (props.isDisabled) {
    return designSystem.designTokens.colorNeutral60;
  }
  if (props.isReadOnly) {
    return designSystem.designTokens.colorNeutral40;
  }
  return designSystem.designTokens.colorSolid;
};
const LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
  target: "e6nn4mw2"
} )("margin-left:calc(", designSystem.designTokens.spacing20, " - ", designSystem.designTokens.borderWidth2, ");outline:none;border-radius:", designSystem.designTokens.borderRadius2, ";font-size:", designSystem.designTokens.fontSize30, ";line-height:", designSystem.designTokens.lineHeight40, ";font-weight:", designSystem.designTokens.fontWeight400, ";color:", props => getTextColor(props), ";" + ("" ));
const CheckboxIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
  target: "e6nn4mw1"
} )("width:", props => props.width, ";height:", props => props.height, ";display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:", designSystem.designTokens.borderRadius6, ";", props => props.isHovered ? /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary95, ";" + ("" ), "" ) : '', ";" + ("" ));
const CheckboxIcon = props => {
  var _context;
  const isDisabledOrReadOnlyState = props.isDisabled || props.isReadOnly;
  const canForcedHoverEffect = Boolean(props.isHovered && !isDisabledOrReadOnlyState);
  return jsxRuntime.jsx(CheckboxIconWrapper, {
    width: "26px",
    height: "26px",
    isHovered: canForcedHoverEffect,
    children: jsxRuntime.jsx("div", {
      css: _filterInstanceProperty__default["default"](_context = [/*#__PURE__*/react.css("border-width:", designSystem.designTokens.borderWidth2, ";border-radius:", designSystem.designTokens.borderRadius2, ";border-color:", getBorderColor(props), ";border-style:solid;background-color:", getBackgroundColor(props), ";padding:1px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;svg>path[stroke]{stroke:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" )]).call(_context, Boolean),
      children: (() => {
        if (props.isIndeterminate) return jsxRuntime.jsx(IndeterminateIcon$1, {
          color: "surface",
          size: "scale"
        });
        if (props.isChecked) return jsxRuntime.jsx(CheckedIcon$1, {
          color: "surface",
          size: "scale"
        });
        return null;
      })()
    })
  });
};
const Label = /*#__PURE__*/_styled__default["default"]("label", {
  target: "e6nn4mw0"
} )("display:flex;align-items:center;cursor:", props => {
  if (props.isDisabled) return 'not-allowed';
  if (props.isReadOnly) return 'default';
  return 'pointer';
}, ";position:relative;&:focus-within:has(:focus-visible) ", LabelTextWrapper, "{box-shadow:0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}&:hover ", CheckboxIconWrapper, "{background-color:", props => props.isDisabled || props.isReadOnly ? 'unset' : designSystem.designTokens.colorPrimary95, ";}" + ("" ));
const CheckboxInput = _ref => {
  let _ref$isChecked = _ref.isChecked,
    isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
    _ref$isDisabled = _ref.isDisabled,
    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
    _ref$hasError = _ref.hasError,
    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
    props = _objectWithoutProperties(_ref, _excluded);
  // We generate an id in case no id is provided by the parent to attach the
  // label to the input component.
  const id = props.id || sequentialId();
  return jsxRuntime.jsxs(Label, {
    htmlFor: id,
    hasError: hasError,
    isDisabled: isDisabled,
    isReadOnly: props.isReadOnly,
    isChecked: isChecked,
    isHovered: props.isHovered,
    isIndeterminate: props.isIndeterminate,
    children: [jsxRuntime.jsx(Checkbox$1, _objectSpread(_objectSpread({}, props), {}, {
      id: id,
      isChecked: isChecked,
      isDisabled: isDisabled,
      hasError: hasError
    })), jsxRuntime.jsx(CheckboxIcon, {
      hasError: hasError,
      isDisabled: isDisabled,
      isReadOnly: props.isReadOnly,
      isChecked: isChecked,
      isHovered: props.isHovered,
      isIndeterminate: props.isIndeterminate
    }), props.children && jsxRuntime.jsx(LabelTextWrapper, {
      hasError: hasError,
      isDisabled: isDisabled,
      isReadOnly: props.isReadOnly,
      isChecked: isChecked,
      isHovered: props.isHovered,
      isIndeterminate: props.isIndeterminate
      // To allow focusing the Label in readOnly mode, because the checkbox gets disabled and therefore unfocusable
      ,
      tabIndex: props.isReadOnly ? 0 : -1,
      children: props.children
    })]
  });
};
CheckboxInput.displayName = 'CheckboxInput';
var CheckboxInput$1 = CheckboxInput;

// NOTE: This string will be replaced on build time with the package version.
var version = "20.6.7";

exports["default"] = CheckboxInput$1;
exports.version = version;