@alfalab/core-components-bottom-sheet 6.18.13 → 6.19.0

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 (39) hide show
  1. package/component.js +14 -12
  2. package/components/footer/Component.js +1 -1
  3. package/components/footer/index.css +26 -26
  4. package/components/header/Component.d.ts +1 -0
  5. package/components/header/Component.js +5 -3
  6. package/components/header/index.css +17 -14
  7. package/cssm/component.js +13 -11
  8. package/cssm/components/header/Component.d.ts +1 -0
  9. package/cssm/components/header/Component.js +4 -2
  10. package/cssm/components/header/index.module.css +7 -2
  11. package/cssm/types.d.ts +3 -1
  12. package/esm/component.js +14 -12
  13. package/esm/components/footer/Component.js +1 -1
  14. package/esm/components/footer/index.css +26 -26
  15. package/esm/components/header/Component.d.ts +1 -0
  16. package/esm/components/header/Component.js +5 -3
  17. package/esm/components/header/index.css +17 -14
  18. package/esm/index.css +45 -45
  19. package/esm/types.d.ts +3 -1
  20. package/index.css +45 -45
  21. package/modern/component.js +9 -7
  22. package/modern/components/footer/Component.js +1 -1
  23. package/modern/components/footer/index.css +26 -26
  24. package/modern/components/header/Component.d.ts +1 -0
  25. package/modern/components/header/Component.js +5 -3
  26. package/modern/components/header/index.css +17 -14
  27. package/modern/index.css +45 -45
  28. package/modern/types.d.ts +3 -1
  29. package/moderncssm/component.js +8 -6
  30. package/moderncssm/components/header/Component.d.ts +1 -0
  31. package/moderncssm/components/header/Component.js +4 -2
  32. package/moderncssm/components/header/index.module.css +9 -2
  33. package/moderncssm/types.d.ts +3 -1
  34. package/package.json +6 -6
  35. package/src/component.tsx +16 -9
  36. package/src/components/header/Component.tsx +5 -1
  37. package/src/components/header/index.module.css +11 -2
  38. package/src/types.ts +7 -1
  39. package/types.d.ts +3 -1
package/modern/component.js CHANGED
@@ -12,12 +12,14 @@ import { horizontalDirections } from './consts/swipeConsts.js';
12
12
  import { useVisualViewportSize } from './hooks/use-visualviewport-size.js';
13
13
  import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
14
14
 
15
- const styles = {"modal":"bottom-sheet__modal_1x3or","wrapper":"bottom-sheet__wrapper_1x3or","fullscreen":"bottom-sheet__fullscreen_1x3or","component":"bottom-sheet__component_1x3or","withTransition":"bottom-sheet__withTransition_1x3or","scrollableContainer":"bottom-sheet__scrollableContainer_1x3or","marker":"bottom-sheet__marker_1x3or","defaultMarker":"bottom-sheet__defaultMarker_1x3or","content":"bottom-sheet__content_1x3or","noHeader":"bottom-sheet__noHeader_1x3or","noFooter":"bottom-sheet__noFooter_1x3or","scrollLocked":"bottom-sheet__scrollLocked_1x3or","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1x3or","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1x3or","appear":"bottom-sheet__appear_1x3or","enter":"bottom-sheet__enter_1x3or","appearActive":"bottom-sheet__appearActive_1x3or","enterActive":"bottom-sheet__enterActive_1x3or","enterDone":"bottom-sheet__enterDone_1x3or","appearDone":"bottom-sheet__appearDone_1x3or","exit":"bottom-sheet__exit_1x3or","exitActive":"bottom-sheet__exitActive_1x3or","safeAreaBottom":"bottom-sheet__safeAreaBottom_1x3or","background-accent":"bottom-sheet__background-accent_1x3or","background-info":"bottom-sheet__background-info_1x3or","background-attention-muted":"bottom-sheet__background-attention-muted_1x3or","background-positive-muted":"bottom-sheet__background-positive-muted_1x3or","background-negative-muted":"bottom-sheet__background-negative-muted_1x3or","background-primary":"bottom-sheet__background-primary_1x3or","background-primary-inverted":"bottom-sheet__background-primary-inverted_1x3or","background-secondary":"bottom-sheet__background-secondary_1x3or","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1x3or","background-tertiary":"bottom-sheet__background-tertiary_1x3or","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1x3or","background-quaternary":"bottom-sheet__background-quaternary_1x3or","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1x3or","background-specialbg-component":"bottom-sheet__background-specialbg-component_1x3or","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1x3or","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1x3or","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1x3or","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1x3or","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1x3or","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1x3or","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1x3or","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1x3or"};
15
+ const styles = {"modal":"bottom-sheet__modal_1oxul","wrapper":"bottom-sheet__wrapper_1oxul","fullscreen":"bottom-sheet__fullscreen_1oxul","component":"bottom-sheet__component_1oxul","withTransition":"bottom-sheet__withTransition_1oxul","scrollableContainer":"bottom-sheet__scrollableContainer_1oxul","marker":"bottom-sheet__marker_1oxul","defaultMarker":"bottom-sheet__defaultMarker_1oxul","content":"bottom-sheet__content_1oxul","noHeader":"bottom-sheet__noHeader_1oxul","noFooter":"bottom-sheet__noFooter_1oxul","scrollLocked":"bottom-sheet__scrollLocked_1oxul","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1oxul","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1oxul","appear":"bottom-sheet__appear_1oxul","enter":"bottom-sheet__enter_1oxul","appearActive":"bottom-sheet__appearActive_1oxul","enterActive":"bottom-sheet__enterActive_1oxul","enterDone":"bottom-sheet__enterDone_1oxul","appearDone":"bottom-sheet__appearDone_1oxul","exit":"bottom-sheet__exit_1oxul","exitActive":"bottom-sheet__exitActive_1oxul","safeAreaBottom":"bottom-sheet__safeAreaBottom_1oxul","background-accent":"bottom-sheet__background-accent_1oxul","background-info":"bottom-sheet__background-info_1oxul","background-attention-muted":"bottom-sheet__background-attention-muted_1oxul","background-positive-muted":"bottom-sheet__background-positive-muted_1oxul","background-negative-muted":"bottom-sheet__background-negative-muted_1oxul","background-primary":"bottom-sheet__background-primary_1oxul","background-primary-inverted":"bottom-sheet__background-primary-inverted_1oxul","background-secondary":"bottom-sheet__background-secondary_1oxul","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1oxul","background-tertiary":"bottom-sheet__background-tertiary_1oxul","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1oxul","background-quaternary":"bottom-sheet__background-quaternary_1oxul","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1oxul","background-specialbg-component":"bottom-sheet__background-specialbg-component_1oxul","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1oxul","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1oxul","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1oxul","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1oxul","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1oxul","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1oxul","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1oxul","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1oxul"};
16
16
  require('./index.css')
17
17
 
18
18
  const { isNil } = fnUtils;
19
19
  const adjustContainerHeightDefault = (value) => value;
20
- const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, adjustContainerHeight = adjustContainerHeightDefault, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
20
+ const BottomSheet = forwardRef(
21
+ // eslint-disable-next-line complexity
22
+ ({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, adjustContainerHeight = adjustContainerHeightDefault, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, showSwipeMarker = true, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
21
23
  const windowHeight = use100vh() ?? 0;
22
24
  const visualViewportSize = useVisualViewportSize();
23
25
  let fullHeight = virtualKeyboard ? visualViewportSize?.height ?? 0 : windowHeight;
@@ -369,10 +371,10 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
369
371
  : undefined,
370
372
  });
371
373
  const renderMarker = () => {
372
- if (swipeable) {
373
- if (swipeableMarker) {
374
- return (React.createElement("div", { className: cn(styles.marker, swipeableMarkerClassName) }, swipeableMarker));
375
- }
374
+ if (swipeableMarker) {
375
+ return (React.createElement("div", { className: cn(styles.marker, swipeableMarkerClassName) }, swipeableMarker));
376
+ }
377
+ if (showSwipeMarker) {
376
378
  return (React.createElement("div", { className: cn(styles.marker, styles.defaultMarker, swipeableMarkerClassName) }));
377
379
  }
378
380
  return null;
@@ -411,7 +413,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
411
413
  [styles.scrollLocked]: scrollLockedProp || swipingInProgress,
412
414
  [styles.hiddenScrollbar]: hideScrollbar,
413
415
  }), ref: mergeRefs([scrollableContainer, scrollableContainerRef]) },
414
- !hideHeader && !emptyHeader && React.createElement(Header, { ...headerProps }),
416
+ !hideHeader && !emptyHeader && (React.createElement(Header, { ...headerProps, showSwipeMarker: showSwipeMarker })),
415
417
  React.createElement("div", { ref: contentRef, className: cn(styles.content, contentClassName, {
416
418
  [styles.noHeader]: hideHeader || emptyHeader,
417
419
  [styles.noFooter]: !actionButton,
package/modern/components/footer/Component.js CHANGED
@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { BaseModalContext } from '@alfalab/core-components-base-modal/modern';
4
4
 
5
- const styles = {"footer":"bottom-sheet__footer_1bh9u","sticky":"bottom-sheet__sticky_1bh9u","highlighted":"bottom-sheet__highlighted_1bh9u","background-accent":"bottom-sheet__background-accent_1bh9u","background-info":"bottom-sheet__background-info_1bh9u","background-attention-muted":"bottom-sheet__background-attention-muted_1bh9u","background-positive-muted":"bottom-sheet__background-positive-muted_1bh9u","background-negative-muted":"bottom-sheet__background-negative-muted_1bh9u","background-primary":"bottom-sheet__background-primary_1bh9u","background-primary-inverted":"bottom-sheet__background-primary-inverted_1bh9u","background-secondary":"bottom-sheet__background-secondary_1bh9u","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1bh9u","background-tertiary":"bottom-sheet__background-tertiary_1bh9u","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1bh9u","background-quaternary":"bottom-sheet__background-quaternary_1bh9u","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1bh9u","background-specialbg-component":"bottom-sheet__background-specialbg-component_1bh9u","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1bh9u","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1bh9u","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1bh9u","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1bh9u","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1bh9u","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1bh9u","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1bh9u","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1bh9u"};
5
+ const styles = {"footer":"bottom-sheet__footer_1b0qj","sticky":"bottom-sheet__sticky_1b0qj","highlighted":"bottom-sheet__highlighted_1b0qj","background-accent":"bottom-sheet__background-accent_1b0qj","background-info":"bottom-sheet__background-info_1b0qj","background-attention-muted":"bottom-sheet__background-attention-muted_1b0qj","background-positive-muted":"bottom-sheet__background-positive-muted_1b0qj","background-negative-muted":"bottom-sheet__background-negative-muted_1b0qj","background-primary":"bottom-sheet__background-primary_1b0qj","background-primary-inverted":"bottom-sheet__background-primary-inverted_1b0qj","background-secondary":"bottom-sheet__background-secondary_1b0qj","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1b0qj","background-tertiary":"bottom-sheet__background-tertiary_1b0qj","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1b0qj","background-quaternary":"bottom-sheet__background-quaternary_1b0qj","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1b0qj","background-specialbg-component":"bottom-sheet__background-specialbg-component_1b0qj","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1b0qj","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1b0qj","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1b0qj","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1b0qj","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1b0qj","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1b0qj","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1b0qj","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1b0qj"};
6
6
  require('./index.css')
7
7
 
8
8
  const Footer = ({ children, className, sticky, dataTestId }) => {
package/modern/components/footer/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 19bh4 */
1
+ /* hash: 1ty8q */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff;
@@ -55,58 +55,58 @@
55
55
  /* footer */
56
56
  --bottom-sheet-footer-border-top: 1px solid var(--color-light-neutral-300);
57
57
  --bottom-sheet-footer-background-color: var(--color-light-modal-bg-primary);
58
- } .bottom-sheet__footer_1bh9u {
58
+ } .bottom-sheet__footer_1b0qj {
59
59
  padding: var(--gap-16) var(--gap-16);
60
60
  background-color: var(--color-light-modal-bg-primary);
61
- } .bottom-sheet__sticky_1bh9u {
61
+ } .bottom-sheet__sticky_1b0qj {
62
62
  position: sticky;
63
63
  bottom: var(--gap-0);
64
64
  z-index: 1;
65
- } .bottom-sheet__highlighted_1bh9u {
65
+ } .bottom-sheet__highlighted_1b0qj {
66
66
  border-top: var(--bottom-sheet-footer-border-top);
67
67
  background-color: var(--bottom-sheet-footer-background-color);
68
- } .bottom-sheet__background-accent_1bh9u {
68
+ } .bottom-sheet__background-accent_1b0qj {
69
69
  background-color: var(--color-light-bg-accent);
70
- } .bottom-sheet__background-info_1bh9u {
70
+ } .bottom-sheet__background-info_1b0qj {
71
71
  background-color: var(--color-light-bg-info);
72
- } .bottom-sheet__background-attention-muted_1bh9u {
72
+ } .bottom-sheet__background-attention-muted_1b0qj {
73
73
  background-color: var(--color-light-bg-attention-muted);
74
- } .bottom-sheet__background-positive-muted_1bh9u {
74
+ } .bottom-sheet__background-positive-muted_1b0qj {
75
75
  background-color: var(--color-light-bg-positive-muted);
76
- } .bottom-sheet__background-negative-muted_1bh9u {
76
+ } .bottom-sheet__background-negative-muted_1b0qj {
77
77
  background-color: var(--color-light-bg-negative-muted);
78
- } .bottom-sheet__background-primary_1bh9u {
78
+ } .bottom-sheet__background-primary_1b0qj {
79
79
  background-color: var(--color-light-bg-primary);
80
- } .bottom-sheet__background-primary-inverted_1bh9u {
80
+ } .bottom-sheet__background-primary-inverted_1b0qj {
81
81
  background-color: var(--color-light-bg-primary-inverted);
82
- } .bottom-sheet__background-secondary_1bh9u {
82
+ } .bottom-sheet__background-secondary_1b0qj {
83
83
  background-color: var(--color-light-bg-secondary);
84
- } .bottom-sheet__background-secondary-inverted_1bh9u {
84
+ } .bottom-sheet__background-secondary-inverted_1b0qj {
85
85
  background-color: var(--color-light-bg-secondary-inverted);
86
- } .bottom-sheet__background-tertiary_1bh9u {
86
+ } .bottom-sheet__background-tertiary_1b0qj {
87
87
  background-color: var(--color-light-bg-tertiary);
88
- } .bottom-sheet__background-tertiary-inverted_1bh9u {
88
+ } .bottom-sheet__background-tertiary-inverted_1b0qj {
89
89
  background-color: var(--color-light-bg-tertiary-inverted);
90
- } .bottom-sheet__background-quaternary_1bh9u {
90
+ } .bottom-sheet__background-quaternary_1b0qj {
91
91
  background-color: var(--color-light-bg-quaternary);
92
- } .bottom-sheet__background-quaternary-inverted_1bh9u {
92
+ } .bottom-sheet__background-quaternary-inverted_1b0qj {
93
93
  background-color: var(--color-light-bg-quaternary-inverted);
94
- } .bottom-sheet__background-specialbg-component_1bh9u {
94
+ } .bottom-sheet__background-specialbg-component_1b0qj {
95
95
  background-color: var(--color-light-specialbg-component);
96
- } .bottom-sheet__background-specialbg-component-inverted_1bh9u {
96
+ } .bottom-sheet__background-specialbg-component-inverted_1b0qj {
97
97
  background-color: var(--color-light-specialbg-component-inverted);
98
- } .bottom-sheet__background-specialbg-primary-grouped_1bh9u {
98
+ } .bottom-sheet__background-specialbg-primary-grouped_1b0qj {
99
99
  background-color: var(--color-light-specialbg-primary-grouped);
100
- } .bottom-sheet__background-specialbg-secondary-grouped_1bh9u {
100
+ } .bottom-sheet__background-specialbg-secondary-grouped_1b0qj {
101
101
  background-color: var(--color-light-specialbg-secondary-grouped);
102
- } .bottom-sheet__background-specialbg-tertiary-grouped_1bh9u {
102
+ } .bottom-sheet__background-specialbg-tertiary-grouped_1b0qj {
103
103
  background-color: var(--color-light-specialbg-tertiary-grouped);
104
- } .bottom-sheet__background-specialbg-secondary-transparent_1bh9u {
104
+ } .bottom-sheet__background-specialbg-secondary-transparent_1b0qj {
105
105
  background-color: var(--color-light-specialbg-secondary-transparent);
106
- } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1bh9u {
106
+ } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1b0qj {
107
107
  background-color: var(--color-light-specialbg-secondary-transparent-inverted);
108
- } .bottom-sheet__background-specialbg-tertiary-transparent_1bh9u {
108
+ } .bottom-sheet__background-specialbg-tertiary-transparent_1b0qj {
109
109
  background-color: var(--color-light-specialbg-tertiary-transparent);
110
- } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1bh9u {
110
+ } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1b0qj {
111
111
  background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
112
112
  }
package/modern/components/header/Component.d.ts CHANGED
@@ -3,6 +3,7 @@ import { NavigationBarPrivateProps } from "@alfalab/core-components-navigation-b
3
3
  type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {
4
4
  headerRef: RefObject<HTMLDivElement>;
5
5
  headerOffset: number;
6
+ showSwipeMarker?: boolean;
6
7
  };
7
8
  declare const Header: FC<HeaderProps>;
8
9
  export { HeaderProps, Header };
package/modern/components/header/Component.js CHANGED
@@ -3,10 +3,10 @@ import cn from 'classnames';
3
3
  import { BaseModalContext } from '@alfalab/core-components-base-modal/modern';
4
4
  import { NavigationBarPrivate } from '@alfalab/core-components-navigation-bar-private/modern';
5
5
 
6
- const styles = {"headerWrapper":"bottom-sheet__headerWrapper_bf3ph","hasContent":"bottom-sheet__hasContent_bf3ph","header":"bottom-sheet__header_bf3ph","sticky":"bottom-sheet__sticky_bf3ph","highlighted":"bottom-sheet__highlighted_bf3ph","justifyEnd":"bottom-sheet__justifyEnd_bf3ph","addon":"bottom-sheet__addon_bf3ph","addonFixed":"bottom-sheet__addonFixed_bf3ph","title":"bottom-sheet__title_bf3ph","titleCenter":"bottom-sheet__titleCenter_bf3ph","titleLeft":"bottom-sheet__titleLeft_bf3ph","trimTitle":"bottom-sheet__trimTitle_bf3ph"};
6
+ const styles = {"headerBase":"bottom-sheet__headerBase_1e71u","headerWrapper":"bottom-sheet__headerWrapper_1e71u bottom-sheet__headerBase_1e71u","headerWrapperWithoutSwipeMarker":"bottom-sheet__headerWrapperWithoutSwipeMarker_1e71u bottom-sheet__headerBase_1e71u","hasContent":"bottom-sheet__hasContent_1e71u","header":"bottom-sheet__header_1e71u","sticky":"bottom-sheet__sticky_1e71u","highlighted":"bottom-sheet__highlighted_1e71u","justifyEnd":"bottom-sheet__justifyEnd_1e71u","addon":"bottom-sheet__addon_1e71u","addonFixed":"bottom-sheet__addonFixed_1e71u","title":"bottom-sheet__title_1e71u","titleCenter":"bottom-sheet__titleCenter_1e71u","titleLeft":"bottom-sheet__titleLeft_1e71u","trimTitle":"bottom-sheet__trimTitle_1e71u"};
7
7
  require('./index.css')
8
8
 
9
- const Header = ({ className, sticky, headerRef, headerOffset, title, children, ...restProps }) => {
9
+ const Header = ({ className, sticky, headerRef, headerOffset, showSwipeMarker, title, children, ...restProps }) => {
10
10
  const { setHeaderOffset, setHasHeader, headerHighlighted, onClose } = useContext(BaseModalContext);
11
11
  useEffect(() => {
12
12
  setHeaderOffset(headerOffset);
@@ -15,7 +15,9 @@ const Header = ({ className, sticky, headerRef, headerOffset, title, children, .
15
15
  setHasHeader(true);
16
16
  }, [setHasHeader]);
17
17
  const hasContent = Boolean(title || children);
18
- return (React.createElement(NavigationBarPrivate, { ...restProps, ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles.headerWrapper, className, {
18
+ return (React.createElement(NavigationBarPrivate, { ...restProps, ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(className, {
19
+ [styles.headerWrapper]: showSwipeMarker,
20
+ [styles.headerWrapperWithoutSwipeMarker]: !showSwipeMarker,
19
21
  [styles.highlighted]: hasContent && headerHighlighted && sticky,
20
22
  [styles.sticky]: sticky,
21
23
  [styles.hasContent]: hasContent,
package/modern/components/header/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: srork */
1
+ /* hash: x1gg4 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,42 +41,45 @@
41
41
  --bottom-sheet-title-font-family: var(--font-family-system);
42
42
 
43
43
  /* footer */
44
- } .bottom-sheet__headerWrapper_bf3ph {
45
- padding: var(--gap-12) var(--gap-8) var(--gap-4);
44
+ } .bottom-sheet__headerBase_1e71u {
46
45
  border-top-left-radius: inherit;
47
46
  border-top-right-radius: inherit;
48
47
  z-index: 1;
49
- } .bottom-sheet__hasContent_bf3ph {
48
+ } .bottom-sheet__headerWrapper_1e71u {
49
+ padding: var(--gap-12) var(--gap-8) var(--gap-4);
50
+ } .bottom-sheet__headerWrapperWithoutSwipeMarker_1e71u {
51
+ padding: var(--gap-8) var(--gap-8) var(--gap-4);
52
+ } .bottom-sheet__hasContent_1e71u {
50
53
  background-color: inherit;
51
- } .bottom-sheet__header_bf3ph {
54
+ } .bottom-sheet__header_1e71u {
52
55
  display: flex;
53
- } .bottom-sheet__sticky_bf3ph {
56
+ } .bottom-sheet__sticky_1e71u {
54
57
  position: sticky;
55
58
  top: var(--gap-0);
56
- } .bottom-sheet__highlighted_bf3ph {
59
+ } .bottom-sheet__highlighted_1e71u {
57
60
  border-bottom: var(--bottom-sheet-header-border-bottom);
58
- } .bottom-sheet__justifyEnd_bf3ph {
61
+ } .bottom-sheet__justifyEnd_1e71u {
59
62
  justify-content: flex-end;
60
- } .bottom-sheet__addon_bf3ph {
63
+ } .bottom-sheet__addon_1e71u {
61
64
  display: flex;
62
65
  justify-content: center;
63
66
  align-items: center;
64
67
  min-width: 48px;
65
68
  height: 48px;
66
- } .bottom-sheet__addonFixed_bf3ph {
69
+ } .bottom-sheet__addonFixed_1e71u {
67
70
  position: fixed;
68
- } .bottom-sheet__title_bf3ph {
71
+ } .bottom-sheet__title_1e71u {
69
72
  padding: 10px var(--gap-8);
70
73
  width: 100%;
71
74
  font-size: var(--bottom-sheet-title-font-size);
72
75
  font-weight: var(--bottom-sheet-title-font-weight);
73
76
  line-height: var(--bottom-sheet-title-line-height);
74
77
  font-family: var(--bottom-sheet-title-font-family);
75
- } .bottom-sheet__titleCenter_bf3ph {
78
+ } .bottom-sheet__titleCenter_1e71u {
76
79
  text-align: center;
77
- } .bottom-sheet__titleLeft_bf3ph {
80
+ } .bottom-sheet__titleLeft_1e71u {
78
81
  text-align: left;
79
- } .bottom-sheet__trimTitle_bf3ph {
82
+ } .bottom-sheet__trimTitle_1e71u {
80
83
  white-space: nowrap;
81
84
  overflow: hidden;
82
85
  text-overflow: ellipsis;
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 7dt2s */
1
+ /* hash: 1hmdb */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff;
@@ -66,25 +66,25 @@
66
66
  /* header */
67
67
 
68
68
  /* footer */
69
- } .bottom-sheet__modal_1x3or {
69
+ } .bottom-sheet__modal_1oxul {
70
70
  bottom: var(--gap-0);
71
71
  width: 100%;
72
72
  max-width: 600px;
73
73
  pointer-events: none;
74
74
  touch-action: none;
75
- } .bottom-sheet__modal_1x3or.bottom-sheet__modal_1x3or {
75
+ } .bottom-sheet__modal_1oxul.bottom-sheet__modal_1oxul {
76
76
  background-color: transparent;
77
77
  position: fixed;
78
- } .bottom-sheet__wrapper_1x3or {
78
+ } .bottom-sheet__wrapper_1oxul {
79
79
  transform: translateY(100%);
80
80
  pointer-events: none;
81
81
  touch-action: none;
82
82
  border-top-right-radius: var(--bottom-sheet-top-radius);
83
83
  border-top-left-radius: var(--bottom-sheet-top-radius);
84
84
  transition: border-radius 0.3s ease;
85
- } .bottom-sheet__fullscreen_1x3or {
85
+ } .bottom-sheet__fullscreen_1oxul {
86
86
  border-radius: 0;
87
- } .bottom-sheet__component_1x3or {
87
+ } .bottom-sheet__component_1oxul {
88
88
  position: relative;
89
89
  display: flex;
90
90
  flex-direction: column;
@@ -92,9 +92,9 @@
92
92
  background-color: var(--color-light-modal-bg-primary);
93
93
  pointer-events: all;
94
94
  box-shadow: var(--bottom-sheet-shadow);
95
- } .bottom-sheet__withTransition_1x3or {
95
+ } .bottom-sheet__withTransition_1oxul {
96
96
  transition: var(--bottom-sheet-out-transition);
97
- } .bottom-sheet__scrollableContainer_1x3or {
97
+ } .bottom-sheet__scrollableContainer_1oxul {
98
98
  overflow: auto;
99
99
  display: flex;
100
100
  flex-direction: column;
@@ -103,7 +103,7 @@
103
103
  background-color: inherit;
104
104
  border-radius: inherit;
105
105
  overscroll-behavior: contain;
106
- } .bottom-sheet__marker_1x3or {
106
+ } .bottom-sheet__marker_1oxul {
107
107
  position: fixed;
108
108
  top: var(--gap-4);
109
109
  right: var(--gap-0);
@@ -111,11 +111,11 @@
111
111
  z-index: 1000;
112
112
  width: 36px;
113
113
  margin: var(--gap-0) auto;
114
- } .bottom-sheet__defaultMarker_1x3or {
114
+ } .bottom-sheet__defaultMarker_1oxul {
115
115
  height: 4px;
116
116
  border-radius: var(--border-radius-20);
117
117
  background-color: var(--color-light-neutral-translucent-300);
118
- } .bottom-sheet__content_1x3or {
118
+ } .bottom-sheet__content_1oxul {
119
119
  position: relative;
120
120
  z-index: 0;
121
121
  display: flex;
@@ -125,75 +125,75 @@
125
125
  color: var(--color-light-text-primary);
126
126
  background-color: inherit;
127
127
  border-radius: inherit;
128
- } .bottom-sheet__noHeader_1x3or {
128
+ } .bottom-sheet__noHeader_1oxul {
129
129
  padding-top: var(--gap-16);
130
- } .bottom-sheet__noFooter_1x3or {
130
+ } .bottom-sheet__noFooter_1oxul {
131
131
  padding-bottom: var(--gap-16);
132
- } .bottom-sheet__scrollLocked_1x3or {
132
+ } .bottom-sheet__scrollLocked_1oxul {
133
133
  overflow: hidden;
134
- } .bottom-sheet__hiddenScrollbar_1x3or {
134
+ } .bottom-sheet__hiddenScrollbar_1oxul {
135
135
  scrollbar-width: none
136
- } .bottom-sheet__hiddenScrollbar_1x3or::-webkit-scrollbar {
136
+ } .bottom-sheet__hiddenScrollbar_1oxul::-webkit-scrollbar {
137
137
  width: 0;
138
138
  height: 0;
139
- } .bottom-sheet__disabledPointerEvents_1x3or {
139
+ } .bottom-sheet__disabledPointerEvents_1oxul {
140
140
  pointer-events: none;
141
- } .bottom-sheet__appear_1x3or .bottom-sheet__wrapper_1x3or, .bottom-sheet__enter_1x3or .bottom-sheet__wrapper_1x3or {
141
+ } .bottom-sheet__appear_1oxul .bottom-sheet__wrapper_1oxul, .bottom-sheet__enter_1oxul .bottom-sheet__wrapper_1oxul {
142
142
  transition: none;
143
- } .bottom-sheet__appearActive_1x3or .bottom-sheet__wrapper_1x3or, .bottom-sheet__enterActive_1x3or .bottom-sheet__wrapper_1x3or {
143
+ } .bottom-sheet__appearActive_1oxul .bottom-sheet__wrapper_1oxul, .bottom-sheet__enterActive_1oxul .bottom-sheet__wrapper_1oxul {
144
144
  transition: var(--bottom-sheet-in-transition);
145
145
  transform: translateY(0);
146
- } .bottom-sheet__enterDone_1x3or .bottom-sheet__wrapper_1x3or, .bottom-sheet__appearDone_1x3or .bottom-sheet__wrapper_1x3or {
146
+ } .bottom-sheet__enterDone_1oxul .bottom-sheet__wrapper_1oxul, .bottom-sheet__appearDone_1oxul .bottom-sheet__wrapper_1oxul {
147
147
  transform: translateY(0);
148
- } .bottom-sheet__exit_1x3or .bottom-sheet__wrapper_1x3or {
148
+ } .bottom-sheet__exit_1oxul .bottom-sheet__wrapper_1oxul {
149
149
  transform: translateY(0);
150
- } .bottom-sheet__exitActive_1x3or .bottom-sheet__wrapper_1x3or {
150
+ } .bottom-sheet__exitActive_1oxul .bottom-sheet__wrapper_1oxul {
151
151
  transition: var(--bottom-sheet-out-transition);
152
152
  transform: translateY(100%);
153
- } .bottom-sheet__safeAreaBottom_1x3or {
153
+ } .bottom-sheet__safeAreaBottom_1oxul {
154
154
  padding-bottom: var(--sab);
155
- } .bottom-sheet__background-accent_1x3or {
155
+ } .bottom-sheet__background-accent_1oxul {
156
156
  background-color: var(--color-light-bg-accent);
157
- } .bottom-sheet__background-info_1x3or {
157
+ } .bottom-sheet__background-info_1oxul {
158
158
  background-color: var(--color-light-bg-info);
159
- } .bottom-sheet__background-attention-muted_1x3or {
159
+ } .bottom-sheet__background-attention-muted_1oxul {
160
160
  background-color: var(--color-light-bg-attention-muted);
161
- } .bottom-sheet__background-positive-muted_1x3or {
161
+ } .bottom-sheet__background-positive-muted_1oxul {
162
162
  background-color: var(--color-light-bg-positive-muted);
163
- } .bottom-sheet__background-negative-muted_1x3or {
163
+ } .bottom-sheet__background-negative-muted_1oxul {
164
164
  background-color: var(--color-light-bg-negative-muted);
165
- } .bottom-sheet__background-primary_1x3or {
165
+ } .bottom-sheet__background-primary_1oxul {
166
166
  background-color: var(--color-light-bg-primary);
167
- } .bottom-sheet__background-primary-inverted_1x3or {
167
+ } .bottom-sheet__background-primary-inverted_1oxul {
168
168
  background-color: var(--color-light-bg-primary-inverted);
169
- } .bottom-sheet__background-secondary_1x3or {
169
+ } .bottom-sheet__background-secondary_1oxul {
170
170
  background-color: var(--color-light-bg-secondary);
171
- } .bottom-sheet__background-secondary-inverted_1x3or {
171
+ } .bottom-sheet__background-secondary-inverted_1oxul {
172
172
  background-color: var(--color-light-bg-secondary-inverted);
173
- } .bottom-sheet__background-tertiary_1x3or {
173
+ } .bottom-sheet__background-tertiary_1oxul {
174
174
  background-color: var(--color-light-bg-tertiary);
175
- } .bottom-sheet__background-tertiary-inverted_1x3or {
175
+ } .bottom-sheet__background-tertiary-inverted_1oxul {
176
176
  background-color: var(--color-light-bg-tertiary-inverted);
177
- } .bottom-sheet__background-quaternary_1x3or {
177
+ } .bottom-sheet__background-quaternary_1oxul {
178
178
  background-color: var(--color-light-bg-quaternary);
179
- } .bottom-sheet__background-quaternary-inverted_1x3or {
179
+ } .bottom-sheet__background-quaternary-inverted_1oxul {
180
180
  background-color: var(--color-light-bg-quaternary-inverted);
181
- } .bottom-sheet__background-specialbg-component_1x3or {
181
+ } .bottom-sheet__background-specialbg-component_1oxul {
182
182
  background-color: var(--color-light-specialbg-component);
183
- } .bottom-sheet__background-specialbg-component-inverted_1x3or {
183
+ } .bottom-sheet__background-specialbg-component-inverted_1oxul {
184
184
  background-color: var(--color-light-specialbg-component-inverted);
185
- } .bottom-sheet__background-specialbg-primary-grouped_1x3or {
185
+ } .bottom-sheet__background-specialbg-primary-grouped_1oxul {
186
186
  background-color: var(--color-light-specialbg-primary-grouped);
187
- } .bottom-sheet__background-specialbg-secondary-grouped_1x3or {
187
+ } .bottom-sheet__background-specialbg-secondary-grouped_1oxul {
188
188
  background-color: var(--color-light-specialbg-secondary-grouped);
189
- } .bottom-sheet__background-specialbg-tertiary-grouped_1x3or {
189
+ } .bottom-sheet__background-specialbg-tertiary-grouped_1oxul {
190
190
  background-color: var(--color-light-specialbg-tertiary-grouped);
191
- } .bottom-sheet__background-specialbg-secondary-transparent_1x3or {
191
+ } .bottom-sheet__background-specialbg-secondary-transparent_1oxul {
192
192
  background-color: var(--color-light-specialbg-secondary-transparent);
193
- } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1x3or {
193
+ } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1oxul {
194
194
  background-color: var(--color-light-specialbg-secondary-transparent-inverted);
195
- } .bottom-sheet__background-specialbg-tertiary-transparent_1x3or {
195
+ } .bottom-sheet__background-specialbg-tertiary-transparent_1oxul {
196
196
  background-color: var(--color-light-specialbg-tertiary-transparent);
197
- } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1x3or {
197
+ } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1oxul {
198
198
  background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
199
199
  }
package/modern/types.d.ts CHANGED
@@ -94,8 +94,10 @@ type BottomSheetProps = {
94
94
  */
95
95
  modalWrapperClassName?: string;
96
96
  /**
97
- * Дополнительный класс для маркера
97
+ * Дефолтный маркер
98
+ * @default true
98
99
  */
100
+ showSwipeMarker?: boolean;
99
101
  swipeableMarkerClassName?: string;
100
102
  /**
101
103
  * Кастомный маркер
package/moderncssm/component.js CHANGED
@@ -15,7 +15,9 @@ import styles from './index.module.css';
15
15
 
16
16
  const { isNil } = fnUtils;
17
17
  const adjustContainerHeightDefault = (value) => value;
18
- const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, adjustContainerHeight = adjustContainerHeightDefault, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
18
+ const BottomSheet = forwardRef(
19
+ // eslint-disable-next-line complexity
20
+ ({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, adjustContainerHeight = adjustContainerHeightDefault, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, showSwipeMarker = true, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
19
21
  const windowHeight = use100vh() ?? 0;
20
22
  const visualViewportSize = useVisualViewportSize();
21
23
  let fullHeight = virtualKeyboard ? visualViewportSize?.height ?? 0 : windowHeight;
@@ -367,10 +369,10 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
367
369
  : undefined,
368
370
  });
369
371
  const renderMarker = () => {
370
- if (swipeable) {
371
- if (swipeableMarker) {
372
- return (React.createElement("div", { className: cn(styles.marker, swipeableMarkerClassName) }, swipeableMarker));
373
- }
372
+ if (swipeableMarker) {
373
+ return (React.createElement("div", { className: cn(styles.marker, swipeableMarkerClassName) }, swipeableMarker));
374
+ }
375
+ if (showSwipeMarker) {
374
376
  return (React.createElement("div", { className: cn(styles.marker, styles.defaultMarker, swipeableMarkerClassName) }));
375
377
  }
376
378
  return null;
@@ -409,7 +411,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
409
411
  [styles.scrollLocked]: scrollLockedProp || swipingInProgress,
410
412
  [styles.hiddenScrollbar]: hideScrollbar,
411
413
  }), ref: mergeRefs([scrollableContainer, scrollableContainerRef]) },
412
- !hideHeader && !emptyHeader && React.createElement(Header, { ...headerProps }),
414
+ !hideHeader && !emptyHeader && (React.createElement(Header, { ...headerProps, showSwipeMarker: showSwipeMarker })),
413
415
  React.createElement("div", { ref: contentRef, className: cn(styles.content, contentClassName, {
414
416
  [styles.noHeader]: hideHeader || emptyHeader,
415
417
  [styles.noFooter]: !actionButton,
package/moderncssm/components/header/Component.d.ts CHANGED
@@ -3,6 +3,7 @@ import { NavigationBarPrivateProps } from "@alfalab/core-components-navigation-b
3
3
  type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {
4
4
  headerRef: RefObject<HTMLDivElement>;
5
5
  headerOffset: number;
6
+ showSwipeMarker?: boolean;
6
7
  };
7
8
  declare const Header: FC<HeaderProps>;
8
9
  export { HeaderProps, Header };
package/moderncssm/components/header/Component.js CHANGED
@@ -4,7 +4,7 @@ import { BaseModalContext } from '@alfalab/core-components-base-modal/moderncssm
4
4
  import { NavigationBarPrivate } from '@alfalab/core-components-navigation-bar-private/moderncssm';
5
5
  import styles from './index.module.css';
6
6
 
7
- const Header = ({ className, sticky, headerRef, headerOffset, title, children, ...restProps }) => {
7
+ const Header = ({ className, sticky, headerRef, headerOffset, showSwipeMarker, title, children, ...restProps }) => {
8
8
  const { setHeaderOffset, setHasHeader, headerHighlighted, onClose } = useContext(BaseModalContext);
9
9
  useEffect(() => {
10
10
  setHeaderOffset(headerOffset);
@@ -13,7 +13,9 @@ const Header = ({ className, sticky, headerRef, headerOffset, title, children, .
13
13
  setHasHeader(true);
14
14
  }, [setHasHeader]);
15
15
  const hasContent = Boolean(title || children);
16
- return (React.createElement(NavigationBarPrivate, { ...restProps, ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles.headerWrapper, className, {
16
+ return (React.createElement(NavigationBarPrivate, { ...restProps, ref: headerRef, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(className, {
17
+ [styles.headerWrapper]: showSwipeMarker,
18
+ [styles.headerWrapperWithoutSwipeMarker]: !showSwipeMarker,
17
19
  [styles.highlighted]: hasContent && headerHighlighted && sticky,
18
20
  [styles.sticky]: sticky,
19
21
  [styles.hasContent]: hasContent,
package/moderncssm/components/header/index.module.css CHANGED
@@ -10,12 +10,19 @@
10
10
 
11
11
  /* footer */
12
12
  }
13
- .headerWrapper {
14
- padding: var(--gap-12) var(--gap-8) var(--gap-4);
13
+ .headerBase {
15
14
  border-top-left-radius: inherit;
16
15
  border-top-right-radius: inherit;
17
16
  z-index: 1;
18
17
  }
18
+ .headerWrapper {
19
+ composes: headerBase;
20
+ padding: var(--gap-12) var(--gap-8) var(--gap-4);
21
+ }
22
+ .headerWrapperWithoutSwipeMarker {
23
+ composes: headerBase;
24
+ padding: var(--gap-8) var(--gap-8) var(--gap-4);
25
+ }
19
26
  .hasContent {
20
27
  background-color: inherit;
21
28
  }
package/moderncssm/types.d.ts CHANGED
@@ -94,8 +94,10 @@ type BottomSheetProps = {
94
94
  */
95
95
  modalWrapperClassName?: string;
96
96
  /**
97
- * Дополнительный класс для маркера
97
+ * Дефолтный маркер
98
+ * @default true
98
99
  */
100
+ showSwipeMarker?: boolean;
99
101
  swipeableMarkerClassName?: string;
100
102
  /**
101
103
  * Кастомный маркер