@univerjs/design 1.0.0-alpha.8 → 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/cjs/index.js +115 -127
  2. package/lib/es/index.js +115 -127
  3. package/lib/index.css +6 -11
  4. package/lib/index.js +115 -127
  5. package/lib/umd/index.js +5 -5
  6. package/package.json +4 -4
package/lib/es/index.js CHANGED
@@ -25,10 +25,9 @@ function clsx(...inputs) {
25
25
  //#endregion
26
26
  //#region src/components/accordion/Accordion.tsx
27
27
  function Accordion(props) {
28
- var _props$openIndex;
29
28
  const { className, defaultOpenIndex = null, items, onOpenIndexChange } = props;
30
29
  const [innerOpenIndex, setInnerOpenIndex] = useState(defaultOpenIndex);
31
- const openIndex = (_props$openIndex = props.openIndex) !== null && _props$openIndex !== void 0 ? _props$openIndex : innerOpenIndex;
30
+ const openIndex = props.openIndex ?? innerOpenIndex;
32
31
  const toggleItem = (index) => {
33
32
  const nextOpenIndex = openIndex === index ? null : index;
34
33
  if (props.openIndex === void 0) setInnerOpenIndex(nextOpenIndex);
@@ -37,30 +36,27 @@ function Accordion(props) {
37
36
  return /* @__PURE__ */ jsx("div", {
38
37
  "data-u-comp": "accordion",
39
38
  className: clsx("univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600", className),
40
- children: items.map((item, index) => {
41
- var _item$id;
42
- return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
43
- className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-white",
44
- type: "button",
45
- onClick: () => toggleItem(index),
46
- children: [/* @__PURE__ */ jsx(DownIcon, { className: clsx("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
47
- "-univer-rotate-90": openIndex !== index,
48
- "univer-rotate-0": openIndex === index
49
- }) }), /* @__PURE__ */ jsx("span", {
50
- className: "univer-font-medium",
51
- children: item.label
52
- })]
53
- }), /* @__PURE__ */ jsx("div", {
54
- className: clsx("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out", {
55
- "univer-max-h-screen": openIndex === index,
56
- "univer-max-h-0": openIndex !== index
57
- }),
58
- children: /* @__PURE__ */ jsx("div", {
59
- className: "univer-box-border univer-px-4 univer-py-1.5",
60
- children: item.children
61
- })
62
- })] }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
63
- })
39
+ children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
40
+ className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-white",
41
+ type: "button",
42
+ onClick: () => toggleItem(index),
43
+ children: [/* @__PURE__ */ jsx(DownIcon, { className: clsx("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
44
+ "-univer-rotate-90": openIndex !== index,
45
+ "univer-rotate-0": openIndex === index
46
+ }) }), /* @__PURE__ */ jsx("span", {
47
+ className: "univer-font-medium",
48
+ children: item.label
49
+ })]
50
+ }), /* @__PURE__ */ jsx("div", {
51
+ className: clsx("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out", {
52
+ "univer-max-h-screen": openIndex === index,
53
+ "univer-max-h-0": openIndex !== index
54
+ }),
55
+ children: /* @__PURE__ */ jsx("div", {
56
+ className: "univer-box-border univer-px-4 univer-py-1.5",
57
+ children: item.children
58
+ })
59
+ })] }, item.id ?? index))
64
60
  });
65
61
  }
66
62
 
@@ -158,7 +154,7 @@ function ConfigProvider(props) {
158
154
  return /* @__PURE__ */ jsx(ConfigContext.Provider, {
159
155
  value,
160
156
  children: /* @__PURE__ */ jsx(DirectionProvider, {
161
- dir: direction !== null && direction !== void 0 ? direction : "ltr",
157
+ dir: direction ?? "ltr",
162
158
  children
163
159
  })
164
160
  });
@@ -539,7 +535,7 @@ function pad(value, length = 2) {
539
535
  return String(value).padStart(length, "0");
540
536
  }
541
537
  function formatDateWithPattern(value, pattern) {
542
- const date = value !== null && value !== void 0 ? value : /* @__PURE__ */ new Date();
538
+ const date = value ?? /* @__PURE__ */ new Date();
543
539
  if (Number.isNaN(date.getTime())) return "Invalid Date";
544
540
  const tokenMap = {
545
541
  YYYY: String(date.getFullYear()),
@@ -549,10 +545,7 @@ function formatDateWithPattern(value, pattern) {
549
545
  mm: pad(date.getMinutes()),
550
546
  ss: pad(date.getSeconds())
551
547
  };
552
- return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (token) => {
553
- var _tokenMap$token;
554
- return (_tokenMap$token = tokenMap[token]) !== null && _tokenMap$token !== void 0 ? _tokenMap$token : token;
555
- });
548
+ return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (token) => tokenMap[token] ?? token);
556
549
  }
557
550
 
558
551
  //#endregion
@@ -561,7 +554,7 @@ function TimeInput(props) {
561
554
  const { className, value, onValueChange } = props;
562
555
  function handleChangeTime(event) {
563
556
  const [hours, minutes, seconds] = event.target.value.split(":").map(Number);
564
- const newValue = new Date(value !== null && value !== void 0 ? value : Date.now());
557
+ const newValue = new Date(value ?? Date.now());
565
558
  newValue.setHours(hours, minutes, seconds, 0);
566
559
  onValueChange === null || onValueChange === void 0 || onValueChange(newValue);
567
560
  }
@@ -659,8 +652,8 @@ function Calendar(props) {
659
652
  const { direction = "ltr", locale } = useContext(ConfigContext);
660
653
  const { ariaLabels, year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
661
654
  const today = /* @__PURE__ */ new Date();
662
- const [currentYear, setCurrentYear] = useState((value !== null && value !== void 0 ? value : today).getFullYear());
663
- const [currentMonth, setCurrentMonth] = useState((value !== null && value !== void 0 ? value : today).getMonth());
655
+ const [currentYear, setCurrentYear] = useState((value ?? today).getFullYear());
656
+ const [currentMonth, setCurrentMonth] = useState((value ?? today).getMonth());
664
657
  const [yearDropdownOpen, setYearDropdownOpen] = useState(false);
665
658
  function prevMonth() {
666
659
  setCurrentMonth((prev) => {
@@ -688,9 +681,8 @@ function Calendar(props) {
688
681
  setYearDropdownOpen(false);
689
682
  }
690
683
  const yearOptions = useMemo(() => {
691
- var _min$getFullYear, _max$getFullYear;
692
- const startYear = (_min$getFullYear = min === null || min === void 0 ? void 0 : min.getFullYear()) !== null && _min$getFullYear !== void 0 ? _min$getFullYear : currentYear - DEFAULT_YEAR_RANGE;
693
- const endYear = (_max$getFullYear = max === null || max === void 0 ? void 0 : max.getFullYear()) !== null && _max$getFullYear !== void 0 ? _max$getFullYear : currentYear + DEFAULT_YEAR_RANGE;
684
+ const startYear = (min === null || min === void 0 ? void 0 : min.getFullYear()) ?? currentYear - DEFAULT_YEAR_RANGE;
685
+ const endYear = (max === null || max === void 0 ? void 0 : max.getFullYear()) ?? currentYear + DEFAULT_YEAR_RANGE;
694
686
  return Array.from({ length: Math.max(0, endYear - startYear + 1) }, (_, index) => ({ year: startYear + index }));
695
687
  }, [
696
688
  currentYear,
@@ -723,31 +715,28 @@ function Calendar(props) {
723
715
  return day && currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate();
724
716
  }
725
717
  function isDisabled(day) {
726
- var _value$getHours, _value$getMinutes, _value$getSeconds;
727
718
  if (!day) return false;
728
- const hours = (_value$getHours = value === null || value === void 0 ? void 0 : value.getHours()) !== null && _value$getHours !== void 0 ? _value$getHours : today.getHours();
729
- const minutes = (_value$getMinutes = value === null || value === void 0 ? void 0 : value.getMinutes()) !== null && _value$getMinutes !== void 0 ? _value$getMinutes : today.getMinutes();
730
- const seconds = (_value$getSeconds = value === null || value === void 0 ? void 0 : value.getSeconds()) !== null && _value$getSeconds !== void 0 ? _value$getSeconds : today.getSeconds();
719
+ const hours = (value === null || value === void 0 ? void 0 : value.getHours()) ?? today.getHours();
720
+ const minutes = (value === null || value === void 0 ? void 0 : value.getMinutes()) ?? today.getMinutes();
721
+ const seconds = (value === null || value === void 0 ? void 0 : value.getSeconds()) ?? today.getSeconds();
731
722
  const d = new Date(currentYear, currentMonth, day, hours, minutes, seconds);
732
723
  if (min && d < min) return true;
733
724
  if (max && d > max) return true;
734
725
  return false;
735
726
  }
736
727
  function handleChangeDate(day) {
737
- var _value$getHours2, _value$getMinutes2, _value$getSeconds2;
738
728
  if (isDisabled(day)) return;
739
- const hours = (_value$getHours2 = value === null || value === void 0 ? void 0 : value.getHours()) !== null && _value$getHours2 !== void 0 ? _value$getHours2 : today.getHours();
740
- const minutes = (_value$getMinutes2 = value === null || value === void 0 ? void 0 : value.getMinutes()) !== null && _value$getMinutes2 !== void 0 ? _value$getMinutes2 : today.getMinutes();
741
- const seconds = (_value$getSeconds2 = value === null || value === void 0 ? void 0 : value.getSeconds()) !== null && _value$getSeconds2 !== void 0 ? _value$getSeconds2 : today.getSeconds();
729
+ const hours = (value === null || value === void 0 ? void 0 : value.getHours()) ?? today.getHours();
730
+ const minutes = (value === null || value === void 0 ? void 0 : value.getMinutes()) ?? today.getMinutes();
731
+ const seconds = (value === null || value === void 0 ? void 0 : value.getSeconds()) ?? today.getSeconds();
742
732
  const selectedDate = new Date(currentYear, currentMonth, day, hours, minutes, seconds);
743
733
  onValueChange === null || onValueChange === void 0 || onValueChange(selectedDate);
744
734
  }
745
735
  function handleChangeTime(time) {
746
- var _value$getDate;
747
736
  const hours = time.getHours();
748
737
  const minutes = time.getMinutes();
749
738
  const seconds = time.getSeconds();
750
- const updatedDate = new Date(currentYear, currentMonth, (_value$getDate = value === null || value === void 0 ? void 0 : value.getDate()) !== null && _value$getDate !== void 0 ? _value$getDate : today.getDate(), hours, minutes, seconds);
739
+ const updatedDate = new Date(currentYear, currentMonth, (value === null || value === void 0 ? void 0 : value.getDate()) ?? today.getDate(), hours, minutes, seconds);
751
740
  onValueChange === null || onValueChange === void 0 || onValueChange(updatedDate);
752
741
  }
753
742
  return /* @__PURE__ */ jsxs("div", {
@@ -925,7 +914,7 @@ function CheckboxGroup(props) {
925
914
  key: index,
926
915
  children: child.props.children,
927
916
  checked: child.props.value ? value.includes(child.props.value) : false,
928
- disabled: disabled !== null && disabled !== void 0 ? disabled : child.props.disabled,
917
+ disabled: disabled ?? child.props.disabled,
929
918
  onChange: handleChange
930
919
  });
931
920
  return child;
@@ -946,8 +935,8 @@ function Checkbox(props) {
946
935
  if (!onChange || disabled) return;
947
936
  if (typeof value !== "undefined") onChange === null || onChange === void 0 || onChange(value);
948
937
  else {
949
- var _inputRef$current$che, _inputRef$current;
950
- const checked = (_inputRef$current$che = inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked) !== null && _inputRef$current$che !== void 0 ? _inputRef$current$che : false;
938
+ var _inputRef$current;
939
+ const checked = (inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked) ?? false;
951
940
  onChange === null || onChange === void 0 || onChange(checked);
952
941
  }
953
942
  }
@@ -993,7 +982,7 @@ const DialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__
993
982
  }));
994
983
  DialogOverlay.displayName = Overlay.displayName;
995
984
  const DialogContent = forwardRef(({ className, children, closable = true, onClickClose, mountContainer, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, {
996
- container: mountContainer !== null && mountContainer !== void 0 ? mountContainer : void 0,
985
+ container: mountContainer ?? void 0,
997
986
  children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Content$2, {
998
987
  ref,
999
988
  className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-white univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
@@ -1160,7 +1149,7 @@ function Dialog(props) {
1160
1149
  defaultPosition,
1161
1150
  enabled: draggable
1162
1151
  });
1163
- const footer = propFooter !== null && propFooter !== void 0 ? propFooter : showOk || showCancel ? /* @__PURE__ */ jsxs("div", {
1152
+ const footer = propFooter ?? (showOk || showCancel ? /* @__PURE__ */ jsxs("div", {
1164
1153
  className: "univer-flex univer-justify-end univer-gap-2",
1165
1154
  children: [showCancel && /* @__PURE__ */ jsx(Button, {
1166
1155
  onClick: onCancel,
@@ -1170,7 +1159,7 @@ function Dialog(props) {
1170
1159
  onClick: onOk,
1171
1160
  children: locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
1172
1161
  })]
1173
- }) : null;
1162
+ }) : null);
1174
1163
  const handleContentRef = useCallback((node) => {
1175
1164
  if (node && draggable) setElementRef(node);
1176
1165
  }, [draggable, setElementRef]);
@@ -1366,10 +1355,10 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
1366
1355
  const thumbRef = useRef(null);
1367
1356
  const alphaRef = useRef(alpha);
1368
1357
  const calculateAlpha = useCallback((clientX) => {
1369
- var _thumbRef$current$cli, _thumbRef$current;
1358
+ var _thumbRef$current;
1370
1359
  const slider = sliderRef.current;
1371
1360
  if (!slider) return;
1372
- const thumbSize = (_thumbRef$current$cli = (_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) !== null && _thumbRef$current$cli !== void 0 ? _thumbRef$current$cli : 0;
1361
+ const thumbSize = ((_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) ?? 0;
1373
1362
  const rect = slider.getBoundingClientRect();
1374
1363
  const maxX = rect.width - thumbSize;
1375
1364
  if (maxX <= 0) {
@@ -1407,10 +1396,10 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
1407
1396
  handlePointerUp
1408
1397
  ]);
1409
1398
  const getThumbPosition = () => {
1410
- var _thumbRef$current$cli2, _thumbRef$current2, _sliderRef$current$cl, _sliderRef$current;
1399
+ var _thumbRef$current2, _sliderRef$current;
1411
1400
  const safeAlpha = Math.min(Math.max(alpha * 100, 0), 100);
1412
- const thumbSize = (_thumbRef$current$cli2 = (_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) !== null && _thumbRef$current$cli2 !== void 0 ? _thumbRef$current$cli2 : 0;
1413
- const sliderWidth = (_sliderRef$current$cl = (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) !== null && _sliderRef$current$cl !== void 0 ? _sliderRef$current$cl : 0;
1401
+ const thumbSize = ((_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) ?? 0;
1402
+ const sliderWidth = ((_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) ?? 0;
1414
1403
  const thumbOffsetPercent = sliderWidth > 0 ? thumbSize / sliderWidth * 100 : 0;
1415
1404
  return `${safeAlpha / 100 * (100 - thumbOffsetPercent)}%`;
1416
1405
  };
@@ -1497,7 +1486,7 @@ function RgbInput({ hsv, alpha, format, onChange }) {
1497
1486
  r: Math.round(r),
1498
1487
  g: Math.round(g),
1499
1488
  b: Math.round(b),
1500
- a: alpha !== null && alpha !== void 0 ? alpha : 1
1489
+ a: alpha ?? 1
1501
1490
  });
1502
1491
  }, [hsv, alpha]);
1503
1492
  const handleChange = (color, value) => {
@@ -1529,7 +1518,7 @@ function RgbInput({ hsv, alpha, format, onChange }) {
1529
1518
  r: Math.round(r),
1530
1519
  g: Math.round(g),
1531
1520
  b: Math.round(b),
1532
- a: alpha !== null && alpha !== void 0 ? alpha : 1
1521
+ a: alpha ?? 1
1533
1522
  });
1534
1523
  };
1535
1524
  return /* @__PURE__ */ jsxs("div", {
@@ -1748,10 +1737,10 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
1748
1737
  };
1749
1738
  }, [hsv]);
1750
1739
  const getIndicatorStyles = () => {
1751
- var _containerRef$current3, _containerRef$current4, _containerRef$current5, _containerRef$current6;
1740
+ var _containerRef$current3, _containerRef$current4;
1752
1741
  const halfIndicatorSize = 16 / 2;
1753
- const w = (_containerRef$current3 = (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientWidth) !== null && _containerRef$current3 !== void 0 ? _containerRef$current3 : 0;
1754
- const h = (_containerRef$current5 = (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.clientHeight) !== null && _containerRef$current5 !== void 0 ? _containerRef$current5 : 0;
1742
+ const w = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.clientWidth) ?? 0;
1743
+ const h = ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientHeight) ?? 0;
1755
1744
  return {
1756
1745
  transform: `translate(${hsv[1] / 100 * w - halfIndicatorSize}px, ${(100 - hsv[2]) / 100 * h - halfIndicatorSize}px)`,
1757
1746
  transition: isDragging ? "none" : "transform 0.1s ease-out"
@@ -1811,10 +1800,10 @@ function HueSlider({ hsv, onChange, onChanged }) {
1811
1800
  const thumbRef = useRef(null);
1812
1801
  const hsvRef = useRef(hsv);
1813
1802
  const calculateHue = useCallback((clientX) => {
1814
- var _thumbRef$current$cli, _thumbRef$current;
1803
+ var _thumbRef$current;
1815
1804
  const slider = sliderRef.current;
1816
1805
  if (!slider) return;
1817
- const thumbSize = (_thumbRef$current$cli = (_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) !== null && _thumbRef$current$cli !== void 0 ? _thumbRef$current$cli : 0;
1806
+ const thumbSize = ((_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) ?? 0;
1818
1807
  const rect = slider.getBoundingClientRect();
1819
1808
  const maxX = rect.width - thumbSize;
1820
1809
  if (maxX <= 0) {
@@ -1854,10 +1843,10 @@ function HueSlider({ hsv, onChange, onChanged }) {
1854
1843
  handlePointerUp
1855
1844
  ]);
1856
1845
  const getThumbPosition = () => {
1857
- var _thumbRef$current$cli2, _thumbRef$current2, _sliderRef$current$cl, _sliderRef$current;
1846
+ var _thumbRef$current2, _sliderRef$current;
1858
1847
  const safeHue = Math.min(Math.max(hsv[0], 0), 360);
1859
- const thumbSize = (_thumbRef$current$cli2 = (_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) !== null && _thumbRef$current$cli2 !== void 0 ? _thumbRef$current$cli2 : 0;
1860
- const sliderWidth = (_sliderRef$current$cl = (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) !== null && _sliderRef$current$cl !== void 0 ? _sliderRef$current$cl : 0;
1848
+ const thumbSize = ((_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) ?? 0;
1849
+ const sliderWidth = ((_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) ?? 0;
1861
1850
  const thumbOffsetPercent = sliderWidth > 0 ? thumbSize / sliderWidth * 100 : 0;
1862
1851
  return `${safeHue / 360 * (100 - thumbOffsetPercent)}%`;
1863
1852
  };
@@ -2134,11 +2123,11 @@ function Footer(props) {
2134
2123
  className: "univer-flex univer-items-center univer-justify-end univer-gap-2",
2135
2124
  children: [closable && /* @__PURE__ */ jsx(Button, {
2136
2125
  onClick: onClose,
2137
- children: cancelText !== null && cancelText !== void 0 ? cancelText : locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel
2126
+ children: cancelText ?? (locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel)
2138
2127
  }), /* @__PURE__ */ jsx(Button, {
2139
2128
  variant: "primary",
2140
2129
  onClick: onConfirm,
2141
- children: confirmText !== null && confirmText !== void 0 ? confirmText : locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
2130
+ children: confirmText ?? (locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm)
2142
2131
  })]
2143
2132
  });
2144
2133
  }
@@ -2507,7 +2496,7 @@ const FormDualColumnLayout = (props) => {
2507
2496
  */
2508
2497
  function Pager(props) {
2509
2498
  const { className, value: current = 0, total: count = 0, loop, text: propText, onChange } = props;
2510
- const text = propText !== null && propText !== void 0 ? propText : `${current}/${count}`;
2499
+ const text = propText ?? `${current}/${count}`;
2511
2500
  const hasValue = count > 0;
2512
2501
  const onClickLeftArrow = () => {
2513
2502
  if (current === 1) {
@@ -2653,7 +2642,7 @@ function Gallery(props) {
2653
2642
  })
2654
2643
  }),
2655
2644
  /* @__PURE__ */ jsxs("footer", {
2656
- className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400",
2645
+ className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400 rtl:univer-flex-row-reverse",
2657
2646
  children: [
2658
2647
  hasPagination && /* @__PURE__ */ jsx(Pager, {
2659
2648
  className: "!univer-text-gray-400 [&_[data-u-comp=pager-left-arrow]:hover]:!univer-bg-gray-600 [&_[data-u-comp=pager-right-arrow]:hover]:!univer-bg-gray-600",
@@ -3170,50 +3159,47 @@ function Tooltip(props) {
3170
3159
  children
3171
3160
  });
3172
3161
  let tooltipNode = null;
3173
- if (typeof document !== "undefined" && visible && title && document.body) {
3174
- var _coords$top, _coords$left;
3175
- tooltipNode = createPortal(/* @__PURE__ */ jsxs("div", {
3176
- ref: tooltipRef,
3177
- dir: direction,
3178
- role: "tooltip",
3179
- className: clsx("univer-animate-in univer-fade-in-0 univer-zoom-in-95 univer-pointer-events-auto univer-absolute univer-z-[1081] univer-box-border univer-w-fit univer-max-w-sm univer-text-balance univer-rounded-lg univer-bg-gray-700 univer-px-2.5 univer-py-2 univer-text-xs univer-font-medium univer-text-white univer-shadow-lg univer-drop-shadow-sm dark:!univer-bg-gray-100 dark:!univer-text-gray-900", className),
3162
+ if (typeof document !== "undefined" && visible && title && document.body) tooltipNode = createPortal(/* @__PURE__ */ jsxs("div", {
3163
+ ref: tooltipRef,
3164
+ dir: direction,
3165
+ role: "tooltip",
3166
+ className: clsx("univer-animate-in univer-fade-in-0 univer-zoom-in-95 univer-pointer-events-auto univer-absolute univer-z-[1081] univer-box-border univer-w-fit univer-max-w-sm univer-text-balance univer-rounded-lg univer-bg-gray-700 univer-px-2.5 univer-py-2 univer-text-xs univer-font-medium univer-text-white univer-shadow-lg univer-drop-shadow-sm dark:!univer-bg-gray-100 dark:!univer-text-gray-900", className),
3167
+ style: {
3168
+ top: (coords === null || coords === void 0 ? void 0 : coords.top) ?? -9999,
3169
+ left: (coords === null || coords === void 0 ? void 0 : coords.left) ?? -9999
3170
+ },
3171
+ onMouseEnter: () => showTooltip(),
3172
+ onMouseLeave: () => hideTooltip(),
3173
+ children: [/* @__PURE__ */ jsx("div", {
3174
+ className: "univer-break-words",
3175
+ children: title
3176
+ }), /* @__PURE__ */ jsx("div", {
3177
+ ref: arrowRef,
3178
+ className: "univer-absolute univer-size-2.5 univer-rotate-45 univer-rounded-sm univer-bg-gray-700 dark:!univer-bg-gray-100",
3180
3179
  style: {
3181
- top: (_coords$top = coords === null || coords === void 0 ? void 0 : coords.top) !== null && _coords$top !== void 0 ? _coords$top : -9999,
3182
- left: (_coords$left = coords === null || coords === void 0 ? void 0 : coords.left) !== null && _coords$left !== void 0 ? _coords$left : -9999
3183
- },
3184
- onMouseEnter: () => showTooltip(),
3185
- onMouseLeave: () => hideTooltip(),
3186
- children: [/* @__PURE__ */ jsx("div", {
3187
- className: "univer-break-words",
3188
- children: title
3189
- }), /* @__PURE__ */ jsx("div", {
3190
- ref: arrowRef,
3191
- className: "univer-absolute univer-size-2.5 univer-rotate-45 univer-rounded-sm univer-bg-gray-700 dark:!univer-bg-gray-100",
3192
- style: {
3193
- ...currentPlacement === "bottom" && {
3194
- top: -5,
3195
- left: "50%",
3196
- transform: "translateX(-50%) rotate(45deg)"
3197
- },
3198
- ...currentPlacement === "top" && {
3199
- bottom: -5,
3200
- left: "50%",
3201
- transform: "translateX(-50%) rotate(45deg)"
3202
- },
3203
- ...currentPlacement === "left" && {
3204
- right: -5,
3205
- top: "50%",
3206
- transform: "translateY(-50%) rotate(45deg)"
3207
- },
3208
- ...currentPlacement === "right" && {
3209
- left: -5,
3210
- top: "50%",
3211
- transform: "translateY(-50%) rotate(45deg)"
3212
- }
3180
+ ...currentPlacement === "bottom" && {
3181
+ top: -5,
3182
+ left: "50%",
3183
+ transform: "translateX(-50%) rotate(45deg)"
3184
+ },
3185
+ ...currentPlacement === "top" && {
3186
+ bottom: -5,
3187
+ left: "50%",
3188
+ transform: "translateX(-50%) rotate(45deg)"
3189
+ },
3190
+ ...currentPlacement === "left" && {
3191
+ right: -5,
3192
+ top: "50%",
3193
+ transform: "translateY(-50%) rotate(45deg)"
3194
+ },
3195
+ ...currentPlacement === "right" && {
3196
+ left: -5,
3197
+ top: "50%",
3198
+ transform: "translateY(-50%) rotate(45deg)"
3213
3199
  }
3214
- })]
3215
- }), document.body);
3216
- }
3200
+ }
3201
+ })]
3202
+ }), document.body);
3217
3203
  return /* @__PURE__ */ jsxs(Fragment, { children: [triggerElement, tooltipNode] });
3218
3204
  }
3219
3205
 
@@ -3249,8 +3235,7 @@ function clamp(value, min, max) {
3249
3235
  return Math.max(min, Math.min(max, value));
3250
3236
  }
3251
3237
  function getStopOpacity(stop) {
3252
- var _stop$opacity;
3253
- return clamp((_stop$opacity = stop === null || stop === void 0 ? void 0 : stop.opacity) !== null && _stop$opacity !== void 0 ? _stop$opacity : 1, 0, 1);
3238
+ return clamp((stop === null || stop === void 0 ? void 0 : stop.opacity) ?? 1, 0, 1);
3254
3239
  }
3255
3240
  function getColorWithOpacity(color, opacity) {
3256
3241
  if (opacity >= 1) return color;
@@ -3273,8 +3258,7 @@ function getStopColor(stop) {
3273
3258
  return getColorWithOpacity(stop.color, getStopOpacity(stop));
3274
3259
  }
3275
3260
  function getGradientAngle(value) {
3276
- var _ref, _value$angle;
3277
- return (_ref = (_value$angle = value.angle) !== null && _value$angle !== void 0 ? _value$angle : DEFAULT_VALUE.angle) !== null && _ref !== void 0 ? _ref : 0;
3261
+ return value.angle ?? DEFAULT_VALUE.angle ?? 0;
3278
3262
  }
3279
3263
  function getCssLinearGradientAngle(value) {
3280
3264
  return (getGradientAngle(value) + 90) % 360;
@@ -3323,7 +3307,7 @@ function GradientColorPicker(props) {
3323
3307
  const handleAngleChange = (angle) => {
3324
3308
  emitChange({
3325
3309
  ...valueRef.current,
3326
- angle: angle !== null && angle !== void 0 ? angle : 0
3310
+ angle: angle ?? 0
3327
3311
  });
3328
3312
  };
3329
3313
  const handleStopColorChange = (color) => {
@@ -3350,7 +3334,7 @@ function GradientColorPicker(props) {
3350
3334
  });
3351
3335
  };
3352
3336
  const handleStopTransparencyChange = (transparency) => {
3353
- const nextTransparency = clamp(transparency !== null && transparency !== void 0 ? transparency : 0, 0, 100);
3337
+ const nextTransparency = clamp(transparency ?? 0, 0, 100);
3354
3338
  const newStops = [...valueRef.current.stops];
3355
3339
  newStops[selectedIndex] = {
3356
3340
  ...newStops[selectedIndex],
@@ -3732,7 +3716,7 @@ const Messager = ({ className, ...props }) => /* @__PURE__ */ jsx(Toaster$1, {
3732
3716
  ...props
3733
3717
  });
3734
3718
  const message = ({ content, duration, id, onClose, type = "info" }) => {
3735
- const messageId = id !== null && id !== void 0 ? id : createMessageId();
3719
+ const messageId = id ?? createMessageId();
3736
3720
  const method = resolveToastMethod(type);
3737
3721
  let closed = false;
3738
3722
  const handleClose = () => {
@@ -3744,7 +3728,7 @@ const message = ({ content, duration, id, onClose, type = "info" }) => {
3744
3728
  method(content, {
3745
3729
  id: messageId,
3746
3730
  toasterId: MESSAGE_TOASTER_ID,
3747
- duration: duration !== null && duration !== void 0 ? duration : DEFAULT_MESSAGE_DURATION,
3731
+ duration: duration ?? DEFAULT_MESSAGE_DURATION,
3748
3732
  icon: type === "loading" ? void 0 : iconMap[type],
3749
3733
  onDismiss: handleClose,
3750
3734
  onAutoClose: handleClose
@@ -3926,7 +3910,7 @@ function RadioGroup(props) {
3926
3910
  children: child.props.children,
3927
3911
  value: child.props.value,
3928
3912
  checked: value === child.props.value,
3929
- disabled: disabled !== null && disabled !== void 0 ? disabled : child.props.disabled,
3913
+ disabled: disabled ?? child.props.disabled,
3930
3914
  onChange: handleChange
3931
3915
  });
3932
3916
  return child;
@@ -4115,7 +4099,11 @@ function MultipleSelect(props) {
4115
4099
  }
4116
4100
  };
4117
4101
  });
4118
- }, [options]);
4102
+ }, [
4103
+ onChange,
4104
+ options,
4105
+ value
4106
+ ]);
4119
4107
  function handleClose(item) {
4120
4108
  const newValue = value.filter((v) => v !== item);
4121
4109
  onChange(newValue);
@@ -4269,7 +4257,7 @@ function Toaster({ visibleToasts, ...props }) {
4269
4257
  error: "[&_[data-icon]]:univer-text-red-500",
4270
4258
  warning: "[&_[data-icon]]:univer-text-yellow-500"
4271
4259
  } },
4272
- visibleToasts: visibleToasts !== null && visibleToasts !== void 0 ? visibleToasts : 5,
4260
+ visibleToasts: visibleToasts ?? 5,
4273
4261
  ...props
4274
4262
  });
4275
4263
  }
@@ -4291,7 +4279,7 @@ const findNodePathFromTree = (tree, key) => {
4291
4279
  return result;
4292
4280
  };
4293
4281
  const createCacheWithFindNodePathFromTree = (tree, defaultCache) => {
4294
- const cache = defaultCache !== null && defaultCache !== void 0 ? defaultCache : /* @__PURE__ */ new Map();
4282
+ const cache = defaultCache ?? /* @__PURE__ */ new Map();
4295
4283
  let cacheTree = tree;
4296
4284
  return {
4297
4285
  findNodePathFromTreeWithCache: (key) => {
package/lib/index.css CHANGED
@@ -91,10 +91,7 @@
91
91
  }
92
92
 
93
93
  .univer-inset-0 {
94
- top: 0;
95
- bottom: 0;
96
- left: 0;
97
- right: 0;
94
+ inset: 0;
98
95
  }
99
96
 
100
97
  .univer-inset-x-0 {
@@ -723,7 +720,6 @@
723
720
  }
724
721
 
725
722
  .univer-appearance-none {
726
- -webkit-appearance: none;
727
723
  appearance: none;
728
724
  }
729
725
 
@@ -2284,6 +2280,10 @@
2284
2280
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
2285
2281
  }
2286
2282
 
2283
+ .rtl\:univer-flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) {
2284
+ flex-direction: row-reverse;
2285
+ }
2286
+
2287
2287
  .rtl\:univer-rounded-l-md:where([dir="rtl"], [dir="rtl"] *) {
2288
2288
  border-top-left-radius: .375rem;
2289
2289
  border-bottom-left-radius: .375rem;
@@ -2446,11 +2446,7 @@
2446
2446
  background-color: var(--univer-gray-600) !important;
2447
2447
  }
2448
2448
 
2449
- .dark\:data-\[selected\=true\]\:\!univer-bg-gray-600[data-selected="true"]:where(.univer-dark, .univer-dark *) {
2450
- background-color: var(--univer-gray-600) !important;
2451
- }
2452
-
2453
- .dark\:data-\[state\=open\]\:\!univer-bg-gray-600[data-state="open"]:where(.univer-dark, .univer-dark *) {
2449
+ .dark\:data-\[selected\=true\]\:\!univer-bg-gray-600[data-selected="true"]:where(.univer-dark, .univer-dark *), .dark\:data-\[state\=open\]\:\!univer-bg-gray-600[data-state="open"]:where(.univer-dark, .univer-dark *) {
2454
2450
  background-color: var(--univer-gray-600) !important;
2455
2451
  }
2456
2452
 
@@ -2503,7 +2499,6 @@
2503
2499
  }
2504
2500
 
2505
2501
  .\[\&\:\:-webkit-calendar-picker-indicator\]\:univer-appearance-none::-webkit-calendar-picker-indicator {
2506
- -webkit-appearance: none;
2507
2502
  appearance: none;
2508
2503
  }
2509
2504