@semcore/icon 2.29.5 → 2.30.2
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 +12 -0
- package/lib/cjs/Icon.js +22 -9
- package/lib/cjs/Icon.js.map +1 -1
- package/lib/es6/Icon.js +22 -9
- package/lib/es6/Icon.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.30.2] - 2022-08-30
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.37.0 ~> 3.37.1], `@semcore/flex-box` [4.5.10 ~> 4.5.11]).
|
|
10
|
+
|
|
11
|
+
## [2.30.1] - 2022-08-18
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Added call `onClick` when pressing enter if the icon is `interactive`.
|
|
16
|
+
|
|
5
17
|
## [2.29.5] - 2022-08-18
|
|
6
18
|
|
|
7
19
|
### Changed
|
package/lib/cjs/Icon.js
CHANGED
|
@@ -46,16 +46,16 @@ var styles = (
|
|
|
46
46
|
/*__reshadow_css_start__*/
|
|
47
47
|
_core.sstyled.insert(
|
|
48
48
|
/*__inner_css_start__*/
|
|
49
|
-
".
|
|
49
|
+
".___SIcon_1ifjb_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_1ifjb)}.___SIcon_1ifjb_gg_.__keyboardFocused_1ifjb_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_1ifjb_gg_.__interactive_1ifjb_gg_{cursor:pointer}.___SIcon_1ifjb_gg_.__interactive_1ifjb_gg_:hover{color:var(--color-interactive_1ifjb)}"
|
|
50
50
|
/*__inner_css_end__*/
|
|
51
|
-
, "
|
|
51
|
+
, "1ifjb_gg_")
|
|
52
52
|
/*__reshadow_css_end__*/
|
|
53
53
|
, {
|
|
54
|
-
"__SIcon": "
|
|
55
|
-
"--color": "--
|
|
56
|
-
"_keyboardFocused": "
|
|
57
|
-
"_interactive": "
|
|
58
|
-
"--color-interactive": "--color-
|
|
54
|
+
"__SIcon": "___SIcon_1ifjb_gg_",
|
|
55
|
+
"--color": "--color_1ifjb",
|
|
56
|
+
"_keyboardFocused": "__keyboardFocused_1ifjb_gg_",
|
|
57
|
+
"_interactive": "__interactive_1ifjb_gg_",
|
|
58
|
+
"--color-interactive": "--color-interactive_1ifjb"
|
|
59
59
|
});
|
|
60
60
|
|
|
61
61
|
function Icon(props, ref) {
|
|
@@ -64,7 +64,9 @@ function Icon(props, ref) {
|
|
|
64
64
|
'data-ui-name': 'Icon',
|
|
65
65
|
width: 16,
|
|
66
66
|
height: 16,
|
|
67
|
-
viewBox: '0 0 16 16'
|
|
67
|
+
viewBox: '0 0 16 16',
|
|
68
|
+
'aria-hidden': true,
|
|
69
|
+
focusable: props.interactive
|
|
68
70
|
}, props), ref),
|
|
69
71
|
_useBox2 = (0, _slicedToArray2["default"])(_useBox, 2),
|
|
70
72
|
SIcon = _useBox2[0],
|
|
@@ -91,9 +93,20 @@ function Icon(props, ref) {
|
|
|
91
93
|
className = _sstyles$cn.className,
|
|
92
94
|
style = _sstyles$cn.style;
|
|
93
95
|
|
|
96
|
+
function onKeyDown(event) {
|
|
97
|
+
if (props.onKeyDown) {
|
|
98
|
+
return props.onKeyDown(event);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (interactive && event.code === 'Enter') {
|
|
102
|
+
props.onClick && props.onClick(event);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
94
106
|
return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({}, (0, _propsForElement["default"])(propsWithKeyboardEnhance), {
|
|
95
107
|
style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
|
|
96
|
-
className: (0, _classnames["default"])(className, propsWithKeyboardEnhance.className, props.className) || undefined
|
|
108
|
+
className: (0, _classnames["default"])(className, propsWithKeyboardEnhance.className, props.className) || undefined,
|
|
109
|
+
onKeyDown: onKeyDown
|
|
97
110
|
}));
|
|
98
111
|
}
|
|
99
112
|
|
package/lib/cjs/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","
|
|
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"}
|
package/lib/es6/Icon.js
CHANGED
|
@@ -22,16 +22,16 @@ var styles = (
|
|
|
22
22
|
/*__reshadow_css_start__*/
|
|
23
23
|
_sstyled.insert(
|
|
24
24
|
/*__inner_css_start__*/
|
|
25
|
-
".
|
|
25
|
+
".___SIcon_1ifjb_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_1ifjb)}.___SIcon_1ifjb_gg_.__keyboardFocused_1ifjb_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_1ifjb_gg_.__interactive_1ifjb_gg_{cursor:pointer}.___SIcon_1ifjb_gg_.__interactive_1ifjb_gg_:hover{color:var(--color-interactive_1ifjb)}"
|
|
26
26
|
/*__inner_css_end__*/
|
|
27
|
-
, "
|
|
27
|
+
, "1ifjb_gg_")
|
|
28
28
|
/*__reshadow_css_end__*/
|
|
29
29
|
, {
|
|
30
|
-
"__SIcon": "
|
|
31
|
-
"--color": "--
|
|
32
|
-
"_keyboardFocused": "
|
|
33
|
-
"_interactive": "
|
|
34
|
-
"--color-interactive": "--color-
|
|
30
|
+
"__SIcon": "___SIcon_1ifjb_gg_",
|
|
31
|
+
"--color": "--color_1ifjb",
|
|
32
|
+
"_keyboardFocused": "__keyboardFocused_1ifjb_gg_",
|
|
33
|
+
"_interactive": "__interactive_1ifjb_gg_",
|
|
34
|
+
"--color-interactive": "--color-interactive_1ifjb"
|
|
35
35
|
});
|
|
36
36
|
|
|
37
37
|
function Icon(props, ref) {
|
|
@@ -40,7 +40,9 @@ function Icon(props, ref) {
|
|
|
40
40
|
'data-ui-name': 'Icon',
|
|
41
41
|
width: 16,
|
|
42
42
|
height: 16,
|
|
43
|
-
viewBox: '0 0 16 16'
|
|
43
|
+
viewBox: '0 0 16 16',
|
|
44
|
+
'aria-hidden': true,
|
|
45
|
+
focusable: props.interactive
|
|
44
46
|
}, props), ref),
|
|
45
47
|
_useBox2 = _slicedToArray(_useBox, 2),
|
|
46
48
|
SIcon = _useBox2[0],
|
|
@@ -67,9 +69,20 @@ function Icon(props, ref) {
|
|
|
67
69
|
className = _sstyles$cn.className,
|
|
68
70
|
style = _sstyles$cn.style;
|
|
69
71
|
|
|
72
|
+
function onKeyDown(event) {
|
|
73
|
+
if (props.onKeyDown) {
|
|
74
|
+
return props.onKeyDown(event);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
if (interactive && event.code === 'Enter') {
|
|
78
|
+
props.onClick && props.onClick(event);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
70
82
|
return /*#__PURE__*/React.createElement(SIcon, _extends({}, propsForElement(propsWithKeyboardEnhance), {
|
|
71
83
|
style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
|
|
72
|
-
className: cn(className, propsWithKeyboardEnhance.className, props.className) || undefined
|
|
84
|
+
className: cn(className, propsWithKeyboardEnhance.className, props.className) || undefined,
|
|
85
|
+
onKeyDown: onKeyDown
|
|
73
86
|
}));
|
|
74
87
|
}
|
|
75
88
|
|
package/lib/es6/Icon.js.map
CHANGED
|
@@ -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","
|
|
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"}
|