@alfalab/core-components 25.2.0-beta.0 → 25.4.0

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

@@ -1,22 +1,25 @@
 import React from 'react';
 import cn from 'classnames';
-import { ArrowDownMIcon } from '@alfalab/icons-classic/ArrowDownMIcon';
-import { ArrowDownSIcon } from '@alfalab/icons-classic/ArrowDownSIcon';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '@alfalab/icons-glyph/MoreMIcon';
+import '@alfalab/icons-glyph/MoreSIcon';
 import { Button } from '../../../button/modern';
+import { getIcon } from '../utils/index.js';
 
-var styles = {"iconContainer":"picker-button__iconContainer_h15km","open":"picker-button__open_h15km"};
+var styles = {"iconContainer":"picker-button__iconContainer_18u4x","open":"picker-button__open_18u4x"};
 require('./index.css');
 
-const Field = ({ buttonSize = 'm', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, valueRenderer, ...restProps }) => {
-    const Icon = buttonSize === 'xs' ? ArrowDownSIcon : ArrowDownMIcon;
+const Field = ({ buttonSize = 'm', buttonVariant = 'default', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, valueRenderer, ...restProps }) => {
+    const Icon = getIcon(buttonVariant, buttonSize);
     const { ref, ...restInnerProps } = innerProps;
     const buttonProps = {
         ...restProps,
         ...restInnerProps,
     };
     return (React.createElement("div", { ref: ref },
-        React.createElement(Button, Object.assign({}, buttonProps, { rightAddons: rightAddons ?? (React.createElement("span", { className: cn(styles.iconContainer, open && styles.open) },
-                React.createElement(Icon, { "data-test-id": 'picker-button-icon' }))), block: true, view: view, size: buttonSize, className: cn(styles.component, view === 'primary' && styles.primary, className) }), label)));
+        React.createElement(Button, Object.assign({}, buttonProps, { rightAddons: rightAddons ?? (React.createElement("span", { className: cn(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
+                React.createElement(Icon, { "data-test-id": 'picker-button-icon' }))), block: true, view: view, size: buttonSize, className: cn(styles.component, view === 'primary' && styles.primary, className) }), buttonVariant !== 'compact' && label)));
 };
 
 export { Field };

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

@@ -1,4 +1,4 @@
-/* hash: a0xav */
+/* hash: 4hptb */
 :root {
 
     /* Hard */
@@ -10,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_h15km {
+.picker-button__iconContainer_18u4x {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_h15km {
+.picker-button__open_18u4x {
     transform: var(--arrow-transform);
 }

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

@@ -1,6 +1,9 @@
 import 'react';
 import 'classnames';
-import '@alfalab/icons-classic/ArrowDownMIcon';
-import '@alfalab/icons-classic/ArrowDownSIcon';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '@alfalab/icons-glyph/MoreMIcon';
+import '@alfalab/icons-glyph/MoreSIcon';
 import '../../../button/modern';
+import '../utils/index.js';
 export { Field } from './Component.js';

package/picker-button/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 8bi4r */
+/* hash: z84rf */
 :root {
 
     /* Hard */
@@ -9,19 +9,23 @@
 }
 :root {
     --gap-xs: 8px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-s: 4px;
 }
-.picker-button__container_lu5mb {
+.picker-button__container_1mcgq {
     min-width: auto;
 }
-.picker-button__optionsPopover_lu5mb {
+.picker-button__optionsPopover_1mcgq {
     padding: var(--gap-xs) 0
 }
-.picker-button__optionsPopover_lu5mb.picker-button__sideGap_lu5mb {
+.picker-button__optionsPopover_1mcgq.picker-button__sideGap_1mcgq {
         padding: 0 var(--gap-xs);
     }
-.picker-button__optionsListContainer_lu5mb {
+.picker-button__optionsListContainer_1mcgq {
     border-radius: var(--border-radius-s);
 }
+.picker-button__option_1mcgq {
+    padding: 0 var(--gap-m);
+}

package/picker-button/modern/index.js

@@ -1,8 +1,12 @@
 import 'react';
 import 'classnames';
-import '@alfalab/icons-classic/ArrowDownMIcon';
-import '@alfalab/icons-classic/ArrowDownSIcon';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '@alfalab/icons-glyph/MoreMIcon';
+import '@alfalab/icons-glyph/MoreSIcon';
 import '../../select/modern';
 import '../../button/modern';
+import './utils/index.js';
 import './field/Component.js';
+import './option/Component.js';
 export { PickerButton } from './Component.js';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FC, SVGProps } from 'react';
+import { OptionShape } from "../typings-a22d6eaf";
+import { OptionProps as BaseOptionProps } from "../typings-a22d6eaf";
+type OptionProps = Omit<BaseOptionProps, 'option'> & {
+    option: OptionShape & {
+        icon?: FC<SVGProps<SVGSVGElement>>;
+    };
+};
+declare const Option: ({ option, children, ...restProps }: OptionProps) => JSX.Element;
+export { Option };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Option as Option$1 } from '../../../select/modern';
+
+var styles = {"container":"picker-button__container_ez0vh","icon":"picker-button__icon_ez0vh","content":"picker-button__content_ez0vh"};
+require('./index.css');
+
+const Option = ({ option, children, ...restProps }) => {
+    const content = children || option.content || option.key;
+    const Icon = option.icon;
+    return (React.createElement(Option$1, Object.assign({ option: option }, restProps),
+        React.createElement("div", { className: styles.container },
+            Icon && React.createElement(Icon, { className: styles.icon }),
+            React.createElement("div", { className: styles.content }, content))));
+};
+
+export { Option };

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

@@ -0,0 +1,25 @@
+/* hash: wiwip */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-s: 12px;
+}
+.picker-button__container_ez0vh {
+    display: flex;
+    align-items: center;
+}
+.picker-button__icon_ez0vh {
+    display: flex;
+    margin-right: var(--gap-s);
+}
+.picker-button__content_ez0vh {
+    overflow: hidden;
+    flex: 1;
+    text-overflow: ellipsis;
+}

package/picker-button/modern/option/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/picker-button/modern/option/index.js

@@ -0,0 +1,3 @@
+import 'react';
+import '../../../select/modern';
+export { Option } from './Component.js';