@jenesei-software/jenesei-kit-react 1.3.20 → 1.3.21

package/build/{context.constants-C5Unln0I.js → context.constants-BVl2x1gR.js}

@@ -2,15 +2,14 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
 import { d as addRippleDefault } from "./component.styles-B0L4jbOO.js";
 import * as React from "react";
 import React__default, { useMemo, useState, useEffect, useRef, useLayoutEffect, useCallback, memo, createContext } from "react";
-import styled, { useTheme, createGlobalStyle, css, keyframes, styled as styled$1 } from "styled-components";
+import styled, { useTheme, createGlobalStyle, keyframes, css, styled as styled$1 } from "styled-components";
 import { f as addColorTransition, b as addTransition, g as addOutline, c as addFont, i as addAlwaysOutline, l as addDisabled, d as addTransitionWithoutSize, h as addOutlineChildren, j as addRemoveOutline, k as addNiceNumber, a as addRemoveScrollbar, e as addGridTransition } from "./style-RL73t3JD.js";
 import { a as addSX } from "./style-plT9Ah7t.js";
 import { getContrastYIQ } from "./functions.es.js";
-import { c as StackMotion, b as Stack } from "./component-mzzOCXSx.js";
+import { b as Stack, c as StackMotion } from "./component-DEZX8aBs.js";
 import reset from "styled-reset";
 import { AnimatePresence, motion } from "framer-motion";
-import "./area.styles-DWqSyo49.js";
-import "./area.styles-BJCDsTi3.js";
+import "./area.styles-BSqCfPE4.js";
 import { W as WordsPullUp } from "./motion-CIQfrLky.js";
 import { u as useScreenWidth } from "./context.hooks-BmwyZ1p3.js";
 import { u as useDeepCompareMemoize } from "./use-DT0XgvJT.js";
@@ -21,8 +20,7 @@ import { LIBRARY_VERSION, LIST_LANGUAGE, LIST_MAP_THEME } from "./consts.es.js";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import moment from "moment";
 import { R as Ripple } from "./component-DHM9pbab.js";
-import "./component.styles-eaocqYbA.js";
-import "./context.constants-CaDW-QGJ.js";
+import "./context.constants-D-s5XvZX.js";
 import { v4 } from "uuid";
 import "react-leaflet";
 import "leaflet.markercluster";
@@ -41,10 +39,20 @@ const Icon = (props) => {
     [props.name, props.type, theme.icon.getIconId]
   );
   const spriteUrl = useMemo(() => theme.icon.getSpriteUrl({ type: props.type }), [props.type, theme.icon.getSpriteUrl]);
-  const loaded = useLazyInjectSprite(spriteUrl);
-  if (!loaded) return null;
+  const { loaded, error: error2 } = useLazyInjectSprite(spriteUrl);
+  if (!loaded || error2)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      StyledIconSkeleton,
+      {
+        $size: props.size,
+        $order: props.order,
+        color: props.color ?? void 0,
+        className: props.className,
+        visible: true
+      }
+    );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    StyledSVG,
+    StyledIcon,
     {
       width: "24",
       height: "24",
@@ -53,7 +61,7 @@ const Icon = (props) => {
       $size: props.size,
       $turn: props.turn,
       $order: props.order,
-      $color: props.color || void 0,
+      $color: props.color ?? void 0,
       $sx: props.sx,
       className: props.className,
       onClick: props.onClick,
@@ -93,31 +101,51 @@ function useInjectSprites(urls) {
 }
 const loadedSprites = /* @__PURE__ */ new Map();
 function useLazyInjectSprite(url) {
-  const [loaded, setLoaded] = useState(loadedSprites.has(url));
+  const [loaded, setLoaded] = useState(false);
+  const [error2, setError] = useState(null);
   useEffect(() => {
-    var _a;
-    if (loaded) return;
     let isMounted = true;
-    if (!loadedSprites.has(url)) {
-      const promise = (async () => {
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`Failed to load sprite: ${url}`);
-        const text = await res.text();
-        const div = document.createElement("div");
-        div.style.display = "none";
-        div.innerHTML = text;
-        document.body.prepend(div);
-      })();
-      loadedSprites.set(url, promise);
+    let status = loadedSprites.get(url);
+    if (status == null ? void 0 : status.loaded) {
+      setLoaded(true);
+      setError(status.error ?? null);
+      return;
     }
-    (_a = loadedSprites.get(url)) == null ? void 0 : _a.then(() => {
-      if (isMounted) setLoaded(true);
+    let promise;
+    if (!status) {
+      promise = (async () => {
+        try {
+          const res = await fetch(url);
+          if (!res.ok) throw new Error(`Failed to load sprite: ${url}`);
+          const text = await res.text();
+          const div = document.createElement("div");
+          div.style.display = "none";
+          div.innerHTML = text;
+          document.body.prepend(div);
+          loadedSprites.set(url, { promise, loaded: true });
+        } catch (err) {
+          const errorObj = err instanceof Error ? err : new Error(String(err));
+          loadedSprites.set(url, { promise, loaded: true, error: errorObj });
+          if (isMounted) setError(errorObj);
+          throw err;
+        }
+      })();
+      loadedSprites.set(url, { promise, loaded: false });
+    } else {
+      promise = status.promise;
+    }
+    promise.then(() => {
+      if (!isMounted) return;
+      const s = loadedSprites.get(url);
+      setLoaded((s == null ? void 0 : s.loaded) ?? true);
+      setError((s == null ? void 0 : s.error) ?? null);
+    }).catch(() => {
     });
     return () => {
       isMounted = false;
     };
-  }, [url, loaded]);
-  return loaded;
+  }, [url]);
+  return { loaded, error: error2 };
 }
 const ThemeMapId = [
   "Close",
@@ -1112,7 +1140,7 @@ const ThemeLight = {
       return `#${props.type}-${props.name}`;
     },
     getSpriteUrl(props) {
-      return `https://assets.jenesei.ru/icons/${props.type}.svg?v=${LIBRARY_VERSION}`;
+      return `https://id.assets.jenesei.ru/icons/${props.type}.svg?v=${LIBRARY_VERSION}`;
     }
   },
   transition: {
@@ -1418,7 +1446,76 @@ const JeneseiGlobalStyles = createGlobalStyle`
     }
   }
 `;
-const StyledSVG = styled.svg`
+const shimmer = keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`;
+const StyledSkeleton = styled(Stack)`
+  background: transparent;
+
+  ${(props) => css`
+    ${!props.$visible && css`
+      ${props.$type === "secondary" ? css`
+            background: linear-gradient(
+        90deg,
+          ${props.$color ? JeneseiPalette[props.$color] : props.$isInheritColor ? "inherit" : "#f6f7f8"} 25%,
+          ${props.$color ? JeneseiPalette[props.$color] : props.$isInheritColor ? "inherit" : "#edeef1"} 50%,
+          ${props.$color ? JeneseiPalette[props.$color] : props.$isInheritColor ? "inherit" : "#f6f7f8"} 75%
+      );
+          ` : css`
+            background: linear-gradient(
+        90deg,
+          ${props.$color ? JeneseiPalette[props.$color] : props.$isInheritColor ? "inherit" : "#edeef1"} 25%,
+          ${props.$color ? JeneseiPalette[props.$color] : props.$isInheritColor ? "inherit" : "#f6f7f8"} 50%,
+          ${props.$color ? JeneseiPalette[props.$color] : props.$isInheritColor ? "inherit" : "#edeef1"} 75%
+      );   
+          `};
+      background-size: 200% 100%;
+      animation: ${shimmer} 1.5s infinite linear;
+
+    `};
+  `}
+  & > * {
+    opacity: ${(props) => !props.$visible ? 0 : 1};
+    transition:
+      outline 0s,
+      opacity ${(props) => props.theme.transition.default};
+  }
+`;
+const Skeleton = (props) => {
+  const [visible, setVisible] = useState(props.defaultVisible ?? false);
+  useEffect(() => {
+    if ("time" in props) {
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, props.time);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [props]);
+  useEffect(() => {
+    if ("visible" in props) {
+      setVisible(!props.visible);
+    }
+  }, [props]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    StyledSkeleton,
+    {
+      ...props,
+      $visible: visible,
+      $type: props.type,
+      $color: props.color,
+      $isInheritColor: props.isInheritColor,
+      children: props.children
+    }
+  );
+};
+const StyledIcon = styled.svg`
   color: ${(props) => props.$color ? props.theme.palette[props.$color] : "inherit"};
 
   ${(props) => css`
@@ -1439,6 +1536,19 @@ const StyledSVG = styled.svg`
   }
   ${addSX};
 `;
+const StyledIconSkeleton = styled(Skeleton)`
+  ${(props) => css`
+    height: ${props.$size !== "100%" ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : "100%"};
+    min-height: ${props.$size !== "100%" ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : "100%"};
+
+    width: ${props.$size !== "100%" ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : "100%"};
+    min-width: ${props.$size !== "100%" ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : "100%"};
+  `}
+  ${(props) => props.$order !== void 0 && css`
+    order: ${props.$order};
+  `};
+  border-radius: 100%;
+`;
 const Preview = (props) => {
   const [visible, setVisible] = useState(props.defaultVisible ?? true);
   const propsVisible = useMemo(() => "visible" in props ? props.visible : null, [props]);
@@ -7201,6 +7311,15 @@ const DateInputButton = styled(Button)`
     height: max-content !important;
     ${addDateInputButtonSize};
 `;
+const ImageIMG = styled.img`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: ${(props) => props.$isPending ? 0 : 1};
+  ${addTransition};
+  ${addSX};
+`;
 const ImageSelectListGenre = css`
   ${(props) => css`
     background: ${props.theme.colors.imageSelect[props.$genre].background.rest};
@@ -8275,159 +8394,163 @@ const DEFAULT_PROVIDER_SONNER_BUTTON = {
   }
 };
 export {
-  StyledMotionInput as $,
+  InputSizeConstructor as $,
   AccordionWrapper as A,
   Button as B,
   CheckboxSize as C,
   DateWrapper as D,
-  getIconComponents as E,
-  useInjectSprites as F,
-  useLazyInjectSprite as G,
-  StyledSVG as H,
+  addDateInputButtonSize as E,
+  DateInputButton as F,
+  getIconComponents as G,
+  useInjectSprites as H,
   Icon as I,
-  ImageSelectListSize as J,
-  ImageSelectListSizeConstructor as K,
-  ImageSelectSize as L,
-  ImageSelectSizeConstructor as M,
-  ImageSelectWrapper as N,
-  ImageSelectListWrapper as O,
+  useLazyInjectSprite as J,
+  StyledIcon as K,
+  StyledIconSkeleton as L,
+  ImageIMG as M,
+  ImageSelectListSize as N,
+  ImageSelectListSizeConstructor as O,
   Preview as P,
-  SliderImage as Q,
-  SliderDot as R,
-  StyledButton as S,
-  StyledInputWrapper as T,
-  addInputPlaceholder as U,
-  addInputPlaceholderNiceNumber as V,
-  InputSize as W,
-  InputSizeConstructor as X,
-  addInputIsInputEffect as Y,
-  StyledInputCSS as Z,
-  StyledInput as _,
-  AccordionSummary as a,
-  ProviderAppOutletFooter as a$,
-  StyledInputPattern as a0,
-  StyledInputNumeric as a1,
-  InputPrefixChildren as a2,
-  InputPostfixChildren as a3,
-  InputOTPSize as a4,
-  InputOTPSizeConstructor as a5,
-  InputOTPWrapper as a6,
-  DEFAULT_MAP_MAX_ZOOM as a7,
-  DEFAULT_MAP_MIN_ZOOM as a8,
-  DEFAULT_MAP_ZOOM as a9,
-  StyledTextArea as aA,
-  ToggleWrapper as aB,
-  ToggleCenter as aC,
-  TooltipContainer as aD,
-  addTooltipBoxSize as aE,
-  addTooltipBoxSizeConstructor as aF,
-  TooltipBox as aG,
-  Tooltip as aH,
-  TooltipContent as aI,
-  DEFAULT_TOOLTIP_PLACEMENT_FALLBACK as aJ,
-  DEFAULT_TOOLTIP_OFFSET_FALLBACK as aK,
-  addSXTypography as aL,
-  Title as aM,
-  Typography as aN,
-  TypographyLink as aO,
-  TypographyTooltip as aP,
-  AppContext as aQ,
-  ProviderApp as aR,
-  useBgColor as aS,
-  useStatusBarColor as aT,
-  useBgImage as aU,
-  useDescription as aV,
-  ProviderAppWrapper as aW,
-  ProviderAppOutlet as aX,
-  ProviderAppOutletChildren as aY,
-  ProviderAppOutletNotification as aZ,
-  ProviderAppOutletHeader as a_,
-  DEFAULT_MAP_CENTER as aa,
-  DEFAULT_MAP_THEME as ab,
-  MapWrapper as ac,
-  RangeWrapper as ad,
-  RangeTrack as ae,
-  RangeThumb as af,
-  Select as ag,
-  ContainerDropdownListOption as ah,
-  ContainerSelectListOption as ai,
-  SelectLanguage as aj,
-  SelectMonth as ak,
-  SelectMonths as al,
-  SelectYear as am,
-  SelectMapTheme as an,
-  SelectWrapper as ao,
-  DropdownListParent as ap,
-  DropdownList as aq,
-  DropdownListOption as ar,
-  DropdownListOptionIcon as as,
-  SelectList as at,
-  ButtonList as au,
-  SelectListOption as av,
-  SelectTextArea as aw,
-  TextArea as ax,
-  TextAreaWrapper as ay,
-  addTextArea as az,
-  AccordionSummaryContent as b,
-  ProviderAppOutletNav as b0,
-  ProviderAppOutletLeftAside as b1,
-  ProviderAppOutletRightAside as b2,
-  SonnerContext as b3,
-  ProviderSonner as b4,
-  SonnerLayout as b5,
-  SonnerElementWrapper as b6,
-  SonnerContent as b7,
-  SonnerIcon as b8,
-  SonnerContentTitle as b9,
-  SonnerContentDescription as ba,
-  SonnerButtonWrapper as bb,
-  DEFAULT_PROVIDER_SONNER_Z_INDEX as bc,
-  DEFAULT_PROVIDER_SONNER_SCALE as bd,
-  DEFAULT_PROVIDER_SONNER_Y as be,
-  DEFAULT_PROVIDER_SONNER_DURATION as bf,
-  DEFAULT_PROVIDER_SONNER_GENRE as bg,
-  DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM as bh,
-  DEFAULT_PROVIDER_SONNER_BUTTON as bi,
-  ErrorMessageComponent as bj,
-  addError as bk,
-  ErrorMessage as bl,
-  JeneseiPalette as bm,
-  ThemeLight as bn,
-  ThemeBlack as bo,
-  KEY_SIZE_DATA as bp,
-  KEY_SIZE_DATA_TOGGLE as bq,
-  JeneseiGlobalStyles as br,
-  ThemeMapId as bs,
-  ThemeMapCheckbox as bt,
-  ThemeMapLoading as bu,
-  ThemeMapRealebail as bv,
-  ThemeMapLogo as bw,
-  ThemeMapBustmarket as bx,
-  usePopover as by,
-  Popover as bz,
-  AccordionDetails as c,
-  AccordionStyledIcon as d,
-  StyledButtonIconsWrapper as e,
-  ButtonGroupWrapper as f,
-  CheckboxSizeConstructor as g,
-  CheckboxGenre as h,
-  CheckboxWrapper as i,
-  CheckboxGroupSize as j,
-  CheckboxGroupSizeConstructor as k,
-  CheckboxGroupWrapper as l,
-  CheckboxGroupItem as m,
-  CheckboxGroupLabel as n,
-  CheckboxChildren as o,
-  DateDropdownListParent as p,
-  DateDropdownList as q,
-  DateDropdownDays as r,
-  addDateDropdownDaySize as s,
-  DateDropdownDay as t,
-  DateDropdownDayOfWeek as u,
-  DateInput as v,
-  addDateInputWrapperSize as w,
-  DateInputWrapper as x,
-  addDateInputButtonSize as y,
-  DateInputButton as z
+  ImageSelectSize as Q,
+  ImageSelectSizeConstructor as R,
+  StyledSkeleton as S,
+  ImageSelectWrapper as T,
+  ImageSelectListWrapper as U,
+  SliderImage as V,
+  SliderDot as W,
+  StyledInputWrapper as X,
+  addInputPlaceholder as Y,
+  addInputPlaceholderNiceNumber as Z,
+  InputSize as _,
+  Skeleton as a,
+  ProviderAppOutlet as a$,
+  addInputIsInputEffect as a0,
+  StyledInputCSS as a1,
+  StyledInput as a2,
+  StyledMotionInput as a3,
+  StyledInputPattern as a4,
+  StyledInputNumeric as a5,
+  InputPrefixChildren as a6,
+  InputPostfixChildren as a7,
+  InputOTPSize as a8,
+  InputOTPSizeConstructor as a9,
+  SelectTextArea as aA,
+  TextArea as aB,
+  TextAreaWrapper as aC,
+  addTextArea as aD,
+  StyledTextArea as aE,
+  ToggleWrapper as aF,
+  ToggleCenter as aG,
+  TooltipContainer as aH,
+  addTooltipBoxSize as aI,
+  addTooltipBoxSizeConstructor as aJ,
+  TooltipBox as aK,
+  Tooltip as aL,
+  TooltipContent as aM,
+  DEFAULT_TOOLTIP_PLACEMENT_FALLBACK as aN,
+  DEFAULT_TOOLTIP_OFFSET_FALLBACK as aO,
+  addSXTypography as aP,
+  Title as aQ,
+  Typography as aR,
+  TypographyLink as aS,
+  TypographyTooltip as aT,
+  AppContext as aU,
+  ProviderApp as aV,
+  useBgColor as aW,
+  useStatusBarColor as aX,
+  useBgImage as aY,
+  useDescription as aZ,
+  ProviderAppWrapper as a_,
+  InputOTPWrapper as aa,
+  DEFAULT_MAP_MAX_ZOOM as ab,
+  DEFAULT_MAP_MIN_ZOOM as ac,
+  DEFAULT_MAP_ZOOM as ad,
+  DEFAULT_MAP_CENTER as ae,
+  DEFAULT_MAP_THEME as af,
+  MapWrapper as ag,
+  RangeWrapper as ah,
+  RangeTrack as ai,
+  RangeThumb as aj,
+  Select as ak,
+  ContainerDropdownListOption as al,
+  ContainerSelectListOption as am,
+  SelectLanguage as an,
+  SelectMonth as ao,
+  SelectMonths as ap,
+  SelectYear as aq,
+  SelectMapTheme as ar,
+  SelectWrapper as as,
+  DropdownListParent as at,
+  DropdownList as au,
+  DropdownListOption as av,
+  DropdownListOptionIcon as aw,
+  SelectList as ax,
+  ButtonList as ay,
+  SelectListOption as az,
+  AccordionSummary as b,
+  ProviderAppOutletChildren as b0,
+  ProviderAppOutletNotification as b1,
+  ProviderAppOutletHeader as b2,
+  ProviderAppOutletFooter as b3,
+  ProviderAppOutletNav as b4,
+  ProviderAppOutletLeftAside as b5,
+  ProviderAppOutletRightAside as b6,
+  SonnerContext as b7,
+  ProviderSonner as b8,
+  SonnerLayout as b9,
+  ThemeMapLogo as bA,
+  ThemeMapBustmarket as bB,
+  usePopover as bC,
+  Popover as bD,
+  SonnerElementWrapper as ba,
+  SonnerContent as bb,
+  SonnerIcon as bc,
+  SonnerContentTitle as bd,
+  SonnerContentDescription as be,
+  SonnerButtonWrapper as bf,
+  DEFAULT_PROVIDER_SONNER_Z_INDEX as bg,
+  DEFAULT_PROVIDER_SONNER_SCALE as bh,
+  DEFAULT_PROVIDER_SONNER_Y as bi,
+  DEFAULT_PROVIDER_SONNER_DURATION as bj,
+  DEFAULT_PROVIDER_SONNER_GENRE as bk,
+  DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM as bl,
+  DEFAULT_PROVIDER_SONNER_BUTTON as bm,
+  ErrorMessageComponent as bn,
+  addError as bo,
+  ErrorMessage as bp,
+  JeneseiPalette as bq,
+  ThemeLight as br,
+  ThemeBlack as bs,
+  KEY_SIZE_DATA as bt,
+  KEY_SIZE_DATA_TOGGLE as bu,
+  JeneseiGlobalStyles as bv,
+  ThemeMapId as bw,
+  ThemeMapCheckbox as bx,
+  ThemeMapLoading as by,
+  ThemeMapRealebail as bz,
+  AccordionSummaryContent as c,
+  AccordionDetails as d,
+  AccordionStyledIcon as e,
+  StyledButton as f,
+  StyledButtonIconsWrapper as g,
+  ButtonGroupWrapper as h,
+  CheckboxSizeConstructor as i,
+  CheckboxGenre as j,
+  CheckboxWrapper as k,
+  CheckboxGroupSize as l,
+  CheckboxGroupSizeConstructor as m,
+  CheckboxGroupWrapper as n,
+  CheckboxGroupItem as o,
+  CheckboxGroupLabel as p,
+  CheckboxChildren as q,
+  DateDropdownListParent as r,
+  DateDropdownList as s,
+  DateDropdownDays as t,
+  addDateDropdownDaySize as u,
+  DateDropdownDay as v,
+  DateDropdownDayOfWeek as w,
+  DateInput as x,
+  addDateInputWrapperSize as y,
+  DateInputWrapper as z
 };
-//# sourceMappingURL=context.constants-C5Unln0I.js.map
+//# sourceMappingURL=context.constants-BVl2x1gR.js.map