@trafilea/afrodita-components 6.37.1 → 6.37.2

package/build/index.d.ts

@@ -2587,8 +2587,9 @@ interface ColorPickerWithTooltipProps {
     onChange: (color: ColorPickerOption) => void;
     inline?: boolean;
     showCross?: boolean;
+    className?: string;
 }
-declare const ColorPickerWithTooltip: ({ options, selectedValue, label, onChange, inline, maxVisibleOptions, showCross, }: ColorPickerWithTooltipProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ColorPickerWithTooltip: ({ options, selectedValue, label, onChange, inline, maxVisibleOptions, showCross, className, }: ColorPickerWithTooltipProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface MultiColorPickerProps {
     options?: ColorPickerOption[];

package/build/index.esm.js

@@ -7086,11 +7086,11 @@ var SingleColorPicker = function (_a) {
 };
 
 var ColorPickerWithTooltip = function (_a) {
-    var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
+    var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross, className = _a.className;
     var visibleOptions = options.slice(0, maxVisibleOptions);
     var hiddenOptions = options.slice(maxVisibleOptions);
     var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n    position: relative;\n    max-width: 300px;\n\n    .tooltip-container {\n      position: absolute;\n      transform: translateX(-30%);\n      &::before,\n      &::after {\n        left: 80%;\n      }\n    }\n\n    .arrow {\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      margin-bottom: 10px;\n    }\n\n    .tooltip-content {\n      display: flex;\n      max-width: 300px;\n      flex-wrap: wrap;\n    }\n  "], ["\n    position: relative;\n    max-width: 300px;\n\n    .tooltip-container {\n      position: absolute;\n      transform: translateX(-30%);\n      &::before,\n      &::after {\n        left: 80%;\n      }\n    }\n\n    .arrow {\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      margin-bottom: 10px;\n    }\n\n    .tooltip-content {\n      display: flex;\n      max-width: 300px;\n      flex-wrap: wrap;\n    }\n  "])));
-    return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
+    return (jsxs(ColorPickerWrapper, __assign$1({ className: className, value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
 };
 var templateObject_1$1u;
 

package/build/index.js

@@ -7112,11 +7112,11 @@ var SingleColorPicker = function (_a) {
 };
 
 var ColorPickerWithTooltip = function (_a) {
-    var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
+    var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross, className = _a.className;
     var visibleOptions = options.slice(0, maxVisibleOptions);
     var hiddenOptions = options.slice(maxVisibleOptions);
     var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n    position: relative;\n    max-width: 300px;\n\n    .tooltip-container {\n      position: absolute;\n      transform: translateX(-30%);\n      &::before,\n      &::after {\n        left: 80%;\n      }\n    }\n\n    .arrow {\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      margin-bottom: 10px;\n    }\n\n    .tooltip-content {\n      display: flex;\n      max-width: 300px;\n      flex-wrap: wrap;\n    }\n  "], ["\n    position: relative;\n    max-width: 300px;\n\n    .tooltip-container {\n      position: absolute;\n      transform: translateX(-30%);\n      &::before,\n      &::after {\n        left: 80%;\n      }\n    }\n\n    .arrow {\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      margin-bottom: 10px;\n    }\n\n    .tooltip-content {\n      display: flex;\n      max-width: 300px;\n      flex-wrap: wrap;\n    }\n  "])));
-    return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
+    return (jsxs(ColorPickerWrapper, __assign$1({ className: className, value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
 };
 var templateObject_1$1u;
 

package/package.json

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