@ozen-ui/kit 0.73.0 → 0.75.0

package/__inner__/esm/components/DatePicker/utils/parseDateString/parseDateString.js

@@ -0,0 +1,62 @@
+import { isNotNil, isValidDate } from '../../../../utils';
+export var parseDateString = function (value, steps) {
+    if (!isNotNil(value)) {
+        return null;
+    }
+    if (value === '') {
+        return null;
+    }
+    var hasYearsSteps = steps.includes('years');
+    var hasMonthsSteps = steps.includes('months');
+    var hasDaysSteps = steps.includes('days');
+    var splitted = value.split('.');
+    var day;
+    var month;
+    var year;
+    var offset = 0;
+    if (hasDaysSteps) {
+        day = splitted[offset];
+        offset += 1;
+    }
+    if (hasMonthsSteps) {
+        month = splitted[offset];
+        offset += 1;
+    }
+    if (hasYearsSteps) {
+        year = splitted[offset];
+    }
+    var parts = [];
+    if (hasYearsSteps) {
+        parts.push(year);
+    }
+    else {
+        var now = new Date();
+        parts.push(now.getFullYear().toString());
+    }
+    if (hasMonthsSteps) {
+        parts.push(month);
+    }
+    else {
+        // 3 месяц для кейса, где пользователь вводит 31 день месяца
+        parts.push('03');
+    }
+    if (hasDaysSteps) {
+        parts.push(day);
+    }
+    else {
+        parts.push('01');
+    }
+    var filteredParts = parts.filter(function (part) { return part !== undefined; });
+    if (filteredParts.length !== 3) {
+        return null;
+    }
+    var stringDate = filteredParts.join('-');
+    if (stringDate.length !== 10 || !isValidDate(stringDate)) {
+        return null;
+    }
+    return {
+        year: parts[0],
+        month: parts[1],
+        day: parts[2],
+    };
+};

package/__inner__/esm/components/Grid/Grid.d.ts

@@ -1,5 +1,5 @@
 import './Grid.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentRef } from 'react';
 import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const gridColsVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -30,4 +30,5 @@ export type GridBaseProps = {
     className?: string;
 };
 export type GridProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridBaseProps, As>;
+export type GridRef<As extends ElementType = 'div'> = ComponentRef<As>;
 export declare const Grid: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridBaseProps, "div", "as">;

package/__inner__/esm/components/Grid/GridItem.d.ts

@@ -1,5 +1,5 @@
 import './Grid.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentRef } from 'react';
 import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const gridItemColVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -22,4 +22,5 @@ export type GridItemBaseProps = {
     className?: string;
 };
 export type GridItemProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridItemBaseProps, As>;
+export type GridItemRef<As extends ElementType = 'div'> = ComponentRef<As>;
 export declare const GridItem: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridItemBaseProps, "div", "as">;

package/__inner__/esm/components/ListCardItem/hooks/useListCardItemRatio.js

@@ -1,19 +1,15 @@
-import { useEffect } from 'react';
 import { logger } from '@ozen-ui/logger';
-import { isDev } from '../../../constants/environment';
+import { useDevEffect } from '../../../hooks/useDevEffect';
 export var useListCardItemRatio = function (contentTrailingRatio) {
-    if (isDev) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(function () {
-            if (contentTrailingRatio < 0) {
-                logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть меньше 0');
-                return;
-            }
-            if (contentTrailingRatio > 1) {
-                logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть больше 1');
-            }
-        }, [contentTrailingRatio]);
-    }
+    useDevEffect(function () {
+        if (contentTrailingRatio < 0) {
+            logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть меньше 0');
+            return;
+        }
+        if (contentTrailingRatio > 1) {
+            logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть больше 1');
+        }
+    }, [contentTrailingRatio]);
     var contentRatio = contentTrailingRatio * 100;
     var trailingRatio = 100 - contentRatio;
     return { content: contentRatio, trailing: trailingRatio };

package/__inner__/esm/components/SectionMessage/SectionMessage.css

@@ -42,6 +42,12 @@
       --section-message-button-color: var(--color-content-error);
       --section-message-button-color-hover: var(--color-content-error-dark);
     }
+.SectionMessage_status_action {
+      --section-message-icon-color: var(--color-content-action);
+      --section-message-background-color: var(--color-background-action-light);
+      --section-message-button-color: var(--color-content-action);
+      --section-message-button-color-hover: var(--color-content-action-dark);
+    }
 .SectionMessage_size_xs {
       --section-message-padding: 12px;
       --section-message-column-gap: var(--spacing-2xs);

package/__inner__/esm/components/SectionMessage/SectionMessage.js

@@ -3,9 +3,9 @@ import './modules/SectionMessageButton/SectionMessageButton.css';
 import './SectionMessage.css';
 import React, { forwardRef } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { cn } from '../../utils/classname';
+import { renderContent, cn } from '../../utils';
 import { SECTION_MESSAGE_ICON_BY_STATUS } from './config';
-import { SECTION_MESSAGE_DEFAULT_SIZE, SECTION_MESSAGE_DEFAULT_STATUS, } from './constants';
+import { SECTION_MESSAGE_DEFAULT_SIZE, SECTION_MESSAGE_DEFAULT_STATUS, SECTION_MESSAGE_SIZE_TO_ICON_SIZE, } from './constants';
 import { SectionMessageContext } from './SectionMessageContext';
 export var cnSectionMessage = cn('SectionMessage');
 export var SectionMessage = forwardRef(function (inProps, ref) {
@@ -13,8 +13,11 @@ export var SectionMessage = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'SectionMessage',
     });
-    var _a = props.status, status = _a === void 0 ? SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = __rest(props, ["status", "size", "showIcon", "children", "action", "title", "className"]);
-    var iconSize = size === 'm' || size === 'l' ? 'm' : 's';
+    var _a = props.status, status = _a === void 0 ? SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, iconProp = props.icon, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = __rest(props, ["status", "size", "showIcon", "icon", "children", "action", "title", "className"]);
+    var icon = renderContent({
+        content: iconProp !== null && iconProp !== void 0 ? iconProp : SECTION_MESSAGE_ICON_BY_STATUS[status],
+        props: { size: SECTION_MESSAGE_SIZE_TO_ICON_SIZE[size] },
+    });
     var resolveAction = function (action) {
         var actionProps = {
             variant: 'function',
@@ -33,7 +36,7 @@ export var SectionMessage = forwardRef(function (inProps, ref) {
             size: size,
         } },
         React.createElement("div", __assign({ className: cnSectionMessage({ status: status, size: size }, [className]), role: "alert" }, otherProps, { ref: ref }),
-            showIcon && (React.createElement("div", { className: cnSectionMessage('Icon') }, SECTION_MESSAGE_ICON_BY_STATUS[status][iconSize])),
+            showIcon && React.createElement("div", { className: cnSectionMessage('Icon') }, icon),
             React.createElement("div", { className: cnSectionMessage('Content') },
                 title && React.createElement("div", { className: cnSectionMessage('Title') }, title),
                 children && (React.createElement("div", { className: cnSectionMessage('Body') }, children)),

package/__inner__/esm/components/SectionMessage/config.d.ts

@@ -1,3 +1,2 @@
-import type { ReactNode } from 'react';
-import type { SectionMessageStatusVariant } from './types';
-export declare const SECTION_MESSAGE_ICON_BY_STATUS: Readonly<Record<SectionMessageStatusVariant, Record<'s' | 'm', ReactNode>>>;
+import type { SectionMessageIconType, SectionMessageStatusVariant } from './types';
+export declare const SECTION_MESSAGE_ICON_BY_STATUS: Readonly<Record<SectionMessageStatusVariant, SectionMessageIconType>>;

package/__inner__/esm/components/SectionMessage/config.js

@@ -1,24 +1,9 @@
-import React from 'react';
 import { CheckCircleOutlineIcon, InfoCircleOutlineIcon, WarningCircleOutlineIcon, WarningTriangleOutlineIcon, } from '@ozen-ui/icons';
 export var SECTION_MESSAGE_ICON_BY_STATUS = {
-    neutral: {
-        m: React.createElement(InfoCircleOutlineIcon, { size: "m" }),
-        s: React.createElement(InfoCircleOutlineIcon, { size: "s" }),
-    },
-    info: {
-        m: React.createElement(InfoCircleOutlineIcon, { size: "m" }),
-        s: React.createElement(InfoCircleOutlineIcon, { size: "s" }),
-    },
-    warning: {
-        m: React.createElement(WarningTriangleOutlineIcon, { size: "m" }),
-        s: React.createElement(WarningTriangleOutlineIcon, { size: "s" }),
-    },
-    success: {
-        m: React.createElement(CheckCircleOutlineIcon, { size: "m" }),
-        s: React.createElement(CheckCircleOutlineIcon, { size: "s" }),
-    },
-    error: {
-        m: React.createElement(WarningCircleOutlineIcon, { size: "m" }),
-        s: React.createElement(WarningCircleOutlineIcon, { size: "s" }),
-    },
+    neutral: InfoCircleOutlineIcon,
+    info: InfoCircleOutlineIcon,
+    warning: WarningTriangleOutlineIcon,
+    success: CheckCircleOutlineIcon,
+    error: WarningCircleOutlineIcon,
+    action: InfoCircleOutlineIcon,
 };

package/__inner__/esm/components/SectionMessage/constants.d.ts

@@ -1,2 +1,5 @@
+import type { IconSize } from '@ozen-ui/icons';
+import type { SectionMessageSizeVariant } from './types';
 export declare const SECTION_MESSAGE_DEFAULT_STATUS = "info";
 export declare const SECTION_MESSAGE_DEFAULT_SIZE = "m";
+export declare const SECTION_MESSAGE_SIZE_TO_ICON_SIZE: Readonly<Record<SectionMessageSizeVariant, IconSize>>;

package/__inner__/esm/components/SectionMessage/constants.js

@@ -1,2 +1,8 @@
 export var SECTION_MESSAGE_DEFAULT_STATUS = 'info';
 export var SECTION_MESSAGE_DEFAULT_SIZE = 'm';
+export var SECTION_MESSAGE_SIZE_TO_ICON_SIZE = {
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'm',
+};

package/__inner__/esm/components/SectionMessage/types.d.ts

@@ -1,10 +1,13 @@
 import type { ComponentRef, ReactElement, ReactNode } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
+import type { RenderContentType } from '../../utils';
 import type { ButtonProps } from '../ButtonNext';
-export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral"];
+export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral", "action"];
 export type SectionMessageStatusVariant = (typeof sectionMessageStatusVariant)[number];
 export declare const sectionMessageSizeVariant: readonly ["xs", "s", "m", "l"];
 export type SectionMessageSizeVariant = (typeof sectionMessageSizeVariant)[number];
+export type SectionMessageIconType = RenderContentType<IconProps>['content'];
 export type SectionMessageRef = ComponentRef<'div'>;
 export type SectionMessageProps = ExtendableComponentPropsWithRef<{
     /**
@@ -17,6 +20,8 @@ export type SectionMessageProps = ExtendableComponentPropsWithRef<{
      * @default true
      */
     showIcon?: boolean;
+    /** Кастомная иконка */
+    icon?: SectionMessageIconType;
     /**
      * Размер
      * @default m

package/__inner__/esm/components/SectionMessage/types.js

@@ -4,5 +4,6 @@ export var sectionMessageStatusVariant = [
     'warning',
     'info',
     'neutral',
+    'action',
 ];
 export var sectionMessageSizeVariant = ['xs', 's', 'm', 'l'];

package/__inner__/esm/components/Stack/Stack.css

@@ -9,6 +9,9 @@
 .Stack-Item {
     display: inline-block;
   }
+.Stack_display_block {
+    display: flex;
+  }
 .Stack_direction_row {
     flex-direction: row;
   }

package/__inner__/esm/components/Stack/Stack.js

@@ -5,7 +5,7 @@ import { classnames } from '@bem-react/classnames';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
-import { STACK_DEFAULT_TAG } from './constants';
+import { STACK_DEFAULT_DISPLAY, STACK_DEFAULT_TAG } from './constants';
 import { generateDirectionCn, generateGapCn } from './utils';
 export var cnStack = cn('Stack');
 export var Stack = polymorphicComponentWithRef(function (inProps, ref) {
@@ -13,7 +13,7 @@ export var Stack = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'Stack',
     });
-    var _a = props.as, Tag = _a === void 0 ? STACK_DEFAULT_TAG : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = __rest(props, ["as", "direction", "divider", "shouldWrapChildren", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? STACK_DEFAULT_TAG : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, _d = props.display, display = _d === void 0 ? STACK_DEFAULT_DISPLAY : _d, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = __rest(props, ["as", "direction", "divider", "shouldWrapChildren", "display", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
     var childNodes = Children.toArray(children);
     if (!childNodes.length) {
         return null;
@@ -35,6 +35,7 @@ export var Stack = polymorphicComponentWithRef(function (inProps, ref) {
             justify: justify,
             fullWidth: fullWidth,
             wrap: wrap,
+            display: display === 'inline' ? undefined : display,
         }), generateDirectionCn(cnStack, direction), generateGapCn(cnStack, gap), className), ref: ref }), resolveChildren()));
 });
 Stack.displayName = 'Stack';

package/__inner__/esm/components/Stack/constants.d.ts

@@ -1 +1,2 @@
 export declare const STACK_DEFAULT_TAG = "div";
+export declare const STACK_DEFAULT_DISPLAY = "inline";

package/__inner__/esm/components/Stack/constants.js

@@ -1 +1,2 @@
 export var STACK_DEFAULT_TAG = 'div';
+export var STACK_DEFAULT_DISPLAY = 'inline';

package/__inner__/esm/components/Stack/types.d.ts

@@ -3,6 +3,7 @@ import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { STACK_DEFAULT_TAG } from './constants';
 export declare const stackGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
+export declare const stackDisplayVariant: readonly ["inline", "block"];
 export declare const stackDirectionVariant: readonly ["row", "column", "rowReverse", "columnReverse"];
 export declare const stackAlignVariant: readonly ["center", "start", "end", "baseline"];
 export declare const stackJustifyVariant: readonly ["start", "center", "end", "spaceBetween", "spaceAround"];
@@ -10,9 +11,12 @@ export type StackGapVariant = (typeof stackGapVariant)[number];
 export type StackDirectionVariant = (typeof stackDirectionVariant)[number];
 export type StackAlignVariant = (typeof stackAlignVariant)[number];
 export type StackJustifyVariant = (typeof stackJustifyVariant)[number];
+export type StackDisplayVariant = (typeof stackDisplayVariant)[number];
 export type StackBaseProps = {
     /** Направление */
     direction?: ResponsiveValue<StackDirectionVariant>;
+    /** Display */
+    display?: StackDisplayVariant;
     /** Выравнивание */
     align?: StackAlignVariant;
     /** Пространство между элементами */

package/__inner__/esm/components/Stack/types.js

@@ -13,6 +13,7 @@ export var stackGapVariant = [
     '7xl',
     '8xl',
 ];
+export var stackDisplayVariant = ['inline', 'block'];
 export var stackDirectionVariant = [
     'row',
     'column',

package/__inner__/esm/hooks/useDevEffect/index.d.ts

@@ -0,0 +1 @@
+export * from './useDevEffect';

package/__inner__/esm/hooks/useDevEffect/index.js

@@ -0,0 +1 @@
+export * from './useDevEffect';

package/__inner__/esm/hooks/useDevEffect/useDevEffect.d.ts

@@ -0,0 +1,3 @@
+import type { EffectCallback, DependencyList } from 'react';
+/** Эффект, отрабатывающий только в dev-режиме */
+export declare const useDevEffect: (effect: EffectCallback, deps: DependencyList) => void;

package/__inner__/esm/hooks/useDevEffect/useDevEffect.js

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { isDev } from '../../constants/environment';
+/** Эффект, отрабатывающий только в dev-режиме */
+export var useDevEffect = function (effect, deps) {
+    if (isDev) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(effect, deps);
+    }
+};

package/__inner__/esm/hooks/useIntersectionObserver/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useIntersectionObserver';
+export * from './types';

package/__inner__/esm/hooks/useIntersectionObserver/index.js

@@ -0,0 +1,2 @@
+export * from './useIntersectionObserver';
+export * from './types';

package/__inner__/esm/hooks/useIntersectionObserver/types.d.ts

@@ -0,0 +1,29 @@
+import type { RefObject } from 'react';
+import type { StoredValue } from '../useStoredValue';
+export type UseIntersectionObserverElement = RefObject<Element | null | undefined> | Element | undefined | null;
+export type UseIntersectionObserverOnEntryChange = (entry: IntersectionObserverEntry | null) => void;
+export type UseIntersectionObserverOnViewChange = (inView: boolean) => void;
+export type UseIntersectionObserverOnShow = () => void;
+export type UseIntersectionObserverOnHidden = () => void;
+export type UseIntersectionObserverOptions = Omit<IntersectionObserverInit, 'root'> & {
+    /** Вызывается при изменении entry наблюдателя */
+    onEntryChange?: UseIntersectionObserverOnEntryChange;
+    /** Вызывается при входе/выходе элемента из viewport */
+    onViewChange?: UseIntersectionObserverOnViewChange;
+    /** Вызывается при входе элемента во viewport */
+    onShow?: UseIntersectionObserverOnShow;
+    /** Вызывается при выходе элемента из viewport */
+    onHidden?: UseIntersectionObserverOnHidden;
+    /** Если `true`, то включен */
+    enabled?: boolean;
+    /** Root наблюдателя */
+    root?: UseIntersectionObserverElement;
+};
+export type UseIntersectionObserverReturn = {
+    /** Entry наблюдателя */
+    entry: StoredValue<IntersectionObserverEntry | undefined>;
+    /** Если `true`, то элемент находится во viewport */
+    inView: StoredValue<boolean>;
+    /** Функция для переподключения к наблюдателю */
+    reconnect: () => void;
+};

package/__inner__/esm/hooks/useIntersectionObserver/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/hooks/useIntersectionObserver/useIntersectionObserver.d.ts

@@ -0,0 +1,6 @@
+import type { UseIntersectionObserverElement, UseIntersectionObserverOptions, UseIntersectionObserverReturn } from './types';
+export declare function useIntersectionObserver(
+/** Отслеживаемый компонент */
+target: UseIntersectionObserverElement, 
+/** Параметры отслеживания */
+options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;

package/__inner__/esm/hooks/useIntersectionObserver/useIntersectionObserver.js

@@ -0,0 +1,77 @@
+import { __assign, __read } from "tslib";
+import { useCallback, useEffect } from 'react';
+import { isRef } from '../../utils';
+import { useMutableRef } from '../useMutableRef';
+import { useStoredValue } from '../useStoredValue';
+export function useIntersectionObserver(
+/** Отслеживаемый компонент */
+target, 
+/** Параметры отслеживания */
+options) {
+    var _a;
+    var isEnabled = (_a = options === null || options === void 0 ? void 0 : options.enabled) !== null && _a !== void 0 ? _a : true;
+    var savedOnEntryChange = useMutableRef(options === null || options === void 0 ? void 0 : options.onEntryChange);
+    var savedOnViewChange = useMutableRef(options === null || options === void 0 ? void 0 : options.onViewChange);
+    var savedOnShow = useMutableRef(options === null || options === void 0 ? void 0 : options.onShow);
+    var savedOnHidden = useMutableRef(options === null || options === void 0 ? void 0 : options.onHidden);
+    var entry = useStoredValue(undefined);
+    var inView = useStoredValue(false);
+    var observer = useStoredValue(null);
+    var connect = useCallback(function () {
+        if (!isEnabled) {
+            return;
+        }
+        var element = isRef(target) ? target.current : target;
+        if (!element) {
+            return;
+        }
+        var root = (function () {
+            var root = options === null || options === void 0 ? void 0 : options.root;
+            if (!root) {
+                return document;
+            }
+            return isRef(options.root) ? options.root.current : options.root;
+        })();
+        observer.current = new IntersectionObserver(function (_a) {
+            var _b, _c, _d, _e, _f;
+            var _g = __read(_a, 1), newEntry = _g[0];
+            var previousInView = !!((_b = entry.current) === null || _b === void 0 ? void 0 : _b.isIntersecting);
+            var currentInView = !!(newEntry === null || newEntry === void 0 ? void 0 : newEntry.isIntersecting);
+            entry.current = newEntry;
+            inView.current = currentInView;
+            (_c = savedOnEntryChange.current) === null || _c === void 0 ? void 0 : _c.call(savedOnEntryChange, newEntry !== null && newEntry !== void 0 ? newEntry : null);
+            if (previousInView === currentInView) {
+                return;
+            }
+            (_d = savedOnViewChange.current) === null || _d === void 0 ? void 0 : _d.call(savedOnViewChange, currentInView);
+            if (currentInView) {
+                (_e = savedOnShow.current) === null || _e === void 0 ? void 0 : _e.call(savedOnShow);
+            }
+            else {
+                (_f = savedOnHidden.current) === null || _f === void 0 ? void 0 : _f.call(savedOnHidden);
+            }
+        }, __assign(__assign({}, options), { root: root }));
+        observer.current.observe(element);
+    }, [
+        isRef(target) ? target.current : target,
+        options === null || options === void 0 ? void 0 : options.rootMargin,
+        options === null || options === void 0 ? void 0 : options.threshold,
+        options === null || options === void 0 ? void 0 : options.root,
+        isEnabled,
+    ]);
+    var disconnect = useCallback(function () {
+        var _a;
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }, [observer]);
+    var reconnect = useCallback(function () {
+        disconnect();
+        connect();
+    }, [disconnect, connect]);
+    useEffect(function () {
+        reconnect();
+    }, [connect]);
+    useEffect(function () { return function () {
+        disconnect();
+    }; }, []);
+    return { entry: entry, inView: inView, reconnect: reconnect };
+}

package/__inner__/esm/locale/locale.js

@@ -87,7 +87,19 @@ export var ruRU = {
         },
         DatePicker: {
             clearText: 'Очистить',
-            placeholder: 'ДД.ММ.ГГГГ',
+            placeholder: function (steps) {
+                var parts = [];
+                if (steps.includes('days')) {
+                    parts.push('ДД');
+                }
+                if (steps.includes('months')) {
+                    parts.push('ММ');
+                }
+                if (steps.includes('years')) {
+                    parts.push('ГГГГ');
+                }
+                return parts.join('.');
+            },
         },
     },
 };
@@ -179,7 +191,19 @@ export var kkKZ = {
         },
         DatePicker: {
             clearText: 'Тазалау',
-            placeholder: 'КК.АА.ЖЖЖЖ',
+            placeholder: function (steps) {
+                var parts = [];
+                if (steps.includes('days')) {
+                    parts.push('КК');
+                }
+                if (steps.includes('months')) {
+                    parts.push('АА');
+                }
+                if (steps.includes('years')) {
+                    parts.push('ЖЖЖЖ');
+                }
+                return parts.join('.');
+            },
         },
     },
 };
@@ -272,7 +296,19 @@ export var enUS = {
         },
         DatePicker: {
             clearText: 'Clear',
-            placeholder: 'DD.MM.YYYY',
+            placeholder: function (steps) {
+                var parts = [];
+                if (steps.includes('days')) {
+                    parts.push('DD');
+                }
+                if (steps.includes('months')) {
+                    parts.push('MM');
+                }
+                if (steps.includes('years')) {
+                    parts.push('YYYY');
+                }
+                return parts.join('.');
+            },
         },
     },
 };

package/__inner__/esm/utils/array/createFilled/createFilledArray.d.ts

@@ -1 +1 @@
-export declare const createFilledArray: <Value>(length: number, value: Value) => Value[];
+export declare const createFilledArray: <Value>(length: number, value: Value | ((index: number) => Value)) => Value[];

package/__inner__/esm/utils/array/createFilled/createFilledArray.js

@@ -1,3 +1,8 @@
+import { isFunction } from '../../isFunction';
 export var createFilledArray = function (length, value) {
-    return new Array(length).fill(value);
+    var array = [];
+    for (var i = 0; i < length; i++) {
+        array.push(isFunction(value) ? value(i) : value);
+    }
+    return array;
 };

package/__inner__/esm/utils/react/extractRef.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const extractRef: <Element extends HTMLElement>(element: RefObject<Element | null> | Element | null | undefined) => Element | null;

package/__inner__/esm/utils/react/extractRef.js

@@ -0,0 +1,7 @@
+import { isRef } from './isRef';
+export var extractRef = function (element) {
+    if (isRef(element)) {
+        return element.current;
+    }
+    return element !== null && element !== void 0 ? element : null;
+};

package/__inner__/esm/utils/react/index.d.ts

@@ -1,4 +1,5 @@
 export * from './extractElementsFromChildren';
+export * from './extractRef';
 export * from './isNodeWithDisplayName';
 export * from './isRef';
 export * from './resolveChildren';

package/__inner__/esm/utils/react/index.js

@@ -1,4 +1,5 @@
 export * from './extractElementsFromChildren';
+export * from './extractRef';
 export * from './isNodeWithDisplayName';
 export * from './isRef';
 export * from './resolveChildren';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.73.0",
+  "version": "0.75.0",
   "description": "React component library",
   "files": [
     "*"
@@ -29,9 +29,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
-    "@ozen-ui/icons": "0.73.0",
-    "@ozen-ui/logger": "0.73.0",
-    "@ozen-ui/fonts": "0.73.0"
+    "@ozen-ui/fonts": "0.75.0",
+    "@ozen-ui/icons": "0.75.0",
+    "@ozen-ui/logger": "0.75.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.0"

package/useDevEffect/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/hooks/useDevEffect/index.js",
+	"module": "../__inner__/esm/hooks/useDevEffect/index.js",
+	"types": "../__inner__/esm/hooks/useDevEffect/index.d.ts"
+}

package/useIntersectionObserver/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/hooks/useIntersectionObserver/index.js",
+	"module": "../__inner__/esm/hooks/useIntersectionObserver/index.js",
+	"types": "../__inner__/esm/hooks/useIntersectionObserver/index.d.ts"
+}