@commercetools-uikit/checkbox-input 16.1.0 → 16.2.0

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

@@ -13,12 +13,13 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 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 react$1 = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var utils = require('@commercetools-uikit/utils');
-var react$1 = require('react');
+var react = require('react');
 var inputUtils = require('@commercetools-uikit/input-utils');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -34,6 +35,7 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 
+const _excluded$1 = ["titleId", "title"];
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$3(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const iconSizes$1 = {
@@ -106,39 +108,57 @@ const getColor$1 = color => {
   }
   return iconColor;
 };
-const getIconStyles$1 = props => /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
-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",
-  role: "img"
-}, 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.414Z",
-    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 0Z",
-    clipRule: "evenodd"
-  })]
-}));
+const getIconStyles$1 = props => /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$1(props.color), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
+const SvgChecked = _ref => {
+  let titleId = _ref.titleId,
+    title = _ref.title,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return 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",
+    role: "img",
+    "aria-labelledby": titleId
+  }, props), {}, {
+    children: [title ? jsxRuntime.jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, 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.414Z",
+      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 0Z",
+      clipRule: "evenodd"
+    })]
+  }));
+};
+SvgChecked.propTypes = {};
 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(getIconStyles$1(props))
-    }));
-  }
-});
+const titleSequentialId$1 = utils.createSequentialId('checked-icon-title-');
+const CheckedIcon = props => {
+  const svgTitleId = react.useMemo(() => titleSequentialId$1(), []);
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: _ref2 => {
+      let createClass = _ref2.css;
+      return jsxRuntime.jsx(SvgChecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
+        titleId: svgTitleId,
+        title: "Checked icon",
+        className: createClass(getIconStyles$1(props))
+      }));
+    }
+  });
+};
+CheckedIcon.propTypes = {};
 CheckedIcon.displayName = 'CheckedIcon';
 var CheckedIcon$1 = CheckedIcon;
 
+const _excluded = ["titleId", "title"];
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const iconSizes = {
@@ -211,41 +231,58 @@ const getColor = color => {
   }
   return iconColor;
 };
-const getIconStyles = props => /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
-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",
-  role: "img"
-}, props), {}, {
-  children: jsxRuntime.jsx("path", {
-    stroke: "#000",
-    strokeLinecap: "round",
-    strokeWidth: 2,
-    d: "M11 1H1"
-  })
-}));
+const getIconStyles = props => /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
+const SvgIndeterminate = _ref => {
+  let titleId = _ref.titleId,
+    title = _ref.title,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsxRuntime.jsxs("svg", _objectSpread$2(_objectSpread$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 2,
+    fill: "none",
+    viewBox: "0 0 12 2",
+    role: "img",
+    "aria-labelledby": titleId
+  }, props), {}, {
+    children: [title ? jsxRuntime.jsx("title", {
+      id: titleId,
+      children: title
+    }) : null, jsxRuntime.jsx("path", {
+      stroke: "#000",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M11 1H1"
+    })]
+  }));
+};
+SvgIndeterminate.propTypes = {};
 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(getIconStyles(props))
-    }));
-  }
-});
+const titleSequentialId = utils.createSequentialId('indeterminate-icon-title-');
+const IndeterminateIcon = props => {
+  const svgTitleId = react.useMemo(() => titleSequentialId(), []);
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: _ref2 => {
+      let createClass = _ref2.css;
+      return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$2(_objectSpread$2({}, props), {}, {
+        titleId: svgTitleId,
+        title: "Indeterminate icon",
+        className: createClass(getIconStyles(props))
+      }));
+    }
+  });
+};
+IndeterminateIcon.propTypes = {};
 IndeterminateIcon.displayName = 'IndeterminateIcon';
 var IndeterminateIcon$1 = IndeterminateIcon;
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const Checkbox = props => {
-  const ref = react$1.useRef({
+  const ref = react.useRef({
     indeterminate: false
   });
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (props.isIndeterminate) {
       ref.current.indeterminate = true;
     }
@@ -324,28 +361,24 @@ const LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
 } )("margin-left:calc(\n    ", designSystem.designTokens.spacing20, " - ", designSystem.designTokens.borderWidthForCheckboxInputIcon, "\n  );outline:none;border-radius:", designSystem.designTokens.borderRadiusForTag, ";font-size:", designSystem.designTokens.fontSizeForTextAsBody, ";line-height:", designSystem.designTokens.lineHeightForTextAsBody, ";font-weight:", designSystem.designTokens.fontWeightForTextAsBody, ";color:", props => getTextColor(props), ";" + ("" ));
 const CheckboxIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e6nn4mw1"
-} )("width:", props => props.width, ";height:", props => props.height, ";display:flex;align-items:center;justify-content:center;border-radius:", designSystem.designTokens.borderRadius6, ";", props => props.isHovered ? /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForCheckboxInputIconWhenHovered, ";" + ("" ), "" ) : '', ";" + ("" ));
+} )("width:", props => props.width, ";height:", props => props.height, ";display:flex;align-items:center;justify-content:center;border-radius:", designSystem.designTokens.borderRadius6, ";", props => props.isHovered ? /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.backgroundColorForCheckboxInputIconWhenHovered, ";" + ("" ), "" ) : '', ";" + ("" ));
 const CheckboxIcon = props => {
   var _context;
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme,
-    themedValue = _useTheme.themedValue;
   const isDisabledOrReadOnlyState = props.isDisabled || props.isReadOnly;
-  const isDefaultState = !(props.hasError || isDisabledOrReadOnlyState);
   const canForcedHoverEffect = Boolean(props.isHovered && !isDisabledOrReadOnlyState);
   return jsxRuntime.jsx(CheckboxIconWrapper, {
-    width: themedValue('auto', '26px'),
-    height: themedValue('auto', '26px'),
+    width: "26px",
+    height: "26px",
     isHovered: canForcedHoverEffect,
     children: jsxRuntime.jsx("div", {
-      css: _filterInstanceProperty__default["default"](_context = [/*#__PURE__*/react.css("border-width:", designSystem.designTokens.borderWidthForCheckboxInputIcon, ";border-radius:", designSystem.designTokens.borderRadius2, ";border-color:", getBorderColor(props), ";border-style:solid;background-color:", getBackgroundColor(props), ";padding:1px;width:", themedValue('16px', '18px'), ";height:", themedValue('16px', '18px'), ";display:flex;align-items:center;justify-content:center;svg>path[stroke]{stroke:", themedValue(designSystem.designTokens.colorPrimary, designSystem.designTokens.colorSurface), ";}" + ("" ), "" ), !isNewTheme && /*#__PURE__*/react.css("svg>path[fill]{fill:", getTextColor(props), ";}svg>path[stroke]{stroke:", getTextColor(props), ";}" + ("" ), "" ), !isNewTheme && isDefaultState && /*#__PURE__*/react.css("svg>path[fill]{fill:", designSystem.designTokens.colorPrimary, ";}svg>path[stroke]{stroke:", designSystem.designTokens.colorPrimary, ";}&:hover{border-color:", isDisabledOrReadOnlyState ? 'unset' : designSystem.designTokens.colorPrimary, ";}" + ("" ), "" ), !isNewTheme && canForcedHoverEffect && /*#__PURE__*/react.css("border-color:", designSystem.designTokens.colorPrimary, ";" + ("" ), "" )]).call(_context, Boolean),
+      css: _filterInstanceProperty__default["default"](_context = [/*#__PURE__*/react$1.css("border-width:", designSystem.designTokens.borderWidthForCheckboxInputIcon, ";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: themedValue('primary', 'surface'),
+          color: "surface",
           size: "scale"
         });
         if (props.isChecked) return jsxRuntime.jsx(CheckedIcon$1, {
-          color: themedValue('primary', 'surface'),
+          color: "surface",
           size: "scale"
         });
         return null;
@@ -401,7 +434,7 @@ CheckboxInput.defaultProps = defaultProps;
 var CheckboxInput$1 = CheckboxInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.1.0";
+var version = "16.2.0";
 
 exports["default"] = CheckboxInput$1;
 exports.version = version;