@semcore/spin - npm Package Compare versions

Comparing version 5.25.0 to 5.26.0-prerelease.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## [5.26.0] - 2024-05-23
+
+### Added
+
+- Live region "Loading…" announcement for assistive technologies.
+- "Loading…" aria-label.
+- `locale` prop.
+
 ## [5.25.0] - 2024-05-22
@@ -7,0 +15,0 @@

lib/cjs/Spin.js

@@ -20,16 +20,19 @@ "use strict";
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
+var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
+var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
+var _ScreenReaderOnly = require("@semcore/utils/lib/ScreenReaderOnly");
 /*__reshadow-styles__:"./style/spin.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes spin-rotate_k4jfi{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.___SSpin_k4jfi_gg_{display:block;flex-shrink:0;box-sizing:border-box;animation-name:spin-rotate_k4jfi;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:.75s;fill:var(--theme_k4jfi)}.___SSpin_k4jfi_gg_._theme_dark_k4jfi_gg_{fill:var(--intergalactic-border-primary, #c4c7cf)}.___SSpin_k4jfi_gg_._theme_invert_k4jfi_gg_{fill:var(--intergalactic-border-primary-invert, #ffffff)}.___SSpin_k4jfi_gg_.__centered_k4jfi_gg_{margin:auto}.___SSpin_k4jfi_gg_._size_xs_k4jfi_gg_{width:16px;height:16px}.___SSpin_k4jfi_gg_._size_s_k4jfi_gg_{width:20px;height:20px}.___SSpin_k4jfi_gg_._size_m_k4jfi_gg_{width:24px;height:24px}.___SSpin_k4jfi_gg_._size_l_k4jfi_gg_{width:32px;height:32px}.___SSpin_k4jfi_gg_._size_xl_k4jfi_gg_{width:48px;height:48px}.___SSpin_k4jfi_gg_._size_xxl_k4jfi_gg_{width:72px;height:72px}@media (prefers-reduced-motion){.___SSpin_k4jfi_gg_{animation-name:none}}" /*__inner_css_end__*/, "k4jfi_gg_") /*__reshadow_css_end__*/, {
-  "@spin-rotate": "spin-rotate_k4jfi",
-  "__SSpin": "___SSpin_k4jfi_gg_",
-  "--theme": "--theme_k4jfi",
-  "_theme_dark": "_theme_dark_k4jfi_gg_",
-  "_theme_invert": "_theme_invert_k4jfi_gg_",
-  "_centered": "__centered_k4jfi_gg_",
-  "_size_xs": "_size_xs_k4jfi_gg_",
-  "_size_s": "_size_s_k4jfi_gg_",
-  "_size_m": "_size_m_k4jfi_gg_",
-  "_size_l": "_size_l_k4jfi_gg_",
-  "_size_xl": "_size_xl_k4jfi_gg_",
-  "_size_xxl": "_size_xxl_k4jfi_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes spin-rotate_1gxji{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.___SSpin_1gxji_gg_{display:block;flex-shrink:0;box-sizing:border-box;animation-name:spin-rotate_1gxji;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:.75s;fill:var(--theme_1gxji)}.___SSpin_1gxji_gg_._theme_dark_1gxji_gg_{fill:var(--intergalactic-border-primary, #c4c7cf)}.___SSpin_1gxji_gg_._theme_invert_1gxji_gg_{fill:var(--intergalactic-border-primary-invert, #ffffff)}.___SSpin_1gxji_gg_.__centered_1gxji_gg_{margin:auto}.___SSpin_1gxji_gg_._size_xs_1gxji_gg_{width:16px;height:16px}.___SSpin_1gxji_gg_._size_s_1gxji_gg_{width:20px;height:20px}.___SSpin_1gxji_gg_._size_m_1gxji_gg_{width:24px;height:24px}.___SSpin_1gxji_gg_._size_l_1gxji_gg_{width:32px;height:32px}.___SSpin_1gxji_gg_._size_xl_1gxji_gg_{width:48px;height:48px}.___SSpin_1gxji_gg_._size_xxl_1gxji_gg_{width:72px;height:72px}@media (prefers-reduced-motion){.___SSpin_1gxji_gg_{animation-name:none}}" /*__inner_css_end__*/, "1gxji_gg_") /*__reshadow_css_end__*/, {
+  "@spin-rotate": "spin-rotate_1gxji",
+  "__SSpin": "___SSpin_1gxji_gg_",
+  "--theme": "--theme_1gxji",
+  "_theme_dark": "_theme_dark_1gxji_gg_",
+  "_theme_invert": "_theme_invert_1gxji_gg_",
+  "_centered": "__centered_1gxji_gg_",
+  "_size_xs": "_size_xs_1gxji_gg_",
+  "_size_s": "_size_s_1gxji_gg_",
+  "_size_m": "_size_m_1gxji_gg_",
+  "_size_l": "_size_l_1gxji_gg_",
+  "_size_xl": "_size_xl_1gxji_gg_",
+  "_size_xxl": "_size_xxl_1gxji_gg_"
 });
@@ -53,3 +56,4 @@ var RootSpin = /*#__PURE__*/function (_Component) {
         theme = _this$asProps.theme,
-        resolveColor = _this$asProps.resolveColor;
+        resolveColor = _this$asProps.resolveColor,
+        getI18nText = _this$asProps.getI18nText;
       return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSpin, _ref2.cn("SSpin", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
@@ -60,4 +64,13 @@ "tag": 'svg',
         "aria-busy": 'true',
-        "aria-hidden": 'true'
-      }, _ref))), /*#__PURE__*/_react["default"].createElement("path", _ref2.cn("path", {
+        "aria-label": getI18nText('loading')
+      }, _ref))), /*#__PURE__*/_react["default"].createElement("foreignObject", _ref2.cn("foreignObject", {
+        "x": '0',
+        "y": '0',
+        "width": '0',
+        "height": '0'
+      }), /*#__PURE__*/_react["default"].createElement(_ScreenReaderOnly.ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+        "aria-live": 'polite',
+        "role": 'status',
+        "aria-atomic": 'true'
+      }), getI18nText('loading'))), /*#__PURE__*/_react["default"].createElement("path", _ref2.cn("path", {
         "d": 'M16.98 20.6256C17.5433 21.6013 18.8054 21.9477 19.6718 21.2274C21.567 19.6517 22.9447 17.5183 23.5911 15.1058C24.4148 12.0317 23.9836 8.75621 22.3923 6C20.801 3.24379 18.18 1.23261 15.1058 0.408891C12.6934 -0.237529 10.1569 -0.111098 7.84473 0.742337C6.78777 1.13246 6.45667 2.39867 7.02 3.37439V3.37439C7.58333 4.3501 8.83088 4.65471 9.91792 4.35856C11.2588 3.99325 12.6844 3.984 14.0498 4.34987C16.0788 4.89352 17.8087 6.2209 18.8589 8.04C19.9092 9.8591 20.1938 12.0209 19.6501 14.0498C19.2843 15.4153 18.5634 16.6453 17.5766 17.6239C16.7766 18.4172 16.4167 19.6499 16.98 20.6256V20.6256Z'
@@ -71,3 +84,3 @@ })), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})));
 (0, _defineProperty2["default"])(RootSpin, "style", style);
-(0, _defineProperty2["default"])(RootSpin, "enhance", [(0, _resolveColorEnhance["default"])()]);
+(0, _defineProperty2["default"])(RootSpin, "enhance", [(0, _resolveColorEnhance["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
 (0, _defineProperty2["default"])(RootSpin, "defaultProps", {
@@ -74,0 +87,0 @@ size: 'm',

lib/es6/Spin.js

@@ -13,16 +13,19 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
+import { ScreenReaderOnly } from '@semcore/utils/lib/ScreenReaderOnly';
 /*__reshadow-styles__:"./style/spin.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes spin-rotate_k4jfi{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.___SSpin_k4jfi_gg_{display:block;flex-shrink:0;box-sizing:border-box;animation-name:spin-rotate_k4jfi;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:.75s;fill:var(--theme_k4jfi)}.___SSpin_k4jfi_gg_._theme_dark_k4jfi_gg_{fill:var(--intergalactic-border-primary, #c4c7cf)}.___SSpin_k4jfi_gg_._theme_invert_k4jfi_gg_{fill:var(--intergalactic-border-primary-invert, #ffffff)}.___SSpin_k4jfi_gg_.__centered_k4jfi_gg_{margin:auto}.___SSpin_k4jfi_gg_._size_xs_k4jfi_gg_{width:16px;height:16px}.___SSpin_k4jfi_gg_._size_s_k4jfi_gg_{width:20px;height:20px}.___SSpin_k4jfi_gg_._size_m_k4jfi_gg_{width:24px;height:24px}.___SSpin_k4jfi_gg_._size_l_k4jfi_gg_{width:32px;height:32px}.___SSpin_k4jfi_gg_._size_xl_k4jfi_gg_{width:48px;height:48px}.___SSpin_k4jfi_gg_._size_xxl_k4jfi_gg_{width:72px;height:72px}@media (prefers-reduced-motion){.___SSpin_k4jfi_gg_{animation-name:none}}" /*__inner_css_end__*/, "k4jfi_gg_") /*__reshadow_css_end__*/, {
-  "@spin-rotate": "spin-rotate_k4jfi",
-  "__SSpin": "___SSpin_k4jfi_gg_",
-  "--theme": "--theme_k4jfi",
-  "_theme_dark": "_theme_dark_k4jfi_gg_",
-  "_theme_invert": "_theme_invert_k4jfi_gg_",
-  "_centered": "__centered_k4jfi_gg_",
-  "_size_xs": "_size_xs_k4jfi_gg_",
-  "_size_s": "_size_s_k4jfi_gg_",
-  "_size_m": "_size_m_k4jfi_gg_",
-  "_size_l": "_size_l_k4jfi_gg_",
-  "_size_xl": "_size_xl_k4jfi_gg_",
-  "_size_xxl": "_size_xxl_k4jfi_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes spin-rotate_1gxji{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.___SSpin_1gxji_gg_{display:block;flex-shrink:0;box-sizing:border-box;animation-name:spin-rotate_1gxji;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:.75s;fill:var(--theme_1gxji)}.___SSpin_1gxji_gg_._theme_dark_1gxji_gg_{fill:var(--intergalactic-border-primary, #c4c7cf)}.___SSpin_1gxji_gg_._theme_invert_1gxji_gg_{fill:var(--intergalactic-border-primary-invert, #ffffff)}.___SSpin_1gxji_gg_.__centered_1gxji_gg_{margin:auto}.___SSpin_1gxji_gg_._size_xs_1gxji_gg_{width:16px;height:16px}.___SSpin_1gxji_gg_._size_s_1gxji_gg_{width:20px;height:20px}.___SSpin_1gxji_gg_._size_m_1gxji_gg_{width:24px;height:24px}.___SSpin_1gxji_gg_._size_l_1gxji_gg_{width:32px;height:32px}.___SSpin_1gxji_gg_._size_xl_1gxji_gg_{width:48px;height:48px}.___SSpin_1gxji_gg_._size_xxl_1gxji_gg_{width:72px;height:72px}@media (prefers-reduced-motion){.___SSpin_1gxji_gg_{animation-name:none}}" /*__inner_css_end__*/, "1gxji_gg_") /*__reshadow_css_end__*/, {
+  "@spin-rotate": "spin-rotate_1gxji",
+  "__SSpin": "___SSpin_1gxji_gg_",
+  "--theme": "--theme_1gxji",
+  "_theme_dark": "_theme_dark_1gxji_gg_",
+  "_theme_invert": "_theme_invert_1gxji_gg_",
+  "_centered": "__centered_1gxji_gg_",
+  "_size_xs": "_size_xs_1gxji_gg_",
+  "_size_s": "_size_s_1gxji_gg_",
+  "_size_m": "_size_m_1gxji_gg_",
+  "_size_l": "_size_l_1gxji_gg_",
+  "_size_xl": "_size_xl_1gxji_gg_",
+  "_size_xxl": "_size_xxl_1gxji_gg_"
 });
@@ -46,3 +49,4 @@ var RootSpin = /*#__PURE__*/function (_Component) {
         theme = _this$asProps.theme,
-        resolveColor = _this$asProps.resolveColor;
+        resolveColor = _this$asProps.resolveColor,
+        getI18nText = _this$asProps.getI18nText;
       return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SSpin, _ref2.cn("SSpin", _objectSpread({}, _assignProps({
@@ -53,4 +57,13 @@ "tag": 'svg',
         "aria-busy": 'true',
-        "aria-hidden": 'true'
-      }, _ref))), /*#__PURE__*/React.createElement("path", _ref2.cn("path", {
+        "aria-label": getI18nText('loading')
+      }, _ref))), /*#__PURE__*/React.createElement("foreignObject", _ref2.cn("foreignObject", {
+        "x": '0',
+        "y": '0',
+        "width": '0',
+        "height": '0'
+      }), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+        "aria-live": 'polite',
+        "role": 'status',
+        "aria-atomic": 'true'
+      }), getI18nText('loading'))), /*#__PURE__*/React.createElement("path", _ref2.cn("path", {
         "d": 'M16.98 20.6256C17.5433 21.6013 18.8054 21.9477 19.6718 21.2274C21.567 19.6517 22.9447 17.5183 23.5911 15.1058C24.4148 12.0317 23.9836 8.75621 22.3923 6C20.801 3.24379 18.18 1.23261 15.1058 0.408891C12.6934 -0.237529 10.1569 -0.111098 7.84473 0.742337C6.78777 1.13246 6.45667 2.39867 7.02 3.37439V3.37439C7.58333 4.3501 8.83088 4.65471 9.91792 4.35856C11.2588 3.99325 12.6844 3.984 14.0498 4.34987C16.0788 4.89352 17.8087 6.2209 18.8589 8.04C19.9092 9.8591 20.1938 12.0209 19.6501 14.0498C19.2843 15.4153 18.5634 16.6453 17.5766 17.6239C16.7766 18.4172 16.4167 19.6499 16.98 20.6256V20.6256Z'
@@ -64,3 +77,3 @@ })), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})));
 _defineProperty(RootSpin, "style", style);
-_defineProperty(RootSpin, "enhance", [resolveColorEnhance()]);
+_defineProperty(RootSpin, "enhance", [resolveColorEnhance(), i18nEnhance(localizedMessages)]);
 _defineProperty(RootSpin, "defaultProps", {
@@ -67,0 +80,0 @@ size: 'm',

lib/types/index.d.ts

@@ -22,2 +22,4 @@ import { UnknownProperties, Intergalactic } from '@semcore/core';
   centered?: boolean;
+
+  locale?: string;
 };
@@ -24,0 +26,0 @@

package.json

 {
   "name": "@semcore/spin",
   "description": "Semrush Spin Component",
-  "version": "5.25.0",
+  "version": "5.26.0-prerelease.0",
   "main": "lib/cjs/index.js",
@@ -12,7 +12,7 @@ "module": "lib/es6/index.js",
   "dependencies": {
-    "@semcore/utils": "4.27.0",
-    "@semcore/flex-box": "5.26.0"
+    "@semcore/utils": "4.28.0-prerelease.0",
+    "@semcore/flex-box": "5.27.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.25.0-prerelease.0",
     "react": "16.8 - 18",
@@ -19,0 +19,0 @@ "react-dom": "16.8 - 18"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53864

increased by23.52%

Number of package files

51

increased by168.42%

Lines of code

478

increased by59.33%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@semcore/flex-box@5.27.0-prerelease.0(transitive)

• + Added@semcore/utils@4.28.0-prerelease.0(transitive)

• - Removed@semcore/flex-box@5.26.0(transitive)

• - Removed@semcore/utils@4.27.0(transitive)

• Updated@semcore/flex-box@5.27.0-prerelease.0

• Updated@semcore/utils@4.28.0-prerelease.0