@alfalab/core-components 22.0.0 → 22.3.1

package/picker-button/esm/field/index.d.ts

@@ -1 +1 @@
-export * from "../Component-f6f3d8f0";
+export * from "../Component-192bd0bb";

package/picker-button/esm/field/index.js

@@ -3,4 +3,4 @@ import 'classnames';
 import '../../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-export { F as Field } from '../Component-f6f3d8f0.js';
+export { F as Field } from '../Component-192bd0bb.js';

package/picker-button/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1qj07 */
-.picker-button__container_1o57d {
+/* hash: phm5j */
+.picker-button__container_1qgwg {
     min-width: auto;
 }

package/picker-button/esm/index.js

@@ -3,6 +3,6 @@ import 'classnames';
 import '../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-import './Component-f6f3d8f0.js';
+import './Component-192bd0bb.js';
 import '../../select/esm';
 export { PickerButton } from './Component.js';

package/picker-button/field/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var field_Component = require('../Component-4138fa44.js');
+var field_Component = require('../Component-14de2929.js');
 require('react');
 require('classnames');
 require('../../button');

package/picker-button/field/index.css

@@ -1,4 +1,4 @@
-/* hash: 1c7yf */
+/* hash: tckuw */
 :root {
 
     /* Hard */
@@ -10,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_kbt4m {
+.picker-button__iconContainer_pgpx2 {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_kbt4m {
+.picker-button__open_pgpx2 {
     transform: var(--arrow-transform);
 }

package/picker-button/field/index.d.ts

@@ -1 +1 @@
-export * from "../Component-4138fa44";
+export * from "../Component-14de2929";

package/picker-button/field/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var field_Component = require('../Component-4138fa44.js');
+var field_Component = require('../Component-14de2929.js');
 require('react');
 require('classnames');
 require('../../button');

package/picker-button/index.css

@@ -1,4 +1,4 @@
-/* hash: 1qj07 */
-.picker-button__container_1o57d {
+/* hash: phm5j */
+.picker-button__container_1qgwg {
     min-width: auto;
 }

package/picker-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./Component-4138fa44.js');
+require('./Component-14de2929.js');
 require('react');
 require('classnames');
 require('../select');

package/picker-button/modern/Component.js

@@ -6,7 +6,7 @@ import { OptionsList, Optgroup, Option, BaseSelect } from '../../select/modern';
 import '../../button/modern';
 import { Field } from './field/Component.js';
 
-var styles = {"container":"picker-button__container_1o57d"};
+var styles = {"container":"picker-button__container_1qgwg"};
 require('./index.css');
 
 const PickerButton = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, view, loading, size = 'm', className, leftAddons, ...restProps }, ref) => (React.createElement(BaseSelect, Object.assign({}, restProps, { ref: ref, Option: Option$1, Field: Field, size: size === 'm' ? 'm' : 's', fieldProps: {

package/picker-button/modern/field/Component.d.ts

@@ -34,6 +34,10 @@ type PopoverProps = {
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
      */
     preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */

package/picker-button/modern/field/Component.js

@@ -4,7 +4,7 @@ import { ArrowDownMIcon } from '@alfalab/icons-classic/ArrowDownMIcon';
 import { ArrowDownSIcon } from '@alfalab/icons-classic/ArrowDownSIcon';
 import { Button } from '../../../button/modern';
 
-var styles = {"iconContainer":"picker-button__iconContainer_kbt4m","open":"picker-button__open_kbt4m"};
+var styles = {"iconContainer":"picker-button__iconContainer_pgpx2","open":"picker-button__open_pgpx2"};
 require('./index.css');
 
 const Field = ({ buttonSize = 'm', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, valueRenderer, ...restProps }) => {

package/picker-button/modern/field/index.css

@@ -1,4 +1,4 @@
-/* hash: 1c7yf */
+/* hash: tckuw */
 :root {
 
     /* Hard */
@@ -10,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_kbt4m {
+.picker-button__iconContainer_pgpx2 {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_kbt4m {
+.picker-button__open_pgpx2 {
     transform: var(--arrow-transform);
 }

package/picker-button/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1qj07 */
-.picker-button__container_1o57d {
+/* hash: phm5j */
+.picker-button__container_1qgwg {
     min-width: auto;
 }

package/plate/Component.js

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
-var styles = {"component":"plate__component_igf3v","focused":"plate__focused_igf3v","inner":"plate__inner_igf3v","common":"plate__common_igf3v","negative":"plate__negative_igf3v","positive":"plate__positive_igf3v","attention":"plate__attention_igf3v","isHidden":"plate__isHidden_igf3v","leftAddons":"plate__leftAddons_igf3v","title":"plate__title_igf3v","content":"plate__content_igf3v","isFolded":"plate__isFolded_igf3v","contentContainer":"plate__contentContainer_igf3v","withoutTitle":"plate__withoutTitle_igf3v","contentInner":"plate__contentInner_igf3v","closer":"plate__closer_igf3v","folder":"plate__folder_igf3v","buttons":"plate__buttons_igf3v","button":"plate__button_igf3v"};
+var styles = {"component":"plate__component_1i250","foldable":"plate__foldable_1i250","focused":"plate__focused_1i250","inner":"plate__inner_1i250","common":"plate__common_1i250","negative":"plate__negative_1i250","positive":"plate__positive_1i250","attention":"plate__attention_1i250","isHidden":"plate__isHidden_1i250","leftAddons":"plate__leftAddons_1i250","title":"plate__title_1i250","content":"plate__content_1i250","isFolded":"plate__isFolded_1i250","contentContainer":"plate__contentContainer_1i250","withoutTitle":"plate__withoutTitle_1i250","contentInner":"plate__contentInner_1i250","closer":"plate__closer_1i250","folder":"plate__folder_1i250","buttons":"plate__buttons_1i250","button":"plate__button_1i250"};
 require('./index.css');
 
 var Plate = React.forwardRef(function (_a, ref) {
@@ -67,6 +67,7 @@ var Plate = React.forwardRef(function (_a, ref) {
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[view], (_b = {},
+            _b[styles.foldable] = foldable,
             _b[styles.focused] = focused,
             _b[styles.isHidden] = hasCloser && isHidden,
             _b[styles.isFolded] = foldable && folded,

package/plate/cssm/Component.js

@@ -66,6 +66,7 @@ var Plate = React.forwardRef(function (_a, ref) {
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][view], (_b = {},
+            _b[styles__default['default'].foldable] = foldable,
             _b[styles__default['default'].focused] = focused,
             _b[styles__default['default'].isHidden] = hasCloser && isHidden,
             _b[styles__default['default'].isFolded] = foldable && folded,

package/plate/cssm/index.module.css

@@ -56,6 +56,8 @@
     min-height: 56px;
     padding: var(--gap-m);
     outline: none;
+}
+.foldable {
     cursor: pointer;
 }
 .component * {

package/plate/esm/Component.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 import { Button } from '../../button/esm';
 
-var styles = {"component":"plate__component_igf3v","focused":"plate__focused_igf3v","inner":"plate__inner_igf3v","common":"plate__common_igf3v","negative":"plate__negative_igf3v","positive":"plate__positive_igf3v","attention":"plate__attention_igf3v","isHidden":"plate__isHidden_igf3v","leftAddons":"plate__leftAddons_igf3v","title":"plate__title_igf3v","content":"plate__content_igf3v","isFolded":"plate__isFolded_igf3v","contentContainer":"plate__contentContainer_igf3v","withoutTitle":"plate__withoutTitle_igf3v","contentInner":"plate__contentInner_igf3v","closer":"plate__closer_igf3v","folder":"plate__folder_igf3v","buttons":"plate__buttons_igf3v","button":"plate__button_igf3v"};
+var styles = {"component":"plate__component_1i250","foldable":"plate__foldable_1i250","focused":"plate__focused_1i250","inner":"plate__inner_1i250","common":"plate__common_1i250","negative":"plate__negative_1i250","positive":"plate__positive_1i250","attention":"plate__attention_1i250","isHidden":"plate__isHidden_1i250","leftAddons":"plate__leftAddons_1i250","title":"plate__title_1i250","content":"plate__content_1i250","isFolded":"plate__isFolded_1i250","contentContainer":"plate__contentContainer_1i250","withoutTitle":"plate__withoutTitle_1i250","contentInner":"plate__contentInner_1i250","closer":"plate__closer_1i250","folder":"plate__folder_1i250","buttons":"plate__buttons_1i250","button":"plate__button_1i250"};
 require('./index.css');
 
 var Plate = forwardRef(function (_a, ref) {
@@ -59,6 +59,7 @@ var Plate = forwardRef(function (_a, ref) {
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     React.createElement("div", { className: cn(styles.component, styles[view], (_b = {},
+            _b[styles.foldable] = foldable,
             _b[styles.focused] = focused,
             _b[styles.isHidden] = hasCloser && isHidden,
             _b[styles.isFolded] = foldable && folded,

package/plate/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1he7j */
+/* hash: 4qnto */
 :root {
     --color-static-status-green: #13a463;
     --color-static-status-grey: #6d7986;
@@ -46,7 +46,7 @@
     --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
 }
-.plate__component_igf3v {
+.plate__component_1i250 {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -57,53 +57,55 @@
     min-height: 56px;
     padding: var(--gap-m);
     outline: none;
+}
+.plate__foldable_1i250 {
     cursor: pointer;
 }
-.plate__component_igf3v * {
+.plate__component_1i250 * {
     box-sizing: border-box;
 }
-.plate__focused_igf3v {
+.plate__focused_1i250 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.plate__inner_igf3v {
+.plate__inner_1i250 {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
-.plate__common_igf3v {
+.plate__common_1i250 {
     background-color: var(--color-light-bg-secondary);
     border-color: var(--color-static-status-grey);
 }
-.plate__negative_igf3v {
+.plate__negative_1i250 {
     background-color: var(--color-light-bg-negative-muted);
     border-color: var(--color-static-status-red);
 }
-.plate__positive_igf3v {
+.plate__positive_1i250 {
     background-color: var(--color-light-bg-positive-muted);
     border-color: var(--color-static-status-green);
 }
-.plate__attention_igf3v {
+.plate__attention_1i250 {
     background-color: var(--color-light-bg-attention-muted);
     border-color: var(--color-static-status-orange);
 }
-.plate__isHidden_igf3v {
+.plate__isHidden_1i250 {
     display: none;
 }
-.plate__leftAddons_igf3v {
+.plate__leftAddons_1i250 {
     flex-shrink: 0;
     min-width: 24px;
     margin-right: var(--gap-s);
 }
-.plate__title_igf3v {
+.plate__title_1i250 {
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
 
     word-break: break-word;
 }
-.plate__content_igf3v {
+.plate__content_1i250 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -115,23 +117,23 @@
     margin: var(--gap-2xs-neg);
     cursor: default
 }
-.plate__content_igf3v.plate__isFolded_igf3v {
+.plate__content_1i250.plate__isFolded_1i250 {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
     }
-.plate__contentContainer_igf3v {
+.plate__contentContainer_1i250 {
     flex: 1;
     max-width: 586px;
     margin-right: auto
 }
-.plate__contentContainer_igf3v.plate__withoutTitle_igf3v {
+.plate__contentContainer_1i250.plate__withoutTitle_1i250 {
         padding-top: var(--gap-3xs);
     }
-.plate__title_igf3v + .plate__content_igf3v > .plate__contentInner_igf3v {
+.plate__title_1i250 + .plate__content_1i250 > .plate__contentInner_1i250 {
     padding-top: var(--gap-xs);
 }
-.plate__closer_igf3v,
-.plate__folder_igf3v {
+.plate__closer_1i250,
+.plate__folder_1i250 {
     display: block;
     height: 24px;
     width: 24px;
@@ -140,29 +142,29 @@
     cursor: pointer;
     margin-left: var(--gap-m)
 }
-.plate__closer_igf3v:hover, .plate__folder_igf3v:hover {
+.plate__closer_1i250:hover, .plate__folder_1i250:hover {
         opacity: 0.7;
     }
-.plate__closer_igf3v:active, .plate__folder_igf3v:active {
+.plate__closer_1i250:active, .plate__folder_1i250:active {
         opacity: 0.5;
     }
-.plate__closer_igf3v {
+.plate__closer_1i250 {
     background: var(--plate-closer-icon) center no-repeat;
 }
-.plate__folder_igf3v {
+.plate__folder_1i250 {
     background: var(--plate-arrow-icon) center no-repeat;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }
-.plate__folder_igf3v.plate__isFolded_igf3v {
+.plate__folder_1i250.plate__isFolded_1i250 {
         transform: rotate(0deg);
     }
-.plate__buttons_igf3v {
+.plate__buttons_1i250 {
     margin-top: var(--gap-xl);
 }
-.plate__button_igf3v {
+.plate__button_1i250 {
     margin-right: var(--gap-s)
 }
-.plate__button_igf3v:last-child {
+.plate__button_1i250:last-child {
         margin-right: 0;
     }

package/plate/index.css

@@ -1,4 +1,4 @@
-/* hash: 1he7j */
+/* hash: 4qnto */
 :root {
     --color-static-status-green: #13a463;
     --color-static-status-grey: #6d7986;
@@ -46,7 +46,7 @@
     --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
 }
-.plate__component_igf3v {
+.plate__component_1i250 {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -57,53 +57,55 @@
     min-height: 56px;
     padding: var(--gap-m);
     outline: none;
+}
+.plate__foldable_1i250 {
     cursor: pointer;
 }
-.plate__component_igf3v * {
+.plate__component_1i250 * {
     box-sizing: border-box;
 }
-.plate__focused_igf3v {
+.plate__focused_1i250 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.plate__inner_igf3v {
+.plate__inner_1i250 {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
-.plate__common_igf3v {
+.plate__common_1i250 {
     background-color: var(--color-light-bg-secondary);
     border-color: var(--color-static-status-grey);
 }
-.plate__negative_igf3v {
+.plate__negative_1i250 {
     background-color: var(--color-light-bg-negative-muted);
     border-color: var(--color-static-status-red);
 }
-.plate__positive_igf3v {
+.plate__positive_1i250 {
     background-color: var(--color-light-bg-positive-muted);
     border-color: var(--color-static-status-green);
 }
-.plate__attention_igf3v {
+.plate__attention_1i250 {
     background-color: var(--color-light-bg-attention-muted);
     border-color: var(--color-static-status-orange);
 }
-.plate__isHidden_igf3v {
+.plate__isHidden_1i250 {
     display: none;
 }
-.plate__leftAddons_igf3v {
+.plate__leftAddons_1i250 {
     flex-shrink: 0;
     min-width: 24px;
     margin-right: var(--gap-s);
 }
-.plate__title_igf3v {
+.plate__title_1i250 {
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
 
     word-break: break-word;
 }
-.plate__content_igf3v {
+.plate__content_1i250 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -115,23 +117,23 @@
     margin: var(--gap-2xs-neg);
     cursor: default
 }
-.plate__content_igf3v.plate__isFolded_igf3v {
+.plate__content_1i250.plate__isFolded_1i250 {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
     }
-.plate__contentContainer_igf3v {
+.plate__contentContainer_1i250 {
     flex: 1;
     max-width: 586px;
     margin-right: auto
 }
-.plate__contentContainer_igf3v.plate__withoutTitle_igf3v {
+.plate__contentContainer_1i250.plate__withoutTitle_1i250 {
         padding-top: var(--gap-3xs);
     }
-.plate__title_igf3v + .plate__content_igf3v > .plate__contentInner_igf3v {
+.plate__title_1i250 + .plate__content_1i250 > .plate__contentInner_1i250 {
     padding-top: var(--gap-xs);
 }
-.plate__closer_igf3v,
-.plate__folder_igf3v {
+.plate__closer_1i250,
+.plate__folder_1i250 {
     display: block;
     height: 24px;
     width: 24px;
@@ -140,29 +142,29 @@
     cursor: pointer;
     margin-left: var(--gap-m)
 }
-.plate__closer_igf3v:hover, .plate__folder_igf3v:hover {
+.plate__closer_1i250:hover, .plate__folder_1i250:hover {
         opacity: 0.7;
     }
-.plate__closer_igf3v:active, .plate__folder_igf3v:active {
+.plate__closer_1i250:active, .plate__folder_1i250:active {
         opacity: 0.5;
     }
-.plate__closer_igf3v {
+.plate__closer_1i250 {
     background: var(--plate-closer-icon) center no-repeat;
 }
-.plate__folder_igf3v {
+.plate__folder_1i250 {
     background: var(--plate-arrow-icon) center no-repeat;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }
-.plate__folder_igf3v.plate__isFolded_igf3v {
+.plate__folder_1i250.plate__isFolded_1i250 {
         transform: rotate(0deg);
     }
-.plate__buttons_igf3v {
+.plate__buttons_1i250 {
     margin-top: var(--gap-xl);
 }
-.plate__button_igf3v {
+.plate__button_1i250 {
     margin-right: var(--gap-s)
 }
-.plate__button_igf3v:last-child {
+.plate__button_1i250:last-child {
         margin-right: 0;
     }

package/plate/modern/Component.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 import { Button } from '../../button/modern';
 
-var styles = {"component":"plate__component_igf3v","focused":"plate__focused_igf3v","inner":"plate__inner_igf3v","common":"plate__common_igf3v","negative":"plate__negative_igf3v","positive":"plate__positive_igf3v","attention":"plate__attention_igf3v","isHidden":"plate__isHidden_igf3v","leftAddons":"plate__leftAddons_igf3v","title":"plate__title_igf3v","content":"plate__content_igf3v","isFolded":"plate__isFolded_igf3v","contentContainer":"plate__contentContainer_igf3v","withoutTitle":"plate__withoutTitle_igf3v","contentInner":"plate__contentInner_igf3v","closer":"plate__closer_igf3v","folder":"plate__folder_igf3v","buttons":"plate__buttons_igf3v","button":"plate__button_igf3v"};
+var styles = {"component":"plate__component_1i250","foldable":"plate__foldable_1i250","focused":"plate__focused_1i250","inner":"plate__inner_1i250","common":"plate__common_1i250","negative":"plate__negative_1i250","positive":"plate__positive_1i250","attention":"plate__attention_1i250","isHidden":"plate__isHidden_1i250","leftAddons":"plate__leftAddons_1i250","title":"plate__title_1i250","content":"plate__content_1i250","isFolded":"plate__isFolded_1i250","contentContainer":"plate__contentContainer_1i250","withoutTitle":"plate__withoutTitle_1i250","contentInner":"plate__contentInner_1i250","closer":"plate__closer_1i250","folder":"plate__folder_1i250","buttons":"plate__buttons_1i250","button":"plate__button_1i250"};
 require('./index.css');
 
 const Plate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: foldedProp, defaultFolded = true, leftAddons, children, buttons = [], title, view = 'common', className, buttonsClassName, contentClassName, dataTestId, onClick, onClose, onToggle, }, ref) => {
@@ -55,6 +55,7 @@ const Plate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: f
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     React.createElement("div", { className: cn(styles.component, styles[view], {
+            [styles.foldable]: foldable,
             [styles.focused]: focused,
             [styles.isHidden]: hasCloser && isHidden,
             [styles.isFolded]: foldable && folded,