@alfalab/core-components-custom-picker-button 2.2.7 → 2.2.9

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 (18) hide show
  1. package/cssm/desktop/Component.desktop.js +2 -1
  2. package/cssm/field/Component.d.ts +3 -1
  3. package/cssm/field/Component.js +2 -2
  4. package/desktop/Component.desktop.js +2 -1
  5. package/esm/desktop/Component.desktop.js +2 -1
  6. package/esm/field/Component.d.ts +3 -1
  7. package/esm/field/Component.js +3 -3
  8. package/esm/field/index.css +5 -5
  9. package/field/Component.d.ts +3 -1
  10. package/field/Component.js +3 -3
  11. package/field/index.css +5 -5
  12. package/modern/desktop/Component.desktop.js +2 -1
  13. package/modern/field/Component.d.ts +3 -1
  14. package/modern/field/Component.js +3 -3
  15. package/modern/field/index.css +5 -5
  16. package/package.json +3 -3
  17. package/src/desktop/Component.desktop.tsx +2 -0
  18. package/src/field/Component.tsx +5 -2
package/cssm/desktop/Component.desktop.js CHANGED
@@ -14,12 +14,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var DEFAULT_BUTTON_COLOR = '#FF45C3';
15
15
  var DEFAULT_CONTENT_COLOR = 'white';
16
16
  var CustomPickerButtonDesktop = React.forwardRef(function (_a, ref) {
17
- var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? DEFAULT_BUTTON_COLOR : _b, _c = _a.contentColor, contentColor = _c === void 0 ? DEFAULT_CONTENT_COLOR : _c, _d = _a.stateType, stateType = _d === void 0 ? 'darkening' : _d, restProps = tslib.__rest(_a, ["backgroundColor", "contentColor", "stateType"]);
17
+ var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? DEFAULT_BUTTON_COLOR : _b, _c = _a.contentColor, contentColor = _c === void 0 ? DEFAULT_CONTENT_COLOR : _c, _d = _a.stateType, stateType = _d === void 0 ? 'darkening' : _d, icon = _a.icon, restProps = tslib.__rest(_a, ["backgroundColor", "contentColor", "stateType", "icon"]);
18
18
  return (React__default.default.createElement(desktop.PickerButtonDesktop, tslib.__assign({}, restProps, { fieldProps: {
19
19
  backgroundColor: backgroundColor,
20
20
  contentColor: contentColor,
21
21
  stateType: stateType,
22
22
  breakpoint: 1,
23
+ icon: icon,
23
24
  }, Field: field_Component.Field, ref: ref })));
24
25
  });
25
26
 
package/cssm/field/Component.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
+ import { ComponentType, SVGProps } from "react";
3
4
  import { CustomButtonProps } from "@alfalab/core-components-custom-button";
4
5
  import { PickerButtonSize, PickerButtonVariant } from "@alfalab/core-components-picker-button/shared";
5
6
  import { FieldProps as BaseFieldProps } from "@alfalab/core-components-select/shared";
@@ -7,6 +8,7 @@ type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & Custom
7
8
  buttonSize?: PickerButtonSize;
8
9
  buttonVariant?: PickerButtonVariant;
9
10
  showArrow?: boolean;
11
+ icon?: ComponentType<SVGProps<SVGSVGElement>>;
10
12
  };
11
- declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, ...restProps }: FieldProps) => React.JSX.Element;
13
+ declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
12
14
  export { Field };
package/cssm/field/Component.js CHANGED
@@ -31,8 +31,8 @@ var SIZE_TO_CLASSNAME_MAP = {
31
31
  };
32
32
  var Field = function (_a) {
33
33
  var _b;
34
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
35
- var Icon = shared.getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
34
+ var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow", "icon"]);
35
+ var Icon = shared.getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
36
36
  var buttonProps = tslib.__assign(tslib.__assign({}, restProps), innerProps);
37
37
  return (React__default.default.createElement(coreComponentsCustomButton.CustomButton, tslib.__assign({}, buttonProps, { rightAddons: React__default.default.createElement(React.Fragment, null,
38
38
  rightAddons && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.addonsContainer, (_b = {},
package/desktop/Component.desktop.js CHANGED
@@ -14,12 +14,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var DEFAULT_BUTTON_COLOR = '#FF45C3';
15
15
  var DEFAULT_CONTENT_COLOR = 'white';
16
16
  var CustomPickerButtonDesktop = React.forwardRef(function (_a, ref) {
17
- var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? DEFAULT_BUTTON_COLOR : _b, _c = _a.contentColor, contentColor = _c === void 0 ? DEFAULT_CONTENT_COLOR : _c, _d = _a.stateType, stateType = _d === void 0 ? 'darkening' : _d, restProps = tslib.__rest(_a, ["backgroundColor", "contentColor", "stateType"]);
17
+ var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? DEFAULT_BUTTON_COLOR : _b, _c = _a.contentColor, contentColor = _c === void 0 ? DEFAULT_CONTENT_COLOR : _c, _d = _a.stateType, stateType = _d === void 0 ? 'darkening' : _d, icon = _a.icon, restProps = tslib.__rest(_a, ["backgroundColor", "contentColor", "stateType", "icon"]);
18
18
  return (React__default.default.createElement(desktop.PickerButtonDesktop, tslib.__assign({}, restProps, { fieldProps: {
19
19
  backgroundColor: backgroundColor,
20
20
  contentColor: contentColor,
21
21
  stateType: stateType,
22
22
  breakpoint: 1,
23
+ icon: icon,
23
24
  }, Field: field_Component.Field, ref: ref })));
24
25
  });
25
26
 
package/esm/desktop/Component.desktop.js CHANGED
@@ -6,12 +6,13 @@ import { Field } from '../field/Component.js';
6
6
  var DEFAULT_BUTTON_COLOR = '#FF45C3';
7
7
  var DEFAULT_CONTENT_COLOR = 'white';
8
8
  var CustomPickerButtonDesktop = forwardRef(function (_a, ref) {
9
- var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? DEFAULT_BUTTON_COLOR : _b, _c = _a.contentColor, contentColor = _c === void 0 ? DEFAULT_CONTENT_COLOR : _c, _d = _a.stateType, stateType = _d === void 0 ? 'darkening' : _d, restProps = __rest(_a, ["backgroundColor", "contentColor", "stateType"]);
9
+ var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? DEFAULT_BUTTON_COLOR : _b, _c = _a.contentColor, contentColor = _c === void 0 ? DEFAULT_CONTENT_COLOR : _c, _d = _a.stateType, stateType = _d === void 0 ? 'darkening' : _d, icon = _a.icon, restProps = __rest(_a, ["backgroundColor", "contentColor", "stateType", "icon"]);
10
10
  return (React.createElement(PickerButtonDesktop, __assign({}, restProps, { fieldProps: {
11
11
  backgroundColor: backgroundColor,
12
12
  contentColor: contentColor,
13
13
  stateType: stateType,
14
14
  breakpoint: 1,
15
+ icon: icon,
15
16
  }, Field: Field, ref: ref })));
16
17
  });
17
18
 
package/esm/field/Component.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
+ import { ComponentType, SVGProps } from "react";
3
4
  import { CustomButtonProps } from "@alfalab/core-components-custom-button";
4
5
  import { PickerButtonSize, PickerButtonVariant } from "@alfalab/core-components-picker-button/shared";
5
6
  import { FieldProps as BaseFieldProps } from "@alfalab/core-components-select/shared";
@@ -7,6 +8,7 @@ type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & Custom
7
8
  buttonSize?: PickerButtonSize;
8
9
  buttonVariant?: PickerButtonVariant;
9
10
  showArrow?: boolean;
11
+ icon?: ComponentType<SVGProps<SVGSVGElement>>;
10
12
  };
11
- declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, ...restProps }: FieldProps) => React.JSX.Element;
13
+ declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
12
14
  export { Field };
package/esm/field/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { CustomButton } from '@alfalab/core-components-custom-button/esm';
5
5
  import { getIcon } from '@alfalab/core-components-picker-button/esm/shared';
6
6
 
7
- var styles = {"iconContainer":"custom-picker-button__iconContainer_1c0km","addonsContainer":"custom-picker-button__addonsContainer_1c0km","showControlIcon":"custom-picker-button__showControlIcon_1c0km","open":"custom-picker-button__open_1c0km"};
7
+ var styles = {"iconContainer":"custom-picker-button__iconContainer_j0sod","addonsContainer":"custom-picker-button__addonsContainer_j0sod","showControlIcon":"custom-picker-button__showControlIcon_j0sod","open":"custom-picker-button__open_j0sod"};
8
8
  require('./index.css')
9
9
 
10
10
  var SIZE_TO_CLASSNAME_MAP = {
@@ -23,8 +23,8 @@ var SIZE_TO_CLASSNAME_MAP = {
23
23
  };
24
24
  var Field = function (_a) {
25
25
  var _b;
26
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = __rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
27
- var Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
26
+ var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon, restProps = __rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow", "icon"]);
27
+ var Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
28
28
  var buttonProps = __assign(__assign({}, restProps), innerProps);
29
29
  return (React.createElement(CustomButton, __assign({}, buttonProps, { rightAddons: React.createElement(Fragment, null,
30
30
  rightAddons && (React.createElement("span", { className: cn(styles.addonsContainer, (_b = {},
package/esm/field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 18xor */
1
+ /* hash: 14d2e */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,13 +16,13 @@
16
16
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .custom-picker-button__iconContainer_1c0km {
19
+ } .custom-picker-button__iconContainer_j0sod {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .custom-picker-button__addonsContainer_1c0km {
22
+ } .custom-picker-button__addonsContainer_j0sod {
23
23
  display: flex
24
- } .custom-picker-button__addonsContainer_1c0km.custom-picker-button__showControlIcon_1c0km {
24
+ } .custom-picker-button__addonsContainer_j0sod.custom-picker-button__showControlIcon_j0sod {
25
25
  margin-right: var(--gap-2xs);
26
- } .custom-picker-button__open_1c0km {
26
+ } .custom-picker-button__open_j0sod {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/field/Component.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
+ import { ComponentType, SVGProps } from "react";
3
4
  import { CustomButtonProps } from "@alfalab/core-components-custom-button";
4
5
  import { PickerButtonSize, PickerButtonVariant } from "@alfalab/core-components-picker-button/shared";
5
6
  import { FieldProps as BaseFieldProps } from "@alfalab/core-components-select/shared";
@@ -7,6 +8,7 @@ type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & Custom
7
8
  buttonSize?: PickerButtonSize;
8
9
  buttonVariant?: PickerButtonVariant;
9
10
  showArrow?: boolean;
11
+ icon?: ComponentType<SVGProps<SVGSVGElement>>;
10
12
  };
11
- declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, ...restProps }: FieldProps) => React.JSX.Element;
13
+ declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
12
14
  export { Field };
package/field/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"iconContainer":"custom-picker-button__iconContainer_1c0km","addonsContainer":"custom-picker-button__addonsContainer_1c0km","showControlIcon":"custom-picker-button__showControlIcon_1c0km","open":"custom-picker-button__open_1c0km"};
16
+ var styles = {"iconContainer":"custom-picker-button__iconContainer_j0sod","addonsContainer":"custom-picker-button__addonsContainer_j0sod","showControlIcon":"custom-picker-button__showControlIcon_j0sod","open":"custom-picker-button__open_j0sod"};
17
17
  require('./index.css')
18
18
 
19
19
  var SIZE_TO_CLASSNAME_MAP = {
@@ -32,8 +32,8 @@ var SIZE_TO_CLASSNAME_MAP = {
32
32
  };
33
33
  var Field = function (_a) {
34
34
  var _b;
35
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
36
- var Icon = shared.getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
35
+ var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow", "icon"]);
36
+ var Icon = shared.getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
37
37
  var buttonProps = tslib.__assign(tslib.__assign({}, restProps), innerProps);
38
38
  return (React__default.default.createElement(coreComponentsCustomButton.CustomButton, tslib.__assign({}, buttonProps, { rightAddons: React__default.default.createElement(React.Fragment, null,
39
39
  rightAddons && (React__default.default.createElement("span", { className: cn__default.default(styles.addonsContainer, (_b = {},
package/field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 18xor */
1
+ /* hash: 14d2e */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,13 +16,13 @@
16
16
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .custom-picker-button__iconContainer_1c0km {
19
+ } .custom-picker-button__iconContainer_j0sod {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .custom-picker-button__addonsContainer_1c0km {
22
+ } .custom-picker-button__addonsContainer_j0sod {
23
23
  display: flex
24
- } .custom-picker-button__addonsContainer_1c0km.custom-picker-button__showControlIcon_1c0km {
24
+ } .custom-picker-button__addonsContainer_j0sod.custom-picker-button__showControlIcon_j0sod {
25
25
  margin-right: var(--gap-2xs);
26
- } .custom-picker-button__open_1c0km {
26
+ } .custom-picker-button__open_j0sod {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/modern/desktop/Component.desktop.js CHANGED
@@ -4,11 +4,12 @@ import { Field } from '../field/Component.js';
4
4
 
5
5
  const DEFAULT_BUTTON_COLOR = '#FF45C3';
6
6
  const DEFAULT_CONTENT_COLOR = 'white';
7
- const CustomPickerButtonDesktop = forwardRef(({ backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', ...restProps }, ref) => (React.createElement(PickerButtonDesktop, { ...restProps, fieldProps: {
7
+ const CustomPickerButtonDesktop = forwardRef(({ backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', icon, ...restProps }, ref) => (React.createElement(PickerButtonDesktop, { ...restProps, fieldProps: {
8
8
  backgroundColor,
9
9
  contentColor,
10
10
  stateType,
11
11
  breakpoint: 1,
12
+ icon,
12
13
  }, Field: Field, ref: ref })));
13
14
 
14
15
  export { CustomPickerButtonDesktop };
package/modern/field/Component.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
+ import { ComponentType, SVGProps } from "react";
3
4
  import { CustomButtonProps } from "@alfalab/core-components-custom-button";
4
5
  import { PickerButtonSize, PickerButtonVariant } from "@alfalab/core-components-picker-button/shared";
5
6
  import { FieldProps as BaseFieldProps } from "@alfalab/core-components-select/shared";
@@ -7,6 +8,7 @@ type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & Custom
7
8
  buttonSize?: PickerButtonSize;
8
9
  buttonVariant?: PickerButtonVariant;
9
10
  showArrow?: boolean;
11
+ icon?: ComponentType<SVGProps<SVGSVGElement>>;
10
12
  };
11
- declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, ...restProps }: FieldProps) => React.JSX.Element;
13
+ declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
12
14
  export { Field };
package/modern/field/Component.js CHANGED
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { CustomButton } from '@alfalab/core-components-custom-button/modern';
4
4
  import { getIcon } from '@alfalab/core-components-picker-button/modern/shared';
5
5
 
6
- const styles = {"iconContainer":"custom-picker-button__iconContainer_1c0km","addonsContainer":"custom-picker-button__addonsContainer_1c0km","showControlIcon":"custom-picker-button__showControlIcon_1c0km","open":"custom-picker-button__open_1c0km"};
6
+ const styles = {"iconContainer":"custom-picker-button__iconContainer_j0sod","addonsContainer":"custom-picker-button__addonsContainer_j0sod","showControlIcon":"custom-picker-button__showControlIcon_j0sod","open":"custom-picker-button__open_j0sod"};
7
7
  require('./index.css')
8
8
 
9
9
  const SIZE_TO_CLASSNAME_MAP = {
@@ -20,8 +20,8 @@ const SIZE_TO_CLASSNAME_MAP = {
20
20
  64: 'size-64',
21
21
  72: 'size-72',
22
22
  };
23
- const Field = ({ buttonSize = 56, buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, ...restProps }) => {
24
- const Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
23
+ const Field = ({ buttonSize = 56, buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, icon, ...restProps }) => {
24
+ const Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
25
25
  const buttonProps = {
26
26
  ...restProps,
27
27
  ...innerProps,
package/modern/field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 18xor */
1
+ /* hash: 14d2e */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,13 +16,13 @@
16
16
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .custom-picker-button__iconContainer_1c0km {
19
+ } .custom-picker-button__iconContainer_j0sod {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .custom-picker-button__addonsContainer_1c0km {
22
+ } .custom-picker-button__addonsContainer_j0sod {
23
23
  display: flex
24
- } .custom-picker-button__addonsContainer_1c0km.custom-picker-button__showControlIcon_1c0km {
24
+ } .custom-picker-button__addonsContainer_j0sod.custom-picker-button__showControlIcon_j0sod {
25
25
  margin-right: var(--gap-2xs);
26
- } .custom-picker-button__open_1c0km {
26
+ } .custom-picker-button__open_j0sod {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-custom-picker-button",
3
- "version": "2.2.7",
3
+ "version": "2.2.9",
4
4
  "description": "Custom picker button component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,10 +15,10 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-picker-button": "^11.6.7",
18
+ "@alfalab/core-components-picker-button": "^11.7.0",
19
19
  "@alfalab/core-components-custom-button": "^3.5.3",
20
20
  "@alfalab/core-components-mq": "^4.2.0",
21
- "@alfalab/core-components-select": "^17.4.1",
21
+ "@alfalab/core-components-select": "^17.4.3",
22
22
  "classnames": "^2.3.1",
23
23
  "tslib": "^2.4.0"
24
24
  }
package/src/desktop/Component.desktop.tsx CHANGED
@@ -23,6 +23,7 @@ export const CustomPickerButtonDesktop = forwardRef<
23
23
  backgroundColor = DEFAULT_BUTTON_COLOR,
24
24
  contentColor = DEFAULT_CONTENT_COLOR,
25
25
  stateType = 'darkening',
26
+ icon,
26
27
  ...restProps
27
28
  },
28
29
  ref,
@@ -34,6 +35,7 @@ export const CustomPickerButtonDesktop = forwardRef<
34
35
  contentColor,
35
36
  stateType,
36
37
  breakpoint: 1,
38
+ icon,
37
39
  }}
38
40
  Field={DefaultField}
39
41
  ref={ref}
package/src/field/Component.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ButtonHTMLAttributes, FC, Fragment, SVGProps } from 'react';
1
+ import React, { ButtonHTMLAttributes, ComponentType, Fragment, SVGProps } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
4
  import { CustomButton, CustomButtonProps } from '@alfalab/core-components-custom-button';
@@ -16,6 +16,7 @@ type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &
16
16
  buttonSize?: PickerButtonSize;
17
17
  buttonVariant?: PickerButtonVariant;
18
18
  showArrow?: boolean;
19
+ icon?: ComponentType<SVGProps<SVGSVGElement>>;
19
20
  };
20
21
 
21
22
  const SIZE_TO_CLASSNAME_MAP = {
@@ -45,11 +46,13 @@ export const Field = ({
45
46
  innerProps,
46
47
  className,
47
48
  showArrow = true,
49
+ icon,
48
50
  ...restProps
49
51
  }: FieldProps) => {
50
- const Icon: FC<SVGProps<SVGSVGElement>> = getIcon(
52
+ const Icon: ComponentType<SVGProps<SVGSVGElement>> = getIcon(
51
53
  buttonVariant,
52
54
  SIZE_TO_CLASSNAME_MAP[buttonSize],
55
+ icon,
53
56
  );
54
57
 
55
58
  const buttonProps = {