@semcore/skeleton 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -2,59 +2,29 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [4.1.0] - 2022-09-22
-
-### Changed
-
-- All skeletons are `aria-busy` from now.
-
-## [4.0.8] - 2022-08-30
-
-### Changed
-
-- 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]).
-
-## [4.0.7] - 2022-08-18
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/utils` [3.36.0 ~> 3.37.0], `@semcore/flex-box` [4.5.9 ~> 4.5.10]).
-
-## [4.0.6] - 2022-08-11
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/utils` [3.35.1 ~> 3.36.0], `@semcore/flex-box` [4.5.8 ~> 4.5.9]).
-
-## [4.0.5] - 2022-07-22
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7]).
-
-## [4.0.4] - 2022-07-07
+## [4.2.0] - 2022-10-10
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0], `@semcore/flex-box` [4.5.5 ~> 4.5.6]).
+- Added support for React 18 🔥
 
-## [4.0.3] - 2022-06-02
+## [4.1.1] - 2022-10-04
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.32.2 ~> 3.33.0], `@semcore/flex-box` [4.5.4 ~> 4.5.5]).
+- Version patch update due to children dependencies update (`@semcore/utils` [3.37.1 ~> 3.37.2], `@semcore/flex-box` [4.5.11 ~> 4.5.12]).
 
-## [4.0.2] - 2022-05-31
+## [4.1.0] - 2022-09-22
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.32.1 ~> 3.32.2], `@semcore/flex-box` [4.5.3 ~> 4.5.4]).
+- All skeletons are `aria-busy` from now.
 
-## [4.0.1] - 2022-05-19
+## [4.0.8] - 2022-08-30
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.32.0 ~> 3.32.1], `@semcore/flex-box` [4.5.1 ~> 4.5.3]).
+- 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]).
 
 ## [4.0.0] - 2022-05-17
 

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright ©, 2022, Semrush Inc. (written by Roman Lysov, Sergey Kobets, Mikhail Karachev, Julia Mnizhek, Elena Krasnopolskaia, Mikhail Sereniti).
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/cjs/Skeleton.js

@@ -52,17 +52,17 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SSkeleton_1sa82_gg_{-webkit-animation-name:pulse_1sa82;animation-name:pulse_1sa82;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:var(--durationAnim_1sa82);animation-duration:var(--durationAnim_1sa82);will-change:opacity}@-webkit-keyframes pulse_1sa82{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes pulse_1sa82{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1sa82_gg_._theme_invert_1sa82_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_1sa82_gg_._theme_dark_1sa82_gg_{fill:hsla(0,0%,100%,.3)}.___SText_1sa82_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1sa82_gg_{-webkit-animation-name:none;animation-name:none}}"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SSkeleton_1vy6i_gg_ {\n  animation-name: pulse_1vy6i;\n  animation-iteration-count: infinite;\n  animation-timing-function: ease-in-out;\n  animation-duration: var(--durationAnim_1vy6i);\n  will-change: opacity;\n}\n\n@keyframes pulse_1vy6i {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.___SSkeleton_1vy6i_gg_._theme_invert_1vy6i_gg_ {\n  fill: rgba(224, 225, 233, 0.8);\n}\n\n.___SSkeleton_1vy6i_gg_._theme_dark_1vy6i_gg_ {\n  fill: rgba(255, 255, 255, 0.3);\n}\n\n.___SText_1vy6i_gg_ {\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion) {\n  .___SSkeleton_1vy6i_gg_ {\n    animation-name: none;\n  }\n}\n"
 /*__inner_css_end__*/
-, "1sa82_gg_")
+, "1vy6i_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSkeleton": "___SSkeleton_1sa82_gg_",
-  "--durationAnim": "--durationAnim_1sa82",
-  "@pulse": "pulse_1sa82",
-  "_theme_invert": "_theme_invert_1sa82_gg_",
-  "_theme_dark": "_theme_dark_1sa82_gg_",
-  "__SText": "___SText_1sa82_gg_"
+  "__SSkeleton": "___SSkeleton_1vy6i_gg_",
+  "--durationAnim": "--durationAnim_1vy6i",
+  "@pulse": "pulse_1vy6i",
+  "_theme_invert": "_theme_invert_1vy6i_gg_",
+  "_theme_dark": "_theme_dark_1vy6i_gg_",
+  "__SText": "___SText_1vy6i_gg_"
 });
 var MAP_COLOR_THEME = {
   dark: 'rgba(255, 255, 255, 0.3)',

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 { IBoxProps } from '@semcore/flex-box';\nimport { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';\nimport { CProps, ReturnEl } from '@semcore/core';\n\nexport interface ISkeletonProps extends IBoxProps, IUniqueIDProps {\n  /**\n   *  Skeleton visibility control property\n   */\n  hidden?: boolean;\n  /**\n   * Animation speed in ms\n   * @default 2000\n   */\n  duration?: string | number;\n  /**\n   * Skeleton theme\n   * @default invert\n   */\n  theme?: 'dark' | 'invert';\n}\n\nexport interface ISkeletonCtx {\n  gradientUrl: 'string';\n}\n\nexport interface ISkeletonTextProps extends IBoxProps {\n  /**\n   * Number of items to be returned\n   * @default 1\n   */\n  amount?: string | number;\n}\n\nexport interface AreaChartSkeletonProps extends ISkeletonProps {\n  type?: 'linear' | 'monotone';\n}\n\nexport interface BarChartSkeletonProps extends ISkeletonProps {\n  layout?: 'horizontal' | 'vertical';\n}\n\nexport interface HistogramChartSkeletonProps extends ISkeletonProps {\n  layout?: 'horizontal' | 'vertical';\n}\n\nexport interface LineChartSkeletonProps extends ISkeletonProps {\n  type?: 'linear' | 'monotone';\n}\n\ndeclare const Skeleton: (<T>(props: CProps<ISkeletonProps & T, ISkeletonCtx>) => ReturnEl) & {\n  Text: <T>(props: ISkeletonTextProps & T) => ReturnEl;\n};\ndeclare const AreaChartSkeleton: <T>(props: AreaChartSkeletonProps & T) => ReturnEl;\ndeclare const BarChartSkeleton: <T>(props: BarChartSkeletonProps & T) => ReturnEl;\ndeclare const HistogramChartSkeleton: <T>(props: HistogramChartSkeletonProps & T) => ReturnEl;\ndeclare const LineChartSkeleton: <T>(props: LineChartSkeletonProps & T) => ReturnEl;\ndeclare const PieChartSkeleton: typeof Skeleton;\ndeclare const VennChartSkeleton: typeof Skeleton;\ndeclare const BubbleChartSkeleton: typeof Skeleton;\ndeclare const ScatterPlotChartSkeleton: typeof Skeleton;\n\nexport default Skeleton;\nexport {\n  AreaChartSkeleton,\n  BarChartSkeleton,\n  HistogramChartSkeleton,\n  LineChartSkeleton,\n  PieChartSkeleton,\n  VennChartSkeleton,\n  BubbleChartSkeleton,\n  ScatterPlotChartSkeleton,\n};\n"],"mappings":""}

package/lib/es6/Skeleton.js

@@ -28,17 +28,17 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SSkeleton_1sa82_gg_{-webkit-animation-name:pulse_1sa82;animation-name:pulse_1sa82;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:var(--durationAnim_1sa82);animation-duration:var(--durationAnim_1sa82);will-change:opacity}@-webkit-keyframes pulse_1sa82{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes pulse_1sa82{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1sa82_gg_._theme_invert_1sa82_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_1sa82_gg_._theme_dark_1sa82_gg_{fill:hsla(0,0%,100%,.3)}.___SText_1sa82_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1sa82_gg_{-webkit-animation-name:none;animation-name:none}}"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SSkeleton_1vy6i_gg_ {\n  animation-name: pulse_1vy6i;\n  animation-iteration-count: infinite;\n  animation-timing-function: ease-in-out;\n  animation-duration: var(--durationAnim_1vy6i);\n  will-change: opacity;\n}\n\n@keyframes pulse_1vy6i {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.___SSkeleton_1vy6i_gg_._theme_invert_1vy6i_gg_ {\n  fill: rgba(224, 225, 233, 0.8);\n}\n\n.___SSkeleton_1vy6i_gg_._theme_dark_1vy6i_gg_ {\n  fill: rgba(255, 255, 255, 0.3);\n}\n\n.___SText_1vy6i_gg_ {\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion) {\n  .___SSkeleton_1vy6i_gg_ {\n    animation-name: none;\n  }\n}\n"
 /*__inner_css_end__*/
-, "1sa82_gg_")
+, "1vy6i_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSkeleton": "___SSkeleton_1sa82_gg_",
-  "--durationAnim": "--durationAnim_1sa82",
-  "@pulse": "pulse_1sa82",
-  "_theme_invert": "_theme_invert_1sa82_gg_",
-  "_theme_dark": "_theme_dark_1sa82_gg_",
-  "__SText": "___SText_1sa82_gg_"
+  "__SSkeleton": "___SSkeleton_1vy6i_gg_",
+  "--durationAnim": "--durationAnim_1vy6i",
+  "@pulse": "pulse_1vy6i",
+  "_theme_invert": "_theme_invert_1vy6i_gg_",
+  "_theme_dark": "_theme_dark_1vy6i_gg_",
+  "__SText": "___SText_1vy6i_gg_"
 });
 var MAP_COLOR_THEME = {
   dark: 'rgba(255, 255, 255, 0.3)',

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 { IBoxProps } from '@semcore/flex-box';\nimport { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';\nimport { CProps, ReturnEl } from '@semcore/core';\n\nexport interface ISkeletonProps extends IBoxProps, IUniqueIDProps {\n  /**\n   *  Skeleton visibility control property\n   */\n  hidden?: boolean;\n  /**\n   * Animation speed in ms\n   * @default 2000\n   */\n  duration?: string | number;\n  /**\n   * Skeleton theme\n   * @default invert\n   */\n  theme?: 'dark' | 'invert';\n}\n\nexport interface ISkeletonCtx {\n  gradientUrl: 'string';\n}\n\nexport interface ISkeletonTextProps extends IBoxProps {\n  /**\n   * Number of items to be returned\n   * @default 1\n   */\n  amount?: string | number;\n}\n\nexport interface AreaChartSkeletonProps extends ISkeletonProps {\n  type?: 'linear' | 'monotone';\n}\n\nexport interface BarChartSkeletonProps extends ISkeletonProps {\n  layout?: 'horizontal' | 'vertical';\n}\n\nexport interface HistogramChartSkeletonProps extends ISkeletonProps {\n  layout?: 'horizontal' | 'vertical';\n}\n\nexport interface LineChartSkeletonProps extends ISkeletonProps {\n  type?: 'linear' | 'monotone';\n}\n\ndeclare const Skeleton: (<T>(props: CProps<ISkeletonProps & T, ISkeletonCtx>) => ReturnEl) & {\n  Text: <T>(props: ISkeletonTextProps & T) => ReturnEl;\n};\ndeclare const AreaChartSkeleton: <T>(props: AreaChartSkeletonProps & T) => ReturnEl;\ndeclare const BarChartSkeleton: <T>(props: BarChartSkeletonProps & T) => ReturnEl;\ndeclare const HistogramChartSkeleton: <T>(props: HistogramChartSkeletonProps & T) => ReturnEl;\ndeclare const LineChartSkeleton: <T>(props: LineChartSkeletonProps & T) => ReturnEl;\ndeclare const PieChartSkeleton: typeof Skeleton;\ndeclare const VennChartSkeleton: typeof Skeleton;\ndeclare const BubbleChartSkeleton: typeof Skeleton;\ndeclare const ScatterPlotChartSkeleton: typeof Skeleton;\n\nexport default Skeleton;\nexport {\n  AreaChartSkeleton,\n  BarChartSkeleton,\n  HistogramChartSkeleton,\n  LineChartSkeleton,\n  PieChartSkeleton,\n  VennChartSkeleton,\n  BubbleChartSkeleton,\n  ScatterPlotChartSkeleton,\n};\n"],"mappings":""}

package/package.json

@@ -1,24 +1,20 @@
 {
   "name": "@semcore/skeleton",
   "description": "Semrush Skeleton Component",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
-  "scripts": {
-    "build": "build --source=js",
-    "test": "jest"
-  },
   "dependencies": {
     "@semcore/utils": "^3.24",
     "@semcore/flex-box": "^4"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
-    "react": "16.8 - 17"
+    "react": "16.8 - 18"
   },
   "jest": {
     "preset": "@semcore/jest-preset-ui"
@@ -29,6 +25,11 @@
     "directory": "semcore/skeleton"
   },
   "devDependencies": {
+    "@types/react": "18.0.21",
     "@semcore/jest-preset-ui": "1.0.0"
+  },
+  "scripts": {
+    "build": "pnpm semcore-builder --source=js",
+    "test": "jest"
   }
-}
+}

package/lib/cjs/index.d.ts

@@ -1,72 +0,0 @@
-import { IBoxProps } from '@semcore/flex-box';
-import { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';
-import { CProps, ReturnEl } from '@semcore/core';
-
-export interface ISkeletonProps extends IBoxProps, IUniqueIDProps {
-  /**
-   *  Skeleton visibility control property
-   */
-  hidden?: boolean;
-  /**
-   * Animation speed in ms
-   * @default 2000
-   */
-  duration?: string | number;
-  /**
-   * Skeleton theme
-   * @default invert
-   */
-  theme?: 'dark' | 'invert';
-}
-
-export interface ISkeletonCtx {
-  gradientUrl: 'string';
-}
-
-export interface ISkeletonTextProps extends IBoxProps {
-  /**
-   * Number of items to be returned
-   * @default 1
-   */
-  amount?: string | number;
-}
-
-export interface AreaChartSkeletonProps extends ISkeletonProps {
-  type?: 'linear' | 'monotone';
-}
-
-export interface BarChartSkeletonProps extends ISkeletonProps {
-  layout?: 'horizontal' | 'vertical';
-}
-
-export interface HistogramChartSkeletonProps extends ISkeletonProps {
-  layout?: 'horizontal' | 'vertical';
-}
-
-export interface LineChartSkeletonProps extends ISkeletonProps {
-  type?: 'linear' | 'monotone';
-}
-
-declare const Skeleton: (<T>(props: CProps<ISkeletonProps & T, ISkeletonCtx>) => ReturnEl) & {
-  Text: <T>(props: ISkeletonTextProps & T) => ReturnEl;
-};
-declare const AreaChartSkeleton: <T>(props: AreaChartSkeletonProps & T) => ReturnEl;
-declare const BarChartSkeleton: <T>(props: BarChartSkeletonProps & T) => ReturnEl;
-declare const HistogramChartSkeleton: <T>(props: HistogramChartSkeletonProps & T) => ReturnEl;
-declare const LineChartSkeleton: <T>(props: LineChartSkeletonProps & T) => ReturnEl;
-declare const PieChartSkeleton: typeof Skeleton;
-declare const VennChartSkeleton: typeof Skeleton;
-declare const BubbleChartSkeleton: typeof Skeleton;
-declare const ScatterPlotChartSkeleton: typeof Skeleton;
-
-export default Skeleton;
-export {
-  AreaChartSkeleton,
-  BarChartSkeleton,
-  HistogramChartSkeleton,
-  LineChartSkeleton,
-  PieChartSkeleton,
-  VennChartSkeleton,
-  BubbleChartSkeleton,
-  ScatterPlotChartSkeleton,
-};

package/lib/es6/index.d.ts

@@ -1,72 +0,0 @@
-import { IBoxProps } from '@semcore/flex-box';
-import { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';
-import { CProps, ReturnEl } from '@semcore/core';
-
-export interface ISkeletonProps extends IBoxProps, IUniqueIDProps {
-  /**
-   *  Skeleton visibility control property
-   */
-  hidden?: boolean;
-  /**
-   * Animation speed in ms
-   * @default 2000
-   */
-  duration?: string | number;
-  /**
-   * Skeleton theme
-   * @default invert
-   */
-  theme?: 'dark' | 'invert';
-}
-
-export interface ISkeletonCtx {
-  gradientUrl: 'string';
-}
-
-export interface ISkeletonTextProps extends IBoxProps {
-  /**
-   * Number of items to be returned
-   * @default 1
-   */
-  amount?: string | number;
-}
-
-export interface AreaChartSkeletonProps extends ISkeletonProps {
-  type?: 'linear' | 'monotone';
-}
-
-export interface BarChartSkeletonProps extends ISkeletonProps {
-  layout?: 'horizontal' | 'vertical';
-}
-
-export interface HistogramChartSkeletonProps extends ISkeletonProps {
-  layout?: 'horizontal' | 'vertical';
-}
-
-export interface LineChartSkeletonProps extends ISkeletonProps {
-  type?: 'linear' | 'monotone';
-}
-
-declare const Skeleton: (<T>(props: CProps<ISkeletonProps & T, ISkeletonCtx>) => ReturnEl) & {
-  Text: <T>(props: ISkeletonTextProps & T) => ReturnEl;
-};
-declare const AreaChartSkeleton: <T>(props: AreaChartSkeletonProps & T) => ReturnEl;
-declare const BarChartSkeleton: <T>(props: BarChartSkeletonProps & T) => ReturnEl;
-declare const HistogramChartSkeleton: <T>(props: HistogramChartSkeletonProps & T) => ReturnEl;
-declare const LineChartSkeleton: <T>(props: LineChartSkeletonProps & T) => ReturnEl;
-declare const PieChartSkeleton: typeof Skeleton;
-declare const VennChartSkeleton: typeof Skeleton;
-declare const BubbleChartSkeleton: typeof Skeleton;
-declare const ScatterPlotChartSkeleton: typeof Skeleton;
-
-export default Skeleton;
-export {
-  AreaChartSkeleton,
-  BarChartSkeleton,
-  HistogramChartSkeleton,
-  LineChartSkeleton,
-  PieChartSkeleton,
-  VennChartSkeleton,
-  BubbleChartSkeleton,
-  ScatterPlotChartSkeleton,
-};