@trafilea/afrodita-components 6.10.0 → 6.11.0

package/build/index.d.ts

@@ -2290,6 +2290,7 @@ declare type DropdownOption<T> = {
     label: string;
     value: T;
     disabled: boolean;
+    imageURL?: string;
 };
 declare type SizeOption = {
     label: string;
@@ -2525,6 +2526,7 @@ declare type CommonProps<T> = {
     testId?: string;
     required?: string;
     showRequiredPlaceholder?: boolean;
+    imageURL?: string;
 };
 declare type ControlledProps<T> = {
     value: Value<T>;

package/build/index.esm.js

@@ -4718,7 +4718,7 @@ var BaseDropdownButton = function (_a) {
                             alignItems: 'flex-start',
                             whiteSpace: 'nowrap',
                             overflowX: 'hidden',
-                        } }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (children), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
+                        } }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (jsx(Fragment, { children: children }, void 0)), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
         } }), void 0));
 };
 var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
@@ -4919,12 +4919,12 @@ var Checkbox = function (_a) {
 var templateObject_1$1L, templateObject_2$1b;
 
 var CustomOption = newStyled.li(function (_a) {
-    var theme = _a.theme, selected = _a.selected, active = _a.active;
+    var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
     return ({
         listStyleType: 'none',
         display: 'flex',
         flexDirection: 'row',
-        alignItems: 'flex-start',
+        alignItems: hasImage ? 'center' : 'flex-start',
         margin: 0,
         cursor: 'pointer',
         padding: theme.component.dropdown.optionPadding,
@@ -4939,11 +4939,11 @@ var CustomOption = newStyled.li(function (_a) {
     });
 });
 function BaseDropdownOption(_a) {
-    var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected;
+    var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected, _c = _a.hasImage, hasImage = _c === void 0 ? false : _c;
     var theme = useTheme();
     return (jsx$1(BaseSelect$1.Option, __assign$1({ value: value, disabled: disabled, as: Fragment$1 }, { children: function (_a) {
             var selected = _a.selected, active = _a.active;
-            return (jsxs$1(CustomOption, __assign$1({ theme: theme, selected: isSelected || selected, active: active }, { children: [hasCheckbox && (jsx$1(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
+            return (jsxs$1(CustomOption, __assign$1({ theme: theme, selected: isSelected || selected, active: active, hasImage: hasImage }, { children: [hasCheckbox && (jsx$1(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
         } }), void 0));
 }
 
@@ -4996,7 +4996,7 @@ function SimpleDropdown(_a) {
         setSelectedValue(value);
     }, [value, options, initialValue]);
     var DropdownContainer = showRequiredPlaceholder ? Container$16 : Fragment$1;
-    return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
+    return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionLabel] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
 }
 var templateObject_1$1K, templateObject_2$1a;
 

package/build/index.js

@@ -4744,7 +4744,7 @@ var BaseDropdownButton = function (_a) {
                             alignItems: 'flex-start',
                             whiteSpace: 'nowrap',
                             overflowX: 'hidden',
-                        } }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (children), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
+                        } }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (jsx(Fragment, { children: children }, void 0)), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
         } }), void 0));
 };
 var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
@@ -4945,12 +4945,12 @@ var Checkbox = function (_a) {
 var templateObject_1$1L, templateObject_2$1b;
 
 var CustomOption = newStyled.li(function (_a) {
-    var theme = _a.theme, selected = _a.selected, active = _a.active;
+    var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
     return ({
         listStyleType: 'none',
         display: 'flex',
         flexDirection: 'row',
-        alignItems: 'flex-start',
+        alignItems: hasImage ? 'center' : 'flex-start',
         margin: 0,
         cursor: 'pointer',
         padding: theme.component.dropdown.optionPadding,
@@ -4965,11 +4965,11 @@ var CustomOption = newStyled.li(function (_a) {
     });
 });
 function BaseDropdownOption(_a) {
-    var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected;
+    var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected, _c = _a.hasImage, hasImage = _c === void 0 ? false : _c;
     var theme = useTheme();
     return (jsxRuntime.jsx(BaseSelect$1.Option, __assign$1({ value: value, disabled: disabled, as: React$2.Fragment }, { children: function (_a) {
             var selected = _a.selected, active = _a.active;
-            return (jsxRuntime.jsxs(CustomOption, __assign$1({ theme: theme, selected: isSelected || selected, active: active }, { children: [hasCheckbox && (jsxRuntime.jsx(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: exports.ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
+            return (jsxRuntime.jsxs(CustomOption, __assign$1({ theme: theme, selected: isSelected || selected, active: active, hasImage: hasImage }, { children: [hasCheckbox && (jsxRuntime.jsx(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: exports.ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
         } }), void 0));
 }
 
@@ -5022,7 +5022,7 @@ function SimpleDropdown(_a) {
         setSelectedValue(value);
     }, [value, options, initialValue]);
     var DropdownContainer = showRequiredPlaceholder ? Container$16 : React$2.Fragment;
-    return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
+    return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionLabel] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
 }
 var templateObject_1$1K, templateObject_2$1a;
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",