@semcore/icon 3.1.1 → 3.1.2

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.1.2] - 2022-10-26
+
+### Fixed
+
+- Lazy checks for necessity of `aria-label` in non production environment.
+
 ## [3.1.1] - 2022-10-24
 
 ### Changed

package/lib/cjs/Icon.js

@@ -33,6 +33,10 @@ var _propsForElement = _interopRequireDefault(require("@semcore/utils/lib/propsF
 
 var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
 
+var _ref = require("@semcore/utils/lib/ref");
+
+var _hasLabels = _interopRequireDefault(require("@semcore/utils/lib/hasLabels"));
+
 var _excluded = ["keyboardFocused"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -48,16 +52,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SIcon_1v61m_gg_ {\n  display: inline-block;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  shape-rendering: geometricPrecision;\n  box-sizing: content-box;\n  fill: currentColor;\n  flex-shrink: 0;\n  outline: none;\n  color: var(--color_1v61m);\n}\n\n.___SIcon_1v61m_gg_.__keyboardFocused_1v61m_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n}\n\n.___SIcon_1v61m_gg_.__interactive_1v61m_gg_ {\n  cursor: pointer\n}\n\n.___SIcon_1v61m_gg_.__interactive_1v61m_gg_:hover {\n    color: var(--color-interactive_1v61m);\n  }\n"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SIcon_xbeyq_gg_ {\n  display: inline-block;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  shape-rendering: geometricPrecision;\n  box-sizing: content-box;\n  fill: currentColor;\n  flex-shrink: 0;\n  outline: none;\n  color: var(--color_xbeyq);\n}\n\n.___SIcon_xbeyq_gg_.__keyboardFocused_xbeyq_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n}\n\n.___SIcon_xbeyq_gg_.__interactive_xbeyq_gg_ {\n  cursor: pointer\n}\n\n.___SIcon_xbeyq_gg_.__interactive_xbeyq_gg_:hover {\n    color: var(--color-interactive_xbeyq);\n  }\n"
 /*__inner_css_end__*/
-, "1v61m_gg_")
+, "xbeyq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_1v61m_gg_",
-  "--color": "--color_1v61m",
-  "_keyboardFocused": "__keyboardFocused_1v61m_gg_",
-  "_interactive": "__interactive_1v61m_gg_",
-  "--color-interactive": "--color-interactive_1v61m"
+  "__SIcon": "___SIcon_xbeyq_gg_",
+  "--color": "--color_xbeyq",
+  "_keyboardFocused": "__keyboardFocused_xbeyq_gg_",
+  "_interactive": "__interactive_xbeyq_gg_",
+  "--color-interactive": "--color-interactive_xbeyq"
 });
 
 function Icon(props, ref) {
@@ -75,9 +79,7 @@ function Icon(props, ref) {
       other = _useBox2[1];
 
   var interactive = props.interactive,
-      colorProps = props.color,
-      ariaLabel = props['aria-label'],
-      ariaLabelledby = props['aria-labelledby'];
+      colorProps = props.color;
   var color = (0, _color["default"])(colorProps);
 
   var _keyboardFocusEnhance = (0, _keyboardFocusEnhance2["default"])()(_objectSpread({
@@ -107,14 +109,24 @@ function Icon(props, ref) {
     }
   }
 
-  _logger["default"].warn(interactive && !ariaLabel && !ariaLabelledby, "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
+  var labelCheckRef = _react["default"].useRef();
+
+  _react["default"].useEffect(function () {
+    if (!interactive) return;
+
+    if (process.env.NODE_ENV !== 'production') {
+      _logger["default"].warn(!(0, _hasLabels["default"])(labelCheckRef.current), "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
+    }
+  }, [interactive]);
 
+  var forkedRef = (0, _ref.useForkRef)(ref, labelCheckRef);
   return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({}, (0, _propsForElement["default"])(propsWithKeyboardEnhance), {
     style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
     className: (0, _classnames["default"])(className, propsWithKeyboardEnhance.className, props.className) || undefined,
     onKeyDown: onKeyDown,
     role: interactive ? 'button' : undefined,
-    "aria-hidden": interactive ? undefined : 'true'
+    "aria-hidden": interactive ? undefined : 'true',
+    ref: forkedRef
   }));
 }
 

package/lib/cjs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","ariaLabel","ariaLabelledby","resolveColor","keyboardFocusEnhance","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","sstyled","styles","cn","shade","className","style","onKeyDown","event","code","onClick","logger","warn","displayName","propsForElement","Object","assign","undefined","createBaseComponent"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      tag: 'svg',\n      'data-ui-name': 'Icon',\n      width: 16,\n      height: 16,\n      viewBox: '0 0 16 16',\n      'aria-hidden': true,\n      focusable: props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const {\n    interactive,\n    color: colorProps,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n  } = props;\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'color-interactive': shade(color, -0.12),\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (interactive && event.code === 'Enter') {\n      props.onClick && props.onClick(event);\n    }\n  }\n\n  logger.warn(\n    interactive && !ariaLabel && !ariaLabelledby,\n    \"'aria-label' or 'aria-labelledby' are required props for interactive icons\",\n    props['data-ui-name'] || Icon.displayName,\n  );\n\n  return (\n    <SIcon\n      {...propsForElement(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\n      onKeyDown={onKeyDown}\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;;AAFA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EACxB,cAAuB,IAAAC,eAAA;IAEnBC,GAAG,EAAE,KAFc;IAGnB,gBAAgB,MAHG;IAInBC,KAAK,EAAE,EAJY;IAKnBC,MAAM,EAAE,EALW;IAMnBC,OAAO,EAAE,WANU;IAOnB,eAAe,IAPI;IAQnBC,SAAS,EAAEP,KAAK,CAACQ;EARE,GAShBR,KATgB,GAWrBC,GAXqB,CAAvB;EAAA;EAAA,IAAOQ,KAAP;EAAA,IAAcC,KAAd;;EAcA,IACEF,WADF,GAKIR,KALJ,CACEQ,WADF;EAAA,IAESG,UAFT,GAKIX,KALJ,CAEEY,KAFF;EAAA,IAGgBC,SAHhB,GAKIb,KALJ,CAGE,YAHF;EAAA,IAIqBc,cAJrB,GAKId,KALJ,CAIE,iBAJF;EAMA,IAAMY,KAAK,GAAG,IAAAG,iBAAA,EAAaJ,UAAb,CAAd;;EACA,4BAAyD,IAAAK,iCAAA;IACvDC,QAAQ,EAAE,CAACT;EAD4C,GAEpDE,KAFoD,EAAzD;EAAA,IAAQQ,eAAR,yBAAQA,eAAR;EAAA,IAA4BC,wBAA5B;;EAIA,IAAMC,OAAO,GAAG,IAAAC,aAAA,EAAQC,MAAR,CAAhB;;EACA,kBAA6BF,OAAO,CAACG,EAAR,CAAW,OAAX,EAAoB;IAC/C,qBAAqB,IAAAC,YAAA,EAAMZ,KAAN,EAAa,CAAC,IAAd,CAD0B;IAE/C,aAAaA,KAFkC;IAG/CJ,WAAW,EAAEA,WAHkC;IAI/CU,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQO,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;IACxB,IAAI5B,KAAK,CAAC2B,SAAV,EAAqB;MACnB,OAAO3B,KAAK,CAAC2B,SAAN,CAAgBC,KAAhB,CAAP;IACD;;IAED,IAAIpB,WAAW,IAAIoB,KAAK,CAACC,IAAN,KAAe,OAAlC,EAA2C;MACzC7B,KAAK,CAAC8B,OAAN,IAAiB9B,KAAK,CAAC8B,OAAN,CAAcF,KAAd,CAAjB;IACD;EACF;;EAEDG,kBAAA,CAAOC,IAAP,CACExB,WAAW,IAAI,CAACK,SAAhB,IAA6B,CAACC,cADhC,EAEE,4EAFF,EAGEd,KAAK,CAAC,cAAD,CAAL,IAAyBD,IAAI,CAACkC,WAHhC;;EAMA,oBACE,gCAAC,KAAD,gCACM,IAAAC,2BAAA,EAAgBf,wBAAhB,CADN;IAEE,KAAK,EAAEgB,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBV,KAAlB,EAAyBP,wBAAwB,CAACO,KAAlD,EAAyD1B,KAAK,CAAC0B,KAA/D,CAFT;IAGE,SAAS,EAAE,IAAAH,sBAAA,EAAGE,SAAH,EAAcN,wBAAwB,CAACM,SAAvC,EAAkDzB,KAAK,CAACyB,SAAxD,KAAsEY,SAHnF;IAIE,SAAS,EAAEV,SAJb;IAKE,IAAI,EAAEnB,WAAW,GAAG,QAAH,GAAc6B,SALjC;IAME,eAAa7B,WAAW,GAAG6B,SAAH,GAAe;EANzC,GADF;AAUD;;AAEDtC,IAAI,CAACkC,WAAL,GAAmB,MAAnB;;eAEe,IAAAK,yBAAA,EAAoBvC,IAApB,C"}
+{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","resolveColor","keyboardFocusEnhance","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","sstyled","styles","cn","shade","className","style","onKeyDown","event","code","onClick","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","hasLabels","current","displayName","forkedRef","useForkRef","propsForElement","Object","assign","undefined","createBaseComponent"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      tag: 'svg',\n      'data-ui-name': 'Icon',\n      width: 16,\n      height: 16,\n      viewBox: '0 0 16 16',\n      'aria-hidden': true,\n      focusable: props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'color-interactive': shade(color, -0.12),\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (interactive && event.code === 'Enter') {\n      props.onClick && props.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      {...propsForElement(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\n      onKeyDown={onKeyDown}\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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"}

package/lib/es6/Icon.js

@@ -17,22 +17,24 @@ import resolveColor, { shade } from '@semcore/utils/lib/color';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import propsForElement from '@semcore/utils/lib/propsForElement';
 import logger from '@semcore/utils/lib/logger';
+import { useForkRef } from '@semcore/utils/lib/ref';
+import hasLabels from '@semcore/utils/lib/hasLabels';
 
 /*__reshadow-styles__:"./style/icon.shadow.css"*/
 var styles = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SIcon_1v61m_gg_ {\n  display: inline-block;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  shape-rendering: geometricPrecision;\n  box-sizing: content-box;\n  fill: currentColor;\n  flex-shrink: 0;\n  outline: none;\n  color: var(--color_1v61m);\n}\n\n.___SIcon_1v61m_gg_.__keyboardFocused_1v61m_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n}\n\n.___SIcon_1v61m_gg_.__interactive_1v61m_gg_ {\n  cursor: pointer\n}\n\n.___SIcon_1v61m_gg_.__interactive_1v61m_gg_:hover {\n    color: var(--color-interactive_1v61m);\n  }\n"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SIcon_xbeyq_gg_ {\n  display: inline-block;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  shape-rendering: geometricPrecision;\n  box-sizing: content-box;\n  fill: currentColor;\n  flex-shrink: 0;\n  outline: none;\n  color: var(--color_xbeyq);\n}\n\n.___SIcon_xbeyq_gg_.__keyboardFocused_xbeyq_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n}\n\n.___SIcon_xbeyq_gg_.__interactive_xbeyq_gg_ {\n  cursor: pointer\n}\n\n.___SIcon_xbeyq_gg_.__interactive_xbeyq_gg_:hover {\n    color: var(--color-interactive_xbeyq);\n  }\n"
 /*__inner_css_end__*/
-, "1v61m_gg_")
+, "xbeyq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_1v61m_gg_",
-  "--color": "--color_1v61m",
-  "_keyboardFocused": "__keyboardFocused_1v61m_gg_",
-  "_interactive": "__interactive_1v61m_gg_",
-  "--color-interactive": "--color-interactive_1v61m"
+  "__SIcon": "___SIcon_xbeyq_gg_",
+  "--color": "--color_xbeyq",
+  "_keyboardFocused": "__keyboardFocused_xbeyq_gg_",
+  "_interactive": "__interactive_xbeyq_gg_",
+  "--color-interactive": "--color-interactive_xbeyq"
 });
 
 function Icon(props, ref) {
@@ -50,9 +52,7 @@ function Icon(props, ref) {
       other = _useBox2[1];
 
   var interactive = props.interactive,
-      colorProps = props.color,
-      ariaLabel = props['aria-label'],
-      ariaLabelledby = props['aria-labelledby'];
+      colorProps = props.color;
   var color = resolveColor(colorProps);
 
   var _keyboardFocusEnhance = keyboardFocusEnhance()(_objectSpread({
@@ -82,13 +82,22 @@ function Icon(props, ref) {
     }
   }
 
-  logger.warn(interactive && !ariaLabel && !ariaLabelledby, "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
+  var labelCheckRef = React.useRef();
+  React.useEffect(function () {
+    if (!interactive) return;
+
+    if (process.env.NODE_ENV !== 'production') {
+      logger.warn(!hasLabels(labelCheckRef.current), "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
+    }
+  }, [interactive]);
+  var forkedRef = useForkRef(ref, labelCheckRef);
   return /*#__PURE__*/React.createElement(SIcon, _extends({}, propsForElement(propsWithKeyboardEnhance), {
     style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
     className: cn(className, propsWithKeyboardEnhance.className, props.className) || undefined,
     onKeyDown: onKeyDown,
     role: interactive ? 'button' : undefined,
-    "aria-hidden": interactive ? undefined : 'true'
+    "aria-hidden": interactive ? undefined : 'true',
+    ref: forkedRef
   }));
 }
 

package/lib/es6/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","logger","Icon","props","ref","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","ariaLabel","ariaLabelledby","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","className","style","onKeyDown","event","code","onClick","warn","displayName","Object","assign","undefined"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      tag: 'svg',\n      'data-ui-name': 'Icon',\n      width: 16,\n      height: 16,\n      viewBox: '0 0 16 16',\n      'aria-hidden': true,\n      focusable: props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const {\n    interactive,\n    color: colorProps,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n  } = props;\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'color-interactive': shade(color, -0.12),\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (interactive && event.code === 'Enter') {\n      props.onClick && props.onClick(event);\n    }\n  }\n\n  logger.warn(\n    interactive && !ariaLabel && !ariaLabelledby,\n    \"'aria-label' or 'aria-labelledby' are required props for interactive icons\",\n    props['data-ui-name'] || Icon.displayName,\n  );\n\n  return (\n    <SIcon\n      {...propsForElement(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\n      onKeyDown={onKeyDown}\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,EAAP,MAAe,YAAf;AACA,SAASC,mBAAT,EAA8BC,OAA9B,QAA6C,eAA7C;AACA,SAASC,MAAT,QAAuB,mBAAvB;AACA,OAAOC,YAAP,IAAuBC,KAAvB,QAAoC,0BAApC;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;AACA,OAAOC,eAAP,MAA4B,oCAA5B;AACA,OAAOC,MAAP,MAAmB,2BAAnB;;;;;;;;;;;;;;;;;;;AAIA,SAASC,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EACxB,cAAuBR,MAAM;IAEzBS,GAAG,EAAE,KAFoB;IAGzB,gBAAgB,MAHS;IAIzBC,KAAK,EAAE,EAJkB;IAKzBC,MAAM,EAAE,EALiB;IAMzBC,OAAO,EAAE,WANgB;IAOzB,eAAe,IAPU;IAQzBC,SAAS,EAAEN,KAAK,CAACO;EARQ,GAStBP,KATsB,GAW3BC,GAX2B,CAA7B;EAAA;EAAA,IAAOO,KAAP;EAAA,IAAcC,KAAd;;EAcA,IACEF,WADF,GAKIP,KALJ,CACEO,WADF;EAAA,IAESG,UAFT,GAKIV,KALJ,CAEEW,KAFF;EAAA,IAGgBC,SAHhB,GAKIZ,KALJ,CAGE,YAHF;EAAA,IAIqBa,cAJrB,GAKIb,KALJ,CAIE,iBAJF;EAMA,IAAMW,KAAK,GAAGjB,YAAY,CAACgB,UAAD,CAA1B;;EACA,4BAAyDd,oBAAoB;IAC3EkB,QAAQ,EAAE,CAACP;EADgE,GAExEE,KAFwE,EAA7E;EAAA,IAAQM,eAAR,yBAAQA,eAAR;EAAA,IAA4BC,wBAA5B;;EAIA,IAAMC,OAAO,GAAGzB,OAAO,CAAC0B,MAAD,CAAvB;;EACA,kBAA6BD,OAAO,CAAC3B,EAAR,CAAW,OAAX,EAAoB;IAC/C,qBAAqBK,KAAK,CAACgB,KAAD,EAAQ,CAAC,IAAT,CADqB;IAE/C,aAAaA,KAFkC;IAG/CJ,WAAW,EAAEA,WAHkC;IAI/CQ,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQI,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;IACxB,IAAItB,KAAK,CAACqB,SAAV,EAAqB;MACnB,OAAOrB,KAAK,CAACqB,SAAN,CAAgBC,KAAhB,CAAP;IACD;;IAED,IAAIf,WAAW,IAAIe,KAAK,CAACC,IAAN,KAAe,OAAlC,EAA2C;MACzCvB,KAAK,CAACwB,OAAN,IAAiBxB,KAAK,CAACwB,OAAN,CAAcF,KAAd,CAAjB;IACD;EACF;;EAEDxB,MAAM,CAAC2B,IAAP,CACElB,WAAW,IAAI,CAACK,SAAhB,IAA6B,CAACC,cADhC,EAEE,4EAFF,EAGEb,KAAK,CAAC,cAAD,CAAL,IAAyBD,IAAI,CAAC2B,WAHhC;EAMA,oBACE,oBAAC,KAAD,eACM7B,eAAe,CAACmB,wBAAD,CADrB;IAEE,KAAK,EAAEW,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBR,KAAlB,EAAyBJ,wBAAwB,CAACI,KAAlD,EAAyDpB,KAAK,CAACoB,KAA/D,CAFT;IAGE,SAAS,EAAE9B,EAAE,CAAC6B,SAAD,EAAYH,wBAAwB,CAACG,SAArC,EAAgDnB,KAAK,CAACmB,SAAtD,CAAF,IAAsEU,SAHnF;IAIE,SAAS,EAAER,SAJb;IAKE,IAAI,EAAEd,WAAW,GAAG,QAAH,GAAcsB,SALjC;IAME,eAAatB,WAAW,GAAGsB,SAAH,GAAe;EANzC,GADF;AAUD;;AAED9B,IAAI,CAAC2B,WAAL,GAAmB,MAAnB;AAEA,eAAenC,mBAAmB,CAACQ,IAAD,CAAlC"}
+{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","logger","useForkRef","hasLabels","Icon","props","ref","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","className","style","onKeyDown","event","code","onClick","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","Object","assign","undefined"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      tag: 'svg',\n      'data-ui-name': 'Icon',\n      width: 16,\n      height: 16,\n      viewBox: '0 0 16 16',\n      'aria-hidden': true,\n      focusable: props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'color-interactive': shade(color, -0.12),\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (interactive && event.code === 'Enter') {\n      props.onClick && props.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      {...propsForElement(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\n      onKeyDown={onKeyDown}\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/icon",
   "description": "Semrush Icon Component",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/utils": "^3.15",
+    "@semcore/utils": "^3.40.0",
     "@semcore/flex-box": "^4",
     "classnames": "2.2.6"
   },