@vkontakte/vkui 8.2.0 → 8.2.2

package/dist/components/Snackbar/subcomponents/Basic/Basic.js

@@ -1,7 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../../../hooks/useAdaptivity.js";
+import { ColorSchemeProvider } from "../../../ColorSchemeProvider/ColorSchemeProvider.js";
 import { RootComponent } from "../../../RootComponent/RootComponent.js";
 import { Paragraph } from "../../../Typography/Paragraph/Paragraph.js";
 import { Subhead } from "../../../Typography/Subhead/Subhead.js";
@@ -17,9 +19,9 @@ const densityClassNames = {
 export function Basic({ layout: layoutProps, action, after, before, mode, subtitle, children, ...restProps }) {
     const { density = 'none' } = useAdaptivity();
     const layout = after || subtitle ? 'vertical' : 'none';
-    return /*#__PURE__*/ _jsxs(RootComponent, {
+    const snackbar = /*#__PURE__*/ _jsxs(RootComponent, {
         ...restProps,
-        baseClassName: classNames("vkuiBasic__body", stylesLayout[layoutProps || layout], density !== 'compact' && densityClassNames[density], mode === 'dark' && "vkuiBasic__modeDark"),
+        baseClassName: classNames("vkuiBasic__body", stylesLayout[layoutProps || layout], density !== 'compact' && densityClassNames[density]),
         children: [
             before && /*#__PURE__*/ _jsx("div", {
                 className: "vkuiBasic__before",
@@ -48,6 +50,13 @@ export function Basic({ layout: layoutProps, action, after, before, mode, subtit
             })
         ]
     });
+    if (mode === 'dark') {
+        return /*#__PURE__*/ _jsx(ColorSchemeProvider, {
+            value: "dark",
+            children: snackbar
+        });
+    }
+    return snackbar;
 }
 
 //# sourceMappingURL=Basic.js.map

package/dist/components/Snackbar/subcomponents/Basic/Basic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../../hooks/useAdaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n  none: styles.layoutNone,\n  vertical: styles.layoutVertical,\n  horizontal: styles.layoutHorizontal,\n};\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  regular: styles.densityRegular,\n};\n\nexport interface BasicProps {\n  /**\n   * Элемент действия.\n   * Не может использоваться одновременно с `subtitle`.\n   */\n  action?: React.ReactNode | undefined;\n\n  /**\n   * Контент в правой части, может быть иконкой 24x24.\n   */\n  after?: React.ReactNode | undefined;\n\n  /**\n   * Варианты расположения кнопки действия\n   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n   * имеет значение `vertical`, в остальных случаях `horizontal`.\n   */\n  layout?: 'vertical' | 'horizontal' | undefined;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`.\n   */\n  before?: React.ReactNode | undefined;\n\n  /**\n   * Задает стиль снекбара.\n   */\n  mode?: 'default' | 'dark' | undefined;\n\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`.\n   */\n  subtitle?: React.ReactNode | undefined;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n  layout: layoutProps,\n  action,\n  after,\n  before,\n  mode,\n  subtitle,\n  children,\n  ...restProps\n}: SnackbarBasicProps): React.ReactNode {\n  const { density = 'none' } = useAdaptivity();\n  const layout = after || subtitle ? 'vertical' : 'none';\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.body,\n        stylesLayout[layoutProps || layout],\n        density !== 'compact' && densityClassNames[density],\n        mode === 'dark' && styles.modeDark,\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        <Paragraph className={styles.contentText}>{children}</Paragraph>\n        {subtitle && !action && <Subhead className={styles.contentSubtitle}>{subtitle}</Subhead>}\n\n        {action && !subtitle && <div className={styles.action}>{action}</div>}\n      </div>\n\n      {after && <div className={styles.after}>{after}</div>}\n    </RootComponent>\n  );\n}\n"],"names":["classNames","useAdaptivity","RootComponent","Paragraph","Subhead","stylesLayout","none","vertical","horizontal","densityClassNames","regular","Basic","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","density","baseClassName","div","className"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,qCAAkC;AAEhE,SAASC,aAAa,QAAQ,0CAAuC;AACrE,SAASC,SAAS,QAAQ,6CAA0C;AACpE,SAASC,OAAO,QAAQ,yCAAsC;AAG9D,MAAMC,eAAe;IACnBC,IAAI;IACJC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,oBAAoB;IACxBH,IAAI;IACJI,OAAO;AACT;AA2CA,OAAO,SAASC,MAAM,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGpB;IAC7B,MAAMW,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAAChB;QACE,GAAGkB,SAAS;QACbE,eAAetB,8BAEbK,YAAY,CAACQ,eAAeD,OAAO,EACnCS,YAAY,aAAaZ,iBAAiB,CAACY,QAAQ,EACnDJ,SAAS;;YAGVD,wBAAU,KAACO;gBAAIC,SAAS;0BAAkBR;;0BAE3C,MAACO;gBAAIC,SAAS;;kCACZ,KAACrB;wBAAUqB,SAAS;kCAAuBL;;oBAC1CD,YAAY,CAACJ,wBAAU,KAACV;wBAAQoB,SAAS;kCAA2BN;;oBAEpEJ,UAAU,CAACI,0BAAY,KAACK;wBAAIC,SAAS;kCAAkBV;;;;YAGzDC,uBAAS,KAACQ;gBAAIC,SAAS;0BAAiBT;;;;AAG/C"}
+{"version":3,"sources":["../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../../hooks/useAdaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../../../types';\nimport { ColorSchemeProvider } from '../../../ColorSchemeProvider/ColorSchemeProvider';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n  none: styles.layoutNone,\n  vertical: styles.layoutVertical,\n  horizontal: styles.layoutHorizontal,\n};\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  regular: styles.densityRegular,\n};\n\nexport interface BasicProps {\n  /**\n   * Элемент действия.\n   * Не может использоваться одновременно с `subtitle`.\n   */\n  action?: React.ReactNode | undefined;\n\n  /**\n   * Контент в правой части, может быть иконкой 24x24.\n   */\n  after?: React.ReactNode | undefined;\n\n  /**\n   * Варианты расположения кнопки действия\n   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n   * имеет значение `vertical`, в остальных случаях `horizontal`.\n   */\n  layout?: 'vertical' | 'horizontal' | undefined;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`.\n   */\n  before?: React.ReactNode | undefined;\n\n  /**\n   * Задает стиль снекбара.\n   */\n  mode?: 'default' | 'dark' | undefined;\n\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`.\n   */\n  subtitle?: React.ReactNode | undefined;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n  layout: layoutProps,\n  action,\n  after,\n  before,\n  mode,\n  subtitle,\n  children,\n  ...restProps\n}: SnackbarBasicProps): React.ReactNode {\n  const { density = 'none' } = useAdaptivity();\n  const layout = after || subtitle ? 'vertical' : 'none';\n\n  const snackbar = (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.body,\n        stylesLayout[layoutProps || layout],\n        density !== 'compact' && densityClassNames[density],\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        <Paragraph className={styles.contentText}>{children}</Paragraph>\n        {subtitle && !action && <Subhead className={styles.contentSubtitle}>{subtitle}</Subhead>}\n\n        {action && !subtitle && <div className={styles.action}>{action}</div>}\n      </div>\n\n      {after && <div className={styles.after}>{after}</div>}\n    </RootComponent>\n  );\n\n  if (mode === 'dark') {\n    return <ColorSchemeProvider value=\"dark\">{snackbar}</ColorSchemeProvider>;\n  }\n\n  return snackbar;\n}\n"],"names":["React","classNames","useAdaptivity","ColorSchemeProvider","RootComponent","Paragraph","Subhead","stylesLayout","none","vertical","horizontal","densityClassNames","regular","Basic","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","density","snackbar","baseClassName","div","className","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,qCAAkC;AAEhE,SAASC,mBAAmB,QAAQ,sDAAmD;AACvF,SAASC,aAAa,QAAQ,0CAAuC;AACrE,SAASC,SAAS,QAAQ,6CAA0C;AACpE,SAASC,OAAO,QAAQ,yCAAsC;AAG9D,MAAMC,eAAe;IACnBC,IAAI;IACJC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,oBAAoB;IACxBH,IAAI;IACJI,OAAO;AACT;AA2CA,OAAO,SAASC,MAAM,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGrB;IAC7B,MAAMY,SAASG,SAASG,WAAW,aAAa;IAEhD,MAAMI,yBACJ,MAACpB;QACE,GAAGkB,SAAS;QACbG,eAAexB,8BAEbM,YAAY,CAACQ,eAAeD,OAAO,EACnCS,YAAY,aAAaZ,iBAAiB,CAACY,QAAQ;;YAGpDL,wBAAU,KAACQ;gBAAIC,SAAS;0BAAkBT;;0BAE3C,MAACQ;gBAAIC,SAAS;;kCACZ,KAACtB;wBAAUsB,SAAS;kCAAuBN;;oBAC1CD,YAAY,CAACJ,wBAAU,KAACV;wBAAQqB,SAAS;kCAA2BP;;oBAEpEJ,UAAU,CAACI,0BAAY,KAACM;wBAAIC,SAAS;kCAAkBX;;;;YAGzDC,uBAAS,KAACS;gBAAIC,SAAS;0BAAiBV;;;;IAI7C,IAAIE,SAAS,QAAQ;QACnB,qBAAO,KAAChB;YAAoByB,OAAM;sBAAQJ;;IAC5C;IAEA,OAAOA;AACT"}