cynx-ui 1.3.22 → 1.3.24

package/components/Select.jsx

@@ -37,6 +37,7 @@ export default function Select({
   size = 'md',
   style = {},
   rounded = false,
+  showCount = false,
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -217,32 +218,42 @@ export default function Select({
       >
         <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>
           {multi && selectedValues.length > 0 ? (
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
-              {selectedValues.map(v => (
-                <span key={v} style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: 4,
-                  padding: '2px 6px',
-                  background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))',
-                  border: '1px solid var(--accent, #f99e2c)',
-                  borderRadius: 4,
-                  fontSize: 11,
-                  fontWeight: 600,
-                  color: 'var(--accent, #f99e2c)',
-                  whiteSpace: 'nowrap',
-                  maxWidth: 140,
-                  opacity: 0.85,
-                }}>
-                  {getLabel(v)}
-                  <X
-                    size={11}
-                    style={{ cursor: 'pointer', flexShrink: 0, opacity: 0.5 }}
-                    onMouseDown={(e) => removeTag(e, v)}
-                  />
-                </span>
-              ))}
-            </div>
+            showCount ? (
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--t,var(--primary-text, #0f172a))' }}>
+                {typeof showCount === 'function'
+                  ? showCount(selectedValues.length)
+                  : selectedValues.length === 1
+                    ? getLabel(selectedValues[0])
+                    : `Выбрано: ${selectedValues.length}`}
+              </span>
+            ) : (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
+                {selectedValues.map(v => (
+                  <span key={v} style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 4,
+                    padding: '2px 6px',
+                    background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))',
+                    border: '1px solid var(--accent, #f99e2c)',
+                    borderRadius: 4,
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: 'var(--accent, #f99e2c)',
+                    whiteSpace: 'nowrap',
+                    maxWidth: 140,
+                    opacity: 0.85,
+                  }}>
+                    {getLabel(v)}
+                    <X
+                      size={11}
+                      style={{ cursor: 'pointer', flexShrink: 0, opacity: 0.5 }}
+                      onMouseDown={(e) => removeTag(e, v)}
+                    />
+                  </span>
+                ))}
+              </div>
+            )
           ) : !multi && selectedValues.length > 0 ? (
             <span style={{ fontWeight: 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
               {getLabel(selectedValues[0]) || '\u00A0'}
@@ -251,12 +262,12 @@ export default function Select({
             <span style={{ color: 'var(--t3,var(--grey-3, #cbd5e1))', fontWeight: 400 }}>{placeholder}</span>
           )}
         </div>
-        {!multi && selectedValues.length > 0 && selectedValues[0] !== '' && selectedValues[0] !== null && (clearable || !!onClear) ? (
+        {selectedValues.length > 0 && selectedValues[0] !== '' && selectedValues[0] !== null && (clearable || !!onClear) ? (
           <span
             onClick={(e) => {
               e.stopPropagation();
               if (onClear) onClear();
-              else onChange?.('');
+              else onChange?.(multi ? [] : '');
             }}
             title="Сбросить выбор"
             style={{

package/components/UptimeBar.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 
 const card = {
   background: 'var(--surface,#fff)',
@@ -7,64 +7,26 @@ const card = {
   boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
 };
 
-const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-
-function formatDate(date) {
-  return `${MONTHS[date.getMonth()]} ${date.getDate()}`;
-}
-
 export default function UptimeBar({
-  title = 'Uptime',
+  title,
   subtitle,
-  successValues = [],
-  failedValues = [],
-  totalSlots = 90,
-  greenColor = 'var(--success, #27ae60)',
-  redColor = 'var(--danger, #f64747)',
-  emptyColor = 'var(--grey-1, #f5f5f8)',
-  barHeight = 28,
-  barRadius = 3,
+  items = [],
+  value,
   leftLabel,
   rightLabel,
+  legend,
   showDot = true,
-  dotColor,
+  dotColor = 'var(--success, #27ae60)',
+  barHeight = 28,
+  barRadius = 3,
+  emptyColor = 'var(--grey-1, #f5f5f8)',
   style,
+  renderTooltip,
 }) {
   const [hovered, setHovered] = useState(null);
   const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
   const containerRef = useRef(null);
 
-  const bars = useMemo(() => {
-    const len = Math.max(successValues.length, failedValues.length, totalSlots);
-    const result = [];
-    const stepS = successValues.length / len;
-    const stepF = failedValues.length / len;
-    for (let i = 0; i < len; i++) {
-      const si = Math.min(Math.floor(i * stepS), successValues.length - 1);
-      const fi = Math.min(Math.floor(i * stepF), failedValues.length - 1);
-      const s = successValues[si] || 0;
-      const f = failedValues[fi] || 0;
-      result.push({ success: s, failed: f });
-    }
-    return result;
-  }, [successValues, failedValues, totalSlots]);
-
-  const dates = useMemo(() => {
-    const result = [];
-    const now = new Date();
-    for (let i = 0; i < bars.length; i++) {
-      const d = new Date(now);
-      d.setDate(d.getDate() - (bars.length - 1 - i));
-      result.push(d);
-    }
-    return result;
-  }, [bars.length]);
-
-  const totalSuccess = bars.reduce((a, b) => a + b.success, 0);
-  const totalFailed = bars.reduce((a, b) => a + b.failed, 0);
-  const totalAll = totalSuccess + totalFailed;
-  const uptimePercent = totalAll > 0 ? Math.round((totalSuccess / totalAll) * 100) : 100;
-
   function handleMouseEnter(e, idx) {
     const rect = e.currentTarget.getBoundingClientRect();
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -75,126 +37,99 @@ export default function UptimeBar({
     setHovered(idx);
   }
 
+  // Smart tooltip shift so edge items are never clipped
+  const tooltipShift = hovered !== null
+    ? (hovered > items.length - 8 ? '-92%' : hovered < 8 ? '-8%' : '-50%')
+    : '-50%';
+
   return (
     <div ref={containerRef} style={{ ...card, padding: '14px 18px 14px', position: 'relative', ...style }}>
       {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          {showDot && (
-            <span style={{
-              width: 8, height: 8, borderRadius: '50%',
-              background: dotColor || greenColor, flexShrink: 0,
-            }} />
+      {(title || subtitle || (Array.isArray(legend) && legend.length > 0)) && (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            {showDot && (
+              <span style={{
+                width: 8, height: 8, borderRadius: '50%',
+                background: dotColor, flexShrink: 0,
+              }} />
+            )}
+            {title && (
+              <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', letterSpacing: '-.01em' }}>
+                {title}
+              </span>
+            )}
+            {subtitle && (
+              <span style={{ fontSize: '.65rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>
+                {subtitle}
+              </span>
+            )}
+          </div>
+          {/* Legend */}
+          {Array.isArray(legend) && legend.length > 0 && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              {legend.map((item, idx) => (
+                <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <span style={{ width: 7, height: 7, borderRadius: 2, background: item.color, flexShrink: 0 }} />
+                  <span style={{ fontSize: '.55rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{item.label}</span>
+                </div>
+              ))}
+            </div>
           )}
-          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', letterSpacing: '-.01em' }}>{title}</span>
-          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{subtitle}</span>}
-        </div>
-        {/* Legend */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <LegendDot color={greenColor} label="Success" />
-          <LegendDot color={redColor} label="Failed" />
-          <LegendDot color={emptyColor} label="None" />
         </div>
-      </div>
+      )}
 
-      {/* Bars */}
+      {/* Bars: purely renders precomputed items */}
       <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: barHeight, marginBottom: 6 }}>
-        {bars.map((b, i) => {
-          const total = b.success + b.failed;
-          const hasData = total > 0;
-          const successPct = hasData ? (b.success / total) * 100 : 0;
-          const failedPct = hasData ? (b.failed / total) * 100 : 0;
-
-          return (
-            <div
-              key={i}
-              onMouseEnter={(e) => handleMouseEnter(e, i)}
-              onMouseLeave={() => setHovered(null)}
-              style={{
-                flex: 1,
-                height: '100%',
-                borderRadius: barRadius,
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-                background: hasData ? 'transparent' : emptyColor,
-              }}
-            >
-              {hasData && (
-                <>
-                  {/* Failed on bottom */}
-                  {b.failed > 0 && (
-                    <div style={{ height: `${failedPct}%`, background: redColor, marginTop: 'auto' }} />
-                  )}
-                  {/* Success on top */}
-                  {b.success > 0 && (
-                    <div style={{ height: `${successPct}%`, background: greenColor }} />
-                  )}
-                </>
-              )}
-            </div>
-          );
-        })}
+        {items.map((item, i) => (
+          <div
+            key={item.id || i}
+            onMouseEnter={(e) => handleMouseEnter(e, i)}
+            onMouseLeave={() => setHovered(null)}
+            style={{
+              flex: 1,
+              height: '100%',
+              borderRadius: barRadius,
+              background: item.color || emptyColor,
+            }}
+          />
+        ))}
       </div>
 
-      {/* Tooltip */}
-      {hovered !== null && (
+      {/* Tooltip: renders caller content only */}
+      {hovered !== null && items[hovered] && (renderTooltip || items[hovered].tooltip) && (
         <div style={{
           position: 'absolute',
           left: tooltipPos.x,
           top: tooltipPos.y,
-          transform: 'translate(-50%, -100%)',
+          transform: `translate(${tooltipShift}, -100%)`,
           background: 'var(--surface,#fff)',
           border: '1px solid var(--border, #e2e8f0)',
           borderRadius: 'var(--rads, 8px)',
           boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))',
           padding: '8px 12px',
           pointerEvents: 'none',
-          zIndex: 100,
+          zIndex: 1000,
           whiteSpace: 'nowrap',
         }}>
-          <div style={{ fontSize: '.65rem', color: 'var(--muted, #797b8d)', fontWeight: 500, marginBottom: 4 }}>
-            {formatDate(dates[hovered])}
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            {bars[hovered].success > 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
-                {bars[hovered].success} success login{bars[hovered].success !== 1 ? 's' : ''}
-                {bars[hovered].failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted, #797b8d)' }}> ({Math.round((bars[hovered].success / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
-              </div>
-            )}
-            {bars[hovered].failed > 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
-                {bars[hovered].failed} failed login{bars[hovered].failed !== 1 ? 's' : ''}
-                {bars[hovered].success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted, #797b8d)' }}> ({Math.round((bars[hovered].failed / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
-              </div>
-            )}
-            {bars[hovered].success === 0 && bars[hovered].failed === 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted, #797b8d)' }}>
-                No logins
-              </div>
-            )}
-          </div>
+          {renderTooltip
+            ? renderTooltip(items[hovered], hovered)
+            : typeof items[hovered].tooltip === 'function'
+            ? items[hovered].tooltip(items[hovered], hovered)
+            : items[hovered].tooltip}
         </div>
       )}
 
       {/* Footer */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{leftLabel || '90 days ago'}</span>
-        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
-          {uptimePercent}%
-        </span>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{rightLabel || 'Today'}</span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{leftLabel}</span>
+        {value && (
+          <span style={{ fontSize: '.78rem', fontWeight: 700, color: dotColor, fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
+            {value}
+          </span>
+        )}
+        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{rightLabel}</span>
       </div>
     </div>
   );
 }
-
-function LegendDot({ color, label }) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-      <span style={{ width: 7, height: 7, borderRadius: 2, background: color, flexShrink: 0 }} />
-      <span style={{ fontSize: '.55rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{label}</span>
-    </div>
-  );
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.3.22",
+  "version": "1.3.24",
   "type": "module",
   "exports": {
     ".": "./index.js"