@semcore/icon 16.8.0 → 16.8.1

package/lib/cjs/Icon.js

@@ -7,77 +7,83 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _core = require("@semcore/core");
-var _indentStyles = require("@semcore/core/lib/utils/indentStyles");
+var _baseComponents = require("@semcore/base-components");
+var _keyboardFocusEnhance2 = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/keyboardFocusEnhance"));
+var _hasLabels = _interopRequireDefault(require("@semcore/core/lib/utils/hasLabels"));
+var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
 var _propsForElement = _interopRequireDefault(require("@semcore/core/lib/utils/propsForElement"));
+var _ref = require("@semcore/core/lib/utils/ref");
 var _useColorResolver = require("@semcore/core/lib/utils/use/useColorResolver");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["width", "height", "viewBox", "color", "scaleIndent", "m", "mt", "mb", "my", "ml", "mr", "mx"];
+var _excluded = ["keyboardFocused"];
 /*!__reshadow-styles__:"./style/icon.shadow.css"*/
-var styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SIcon_nd9fk_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_nd9fk)}", /*__inner_css_end__*/"nd9fk_gg_"),
+var styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SIcon_1ma42_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_1ma42)}.___SIcon_1ma42_gg_.__interactive_1ma42_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1ma42_gg_.__interactive_1ma42_gg_:hover{filter:brightness(.8)}}.___SIcon_1ma42_gg_.__interactive_1ma42_gg_ path{pointer-events:none}", /*__inner_css_end__*/"1ma42_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SIcon": "___SIcon_nd9fk_gg_",
-  "--color": "--color_nd9fk"
+  "__SIcon": "___SIcon_1ma42_gg_",
+  "--color": "--color_1ma42",
+  "_interactive": "__interactive_1ma42_gg_"
 });
-function calculateIndentStyles(props, scaleIndent) {
-  return (0, _indentStyles.removeUndefinedKeys)({
-    margin: (0, _indentStyles.getAutoOrScaleIndent)(props['m'], scaleIndent),
-    marginTop: (0, _indentStyles.getAutoOrScaleIndent)(props['mt'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
-    marginBottom: (0, _indentStyles.getAutoOrScaleIndent)(props['mb'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
-    marginLeft: (0, _indentStyles.getAutoOrScaleIndent)(props['ml'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent),
-    marginRight: (0, _indentStyles.getAutoOrScaleIndent)(props['mr'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent)
-  });
-}
-function Icon(_ref, ref) {
-  var _props$className;
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 16 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 16 : _ref$height,
-    _ref$viewBox = _ref.viewBox,
-    viewBox = _ref$viewBox === void 0 ? '0 0 16 16' : _ref$viewBox,
-    colorProps = _ref.color,
-    _ref$scaleIndent = _ref.scaleIndent,
-    scaleIndent = _ref$scaleIndent === void 0 ? 4 : _ref$scaleIndent,
-    m = _ref.m,
-    mt = _ref.mt,
-    mb = _ref.mb,
-    my = _ref.my,
-    ml = _ref.ml,
-    mr = _ref.mr,
-    mx = _ref.mx,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var SIcon = 'svg';
+function Icon(props, ref) {
+  var _useBox = (0, _baseComponents.useBox)((0, _objectSpread2["default"])({
+      'tag': 'svg',
+      'data-ui-name': 'Icon',
+      'width': 16,
+      'height': 16,
+      'viewBox': '0 0 16 16',
+      'focusable': props.interactive
+    }, props), ref),
+    _useBox2 = (0, _slicedToArray2["default"])(_useBox, 2),
+    SIcon = _useBox2[0],
+    other = _useBox2[1];
+  var interactive = props.interactive,
+    colorProps = props.color;
   var resolveColor = (0, _useColorResolver.useColorResolver)();
   var color = resolveColor(colorProps);
+  var _keyboardFocusEnhance = (0, _keyboardFocusEnhance2["default"])()((0, _objectSpread2["default"])({
+      disabled: !interactive
+    }, other)),
+    keyboardFocused = _keyboardFocusEnhance.keyboardFocused,
+    propsEnhance = (0, _objectWithoutProperties2["default"])(_keyboardFocusEnhance, _excluded);
   var sstyles = (0, _core.sstyled)(styles);
   var _sstyles$cn = sstyles.cn('SIcon', {
-      'use:color': color
+      'use:color': color,
+      'interactive': interactive,
+      'keyboardFocused': keyboardFocused
     }),
     className = _sstyles$cn.className,
     style = _sstyles$cn.style;
-  var indentStyles = _react["default"].useMemo(function () {
-    return calculateIndentStyles({
-      m: m,
-      mt: mt,
-      mb: mb,
-      my: my,
-      ml: ml,
-      mr: mr,
-      mx: mx
-    }, scaleIndent);
-  }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
+  function onKeyDown(event) {
+    if (propsEnhance.onKeyDown) {
+      return propsEnhance.onKeyDown(event);
+    }
+    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      propsEnhance.onClick(event);
+    }
+  }
+  var labelCheckRef = _react["default"].useRef();
+  _react["default"].useEffect(function () {
+    if (!interactive) return;
+    if (process.env.NODE_ENV !== 'production') {
+      _logger["default"].warn(labelCheckRef.current && !(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"])({
-    width: width,
-    height: height,
-    viewBox: viewBox,
-    "aria-hidden": "true"
-  }, (0, _propsForElement["default"])(props), {
-    style: Object.assign({}, style, props.style, indentStyles),
-    className: "".concat(className, " ").concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ''),
-    ref: ref
+    role: interactive ? 'button' : undefined,
+    "aria-hidden": interactive ? undefined : 'true'
+  }, (0, _propsForElement["default"])(propsEnhance), {
+    style: Object.assign({}, style, propsEnhance.style),
+    className: (0, _classnames["default"])(className, propsEnhance.className) || undefined,
+    onKeyDown: onKeyDown,
+    ref: forkedRef
   }));
 }
+Icon.displayName = 'Icon';
 var _default = exports["default"] = (0, _core.createBaseComponent)(Icon);
 //# sourceMappingURL=Icon.js.map

package/lib/cjs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["_core","require","_indentStyles","_propsForElement","_interopRequireDefault","_useColorResolver","_react","_excluded","styles","sstyled","insert","calculateIndentStyles","props","scaleIndent","removeUndefinedKeys","margin","getAutoOrScaleIndent","marginTop","marginBottom","marginLeft","marginRight","Icon","_ref","ref","_props$className","_ref$width","width","_ref$height","height","_ref$viewBox","viewBox","colorProps","color","_ref$scaleIndent","m","mt","mb","my","ml","mr","mx","_objectWithoutProperties2","SIcon","resolveColor","useColorResolver","sstyles","_sstyles$cn","cn","className","style","indentStyles","React","useMemo","createElement","_extends2","propsForElement","Object","assign","concat","_default","exports","createBaseComponent"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = {\n  /**\n   * Icon width\n   * @internal\n   */\n  width?: string | number;\n  /**\n   * Icon height\n   * @internal\n   */\n  height?: string | number;\n  /**\n   * SVG viewBox attribute\n   * @internal\n   */\n  viewBox?: string;\n  /** Icon color */\n  color?: string;\n\n  /** CSS `margin` property */\n  m?: number | string;\n\n  /** CSS `margin-top` property */\n  mt?: number | string;\n\n  /** CSS `margin-right` property */\n  mr?: number | string;\n\n  /** CSS `margin-bottom` property */\n  mb?: number | string;\n\n  /** CSS `margin-left` property */\n  ml?: number | string;\n\n  /** CSS `margin-left` and `margin-right` property */\n  mx?: number | string;\n\n  /** CSS `margin-top` and `margin-bottom` property */\n  my?: number | string;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n};\n\nfunction calculateIndentStyles(props: IconProps, scaleIndent: number) {\n  return removeUndefinedKeys({\n    margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n    marginTop:\n      getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginBottom:\n      getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginLeft:\n      getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n    marginRight:\n      getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n  });\n}\n\nfunction Icon({\n  width = 16,\n  height = 16,\n  viewBox = '0 0 16 16',\n  color: colorProps,\n  scaleIndent = 4,\n  m,\n  mt,\n  mb,\n  my,\n  ml,\n  mr,\n  mx,\n  ...props\n}: React.SVGProps<SVGSVGElement> & IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n  const SIcon = 'svg';\n\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n  });\n\n  const indentStyles: React.CSSProperties = React.useMemo(() => {\n    return calculateIndentStyles({ m, mt, mb, my, ml, mr, mx }, scaleIndent);\n  }, [\n    scaleIndent,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n  ]);\n\n  return (\n    <SIcon\n      width={width}\n      height={height}\n      viewBox={viewBox}\n      aria-hidden='true'\n      {...propsForElement(props)}\n      style={Object.assign({}, style, props.style, indentStyles)}\n      className={`${className} ${props.className ?? ''}`}\n      ref={ref}\n    />\n  );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["_core","require","_baseComponents","_keyboardFocusEnhance2","_interopRequireDefault","_hasLabels","_logger","_propsForElement","_ref","_useColorResolver","_classnames","_react","_excluded","styles","sstyled","insert","Icon","props","ref","_useBox","useBox","_objectSpread2","interactive","_useBox2","_slicedToArray2","SIcon","other","colorProps","color","resolveColor","useColorResolver","_keyboardFocusEnhance","keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties2","sstyles","_sstyles$cn","cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","current","hasLabels","displayName","forkedRef","useForkRef","createElement","_extends2","role","undefined","propsForElement","Object","assign","_default","exports","createBaseComponent"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import { useBox } from '@semcore/base-components';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useForkRef } from '@semcore/core/lib/utils/ref';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport cn from 'classnames';\nimport React from 'react';\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      'focusable': props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    'interactive': interactive,\n    'keyboardFocused': keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.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        labelCheckRef.current && !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(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.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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","ignoreList":[]}

package/lib/cjs/index.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { BoxProps } from '@semcore/base-components';\nimport { Intergalactic, UnknownProperties } from '@semcore/core';\nimport { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IIconProps extends IconProps, UnknownProperties {}\nexport type IconProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Icon width */\n    width?: string | number;\n    /** Icon height */\n    height?: string | number;\n    /** SVG viewBox attribute */\n    viewBox?: string;\n    /** Make an icon interactive */\n    interactive?: boolean;\n    /** Icon color */\n    color?: string;\n  };\n\ndeclare const Icon: Intergalactic.Component<'svg', IconProps>;\n\nexport default Icon;\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Icon","_interopRequireDefault","require"],"sources":["../../src/index.ts"],"sourcesContent":["import type { IconProps } from './Icon';\n\nexport { default } from './Icon';\n\nexport type {\n  IconProps,\n};\n"],"mappings":";;;;;;;;;;;;AAEA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_Icon","_interopRequireDefault","require"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Icon';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}

package/lib/cjs/style/icon.shadow.css

@@ -8,3 +8,16 @@ SIcon {
   outline: none;
   color: var(--color);
 }
+
+
+SIcon[interactive] {
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+
+  path {
+    pointer-events: none;
+  }
+}

package/lib/es6/Icon.js

@@ -1,77 +1,83 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { sstyled as _sstyled } from "@semcore/core";
-var _excluded = ["width", "height", "viewBox", "color", "scaleIndent", "m", "mt", "mb", "my", "ml", "mr", "mx"];
+var _excluded = ["keyboardFocused"];
+import { useBox } from '@semcore/base-components';
 import { createBaseComponent, sstyled } from '@semcore/core';
-import { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';
+import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
+import hasLabels from '@semcore/core/lib/utils/hasLabels';
+import logger from '@semcore/core/lib/utils/logger';
 import propsForElement from '@semcore/core/lib/utils/propsForElement';
+import { useForkRef } from '@semcore/core/lib/utils/ref';
 import { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';
+import cn from 'classnames';
 import React from 'react';
 /*!__reshadow-styles__:"./style/icon.shadow.css"*/
-var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SIcon_nd9fk_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_nd9fk)}", /*__inner_css_end__*/"nd9fk_gg_"),
+var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SIcon_1ma42_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_1ma42)}.___SIcon_1ma42_gg_.__interactive_1ma42_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1ma42_gg_.__interactive_1ma42_gg_:hover{filter:brightness(.8)}}.___SIcon_1ma42_gg_.__interactive_1ma42_gg_ path{pointer-events:none}", /*__inner_css_end__*/"1ma42_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SIcon": "___SIcon_nd9fk_gg_",
-  "--color": "--color_nd9fk"
+  "__SIcon": "___SIcon_1ma42_gg_",
+  "--color": "--color_1ma42",
+  "_interactive": "__interactive_1ma42_gg_"
 });
-function calculateIndentStyles(props, scaleIndent) {
-  return removeUndefinedKeys({
-    margin: getAutoOrScaleIndent(props['m'], scaleIndent),
-    marginTop: getAutoOrScaleIndent(props['mt'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
-    marginBottom: getAutoOrScaleIndent(props['mb'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
-    marginLeft: getAutoOrScaleIndent(props['ml'], scaleIndent) || getAutoOrScaleIndent(props['mx'], scaleIndent),
-    marginRight: getAutoOrScaleIndent(props['mr'], scaleIndent) || getAutoOrScaleIndent(props['mx'], scaleIndent)
-  });
-}
-function Icon(_ref, ref) {
-  var _props$className;
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 16 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 16 : _ref$height,
-    _ref$viewBox = _ref.viewBox,
-    viewBox = _ref$viewBox === void 0 ? '0 0 16 16' : _ref$viewBox,
-    colorProps = _ref.color,
-    _ref$scaleIndent = _ref.scaleIndent,
-    scaleIndent = _ref$scaleIndent === void 0 ? 4 : _ref$scaleIndent,
-    m = _ref.m,
-    mt = _ref.mt,
-    mb = _ref.mb,
-    my = _ref.my,
-    ml = _ref.ml,
-    mr = _ref.mr,
-    mx = _ref.mx,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var SIcon = 'svg';
+function Icon(props, ref) {
+  var _useBox = useBox(_objectSpread({
+      'tag': 'svg',
+      'data-ui-name': 'Icon',
+      'width': 16,
+      'height': 16,
+      'viewBox': '0 0 16 16',
+      'focusable': props.interactive
+    }, props), ref),
+    _useBox2 = _slicedToArray(_useBox, 2),
+    SIcon = _useBox2[0],
+    other = _useBox2[1];
+  var interactive = props.interactive,
+    colorProps = props.color;
   var resolveColor = useColorResolver();
   var color = resolveColor(colorProps);
+  var _keyboardFocusEnhance = keyboardFocusEnhance()(_objectSpread({
+      disabled: !interactive
+    }, other)),
+    keyboardFocused = _keyboardFocusEnhance.keyboardFocused,
+    propsEnhance = _objectWithoutProperties(_keyboardFocusEnhance, _excluded);
   var sstyles = sstyled(styles);
   var _sstyles$cn = sstyles.cn('SIcon', {
-      'use:color': color
+      'use:color': color,
+      'interactive': interactive,
+      'keyboardFocused': keyboardFocused
     }),
     className = _sstyles$cn.className,
     style = _sstyles$cn.style;
-  var indentStyles = React.useMemo(function () {
-    return calculateIndentStyles({
-      m: m,
-      mt: mt,
-      mb: mb,
-      my: my,
-      ml: ml,
-      mr: mr,
-      mx: mx
-    }, scaleIndent);
-  }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
+  function onKeyDown(event) {
+    if (propsEnhance.onKeyDown) {
+      return propsEnhance.onKeyDown(event);
+    }
+    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      propsEnhance.onClick(event);
+    }
+  }
+  var labelCheckRef = React.useRef();
+  React.useEffect(function () {
+    if (!interactive) return;
+    if (process.env.NODE_ENV !== 'production') {
+      logger.warn(labelCheckRef.current && !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({
-    width: width,
-    height: height,
-    viewBox: viewBox,
-    "aria-hidden": "true"
-  }, propsForElement(props), {
-    style: Object.assign({}, style, props.style, indentStyles),
-    className: "".concat(className, " ").concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ''),
-    ref: ref
+    role: interactive ? 'button' : undefined,
+    "aria-hidden": interactive ? undefined : 'true'
+  }, propsForElement(propsEnhance), {
+    style: Object.assign({}, style, propsEnhance.style),
+    className: cn(className, propsEnhance.className) || undefined,
+    onKeyDown: onKeyDown,
+    ref: forkedRef
   }));
 }
+Icon.displayName = 'Icon';
 export default createBaseComponent(Icon);
 //# sourceMappingURL=Icon.js.map

package/lib/es6/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["createBaseComponent","sstyled","removeUndefinedKeys","getAutoOrScaleIndent","propsForElement","useColorResolver","React","styles","_sstyled","insert","calculateIndentStyles","props","scaleIndent","margin","marginTop","marginBottom","marginLeft","marginRight","Icon","_ref","ref","_props$className","_ref$width","width","_ref$height","height","_ref$viewBox","viewBox","colorProps","color","_ref$scaleIndent","m","mt","mb","my","ml","mr","mx","_objectWithoutProperties","_excluded","SIcon","resolveColor","sstyles","_sstyles$cn","cn","className","style","indentStyles","useMemo","createElement","_extends","Object","assign","concat"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = {\n  /**\n   * Icon width\n   * @internal\n   */\n  width?: string | number;\n  /**\n   * Icon height\n   * @internal\n   */\n  height?: string | number;\n  /**\n   * SVG viewBox attribute\n   * @internal\n   */\n  viewBox?: string;\n  /** Icon color */\n  color?: string;\n\n  /** CSS `margin` property */\n  m?: number | string;\n\n  /** CSS `margin-top` property */\n  mt?: number | string;\n\n  /** CSS `margin-right` property */\n  mr?: number | string;\n\n  /** CSS `margin-bottom` property */\n  mb?: number | string;\n\n  /** CSS `margin-left` property */\n  ml?: number | string;\n\n  /** CSS `margin-left` and `margin-right` property */\n  mx?: number | string;\n\n  /** CSS `margin-top` and `margin-bottom` property */\n  my?: number | string;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n};\n\nfunction calculateIndentStyles(props: IconProps, scaleIndent: number) {\n  return removeUndefinedKeys({\n    margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n    marginTop:\n      getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginBottom:\n      getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginLeft:\n      getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n    marginRight:\n      getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n  });\n}\n\nfunction Icon({\n  width = 16,\n  height = 16,\n  viewBox = '0 0 16 16',\n  color: colorProps,\n  scaleIndent = 4,\n  m,\n  mt,\n  mb,\n  my,\n  ml,\n  mr,\n  mx,\n  ...props\n}: React.SVGProps<SVGSVGElement> & IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n  const SIcon = 'svg';\n\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n  });\n\n  const indentStyles: React.CSSProperties = React.useMemo(() => {\n    return calculateIndentStyles({ m, mt, mb, my, ml, mr, mx }, scaleIndent);\n  }, [\n    scaleIndent,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n  ]);\n\n  return (\n    <SIcon\n      width={width}\n      height={height}\n      viewBox={viewBox}\n      aria-hidden='true'\n      {...propsForElement(props)}\n      style={Object.assign({}, style, props.style, indentStyles)}\n      className={`${className} ${props.className ?? ''}`}\n      ref={ref}\n    />\n  );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["useBox","createBaseComponent","sstyled","keyboardFocusEnhance","hasLabels","logger","propsForElement","useForkRef","useColorResolver","cn","React","styles","_sstyled","insert","Icon","props","ref","_useBox","_objectSpread","interactive","_useBox2","_slicedToArray","SIcon","other","colorProps","color","resolveColor","_keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties","_excluded","sstyles","_sstyles$cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","createElement","_extends","role","undefined","Object","assign"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import { useBox } from '@semcore/base-components';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useForkRef } from '@semcore/core/lib/utils/ref';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport cn from 'classnames';\nimport React from 'react';\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      'focusable': props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    'interactive': interactive,\n    'keyboardFocused': keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.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        labelCheckRef.current && !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(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.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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","ignoreList":[]}

package/lib/es6/index.d.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.js.map

package/lib/es6/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { BoxProps } from '@semcore/base-components';\nimport { Intergalactic, UnknownProperties } from '@semcore/core';\nimport { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IIconProps extends IconProps, UnknownProperties {}\nexport type IconProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Icon width */\n    width?: string | number;\n    /** Icon height */\n    height?: string | number;\n    /** SVG viewBox attribute */\n    viewBox?: string;\n    /** Make an icon interactive */\n    interactive?: boolean;\n    /** Icon color */\n    color?: string;\n  };\n\ndeclare const Icon: Intergalactic.Component<'svg', IconProps>;\n\nexport default Icon;\n"],"mappings":"","ignoreList":[]}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["import type { IconProps } from './Icon';\n\nexport { default } from './Icon';\n\nexport type {\n  IconProps,\n};\n"],"mappings":"AAEA,SAASA,OAAO,QAAQ,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Icon';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,QAAQ","ignoreList":[]}

package/lib/es6/style/icon.shadow.css

@@ -8,3 +8,16 @@ SIcon {
   outline: none;
   color: var(--color);
 }
+
+
+SIcon[interactive] {
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+
+  path {
+    pointer-events: none;
+  }
+}

package/lib/esm/Icon.mjs

@@ -1,66 +1,82 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { sstyled, createBaseComponent } from "@semcore/core";
-import { removeUndefinedKeys, getAutoOrScaleIndent } from "@semcore/core/lib/utils/indentStyles";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { createBaseComponent, sstyled } from "@semcore/core";
+import { useBox } from "@semcore/base-components";
+import keyboardFocusEnhance from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
+import hasLabels from "@semcore/core/lib/utils/hasLabels";
+import logger from "@semcore/core/lib/utils/logger";
 import propsForElement from "@semcore/core/lib/utils/propsForElement";
+import { useForkRef } from "@semcore/core/lib/utils/ref";
 import { useColorResolver } from "@semcore/core/lib/utils/use/useColorResolver";
+import cn from "classnames";
 import React from "react";
-var _excluded = ["width", "height", "viewBox", "color", "scaleIndent", "m", "mt", "mb", "my", "ml", "mr", "mx"];
+var _excluded = ["keyboardFocused"];
 /*!__reshadow-styles__:"./style/icon.shadow.css"*/
 var styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SIcon_nd9fk_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_nd9fk)}",
+    ".___SIcon_1ma42_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_1ma42)}.___SIcon_1ma42_gg_.__interactive_1ma42_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1ma42_gg_.__interactive_1ma42_gg_:hover{filter:brightness(.8)}}.___SIcon_1ma42_gg_.__interactive_1ma42_gg_ path{pointer-events:none}",
     /*__inner_css_end__*/
-    "nd9fk_gg_"
+    "1ma42_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SIcon": "___SIcon_nd9fk_gg_",
-    "--color": "--color_nd9fk"
+    "__SIcon": "___SIcon_1ma42_gg_",
+    "--color": "--color_1ma42",
+    "_interactive": "__interactive_1ma42_gg_"
   })
 );
-function calculateIndentStyles(props, scaleIndent) {
-  return removeUndefinedKeys({
-    margin: getAutoOrScaleIndent(props["m"], scaleIndent),
-    marginTop: getAutoOrScaleIndent(props["mt"], scaleIndent) || getAutoOrScaleIndent(props["my"], scaleIndent),
-    marginBottom: getAutoOrScaleIndent(props["mb"], scaleIndent) || getAutoOrScaleIndent(props["my"], scaleIndent),
-    marginLeft: getAutoOrScaleIndent(props["ml"], scaleIndent) || getAutoOrScaleIndent(props["mx"], scaleIndent),
-    marginRight: getAutoOrScaleIndent(props["mr"], scaleIndent) || getAutoOrScaleIndent(props["mx"], scaleIndent)
-  });
-}
-function Icon(_ref, ref) {
-  var _props$className;
-  var _ref$width = _ref.width, width = _ref$width === void 0 ? 16 : _ref$width, _ref$height = _ref.height, height = _ref$height === void 0 ? 16 : _ref$height, _ref$viewBox = _ref.viewBox, viewBox = _ref$viewBox === void 0 ? "0 0 16 16" : _ref$viewBox, colorProps = _ref.color, _ref$scaleIndent = _ref.scaleIndent, scaleIndent = _ref$scaleIndent === void 0 ? 4 : _ref$scaleIndent, m = _ref.m, mt = _ref.mt, mb = _ref.mb, my = _ref.my, ml = _ref.ml, mr = _ref.mr, mx = _ref.mx, props = _objectWithoutProperties(_ref, _excluded);
-  var SIcon = "svg";
+function Icon(props, ref) {
+  var _useBox = useBox(_objectSpread({
+    "tag": "svg",
+    "data-ui-name": "Icon",
+    "width": 16,
+    "height": 16,
+    "viewBox": "0 0 16 16",
+    "focusable": props.interactive
+  }, props), ref), _useBox2 = _slicedToArray(_useBox, 2), SIcon = _useBox2[0], other = _useBox2[1];
+  var interactive = props.interactive, colorProps = props.color;
   var resolveColor = useColorResolver();
   var color = resolveColor(colorProps);
+  var _keyboardFocusEnhance = keyboardFocusEnhance()(_objectSpread({
+    disabled: !interactive
+  }, other)), keyboardFocused = _keyboardFocusEnhance.keyboardFocused, propsEnhance = _objectWithoutProperties(_keyboardFocusEnhance, _excluded);
   var sstyles = sstyled(styles);
   var _sstyles$cn = sstyles.cn("SIcon", {
-    "use:color": color
+    "use:color": color,
+    "interactive": interactive,
+    "keyboardFocused": keyboardFocused
   }), className = _sstyles$cn.className, style = _sstyles$cn.style;
-  var indentStyles = React.useMemo(function() {
-    return calculateIndentStyles({
-      m,
-      mt,
-      mb,
-      my,
-      ml,
-      mr,
-      mx
-    }, scaleIndent);
-  }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
+  function onKeyDown(event) {
+    if (propsEnhance.onKeyDown) {
+      return propsEnhance.onKeyDown(event);
+    }
+    if (interactive && propsEnhance.onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      propsEnhance.onClick(event);
+    }
+  }
+  var labelCheckRef = React.useRef();
+  React.useEffect(function() {
+    if (!interactive) return;
+    if (process.env.NODE_ENV !== "production") {
+      logger.warn(labelCheckRef.current && !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({
-    width,
-    height,
-    viewBox,
-    "aria-hidden": "true"
-  }, propsForElement(props), {
-    style: Object.assign({}, style, props.style, indentStyles),
-    className: "".concat(className, " ").concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ""),
-    ref
+    role: interactive ? "button" : void 0,
+    "aria-hidden": interactive ? void 0 : "true"
+  }, propsForElement(propsEnhance), {
+    style: Object.assign({}, style, propsEnhance.style),
+    className: cn(className, propsEnhance.className) || void 0,
+    onKeyDown,
+    ref: forkedRef
   }));
 }
+Icon.displayName = "Icon";
 const Icon_default = createBaseComponent(Icon);
 export {
   Icon_default as default

package/lib/esm/style/icon.shadow.css

@@ -8,3 +8,16 @@ SIcon {
   outline: none;
   color: var(--color);
 }
+
+
+SIcon[interactive] {
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+
+  path {
+    pointer-events: none;
+  }
+}