npm - @vkontakte/vkui - Versions diffs - 5.9.0 → 5.9.2 - Mend

@vkontakte/vkui 5.9.0 → 5.9.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 (202) hide show

package/dist/cssm/components/Alert/Alert.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute } from '../../types';
+import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';
 import { ButtonProps } from '../Button/Button';
 import { AlertActionProps } from './AlertAction';
 type AlertActionMode = 'cancel' | 'destructive' | 'default';
@@ -9,7 +9,7 @@ export interface AlertActionInterface extends Pick<ButtonProps, 'Component'>, An
     autoClose?: boolean;
     mode: AlertActionMode;
 }
-export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
+export interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {
     actionsLayout?: 'vertical' | 'horizontal';
     actionsAlign?: AlignType;
     actions?: AlertActionInterface[];
@@ -30,6 +30,6 @@ export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
  */
-export declare const Alert: ({ actions, actionsLayout, children, className, style, text, header, onClose, dismissLabel, renderAction, actionsAlign, dismissButtonMode, ...restProps }: AlertProps) => React.JSX.Element;
+export declare const Alert: ({ actions, actionsLayout, children, className, style, text, header, onClose, dismissLabel, renderAction, actionsAlign, dismissButtonMode, getRootRef, ...restProps }: AlertProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

package/dist/cssm/components/Alert/Alert.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;~~AAEpF~~,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKjD,KAAK,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,EACpC,wBAAwB,EACxB,gBAAgB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;~~IACnE~~,aAAa,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC1C;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,~~6JAcf~~,UAAU,~~sBA6GZ~~,CAAC"}
1	+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEhG,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKjD,KAAK,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,EACpC,wBAAwB,EACxB,gBAAgB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC;IAC/F,aAAa,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC1C;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,yKAef,UAAU,sBAmHZ,CAAC"}

package/dist/cssm/components/Alert/Alert.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { AlertHeader, AlertText } from './AlertTypography';
 import styles from './Alert.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
- */ export const Alert = ({ actions = [], actionsLayout = 'horizontal', children, className, style, text, header, onClose, dismissLabel = 'Закрыть предупреждение', renderAction, actionsAlign, dismissButtonMode = 'outside', ...restProps })=>{
+ */ export const Alert = ({ actions = [], actionsLayout = 'horizontal', children, className, style, text, header, onClose, dismissLabel = 'Закрыть предупреждение', renderAction, actionsAlign, dismissButtonMode = 'outside', getRootRef, ...restProps })=>{
     const generatedId = useId();
     const headerId = `vkui-alert-${generatedId}-header`;
     const textId = `vkui-alert-${generatedId}-text`;
@@ -65,7 +65,8 @@ import styles from './Alert.module.css';
         className: className,
         closing: closing,
         style: style,
-        onClick: close
+        onClick: close,
+        getRootRef: getRootRef
     }, /*#__PURE__*/ React.createElement(FocusTrap, {
         ...restProps,
         getRootRef: elementRef,

package/dist/cssm/components/Alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertHeader, AlertText } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' \| 'destructive' \| 'default';\n\nexport interface AlertActionInterface\n extends Pick<ButtonProps, 'Component'>,\n AnchorHTMLAttributesOnly,\n HasDataAttribute {\n title: string;\n action?: VoidFunction;\n autoClose?: boolean;\n mode: AlertActionMode;\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n actionsLayout?: 'vertical' \| 'horizontal';\n actionsAlign?: AlignType;\n actions?: AlertActionInterface[];\n renderAction?: (props: AlertActionProps) => React.ReactNode;\n header?: React.ReactNode;\n text?: React.ReactNode;\n onClose: VoidFunction;\n\n /*\n `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n /\n dismissLabel?: string;\n /\n Расположение кнопки закрытия (внутри и вне `popout'a`)\n * Доступно только в `compact`-режиме, не отображается на `iOS`\n /\n dismissButtonMode?: 'inside' \| 'outside';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n actions = [],\n actionsLayout = 'horizontal',\n children,\n className,\n style,\n text,\n header,\n onClose,\n dismissLabel = 'Закрыть предупреждение',\n renderAction,\n actionsAlign,\n dismissButtonMode = 'outside',\n ...restProps\n}: AlertProps) => {\n const generatedId = useId();\n\n const headerId = `vkui-alert-${generatedId}-header`;\n const textId = `vkui-alert-${generatedId}-text`;\n\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const isDismissButtonVisible = isDesktop && platform !== Platform.IOS;\n\n const elementRef = React.useRef<HTMLDivElement>(null);\n\n const timeout = platform === Platform.IOS ? 300 : 200;\n\n const close = React.useCallback(() => {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e \|\| e.propertyName === 'opacity') {\n onClose();\n }\n },\n timeout,\n );\n }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n const onItemClick = React.useCallback(\n (item: AlertActionInterface) => {\n const { action, autoClose } = item;\n\n if (autoClose) {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e \|\| e.propertyName === 'opacity') {\n onClose();\n action && action();\n }\n },\n timeout,\n );\n } else {\n action && action();\n }\n },\n [elementRef, waitTransitionFinish, onClose, timeout],\n );\n\n useScrollLock();\n\n return (\n <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n <FocusTrap\n {...restProps}\n getRootRef={elementRef}\n onClick={stopPropagation}\n onClose={close}\n timeout={timeout}\n className={classNames(\n styles['Alert'],\n platform === Platform.IOS && styles['Alert--ios'],\n platform === Platform.VKCOM && styles['Alert--vkcom'],\n closing && styles['Alert--closing'],\n isDesktop && styles['Alert--desktop'],\n )}\n role=\"alertdialog\"\n aria-modal\n aria-labelledby={headerId}\n aria-describedby={textId}\n >\n <div\n className={classNames(\n styles['Alert__content'],\n dismissButtonMode === 'inside' && styles['Alert__content--withButton'],\n )}\n >\n {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}\n {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}\n {children}\n {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n <IconButton\n aria-label={dismissLabel}\n className={classNames(styles['Alert__dismiss'], 'vkuiInternalAlert__dismiss')}\n onClick={close}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n >\n <Icon20Cancel />\n </IconButton>\n )}\n </div>\n <AlertActions\n actions={actions}\n actionsAlign={actionsAlign}\n actionsLayout={actionsLayout}\n renderAction={renderAction}\n onItemClick={onItemClick}\n />\n {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n <ModalDismissButton onClick={close} aria-label={dismissLabel} />\n )}\n </FocusTrap>\n </PopoutWrapper>\n );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useId","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertHeader","AlertText","styles","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","restProps","generatedId","headerId","textId","platform","isDesktop","waitTransitionFinish","closing","setClosing","useState","isDismissButtonVisible","IOS","elementRef","useRef","timeout","close","useCallback","current","e","propertyName","onItemClick","item","action","autoClose","onClick","~~getRootRef","~~VKCOM","role","aria-modal","aria-labelledby","aria-describedby","div","id","aria-label","hoverMode","activeMode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,kBAAkB;AAElD,SAASC,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,aAAa,QAAQ,iCAAiC;AAE/D,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,WAAW,EAAEC,SAAS,QAAQ,oBAAoB;AAC3D,OAAOC,YAAY,qBAAqB;AAkCxC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,UAAU,EAAE,EACZC,gBAAgB,YAAY,EAC5BC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,eAAe,wBAAwB,EACvCC,YAAY,EACZC,YAAY,EACZC,oBAAoB,SAAS,~~EAC7B~~,GAAGC,WACQ;IACX,MAAMC,~~cAAc5B~~;IAEpB,~~MAAM6B~~,WAAW,CAAC,WAAW,EAAED,YAAY,OAAO,CAAC;IACnD,MAAME,SAAS,CAAC,WAAW,EAAEF,YAAY,KAAK,CAAC;IAE/C,MAAMG,~~WAAW9B~~;IACjB,MAAM,~~EAAE+B~~,SAAS,EAAE,~~GAAGjC~~;IACtB,MAAM,~~EAAEkC~~,oBAAoB,EAAE,~~GAAG/B~~;IAEjC,MAAM,~~CAACgC~~,SAASC,WAAW,~~GAAGxC~~,~~MAAMyC~~,QAAQ,CAAC;IAC7C,MAAMC,yBAAyBL,aAAaD,~~aAAa5B~~,~~SAASmC~~,GAAG;IAErE,MAAMC,~~aAAa5C~~,~~MAAM6C~~,MAAM,CAAiB;IAEhD,MAAMC,UAAUV,~~aAAa5B~~,~~SAASmC~~,GAAG,GAAG,MAAM;IAElD,MAAMI,~~QAAQ/C~~,~~MAAMgD~~,WAAW,CAAC;QAC9BR,WAAW;QACXF,qBACEM,WAAWK,OAAO,EAClB,CAACC;YACC,IAAI,CAACA,KAAKA,EAAEC,YAAY,KAAK,WAAW;~~gBACtCxB~~;YACF;QACF,~~GACAmB~~;IAEJ,GAAG;QAACF;QAAYN;~~QAAsBX~~;~~QAASmB~~;KAAQ;IAEvD,MAAMM,~~cAAcpD~~,~~MAAMgD~~,WAAW,CACnC,CAACK;QACC,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGF;QAE9B,IAAIE,WAAW;YACbf,WAAW;YACXF,qBACEM,WAAWK,OAAO,EAClB,CAACC;gBACC,IAAI,CAACA,KAAKA,EAAEC,YAAY,KAAK,WAAW;~~oBACtCxB~~;~~oBACA2B~~,UAAUA;gBACZ;YACF,GACAR;QAEJ,OAAO;YACLQ,UAAUA;QACZ;IACF,GACA;QAACV;QAAYN;~~QAAsBX~~;~~QAASmB~~;KAAQ;~~IAGtDpC~~;IAEA,qBACE,oBAACI;~~QAAcS~~,WAAWA;~~QAAWgB~~,SAASA;~~QAASf~~,OAAOA;~~QAAOgC~~,SAAST;~~qBAC5E~~,~~oBAACpC~~;QACE,~~GAAGqB~~,SAAS;~~QACbyB~~,~~YAAYb~~;QACZY,~~SAAS/C~~;QACTkB,~~SAASoB~~;QACTD,SAASA;~~QACTvB~~,WAAWrB,WACTgB,MAAM,CAAC,QAAQ,~~EACfkB~~,~~aAAa5B~~,~~SAASmC~~,GAAG,~~IAAIzB~~,MAAM,CAAC,aAAa,~~EACjDkB~~,~~aAAa5B~~,SAASkD,KAAK,IAAIxC,MAAM,CAAC,eAAe,~~EACrDqB~~,~~WAAWrB~~,MAAM,CAAC,iBAAiB,~~EACnCmB~~,~~aAAanB~~,MAAM,CAAC,iBAAiB;QAEvCyC,MAAK;QACLC,cAAAA;QACAC,~~mBAAiB3B~~;~~QACjB4B~~,~~oBAAkB3B~~;qBAElB,~~oBAAC4B~~;QACCxC,WAAWrB,WACTgB,MAAM,CAAC,iBAAiB,EACxBa,sBAAsB,YAAYb,MAAM,CAAC,6BAA6B;OAGvEf,aAAauB,yBAAW,oBAACV;QAAYgD,~~IAAI9B~~;~~OAAWR~~,SACpDvB,aAAasB,uBAAS,oBAACR;QAAU+C,~~IAAI7B~~;~~OAASV~~,OAC9CH,~~UACAoB~~,~~0BAA0BX~~,sBAAsB,0BAC/C,oBAACnB;QACCqD,cAAYrC;QACZL,WAAWrB,WAAWgB,MAAM,CAAC,iBAAiB,EAAE;~~QAChDsC~~,SAAST;~~QACTmB~~,WAAU;QACVC,YAAW;qBAEX,oBAAClE,qCAIP,oBAACc;QACCK,SAASA;QACTU,cAAcA;QACdT,eAAeA;QACfQ,cAAcA;~~QACduB~~,aAAaA;QAEdV,~~0BAA0BX~~,sBAAsB,2BAC/C,oBAAClB;~~QAAmB2C~~,SAAST;~~QAAOkB~~,cAAYrC;;AAK1D,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertHeader, AlertText } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' \| 'destructive' \| 'default';\n\nexport interface AlertActionInterface\n extends Pick<ButtonProps, 'Component'>,\n AnchorHTMLAttributesOnly,\n HasDataAttribute {\n title: string;\n action?: VoidFunction;\n autoClose?: boolean;\n mode: AlertActionMode;\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {\n actionsLayout?: 'vertical' \| 'horizontal';\n actionsAlign?: AlignType;\n actions?: AlertActionInterface[];\n renderAction?: (props: AlertActionProps) => React.ReactNode;\n header?: React.ReactNode;\n text?: React.ReactNode;\n onClose: VoidFunction;\n\n /*\n `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n /\n dismissLabel?: string;\n /\n Расположение кнопки закрытия (внутри и вне `popout'a`)\n * Доступно только в `compact`-режиме, не отображается на `iOS`\n /\n dismissButtonMode?: 'inside' \| 'outside';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n actions = [],\n actionsLayout = 'horizontal',\n children,\n className,\n style,\n text,\n header,\n onClose,\n dismissLabel = 'Закрыть предупреждение',\n renderAction,\n actionsAlign,\n dismissButtonMode = 'outside',\n getRootRef,\n ...restProps\n}: AlertProps) => {\n const generatedId = useId();\n\n const headerId = `vkui-alert-${generatedId}-header`;\n const textId = `vkui-alert-${generatedId}-text`;\n\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const isDismissButtonVisible = isDesktop && platform !== Platform.IOS;\n\n const elementRef = React.useRef<HTMLDivElement>(null);\n\n const timeout = platform === Platform.IOS ? 300 : 200;\n\n const close = React.useCallback(() => {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e \|\| e.propertyName === 'opacity') {\n onClose();\n }\n },\n timeout,\n );\n }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n const onItemClick = React.useCallback(\n (item: AlertActionInterface) => {\n const { action, autoClose } = item;\n\n if (autoClose) {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e \|\| e.propertyName === 'opacity') {\n onClose();\n action && action();\n }\n },\n timeout,\n );\n } else {\n action && action();\n }\n },\n [elementRef, waitTransitionFinish, onClose, timeout],\n );\n\n useScrollLock();\n\n return (\n <PopoutWrapper\n className={className}\n closing={closing}\n style={style}\n onClick={close}\n getRootRef={getRootRef}\n >\n <FocusTrap\n {...restProps}\n getRootRef={elementRef}\n onClick={stopPropagation}\n onClose={close}\n timeout={timeout}\n className={classNames(\n styles['Alert'],\n platform === Platform.IOS && styles['Alert--ios'],\n platform === Platform.VKCOM && styles['Alert--vkcom'],\n closing && styles['Alert--closing'],\n isDesktop && styles['Alert--desktop'],\n )}\n role=\"alertdialog\"\n aria-modal\n aria-labelledby={headerId}\n aria-describedby={textId}\n >\n <div\n className={classNames(\n styles['Alert__content'],\n dismissButtonMode === 'inside' && styles['Alert__content--withButton'],\n )}\n >\n {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}\n {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}\n {children}\n {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n <IconButton\n aria-label={dismissLabel}\n className={classNames(styles['Alert__dismiss'], 'vkuiInternalAlert__dismiss')}\n onClick={close}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n >\n <Icon20Cancel />\n </IconButton>\n )}\n </div>\n <AlertActions\n actions={actions}\n actionsAlign={actionsAlign}\n actionsLayout={actionsLayout}\n renderAction={renderAction}\n onItemClick={onItemClick}\n />\n {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n <ModalDismissButton onClick={close} aria-label={dismissLabel} />\n )}\n </FocusTrap>\n </PopoutWrapper>\n );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useId","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertHeader","AlertText","styles","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","getRootRef","restProps","generatedId","headerId","textId","platform","isDesktop","waitTransitionFinish","closing","setClosing","useState","isDismissButtonVisible","IOS","elementRef","useRef","timeout","close","useCallback","current","e","propertyName","onItemClick","item","action","autoClose","onClick","VKCOM","role","aria-modal","aria-labelledby","aria-describedby","div","id","aria-label","hoverMode","activeMode"],"mappings":"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"}

package/dist/cssm/components/Button/Button.module.css CHANGED Viewed

@@ -188,7 +188,9 @@
 .Button--mode-link .Button__after,
 .Button--mode-link .Button__before,
 .Button--mode-link .Button__content:first-child,
-.Button--mode-link .Button__content:last-child {
+.Button--mode-link .Button__content:last-child,
+.Button--stretched .Button__after:only-child,
+.Button--stretched .Button__before:only-child {
   padding-left: 0;
   padding-right: 0;
 }

package/dist/cssm/components/CalendarRange/CalendarRange.d.ts CHANGED Viewed

@@ -16,5 +16,5 @@ export interface CalendarRangeProps extends Omit<HTMLAttributesWithRootRef<HTMLD
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */
-export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, ...props }: CalendarRangeProps) => React.JSX.Element;
+export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, ...props }: CalendarRangeProps) => React.JSX.Element;
 //# sourceMappingURL=CalendarRange.d.ts.map

package/dist/cssm/components/CalendarRange/CalendarRange.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAIvF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,mBAAmB,EACjB,oBAAoB,GACpB,oBAAoB,GACpB,sBAAsB,GACtB,qBAAqB,GACrB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAAC;IACzC,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,~~oSAmBvB~~,kBAAkB,sBAwLpB,CAAC"}
1	+ {"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAIvF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,mBAAmB,EACjB,oBAAoB,GACpB,oBAAoB,GACpB,sBAAsB,GACtB,qBAAqB,GACrB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAAC;IACzC,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,wRAkBvB,kBAAkB,sBAwLpB,CAAC"}

package/dist/cssm/components/CalendarRange/CalendarRange.js CHANGED Viewed

@@ -14,7 +14,7 @@ const getIsDaySelected = (day, value)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
- */ export const CalendarRange = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, ...props })=>{
+ */ export const CalendarRange = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, ...props })=>{
     const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay } = useCalendar({
         value,
         disableFuture,

package/dist/cssm/components/CalendarRange/CalendarRange.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n addMonths,\n endOfDay,\n isAfter,\n isBefore,\n isSameDay,\n isSameMonth,\n isWithinInterval,\n startOfDay,\n} from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<\n CalendarHeaderProps,\n \| 'prevMonthAriaLabel'\n \| 'nextMonthAriaLabel'\n \| 'changeMonthAriaLabel'\n \| 'changeYearAriaLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n value?: Array<Date \| null>;\n disablePast?: boolean;\n disableFuture?: boolean;\n disablePickers?: boolean;\n changeDayAriaLabel?: string;\n weekStartsOn?: 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n onChange?(value?: Array<Date \| null>): void;\n shouldDisableDate?(value: Date): boolean;\n onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date \| null>) => {\n if (!value?.[0] \|\| !value[1]) {\n return false;\n }\n\n return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n value,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n onClose,\n weekStartsOn = 1,\n getRootRef,\n disablePickers,\n prevMonthAriaLabel,\n nextMonthAriaLabel,\n changeMonthAriaLabel,\n changeYearAriaLabel,\n changeDayAriaLabel = 'Изменить день',\n prevMonthIcon,\n nextMonthIcon,\n listenDayChangesForUpdate,\n ...props\n}: CalendarRangeProps) => {\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n resetSelectedDay,\n } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n const [hintedDate, setHintedDate] = React.useState<Array<Date \| null>>();\n const secondViewDate = addMonths(viewDate, 1);\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n event.preventDefault();\n }\n\n const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n if (\n newFocusedDay &&\n !isSameMonth(newFocusedDay, viewDate) &&\n !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n ) {\n setViewDate(newFocusedDay);\n }\n setFocusedDay(newFocusedDay);\n },\n [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n );\n\n const getNewValue = React.useCallback(\n (date: Date) => {\n if (!value) {\n return [date, null];\n }\n\n const start = value[0];\n const end = value[1];\n if ((start && isSameDay(date, start)) \|\| (end && isSameDay(date, end))) {\n return [setTimeEqual(date, start), setTimeEqual(date, end)];\n } else if (start && isBefore(date, start)) {\n return [setTimeEqual(date, start), end];\n } else if (start && isAfter(date, start)) {\n return [start, setTimeEqual(date, end)];\n }\n\n return value;\n },\n [value],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n onChange?.(getNewValue(date));\n setHintedDate(undefined);\n },\n [onChange, getNewValue],\n );\n\n const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n const isDayActive = React.useCallback(\n (day: Date) =>\n Boolean((value?.[0] && isSameDay(day, value[0])) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isHintedDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n [hintedDate],\n );\n\n const isDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (value?.[0] && isSameDay(day, value[0]))),\n [value],\n );\n\n const isHintedDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n [hintedDate],\n );\n\n const onDayEnter = React.useCallback(\n (date: Date) => setHintedDate(getNewValue(date)),\n [setHintedDate, getNewValue],\n );\n\n const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n const isDayHinted = React.useCallback(\n (day: Date) => getIsDaySelected(day, hintedDate),\n [hintedDate],\n );\n\n return (\n <RootComponent {...props} baseClassName={styles['CalendarRange']}>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={viewDate}\n onChange={setViewDate}\n nextMonth={false}\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n prevMonthIcon={prevMonthIcon}\n />\n <CalendarDays\n viewDate={viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n aria-label={changeDayAriaLabel}\n />\n </div>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={secondViewDate}\n onChange={setViewDate}\n prevMonth={false}\n onNextMonth={setNextMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n nextMonthIcon={nextMonthIcon}\n />\n <CalendarDays\n viewDate={secondViewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n aria-label={changeDayAriaLabel}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n tabIndex={0}\n onBlur={resetSelectedDay}\n />\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","CalendarDays","CalendarHeader","RootComponent","styles","getIsDaySelected","day","value","Boolean","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","hintedDate","setHintedDate","useState","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","start","end","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","baseClassName","div","className","nextMonth","onPrevMonth","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n addMonths,\n endOfDay,\n isAfter,\n isBefore,\n isSameDay,\n isSameMonth,\n isWithinInterval,\n startOfDay,\n} from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<\n CalendarHeaderProps,\n \| 'prevMonthAriaLabel'\n \| 'nextMonthAriaLabel'\n \| 'changeMonthAriaLabel'\n \| 'changeYearAriaLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n value?: Array<Date \| null>;\n disablePast?: boolean;\n disableFuture?: boolean;\n disablePickers?: boolean;\n changeDayAriaLabel?: string;\n weekStartsOn?: 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n onChange?(value?: Array<Date \| null>): void;\n shouldDisableDate?(value: Date): boolean;\n onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date \| null>) => {\n if (!value?.[0] \|\| !value[1]) {\n return false;\n }\n\n return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n value,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n onClose,\n weekStartsOn = 1,\n disablePickers,\n prevMonthAriaLabel,\n nextMonthAriaLabel,\n changeMonthAriaLabel,\n changeYearAriaLabel,\n changeDayAriaLabel = 'Изменить день',\n prevMonthIcon,\n nextMonthIcon,\n listenDayChangesForUpdate,\n ...props\n}: CalendarRangeProps) => {\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n resetSelectedDay,\n } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n const [hintedDate, setHintedDate] = React.useState<Array<Date \| null>>();\n const secondViewDate = addMonths(viewDate, 1);\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n event.preventDefault();\n }\n\n const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n if (\n newFocusedDay &&\n !isSameMonth(newFocusedDay, viewDate) &&\n !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n ) {\n setViewDate(newFocusedDay);\n }\n setFocusedDay(newFocusedDay);\n },\n [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n );\n\n const getNewValue = React.useCallback(\n (date: Date) => {\n if (!value) {\n return [date, null];\n }\n\n const start = value[0];\n const end = value[1];\n if ((start && isSameDay(date, start)) \|\| (end && isSameDay(date, end))) {\n return [setTimeEqual(date, start), setTimeEqual(date, end)];\n } else if (start && isBefore(date, start)) {\n return [setTimeEqual(date, start), end];\n } else if (start && isAfter(date, start)) {\n return [start, setTimeEqual(date, end)];\n }\n\n return value;\n },\n [value],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n onChange?.(getNewValue(date));\n setHintedDate(undefined);\n },\n [onChange, getNewValue],\n );\n\n const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n const isDayActive = React.useCallback(\n (day: Date) =>\n Boolean((value?.[0] && isSameDay(day, value[0])) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isHintedDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n [hintedDate],\n );\n\n const isDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (value?.[0] && isSameDay(day, value[0]))),\n [value],\n );\n\n const isHintedDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n [hintedDate],\n );\n\n const onDayEnter = React.useCallback(\n (date: Date) => setHintedDate(getNewValue(date)),\n [setHintedDate, getNewValue],\n );\n\n const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n const isDayHinted = React.useCallback(\n (day: Date) => getIsDaySelected(day, hintedDate),\n [hintedDate],\n );\n\n return (\n <RootComponent {...props} baseClassName={styles['CalendarRange']}>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={viewDate}\n onChange={setViewDate}\n nextMonth={false}\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n prevMonthIcon={prevMonthIcon}\n />\n <CalendarDays\n viewDate={viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n aria-label={changeDayAriaLabel}\n />\n </div>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={secondViewDate}\n onChange={setViewDate}\n prevMonth={false}\n onNextMonth={setNextMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n nextMonthIcon={nextMonthIcon}\n />\n <CalendarDays\n viewDate={secondViewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n aria-label={changeDayAriaLabel}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n tabIndex={0}\n onBlur={resetSelectedDay}\n />\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","CalendarDays","CalendarHeader","RootComponent","styles","getIsDaySelected","day","value","Boolean","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","hintedDate","setHintedDate","useState","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","start","end","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","baseClassName","div","className","nextMonth","onPrevMonth","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

package/dist/cssm/components/ChipsSelect/ChipsSelect.js CHANGED Viewed

@@ -41,7 +41,7 @@ const chipsSelectDefaultProps = {
     const { document } = useDOM();
     const [popperPlacement, setPopperPlacement] = React.useState(undefined);
     const scrollBoxRef = React.useRef(null);
-    const rootRef = useExternRef(getRef);
+    const rootRef = useExternRef(getRootRef);
     const { fieldValue, selectedOptions = [], opened, setOpened, addOptionFromInput, filteredOptions, addOption, handleInputChange, clearInput, focusedOption, setFocusedOption, focusedOptionIndex, setFocusedOptionIndex } = useChipsSelect(propsWithDefault);
     const showCreatable = Boolean(creatable && creatableText && !filteredOptions.length && fieldValue);
     const handleFocus = (e)=>{

package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n extends Omit<ChipsInputProps<Option>, 'after'> {\n popupDirection?: 'top' \| 'bottom';\n options?: Option[];\n filterFn?:\n \| false\n \| ((\n value?: string,\n option?: Option,\n getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n ) => boolean);\n /*\n Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n /\n creatable?: boolean;\n /\n Отрисовка лоадера вместо списка опций в выпадающем списке\n /\n fetching?: boolean;\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /\n Показывать или скрывать уже выбранные опции\n /\n showSelected?: boolean;\n /\n Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n /\n creatableText?: string;\n /\n Текст который показывается если список опций пуст\n /\n emptyText?: string;\n /\n Событие срабатывающее перед onChange\n /\n onChangeStart?: (e: React.MouseEvent \| React.KeyboardEvent, option: Option) => void;\n /\n Закрытие выпадающего списка после выбора элемента\n /\n closeAfterSelect?: boolean;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n /\n addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' \| 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n ...chipsInputDefaultProps,\n emptyText: 'Ничего не найдено',\n creatableText: 'Создать значение',\n onChangeStart: noop,\n creatable: false,\n fetching: false,\n showSelected: true,\n closeAfterSelect: true,\n options: [],\n filterFn: defaultFilterFn,\n renderOption(props) {\n return <CustomSelectOption {...props} />;\n },\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n const {\n style,\n onFocus,\n onBlur,\n onKeyDown,\n className,\n fetching,\n renderOption,\n emptyText,\n getRef,\n getRootRef,\n disabled,\n placeholder,\n tabIndex,\n getOptionValue,\n getOptionLabel,\n showSelected,\n getNewOptionData,\n renderChip,\n popupDirection,\n creatable,\n filterFn,\n inputValue,\n creatableText,\n closeAfterSelect,\n onChangeStart,\n before,\n icon,\n options,\n fixDropdownWidth,\n forceDropdownPortal,\n ...restProps\n } = propsWithDefault;\n\n const { document } = useDOM();\n\n const [popperPlacement, setPopperPlacement] = React.useState<Placement \| undefined>(undefined);\n\n const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n const rootRef = useExternRef(getRef);\n const {\n fieldValue,\n selectedOptions = [],\n opened,\n setOpened,\n addOptionFromInput,\n filteredOptions,\n addOption,\n handleInputChange,\n clearInput,\n focusedOption,\n setFocusedOption,\n focusedOptionIndex,\n setFocusedOptionIndex,\n } = useChipsSelect(propsWithDefault);\n\n const showCreatable = Boolean(\n creatable && creatableText && !filteredOptions.length && fieldValue,\n );\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setOpened(true);\n setFocusedOptionIndex(null);\n onFocus!(e);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n onBlur!(e);\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!e.defaultPrevented && !creatable) {\n e.preventDefault();\n }\n };\n\n const handleClickOutside = (e: MouseEvent) => {\n const isClickOutsideFormField = !rootRef.current?.contains(e.target as Node);\n const isClickOutsideDropdown = !scrollBoxRef.current?.contains(e.target as Node);\n\n if (isClickOutsideFormField && isClickOutsideDropdown) {\n setOpened(false);\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n if (!item \|\| !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number \| null) => {\n const { length } = filteredOptions;\n\n if (index < 0) {\n index = length - 1;\n } else if (index >= length) {\n index = 0;\n }\n\n if (index === oldIndex) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number \| null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n index = index + 1;\n } else if (type === FOCUS_ACTION_PREV) {\n index = index - 1;\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown!(e);\n\n if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n }\n }\n\n if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n }\n }\n\n if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n if (focusedOptionIndex != null) {\n const option = filteredOptions[focusedOptionIndex];\n\n if (option) {\n onChangeStart!(e, option);\n\n if (!e.defaultPrevented) {\n addOption(option);\n setFocusedOptionIndex(null);\n clearInput();\n closeAfterSelect && setOpened(false);\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n }\n\n if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n setOpened(false);\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n setFocusedOption(filteredOptions[focusedOptionIndex]);\n } else if (focusedOptionIndex === null \|\| focusedOptionIndex === 0) {\n setFocusedOption(null);\n }\n }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n useGlobalEventListener(document, 'click', handleClickOutside);\n\n const renderChipWrapper = (renderChipProps: RenderChip<Option> \| undefined) => {\n if (renderChipProps === undefined) {\n return null;\n }\n const onRemoveWrapper = (e: React.MouseEvent \| undefined, value: ChipValue \| undefined) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n renderChipProps.onRemove?.(e, value);\n };\n\n return renderChip!({\n ...renderChipProps,\n onRemove: onRemoveWrapper,\n });\n };\n\n const isPopperDirectionTop = popperPlacement?.includes('top');\n\n const onPlacementChange = React.useCallback(\n (placement?: Placement) => {\n setPopperPlacement(placement);\n },\n [setPopperPlacement],\n );\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const toggleOpened = () => {\n setOpened((prevOpened) => !prevOpened);\n };\n\n return (\n <>\n <FormField\n getRootRef={rootRef}\n style={style}\n className={classNames(\n styles['ChipsSelect'],\n opened &&\n (isPopperDirectionTop\n ? styles['ChipsSelect--pop-up']\n : styles['ChipsSelect--pop-down']),\n className,\n )}\n disabled={disabled}\n role=\"application\"\n aria-disabled={disabled}\n aria-readonly={restProps.readOnly}\n after={\n <IconButton\n className={styles['ChipsSelect__dropdown']}\n activeMode=\"\"\n hoverMode=\"\"\n // TODO [>=6]: add label customization\n aria-label={opened ? 'Скрыть' : 'Развернуть'}\n onClick={toggleOpened}\n >\n {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n </IconButton>\n }\n before={before}\n >\n <ChipsInputBase\n {...restProps}\n tabIndex={tabIndex}\n value={selectedOptions}\n inputValue={fieldValue}\n getNewOptionData={getNewOptionData}\n getOptionLabel={getOptionLabel}\n getOptionValue={getOptionValue}\n renderChip={renderChipWrapper}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n getRef={getRef}\n disabled={disabled}\n onInputChange={handleInputChange}\n />\n </FormField>\n {opened && (\n <CustomSelectDropdown\n targetRef={rootRef}\n placement={popupDirection}\n scrollBoxRef={scrollBoxRef}\n onPlacementChange={onPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n >\n {showCreatable && (\n <CustomSelectOption\n hovered={focusedOptionIndex === 0}\n onMouseDown={addOptionFromInput}\n onMouseEnter={() => setFocusedOptionIndex(0)}\n >\n {creatableText}\n </CustomSelectOption>\n )}\n {!filteredOptions?.length && !showCreatable && emptyText ? (\n <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n ) : (\n filteredOptions.map((option: Option, index: number) => {\n const label = getOptionLabel!(option);\n const hovered =\n focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n const selected = selectedOptions.find((selectedOption: Option) => {\n return getOptionValue!(selectedOption) === getOptionValue!(option);\n });\n const value = getOptionValue!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderOption!({\n option,\n hovered: Boolean(hovered),\n children: label,\n selected: !!selected,\n getRootRef: (e) => {\n if (e) {\n return (chipsSelectOptions[index] = e);\n }\n return undefined;\n },\n onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n onChangeStart?.(e, option);\n\n if (!e.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter: () => setFocusedOptionIndex(index),\n })}\n </React.Fragment>\n );\n })\n )}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","noop","useChipsSelect","useExternRef","useGlobalEventListener","useDOM","defaultFilterFn","ChipsInputBase","chipsInputDefaultProps","CustomSelectDropdown","CustomSelectOption","DropdownIcon","FormField","IconButton","Footnote","styles","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","popperPlacement","setPopperPlacement","useState","undefined","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","isClickOutsideFormField","current","contains","target","isClickOutsideDropdown","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","role","aria-disabled","aria-readonly","readOnly","after","activeMode","hoverMode","aria-label","onClick","onInputChange","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n extends Omit<ChipsInputProps<Option>, 'after'> {\n popupDirection?: 'top' \| 'bottom';\n options?: Option[];\n filterFn?:\n \| false\n \| ((\n value?: string,\n option?: Option,\n getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n ) => boolean);\n /*\n Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n /\n creatable?: boolean;\n /\n Отрисовка лоадера вместо списка опций в выпадающем списке\n /\n fetching?: boolean;\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /\n Показывать или скрывать уже выбранные опции\n /\n showSelected?: boolean;\n /\n Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n /\n creatableText?: string;\n /\n Текст который показывается если список опций пуст\n /\n emptyText?: string;\n /\n Событие срабатывающее перед onChange\n /\n onChangeStart?: (e: React.MouseEvent \| React.KeyboardEvent, option: Option) => void;\n /\n Закрытие выпадающего списка после выбора элемента\n /\n closeAfterSelect?: boolean;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n /\n addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' \| 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n ...chipsInputDefaultProps,\n emptyText: 'Ничего не найдено',\n creatableText: 'Создать значение',\n onChangeStart: noop,\n creatable: false,\n fetching: false,\n showSelected: true,\n closeAfterSelect: true,\n options: [],\n filterFn: defaultFilterFn,\n renderOption(props) {\n return <CustomSelectOption {...props} />;\n },\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n const {\n style,\n onFocus,\n onBlur,\n onKeyDown,\n className,\n fetching,\n renderOption,\n emptyText,\n getRef,\n getRootRef,\n disabled,\n placeholder,\n tabIndex,\n getOptionValue,\n getOptionLabel,\n showSelected,\n getNewOptionData,\n renderChip,\n popupDirection,\n creatable,\n filterFn,\n inputValue,\n creatableText,\n closeAfterSelect,\n onChangeStart,\n before,\n icon,\n options,\n fixDropdownWidth,\n forceDropdownPortal,\n ...restProps\n } = propsWithDefault;\n\n const { document } = useDOM();\n\n const [popperPlacement, setPopperPlacement] = React.useState<Placement \| undefined>(undefined);\n\n const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n const rootRef = useExternRef(getRootRef);\n const {\n fieldValue,\n selectedOptions = [],\n opened,\n setOpened,\n addOptionFromInput,\n filteredOptions,\n addOption,\n handleInputChange,\n clearInput,\n focusedOption,\n setFocusedOption,\n focusedOptionIndex,\n setFocusedOptionIndex,\n } = useChipsSelect(propsWithDefault);\n\n const showCreatable = Boolean(\n creatable && creatableText && !filteredOptions.length && fieldValue,\n );\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setOpened(true);\n setFocusedOptionIndex(null);\n onFocus!(e);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n onBlur!(e);\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!e.defaultPrevented && !creatable) {\n e.preventDefault();\n }\n };\n\n const handleClickOutside = (e: MouseEvent) => {\n const isClickOutsideFormField = !rootRef.current?.contains(e.target as Node);\n const isClickOutsideDropdown = !scrollBoxRef.current?.contains(e.target as Node);\n\n if (isClickOutsideFormField && isClickOutsideDropdown) {\n setOpened(false);\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n if (!item \|\| !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number \| null) => {\n const { length } = filteredOptions;\n\n if (index < 0) {\n index = length - 1;\n } else if (index >= length) {\n index = 0;\n }\n\n if (index === oldIndex) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number \| null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n index = index + 1;\n } else if (type === FOCUS_ACTION_PREV) {\n index = index - 1;\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown!(e);\n\n if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n }\n }\n\n if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n }\n }\n\n if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n if (focusedOptionIndex != null) {\n const option = filteredOptions[focusedOptionIndex];\n\n if (option) {\n onChangeStart!(e, option);\n\n if (!e.defaultPrevented) {\n addOption(option);\n setFocusedOptionIndex(null);\n clearInput();\n closeAfterSelect && setOpened(false);\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n }\n\n if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n setOpened(false);\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n setFocusedOption(filteredOptions[focusedOptionIndex]);\n } else if (focusedOptionIndex === null \|\| focusedOptionIndex === 0) {\n setFocusedOption(null);\n }\n }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n useGlobalEventListener(document, 'click', handleClickOutside);\n\n const renderChipWrapper = (renderChipProps: RenderChip<Option> \| undefined) => {\n if (renderChipProps === undefined) {\n return null;\n }\n const onRemoveWrapper = (e: React.MouseEvent \| undefined, value: ChipValue \| undefined) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n renderChipProps.onRemove?.(e, value);\n };\n\n return renderChip!({\n ...renderChipProps,\n onRemove: onRemoveWrapper,\n });\n };\n\n const isPopperDirectionTop = popperPlacement?.includes('top');\n\n const onPlacementChange = React.useCallback(\n (placement?: Placement) => {\n setPopperPlacement(placement);\n },\n [setPopperPlacement],\n );\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const toggleOpened = () => {\n setOpened((prevOpened) => !prevOpened);\n };\n\n return (\n <>\n <FormField\n getRootRef={rootRef}\n style={style}\n className={classNames(\n styles['ChipsSelect'],\n opened &&\n (isPopperDirectionTop\n ? styles['ChipsSelect--pop-up']\n : styles['ChipsSelect--pop-down']),\n className,\n )}\n disabled={disabled}\n role=\"application\"\n aria-disabled={disabled}\n aria-readonly={restProps.readOnly}\n after={\n <IconButton\n className={styles['ChipsSelect__dropdown']}\n activeMode=\"\"\n hoverMode=\"\"\n // TODO [>=6]: add label customization\n aria-label={opened ? 'Скрыть' : 'Развернуть'}\n onClick={toggleOpened}\n >\n {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n </IconButton>\n }\n before={before}\n >\n <ChipsInputBase\n {...restProps}\n tabIndex={tabIndex}\n value={selectedOptions}\n inputValue={fieldValue}\n getNewOptionData={getNewOptionData}\n getOptionLabel={getOptionLabel}\n getOptionValue={getOptionValue}\n renderChip={renderChipWrapper}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n getRef={getRef}\n disabled={disabled}\n onInputChange={handleInputChange}\n />\n </FormField>\n {opened && (\n <CustomSelectDropdown\n targetRef={rootRef}\n placement={popupDirection}\n scrollBoxRef={scrollBoxRef}\n onPlacementChange={onPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n >\n {showCreatable && (\n <CustomSelectOption\n hovered={focusedOptionIndex === 0}\n onMouseDown={addOptionFromInput}\n onMouseEnter={() => setFocusedOptionIndex(0)}\n >\n {creatableText}\n </CustomSelectOption>\n )}\n {!filteredOptions?.length && !showCreatable && emptyText ? (\n <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n ) : (\n filteredOptions.map((option: Option, index: number) => {\n const label = getOptionLabel!(option);\n const hovered =\n focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n const selected = selectedOptions.find((selectedOption: Option) => {\n return getOptionValue!(selectedOption) === getOptionValue!(option);\n });\n const value = getOptionValue!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderOption!({\n option,\n hovered: Boolean(hovered),\n children: label,\n selected: !!selected,\n getRootRef: (e) => {\n if (e) {\n return (chipsSelectOptions[index] = e);\n }\n return undefined;\n },\n onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n onChangeStart?.(e, option);\n\n if (!e.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter: () => setFocusedOptionIndex(index),\n })}\n </React.Fragment>\n );\n })\n )}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","noop","useChipsSelect","useExternRef","useGlobalEventListener","useDOM","defaultFilterFn","ChipsInputBase","chipsInputDefaultProps","CustomSelectDropdown","CustomSelectOption","DropdownIcon","FormField","IconButton","Footnote","styles","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","popperPlacement","setPopperPlacement","useState","undefined","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","isClickOutsideFormField","current","contains","target","isClickOutsideDropdown","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","role","aria-disabled","aria-readonly","readOnly","after","activeMode","hoverMode","aria-label","onClick","onInputChange","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}

package/dist/cssm/components/CustomScrollView/CustomScrollView.d.ts CHANGED Viewed

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { DOMProps } from '../../lib/dom';
+import type { HasRootRef } from '../../types';
 import { TrackerOptionsProps } from './useTrackerVisibility';
-export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
+export interface CustomScrollViewProps extends React.AllHTMLAttributes<HTMLDivElement>, DOMProps, // TODO [>=6]: remove
+HasRootRef<HTMLDivElement>, TrackerOptionsProps {
     windowResize?: boolean;
     boxRef?: React.Ref<HTMLDivElement>;
     className?: HTMLDivElement['className'];
     onScroll?(event: React.UIEvent<HTMLDivElement>): void;
     children: React.ReactNode;
 }
-export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, onScroll, }: CustomScrollViewProps) => React.JSX.Element;
+export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, onScroll, getRootRef, ...restProps }: CustomScrollViewProps) => React.JSX.Element;
 //# sourceMappingURL=CustomScrollView.d.ts.map

package/dist/cssm/components/CustomScrollView/CustomScrollView.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,QAAQ,EAAU,MAAM,eAAe,CAAC;AAGjD,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAGnF,MAAM,WAAW,~~qBAAsB~~,SAAQ,QAAQ,EAAE,mBAAmB;~~IAC1E~~,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,~~wHAQ1B~~,qBAAqB,~~sBAyKvB~~,CAAC"}
1	+ {"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,QAAQ,EAAU,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAGnF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,QAAQ,EAAE,qBAAqB;AAC/B,UAAU,CAAC,cAAc,CAAC,EAC1B,mBAAmB;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,iJAU1B,qBAAqB,sBA6KvB,CAAC"}

package/dist/cssm/components/CustomScrollView/CustomScrollView.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { stopPropagation } from '../../lib/utils';
 import { useTrackerVisibility } from './useTrackerVisibility';
 import styles from './CustomScrollView.module.css';
-export const CustomScrollView = ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar = false, autoHideScrollbarDelay, onScroll })=>{
+export const CustomScrollView = ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar = false, autoHideScrollbarDelay, onScroll, getRootRef, ...restProps })=>{
     const { document, window } = useDOM();
     const ratio = React.useRef(NaN);
     const lastTrackerTop = React.useRef(0);
@@ -124,7 +124,9 @@ export const CustomScrollView = ({ className, children, boxRef: externalBoxRef,
         subscribe(document);
     };
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['CustomScrollView'], className)
+        className: classNames(styles['CustomScrollView'], className),
+        ref: getRootRef,
+        ...restProps
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['CustomScrollView__box'],
         tabIndex: -1,

package/dist/cssm/components/CustomScrollView/CustomScrollView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nexport interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {\n windowResize?: boolean;\n boxRef?: React.Ref<HTMLDivElement>;\n className?: HTMLDivElement['className'];\n onScroll?(event: React.UIEvent<HTMLDivElement>): void;\n children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n className,\n children,\n boxRef: externalBoxRef,\n windowResize,\n autoHideScrollbar = false,\n autoHideScrollbarDelay,\n onScroll,\n}: CustomScrollViewProps) => {\n const { document, window } = useDOM();\n\n const ratio = React.useRef(NaN);\n const lastTrackerTop = React.useRef(0);\n const clientHeight = React.useRef(0);\n const trackerHeight = React.useRef(0);\n const scrollHeight = React.useRef(0);\n const transformProp = React.useRef('');\n const startY = React.useRef(0);\n const trackerTop = React.useRef(0);\n\n const boxRef = useExternRef(externalBoxRef);\n\n const barY = React.useRef<HTMLDivElement>(null);\n const trackerY = React.useRef<HTMLDivElement>(null);\n\n const setTrackerPosition = (scrollTop: number) => {\n lastTrackerTop.current = scrollTop;\n if (trackerY.current !== null) {\n (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n }\n };\n\n const setTrackerPositionFromScroll = (scrollTop: number) => {\n const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n };\n\n const resize = () => {\n if (!boxRef.current \|\| !barY.current \|\| !trackerY.current) {\n return;\n }\n const localClientHeight = boxRef.current.clientHeight;\n const localScrollHeight = boxRef.current.scrollHeight;\n const localRatio = localClientHeight / localScrollHeight;\n const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n ratio.current = localRatio;\n clientHeight.current = localClientHeight;\n scrollHeight.current = localScrollHeight;\n trackerHeight.current = localTrackerHeight;\n\n if (localRatio >= 1) {\n barY.current.style.display = 'none';\n } else {\n barY.current.style.display = '';\n trackerY.current.style.height = `${localTrackerHeight}px`;\n setTrackerPositionFromScroll(boxRef.current.scrollTop);\n }\n };\n\n const resizeHandler = useEventListener('resize', resize);\n\n useIsomorphicLayoutEffect(() => {\n if (windowResize && window) {\n resizeHandler.add(window);\n }\n }, [windowResize, window]);\n\n useIsomorphicLayoutEffect(() => {\n let style = trackerY.current?.style;\n let prop = '';\n if (style !== undefined) {\n if ('transform' in style) {\n prop = 'transform';\n } else if ('webkitTransform' in style) {\n prop = 'webkitTransform';\n }\n }\n transformProp.current = prop;\n }, []);\n\n useIsomorphicLayoutEffect(resize);\n\n const setScrollPositionFromTracker = (trackerTop: number) => {\n const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n if (boxRef.current !== null) {\n boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n }\n };\n\n const onMove = (e: MouseEvent) => {\n e.preventDefault();\n const diff = e.clientY - startY.current;\n const position = Math.min(\n Math.max(trackerTop.current + diff, 0),\n clientHeight.current - trackerHeight.current,\n );\n\n setScrollPositionFromTracker(position);\n };\n\n const {\n trackerVisible,\n onTargetScroll,\n onTrackerDragStart,\n onTrackerDragStop,\n onTrackerMouseEnter,\n onTrackerMouseLeave,\n } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n const onUp = (e: MouseEvent) => {\n e.preventDefault();\n\n if (autoHideScrollbar) {\n onTrackerDragStop();\n }\n\n unsubscribe();\n };\n\n const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n if (ratio.current >= 1 \|\| !boxRef.current) {\n return;\n }\n\n if (autoHideScrollbar) {\n onTargetScroll();\n }\n\n setTrackerPositionFromScroll(boxRef.current.scrollTop);\n onScroll?.(event);\n };\n\n const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n function subscribe(el: Document \| undefined) {\n if (el) {\n listeners.forEach((l) => l.add(el));\n }\n }\n\n function unsubscribe() {\n listeners.forEach((l) => l.remove());\n }\n\n const onDragStart = (e: React.MouseEvent) => {\n e.preventDefault();\n startY.current = e.clientY;\n trackerTop.current = lastTrackerTop.current;\n\n if (autoHideScrollbar) {\n onTrackerDragStart();\n }\n\n subscribe(document);\n };\n\n return (\n <div className={classNames(styles['CustomScrollView'], className)}>\n <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n {children}\n </div>\n\n <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n <div\n className={classNames(\n styles['CustomScrollView__trackerY'],\n !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n )}\n onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n ref={trackerY}\n onMouseDown={onDragStart}\n />\n </div>\n </div>\n );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useDOM","useIsomorphicLayoutEffect","stopPropagation","useTrackerVisibility","styles","CustomScrollView","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","tabIndex","ref","onClick","onMouseEnter","onMouseLeave","onMouseDown"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport type { HasRootRef } from '../../types';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nexport interface CustomScrollViewProps\n extends React.AllHTMLAttributes<HTMLDivElement>,\n DOMProps, // TODO [>=6]: remove\n HasRootRef<HTMLDivElement>,\n TrackerOptionsProps {\n windowResize?: boolean;\n boxRef?: React.Ref<HTMLDivElement>;\n className?: HTMLDivElement['className'];\n onScroll?(event: React.UIEvent<HTMLDivElement>): void;\n children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n className,\n children,\n boxRef: externalBoxRef,\n windowResize,\n autoHideScrollbar = false,\n autoHideScrollbarDelay,\n onScroll,\n getRootRef,\n ...restProps\n}: CustomScrollViewProps) => {\n const { document, window } = useDOM();\n\n const ratio = React.useRef(NaN);\n const lastTrackerTop = React.useRef(0);\n const clientHeight = React.useRef(0);\n const trackerHeight = React.useRef(0);\n const scrollHeight = React.useRef(0);\n const transformProp = React.useRef('');\n const startY = React.useRef(0);\n const trackerTop = React.useRef(0);\n\n const boxRef = useExternRef(externalBoxRef);\n\n const barY = React.useRef<HTMLDivElement>(null);\n const trackerY = React.useRef<HTMLDivElement>(null);\n\n const setTrackerPosition = (scrollTop: number) => {\n lastTrackerTop.current = scrollTop;\n if (trackerY.current !== null) {\n (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n }\n };\n\n const setTrackerPositionFromScroll = (scrollTop: number) => {\n const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n };\n\n const resize = () => {\n if (!boxRef.current \|\| !barY.current \|\| !trackerY.current) {\n return;\n }\n const localClientHeight = boxRef.current.clientHeight;\n const localScrollHeight = boxRef.current.scrollHeight;\n const localRatio = localClientHeight / localScrollHeight;\n const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n ratio.current = localRatio;\n clientHeight.current = localClientHeight;\n scrollHeight.current = localScrollHeight;\n trackerHeight.current = localTrackerHeight;\n\n if (localRatio >= 1) {\n barY.current.style.display = 'none';\n } else {\n barY.current.style.display = '';\n trackerY.current.style.height = `${localTrackerHeight}px`;\n setTrackerPositionFromScroll(boxRef.current.scrollTop);\n }\n };\n\n const resizeHandler = useEventListener('resize', resize);\n\n useIsomorphicLayoutEffect(() => {\n if (windowResize && window) {\n resizeHandler.add(window);\n }\n }, [windowResize, window]);\n\n useIsomorphicLayoutEffect(() => {\n let style = trackerY.current?.style;\n let prop = '';\n if (style !== undefined) {\n if ('transform' in style) {\n prop = 'transform';\n } else if ('webkitTransform' in style) {\n prop = 'webkitTransform';\n }\n }\n transformProp.current = prop;\n }, []);\n\n useIsomorphicLayoutEffect(resize);\n\n const setScrollPositionFromTracker = (trackerTop: number) => {\n const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n if (boxRef.current !== null) {\n boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n }\n };\n\n const onMove = (e: MouseEvent) => {\n e.preventDefault();\n const diff = e.clientY - startY.current;\n const position = Math.min(\n Math.max(trackerTop.current + diff, 0),\n clientHeight.current - trackerHeight.current,\n );\n\n setScrollPositionFromTracker(position);\n };\n\n const {\n trackerVisible,\n onTargetScroll,\n onTrackerDragStart,\n onTrackerDragStop,\n onTrackerMouseEnter,\n onTrackerMouseLeave,\n } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n const onUp = (e: MouseEvent) => {\n e.preventDefault();\n\n if (autoHideScrollbar) {\n onTrackerDragStop();\n }\n\n unsubscribe();\n };\n\n const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n if (ratio.current >= 1 \|\| !boxRef.current) {\n return;\n }\n\n if (autoHideScrollbar) {\n onTargetScroll();\n }\n\n setTrackerPositionFromScroll(boxRef.current.scrollTop);\n onScroll?.(event);\n };\n\n const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n function subscribe(el: Document \| undefined) {\n if (el) {\n listeners.forEach((l) => l.add(el));\n }\n }\n\n function unsubscribe() {\n listeners.forEach((l) => l.remove());\n }\n\n const onDragStart = (e: React.MouseEvent) => {\n e.preventDefault();\n startY.current = e.clientY;\n trackerTop.current = lastTrackerTop.current;\n\n if (autoHideScrollbar) {\n onTrackerDragStart();\n }\n\n subscribe(document);\n };\n\n return (\n <div\n className={classNames(styles['CustomScrollView'], className)}\n ref={getRootRef}\n {...restProps}\n >\n <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n {children}\n </div>\n\n <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n <div\n className={classNames(\n styles['CustomScrollView__trackerY'],\n !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n )}\n onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n ref={trackerY}\n onMouseDown={onDragStart}\n />\n </div>\n </div>\n );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useDOM","useIsomorphicLayoutEffect","stopPropagation","useTrackerVisibility","styles","CustomScrollView","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","getRootRef","restProps","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","ref","tabIndex","onClick","onMouseEnter","onMouseLeave","onMouseDown"],"mappings":"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"}

package/dist/cssm/components/CustomSelect/CustomSelect.d.ts CHANGED Viewed

@@ -12,6 +12,9 @@ export interface CustomSelectOptionInterface {
     disabled?: boolean;
     [index: string]: any;
 }
+interface CustomSelectRenderOption extends CustomSelectOptionProps {
+    option?: CustomSelectOptionInterface;
+}
 export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {
     /**
      * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
@@ -41,7 +44,7 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
      * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии
      * опции.
      */
-    renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
+    renderOption?: (props: CustomSelectRenderOption) => React.ReactNode;
     /**
      * Рендер-проп для кастомного рендера содержимого дропдауна.
      * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.

package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAE/E,OAAO,EAEL,uBAAuB,EACxB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAA2B,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAiFlG,KAAK,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC;AAE1E,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,cAAc,EAAE,mBAAmB;IACzF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,CACd,CAAC,EAAE,KAAK,CAAC,WAAW,EACpB,OAAO,EAAE,2BAA2B,EAAE,KACnC,IAAI,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,EAAE,2BAA2B,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,GACL,CAAC,CACC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,2BAA2B,EACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,2BAA2B,CAAC,KAAK,MAAM,KACtE,OAAO,CAAC,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,~~uBAAuB~~,KAAK,KAAK,CAAC,SAAS,CAAC;~~IACnE~~;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,qBAsmB9C"}
1	+ {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAE/E,OAAO,EAEL,uBAAuB,EACxB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAA2B,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAiFlG,KAAK,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC;AAE1E,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,UAAU,wBAAyB,SAAQ,uBAAuB;IAChE,MAAM,CAAC,EAAE,2BAA2B,CAAC;CACtC;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,cAAc,EAAE,mBAAmB;IACzF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,CACd,CAAC,EAAE,KAAK,CAAC,WAAW,EACpB,OAAO,EAAE,2BAA2B,EAAE,KACnC,IAAI,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,EAAE,2BAA2B,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,GACL,CAAC,CACC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,2BAA2B,EACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,2BAA2B,CAAC,KAAK,MAAM,KACtE,OAAO,CAAC,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,qBAsmB9C"}