venice-ui 2.4.13 → 3.0.1

package/dist/esm/components/DatePicker/CalendarContent.js

@@ -1,8 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import { CalendarContentWrapper, Day, DayLabel, DayLabelWrapper, DaysContent, DaysHeader, DayWrapper, Month, MonthWrapper, } from './DatePiocker.styles';
-import { getDate, getDay, getDaysInMonth, getMonth, getYear, startOfMonth, } from 'date-fns';
-import { Aligment } from '../Aligment';
-export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
+import { getYear, getMonth, startOfMonth, getDaysInMonth, getDay, getDate, } from 'date-fns';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { CalendarContentRoot, Day, DaysHeader, Month, } from './DatePicker.styles';
+export const CalendarContent = ({ theme, themeVariant = 'default', date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const datePickerConfig = componentsConfig.datePicker.calendarContent;
     const [tempYear, setTempYear] = useState(getYear(date));
     const [tempMonth, setTempMonth] = useState(getMonth(date));
     useEffect(() => {
@@ -10,12 +18,11 @@ export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsSco
         setTempMonth(getMonth(date));
     }, [date]);
     const viewDate = new Date(tempYear, tempMonth, 1);
-    const [days, setDays] = useState([]);
     const firstDayOfMonth = startOfMonth(viewDate);
     const daysInMonth = getDaysInMonth(viewDate);
     const firstDayIndex = getDay(firstDayOfMonth);
     const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
-    useEffect(() => {
+    const days = useMemo(() => {
         const daysScope = [];
         for (let i = 1; i <= beforeIndex; i++) {
             daysScope.push('');
@@ -23,8 +30,8 @@ export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsSco
         for (let j = 1; j <= daysInMonth; j++) {
             daysScope.push(j.toString());
         }
-        setDays(daysScope);
-    }, [viewDate, beforeIndex, daysInMonth]);
+        return daysScope;
+    }, [beforeIndex, daysInMonth]);
     const setDay = (day) => {
         if (!isNaN(day)) {
             const newDate = new Date(tempYear, tempMonth, day);
@@ -33,36 +40,38 @@ export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsSco
     };
     const handleSetMonth = (month) => {
         if (!isNaN(month)) {
-            setTempMonth(month);
+            const newDate = new Date(tempYear, month, 1);
+            handleChange(newDate);
             changeMode('day');
         }
     };
     const handleSetYear = (year) => {
         if (!isNaN(year)) {
-            setTempYear(year);
+            const newDate = new Date(year, tempMonth, 1);
+            handleChange(newDate);
             changeMode('month');
         }
     };
-    const months = localeLabels?.months ?? [
-        'January', 'February', 'March', 'April', 'May', 'June',
-        'July', 'August', 'September', 'October', 'November', 'December'
-    ];
-    const weekdays = localeLabels?.weekdaysShort ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    return (React.createElement(CalendarContentWrapper, null,
-        mode === 'day' && (React.createElement(Aligment, { wrap: "wrap" },
-            React.createElement(DaysHeader, null, weekdays.map((label, idx) => (React.createElement(DayLabelWrapper, { key: `wd-${idx}` },
-                React.createElement(DayLabel, null, label))))),
-            React.createElement(DaysContent, null, days.map((dayStr, idx) => {
-                const dayNum = parseInt(dayStr, 10);
-                const isActive = !isNaN(dayNum) &&
-                    dayNum === getDate(date) &&
-                    tempMonth === getMonth(date) &&
-                    tempYear === getYear(date);
-                return (React.createElement(DayWrapper, { key: `d-${idx}` },
-                    React.createElement(Day, { active: isActive, haveContent: dayStr !== '', onClick: () => !isNaN(dayNum) && setDay(dayNum) }, dayStr)));
-            })))),
-        mode === 'month' && (React.createElement(Aligment, { wrap: "wrap" }, months.map((_month, index) => (React.createElement(MonthWrapper, { key: `m-${index}` },
-            React.createElement(Month, { active: index === tempMonth, onClick: () => handleSetMonth(index) }, _month)))))),
-        mode === 'year' && (React.createElement(Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (React.createElement(MonthWrapper, { key: `y-${_year}` },
-            React.createElement(Month, { active: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))))));
+    const selectedDay = getDate(date);
+    const selectedMonth = getMonth(date);
+    const selectedYear = getYear(date);
+    const isActiveDay = (dayStr) => {
+        if (!dayStr) {
+            return false;
+        }
+        const dayNum = Number(dayStr);
+        return (Number.isInteger(dayNum) &&
+            dayNum === selectedDay &&
+            tempMonth === selectedMonth &&
+            tempYear === selectedYear);
+    };
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(CalendarContentRoot, { theme: resolvedTheme, config: datePickerConfig, days: mode === 'day' },
+            mode === 'day' && (React.createElement(React.Fragment, null,
+                localeLabels.weekdaysShort.map((label, idx) => (React.createElement(DaysHeader, { key: `wd-${idx}`, config: datePickerConfig }, label))),
+                days.map((dayStr, idx) => (React.createElement(Day, { haveContent: dayStr !== '', key: `day-${idx}`, config: datePickerConfig, isSelected: isActiveDay(dayStr), onClick: () => !isNaN(parseInt(dayStr, 10)) && setDay(parseInt(dayStr, 10)) }, dayStr))))),
+            mode === 'month' &&
+                localeLabels.months.map((_month, index) => (React.createElement(Month, { haveContent: true, key: `m-${index}`, config: datePickerConfig, isSelected: index === tempMonth, onClick: () => handleSetMonth(index) }, _month))),
+            mode === 'year' &&
+                yearsScope.map((_year) => (React.createElement(Month, { haveContent: true, key: `y-${_year}`, config: datePickerConfig, isSelected: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))));
 };

package/dist/esm/components/DatePicker/CalendarHeader.js

@@ -1,31 +1,34 @@
+import { resolveThemeWithComponentsConfig } from '../../config';
 import React from 'react';
-import { CalendarHeaderTexts, CalendarHeaderWrapper, } from './DatePiocker.styles';
+import { ThemeProvider } from 'styled-components';
+import { CalendarHeaderButton, CalendarHeaderRoot } from './DatePicker.styles';
+import { Icon } from '../Icon';
 import { Aligment } from '../Aligment';
-import { Icon } from '../Icons';
-import { Text } from '../Typography';
 import { getYear } from 'date-fns';
-export const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, localeLabels, }) => {
+export const CalendarHeader = ({ theme, themeVariant = 'default', mode, date, yearsScope, handleChange, handleSelect, localeLabels, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const datePickerConfig = componentsConfig.datePicker;
+    const calendarCardConfig = datePickerConfig.calendarCard;
     const prev = () => {
         handleChange(mode, false);
     };
     const next = () => {
         handleChange(mode, true);
     };
-    const setMode = (mode) => {
-        handleSelect(mode);
+    const setMode = (nextMode) => {
+        handleSelect(nextMode);
     };
-    const defaultMonths = [
-        'January', 'February', 'March', 'April', 'May', 'June',
-        'July', 'August', 'September', 'October', 'November', 'December'
-    ];
-    const months = (localeLabels && localeLabels.months && localeLabels.months.length === 12)
-        ? localeLabels.months
-        : defaultMonths;
-    return (React.createElement(CalendarHeaderWrapper, null,
-        React.createElement(Aligment, null,
-            React.createElement(Icon, { name: 'back', onClick: prev }),
-            React.createElement(CalendarHeaderTexts, null,
-                mode === 'day' && (React.createElement(Text, { action: true, onClick: () => setMode('month') }, months[date.getMonth()])),
-                mode === 'year' ? (React.createElement(Text, null, `${yearsScope[0]} - ${yearsScope[yearsScope.length - 1]}`)) : (React.createElement(Text, { action: true, onClick: () => setMode('year') }, getYear(date)))),
-            React.createElement(Icon, { name: 'forward', onClick: next }))));
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(CalendarHeaderRoot, { config: calendarCardConfig },
+            React.createElement(Aligment, null,
+                React.createElement(Icon, { name: 'back', onClick: prev, size: "md" }),
+                React.createElement(CalendarHeaderButton, { config: calendarCardConfig },
+                    mode === 'day' && (React.createElement(CalendarHeaderButton, { config: calendarCardConfig, onClick: () => setMode('month') }, localeLabels.months[date.getMonth()])),
+                    mode === 'year' ? (React.createElement(CalendarHeaderButton, { config: calendarCardConfig }, `${yearsScope[0]} - ${yearsScope[yearsScope.length - 1]}`)) : (React.createElement(CalendarHeaderButton, { config: calendarCardConfig, onClick: () => setMode('year') }, getYear(date)))),
+                React.createElement(Icon, { name: 'forward', onClick: next, size: "md" })))));
 };

package/dist/esm/components/DatePicker/DatePicker.js

@@ -1,20 +1,31 @@
-import { EyeIconWrapper, InputLabelElement, InputReadOnlyElement, InputWrapper, } from '../Input';
-import { Aligment } from '../Aligment';
+import { ComponentRoot } from '../ComponentRoot';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { wordbook } from '../../config';
+import { format } from 'date-fns';
 import React, { useRef, useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { mainTheme } from '../../Theme';
-import { DatePiockerElement } from './DatePiocker.styles';
-import { Field } from '../Dropdown';
+import { DatePickerValue, TrigerWrapper } from './DatePicker.styles';
+import { Icon } from '../Icon';
+import { Aligment } from '../Aligment';
 import { createPortal } from 'react-dom';
 import { Calendar } from './Calendar';
-import { format } from 'date-fns';
-import { Icon } from '../Icons';
-export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex, calendarLabels, localeLabels, isAdvance = true }) => {
+export const DatePicker = ({ name, value, label, labelPosition = 'top', theme, themeVariant = 'default', handleChange, zIndex, labels = wordbook.calendar.actionLabels, localeLabels = {
+    months: wordbook.calendar.months,
+    weekdaysShort: wordbook.calendar.weekdaysShort,
+    firstDayOfWeek: 1,
+}, placeholder = 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 = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const datePickerConfig = componentsConfig.datePicker;
+    const triggerRef = useRef(null);
     const [open, toogleOpen] = useState(false);
-    const sourceRef = useRef(null);
     const [dropdownStyles, setDropdownStyles] = useState({
         top: 0,
         left: 0,
+        triggerTop: 0,
     });
     const onSubmit = (selectedDate) => {
         handleChange(name, selectedDate);
@@ -25,25 +36,30 @@ export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled
         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.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
-            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-            React.createElement(InputWrapper, { width: width }, readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value ? format(new Date(value), 'dd-MM-yyyy') : '')) : (React.createElement(DatePiockerElement, { ref: sourceRef },
-                React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, onClick: () => handleOpen() }, value ? format(new Date(value), 'dd-MM-yyyy') : placeholder),
-                value && (React.createElement(EyeIconWrapper, { size: size },
-                    React.createElement(Icon, { name: 'close', size: 24, onClick: clearDate, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
-                open &&
-                    createPortal(React.createElement(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.createElement(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.createElement(TrigerWrapper, { ref: triggerRef, onClick: handleOpen },
+            React.createElement(DatePickerValue, { theme: resolvedTheme, config: datePickerConfig, size: size },
+                value ? format(new Date(value), 'dd-MM-yyyy') : placeholder,
+                React.createElement(Aligment, { width: "auto", align: "flex-end", gap: datePickerConfig.size.common.iconGap },
+                    value && !readOnly && (React.createElement(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.createElement(Icon, { name: "calendar", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleOpen }))))),
+        open &&
+            createPortal(React.createElement(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)));
 };

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

@@ -0,0 +1,130 @@
+import styled, { keyframes } from 'styled-components';
+export const TrigerWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+`;
+export const DatePickerValue = styled.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};  
+    `}
+  `;
+export const CalendarRoot = styled.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 = keyframes `
+  from { opacity: 0; }
+  to   { opacity: 1; }
+`;
+export const CalendarOverlayer = styled.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;
+`;
+export const CalendarHeaderRoot = styled.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};
+`;
+export const CalendarHeaderButton = styled.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};
+  }
+`;
+export const CalendarContentRoot = styled.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;
+`;
+export const DaysHeader = styled.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};
+`;
+export const Day = styled.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};
+`;
+export const Month = styled(Day) `
+    width: 100%;
+`;

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

@@ -1 +1,2 @@
-export * from './DatePicker';
+export { DatePicker } from './DatePicker';
+export { Calendar } from './Calendar';

package/dist/esm/components/Dropdown/Dropdown.js

@@ -1,60 +1,74 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Aligment } from '../Aligment';
-import { DropdownElement } from './Dropdown.styles';
-import { Field } from './DropdownElements';
-import { EyeIconWrapper, InputErrorMsg, InputLabelElement, InputReadOnlyElement, } from '../Input';
-import { Panel, PanelOption } from '../common';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import React, { useEffect, useRef, useState } from 'react';
+import { ComponentRoot } from '../ComponentRoot';
+import { DropdownMenuPanel, DropdownValue, TrigerWrapper } from './Dropdown.styles';
+import { wordbook } from '../../config';
+import { Icon } from '../Icon';
+import { PrefixWrapper } from '../Input/Input.styles';
 import { createPortal } from 'react-dom';
-import { Icon } from '../Icons';
-import { mainTheme } from '../../Theme';
-export 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 = mainTheme, handleFieldFocus, handleFieldBlur, }) => {
-    const [open, toogleOpen] = useState(false);
-    const ref = useRef(null);
-    const sourceRef = useRef(null);
-    const [dropdownStyles, setDropdownStyles] = useState({});
+import { OptionsPanel } from '../OptionsPanel';
+export const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md', width, disabled, error, helperText, readOnly = false, placeholder = 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 } = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const dropdonwConfig = componentsConfig.dropdown;
+    const [open, toggleOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const [dropdownStyles, setDropdownStyles] = useState({
+        top: 0,
+    });
     const getLabelForValue = (value) => {
-        return options.find((option) => option.value === value).label;
+        return options.find((option) => option.value === value)?.label;
     };
-    const handleOpen = () => {
-        if (!disabled) {
-            if (sourceRef.current) {
-                const buttonRect = sourceRef.current.getBoundingClientRect();
+    const onPrefixIconClick = () => {
+        if (prefixIconAction && !disabled && !readOnly) {
+            prefixIconAction(name);
+        }
+    };
+    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();
     };
     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();
             }
         };
@@ -66,15 +80,15 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
             document.removeEventListener('click', handleClickOutside, true);
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [open]);
-    return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-        label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value)) : (React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
-            React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, rightPadding: true }, value ? getLabelForValue(value) : placeholder),
-            React.createElement(EyeIconWrapper, { size: size },
-                React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
-            open &&
-                createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex, maxHeight: maxHeight }, options &&
-                    options.map((option) => (React.createElement(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.createElement(InputErrorMsg, null, errorMsg)))));
+    }, [open, handleFieldBlur]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(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.createElement(TrigerWrapper, { ref: triggerRef },
+                prefixIcon && !readOnly && (React.createElement(Icon, { name: prefixIcon, size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
+                prefix && !readOnly && (React.createElement(PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: dropdonwConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
+                React.createElement(DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
+                !readOnly && (React.createElement(Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
+        open &&
+            createPortal(React.createElement(DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig },
+                React.createElement(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)));
 };

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

@@ -1,8 +1,49 @@
-import styled from "styled-components";
-export const DropdownElement = styled.div `
-  position: relative;
-  cursor: pointer;
-  display:flex;
-  box-sizing:border-box;
-  width:100%;
+import styled from 'styled-components';
+export const DropdownValue = styled.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};  
+    `}
+  `;
+export const TrigerWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+`;
+export const DropdownMenuPanel = styled.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/esm/components/Dropdown/index.js

@@ -1,2 +1 @@
 export * from './Dropdown';
-export * from './DropdownElements';