@consta/uikit 5.26.0 → 5.27.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/__internal__/src/components/Banner/Banner.d.ts +20 -8
- package/__internal__/src/components/Banner/Banner.js +1 -1
- package/__internal__/src/components/Banner/Banner.js.map +1 -1
- package/__internal__/src/components/FieldComponents/FieldWrapper/FieldWrapper.js +1 -1
- package/__internal__/src/components/FieldComponents/FieldWrapper/FieldWrapper.js.map +1 -1
- package/__internal__/src/components/FieldComponents/FieldWrapper/types.d.ts +1 -0
- package/__internal__/src/components/FieldComponents/FieldWrapper/types.js.map +1 -1
- package/__internal__/src/components/Modal/Modal.css +1 -1
- package/__internal__/src/components/Modal/Modal.d.ts +8 -13
- package/__internal__/src/components/Modal/Modal.js +1 -1
- package/__internal__/src/components/Modal/Modal.js.map +1 -1
- package/__internal__/src/components/Modal/ModalHeader/ModalHeader.css +1 -0
- package/__internal__/src/components/Modal/ModalHeader/ModalHeader.d.ts +14 -0
- package/__internal__/src/components/Modal/ModalHeader/ModalHeader.js +2 -0
- package/__internal__/src/components/Modal/ModalHeader/ModalHeader.js.map +1 -0
- package/__internal__/src/components/Modal/ModalHeader/index.d.ts +1 -0
- package/__internal__/src/components/Modal/ModalHeader/index.js +2 -0
- package/__internal__/src/components/Modal/ModalHeader/index.js.map +1 -0
- package/__internal__/src/components/Modal/ModalLayout/ModalLayout.css +5 -0
- package/__internal__/src/components/Modal/ModalLayout/ModalLayout.d.ts +10 -0
- package/__internal__/src/components/Modal/ModalLayout/ModalLayout.js +2 -0
- package/__internal__/src/components/Modal/ModalLayout/ModalLayout.js.map +1 -0
- package/__internal__/src/components/Modal/ModalLayout/index.d.ts +1 -0
- package/__internal__/src/components/Modal/ModalLayout/index.js +2 -0
- package/__internal__/src/components/Modal/ModalLayout/index.js.map +1 -0
- package/__internal__/src/components/Modal/index.d.ts +3 -0
- package/__internal__/src/components/Modal/index.js +1 -1
- package/__internal__/src/components/Modal/index.js.map +1 -1
- package/__internal__/src/components/Modal/types.d.ts +23 -0
- package/__internal__/src/components/Modal/types.js +2 -0
- package/__internal__/src/components/Modal/types.js.map +1 -0
- package/__internal__/src/components/Modal/useModal.d.ts +20 -0
- package/__internal__/src/components/Modal/useModal.js +2 -0
- package/__internal__/src/components/Modal/useModal.js.map +1 -0
- package/__internal__/src/components/PortalWithTheme/PortalWithTheme.js +1 -1
- package/__internal__/src/components/PortalWithTheme/PortalWithTheme.js.map +1 -1
- package/__internal__/src/components/RadioGroup/RadioGroup.js +1 -1
- package/__internal__/src/components/RadioGroup/RadioGroup.js.map +1 -1
- package/__internal__/src/components/Sidebar/Sidebar.css +1 -1
- package/__internal__/src/components/Sidebar/Sidebar.d.ts +1 -36
- package/__internal__/src/components/Sidebar/Sidebar.js +1 -1
- package/__internal__/src/components/Sidebar/Sidebar.js.map +1 -1
- package/__internal__/src/components/Sidebar/index.d.ts +1 -0
- package/__internal__/src/components/Sidebar/index.js +1 -1
- package/__internal__/src/components/Sidebar/index.js.map +1 -1
- package/__internal__/src/components/Sidebar/types.d.ts +47 -0
- package/__internal__/src/components/Sidebar/types.js +2 -0
- package/__internal__/src/components/Sidebar/types.js.map +1 -0
- package/__internal__/src/components/Sidebar/useAnimateTimeout.d.ts +2 -0
- package/__internal__/src/components/Sidebar/useAnimateTimeout.js +2 -0
- package/__internal__/src/components/Sidebar/useAnimateTimeout.js.map +1 -0
- package/__internal__/src/components/Slider/Slider.js +1 -1
- package/__internal__/src/components/Slider/Slider.js.map +1 -1
- package/__internal__/src/components/Slider/useSlider/useSlider.js +1 -1
- package/__internal__/src/components/Slider/useSlider/useSlider.js.map +1 -1
- package/__internal__/src/hooks/useComponentSize/useComponentSize.d.ts +1 -1
- package/__internal__/src/hooks/useComponentSize/useComponentSize.js +1 -1
- package/__internal__/src/hooks/useComponentSize/useComponentSize.js.map +1 -1
- package/__internal__/src/mixs/MixFlex/MixFlex.d.ts +2 -2
- package/__internal__/src/mixs/MixFlex/MixFlex.js.map +1 -1
- package/__internal__/src/mixs/MixSpace/MixSpace.d.ts +1 -1
- package/__internal__/src/mixs/MixSpace/MixSpace.js +1 -1
- package/__internal__/src/mixs/MixSpace/MixSpace.js.map +1 -1
- package/__internal__/src/utils/state/useComponentSizeAtom/getElementSize.d.ts +4 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/getElementSize.js +2 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/getElementSize.js.map +1 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/index.d.ts +3 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/index.js +2 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/index.js.map +1 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/types.d.ts +4 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/types.js +2 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/types.js.map +1 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/useComponentSize.d.ts +2 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/useComponentSize.js +2 -0
- package/__internal__/src/utils/state/useComponentSizeAtom/useComponentSize.js.map +1 -0
- package/__internal__/src/utils/state/useResizeObservedAtom/index.d.ts +1 -0
- package/__internal__/src/utils/state/useResizeObservedAtom/index.js +2 -0
- package/__internal__/src/utils/state/useResizeObservedAtom/index.js.map +1 -0
- package/__internal__/src/utils/state/useResizeObservedAtom/useResizeObservedAtom.d.ts +2 -0
- package/__internal__/src/utils/state/useResizeObservedAtom/useResizeObservedAtom.js +2 -0
- package/__internal__/src/utils/state/useResizeObservedAtom/useResizeObservedAtom.js.map +1 -0
- package/package.json +3 -2
|
@@ -3,16 +3,28 @@ import { IconComponent } from '@consta/icons/Icon';
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { MixSpaceProps, Space } from '../../mixs/MixSpace';
|
|
5
5
|
import { PropsWithJsxAttributes } from '../../utils/types/PropsWithJsxAttributes';
|
|
6
|
+
export declare const bannerPropSize: readonly ["xs", "s", "m", "l"];
|
|
7
|
+
export type BannerPropSize = typeof bannerPropSize[number];
|
|
8
|
+
export declare const bannerPropSizeDefault: BannerPropSize;
|
|
9
|
+
export declare const bannerPropView: readonly ["filled", "ghost", "transparent"];
|
|
10
|
+
export type BannerPropView = typeof bannerPropView[number];
|
|
11
|
+
export declare const bannerPropViewDefault: BannerPropView;
|
|
12
|
+
export declare const bannerPropStatus: readonly ["normal", "warning", "alert", "success", "system"];
|
|
13
|
+
export type BannerPropStatus = typeof bannerPropStatus[number];
|
|
14
|
+
export declare const bannerPropStatusDefault: BannerPropStatus;
|
|
15
|
+
export declare const bannerPropForm: readonly ["default", "round", "brick"];
|
|
16
|
+
export type BannerPropForm = typeof bannerPropForm[number];
|
|
17
|
+
export declare const bannerPropFormDefault: BannerPropForm;
|
|
6
18
|
export type BannerProps = PropsWithJsxAttributes<{
|
|
7
19
|
leftSide?: React.ReactNode;
|
|
8
20
|
rightSide?: React.ReactNode;
|
|
9
21
|
icon?: IconComponent;
|
|
10
|
-
size?:
|
|
11
|
-
view?:
|
|
22
|
+
size?: BannerPropSize;
|
|
23
|
+
view?: BannerPropView;
|
|
12
24
|
space?: MixSpaceProps;
|
|
13
25
|
itemsGap?: Space | [Space, Space];
|
|
14
|
-
status?:
|
|
15
|
-
form?:
|
|
26
|
+
status?: BannerPropStatus;
|
|
27
|
+
form?: BannerPropForm;
|
|
16
28
|
}>;
|
|
17
29
|
export declare const cnBanner: import("@bem-react/classname").ClassNameFormatter;
|
|
18
30
|
/**
|
|
@@ -22,11 +34,11 @@ export declare const cnBanner: import("@bem-react/classname").ClassNameFormatter
|
|
|
22
34
|
* @property {React.ReactNode} [leftSide] - Содержимое на левой стороне.
|
|
23
35
|
* @property {React.ReactNode} [rightSide] - Содержимое на правой стороне.
|
|
24
36
|
* @property {IconComponent} [icon] - Иконка.
|
|
25
|
-
* @property {
|
|
26
|
-
* @property {
|
|
37
|
+
* @property {BannerPropSize} [size] - Размер компонента.
|
|
38
|
+
* @property {BannerPropView} [view] - Визуальный стиль.
|
|
27
39
|
* @property {MixSpaceProps} [space] - Параметры отступов.
|
|
28
40
|
* @property {Space | [Space, Space]} [itemsGap] - Отступы между элементами.
|
|
29
|
-
* @property {
|
|
30
|
-
* @property {
|
|
41
|
+
* @property {BannerPropStatus} [status] - Статус (цветовая схема).
|
|
42
|
+
* @property {BannerPropForm} [form] - Форма компонента.
|
|
31
43
|
*/
|
|
32
44
|
export declare const Banner: React.ForwardRefExoticComponent<Omit<BannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Banner.css";import React,{forwardRef}from"react";import{cnText,Text}from"../Text";import{useTheme}from"../Theme/Theme";import{cnMixFlex}from"../../mixs/MixFlex";import{cnMixSpace}from"../../mixs/MixSpace";import{cn}from"../../utils/bem";import{isNotNil,isString}from"../../utils/type-guards";export var cnBanner=cn("Banner");var SlotWrapper=function(a){var b=a.children;return React.createElement("div",{className:cnBanner("Slot")},b)},renderSlot=function(a,b,c){return isString(a)?React.createElement(SlotWrapper,{key:cnBanner("Slot",{index:b,position:c})},React.createElement(Text,{className:cnBanner("Text"),view:"primary",weight:0===b&&0===c?"bold":void 0,lineHeight:"m"},a)):React.createElement(SlotWrapper,{key:cnBanner("Slot",{index:b,position:c})},a)},renderSlots=function(a,b){return Array.isArray(a)?a.filter(isNotNil).map(function(a,c){return renderSlot(a,c,b)}):renderSlots([a],b)},getGap=function(a,b){return Array.isArray(a)?a[b]:a},textSizeMap={xs:"s",s:"s",m:"m",l:"l"},controlSizeMap={xs:"xs",s:"s",m:"s",l:"m"};export var Banner=forwardRef(function(a,b){var c,d=a.leftSide,e=a.rightSide,f=a.icon,g=a.size,h=void 0===g?
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["leftSide","rightSide","icon","size","view","className","space","itemsGap","status","style","form"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Banner.css";import React,{forwardRef}from"react";import{cnText,Text}from"../Text";import{useTheme}from"../Theme/Theme";import{cnMixFlex}from"../../mixs/MixFlex";import{cnMixSpace}from"../../mixs/MixSpace";import{cn}from"../../utils/bem";import{isNotNil,isString}from"../../utils/type-guards";export var bannerPropSize=["xs","s","m","l"];export var bannerPropSizeDefault=bannerPropSize[2];export var bannerPropView=["filled","ghost","transparent"];export var bannerPropViewDefault=bannerPropView[0];export var bannerPropStatus=["normal","warning","alert","success","system"];export var bannerPropStatusDefault=bannerPropStatus[0];export var bannerPropForm=["default","round","brick"];export var bannerPropFormDefault=bannerPropForm[0];export var cnBanner=cn("Banner");var SlotWrapper=function(a){var b=a.children;return React.createElement("div",{className:cnBanner("Slot")},b)},renderSlot=function(a,b,c){return isString(a)?React.createElement(SlotWrapper,{key:cnBanner("Slot",{index:b,position:c})},React.createElement(Text,{className:cnBanner("Text"),view:"primary",weight:0===b&&0===c?"bold":void 0,lineHeight:"m"},a)):React.createElement(SlotWrapper,{key:cnBanner("Slot",{index:b,position:c})},a)},renderSlots=function(a,b){return Array.isArray(a)?a.filter(isNotNil).map(function(a,c){return renderSlot(a,c,b)}):renderSlots([a],b)},getGap=function(a,b){return Array.isArray(a)?a[b]:a},textSizeMap={xs:"s",s:"s",m:"m",l:"l"},controlSizeMap={xs:"xs",s:"s",m:"s",l:"m"};export var Banner=forwardRef(function(a,b){var c,d=a.leftSide,e=a.rightSide,f=a.icon,g=a.size,h=void 0===g?bannerPropSizeDefault:g,i=a.view,j=void 0===i?bannerPropViewDefault:i,k=a.className,l=a.space,m=a.itemsGap,n=void 0===m?"s":m,o=a.status,p=void 0===o?bannerPropStatusDefault:o,q=a.style,r=a.form,s=void 0===r?bannerPropFormDefault:r,t=_objectWithoutProperties(a,_excluded),u=useTheme(),v=u.themeClassNames,w=renderSlots([f?React.createElement(f,{className:cnBanner("Icon")}):null].concat(_toConsumableArray(Array.isArray(d)?d:[d])),0),x=renderSlots(e,1);return React.createElement("div",Object.assign({},t,{className:cnBanner({view:j,form:s,size:h},[cnMixFlex({justify:x.length&&!w.length?"flex-end":"space-between",align:"center",gap:"m"}),cnMixSpace(l||{pH:h,pV:"xs"}),cnText({size:textSizeMap[h]}),"system"!==p&&"filled"===j?v.color.accent:void 0,k]),style:_objectSpread(_objectSpread({},q),{},(c={},_defineProperty(c,"--banner-bg-color","var(--color-bg-".concat(p,")")),_defineProperty(c,"--banner-inner-height","var(--control-height-".concat(controlSizeMap[h],")")),c)),ref:b}),w.length?React.createElement("div",{className:cnMixFlex({gap:getGap(n,0),align:"center"})},w):void 0,x.length?React.createElement("div",{className:cnMixFlex({gap:getGap(n,1),align:"center"})},x):void 0)});
|
|
2
2
|
//# sourceMappingURL=Banner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","names":["React","forwardRef","cnText","Text","useTheme","cnMixFlex","cnMixSpace","cn","isNotNil","isString","cnBanner","SlotWrapper","children","renderSlot","slot","index","position","renderSlots","Array","isArray","filter","map","item","getGap","gap","textSizeMap","xs","s","m","l","controlSizeMap","Banner","props","ref","leftSide","rightSide","Icon","icon","size","view","className","space","itemsGap","status","style","form","themeClassNames","leftSlots","rightSlots","justify","length","align","pH","pV","color","accent"],"sources":["../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import './Banner.css';\n\nimport { IconComponent } from '@consta/icons/Icon';\nimport React, { forwardRef } from 'react';\n\nimport { cnText, Text } from '##/components/Text';\nimport { useTheme } from '##/components/Theme/Theme';\nimport { cnMixFlex } from '##/mixs/MixFlex';\nimport { cnMixSpace, MixSpaceProps, Space } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\nimport { isNotNil, isString } from '##/utils/type-guards';\nimport { PropsWithJsxAttributes } from '##/utils/types/PropsWithJsxAttributes';\n\nexport type BannerProps = PropsWithJsxAttributes<{\n leftSide?: React.ReactNode;\n rightSide?: React.ReactNode;\n icon?: IconComponent;\n size?: 'xs' | 's' | 'm' | 'l';\n view?: 'filled' | 'ghost' | 'transparent';\n space?: MixSpaceProps;\n itemsGap?: Space | [Space, Space];\n status?: 'normal' | 'warning' | 'alert' | 'success' | 'system';\n form?: 'default' | 'round' | 'brick';\n}>;\n\nexport const cnBanner = cn('Banner');\n\nconst SlotWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <div className={cnBanner('Slot')}>{children}</div>\n);\n\nconst renderSlot = (slot: React.ReactNode, index: number, position: number) => {\n if (isString(slot)) {\n return (\n <SlotWrapper key={cnBanner('Slot', { index, position })}>\n <Text\n className={cnBanner('Text')}\n view=\"primary\"\n weight={index === 0 && position === 0 ? 'bold' : undefined}\n lineHeight=\"m\"\n >\n {slot}\n </Text>\n </SlotWrapper>\n );\n }\n\n return (\n <SlotWrapper key={cnBanner('Slot', { index, position })}>\n {slot}\n </SlotWrapper>\n );\n};\n\nconst renderSlots = (slot: React.ReactNode, position: number) => {\n if (Array.isArray(slot)) {\n return slot\n .filter(isNotNil)\n .map((item, index) => renderSlot(item, index, position));\n }\n return renderSlots([slot], position);\n};\n\nconst getGap = (gap: Space | [Space, Space], index: number) => {\n if (Array.isArray(gap)) {\n return gap[index];\n }\n return gap;\n};\n\nconst textSizeMap = {\n xs: 's',\n s: 's',\n m: 'm',\n l: 'l',\n} as const;\n\nconst controlSizeMap = {\n xs: 'xs',\n s: 's',\n m: 's',\n l: 'm',\n} as const;\n\n/**\n * Компонент Banner, отображающий содержимое слева и справа.\n * Поддерживает иконки, размеры, виды, статусы и формы.\n *\n * @property {React.ReactNode} [leftSide] - Содержимое на левой стороне.\n * @property {React.ReactNode} [rightSide] - Содержимое на правой стороне.\n * @property {IconComponent} [icon] - Иконка.\n * @property {'xs' | 's' | 'm' | 'l'} [size] - Размер компонента.\n * @property {'filled' | 'ghost' | 'transparent'} [view] - Визуальный стиль.\n * @property {MixSpaceProps} [space] - Параметры отступов.\n * @property {Space | [Space, Space]} [itemsGap] - Отступы между элементами.\n * @property {'normal' | 'warning' | 'alert' | 'success' | 'system'} [status] - Статус (цветовая схема).\n * @property {'default' | 'round' | 'brick'} [form] - Форма компонента.\n */\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n const {\n leftSide,\n rightSide,\n icon: Icon,\n size = 'm',\n view = 'filled',\n className,\n space,\n itemsGap = 's',\n status = 'normal',\n style,\n form = 'default',\n } = props;\n\n const { themeClassNames } = useTheme();\n\n const leftSlots = [\n Icon ? (\n <SlotWrapper>\n <Icon className={cnBanner('Icon')} />\n </SlotWrapper>\n ) : null,\n ...renderSlots(leftSide, 0),\n ].filter(isNotNil);\n\n const rightSlots = renderSlots(rightSide, 1);\n\n return (\n <div\n className={cnBanner({ view, form }, [\n cnMixFlex({\n justify:\n rightSlots.length && !leftSlots.length\n ? 'flex-end'\n : 'space-between',\n align: 'center',\n gap: 'm',\n }),\n cnMixSpace(space || { pH: size, pV: 'xs' }),\n cnText({ size: textSizeMap[size] }),\n status !== 'system' && view === 'filled'\n ? themeClassNames.color.accent\n : undefined,\n className,\n ])}\n style={{\n ...style,\n ['--banner-bg-color' as string]: `var(--color-bg-${status})`,\n ['--banner-inner-height' as string]: `var(--control-height-${controlSizeMap[size]})`,\n }}\n ref={ref}\n >\n {leftSlots.length ? (\n <div\n className={cnMixFlex({ gap: getGap(itemsGap, 0), align: 'center' })}\n >\n {leftSlots}\n </div>\n ) : undefined}\n {rightSlots.length ? (\n <div\n className={cnMixFlex({ gap: getGap(itemsGap, 1), align: 'center' })}\n >\n {rightSlots}\n </div>\n ) : undefined}\n </div>\n );\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Banner.js","names":["React","forwardRef","cnText","Text","useTheme","cnMixFlex","cnMixSpace","cn","isNotNil","isString","bannerPropSize","bannerPropSizeDefault","bannerPropView","bannerPropViewDefault","bannerPropStatus","bannerPropStatusDefault","bannerPropForm","bannerPropFormDefault","cnBanner","SlotWrapper","children","renderSlot","slot","index","position","renderSlots","Array","isArray","filter","map","item","getGap","gap","textSizeMap","xs","s","m","l","controlSizeMap","Banner","props","ref","leftSide","rightSide","Icon","icon","size","view","className","space","itemsGap","status","style","form","otherProps","themeClassNames","leftSlots","rightSlots","justify","length","align","pH","pV","color","accent"],"sources":["../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import './Banner.css';\n\nimport { IconComponent } from '@consta/icons/Icon';\nimport React, { forwardRef } from 'react';\n\nimport { cnText, Text } from '##/components/Text';\nimport { useTheme } from '##/components/Theme/Theme';\nimport { cnMixFlex } from '##/mixs/MixFlex';\nimport { cnMixSpace, MixSpaceProps, Space } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\nimport { isNotNil, isString } from '##/utils/type-guards';\nimport { PropsWithJsxAttributes } from '##/utils/types/PropsWithJsxAttributes';\n\nexport const bannerPropSize = ['xs', 's', 'm', 'l'] as const;\nexport type BannerPropSize = typeof bannerPropSize[number];\nexport const bannerPropSizeDefault: BannerPropSize = bannerPropSize[2]; // 'm'\n\nexport const bannerPropView = ['filled', 'ghost', 'transparent'] as const;\nexport type BannerPropView = typeof bannerPropView[number];\nexport const bannerPropViewDefault: BannerPropView = bannerPropView[0]; // 'filled'\n\nexport const bannerPropStatus = [\n 'normal',\n 'warning',\n 'alert',\n 'success',\n 'system',\n] as const;\nexport type BannerPropStatus = typeof bannerPropStatus[number];\nexport const bannerPropStatusDefault: BannerPropStatus = bannerPropStatus[0]; // 'normal'\n\nexport const bannerPropForm = ['default', 'round', 'brick'] as const;\nexport type BannerPropForm = typeof bannerPropForm[number];\nexport const bannerPropFormDefault: BannerPropForm = bannerPropForm[0]; // 'default'\n\nexport type BannerProps = PropsWithJsxAttributes<{\n leftSide?: React.ReactNode;\n rightSide?: React.ReactNode;\n icon?: IconComponent;\n size?: BannerPropSize;\n view?: BannerPropView;\n space?: MixSpaceProps;\n itemsGap?: Space | [Space, Space];\n status?: BannerPropStatus;\n form?: BannerPropForm;\n}>;\n\nexport const cnBanner = cn('Banner');\n\nconst SlotWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <div className={cnBanner('Slot')}>{children}</div>\n);\n\nconst renderSlot = (slot: React.ReactNode, index: number, position: number) => {\n if (isString(slot)) {\n return (\n <SlotWrapper key={cnBanner('Slot', { index, position })}>\n <Text\n className={cnBanner('Text')}\n view=\"primary\"\n weight={index === 0 && position === 0 ? 'bold' : undefined}\n lineHeight=\"m\"\n >\n {slot}\n </Text>\n </SlotWrapper>\n );\n }\n\n return (\n <SlotWrapper key={cnBanner('Slot', { index, position })}>\n {slot}\n </SlotWrapper>\n );\n};\n\nconst renderSlots = (slot: React.ReactNode, position: number) => {\n if (Array.isArray(slot)) {\n return slot\n .filter(isNotNil)\n .map((item, index) => renderSlot(item, index, position));\n }\n return renderSlots([slot], position);\n};\n\nconst getGap = (gap: Space | [Space, Space], index: number) => {\n if (Array.isArray(gap)) {\n return gap[index];\n }\n return gap;\n};\n\nconst textSizeMap: Record<BannerPropSize, 'xs' | 's' | 'm' | 'l'> = {\n xs: 's',\n s: 's',\n m: 'm',\n l: 'l',\n};\n\nconst controlSizeMap: Record<BannerPropSize, 'xs' | 's' | 'm'> = {\n xs: 'xs',\n s: 's',\n m: 's',\n l: 'm',\n};\n\n/**\n * Компонент Banner, отображающий содержимое слева и справа.\n * Поддерживает иконки, размеры, виды, статусы и формы.\n *\n * @property {React.ReactNode} [leftSide] - Содержимое на левой стороне.\n * @property {React.ReactNode} [rightSide] - Содержимое на правой стороне.\n * @property {IconComponent} [icon] - Иконка.\n * @property {BannerPropSize} [size] - Размер компонента.\n * @property {BannerPropView} [view] - Визуальный стиль.\n * @property {MixSpaceProps} [space] - Параметры отступов.\n * @property {Space | [Space, Space]} [itemsGap] - Отступы между элементами.\n * @property {BannerPropStatus} [status] - Статус (цветовая схема).\n * @property {BannerPropForm} [form] - Форма компонента.\n */\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n const {\n leftSide,\n rightSide,\n icon: Icon,\n size = bannerPropSizeDefault,\n view = bannerPropViewDefault,\n className,\n space,\n itemsGap = 's',\n status = bannerPropStatusDefault,\n style,\n form = bannerPropFormDefault,\n ...otherProps\n } = props;\n\n const { themeClassNames } = useTheme();\n\n const leftSlots = renderSlots(\n [\n Icon ? <Icon className={cnBanner('Icon')} /> : null,\n ...(Array.isArray(leftSide) ? leftSide : [leftSide]),\n ],\n 0,\n );\n\n const rightSlots = renderSlots(rightSide, 1);\n\n return (\n <div\n {...otherProps}\n className={cnBanner({ view, form, size }, [\n cnMixFlex({\n justify:\n rightSlots.length && !leftSlots.length\n ? 'flex-end'\n : 'space-between',\n align: 'center',\n gap: 'm',\n }),\n cnMixSpace(space || { pH: size, pV: 'xs' }),\n cnText({ size: textSizeMap[size] }),\n status !== 'system' && view === 'filled'\n ? themeClassNames.color.accent\n : undefined,\n className,\n ])}\n style={{\n ...style,\n ['--banner-bg-color' as string]: `var(--color-bg-${status})`,\n ['--banner-inner-height' as string]: `var(--control-height-${controlSizeMap[size]})`,\n }}\n ref={ref}\n >\n {leftSlots.length ? (\n <div\n className={cnMixFlex({ gap: getGap(itemsGap, 0), align: 'center' })}\n >\n {leftSlots}\n </div>\n ) : undefined}\n {rightSlots.length ? (\n <div\n className={cnMixFlex({ gap: getGap(itemsGap, 1), align: 'center' })}\n >\n {rightSlots}\n </div>\n ) : undefined}\n </div>\n );\n});\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","children","label","size","labelIcon","caption","required","status","side","counter","labelPosition","labelIconRef","as","labelHtmlFor"];import React from"react";import{Text}from"../../Text";import{cnMixFlex}from"../../../mixs/MixFlex";import{isString}from"../../../utils/type-guards";import{forwardRefWithAs}from"../../../utils/types/PropsWithAsAttributes";import{FieldCaption}from"../FieldCaption";import{FieldLabel}from"../FieldLabel";import{cnFieldWrapper}from"./cnFieldWrapper";import{directionMap,spaceMap}from"./helpers";var
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","children","label","size","labelIcon","caption","required","status","side","counter","counterStatus","labelPosition","labelIconRef","as","labelHtmlFor"];import React from"react";import{Text}from"../../Text";import{cnMixFlex}from"../../../mixs/MixFlex";import{isString}from"../../../utils/type-guards";import{forwardRefWithAs}from"../../../utils/types/PropsWithAsAttributes";import{FieldCaption}from"../FieldCaption";import{FieldLabel}from"../FieldLabel";import{cnFieldWrapper}from"./cnFieldWrapper";import{directionMap,spaceMap}from"./helpers";var Counter=function(a){var b=a.counter,c=a.status;return React.createElement(Text,{className:cnFieldWrapper("Counter"),view:c||"ghost",size:"xs",lineHeight:"m"},Array.isArray(b)?b.join("/"):b)},renderSide=function(a){return isString(a)?React.createElement("span",{className:cnFieldWrapper("SideText")},a):a};export var FieldWrapper=forwardRefWithAs(function(a,b){var c,d=a.className,e=a.children,f=a.label,g=a.size,h=void 0===g?"m":g,i=a.labelIcon,j=a.caption,k=a.required,l=a.status,m=a.side,n=a.counter,o=a.counterStatus,p=a.labelPosition,q=void 0===p?"top":p,r=a.labelIconRef,s=a.as,t=void 0===s?"div":s,u=a.labelHtmlFor,v=_objectWithoutProperties(a,_excluded),w=spaceMap[h];return React.createElement(t,Object.assign({},v,{ref:b,className:cnFieldWrapper(null,[cnMixFlex({direction:directionMap[q],gap:"top"===q?w:"s"}),d])}),f&&React.createElement(FieldLabel,Object.assign({size:h,required:k,icon:i,iconRef:r},u?{htmlFor:u,as:"label"}:{}),f),React.createElement("div",{className:cnFieldWrapper("ControlAndCaptionWrapper",[cnMixFlex({gap:w,direction:"column"})])},React.createElement("div",{className:cnFieldWrapper("ControlWrapper",[cnMixFlex({gap:w,direction:"row"})])},React.createElement("div",{className:cnFieldWrapper("Control")},e),m&&React.createElement("div",{className:cnFieldWrapper("Side",[cnMixFlex({align:"center",justify:"center"})]),style:(c={},_defineProperty(c,"--field-wrapper-side-text-size","var(--control-text-size-".concat(h,")")),_defineProperty(c,"--field-wrapper-side-height","var(--control-height-".concat(h,")")),c)},renderSide(m))),(j||n)&&React.createElement("div",{className:cnMixFlex({direction:"row",gap:w,justify:j?"space-between":"flex-end"})},j&&React.createElement(FieldCaption,{className:cnFieldWrapper("Caption"),status:l},j),n&&React.createElement(Counter,{counter:n,status:o}))))});
|
|
2
2
|
//# sourceMappingURL=FieldWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldWrapper.js","names":["React","Text","cnMixFlex","isString","forwardRefWithAs","FieldCaption","FieldLabel","cnFieldWrapper","directionMap","spaceMap","
|
|
1
|
+
{"version":3,"file":"FieldWrapper.js","names":["React","Text","cnMixFlex","isString","forwardRefWithAs","FieldCaption","FieldLabel","cnFieldWrapper","directionMap","spaceMap","Counter","counter","status","Array","isArray","join","renderSide","side","FieldWrapper","props","ref","className","children","label","size","labelIcon","caption","required","counterStatus","labelPosition","labelIconRef","as","labelHtmlFor","otherProps","gap","direction","htmlFor","align","justify"],"sources":["../../../../../../src/components/FieldComponents/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '##/components/Text';\nimport { cnMixFlex } from '##/mixs/MixFlex';\nimport { isString } from '##/utils/type-guards';\nimport { forwardRefWithAs } from '##/utils/types/PropsWithAsAttributes';\n\nimport { FieldCaption } from '../FieldCaption';\nimport { FieldLabel } from '../FieldLabel';\nimport { cnFieldWrapper } from './cnFieldWrapper';\nimport { directionMap, spaceMap } from './helpers';\nimport { FieldWrapperProps } from './types';\n\ntype Counter = string | number | [string | number, string | number];\n\nconst Counter: React.FC<{ counter: Counter; status?: 'alert' }> = ({\n counter,\n status,\n}) => {\n return (\n <Text\n className={cnFieldWrapper('Counter')}\n view={status || 'ghost'}\n size=\"xs\"\n lineHeight=\"m\"\n >\n {Array.isArray(counter) ? counter.join('/') : counter}\n </Text>\n );\n};\n\nconst renderSide = (side: React.ReactNode) => {\n if (isString(side)) {\n return <span className={cnFieldWrapper('SideText')}>{side}</span>;\n }\n return side;\n};\n\nexport const FieldWrapper = forwardRefWithAs<FieldWrapperProps>(\n (props, ref) => {\n const {\n className,\n children,\n label,\n size = 'm',\n labelIcon,\n caption,\n required,\n status,\n side,\n counter,\n counterStatus,\n labelPosition = 'top',\n labelIconRef,\n as = 'div',\n labelHtmlFor,\n ...otherProps\n } = props;\n\n const Tag = as as string;\n const gap = spaceMap[size];\n\n return (\n <Tag\n {...otherProps}\n ref={ref}\n className={cnFieldWrapper(null, [\n cnMixFlex({\n direction: directionMap[labelPosition],\n gap: labelPosition === 'top' ? gap : 's',\n }),\n className,\n ])}\n >\n {label && (\n <FieldLabel\n size={size}\n required={required}\n icon={labelIcon}\n iconRef={labelIconRef}\n {...(labelHtmlFor\n ? {\n htmlFor: labelHtmlFor,\n as: 'label',\n }\n : {})}\n >\n {label}\n </FieldLabel>\n )}\n <div\n className={cnFieldWrapper('ControlAndCaptionWrapper', [\n cnMixFlex({ gap, direction: 'column' }),\n ])}\n >\n <div\n className={cnFieldWrapper('ControlWrapper', [\n cnMixFlex({ gap, direction: 'row' }),\n ])}\n >\n <div className={cnFieldWrapper('Control')}>{children}</div>\n {side && (\n <div\n className={cnFieldWrapper('Side', [\n cnMixFlex({ align: 'center', justify: 'center' }),\n ])}\n style={{\n ['--field-wrapper-side-text-size' as string]: `var(--control-text-size-${size})`,\n ['--field-wrapper-side-height' as string]: `var(--control-height-${size})`,\n }}\n >\n {renderSide(side)}\n </div>\n )}\n </div>\n {(caption || counter) && (\n <div\n className={cnMixFlex({\n direction: 'row',\n gap,\n justify: !caption ? 'flex-end' : 'space-between',\n })}\n >\n {caption && (\n <FieldCaption\n className={cnFieldWrapper('Caption')}\n status={status}\n >\n {caption}\n </FieldCaption>\n )}\n {counter && <Counter counter={counter} status={counterStatus} />}\n </div>\n )}\n </div>\n </Tag>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/components/FieldComponents/FieldWrapper/types.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { FieldPropSize, FieldPropStatus } from '../types';\n\ntype Counter = string | number | [string | number, string | number];\n\nexport type FieldWrapperProps = {\n children: React.ReactNode;\n size?: FieldPropSize;\n label?: string;\n labelIcon?: IconComponent;\n labelIconRef?: React.Ref<HTMLSpanElement>;\n labelPosition?: 'top' | 'left';\n labelHtmlFor?: string;\n caption?: string;\n required?: boolean;\n status?: FieldPropStatus;\n side?: React.ReactNode;\n counter?: Counter;\n};\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/components/FieldComponents/FieldWrapper/types.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { FieldPropSize, FieldPropStatus } from '../types';\n\ntype Counter = string | number | [string | number, string | number];\n\nexport type FieldWrapperProps = {\n children: React.ReactNode;\n size?: FieldPropSize;\n label?: string;\n labelIcon?: IconComponent;\n labelIconRef?: React.Ref<HTMLSpanElement>;\n labelPosition?: 'top' | 'left';\n labelHtmlFor?: string;\n caption?: string;\n required?: boolean;\n status?: FieldPropStatus;\n side?: React.ReactNode;\n counter?: Counter;\n counterStatus?: 'alert';\n};\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Modal{--modal-window-animate-space:var(--space-xl);bottom:0;display:flex;justify-content:center;left:0;padding:var(--
|
|
1
|
+
.Modal{--modal-window-animate-space:var(--space-xl);--modal-shadow-transparent:0 0 0 transparent,0 0 0 transparent;bottom:0;display:flex;justify-content:center;left:0;padding-bottom:var(--modal-window-offset-prop,5vh);padding-left:var(--modal-window-offset-prop,5vw);padding-right:var(--modal-window-offset-prop,5vw);padding-top:var(--modal-window-offset-prop,5vh);position:fixed;right:0;top:0}.Modal-Window{background-color:var(--color-bg-default);box-shadow:var(--shadow-modal);max-height:calc(100% - var(--modal-window-offset-prop, 5vh)*2);max-width:calc(100% - var(--modal-window-offset-prop, 5vw)*2);overflow:hidden;position:absolute}.Modal-Window_position_center{align-self:safe center}.Modal-Window_position_top{align-self:safe flex-start}.Modal-Window_form_default{border-radius:var(--control-radius)}.Modal-Window_border{border:1px solid var(--color-bg-border)}.Modal-Window_scrollable{height:100%}.Modal-Content,.Modal-Scroll{display:flex;flex:1;flex-direction:column}.Modal-Scroll{height:100%;overflow:auto}.Modal-Overlay{background:var(--color-bg-tone);border:none;height:100%;left:0;padding:0;position:absolute;top:0;transition:.2s;width:100%}.Modal-Overlay_animate_exited,.Modal-Overlay_animate_exiting{opacity:0}.Modal-Overlay_animate_entered,.Modal-Overlay_animate_entering{opacity:1}.Modal-Overlay_animate_entered,.Modal-Overlay_animate_entering,.Modal-Overlay_animate_exiting{transition:opacity .2s}
|
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
import './Modal.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
|
|
4
|
-
declare const modalPropWidth: readonly ["auto"];
|
|
5
|
-
type ModalPropWidth = typeof modalPropWidth[number];
|
|
6
|
-
declare const modalPropPosition: readonly ["center", "top"];
|
|
7
|
-
type ModalPropPosition = typeof modalPropPosition[number];
|
|
8
|
-
type ModalProps = PropsWithHTMLAttributes<{
|
|
3
|
+
export declare const Modal: React.ForwardRefExoticComponent<{
|
|
9
4
|
isOpen?: boolean;
|
|
10
5
|
onClose?: () => void;
|
|
11
6
|
onOpen?: () => void;
|
|
12
7
|
hasOverlay?: boolean;
|
|
13
|
-
/** @deprecated use onClickOutside */
|
|
14
8
|
onOverlayClick?: (event: MouseEvent) => void;
|
|
15
9
|
onClickOutside?: (event: MouseEvent) => void;
|
|
16
10
|
onEsc?: (event: KeyboardEvent) => void;
|
|
17
11
|
rootClassName?: string;
|
|
18
|
-
width?:
|
|
19
|
-
position?:
|
|
12
|
+
width?: "auto";
|
|
13
|
+
position?: "center" | "top";
|
|
14
|
+
form?: "brick" | "default";
|
|
15
|
+
border?: boolean;
|
|
20
16
|
children?: React.ReactNode;
|
|
21
|
-
container?:
|
|
17
|
+
container?: HTMLElement | React.RefObject<HTMLElement>;
|
|
22
18
|
afterClose?: () => void;
|
|
23
19
|
refsForExcludeClickOutside?: React.RefObject<HTMLElement>[];
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
export {};
|
|
20
|
+
ignoreOutsideClicksRefs?: React.RefObject<HTMLElement>[];
|
|
21
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "children" | "form" | "width" | "onClose" | "border" | "position" | "container" | "onClickOutside" | "ignoreOutsideClicksRefs" | "isOpen" | "onEsc" | "onOpen" | "hasOverlay" | "onOverlayClick" | "rootClassName" | "afterClose" | "refsForExcludeClickOutside"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["isOpen","onClose","onOpen","hasOverlay","onOverlayClick","onClickOutside","onEsc","className","width","form","border","position","children","container","refsForExcludeClickOutside","ignoreOutsideClicksRefs","rootClassName","afterClose","style"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Modal.css";import React,{forwardRef}from"react";import{Transition}from"react-transition-group";import{PortalWithTheme,PortalWithThemeConsumer}from"../PortalWithTheme";import{animateTimeout,cnMixPopoverAnimate}from"../../mixs/MixPopoverAnimate";import{cnMixScrollBar}from"../../mixs/MixScrollBar";import{cn}from"../../utils/bem";import{withCtx}from"../../utils/state";import{useModal}from"./useModal";var cnModal=cn("Modal");export var Modal=withCtx(forwardRef(function(a,b){var c=a.isOpen,d=a.onClose,e=a.onOpen,f=a.hasOverlay,g=!(void 0!==f)||f,h=a.onOverlayClick,i=a.onClickOutside,j=a.onEsc,k=a.className,l=a.width,m=a.form,n=void 0===m?"default":m,o=a.border,p=a.position,q=void 0===p?"center":p,r=a.children,s=a.container,t=void 0===s?window.document.body:s,u=a.refsForExcludeClickOutside,v=a.ignoreOutsideClicksRefs,w=a.rootClassName,x=a.afterClose,y=a.style,z=_objectWithoutProperties(a,_excluded),A=useModal({ref:b,isOpen:c,onEsc:j,onOpen:e,onClose:d,ignoreOutsideClicksRefs:v||u}),B=A.shadowHeader,C=A.shadowFooter,D=A.scrollable,E=A.theme,F=A.portalRef,G=A.windowRef,H=A.contentRef,I=A.scrollRef,J=A.ignoreOutsideClicksRefs;return React.createElement(Transition,{in:c,unmountOnExit:!0,nodeRef:F,timeout:animateTimeout,onExited:x},function(a){return React.createElement(PortalWithTheme,{preset:E,container:t,className:cnModal({hasOverlay:g},[w]),ref:F,style:_objectSpread(_objectSpread(_objectSpread(_objectSpread({},(null===y||void 0===y?void 0:y.zIndex)&&{zIndex:y.zIndex}),B&&_defineProperty({},"--modal-layout-header-color-shadow","var(--color-shadow-group-2)")),C&&_defineProperty({},"--modal-layout-footer-color-shadow","var(--color-shadow-group-2)")),(null===y||void 0===y?void 0:y.zIndex)&&_defineProperty({},"--modal-layout-z-index-for-fixed-slot",y.zIndex))},g&&React.createElement("div",{className:cnModal("Overlay",{animate:a}),"aria-label":"Overlay"}),React.createElement("div",Object.assign({},z,{style:_objectSpread(_objectSpread({},y),{},{zIndex:void 0}),className:cnModal("Window",{position:q,form:n,border:o,scrollable:D},[cnMixPopoverAnimate({animate:a}),k]),ref:G}),React.createElement("div",{className:cnModal("Scroll",cnMixScrollBar({size:"s"})),ref:I},React.createElement("div",{className:cnModal("Content"),ref:H},React.createElement(PortalWithThemeConsumer,{onClickOutside:i||h,ignoreClicksInsideRefs:J},r)))))})}));
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["React","
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["React","forwardRef","Transition","PortalWithTheme","PortalWithThemeConsumer","animateTimeout","cnMixPopoverAnimate","cnMixScrollBar","cn","withCtx","useModal","cnModal","Modal","props","ref","isOpen","onClose","onOpen","hasOverlay","onOverlayClick","onClickOutside","onEsc","className","width","form","border","position","children","container","window","document","body","refsForExcludeClickOutside","ignoreOutsideClicksRefsProp","ignoreOutsideClicksRefs","rootClassName","afterClose","style","otherProps","shadowHeader","shadowFooter","scrollable","theme","portalRef","windowRef","contentRef","scrollRef","animate","zIndex","size"],"sources":["../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import './Modal.css';\n\nimport React, { forwardRef } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport {\n PortalWithTheme,\n PortalWithThemeConsumer,\n} from '##/components/PortalWithTheme';\nimport { animateTimeout, cnMixPopoverAnimate } from '##/mixs/MixPopoverAnimate';\nimport { cnMixScrollBar } from '##/mixs/MixScrollBar';\nimport { cn } from '##/utils/bem';\nimport { withCtx } from '##/utils/state';\n\nimport { ModalProps } from './types';\nimport { useModal } from './useModal';\n\nconst cnModal = cn('Modal');\n\nexport const Modal = withCtx(\n forwardRef<HTMLDivElement, ModalProps>((props, ref) => {\n const {\n isOpen,\n onClose,\n onOpen,\n hasOverlay = true,\n onOverlayClick,\n onClickOutside,\n onEsc,\n className,\n width,\n form = 'default',\n border,\n position = 'center',\n children,\n container = window.document.body,\n refsForExcludeClickOutside,\n ignoreOutsideClicksRefs: ignoreOutsideClicksRefsProp,\n rootClassName,\n afterClose,\n style,\n ...otherProps\n } = props;\n\n const {\n shadowHeader,\n shadowFooter,\n scrollable,\n theme,\n portalRef,\n windowRef,\n contentRef,\n scrollRef,\n ignoreOutsideClicksRefs,\n } = useModal({\n ref,\n isOpen,\n onEsc,\n onOpen,\n onClose,\n ignoreOutsideClicksRefs:\n ignoreOutsideClicksRefsProp || refsForExcludeClickOutside,\n });\n\n return (\n <Transition\n in={isOpen}\n unmountOnExit\n nodeRef={portalRef}\n timeout={animateTimeout}\n onExited={afterClose}\n >\n {(animate) => (\n <PortalWithTheme\n preset={theme}\n container={container}\n className={cnModal({ hasOverlay }, [rootClassName])}\n ref={portalRef}\n style={{\n ...(style?.zIndex && {\n zIndex: style.zIndex,\n }),\n ...(shadowHeader && {\n ['--modal-layout-header-color-shadow' as string]:\n 'var(--color-shadow-group-2)',\n }),\n ...(shadowFooter && {\n ['--modal-layout-footer-color-shadow' as string]:\n 'var(--color-shadow-group-2)',\n }),\n ...(style?.zIndex && {\n ['--modal-layout-z-index-for-fixed-slot' as string]:\n style.zIndex,\n }),\n }}\n >\n {hasOverlay && (\n <div\n className={cnModal('Overlay', { animate })}\n aria-label=\"Overlay\"\n />\n )}\n <div\n {...otherProps}\n style={{\n ...style,\n zIndex: undefined,\n }}\n className={cnModal(\n 'Window',\n { position, form, border, scrollable },\n [cnMixPopoverAnimate({ animate }), className],\n )}\n ref={windowRef}\n >\n <div\n className={cnModal('Scroll', cnMixScrollBar({ size: 's' }))}\n ref={scrollRef}\n >\n <div className={cnModal('Content')} ref={contentRef}>\n <PortalWithThemeConsumer\n onClickOutside={onClickOutside || onOverlayClick}\n ignoreClicksInsideRefs={ignoreOutsideClicksRefs}\n >\n {children}\n </PortalWithThemeConsumer>\n </div>\n </div>\n </div>\n </PortalWithTheme>\n )}\n </Transition>\n );\n }),\n);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.ModalHeader{position:relative}.ModalHeader_gap{padding-left:calc(var(--space-2xl) + var(--space-xs));padding-right:calc(var(--space-2xl) + var(--space-xs))}.Button.ModalHeader-ButtonClose,.ModalHeader-Icon{flex:none}.Button.ModalHeader-ButtonClose_fixed{position:absolute;right:0;top:0}.ModalHeader-Title{flex:1}.ModalHeader-Title_minHeight{min-height:var(--space-2xl)}.ModalHeader-StatusIcon{background:color-mix(in srgb,var(--modal-status-icon-bg) var(--modal-status-icon-degree-mixing),var(--color-bg-default));border-radius:50%;flex:none;height:var(--modal-header-status-icon-size);width:var(--modal-header-status-icon-size)}.ModalHeader-StatusIcon_size_m{--modal-header-status-icon-size:var(--space-2xl)}.ModalHeader-StatusIcon_size_l{--modal-header-status-icon-size:calc(var(--space-2xl)*2)}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import './ModalHeader.css';
|
|
2
|
+
import { IconComponent } from '@consta/icons/Icon';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
export declare const cnModalHeader: import("@bem-react/classname").ClassNameFormatter;
|
|
5
|
+
type ModalHeaderPropDirection = 'vertical' | 'horizontal';
|
|
6
|
+
export type ModalHeaderPropStatus = 'success' | 'system' | 'normal' | 'warning' | 'alert';
|
|
7
|
+
export declare const ModalHeader: React.ForwardRefExoticComponent<{
|
|
8
|
+
direction?: ModalHeaderPropDirection;
|
|
9
|
+
icon?: IconComponent;
|
|
10
|
+
status?: ModalHeaderPropStatus;
|
|
11
|
+
onClose?: () => void;
|
|
12
|
+
size?: "s" | "m" | "l" | "xs";
|
|
13
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "size" | "status" | "onClose" | "icon" | "direction"> & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["children","className","icon","onClose","direction","size","status"];import"./ModalHeader.css";import{IconClose}from"@consta/icons/IconClose";import React,{forwardRef}from"react";import{Button}from"../../Button";import{Text}from"../../Text";import{cnMixFlex}from"../../../mixs/MixFlex";import{cnMixHitSlop}from"../../../mixs/MixHitSlop";import{cn}from"../../../utils/bem";import{isString}from"../../../utils/type-guards";export var cnModalHeader=cn("ModalHeader");var StatusIcon=function(a){var b,c=a.icon,d=a.status,e=a.size,f=void 0===e?"m":e;return React.createElement(Text,{view:d,className:cnModalHeader("StatusIcon",{status:d,size:f},[cnMixFlex({align:"center",justify:"center"})]),style:d?(b={},_defineProperty(b,"--modal-status-icon-degree-mixing","system"===d?"30%":"10%"),_defineProperty(b,"--modal-status-icon-bg","var(--color-bg-".concat(d,")")),b):void 0},React.createElement(c,{size:"m",view:"system"===d?"secondary":void 0}))},rootFlexProps={horizontal:{direction:"row",gap:"xs"},vertical:{direction:"column",align:"center",justify:"center",gap:"s"}};export var ModalHeader=forwardRef(function(a,b){var c=a.children,d=a.className,e=a.icon,f=a.onClose,g=a.direction,h=void 0===g?"horizontal":g,i=a.size,j=a.status,k=_objectWithoutProperties(a,_excluded);return React.createElement("div",Object.assign({},k,{ref:b,className:cnModalHeader({gap:"vertical"===h&&f&&!e},[d,cnMixFlex(rootFlexProps[h])])}),e&&React.createElement(StatusIcon,{icon:e,status:j,size:"vertical"===h?"l":"m"}),isString(c)?React.createElement(Text,{view:"primary",weight:"semibold",size:i,align:"vertical"===h?"center":void 0,className:cnModalHeader("Title",{minHeight:"horizontal"===h||"vertical"===h&&!e,gap:"vertical"===h&&f&&!e},[cnMixFlex({align:"center"})])},c):c,f&&React.createElement(Button,{className:cnModalHeader("ButtonClose",{fixed:"vertical"===h||!c&&!e},[cnMixHitSlop({mode:"reverseMargin"})]),size:"s",view:"clear",iconLeft:IconClose,onClick:f,form:"round"}))});
|
|
2
|
+
//# sourceMappingURL=ModalHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalHeader.js","names":["IconClose","React","forwardRef","Button","Text","cnMixFlex","cnMixHitSlop","cn","isString","cnModalHeader","StatusIcon","Icon","icon","status","size","align","justify","rootFlexProps","horizontal","direction","gap","vertical","ModalHeader","props","ref","children","className","onClose","otherProps","minHeight","fixed","mode"],"sources":["../../../../../../src/components/Modal/ModalHeader/ModalHeader.tsx"],"sourcesContent":["import './ModalHeader.css';\n\nimport { IconComponent } from '@consta/icons/Icon';\nimport { IconClose } from '@consta/icons/IconClose';\nimport React, { forwardRef } from 'react';\n\nimport { Button } from '##/components/Button';\nimport { Text } from '##/components/Text';\nimport { cnMixFlex, CnMixFlexProps } from '##/mixs/MixFlex';\nimport { cnMixHitSlop } from '##/mixs/MixHitSlop';\nimport { cn } from '##/utils/bem';\nimport { isString } from '##/utils/type-guards';\nimport { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const cnModalHeader = cn('ModalHeader');\n\ntype ModalHeaderPropDirection = 'vertical' | 'horizontal';\n\nexport type ModalHeaderPropStatus =\n | 'success'\n | 'system'\n | 'normal'\n | 'warning'\n | 'alert';\n\ntype ModalHeaderProps = PropsWithHTMLAttributes<\n {\n direction?: ModalHeaderPropDirection;\n icon?: IconComponent;\n status?: ModalHeaderPropStatus;\n onClose?: () => void;\n size?: 's' | 'm' | 'l' | 'xs';\n },\n HTMLDivElement\n>;\n\nconst StatusIcon: React.FC<{\n icon: IconComponent;\n status: ModalHeaderProps['status'];\n size: 'm' | 'l';\n}> = ({ icon: Icon, status, size = 'm' }) => {\n return (\n <Text\n view={status}\n className={cnModalHeader('StatusIcon', { status, size }, [\n cnMixFlex({ align: 'center', justify: 'center' }),\n ])}\n style={\n status\n ? {\n ['--modal-status-icon-degree-mixing' as string]:\n status === 'system' ? '30%' : '10%',\n ['--modal-status-icon-bg' as string]: `var(--color-bg-${status})`,\n }\n : undefined\n }\n >\n <Icon size=\"m\" view={status === 'system' ? 'secondary' : undefined} />\n </Text>\n );\n};\n\nconst rootFlexProps: Record<ModalHeaderPropDirection, CnMixFlexProps> = {\n horizontal: {\n direction: 'row',\n gap: 'xs',\n },\n vertical: {\n direction: 'column',\n align: 'center',\n justify: 'center',\n gap: 's',\n },\n};\n\nexport const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(\n (props, ref) => {\n const {\n children,\n className,\n icon: Icon,\n onClose,\n direction = 'horizontal',\n size,\n status,\n ...otherProps\n } = props;\n\n return (\n <div\n {...otherProps}\n ref={ref}\n className={cnModalHeader(\n { gap: direction === 'vertical' && onClose && !Icon },\n [className, cnMixFlex(rootFlexProps[direction])],\n )}\n >\n {Icon && (\n <StatusIcon\n icon={Icon}\n status={status}\n size={direction === 'vertical' ? 'l' : 'm'}\n />\n )}\n {isString(children) ? (\n <Text\n view=\"primary\"\n weight=\"semibold\"\n size={size}\n align={direction === 'vertical' ? 'center' : undefined}\n className={cnModalHeader(\n 'Title',\n {\n minHeight:\n direction === 'horizontal' ||\n (direction === 'vertical' && !Icon),\n gap: direction === 'vertical' && onClose && !Icon,\n },\n [cnMixFlex({ align: 'center' })],\n )}\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {onClose && (\n <Button\n className={cnModalHeader(\n 'ButtonClose',\n { fixed: direction === 'vertical' || (!children && !Icon) },\n [cnMixHitSlop({ mode: 'reverseMargin' })],\n )}\n size=\"s\"\n view=\"clear\"\n iconLeft={IconClose}\n onClick={onClose}\n form=\"round\"\n />\n )}\n </div>\n );\n },\n);\n"],"mappings":"4OAAA,0BAGA,OAASA,SAAT,KAA0B,yBAA1B,CACA,MAAOC,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,MAAT,oBACA,OAASC,IAAT,kBACA,OAASC,SAAT,6BACA,OAASC,YAAT,gCACA,OAASC,EAAT,0BACA,OAASC,QAAT,kCAGA,MAAO,IAAMC,cAAa,CAAGF,EAAE,CAAC,aAAD,CAAxB,C,GAsBDG,WAIJ,CAAG,WAAwC,OAA/BC,CAA+B,GAArCC,IAAqC,CAAzBC,CAAyB,GAAzBA,MAAyB,KAAjBC,IAAiB,CAAjBA,CAAiB,YAAV,GAAU,GAC3C,MACE,qBAAC,IAAD,EACE,IAAI,CAAED,CADR,CAEE,SAAS,CAAEJ,aAAa,CAAC,YAAD,CAAe,CAAEI,MAAM,CAANA,CAAF,CAAUC,IAAI,CAAJA,CAAV,CAAf,CAAiC,CACvDT,SAAS,CAAC,CAAEU,KAAK,CAAE,QAAT,CAAmBC,OAAO,CAAE,QAA5B,CAAD,CAD8C,CAAjC,CAF1B,CAKE,KAAK,CACHH,CAAM,yBAEC,mCAFD,CAGa,QAAX,GAAAA,CAAM,CAAgB,KAAhB,CAAwB,KAHhC,oBAIC,wBAJD,0BAIwDA,CAJxD,gBANV,EAeE,oBAAC,CAAD,EAAM,IAAI,CAAC,GAAX,CAAe,IAAI,CAAa,QAAX,GAAAA,CAAM,CAAgB,WAAhB,OAA3B,EAfF,CAkBH,C,CAEKI,aAA+D,CAAG,CACtEC,UAAU,CAAE,CACVC,SAAS,CAAE,KADD,CAEVC,GAAG,CAAE,IAFK,CAD0D,CAKtEC,QAAQ,CAAE,CACRF,SAAS,CAAE,QADH,CAERJ,KAAK,CAAE,QAFC,CAGRC,OAAO,CAAE,QAHD,CAIRI,GAAG,CAAE,GAJG,CAL4D,C,CAaxE,MAAO,IAAME,YAAW,CAAGpB,UAAU,CACnC,SAACqB,CAAD,CAAQC,CAAR,CAAgB,CACd,GACEC,EADF,CASIF,CATJ,CACEE,QADF,CAEEC,CAFF,CASIH,CATJ,CAEEG,SAFF,CAGQf,CAHR,CASIY,CATJ,CAGEX,IAHF,CAIEe,CAJF,CASIJ,CATJ,CAIEI,OAJF,GASIJ,CATJ,CAKEJ,SALF,CAKEA,CALF,YAKc,YALd,GAMEL,CANF,CASIS,CATJ,CAMET,IANF,CAOED,CAPF,CASIU,CATJ,CAOEV,MAPF,CAQKe,CARL,0BASIL,CATJ,YAWA,MACE,4CACMK,CADN,EAEE,GAAG,CAAEJ,CAFP,CAGE,SAAS,CAAEf,aAAa,CACtB,CAAEW,GAAG,CAAgB,UAAd,GAAAD,CAAS,EAAmBQ,CAA5B,EAAuC,CAAChB,CAA/C,CADsB,CAEtB,CAACe,CAAD,CAAYrB,SAAS,CAACY,aAAa,CAACE,CAAD,CAAd,CAArB,CAFsB,CAH1B,GAQGR,CAAI,EACH,oBAAC,UAAD,EACE,IAAI,CAAEA,CADR,CAEE,MAAM,CAAEE,CAFV,CAGE,IAAI,CAAgB,UAAd,GAAAM,CAAS,CAAkB,GAAlB,CAAwB,GAHzC,EATJ,CAeGX,QAAQ,CAACiB,CAAD,CAAR,CACC,oBAAC,IAAD,EACE,IAAI,CAAC,SADP,CAEE,MAAM,CAAC,UAFT,CAGE,IAAI,CAAEX,CAHR,CAIE,KAAK,CAAgB,UAAd,GAAAK,CAAS,CAAkB,QAAlB,OAJlB,CAKE,SAAS,CAAEV,aAAa,CACtB,OADsB,CAEtB,CACEoB,SAAS,CACO,YAAd,GAAAV,CAAS,EACM,UAAd,GAAAA,CAAS,EAAmB,CAACR,CAHlC,CAIES,GAAG,CAAgB,UAAd,GAAAD,CAAS,EAAmBQ,CAA5B,EAAuC,CAAChB,CAJ/C,CAFsB,CAQtB,CAACN,SAAS,CAAC,CAAEU,KAAK,CAAE,QAAT,CAAD,CAAV,CARsB,CAL1B,EAgBGU,CAhBH,CADD,CAoBCA,CAnCJ,CAqCGE,CAAO,EACN,oBAAC,MAAD,EACE,SAAS,CAAElB,aAAa,CACtB,aADsB,CAEtB,CAAEqB,KAAK,CAAgB,UAAd,GAAAX,CAAS,EAAoB,CAACM,CAAD,EAAa,CAACd,CAApD,CAFsB,CAGtB,CAACL,YAAY,CAAC,CAAEyB,IAAI,CAAE,eAAR,CAAD,CAAb,CAHsB,CAD1B,CAME,IAAI,CAAC,GANP,CAOE,IAAI,CAAC,OAPP,CAQE,QAAQ,CAAE/B,SARZ,CASE,OAAO,CAAE2B,CATX,CAUE,IAAI,CAAC,OAVP,EAtCJ,CAqDH,CAnEkC,CAA9B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ModalHeader';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/Modal/ModalHeader/index.ts"],"sourcesContent":["export * from './ModalHeader';\n"],"mappings":"AAAA"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
.ModalLayout{display:flex;flex:1;flex-direction:column;justify-content:space-between}.ModalLayout-Slot{background-color:var(--color-bg-default);transition:box-shadow .3s}.ModalLayout-Slot_border_top{box-shadow:0 1px 0 0 var(--color-bg-border) inset,0 -2px 3px var(--modal-layout-slot-color-shadow,transparent);padding-top:1px}.ModalLayout-Slot_border_top[class*=MixSpace_pT]{padding-top:calc(var(--space-padding-top) + 1px)}.ModalLayout-Slot_border_bottom{box-shadow:0 -1px 0 0 var(--color-bg-border) inset,0 2px 3px var(--modal-layout-slot-color-shadow,transparent);padding-bottom:1px}.ModalLayout-Slot_border_bottom[class*=MixSpace_pB]{padding-bottom:calc(var(--space-padding-bottom) + 1px)}.ModalLayout-Slot_fixed_top{--modal-layout-slot-color-shadow:var(
|
|
2
|
+
--modal-layout-header-color-shadow
|
|
3
|
+
);top:0}.ModalLayout-Slot_fixed_bottom,.ModalLayout-Slot_fixed_top{position:sticky;z-index:calc(var(--modal-layout-z-index-for-fixed-slot) + 1)}.ModalLayout-Slot_fixed_bottom{--modal-layout-slot-color-shadow:var(
|
|
4
|
+
--modal-layout-footer-color-shadow
|
|
5
|
+
);bottom:0}.ModalLayout-Slot_stretch{flex:1}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import './ModalLayout.css';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { MixSpaceProps } from '../../../mixs/MixSpace';
|
|
4
|
+
export declare const cnModalLayout: import("@bem-react/classname").ClassNameFormatter;
|
|
5
|
+
export declare const ModalLayout: React.ForwardRefExoticComponent<{
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
fixed?: boolean | [boolean, boolean];
|
|
8
|
+
border?: boolean | [boolean, boolean];
|
|
9
|
+
space?: MixSpaceProps | (MixSpaceProps | undefined)[];
|
|
10
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "children" | "fixed" | "border" | "space"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","className","border","space","fixed"];import"./ModalLayout.css";import React,{forwardRef}from"react";import{cnMixSpace}from"../../../mixs/MixSpace";import{cn}from"../../../utils/bem";import{isNotNil}from"../../../utils/type-guards";export var cnModalLayout=cn("ModalLayout");var getSlotProp=function(a,b){return Array.isArray(a)?a[b]:a},childrenToArray=function(a){return(Array.isArray(a)?a:[a]).filter(isNotNil)},getSlotPropFirstOrLast=function(a,b,c,d){var e=c.length;return 0===b?getSlotProp(a,0)?d[0]:void 0:b===e-1?getSlotProp(a,1)?d[1]:void 0:void 0};export var ModalLayout=forwardRef(function(a,b){var c=a.children,d=a.className,e=a.border,f=a.space,g=a.fixed,h=_objectWithoutProperties(a,_excluded),i=childrenToArray(c);return React.createElement("div",Object.assign({},h,{ref:b,className:cnModalLayout(null,[d])}),i.map(function(a,b){return React.createElement("div",{key:b,className:cnModalLayout("Slot",{fixed:getSlotPropFirstOrLast(g,b,i,["top","bottom"]),border:getSlotPropFirstOrLast(e,b,i,["bottom ","top"]),stretch:b===i.length-2&&getSlotProp(g,1)||b===i.length-1&&!getSlotProp(g,1)},[cnMixSpace(getSlotProp(f,b))])},a)}))});
|
|
2
|
+
//# sourceMappingURL=ModalLayout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalLayout.js","names":["React","forwardRef","cnMixSpace","cn","isNotNil","cnModalLayout","getSlotProp","prop","index","Array","isArray","childrenToArray","children","filter","getSlotPropFirstOrLast","border","slots","value","length","ModalLayout","props","ref","className","space","fixed","otherProps","map","child","stretch"],"sources":["../../../../../../src/components/Modal/ModalLayout/ModalLayout.tsx"],"sourcesContent":["import './ModalLayout.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { cnMixSpace, MixSpaceProps } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\nimport { isNotNil } from '##/utils/type-guards';\nimport { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const cnModalLayout = cn('ModalLayout');\n\ntype ModalLayoutProps = PropsWithHTMLAttributes<\n {\n children?: React.ReactNode;\n fixed?: boolean | [boolean, boolean];\n border?: boolean | [boolean, boolean];\n space?: MixSpaceProps | (MixSpaceProps | undefined)[];\n },\n HTMLDivElement\n>;\n\nconst getSlotProp = <T,>(\n prop: T | (T | undefined)[] | undefined,\n index: number,\n) => (Array.isArray(prop) ? prop[index] : prop);\n\nconst childrenToArray = (children: React.ReactNode): React.ReactNode[] =>\n (Array.isArray(children) ? children : [children]).filter(isNotNil);\n\nconst getSlotPropFirstOrLast = (\n border: boolean | [boolean, boolean] | undefined,\n index: number,\n slots: React.ReactNode[],\n value: [string, string],\n) => {\n const { length } = slots;\n if (index === 0) {\n return getSlotProp(border, 0) ? value[0] : undefined;\n }\n\n if (index === length - 1) {\n return getSlotProp(border, 1) ? value[1] : undefined;\n }\n};\n\nexport const ModalLayout = forwardRef<HTMLDivElement, ModalLayoutProps>(\n (props, ref) => {\n const { children, className, border, space, fixed, ...otherProps } = props;\n\n const slots = childrenToArray(children);\n\n return (\n <div\n {...otherProps}\n ref={ref}\n className={cnModalLayout(null, [className])}\n >\n {slots.map((child, index) => (\n <div\n key={index}\n className={cnModalLayout(\n 'Slot',\n {\n fixed: getSlotPropFirstOrLast(fixed, index, slots, [\n 'top',\n 'bottom',\n ]),\n border: getSlotPropFirstOrLast(border, index, slots, [\n 'bottom ',\n 'top',\n ]),\n stretch:\n (index === slots.length - 2 && getSlotProp(fixed, 1)) ||\n (index === slots.length - 1 && !getSlotProp(fixed, 1)),\n },\n [cnMixSpace(getSlotProp(space, index))],\n )}\n >\n {child}\n </div>\n ))}\n </div>\n );\n },\n);\n"],"mappings":"qJAAA,0BAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,UAAT,8BACA,OAASC,EAAT,0BACA,OAASC,QAAT,kCAGA,MAAO,IAAMC,cAAa,CAAGF,EAAE,CAAC,aAAD,CAAxB,C,GAYDG,YAAW,CAAG,SAClBC,CADkB,CAElBC,CAFkB,QAGdC,MAAK,CAACC,OAAN,CAAcH,CAAd,EAAsBA,CAAI,CAACC,CAAD,CAA1B,CAAoCD,CAHtB,C,CAKdI,eAAe,CAAG,SAACC,CAAD,QACtB,CAACH,KAAK,CAACC,OAAN,CAAcE,CAAd,EAA0BA,CAA1B,CAAqC,CAACA,CAAD,CAAtC,EAAkDC,MAAlD,CAAyDT,QAAzD,CADsB,C,CAGlBU,sBAAsB,CAAG,SAC7BC,CAD6B,CAE7BP,CAF6B,CAG7BQ,CAH6B,CAI7BC,CAJ6B,CAK1B,CACH,GAAQC,EAAR,CAAmBF,CAAnB,CAAQE,MAAR,CADG,MAEW,EAAV,GAAAV,CAFD,CAGMF,WAAW,CAACS,CAAD,CAAS,CAAT,CAAX,CAAyBE,CAAK,CAAC,CAAD,CAA9B,OAHN,CAMCT,CAAK,GAAKU,CAAM,CAAG,CANpB,CAOMZ,WAAW,CAACS,CAAD,CAAS,CAAT,CAAX,CAAyBE,CAAK,CAAC,CAAD,CAA9B,OAPN,OASJ,C,CAED,MAAO,IAAME,YAAW,CAAGlB,UAAU,CACnC,SAACmB,CAAD,CAAQC,CAAR,CAAgB,IACNT,EADM,CACuDQ,CADvD,CACNR,QADM,CACIU,CADJ,CACuDF,CADvD,CACIE,SADJ,CACeP,CADf,CACuDK,CADvD,CACeL,MADf,CACuBQ,CADvB,CACuDH,CADvD,CACuBG,KADvB,CAC8BC,CAD9B,CACuDJ,CADvD,CAC8BI,KAD9B,CACwCC,CADxC,0BACuDL,CADvD,YAGRJ,CAAK,CAAGL,eAAe,CAACC,CAAD,CAHf,CAKd,MACE,4CACMa,CADN,EAEE,GAAG,CAAEJ,CAFP,CAGE,SAAS,CAAEhB,aAAa,CAAC,IAAD,CAAO,CAACiB,CAAD,CAAP,CAH1B,GAKGN,CAAK,CAACU,GAAN,CAAU,SAACC,CAAD,CAAQnB,CAAR,QACT,4BACE,GAAG,CAAEA,CADP,CAEE,SAAS,CAAEH,aAAa,CACtB,MADsB,CAEtB,CACEmB,KAAK,CAAEV,sBAAsB,CAACU,CAAD,CAAQhB,CAAR,CAAeQ,CAAf,CAAsB,CACjD,KADiD,CAEjD,QAFiD,CAAtB,CAD/B,CAKED,MAAM,CAAED,sBAAsB,CAACC,CAAD,CAASP,CAAT,CAAgBQ,CAAhB,CAAuB,CACnD,SADmD,CAEnD,KAFmD,CAAvB,CALhC,CASEY,OAAO,CACJpB,CAAK,GAAKQ,CAAK,CAACE,MAAN,CAAe,CAAzB,EAA8BZ,WAAW,CAACkB,CAAD,CAAQ,CAAR,CAA1C,EACChB,CAAK,GAAKQ,CAAK,CAACE,MAAN,CAAe,CAAzB,EAA8B,CAACZ,WAAW,CAACkB,CAAD,CAAQ,CAAR,CAX/C,CAFsB,CAetB,CAACtB,UAAU,CAACI,WAAW,CAACiB,CAAD,CAAQf,CAAR,CAAZ,CAAX,CAfsB,CAF1B,EAoBGmB,CApBH,CADS,CAAV,CALH,CA+BH,CAtCkC,CAA9B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ModalLayout';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/Modal/ModalLayout/index.ts"],"sourcesContent":["export * from './ModalLayout';\n"],"mappings":"AAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"./Modal";
|
|
1
|
+
export*from"./types";export*from"./Modal";export*from"./ModalLayout";export*from"./ModalHeader";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Modal/index.ts"],"sourcesContent":["export * from './Modal';\n"],"mappings":"AAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Modal/index.ts"],"sourcesContent":["export * from './types';\nexport * from './Modal';\nexport * from './ModalLayout';\nexport * from './ModalHeader';\n"],"mappings":"AAAA,qBACA,qBACA,2BACA"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
|
|
2
|
+
export type ModalProps = PropsWithHTMLAttributes<{
|
|
3
|
+
isOpen?: boolean;
|
|
4
|
+
onClose?: () => void;
|
|
5
|
+
onOpen?: () => void;
|
|
6
|
+
hasOverlay?: boolean;
|
|
7
|
+
/** @deprecated use onClickOutside */
|
|
8
|
+
onOverlayClick?: (event: MouseEvent) => void;
|
|
9
|
+
onClickOutside?: (event: MouseEvent) => void;
|
|
10
|
+
onEsc?: (event: KeyboardEvent) => void;
|
|
11
|
+
rootClassName?: string;
|
|
12
|
+
/** @deprecated use style or className */
|
|
13
|
+
width?: 'auto';
|
|
14
|
+
position?: 'center' | 'top';
|
|
15
|
+
form?: 'brick' | 'default';
|
|
16
|
+
border?: boolean;
|
|
17
|
+
children?: React.ReactNode;
|
|
18
|
+
container?: HTMLElement | React.RefObject<HTMLElement>;
|
|
19
|
+
afterClose?: () => void;
|
|
20
|
+
/** @deprecated use ignoreOutsideClicksRefs */
|
|
21
|
+
refsForExcludeClickOutside?: React.RefObject<HTMLElement>[];
|
|
22
|
+
ignoreOutsideClicksRefs?: React.RefObject<HTMLElement>[];
|
|
23
|
+
}, HTMLDivElement>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/components/Modal/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport type ModalProps = PropsWithHTMLAttributes<\n {\n isOpen?: boolean;\n onClose?: () => void;\n onOpen?: () => void;\n hasOverlay?: boolean;\n /** @deprecated use onClickOutside */\n onOverlayClick?: (event: MouseEvent) => void;\n onClickOutside?: (event: MouseEvent) => void;\n onEsc?: (event: KeyboardEvent) => void;\n rootClassName?: string;\n /** @deprecated use style or className */\n width?: 'auto';\n position?: 'center' | 'top';\n form?: 'brick' | 'default';\n border?: boolean;\n children?: React.ReactNode;\n container?: HTMLElement | React.RefObject<HTMLElement>;\n afterClose?: () => void;\n /** @deprecated use ignoreOutsideClicksRefs */\n refsForExcludeClickOutside?: React.RefObject<HTMLElement>[];\n ignoreOutsideClicksRefs?: React.RefObject<HTMLElement>[];\n },\n HTMLDivElement\n>;\n"],"mappings":""}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const useModal: ({ ref, isOpen, onEsc, onOpen, onClose, ignoreOutsideClicksRefs, }: {
|
|
3
|
+
isOpen: boolean | undefined;
|
|
4
|
+
onEsc: ((event: KeyboardEvent) => void) | undefined;
|
|
5
|
+
onOpen: (() => void) | undefined;
|
|
6
|
+
onClose: (() => void) | undefined;
|
|
7
|
+
ref: React.ForwardedRef<HTMLDivElement>;
|
|
8
|
+
ignoreOutsideClicksRefs: React.RefObject<HTMLElement>[] | undefined;
|
|
9
|
+
}) => {
|
|
10
|
+
shadowHeader: boolean;
|
|
11
|
+
shadowFooter: boolean;
|
|
12
|
+
scrollable: boolean;
|
|
13
|
+
theme: import("../Theme").ThemePreset;
|
|
14
|
+
portalRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
15
|
+
windowRef: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
|
|
16
|
+
contentRef: React.RefCallback<HTMLDivElement | null>;
|
|
17
|
+
scrollRef: React.RefCallback<HTMLDivElement | null>;
|
|
18
|
+
windowElAtom: import("@reatom/core").AtomMut<HTMLDivElement | null>;
|
|
19
|
+
ignoreOutsideClicksRefs: React.RefObject<HTMLElement>[];
|
|
20
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useAction,useAtom,useUpdate}from"@reatom/npm-react";import{useEffect,useRef}from"react";import{useTheme}from"../Theme";import{useForkRef}from"../../hooks/useForkRef";import{useGlobalKeys}from"../../hooks/useGlobalKeys";import{getElementHeight}from"../../hooks/useResizeObserved";import{useCreateAtom}from"../../utils/state/useCreateAtom";import{useElementAtomEventListener}from"../../utils/state/useElementAtomEventListener";import{useRefAtom}from"../../utils/state/useRefAtom";import{useResizeObservedAtom}from"../../utils/state/useResizeObservedAtom";export var useModal=function(a){var b=a.ref,c=a.isOpen,d=a.onEsc,e=a.onOpen,f=a.onClose,g=a.ignoreOutsideClicksRefs,h=useRef(null),i=useRef(null),j=useRefAtom(),k=_slicedToArray(j,2),l=k[0],m=k[1],n=useRefAtom(),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useRefAtom(),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useForkRef([h,m,b]),w=useTheme(),x=w.theme,y=useCreateAtom(0),z=useAction(function(a){var b;return y(a,(null===(b=a.get(t))||void 0===b?void 0:b.scrollTop)||0)}),A=useAtom(function(a){return 0<a.spy(y)}),B=_slicedToArray(A,1),C=B[0],D=useResizeObservedAtom(useCreateAtom(function(a){return[a.spy(t)]}),function(a){return[(null===a||void 0===a?void 0:a.scrollHeight)||0,(null===a||void 0===a?void 0:a.clientHeight)||0]}),E=useAtom(function(a){var b=a.spy(y),c=a.spy(D),d=_slicedToArray(c,1),e=d[0];e=void 0===e?[0,0]:e;var f=_slicedToArray(e,2),g=f[0],h=f[1];return b<g-h}),F=_slicedToArray(E,1),G=F[0],H=useResizeObservedAtom(useCreateAtom(function(a){return[a.spy(l),a.spy(p)]}),getElementHeight),I=useAtom(function(a){var b=a.spy(H),c=_slicedToArray(b,2),d=c[0],e=void 0===d?0:d,f=c[1],g=void 0===f?0:f;return e<g}),J=_slicedToArray(I,1),K=J[0];return useElementAtomEventListener(t,"scroll",z),useUpdate(z,[t]),useEffect(function(){c?null===e||void 0===e?void 0:e():null===f||void 0===f?void 0:f()},[c]),useGlobalKeys({Escape:function Escape(a){return c&&d&&d(a)}}),{shadowHeader:C,shadowFooter:G,scrollable:K,theme:x,portalRef:i,windowRef:v,contentRef:q,scrollRef:u,windowElAtom:l,ignoreOutsideClicksRefs:[].concat(_toConsumableArray(g||[]),[h])}};
|
|
2
|
+
//# sourceMappingURL=useModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useModal.js","names":["useAction","useAtom","useUpdate","useEffect","useRef","useTheme","useForkRef","useGlobalKeys","getElementHeight","useCreateAtom","useElementAtomEventListener","useRefAtom","useResizeObservedAtom","useModal","ref","isOpen","onEsc","onOpen","onClose","ignoreOutsideClicksRefs","modalRef","portalRef","windowElAtom","windowRefCallback","contentElAtom","contentRefCallback","scrollElAtom","scrollRefCallback","modalRefForked","theme","scrollTopAtom","updateScrollTop","ctx","get","scrollTop","spy","shadowHeader","elScrollDimensionsAtom","el","scrollHeight","clientHeight","shadowFooter","heightAtom","modalHeight","contentHeight","scrollable","Escape","e","windowRef","contentRef","scrollRef"],"sources":["../../../../../src/components/Modal/useModal.ts"],"sourcesContent":["import { useAction, useAtom, useUpdate } from '@reatom/npm-react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { useTheme } from '##/components/Theme';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { useGlobalKeys } from '##/hooks/useGlobalKeys';\nimport { getElementHeight } from '##/hooks/useResizeObserved';\nimport { useCreateAtom } from '##/utils/state/useCreateAtom';\nimport { useElementAtomEventListener } from '##/utils/state/useElementAtomEventListener';\nimport { useRefAtom } from '##/utils/state/useRefAtom';\nimport { useResizeObservedAtom } from '##/utils/state/useResizeObservedAtom';\n\nexport const useModal = ({\n ref,\n isOpen,\n onEsc,\n onOpen,\n onClose,\n ignoreOutsideClicksRefs,\n}: {\n isOpen: boolean | undefined;\n onEsc: ((event: KeyboardEvent) => void) | undefined;\n onOpen: (() => void) | undefined;\n onClose: (() => void) | undefined;\n ref: React.ForwardedRef<HTMLDivElement>;\n ignoreOutsideClicksRefs: React.RefObject<HTMLElement>[] | undefined;\n}) => {\n const modalRef = useRef<HTMLDivElement | null>(null);\n const portalRef = useRef<HTMLDivElement | null>(null);\n const [windowElAtom, windowRefCallback] = useRefAtom<HTMLDivElement>();\n const [contentElAtom, contentRefCallback] = useRefAtom<HTMLDivElement>();\n const [scrollElAtom, scrollRefCallback] = useRefAtom<HTMLDivElement>();\n const modalRefForked = useForkRef([modalRef, windowRefCallback, ref]);\n\n const { theme } = useTheme();\n\n const scrollTopAtom = useCreateAtom<number>(0);\n const updateScrollTop = useAction((ctx) =>\n scrollTopAtom(ctx, ctx.get(scrollElAtom)?.scrollTop || 0),\n );\n\n const [shadowHeader] = useAtom<boolean>((ctx) => ctx.spy(scrollTopAtom) > 0);\n const elScrollDimensionsAtom = useResizeObservedAtom(\n useCreateAtom((ctx) => [ctx.spy(scrollElAtom)]),\n (el) => [el?.scrollHeight || 0, el?.clientHeight || 0] as const,\n );\n\n const [shadowFooter] = useAtom<boolean>((ctx) => {\n const scrollTop = ctx.spy(scrollTopAtom);\n const [[scrollHeight, clientHeight] = [0, 0]] = ctx.spy(\n elScrollDimensionsAtom,\n );\n\n return scrollTop < scrollHeight - clientHeight;\n });\n\n const heightAtom = useResizeObservedAtom(\n useCreateAtom((ctx) => [ctx.spy(windowElAtom), ctx.spy(contentElAtom)]),\n getElementHeight,\n );\n\n const [scrollable] = useAtom((ctx) => {\n const [modalHeight = 0, contentHeight = 0] = ctx.spy(heightAtom);\n return modalHeight < contentHeight;\n });\n\n useElementAtomEventListener(scrollElAtom, 'scroll', updateScrollTop);\n\n useUpdate(updateScrollTop, [scrollElAtom]);\n\n useEffect(() => {\n if (isOpen) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [isOpen]);\n\n useGlobalKeys({\n Escape: (e: KeyboardEvent) => isOpen && onEsc && onEsc(e),\n });\n\n return {\n shadowHeader,\n shadowFooter,\n scrollable,\n theme,\n portalRef,\n windowRef: modalRefForked,\n contentRef: contentRefCallback,\n scrollRef: scrollRefCallback,\n windowElAtom,\n ignoreOutsideClicksRefs: [...(ignoreOutsideClicksRefs || []), modalRef],\n };\n};\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","container","style"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useEffect,useRef,useState}from"react";import ReactDOM from"react-dom";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{Theme}from"../Theme/Theme";import{PortalWithThemeProvider,usePortalContext}from"./PortalWithThemeContext/PortalWithThemeContext";export{usePortalContext};var getZIndex=function(a,b){return"number"==typeof b?b:a?a+1:void 0},isRef=function(a){return!!a&&"current"in a
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","container","style"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useEffect,useRef,useState}from"react";import ReactDOM from"react-dom";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{Theme}from"../Theme/Theme";import{PortalWithThemeProvider,usePortalContext}from"./PortalWithThemeContext/PortalWithThemeContext";export{usePortalContext};var getZIndex=function(a,b){return"number"==typeof b?b:a?a+1:void 0},isRef=function(a){return!!a&&"current"in a},getElement=function(a){return isRef(a)?a.current:a};export var PortalWithTheme=React.forwardRef(function(a,b){var c=a.children,d=a.container,e=void 0===d?window.document.body:d,f=a.style,g=_objectWithoutProperties(a,_excluded),h=usePortalContext(),i=h.addRefs,j=h.zIndex,k=useState(getElement(e)),l=_slicedToArray(k,2),m=l[0],n=l[1],o=useRef(null),p=getZIndex(j,null===f||void 0===f?void 0:f.zIndex),q=useForkRef([o,b]);return useEffect(function(){i&&i([o])},[o]),useEffect(function(){n(getElement(e))},[getElement(e)]),m?ReactDOM.createPortal(React.createElement(PortalWithThemeProvider,{zIndex:p},React.createElement(Theme,Object.assign({},g,{ref:q,style:_objectSpread(_objectSpread({},f),{},{zIndex:p})}),c)),m):null});
|
|
2
2
|
//# sourceMappingURL=PortalWithTheme.js.map
|