@semcore/icon 2.30.4 → 2.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [2.31.0] - 2022-09-30
6
+
7
+ ### Changed
8
+
9
+ - When `interactive` prop is provided, `aria-label` or `aria-labelledby` props from now are required. If required props are not provided a warning is logged to developer console.
10
+
5
11
  ## [2.30.4] - 2022-09-15
6
12
 
7
13
  ### Fixed
package/lib/cjs/Icon.js CHANGED
@@ -31,6 +31,8 @@ var _keyboardFocusEnhance2 = _interopRequireDefault(require("@semcore/utils/lib/
31
31
 
32
32
  var _propsForElement = _interopRequireDefault(require("@semcore/utils/lib/propsForElement"));
33
33
 
34
+ var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
35
+
34
36
  var _excluded = ["keyboardFocused"];
35
37
 
36
38
  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); }
@@ -46,16 +48,16 @@ var styles = (
46
48
  /*__reshadow_css_start__*/
47
49
  _core.sstyled.insert(
48
50
  /*__inner_css_start__*/
49
- ".___SIcon_piwx0_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_piwx0)}.___SIcon_piwx0_gg_.__keyboardFocused_piwx0_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_piwx0_gg_.__interactive_piwx0_gg_{cursor:pointer}.___SIcon_piwx0_gg_.__interactive_piwx0_gg_:hover{color:var(--color-interactive_piwx0)}"
51
+ ".___SIcon_8v96b_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_8v96b)}.___SIcon_8v96b_gg_.__keyboardFocused_8v96b_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_8v96b_gg_.__interactive_8v96b_gg_{cursor:pointer}.___SIcon_8v96b_gg_.__interactive_8v96b_gg_:hover{color:var(--color-interactive_8v96b)}"
50
52
  /*__inner_css_end__*/
51
- , "piwx0_gg_")
53
+ , "8v96b_gg_")
52
54
  /*__reshadow_css_end__*/
53
55
  , {
54
- "__SIcon": "___SIcon_piwx0_gg_",
55
- "--color": "--color_piwx0",
56
- "_keyboardFocused": "__keyboardFocused_piwx0_gg_",
57
- "_interactive": "__interactive_piwx0_gg_",
58
- "--color-interactive": "--color-interactive_piwx0"
56
+ "__SIcon": "___SIcon_8v96b_gg_",
57
+ "--color": "--color_8v96b",
58
+ "_keyboardFocused": "__keyboardFocused_8v96b_gg_",
59
+ "_interactive": "__interactive_8v96b_gg_",
60
+ "--color-interactive": "--color-interactive_8v96b"
59
61
  });
60
62
 
61
63
  function Icon(props, ref) {
@@ -73,7 +75,9 @@ function Icon(props, ref) {
73
75
  other = _useBox2[1];
74
76
 
75
77
  var interactive = props.interactive,
76
- colorProps = props.color;
78
+ colorProps = props.color,
79
+ ariaLabel = props['aria-label'],
80
+ ariaLabelledby = props['aria-labelledby'];
77
81
  var color = (0, _color["default"])(colorProps);
78
82
 
79
83
  var _keyboardFocusEnhance = (0, _keyboardFocusEnhance2["default"])()(_objectSpread({
@@ -103,10 +107,14 @@ function Icon(props, ref) {
103
107
  }
104
108
  }
105
109
 
110
+ _logger["default"].warn(interactive && !ariaLabel && !ariaLabelledby, "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
111
+
106
112
  return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({}, (0, _propsForElement["default"])(propsWithKeyboardEnhance), {
107
113
  style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
108
114
  className: (0, _classnames["default"])(className, propsWithKeyboardEnhance.className, props.className) || undefined,
109
- onKeyDown: onKeyDown
115
+ onKeyDown: onKeyDown,
116
+ role: interactive ? 'button' : undefined,
117
+ "aria-hidden": interactive ? undefined : 'true'
110
118
  }));
111
119
  }
112
120
 
@@ -1 +1 @@
1
- {"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","propsForElement","Object","assign","undefined","displayName","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';\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 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 />\n );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;;AAFA;;AACA;;AAEA;;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,IAAQF,WAAR,GAA2CR,KAA3C,CAAQQ,WAAR;EAAA,IAA4BG,UAA5B,GAA2CX,KAA3C,CAAqBY,KAArB;EACA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAaF,UAAb,CAAd;;EACA,4BAAyD,IAAAG,iCAAA;IACvDC,QAAQ,EAAE,CAACP;EAD4C,GAEpDE,KAFoD,EAAzD;EAAA,IAAQM,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,EAAMV,KAAN,EAAa,CAAC,IAAd,CAD0B;IAE/C,aAAaA,KAFkC;IAG/CJ,WAAW,EAAEA,WAHkC;IAI/CQ,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQO,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;IACxB,IAAI1B,KAAK,CAACyB,SAAV,EAAqB;MACnB,OAAOzB,KAAK,CAACyB,SAAN,CAAgBC,KAAhB,CAAP;IACD;;IAED,IAAIlB,WAAW,IAAIkB,KAAK,CAACC,IAAN,KAAe,OAAlC,EAA2C;MACzC3B,KAAK,CAAC4B,OAAN,IAAiB5B,KAAK,CAAC4B,OAAN,CAAcF,KAAd,CAAjB;IACD;EACF;;EAED,oBACE,gCAAC,KAAD,gCACM,IAAAG,2BAAA,EAAgBZ,wBAAhB,CADN;IAEE,KAAK,EAAEa,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBP,KAAlB,EAAyBP,wBAAwB,CAACO,KAAlD,EAAyDxB,KAAK,CAACwB,KAA/D,CAFT;IAGE,SAAS,EAAE,IAAAH,sBAAA,EAAGE,SAAH,EAAcN,wBAAwB,CAACM,SAAvC,EAAkDvB,KAAK,CAACuB,SAAxD,KAAsES,SAHnF;IAIE,SAAS,EAAEP;EAJb,GADF;AAQD;;AAED1B,IAAI,CAACkC,WAAL,GAAmB,MAAnB;;eAEe,IAAAC,yBAAA,EAAoBnC,IAApB,C"}
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"}
package/lib/es6/Icon.js CHANGED
@@ -16,22 +16,23 @@ import { useBox } from '@semcore/flex-box';
16
16
  import resolveColor, { shade } from '@semcore/utils/lib/color';
17
17
  import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
18
18
  import propsForElement from '@semcore/utils/lib/propsForElement';
19
+ import logger from '@semcore/utils/lib/logger';
19
20
 
20
21
  /*__reshadow-styles__:"./style/icon.shadow.css"*/
21
22
  var styles = (
22
23
  /*__reshadow_css_start__*/
23
24
  _sstyled.insert(
24
25
  /*__inner_css_start__*/
25
- ".___SIcon_piwx0_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_piwx0)}.___SIcon_piwx0_gg_.__keyboardFocused_piwx0_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_piwx0_gg_.__interactive_piwx0_gg_{cursor:pointer}.___SIcon_piwx0_gg_.__interactive_piwx0_gg_:hover{color:var(--color-interactive_piwx0)}"
26
+ ".___SIcon_8v96b_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_8v96b)}.___SIcon_8v96b_gg_.__keyboardFocused_8v96b_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_8v96b_gg_.__interactive_8v96b_gg_{cursor:pointer}.___SIcon_8v96b_gg_.__interactive_8v96b_gg_:hover{color:var(--color-interactive_8v96b)}"
26
27
  /*__inner_css_end__*/
27
- , "piwx0_gg_")
28
+ , "8v96b_gg_")
28
29
  /*__reshadow_css_end__*/
29
30
  , {
30
- "__SIcon": "___SIcon_piwx0_gg_",
31
- "--color": "--color_piwx0",
32
- "_keyboardFocused": "__keyboardFocused_piwx0_gg_",
33
- "_interactive": "__interactive_piwx0_gg_",
34
- "--color-interactive": "--color-interactive_piwx0"
31
+ "__SIcon": "___SIcon_8v96b_gg_",
32
+ "--color": "--color_8v96b",
33
+ "_keyboardFocused": "__keyboardFocused_8v96b_gg_",
34
+ "_interactive": "__interactive_8v96b_gg_",
35
+ "--color-interactive": "--color-interactive_8v96b"
35
36
  });
36
37
 
37
38
  function Icon(props, ref) {
@@ -49,7 +50,9 @@ function Icon(props, ref) {
49
50
  other = _useBox2[1];
50
51
 
51
52
  var interactive = props.interactive,
52
- colorProps = props.color;
53
+ colorProps = props.color,
54
+ ariaLabel = props['aria-label'],
55
+ ariaLabelledby = props['aria-labelledby'];
53
56
  var color = resolveColor(colorProps);
54
57
 
55
58
  var _keyboardFocusEnhance = keyboardFocusEnhance()(_objectSpread({
@@ -79,10 +82,13 @@ function Icon(props, ref) {
79
82
  }
80
83
  }
81
84
 
85
+ logger.warn(interactive && !ariaLabel && !ariaLabelledby, "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
82
86
  return /*#__PURE__*/React.createElement(SIcon, _extends({}, propsForElement(propsWithKeyboardEnhance), {
83
87
  style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
84
88
  className: cn(className, propsWithKeyboardEnhance.className, props.className) || undefined,
85
- onKeyDown: onKeyDown
89
+ onKeyDown: onKeyDown,
90
+ role: interactive ? 'button' : undefined,
91
+ "aria-hidden": interactive ? undefined : 'true'
86
92
  }));
87
93
  }
88
94
 
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","Icon","props","ref","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","className","style","onKeyDown","event","code","onClick","Object","assign","undefined","displayName"],"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';\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 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 />\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;;;;;;;;;;;;;;;;;;;AAIA,SAASC,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EACxB,cAAuBP,MAAM;IAEzBQ,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,IAAQF,WAAR,GAA2CP,KAA3C,CAAQO,WAAR;EAAA,IAA4BG,UAA5B,GAA2CV,KAA3C,CAAqBW,KAArB;EACA,IAAMA,KAAK,GAAGhB,YAAY,CAACe,UAAD,CAA1B;;EACA,4BAAyDb,oBAAoB;IAC3Ee,QAAQ,EAAE,CAACL;EADgE,GAExEE,KAFwE,EAA7E;EAAA,IAAQI,eAAR,yBAAQA,eAAR;EAAA,IAA4BC,wBAA5B;;EAIA,IAAMC,OAAO,GAAGtB,OAAO,CAACuB,MAAD,CAAvB;;EACA,kBAA6BD,OAAO,CAACxB,EAAR,CAAW,OAAX,EAAoB;IAC/C,qBAAqBK,KAAK,CAACe,KAAD,EAAQ,CAAC,IAAT,CADqB;IAE/C,aAAaA,KAFkC;IAG/CJ,WAAW,EAAEA,WAHkC;IAI/CM,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQI,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;IACxB,IAAIpB,KAAK,CAACmB,SAAV,EAAqB;MACnB,OAAOnB,KAAK,CAACmB,SAAN,CAAgBC,KAAhB,CAAP;IACD;;IAED,IAAIb,WAAW,IAAIa,KAAK,CAACC,IAAN,KAAe,OAAlC,EAA2C;MACzCrB,KAAK,CAACsB,OAAN,IAAiBtB,KAAK,CAACsB,OAAN,CAAcF,KAAd,CAAjB;IACD;EACF;;EAED,oBACE,oBAAC,KAAD,eACMtB,eAAe,CAACgB,wBAAD,CADrB;IAEE,KAAK,EAAES,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBN,KAAlB,EAAyBJ,wBAAwB,CAACI,KAAlD,EAAyDlB,KAAK,CAACkB,KAA/D,CAFT;IAGE,SAAS,EAAE3B,EAAE,CAAC0B,SAAD,EAAYH,wBAAwB,CAACG,SAArC,EAAgDjB,KAAK,CAACiB,SAAtD,CAAF,IAAsEQ,SAHnF;IAIE,SAAS,EAAEN;EAJb,GADF;AAQD;;AAEDpB,IAAI,CAAC2B,WAAL,GAAmB,MAAnB;AAEA,eAAelC,mBAAmB,CAACO,IAAD,CAAlC"}
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":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/icon",
3
3
  "description": "Semrush Icon Component",
4
- "version": "2.30.4",
4
+ "version": "2.31.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",