@redneckz/wildless-cms-uni-blocks 0.6.23 → 0.6.24

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -19,7 +19,7 @@ const benefits: BenefitItemProps[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: { icon: 'CalendarTickIcon', iconVersion: 'white' },
+    icon: { icon: 'CalendarTickIcon' },
   },
   {
     label: 'От 16,9%',
@@ -141,6 +141,7 @@ export default {
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
+        benefitsVersion="white"
         buttons={buttonsSecond}
         image={image}
         version="secondary"
@@ -192,6 +193,7 @@ export default {
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
+        benefitsVersion="white"
         buttons={buttonsSecond}
         image={image}
         version="secondary"

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -20,7 +20,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     headlineVersion = 'L',
     description,
     benefits,
-    benefitsVersion = 'normal',
+    benefitsVersion,
     buttons,
     image,
     items,

package/src/components/ProductBlock/renderBenefit.tsx

@@ -5,8 +5,8 @@ import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 
 export const renderBenefit =
   (version: BlockVersion = 'primary', benefitsVersion: IconVersion = 'normal') =>
-  ({ icon, label, description }: BenefitItemProps, i: number) => {
-    return (
+  ({ icon, label, description }: BenefitItemProps, i: number) =>
+    (
       <BenefitItem
         key={String(i)}
         icon={icon}
@@ -16,4 +16,3 @@ export const renderBenefit =
         benefitsVersion={benefitsVersion}
       />
     );
-  };

package/src/components/StepsBlock/StepsBlock.fixture.mobile.tsx

@@ -136,20 +136,20 @@ export default {
           steps={[
             {
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ClockIcon' },
+              icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             },
             {
               label: 'В случае одобрения',
-              icon: { icon: 'SignDocsIcon' },
+              icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
             },
             {
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ComfortableCompIcon' },
+              icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
             },
             {
               label: 'Получение наличных',
-              icon: { icon: 'ClockIcon' },
+              icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             },
           ]}
           version="secondary"

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -36,17 +36,17 @@ const STEPS_WITH_ICONS: Step[] = [
   {
     label: 'В мобильном приложении или интернет-банке',
     description: 'Для всех клиентов Россельхозбанка',
-    icon: { icon: 'SignDocsIcon' },
+    icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
   },
   {
     label: 'Через Госуслуги',
     description: 'При наличии данных в Единой биометрической системе',
-    icon: { icon: 'ClockIcon' },
+    icon: { icon: 'ClockIcon', iconVersion: 'normal' },
   },
   {
     label: 'В офисах Россельхозбанка',
     description: 'Откройте вклад',
-    icon: { icon: 'ComfortableCompIcon' },
+    icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
   },
 ];
 
@@ -97,6 +97,7 @@ export default {
         {...COMMON_PROPS}
         showLines={false}
         steps={STEPS_WITH_ICONS}
+        version="secondary"
         button={{
           text: 'Отправить заявку',
           href: 'https://www.rshb.ru/',

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -8,6 +8,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -112,7 +113,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       <span className={`font-medium flex self-center ${styleMap.title} ${iconTextSize}`}>
         {checkIsIconRenderable(step?.icon) ? (
           <Img
-            image={{ ...step.icon, iconVersion: STEPS_SVG_VERSION_MAP[version] }}
+            image={getIconWithVersion({ ...step.icon }, version)}
             width={iconSize}
             height={iconSize}
             asSVG

package/src/components/StepsBlock/StepsBlock.tsx

@@ -8,8 +8,10 @@ import { Img } from '../../ui-kit/Img/Img';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { joinList } from '../../utils/joinList';
 import { renderStepContent } from './renderStepContent';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
@@ -58,7 +60,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           <div className={`box-border ${titleMargin}`}>
             <div className={`flex items-center ${paddingX}`}>
               {joinList(<div className={`h-0.5 w-full bg-secondary-light ${lineOpacity}`} />)(
-                steps.map(renderStepIcon(styleMap)),
+                steps.map(renderStepIcon(styleMap, version)),
               )}
             </div>
             <div className={`flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
@@ -87,7 +89,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
 );
 
 const renderStepIcon =
-  (styleMap: StyleType) =>
+  (styleMap: StyleType, version?: BlockVersion) =>
   ({ icon }: Step, i: number) => {
     return (
       <div key={String(i)} className="flex flex-col items-center text-center">
@@ -96,7 +98,7 @@ const renderStepIcon =
             ${styleMap.iconBackground} ${styleMap.title}`}
         >
           {checkIsIconRenderable(icon) ? (
-            <Img image={icon} width="48" height="48" asSVG />
+            <Img image={getIconWithVersion(icon || {}, version)} width="48" height="48" asSVG />
           ) : (
             <span className={`text-h4 ${styleMap.iconText}`}>{i + 1}</span>
           )}

package/src/components/TariffsTable/EmbeddableCellData.mobile.tsx

@@ -19,11 +19,11 @@ const renderButtonsCellData = ({ buttons }: ButtonContent) =>
         renderButton({
           button: { rounded, icon, ...buttonProps },
           buttonClassName: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`,
+          index: idx,
         }),
       )}
     </div>
   ) : null;
-
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
   const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
 

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -8,6 +8,7 @@ import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
 import type { Data } from './TariffsTableContent';
 import { TariffsTableRowContainer } from './TariffsTableRowContainer';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
@@ -33,7 +34,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
             {header?.icon ? (
               <Img
                 className="mr-[14px] max-w-6 max-h-6"
-                image={header.icon}
+                image={getIconWithVersion(header.icon)}
                 width="24px"
                 height="24px"
                 asSVG

package/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useIntersectionObserver<R extends Element>(
+  observerCallback: IntersectionObserverCallback,
+  observerOptions?: IntersectionObserverInit,
+) {
+  const ref = useRef<R | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
+    intersectionObserver.observe(ref.current);
+
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [observerCallback, observerOptions]);
+
+  return ref;
+}

package/src/hooks/useOutsideClick.ts

@@ -1,25 +1,25 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 
-interface Ref {
-  current: HTMLInputElement | null;
-}
+export function useOutsideClick<R extends Node>(onClick: () => void) {
+  const targetRef = useRef<R | null>(null);
 
-export function useOutsideClick(wrapperRef: Ref, setIsOpen: (_: boolean) => void) {
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+    const handleClickOutside = (event: { target?: any }) => {
       if (
-        wrapperRef &&
-        wrapperRef.current &&
-        event.target instanceof HTMLElement &&
-        !wrapperRef.current.contains(event.target)
+        targetRef &&
+        targetRef.current &&
+        event.target instanceof Node &&
+        !targetRef.current.contains(event.target)
       ) {
-        setIsOpen(false);
+        onClick();
       }
-    }
+    };
     document.addEventListener('click', handleClickOutside);
 
     return () => {
       document.removeEventListener('click', handleClickOutside);
     };
-  }, []);
+  }, [onClick]);
+
+  return targetRef;
 }

package/src/index.ts

@@ -7,4 +7,4 @@ export { ContentPage } from './components/ContentPage/ContentPage';
 export { projectSettings } from './ProjectSettings';
 export { joinList } from './utils/joinList';
 export * as url from './utils/url';
-export const packageVersion = process?.env?.UNI_BLOCKS_VERSION;
+export const packageVersion = globalThis.process?.env?.UNI_BLOCKS_VERSION;

package/src/model/IconVersion.ts

@@ -1,9 +1,12 @@
 /**
  * @title Цвет иконки
+ * @default normal
  * @enumNames [
- *    "Нормальный",
+ *    "по умолчанию",
+ *    "Цветной",
  *    "Белый",
  *    "Чёрный"
  * ]
  */
-export type IconVersion = 'normal' | 'white' | 'black';
+
+export type IconVersion = 'normal' | 'color' | 'white' | 'black';

package/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
@@ -25,16 +25,14 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
     version = 'primary',
     benefitsVersion = 'normal',
   } = props;
-
-  const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
   const listItemAlign = description ? 'items-start' : 'items-center';
-  const iconVersion = getIconVersion(isIconWhite, icon);
+  const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
 
   return (
     <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
         <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
-          <Img className="w-6 h-6" image={{ ...icon, iconVersion }} asSVG />
+          <Img className="w-6 h-6" image={getIconWithVersion(icon, calcVersion)} asSVG />
         </div>
       ) : null}
       <div className="gap-0.5">
@@ -58,6 +56,3 @@ function renderBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVe
 
   return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }
-
-const getIconVersion = (isIconWhite: boolean, icon?: Picture) =>
-  icon?.iconVersion || isIconWhite ? 'white' : 'normal';

package/src/ui-kit/BlockWrapper.tsx

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
 import { EventBus } from '../EventBus/EventBus';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import type { UniBlockProps } from '../model/JSXBlock';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
-import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
   anchor?: string;
@@ -24,57 +24,42 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ anchor, className, children, tag = 'section', labels, role }) => {
     const Tag: any = tag;
 
-    const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
+    const [isVisible, setVisible] = useState(true);
     const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
 
     const observerCallback = useMemo(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
       [anchor],
     );
+    const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
 
-    useEffect(() => {
-      const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
-        setShouldRenderBlock(true);
-        anchorClickRef.current = e;
-      });
-      const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
-        if (event.type === 'group') {
-          const blockHasSettgins = labels?.length || anchor;
-          setShouldRenderBlock(
-            event.label ? !blockHasSettgins || Boolean(labels?.includes(event.label)) : true,
-          );
-        } else {
-          changeHash(event.label);
-          setShouldRenderBlock(true);
-        }
-      });
-
-      return () => {
-        anchorClickCleanup();
-        tabCleanup();
-      };
-    }, []);
-
-    if (!shouldRenderBlock) {
-      return null;
-    }
+    useEffect(
+      () =>
+        EventBus.inst.subscribe('anchorClick', (e) => {
+          setVisible(true);
+          anchorClickRef.current = e;
+        }),
+      [],
+    );
+    useEffect(
+      () =>
+        EventBus.inst.subscribe('tab', (event) => {
+          if (event.type === 'group') {
+            const hasSettings = labels?.length || anchor;
+            setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+          } else {
+            changeHash(event.label);
+            setVisible(true);
+          }
+        }),
+      [],
+    );
 
-    return anchor ? (
-      <IntersectionObserverTag
-        tag={tag}
-        className={className}
-        observerCallback={observerCallback}
-        observerOptions={OBSERVER_OPTIONS}
-        anchor={anchor}
-        role={role}
-      >
-        {children}
-      </IntersectionObserverTag>
-    ) : (
-      <Tag className={className} role={role}>
+    return isVisible ? (
+      <Tag className={className} role={role} {...(anchor ? { id: anchor, ref } : {})}>
         {children}
       </Tag>
-    );
+    ) : null;
   },
 );
 

package/src/ui-kit/Button/ButtonSection.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
@@ -14,12 +13,6 @@ interface RenderButtonProps {
   buttonClassName?: string;
   index?: number;
 }
-
-interface RenderButtonIconProps {
-  icon?: Picture;
-  iconVersion?: IconVersion;
-}
-
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
   const { handlerDecorator } = context;
   const router = context.useRouter();
@@ -36,10 +29,10 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
   const { icon, iconRight, version, ...rest } = button;
 
-  const iconVersion = version === 'secondary' ? 'normal' : 'white';
+  const iconVersion = version === 'secondary' ? 'color' : 'white';
 
-  const leftIcon = renderButtonIcon({ icon, iconVersion });
-  const rightIcon = renderButtonIcon({ icon: iconRight, iconVersion });
+  const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion } as Picture);
+  const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion } as Picture);
 
   return (
     <Button
@@ -53,11 +46,11 @@ export function renderButton({ button, buttonClassName, index }: RenderButtonPro
   );
 }
 
-const renderButtonIcon = ({ icon, iconVersion }: RenderButtonIconProps) => {
+const renderButtonIcon = (icon: Picture) => {
   if (!icon?.icon && !icon?.src) {
     return null;
   }
   const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
 
-  return <Img image={{ ...icon, iconVersion: iconVersion }} width={iconWidth} height="24" asSVG />;
+  return <Img image={{ ...icon }} width={iconWidth} height="24" asSVG />;
 };

package/src/ui-kit/HeaderItem/HeaderItem.tsx

@@ -12,17 +12,17 @@ export const HeaderItem = JSX<TopItemProps>(
     href,
     target,
     active,
-    onClick,
-    children,
     bgColor = 'bg-white',
     dataItemName,
+    children,
+    onClick,
   }) => (
     <a
       className={`relative inline-block bg-transparent text-center no-underline ${className}`}
       href={href}
       target={target}
-      onClick={onClick}
       data-item-name={dataItemName}
+      onClick={onClick}
     >
       <span className={getTextClasses(bgColor, active)}>{text || children}</span>
       {active ? <div className={getBorderClasses(bgColor, active)} /> : null}

package/src/ui-kit/Icon/Icon.tsx

@@ -4,7 +4,8 @@ import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
-  normal: 'text-primary-main',
+  normal: '',
+  color: 'text-primary-main',
   black: 'text-black',
   white: 'text-black',
 };
@@ -16,13 +17,13 @@ export const Icon = JSX<IconProps>(
     name = '',
     alt = `Иконка ${name}`,
     title = alt,
-    iconVersion = 'normal',
+    iconVersion = 'color',
     asSVG,
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
-    if (asSVG) {
+    if (asSVG && iconVersion !== 'normal') {
       return (
         <Background className={className}>
           <svg

package/src/ui-kit/Logo/Logo.mobile.tsx

@@ -10,10 +10,16 @@ export interface LogoProps {
   showTitle?: boolean;
 }
 
+const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'color',
+  transparent: 'white',
+};
+
 const SVG_COLOR: Record<BgColorVersion, string> = {
   'bg-white': 'text-primary-main',
   transparent: 'text-white',
 };
+
 const TEXT_COLOR: Record<BgColorVersion, string> = {
   'bg-white': 'text-black',
   transparent: 'text-white',
@@ -29,8 +35,10 @@ export const Logo = JSX<Partial<LogoProps>>(
         aria-label="Россельхозбанк"
       >
         <Img
-          image={{ icon: 'LogoIcon', iconVersion: SVG_COLOR[bgColor] }}
-          className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}
+          image={{ icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }}
+          className={`${SVG_COLOR[bgColor]}`}
+          width="34"
+          height="34"
           asSVG
         />
         {showTitle ? (

package/src/ui-kit/Logo/Logo.tsx

@@ -17,7 +17,7 @@ export interface LogoProps {
 }
 
 const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'normal',
+  'bg-white': 'color',
   transparent: 'white',
 };
 

package/src/ui-kit/Select/Select.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { Icon } from '../Icon/Icon';
 
@@ -23,9 +23,8 @@ export const Select = JSX<SelectProps>(
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
 
-    const wrapperRef = useRef<HTMLInputElement | null>(null);
-
-    useOutsideClick(wrapperRef, setIsOpen);
+    const handleClickOutside = useCallback(() => setIsOpen(false), []);
+    const wrapperRef = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
     const choiceOption = (option: OptionProps) => {
       setSelectedItem(option);

package/src/ui-kit/TopItem/TopItem.tsx

@@ -10,9 +10,9 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   ariaLabel?: string;
-  onClick?: () => void;
   bgColor?: BgColorVersion;
   dataItemName?: string;
+  onClick?: () => void;
 }
 
 const TEXT_CLASSES = 'font-sans text-s-light';

package/src/utils/getIconWithVersion.ts

@@ -0,0 +1,7 @@
+import type { Picture } from '../model/Picture';
+import type { BlockVersion } from '../model/BlockVersion';
+
+export const getIconWithVersion = (icon: Picture, version: BlockVersion = 'primary'): Picture => ({
+  ...icon,
+  iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+});

package/bundle/ui-kit/IntersectionObserverTag.d.ts

@@ -1,12 +0,0 @@
-import type { VNode } from '../model/VNode';
-interface IntersectionObserverTagProps {
-    tag: keyof HTMLElementTagNameMap;
-    className?: string;
-    anchor?: string;
-    children?: VNode;
-    observerCallback: IntersectionObserverCallback;
-    observerOptions?: IntersectionObserverInit;
-    role?: string;
-}
-export declare const IntersectionObserverTag: import("@redneckz/uni-jsx").UNIComponent<IntersectionObserverTagProps, any, any>;
-export {};

package/dist/ui-kit/IntersectionObserverTag.d.ts

@@ -1,12 +0,0 @@
-import type { VNode } from '../model/VNode';
-interface IntersectionObserverTagProps {
-    tag: keyof HTMLElementTagNameMap;
-    className?: string;
-    anchor?: string;
-    children?: VNode;
-    observerCallback: IntersectionObserverCallback;
-    observerOptions?: IntersectionObserverInit;
-    role?: string;
-}
-export declare const IntersectionObserverTag: import("@redneckz/uni-jsx").UNIComponent<IntersectionObserverTagProps, any, any>;
-export {};

package/dist/ui-kit/IntersectionObserverTag.js

@@ -1,22 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntersectionObserverTag = void 0;
-const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
-const uni_jsx_1 = require("@redneckz/uni-jsx");
-const hooks_1 = require("@redneckz/uni-jsx/lib/hooks");
-exports.IntersectionObserverTag = (0, uni_jsx_1.JSX)((props) => {
-    const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, role, } = props;
-    const tagRef = (0, hooks_1.useRef)(null);
-    (0, hooks_1.useEffect)(() => {
-        if (!tagRef.current) {
-            return undefined;
-        }
-        const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-        intersectionObserver.observe(tagRef.current);
-        return () => {
-            intersectionObserver.disconnect();
-        };
-    }, [observerCallback, observerOptions]);
-    const Tag = tag;
-    return ((0, jsx_runtime_1.jsx)(Tag, { ref: tagRef, className: className, id: anchor, role: role, children: children }));
-});
-//# sourceMappingURL=IntersectionObserverTag.js.map

package/dist/ui-kit/IntersectionObserverTag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntersectionObserverTag.js","sourceRoot":"","sources":["../../src/ui-kit/IntersectionObserverTag.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,uDAAgE;AAanD,QAAA,uBAAuB,GAAG,IAAA,aAAG,EAA+B,CAAC,KAAK,EAAE,EAAE;IACjF,MAAM,EACJ,GAAG,GAAG,SAAS,EACf,gBAAgB,EAChB,eAAe,EACf,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,IAAI,EACb,QAAQ,EACR,IAAI,GACL,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YACnB,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;QACzF,oBAAoB,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IAExC,MAAM,GAAG,GAAG,GAAU,CAAC;IAEvB,OAAO,CACL,uBAAC,GAAG,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,YAC3D,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}