@astral/ui 1.50.1 → 1.51.1

package/esm/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import { SyntheticEvent } from 'react';
 import { TextFieldProps } from '../TextField';
 import { DateMask } from '../utils/date';
-import { Reason } from '../types';
+import { CloseEventReason } from '../types';
 import { MinMaxDate } from './types';
 import { MondayFirst } from './DayPicker';
 export type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
@@ -16,13 +16,14 @@ export type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
     onChange?: (date?: Date) => void;
     onBlur?: () => void;
     onOpen?: () => void;
-    onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
+    onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: CloseEventReason) => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
     disabled?: boolean;
     /**
      * @description Принимает только Date object, включая невалидную дату Invalid date
      * */
     value?: Date;
+    className?: string;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
     /**
@@ -36,11 +37,12 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
     onChange?: ((date?: Date) => void) | undefined;
     onBlur?: (() => void) | undefined;
     onOpen?: (() => void) | undefined;
-    onClose?: ((event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void) | undefined;
+    onClose?: ((event?: SyntheticEvent<Element, Event> | Event, reason?: CloseEventReason) => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;
     disabled?: boolean | undefined;
     /**
      * @description Принимает только Date object, включая невалидную дату Invalid date
      * */
     value?: Date | undefined;
+    className?: string | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/esm/DatePicker/DatePicker.js

@@ -12,13 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext } from 'react';
 import { useForwardedRef, useToggle } from '../hooks';
-import { DatePickerClickAwayListener } from './DatePickerClickAwayListener';
+import { ClickAwayListener } from '../ClickAwayListener';
 import { DatePickerInput } from './DatePickerInput';
 import { DatePickerPopper } from './DatePickerPopper';
 import { MinMaxDateContext, MinMaxDateContextProvider, } from './MinMaxDateContext';
 import { YearMonthDayPicker } from './YearMonthDayPicker';
 import { useBaseDateInRange, useMaskedValue, useSelectedBaseDate, } from './hooks';
-const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value, }, forwardedRef) => {
+const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value, className, }, forwardedRef) => {
     const { maxDate, minDate } = useContext(MinMaxDateContext);
     const ref = useForwardedRef(forwardedRef);
     const [isOpenPopper, openPopper, closePopper] = useToggle({
@@ -44,7 +44,7 @@ const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask =
     const handleChangeMaskInput = (e) => {
         onChangeMaskedValue(e.target.value);
     };
-    return (_jsxs(DatePickerClickAwayListener, Object.assign({ onClickAway: handleClosePopper }, { children: [_jsx(DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleChangeMaskInput, disabled: disabled, value: maskedValue, ref: ref, onFocus: openPopper })), _jsx(DatePickerPopper, Object.assign({ open: isOpenPopper, onClose: handleClosePopper, anchorEl: ref === null || ref === void 0 ? void 0 : ref.current }, { children: _jsx(YearMonthDayPicker, { isMondayFirst: isMondayFirst, selectedDate: selectedBaseDate, onChange: handleDayPick, date: selectedBaseDate || baseDate }) }))] })));
+    return (_jsx(ClickAwayListener, Object.assign({ isActive: isOpenPopper, onClickAway: handleClosePopper }, { children: _jsxs("div", Object.assign({ className: className }, { children: [_jsx(DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleChangeMaskInput, disabled: disabled, value: maskedValue, ref: ref, onFocus: openPopper })), _jsx(DatePickerPopper, Object.assign({ open: isOpenPopper, onClose: handleClosePopper, anchorEl: ref === null || ref === void 0 ? void 0 : ref.current }, { children: _jsx(YearMonthDayPicker, { isMondayFirst: isMondayFirst, selectedDate: selectedBaseDate, onChange: handleDayPick, date: selectedBaseDate || baseDate }) }))] })) })));
 });
 export const DatePicker = forwardRef((_a, forwardedRef) => {
     var { minDate, maxDate } = _a, props = __rest(_a, ["minDate", "maxDate"]);

package/esm/DatePicker/DatePicker.test.js

@@ -87,4 +87,10 @@ describe('DatePicker', () => {
         yield userEvents.tab();
         expect(onBlur).not.toBeCalled();
     }));
+    it('Props:onBlur: не вызывается при клике мимо инпута, если поповер закрыт', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onBlur = vi.fn();
+        renderWithTheme(_jsx(DatePicker, { onBlur: onBlur }));
+        yield userEvents.click(document.body);
+        expect(onBlur).not.toBeCalled();
+    }));
 });

package/esm/DatePicker/DatePickerPopper/DatePickerPopper.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren, SyntheticEvent } from 'react';
 import { PopperProps } from '@mui/material';
-import { Reason, WithoutEmotionSpecific } from '../../types';
+import { CloseEventReason, WithoutEmotionSpecific } from '../../types';
 export type DatePickerProps = PropsWithChildren<Omit<WithoutEmotionSpecific<PopperProps>, 'children'>> & {
-    onClose?: (_?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
+    onClose?: (_?: SyntheticEvent<Element, Event> | Event, reason?: CloseEventReason) => void;
 };
 export declare const DatePickerPopper: ({ children, onClose, ...props }: DatePickerProps) => JSX.Element;

package/esm/Fab/styles.d.ts

@@ -30,7 +30,7 @@ export declare const StyledFab: import("@emotion/styled").StyledComponent<{
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "disabled" | "action" | "color" | "sx" | "href" | "onFocusVisible" | "tabIndex" | "children" | "variant" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & Omit<import("../types").WithoutEmotionSpecific<import("@mui/material").FabProps<"button", {}>>, "color" | "variant"> & {
+} & Omit<import("..").WithoutEmotionSpecific<import("@mui/material").FabProps<"button", {}>>, "color" | "variant"> & {
     color?: "primary" | "default" | "error" | "warning" | "success" | undefined;
     variant?: "square" | "circular" | "extended" | undefined;
 } & {

package/esm/IconButton/styles.d.ts

@@ -8,7 +8,7 @@ export declare const getButtonSize: ({ size, }: IconButtonWrapperThemeProps) =>
 export declare const getButtonSizeMobile: ({ size, }: IconButtonWrapperThemeProps) => string;
 export declare const IconButtonWrapper: import("@emotion/styled").StyledComponent<Pick<import("../ButtonBase").BaseButtonProps, "color" | "translate" | keyof import("@mui/base").ButtonUnstyledOwnProps | "form" | "slot" | "style" | "title" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "variant" | "size" | "selected"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & Omit<import("../types").WithoutEmotionSpecific<import("@mui/lab").LoadingButtonProps<"button", {}>>, "color" | "variant"> & {
+} & Omit<import("..").WithoutEmotionSpecific<import("@mui/lab").LoadingButtonProps<"button", {}>>, "color" | "variant"> & {
     variant?: "link" | "light" | "text" | "contained" | undefined;
     color?: "primary" | "error" | "warning" | "success" | undefined;
     component?: import("react").ElementType<any> | undefined;

package/esm/SwipeableDrawer/styles.d.ts

@@ -40,7 +40,7 @@ export declare const SwipeableDrawerTitle: import("@emotion/styled").StyledCompo
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "sx" | "children" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | ("fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "typography" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & Omit<import("@mui/material/OverridableComponent").OverrideProps<import("../types").WithoutEmotionSpecific<import("@mui/material").TypographyTypeMap<{}, "span">>, import("react").ElementType<any>>, "color" | "variant"> & {
+} & Omit<import("@mui/material/OverridableComponent").OverrideProps<import("..").WithoutEmotionSpecific<import("@mui/material").TypographyTypeMap<{}, "span">>, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
     color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;

package/esm/Tooltip/styled.d.ts

@@ -1,4 +1,4 @@
-export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("../types").WithoutEmotionSpecific<import("@mui/material").TooltipProps> & {
+export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").TooltipProps> & {
     size?: "medium" | "small" | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/esm/hooks/index.d.ts

@@ -3,3 +3,5 @@ export * from './useMenu';
 export * from './useToggle';
 export * from './useForwardedRef';
 export * from './useRadioGroup';
+export * from './useEscapeClickEffect';
+export * from './useClickAwayEffect';

package/esm/hooks/index.js

@@ -3,3 +3,5 @@ export * from './useMenu';
 export * from './useToggle';
 export * from './useForwardedRef';
 export * from './useRadioGroup';
+export * from './useEscapeClickEffect';
+export * from './useClickAwayEffect';

package/esm/hooks/useClickAwayEffect/index.d.ts

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

package/esm/hooks/useClickAwayEffect/index.js

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

package/esm/hooks/useClickAwayEffect/useClickAwayEffect.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+import { CloseEventReason } from '../../types';
+export type UseClickAwayListenerOptions = {
+    /**
+     * @description реф на дом ноду, клик вне которой надо отслеживать
+     */
+    ref: RefObject<HTMLElement>;
+    /**
+     * @description колбэк который будет вызываться при нажатии вне рефа
+     */
+    onClickAway: (e: PointerEvent, reason: CloseEventReason) => void;
+    /**
+     * @description флаг активности
+     */
+    isActive: boolean;
+    /**
+     * @description флаг необходимости предотвращать всплытие, подойдет когда используется внутри модалки
+     */
+    preventBubbling?: boolean;
+};
+/**
+ * @description хук позволяющий подписаться на клик вне указанного рефа,
+ * подойдет для использования в кастомных попперах
+ */
+export declare const useClickAwayEffect: ({ ref, onClickAway, preventBubbling, isActive, }: UseClickAwayListenerOptions) => void;

package/esm/hooks/useClickAwayEffect/useClickAwayEffect.js

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+/**
+ * @description хук позволяющий подписаться на клик вне указанного рефа,
+ * подойдет для использования в кастомных попперах
+ */
+export const useClickAwayEffect = ({ ref, onClickAway, preventBubbling, isActive, }) => {
+    useEffect(() => {
+        const node = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!isActive || !node) {
+            return;
+        }
+        const onClick = (e) => {
+            if (!node.contains(e.target)) {
+                if (preventBubbling) {
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                }
+                onClickAway(e, 'clickAway');
+            }
+        };
+        window.addEventListener('pointerdown', onClick);
+        return () => {
+            window.removeEventListener('pointerdown', onClick);
+        };
+    }, [isActive, ref]);
+};

package/esm/hooks/useClickAwayEffect/useClickAwayEffect.test.d.ts

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

package/esm/hooks/useClickAwayEffect/useClickAwayEffect.test.js

@@ -0,0 +1,42 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { renderHook, userEvents } from '@astral/tests';
+import { vi } from 'vitest';
+import { useClickAwayEffect } from './useClickAwayEffect';
+describe('useClickAwayEffect', () => {
+    it('Props:isActive=true: при нажатии вне целевого дива вызывается onClickAway', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vi.fn();
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const ref = { current: div };
+        renderHook(() => useClickAwayEffect({ isActive: true, onClickAway: onClickAway, ref }));
+        yield userEvents.click(document.body);
+        expect(onClickAway).toBeCalled();
+    }));
+    it('Props:isActive=true: при нажатии внутри целевого дива не вызывается onClickAway', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vi.fn();
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const ref = { current: div };
+        renderHook(() => useClickAwayEffect({ isActive: true, onClickAway: onClickAway, ref }));
+        yield userEvents.click(div);
+        expect(onClickAway).toBeCalledTimes(0);
+    }));
+    it('Props:isActive=false: при нажатии куда угодно не вызывается onClickAway', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vi.fn();
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const ref = { current: div };
+        renderHook(() => useClickAwayEffect({ isActive: false, onClickAway: onClickAway, ref }));
+        yield userEvents.click(document.body);
+        yield userEvents.click(div);
+        expect(onClickAway).toBeCalledTimes(0);
+    }));
+});

package/esm/hooks/useEscapeClickEffect/useEscapeClickEffect.d.ts

@@ -1,9 +1,9 @@
-import { Reason } from '../../types';
+import { CloseEventReason } from '../../types';
 export type UseEscapeClickEffectProps = {
     /**
      * @description колбэк который будет вызываться при нажатии на кнопку `esc`
      */
-    onEscape?: (event: Event, reason: Reason) => void;
+    onEscape?: (event: Event, reason: CloseEventReason) => void;
     /**
      * @description флаг активности
      */

package/esm/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ActionCell';
 export * from './Alert';
 export * from './Autocomplete';
+export * from './ClickAwayListener';
 export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
@@ -34,6 +35,7 @@ export * from './Grow';
 export * from './IconButton';
 export * from './IconDropdownButton';
 export * from './hooks';
+export * from './types';
 export * from './List';
 export * from './ListItem';
 export * from './ListItemAvatar';

package/esm/index.js

@@ -1,6 +1,7 @@
 export * from './ActionCell';
 export * from './Alert';
 export * from './Autocomplete';
+export * from './ClickAwayListener';
 export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
@@ -34,6 +35,7 @@ export * from './Grow';
 export * from './IconButton';
 export * from './IconDropdownButton';
 export * from './hooks';
+export * from './types';
 export * from './List';
 export * from './ListItem';
 export * from './ListItemAvatar';

package/esm/types.d.ts

@@ -1,3 +1,7 @@
 import { AutocompleteCloseReason } from '@mui/base/AutocompleteUnstyled/useAutocomplete';
 export type WithoutEmotionSpecific<Props> = Omit<Props, 'sx' | 'css'>;
-export type Reason = 'escapeKeyDown' | 'backdropClick' | 'toggleInput' | 'blur' | AutocompleteCloseReason | null;
+/**
+ * @description список возможных причин закрытия попперов, модалок, тултипов,
+ * является абстрактным способом связать сущности всплывашек с BackdropStackManager
+ */
+export type CloseEventReason = 'escapeKeyDown' | 'backdropClick' | 'clickAway' | 'toggleInput' | 'blur' | AutocompleteCloseReason | null;

package/hooks/index.d.ts

@@ -3,3 +3,5 @@ export * from './useMenu';
 export * from './useToggle';
 export * from './useForwardedRef';
 export * from './useRadioGroup';
+export * from './useEscapeClickEffect';
+export * from './useClickAwayEffect';

package/hooks/index.js

@@ -19,3 +19,5 @@ __exportStar(require("./useMenu"), exports);
 __exportStar(require("./useToggle"), exports);
 __exportStar(require("./useForwardedRef"), exports);
 __exportStar(require("./useRadioGroup"), exports);
+__exportStar(require("./useEscapeClickEffect"), exports);
+__exportStar(require("./useClickAwayEffect"), exports);

package/hooks/useClickAwayEffect/index.d.ts

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

package/hooks/useClickAwayEffect/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useClickAwayEffect"), exports);

package/hooks/useClickAwayEffect/useClickAwayEffect.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+import { CloseEventReason } from '../../types';
+export type UseClickAwayListenerOptions = {
+    /**
+     * @description реф на дом ноду, клик вне которой надо отслеживать
+     */
+    ref: RefObject<HTMLElement>;
+    /**
+     * @description колбэк который будет вызываться при нажатии вне рефа
+     */
+    onClickAway: (e: PointerEvent, reason: CloseEventReason) => void;
+    /**
+     * @description флаг активности
+     */
+    isActive: boolean;
+    /**
+     * @description флаг необходимости предотвращать всплытие, подойдет когда используется внутри модалки
+     */
+    preventBubbling?: boolean;
+};
+/**
+ * @description хук позволяющий подписаться на клик вне указанного рефа,
+ * подойдет для использования в кастомных попперах
+ */
+export declare const useClickAwayEffect: ({ ref, onClickAway, preventBubbling, isActive, }: UseClickAwayListenerOptions) => void;

package/hooks/useClickAwayEffect/useClickAwayEffect.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickAwayEffect = void 0;
+const react_1 = require("react");
+/**
+ * @description хук позволяющий подписаться на клик вне указанного рефа,
+ * подойдет для использования в кастомных попперах
+ */
+const useClickAwayEffect = ({ ref, onClickAway, preventBubbling, isActive, }) => {
+    (0, react_1.useEffect)(() => {
+        const node = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!isActive || !node) {
+            return;
+        }
+        const onClick = (e) => {
+            if (!node.contains(e.target)) {
+                if (preventBubbling) {
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                }
+                onClickAway(e, 'clickAway');
+            }
+        };
+        window.addEventListener('pointerdown', onClick);
+        return () => {
+            window.removeEventListener('pointerdown', onClick);
+        };
+    }, [isActive, ref]);
+};
+exports.useClickAwayEffect = useClickAwayEffect;

package/hooks/useClickAwayEffect/useClickAwayEffect.test.d.ts

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

package/hooks/useClickAwayEffect/useClickAwayEffect.test.js

@@ -0,0 +1,44 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tests_1 = require("@astral/tests");
+const vitest_1 = require("vitest");
+const useClickAwayEffect_1 = require("./useClickAwayEffect");
+describe('useClickAwayEffect', () => {
+    it('Props:isActive=true: при нажатии вне целевого дива вызывается onClickAway', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vitest_1.vi.fn();
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const ref = { current: div };
+        (0, tests_1.renderHook)(() => (0, useClickAwayEffect_1.useClickAwayEffect)({ isActive: true, onClickAway: onClickAway, ref }));
+        yield tests_1.userEvents.click(document.body);
+        expect(onClickAway).toBeCalled();
+    }));
+    it('Props:isActive=true: при нажатии внутри целевого дива не вызывается onClickAway', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vitest_1.vi.fn();
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const ref = { current: div };
+        (0, tests_1.renderHook)(() => (0, useClickAwayEffect_1.useClickAwayEffect)({ isActive: true, onClickAway: onClickAway, ref }));
+        yield tests_1.userEvents.click(div);
+        expect(onClickAway).toBeCalledTimes(0);
+    }));
+    it('Props:isActive=false: при нажатии куда угодно не вызывается onClickAway', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vitest_1.vi.fn();
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const ref = { current: div };
+        (0, tests_1.renderHook)(() => (0, useClickAwayEffect_1.useClickAwayEffect)({ isActive: false, onClickAway: onClickAway, ref }));
+        yield tests_1.userEvents.click(document.body);
+        yield tests_1.userEvents.click(div);
+        expect(onClickAway).toBeCalledTimes(0);
+    }));
+});

package/hooks/useEscapeClickEffect/useEscapeClickEffect.d.ts

@@ -1,9 +1,9 @@
-import { Reason } from '../../types';
+import { CloseEventReason } from '../../types';
 export type UseEscapeClickEffectProps = {
     /**
      * @description колбэк который будет вызываться при нажатии на кнопку `esc`
      */
-    onEscape?: (event: Event, reason: Reason) => void;
+    onEscape?: (event: Event, reason: CloseEventReason) => void;
     /**
      * @description флаг активности
      */

package/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ActionCell';
 export * from './Alert';
 export * from './Autocomplete';
+export * from './ClickAwayListener';
 export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
@@ -34,6 +35,7 @@ export * from './Grow';
 export * from './IconButton';
 export * from './IconDropdownButton';
 export * from './hooks';
+export * from './types';
 export * from './List';
 export * from './ListItem';
 export * from './ListItemAvatar';

package/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ActionCell"), exports);
 __exportStar(require("./Alert"), exports);
 __exportStar(require("./Autocomplete"), exports);
+__exportStar(require("./ClickAwayListener"), exports);
 __exportStar(require("./BackdropStack"), exports);
 __exportStar(require("./Badge"), exports);
 __exportStar(require("./Button"), exports);
@@ -50,6 +51,7 @@ __exportStar(require("./Grow"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./IconDropdownButton"), exports);
 __exportStar(require("./hooks"), exports);
+__exportStar(require("./types"), exports);
 __exportStar(require("./List"), exports);
 __exportStar(require("./ListItem"), exports);
 __exportStar(require("./ListItemAvatar"), exports);

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@astral/ui",
-  "version": "1.50.1",
+  "version": "1.51.1",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.50.1",
+    "@astral/icons": "^1.51.1",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",

package/types.d.ts

@@ -1,3 +1,7 @@
 import { AutocompleteCloseReason } from '@mui/base/AutocompleteUnstyled/useAutocomplete';
 export type WithoutEmotionSpecific<Props> = Omit<Props, 'sx' | 'css'>;
-export type Reason = 'escapeKeyDown' | 'backdropClick' | 'toggleInput' | 'blur' | AutocompleteCloseReason | null;
+/**
+ * @description список возможных причин закрытия попперов, модалок, тултипов,
+ * является абстрактным способом связать сущности всплывашек с BackdropStackManager
+ */
+export type CloseEventReason = 'escapeKeyDown' | 'backdropClick' | 'clickAway' | 'toggleInput' | 'blur' | AutocompleteCloseReason | null;

package/DatePicker/DatePickerClickAwayListener/DatePickerClickAwayListener.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-type DatePickerClickAwayListenerProps = {
-    onClickAway: () => void;
-};
-export declare const DatePickerClickAwayListener: ({ onClickAway, children, }: PropsWithChildren<DatePickerClickAwayListenerProps>) => JSX.Element;
-export {};

package/DatePicker/DatePickerClickAwayListener/DatePickerClickAwayListener.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerClickAwayListener = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const DatePickerClickAwayListener = ({ onClickAway, children, }) => ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: onClickAway }, { children: (0, jsx_runtime_1.jsx)("div", { children: children }) })));
-exports.DatePickerClickAwayListener = DatePickerClickAwayListener;

package/DatePicker/DatePickerClickAwayListener/index.d.ts

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

package/esm/DatePicker/DatePickerClickAwayListener/DatePickerClickAwayListener.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-type DatePickerClickAwayListenerProps = {
-    onClickAway: () => void;
-};
-export declare const DatePickerClickAwayListener: ({ onClickAway, children, }: PropsWithChildren<DatePickerClickAwayListenerProps>) => JSX.Element;
-export {};

package/esm/DatePicker/DatePickerClickAwayListener/DatePickerClickAwayListener.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ClickAwayListener } from '@mui/material';
-export const DatePickerClickAwayListener = ({ onClickAway, children, }) => (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClickAway }, { children: _jsx("div", { children: children }) })));

package/esm/DatePicker/DatePickerClickAwayListener/index.d.ts

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

package/esm/DatePicker/DatePickerClickAwayListener/index.js

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