@semcore/icon 3.12.0 → 3.13.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.13.1] - 2023-02-28
+
+### Fixed
+
+- Fixed DOM attributes `aria-hidden` and `role` were not overridable.
+
+## [3.13.0] - 2023-02-24
+
+### Fixed
+
+- Fixed path for `Confluence`, `GoogleCloud`, `Hubspot`, `JavaScript`, `LookerStudio` icons.
+
 ## [3.12.0] - 2023-02-22
 
 ### Added

package/lib/cjs/Icon.js

@@ -44,16 +44,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SIcon_1dw8u_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_1dw8u)}.___SIcon_1dw8u_gg_.__keyboardFocused_1dw8u_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SIcon_1dw8u_gg_.__interactive_1dw8u_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1dw8u_gg_.__interactive_1dw8u_gg_:hover{color:var(--color-interactive_1dw8u)}}"
+".___SIcon_1a956_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_1a956)}.___SIcon_1a956_gg_.__keyboardFocused_1a956_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SIcon_1a956_gg_.__interactive_1a956_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1a956_gg_.__interactive_1a956_gg_:hover{color:var(--color-interactive_1a956)}}"
 /*__inner_css_end__*/
-, "1dw8u_gg_")
+, "1a956_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_1dw8u_gg_",
-  "--color": "--color_1dw8u",
-  "_keyboardFocused": "__keyboardFocused_1dw8u_gg_",
-  "_interactive": "__interactive_1dw8u_gg_",
-  "--color-interactive": "--color-interactive_1dw8u"
+  "__SIcon": "___SIcon_1a956_gg_",
+  "--color": "--color_1a956",
+  "_keyboardFocused": "__keyboardFocused_1a956_gg_",
+  "_interactive": "__interactive_1a956_gg_",
+  "--color-interactive": "--color-interactive_1a956"
 });
 
 function Icon(props, ref) {
@@ -112,12 +112,13 @@ function Icon(props, ref) {
   }, [interactive]);
 
   var forkedRef = (0, _ref.useForkRef)(ref, labelCheckRef);
-  return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({}, (0, _propsForElement["default"])(propsWithKeyboardEnhance), {
+  return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({
+    role: interactive ? 'button' : undefined,
+    "aria-hidden": interactive ? undefined : 'true'
+  }, (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',
     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","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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"}
+{"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","undefined","propsForElement","Object","assign","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      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\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      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

@@ -20,16 +20,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SIcon_1dw8u_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_1dw8u)}.___SIcon_1dw8u_gg_.__keyboardFocused_1dw8u_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SIcon_1dw8u_gg_.__interactive_1dw8u_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1dw8u_gg_.__interactive_1dw8u_gg_:hover{color:var(--color-interactive_1dw8u)}}"
+".___SIcon_1a956_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_1a956)}.___SIcon_1a956_gg_.__keyboardFocused_1a956_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SIcon_1a956_gg_.__interactive_1a956_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1a956_gg_.__interactive_1a956_gg_:hover{color:var(--color-interactive_1a956)}}"
 /*__inner_css_end__*/
-, "1dw8u_gg_")
+, "1a956_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_1dw8u_gg_",
-  "--color": "--color_1dw8u",
-  "_keyboardFocused": "__keyboardFocused_1dw8u_gg_",
-  "_interactive": "__interactive_1dw8u_gg_",
-  "--color-interactive": "--color-interactive_1dw8u"
+  "__SIcon": "___SIcon_1a956_gg_",
+  "--color": "--color_1a956",
+  "_keyboardFocused": "__keyboardFocused_1a956_gg_",
+  "_interactive": "__interactive_1a956_gg_",
+  "--color-interactive": "--color-interactive_1a956"
 });
 
 function Icon(props, ref) {
@@ -86,12 +86,13 @@ function Icon(props, ref) {
     }
   }, [interactive]);
   var forkedRef = useForkRef(ref, labelCheckRef);
-  return /*#__PURE__*/React.createElement(SIcon, _extends({}, propsForElement(propsWithKeyboardEnhance), {
+  return /*#__PURE__*/React.createElement(SIcon, _extends({
+    role: interactive ? 'button' : undefined,
+    "aria-hidden": interactive ? undefined : 'true'
+  }, 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',
     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","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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"}
+{"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","undefined","Object","assign"],"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      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\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      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.12.0",
+  "version": "3.13.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",