@infomaximum/ui-kit 0.14.11 → 0.15.0

package/dist/components/Checkbox/Checkbox.styles.d.ts

@@ -12,6 +12,7 @@ export declare const checkboxStyle: (checked: boolean, disabled: boolean, isHove
         readonly justifyContent: "center";
         readonly alignItems: "center";
         readonly position: "relative";
+        readonly flex: "0 0 auto";
         readonly width: 16;
         readonly height: 16;
         readonly boxSizing: "border-box";

package/dist/components/Checkbox/Checkbox.styles.js

@@ -39,6 +39,7 @@ const checkboxStyle = (checked, disabled, isHover) => {
       justifyContent: "center",
       alignItems: "center",
       position: "relative",
+      flex: "0 0 auto",
       width: theme.controlInteractiveSize,
       height: theme.controlInteractiveSize,
       boxSizing: "border-box",

package/dist/components/Spin/Spin.d.ts

@@ -0,0 +1,2 @@
+import { SpinProps } from './Spin.types';
+export declare const Spin: import('react').NamedExoticComponent<SpinProps>;

package/dist/components/Spin/Spin.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { memo, useState, useEffect, Fragment } from "react";
+import { getSpinTokens } from "./Spin.tokens.js";
+import { shouldDelay } from "./Spin.utils.js";
+import { uniqueId, isUndefined } from "lodash-es";
+import { getWithFullscreenPropWrapperStyle, withChildrenPropWrapperStyle, baseWrapperStyle, getSpinWrapperStyle, getForeignObjectSpinInnerStyle, getTipWrapperStyle, childrenWrapperStyle, containerStyle } from "./Spin.styles.js";
+import { useTheme } from "../../hooks/useTheme/useTheme.js";
+const SpinComponent = (props) => {
+  const {
+    delay,
+    fullscreen = false,
+    size = "middle",
+    spinning: spinningProp = true,
+    tip,
+    children
+  } = props;
+  const clipPathUniqId = uniqueId("spinner_clip_path_");
+  const theme = useTheme();
+  const spinTokens = getSpinTokens();
+  const [spinning, setSpinning] = useState(() => spinningProp && !shouldDelay(spinningProp, delay));
+  useEffect(() => {
+    if (spinningProp) {
+      if (isUndefined(delay)) {
+        setSpinning(true);
+        return;
+      }
+      const timerId = setTimeout(() => {
+        setSpinning(true);
+      }, delay);
+      return () => {
+        if (timerId) {
+          clearTimeout(timerId);
+        }
+      };
+    }
+    setSpinning(false);
+  }, [delay, spinningProp]);
+  if (children && !spinning) {
+    return children;
+  }
+  if (!spinning) {
+    return;
+  }
+  const Container = children ? "div" : Fragment;
+  const Wrapper = tip || children || fullscreen ? "div" : Fragment;
+  const containerProps = (() => {
+    if (!children) {
+      return {};
+    }
+    return {
+      css: containerStyle
+    };
+  })();
+  const wrapperProps = (() => {
+    if (!(tip || children || fullscreen)) {
+      return {};
+    }
+    if (fullscreen) {
+      return {
+        css: getWithFullscreenPropWrapperStyle(spinning)(theme)
+      };
+    }
+    if (children) {
+      return {
+        css: withChildrenPropWrapperStyle(theme)
+      };
+    }
+    return {
+      css: baseWrapperStyle(theme)
+    };
+  })();
+  return /* @__PURE__ */ jsxs(Container, { ...containerProps, children: [
+    /* @__PURE__ */ jsxs(Wrapper, { ...wrapperProps, children: [
+      /* @__PURE__ */ jsx("span", { css: getSpinWrapperStyle(spinTokens, size), children: /* @__PURE__ */ jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipPathUniqId})`, children: /* @__PURE__ */ jsx("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ jsx("div", { css: getForeignObjectSpinInnerStyle(fullscreen)(theme) }) }) }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipPathUniqId, children: /* @__PURE__ */ jsx("path", { d: "M30 16.0001C30.0001 14.8955 29.1047 14 28.0001 14C26.8955 13.9999 26.0001 14.8953 26 15.9999L28 16L30 16.0001ZM19.09 6.48877C20.1405 6.83008 21.2688 6.25516 21.6101 5.20465C21.9514 4.15413 21.3765 3.02583 20.326 2.68452L19.708 4.58665L19.09 6.48877ZM28 16L26 15.9999C25.9999 18.1116 25.3313 20.1692 24.0899 21.8776L25.7079 23.0532L27.3259 24.2288C29.0638 21.8371 29.9999 18.9565 30 16.0001L28 16ZM25.7079 23.0532L24.0899 21.8776C22.8486 23.586 21.0983 24.8575 19.0899 25.5101L19.7078 27.4122L20.3258 29.3143C23.1376 28.4008 25.588 26.6206 27.3259 24.2288L25.7079 23.0532ZM19.7078 27.4122L19.0899 25.5101C17.0814 26.1626 14.918 26.1625 12.9096 25.5099L12.2915 27.412L11.6734 29.3141C14.4852 30.2277 17.514 30.2278 20.3258 29.3143L19.7078 27.4122ZM12.2915 27.412L12.9096 25.5099C10.9012 24.8573 9.15098 23.5856 7.90974 21.8771L6.29169 23.0527L4.67363 24.2282C6.41137 26.6201 8.8617 28.4004 11.6734 29.3141L12.2915 27.412ZM6.29169 23.0527L7.90974 21.8771C6.6685 20.1686 5.99998 18.1111 6 15.9993L4 15.9993L2 15.9993C1.99998 18.9558 2.9359 21.8363 4.67363 24.2282L6.29169 23.0527ZM4 15.9993L6 15.9993C6.00002 13.8876 6.66856 11.83 7.90982 10.1215L6.29179 8.94598L4.67375 7.77041C2.93599 10.1622 2.00002 13.0428 2 15.9993L4 15.9993ZM6.29179 8.94598L7.90982 10.1215C9.15109 8.41309 10.9013 7.14144 12.9097 6.48885L12.2917 4.58675L11.6736 2.68464C8.86187 3.59827 6.41152 5.37857 4.67375 7.77041L6.29179 8.94598ZM12.2917 4.58675L12.9097 6.48885C14.9181 5.83626 17.0816 5.83623 19.09 6.48877L19.708 4.58665L20.326 2.68452C17.5142 1.77097 14.4854 1.77101 11.6736 2.68464L12.2917 4.58675Z" }) }) })
+      ] }) }),
+      tip && /* @__PURE__ */ jsx("div", { css: getTipWrapperStyle(fullscreen)(theme), children: tip })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { css: childrenWrapperStyle, children })
+  ] });
+};
+const Spin = memo(SpinComponent);
+export {
+  Spin
+};

package/dist/components/Spin/Spin.styles.d.ts

@@ -0,0 +1,64 @@
+import { Theme } from '../../themes';
+import { SpinTokens } from './Spin.tokens';
+import { SpinSize } from './Spin.types';
+export declare const containerStyle: {
+    readonly position: "relative";
+};
+export declare const baseWrapperStyle: (theme: Theme) => {
+    readonly display: "inline-flex";
+    readonly flexDirection: "column";
+    readonly alignItems: "center";
+    readonly rowGap: 4;
+};
+export declare const nonStaticPositionWrapperStyle: (theme: Theme) => {
+    justifyContent: string;
+    display: "inline-flex";
+    flexDirection: "column";
+    alignItems: "center";
+    rowGap: 4;
+    inset: number;
+};
+export declare const getWithFullscreenPropWrapperStyle: (spinning: boolean) => (theme: Theme) => {
+    justifyContent: string;
+    display: "inline-flex";
+    flexDirection: "column";
+    alignItems: "center";
+    rowGap: 4;
+    inset: number;
+    position: string;
+    backgroundColor: `rgba(${number}, ${number}, ${number}, 0.4)`;
+    width: string;
+    height: string;
+    visibility: string;
+    zIndex: number;
+};
+export declare const withChildrenPropWrapperStyle: (theme: Theme) => {
+    justifyContent: string;
+    display: "inline-flex";
+    flexDirection: "column";
+    alignItems: "center";
+    rowGap: 4;
+    inset: number;
+    position: string;
+    zIndex: number;
+};
+export declare const getSpinWrapperStyle: (spinTokens: SpinTokens, size: SpinSize) => {
+    display: string;
+    fontSize: number;
+    animation: string;
+};
+export declare const getForeignObjectSpinInnerStyle: (fullscreen: boolean) => (theme: Theme) => {
+    height: string;
+    backgroundImage: string;
+};
+export declare const getTipWrapperStyle: (fullscreen: boolean) => (theme: Theme) => {
+    color: "#FFFFFF" | "#0CB3B3";
+    fontFamily: "Roboto";
+    fontSize: 14;
+    lineHeight: "20px";
+};
+export declare const childrenWrapperStyle: {
+    readonly userSelect: "none";
+    readonly pointerEvents: "none";
+    readonly opacity: 0.5;
+};

package/dist/components/Spin/Spin.styles.js

@@ -0,0 +1,66 @@
+import { keyframes } from "@emotion/react";
+import { getFontSizeBySize } from "./Spin.utils.js";
+import { arr2String } from "../../utils/converter/common.js";
+import { white2Rgba } from "../../themes/baseTokens/const.js";
+const containerStyle = {
+  position: "relative"
+};
+const baseWrapperStyle = (theme) => ({
+  display: "inline-flex",
+  flexDirection: "column",
+  alignItems: "center",
+  rowGap: theme.spaceXS
+});
+const nonStaticPositionWrapperStyle = (theme) => ({
+  inset: 0,
+  ...baseWrapperStyle(theme),
+  justifyContent: "center"
+});
+const getWithFullscreenPropWrapperStyle = (spinning) => (theme) => ({
+  position: "fixed",
+  backgroundColor: theme.bgMask,
+  width: "100vw",
+  height: "100vh",
+  visibility: spinning ? "visible" : "hidden",
+  zIndex: 2,
+  ...nonStaticPositionWrapperStyle(theme)
+});
+const withChildrenPropWrapperStyle = (theme) => ({
+  position: "absolute",
+  zIndex: 1,
+  ...nonStaticPositionWrapperStyle(theme)
+});
+const fullRotateAnimationName = keyframes({
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+});
+const getSpinWrapperStyle = (spinTokens, size) => ({
+  display: "inline-flex",
+  fontSize: getFontSizeBySize(spinTokens, size),
+  animation: `${fullRotateAnimationName} 0.5s infinite linear`
+});
+const getForeignObjectSpinInnerStyle = (fullscreen) => (theme) => ({
+  height: "100%",
+  backgroundImage: `conic-gradient(${arr2String(["from 30deg", ...fullscreen ? [`${theme.neutral10} 0deg`, `${white2Rgba(0)} 45deg`, `${theme.neutral10} 360deg`] : [`${theme.neutral100} 0deg`, `${white2Rgba(0)} 45deg`, `${theme.primaryBase} 225deg`, `${theme.neutral100} 360deg`]])})`
+});
+const getTipWrapperStyle = (fullscreen) => (theme) => ({
+  ...theme.typography.body2,
+  color: fullscreen ? theme.textContrast : theme.primaryBase
+});
+const childrenWrapperStyle = {
+  userSelect: "none",
+  pointerEvents: "none",
+  opacity: 0.5
+};
+export {
+  baseWrapperStyle,
+  childrenWrapperStyle,
+  containerStyle,
+  getForeignObjectSpinInnerStyle,
+  getSpinWrapperStyle,
+  getTipWrapperStyle,
+  getWithFullscreenPropWrapperStyle,
+  nonStaticPositionWrapperStyle,
+  withChildrenPropWrapperStyle
+};

package/dist/components/Spin/Spin.tokens.d.ts

@@ -0,0 +1,6 @@
+export declare const getSpinTokens: () => {
+    readonly spinSizeS: 16;
+    readonly spinSizeM: 24;
+    readonly spinSizeL: 32;
+};
+export type SpinTokens = ReturnType<typeof getSpinTokens>;

package/dist/components/Spin/Spin.tokens.js

@@ -0,0 +1,8 @@
+const getSpinTokens = () => ({
+  spinSizeS: 16,
+  spinSizeM: 24,
+  spinSizeL: 32
+});
+export {
+  getSpinTokens
+};

package/dist/components/Spin/Spin.types.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export interface SpinProps extends PropsWithChildren {
+    delay?: number;
+    fullscreen?: boolean;
+    size?: SpinSize;
+    spinning?: boolean;
+    tip?: ReactNode;
+}
+export type SpinSize = "small" | "middle" | "large";

package/dist/components/Spin/Spin.utils.d.ts

@@ -0,0 +1,4 @@
+import { SpinTokens } from './Spin.tokens';
+import { SpinSize } from './Spin.types';
+export declare const getFontSizeBySize: (spinTokens: SpinTokens, size: SpinSize) => number;
+export declare const shouldDelay: (spinning: boolean, delay?: number) => boolean;

package/dist/components/Spin/Spin.utils.js

@@ -0,0 +1,11 @@
+const fontSizeBySize = (spinTokens) => ({
+  small: spinTokens.spinSizeS,
+  middle: spinTokens.spinSizeM,
+  large: spinTokens.spinSizeL
+});
+const getFontSizeBySize = (spinTokens, size) => fontSizeBySize(spinTokens)[size];
+const shouldDelay = (spinning, delay) => spinning && Boolean(delay) && !Number.isNaN(delay);
+export {
+  getFontSizeBySize,
+  shouldDelay
+};

package/dist/components/Spin/docs/FullscreenExample.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const FullscreenExample: FC;

package/dist/components/Spin/index.d.ts

@@ -0,0 +1,2 @@
+export { Spin } from './Spin';
+export type { SpinProps } from './Spin.types';

package/dist/index.d.ts

@@ -48,4 +48,5 @@ export type { TreeSelectProps } from './components/TreeSelect';
 export { type EmptyProps, Empty } from './components/Empty';
 export { type SegmentedProps, type SegmentedLabeledOption, Segmented, } from './components/Segmented';
 export { ContextIsolator } from './components/ContextIsolator';
+export { type SpinProps, Spin } from './components/Spin';
 export * from 'react-intersection-observer/test-utils';

package/dist/index.js

@@ -36,6 +36,7 @@ import { TreeSelect } from "./components/TreeSelect/TreeSelect.js";
 import { Empty } from "./components/Empty/Empty.js";
 import { Segmented } from "./components/Segmented/Segmented.js";
 import { ContextIsolator } from "./components/ContextIsolator/ContextIsolator.js";
+import { Spin } from "./components/Spin/Spin.js";
 export {
   Alert,
   Avatar,
@@ -57,6 +58,7 @@ export {
   Radio,
   Segmented,
   Select,
+  Spin,
   Switch,
   Tabs,
   Tag,

package/dist/utils/converter/common.d.ts

@@ -0,0 +1 @@
+export declare const arr2String: (arr: (string | number)[], separator?: string) => string;

package/dist/utils/converter/common.js

@@ -0,0 +1,4 @@
+const arr2String = (arr, separator = ", ") => arr.join(separator);
+export {
+  arr2String
+};

package/dist/utils/converter/index.d.ts

@@ -0,0 +1 @@
+export { arr2String } from './common';

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { getRgbaConverter, hex2Rgba } from './color';
 export { emptyString } from './const';
+export { arr2String } from './converter';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.14.11",
+  "version": "0.15.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",