@alfalab/core-components-popup-sheet 3.0.4 → 3.0.5

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.
Files changed (36) hide show
  1. package/Component.d.ts +7 -7
  2. package/Component.js.map +1 -1
  3. package/components/backdrop/Component.d.ts +1 -1
  4. package/components/backdrop/index.css +9 -9
  5. package/components/backdrop/index.module.css.js +1 -1
  6. package/components/backdrop/index.module.css.js.map +1 -1
  7. package/cssm/Component.d.ts +7 -7
  8. package/cssm/Component.js.map +1 -1
  9. package/cssm/components/backdrop/Component.d.ts +1 -1
  10. package/esm/Component.d.ts +7 -7
  11. package/esm/Component.js.map +1 -1
  12. package/esm/components/backdrop/Component.d.ts +1 -1
  13. package/esm/components/backdrop/index.css +9 -9
  14. package/esm/components/backdrop/index.module.css.js +1 -1
  15. package/esm/components/backdrop/index.module.css.js.map +1 -1
  16. package/esm/index.css +13 -13
  17. package/esm/index.module.css.js +1 -1
  18. package/esm/index.module.css.js.map +1 -1
  19. package/index.css +13 -13
  20. package/index.module.css.js +1 -1
  21. package/index.module.css.js.map +1 -1
  22. package/modern/Component.d.ts +7 -7
  23. package/modern/Component.js.map +1 -1
  24. package/modern/components/backdrop/Component.d.ts +1 -1
  25. package/modern/components/backdrop/index.css +9 -9
  26. package/modern/components/backdrop/index.module.css.js +1 -1
  27. package/modern/components/backdrop/index.module.css.js.map +1 -1
  28. package/modern/index.css +13 -13
  29. package/modern/index.module.css.js +1 -1
  30. package/modern/index.module.css.js.map +1 -1
  31. package/moderncssm/Component.d.ts +7 -7
  32. package/moderncssm/Component.js.map +1 -1
  33. package/moderncssm/components/backdrop/Component.d.ts +1 -1
  34. package/package.json +6 -6
  35. package/src/components/backdrop/index.module.css +1 -1
  36. package/src/index.module.css +1 -1
package/Component.d.ts CHANGED
@@ -2,7 +2,7 @@ import React, { type KeyboardEvent, type MouseEvent } from 'react';
2
2
  import { type BaseModalProps } from '@alfalab/core-components-base-modal';
3
3
  import { type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';
4
4
  import { type PaddingType } from '@alfalab/core-components-types';
5
- export declare type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
5
+ export type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
6
6
  /**
7
7
  * Наличие кнопки закрытия
8
8
  */
@@ -33,26 +33,26 @@ export declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalP
33
33
  /**
34
34
  * Наличие кнопки закрытия
35
35
  */
36
- hasCloser?: boolean | undefined;
36
+ hasCloser?: boolean;
37
37
  /**
38
38
  * Будет ли свайпаться шторка
39
39
  */
40
- swipeable?: boolean | undefined;
40
+ swipeable?: boolean;
41
41
  /**
42
42
  * Отступы
43
43
  */
44
- padding?: PaddingType | undefined;
44
+ padding?: PaddingType;
45
45
  /**
46
46
  * Обработчик закрытия
47
47
  */
48
- onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
48
+ onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick" | "swipe") => void;
49
49
  /**
50
50
  * Идентификатор для систем автоматизированного тестирования.
51
51
  * Для кнопки закрытия используется модификатор -closer
52
52
  */
53
- dataTestId?: string | undefined;
53
+ dataTestId?: string;
54
54
  /**
55
55
  * Дополнительные пропсы для компонента Closer.
56
56
  */
57
- closerProps?: Omit<CloserProps, "onClose" | "view"> | undefined;
57
+ closerProps?: Omit<CloserProps, "view" | "onClose">;
58
58
  } & React.RefAttributes<HTMLDivElement>>;
package/Component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":["forwardRef","__rest","useState","useRef","easingFns","useSwipeable","mergeRefs","React","BaseModal","__assign","cn","styles","PopupBackdrop","createPaddingStyle","Closer","getDataTestId"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":["forwardRef","__rest","useState","useRef","easingFns","useSwipeable","mergeRefs","React","BaseModal","__assign","cn","styles","PopupBackdrop","createPaddingStyle","Closer","getDataTestId"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { type FC } from 'react';
2
2
  import { type BackdropProps } from '@alfalab/core-components-backdrop';
3
- export declare type PopupBackdropProps = BackdropProps & {
3
+ export type PopupBackdropProps = BackdropProps & {
4
4
  /**
5
5
  * Прозрачность бэкдропа
6
6
  */
@@ -5,22 +5,22 @@
5
5
  --backdrop-visible-background: var(--color-light-overlay-default);
6
6
  --backdrop-hidden-background: transparent;
7
7
  }
8
- .popup-sheet__appear_1u0ng,
9
- .popup-sheet__enter_1u0ng {
8
+ .popup-sheet__appear_7rn6g,
9
+ .popup-sheet__enter_7rn6g {
10
10
  background-color: var(--backdrop-hidden-background);
11
11
  }
12
- .popup-sheet__appearActive_1u0ng,
13
- .popup-sheet__enterActive_1u0ng,
14
- .popup-sheet__appearDone_1u0ng,
15
- .popup-sheet__enterDone_1u0ng {
12
+ .popup-sheet__appearActive_7rn6g,
13
+ .popup-sheet__enterActive_7rn6g,
14
+ .popup-sheet__appearDone_7rn6g,
15
+ .popup-sheet__enterDone_7rn6g {
16
16
  background-color: var(--backdrop-visible-background);
17
17
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
18
18
  }
19
- .popup-sheet__exit_1u0ng {
19
+ .popup-sheet__exit_7rn6g {
20
20
  background-color: var(--backdrop-visible-background);
21
21
  }
22
- .popup-sheet__exitActive_1u0ng,
23
- .popup-sheet__exitDone_1u0ng {
22
+ .popup-sheet__exitActive_7rn6g,
23
+ .popup-sheet__exitDone_7rn6g {
24
24
  background-color: var(--backdrop-hidden-background);
25
25
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
26
26
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"appear":"popup-sheet__appear_1u0ng","enter":"popup-sheet__enter_1u0ng","appearActive":"popup-sheet__appearActive_1u0ng","enterActive":"popup-sheet__enterActive_1u0ng","appearDone":"popup-sheet__appearDone_1u0ng","enterDone":"popup-sheet__enterDone_1u0ng","exit":"popup-sheet__exit_1u0ng","exitActive":"popup-sheet__exitActive_1u0ng","exitDone":"popup-sheet__exitDone_1u0ng"};
5
+ var styles = {"appear":"popup-sheet__appear_7rn6g","enter":"popup-sheet__enter_7rn6g","appearActive":"popup-sheet__appearActive_7rn6g","enterActive":"popup-sheet__enterActive_7rn6g","appearDone":"popup-sheet__appearDone_7rn6g","enterDone":"popup-sheet__enterDone_7rn6g","exit":"popup-sheet__exit_7rn6g","exitActive":"popup-sheet__exitActive_7rn6g","exitDone":"popup-sheet__exitDone_7rn6g"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
@@ -2,7 +2,7 @@ import React, { type KeyboardEvent, type MouseEvent } from 'react';
2
2
  import { type BaseModalProps } from '@alfalab/core-components-base-modal/cssm';
3
3
  import { type CloserProps } from '@alfalab/core-components-navigation-bar-private/cssm/shared';
4
4
  import { type PaddingType } from '@alfalab/core-components-types/cssm';
5
- export declare type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
5
+ export type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
6
6
  /**
7
7
  * Наличие кнопки закрытия
8
8
  */
@@ -33,26 +33,26 @@ export declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalP
33
33
  /**
34
34
  * Наличие кнопки закрытия
35
35
  */
36
- hasCloser?: boolean | undefined;
36
+ hasCloser?: boolean;
37
37
  /**
38
38
  * Будет ли свайпаться шторка
39
39
  */
40
- swipeable?: boolean | undefined;
40
+ swipeable?: boolean;
41
41
  /**
42
42
  * Отступы
43
43
  */
44
- padding?: PaddingType | undefined;
44
+ padding?: PaddingType;
45
45
  /**
46
46
  * Обработчик закрытия
47
47
  */
48
- onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
48
+ onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick" | "swipe") => void;
49
49
  /**
50
50
  * Идентификатор для систем автоматизированного тестирования.
51
51
  * Для кнопки закрытия используется модификатор -closer
52
52
  */
53
- dataTestId?: string | undefined;
53
+ dataTestId?: string;
54
54
  /**
55
55
  * Дополнительные пропсы для компонента Closer.
56
56
  */
57
- closerProps?: Omit<CloserProps, "onClose" | "view"> | undefined;
57
+ closerProps?: Omit<CloserProps, "view" | "onClose">;
58
58
  } & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":["forwardRef","__rest","useState","useRef","easingFns","useSwipeable","mergeRefs","React","BaseModal","__assign","cn","styles","PopupBackdrop","createPaddingStyle","Closer","getDataTestId"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":["forwardRef","__rest","useState","useRef","easingFns","useSwipeable","mergeRefs","React","BaseModal","__assign","cn","styles","PopupBackdrop","createPaddingStyle","Closer","getDataTestId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAM,cAAc,GAAG,GAAG;AAC1B,IAAM,YAAY,GAAG,GAAG;AACxB,IAAM,kBAAkB,GAAG,GAAG;AAsC9B,IAAM,eAAe,GAAG,EAAE;IAEb,UAAU,GAAGA,gBAAU,CAChC,UACI,EAaC,EACD,GAAG,EAAA;IAbC,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACT,OAAO,aAAA,EACP,eAAe,qBAAA,EACf,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,EAAA,GAAA,EAAA,CAAA,OAAyB,EAAzB,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,eAAe,GAAA,EAAA,EACzB,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,GAAA,EAAA,EACb,SAAS,GAAAC,YAAA,CAAA,EAAA,EAZhB,0JAaC,CADe;IAIV,IAAA,EAAA,GAAgCC,cAAQ,CAAC,CAAC,CAAC,EAA1C,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,cAAc,GAAA,EAAA,CAAA,CAAA,CAAe;IAC3C,IAAA,EAAA,GAAwCA,cAAQ,CAAC,CAAC,CAAC,EAAlD,eAAe,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,kBAAkB,GAAA,EAAA,CAAA,CAAA,CAAe;AAEzD,IAAA,IAAM,WAAW,GAAGC,YAAM,CAAC,CAAC,CAAC;AAC7B,IAAA,IAAM,QAAQ,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAC7C,IAAA,IAAM,qBAAqB,GAAGA,YAAM,CAAC,KAAK,CAAC;AAE3C,IAAA,IAAM,cAAc,GAAG,UAAC,MAAc,EAAA,EAAa,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA,EAAA;IAEtE,IAAM,kBAAkB,GAAG,UAAC,MAAc,EAAA;AACtC,QAAA,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC;AAA7C,KAA6C;AAEjD,IAAA,IAAM,cAAc,GAAG,YAAA;AACnB,QAAA,OAAA,WAAW,GAAG,EAAE,SAAS,EAAE,aAAc,CAAA,MAAA,CAAA,WAAW,EAAK,KAAA,CAAA,EAAE,GAAG,EAAE;AAAhE,KAAgE;IAEpE,IAAM,aAAa,GAAkB,UAAC,EAAU,EAAA;AAAR,QAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA;AAC1C,QAAA,IAAM,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;QAErC,cAAc,CAAC,MAAM,CAAC;AACtB,QAAA,kBAAkB,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;AAClD,KAAC;IAED,IAAM,YAAY,GAAkB,UAAC,EAA2B,EAAA;AAAzB,QAAA,IAAA,MAAM,YAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA;QAC1D,IAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,IAAI,QAAQ,IAAI,cAAc;QACvE,IAAM,mBAAmB,GAAG,MAAM,IAAI,WAAW,CAAC,OAAO,GAAG,YAAY;QAExE,IAAM,MAAM,GAAG,WAAW;AAC1B,QAAA,IAAM,YAAY,GAAG,kBAAkB,GAAG,CAAC;AAC3C,QAAA,IAAI,KAAa;AAEjB,QAAA,IAAI,qBAAqB,IAAI,mBAAmB,EAAE;AAC9C,YAAA,qBAAqB,CAAC,OAAO,GAAG,IAAI;YACpC,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAG,KAAgC,EAAE,OAAO,CAAC;YAEpD,IAAM,SAAO,GAAG,UAAC,SAAiB,EAAA;AAC9B,gBAAA,IAAI,CAAC,KAAK;oBAAE,KAAK,GAAG,SAAS;AAC7B,gBAAA,IAAM,WAAW,GAAG,SAAS,GAAG,KAAK;AAErC,gBAAA,IAAI,WAAW,IAAI,YAAY,EAAE;oBAC7B,IAAM,UAAU,GACZ,MAAM;AACN,wBAAA,CAAC,WAAW,CAAC,OAAO,GAAG,MAAM;AACzB,4BAAAC,gBAAS,CAAC,aAAa,CAAC,WAAW,GAAG,YAAY,CAAC;AAE3D,oBAAA,IAAI,UAAU,GAAG,CAAC,EAAE;wBAChB,cAAc,CAAC,UAAU,CAAC;;oBAE9B,qBAAqB,CAAC,SAAO,CAAC;;qBAC3B;oBACH,cAAc,CAAC,CAAC,CAAC;AACjB,oBAAA,qBAAqB,CAAC,OAAO,GAAG,KAAK;;AAE7C,aAAC;YAED,qBAAqB,CAAC,SAAO,CAAC;;aAC3B;YACH,IAAM,SAAO,GAAG,UAAC,SAAiB,EAAA;AAC9B,gBAAA,IAAI,CAAC,KAAK;oBAAE,KAAK,GAAG,SAAS;AAC7B,gBAAA,IAAM,WAAW,GAAG,SAAS,GAAG,KAAK;AAErC,gBAAA,IAAI,WAAW,IAAI,YAAY,EAAE;AAC7B,oBAAA,IAAM,UAAU,GACZ,MAAM,GAAG,MAAM,GAAGA,gBAAS,CAAC,aAAa,CAAC,WAAW,GAAG,YAAY,CAAC;AAEzE,oBAAA,IAAI,UAAU,GAAG,CAAC,EAAE;wBAChB,cAAc,CAAC,UAAU,CAAC;AAC1B,wBAAA,kBAAkB,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC;;oBAEtD,qBAAqB,CAAC,SAAO,CAAC;;qBAC3B;oBACH,cAAc,CAAC,CAAC,CAAC;oBACjB,kBAAkB,CAAC,CAAC,CAAC;;AAE7B,aAAC;YAED,qBAAqB,CAAC,SAAO,CAAC;;AAEtC,KAAC;AAED,IAAA,IAAM,aAAa,GAAG,UAAC,IAAiB,EAAE,WAAoB,EAAA;AAC1D,QAAA,qBAAqB,CAAC,OAAO,GAAG,KAAK;AACrC,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;YAClB,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY;;QAGvD,IAAI,eAAe,aAAf,eAAe,KAAA,MAAA,GAAA,MAAA,GAAf,eAAe,CAAE,SAAS,EAAE;AAC5B,YAAA,eAAe,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC;;AAEpD,KAAC;IAED,IAAM,YAAY,GAAG,UAAC,IAAiB,EAAA;AACnC,QAAA,qBAAqB,CAAC,OAAO,GAAG,KAAK;QACrC,cAAc,CAAC,CAAC,CAAC;QACjB,kBAAkB,CAAC,CAAC,CAAC;QAErB,IAAI,eAAe,aAAf,eAAe,KAAA,MAAA,GAAA,MAAA,GAAf,eAAe,CAAE,QAAQ,EAAE;AAC3B,YAAA,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC;;AAEtC,KAAC;IAED,IAAM,sBAAsB,GAAGC,2BAAY,CAAC;AACxC,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,QAAQ,EAAE,YAAY;AACtB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,KAAK,EAAE,CAAC;AACX,KAAA,CAAC;IAEM,IAAK,QAAQ,GAAuB,sBAAsB,CAA7C,GAAA,EAAK,aAAa,GAAAJ,YAAA,CAAK,sBAAsB,EAA5D,CAAmC,KAAA,CAAA,CAAF;IACvC,IAAM,YAAY,GAAGK,0BAAS,CAAC,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAEpD,QACIC,qCAACC,cAAS,EAAAC,cAAA,CAAA,EAAA,EACF,SAAS,EACb,EAAA,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAEC,uBAAa,EACvB,aAAa,oCACN,aAAa,CAAA,EAAA,EAChB,OAAO,EAAE,eAAe,KAE5B,eAAe,EAAAH,cAAA,CAAAA,cAAA,CAAA,EACX,UAAU,EAAE;gBACR,KAAK,EAAEE,uBAAM,CAAC,KAAK;gBACnB,MAAM,EAAEA,uBAAM,CAAC,MAAM;gBACrB,WAAW,EAAEA,uBAAM,CAAC,WAAW;gBAC/B,YAAY,EAAEA,uBAAM,CAAC,YAAY;AACjC,gBAAA,IAAI,EAAE,qBAAqB,CAAC,OAAO,GAAGA,uBAAM,CAAC,WAAW,GAAGA,uBAAM,CAAC,IAAI;gBACtE,UAAU,EAAE,qBAAqB,CAAC;sBAC5BA,uBAAM,CAAC;sBACPA,uBAAM,CAAC,UAAU;AAC1B,aAAA,EACD,OAAO,EAAE,kBAAkB,EAAA,EACxB,eAAe,CAAA,EAAA,EAClB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,YAAY,EAAA,CAAA,EAE1B,iBAAiB,EAAAF,cAAA,CAAA,EACb,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,cAAc,EAAE,EACpB,GAAC,SAAS,GAAG,aAAa,GAAG,EAAE,EAAC,EAEvC,YAAY,EAAAA,cAAA,CAAAA,cAAA,CAAA,EACR,KAAK,EAAEI,yBAAkB,CAAC,OAAO,CAAC,IAC/B,YAAY,CAAA,EAAA,EACf,SAAS,EAAEH,mBAAE,CAACC,uBAAM,CAAC,OAAO,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,SAAS,CAAC,EAAA,CAAA,EAAA,CAAA;AAGzD,QAAA,SAAS,KACNJ,sBAAA,CAAA,aAAA,CAACO,aAAM,EACHL,cAAA,CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,UAAU,EAAEM,oBAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAA,EAC3C,WAAW,EACf,EAAA,SAAS,EAAEL,mBAAE,CAACC,uBAAM,CAAC,MAAM,EAAE,WAAW,KAAA,IAAA,IAAX,WAAW,KAAX,MAAA,GAAA,MAAA,GAAA,WAAW,CAAE,SAAS,CAAC,IACtD,CACL;QACA,QAAQ,CACD;AAEpB,CAAC;AAGL,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { type FC } from 'react';
2
2
  import { type BackdropProps } from '@alfalab/core-components-backdrop/cssm';
3
- export declare type PopupBackdropProps = BackdropProps & {
3
+ export type PopupBackdropProps = BackdropProps & {
4
4
  /**
5
5
  * Прозрачность бэкдропа
6
6
  */
@@ -2,7 +2,7 @@ import React, { type KeyboardEvent, type MouseEvent } from 'react';
2
2
  import { type BaseModalProps } from '@alfalab/core-components-base-modal/esm';
3
3
  import { type CloserProps } from '@alfalab/core-components-navigation-bar-private/esm/shared';
4
4
  import { type PaddingType } from '@alfalab/core-components-types/esm';
5
- export declare type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
5
+ export type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
6
6
  /**
7
7
  * Наличие кнопки закрытия
8
8
  */
@@ -33,26 +33,26 @@ export declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalP
33
33
  /**
34
34
  * Наличие кнопки закрытия
35
35
  */
36
- hasCloser?: boolean | undefined;
36
+ hasCloser?: boolean;
37
37
  /**
38
38
  * Будет ли свайпаться шторка
39
39
  */
40
- swipeable?: boolean | undefined;
40
+ swipeable?: boolean;
41
41
  /**
42
42
  * Отступы
43
43
  */
44
- padding?: PaddingType | undefined;
44
+ padding?: PaddingType;
45
45
  /**
46
46
  * Обработчик закрытия
47
47
  */
48
- onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
48
+ onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick" | "swipe") => void;
49
49
  /**
50
50
  * Идентификатор для систем автоматизированного тестирования.
51
51
  * Для кнопки закрытия используется модификатор -closer
52
52
  */
53
- dataTestId?: string | undefined;
53
+ dataTestId?: string;
54
54
  /**
55
55
  * Дополнительные пропсы для компонента Closer.
56
56
  */
57
- closerProps?: Omit<CloserProps, "onClose" | "view"> | undefined;
57
+ closerProps?: Omit<CloserProps, "view" | "onClose">;
58
58
  } & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { type FC } from 'react';
2
2
  import { type BackdropProps } from '@alfalab/core-components-backdrop/esm';
3
- export declare type PopupBackdropProps = BackdropProps & {
3
+ export type PopupBackdropProps = BackdropProps & {
4
4
  /**
5
5
  * Прозрачность бэкдропа
6
6
  */
@@ -5,22 +5,22 @@
5
5
  --backdrop-visible-background: var(--color-light-overlay-default);
6
6
  --backdrop-hidden-background: transparent;
7
7
  }
8
- .popup-sheet__appear_1u0ng,
9
- .popup-sheet__enter_1u0ng {
8
+ .popup-sheet__appear_7rn6g,
9
+ .popup-sheet__enter_7rn6g {
10
10
  background-color: var(--backdrop-hidden-background);
11
11
  }
12
- .popup-sheet__appearActive_1u0ng,
13
- .popup-sheet__enterActive_1u0ng,
14
- .popup-sheet__appearDone_1u0ng,
15
- .popup-sheet__enterDone_1u0ng {
12
+ .popup-sheet__appearActive_7rn6g,
13
+ .popup-sheet__enterActive_7rn6g,
14
+ .popup-sheet__appearDone_7rn6g,
15
+ .popup-sheet__enterDone_7rn6g {
16
16
  background-color: var(--backdrop-visible-background);
17
17
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
18
18
  }
19
- .popup-sheet__exit_1u0ng {
19
+ .popup-sheet__exit_7rn6g {
20
20
  background-color: var(--backdrop-visible-background);
21
21
  }
22
- .popup-sheet__exitActive_1u0ng,
23
- .popup-sheet__exitDone_1u0ng {
22
+ .popup-sheet__exitActive_7rn6g,
23
+ .popup-sheet__exitDone_7rn6g {
24
24
  background-color: var(--backdrop-hidden-background);
25
25
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
26
26
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"appear":"popup-sheet__appear_1u0ng","enter":"popup-sheet__enter_1u0ng","appearActive":"popup-sheet__appearActive_1u0ng","enterActive":"popup-sheet__enterActive_1u0ng","appearDone":"popup-sheet__appearDone_1u0ng","enterDone":"popup-sheet__enterDone_1u0ng","exit":"popup-sheet__exit_1u0ng","exitActive":"popup-sheet__exitActive_1u0ng","exitDone":"popup-sheet__exitDone_1u0ng"};
3
+ var styles = {"appear":"popup-sheet__appear_7rn6g","enter":"popup-sheet__enter_7rn6g","appearActive":"popup-sheet__appearActive_7rn6g","enterActive":"popup-sheet__enterActive_7rn6g","appearDone":"popup-sheet__appearDone_7rn6g","enterDone":"popup-sheet__enterDone_7rn6g","exit":"popup-sheet__exit_7rn6g","exitActive":"popup-sheet__exitActive_7rn6g","exitDone":"popup-sheet__exitDone_7rn6g"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
package/esm/index.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --gap-0: 0px;
7
7
  --gap-8: var(--gap-xs);
8
8
  }
9
- .popup-sheet__component_nrxw0.popup-sheet__component_nrxw0 {
9
+ .popup-sheet__component_9yzqf.popup-sheet__component_9yzqf {
10
10
  position: fixed;
11
11
  bottom: var(--gap-0);
12
12
  margin: auto var(--gap-8) var(--gap-8);
@@ -15,39 +15,39 @@
15
15
  border-radius: var(--border-radius-36);
16
16
  overflow: hidden;
17
17
  }
18
- .popup-sheet__closer_nrxw0 {
18
+ .popup-sheet__closer_9yzqf {
19
19
  position: absolute;
20
20
  top: var(--gap-8);
21
21
  right: var(--gap-8);
22
22
  }
23
- .popup-sheet__closer_nrxw0 > button {
23
+ .popup-sheet__closer_9yzqf > button {
24
24
  -webkit-backdrop-filter: none;
25
25
  backdrop-filter: none;
26
26
  }
27
- .popup-sheet__content_nrxw0 {
27
+ .popup-sheet__content_9yzqf {
28
28
  box-sizing: border-box;
29
29
  }
30
- .popup-sheet__appear_nrxw0,
31
- .popup-sheet__enter_nrxw0 {
30
+ .popup-sheet__appear_9yzqf,
31
+ .popup-sheet__enter_9yzqf {
32
32
  transform: translateY(calc(100% + 100px));
33
33
  }
34
- .popup-sheet__appearActive_nrxw0,
35
- .popup-sheet__enterActive_nrxw0 {
34
+ .popup-sheet__appearActive_9yzqf,
35
+ .popup-sheet__enterActive_9yzqf {
36
36
  transform: translateY(0);
37
37
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
38
38
  transition-delay: 50ms;
39
39
  }
40
- .popup-sheet__exit_nrxw0 {
40
+ .popup-sheet__exit_9yzqf {
41
41
  transform: translateY(0);
42
42
  }
43
- .popup-sheet__exitBySwipe_nrxw0 {
43
+ .popup-sheet__exitBySwipe_9yzqf {
44
44
  transform: translateY(calc(100% + 100px));
45
45
  }
46
- .popup-sheet__exitActiveBySwipe_nrxw0 {
46
+ .popup-sheet__exitActiveBySwipe_9yzqf {
47
47
  transition: none;
48
48
  }
49
- .popup-sheet__exitActive_nrxw0,
50
- .popup-sheet__exitDone_nrxw0 {
49
+ .popup-sheet__exitActive_9yzqf,
50
+ .popup-sheet__exitDone_9yzqf {
51
51
  transform: translateY(calc(100% + 100px));
52
52
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
53
53
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"popup-sheet__component_nrxw0","closer":"popup-sheet__closer_nrxw0","content":"popup-sheet__content_nrxw0","appear":"popup-sheet__appear_nrxw0","enter":"popup-sheet__enter_nrxw0","appearActive":"popup-sheet__appearActive_nrxw0","enterActive":"popup-sheet__enterActive_nrxw0","exit":"popup-sheet__exit_nrxw0","exitBySwipe":"popup-sheet__exitBySwipe_nrxw0","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_nrxw0","exitActive":"popup-sheet__exitActive_nrxw0"};
3
+ var styles = {"component":"popup-sheet__component_9yzqf","closer":"popup-sheet__closer_9yzqf","content":"popup-sheet__content_9yzqf","appear":"popup-sheet__appear_9yzqf","enter":"popup-sheet__enter_9yzqf","appearActive":"popup-sheet__appearActive_9yzqf","enterActive":"popup-sheet__enterActive_9yzqf","exit":"popup-sheet__exit_9yzqf","exitBySwipe":"popup-sheet__exitBySwipe_9yzqf","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_9yzqf","exitActive":"popup-sheet__exitActive_9yzqf"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
package/index.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --gap-0: 0px;
7
7
  --gap-8: var(--gap-xs);
8
8
  }
9
- .popup-sheet__component_nrxw0.popup-sheet__component_nrxw0 {
9
+ .popup-sheet__component_9yzqf.popup-sheet__component_9yzqf {
10
10
  position: fixed;
11
11
  bottom: var(--gap-0);
12
12
  margin: auto var(--gap-8) var(--gap-8);
@@ -15,39 +15,39 @@
15
15
  border-radius: var(--border-radius-36);
16
16
  overflow: hidden;
17
17
  }
18
- .popup-sheet__closer_nrxw0 {
18
+ .popup-sheet__closer_9yzqf {
19
19
  position: absolute;
20
20
  top: var(--gap-8);
21
21
  right: var(--gap-8);
22
22
  }
23
- .popup-sheet__closer_nrxw0 > button {
23
+ .popup-sheet__closer_9yzqf > button {
24
24
  -webkit-backdrop-filter: none;
25
25
  backdrop-filter: none;
26
26
  }
27
- .popup-sheet__content_nrxw0 {
27
+ .popup-sheet__content_9yzqf {
28
28
  box-sizing: border-box;
29
29
  }
30
- .popup-sheet__appear_nrxw0,
31
- .popup-sheet__enter_nrxw0 {
30
+ .popup-sheet__appear_9yzqf,
31
+ .popup-sheet__enter_9yzqf {
32
32
  transform: translateY(calc(100% + 100px));
33
33
  }
34
- .popup-sheet__appearActive_nrxw0,
35
- .popup-sheet__enterActive_nrxw0 {
34
+ .popup-sheet__appearActive_9yzqf,
35
+ .popup-sheet__enterActive_9yzqf {
36
36
  transform: translateY(0);
37
37
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
38
38
  transition-delay: 50ms;
39
39
  }
40
- .popup-sheet__exit_nrxw0 {
40
+ .popup-sheet__exit_9yzqf {
41
41
  transform: translateY(0);
42
42
  }
43
- .popup-sheet__exitBySwipe_nrxw0 {
43
+ .popup-sheet__exitBySwipe_9yzqf {
44
44
  transform: translateY(calc(100% + 100px));
45
45
  }
46
- .popup-sheet__exitActiveBySwipe_nrxw0 {
46
+ .popup-sheet__exitActiveBySwipe_9yzqf {
47
47
  transition: none;
48
48
  }
49
- .popup-sheet__exitActive_nrxw0,
50
- .popup-sheet__exitDone_nrxw0 {
49
+ .popup-sheet__exitActive_9yzqf,
50
+ .popup-sheet__exitDone_9yzqf {
51
51
  transform: translateY(calc(100% + 100px));
52
52
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
53
53
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"popup-sheet__component_nrxw0","closer":"popup-sheet__closer_nrxw0","content":"popup-sheet__content_nrxw0","appear":"popup-sheet__appear_nrxw0","enter":"popup-sheet__enter_nrxw0","appearActive":"popup-sheet__appearActive_nrxw0","enterActive":"popup-sheet__enterActive_nrxw0","exit":"popup-sheet__exit_nrxw0","exitBySwipe":"popup-sheet__exitBySwipe_nrxw0","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_nrxw0","exitActive":"popup-sheet__exitActive_nrxw0"};
5
+ var styles = {"component":"popup-sheet__component_9yzqf","closer":"popup-sheet__closer_9yzqf","content":"popup-sheet__content_9yzqf","appear":"popup-sheet__appear_9yzqf","enter":"popup-sheet__enter_9yzqf","appearActive":"popup-sheet__appearActive_9yzqf","enterActive":"popup-sheet__enterActive_9yzqf","exit":"popup-sheet__exit_9yzqf","exitBySwipe":"popup-sheet__exitBySwipe_9yzqf","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_9yzqf","exitActive":"popup-sheet__exitActive_9yzqf"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
@@ -2,7 +2,7 @@ import React, { type KeyboardEvent, type MouseEvent } from 'react';
2
2
  import { type BaseModalProps } from '@alfalab/core-components-base-modal/modern';
3
3
  import { type CloserProps } from '@alfalab/core-components-navigation-bar-private/modern/shared';
4
4
  import { type PaddingType } from '@alfalab/core-components-types/modern';
5
- export declare type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
5
+ export type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
6
6
  /**
7
7
  * Наличие кнопки закрытия
8
8
  */
@@ -33,26 +33,26 @@ export declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalP
33
33
  /**
34
34
  * Наличие кнопки закрытия
35
35
  */
36
- hasCloser?: boolean | undefined;
36
+ hasCloser?: boolean;
37
37
  /**
38
38
  * Будет ли свайпаться шторка
39
39
  */
40
- swipeable?: boolean | undefined;
40
+ swipeable?: boolean;
41
41
  /**
42
42
  * Отступы
43
43
  */
44
- padding?: PaddingType | undefined;
44
+ padding?: PaddingType;
45
45
  /**
46
46
  * Обработчик закрытия
47
47
  */
48
- onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
48
+ onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick" | "swipe") => void;
49
49
  /**
50
50
  * Идентификатор для систем автоматизированного тестирования.
51
51
  * Для кнопки закрытия используется модификатор -closer
52
52
  */
53
- dataTestId?: string | undefined;
53
+ dataTestId?: string;
54
54
  /**
55
55
  * Дополнительные пропсы для компонента Closer.
56
56
  */
57
- closerProps?: Omit<CloserProps, "onClose" | "view"> | undefined;
57
+ closerProps?: Omit<CloserProps, "view" | "onClose">;
58
58
  } & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { type FC } from 'react';
2
2
  import { type BackdropProps } from '@alfalab/core-components-backdrop/modern';
3
- export declare type PopupBackdropProps = BackdropProps & {
3
+ export type PopupBackdropProps = BackdropProps & {
4
4
  /**
5
5
  * Прозрачность бэкдропа
6
6
  */
@@ -5,22 +5,22 @@
5
5
  --backdrop-visible-background: var(--color-light-overlay-default);
6
6
  --backdrop-hidden-background: transparent;
7
7
  }
8
- .popup-sheet__appear_1u0ng,
9
- .popup-sheet__enter_1u0ng {
8
+ .popup-sheet__appear_7rn6g,
9
+ .popup-sheet__enter_7rn6g {
10
10
  background-color: var(--backdrop-hidden-background);
11
11
  }
12
- .popup-sheet__appearActive_1u0ng,
13
- .popup-sheet__enterActive_1u0ng,
14
- .popup-sheet__appearDone_1u0ng,
15
- .popup-sheet__enterDone_1u0ng {
12
+ .popup-sheet__appearActive_7rn6g,
13
+ .popup-sheet__enterActive_7rn6g,
14
+ .popup-sheet__appearDone_7rn6g,
15
+ .popup-sheet__enterDone_7rn6g {
16
16
  background-color: var(--backdrop-visible-background);
17
17
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
18
18
  }
19
- .popup-sheet__exit_1u0ng {
19
+ .popup-sheet__exit_7rn6g {
20
20
  background-color: var(--backdrop-visible-background);
21
21
  }
22
- .popup-sheet__exitActive_1u0ng,
23
- .popup-sheet__exitDone_1u0ng {
22
+ .popup-sheet__exitActive_7rn6g,
23
+ .popup-sheet__exitDone_7rn6g {
24
24
  background-color: var(--backdrop-hidden-background);
25
25
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
26
26
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"appear":"popup-sheet__appear_1u0ng","enter":"popup-sheet__enter_1u0ng","appearActive":"popup-sheet__appearActive_1u0ng","enterActive":"popup-sheet__enterActive_1u0ng","appearDone":"popup-sheet__appearDone_1u0ng","enterDone":"popup-sheet__enterDone_1u0ng","exit":"popup-sheet__exit_1u0ng","exitActive":"popup-sheet__exitActive_1u0ng","exitDone":"popup-sheet__exitDone_1u0ng"};
3
+ const styles = {"appear":"popup-sheet__appear_7rn6g","enter":"popup-sheet__enter_7rn6g","appearActive":"popup-sheet__appearActive_7rn6g","enterActive":"popup-sheet__enterActive_7rn6g","appearDone":"popup-sheet__appearDone_7rn6g","enterDone":"popup-sheet__enterDone_7rn6g","exit":"popup-sheet__exit_7rn6g","exitActive":"popup-sheet__exitActive_7rn6g","exitDone":"popup-sheet__exitDone_7rn6g"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
package/modern/index.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --gap-0: 0px;
7
7
  --gap-8: var(--gap-xs);
8
8
  }
9
- .popup-sheet__component_nrxw0.popup-sheet__component_nrxw0 {
9
+ .popup-sheet__component_9yzqf.popup-sheet__component_9yzqf {
10
10
  position: fixed;
11
11
  bottom: var(--gap-0);
12
12
  margin: auto var(--gap-8) var(--gap-8);
@@ -15,39 +15,39 @@
15
15
  border-radius: var(--border-radius-36);
16
16
  overflow: hidden;
17
17
  }
18
- .popup-sheet__closer_nrxw0 {
18
+ .popup-sheet__closer_9yzqf {
19
19
  position: absolute;
20
20
  top: var(--gap-8);
21
21
  right: var(--gap-8);
22
22
  }
23
- .popup-sheet__closer_nrxw0 > button {
23
+ .popup-sheet__closer_9yzqf > button {
24
24
  -webkit-backdrop-filter: none;
25
25
  backdrop-filter: none;
26
26
  }
27
- .popup-sheet__content_nrxw0 {
27
+ .popup-sheet__content_9yzqf {
28
28
  box-sizing: border-box;
29
29
  }
30
- .popup-sheet__appear_nrxw0,
31
- .popup-sheet__enter_nrxw0 {
30
+ .popup-sheet__appear_9yzqf,
31
+ .popup-sheet__enter_9yzqf {
32
32
  transform: translateY(calc(100% + 100px));
33
33
  }
34
- .popup-sheet__appearActive_nrxw0,
35
- .popup-sheet__enterActive_nrxw0 {
34
+ .popup-sheet__appearActive_9yzqf,
35
+ .popup-sheet__enterActive_9yzqf {
36
36
  transform: translateY(0);
37
37
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
38
38
  transition-delay: 50ms;
39
39
  }
40
- .popup-sheet__exit_nrxw0 {
40
+ .popup-sheet__exit_9yzqf {
41
41
  transform: translateY(0);
42
42
  }
43
- .popup-sheet__exitBySwipe_nrxw0 {
43
+ .popup-sheet__exitBySwipe_9yzqf {
44
44
  transform: translateY(calc(100% + 100px));
45
45
  }
46
- .popup-sheet__exitActiveBySwipe_nrxw0 {
46
+ .popup-sheet__exitActiveBySwipe_9yzqf {
47
47
  transition: none;
48
48
  }
49
- .popup-sheet__exitActive_nrxw0,
50
- .popup-sheet__exitDone_nrxw0 {
49
+ .popup-sheet__exitActive_9yzqf,
50
+ .popup-sheet__exitDone_9yzqf {
51
51
  transform: translateY(calc(100% + 100px));
52
52
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
53
53
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"popup-sheet__component_nrxw0","closer":"popup-sheet__closer_nrxw0","content":"popup-sheet__content_nrxw0","appear":"popup-sheet__appear_nrxw0","enter":"popup-sheet__enter_nrxw0","appearActive":"popup-sheet__appearActive_nrxw0","enterActive":"popup-sheet__enterActive_nrxw0","exit":"popup-sheet__exit_nrxw0","exitBySwipe":"popup-sheet__exitBySwipe_nrxw0","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_nrxw0","exitActive":"popup-sheet__exitActive_nrxw0"};
3
+ const styles = {"component":"popup-sheet__component_9yzqf","closer":"popup-sheet__closer_9yzqf","content":"popup-sheet__content_9yzqf","appear":"popup-sheet__appear_9yzqf","enter":"popup-sheet__enter_9yzqf","appearActive":"popup-sheet__appearActive_9yzqf","enterActive":"popup-sheet__enterActive_9yzqf","exit":"popup-sheet__exit_9yzqf","exitBySwipe":"popup-sheet__exitBySwipe_9yzqf","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_9yzqf","exitActive":"popup-sheet__exitActive_9yzqf"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
@@ -2,7 +2,7 @@ import React, { type KeyboardEvent, type MouseEvent } from 'react';
2
2
  import { type BaseModalProps } from '@alfalab/core-components-base-modal/moderncssm';
3
3
  import { type CloserProps } from '@alfalab/core-components-navigation-bar-private/moderncssm/shared';
4
4
  import { type PaddingType } from '@alfalab/core-components-types/moderncssm';
5
- export declare type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
5
+ export type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
6
6
  /**
7
7
  * Наличие кнопки закрытия
8
8
  */
@@ -33,26 +33,26 @@ export declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalP
33
33
  /**
34
34
  * Наличие кнопки закрытия
35
35
  */
36
- hasCloser?: boolean | undefined;
36
+ hasCloser?: boolean;
37
37
  /**
38
38
  * Будет ли свайпаться шторка
39
39
  */
40
- swipeable?: boolean | undefined;
40
+ swipeable?: boolean;
41
41
  /**
42
42
  * Отступы
43
43
  */
44
- padding?: PaddingType | undefined;
44
+ padding?: PaddingType;
45
45
  /**
46
46
  * Обработчик закрытия
47
47
  */
48
- onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
48
+ onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick" | "swipe") => void;
49
49
  /**
50
50
  * Идентификатор для систем автоматизированного тестирования.
51
51
  * Для кнопки закрытия используется модификатор -closer
52
52
  */
53
- dataTestId?: string | undefined;
53
+ dataTestId?: string;
54
54
  /**
55
55
  * Дополнительные пропсы для компонента Closer.
56
56
  */
57
- closerProps?: Omit<CloserProps, "onClose" | "view"> | undefined;
57
+ closerProps?: Omit<CloserProps, "view" | "onClose">;
58
58
  } & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { type SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, type CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport { type PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n const componentRef = mergeRefs([sheetRef, swipeRef]);\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: componentRef,\n style: getSwipeStyles(),\n ...(swipeable ? swipeHandlers : {}),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { type FC } from 'react';
2
2
  import { type BackdropProps } from '@alfalab/core-components-backdrop/moderncssm';
3
- export declare type PopupBackdropProps = BackdropProps & {
3
+ export type PopupBackdropProps = BackdropProps & {
4
4
  /**
5
5
  * Прозрачность бэкдропа
6
6
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popup-sheet",
3
- "version": "3.0.4",
3
+ "version": "3.0.5",
4
4
  "description": "Popup sheet mobile component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,10 +10,10 @@
10
10
  "main": "index.js",
11
11
  "module": "./esm/index.js",
12
12
  "dependencies": {
13
- "@alfalab/core-components-backdrop": "^5.0.1",
14
- "@alfalab/core-components-base-modal": "^7.1.1",
15
- "@alfalab/core-components-navigation-bar-private": "^2.0.4",
16
- "@alfalab/core-components-shared": "^2.1.0",
13
+ "@alfalab/core-components-backdrop": "^5.0.2",
14
+ "@alfalab/core-components-base-modal": "^7.1.2",
15
+ "@alfalab/core-components-navigation-bar-private": "^2.0.5",
16
+ "@alfalab/core-components-shared": "^2.1.1",
17
17
  "@alfalab/core-components-types": "^2.0.1",
18
18
  "classnames": "^2.5.1",
19
19
  "react-merge-refs": "^1.1.0",
@@ -29,5 +29,5 @@
29
29
  "directory": "dist"
30
30
  },
31
31
  "themesVersion": "15.0.2",
32
- "varsVersion": "11.0.1"
32
+ "varsVersion": "11.0.2"
33
33
  }
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/no-typography-index.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
  @import '../../../../backdrop/src/vars.css';
3
3
 
4
4
  .appear,
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/no-typography-index.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
 
3
3
  .component.component {
4
4
  position: fixed;