venice-ui 2.4.12 → 3.0.1

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -15,32 +15,53 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
-const Input_1 = require("../Input");
-const Aligment_1 = require("../Aligment");
+const ComponentRoot_1 = require("../ComponentRoot");
+const config_1 = require("../../config");
+const config_2 = require("../../config");
+const date_fns_1 = require("date-fns");
 const react_1 = __importStar(require("react"));
-const styled_components_1 = require("styled-components");
-const Theme_1 = require("../../Theme");
-const DatePiocker_styles_1 = require("./DatePiocker.styles");
-const Dropdown_1 = require("../Dropdown");
+const DatePicker_styles_1 = require("./DatePicker.styles");
+const Icon_1 = require("../Icon");
+const Aligment_1 = require("../Aligment");
 const react_dom_1 = require("react-dom");
 const Calendar_1 = require("./Calendar");
-const date_fns_1 = require("date-fns");
-const Icons_1 = require("../Icons");
-const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex, calendarLabels, localeLabels, isAdvance = true }) => {
+const DatePicker = ({ name, value, label, labelPosition = 'top', theme, themeVariant = 'default', handleChange, zIndex, labels = config_2.wordbook.calendar.actionLabels, localeLabels = {
+    months: config_2.wordbook.calendar.months,
+    weekdaysShort: config_2.wordbook.calendar.weekdaysShort,
+    firstDayOfWeek: 1,
+}, placeholder = config_2.wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const datePickerConfig = componentsConfig.datePicker;
+    const triggerRef = (0, react_1.useRef)(null);
     const [open, toogleOpen] = (0, react_1.useState)(false);
-    const sourceRef = (0, react_1.useRef)(null);
     const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({
         top: 0,
         left: 0,
+        triggerTop: 0,
     });
     const onSubmit = (selectedDate) => {
         handleChange(name, selectedDate);
@@ -51,26 +72,31 @@ const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = fals
         toogleOpen(false);
     };
     const handleOpen = () => {
-        if (!disabled && !open) {
-            if (sourceRef.current) {
-                const buttonRect = sourceRef.current.getBoundingClientRect();
-                const positionStyle = {
-                    top: buttonRect.bottom + window.scrollY,
-                    left: buttonRect.left + window.scrollX,
-                };
-                setDropdownStyles(positionStyle);
+        if (!disabled && !readOnly && !open) {
+            if (triggerRef.current) {
+                const triggerRect = triggerRef.current.getBoundingClientRect();
+                setDropdownStyles({
+                    top: triggerRect.bottom + window.scrollY,
+                    left: triggerRect.left + window.scrollX,
+                    triggerTop: triggerRect.top + window.scrollY,
+                });
             }
-            toogleOpen(!open);
+            toogleOpen(true);
         }
     };
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
-            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-            react_1.default.createElement(Input_1.InputWrapper, { width: width }, readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value ? (0, date_fns_1.format)(new Date(value), 'dd-MM-yyyy') : '')) : (react_1.default.createElement(DatePiocker_styles_1.DatePiockerElement, { ref: sourceRef },
-                react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, onClick: () => handleOpen() }, value ? (0, date_fns_1.format)(new Date(value), 'dd-MM-yyyy') : placeholder),
-                value && (react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
-                    react_1.default.createElement(Icons_1.Icon, { name: 'close', size: 24, onClick: clearDate, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
-                open &&
-                    (0, react_dom_1.createPortal)(react_1.default.createElement(Calendar_1.Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), value: value, handleSelect: onSubmit, isAdvance: isAdvance, zIndex: zIndex, labels: calendarLabels, localeLabels: localeLabels }), document.body)))))));
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: datePickerConfig, label: label, componentWidth: componentWidth },
+        react_1.default.createElement(DatePicker_styles_1.TrigerWrapper, { ref: triggerRef, onClick: handleOpen },
+            react_1.default.createElement(DatePicker_styles_1.DatePickerValue, { theme: resolvedTheme, config: datePickerConfig, size: size },
+                value ? (0, date_fns_1.format)(new Date(value), 'dd-MM-yyyy') : placeholder,
+                react_1.default.createElement(Aligment_1.Aligment, { width: "auto", align: "flex-end", gap: datePickerConfig.size.common.iconGap },
+                    value && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
+                            if (e?.stopPropagation) {
+                                e.stopPropagation();
+                            }
+                            clearDate();
+                        } })),
+                    !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "calendar", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleOpen }))))),
+        open &&
+            (0, react_dom_1.createPortal)(react_1.default.createElement(Calendar_1.Calendar, { zIndex: zIndex || datePickerConfig.size.common.zIndex, config: datePickerConfig, theme: resolvedTheme, themeVariant: themeVariant, value: value, top: dropdownStyles.top, left: dropdownStyles.left, triggerTop: dropdownStyles.triggerTop, labels: labels, localeLabels: localeLabels, isAdvance: isAdvance, autoConfirm: autoConfirmProp, handleClose: () => toogleOpen(false), handleSelect: onSubmit }), document.body)));
 };
 exports.DatePicker = DatePicker;

package/dist/cjs/components/DatePicker/DatePicker.styles.js

@@ -0,0 +1,166 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Month = exports.Day = exports.DaysHeader = exports.CalendarContentRoot = exports.CalendarHeaderButton = exports.CalendarHeaderRoot = exports.CalendarOverlayer = exports.CalendarRoot = exports.DatePickerValue = exports.TrigerWrapper = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+exports.TrigerWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+`;
+exports.DatePickerValue = styled_components_1.default.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  width: 100%;
+  border: none;
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline: none;
+  height: ${({ config, size }) => config.size[size].height}px;
+  font-size: ${({ config, size }) => config.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.size[size].paddingX}px};
+  color: ${({ theme, config, disabled }) => disabled ? config.color.disabled.text : config.color.default.text};
+
+  ${({ disabled, theme, config }) => disabled &&
+    `
+    background: ${config.color.disabled.bg};
+    border-color: ${config.color.disabled.bg};  
+    `}
+  `;
+exports.CalendarRoot = styled_components_1.default.div `
+  box-sizing: border-box;
+  background-color: ${({ config, theme }) => config.color.background};
+  box-shadow: ${({ config, theme }) => config.color.shadow};
+  border-radius: ${({ config }) => config.size.borderRadius}px;
+  height: auto;
+  width: ${({ config }) => config.size.width}px;
+  position: absolute;
+  z-index: ${({ theme, config, zIndex }) => zIndex || config.size.zIndex};
+  left: ${(p) => p.left}px;
+  top: ${(p) => p.top}px;
+  border: 1px solid ${({ theme, config }) => config.color.border};
+  border-top: none;
+  min-width: 30px;
+`;
+const overlayerFadeIn = (0, styled_components_1.keyframes) `
+  from { opacity: 0; }
+  to   { opacity: 1; }
+`;
+exports.CalendarOverlayer = styled_components_1.default.div `
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: ${({ config, theme }) => config.color.overlayer};
+  z-index: ${({ config, theme }) => config.size.overlayerZIndex};
+  animation: ${overlayerFadeIn} 200ms ease-out;
+`;
+exports.CalendarHeaderRoot = styled_components_1.default.div `
+  background-color: ${({ config, theme }) => config.color.background};
+  width: 100%;
+  height: ${({ config }) => config.size.headerHeight}px;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0 ${({ config }) => config.size.headerPaddingX}px;
+  align-items: center;
+  justify-content: space-between;
+  font-size: ${({ config }) => config.size.fontSize}px;
+  line-height: ${({ config }) => config.size.lineHeight}px;
+  color: ${({ config, theme }) => config.color.text};
+`;
+exports.CalendarHeaderButton = styled_components_1.default.div `
+  background: transparent;
+  color: ${({ config, theme, disabled }) => disabled ? config.color.disabled.text : config.color.text};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ config }) => config.size.gap}px;
+  :hover {
+    color: ${({ config, theme, disabled }) => disabled ? config.color.disabled.text : config.color.hover.text};
+  }
+`;
+exports.CalendarContentRoot = styled_components_1.default.div `
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(${({ days }) => (days ? 7 : 3)}, minmax(0, 1fr));
+  gap: ${({ config }) => config.size.gap}px;
+  box-sizing: border-box;
+  padding: ${({ config }) => config.size.padding}px;
+`;
+exports.DaysHeader = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${({ config }) => config.size.cellWidth}px;
+  height: ${({ config }) => config.size.cellHeight}px;
+  border-radius: ${({ config }) => config.size.cellRadius}px;
+  box-sizing: border-box;
+  font-size: ${({ config }) => config.size.weekdays.fontSize}px;
+  line-height: ${({ config }) => config.size.weekdays.lineHeight}px;
+  color: ${({ config, theme }) => config.color.weekdays.text};
+`;
+exports.Day = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${({ config }) => config.size.cellWidth}px;
+  height: ${({ config }) => config.size.cellHeight}px;
+  border-radius: ${({ config }) => config.size.cellRadius}px;
+  box-sizing: border-box;
+  font-size: ${({ config }) => config.size.day.fontSize}px;
+  line-height: ${({ config }) => config.size.day.lineHeight}px;
+  color: ${({ config, theme }) => config.color.day.text};
+  cursor: ${({ haveContent }) => (haveContent ? 'pointer' : 'default')};
+  :hover { 
+    background-color: ${({ haveContent, config, isSelected }) => haveContent ? isSelected ? config.color.day.selectedHover : config.color.day.hover : 'transparent'};
+    color: ${({ haveContent, config, theme, isSelected }) => haveContent ? isSelected ? config.color.day.selectedText : config.color.day.hoverText : config.color.day.text};
+  }
+  background-color: ${({ isSelected, config }) => isSelected ? config.color.day.selected : 'transparent'};
+  color: ${({ isSelected, config, theme }) => isSelected ? config.color.day.selectedText : config.color.day.text};
+`;
+exports.Month = (0, styled_components_1.default)(exports.Day) `
+    width: 100%;
+`;

package/dist/cjs/components/DatePicker/index.js

@@ -1,17 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DatePicker"), exports);
+exports.Calendar = exports.DatePicker = void 0;
+var DatePicker_1 = require("./DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
+var Calendar_1 = require("./Calendar");
+Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return Calendar_1.Calendar; } });

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -15,72 +15,96 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
+const config_1 = require("../../config");
 const react_1 = __importStar(require("react"));
-const Aligment_1 = require("../Aligment");
+const ComponentRoot_1 = require("../ComponentRoot");
 const Dropdown_styles_1 = require("./Dropdown.styles");
-const DropdownElements_1 = require("./DropdownElements");
-const Input_1 = require("../Input");
-const common_1 = require("../common");
+const config_2 = require("../../config");
+const Icon_1 = require("../Icon");
+const Input_styles_1 = require("../Input/Input.styles");
 const react_dom_1 = require("react-dom");
-const Icons_1 = require("../Icons");
-const Theme_1 = require("../../Theme");
-const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, maxHeight, readOnly = false, theme = Theme_1.mainTheme, handleFieldFocus, handleFieldBlur, }) => {
-    const [open, toogleOpen] = (0, react_1.useState)(false);
-    const ref = (0, react_1.useRef)(null);
-    const sourceRef = (0, react_1.useRef)(null);
-    const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
+const OptionsPanel_1 = require("../OptionsPanel");
+const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md', width, disabled, error, helperText, readOnly = false, placeholder = config_2.wordbook.dropdown.placeholder, theme, themeVariant = 'default', options, handleChange, position, zIndex, handleFieldFocus, handleFieldBlur, required = false, optional = false, optionalLabel, prefix, prefixIcon, prefixIconAction, searchable = false, handleAdd, maxRows = 6, noBreakLabel = true, componentWidth, }) => {
+    const { resolvedTheme, componentsConfig } = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const dropdonwConfig = componentsConfig.dropdown;
+    const [open, toggleOpen] = (0, react_1.useState)(false);
+    const triggerRef = (0, react_1.useRef)(null);
+    const panelRef = (0, react_1.useRef)(null);
+    const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({
+        top: 0,
+    });
     const getLabelForValue = (value) => {
-        return options.find((option) => option.value === value).label;
+        return options.find((option) => option.value === value)?.label;
+    };
+    const onPrefixIconClick = () => {
+        if (prefixIconAction && !disabled && !readOnly) {
+            prefixIconAction(name);
+        }
     };
-    const handleOpen = () => {
-        if (!disabled) {
-            if (sourceRef.current) {
-                const buttonRect = sourceRef.current.getBoundingClientRect();
+    const handleToggleOpen = () => {
+        if (!disabled && !readOnly) {
+            if (!open && triggerRef.current) {
+                const buttonRect = triggerRef.current.getBoundingClientRect();
                 const positionStyle = {
                     top: buttonRect.bottom + window.scrollY,
                     width: buttonRect.width,
                 };
-                if (position === 'left') {
-                    positionStyle.left = buttonRect.left + window.scrollX;
+                if (position === 'right') {
+                    positionStyle.left =
+                        buttonRect.right - buttonRect.width + window.scrollX;
                 }
-                else if (position === 'right') {
-                    positionStyle.right =
-                        window.innerWidth -
-                            (buttonRect.left + buttonRect.width + window.scrollX);
+                else {
+                    positionStyle.left = buttonRect.left + window.scrollX;
                 }
                 setDropdownStyles(positionStyle);
+                handleFieldFocus && handleFieldFocus(name);
             }
-            toogleOpen(!open);
-            handleFieldFocus && handleFieldFocus(name);
+            if (open) {
+                handleFieldBlur && handleFieldBlur();
+            }
+            toggleOpen(!open);
         }
     };
-    const selectOption = (e, selectedValue, isDisabled) => {
-        e.stopPropagation();
-        if (!isDisabled) {
-            handleSelect(name, selectedValue);
-            toogleOpen(false);
-            handleFieldBlur && handleFieldBlur();
-        }
+    const handleSelectOption = (selectedValue) => {
+        handleChange(name, selectedValue);
+        toggleOpen(false);
+        handleFieldBlur && handleFieldBlur();
     };
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
-                toogleOpen(false);
+            const target = event.target;
+            const clickedInsideTrigger = triggerRef.current?.contains(target);
+            const clickedInsidePanel = panelRef.current?.contains(target);
+            if (!clickedInsideTrigger && !clickedInsidePanel) {
+                toggleOpen(false);
                 handleFieldBlur && handleFieldBlur();
             }
         };
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
-                close();
+                toggleOpen(false);
                 handleFieldBlur && handleFieldBlur();
             }
         };
@@ -92,16 +116,16 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
             document.removeEventListener('click', handleClickOutside, true);
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [open]);
-    return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-        label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value)) : (react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
-            react_1.default.createElement(DropdownElements_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, rightPadding: true }, value ? getLabelForValue(value) : placeholder),
-            react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
-                react_1.default.createElement(Icons_1.Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
-            open &&
-                (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex, maxHeight: maxHeight }, options &&
-                    options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value, option.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
-            error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
+    }, [open, handleFieldBlur]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: dropdonwConfig, label: label, isActive: open, noBreakLabel: noBreakLabel, componentWidth: componentWidth },
+            react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef },
+                prefixIcon && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: prefixIcon, size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
+                prefix && !readOnly && (react_1.default.createElement(Input_styles_1.PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: dropdonwConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
+                react_1.default.createElement(Dropdown_styles_1.DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
+                !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
+        open &&
+            (0, react_dom_1.createPortal)(react_1.default.createElement(Dropdown_styles_1.DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig },
+                react_1.default.createElement(OptionsPanel_1.OptionsPanel, { options: options, size: size, handleSelect: handleSelectOption, value: value, searchable: searchable, placeholder: placeholder, theme: theme, themeVariant: themeVariant, maxRows: maxRows, zIndex: zIndex, handleAdd: handleAdd })), document.body)));
 };
 exports.Dropdown = Dropdown;

package/dist/cjs/components/Dropdown/Dropdown.styles.js

@@ -3,12 +3,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownElement = void 0;
+exports.DropdownMenuPanel = exports.TrigerWrapper = exports.DropdownValue = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.DropdownElement = styled_components_1.default.div `
-  position: relative;
-  cursor: pointer;
-  display:flex;
-  box-sizing:border-box;
-  width:100%;
+exports.DropdownValue = styled_components_1.default.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  width: 100%;
+  border: none;
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline: none;
+  height: ${({ config, inputSize }) => config.size[inputSize].height}px;
+  font-size: ${({ config, inputSize }) => config.size[inputSize].fontSize}px;
+  line-height: ${({ config, inputSize }) => config.size[inputSize].lineHeight}px;
+  padding: 0 ${({ config, inputSize }) => config.size[inputSize].paddingX}px};
+  color: ${({ theme, config, disabled }) => disabled ? config.color.disabled.text : config.color.default.text};
+
+  ${({ disabled, theme, config }) => disabled &&
+    `
+    background: ${config.color.disabled.bg};
+    border-color: ${config.color.disabled.bg};  
+    `}
+  `;
+exports.TrigerWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+`;
+exports.DropdownMenuPanel = styled_components_1.default.div `
+  box-sizing: border-box;
+  position: absolute;
+  padding: ${({ config }) => config.menu.size.padding}px;
+  background: ${({ theme, config }) => config.menu.color.background};
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4);
+  border-radius: ${({ config }) => config.menu.size.borderRadius}px;
+  border: 1px solid ${({ theme, config }) => config.menu.color.border};
+  z-index: ${({ theme, config, zIndex }) => zIndex ? zIndex : config.menu.size.zIndex};
+  opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
+  transform: ${({ isOpen }) => isOpen ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)'};
+  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transform-origin: top center;
+  pointer-events: ${({ isOpen }) => (isOpen ? 'auto' : 'none')};
 `;

package/dist/cjs/components/Dropdown/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Dropdown"), exports);
-__exportStar(require("./DropdownElements"), exports);