@alfalab/core-components-navigation-bar-private 1.0.1 → 1.0.2

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 (81) hide show
  1. package/Component.d.ts +1 -1
  2. package/Component.js.map +1 -1
  3. package/components/back-arrow-addon/index.css +14 -14
  4. package/components/back-arrow-addon/index.module.css.js +1 -1
  5. package/components/back-arrow-addon/index.module.css.js.map +1 -1
  6. package/components/closer/Component.d.ts +2 -2
  7. package/components/closer/Component.js.map +1 -1
  8. package/components/closer/default.css +3 -3
  9. package/components/closer/default.module.css.js +1 -1
  10. package/components/closer/index.css +4 -4
  11. package/components/closer/index.module.css.js +1 -1
  12. package/components/closer/index.module.css.js.map +1 -1
  13. package/components/closer/inverted.css +3 -3
  14. package/components/closer/inverted.module.css.js +1 -1
  15. package/cssm/Component.d.ts +1 -1
  16. package/cssm/Component.js.map +1 -1
  17. package/cssm/components/back-arrow-addon/index.module.css +3 -3
  18. package/cssm/components/closer/Component.d.ts +2 -2
  19. package/cssm/components/closer/Component.js.map +1 -1
  20. package/cssm/components/closer/default.module.css +1 -1
  21. package/cssm/components/closer/inverted.module.css +1 -1
  22. package/cssm/index.module.css +7 -5
  23. package/cssm/types.d.ts +7 -7
  24. package/esm/Component.d.ts +1 -1
  25. package/esm/Component.js.map +1 -1
  26. package/esm/components/back-arrow-addon/index.css +14 -14
  27. package/esm/components/back-arrow-addon/index.module.css.js +1 -1
  28. package/esm/components/back-arrow-addon/index.module.css.js.map +1 -1
  29. package/esm/components/closer/Component.d.ts +2 -2
  30. package/esm/components/closer/Component.js.map +1 -1
  31. package/esm/components/closer/default.css +3 -3
  32. package/esm/components/closer/default.module.css.js +1 -1
  33. package/esm/components/closer/index.css +4 -4
  34. package/esm/components/closer/index.module.css.js +1 -1
  35. package/esm/components/closer/index.module.css.js.map +1 -1
  36. package/esm/components/closer/inverted.css +3 -3
  37. package/esm/components/closer/inverted.module.css.js +1 -1
  38. package/esm/index.css +32 -30
  39. package/esm/index.module.css.js +1 -1
  40. package/esm/index.module.css.js.map +1 -1
  41. package/esm/types.d.ts +7 -7
  42. package/index.css +32 -30
  43. package/index.module.css.js +1 -1
  44. package/index.module.css.js.map +1 -1
  45. package/modern/Component.d.ts +1 -1
  46. package/modern/Component.js.map +1 -1
  47. package/modern/components/back-arrow-addon/index.css +14 -14
  48. package/modern/components/back-arrow-addon/index.module.css.js +1 -1
  49. package/modern/components/back-arrow-addon/index.module.css.js.map +1 -1
  50. package/modern/components/closer/Component.d.ts +2 -2
  51. package/modern/components/closer/Component.js.map +1 -1
  52. package/modern/components/closer/default.css +3 -3
  53. package/modern/components/closer/default.module.css.js +1 -1
  54. package/modern/components/closer/index.css +4 -4
  55. package/modern/components/closer/index.module.css.js +1 -1
  56. package/modern/components/closer/index.module.css.js.map +1 -1
  57. package/modern/components/closer/inverted.css +3 -3
  58. package/modern/components/closer/inverted.module.css.js +1 -1
  59. package/modern/index.css +32 -30
  60. package/modern/index.module.css.js +1 -1
  61. package/modern/index.module.css.js.map +1 -1
  62. package/modern/types.d.ts +7 -7
  63. package/moderncssm/Component.d.ts +1 -1
  64. package/moderncssm/Component.js.map +1 -1
  65. package/moderncssm/components/back-arrow-addon/index.module.css +3 -3
  66. package/moderncssm/components/closer/Component.d.ts +2 -2
  67. package/moderncssm/components/closer/Component.js.map +1 -1
  68. package/moderncssm/components/closer/default.module.css +1 -1
  69. package/moderncssm/components/closer/index.module.css +2 -0
  70. package/moderncssm/components/closer/inverted.module.css +1 -1
  71. package/moderncssm/index.module.css +9 -5
  72. package/moderncssm/types.d.ts +7 -7
  73. package/package.json +3 -3
  74. package/src/Component.tsx +1 -1
  75. package/src/components/back-arrow-addon/index.module.css +1 -1
  76. package/src/components/closer/Component.tsx +2 -2
  77. package/src/components/closer/index.module.css +1 -1
  78. package/src/index.module.css +4 -2
  79. package/src/types.ts +7 -7
  80. package/src/vars.css +1 -1
  81. package/types.d.ts +7 -7
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.header {\n width: 100%;\n box-sizing: border-box;\n transition: box-shadow 0.2s ease, background 0.2s ease;\n\n &.header.backgroundImage {\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n }\n}\n\n.mainLine {\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n z-index: 1;\n background-color: inherit;\n}\n\n.mainLineSticky {\n position: sticky;\n top: var(--gap-0);\n}\n\n.mainLineWithImageBg {\n background-color: initial;\n}\n\n.content {\n color: var(--color-light-text-primary);\n display: flex;\n flex-flow: column nowrap;\n justify-content: center;\n flex-grow: 1;\n align-self: baseline;\n box-sizing: border-box;\n min-height: 48px;\n\n &.withBothAddons,\n &.withCompactTitle {\n @mixin action_component;\n align-self: center;\n padding-top: var(--gap-4);\n padding-bottom: var(--gap-4);\n\n & > .children,\n & > .title {\n -webkit-line-clamp: 1;\n word-break: break-all;\n }\n }\n\n &.contentOnBotDesktop.contentOnBotDesktop {\n padding-top: var(--gap-12);\n }\n\n &.contentOnBotMobile.contentOnBotMobile {\n padding-top: var(--gap-12);\n }\n}\n\n.title {\n word-break: break-word;\n}\n\n.subtitle {\n @mixin paragraph_primary_small;\n @mixin row_limit 1;\n\n color: var(--color-light-text-secondary);\n word-break: break-all;\n}\n\n.addonsWrapper {\n display: flex;\n}\n\n.rightAddons {\n margin-left: auto;\n}\n\n.addon {\n min-width: 48px;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n pointer-events: all;\n}\n\n.bottomAddons {\n pointer-events: all;\n}\n\n.closer {\n margin-left: auto;\n}\n\n.left {\n text-align: left;\n}\n\n.center {\n text-align: center;\n}\n\n.trim {\n overflow: hidden;\n\n & .title,\n & .children {\n @mixin row_limit 2;\n }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,UAAU,CAAC,wCAAwC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,SAAS,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,kBAAkB,CAAC,gDAAgD,CAAC,UAAU,CAAC,wCAAwC,CAAC,OAAO,CAAC,qCAAqC,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,oBAAoB,CAAC,kDAAkD,CAAC,UAAU,CAAC,wCAAwC,CAAC,eAAe,CAAC,6CAA6C,CAAC,aAAa,CAAC,2CAA2C,CAAC,OAAO,CAAC,qCAAqC,CAAC,cAAc,CAAC,4CAA4C,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC;;;;"}
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.header {\n width: 100%;\n box-sizing: border-box;\n transition:\n box-shadow 0.2s ease,\n background 0.2s ease;\n\n &.header.backgroundImage {\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n }\n}\n\n.mainLine {\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n z-index: 1;\n background-color: inherit;\n}\n\n.mainLineSticky {\n position: sticky;\n top: var(--gap-0);\n}\n\n.mainLineWithImageBg {\n background-color: initial;\n}\n\n.content {\n color: var(--color-light-text-primary);\n display: flex;\n flex-flow: column nowrap;\n justify-content: center;\n flex-grow: 1;\n align-self: baseline;\n box-sizing: border-box;\n min-height: 48px;\n\n &.withBothAddons,\n &.withCompactTitle {\n @mixin action_component;\n align-self: center;\n padding-top: var(--gap-4);\n padding-bottom: var(--gap-4);\n\n & > .children,\n & > .title {\n -webkit-line-clamp: 1;\n word-break: break-all;\n }\n }\n\n &.contentOnBotDesktop.contentOnBotDesktop {\n padding-top: var(--gap-12);\n }\n\n &.contentOnBotMobile.contentOnBotMobile {\n padding-top: var(--gap-12);\n }\n}\n\n.title {\n word-break: break-word;\n}\n\n.subtitle {\n @mixin paragraph_primary_small;\n @mixin row_limit 1;\n\n color: var(--color-light-text-secondary);\n word-break: break-all;\n}\n\n.addonsWrapper {\n display: flex;\n}\n\n.rightAddons {\n margin-left: auto;\n}\n\n.addon {\n min-width: 48px;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n pointer-events: all;\n}\n\n.bottomAddons {\n pointer-events: all;\n}\n\n.closer {\n margin-left: auto;\n}\n\n.left {\n text-align: left;\n}\n\n.center {\n text-align: center;\n}\n\n.trim {\n overflow: hidden;\n\n & .title,\n & .children {\n @mixin row_limit 2;\n }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,UAAU,CAAC,wCAAwC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,SAAS,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,kBAAkB,CAAC,gDAAgD,CAAC,UAAU,CAAC,wCAAwC,CAAC,OAAO,CAAC,qCAAqC,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,oBAAoB,CAAC,kDAAkD,CAAC,UAAU,CAAC,wCAAwC,CAAC,eAAe,CAAC,6CAA6C,CAAC,aAAa,CAAC,2CAA2C,CAAC,OAAO,CAAC,qCAAqC,CAAC,cAAc,CAAC,4CAA4C,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC;;;;"}
package/modern/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import React, { ReactNode, RefObject } from 'react';
2
- import { BackArrowAddonProps } from './components/back-arrow-addon';
3
- import type { CloserProps } from './components/closer';
1
+ import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
2
+ import { type BackArrowAddonProps } from './components/back-arrow-addon';
3
+ import { type CloserProps } from './components/closer';
4
4
  export declare type NavigationBarPrivateProps = {
5
5
  /**
6
6
  * Контент шапки
@@ -90,7 +90,7 @@ export declare type NavigationBarPrivateProps = {
90
90
  /**
91
91
  * Иконка closer.
92
92
  */
93
- closerIcon?: React.ElementType;
93
+ closerIcon?: ElementType;
94
94
  /**
95
95
  * Обработчик закрытия
96
96
  */
@@ -110,7 +110,7 @@ export declare type NavigationBarPrivateProps = {
110
110
  /**
111
111
  * Ссылка на родительскую ноду overflow: auto
112
112
  */
113
- scrollableParentRef?: React.RefObject<HTMLDivElement>;
113
+ scrollableParentRef?: RefObject<HTMLDivElement>;
114
114
  /**
115
115
  * Data атрибут для компонента
116
116
  */
@@ -126,8 +126,8 @@ export declare type NavigationBarPrivateProps = {
126
126
  };
127
127
  export declare type ContentParams = {
128
128
  extraClassName?: string;
129
- wrapperRef?: React.RefObject<HTMLDivElement>;
130
- style?: React.CSSProperties;
129
+ wrapperRef?: RefObject<HTMLDivElement>;
130
+ style?: CSSProperties;
131
131
  hidden?: boolean;
132
132
  extraAlign?: NavigationBarPrivateProps['align'];
133
133
  };
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- import type { NavigationBarPrivateProps } from './types';
2
+ import { type NavigationBarPrivateProps } from './types';
3
3
  export declare const NavigationBarPrivate: React.ForwardRefExoticComponent<NavigationBarPrivateProps & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { BackArrowAddon } from './components/back-arrow-addon';\nimport { Closer } from './components/closer';\nimport type { ContentParams, NavigationBarPrivateProps } from './types';\n\nimport styles from './index.module.css';\n\nconst ADDONS_HEIGHT = 48;\n\nexport const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPrivateProps>(\n (\n {\n addonClassName,\n className,\n contentClassName,\n closerClassName,\n leftAddons,\n rightAddons,\n bottomAddons,\n bottomAddonsClassName,\n children,\n align = 'left',\n trim = true,\n title,\n titleSize = 'default',\n subtitle,\n hasCloser,\n closerProps = {},\n hasBackButton,\n backButtonClassName,\n backButtonProps,\n dataTestId,\n imageUrl,\n closerIcon,\n onClose,\n view,\n scrollableParentRef,\n sticky,\n onBack,\n dataName,\n titleClassName,\n titleRef,\n },\n ref,\n ) => {\n const [scrollTop, setScrollTop] = useState(0);\n const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n const bottomContentRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const mainLinePaddingTopRef = useRef<string>('0px');\n const leftAddonsRef = useRef<HTMLDivElement>(null);\n const rightAddonsRef = useRef<HTMLDivElement>(null);\n\n const isMobile = view === 'mobile';\n\n const compactTitle = isMobile && titleSize === 'compact';\n const hasLeftPart = Boolean(leftAddons || hasBackButton);\n const hasRightPart = Boolean(rightAddons || hasCloser);\n const hasContent = Boolean(title || children);\n const withAnimation = Boolean(isMobile && hasLeftPart && sticky && !compactTitle);\n const showContentOnTop = hasContent && (compactTitle || !hasLeftPart);\n const showContentOnBot = hasContent && !compactTitle && hasLeftPart;\n const showStaticContentOnTop = !withAnimation && showContentOnTop;\n const showStaticContentOnBot = !withAnimation && showContentOnBot;\n const showAnimatedContentOnTop =\n withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;\n const showAnimatedContentOnBot = withAnimation && showContentOnBot;\n const headerPaddingTop = mainLinePaddingTopRef.current;\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {\n const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;\n const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;\n\n const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);\n const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;\n\n setTitleMargin((prev) => {\n const newState = shouldAddLeftMargin\n ? { left: marginSize, right: 0 }\n : { left: 0, right: marginSize };\n\n const isStateChanged =\n prev.left !== newState.left || prev.right !== newState.right;\n\n return isStateChanged ? newState : prev;\n });\n }\n }, [\n align,\n showStaticContentOnTop,\n showAnimatedContentOnTop,\n leftAddons,\n rightAddons,\n hasBackButton,\n hasCloser,\n ]);\n\n useEffect(() => {\n const parent = scrollableParentRef?.current;\n\n const handleScroll = (ev: Event) => {\n const divElement = ev.target as HTMLDivElement;\n\n setScrollTop(divElement.scrollTop);\n };\n\n if (withAnimation && headerRef.current) {\n mainLinePaddingTopRef.current = getComputedStyle(headerRef.current).paddingTop;\n }\n\n if (withAnimation && parent) {\n parent.addEventListener('scroll', handleScroll);\n }\n\n return () => parent?.removeEventListener('scroll', handleScroll);\n }, [scrollableParentRef, withAnimation]);\n\n const renderBackButton = () => {\n let textOpacity = 1;\n\n if (withAnimation) {\n const height = hasContent ? ADDONS_HEIGHT : ADDONS_HEIGHT / 2;\n\n textOpacity = Math.max(0, 1 - scrollTop / height);\n } else if (compactTitle) {\n textOpacity = 0;\n }\n\n return (\n <div className={cn(styles.addon, backButtonClassName)}>\n <BackArrowAddon\n data-test-id={getDataTestId(dataTestId, 'back-button')}\n {...backButtonProps}\n textOpacity={textOpacity}\n view={view}\n onClick={onBack}\n />\n </div>\n );\n };\n\n const renderContent = (args: ContentParams = {}) => {\n const { extraClassName, wrapperRef, style, hidden, extraAlign } = args;\n\n return (\n <div\n style={{ ...style, visibility: hidden ? 'hidden' : 'visible' }}\n ref={wrapperRef}\n className={cn(\n styles.content,\n extraClassName,\n contentClassName,\n styles[extraAlign || align],\n {\n [styles.trim]: trim,\n [styles.withCompactTitle]: isMobile && compactTitle && hasContent,\n },\n )}\n aria-hidden={hidden}\n >\n {children && <div className={styles.children}>{children}</div>}\n {title && (\n <div\n className={cn(styles.title, titleClassName)}\n data-test-id={hidden ? undefined : getDataTestId(dataTestId, 'title')}\n ref={titleRef}\n >\n {title}\n </div>\n )}\n {compactTitle && subtitle && (\n <div\n className={styles.subtitle}\n data-test-id={getDataTestId(dataTestId, 'subtitle')}\n >\n {subtitle}\n </div>\n )}\n </div>\n );\n };\n\n const renderCloser = () => (\n <div className={cn(styles.addon, styles.closer, closerClassName)}>\n <Closer\n view={view}\n icon={closerIcon}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n onClose={onClose}\n {...closerProps}\n />\n </div>\n );\n\n return (\n <div\n ref={mergeRefs([ref, headerRef])}\n className={cn(styles.header, className, { [styles.backgroundImage]: imageUrl })}\n data-test-id={getDataTestId(dataTestId)}\n style={{\n ...(imageUrl && { backgroundImage: `url(${imageUrl})` }),\n ...(withAnimation &&\n bottomContentRef.current && {\n top: -bottomContentRef.current.scrollHeight,\n }),\n }}\n data-name={dataName}\n >\n <div\n className={cn(styles.mainLine, {\n [styles.mainLineSticky]: withAnimation,\n [styles.mainLineWithImageBg]: imageUrl,\n })}\n style={{\n ...(withAnimation\n ? {\n marginTop: `-${headerPaddingTop}`,\n paddingTop: headerPaddingTop,\n }\n : null),\n }}\n >\n {hasLeftPart && (\n <div className={styles.addonsWrapper} ref={leftAddonsRef}>\n {hasBackButton && renderBackButton()}\n {leftAddons && (\n <div className={cn(styles.addon, addonClassName)}>{leftAddons}</div>\n )}\n </div>\n )}\n\n {showStaticContentOnTop &&\n renderContent({\n ...(align === 'center'\n ? {\n style: {\n marginLeft: titleMargin.left,\n marginRight: titleMargin.right,\n },\n }\n : null),\n })}\n\n {showAnimatedContentOnTop &&\n renderContent({\n extraClassName: styles.withBothAddons,\n style: {\n opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),\n ...(align === 'center'\n ? {\n marginLeft: titleMargin.left,\n marginRight: titleMargin.right,\n }\n : null),\n },\n extraAlign: 'center',\n })}\n\n {hasRightPart && (\n <div\n className={cn(styles.addonsWrapper, styles.rightAddons)}\n ref={rightAddonsRef}\n >\n {rightAddons && (\n <div className={cn(styles.addon, addonClassName)}>\n {rightAddons}\n </div>\n )}\n\n {hasCloser && renderCloser()}\n </div>\n )}\n </div>\n\n {showAnimatedContentOnBot &&\n renderContent({\n wrapperRef: bottomContentRef,\n extraClassName: styles.underAddons,\n style: { opacity: Math.max(0, 1 - scrollTop / ADDONS_HEIGHT) },\n hidden: scrollTop / ADDONS_HEIGHT > 1,\n extraAlign: 'left',\n })}\n\n {showStaticContentOnBot &&\n renderContent({\n extraClassName: cn({\n [styles.contentOnBotDesktop]: view === 'desktop',\n [styles.contentOnBotMobile]: isMobile,\n }),\n extraAlign: 'left',\n })}\n\n {bottomAddons && (\n <div className={cn(styles.bottomAddons, bottomAddonsClassName)}>\n {bottomAddons}\n </div>\n )}\n </div>\n );\n },\n);\n\nNavigationBarPrivate.displayName = 'NavigationBarPrivate';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { BackArrowAddon } from './components/back-arrow-addon';\nimport { Closer } from './components/closer';\nimport { type ContentParams, type NavigationBarPrivateProps } from './types';\n\nimport styles from './index.module.css';\n\nconst ADDONS_HEIGHT = 48;\n\nexport const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPrivateProps>(\n (\n {\n addonClassName,\n className,\n contentClassName,\n closerClassName,\n leftAddons,\n rightAddons,\n bottomAddons,\n bottomAddonsClassName,\n children,\n align = 'left',\n trim = true,\n title,\n titleSize = 'default',\n subtitle,\n hasCloser,\n closerProps = {},\n hasBackButton,\n backButtonClassName,\n backButtonProps,\n dataTestId,\n imageUrl,\n closerIcon,\n onClose,\n view,\n scrollableParentRef,\n sticky,\n onBack,\n dataName,\n titleClassName,\n titleRef,\n },\n ref,\n ) => {\n const [scrollTop, setScrollTop] = useState(0);\n const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n const bottomContentRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const mainLinePaddingTopRef = useRef<string>('0px');\n const leftAddonsRef = useRef<HTMLDivElement>(null);\n const rightAddonsRef = useRef<HTMLDivElement>(null);\n\n const isMobile = view === 'mobile';\n\n const compactTitle = isMobile && titleSize === 'compact';\n const hasLeftPart = Boolean(leftAddons || hasBackButton);\n const hasRightPart = Boolean(rightAddons || hasCloser);\n const hasContent = Boolean(title || children);\n const withAnimation = Boolean(isMobile && hasLeftPart && sticky && !compactTitle);\n const showContentOnTop = hasContent && (compactTitle || !hasLeftPart);\n const showContentOnBot = hasContent && !compactTitle && hasLeftPart;\n const showStaticContentOnTop = !withAnimation && showContentOnTop;\n const showStaticContentOnBot = !withAnimation && showContentOnBot;\n const showAnimatedContentOnTop =\n withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;\n const showAnimatedContentOnBot = withAnimation && showContentOnBot;\n const headerPaddingTop = mainLinePaddingTopRef.current;\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {\n const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;\n const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;\n\n const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);\n const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;\n\n setTitleMargin((prev) => {\n const newState = shouldAddLeftMargin\n ? { left: marginSize, right: 0 }\n : { left: 0, right: marginSize };\n\n const isStateChanged =\n prev.left !== newState.left || prev.right !== newState.right;\n\n return isStateChanged ? newState : prev;\n });\n }\n }, [\n align,\n showStaticContentOnTop,\n showAnimatedContentOnTop,\n leftAddons,\n rightAddons,\n hasBackButton,\n hasCloser,\n ]);\n\n useEffect(() => {\n const parent = scrollableParentRef?.current;\n\n const handleScroll = (ev: Event) => {\n const divElement = ev.target as HTMLDivElement;\n\n setScrollTop(divElement.scrollTop);\n };\n\n if (withAnimation && headerRef.current) {\n mainLinePaddingTopRef.current = getComputedStyle(headerRef.current).paddingTop;\n }\n\n if (withAnimation && parent) {\n parent.addEventListener('scroll', handleScroll);\n }\n\n return () => parent?.removeEventListener('scroll', handleScroll);\n }, [scrollableParentRef, withAnimation]);\n\n const renderBackButton = () => {\n let textOpacity = 1;\n\n if (withAnimation) {\n const height = hasContent ? ADDONS_HEIGHT : ADDONS_HEIGHT / 2;\n\n textOpacity = Math.max(0, 1 - scrollTop / height);\n } else if (compactTitle) {\n textOpacity = 0;\n }\n\n return (\n <div className={cn(styles.addon, backButtonClassName)}>\n <BackArrowAddon\n data-test-id={getDataTestId(dataTestId, 'back-button')}\n {...backButtonProps}\n textOpacity={textOpacity}\n view={view}\n onClick={onBack}\n />\n </div>\n );\n };\n\n const renderContent = (args: ContentParams = {}) => {\n const { extraClassName, wrapperRef, style, hidden, extraAlign } = args;\n\n return (\n <div\n style={{ ...style, visibility: hidden ? 'hidden' : 'visible' }}\n ref={wrapperRef}\n className={cn(\n styles.content,\n extraClassName,\n contentClassName,\n styles[extraAlign || align],\n {\n [styles.trim]: trim,\n [styles.withCompactTitle]: isMobile && compactTitle && hasContent,\n },\n )}\n aria-hidden={hidden}\n >\n {children && <div className={styles.children}>{children}</div>}\n {title && (\n <div\n className={cn(styles.title, titleClassName)}\n data-test-id={hidden ? undefined : getDataTestId(dataTestId, 'title')}\n ref={titleRef}\n >\n {title}\n </div>\n )}\n {compactTitle && subtitle && (\n <div\n className={styles.subtitle}\n data-test-id={getDataTestId(dataTestId, 'subtitle')}\n >\n {subtitle}\n </div>\n )}\n </div>\n );\n };\n\n const renderCloser = () => (\n <div className={cn(styles.addon, styles.closer, closerClassName)}>\n <Closer\n view={view}\n icon={closerIcon}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n onClose={onClose}\n {...closerProps}\n />\n </div>\n );\n\n return (\n <div\n ref={mergeRefs([ref, headerRef])}\n className={cn(styles.header, className, { [styles.backgroundImage]: imageUrl })}\n data-test-id={getDataTestId(dataTestId)}\n style={{\n ...(imageUrl && { backgroundImage: `url(${imageUrl})` }),\n ...(withAnimation &&\n bottomContentRef.current && {\n top: -bottomContentRef.current.scrollHeight,\n }),\n }}\n data-name={dataName}\n >\n <div\n className={cn(styles.mainLine, {\n [styles.mainLineSticky]: withAnimation,\n [styles.mainLineWithImageBg]: imageUrl,\n })}\n style={{\n ...(withAnimation\n ? {\n marginTop: `-${headerPaddingTop}`,\n paddingTop: headerPaddingTop,\n }\n : null),\n }}\n >\n {hasLeftPart && (\n <div className={styles.addonsWrapper} ref={leftAddonsRef}>\n {hasBackButton && renderBackButton()}\n {leftAddons && (\n <div className={cn(styles.addon, addonClassName)}>{leftAddons}</div>\n )}\n </div>\n )}\n\n {showStaticContentOnTop &&\n renderContent({\n ...(align === 'center'\n ? {\n style: {\n marginLeft: titleMargin.left,\n marginRight: titleMargin.right,\n },\n }\n : null),\n })}\n\n {showAnimatedContentOnTop &&\n renderContent({\n extraClassName: styles.withBothAddons,\n style: {\n opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),\n ...(align === 'center'\n ? {\n marginLeft: titleMargin.left,\n marginRight: titleMargin.right,\n }\n : null),\n },\n extraAlign: 'center',\n })}\n\n {hasRightPart && (\n <div\n className={cn(styles.addonsWrapper, styles.rightAddons)}\n ref={rightAddonsRef}\n >\n {rightAddons && (\n <div className={cn(styles.addon, addonClassName)}>\n {rightAddons}\n </div>\n )}\n\n {hasCloser && renderCloser()}\n </div>\n )}\n </div>\n\n {showAnimatedContentOnBot &&\n renderContent({\n wrapperRef: bottomContentRef,\n extraClassName: styles.underAddons,\n style: { opacity: Math.max(0, 1 - scrollTop / ADDONS_HEIGHT) },\n hidden: scrollTop / ADDONS_HEIGHT > 1,\n extraAlign: 'left',\n })}\n\n {showStaticContentOnBot &&\n renderContent({\n extraClassName: cn({\n [styles.contentOnBotDesktop]: view === 'desktop',\n [styles.contentOnBotMobile]: isMobile,\n }),\n extraAlign: 'left',\n })}\n\n {bottomAddons && (\n <div className={cn(styles.bottomAddons, bottomAddonsClassName)}>\n {bottomAddons}\n </div>\n )}\n </div>\n );\n },\n);\n\nNavigationBarPrivate.displayName = 'NavigationBarPrivate';\n"],"names":[],"mappings":"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"}
@@ -10,7 +10,7 @@
10
10
  -webkit-backdrop-filter: blur(10px);
11
11
  backdrop-filter: blur(10px);
12
12
  border-radius: var(--border-radius-pill);
13
- min-width: 48px
13
+ min-width: 48px;
14
14
  }
15
15
  .component svg > path {
16
16
  transition: fill 0.2s ease;
@@ -40,7 +40,7 @@
40
40
  justify-content: center;
41
41
  height: 48px;
42
42
  margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);
43
- border-radius: var(--border-radius-circle)
43
+ border-radius: var(--border-radius-circle);
44
44
  }
45
45
  .iconWrapper + .text {
46
46
  margin-right: var(--gap-12);
@@ -51,7 +51,7 @@
51
51
  background: var(--color-light-neutral-translucent-100);
52
52
  -webkit-backdrop-filter: blur(10px);
53
53
  backdrop-filter: blur(10px);
54
- margin: var(--gap-0)
54
+ margin: var(--gap-0);
55
55
  }
56
56
  .mobileWrapper + .text {
57
57
  margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);
@@ -1,5 +1,5 @@
1
- import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';
2
- import { IconButtonProps } from '@alfalab/core-components-icon-button/moderncssm';
1
+ import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';
2
+ import { type IconButtonProps } from '@alfalab/core-components-icon-button/moderncssm';
3
3
  export interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
4
4
  /**
5
5
  * Вид компонента
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/closer/Component.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultColors,\n inverted: invertedColors,\n} as const;\n\nexport interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * Вид компонента\n */\n view: 'desktop' | 'mobile';\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Позиция крестика\n */\n align?: 'left' | 'right';\n\n /**\n * Фиксирует крестик\n */\n sticky?: boolean;\n\n /**\n * Иконка\n */\n icon?: ElementType;\n\n /**\n * Набор цветов для компонента\n */\n colors?: IconButtonProps['colors'];\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Коллбэк закрытия.\n */\n onClose?: (\n event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick',\n ) => void;\n}\n\nexport const Closer: FC<CloserProps> = ({\n view,\n className,\n sticky,\n icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon,\n colors = 'default',\n dataTestId,\n onClose,\n ...restProps\n}) => {\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onClose?.(event, 'closerClick');\n };\n\n return (\n <div\n className={cn(styles.closer, className, {\n [styles.sticky]: sticky,\n })}\n >\n <IconButton\n size={view === 'desktop' ? 's' : 'xs'}\n className={cn(styles.button, colorStyles[colors].button, {\n [colorStyles[colors].mobile]: view === 'mobile',\n })}\n aria-label='закрыть'\n onClick={handleClick}\n icon={icon}\n colors={colors}\n dataTestId={dataTestId}\n {...restProps}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAClB;AA+CG,MAAA,MAAM,GAAoB,CAAC,EACpC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,eAAe,GAAG,UAAU,EACxD,MAAM,GAAG,SAAS,EAClB,UAAU,EACV,OAAO,EACP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AAC/D,QAAA,OAAO,GAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;AACpC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;SAC1B,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;gBACrD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;aAClD,CAAC,EAAA,YAAA,EACS,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,KAClB,SAAS,EAAA,CACf,CACA;AAEd;;;;"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/closer/Component.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultColors,\n inverted: invertedColors,\n} as const;\n\nexport interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * Вид компонента\n */\n view: 'desktop' | 'mobile';\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Позиция крестика\n */\n align?: 'left' | 'right';\n\n /**\n * Фиксирует крестик\n */\n sticky?: boolean;\n\n /**\n * Иконка\n */\n icon?: ElementType;\n\n /**\n * Набор цветов для компонента\n */\n colors?: IconButtonProps['colors'];\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Коллбэк закрытия.\n */\n onClose?: (\n event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick',\n ) => void;\n}\n\nexport const Closer: FC<CloserProps> = ({\n view,\n className,\n sticky,\n icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon,\n colors = 'default',\n dataTestId,\n onClose,\n ...restProps\n}) => {\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onClose?.(event, 'closerClick');\n };\n\n return (\n <div\n className={cn(styles.closer, className, {\n [styles.sticky]: sticky,\n })}\n >\n <IconButton\n size={view === 'desktop' ? 's' : 'xs'}\n className={cn(styles.button, colorStyles[colors].button, {\n [colorStyles[colors].mobile]: view === 'mobile',\n })}\n aria-label='закрыть'\n onClick={handleClick}\n icon={icon}\n colors={colors}\n dataTestId={dataTestId}\n {...restProps}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAClB;AA+CG,MAAA,MAAM,GAAoB,CAAC,EACpC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,eAAe,GAAG,UAAU,EACxD,MAAM,GAAG,SAAS,EAClB,UAAU,EACV,OAAO,EACP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AAC/D,QAAA,OAAO,GAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;AACpC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;SAC1B,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;gBACrD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;aAClD,CAAC,EAAA,YAAA,EACS,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,KAClB,SAAS,EAAA,CACf,CACA;AAEd;;;;"}
@@ -6,7 +6,7 @@
6
6
  }
7
7
  .button {
8
8
  background: var(--color-light-monochrome-white-4);
9
- color: var(--color-light-neutral-translucent-1300)
9
+ color: var(--color-light-neutral-translucent-1300);
10
10
  }
11
11
  .button.mobile {
12
12
  background: var(--color-light-neutral-translucent-100);
@@ -1,3 +1,5 @@
1
+
2
+
1
3
  .closer {
2
4
  flex-shrink: 0;
3
5
  width: 48px;
@@ -8,7 +8,7 @@
8
8
  }
9
9
  .button {
10
10
  background: var(--color-light-monochrome-white-4-inverted);
11
- color: var(--color-light-neutral-translucent-1300-inverted)
11
+ color: var(--color-light-neutral-translucent-1300-inverted);
12
12
  }
13
13
  .button.mobile {
14
14
  background: var(--color-light-neutral-translucent-100-inverted);
@@ -1,7 +1,11 @@
1
+
2
+
1
3
  .header {
2
4
  width: 100%;
3
5
  box-sizing: border-box;
4
- transition: box-shadow 0.2s ease, background 0.2s ease
6
+ transition:
7
+ box-shadow 0.2s ease,
8
+ background 0.2s ease;
5
9
  }
6
10
 
7
11
  .header.header.backgroundImage {
@@ -36,7 +40,7 @@
36
40
  flex-grow: 1;
37
41
  align-self: baseline;
38
42
  box-sizing: border-box;
39
- min-height: 48px
43
+ min-height: 48px;
40
44
  }
41
45
 
42
46
  .content.withBothAddons,
@@ -46,12 +50,12 @@
46
50
  font-weight: 500;
47
51
  align-self: center;
48
52
  padding-top: var(--gap-4);
49
- padding-bottom: var(--gap-4)
53
+ padding-bottom: var(--gap-4);
50
54
  }
51
55
 
52
56
  .content.withBothAddons > .children,
53
- .content.withBothAddons > .title,
54
57
  .content.withCompactTitle > .children,
58
+ .content.withBothAddons > .title,
55
59
  .content.withCompactTitle > .title {
56
60
  -webkit-line-clamp: 1;
57
61
  word-break: break-all;
@@ -117,7 +121,7 @@
117
121
  }
118
122
 
119
123
  .trim {
120
- overflow: hidden
124
+ overflow: hidden;
121
125
  }
122
126
 
123
127
  .trim .title,
@@ -1,6 +1,6 @@
1
- import React, { ReactNode, RefObject } from 'react';
2
- import { BackArrowAddonProps } from './components/back-arrow-addon';
3
- import type { CloserProps } from './components/closer';
1
+ import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
2
+ import { type BackArrowAddonProps } from './components/back-arrow-addon';
3
+ import { type CloserProps } from './components/closer';
4
4
  export declare type NavigationBarPrivateProps = {
5
5
  /**
6
6
  * Контент шапки
@@ -90,7 +90,7 @@ export declare type NavigationBarPrivateProps = {
90
90
  /**
91
91
  * Иконка closer.
92
92
  */
93
- closerIcon?: React.ElementType;
93
+ closerIcon?: ElementType;
94
94
  /**
95
95
  * Обработчик закрытия
96
96
  */
@@ -110,7 +110,7 @@ export declare type NavigationBarPrivateProps = {
110
110
  /**
111
111
  * Ссылка на родительскую ноду overflow: auto
112
112
  */
113
- scrollableParentRef?: React.RefObject<HTMLDivElement>;
113
+ scrollableParentRef?: RefObject<HTMLDivElement>;
114
114
  /**
115
115
  * Data атрибут для компонента
116
116
  */
@@ -126,8 +126,8 @@ export declare type NavigationBarPrivateProps = {
126
126
  };
127
127
  export declare type ContentParams = {
128
128
  extraClassName?: string;
129
- wrapperRef?: React.RefObject<HTMLDivElement>;
130
- style?: React.CSSProperties;
129
+ wrapperRef?: RefObject<HTMLDivElement>;
130
+ style?: CSSProperties;
131
131
  hidden?: boolean;
132
132
  extraAlign?: NavigationBarPrivateProps['align'];
133
133
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-navigation-bar-private",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Navigation bar private component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -13,7 +13,7 @@
13
13
  "@alfalab/core-components-button": "^12.0.1",
14
14
  "@alfalab/core-components-icon-button": "^7.0.1",
15
15
  "@alfalab/core-components-shared": "^1.1.0",
16
- "@alfalab/core-components-typography": "^5.0.1",
16
+ "@alfalab/core-components-typography": "^5.0.2",
17
17
  "@alfalab/hooks": "^1.13.1",
18
18
  "@alfalab/icons-glyph": "^2.247.0",
19
19
  "classnames": "^2.5.1",
@@ -28,6 +28,6 @@
28
28
  "access": "public",
29
29
  "directory": "dist"
30
30
  },
31
- "themesVersion": "14.1.0",
31
+ "themesVersion": "14.1.2",
32
32
  "varsVersion": "10.1.0"
33
33
  }
package/src/Component.tsx CHANGED
@@ -8,7 +8,7 @@ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
8
8
 
9
9
  import { BackArrowAddon } from './components/back-arrow-addon';
10
10
  import { Closer } from './components/closer';
11
- import type { ContentParams, NavigationBarPrivateProps } from './types';
11
+ import { type ContentParams, type NavigationBarPrivateProps } from './types';
12
12
 
13
13
  import styles from './index.module.css';
14
14
 
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/index.css';
1
+ @import '@alfalab/core-components-vars/src/no-typography-index.css';
2
2
  @import '@alfalab/core-components-vars/src/colors-monochrome.css';
3
3
  @import '../../vars.css';
4
4
 
@@ -1,7 +1,7 @@
1
- import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';
1
+ import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
- import { IconButton, IconButtonProps } from '@alfalab/core-components-icon-button';
4
+ import { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';
5
5
  import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
6
6
  import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
7
7
 
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/index.css';
1
+ @import '@alfalab/core-components-vars/src/no-typography-index.css';
2
2
 
3
3
  .closer {
4
4
  flex-shrink: 0;
@@ -1,9 +1,11 @@
1
- @import '@alfalab/core-components-vars/src/index.css';
1
+ @import '@alfalab/core-components-vars/src/no-typography-index.css';
2
2
 
3
3
  .header {
4
4
  width: 100%;
5
5
  box-sizing: border-box;
6
- transition: box-shadow 0.2s ease, background 0.2s ease;
6
+ transition:
7
+ box-shadow 0.2s ease,
8
+ background 0.2s ease;
7
9
 
8
10
  &.header.backgroundImage {
9
11
  background-repeat: no-repeat;
package/src/types.ts CHANGED
@@ -1,7 +1,7 @@
1
- import React, { ReactNode, RefObject } from 'react';
1
+ import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
2
2
 
3
- import { BackArrowAddonProps } from './components/back-arrow-addon';
4
- import type { CloserProps } from './components/closer';
3
+ import { type BackArrowAddonProps } from './components/back-arrow-addon';
4
+ import { type CloserProps } from './components/closer';
5
5
 
6
6
  export type NavigationBarPrivateProps = {
7
7
  /**
@@ -113,7 +113,7 @@ export type NavigationBarPrivateProps = {
113
113
  /**
114
114
  * Иконка closer.
115
115
  */
116
- closerIcon?: React.ElementType;
116
+ closerIcon?: ElementType;
117
117
 
118
118
  /**
119
119
  * Обработчик закрытия
@@ -138,7 +138,7 @@ export type NavigationBarPrivateProps = {
138
138
  /**
139
139
  * Ссылка на родительскую ноду overflow: auto
140
140
  */
141
- scrollableParentRef?: React.RefObject<HTMLDivElement>;
141
+ scrollableParentRef?: RefObject<HTMLDivElement>;
142
142
 
143
143
  /**
144
144
  * Data атрибут для компонента
@@ -158,8 +158,8 @@ export type NavigationBarPrivateProps = {
158
158
 
159
159
  export type ContentParams = {
160
160
  extraClassName?: string;
161
- wrapperRef?: React.RefObject<HTMLDivElement>;
162
- style?: React.CSSProperties;
161
+ wrapperRef?: RefObject<HTMLDivElement>;
162
+ style?: CSSProperties;
163
163
  hidden?: boolean;
164
164
  extraAlign?: NavigationBarPrivateProps['align'];
165
165
  };
package/src/vars.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/index.css';
1
+ @import '@alfalab/core-components-vars/src/no-typography-index.css';
2
2
 
3
3
  :root {
4
4
  /* closer-mobile */
package/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import React, { ReactNode, RefObject } from 'react';
2
- import { BackArrowAddonProps } from './components/back-arrow-addon';
3
- import type { CloserProps } from './components/closer';
1
+ import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
2
+ import { type BackArrowAddonProps } from './components/back-arrow-addon';
3
+ import { type CloserProps } from './components/closer';
4
4
  export declare type NavigationBarPrivateProps = {
5
5
  /**
6
6
  * Контент шапки
@@ -90,7 +90,7 @@ export declare type NavigationBarPrivateProps = {
90
90
  /**
91
91
  * Иконка closer.
92
92
  */
93
- closerIcon?: React.ElementType;
93
+ closerIcon?: ElementType;
94
94
  /**
95
95
  * Обработчик закрытия
96
96
  */
@@ -110,7 +110,7 @@ export declare type NavigationBarPrivateProps = {
110
110
  /**
111
111
  * Ссылка на родительскую ноду overflow: auto
112
112
  */
113
- scrollableParentRef?: React.RefObject<HTMLDivElement>;
113
+ scrollableParentRef?: RefObject<HTMLDivElement>;
114
114
  /**
115
115
  * Data атрибут для компонента
116
116
  */
@@ -126,8 +126,8 @@ export declare type NavigationBarPrivateProps = {
126
126
  };
127
127
  export declare type ContentParams = {
128
128
  extraClassName?: string;
129
- wrapperRef?: React.RefObject<HTMLDivElement>;
130
- style?: React.CSSProperties;
129
+ wrapperRef?: RefObject<HTMLDivElement>;
130
+ style?: CSSProperties;
131
131
  hidden?: boolean;
132
132
  extraAlign?: NavigationBarPrivateProps['align'];
133
133
  };