funuicss 3.7.0 → 3.7.2

package/ui/chart/Pie.js

@@ -11,53 +11,329 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
-// Get CSS variable value from :root
+var componentUtils_1 = require("../../utils/componentUtils");
+// Parse string to object utility with enhanced error handling
+var parseIfString = function (value, fallback) {
+    if (typeof value === 'string') {
+        try {
+            var parsed = JSON.parse(value);
+            if (Array.isArray(fallback) && !Array.isArray(parsed)) {
+                console.warn('Parsed value is not an array, using fallback');
+                return fallback;
+            }
+            return parsed;
+        }
+        catch (error) {
+            console.error('Failed to parse JSON string:', error);
+            return fallback;
+        }
+    }
+    if (value == null) {
+        return fallback;
+    }
+    return value;
+};
+// Safe array access utility
+var getSafeArray = function (value, fallback) {
+    if (fallback === void 0) { fallback = []; }
+    if (!value || !Array.isArray(value))
+        return fallback;
+    return value;
+};
+// CSS var resolver with error handling
 var getCssVar = function (varName) {
     var _a;
     if (typeof window === 'undefined')
         return '';
-    return (((_a = getComputedStyle(document.documentElement)
-        .getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '');
-};
-// Resolve color from CSS var or fallback
-var resolveColor = function (input, fallback) {
-    if (fallback === void 0) { fallback = '#8884d8'; }
-    if (!input)
-        return getCssVar('primary') || fallback;
-    if (input.startsWith('#'))
-        return input;
-    return getCssVar(input) || input;
-};
-// Custom Tooltip
+    try {
+        return ((_a = getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    }
+    catch (error) {
+        console.warn("Failed to get CSS variable --".concat(varName, ":"), error);
+        return '';
+    }
+};
+// Color resolver with fallbacks
+var resolveColor = function (color) {
+    if (!color)
+        return getCssVar('primary') || '#8884d8';
+    if (color.startsWith('#'))
+        return color;
+    var cssColor = getCssVar(color);
+    if (cssColor)
+        return cssColor;
+    var colorMap = {
+        primary: '#8884d8',
+        secondary: '#82ca9d',
+        error: '#ff4d4f',
+        warning: '#faad14',
+        success: '#52c41a',
+        info: '#1890ff'
+    };
+    return colorMap[color] || color || '#8884d8';
+};
+// Default color palette for pie charts
+var defaultColors = [
+    '#8884d8', '#82ca9d', '#ffc658', '#ff7300', '#8dd1e1',
+    '#d084d0', '#ff8042', '#a4de6c', '#d0ed57', '#ffbb28'
+];
+// Default Tooltip with error handling
 var CustomTooltip = function (_a) {
-    var active = _a.active, payload = _a.payload, label = _a.label;
-    if (active && payload && payload.length) {
-        return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
-            react_1.default.createElement("div", { className: "text-bold" }, payload[0].name),
-            react_1.default.createElement("div", { style: { lineHeight: 1 } },
-                "Count: ",
-                react_1.default.createElement("span", { className: "font-semibold" }, payload[0].value))));
+    var _b;
+    var active = _a.active, payload = _a.payload, label = _a.label, formatter = _a.formatter;
+    if (!active || !payload || !Array.isArray(payload) || payload.length === 0) {
+        return null;
+    }
+    try {
+        var data = payload[0];
+        return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm", style: {
+                maxWidth: '300px',
+                backgroundColor: 'var(--background, #fff)',
+                border: '1px solid var(--border-color, #e2e8f0)'
+            } },
+            react_1.default.createElement("div", { className: "text-bold mb-1", style: { color: 'var(--text-color, #1a202c)' } }, data.name || 'N/A'),
+            react_1.default.createElement("div", { style: { lineHeight: 1.4, display: 'flex', alignItems: 'center', gap: '8px' } },
+                react_1.default.createElement("div", { style: {
+                        width: '12px',
+                        height: '12px',
+                        backgroundColor: data.color || ((_b = data.payload) === null || _b === void 0 ? void 0 : _b.fill) || '#8884d8',
+                        borderRadius: '2px'
+                    } }),
+                react_1.default.createElement("span", { style: { fontWeight: 500, color: 'var(--text-color, #1a202c)' } }, "Value:"),
+                react_1.default.createElement("span", { style: { fontWeight: 600, color: 'var(--text-color, #1a202c)' } }, formatter ? formatter(data.value, data.name, data) : data.value)),
+            data.payload && data.payload.percentage && (react_1.default.createElement("div", { style: { marginTop: '4px', fontSize: '0.75rem', color: 'var(--text-muted, #6b7280)' } },
+                data.payload.percentage,
+                "%"))));
+    }
+    catch (error) {
+        console.error('Error rendering tooltip:', error);
+        return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm" },
+            react_1.default.createElement("div", { className: "text-error" }, "Error displaying tooltip")));
     }
-    return null;
+};
+// Default Label component
+var CustomLabel = function (_a) {
+    var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, percent = _a.percent, value = _a.value, name = _a.name;
+    if (!percent || percent < 0.05)
+        return null; // Hide labels for very small slices
+    var RADIAN = Math.PI / 180;
+    var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    var x = cx + radius * Math.cos(-midAngle * RADIAN);
+    var y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return (react_1.default.createElement("text", { x: x, y: y, fill: "white", textAnchor: x > cx ? 'start' : 'end', dominantBaseline: "central", fontSize: "12", fontWeight: "600" }, "".concat((percent * 100).toFixed(0), "%")));
 };
 var ChartPie = function (_a) {
-    var data = _a.data, _b = _a.donut, donut = _b === void 0 ? false : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, width = _a.width, height = _a.height, _e = _a.outerRadius, outerRadius = _e === void 0 ? 100 : _e, innerRadius = _a.innerRadius, tooltipFormatter = _a.tooltipFormatter, legendCss = _a.legendCss, _f = _a.legendProps, legendProps = _f === void 0 ? {} : _f;
-    var chart = (react_1.default.createElement(recharts_1.PieChart, { width: typeof width === 'number' ? width : undefined, height: typeof height === 'number' ? height : undefined },
-        react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
-        showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps, { className: legendCss || "" })),
-        react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: outerRadius, innerRadius: donut ? innerRadius !== null && innerRadius !== void 0 ? innerRadius : outerRadius * 0.6 : 0, label: false, labelLine: false }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color), stroke: "#ffffff", strokeWidth: 1 })); }))));
-    if (!width && !height) {
-        return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: 300, className: funcss }, chart));
-    }
-    return (react_1.default.createElement("div", { className: funcss, style: {
-            width: typeof width === 'number' ? "".concat(width, "px") : width || '100%',
-            height: typeof height === 'number' ? "".concat(height, "px") : height || '300px',
-        } }, chart));
+    var _b;
+    var data = _a.data, id = _a.id, _c = _a.variant, variant = _c === void 0 ? '' : _c, 
+    // Chart Type & Layout
+    _d = _a.donut, 
+    // Chart Type & Layout
+    donut = _d === void 0 ? false : _d, _e = _a.width, width = _e === void 0 ? '100%' : _e, _f = _a.height, height = _f === void 0 ? 300 : _f, _g = _a.outerRadius, outerRadius = _g === void 0 ? 80 : _g, innerRadius = _a.innerRadius, _h = _a.paddingAngle, paddingAngle = _h === void 0 ? 0 : _h, _j = _a.cornerRadius, cornerRadius = _j === void 0 ? 0 : _j, _k = _a.startAngle, startAngle = _k === void 0 ? 0 : _k, _l = _a.endAngle, endAngle = _l === void 0 ? 360 : _l, _m = _a.minAngle, minAngle = _m === void 0 ? 0 : _m, 
+    // Display Controls
+    _o = _a.showLegend, 
+    // Display Controls
+    showLegend = _o === void 0 ? true : _o, _p = _a.showTooltip, showTooltip = _p === void 0 ? true : _p, _q = _a.showLabels, showLabels = _q === void 0 ? false : _q, _r = _a.showLabelLine, showLabelLine = _r === void 0 ? false : _r, _s = _a.labelPosition, labelPosition = _s === void 0 ? 'inside' : _s, _t = _a.legendPosition, legendPosition = _t === void 0 ? 'bottom' : _t, 
+    // Appearance
+    funcss = _a.funcss, legendCss = _a.legendCss, chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _u = _a.shadow, shadow = _u === void 0 ? false : _u, 
+    // Styling
+    _v = _a.strokeWidth, 
+    // Styling
+    strokeWidth = _v === void 0 ? 1 : _v, _w = _a.strokeColor, strokeColor = _w === void 0 ? '#ffffff' : _w, _x = _a.activeShape, activeShape = _x === void 0 ? true : _x, _y = _a.inactiveShape, inactiveShape = _y === void 0 ? true : _y, 
+    // Tooltip / Legend
+    tooltipFormatter = _a.tooltipFormatter, labelFormatter = _a.labelFormatter, _z = _a.legendProps, legendProps = _z === void 0 ? {} : _z, _0 = _a.tooltipProps, tooltipProps = _0 === void 0 ? {} : _0, customTooltip = _a.customTooltip, customLabel = _a.customLabel, 
+    // Animation & Interaction
+    _1 = _a.animation, 
+    // Animation & Interaction
+    animation = _1 === void 0 ? true : _1, _2 = _a.animationDuration, animationDuration = _2 === void 0 ? 500 : _2, _3 = _a.isAnimationActive, isAnimationActive = _3 === void 0 ? true : _3, onPieClick = _a.onPieClick, onPieEnter = _a.onPieEnter, onPieLeave = _a.onPieLeave, 
+    // Responsive
+    aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
+    // Use component configuration with variant support and error handling
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('PieChart', variant).mergeWithLocal;
+    // Create local props object with null checks
+    var localProps = {
+        data: data !== null && data !== void 0 ? data : [],
+        id: id !== null && id !== void 0 ? id : '',
+        variant: variant !== null && variant !== void 0 ? variant : '',
+        donut: donut !== null && donut !== void 0 ? donut : false,
+        width: width !== null && width !== void 0 ? width : '100%',
+        height: height !== null && height !== void 0 ? height : 300,
+        outerRadius: outerRadius !== null && outerRadius !== void 0 ? outerRadius : 80,
+        innerRadius: innerRadius !== null && innerRadius !== void 0 ? innerRadius : undefined,
+        paddingAngle: paddingAngle !== null && paddingAngle !== void 0 ? paddingAngle : 0,
+        cornerRadius: cornerRadius !== null && cornerRadius !== void 0 ? cornerRadius : 0,
+        startAngle: startAngle !== null && startAngle !== void 0 ? startAngle : 0,
+        endAngle: endAngle !== null && endAngle !== void 0 ? endAngle : 360,
+        minAngle: minAngle !== null && minAngle !== void 0 ? minAngle : 0,
+        showLegend: showLegend !== null && showLegend !== void 0 ? showLegend : true,
+        showTooltip: showTooltip !== null && showTooltip !== void 0 ? showTooltip : true,
+        showLabels: showLabels !== null && showLabels !== void 0 ? showLabels : false,
+        showLabelLine: showLabelLine !== null && showLabelLine !== void 0 ? showLabelLine : false,
+        labelPosition: labelPosition !== null && labelPosition !== void 0 ? labelPosition : 'inside',
+        legendPosition: legendPosition !== null && legendPosition !== void 0 ? legendPosition : 'bottom',
+        funcss: funcss !== null && funcss !== void 0 ? funcss : '',
+        legendCss: legendCss !== null && legendCss !== void 0 ? legendCss : '',
+        chartBackground: chartBackground !== null && chartBackground !== void 0 ? chartBackground : '',
+        borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '',
+        padding: padding !== null && padding !== void 0 ? padding : '',
+        shadow: shadow !== null && shadow !== void 0 ? shadow : false,
+        strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : 1,
+        strokeColor: strokeColor !== null && strokeColor !== void 0 ? strokeColor : '#ffffff',
+        activeShape: activeShape !== null && activeShape !== void 0 ? activeShape : true,
+        inactiveShape: inactiveShape !== null && inactiveShape !== void 0 ? inactiveShape : true,
+        tooltipFormatter: tooltipFormatter !== null && tooltipFormatter !== void 0 ? tooltipFormatter : undefined,
+        labelFormatter: labelFormatter !== null && labelFormatter !== void 0 ? labelFormatter : undefined,
+        legendProps: legendProps !== null && legendProps !== void 0 ? legendProps : {},
+        tooltipProps: tooltipProps !== null && tooltipProps !== void 0 ? tooltipProps : {},
+        customTooltip: customTooltip !== null && customTooltip !== void 0 ? customTooltip : undefined,
+        customLabel: customLabel !== null && customLabel !== void 0 ? customLabel : undefined,
+        animation: animation !== null && animation !== void 0 ? animation : true,
+        animationDuration: animationDuration !== null && animationDuration !== void 0 ? animationDuration : 500,
+        isAnimationActive: isAnimationActive !== null && isAnimationActive !== void 0 ? isAnimationActive : true,
+        onPieClick: onPieClick !== null && onPieClick !== void 0 ? onPieClick : undefined,
+        onPieEnter: onPieEnter !== null && onPieEnter !== void 0 ? onPieEnter : undefined,
+        onPieLeave: onPieLeave !== null && onPieLeave !== void 0 ? onPieLeave : undefined,
+        aspect: aspect !== null && aspect !== void 0 ? aspect : undefined,
+        minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : undefined,
+        maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
+        minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : undefined,
+        maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : undefined
+    };
+    // Merge with config
+    var mergedProps;
+    try {
+        var result = mergeWithLocal(localProps);
+        mergedProps = (_b = result === null || result === void 0 ? void 0 : result.props) !== null && _b !== void 0 ? _b : localProps;
+    }
+    catch (error) {
+        console.error('Error merging component configuration:', error);
+        mergedProps = localProps;
+    }
+    // Parse data if it's a string with enhanced validation
+    var parsedData = (0, react_1.useMemo)(function () {
+        var parsed = parseIfString(mergedProps.data, []);
+        var safeData = getSafeArray(parsed);
+        // Calculate percentages for tooltip
+        var total = safeData.reduce(function (sum, item) { return sum + (item.value || 0); }, 0);
+        return safeData.map(function (item) { return (__assign(__assign({}, item), { percentage: total > 0 ? ((item.value / total) * 100).toFixed(1) : '0' })); });
+    }, [mergedProps.data]);
+    // Check if we have valid data to display
+    var hasValidData = parsedData.length > 0;
+    // Extract final values with fallbacks
+    var final = (0, react_1.useMemo)(function () { return ({
+        data: parsedData,
+        id: mergedProps.id || 'pie-chart',
+        variant: mergedProps.variant,
+        donut: mergedProps.donut,
+        width: mergedProps.width,
+        height: mergedProps.height,
+        outerRadius: mergedProps.outerRadius,
+        innerRadius: mergedProps.donut ? (mergedProps.innerRadius || typeof mergedProps.outerRadius === 'number' ? mergedProps.outerRadius * 0.6 : '60%') : 0,
+        paddingAngle: mergedProps.paddingAngle,
+        cornerRadius: mergedProps.cornerRadius,
+        startAngle: mergedProps.startAngle,
+        endAngle: mergedProps.endAngle,
+        minAngle: mergedProps.minAngle,
+        showLegend: mergedProps.showLegend,
+        showTooltip: mergedProps.showTooltip,
+        showLabels: mergedProps.showLabels,
+        showLabelLine: mergedProps.showLabelLine,
+        labelPosition: mergedProps.labelPosition,
+        legendPosition: mergedProps.legendPosition,
+        funcss: mergedProps.funcss,
+        legendCss: mergedProps.legendCss,
+        chartBackground: mergedProps.chartBackground,
+        borderRadius: mergedProps.borderRadius,
+        padding: mergedProps.padding,
+        shadow: mergedProps.shadow,
+        strokeWidth: mergedProps.strokeWidth,
+        strokeColor: mergedProps.strokeColor,
+        activeShape: mergedProps.activeShape,
+        inactiveShape: mergedProps.inactiveShape,
+        tooltipFormatter: mergedProps.tooltipFormatter,
+        labelFormatter: mergedProps.labelFormatter,
+        legendProps: mergedProps.legendProps,
+        tooltipProps: mergedProps.tooltipProps,
+        customTooltip: mergedProps.customTooltip,
+        customLabel: mergedProps.customLabel,
+        animation: mergedProps.animation,
+        animationDuration: mergedProps.animationDuration,
+        isAnimationActive: mergedProps.isAnimationActive,
+        onPieClick: mergedProps.onPieClick,
+        onPieEnter: mergedProps.onPieEnter,
+        onPieLeave: mergedProps.onPieLeave,
+        aspect: mergedProps.aspect,
+        minHeight: mergedProps.minHeight,
+        maxHeight: mergedProps.maxHeight,
+        minWidth: mergedProps.minWidth,
+        maxWidth: mergedProps.maxWidth
+    }); }, [parsedData, mergedProps, hasValidData]);
+    // Configure legend based on position
+    var legendConfig = (0, react_1.useMemo)(function () {
+        var baseProps = __assign({ align: 'center', layout: final.legendPosition === 'left' || final.legendPosition === 'right' ? 'vertical' : 'horizontal', verticalAlign: final.legendPosition === 'top' ? 'top' : final.legendPosition === 'bottom' ? 'bottom' : 'middle', wrapperStyle: __assign({ paddingTop: final.legendPosition === 'top' ? '0' : '10px' }, final.legendProps.wrapperStyle) }, final.legendProps);
+        return baseProps;
+    }, [final.legendPosition, final.legendProps]);
+    var TooltipComponent = final.customTooltip || CustomTooltip;
+    var LabelComponent = final.customLabel || (final.showLabels ? CustomLabel : undefined);
+    var containerStyle = (0, react_1.useMemo)(function () { return ({
+        width: final.width,
+        height: final.height,
+        minHeight: final.minHeight,
+        maxHeight: final.maxHeight,
+        minWidth: final.minWidth,
+        maxWidth: final.maxWidth,
+        background: final.chartBackground,
+        borderRadius: final.borderRadius,
+        padding: final.padding,
+        boxShadow: final.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : undefined,
+    }); }, [final]);
+    // Show empty state if no data
+    if (!hasValidData) {
+        return (react_1.default.createElement("div", { className: "flex items-center justify-center ".concat(final.funcss), style: containerStyle },
+            react_1.default.createElement("div", { className: "text-center text-muted" },
+                react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83E\uDD67"),
+                react_1.default.createElement("div", null, "No chart data available"))));
+    }
+    var chartContent = (react_1.default.createElement(recharts_1.PieChart, null,
+        final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
+        final.showLegend && (react_1.default.createElement(recharts_1.Legend, __assign({}, legendConfig, { className: final.legendCss }))),
+        react_1.default.createElement(recharts_1.Pie, { data: final.data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: final.outerRadius, innerRadius: final.innerRadius, paddingAngle: final.paddingAngle, cornerRadius: final.cornerRadius, startAngle: final.startAngle, endAngle: final.endAngle, minAngle: final.minAngle, label: LabelComponent ? react_1.default.createElement(LabelComponent, null) : final.showLabels, labelLine: final.showLabelLine, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration, onClick: final.onPieClick, onMouseEnter: final.onPieEnter, onMouseLeave: final.onPieLeave, activeShape: final.activeShape, inactiveShape: final.inactiveShape }, final.data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color) || defaultColors[index % defaultColors.length], stroke: resolveColor(final.strokeColor), strokeWidth: final.strokeWidth })); }))));
+    // Use ResponsiveContainer for automatic sizing
+    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: final.height, aspect: final.aspect, className: final.funcss, style: containerStyle }, chartContent));
 };
 exports.default = ChartPie;

package/ui/drop/Dropdown.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-type Position = 'left' | 'right';
-type Direction = 'dropdown' | 'dropup';
+type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 interface DropdownItem {
     label: React.ReactNode;
     onClick?: () => void;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    disabled?: boolean;
+    divider?: boolean;
 }
 interface DropdownProps {
-    direction?: Direction;
     position?: Position;
     button: React.ReactNode;
     items: DropdownItem[];
@@ -16,6 +16,7 @@ interface DropdownProps {
     openOnHover?: boolean;
     closableOnlyOutside?: boolean;
     className?: string;
+    menuClassName?: string;
     width?: string;
     minWidth?: string;
     maxWidth?: string;

package/ui/drop/Dropdown.js

@@ -33,18 +33,12 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var Flex_1 = __importDefault(require("../flex/Flex"));
 var Dropdown = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'dropdown' : _b, _c = _a.position, position = _c === void 0 ? 'left' : _c, button = _a.button, items = _a.items, _d = _a.hoverable, hoverable = _d === void 0 ? true : _d, _e = _a.openOnHover, openOnHover = _e === void 0 ? true : _e, _f = _a.closableOnlyOutside, closableOnlyOutside = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? '' : _g, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
+    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, button = _a.button, items = _a.items, _c = _a.hoverable, hoverable = _c === void 0 ? true : _c, _d = _a.openOnHover, openOnHover = _d === void 0 ? true : _d, _e = _a.closableOnlyOutside, closableOnlyOutside = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.menuClassName, menuClassName = _g === void 0 ? '' : _g, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
     var containerRef = (0, react_1.useRef)(null);
     var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
-    var containerClass = "".concat(direction, " ").concat(position, " ").concat(className).trim();
-    var menuClass = "drop-menu ".concat(hoverable ? ' item-hoverable' : '');
     (0, react_1.useEffect)(function () {
         if (openOnHover)
             return;
@@ -57,27 +51,28 @@ var Dropdown = function (_a) {
         return function () { return document.removeEventListener('mousedown', handleClickOutside); };
     }, [openOnHover]);
     var showMenu = openOnHover || open;
-    return (react_1.default.createElement("div", { ref: containerRef, className: containerClass, onMouseEnter: function () { return openOnHover && setOpen(true); }, onMouseLeave: function () { return openOnHover && setOpen(false); } },
-        react_1.default.createElement("div", { className: "drop-button", onClick: function () { return !openOnHover && setOpen(!open); }, style: { cursor: !openOnHover ? 'pointer' : undefined } }, button),
-        showMenu &&
-            react_1.default.createElement("div", { className: menuClass, style: {
-                    width: width,
-                    minWidth: minWidth,
-                    maxWidth: maxWidth,
-                    height: height,
-                    minHeight: minHeight,
-                    maxHeight: maxHeight,
-                } }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "drop-item hoverable", onClick: function () {
-                    var _a;
-                    if (!closableOnlyOutside) {
-                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-                        if (!openOnHover)
-                            setOpen(false);
-                    }
-                } },
-                react_1.default.createElement(Flex_1.default, { wrap: 'nowrap', gap: 0.2, alignItems: 'center', justify: 'flex-start' },
-                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, (item === null || item === void 0 ? void 0 : item.startIcon) || ''),
-                    item.label,
-                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, (item === null || item === void 0 ? void 0 : item.endIcon) || '')))); }))));
+    var menuStyle = {
+        width: width,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        height: height,
+        minHeight: minHeight,
+        maxHeight: maxHeight,
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, className: "dropdown-container ".concat(className), onMouseEnter: function () { return openOnHover && setOpen(true); }, onMouseLeave: function () { return openOnHover && setOpen(false); } },
+        react_1.default.createElement("div", { onClick: function () { return !openOnHover && setOpen(!open); }, style: { cursor: !openOnHover ? 'pointer' : undefined } }, button),
+        showMenu && (react_1.default.createElement("div", { className: "dropdown-menu ".concat(position, " ").concat(menuClassName), style: menuStyle }, items.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index }, item.divider ? (react_1.default.createElement("div", { className: "dropdown-divider" })) : (react_1.default.createElement("div", { className: "dropdown-item ".concat(item.disabled ? 'disabled' : '', " ").concat(!hoverable ? 'no-hover' : ''), onClick: function () {
+                var _a;
+                if (item.disabled)
+                    return;
+                if (!closableOnlyOutside) {
+                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                    if (!openOnHover)
+                        setOpen(false);
+                }
+            } },
+            item.startIcon && (react_1.default.createElement("span", { className: "dropdown-item-icon" }, item.startIcon)),
+            react_1.default.createElement("span", { className: "dropdown-item-label" }, item.label),
+            item.endIcon && (react_1.default.createElement("span", { className: "dropdown-item-icon" }, item.endIcon)))))); })))));
 };
 exports.default = Dropdown;