@alfalab/core-components-picker-button 13.0.22 → 13.1.0-alfasans
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.
- package/Component.responsive.d.ts +1 -1
- package/cssm/Component.responsive.d.ts +1 -1
- package/cssm/desktop/Component.desktop.d.ts +1 -1
- package/cssm/utils/index.d.ts +2 -2
- package/cssm/utils/index.js +14 -3
- package/cssm/utils/index.js.map +1 -1
- package/desktop/Component.desktop.d.ts +1 -1
- package/esm/Component.responsive.d.ts +1 -1
- package/esm/desktop/Component.desktop.d.ts +1 -1
- package/esm/field/index.css +5 -5
- package/esm/field/index.module.css.js +1 -1
- package/esm/index.css +4 -4
- package/esm/index.module.css.js +1 -1
- package/esm/option/index.css +3 -3
- package/esm/option/index.module.css.js +1 -1
- package/esm/utils/index.d.ts +2 -2
- package/esm/utils/index.js +10 -3
- package/esm/utils/index.js.map +1 -1
- package/field/index.css +5 -5
- package/field/index.module.css.js +1 -1
- package/index.css +4 -4
- package/index.module.css.js +1 -1
- package/modern/Component.responsive.d.ts +1 -1
- package/modern/desktop/Component.desktop.d.ts +1 -1
- package/modern/field/index.css +5 -5
- package/modern/field/index.module.css.js +1 -1
- package/modern/index.css +4 -4
- package/modern/index.module.css.js +1 -1
- package/modern/option/index.css +3 -3
- package/modern/option/index.module.css.js +1 -1
- package/modern/utils/index.d.ts +2 -2
- package/modern/utils/index.js +9 -3
- package/modern/utils/index.js.map +1 -1
- package/moderncssm/Component.responsive.d.ts +1 -1
- package/moderncssm/desktop/Component.desktop.d.ts +1 -1
- package/moderncssm/utils/index.d.ts +2 -2
- package/moderncssm/utils/index.js +9 -3
- package/moderncssm/utils/index.js.map +1 -1
- package/option/index.css +3 -3
- package/option/index.module.css.js +1 -1
- package/package.json +9 -7
- package/src/utils/{index.ts → index.tsx} +13 -4
- package/utils/index.d.ts +2 -2
- package/utils/index.js +14 -3
- package/utils/index.js.map +1 -1
|
@@ -12,7 +12,7 @@ export type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalM
|
|
|
12
12
|
*/
|
|
13
13
|
client?: 'desktop' | 'mobile';
|
|
14
14
|
};
|
|
15
|
-
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
15
|
+
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<import("@alfalab/core-components-button").ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
16
16
|
options: Array<import("@alfalab/core-components-select/typings").BaseSelectProps["options"][0] & {
|
|
17
17
|
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
18
18
|
}>;
|
|
@@ -12,7 +12,7 @@ export type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalM
|
|
|
12
12
|
*/
|
|
13
13
|
client?: 'desktop' | 'mobile';
|
|
14
14
|
};
|
|
15
|
-
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
15
|
+
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<import("@alfalab/core-components-button").ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
16
16
|
options: Array<import("@alfalab/core-components-select/typings").BaseSelectProps["options"][0] & {
|
|
17
17
|
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
18
18
|
}>;
|
|
@@ -28,7 +28,7 @@ export type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Ar
|
|
|
28
28
|
*/
|
|
29
29
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
30
30
|
};
|
|
31
|
-
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
31
|
+
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
32
32
|
options: Array<BaseSelectProps["options"][0] & {
|
|
33
33
|
/**
|
|
34
34
|
* Иконка, отображающаяся слева от текстового представления пункта
|
package/cssm/utils/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ComponentType, type SVGProps } from 'react';
|
|
1
|
+
import React, { type ComponentType, type SVGProps } from 'react';
|
|
2
2
|
import { type PickerButtonVariant } from '../types';
|
|
3
|
-
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
|
3
|
+
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ((props: SVGProps<SVGSVGElement>) => React.JSX.Element) | React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
4
4
|
export declare const getIcon: (variant: PickerButtonVariant, size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
package/cssm/utils/index.js
CHANGED
|
@@ -2,16 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var cssm = require('@alfalab/core-components-shared/cssm');
|
|
5
8
|
var ChevronDownCompactSIcon = require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
|
|
6
9
|
var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
7
|
-
var
|
|
8
|
-
var
|
|
10
|
+
var DotsThreeHorizontalLine20Icon = require('@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon');
|
|
11
|
+
var DotsThreeHorizontalLine24Icon = require('@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon');
|
|
9
12
|
|
|
13
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
|
+
|
|
15
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
|
+
|
|
17
|
+
var DotsThreeHorizontalLine20AdapterIcon = function (props) { return (React__default.default.createElement(cssm.Icon20Adapter, tslib.__assign({ icon: DotsThreeHorizontalLine20Icon.DotsThreeHorizontalLine20Icon }, props))); };
|
|
10
18
|
var getCompactIcon = function (size, Icon) {
|
|
11
19
|
if (Icon) {
|
|
12
20
|
return Icon;
|
|
13
21
|
}
|
|
14
|
-
|
|
22
|
+
if (size === 'size-32') {
|
|
23
|
+
return DotsThreeHorizontalLine20AdapterIcon;
|
|
24
|
+
}
|
|
25
|
+
return DotsThreeHorizontalLine24Icon.DotsThreeHorizontalLine24Icon;
|
|
15
26
|
};
|
|
16
27
|
var getIcon = function (variant, size, Icon) {
|
|
17
28
|
if (variant === 'compact') {
|
package/cssm/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/utils/index.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/utils/index.tsx"],"sourcesContent":["import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { Icon20Adapter } from '@alfalab/core-components-shared';\nimport { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';\nimport { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';\nimport { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';\nimport { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';\n\nimport { type PickerButtonVariant } from '../types';\n\nconst DotsThreeHorizontalLine20AdapterIcon = (props: SVGProps<SVGSVGElement>) => (\n <Icon20Adapter icon={DotsThreeHorizontalLine20Icon} {...props} />\n);\n\nexport const getCompactIcon = (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => {\n if (Icon) {\n return Icon;\n }\n\n if (size === 'size-32') {\n return DotsThreeHorizontalLine20AdapterIcon;\n }\n\n return DotsThreeHorizontalLine24Icon;\n};\n\nexport const getIcon = (\n variant: PickerButtonVariant,\n size: string,\n Icon?: ComponentType<SVGProps<SVGSVGElement>>,\n): ComponentType<SVGProps<SVGSVGElement>> => {\n if (variant === 'compact') {\n return getCompactIcon(size, Icon);\n }\n\n return ['size-40', 'size-32'].includes(size) ? ChevronDownCompactSIcon : ChevronDownMIcon;\n};\n"],"names":["React","Icon20Adapter","DotsThreeHorizontalLine20Icon","DotsThreeHorizontalLine24Icon","ChevronDownCompactSIcon","ChevronDownMIcon"],"mappings":";;;;;;;;;;;;;;;;AAUA,IAAM,oCAAoC,GAAG,UAAC,KAA8B,EAAK,EAAA,QAC7EA,sBAAC,CAAA,aAAA,CAAAC,kBAAa,mBAAC,IAAI,EAAEC,2DAA6B,EAAM,EAAA,KAAK,EAAI,EACpE,EAAA;AAEY,IAAA,cAAc,GAAG,UAAC,IAAY,EAAE,IAA6C,EAAA;IACtF,IAAI,IAAI,EAAE;AACN,QAAA,OAAO,IAAI;;AAGf,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB,QAAA,OAAO,oCAAoC;;AAG/C,IAAA,OAAOC,2DAA6B;AACxC;IAEa,OAAO,GAAG,UACnB,OAA4B,EAC5B,IAAY,EACZ,IAA6C,EAAA;AAE7C,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACvB,QAAA,OAAO,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC;;AAGrC,IAAA,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAGC,+CAAuB,GAAGC,iCAAgB;AAC7F;;;;;"}
|
|
@@ -28,7 +28,7 @@ export type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Ar
|
|
|
28
28
|
*/
|
|
29
29
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
30
30
|
};
|
|
31
|
-
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
31
|
+
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
32
32
|
options: Array<BaseSelectProps["options"][0] & {
|
|
33
33
|
/**
|
|
34
34
|
* Иконка, отображающаяся слева от текстового представления пункта
|
|
@@ -12,7 +12,7 @@ export type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalM
|
|
|
12
12
|
*/
|
|
13
13
|
client?: 'desktop' | 'mobile';
|
|
14
14
|
};
|
|
15
|
-
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
15
|
+
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<import("@alfalab/core-components-button").ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
16
16
|
options: Array<import("@alfalab/core-components-select/typings").BaseSelectProps["options"][0] & {
|
|
17
17
|
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
18
18
|
}>;
|
|
@@ -28,7 +28,7 @@ export type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Ar
|
|
|
28
28
|
*/
|
|
29
29
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
30
30
|
};
|
|
31
|
-
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
31
|
+
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
32
32
|
options: Array<BaseSelectProps["options"][0] & {
|
|
33
33
|
/**
|
|
34
34
|
* Иконка, отображающаяся слева от текстового представления пункта
|
package/esm/field/index.css
CHANGED
|
@@ -7,19 +7,19 @@
|
|
|
7
7
|
:root {
|
|
8
8
|
--arrow-transform: rotate(180deg);
|
|
9
9
|
}
|
|
10
|
-
.picker-
|
|
10
|
+
.picker-button__iconContainer_1g3mp {
|
|
11
11
|
display: flex;
|
|
12
12
|
transition: transform 0.15s ease-in-out;
|
|
13
13
|
}
|
|
14
|
-
.picker-
|
|
14
|
+
.picker-button__addonsContainer_1g3mp {
|
|
15
15
|
display: flex;
|
|
16
16
|
}
|
|
17
|
-
.picker-
|
|
17
|
+
.picker-button__addonsContainer_1g3mp.picker-button__showControlIcon_1g3mp {
|
|
18
18
|
margin-right: var(--gap-4);
|
|
19
19
|
}
|
|
20
|
-
.picker-
|
|
20
|
+
.picker-button__open_1g3mp {
|
|
21
21
|
transform: var(--arrow-transform);
|
|
22
22
|
}
|
|
23
|
-
.picker-
|
|
23
|
+
.picker-button__linkOpen_1g3mp:not(:hover) {
|
|
24
24
|
background-color: var(--color-light-transparent-default-hover);
|
|
25
25
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"iconContainer":"picker-
|
|
3
|
+
var styles = {"iconContainer":"picker-button__iconContainer_1g3mp","addonsContainer":"picker-button__addonsContainer_1g3mp","showControlIcon":"picker-button__showControlIcon_1g3mp","open":"picker-button__open_1g3mp","linkOpen":"picker-button__linkOpen_1g3mp"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/esm/index.css
CHANGED
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
--gap-8: 8px;
|
|
4
4
|
--gap-16: 16px;
|
|
5
5
|
}
|
|
6
|
-
.picker-
|
|
6
|
+
.picker-button__container_t14m3 {
|
|
7
7
|
min-width: auto;
|
|
8
8
|
}
|
|
9
|
-
.picker-
|
|
9
|
+
.picker-button__optionsPopover_t14m3.picker-button__sideGap_t14m3.cc-picker-button {
|
|
10
10
|
padding: var(--gap-0) var(--gap-8);
|
|
11
11
|
}
|
|
12
|
-
.cc-picker-button .picker-
|
|
12
|
+
.cc-picker-button .picker-button__option_t14m3 {
|
|
13
13
|
padding: var(--gap-0) var(--gap-16);
|
|
14
14
|
}
|
|
15
|
-
.cc-picker-button .picker-
|
|
15
|
+
.cc-picker-button .picker-button__option_t14m3:before {
|
|
16
16
|
display: none;
|
|
17
17
|
}
|
package/esm/index.module.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"container":"picker-
|
|
3
|
+
var styles = {"container":"picker-button__container_t14m3","optionsPopover":"picker-button__optionsPopover_t14m3","sideGap":"picker-button__sideGap_t14m3","option":"picker-button__option_t14m3"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/esm/option/index.css
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-12: 12px;
|
|
3
3
|
}
|
|
4
|
-
.picker-
|
|
4
|
+
.picker-button__container_10lk9 {
|
|
5
5
|
display: flex;
|
|
6
6
|
align-items: center;
|
|
7
7
|
}
|
|
8
|
-
.picker-
|
|
8
|
+
.picker-button__icon_10lk9 {
|
|
9
9
|
display: flex;
|
|
10
10
|
margin-right: var(--gap-12);
|
|
11
11
|
}
|
|
12
|
-
.picker-
|
|
12
|
+
.picker-button__content_10lk9 {
|
|
13
13
|
overflow: hidden;
|
|
14
14
|
flex: 1;
|
|
15
15
|
text-overflow: ellipsis;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"container":"picker-
|
|
3
|
+
var styles = {"container":"picker-button__container_10lk9","icon":"picker-button__icon_10lk9","content":"picker-button__content_10lk9"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/esm/utils/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ComponentType, type SVGProps } from 'react';
|
|
1
|
+
import React, { type ComponentType, type SVGProps } from 'react';
|
|
2
2
|
import { type PickerButtonVariant } from '../types';
|
|
3
|
-
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
|
3
|
+
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ((props: SVGProps<SVGSVGElement>) => React.JSX.Element) | React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
4
4
|
export declare const getIcon: (variant: PickerButtonVariant, size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
package/esm/utils/index.js
CHANGED
|
@@ -1,13 +1,20 @@
|
|
|
1
|
+
import { __assign } from 'tslib';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Icon20Adapter } from '@alfalab/core-components-shared/esm';
|
|
1
4
|
import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
|
|
2
5
|
import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
6
|
+
import { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';
|
|
7
|
+
import { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';
|
|
5
8
|
|
|
9
|
+
var DotsThreeHorizontalLine20AdapterIcon = function (props) { return (React.createElement(Icon20Adapter, __assign({ icon: DotsThreeHorizontalLine20Icon }, props))); };
|
|
6
10
|
var getCompactIcon = function (size, Icon) {
|
|
7
11
|
if (Icon) {
|
|
8
12
|
return Icon;
|
|
9
13
|
}
|
|
10
|
-
|
|
14
|
+
if (size === 'size-32') {
|
|
15
|
+
return DotsThreeHorizontalLine20AdapterIcon;
|
|
16
|
+
}
|
|
17
|
+
return DotsThreeHorizontalLine24Icon;
|
|
11
18
|
};
|
|
12
19
|
var getIcon = function (variant, size, Icon) {
|
|
13
20
|
if (variant === 'compact') {
|
package/esm/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/utils/index.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/utils/index.tsx"],"sourcesContent":["import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { Icon20Adapter } from '@alfalab/core-components-shared';\nimport { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';\nimport { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';\nimport { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';\nimport { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';\n\nimport { type PickerButtonVariant } from '../types';\n\nconst DotsThreeHorizontalLine20AdapterIcon = (props: SVGProps<SVGSVGElement>) => (\n <Icon20Adapter icon={DotsThreeHorizontalLine20Icon} {...props} />\n);\n\nexport const getCompactIcon = (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => {\n if (Icon) {\n return Icon;\n }\n\n if (size === 'size-32') {\n return DotsThreeHorizontalLine20AdapterIcon;\n }\n\n return DotsThreeHorizontalLine24Icon;\n};\n\nexport const getIcon = (\n variant: PickerButtonVariant,\n size: string,\n Icon?: ComponentType<SVGProps<SVGSVGElement>>,\n): ComponentType<SVGProps<SVGSVGElement>> => {\n if (variant === 'compact') {\n return getCompactIcon(size, Icon);\n }\n\n return ['size-40', 'size-32'].includes(size) ? ChevronDownCompactSIcon : ChevronDownMIcon;\n};\n"],"names":[],"mappings":";;;;;;;;AAUA,IAAM,oCAAoC,GAAG,UAAC,KAA8B,EAAK,EAAA,QAC7E,KAAC,CAAA,aAAA,CAAA,aAAa,aAAC,IAAI,EAAE,6BAA6B,EAAM,EAAA,KAAK,EAAI,EACpE,EAAA;AAEY,IAAA,cAAc,GAAG,UAAC,IAAY,EAAE,IAA6C,EAAA;IACtF,IAAI,IAAI,EAAE;AACN,QAAA,OAAO,IAAI;;AAGf,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB,QAAA,OAAO,oCAAoC;;AAG/C,IAAA,OAAO,6BAA6B;AACxC;IAEa,OAAO,GAAG,UACnB,OAA4B,EAC5B,IAAY,EACZ,IAA6C,EAAA;AAE7C,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACvB,QAAA,OAAO,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC;;AAGrC,IAAA,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,uBAAuB,GAAG,gBAAgB;AAC7F;;;;"}
|
package/field/index.css
CHANGED
|
@@ -7,19 +7,19 @@
|
|
|
7
7
|
:root {
|
|
8
8
|
--arrow-transform: rotate(180deg);
|
|
9
9
|
}
|
|
10
|
-
.picker-
|
|
10
|
+
.picker-button__iconContainer_1g3mp {
|
|
11
11
|
display: flex;
|
|
12
12
|
transition: transform 0.15s ease-in-out;
|
|
13
13
|
}
|
|
14
|
-
.picker-
|
|
14
|
+
.picker-button__addonsContainer_1g3mp {
|
|
15
15
|
display: flex;
|
|
16
16
|
}
|
|
17
|
-
.picker-
|
|
17
|
+
.picker-button__addonsContainer_1g3mp.picker-button__showControlIcon_1g3mp {
|
|
18
18
|
margin-right: var(--gap-4);
|
|
19
19
|
}
|
|
20
|
-
.picker-
|
|
20
|
+
.picker-button__open_1g3mp {
|
|
21
21
|
transform: var(--arrow-transform);
|
|
22
22
|
}
|
|
23
|
-
.picker-
|
|
23
|
+
.picker-button__linkOpen_1g3mp:not(:hover) {
|
|
24
24
|
background-color: var(--color-light-transparent-default-hover);
|
|
25
25
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"iconContainer":"picker-
|
|
5
|
+
var styles = {"iconContainer":"picker-button__iconContainer_1g3mp","addonsContainer":"picker-button__addonsContainer_1g3mp","showControlIcon":"picker-button__showControlIcon_1g3mp","open":"picker-button__open_1g3mp","linkOpen":"picker-button__linkOpen_1g3mp"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
package/index.css
CHANGED
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
--gap-8: 8px;
|
|
4
4
|
--gap-16: 16px;
|
|
5
5
|
}
|
|
6
|
-
.picker-
|
|
6
|
+
.picker-button__container_t14m3 {
|
|
7
7
|
min-width: auto;
|
|
8
8
|
}
|
|
9
|
-
.picker-
|
|
9
|
+
.picker-button__optionsPopover_t14m3.picker-button__sideGap_t14m3.cc-picker-button {
|
|
10
10
|
padding: var(--gap-0) var(--gap-8);
|
|
11
11
|
}
|
|
12
|
-
.cc-picker-button .picker-
|
|
12
|
+
.cc-picker-button .picker-button__option_t14m3 {
|
|
13
13
|
padding: var(--gap-0) var(--gap-16);
|
|
14
14
|
}
|
|
15
|
-
.cc-picker-button .picker-
|
|
15
|
+
.cc-picker-button .picker-button__option_t14m3:before {
|
|
16
16
|
display: none;
|
|
17
17
|
}
|
package/index.module.css.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"container":"picker-
|
|
5
|
+
var styles = {"container":"picker-button__container_t14m3","optionsPopover":"picker-button__optionsPopover_t14m3","sideGap":"picker-button__sideGap_t14m3","option":"picker-button__option_t14m3"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -12,7 +12,7 @@ export type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalM
|
|
|
12
12
|
*/
|
|
13
13
|
client?: 'desktop' | 'mobile';
|
|
14
14
|
};
|
|
15
|
-
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
15
|
+
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<import("@alfalab/core-components-button").ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
16
16
|
options: Array<import("@alfalab/core-components-select/typings").BaseSelectProps["options"][0] & {
|
|
17
17
|
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
18
18
|
}>;
|
|
@@ -28,7 +28,7 @@ export type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Ar
|
|
|
28
28
|
*/
|
|
29
29
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
30
30
|
};
|
|
31
|
-
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
31
|
+
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
32
32
|
options: Array<BaseSelectProps["options"][0] & {
|
|
33
33
|
/**
|
|
34
34
|
* Иконка, отображающаяся слева от текстового представления пункта
|
package/modern/field/index.css
CHANGED
|
@@ -7,19 +7,19 @@
|
|
|
7
7
|
:root {
|
|
8
8
|
--arrow-transform: rotate(180deg);
|
|
9
9
|
}
|
|
10
|
-
.picker-
|
|
10
|
+
.picker-button__iconContainer_1g3mp {
|
|
11
11
|
display: flex;
|
|
12
12
|
transition: transform 0.15s ease-in-out;
|
|
13
13
|
}
|
|
14
|
-
.picker-
|
|
14
|
+
.picker-button__addonsContainer_1g3mp {
|
|
15
15
|
display: flex;
|
|
16
16
|
}
|
|
17
|
-
.picker-
|
|
17
|
+
.picker-button__addonsContainer_1g3mp.picker-button__showControlIcon_1g3mp {
|
|
18
18
|
margin-right: var(--gap-4);
|
|
19
19
|
}
|
|
20
|
-
.picker-
|
|
20
|
+
.picker-button__open_1g3mp {
|
|
21
21
|
transform: var(--arrow-transform);
|
|
22
22
|
}
|
|
23
|
-
.picker-
|
|
23
|
+
.picker-button__linkOpen_1g3mp:not(:hover) {
|
|
24
24
|
background-color: var(--color-light-transparent-default-hover);
|
|
25
25
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"iconContainer":"picker-
|
|
3
|
+
const styles = {"iconContainer":"picker-button__iconContainer_1g3mp","addonsContainer":"picker-button__addonsContainer_1g3mp","showControlIcon":"picker-button__showControlIcon_1g3mp","open":"picker-button__open_1g3mp","linkOpen":"picker-button__linkOpen_1g3mp"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/modern/index.css
CHANGED
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
--gap-8: 8px;
|
|
4
4
|
--gap-16: 16px;
|
|
5
5
|
}
|
|
6
|
-
.picker-
|
|
6
|
+
.picker-button__container_t14m3 {
|
|
7
7
|
min-width: auto;
|
|
8
8
|
}
|
|
9
|
-
.picker-
|
|
9
|
+
.picker-button__optionsPopover_t14m3.picker-button__sideGap_t14m3.cc-picker-button {
|
|
10
10
|
padding: var(--gap-0) var(--gap-8);
|
|
11
11
|
}
|
|
12
|
-
.cc-picker-button .picker-
|
|
12
|
+
.cc-picker-button .picker-button__option_t14m3 {
|
|
13
13
|
padding: var(--gap-0) var(--gap-16);
|
|
14
14
|
}
|
|
15
|
-
.cc-picker-button .picker-
|
|
15
|
+
.cc-picker-button .picker-button__option_t14m3:before {
|
|
16
16
|
display: none;
|
|
17
17
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"container":"picker-
|
|
3
|
+
const styles = {"container":"picker-button__container_t14m3","optionsPopover":"picker-button__optionsPopover_t14m3","sideGap":"picker-button__sideGap_t14m3","option":"picker-button__option_t14m3"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/modern/option/index.css
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-12: 12px;
|
|
3
3
|
}
|
|
4
|
-
.picker-
|
|
4
|
+
.picker-button__container_10lk9 {
|
|
5
5
|
display: flex;
|
|
6
6
|
align-items: center;
|
|
7
7
|
}
|
|
8
|
-
.picker-
|
|
8
|
+
.picker-button__icon_10lk9 {
|
|
9
9
|
display: flex;
|
|
10
10
|
margin-right: var(--gap-12);
|
|
11
11
|
}
|
|
12
|
-
.picker-
|
|
12
|
+
.picker-button__content_10lk9 {
|
|
13
13
|
overflow: hidden;
|
|
14
14
|
flex: 1;
|
|
15
15
|
text-overflow: ellipsis;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"container":"picker-
|
|
3
|
+
const styles = {"container":"picker-button__container_10lk9","icon":"picker-button__icon_10lk9","content":"picker-button__content_10lk9"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/modern/utils/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ComponentType, type SVGProps } from 'react';
|
|
1
|
+
import React, { type ComponentType, type SVGProps } from 'react';
|
|
2
2
|
import { type PickerButtonVariant } from '../types';
|
|
3
|
-
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
|
3
|
+
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ((props: SVGProps<SVGSVGElement>) => React.JSX.Element) | React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
4
4
|
export declare const getIcon: (variant: PickerButtonVariant, size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
package/modern/utils/index.js
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Icon20Adapter } from '@alfalab/core-components-shared/modern';
|
|
1
3
|
import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
|
|
2
4
|
import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
+
import { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';
|
|
6
|
+
import { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';
|
|
5
7
|
|
|
8
|
+
const DotsThreeHorizontalLine20AdapterIcon = (props) => (React.createElement(Icon20Adapter, { icon: DotsThreeHorizontalLine20Icon, ...props }));
|
|
6
9
|
const getCompactIcon = (size, Icon) => {
|
|
7
10
|
if (Icon) {
|
|
8
11
|
return Icon;
|
|
9
12
|
}
|
|
10
|
-
|
|
13
|
+
if (size === 'size-32') {
|
|
14
|
+
return DotsThreeHorizontalLine20AdapterIcon;
|
|
15
|
+
}
|
|
16
|
+
return DotsThreeHorizontalLine24Icon;
|
|
11
17
|
};
|
|
12
18
|
const getIcon = (variant, size, Icon) => {
|
|
13
19
|
if (variant === 'compact') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/utils/index.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/utils/index.tsx"],"sourcesContent":["import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { Icon20Adapter } from '@alfalab/core-components-shared';\nimport { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';\nimport { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';\nimport { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';\nimport { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';\n\nimport { type PickerButtonVariant } from '../types';\n\nconst DotsThreeHorizontalLine20AdapterIcon = (props: SVGProps<SVGSVGElement>) => (\n <Icon20Adapter icon={DotsThreeHorizontalLine20Icon} {...props} />\n);\n\nexport const getCompactIcon = (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => {\n if (Icon) {\n return Icon;\n }\n\n if (size === 'size-32') {\n return DotsThreeHorizontalLine20AdapterIcon;\n }\n\n return DotsThreeHorizontalLine24Icon;\n};\n\nexport const getIcon = (\n variant: PickerButtonVariant,\n size: string,\n Icon?: ComponentType<SVGProps<SVGSVGElement>>,\n): ComponentType<SVGProps<SVGSVGElement>> => {\n if (variant === 'compact') {\n return getCompactIcon(size, Icon);\n }\n\n return ['size-40', 'size-32'].includes(size) ? ChevronDownCompactSIcon : ChevronDownMIcon;\n};\n"],"names":[],"mappings":";;;;;;;AAUA,MAAM,oCAAoC,GAAG,CAAC,KAA8B,MACxE,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,IAAI,EAAE,6BAA6B,KAAM,KAAK,EAAA,CAAI,CACpE;MAEY,cAAc,GAAG,CAAC,IAAY,EAAE,IAA6C,KAAI;IAC1F,IAAI,IAAI,EAAE;AACN,QAAA,OAAO,IAAI;;AAGf,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB,QAAA,OAAO,oCAAoC;;AAG/C,IAAA,OAAO,6BAA6B;AACxC;AAEa,MAAA,OAAO,GAAG,CACnB,OAA4B,EAC5B,IAAY,EACZ,IAA6C,KACL;AACxC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACvB,QAAA,OAAO,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC;;AAGrC,IAAA,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,uBAAuB,GAAG,gBAAgB;AAC7F;;;;"}
|
|
@@ -12,7 +12,7 @@ export type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalM
|
|
|
12
12
|
*/
|
|
13
13
|
client?: 'desktop' | 'mobile';
|
|
14
14
|
};
|
|
15
|
-
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
15
|
+
export declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/typings").BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<import("@alfalab/core-components-button").ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
16
16
|
options: Array<import("@alfalab/core-components-select/typings").BaseSelectProps["options"][0] & {
|
|
17
17
|
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
18
18
|
}>;
|
|
@@ -28,7 +28,7 @@ export type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Ar
|
|
|
28
28
|
*/
|
|
29
29
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
30
30
|
};
|
|
31
|
-
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "
|
|
31
|
+
export declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onFocus" | "size" | "hint" | "placeholder" | "selected" | "multiple" | "Arrow" | "autocomplete" | "closeOnSelect" | "allowUnselect" | "options" | "searchProps" | "showSearch" | "Search"> & Pick<ButtonProps, "view" | "rightAddons" | "leftAddons" | "loading"> & {
|
|
32
32
|
options: Array<BaseSelectProps["options"][0] & {
|
|
33
33
|
/**
|
|
34
34
|
* Иконка, отображающаяся слева от текстового представления пункта
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ComponentType, type SVGProps } from 'react';
|
|
1
|
+
import React, { type ComponentType, type SVGProps } from 'react';
|
|
2
2
|
import { type PickerButtonVariant } from '../types';
|
|
3
|
-
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
|
3
|
+
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ((props: SVGProps<SVGSVGElement>) => React.JSX.Element) | React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
4
4
|
export declare const getIcon: (variant: PickerButtonVariant, size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Icon20Adapter } from '@alfalab/core-components-shared/moderncssm';
|
|
1
3
|
import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
|
|
2
4
|
import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
+
import { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';
|
|
6
|
+
import { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';
|
|
5
7
|
|
|
8
|
+
const DotsThreeHorizontalLine20AdapterIcon = (props) => (React.createElement(Icon20Adapter, { icon: DotsThreeHorizontalLine20Icon, ...props }));
|
|
6
9
|
const getCompactIcon = (size, Icon) => {
|
|
7
10
|
if (Icon) {
|
|
8
11
|
return Icon;
|
|
9
12
|
}
|
|
10
|
-
|
|
13
|
+
if (size === 'size-32') {
|
|
14
|
+
return DotsThreeHorizontalLine20AdapterIcon;
|
|
15
|
+
}
|
|
16
|
+
return DotsThreeHorizontalLine24Icon;
|
|
11
17
|
};
|
|
12
18
|
const getIcon = (variant, size, Icon) => {
|
|
13
19
|
if (variant === 'compact') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/utils/index.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/utils/index.tsx"],"sourcesContent":["import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { Icon20Adapter } from '@alfalab/core-components-shared';\nimport { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';\nimport { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';\nimport { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';\nimport { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';\n\nimport { type PickerButtonVariant } from '../types';\n\nconst DotsThreeHorizontalLine20AdapterIcon = (props: SVGProps<SVGSVGElement>) => (\n <Icon20Adapter icon={DotsThreeHorizontalLine20Icon} {...props} />\n);\n\nexport const getCompactIcon = (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => {\n if (Icon) {\n return Icon;\n }\n\n if (size === 'size-32') {\n return DotsThreeHorizontalLine20AdapterIcon;\n }\n\n return DotsThreeHorizontalLine24Icon;\n};\n\nexport const getIcon = (\n variant: PickerButtonVariant,\n size: string,\n Icon?: ComponentType<SVGProps<SVGSVGElement>>,\n): ComponentType<SVGProps<SVGSVGElement>> => {\n if (variant === 'compact') {\n return getCompactIcon(size, Icon);\n }\n\n return ['size-40', 'size-32'].includes(size) ? ChevronDownCompactSIcon : ChevronDownMIcon;\n};\n"],"names":[],"mappings":";;;;;;;AAUA,MAAM,oCAAoC,GAAG,CAAC,KAA8B,MACxE,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,IAAI,EAAE,6BAA6B,KAAM,KAAK,EAAA,CAAI,CACpE;MAEY,cAAc,GAAG,CAAC,IAAY,EAAE,IAA6C,KAAI;IAC1F,IAAI,IAAI,EAAE;AACN,QAAA,OAAO,IAAI;;AAGf,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB,QAAA,OAAO,oCAAoC;;AAG/C,IAAA,OAAO,6BAA6B;AACxC;AAEa,MAAA,OAAO,GAAG,CACnB,OAA4B,EAC5B,IAAY,EACZ,IAA6C,KACL;AACxC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACvB,QAAA,OAAO,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC;;AAGrC,IAAA,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,uBAAuB,GAAG,gBAAgB;AAC7F;;;;"}
|
package/option/index.css
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-12: 12px;
|
|
3
3
|
}
|
|
4
|
-
.picker-
|
|
4
|
+
.picker-button__container_10lk9 {
|
|
5
5
|
display: flex;
|
|
6
6
|
align-items: center;
|
|
7
7
|
}
|
|
8
|
-
.picker-
|
|
8
|
+
.picker-button__icon_10lk9 {
|
|
9
9
|
display: flex;
|
|
10
10
|
margin-right: var(--gap-12);
|
|
11
11
|
}
|
|
12
|
-
.picker-
|
|
12
|
+
.picker-button__content_10lk9 {
|
|
13
13
|
overflow: hidden;
|
|
14
14
|
flex: 1;
|
|
15
15
|
text-overflow: ellipsis;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"container":"picker-
|
|
5
|
+
var styles = {"container":"picker-button__container_10lk9","icon":"picker-button__icon_10lk9","content":"picker-button__content_10lk9"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-picker-button",
|
|
3
|
-
"version": "13.0
|
|
3
|
+
"version": "13.1.0-alfasans",
|
|
4
4
|
"description": "Picker button component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -13,11 +13,13 @@
|
|
|
13
13
|
"build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@alfalab/core-components-button": "
|
|
17
|
-
"@alfalab/core-components-mq": "
|
|
18
|
-
"@alfalab/core-components-popover": "
|
|
19
|
-
"@alfalab/core-components-select": "
|
|
16
|
+
"@alfalab/core-components-button": "13.2.2-alfasans",
|
|
17
|
+
"@alfalab/core-components-mq": "6.0.7-alfasans",
|
|
18
|
+
"@alfalab/core-components-popover": "8.1.2-alfasans",
|
|
19
|
+
"@alfalab/core-components-select": "19.2.4-alfasans",
|
|
20
|
+
"@alfalab/core-components-shared": "2.2.3-alfasans",
|
|
20
21
|
"@alfalab/icons-glyph": "^2.260.0",
|
|
22
|
+
"@alfalab/icons-glyph-26": "^1.20.0",
|
|
21
23
|
"classnames": "^2.5.1",
|
|
22
24
|
"tslib": "^2.4.0"
|
|
23
25
|
},
|
|
@@ -29,6 +31,6 @@
|
|
|
29
31
|
"access": "public",
|
|
30
32
|
"directory": "dist"
|
|
31
33
|
},
|
|
32
|
-
"themesVersion": "15.2.1",
|
|
33
|
-
"varsVersion": "11.2.1"
|
|
34
|
+
"themesVersion": "15.2.1-alfasans",
|
|
35
|
+
"varsVersion": "11.2.1-alfasans"
|
|
34
36
|
}
|
|
@@ -1,18 +1,27 @@
|
|
|
1
|
-
import { type ComponentType, type SVGProps } from 'react';
|
|
1
|
+
import React, { type ComponentType, type SVGProps } from 'react';
|
|
2
2
|
|
|
3
|
+
import { Icon20Adapter } from '@alfalab/core-components-shared';
|
|
3
4
|
import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
|
|
4
5
|
import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
6
|
+
import { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';
|
|
7
|
+
import { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';
|
|
7
8
|
|
|
8
9
|
import { type PickerButtonVariant } from '../types';
|
|
9
10
|
|
|
11
|
+
const DotsThreeHorizontalLine20AdapterIcon = (props: SVGProps<SVGSVGElement>) => (
|
|
12
|
+
<Icon20Adapter icon={DotsThreeHorizontalLine20Icon} {...props} />
|
|
13
|
+
);
|
|
14
|
+
|
|
10
15
|
export const getCompactIcon = (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => {
|
|
11
16
|
if (Icon) {
|
|
12
17
|
return Icon;
|
|
13
18
|
}
|
|
14
19
|
|
|
15
|
-
|
|
20
|
+
if (size === 'size-32') {
|
|
21
|
+
return DotsThreeHorizontalLine20AdapterIcon;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return DotsThreeHorizontalLine24Icon;
|
|
16
25
|
};
|
|
17
26
|
|
|
18
27
|
export const getIcon = (
|
package/utils/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ComponentType, type SVGProps } from 'react';
|
|
1
|
+
import React, { type ComponentType, type SVGProps } from 'react';
|
|
2
2
|
import { type PickerButtonVariant } from '../types';
|
|
3
|
-
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement
|
|
3
|
+
export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => React.ComponentType<React.SVGProps<SVGSVGElement>> | ((props: SVGProps<SVGSVGElement>) => React.JSX.Element);
|
|
4
4
|
export declare const getIcon: (variant: PickerButtonVariant, size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
|
package/utils/index.js
CHANGED
|
@@ -2,16 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var coreComponentsShared = require('@alfalab/core-components-shared');
|
|
5
8
|
var ChevronDownCompactSIcon = require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
|
|
6
9
|
var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
7
|
-
var
|
|
8
|
-
var
|
|
10
|
+
var DotsThreeHorizontalLine20Icon = require('@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon');
|
|
11
|
+
var DotsThreeHorizontalLine24Icon = require('@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon');
|
|
9
12
|
|
|
13
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
|
+
|
|
15
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
|
+
|
|
17
|
+
var DotsThreeHorizontalLine20AdapterIcon = function (props) { return (React__default.default.createElement(coreComponentsShared.Icon20Adapter, tslib.__assign({ icon: DotsThreeHorizontalLine20Icon.DotsThreeHorizontalLine20Icon }, props))); };
|
|
10
18
|
var getCompactIcon = function (size, Icon) {
|
|
11
19
|
if (Icon) {
|
|
12
20
|
return Icon;
|
|
13
21
|
}
|
|
14
|
-
|
|
22
|
+
if (size === 'size-32') {
|
|
23
|
+
return DotsThreeHorizontalLine20AdapterIcon;
|
|
24
|
+
}
|
|
25
|
+
return DotsThreeHorizontalLine24Icon.DotsThreeHorizontalLine24Icon;
|
|
15
26
|
};
|
|
16
27
|
var getIcon = function (variant, size, Icon) {
|
|
17
28
|
if (variant === 'compact') {
|
package/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/utils/index.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/utils/index.tsx"],"sourcesContent":["import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { Icon20Adapter } from '@alfalab/core-components-shared';\nimport { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';\nimport { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';\nimport { DotsThreeHorizontalLine20Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine20Icon';\nimport { DotsThreeHorizontalLine24Icon } from '@alfalab/icons-glyph-26/DotsThreeHorizontalLine24Icon';\n\nimport { type PickerButtonVariant } from '../types';\n\nconst DotsThreeHorizontalLine20AdapterIcon = (props: SVGProps<SVGSVGElement>) => (\n <Icon20Adapter icon={DotsThreeHorizontalLine20Icon} {...props} />\n);\n\nexport const getCompactIcon = (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => {\n if (Icon) {\n return Icon;\n }\n\n if (size === 'size-32') {\n return DotsThreeHorizontalLine20AdapterIcon;\n }\n\n return DotsThreeHorizontalLine24Icon;\n};\n\nexport const getIcon = (\n variant: PickerButtonVariant,\n size: string,\n Icon?: ComponentType<SVGProps<SVGSVGElement>>,\n): ComponentType<SVGProps<SVGSVGElement>> => {\n if (variant === 'compact') {\n return getCompactIcon(size, Icon);\n }\n\n return ['size-40', 'size-32'].includes(size) ? ChevronDownCompactSIcon : ChevronDownMIcon;\n};\n"],"names":["React","Icon20Adapter","DotsThreeHorizontalLine20Icon","DotsThreeHorizontalLine24Icon","ChevronDownCompactSIcon","ChevronDownMIcon"],"mappings":";;;;;;;;;;;;;;;;AAUA,IAAM,oCAAoC,GAAG,UAAC,KAA8B,EAAK,EAAA,QAC7EA,sBAAC,CAAA,aAAA,CAAAC,kCAAa,mBAAC,IAAI,EAAEC,2DAA6B,EAAM,EAAA,KAAK,EAAI,EACpE,EAAA;AAEY,IAAA,cAAc,GAAG,UAAC,IAAY,EAAE,IAA6C,EAAA;IACtF,IAAI,IAAI,EAAE;AACN,QAAA,OAAO,IAAI;;AAGf,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB,QAAA,OAAO,oCAAoC;;AAG/C,IAAA,OAAOC,2DAA6B;AACxC;IAEa,OAAO,GAAG,UACnB,OAA4B,EAC5B,IAAY,EACZ,IAA6C,EAAA;AAE7C,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACvB,QAAA,OAAO,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC;;AAGrC,IAAA,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAGC,+CAAuB,GAAGC,iCAAgB;AAC7F;;;;;"}
|