@cloud-ru/ds-popup-private 1.1.1 → 1.1.2-preview-86f06def.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/components/FooterActions/FooterActions.d.ts +4 -1
  3. package/dist/cjs/components/FooterActions/FooterActions.js +7 -2
  4. package/dist/cjs/components/PopupBody/styles.module.css +1 -1
  5. package/dist/cjs/style.css +1 -1
  6. package/dist/esm/components/FooterActions/FooterActions.d.ts +4 -1
  7. package/dist/esm/components/FooterActions/FooterActions.js +7 -2
  8. package/dist/esm/components/PopupBody/styles.module.css +1 -1
  9. package/dist/esm/style.css +1 -1
  10. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  11. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  12. package/package.json +7 -7
  13. package/src/components/FooterActions/FooterActions.tsx +12 -3
  14. package/src/components/PopupBody/styles.module.scss +1 -1
package/README.md CHANGED
@@ -12,7 +12,7 @@
12
12
  | `additionalButton` | `BottomSheetActionButton` | — | Дополнительная (третья) кнопка (по умолчанию `view='simple'`, `appearance='neutral'`). |
13
13
  | `approveButton` | `BottomSheetActionButton` | — | Основная кнопка (по умолчанию `view='filled'`, `appearance='primary'`). |
14
14
  | `cancelButton` | `BottomSheetActionButton` | — | Кнопка отмены (по умолчанию `view='outline'`, `appearance='neutral'`). |
15
- | `footerActionsOrientation` | `"horizontal"` \| `"vertical"` | `horizontal` | Ориентация кнопок при ровно двух действиях. |
15
+ | `footerActionsOrientation` | `"horizontal"` \| `"vertical"` | — | Ориентация кнопок. Без значения раскладку выбирает число действий: два — в строку, три — стопкой. <br/> Заданное значение приоритетнее; на `bottomSheet` три кнопки в ряд не помещаются и остаются стопкой. |
16
16
  | `size` | `"l"` \| `"m"` \| `"s"` | — | Размер кнопок футера. Задаётся на уровне группы (как в `ButtonGroup`), не по кнопке — <br/> в макетах все действия футера одного размера. Нужен потребителям с собственной осью <br/> размера (календарные дропдауны: 24 / 32 / 40 при s / m / l). У modal, drawer и <br/> bottom-sheet своей оси нет, но кит рисует их футеры на `l` — эти поверхности <br/> передают `size='l'` явно. |
17
17
  | `surface` | `"bottomSheet"` \| `"window"` | `window` | Поверхность overlay'я — определяет раскладку кнопок: <br/> - `window` (desktop, дефолт): 1–2 кнопки компактно вправо, 3 — стопка (primary сверху). <br/> - `bottomSheet` (mobile): 1 → вправо, 2 → space-between, 3 → стопка с инверсией (primary внизу). |
18
18
  | `testIds` | `FooterActionsTestIds` | — | Идентификаторы слотов конкретного компонента (`bottom-sheet` / `modal` / `drawer`). |
package/dist/cjs/components/FooterActions/FooterActions.d.ts CHANGED
@@ -23,7 +23,10 @@ export type FooterActionsProps = {
23
23
  * передают `size='l'` явно.
24
24
  */
25
25
  size?: Size;
26
- /** Ориентация кнопок при ровно двух действиях. */
26
+ /**
27
+ * Ориентация кнопок. Без значения раскладку выбирает число действий: два — в строку, три — стопкой.
28
+ * Заданное значение приоритетнее; на `bottomSheet` три кнопки в ряд не помещаются и остаются стопкой.
29
+ */
27
30
  footerActionsOrientation?: FooterActionsOrientation;
28
31
  /** Идентификаторы слотов конкретного компонента (`bottom-sheet` / `modal` / `drawer`). */
29
32
  testIds: FooterActionsTestIds;
package/dist/cjs/components/FooterActions/FooterActions.js CHANGED
@@ -14,18 +14,23 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
14
14
  * Единый источник правды для `BottomSheet`, `Modal` и `Drawer` (adaptive-маппинг 1:1).
15
15
  * Возвращает `null`, если ни одной кнопки не передано.
16
16
  */
17
- function FooterActions({ approveButton, cancelButton, additionalButton, size, footerActionsOrientation = constants_1.FOOTER_ACTIONS_ORIENTATION.Horizontal, testIds, actionsClassName, surface = 'window', }) {
17
+ function FooterActions({ approveButton, cancelButton, additionalButton, size, footerActionsOrientation, testIds, actionsClassName, surface = 'window', }) {
18
18
  const actionCount = [approveButton, cancelButton, additionalButton].filter(Boolean).length;
19
19
  if (actionCount === 0) {
20
20
  return null;
21
21
  }
22
22
  const isMobile = surface === 'bottomSheet';
23
- const isVerticalActions = footerActionsOrientation === constants_1.FOOTER_ACTIONS_ORIENTATION.Vertical || actionCount === 3;
23
+ const isStackOnly = isMobile && actionCount === 3;
24
+ const isVerticalActions = !isStackOnly && footerActionsOrientation
25
+ ? footerActionsOrientation === constants_1.FOOTER_ACTIONS_ORIENTATION.Vertical
26
+ : actionCount === 3;
24
27
  const hasTertiary = Boolean(additionalButton);
25
28
  // Раскладка кнопок футера зависит от поверхности:
26
29
  // - desktop (window): пара `cancel + approve` → компактно вправо (`compact`); пара с tertiary
27
30
  // (`additional + approve`) → space-between, tertiary слева / primary справа (Figma
28
31
  // `popupDropdownFooter` — календарные дропдауны); 3 → стопка, primary сверху (ButtonGroup default).
32
+ // Явный `footerActionsOrientation` перекрывает выбор по числу действий — кроме трёх кнопок
33
+ // на `bottomSheet`: в мобильную ширину они в ряд не помещаются.
29
34
  // - mobile (bottomSheet): 1 → вправо (`single`); 2 → space-between (`break`); 3 → стопка, инверсия (`stackInverted`).
30
35
  const useBreak = !isVerticalActions && actionCount === 2 && (isMobile || (!isMobile && hasTertiary));
31
36
  const isSingle = isMobile && actionCount === 1;
package/dist/cjs/components/PopupBody/styles.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  box-sizing:border-box;
7
7
  min-height:0;
8
8
  padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
9
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
9
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
10
10
  }
11
11
 
12
12
  .root[data-no-padding]{
package/dist/cjs/style.css CHANGED
@@ -26,7 +26,7 @@
26
26
  box-sizing:border-box;
27
27
  min-height:0;
28
28
  padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
29
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
29
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
30
30
  }
31
31
 
32
32
  .root[data-no-padding]{
package/dist/esm/components/FooterActions/FooterActions.d.ts CHANGED
@@ -23,7 +23,10 @@ export type FooterActionsProps = {
23
23
  * передают `size='l'` явно.
24
24
  */
25
25
  size?: Size;
26
- /** Ориентация кнопок при ровно двух действиях. */
26
+ /**
27
+ * Ориентация кнопок. Без значения раскладку выбирает число действий: два — в строку, три — стопкой.
28
+ * Заданное значение приоритетнее; на `bottomSheet` три кнопки в ряд не помещаются и остаются стопкой.
29
+ */
27
30
  footerActionsOrientation?: FooterActionsOrientation;
28
31
  /** Идентификаторы слотов конкретного компонента (`bottom-sheet` / `modal` / `drawer`). */
29
32
  testIds: FooterActionsTestIds;
package/dist/esm/components/FooterActions/FooterActions.js CHANGED
@@ -8,18 +8,23 @@ import styles from './styles.module.css';
8
8
  * Единый источник правды для `BottomSheet`, `Modal` и `Drawer` (adaptive-маппинг 1:1).
9
9
  * Возвращает `null`, если ни одной кнопки не передано.
10
10
  */
11
- export function FooterActions({ approveButton, cancelButton, additionalButton, size, footerActionsOrientation = FOOTER_ACTIONS_ORIENTATION.Horizontal, testIds, actionsClassName, surface = 'window', }) {
11
+ export function FooterActions({ approveButton, cancelButton, additionalButton, size, footerActionsOrientation, testIds, actionsClassName, surface = 'window', }) {
12
12
  const actionCount = [approveButton, cancelButton, additionalButton].filter(Boolean).length;
13
13
  if (actionCount === 0) {
14
14
  return null;
15
15
  }
16
16
  const isMobile = surface === 'bottomSheet';
17
- const isVerticalActions = footerActionsOrientation === FOOTER_ACTIONS_ORIENTATION.Vertical || actionCount === 3;
17
+ const isStackOnly = isMobile && actionCount === 3;
18
+ const isVerticalActions = !isStackOnly && footerActionsOrientation
19
+ ? footerActionsOrientation === FOOTER_ACTIONS_ORIENTATION.Vertical
20
+ : actionCount === 3;
18
21
  const hasTertiary = Boolean(additionalButton);
19
22
  // Раскладка кнопок футера зависит от поверхности:
20
23
  // - desktop (window): пара `cancel + approve` → компактно вправо (`compact`); пара с tertiary
21
24
  // (`additional + approve`) → space-between, tertiary слева / primary справа (Figma
22
25
  // `popupDropdownFooter` — календарные дропдауны); 3 → стопка, primary сверху (ButtonGroup default).
26
+ // Явный `footerActionsOrientation` перекрывает выбор по числу действий — кроме трёх кнопок
27
+ // на `bottomSheet`: в мобильную ширину они в ряд не помещаются.
23
28
  // - mobile (bottomSheet): 1 → вправо (`single`); 2 → space-between (`break`); 3 → стопка, инверсия (`stackInverted`).
24
29
  const useBreak = !isVerticalActions && actionCount === 2 && (isMobile || (!isMobile && hasTertiary));
25
30
  const isSingle = isMobile && actionCount === 1;
package/dist/esm/components/PopupBody/styles.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  box-sizing:border-box;
7
7
  min-height:0;
8
8
  padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
9
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
9
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
10
10
  }
11
11
 
12
12
  .root[data-no-padding]{
package/dist/esm/style.css CHANGED
@@ -26,7 +26,7 @@
26
26
  box-sizing:border-box;
27
27
  min-height:0;
28
28
  padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
29
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
29
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
30
30
  }
31
31
 
32
32
  .root[data-no-padding]{