@canvas-components/react-components 0.1.4 → 0.2.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 (8) hide show
  1. package/README.md +168 -161
  2. package/dist/index.cjs +2154 -916
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +307 -27
  5. package/dist/index.d.ts +307 -27
  6. package/dist/index.js +1880 -667
  7. package/dist/index.js.map +1 -1
  8. package/package.json +7 -3
package/dist/index.cjs CHANGED
@@ -1,9 +1,29 @@
1
1
  'use strict';
2
2
 
3
- var react = require('react');
3
+ var React = require('react');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var reactDom = require('react-dom');
6
6
 
7
+ function _interopNamespace(e) {
8
+ if (e && e.__esModule) return e;
9
+ var n = Object.create(null);
10
+ if (e) {
11
+ Object.keys(e).forEach(function (k) {
12
+ if (k !== 'default') {
13
+ var d = Object.getOwnPropertyDescriptor(e, k);
14
+ Object.defineProperty(n, k, d.get ? d : {
15
+ enumerable: true,
16
+ get: function () { return e[k]; }
17
+ });
18
+ }
19
+ });
20
+ }
21
+ n.default = e;
22
+ return Object.freeze(n);
23
+ }
24
+
25
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
26
+
7
27
  // #style-inject:#style-inject
8
28
  function styleInject(css, { insertAt } = {}) {
9
29
  if (!css || typeof document === "undefined") return;
@@ -39,7 +59,7 @@ var REACT_COMPONENT_PREFIX = "canvas-react";
39
59
 
40
60
  // src/components/checkbox/style.css
41
61
  styleInject('@import "../../styles/variables.css";\n.canvas-react-checkbox {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n user-select: none;\n}\n.canvas-react-checkbox-disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-checkbox-input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-checkbox-box {\n position: relative;\n flex: none;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border-strong);\n border-radius: 4px;\n background: var(--canvas-react-color-bg);\n transition:\n border-color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n}\n.canvas-react-checkbox:hover .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-checkbox-input:focus-visible + .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box,\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-checkbox-box::after {\n position: absolute;\n content: "";\n opacity: 0;\n box-sizing: border-box;\n transform: scale(0);\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box::after {\n top: 50%;\n left: 22%;\n width: 5.5px;\n height: 9px;\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transform: translateY(-58%) rotate(45deg) scale(1);\n transform-origin: center;\n opacity: 1;\n}\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box::after {\n top: 50%;\n left: 50%;\n width: 8px;\n border-bottom: 2px solid #fff;\n transform: translate(-50%, -50%);\n opacity: 1;\n}\n.canvas-react-checkbox-label {\n min-width: 0;\n}\n');
42
- var ReactCheckbox = react.forwardRef(
62
+ var ReactCheckbox = React.forwardRef(
43
63
  function ReactCheckbox2(props, ref) {
44
64
  const {
45
65
  checked,
@@ -50,14 +70,14 @@ var ReactCheckbox = react.forwardRef(
50
70
  style,
51
71
  ...restProps
52
72
  } = props;
53
- const inputRef = react.useRef(null);
54
- react.useEffect(() => {
73
+ const inputRef = React.useRef(null);
74
+ React.useEffect(() => {
55
75
  if (!inputRef.current) {
56
76
  return;
57
77
  }
58
78
  inputRef.current.indeterminate = indeterminate;
59
79
  }, [indeterminate]);
60
- react.useImperativeHandle(ref, () => ({
80
+ React.useImperativeHandle(ref, () => ({
61
81
  focus: () => inputRef.current?.focus(),
62
82
  blur: () => inputRef.current?.blur(),
63
83
  input: inputRef.current
@@ -95,7 +115,7 @@ var ReactCheckbox = react.forwardRef(
95
115
 
96
116
  // src/components/input/style.css
97
117
  styleInject('@import "../../styles/variables.css";\n.canvas-react-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n}\n.canvas-react-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-suffix {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-input-affix-wrapper:hover .canvas-react-input-clear,\n.canvas-react-input-affix-wrapper:focus-within .canvas-react-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-input-clear-icon,\n.canvas-react-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
98
- var ReactInput = react.forwardRef(
118
+ var ReactInput = React.forwardRef(
99
119
  function ReactInput2(props, ref) {
100
120
  const {
101
121
  allowClear = true,
@@ -179,17 +199,17 @@ var ReactInput = react.forwardRef(
179
199
  var DEFAULT_CONTENT_SCALE = {
180
200
  scale: 1
181
201
  };
182
- var ReactContentScaleContext = react.createContext(DEFAULT_CONTENT_SCALE);
202
+ var ReactContentScaleContext = React.createContext(DEFAULT_CONTENT_SCALE);
183
203
  function ReactContentScaleProvider(props) {
184
204
  const { children, scale = 1 } = props;
185
- const value = react.useMemo(() => {
205
+ const value = React.useMemo(() => {
186
206
  const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
187
207
  return { scale: nextScale };
188
208
  }, [scale]);
189
209
  return /* @__PURE__ */ jsxRuntime.jsx(ReactContentScaleContext.Provider, { value, children });
190
210
  }
191
211
  function useReactContentScale() {
192
- return react.useContext(ReactContentScaleContext);
212
+ return React.useContext(ReactContentScaleContext);
193
213
  }
194
214
  function toContentLayoutSize(size, scale) {
195
215
  const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -207,15 +227,15 @@ function useReactTransition(options) {
207
227
  } = options;
208
228
  const enterDuration = resolveDuration(duration, "enter");
209
229
  const leaveDuration = resolveDuration(duration, "leave");
210
- const previousShowRef = react.useRef(show);
211
- const [rendered, setRendered] = react.useState(show);
212
- const [phase, setPhase] = react.useState(() => {
230
+ const previousShowRef = React.useRef(show);
231
+ const [rendered, setRendered] = React.useState(show);
232
+ const [phase, setPhase] = React.useState(() => {
213
233
  if (!show) {
214
234
  return "leave-to";
215
235
  }
216
236
  return appear ? "enter-from" : "entered";
217
237
  });
218
- react.useLayoutEffect(() => {
238
+ React.useLayoutEffect(() => {
219
239
  if (previousShowRef.current === show) {
220
240
  return;
221
241
  }
@@ -227,7 +247,7 @@ function useReactTransition(options) {
227
247
  }
228
248
  setPhase("leave-from");
229
249
  }, [show]);
230
- react.useLayoutEffect(() => {
250
+ React.useLayoutEffect(() => {
231
251
  let firstFrameId = null;
232
252
  let secondFrameId = null;
233
253
  let timerId = null;
@@ -308,9 +328,9 @@ function ReactPopup(props) {
308
328
  show: open
309
329
  });
310
330
  const { rendered } = transition;
311
- const [position, setPosition] = react.useState(null);
312
- const surfaceRef = react.useRef(null);
313
- react.useLayoutEffect(() => {
331
+ const [position, setPosition] = React.useState(null);
332
+ const surfaceRef = React.useRef(null);
333
+ React.useLayoutEffect(() => {
314
334
  if (!rendered) {
315
335
  return;
316
336
  }
@@ -362,7 +382,7 @@ function ReactPopup(props) {
362
382
  rendered,
363
383
  placement
364
384
  ]);
365
- react.useLayoutEffect(() => {
385
+ React.useLayoutEffect(() => {
366
386
  if (!rendered || !position || !surfaceRef.current) {
367
387
  return;
368
388
  }
@@ -406,7 +426,7 @@ function ReactPopup(props) {
406
426
  placement,
407
427
  position
408
428
  ]);
409
- react.useEffect(() => {
429
+ React.useEffect(() => {
410
430
  if (!rendered) {
411
431
  return;
412
432
  }
@@ -604,109 +624,873 @@ function resolvePopupSurfaceRect(element, contentScale = 1) {
604
624
  };
605
625
  }
606
626
 
607
- // src/components/color/style.css
608
- styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 auto;\n width: calc(24px * var(--canvas-react-content-zoom, 1));\n height: calc(24px * var(--canvas-react-content-zoom, 1));\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n margin-right: var(--canvas-react-control-padding-inline, 11px);\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n overflow: hidden;\n}\n.canvas-react-color-panel {\n padding: 12px;\n box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n position: relative;\n height: 150px;\n overflow: hidden;\n border-radius: 6px;\n cursor: crosshair;\n background-image:\n linear-gradient(\n to top,\n #000,\n transparent),\n linear-gradient(\n to right,\n #fff,\n transparent);\n touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.canvas-react-color-controls {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 12px;\n}\n.canvas-react-color-current {\n flex: 0 0 28px;\n height: 28px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 50%;\n}\n.canvas-react-color-hue {\n width: 100%;\n height: 12px;\n margin: 0;\n appearance: none;\n border-radius: 999px;\n background:\n linear-gradient(\n to right,\n #f00,\n #ff0,\n #0f0,\n #0ff,\n #00f,\n #f0f,\n #f00);\n cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n appearance: none;\n border: 2px solid #fff;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n display: grid;\n grid-template-columns: 36px 1fr;\n align-items: center;\n gap: 8px;\n margin-top: 12px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n height: 28px;\n}\n.canvas-react-color-presets {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 7px;\n margin-top: 12px;\n}\n.canvas-react-color-preset {\n width: 20px;\n height: 20px;\n padding: 0;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
609
- var DEFAULT_COLOR = "#1677ff";
610
- var PRESET_COLORS = [
611
- "#ff4d4f",
612
- "#fa8c16",
613
- "#fadb14",
614
- "#52c41a",
615
- "#13c2c2",
616
- "#1677ff",
617
- "#2f54eb",
618
- "#722ed1",
619
- "#eb2f96",
620
- "#000000",
621
- "#8c8c8c",
622
- "#ffffff"
623
- ];
624
- var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
627
+ // src/components/virtual-list/style.css
628
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-virtual-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-virtual-list-inner {\n position: relative;\n min-width: 100%;\n}\n.canvas-react-virtual-list-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
629
+ var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, ref) {
625
630
  const {
626
- autoFocus,
627
631
  className,
628
- disabled,
629
- onBlur,
630
- onChange,
631
- onFocus,
632
- onKeyDown,
633
- placeholder = "\u8BF7\u9009\u62E9\u989C\u8272",
634
- popupClassName,
635
- presets = PRESET_COLORS,
632
+ empty,
633
+ height,
634
+ innerClassName,
635
+ itemHeight,
636
+ itemKey,
637
+ items,
638
+ overscan = 2,
639
+ renderItem,
636
640
  style,
637
- value,
638
- showArrow = true,
639
- ...restProps
641
+ virtual = true
640
642
  } = props;
641
- const triggerRef = react.useRef(null);
642
- const inputRef = react.useRef(null);
643
- const popupRef = react.useRef(null);
644
- const resolvedValue = normalizeHexColor(value) ?? DEFAULT_COLOR;
645
- const [open, setOpen] = react.useState(false);
646
- const [draftValue, setDraftValue] = react.useState(resolvedValue);
647
- const [hexText, setHexText] = react.useState(resolvedValue.toUpperCase());
648
- const hsv = react.useMemo(() => hexToHsv(draftValue), [draftValue]);
649
- react.useImperativeHandle(ref, () => inputRef.current);
650
- react.useEffect(() => {
651
- setDraftValue(resolvedValue);
652
- setHexText(resolvedValue.toUpperCase());
653
- }, [resolvedValue]);
654
- react.useEffect(() => {
655
- if (autoFocus) {
656
- inputRef.current?.focus();
643
+ const hostRef = React.useRef(null);
644
+ const [scrollTop, setScrollTop] = React.useState(0);
645
+ const useVirtual = virtual && items.length * itemHeight > height;
646
+ const startIndex = useVirtual ? Math.max(0, Math.floor(scrollTop / itemHeight) - overscan) : 0;
647
+ const endIndex = useVirtual ? Math.min(
648
+ items.length - 1,
649
+ Math.ceil((scrollTop + height) / itemHeight) + overscan
650
+ ) : items.length - 1;
651
+ const visibleItems = React.useMemo(
652
+ () => items.slice(startIndex, endIndex + 1),
653
+ [endIndex, items, startIndex]
654
+ );
655
+ React.useImperativeHandle(ref, () => ({
656
+ scrollToIndex: (index) => {
657
+ const element = hostRef.current;
658
+ if (!element || index < 0) {
659
+ return;
660
+ }
661
+ const itemTop = index * itemHeight;
662
+ const itemBottom = itemTop + itemHeight;
663
+ const viewportTop = element.scrollTop;
664
+ const viewportBottom = viewportTop + height;
665
+ if (itemTop < viewportTop) {
666
+ element.scrollTop = itemTop;
667
+ return;
668
+ }
669
+ if (itemBottom > viewportBottom) {
670
+ element.scrollTop = itemBottom - height;
671
+ }
672
+ },
673
+ element: hostRef.current
674
+ }));
675
+ return /* @__PURE__ */ jsxRuntime.jsx(
676
+ "div",
677
+ {
678
+ ref: hostRef,
679
+ className: joinClassNames(`${REACT_COMPONENT_PREFIX}-virtual-list`, className),
680
+ style: { height, ...style },
681
+ onScroll: (event) => {
682
+ setScrollTop(event.currentTarget.scrollTop);
683
+ },
684
+ children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-virtual-list-empty`, children: empty ?? "\u6682\u65E0\u6570\u636E" }) : /* @__PURE__ */ jsxRuntime.jsx(
685
+ "div",
686
+ {
687
+ className: joinClassNames(
688
+ `${REACT_COMPONENT_PREFIX}-virtual-list-inner`,
689
+ innerClassName
690
+ ),
691
+ style: { height: items.length * itemHeight },
692
+ children: visibleItems.map((item, index) => {
693
+ const itemIndex = startIndex + index;
694
+ return renderItem(item, itemIndex, {
695
+ style: useVirtual ? {
696
+ position: "absolute",
697
+ top: itemIndex * itemHeight,
698
+ left: 0,
699
+ right: 0,
700
+ height: itemHeight
701
+ } : {
702
+ height: itemHeight
703
+ }
704
+ });
705
+ })
706
+ }
707
+ )
657
708
  }
658
- }, [autoFocus]);
659
- const updateValue = (nextValue) => {
660
- setDraftValue(nextValue);
661
- setHexText(nextValue.toUpperCase());
662
- onChange?.(nextValue);
663
- };
664
- const updateSaturation = (event) => {
665
- const rect = event.currentTarget.getBoundingClientRect();
666
- const saturation = clamp2((event.clientX - rect.left) / rect.width, 0, 1);
667
- const brightness = clamp2(
668
- 1 - (event.clientY - rect.top) / rect.height,
669
- 0,
670
- 1
709
+ );
710
+ });
711
+
712
+ // src/components/select/style.css
713
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n color: inherit;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
714
+ var ReactSelect = React.forwardRef(
715
+ function ReactSelect2(props, ref) {
716
+ const {
717
+ autoFocus,
718
+ allowCustomValue = false,
719
+ className,
720
+ disabled,
721
+ filterOption,
722
+ onBlur,
723
+ onChange,
724
+ onInputValueChange,
725
+ onPressEnter,
726
+ onFocus,
727
+ onKeyDown,
728
+ options,
729
+ optionHeight = 32,
730
+ listHeight = 224,
731
+ placeholder,
732
+ popupClassName,
733
+ popupZIndex,
734
+ allowClear = true,
735
+ showArrow = true,
736
+ showSearch = false,
737
+ style,
738
+ value,
739
+ virtual = true,
740
+ ...restProps
741
+ } = props;
742
+ const triggerRef = React.useRef(null);
743
+ const inputRef = React.useRef(null);
744
+ const listRef = React.useRef(null);
745
+ const skipFocusOpenRef = React.useRef(false);
746
+ const [open, setOpen] = React.useState(false);
747
+ const selectedIndex = React.useMemo(
748
+ () => options.findIndex(
749
+ (option) => String(option.value) === String(value ?? "")
750
+ ),
751
+ [options, value]
671
752
  );
672
- updateValue(hsvToHex({ ...hsv, saturation, brightness }));
673
- };
674
- return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-color-wrap`, children: [
675
- /* @__PURE__ */ jsxRuntime.jsxs(
676
- "div",
677
- {
678
- ref: triggerRef,
679
- className: joinClassNames(
680
- `${REACT_COMPONENT_PREFIX}-color`,
681
- open && `${REACT_COMPONENT_PREFIX}-color-open`,
682
- disabled && `${REACT_COMPONENT_PREFIX}-color-disabled`,
683
- className
684
- ),
685
- style,
686
- onClick: () => {
687
- if (!disabled) {
753
+ const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
754
+ const [keyword, setKeyword] = React.useState("");
755
+ const [searching, setSearching] = React.useState(false);
756
+ const searchKeyword = searching ? keyword : "";
757
+ const filteredOptions = React.useMemo(
758
+ () => filterSelectOptions(options, searchKeyword, showSearch, filterOption),
759
+ [filterOption, options, searchKeyword, showSearch]
760
+ );
761
+ const [activeIndex, setActiveIndex] = React.useState(() => {
762
+ return selectedIndex >= 0 ? selectedIndex : 0;
763
+ });
764
+ React.useImperativeHandle(ref, () => inputRef.current);
765
+ React.useEffect(() => {
766
+ if (autoFocus) {
767
+ inputRef.current?.focus();
768
+ }
769
+ }, [autoFocus]);
770
+ React.useLayoutEffect(() => {
771
+ if (open && showSearch && !searching) {
772
+ inputRef.current?.select();
773
+ }
774
+ }, [open, searching, showSearch]);
775
+ React.useEffect(() => {
776
+ const nextIndex = filteredOptions.findIndex(
777
+ (option) => String(option.value) === String(value ?? "")
778
+ );
779
+ setActiveIndex(nextIndex >= 0 ? nextIndex : 0);
780
+ }, [filteredOptions, value]);
781
+ React.useEffect(() => {
782
+ if (!open) {
783
+ return;
784
+ }
785
+ listRef.current?.scrollToIndex(activeIndex);
786
+ }, [activeIndex, listHeight, open, optionHeight]);
787
+ const selectOption = (option, trigger) => {
788
+ onChange?.(String(option.value), { trigger });
789
+ setKeyword(option.label);
790
+ setSearching(false);
791
+ setOpen(false);
792
+ inputRef.current?.focus();
793
+ };
794
+ const hasValue = value != null && String(value).length > 0;
795
+ const showClear = allowClear && !disabled && hasValue;
796
+ const handleClear = (event) => {
797
+ event.preventDefault();
798
+ event.stopPropagation();
799
+ skipFocusOpenRef.current = true;
800
+ setKeyword("");
801
+ setSearching(false);
802
+ setOpen(false);
803
+ onChange?.("", { trigger: "clear" });
804
+ inputRef.current?.blur();
805
+ };
806
+ const openSelect = () => {
807
+ setKeyword(
808
+ resolveSelectKeywordOnOpen(
809
+ selectedOption?.label ?? (allowCustomValue ? String(value ?? "") : void 0)
810
+ )
811
+ );
812
+ setSearching(false);
813
+ setOpen(true);
814
+ };
815
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-select-wrap`, children: [
816
+ /* @__PURE__ */ jsxRuntime.jsxs(
817
+ "div",
818
+ {
819
+ ref: triggerRef,
820
+ className: joinClassNames(
821
+ `${REACT_COMPONENT_PREFIX}-select`,
822
+ open && `${REACT_COMPONENT_PREFIX}-select-open`,
823
+ disabled && `${REACT_COMPONENT_PREFIX}-select-disabled`,
824
+ className
825
+ ),
826
+ style,
827
+ onClick: (event) => {
828
+ if (disabled) {
829
+ return;
830
+ }
831
+ if (event.target?.closest(
832
+ `.${REACT_COMPONENT_PREFIX}-select-clear`
833
+ )) {
834
+ return;
835
+ }
836
+ if (event.target?.closest(
837
+ `.${REACT_COMPONENT_PREFIX}-select-arrow`
838
+ )) {
839
+ return;
840
+ }
688
841
  inputRef.current?.focus();
689
- setOpen(true);
690
- }
691
- },
692
- children: [
693
- /* @__PURE__ */ jsxRuntime.jsx(
694
- "span",
695
- {
696
- className: `${REACT_COMPONENT_PREFIX}-color-preview`,
697
- style: { backgroundColor: draftValue }
842
+ if (!open) {
843
+ openSelect();
698
844
  }
699
- ),
700
- /* @__PURE__ */ jsxRuntime.jsx(
701
- ReactInput,
702
- {
703
- ...restProps,
704
- ref: inputRef,
705
- allowClear: false,
706
- disabled,
707
- readOnly: true,
708
- value: value ? draftValue.toUpperCase() : "",
709
- placeholder,
845
+ },
846
+ children: [
847
+ /* @__PURE__ */ jsxRuntime.jsx(
848
+ ReactInput,
849
+ {
850
+ ...restProps,
851
+ ref: inputRef,
852
+ allowClear: false,
853
+ disabled,
854
+ readOnly: !showSearch,
855
+ value: open && showSearch ? keyword : selectedOption?.label ?? (allowCustomValue ? String(value ?? "") : ""),
856
+ className: joinClassNames(`${REACT_COMPONENT_PREFIX}-select-input`),
857
+ wrapperClassName: `${REACT_COMPONENT_PREFIX}-select-input-wrap`,
858
+ placeholder,
859
+ onFocus: (event) => {
860
+ if (skipFocusOpenRef.current) {
861
+ skipFocusOpenRef.current = false;
862
+ onFocus?.(event);
863
+ return;
864
+ }
865
+ if (!open) {
866
+ openSelect();
867
+ }
868
+ onFocus?.(event);
869
+ },
870
+ onBlur: (event) => {
871
+ setOpen(false);
872
+ if ((!keyword.trim() || !showSearch) && selectedOption) {
873
+ setKeyword(selectedOption.label);
874
+ }
875
+ onBlur?.(event);
876
+ },
877
+ onChange: (event) => {
878
+ if (!showSearch) {
879
+ return;
880
+ }
881
+ setKeyword(event.target.value);
882
+ setSearching(true);
883
+ onInputValueChange?.(event.target.value);
884
+ setOpen(true);
885
+ },
886
+ onKeyDown: (event) => {
887
+ onKeyDown?.(event);
888
+ if (event.defaultPrevented) {
889
+ return;
890
+ }
891
+ if (disabled) {
892
+ return;
893
+ }
894
+ if (event.key === "ArrowDown") {
895
+ event.preventDefault();
896
+ if (!open) {
897
+ openSelect();
898
+ return;
899
+ }
900
+ setActiveIndex(
901
+ (prev) => Math.min(prev + 1, Math.max(filteredOptions.length - 1, 0))
902
+ );
903
+ return;
904
+ }
905
+ if (event.key === "ArrowUp") {
906
+ event.preventDefault();
907
+ if (!open) {
908
+ openSelect();
909
+ return;
910
+ }
911
+ setActiveIndex((prev) => Math.max(prev - 1, 0));
912
+ return;
913
+ }
914
+ if (event.key === "Enter") {
915
+ event.preventDefault();
916
+ if (!open) {
917
+ openSelect();
918
+ return;
919
+ }
920
+ const targetOption = resolveSelectEnterOption(filteredOptions);
921
+ if (targetOption && !targetOption.disabled) {
922
+ selectOption(targetOption, "keyboard");
923
+ } else if (allowCustomValue && keyword.trim()) {
924
+ void Promise.resolve(onPressEnter?.(keyword.trim()));
925
+ }
926
+ return;
927
+ }
928
+ if (event.key === "Escape") {
929
+ setKeyword(selectedOption?.label ?? "");
930
+ setSearching(false);
931
+ setOpen(false);
932
+ }
933
+ }
934
+ }
935
+ ),
936
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
937
+ "span",
938
+ {
939
+ className: joinClassNames(
940
+ `${REACT_COMPONENT_PREFIX}-select-actions`,
941
+ showClear && `${REACT_COMPONENT_PREFIX}-select-actions-clearable`
942
+ ),
943
+ children: [
944
+ showClear ? /* @__PURE__ */ jsxRuntime.jsx(
945
+ "button",
946
+ {
947
+ type: "button",
948
+ className: `${REACT_COMPONENT_PREFIX}-select-clear`,
949
+ "aria-label": "\u6E05\u7A7A",
950
+ tabIndex: -1,
951
+ onMouseDown: (event) => {
952
+ event.preventDefault();
953
+ event.stopPropagation();
954
+ },
955
+ onClick: handleClear,
956
+ children: /* @__PURE__ */ jsxRuntime.jsx(
957
+ "span",
958
+ {
959
+ className: `${REACT_COMPONENT_PREFIX}-select-clear-icon`
960
+ }
961
+ )
962
+ }
963
+ ) : null,
964
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
965
+ "span",
966
+ {
967
+ className: joinClassNames(
968
+ `${REACT_COMPONENT_PREFIX}-select-arrow`,
969
+ open && `${REACT_COMPONENT_PREFIX}-select-arrow-open`
970
+ )
971
+ }
972
+ ) : null
973
+ ]
974
+ }
975
+ ) : null
976
+ ]
977
+ }
978
+ ),
979
+ /* @__PURE__ */ jsxRuntime.jsx(
980
+ ReactPopup,
981
+ {
982
+ open,
983
+ anchorRef: triggerRef,
984
+ matchAnchorWidth: true,
985
+ zIndex: popupZIndex,
986
+ surfaceClassName: joinClassNames(
987
+ `${REACT_COMPONENT_PREFIX}-select-dropdown`,
988
+ popupClassName
989
+ ),
990
+ onOpenChange: setOpen,
991
+ children: /* @__PURE__ */ jsxRuntime.jsx(
992
+ ReactVirtualList,
993
+ {
994
+ ref: listRef,
995
+ items: filteredOptions,
996
+ height: Math.min(
997
+ listHeight,
998
+ Math.max(filteredOptions.length, 1) * optionHeight
999
+ ),
1000
+ itemHeight: optionHeight,
1001
+ virtual,
1002
+ className: `${REACT_COMPONENT_PREFIX}-select-list`,
1003
+ innerClassName: `${REACT_COMPONENT_PREFIX}-select-list-inner`,
1004
+ empty: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-select-empty`, children: "\u6682\u65E0\u6570\u636E" }),
1005
+ itemKey: (option) => String(option.value),
1006
+ renderItem: (option, optionIndex, meta) => {
1007
+ const isSelected = String(option.value) === String(value ?? "");
1008
+ const isActive = optionIndex === activeIndex;
1009
+ const isSearching = showSearch && searchKeyword.trim().length > 0;
1010
+ return /* @__PURE__ */ jsxRuntime.jsx(
1011
+ "div",
1012
+ {
1013
+ className: joinClassNames(
1014
+ `${REACT_COMPONENT_PREFIX}-select-option`,
1015
+ isSelected && `${REACT_COMPONENT_PREFIX}-select-option-selected`,
1016
+ isActive && `${REACT_COMPONENT_PREFIX}-select-option-active`,
1017
+ isSearching && `${REACT_COMPONENT_PREFIX}-select-option-searching`,
1018
+ option.disabled && `${REACT_COMPONENT_PREFIX}-select-option-disabled`
1019
+ ),
1020
+ style: meta.style,
1021
+ onMouseDown: (event) => {
1022
+ event.preventDefault();
1023
+ },
1024
+ onMouseEnter: () => {
1025
+ setActiveIndex(optionIndex);
1026
+ },
1027
+ onClick: () => {
1028
+ if (option.disabled) {
1029
+ return;
1030
+ }
1031
+ selectOption(option, "mouse");
1032
+ },
1033
+ children: renderSelectOptionLabel(
1034
+ option.label,
1035
+ showSearch ? searchKeyword : ""
1036
+ )
1037
+ },
1038
+ String(option.value)
1039
+ );
1040
+ }
1041
+ }
1042
+ )
1043
+ }
1044
+ )
1045
+ ] });
1046
+ }
1047
+ );
1048
+ function filterSelectOptions(options, input, showSearch, filterOption) {
1049
+ if (!showSearch) {
1050
+ return options;
1051
+ }
1052
+ const search = input.trim();
1053
+ if (!search) {
1054
+ return options;
1055
+ }
1056
+ if (filterOption) {
1057
+ return options.filter((option) => filterOption(search, option));
1058
+ }
1059
+ const normalizedSearch = search.toLowerCase();
1060
+ return options.filter((option) => {
1061
+ return option.label.toLowerCase().includes(normalizedSearch) || String(option.value).toLowerCase().includes(normalizedSearch);
1062
+ });
1063
+ }
1064
+ function resolveSelectEnterOption(options) {
1065
+ return options.find((option) => !option.disabled);
1066
+ }
1067
+ function resolveSelectKeywordOnOpen(selectedLabel) {
1068
+ return selectedLabel ?? "";
1069
+ }
1070
+ function splitSelectOptionLabel(label, input) {
1071
+ const search = input.trim();
1072
+ if (!search) {
1073
+ return [{ text: label, highlighted: false }];
1074
+ }
1075
+ const matcher = new RegExp(escapeRegExp(search), "gi");
1076
+ const parts = [];
1077
+ let cursor = 0;
1078
+ let match = matcher.exec(label);
1079
+ while (match) {
1080
+ if (match.index > cursor) {
1081
+ parts.push({
1082
+ text: label.slice(cursor, match.index),
1083
+ highlighted: false
1084
+ });
1085
+ }
1086
+ parts.push({ text: match[0], highlighted: true });
1087
+ cursor = match.index + match[0].length;
1088
+ match = matcher.exec(label);
1089
+ }
1090
+ if (cursor < label.length) {
1091
+ parts.push({ text: label.slice(cursor), highlighted: false });
1092
+ }
1093
+ return parts.length > 0 ? parts : [{ text: label, highlighted: false }];
1094
+ }
1095
+ function renderSelectOptionLabel(label, input) {
1096
+ return splitSelectOptionLabel(label, input).map(
1097
+ (part, index) => part.highlighted ? /* @__PURE__ */ jsxRuntime.jsx(
1098
+ "span",
1099
+ {
1100
+ className: `${REACT_COMPONENT_PREFIX}-select-option-highlight`,
1101
+ children: part.text
1102
+ },
1103
+ `${part.text}-${index}`
1104
+ ) : part.text
1105
+ );
1106
+ }
1107
+ function escapeRegExp(value) {
1108
+ return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
1109
+ }
1110
+ var operators = [
1111
+ { label: "\u4E0D\u7B5B\u9009", value: "none" },
1112
+ { label: "\u7B49\u4E8E", value: "eq" },
1113
+ { label: "\u4E0D\u7B49\u4E8E", value: "neq" },
1114
+ { label: "\u5927\u4E8E", value: "gt" },
1115
+ { label: "\u5927\u4E8E\u7B49\u4E8E", value: "gte" },
1116
+ { label: "\u5C0F\u4E8E", value: "lt" },
1117
+ { label: "\u5C0F\u4E8E\u7B49\u4E8E", value: "lte" },
1118
+ { label: "\u533A\u95F4", value: "between" },
1119
+ { label: "\u4E0D\u5728\u533A\u95F4", value: "notBetween" },
1120
+ { label: "\u5F00\u5934\u662F", value: "startsWith" },
1121
+ { label: "\u5F00\u5934\u4E0D\u662F", value: "notStartsWith" },
1122
+ { label: "\u7ED3\u5C3E\u662F", value: "endsWith" },
1123
+ { label: "\u7ED3\u5C3E\u4E0D\u662F", value: "notEndsWith" },
1124
+ { label: "\u5305\u542B", value: "includes" },
1125
+ { label: "\u4E0D\u5305\u542B", value: "notIncludes" },
1126
+ { label: "\u4E3A\u7A7A", value: "blank" },
1127
+ { label: "\u4E0D\u4E3A\u7A7A", value: "notBlank" }
1128
+ ];
1129
+ function ReactFilterPanel(props) {
1130
+ const { request } = props;
1131
+ const [draft, setDraft] = React.useState(request?.value ?? null);
1132
+ const [tab, setTab] = React.useState(resolveTab(request?.value));
1133
+ const [options, setOptions] = React.useState(request?.options ?? []);
1134
+ const [loading, setLoading] = React.useState(Boolean(request?.loadOptions));
1135
+ React.useEffect(() => {
1136
+ setDraft(request?.value ?? null);
1137
+ setTab(resolveTab(request?.value));
1138
+ setOptions(request?.options ?? []);
1139
+ setLoading(Boolean(request?.loadOptions));
1140
+ }, [request]);
1141
+ React.useEffect(() => {
1142
+ if (!request?.loadOptions) return;
1143
+ const controller = new AbortController();
1144
+ setLoading(true);
1145
+ void Promise.resolve(request.loadOptions(controller.signal)).then((items) => {
1146
+ if (!controller.signal.aborted) {
1147
+ setOptions(items);
1148
+ setLoading(false);
1149
+ }
1150
+ }).catch(() => {
1151
+ if (!controller.signal.aborted) {
1152
+ setOptions([]);
1153
+ setLoading(false);
1154
+ }
1155
+ });
1156
+ return () => controller.abort();
1157
+ }, [request]);
1158
+ const visibleOptions = React.useMemo(() => {
1159
+ const values = options.filter((item) => item.kind !== "all");
1160
+ const keyword = draft?.keyword.trim().toLowerCase() ?? "";
1161
+ if (!keyword) return values;
1162
+ return values.filter((item) => {
1163
+ const label = item.label.toLowerCase();
1164
+ const value = item.value.toLowerCase();
1165
+ return draft?.searchExact ? label === keyword || value === keyword : label.includes(keyword) || value.includes(keyword);
1166
+ });
1167
+ }, [draft?.keyword, draft?.searchExact, options]);
1168
+ if (!request || !draft) return null;
1169
+ const selected = new Set(draft.selectedKeys ?? []);
1170
+ const visibleKeys = visibleOptions.map((item) => item.value);
1171
+ const selectedCount = visibleKeys.filter((value) => selected.has(value)).length;
1172
+ const allChecked = visibleKeys.length > 0 && selectedCount === visibleKeys.length;
1173
+ const allCount = request.options.find((item) => item.kind === "all")?.count ?? visibleOptions.filter((item) => item.kind === "value").reduce((sum, item) => sum + item.count, 0);
1174
+ const update = (patch) => setDraft((current) => ({ ...current ?? request.value, ...patch }));
1175
+ const toggle = (keys, checked) => {
1176
+ const next = new Set(draft.selectedKeys ?? []);
1177
+ keys.forEach((key) => checked ? next.add(key) : next.delete(key));
1178
+ const value = { ...draft, filterType: "value", selectedKeys: Array.from(next) };
1179
+ setDraft(value);
1180
+ if (request.filterOptionImmediateApply) request.onApply(value);
1181
+ };
1182
+ const apply = () => {
1183
+ request.onApply({ ...draft, filterType: tab });
1184
+ request.onClose();
1185
+ };
1186
+ return /* @__PURE__ */ jsxRuntime.jsx(
1187
+ ReactPopup,
1188
+ {
1189
+ open: true,
1190
+ anchorRect: request.anchorRect,
1191
+ offset: 8,
1192
+ matchAnchorWidth: false,
1193
+ minWidth: 300,
1194
+ onOpenChange: (open) => {
1195
+ if (!open) request.onClose();
1196
+ },
1197
+ surfaceStyle: { width: 300, height: 460, padding: 12, overflow: "hidden", boxSizing: "border-box" },
1198
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
1199
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 14, fontWeight: 600, color: "#111827" }, children: [
1200
+ request.texts.title,
1201
+ " \xB7 ",
1202
+ request.columnTitle
1203
+ ] }),
1204
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
1205
+ /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: tabStyle(tab === "value"), onClick: () => {
1206
+ setTab("value");
1207
+ update({ filterType: "value" });
1208
+ }, children: request.texts.valueFilterTab }),
1209
+ /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: tabStyle(tab === "condition"), onClick: () => {
1210
+ setTab("condition");
1211
+ update({ filterType: "condition" });
1212
+ }, children: request.texts.conditionFilterTab })
1213
+ ] }),
1214
+ tab === "value" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 12, marginTop: 12, minHeight: 290, alignContent: "start", flex: "1 1 auto" }, children: [
1215
+ /* @__PURE__ */ jsxRuntime.jsx(
1216
+ ReactInput,
1217
+ {
1218
+ value: draft.keyword,
1219
+ placeholder: request.texts.searchPlaceholder,
1220
+ onChange: (event) => update({ keyword: event.target.value, filterType: "value" }),
1221
+ onPressEnter: apply,
1222
+ style: { width: "100%" }
1223
+ }
1224
+ ),
1225
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, paddingBottom: 8, borderBottom: "1px solid #f0f0f0" }, children: [
1226
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { style: checkLabelStyle, children: [
1227
+ /* @__PURE__ */ jsxRuntime.jsx(
1228
+ ReactCheckbox,
1229
+ {
1230
+ checked: allChecked,
1231
+ indeterminate: selectedCount > 0 && !allChecked,
1232
+ onChange: (event) => toggle(visibleKeys, !!event.target.checked)
1233
+ }
1234
+ ),
1235
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
1236
+ request.texts.allOptionLabel,
1237
+ " (",
1238
+ allCount,
1239
+ ")"
1240
+ ] })
1241
+ ] }),
1242
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { style: checkLabelStyle, children: [
1243
+ /* @__PURE__ */ jsxRuntime.jsx(
1244
+ ReactCheckbox,
1245
+ {
1246
+ checked: !!draft.searchExact,
1247
+ onChange: (event) => update({ searchExact: !!event.target.checked, filterType: "value" })
1248
+ }
1249
+ ),
1250
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: request.texts.exactToggleLabel })
1251
+ ] })
1252
+ ] }),
1253
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: 232, borderRadius: 8, border: "1px solid #f0f0f0", background: "#fafafa", padding: 6 }, children: loading || visibleOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: 220, display: "flex", alignItems: "center", justifyContent: "center", color: "#9ca3af", fontSize: 12 }, children: loading ? request.texts.loadingOptions : request.texts.emptyOptions }) : /* @__PURE__ */ jsxRuntime.jsx(
1254
+ ReactVirtualList,
1255
+ {
1256
+ items: visibleOptions,
1257
+ height: Math.min(220, visibleOptions.length * 40),
1258
+ itemHeight: 40,
1259
+ itemKey: (item) => item.value,
1260
+ renderItem: (item, _index, meta) => /* @__PURE__ */ jsxRuntime.jsxs(
1261
+ "label",
1262
+ {
1263
+ className: "react-list-table-filter-option",
1264
+ style: { ...optionStyle, ...meta.style },
1265
+ children: [
1266
+ /* @__PURE__ */ jsxRuntime.jsx(
1267
+ ReactCheckbox,
1268
+ {
1269
+ checked: selected.has(item.value),
1270
+ onChange: (event) => toggle([item.value], !!event.target.checked)
1271
+ }
1272
+ ),
1273
+ /* @__PURE__ */ jsxRuntime.jsx("span", { title: optionLabel(item, request.texts), style: optionTextStyle, children: optionLabel(item, request.texts) }),
1274
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#9ca3af", fontSize: 12 }, children: item.count })
1275
+ ]
1276
+ },
1277
+ item.value
1278
+ )
1279
+ }
1280
+ ) })
1281
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, display: "grid", gap: 12, minHeight: 290, alignContent: "start", flex: "1 1 auto" }, children: [
1282
+ /* @__PURE__ */ jsxRuntime.jsx(
1283
+ ConditionEditor,
1284
+ {
1285
+ label: request.texts.firstConditionLabel,
1286
+ operator: draft.conditionOperator ?? "none",
1287
+ value: draft.conditionValue ?? "",
1288
+ secondValue: draft.conditionSecondValue ?? "",
1289
+ texts: request.texts,
1290
+ onChange: (patch) => update(patch),
1291
+ onSubmit: apply
1292
+ }
1293
+ ),
1294
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1295
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldLabelStyle, children: request.texts.relationLabel }),
1296
+ /* @__PURE__ */ jsxRuntime.jsx(
1297
+ ReactSelect,
1298
+ {
1299
+ value: draft.conditionRelation === "or" ? "or" : "and",
1300
+ allowClear: false,
1301
+ options: [{ label: request.texts.relationAndLabel, value: "and" }, { label: request.texts.relationOrLabel, value: "or" }],
1302
+ onChange: (value) => update({ conditionRelation: value, filterType: "condition" }),
1303
+ style: { width: "100%" }
1304
+ }
1305
+ )
1306
+ ] }),
1307
+ /* @__PURE__ */ jsxRuntime.jsx(
1308
+ ConditionEditor,
1309
+ {
1310
+ second: true,
1311
+ label: request.texts.secondConditionLabel,
1312
+ operator: draft.secondConditionOperator ?? "none",
1313
+ value: draft.secondConditionValue ?? "",
1314
+ secondValue: draft.secondConditionSecondValue ?? "",
1315
+ texts: request.texts,
1316
+ onChange: (patch) => update(patch),
1317
+ onSubmit: apply
1318
+ }
1319
+ )
1320
+ ] }),
1321
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
1322
+ /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
1323
+ request.onReset();
1324
+ request.onClose();
1325
+ }, children: request.texts.resetAction }),
1326
+ /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(true), onClick: apply, children: request.texts.applyAction })
1327
+ ] })
1328
+ ] })
1329
+ }
1330
+ );
1331
+ }
1332
+ function ConditionEditor(props) {
1333
+ const prefix = props.second ? "secondCondition" : "condition";
1334
+ const hidesValue = ["none", "blank", "notBlank"].includes(props.operator);
1335
+ const needsSecond = ["between", "notBetween"].includes(props.operator);
1336
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1337
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldLabelStyle, children: props.label }),
1338
+ /* @__PURE__ */ jsxRuntime.jsx(
1339
+ ReactSelect,
1340
+ {
1341
+ value: props.operator,
1342
+ options: operators,
1343
+ allowClear: false,
1344
+ onChange: (value) => props.onChange({ [`${prefix}Operator`]: value, filterType: "condition" }),
1345
+ style: { width: "100%" }
1346
+ }
1347
+ ),
1348
+ hidesValue ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 8, marginTop: 8 }, children: [
1349
+ /* @__PURE__ */ jsxRuntime.jsx(
1350
+ ReactInput,
1351
+ {
1352
+ value: props.value,
1353
+ placeholder: props.texts.firstValuePlaceholder,
1354
+ onPressEnter: props.onSubmit,
1355
+ onChange: (event) => props.onChange({ [`${prefix}Value`]: event.target.value, filterType: "condition" }),
1356
+ style: { width: "100%" }
1357
+ }
1358
+ ),
1359
+ needsSecond ? /* @__PURE__ */ jsxRuntime.jsx(
1360
+ ReactInput,
1361
+ {
1362
+ value: props.secondValue,
1363
+ placeholder: props.texts.secondValuePlaceholder,
1364
+ onPressEnter: props.onSubmit,
1365
+ onChange: (event) => props.onChange({ [`${prefix}SecondValue`]: event.target.value, filterType: "condition" }),
1366
+ style: { width: "100%" }
1367
+ }
1368
+ ) : null
1369
+ ] })
1370
+ ] });
1371
+ }
1372
+ function resolveTab(value) {
1373
+ return value?.filterType === "condition" || value?.conditionOperator && value.conditionOperator !== "none" ? "condition" : "value";
1374
+ }
1375
+ function optionLabel(item, texts) {
1376
+ if (item.kind === "blank") return texts.blankOptionLabel;
1377
+ if (item.kind === "notBlank") return texts.notBlankOptionLabel;
1378
+ return item.label;
1379
+ }
1380
+ var checkLabelStyle = { display: "inline-flex", alignItems: "center", gap: 8, color: "#374151", fontSize: 14 };
1381
+ var optionStyle = { display: "flex", alignItems: "center", gap: 8, minHeight: 40, padding: "4px 8px", borderRadius: 6, color: "#374151", fontSize: 14, cursor: "pointer", boxSizing: "border-box" };
1382
+ var optionTextStyle = { display: "block", flex: "1 1 0", width: 0, minWidth: 0, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" };
1383
+ var fieldLabelStyle = { marginBottom: 6, fontSize: 12, color: "#6b7280" };
1384
+ function tabStyle(active) {
1385
+ return { flex: 1, height: 32, border: active ? "1px solid #1677ff" : "1px solid #d9d9d9", borderRadius: 6, background: active ? "#e6f4ff" : "#fff", color: active ? "#1677ff" : "#374151", cursor: "pointer" };
1386
+ }
1387
+ function actionStyle(primary) {
1388
+ return { minWidth: 72, height: 32, padding: "0 12px", borderRadius: 6, border: primary ? "1px solid #1677ff" : "1px solid #d9d9d9", background: primary ? "#1677ff" : "#fff", color: primary ? "#fff" : "#374151", cursor: "pointer" };
1389
+ }
1390
+
1391
+ // src/components/color/style.css
1392
+ styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 auto;\n width: calc(24px * var(--canvas-react-content-zoom, 1));\n height: calc(24px * var(--canvas-react-content-zoom, 1));\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n margin-right: var(--canvas-react-control-padding-inline, 11px);\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n overflow: hidden;\n}\n.canvas-react-color-panel {\n padding: 12px;\n box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n position: relative;\n height: 150px;\n overflow: hidden;\n border-radius: 6px;\n cursor: crosshair;\n background-image:\n linear-gradient(\n to top,\n #000,\n transparent),\n linear-gradient(\n to right,\n #fff,\n transparent);\n touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.canvas-react-color-controls {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 12px;\n}\n.canvas-react-color-current {\n flex: 0 0 28px;\n height: 28px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 50%;\n}\n.canvas-react-color-hue {\n width: 100%;\n height: 12px;\n margin: 0;\n appearance: none;\n border-radius: 999px;\n background:\n linear-gradient(\n to right,\n #f00,\n #ff0,\n #0f0,\n #0ff,\n #00f,\n #f0f,\n #f00);\n cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n appearance: none;\n border: 2px solid #fff;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n display: grid;\n grid-template-columns: 36px 1fr;\n align-items: center;\n gap: 8px;\n margin-top: 12px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n height: 28px;\n}\n.canvas-react-color-presets {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 7px;\n margin-top: 12px;\n}\n.canvas-react-color-preset {\n width: 20px;\n height: 20px;\n padding: 0;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
1393
+ var DEFAULT_COLOR = "#1677ff";
1394
+ var PRESET_COLORS = [
1395
+ "#ff4d4f",
1396
+ "#fa8c16",
1397
+ "#fadb14",
1398
+ "#52c41a",
1399
+ "#13c2c2",
1400
+ "#1677ff",
1401
+ "#2f54eb",
1402
+ "#722ed1",
1403
+ "#eb2f96",
1404
+ "#000000",
1405
+ "#8c8c8c",
1406
+ "#ffffff"
1407
+ ];
1408
+ var ReactColorPicker = React.forwardRef(function ReactColorPicker2(props, ref) {
1409
+ const {
1410
+ autoFocus,
1411
+ className,
1412
+ disabled,
1413
+ onBlur,
1414
+ onChange,
1415
+ onFocus,
1416
+ onKeyDown,
1417
+ placeholder = "\u8BF7\u9009\u62E9\u989C\u8272",
1418
+ popupClassName,
1419
+ presets = PRESET_COLORS,
1420
+ style,
1421
+ value,
1422
+ showArrow = true,
1423
+ ...restProps
1424
+ } = props;
1425
+ const triggerRef = React.useRef(null);
1426
+ const inputRef = React.useRef(null);
1427
+ const popupRef = React.useRef(null);
1428
+ const resolvedValue = normalizeHexColor(value) ?? DEFAULT_COLOR;
1429
+ const [open, setOpen] = React.useState(false);
1430
+ const [draftValue, setDraftValue] = React.useState(resolvedValue);
1431
+ const [hexText, setHexText] = React.useState(resolvedValue.toUpperCase());
1432
+ const hsv = React.useMemo(() => hexToHsv(draftValue), [draftValue]);
1433
+ React.useImperativeHandle(ref, () => inputRef.current);
1434
+ React.useEffect(() => {
1435
+ setDraftValue(resolvedValue);
1436
+ setHexText(resolvedValue.toUpperCase());
1437
+ }, [resolvedValue]);
1438
+ React.useEffect(() => {
1439
+ if (autoFocus) {
1440
+ inputRef.current?.focus();
1441
+ }
1442
+ }, [autoFocus]);
1443
+ const updateValue = (nextValue) => {
1444
+ setDraftValue(nextValue);
1445
+ setHexText(nextValue.toUpperCase());
1446
+ onChange?.(nextValue);
1447
+ };
1448
+ const updateSaturation = (event) => {
1449
+ const rect = event.currentTarget.getBoundingClientRect();
1450
+ const saturation = clamp2((event.clientX - rect.left) / rect.width, 0, 1);
1451
+ const brightness = clamp2(
1452
+ 1 - (event.clientY - rect.top) / rect.height,
1453
+ 0,
1454
+ 1
1455
+ );
1456
+ updateValue(hsvToHex({ ...hsv, saturation, brightness }));
1457
+ };
1458
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-color-wrap`, children: [
1459
+ /* @__PURE__ */ jsxRuntime.jsxs(
1460
+ "div",
1461
+ {
1462
+ ref: triggerRef,
1463
+ className: joinClassNames(
1464
+ `${REACT_COMPONENT_PREFIX}-color`,
1465
+ open && `${REACT_COMPONENT_PREFIX}-color-open`,
1466
+ disabled && `${REACT_COMPONENT_PREFIX}-color-disabled`,
1467
+ className
1468
+ ),
1469
+ style,
1470
+ onClick: () => {
1471
+ if (!disabled) {
1472
+ inputRef.current?.focus();
1473
+ setOpen(true);
1474
+ }
1475
+ },
1476
+ children: [
1477
+ /* @__PURE__ */ jsxRuntime.jsx(
1478
+ "span",
1479
+ {
1480
+ className: `${REACT_COMPONENT_PREFIX}-color-preview`,
1481
+ style: { backgroundColor: draftValue }
1482
+ }
1483
+ ),
1484
+ /* @__PURE__ */ jsxRuntime.jsx(
1485
+ ReactInput,
1486
+ {
1487
+ ...restProps,
1488
+ ref: inputRef,
1489
+ allowClear: false,
1490
+ disabled,
1491
+ readOnly: true,
1492
+ value: value ? draftValue.toUpperCase() : "",
1493
+ placeholder,
710
1494
  wrapperClassName: `${REACT_COMPONENT_PREFIX}-color-input-wrap`,
711
1495
  className: `${REACT_COMPONENT_PREFIX}-color-input`,
712
1496
  onFocus: (event) => {
@@ -905,7 +1689,7 @@ var MONTHS = Array.from(
905
1689
  (_, index) => String(index + 1).padStart(2, "0")
906
1690
  );
907
1691
  var WEEKDAY_LABELS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
908
- var ReactDatePicker = react.forwardRef(
1692
+ var ReactDatePicker = React.forwardRef(
909
1693
  function ReactDatePicker2(props, ref) {
910
1694
  const {
911
1695
  autoFocus,
@@ -923,47 +1707,47 @@ var ReactDatePicker = react.forwardRef(
923
1707
  value,
924
1708
  ...restProps
925
1709
  } = props;
926
- const triggerRef = react.useRef(null);
927
- const inputRef = react.useRef(null);
928
- const popupRef = react.useRef(null);
929
- const skipFocusOpenRef = react.useRef(false);
930
- const [open, setOpen] = react.useState(false);
931
- const [mode, setMode] = react.useState("date");
932
- const parsedValue = react.useMemo(() => parseDateValue(value), [value]);
933
- const [panelDate, setPanelDate] = react.useState(() => ({
1710
+ const triggerRef = React.useRef(null);
1711
+ const inputRef = React.useRef(null);
1712
+ const popupRef = React.useRef(null);
1713
+ const skipFocusOpenRef = React.useRef(false);
1714
+ const [open, setOpen] = React.useState(false);
1715
+ const [mode, setMode] = React.useState("date");
1716
+ const parsedValue = React.useMemo(() => parseDateValue(value), [value]);
1717
+ const [panelDate, setPanelDate] = React.useState(() => ({
934
1718
  day: parsedValue?.day ?? 1,
935
1719
  month: parsedValue?.month ?? (/* @__PURE__ */ new Date()).getMonth() + 1,
936
1720
  year: parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
937
1721
  }));
938
- const yearPanelStart = react.useMemo(
1722
+ const yearPanelStart = React.useMemo(
939
1723
  () => resolveDecadeStart(panelDate.year),
940
1724
  [panelDate.year]
941
1725
  );
942
- const decadePanelStart = react.useMemo(
1726
+ const decadePanelStart = React.useMemo(
943
1727
  () => Math.floor(yearPanelStart / 100) * 100,
944
1728
  [yearPanelStart]
945
1729
  );
946
- const yearItems = react.useMemo(
1730
+ const yearItems = React.useMemo(
947
1731
  () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
948
1732
  [yearPanelStart]
949
1733
  );
950
- const decadeItems = react.useMemo(
1734
+ const decadeItems = React.useMemo(
951
1735
  () => Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10),
952
1736
  [decadePanelStart]
953
1737
  );
954
- const calendarDays = react.useMemo(
1738
+ const calendarDays = React.useMemo(
955
1739
  () => buildCalendarDays(panelDate.year, panelDate.month),
956
1740
  [panelDate.month, panelDate.year]
957
1741
  );
958
1742
  const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${String(parsedValue.month).padStart(2, "0")}-${String(parsedValue.day).padStart(2, "0")}`;
959
1743
  const showClear = allowClear && !disabled && displayValue.length > 0;
960
- react.useImperativeHandle(ref, () => inputRef.current);
961
- react.useEffect(() => {
1744
+ React.useImperativeHandle(ref, () => inputRef.current);
1745
+ React.useEffect(() => {
962
1746
  if (autoFocus) {
963
1747
  inputRef.current?.focus();
964
1748
  }
965
1749
  }, [autoFocus]);
966
- react.useEffect(() => {
1750
+ React.useEffect(() => {
967
1751
  if (!open) {
968
1752
  return;
969
1753
  }
@@ -1420,7 +2204,7 @@ function resolveDecadeStart(year) {
1420
2204
  // src/components/date-range/style.css
1421
2205
  styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n@import "../time/style.css";\n.canvas-react-date-range-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-date-range {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-date-range-control {\n position: relative;\n}\n.canvas-react-date-range:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-date-range-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-date-range-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-date-range-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-date-range .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-date-range-input-wrap:hover,\n.canvas-react-date-range-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-date-range-hidden-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-date-range-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-date-range-values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-date-range-value {\n position: relative;\n display: flex;\n flex: 1 1 0;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n min-width: 0;\n height: 100%;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: 1;\n text-align: left;\n box-sizing: border-box;\n cursor: pointer;\n}\n.canvas-react-date-range-value::after {\n position: absolute;\n right: 0;\n bottom: -1px;\n left: 0;\n height: 2px;\n border-radius: 999px;\n background: transparent;\n content: "";\n transition: background-color 0.18s ease;\n}\n.canvas-react-date-range-value-active::after {\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-date-range-value-text {\n display: block;\n width: 100%;\n min-width: 0;\n height: auto;\n padding: 0;\n border: none;\n outline: none;\n overflow: hidden;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n}\n@supports (height: 1lh) {\n .canvas-react-date-range-value-text {\n height: 1lh;\n }\n}\n.canvas-react-date-range-value-text::placeholder {\n color: inherit;\n opacity: 1;\n}\n.canvas-react-date-range-separator {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-date-range-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-date-range-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-arrow,\n.canvas-react-date-range-open .canvas-react-date-range-arrow {\n border-color: #6b7280;\n}\n.canvas-react-date-range-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-date-range-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-clear,\n.canvas-react-date-range-open .canvas-react-date-range-clear,\n.canvas-react-date-range:focus-within .canvas-react-date-range-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-date-range-clear-icon,\n.canvas-react-date-range-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-date-range-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-date-range-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-date-range-dropdown {\n padding: 4px;\n}\n.canvas-react-date-range-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-date-range-calendars {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-date-range-calendar {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n}\n.canvas-react-date-range-calendar + .canvas-react-date-range-calendar {\n border-left: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-date-range-calendar .canvas-react-year-title {\n cursor: default;\n}\n.canvas-react-date-range-calendar .canvas-react-year-nav:disabled {\n cursor: default;\n opacity: 0;\n}\n.canvas-react-date-range-calendar .canvas-react-date-grid {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-date-range-cell {\n position: relative;\n border-radius: 0;\n}\n.canvas-react-date-range-cell.canvas-react-year-cell-selected {\n background: rgba(22, 119, 255, 0.12);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-date-range-cell::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: transparent;\n content: "";\n}\n.canvas-react-date-range-cell-in-range {\n background: rgba(22, 119, 255, 0.12);\n}\n.canvas-react-date-range-cell-in-range::before {\n background: transparent;\n}\n.canvas-react-date-range-cell-range-start {\n border-top-left-radius: var(--canvas-react-radius-sm);\n border-bottom-left-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start::before {\n left: 0;\n}\n.canvas-react-date-range-cell-range-end {\n border-top-right-radius: var(--canvas-react-radius-sm);\n border-bottom-right-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-end::before {\n right: 0;\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end {\n border-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end::before {\n left: 0;\n right: 0;\n}\n.canvas-react-date-range-cell-text {\n position: relative;\n z-index: 1;\n}\n.canvas-react-date-range-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 4px 4px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n');
1422
2206
  var WEEKDAY_LABELS2 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
1423
- var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props, ref) {
2207
+ var ReactDateRangePicker = React.forwardRef(function ReactDateRangePicker2(props, ref) {
1424
2208
  const {
1425
2209
  autoFocus,
1426
2210
  className,
@@ -1438,37 +2222,37 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
1438
2222
  value,
1439
2223
  ...restProps
1440
2224
  } = props;
1441
- const triggerRef = react.useRef(null);
1442
- const startInputRef = react.useRef(null);
1443
- const endInputRef = react.useRef(null);
1444
- const popupRef = react.useRef(null);
1445
- const skipFocusOpenRef = react.useRef(false);
1446
- const [open, setOpen] = react.useState(false);
1447
- const [activePart, setActivePart] = react.useState("start");
1448
- const [draftRange, setDraftRange] = react.useState(
2225
+ const triggerRef = React.useRef(null);
2226
+ const startInputRef = React.useRef(null);
2227
+ const endInputRef = React.useRef(null);
2228
+ const popupRef = React.useRef(null);
2229
+ const skipFocusOpenRef = React.useRef(false);
2230
+ const [open, setOpen] = React.useState(false);
2231
+ const [activePart, setActivePart] = React.useState("start");
2232
+ const [draftRange, setDraftRange] = React.useState(
1449
2233
  () => parseDateRangeValue(value)
1450
2234
  );
1451
- const [hoverDate, setHoverDate] = react.useState(null);
1452
- const [leftPanel, setLeftPanel] = react.useState(
2235
+ const [hoverDate, setHoverDate] = React.useState(null);
2236
+ const [leftPanel, setLeftPanel] = React.useState(
1453
2237
  () => resolveInitialPanelMonth(parseDateRangeValue(value))
1454
2238
  );
1455
- const rightPanel = react.useMemo(() => shiftMonth2(leftPanel, 1), [leftPanel]);
1456
- const leftCalendarDays = react.useMemo(
2239
+ const rightPanel = React.useMemo(() => shiftMonth2(leftPanel, 1), [leftPanel]);
2240
+ const leftCalendarDays = React.useMemo(
1457
2241
  () => buildCalendarDays2(leftPanel.year, leftPanel.month),
1458
2242
  [leftPanel.month, leftPanel.year]
1459
2243
  );
1460
- const rightCalendarDays = react.useMemo(
2244
+ const rightCalendarDays = React.useMemo(
1461
2245
  () => buildCalendarDays2(rightPanel.year, rightPanel.month),
1462
2246
  [rightPanel.month, rightPanel.year]
1463
2247
  );
1464
2248
  const showClear = allowClear && !disabled && (draftRange.start.length > 0 || draftRange.end.length > 0);
1465
- react.useImperativeHandle(ref, () => startInputRef.current);
1466
- react.useEffect(() => {
2249
+ React.useImperativeHandle(ref, () => startInputRef.current);
2250
+ React.useEffect(() => {
1467
2251
  if (autoFocus) {
1468
2252
  startInputRef.current?.focus();
1469
2253
  }
1470
2254
  }, [autoFocus]);
1471
- react.useEffect(() => {
2255
+ React.useEffect(() => {
1472
2256
  const nextRange = parseDateRangeValue(value);
1473
2257
  setDraftRange(nextRange);
1474
2258
  setLeftPanel(resolveInitialPanelMonth(nextRange));
@@ -2155,9 +2939,9 @@ function TimeSelectionPanel(props) {
2155
2939
  }
2156
2940
  function TimeColumn(props) {
2157
2941
  const { onSelect, options, selectedValue } = props;
2158
- const listRef = react.useRef(null);
2159
- const scrollTimerRef = react.useRef(null);
2160
- const ignoreScrollRef = react.useRef(false);
2942
+ const listRef = React.useRef(null);
2943
+ const scrollTimerRef = React.useRef(null);
2944
+ const ignoreScrollRef = React.useRef(false);
2161
2945
  const scrollToValue = (nextValue, behavior) => {
2162
2946
  const listElement = listRef.current;
2163
2947
  if (!listElement) {
@@ -2194,14 +2978,14 @@ function TimeColumn(props) {
2194
2978
  ignoreScrollRef.current = false;
2195
2979
  }, behavior === "smooth" ? 180 : 120);
2196
2980
  };
2197
- react.useEffect(() => {
2981
+ React.useEffect(() => {
2198
2982
  return () => {
2199
2983
  if (scrollTimerRef.current != null) {
2200
2984
  window.clearTimeout(scrollTimerRef.current);
2201
2985
  }
2202
2986
  };
2203
2987
  }, []);
2204
- react.useEffect(() => {
2988
+ React.useEffect(() => {
2205
2989
  const listElement = listRef.current;
2206
2990
  if (!listElement) {
2207
2991
  return;
@@ -2322,7 +3106,7 @@ var MONTHS2 = Array.from(
2322
3106
  (_, index) => String(index + 1).padStart(2, "0")
2323
3107
  );
2324
3108
  var WEEKDAY_LABELS3 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
2325
- var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props, ref) {
3109
+ var ReactDateTimePicker = React.forwardRef(function ReactDateTimePicker2(props, ref) {
2326
3110
  const {
2327
3111
  autoFocus,
2328
3112
  className,
@@ -2339,45 +3123,45 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
2339
3123
  value,
2340
3124
  ...restProps
2341
3125
  } = props;
2342
- const triggerRef = react.useRef(null);
2343
- const inputRef = react.useRef(null);
2344
- const popupRef = react.useRef(null);
2345
- const skipFocusOpenRef = react.useRef(false);
2346
- const [open, setOpen] = react.useState(false);
2347
- const [mode, setMode] = react.useState("date");
2348
- const parsedValue = react.useMemo(() => parseDateTimeValue(value), [value]);
2349
- const [draftDateTime, setDraftDateTime] = react.useState(
3126
+ const triggerRef = React.useRef(null);
3127
+ const inputRef = React.useRef(null);
3128
+ const popupRef = React.useRef(null);
3129
+ const skipFocusOpenRef = React.useRef(false);
3130
+ const [open, setOpen] = React.useState(false);
3131
+ const [mode, setMode] = React.useState("date");
3132
+ const parsedValue = React.useMemo(() => parseDateTimeValue(value), [value]);
3133
+ const [draftDateTime, setDraftDateTime] = React.useState(
2350
3134
  () => createDraftDateTime(parsedValue)
2351
3135
  );
2352
- const yearPanelStart = react.useMemo(
3136
+ const yearPanelStart = React.useMemo(
2353
3137
  () => resolveDecadeStart2(draftDateTime.year),
2354
3138
  [draftDateTime.year]
2355
3139
  );
2356
- const decadePanelStart = react.useMemo(
3140
+ const decadePanelStart = React.useMemo(
2357
3141
  () => Math.floor(yearPanelStart / 100) * 100,
2358
3142
  [yearPanelStart]
2359
3143
  );
2360
- const yearItems = react.useMemo(
3144
+ const yearItems = React.useMemo(
2361
3145
  () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
2362
3146
  [yearPanelStart]
2363
3147
  );
2364
- const decadeItems = react.useMemo(
3148
+ const decadeItems = React.useMemo(
2365
3149
  () => Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10),
2366
3150
  [decadePanelStart]
2367
3151
  );
2368
- const calendarDays = react.useMemo(
3152
+ const calendarDays = React.useMemo(
2369
3153
  () => buildCalendarDays3(draftDateTime.year, draftDateTime.month),
2370
3154
  [draftDateTime.month, draftDateTime.year]
2371
3155
  );
2372
3156
  const displayValue = parsedValue == null ? "" : `${formatDateValue(parsedValue)} ${formatTimeValue(parsedValue)}`;
2373
3157
  const showClear = allowClear && !disabled && displayValue.length > 0;
2374
- react.useImperativeHandle(ref, () => inputRef.current);
2375
- react.useEffect(() => {
3158
+ React.useImperativeHandle(ref, () => inputRef.current);
3159
+ React.useEffect(() => {
2376
3160
  if (autoFocus) {
2377
3161
  inputRef.current?.focus();
2378
3162
  }
2379
3163
  }, [autoFocus]);
2380
- react.useEffect(() => {
3164
+ React.useEffect(() => {
2381
3165
  if (!open) {
2382
3166
  return;
2383
3167
  }
@@ -2960,7 +3744,7 @@ var MONTHS3 = Array.from(
2960
3744
  (_, index) => String(index + 1).padStart(2, "0")
2961
3745
  );
2962
3746
  var WEEKDAY_LABELS4 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
2963
- var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicker2(props, ref) {
3747
+ var ReactDateTimeRangePicker = React.forwardRef(function ReactDateTimeRangePicker2(props, ref) {
2964
3748
  const {
2965
3749
  autoFocus,
2966
3750
  className,
@@ -2978,64 +3762,64 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
2978
3762
  value,
2979
3763
  ...restProps
2980
3764
  } = props;
2981
- const triggerRef = react.useRef(null);
2982
- const startInputRef = react.useRef(null);
2983
- const endInputRef = react.useRef(null);
2984
- const popupRef = react.useRef(null);
2985
- const skipFocusOpenRef = react.useRef(false);
2986
- const [open, setOpen] = react.useState(false);
2987
- const [activePart, setActivePart] = react.useState("start");
2988
- const [mode, setMode] = react.useState(
3765
+ const triggerRef = React.useRef(null);
3766
+ const startInputRef = React.useRef(null);
3767
+ const endInputRef = React.useRef(null);
3768
+ const popupRef = React.useRef(null);
3769
+ const skipFocusOpenRef = React.useRef(false);
3770
+ const [open, setOpen] = React.useState(false);
3771
+ const [activePart, setActivePart] = React.useState("start");
3772
+ const [mode, setMode] = React.useState(
2989
3773
  "date"
2990
3774
  );
2991
- const [draftRange, setDraftRange] = react.useState(
3775
+ const [draftRange, setDraftRange] = React.useState(
2992
3776
  () => parseDateTimeRangeValue(value)
2993
3777
  );
2994
- const activeValue = react.useMemo(
3778
+ const activeValue = React.useMemo(
2995
3779
  () => activePart === "start" ? draftRange.start : draftRange.end,
2996
3780
  [activePart, draftRange.end, draftRange.start]
2997
3781
  );
2998
- const parsedActiveValue = react.useMemo(
3782
+ const parsedActiveValue = React.useMemo(
2999
3783
  () => parseDateTimeValue2(activeValue),
3000
3784
  [activeValue]
3001
3785
  );
3002
- const [draftDateTime, setDraftDateTime] = react.useState(
3786
+ const [draftDateTime, setDraftDateTime] = React.useState(
3003
3787
  () => createDraftDateTime2(parsedActiveValue)
3004
3788
  );
3005
3789
  const showClear = allowClear && !disabled && (draftRange.start.length > 0 || draftRange.end.length > 0);
3006
- const yearPanelStart = react.useMemo(
3790
+ const yearPanelStart = React.useMemo(
3007
3791
  () => resolveDecadeStart3(draftDateTime.year),
3008
3792
  [draftDateTime.year]
3009
3793
  );
3010
- const decadePanelStart = react.useMemo(
3794
+ const decadePanelStart = React.useMemo(
3011
3795
  () => Math.floor(yearPanelStart / 100) * 100,
3012
3796
  [yearPanelStart]
3013
3797
  );
3014
- const yearItems = react.useMemo(
3798
+ const yearItems = React.useMemo(
3015
3799
  () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
3016
3800
  [yearPanelStart]
3017
3801
  );
3018
- const decadeItems = react.useMemo(
3802
+ const decadeItems = React.useMemo(
3019
3803
  () => Array.from(
3020
3804
  { length: 12 },
3021
3805
  (_, index) => decadePanelStart - 10 + index * 10
3022
3806
  ),
3023
3807
  [decadePanelStart]
3024
3808
  );
3025
- const calendarDays = react.useMemo(
3809
+ const calendarDays = React.useMemo(
3026
3810
  () => buildCalendarDays4(draftDateTime.year, draftDateTime.month),
3027
3811
  [draftDateTime.month, draftDateTime.year]
3028
3812
  );
3029
- react.useImperativeHandle(ref, () => startInputRef.current);
3030
- react.useEffect(() => {
3813
+ React.useImperativeHandle(ref, () => startInputRef.current);
3814
+ React.useEffect(() => {
3031
3815
  if (autoFocus) {
3032
3816
  startInputRef.current?.focus();
3033
3817
  }
3034
3818
  }, [autoFocus]);
3035
- react.useEffect(() => {
3819
+ React.useEffect(() => {
3036
3820
  setDraftRange(parseDateTimeRangeValue(value));
3037
3821
  }, [rangeSeparator, value]);
3038
- react.useEffect(() => {
3822
+ React.useEffect(() => {
3039
3823
  if (!open) {
3040
3824
  return;
3041
3825
  }
@@ -3765,24 +4549,183 @@ function compareDateTimeValue(left, right) {
3765
4549
  return left.localeCompare(right);
3766
4550
  }
3767
4551
 
4552
+ // src/components/number-input/style.css
4553
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-number-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-number-input::-webkit-outer-spin-button,\n.canvas-react-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-number-input-suffix {\n display: inline-flex;\n align-items: center;\n padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-number-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover .canvas-react-number-input-clear,\n.canvas-react-number-input-affix-wrapper:focus-within .canvas-react-number-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-number-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-number-input-clear-icon,\n.canvas-react-number-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-number-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-number-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
4554
+ var ReactNumberInput = React.forwardRef(
4555
+ function ReactNumberInput2(props, ref) {
4556
+ const {
4557
+ className,
4558
+ disabled,
4559
+ onBlur,
4560
+ onChange,
4561
+ onKeyDown,
4562
+ onPressEnter,
4563
+ style,
4564
+ value,
4565
+ ...restProps
4566
+ } = props;
4567
+ const [inputValue, setInputValue] = React.useState(toDisplayValue(value));
4568
+ React.useEffect(() => {
4569
+ setInputValue(toDisplayValue(value));
4570
+ }, [value]);
4571
+ return /* @__PURE__ */ jsxRuntime.jsx(
4572
+ "span",
4573
+ {
4574
+ className: joinClassNames(
4575
+ `${REACT_COMPONENT_PREFIX}-number-input-affix-wrapper`,
4576
+ disabled && `${REACT_COMPONENT_PREFIX}-number-input-affix-wrapper-disabled`
4577
+ ),
4578
+ style,
4579
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4580
+ "input",
4581
+ {
4582
+ ...restProps,
4583
+ ref,
4584
+ disabled,
4585
+ type: "number",
4586
+ value: inputValue,
4587
+ className: joinClassNames(
4588
+ `${REACT_COMPONENT_PREFIX}-number-input`,
4589
+ className
4590
+ ),
4591
+ onChange: (event) => {
4592
+ const nextText = event.target.value;
4593
+ setInputValue(nextText);
4594
+ onChange?.(parseNumberValue(nextText));
4595
+ },
4596
+ onBlur: (event) => {
4597
+ setInputValue(toDisplayValue(parseNumberValue(event.target.value)));
4598
+ onBlur?.(event);
4599
+ },
4600
+ onKeyDown: (event) => {
4601
+ onKeyDown?.(event);
4602
+ if (event.key === "Enter") {
4603
+ onPressEnter?.(event);
4604
+ }
4605
+ }
4606
+ }
4607
+ )
4608
+ }
4609
+ );
4610
+ }
4611
+ );
4612
+ function parseNumberValue(value) {
4613
+ if (value.trim().length === 0) {
4614
+ return null;
4615
+ }
4616
+ const nextValue = Number(value);
4617
+ return Number.isFinite(nextValue) ? nextValue : null;
4618
+ }
4619
+ function toDisplayValue(value) {
4620
+ return value == null ? "" : String(value);
4621
+ }
4622
+
4623
+ // src/components/input-range/style.css
4624
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-input-range {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n overflow: hidden;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-range:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-range:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-range-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input-range > .canvas-react-number-input-affix-wrapper,\n.canvas-react-input-range > .canvas-react-number-input-affix-wrapper:hover,\n.canvas-react-input-range > .canvas-react-number-input-affix-wrapper:focus-within {\n flex: 1 1 0;\n width: 0;\n height: 100%;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n}\n.canvas-react-input-range-separator {\n flex: 0 0 auto;\n color: #9ca3af;\n line-height: 1;\n}\n');
4625
+ var ReactInputRange = React.forwardRef(function ReactInputRange2(props, ref) {
4626
+ const {
4627
+ autoFocus,
4628
+ className,
4629
+ disabled,
4630
+ max,
4631
+ min,
4632
+ onBlur,
4633
+ onChange,
4634
+ onFocus,
4635
+ onKeyDown,
4636
+ onPressEnter,
4637
+ placeholder = ["\u6700\u5C0F\u503C", "\u6700\u5927\u503C"],
4638
+ rangeSeparator = "~",
4639
+ step,
4640
+ style,
4641
+ value = [null, null],
4642
+ ...restProps
4643
+ } = props;
4644
+ const rootRef = React.useRef(null);
4645
+ const startInputRef = React.useRef(null);
4646
+ React.useImperativeHandle(ref, () => startInputRef.current);
4647
+ React.useEffect(() => {
4648
+ if (autoFocus) {
4649
+ startInputRef.current?.focus();
4650
+ }
4651
+ }, [autoFocus]);
4652
+ const handleBlur = (event) => {
4653
+ const nextTarget = event.relatedTarget;
4654
+ if (nextTarget && rootRef.current?.contains(nextTarget)) {
4655
+ return;
4656
+ }
4657
+ onBlur?.(event);
4658
+ };
4659
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4660
+ "span",
4661
+ {
4662
+ ref: rootRef,
4663
+ className: joinClassNames(
4664
+ `${REACT_COMPONENT_PREFIX}-input-range`,
4665
+ disabled && `${REACT_COMPONENT_PREFIX}-input-range-disabled`,
4666
+ className
4667
+ ),
4668
+ style,
4669
+ children: [
4670
+ /* @__PURE__ */ jsxRuntime.jsx(
4671
+ ReactNumberInput,
4672
+ {
4673
+ ...restProps,
4674
+ ref: startInputRef,
4675
+ value: value[0],
4676
+ disabled,
4677
+ min,
4678
+ max,
4679
+ step,
4680
+ placeholder: placeholder[0],
4681
+ onChange: (nextValue) => onChange?.([nextValue, value[1]]),
4682
+ onFocus,
4683
+ onBlur: handleBlur,
4684
+ onKeyDown,
4685
+ onPressEnter
4686
+ }
4687
+ ),
4688
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-range-separator`, children: rangeSeparator }),
4689
+ /* @__PURE__ */ jsxRuntime.jsx(
4690
+ ReactNumberInput,
4691
+ {
4692
+ ...restProps,
4693
+ value: value[1],
4694
+ disabled,
4695
+ min,
4696
+ max,
4697
+ step,
4698
+ placeholder: placeholder[1],
4699
+ onChange: (nextValue) => onChange?.([value[0], nextValue]),
4700
+ onFocus,
4701
+ onBlur: handleBlur,
4702
+ onKeyDown,
4703
+ onPressEnter
4704
+ }
4705
+ )
4706
+ ]
4707
+ }
4708
+ );
4709
+ });
4710
+
3768
4711
  // src/components/image-preview/style.css
3769
4712
  styleInject(".canvas-react-image-preview {\n position: fixed;\n inset: 0;\n z-index: 1100;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px;\n background: rgba(0, 0, 0, 0.72);\n backdrop-filter: blur(2px);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.canvas-react-image-preview-entered {\n opacity: 1;\n}\n.canvas-react-image-preview-leave {\n opacity: 0;\n}\n.canvas-react-image-preview-image {\n max-width: 90vw;\n max-height: 86vh;\n object-fit: contain;\n border-radius: 4px;\n box-shadow: 0 12px 48px rgba(0, 0, 0, 0.32);\n opacity: 0;\n transition: transform 0.2s ease, opacity 0.2s ease;\n user-select: none;\n}\n.canvas-react-image-preview-entered .canvas-react-image-preview-image {\n opacity: 1;\n}\n.canvas-react-image-preview-leave .canvas-react-image-preview-image {\n opacity: 0;\n}\n.canvas-react-image-preview-close {\n position: fixed;\n top: 20px;\n right: 24px;\n width: 40px;\n height: 40px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n color: #fff;\n background: rgba(255, 255, 255, 0.14);\n font: 30px/38px sans-serif;\n cursor: pointer;\n}\n.canvas-react-image-preview-toolbar {\n position: fixed;\n bottom: 28px;\n left: 50%;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 10px;\n color: #fff;\n background: rgba(0, 0, 0, 0.64);\n border-radius: 22px;\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);\n transform: translateX(-50%);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.canvas-react-image-preview-entered .canvas-react-image-preview-toolbar {\n opacity: 1;\n}\n.canvas-react-image-preview-tool {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 0;\n border-radius: 6px;\n color: inherit;\n background: transparent;\n font: 20px/1 sans-serif;\n cursor: pointer;\n}\n.canvas-react-image-preview-tool:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.16);\n}\n.canvas-react-image-preview-tool:disabled {\n color: rgba(255, 255, 255, 0.35);\n cursor: not-allowed;\n}\n.canvas-react-image-preview-scale {\n min-width: 48px;\n color: rgba(255, 255, 255, 0.88);\n font-size: 12px;\n text-align: center;\n}\n");
3770
4713
  function ReactImagePreview(props) {
3771
4714
  const { open, src, alt = "preview", onClose } = props;
3772
- const [scale, setScale] = react.useState(1);
3773
- const [rotation, setRotation] = react.useState(0);
3774
- const [flipX, setFlipX] = react.useState(false);
3775
- const [flipY, setFlipY] = react.useState(false);
3776
- const [motionState, setMotionState] = react.useState(
4715
+ const [scale, setScale] = React.useState(1);
4716
+ const [rotation, setRotation] = React.useState(0);
4717
+ const [flipX, setFlipX] = React.useState(false);
4718
+ const [flipY, setFlipY] = React.useState(false);
4719
+ const [motionState, setMotionState] = React.useState(
3777
4720
  "enter"
3778
4721
  );
3779
- const closeTimerRef = react.useRef(null);
4722
+ const closeTimerRef = React.useRef(null);
3780
4723
  const requestClose = () => {
3781
4724
  if (motionState === "leave") return;
3782
4725
  setMotionState("leave");
3783
4726
  closeTimerRef.current = window.setTimeout(onClose, 200);
3784
4727
  };
3785
- react.useEffect(() => {
4728
+ React.useEffect(() => {
3786
4729
  if (!open) return;
3787
4730
  setScale(1);
3788
4731
  setRotation(0);
@@ -3792,7 +4735,7 @@ function ReactImagePreview(props) {
3792
4735
  const frame = requestAnimationFrame(() => setMotionState("entered"));
3793
4736
  return () => cancelAnimationFrame(frame);
3794
4737
  }, [open, src]);
3795
- react.useEffect(() => {
4738
+ React.useEffect(() => {
3796
4739
  if (!open) return;
3797
4740
  const handleKeyDown = (event) => {
3798
4741
  if (event.key === "Escape") requestClose();
@@ -3800,7 +4743,7 @@ function ReactImagePreview(props) {
3800
4743
  window.addEventListener("keydown", handleKeyDown);
3801
4744
  return () => window.removeEventListener("keydown", handleKeyDown);
3802
4745
  }, [open, motionState]);
3803
- react.useEffect(
4746
+ React.useEffect(
3804
4747
  () => () => {
3805
4748
  if (closeTimerRef.current != null) {
3806
4749
  window.clearTimeout(closeTimerRef.current);
@@ -3929,7 +4872,7 @@ var MONTHS4 = Array.from(
3929
4872
  { length: 12 },
3930
4873
  (_, index) => String(index + 1).padStart(2, "0")
3931
4874
  );
3932
- var ReactMonthPicker = react.forwardRef(
4875
+ var ReactMonthPicker = React.forwardRef(
3933
4876
  function ReactMonthPicker2(props, ref) {
3934
4877
  const {
3935
4878
  autoFocus,
@@ -3947,36 +4890,36 @@ var ReactMonthPicker = react.forwardRef(
3947
4890
  value,
3948
4891
  ...restProps
3949
4892
  } = props;
3950
- const triggerRef = react.useRef(null);
3951
- const inputRef = react.useRef(null);
3952
- const popupRef = react.useRef(null);
3953
- const skipFocusOpenRef = react.useRef(false);
3954
- const [open, setOpen] = react.useState(false);
3955
- const [mode, setMode] = react.useState("month");
3956
- const parsedValue = react.useMemo(() => parseMonthValue(value), [value]);
3957
- const [panelYear, setPanelYear] = react.useState(
4893
+ const triggerRef = React.useRef(null);
4894
+ const inputRef = React.useRef(null);
4895
+ const popupRef = React.useRef(null);
4896
+ const skipFocusOpenRef = React.useRef(false);
4897
+ const [open, setOpen] = React.useState(false);
4898
+ const [mode, setMode] = React.useState("month");
4899
+ const parsedValue = React.useMemo(() => parseMonthValue(value), [value]);
4900
+ const [panelYear, setPanelYear] = React.useState(
3958
4901
  () => parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
3959
4902
  );
3960
- const yearPanelStart = react.useMemo(() => resolveDecadeStart4(panelYear), [panelYear]);
3961
- const decadePanelStart = react.useMemo(
4903
+ const yearPanelStart = React.useMemo(() => resolveDecadeStart4(panelYear), [panelYear]);
4904
+ const decadePanelStart = React.useMemo(
3962
4905
  () => Math.floor(yearPanelStart / 100) * 100,
3963
4906
  [yearPanelStart]
3964
4907
  );
3965
- const yearItems = react.useMemo(() => {
4908
+ const yearItems = React.useMemo(() => {
3966
4909
  return Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index);
3967
4910
  }, [yearPanelStart]);
3968
- const decadeItems = react.useMemo(() => {
4911
+ const decadeItems = React.useMemo(() => {
3969
4912
  return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
3970
4913
  }, [decadePanelStart]);
3971
4914
  const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${parsedValue.month}`;
3972
4915
  const showClear = allowClear && !disabled && displayValue.length > 0;
3973
- react.useImperativeHandle(ref, () => inputRef.current);
3974
- react.useEffect(() => {
4916
+ React.useImperativeHandle(ref, () => inputRef.current);
4917
+ React.useEffect(() => {
3975
4918
  if (autoFocus) {
3976
4919
  inputRef.current?.focus();
3977
4920
  }
3978
4921
  }, [autoFocus]);
3979
- react.useEffect(() => {
4922
+ React.useEffect(() => {
3980
4923
  if (!open) {
3981
4924
  return;
3982
4925
  }
@@ -4318,711 +5261,593 @@ function parseMonthValue(value) {
4318
5261
  function resolveDecadeStart4(year) {
4319
5262
  return Math.floor(year / 10) * 10;
4320
5263
  }
4321
-
4322
- // src/components/number-input/style.css
4323
- styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-number-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-number-input::-webkit-outer-spin-button,\n.canvas-react-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-number-input-suffix {\n display: inline-flex;\n align-items: center;\n padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-number-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover .canvas-react-number-input-clear,\n.canvas-react-number-input-affix-wrapper:focus-within .canvas-react-number-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-number-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-number-input-clear-icon,\n.canvas-react-number-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-number-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-number-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
4324
- var ReactNumberInput = react.forwardRef(
4325
- function ReactNumberInput2(props, ref) {
4326
- const {
4327
- className,
4328
- disabled,
4329
- onBlur,
4330
- onChange,
4331
- onKeyDown,
4332
- onPressEnter,
4333
- style,
4334
- value,
4335
- ...restProps
4336
- } = props;
4337
- const [inputValue, setInputValue] = react.useState(toDisplayValue(value));
4338
- react.useEffect(() => {
4339
- setInputValue(toDisplayValue(value));
4340
- }, [value]);
4341
- return /* @__PURE__ */ jsxRuntime.jsx(
4342
- "span",
4343
- {
4344
- className: joinClassNames(
4345
- `${REACT_COMPONENT_PREFIX}-number-input-affix-wrapper`,
4346
- disabled && `${REACT_COMPONENT_PREFIX}-number-input-affix-wrapper-disabled`
4347
- ),
4348
- style,
4349
- children: /* @__PURE__ */ jsxRuntime.jsx(
4350
- "input",
4351
- {
4352
- ...restProps,
4353
- ref,
4354
- disabled,
4355
- type: "number",
4356
- value: inputValue,
4357
- className: joinClassNames(
4358
- `${REACT_COMPONENT_PREFIX}-number-input`,
4359
- className
4360
- ),
4361
- onChange: (event) => {
4362
- const nextText = event.target.value;
4363
- setInputValue(nextText);
4364
- onChange?.(parseNumberValue(nextText));
4365
- },
4366
- onBlur: (event) => {
4367
- setInputValue(toDisplayValue(parseNumberValue(event.target.value)));
4368
- onBlur?.(event);
4369
- },
4370
- onKeyDown: (event) => {
4371
- onKeyDown?.(event);
4372
- if (event.key === "Enter") {
4373
- onPressEnter?.(event);
4374
- }
4375
- }
4376
- }
4377
- )
4378
- }
4379
- );
5264
+ var compatibleIdSeed = 0;
5265
+ function useCompatibleId(prefix = "canvas-react-id") {
5266
+ const nativeUseId = React__namespace.useId;
5267
+ const fallbackIdRef = React__namespace.useRef();
5268
+ if (!fallbackIdRef.current) {
5269
+ compatibleIdSeed += 1;
5270
+ fallbackIdRef.current = `${prefix}-${compatibleIdSeed}`;
4380
5271
  }
4381
- );
4382
- function parseNumberValue(value) {
4383
- if (value.trim().length === 0) {
4384
- return null;
4385
- }
4386
- const nextValue = Number(value);
4387
- return Number.isFinite(nextValue) ? nextValue : null;
4388
- }
4389
- function toDisplayValue(value) {
4390
- return value == null ? "" : String(value);
5272
+ return nativeUseId ? nativeUseId() : fallbackIdRef.current;
4391
5273
  }
4392
5274
 
4393
- // src/components/input-number/style.css
4394
- styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n box-sizing: border-box;\n display: inline-flex;\n align-items: stretch;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n overflow: hidden;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n position: relative;\n display: flex;\n flex: 0 0 28px;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n color: var(--canvas-react-color-primary);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n color: #c4c7cf;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n position: relative;\n display: block;\n width: 10px;\n height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n background: currentColor;\n border-radius: 1px;\n transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n width: 10px;\n height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n width: 1.5px;\n height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-input-number-input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0 8px;\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n text-align: center;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n flex: 0 0 auto;\n padding-right: 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n user-select: none;\n}\n');
4395
- var ReactInputNumber = react.forwardRef(
4396
- function ReactInputNumber2(props, ref) {
4397
- const {
4398
- addonAfter,
4399
- className,
4400
- defaultValue = null,
4401
- disabled,
4402
- formatter,
4403
- max,
4404
- min,
4405
- onBlur,
4406
- onChange,
4407
- onCommit,
4408
- onFocus,
4409
- onKeyDown,
4410
- parser,
4411
- precision,
4412
- step = 1,
4413
- style,
4414
- value,
4415
- ...restProps
4416
- } = props;
4417
- const isControlled = value !== void 0;
4418
- const [innerValue, setInnerValue] = react.useState(
4419
- isControlled ? value ?? null : defaultValue
4420
- );
4421
- const currentValue = isControlled ? value ?? null : innerValue;
4422
- const [draftText, setDraftText] = react.useState(
4423
- formatDisplayValue(
4424
- currentValue,
4425
- formatter,
4426
- resolvePrecision(precision, step),
4427
- step
4428
- )
4429
- );
4430
- const [focused, setFocused] = react.useState(false);
4431
- const resolvedPrecision = react.useMemo(
4432
- () => resolvePrecision(precision, step),
4433
- [precision, step]
4434
- );
4435
- react.useEffect(() => {
4436
- if (!focused) {
4437
- setDraftText(
4438
- formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
4439
- );
4440
- }
4441
- }, [currentValue, focused, formatter, resolvedPrecision, step]);
4442
- const commitValue = (nextValue) => {
4443
- const normalized = normalizeNumberValue(nextValue, {
4444
- min,
4445
- max,
4446
- precision: resolvedPrecision
4447
- });
4448
- if (!isControlled) {
4449
- setInnerValue(normalized);
5275
+ // src/components/modal/style.css
5276
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-modal-root,\n.canvas-react-modal-root * {\n box-sizing: border-box;\n}\n.canvas-react-modal-root {\n position: fixed;\n inset: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n line-height: 1.5;\n}\n.canvas-react-modal-mask {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n}\n.canvas-react-modal-wrap {\n position: absolute;\n inset: 0;\n overflow: auto;\n padding: 100px 24px 24px;\n pointer-events: none;\n}\n.canvas-react-modal-root-centered .canvas-react-modal-wrap {\n display: flex;\n align-items: center;\n padding-top: 24px;\n}\n.canvas-react-modal-root-fullscreen .canvas-react-modal-wrap {\n padding: 0;\n overflow: hidden;\n}\n.canvas-react-modal {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 520px;\n max-width: calc(100vw - 48px);\n max-height: calc(100vh - 124px);\n margin: 0 auto;\n overflow: hidden;\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #ffffff);\n box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);\n outline: none;\n pointer-events: auto;\n}\n.canvas-react-modal-root-centered .canvas-react-modal {\n max-height: calc(100vh - 48px);\n}\n.canvas-react-modal.canvas-react-modal-fullscreen {\n width: 100% !important;\n max-width: none;\n height: 100%;\n max-height: none;\n border-radius: 0;\n}\n.canvas-react-modal-header {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n min-height: 56px;\n padding: 0 16px 0 24px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-title {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--canvas-react-color-text);\n font-size: 16px;\n font-weight: 600;\n overflow-wrap: anywhere;\n}\n.canvas-react-modal-tools {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: 4px;\n margin-left: 16px;\n}\n.canvas-react-modal-tool {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 0;\n border-radius: var(--canvas-react-radius-sm, 6px);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-modal-tool:hover {\n background: var(--canvas-react-color-bg-hover);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-modal-tool:focus-visible,\n.canvas-react-modal-button:focus-visible {\n outline: 2px solid var(--canvas-react-color-primary);\n outline-offset: 2px;\n}\n.canvas-react-modal-fullscreen-icon {\n position: relative;\n display: block;\n width: 15px;\n height: 15px;\n border: 1.5px solid currentColor;\n}\n.canvas-react-modal-fullscreen-icon-exit::before {\n position: absolute;\n inset: 3px -4px -4px 3px;\n border-right: 1.5px solid currentColor;\n border-bottom: 1.5px solid currentColor;\n content: "";\n}\n.canvas-react-modal-close-icon {\n position: relative;\n display: block;\n width: 16px;\n height: 16px;\n}\n.canvas-react-modal-close-icon::before,\n.canvas-react-modal-close-icon::after {\n position: absolute;\n top: 7px;\n left: 1px;\n width: 14px;\n height: 1.5px;\n border-radius: 1px;\n background: currentColor;\n content: "";\n}\n.canvas-react-modal-close-icon::before {\n transform: rotate(45deg);\n}\n.canvas-react-modal-close-icon::after {\n transform: rotate(-45deg);\n}\n.canvas-react-modal-body {\n min-height: 0;\n flex: 1 1 auto;\n overflow: auto;\n padding: 20px 24px;\n}\n.canvas-react-modal-footer {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 24px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: var(--canvas-react-control-height, 32px);\n min-width: 64px;\n padding: 0 var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm, 6px);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font: inherit;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-modal-button:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-modal-button-primary {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-modal-button-primary:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n color: #ffffff;\n}\n.canvas-react-modal-button:disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-modal-loading {\n width: 14px;\n height: 14px;\n border: 2px solid rgba(255, 255, 255, 0.45);\n border-top-color: #ffffff;\n border-radius: 50%;\n animation: canvas-react-modal-loading 0.8s linear infinite;\n}\n.canvas-react-modal-motion-enter-active,\n.canvas-react-modal-motion-leave-active {\n transition: opacity 0.2s ease;\n}\n.canvas-react-modal-motion-enter-active .canvas-react-modal,\n.canvas-react-modal-motion-leave-active .canvas-react-modal {\n transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.canvas-react-modal-motion-enter-from,\n.canvas-react-modal-motion-leave-to {\n opacity: 0;\n}\n.canvas-react-modal-motion-enter-from .canvas-react-modal,\n.canvas-react-modal-motion-leave-to .canvas-react-modal {\n opacity: 0;\n transform: scale(0.96) translateY(-8px);\n}\n@keyframes canvas-react-modal-loading {\n to {\n transform: rotate(360deg);\n }\n}\n@media (max-width: 575px) {\n .canvas-react-modal-wrap {\n padding: 24px 12px;\n }\n .canvas-react-modal {\n max-width: calc(100vw - 24px);\n max-height: calc(100vh - 48px);\n }\n .canvas-react-modal-header {\n padding-right: 12px;\n padding-left: 16px;\n }\n .canvas-react-modal-body {\n padding: 16px;\n }\n .canvas-react-modal-footer {\n padding: 12px 16px;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-modal-motion-enter-active,\n .canvas-react-modal-motion-leave-active,\n .canvas-react-modal-motion-enter-active .canvas-react-modal,\n .canvas-react-modal-motion-leave-active .canvas-react-modal {\n transition-duration: 0.01ms;\n }\n}\n');
5277
+ var MODAL_MOTION_DURATION = 200;
5278
+ var FOCUSABLE_SELECTOR = [
5279
+ "a[href]",
5280
+ "button:not([disabled])",
5281
+ "input:not([disabled])",
5282
+ "select:not([disabled])",
5283
+ "textarea:not([disabled])",
5284
+ '[tabindex]:not([tabindex="-1"])'
5285
+ ].join(",");
5286
+ var bodyScrollLockCount = 0;
5287
+ var bodyOverflowBeforeLock = "";
5288
+ function ReactModal(props) {
5289
+ const {
5290
+ afterClose,
5291
+ bodyStyle,
5292
+ cancelButtonProps,
5293
+ cancelText = "\u53D6\u6D88",
5294
+ centered = false,
5295
+ children,
5296
+ className,
5297
+ closable = true,
5298
+ confirmLoading,
5299
+ defaultFullscreen = false,
5300
+ focusTriggerAfterClose = true,
5301
+ footer,
5302
+ fullscreen,
5303
+ fullscreenable = true,
5304
+ getContainer,
5305
+ keyboard = true,
5306
+ mask = true,
5307
+ maskClosable = true,
5308
+ maskStyle,
5309
+ okButtonProps,
5310
+ okText = "\u786E\u5B9A",
5311
+ onCancel,
5312
+ onFullscreenChange,
5313
+ onOk,
5314
+ open,
5315
+ rootClassName,
5316
+ style,
5317
+ title,
5318
+ width = 520,
5319
+ zIndex = 1e3
5320
+ } = props;
5321
+ const transition = useReactTransition({
5322
+ duration: MODAL_MOTION_DURATION,
5323
+ name: `${REACT_COMPONENT_PREFIX}-modal-motion`,
5324
+ show: open
5325
+ });
5326
+ const [innerFullscreen, setInnerFullscreen] = React.useState(defaultFullscreen);
5327
+ const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
5328
+ const panelRef = React.useRef(null);
5329
+ const restoreFocusRef = React.useRef(null);
5330
+ const wasRenderedRef = React.useRef(false);
5331
+ const titleId = useCompatibleId(`${REACT_COMPONENT_PREFIX}-modal-title`);
5332
+ const controlledFullscreen = fullscreen !== void 0;
5333
+ const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
5334
+ const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
5335
+ const hasTitle = title !== null && title !== void 0 && title !== false;
5336
+ React.useEffect(() => {
5337
+ if (!transition.rendered) {
5338
+ if (wasRenderedRef.current) {
5339
+ wasRenderedRef.current = false;
5340
+ afterClose?.();
5341
+ if (focusTriggerAfterClose) {
5342
+ restoreFocusRef.current?.focus();
5343
+ }
5344
+ restoreFocusRef.current = null;
4450
5345
  }
4451
- onChange?.(normalized);
4452
- onCommit?.(normalized);
4453
- setDraftText(
4454
- formatDisplayValue(normalized, formatter, resolvedPrecision, step)
4455
- );
4456
- return normalized;
5346
+ return;
5347
+ }
5348
+ if (!wasRenderedRef.current) {
5349
+ wasRenderedRef.current = true;
5350
+ restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
5351
+ }
5352
+ lockBodyScroll();
5353
+ return unlockBodyScroll;
5354
+ }, [afterClose, focusTriggerAfterClose, transition.rendered]);
5355
+ React.useEffect(() => {
5356
+ if (!open || !transition.rendered) {
5357
+ return;
5358
+ }
5359
+ const frameId = window.requestAnimationFrame(() => {
5360
+ panelRef.current?.focus();
5361
+ });
5362
+ return () => {
5363
+ window.cancelAnimationFrame(frameId);
4457
5364
  };
4458
- const stepBy = (direction) => {
4459
- if (disabled) {
5365
+ }, [open, transition.rendered]);
5366
+ React.useEffect(() => {
5367
+ if (!transition.rendered) {
5368
+ return;
5369
+ }
5370
+ const handleKeyDown = (event) => {
5371
+ if (event.key === "Escape" && keyboard && open) {
5372
+ event.preventDefault();
5373
+ onCancel?.(event);
4460
5374
  return;
4461
5375
  }
4462
- const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
4463
- const next = base + direction * step;
4464
- commitValue(next);
5376
+ if (event.key !== "Tab" || !open) {
5377
+ return;
5378
+ }
5379
+ trapFocus(event, panelRef.current);
4465
5380
  };
4466
- const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
4467
- const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
4468
- return /* @__PURE__ */ jsxRuntime.jsxs(
4469
- "span",
4470
- {
4471
- className: joinClassNames(
4472
- `${REACT_COMPONENT_PREFIX}-input-number`,
4473
- focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
4474
- disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
4475
- className
4476
- ),
4477
- style,
4478
- children: [
4479
- /* @__PURE__ */ jsxRuntime.jsx(
4480
- "button",
4481
- {
4482
- type: "button",
4483
- tabIndex: -1,
4484
- disabled: disabled || atMin,
4485
- className: joinClassNames(
4486
- `${REACT_COMPONENT_PREFIX}-input-number-handler`,
4487
- `${REACT_COMPONENT_PREFIX}-input-number-handler-down`
4488
- ),
4489
- "aria-label": "\u51CF\u5C11",
4490
- onMouseDown: (event) => {
4491
- event.preventDefault();
4492
- },
4493
- onClick: () => {
4494
- stepBy(-1);
4495
- },
4496
- children: /* @__PURE__ */ jsxRuntime.jsx(
4497
- "span",
4498
- {
4499
- className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
4500
- "aria-hidden": "true"
4501
- }
4502
- )
4503
- }
4504
- ),
4505
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
4506
- /* @__PURE__ */ jsxRuntime.jsx(
4507
- "input",
4508
- {
4509
- ...restProps,
4510
- ref,
4511
- disabled,
4512
- inputMode: "decimal",
4513
- value: draftText,
4514
- className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
4515
- onFocus: (event) => {
4516
- setFocused(true);
4517
- onFocus?.(event);
4518
- },
4519
- onChange: (event) => {
4520
- const nextText = event.target.value;
4521
- setDraftText(nextText);
4522
- const parsed = parser ? parser(nextText) : parseNumberText(nextText);
4523
- if (!isControlled) {
4524
- setInnerValue(parsed);
4525
- }
4526
- onChange?.(parsed);
4527
- },
4528
- onBlur: (event) => {
4529
- setFocused(false);
4530
- const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
4531
- commitValue(parsed);
4532
- onBlur?.(event);
4533
- },
4534
- onKeyDown: (event) => {
4535
- if (event.key === "ArrowUp") {
4536
- event.preventDefault();
4537
- stepBy(1);
4538
- } else if (event.key === "ArrowDown") {
4539
- event.preventDefault();
4540
- stepBy(-1);
4541
- } else if (event.key === "Enter") {
4542
- const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
4543
- commitValue(parsed);
4544
- }
4545
- onKeyDown?.(event);
5381
+ document.addEventListener("keydown", handleKeyDown);
5382
+ return () => {
5383
+ document.removeEventListener("keydown", handleKeyDown);
5384
+ };
5385
+ }, [keyboard, onCancel, open, transition.rendered]);
5386
+ const setFullscreen = (nextFullscreen) => {
5387
+ if (!controlledFullscreen) {
5388
+ setInnerFullscreen(nextFullscreen);
5389
+ }
5390
+ if (nextFullscreen !== mergedFullscreen) {
5391
+ onFullscreenChange?.(nextFullscreen);
5392
+ }
5393
+ };
5394
+ const handleOk = (event) => {
5395
+ if (mergedConfirmLoading || okButtonProps?.disabled) {
5396
+ return;
5397
+ }
5398
+ const result = onOk?.(event);
5399
+ if (!isPromiseLike(result)) {
5400
+ return;
5401
+ }
5402
+ setInnerConfirmLoading(true);
5403
+ Promise.resolve(result).catch(() => void 0).finally(() => {
5404
+ setInnerConfirmLoading(false);
5405
+ });
5406
+ };
5407
+ if (!transition.rendered || typeof document === "undefined") {
5408
+ return null;
5409
+ }
5410
+ const container = resolveContainer(getContainer);
5411
+ if (!container) {
5412
+ return null;
5413
+ }
5414
+ const {
5415
+ className: okButtonClassName,
5416
+ disabled: okButtonDisabled,
5417
+ ...restOkButtonProps
5418
+ } = okButtonProps ?? {};
5419
+ const {
5420
+ className: cancelButtonClassName,
5421
+ disabled: cancelButtonDisabled,
5422
+ ...restCancelButtonProps
5423
+ } = cancelButtonProps ?? {};
5424
+ const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5425
+ /* @__PURE__ */ jsxRuntime.jsx(
5426
+ "button",
5427
+ {
5428
+ ...restCancelButtonProps,
5429
+ type: "button",
5430
+ className: joinClassNames(
5431
+ `${REACT_COMPONENT_PREFIX}-modal-button`,
5432
+ cancelButtonClassName
5433
+ ),
5434
+ disabled: mergedConfirmLoading || cancelButtonDisabled,
5435
+ onClick: onCancel,
5436
+ children: cancelText
5437
+ }
5438
+ ),
5439
+ /* @__PURE__ */ jsxRuntime.jsxs(
5440
+ "button",
5441
+ {
5442
+ ...restOkButtonProps,
5443
+ type: "button",
5444
+ className: joinClassNames(
5445
+ `${REACT_COMPONENT_PREFIX}-modal-button`,
5446
+ `${REACT_COMPONENT_PREFIX}-modal-button-primary`,
5447
+ okButtonClassName
5448
+ ),
5449
+ disabled: mergedConfirmLoading || okButtonDisabled,
5450
+ onClick: handleOk,
5451
+ children: [
5452
+ mergedConfirmLoading ? /* @__PURE__ */ jsxRuntime.jsx(
5453
+ "span",
5454
+ {
5455
+ className: `${REACT_COMPONENT_PREFIX}-modal-loading`,
5456
+ "aria-hidden": "true"
5457
+ }
5458
+ ) : null,
5459
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: okText })
5460
+ ]
5461
+ }
5462
+ )
5463
+ ] });
5464
+ return reactDom.createPortal(
5465
+ /* @__PURE__ */ jsxRuntime.jsxs(
5466
+ "div",
5467
+ {
5468
+ className: joinClassNames(
5469
+ `${REACT_COMPONENT_PREFIX}-modal-root`,
5470
+ centered && `${REACT_COMPONENT_PREFIX}-modal-root-centered`,
5471
+ mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-root-fullscreen`,
5472
+ transition.className,
5473
+ rootClassName
5474
+ ),
5475
+ style: { zIndex },
5476
+ children: [
5477
+ mask ? /* @__PURE__ */ jsxRuntime.jsx(
5478
+ "div",
5479
+ {
5480
+ className: `${REACT_COMPONENT_PREFIX}-modal-mask`,
5481
+ style: maskStyle,
5482
+ "aria-hidden": "true",
5483
+ onMouseDown: (event) => {
5484
+ if (maskClosable && event.target === event.currentTarget) {
5485
+ onCancel?.(event);
4546
5486
  }
4547
5487
  }
4548
- ),
4549
- addonAfter != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
4550
- ] }),
4551
- /* @__PURE__ */ jsxRuntime.jsx(
4552
- "button",
5488
+ }
5489
+ ) : null,
5490
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-wrap`, children: /* @__PURE__ */ jsxRuntime.jsxs(
5491
+ "div",
4553
5492
  {
4554
- type: "button",
4555
- tabIndex: -1,
4556
- disabled: disabled || atMax,
5493
+ ref: panelRef,
4557
5494
  className: joinClassNames(
4558
- `${REACT_COMPONENT_PREFIX}-input-number-handler`,
4559
- `${REACT_COMPONENT_PREFIX}-input-number-handler-up`
5495
+ `${REACT_COMPONENT_PREFIX}-modal`,
5496
+ mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen`,
5497
+ className
4560
5498
  ),
4561
- "aria-label": "\u589E\u52A0",
4562
- onMouseDown: (event) => {
4563
- event.preventDefault();
4564
- },
4565
- onClick: () => {
4566
- stepBy(1);
4567
- },
4568
- children: /* @__PURE__ */ jsxRuntime.jsx(
4569
- "span",
4570
- {
4571
- className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
4572
- "aria-hidden": "true"
4573
- }
4574
- )
5499
+ style: { width, ...style },
5500
+ role: "dialog",
5501
+ "aria-modal": "true",
5502
+ "aria-label": hasTitle ? void 0 : "\u5BF9\u8BDD\u6846",
5503
+ "aria-labelledby": hasTitle ? titleId : void 0,
5504
+ tabIndex: -1,
5505
+ children: [
5506
+ hasTitle || closable || fullscreenable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-header`, children: [
5507
+ /* @__PURE__ */ jsxRuntime.jsx(
5508
+ "div",
5509
+ {
5510
+ id: hasTitle ? titleId : void 0,
5511
+ className: `${REACT_COMPONENT_PREFIX}-modal-title`,
5512
+ children: title
5513
+ }
5514
+ ),
5515
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-tools`, children: [
5516
+ fullscreenable ? /* @__PURE__ */ jsxRuntime.jsx(
5517
+ "button",
5518
+ {
5519
+ type: "button",
5520
+ className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5521
+ title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5522
+ "aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5523
+ "aria-pressed": mergedFullscreen,
5524
+ onClick: () => setFullscreen(!mergedFullscreen),
5525
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5526
+ "span",
5527
+ {
5528
+ className: joinClassNames(
5529
+ `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
5530
+ mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
5531
+ ),
5532
+ "aria-hidden": "true"
5533
+ }
5534
+ )
5535
+ }
5536
+ ) : null,
5537
+ closable ? /* @__PURE__ */ jsxRuntime.jsx(
5538
+ "button",
5539
+ {
5540
+ type: "button",
5541
+ className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5542
+ title: "\u5173\u95ED",
5543
+ "aria-label": "\u5173\u95ED",
5544
+ onClick: onCancel,
5545
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5546
+ "span",
5547
+ {
5548
+ className: `${REACT_COMPONENT_PREFIX}-modal-close-icon`,
5549
+ "aria-hidden": "true"
5550
+ }
5551
+ )
5552
+ }
5553
+ ) : null
5554
+ ] })
5555
+ ] }) : null,
5556
+ /* @__PURE__ */ jsxRuntime.jsx(
5557
+ "div",
5558
+ {
5559
+ className: `${REACT_COMPONENT_PREFIX}-modal-body`,
5560
+ style: bodyStyle,
5561
+ children
5562
+ }
5563
+ ),
5564
+ footer === false ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter })
5565
+ ]
4575
5566
  }
4576
- )
5567
+ ) })
4577
5568
  ]
4578
5569
  }
4579
- );
4580
- }
4581
- );
4582
- function parseNumberText(value) {
4583
- const text = value.trim().replace(/%/g, "");
4584
- if (!text) {
4585
- return null;
4586
- }
4587
- const nextValue = Number(text);
4588
- return Number.isFinite(nextValue) ? nextValue : null;
5570
+ ),
5571
+ container
5572
+ );
4589
5573
  }
4590
- function resolvePrecision(precision, step) {
4591
- if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
4592
- return precision;
4593
- }
4594
- const stepText = String(step);
4595
- if (!stepText.includes(".")) {
4596
- return 0;
5574
+ function resolveContainer(getContainer) {
5575
+ if (typeof document === "undefined") {
5576
+ return null;
4597
5577
  }
4598
- return stepText.split(".")[1]?.length ?? 0;
5578
+ return typeof getContainer === "function" ? getContainer() : getContainer ?? document.body;
4599
5579
  }
4600
- function normalizeNumberValue(value, options) {
4601
- if (value == null || !Number.isFinite(value)) {
4602
- return null;
5580
+ function trapFocus(event, panel) {
5581
+ if (!panel) {
5582
+ return;
4603
5583
  }
4604
- let next = value;
4605
- if (options.min != null) {
4606
- next = Math.max(options.min, next);
5584
+ const focusableElements = Array.from(
5585
+ panel.querySelectorAll(FOCUSABLE_SELECTOR)
5586
+ ).filter((element) => element.offsetParent !== null);
5587
+ if (focusableElements.length === 0) {
5588
+ event.preventDefault();
5589
+ panel.focus();
5590
+ return;
4607
5591
  }
4608
- if (options.max != null) {
4609
- next = Math.min(options.max, next);
5592
+ const first = focusableElements[0];
5593
+ const last = focusableElements[focusableElements.length - 1];
5594
+ const active = document.activeElement;
5595
+ if (event.shiftKey && (active === first || !panel.contains(active))) {
5596
+ event.preventDefault();
5597
+ last.focus();
5598
+ } else if (!event.shiftKey && (active === last || !panel.contains(active))) {
5599
+ event.preventDefault();
5600
+ first.focus();
4610
5601
  }
4611
- const factor = 10 ** options.precision;
4612
- return Math.round(next * factor) / factor;
4613
5602
  }
4614
- function formatDisplayValue(value, formatter, precision, step) {
4615
- if (formatter) {
4616
- return formatter(value);
5603
+ function lockBodyScroll() {
5604
+ if (bodyScrollLockCount === 0) {
5605
+ bodyOverflowBeforeLock = document.body.style.overflow;
5606
+ document.body.style.overflow = "hidden";
4617
5607
  }
4618
- if (value == null || !Number.isFinite(value)) {
4619
- return "";
5608
+ bodyScrollLockCount += 1;
5609
+ }
5610
+ function unlockBodyScroll() {
5611
+ bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
5612
+ if (bodyScrollLockCount === 0) {
5613
+ document.body.style.overflow = bodyOverflowBeforeLock;
4620
5614
  }
4621
- const digits = resolvePrecision(precision, step);
4622
- return digits > 0 ? value.toFixed(digits) : String(Math.round(value));
5615
+ }
5616
+ function isPromiseLike(value) {
5617
+ return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
4623
5618
  }
4624
5619
 
4625
- // src/components/virtual-list/style.css
4626
- styleInject('@import "../../styles/variables.css";\n.canvas-react-virtual-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-virtual-list-inner {\n position: relative;\n min-width: 100%;\n}\n.canvas-react-virtual-list-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
4627
- var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, ref) {
4628
- const {
4629
- className,
4630
- empty,
4631
- height,
4632
- innerClassName,
4633
- itemHeight,
4634
- itemKey,
4635
- items,
4636
- overscan = 2,
4637
- renderItem,
4638
- style,
4639
- virtual = true
4640
- } = props;
4641
- const hostRef = react.useRef(null);
4642
- const [scrollTop, setScrollTop] = react.useState(0);
4643
- const useVirtual = virtual && items.length * itemHeight > height;
4644
- const startIndex = useVirtual ? Math.max(0, Math.floor(scrollTop / itemHeight) - overscan) : 0;
4645
- const endIndex = useVirtual ? Math.min(
4646
- items.length - 1,
4647
- Math.ceil((scrollTop + height) / itemHeight) + overscan
4648
- ) : items.length - 1;
4649
- const visibleItems = react.useMemo(
4650
- () => items.slice(startIndex, endIndex + 1),
4651
- [endIndex, items, startIndex]
4652
- );
4653
- react.useImperativeHandle(ref, () => ({
4654
- scrollToIndex: (index) => {
4655
- const element = hostRef.current;
4656
- if (!element || index < 0) {
4657
- return;
4658
- }
4659
- const itemTop = index * itemHeight;
4660
- const itemBottom = itemTop + itemHeight;
4661
- const viewportTop = element.scrollTop;
4662
- const viewportBottom = viewportTop + height;
4663
- if (itemTop < viewportTop) {
4664
- element.scrollTop = itemTop;
4665
- return;
4666
- }
4667
- if (itemBottom > viewportBottom) {
4668
- element.scrollTop = itemBottom - height;
4669
- }
4670
- },
4671
- element: hostRef.current
4672
- }));
4673
- return /* @__PURE__ */ jsxRuntime.jsx(
4674
- "div",
4675
- {
4676
- ref: hostRef,
4677
- className: joinClassNames(`${REACT_COMPONENT_PREFIX}-virtual-list`, className),
4678
- style: { height, ...style },
4679
- onScroll: (event) => {
4680
- setScrollTop(event.currentTarget.scrollTop);
4681
- },
4682
- children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-virtual-list-empty`, children: empty ?? "\u6682\u65E0\u6570\u636E" }) : /* @__PURE__ */ jsxRuntime.jsx(
4683
- "div",
4684
- {
4685
- className: joinClassNames(
4686
- `${REACT_COMPONENT_PREFIX}-virtual-list-inner`,
4687
- innerClassName
4688
- ),
4689
- style: { height: items.length * itemHeight },
4690
- children: visibleItems.map((item, index) => {
4691
- const itemIndex = startIndex + index;
4692
- return renderItem(item, itemIndex, {
4693
- style: useVirtual ? {
4694
- position: "absolute",
4695
- top: itemIndex * itemHeight,
4696
- left: 0,
4697
- right: 0,
4698
- height: itemHeight
4699
- } : {
4700
- height: itemHeight
4701
- }
4702
- });
4703
- })
4704
- }
4705
- )
4706
- }
4707
- );
4708
- });
4709
-
4710
- // src/components/select/style.css
4711
- styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
4712
- var ReactSelect = react.forwardRef(
4713
- function ReactSelect2(props, ref) {
5620
+ // src/components/input-number/style.css
5621
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n box-sizing: border-box;\n display: inline-flex;\n align-items: stretch;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n overflow: hidden;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n position: relative;\n display: flex;\n flex: 0 0 28px;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n color: var(--canvas-react-color-primary);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n color: #c4c7cf;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n position: relative;\n display: block;\n width: 10px;\n height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n background: currentColor;\n border-radius: 1px;\n transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n width: 10px;\n height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n width: 1.5px;\n height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-input-number-input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0 8px;\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n text-align: center;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n flex: 0 0 auto;\n padding-right: 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n user-select: none;\n}\n');
5622
+ var ReactInputNumber = React.forwardRef(
5623
+ function ReactInputNumber2(props, ref) {
4714
5624
  const {
4715
- autoFocus,
5625
+ addonAfter,
4716
5626
  className,
5627
+ defaultValue = null,
4717
5628
  disabled,
5629
+ formatter,
5630
+ max,
5631
+ min,
4718
5632
  onBlur,
4719
5633
  onChange,
5634
+ onCommit,
4720
5635
  onFocus,
4721
5636
  onKeyDown,
4722
- options,
4723
- optionHeight = 32,
4724
- listHeight = 224,
4725
- placeholder,
4726
- popupClassName,
4727
- allowClear = true,
4728
- showArrow = true,
4729
- showSearch = false,
5637
+ parser,
5638
+ precision,
5639
+ step = 1,
4730
5640
  style,
4731
5641
  value,
4732
- virtual = true,
4733
5642
  ...restProps
4734
5643
  } = props;
4735
- const triggerRef = react.useRef(null);
4736
- const inputRef = react.useRef(null);
4737
- const listRef = react.useRef(null);
4738
- const skipFocusOpenRef = react.useRef(false);
4739
- const [open, setOpen] = react.useState(false);
4740
- const selectedIndex = react.useMemo(
4741
- () => options.findIndex((option) => String(option.value) === String(value ?? "")),
4742
- [options, value]
5644
+ const isControlled = value !== void 0;
5645
+ const [innerValue, setInnerValue] = React.useState(
5646
+ isControlled ? value ?? null : defaultValue
5647
+ );
5648
+ const currentValue = isControlled ? value ?? null : innerValue;
5649
+ const [draftText, setDraftText] = React.useState(
5650
+ formatDisplayValue(
5651
+ currentValue,
5652
+ formatter,
5653
+ resolvePrecision(precision, step),
5654
+ step
5655
+ )
4743
5656
  );
4744
- const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
4745
- const [keyword, setKeyword] = react.useState(selectedOption?.label ?? "");
4746
- const filteredOptions = react.useMemo(() => {
4747
- if (!showSearch) {
4748
- return options;
4749
- }
4750
- const search = keyword.trim().toLowerCase();
4751
- if (!search) {
4752
- return options;
5657
+ const [focused, setFocused] = React.useState(false);
5658
+ const resolvedPrecision = React.useMemo(
5659
+ () => resolvePrecision(precision, step),
5660
+ [precision, step]
5661
+ );
5662
+ React.useEffect(() => {
5663
+ if (!focused) {
5664
+ setDraftText(
5665
+ formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
5666
+ );
4753
5667
  }
4754
- return options.filter((option) => {
4755
- return option.label.toLowerCase().includes(search) || String(option.value).toLowerCase().includes(search);
5668
+ }, [currentValue, focused, formatter, resolvedPrecision, step]);
5669
+ const commitValue = (nextValue) => {
5670
+ const normalized = normalizeNumberValue(nextValue, {
5671
+ min,
5672
+ max,
5673
+ precision: resolvedPrecision
4756
5674
  });
4757
- }, [keyword, options]);
4758
- const [activeIndex, setActiveIndex] = react.useState(() => {
4759
- return selectedIndex >= 0 ? selectedIndex : 0;
4760
- });
4761
- react.useImperativeHandle(ref, () => inputRef.current);
4762
- react.useEffect(() => {
4763
- if (autoFocus) {
4764
- inputRef.current?.focus();
4765
- }
4766
- }, [autoFocus]);
4767
- react.useEffect(() => {
4768
- if (!open) {
4769
- setKeyword(selectedOption?.label ?? "");
5675
+ if (!isControlled) {
5676
+ setInnerValue(normalized);
4770
5677
  }
4771
- }, [open, selectedOption]);
4772
- react.useEffect(() => {
4773
- const nextIndex = filteredOptions.findIndex(
4774
- (option) => String(option.value) === String(value ?? "")
5678
+ onChange?.(normalized);
5679
+ onCommit?.(normalized);
5680
+ setDraftText(
5681
+ formatDisplayValue(normalized, formatter, resolvedPrecision, step)
4775
5682
  );
4776
- setActiveIndex(nextIndex >= 0 ? nextIndex : 0);
4777
- }, [filteredOptions, value]);
4778
- react.useEffect(() => {
4779
- if (!open) {
5683
+ return normalized;
5684
+ };
5685
+ const stepBy = (direction) => {
5686
+ if (disabled) {
4780
5687
  return;
4781
5688
  }
4782
- listRef.current?.scrollToIndex(activeIndex);
4783
- }, [activeIndex, listHeight, open, optionHeight]);
4784
- const selectOption = (option) => {
4785
- onChange?.(String(option.value));
4786
- setKeyword(option.label);
4787
- setOpen(false);
4788
- inputRef.current?.focus();
4789
- };
4790
- const hasValue = value != null && String(value).length > 0;
4791
- const showClear = allowClear && !disabled && hasValue;
4792
- const handleClear = (event) => {
4793
- event.preventDefault();
4794
- event.stopPropagation();
4795
- skipFocusOpenRef.current = true;
4796
- setKeyword("");
4797
- setOpen(false);
4798
- onChange?.("");
4799
- inputRef.current?.blur();
5689
+ const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
5690
+ const next = base + direction * step;
5691
+ commitValue(next);
4800
5692
  };
4801
- return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-select-wrap`, children: [
4802
- /* @__PURE__ */ jsxRuntime.jsxs(
4803
- "div",
4804
- {
4805
- ref: triggerRef,
4806
- className: joinClassNames(
4807
- `${REACT_COMPONENT_PREFIX}-select`,
4808
- open && `${REACT_COMPONENT_PREFIX}-select-open`,
4809
- disabled && `${REACT_COMPONENT_PREFIX}-select-disabled`,
4810
- className
4811
- ),
4812
- style,
4813
- onClick: (event) => {
4814
- if (disabled) {
4815
- return;
4816
- }
4817
- if (event.target?.closest(
4818
- `.${REACT_COMPONENT_PREFIX}-select-clear`
4819
- )) {
4820
- return;
4821
- }
4822
- if (event.target?.closest(
4823
- `.${REACT_COMPONENT_PREFIX}-select-arrow`
4824
- )) {
4825
- return;
4826
- }
4827
- inputRef.current?.focus();
4828
- if (!open) {
4829
- setOpen(true);
5693
+ const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
5694
+ const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
5695
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5696
+ "span",
5697
+ {
5698
+ className: joinClassNames(
5699
+ `${REACT_COMPONENT_PREFIX}-input-number`,
5700
+ focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
5701
+ disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
5702
+ className
5703
+ ),
5704
+ style,
5705
+ children: [
5706
+ /* @__PURE__ */ jsxRuntime.jsx(
5707
+ "button",
5708
+ {
5709
+ type: "button",
5710
+ tabIndex: -1,
5711
+ disabled: disabled || atMin,
5712
+ className: joinClassNames(
5713
+ `${REACT_COMPONENT_PREFIX}-input-number-handler`,
5714
+ `${REACT_COMPONENT_PREFIX}-input-number-handler-down`
5715
+ ),
5716
+ "aria-label": "\u51CF\u5C11",
5717
+ onMouseDown: (event) => {
5718
+ event.preventDefault();
5719
+ },
5720
+ onClick: () => {
5721
+ stepBy(-1);
5722
+ },
5723
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5724
+ "span",
5725
+ {
5726
+ className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
5727
+ "aria-hidden": "true"
5728
+ }
5729
+ )
4830
5730
  }
4831
- },
4832
- children: [
5731
+ ),
5732
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
4833
5733
  /* @__PURE__ */ jsxRuntime.jsx(
4834
- ReactInput,
5734
+ "input",
4835
5735
  {
4836
5736
  ...restProps,
4837
- ref: inputRef,
4838
- allowClear: false,
5737
+ ref,
4839
5738
  disabled,
4840
- readOnly: !showSearch,
4841
- value: open && showSearch ? keyword : selectedOption?.label ?? "",
4842
- className: joinClassNames(`${REACT_COMPONENT_PREFIX}-select-input`),
4843
- wrapperClassName: `${REACT_COMPONENT_PREFIX}-select-input-wrap`,
4844
- placeholder,
5739
+ inputMode: "decimal",
5740
+ value: draftText,
5741
+ className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
4845
5742
  onFocus: (event) => {
4846
- if (skipFocusOpenRef.current) {
4847
- skipFocusOpenRef.current = false;
4848
- onFocus?.(event);
4849
- return;
4850
- }
4851
- if (!open) {
4852
- setOpen(true);
4853
- }
4854
- if (!open && showSearch) {
4855
- setKeyword(selectedOption?.label ?? "");
4856
- }
5743
+ setFocused(true);
4857
5744
  onFocus?.(event);
4858
5745
  },
4859
- onBlur: (event) => {
4860
- setOpen(false);
4861
- if ((!keyword.trim() || !showSearch) && selectedOption) {
4862
- setKeyword(selectedOption.label);
4863
- }
4864
- onBlur?.(event);
4865
- },
4866
5746
  onChange: (event) => {
4867
- if (!showSearch) {
4868
- return;
5747
+ const nextText = event.target.value;
5748
+ setDraftText(nextText);
5749
+ const parsed = parser ? parser(nextText) : parseNumberText(nextText);
5750
+ if (!isControlled) {
5751
+ setInnerValue(parsed);
4869
5752
  }
4870
- setKeyword(event.target.value);
4871
- setOpen(true);
5753
+ onChange?.(parsed);
5754
+ },
5755
+ onBlur: (event) => {
5756
+ setFocused(false);
5757
+ const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
5758
+ commitValue(parsed);
5759
+ onBlur?.(event);
4872
5760
  },
4873
5761
  onKeyDown: (event) => {
4874
- onKeyDown?.(event);
4875
- if (event.defaultPrevented) {
4876
- return;
4877
- }
4878
- if (disabled) {
4879
- return;
4880
- }
4881
- if (event.key === "ArrowDown") {
4882
- event.preventDefault();
4883
- if (!open) {
4884
- setOpen(true);
4885
- return;
4886
- }
4887
- setActiveIndex(
4888
- (prev) => Math.min(prev + 1, Math.max(filteredOptions.length - 1, 0))
4889
- );
4890
- return;
4891
- }
4892
5762
  if (event.key === "ArrowUp") {
4893
5763
  event.preventDefault();
4894
- if (!open) {
4895
- setOpen(true);
4896
- return;
4897
- }
4898
- setActiveIndex((prev) => Math.max(prev - 1, 0));
4899
- return;
4900
- }
4901
- if (event.key === "Enter") {
5764
+ stepBy(1);
5765
+ } else if (event.key === "ArrowDown") {
4902
5766
  event.preventDefault();
4903
- if (!open) {
4904
- setOpen(true);
4905
- return;
4906
- }
4907
- const targetOption = filteredOptions[activeIndex];
4908
- if (targetOption && !targetOption.disabled) {
4909
- selectOption(targetOption);
4910
- }
4911
- return;
4912
- }
4913
- if (event.key === "Escape") {
4914
- setKeyword(selectedOption?.label ?? "");
4915
- setOpen(false);
5767
+ stepBy(-1);
5768
+ } else if (event.key === "Enter") {
5769
+ const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
5770
+ commitValue(parsed);
4916
5771
  }
5772
+ onKeyDown?.(event);
4917
5773
  }
4918
5774
  }
4919
- ),
4920
- showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
4921
- "span",
4922
- {
4923
- className: joinClassNames(
4924
- `${REACT_COMPONENT_PREFIX}-select-actions`,
4925
- showClear && `${REACT_COMPONENT_PREFIX}-select-actions-clearable`
4926
- ),
4927
- children: [
4928
- showClear ? /* @__PURE__ */ jsxRuntime.jsx(
4929
- "button",
4930
- {
4931
- type: "button",
4932
- className: `${REACT_COMPONENT_PREFIX}-select-clear`,
4933
- "aria-label": "\u6E05\u7A7A",
4934
- tabIndex: -1,
4935
- onMouseDown: (event) => {
4936
- event.preventDefault();
4937
- event.stopPropagation();
4938
- },
4939
- onClick: handleClear,
4940
- children: /* @__PURE__ */ jsxRuntime.jsx(
4941
- "span",
4942
- {
4943
- className: `${REACT_COMPONENT_PREFIX}-select-clear-icon`
4944
- }
4945
- )
4946
- }
4947
- ) : null,
4948
- showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
4949
- "span",
4950
- {
4951
- className: joinClassNames(
4952
- `${REACT_COMPONENT_PREFIX}-select-arrow`,
4953
- open && `${REACT_COMPONENT_PREFIX}-select-arrow-open`
4954
- )
4955
- }
4956
- ) : null
4957
- ]
4958
- }
4959
- ) : null
4960
- ]
4961
- }
4962
- ),
4963
- /* @__PURE__ */ jsxRuntime.jsx(
4964
- ReactPopup,
4965
- {
4966
- open,
4967
- anchorRef: triggerRef,
4968
- matchAnchorWidth: true,
4969
- surfaceClassName: joinClassNames(
4970
- `${REACT_COMPONENT_PREFIX}-select-dropdown`,
4971
- popupClassName
4972
- ),
4973
- onOpenChange: setOpen,
4974
- children: /* @__PURE__ */ jsxRuntime.jsx(
4975
- ReactVirtualList,
5775
+ ),
5776
+ addonAfter != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
5777
+ ] }),
5778
+ /* @__PURE__ */ jsxRuntime.jsx(
5779
+ "button",
4976
5780
  {
4977
- ref: listRef,
4978
- items: filteredOptions,
4979
- height: Math.min(
4980
- listHeight,
4981
- Math.max(filteredOptions.length, 1) * optionHeight
5781
+ type: "button",
5782
+ tabIndex: -1,
5783
+ disabled: disabled || atMax,
5784
+ className: joinClassNames(
5785
+ `${REACT_COMPONENT_PREFIX}-input-number-handler`,
5786
+ `${REACT_COMPONENT_PREFIX}-input-number-handler-up`
4982
5787
  ),
4983
- itemHeight: optionHeight,
4984
- virtual,
4985
- className: `${REACT_COMPONENT_PREFIX}-select-list`,
4986
- innerClassName: `${REACT_COMPONENT_PREFIX}-select-list-inner`,
4987
- empty: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-select-empty`, children: "\u6682\u65E0\u6570\u636E" }),
4988
- itemKey: (option) => String(option.value),
4989
- renderItem: (option, optionIndex, meta) => {
4990
- const isSelected = String(option.value) === String(value ?? "");
4991
- const isActive = optionIndex === activeIndex;
4992
- return /* @__PURE__ */ jsxRuntime.jsx(
4993
- "div",
4994
- {
4995
- className: joinClassNames(
4996
- `${REACT_COMPONENT_PREFIX}-select-option`,
4997
- isSelected && `${REACT_COMPONENT_PREFIX}-select-option-selected`,
4998
- isActive && `${REACT_COMPONENT_PREFIX}-select-option-active`,
4999
- option.disabled && `${REACT_COMPONENT_PREFIX}-select-option-disabled`
5000
- ),
5001
- style: meta.style,
5002
- onMouseDown: (event) => {
5003
- event.preventDefault();
5004
- },
5005
- onMouseEnter: () => {
5006
- setActiveIndex(optionIndex);
5007
- },
5008
- onClick: () => {
5009
- if (option.disabled) {
5010
- return;
5011
- }
5012
- selectOption(option);
5013
- },
5014
- children: option.label
5015
- },
5016
- String(option.value)
5017
- );
5018
- }
5788
+ "aria-label": "\u589E\u52A0",
5789
+ onMouseDown: (event) => {
5790
+ event.preventDefault();
5791
+ },
5792
+ onClick: () => {
5793
+ stepBy(1);
5794
+ },
5795
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5796
+ "span",
5797
+ {
5798
+ className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
5799
+ "aria-hidden": "true"
5800
+ }
5801
+ )
5019
5802
  }
5020
5803
  )
5021
- }
5022
- )
5023
- ] });
5804
+ ]
5805
+ }
5806
+ );
5024
5807
  }
5025
5808
  );
5809
+ function parseNumberText(value) {
5810
+ const text = value.trim().replace(/%/g, "");
5811
+ if (!text) {
5812
+ return null;
5813
+ }
5814
+ const nextValue = Number(text);
5815
+ return Number.isFinite(nextValue) ? nextValue : null;
5816
+ }
5817
+ function resolvePrecision(precision, step) {
5818
+ if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
5819
+ return precision;
5820
+ }
5821
+ const stepText = String(step);
5822
+ if (!stepText.includes(".")) {
5823
+ return 0;
5824
+ }
5825
+ return stepText.split(".")[1]?.length ?? 0;
5826
+ }
5827
+ function normalizeNumberValue(value, options) {
5828
+ if (value == null || !Number.isFinite(value)) {
5829
+ return null;
5830
+ }
5831
+ let next = value;
5832
+ if (options.min != null) {
5833
+ next = Math.max(options.min, next);
5834
+ }
5835
+ if (options.max != null) {
5836
+ next = Math.min(options.max, next);
5837
+ }
5838
+ const factor = 10 ** options.precision;
5839
+ return Math.round(next * factor) / factor;
5840
+ }
5841
+ function formatDisplayValue(value, formatter, precision, step) {
5842
+ if (formatter) {
5843
+ return formatter(value);
5844
+ }
5845
+ if (value == null || !Number.isFinite(value)) {
5846
+ return "";
5847
+ }
5848
+ const digits = resolvePrecision(precision, step);
5849
+ return digits > 0 ? value.toFixed(digits) : String(Math.round(value));
5850
+ }
5026
5851
 
5027
5852
  // src/components/pagination/style.css
5028
5853
  styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 8px;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n padding: 0 10px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: 32px;\n min-width: 32px;\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n');
@@ -5041,14 +5866,14 @@ function ReactPagination(props) {
5041
5866
  simple,
5042
5867
  total
5043
5868
  } = props;
5044
- const [quickValue, setQuickValue] = react.useState("");
5869
+ const [quickValue, setQuickValue] = React.useState("");
5045
5870
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
5046
5871
  const safeCurrent = clampPage(current, totalPages);
5047
5872
  const range = total === 0 ? [0, 0] : [
5048
5873
  (safeCurrent - 1) * pageSize + 1,
5049
5874
  Math.min(safeCurrent * pageSize, total)
5050
5875
  ];
5051
- const pages = react.useMemo(
5876
+ const pages = React.useMemo(
5052
5877
  () => buildPageItems(safeCurrent, totalPages, showLessItems),
5053
5878
  [safeCurrent, totalPages, showLessItems]
5054
5879
  );
@@ -5224,11 +6049,11 @@ function ReactPopconfirm(props) {
5224
6049
  title,
5225
6050
  zIndex
5226
6051
  } = props;
5227
- const triggerRef = react.useRef(null);
5228
- const [innerOpen, setInnerOpen] = react.useState(defaultOpen);
5229
- const [innerConfirmLoading, setInnerConfirmLoading] = react.useState(false);
5230
- const titleId = react.useId();
5231
- const descriptionId = react.useId();
6052
+ const triggerRef = React.useRef(null);
6053
+ const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
6054
+ const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
6055
+ const titleId = useCompatibleId("canvas-react-popconfirm-title");
6056
+ const descriptionId = useCompatibleId("canvas-react-popconfirm-description");
5232
6057
  const controlled = open !== void 0;
5233
6058
  const mergedOpen = controlled ? Boolean(open) : innerOpen;
5234
6059
  const popupOpen = mergedOpen && !disabled;
@@ -5245,7 +6070,7 @@ function ReactPopconfirm(props) {
5245
6070
  disabled: cancelButtonDisabled,
5246
6071
  ...restCancelButtonProps
5247
6072
  } = cancelButtonProps ?? {};
5248
- react.useEffect(() => {
6073
+ React.useEffect(() => {
5249
6074
  if (!disabled || !mergedOpen) {
5250
6075
  return;
5251
6076
  }
@@ -5268,7 +6093,7 @@ function ReactPopconfirm(props) {
5268
6093
  return;
5269
6094
  }
5270
6095
  const result = onConfirm?.(event);
5271
- if (isPromiseLike(result)) {
6096
+ if (isPromiseLike2(result)) {
5272
6097
  setInnerConfirmLoading(true);
5273
6098
  Promise.resolve(result).then(() => {
5274
6099
  setOpen(false);
@@ -5416,14 +6241,14 @@ function ReactPopconfirm(props) {
5416
6241
  )
5417
6242
  ] });
5418
6243
  }
5419
- function isPromiseLike(value) {
6244
+ function isPromiseLike2(value) {
5420
6245
  return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
5421
6246
  }
5422
6247
 
5423
6248
  // src/components/quarter/style.css
5424
6249
  styleInject('@import "../year/style.css";\n.canvas-react-quarter-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 12px 8px;\n}\n.canvas-react-quarter-cell {\n height: 56px;\n font-size: 16px;\n font-weight: 600;\n}\n');
5425
6250
  var QUARTERS = ["Q1", "Q2", "Q3", "Q4"];
5426
- var ReactQuarterPicker = react.forwardRef(
6251
+ var ReactQuarterPicker = React.forwardRef(
5427
6252
  function ReactQuarterPicker2(props, ref) {
5428
6253
  const {
5429
6254
  autoFocus,
@@ -5441,35 +6266,35 @@ var ReactQuarterPicker = react.forwardRef(
5441
6266
  value,
5442
6267
  ...restProps
5443
6268
  } = props;
5444
- const triggerRef = react.useRef(null);
5445
- const inputRef = react.useRef(null);
5446
- const popupRef = react.useRef(null);
5447
- const skipFocusOpenRef = react.useRef(false);
5448
- const [open, setOpen] = react.useState(false);
5449
- const [mode, setMode] = react.useState("quarter");
5450
- const parsedValue = react.useMemo(() => parseQuarterValue(value), [value]);
5451
- const [panelYear, setPanelYear] = react.useState(
6269
+ const triggerRef = React.useRef(null);
6270
+ const inputRef = React.useRef(null);
6271
+ const popupRef = React.useRef(null);
6272
+ const skipFocusOpenRef = React.useRef(false);
6273
+ const [open, setOpen] = React.useState(false);
6274
+ const [mode, setMode] = React.useState("quarter");
6275
+ const parsedValue = React.useMemo(() => parseQuarterValue(value), [value]);
6276
+ const [panelYear, setPanelYear] = React.useState(
5452
6277
  () => parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
5453
6278
  );
5454
- const yearPanelStart = react.useMemo(() => resolveDecadeStart5(panelYear), [panelYear]);
5455
- const decadePanelStart = react.useMemo(() => {
6279
+ const yearPanelStart = React.useMemo(() => resolveDecadeStart5(panelYear), [panelYear]);
6280
+ const decadePanelStart = React.useMemo(() => {
5456
6281
  return Math.floor(yearPanelStart / 100) * 100;
5457
6282
  }, [yearPanelStart]);
5458
- const yearItems = react.useMemo(() => {
6283
+ const yearItems = React.useMemo(() => {
5459
6284
  return Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index);
5460
6285
  }, [yearPanelStart]);
5461
- const decadeItems = react.useMemo(() => {
6286
+ const decadeItems = React.useMemo(() => {
5462
6287
  return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
5463
6288
  }, [decadePanelStart]);
5464
6289
  const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${parsedValue.quarter}`;
5465
6290
  const showClear = allowClear && !disabled && displayValue.length > 0;
5466
- react.useImperativeHandle(ref, () => inputRef.current);
5467
- react.useEffect(() => {
6291
+ React.useImperativeHandle(ref, () => inputRef.current);
6292
+ React.useEffect(() => {
5468
6293
  if (autoFocus) {
5469
6294
  inputRef.current?.focus();
5470
6295
  }
5471
6296
  }, [autoFocus]);
5472
- react.useEffect(() => {
6297
+ React.useEffect(() => {
5473
6298
  if (!open) {
5474
6299
  return;
5475
6300
  }
@@ -5804,7 +6629,414 @@ function parseQuarterValue(value) {
5804
6629
  function resolveDecadeStart5(year) {
5805
6630
  return Math.floor(year / 10) * 10;
5806
6631
  }
5807
- var ReactTimePicker = react.forwardRef(
6632
+
6633
+ // src/components/resizable-panels/style.css
6634
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-resizable-panels {\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n background: var(--canvas-react-color-bg, #ffffff);\n}\n.canvas-react-resizable-panels-horizontal {\n flex-direction: row;\n}\n.canvas-react-resizable-panels-vertical {\n flex-direction: column;\n}\n.canvas-react-resizable-panels-resizing {\n cursor: inherit;\n}\n.canvas-react-resizable-panels-item {\n display: contents;\n}\n.canvas-react-resizable-panel {\n min-width: 0;\n min-height: 0;\n overflow: auto;\n}\n.canvas-react-resizable-panels-animated:not(.canvas-react-resizable-panels-resizing) .canvas-react-resizable-panel {\n transition:\n flex-basis 0.22s cubic-bezier(0.2, 0, 0, 1),\n width 0.22s cubic-bezier(0.2, 0, 0, 1),\n min-width 0.22s cubic-bezier(0.2, 0, 0, 1),\n max-width 0.22s cubic-bezier(0.2, 0, 0, 1),\n height 0.22s cubic-bezier(0.2, 0, 0, 1),\n min-height 0.22s cubic-bezier(0.2, 0, 0, 1),\n max-height 0.22s cubic-bezier(0.2, 0, 0, 1),\n opacity 0.14s ease;\n}\n.canvas-react-resizable-panel-collapsed {\n visibility: hidden;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-resizable-panels-animated:not(.canvas-react-resizable-panels-resizing) .canvas-react-resizable-panel-collapsed {\n transition:\n flex-basis 0.22s cubic-bezier(0.2, 0, 0, 1),\n width 0.22s cubic-bezier(0.2, 0, 0, 1),\n min-width 0.22s cubic-bezier(0.2, 0, 0, 1),\n max-width 0.22s cubic-bezier(0.2, 0, 0, 1),\n height 0.22s cubic-bezier(0.2, 0, 0, 1),\n min-height 0.22s cubic-bezier(0.2, 0, 0, 1),\n max-height 0.22s cubic-bezier(0.2, 0, 0, 1),\n opacity 0.14s ease,\n visibility 0s linear 0.22s;\n}\n.canvas-react-resizable-panels-divider {\n position: relative;\n z-index: 1;\n flex: 0 0 9px;\n touch-action: none;\n outline: none;\n}\n.canvas-react-resizable-panels-divider-horizontal {\n align-self: stretch;\n width: 9px;\n min-height: 24px;\n cursor: col-resize;\n}\n.canvas-react-resizable-panels-divider-vertical {\n width: auto;\n min-width: 24px;\n height: 9px;\n cursor: row-resize;\n}\n.canvas-react-resizable-panels-animated .canvas-react-resizable-panels-divider {\n transition:\n flex-basis 0.22s cubic-bezier(0.2, 0, 0, 1),\n width 0.22s cubic-bezier(0.2, 0, 0, 1),\n height 0.22s cubic-bezier(0.2, 0, 0, 1),\n opacity 0.14s ease;\n}\n.canvas-react-resizable-panels-divider-collapsed {\n flex-basis: 0;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-resizable-panels-divider-horizontal.canvas-react-resizable-panels-divider-collapsed {\n width: 0;\n min-width: 0;\n}\n.canvas-react-resizable-panels-divider-vertical.canvas-react-resizable-panels-divider-collapsed {\n height: 0;\n min-height: 0;\n}\n.canvas-react-resizable-panels-divider-line {\n position: absolute;\n background: var(--canvas-react-color-border, #d9d9d9);\n transition:\n width 0.16s ease,\n height 0.16s ease,\n background-color 0.16s ease,\n transform 0.16s ease;\n}\n.canvas-react-resizable-panels-divider-horizontal .canvas-react-resizable-panels-divider-line {\n inset: 0 auto 0 4px;\n width: 1px;\n}\n.canvas-react-resizable-panels-divider-vertical .canvas-react-resizable-panels-divider-line {\n inset: 4px 0 auto;\n height: 1px;\n}\n.canvas-react-resizable-panels-divider-horizontal:hover .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-horizontal:focus-visible .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-horizontal.canvas-react-resizable-panels-divider-active .canvas-react-resizable-panels-divider-line {\n width: 3px;\n background: var(--canvas-react-color-primary, #1677ff);\n transform: translateX(-1px);\n}\n.canvas-react-resizable-panels-divider-vertical:hover .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-vertical:focus-visible .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-vertical.canvas-react-resizable-panels-divider-active .canvas-react-resizable-panels-divider-line {\n height: 3px;\n background: var(--canvas-react-color-primary, #1677ff);\n transform: translateY(-1px);\n}\n.canvas-react-resizable-panels-divider:focus-visible {\n box-shadow: inset 0 0 0 2px rgba(22, 119, 255, 0.12);\n}\n.canvas-react-resizable-panels-divider-disabled {\n cursor: default;\n}\n.canvas-react-resizable-panels-divider-horizontal.canvas-react-resizable-panels-divider-disabled .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-horizontal.canvas-react-resizable-panels-divider-disabled:hover .canvas-react-resizable-panels-divider-line {\n width: 1px;\n background: var(--canvas-react-color-border, #d9d9d9);\n transform: none;\n}\n.canvas-react-resizable-panels-divider-vertical.canvas-react-resizable-panels-divider-disabled .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-vertical.canvas-react-resizable-panels-divider-disabled:hover .canvas-react-resizable-panels-divider-line {\n height: 1px;\n background: var(--canvas-react-color-border, #d9d9d9);\n transform: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-resizable-panels-animated .canvas-react-resizable-panel,\n .canvas-react-resizable-panels-animated .canvas-react-resizable-panels-divider,\n .canvas-react-resizable-panels-divider-line {\n transition-duration: 0.01ms;\n transition-delay: 0s;\n }\n}\n');
6635
+ var DEFAULT_MIN_SIZE = 80;
6636
+ var DEFAULT_KEYBOARD_STEP = 10;
6637
+ function ReactResizablePanels(props) {
6638
+ const {
6639
+ animated = false,
6640
+ className,
6641
+ defaultSizes,
6642
+ direction = "horizontal",
6643
+ keyboardStep = DEFAULT_KEYBOARD_STEP,
6644
+ onResizeEnd,
6645
+ onResizeStart,
6646
+ onSizesChange,
6647
+ panels,
6648
+ sizes,
6649
+ style
6650
+ } = props;
6651
+ const [innerSizes, setInnerSizes] = React.useState(
6652
+ () => ({
6653
+ ...defaultSizes
6654
+ })
6655
+ );
6656
+ const [resizingDividerId, setResizingDividerId] = React.useState(
6657
+ null
6658
+ );
6659
+ const panelRefs = React.useRef({});
6660
+ const resizeSessionRef = React.useRef(null);
6661
+ const controlled = sizes !== void 0;
6662
+ const mergedSizes = controlled ? sizes : innerSizes;
6663
+ const visiblePanels = panels.filter((panel) => panel.visible !== false);
6664
+ React.useEffect(
6665
+ () => () => {
6666
+ const session = resizeSessionRef.current;
6667
+ if (!session) {
6668
+ return;
6669
+ }
6670
+ document.body.style.cursor = session.previousBodyCursor;
6671
+ document.body.style.userSelect = session.previousBodyUserSelect;
6672
+ resizeSessionRef.current = null;
6673
+ },
6674
+ []
6675
+ );
6676
+ const applySizes = (nextSizes, info) => {
6677
+ if (!controlled) {
6678
+ setInnerSizes(nextSizes);
6679
+ }
6680
+ if (resizeSessionRef.current) {
6681
+ resizeSessionRef.current.latestSizes = nextSizes;
6682
+ }
6683
+ onSizesChange?.(nextSizes, info);
6684
+ };
6685
+ const resizePair = (params) => {
6686
+ const { afterPanel, beforePanel, delta, startAfterSize, startBeforeSize } = params;
6687
+ const nextPair = resolveResizablePanelSizes({
6688
+ afterMaxSize: afterPanel.maxSize,
6689
+ afterMinSize: afterPanel.minSize,
6690
+ beforeMaxSize: beforePanel.maxSize,
6691
+ beforeMinSize: beforePanel.minSize,
6692
+ delta,
6693
+ startAfterSize,
6694
+ startBeforeSize
6695
+ });
6696
+ const info = createResizeInfo(beforePanel.id, afterPanel.id, direction);
6697
+ const nextSizes = {
6698
+ ...mergedSizes,
6699
+ [beforePanel.id]: nextPair.beforeSize,
6700
+ [afterPanel.id]: nextPair.afterSize
6701
+ };
6702
+ applySizes(nextSizes, info);
6703
+ return nextSizes;
6704
+ };
6705
+ const startResize = (event, beforePanel, afterPanel) => {
6706
+ if (event.button !== 0) {
6707
+ return;
6708
+ }
6709
+ const beforeElement = panelRefs.current[beforePanel.id];
6710
+ const afterElement = panelRefs.current[afterPanel.id];
6711
+ if (!beforeElement || !afterElement) {
6712
+ return;
6713
+ }
6714
+ event.preventDefault();
6715
+ event.currentTarget.setPointerCapture(event.pointerId);
6716
+ const startBeforeSize = resolveElementSize(beforeElement, direction);
6717
+ const startAfterSize = resolveElementSize(afterElement, direction);
6718
+ const info = createResizeInfo(beforePanel.id, afterPanel.id, direction);
6719
+ resizeSessionRef.current = {
6720
+ ...info,
6721
+ latestSizes: {
6722
+ ...mergedSizes,
6723
+ [beforePanel.id]: startBeforeSize,
6724
+ [afterPanel.id]: startAfterSize
6725
+ },
6726
+ pointerId: event.pointerId,
6727
+ previousBodyCursor: document.body.style.cursor,
6728
+ previousBodyUserSelect: document.body.style.userSelect,
6729
+ startAfterSize,
6730
+ startBeforeSize,
6731
+ startPointerPosition: resolvePointerPosition(event, direction)
6732
+ };
6733
+ document.body.style.cursor = resolveResizeCursor(direction);
6734
+ document.body.style.userSelect = "none";
6735
+ setResizingDividerId(beforePanel.id);
6736
+ onResizeStart?.(info);
6737
+ };
6738
+ const moveResize = (event, beforePanel, afterPanel) => {
6739
+ const session = resizeSessionRef.current;
6740
+ if (!session || session.pointerId !== event.pointerId) {
6741
+ return;
6742
+ }
6743
+ resizePair({
6744
+ afterPanel,
6745
+ beforePanel,
6746
+ delta: resolvePointerPosition(event, direction) - session.startPointerPosition,
6747
+ startAfterSize: session.startAfterSize,
6748
+ startBeforeSize: session.startBeforeSize
6749
+ });
6750
+ };
6751
+ const finishResize = (event) => {
6752
+ const session = resizeSessionRef.current;
6753
+ if (!session || session.pointerId !== event.pointerId) {
6754
+ return;
6755
+ }
6756
+ if (event.currentTarget.hasPointerCapture(event.pointerId)) {
6757
+ event.currentTarget.releasePointerCapture(event.pointerId);
6758
+ }
6759
+ document.body.style.cursor = session.previousBodyCursor;
6760
+ document.body.style.userSelect = session.previousBodyUserSelect;
6761
+ resizeSessionRef.current = null;
6762
+ setResizingDividerId(null);
6763
+ onResizeEnd?.(session.latestSizes, {
6764
+ afterPanelId: session.afterPanelId,
6765
+ beforePanelId: session.beforePanelId,
6766
+ direction: session.direction
6767
+ });
6768
+ };
6769
+ const handleDividerKeyDown = (event, beforePanel, afterPanel) => {
6770
+ const deltaDirection = resolveKeyboardDeltaDirection(event.key, direction);
6771
+ if (deltaDirection === 0) {
6772
+ return;
6773
+ }
6774
+ const beforeElement = panelRefs.current[beforePanel.id];
6775
+ const afterElement = panelRefs.current[afterPanel.id];
6776
+ if (!beforeElement || !afterElement) {
6777
+ return;
6778
+ }
6779
+ event.preventDefault();
6780
+ const step = normalizePositiveNumber(keyboardStep, DEFAULT_KEYBOARD_STEP);
6781
+ const nextSizes = resizePair({
6782
+ afterPanel,
6783
+ beforePanel,
6784
+ delta: deltaDirection * step,
6785
+ startAfterSize: resolveElementSize(afterElement, direction),
6786
+ startBeforeSize: resolveElementSize(beforeElement, direction)
6787
+ });
6788
+ onResizeEnd?.(
6789
+ nextSizes,
6790
+ createResizeInfo(beforePanel.id, afterPanel.id, direction)
6791
+ );
6792
+ };
6793
+ return /* @__PURE__ */ jsxRuntime.jsx(
6794
+ "div",
6795
+ {
6796
+ className: joinClassNames(
6797
+ `${REACT_COMPONENT_PREFIX}-resizable-panels`,
6798
+ `${REACT_COMPONENT_PREFIX}-resizable-panels-${direction}`,
6799
+ animated && `${REACT_COMPONENT_PREFIX}-resizable-panels-animated`,
6800
+ resizingDividerId !== null && `${REACT_COMPONENT_PREFIX}-resizable-panels-resizing`,
6801
+ className
6802
+ ),
6803
+ style,
6804
+ children: visiblePanels.map((panel, index) => {
6805
+ const nextPanel = visiblePanels[index + 1];
6806
+ const configuredSize = mergedSizes[panel.id] ?? panel.size;
6807
+ const collapsed = panel.collapsed === true;
6808
+ const minSize = collapsed ? 0 : normalizePositiveNumber(panel.minSize, DEFAULT_MIN_SIZE);
6809
+ const maxSize = collapsed ? 0 : normalizeMaxSize(panel.maxSize, minSize);
6810
+ const panelStyle = collapsed ? resolveCollapsedPanelStyle(direction) : resolvePanelStyle({
6811
+ configuredSize,
6812
+ direction,
6813
+ isLast: index === visiblePanels.length - 1,
6814
+ maxSize,
6815
+ minSize
6816
+ });
6817
+ const dividerCollapsed = nextPanel ? collapsed || nextPanel.collapsed === true : false;
6818
+ const dividerDisabled = panel.resizable === false || dividerCollapsed;
6819
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6820
+ "div",
6821
+ {
6822
+ className: `${REACT_COMPONENT_PREFIX}-resizable-panels-item`,
6823
+ children: [
6824
+ /* @__PURE__ */ jsxRuntime.jsx(
6825
+ "div",
6826
+ {
6827
+ ref: (element) => {
6828
+ panelRefs.current[panel.id] = element;
6829
+ },
6830
+ className: joinClassNames(
6831
+ `${REACT_COMPONENT_PREFIX}-resizable-panel`,
6832
+ collapsed && `${REACT_COMPONENT_PREFIX}-resizable-panel-collapsed`,
6833
+ panel.className
6834
+ ),
6835
+ style: {
6836
+ ...panelStyle,
6837
+ ...panel.style,
6838
+ ...collapsed ? panelStyle : void 0
6839
+ },
6840
+ "data-panel-id": panel.id,
6841
+ "aria-hidden": collapsed || void 0,
6842
+ children: panel.content
6843
+ }
6844
+ ),
6845
+ nextPanel ? /* @__PURE__ */ jsxRuntime.jsx(
6846
+ "div",
6847
+ {
6848
+ className: joinClassNames(
6849
+ `${REACT_COMPONENT_PREFIX}-resizable-panels-divider`,
6850
+ `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-${direction}`,
6851
+ dividerDisabled && `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-disabled`,
6852
+ dividerCollapsed && `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-collapsed`,
6853
+ resizingDividerId === panel.id && `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-active`
6854
+ ),
6855
+ role: "separator",
6856
+ "aria-label": `\u8C03\u6574 ${panel.id} \u4E0E ${nextPanel.id} \u7684${direction === "horizontal" ? "\u5BBD\u5EA6" : "\u9AD8\u5EA6"}`,
6857
+ "aria-disabled": dividerDisabled,
6858
+ "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
6859
+ "aria-valuemin": minSize,
6860
+ "aria-valuemax": Number.isFinite(maxSize) ? maxSize : void 0,
6861
+ "aria-valuenow": configuredSize == null ? void 0 : Math.round(configuredSize),
6862
+ tabIndex: dividerDisabled ? -1 : 0,
6863
+ onKeyDown: (event) => {
6864
+ if (!dividerDisabled) {
6865
+ handleDividerKeyDown(event, panel, nextPanel);
6866
+ }
6867
+ },
6868
+ onPointerCancel: finishResize,
6869
+ onPointerDown: (event) => {
6870
+ if (!dividerDisabled) {
6871
+ startResize(event, panel, nextPanel);
6872
+ }
6873
+ },
6874
+ onPointerMove: (event) => {
6875
+ if (!dividerDisabled) {
6876
+ moveResize(event, panel, nextPanel);
6877
+ }
6878
+ },
6879
+ onPointerUp: finishResize,
6880
+ children: /* @__PURE__ */ jsxRuntime.jsx(
6881
+ "span",
6882
+ {
6883
+ className: `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-line`,
6884
+ "aria-hidden": "true"
6885
+ }
6886
+ )
6887
+ }
6888
+ ) : null
6889
+ ]
6890
+ },
6891
+ panel.id
6892
+ );
6893
+ })
6894
+ }
6895
+ );
6896
+ }
6897
+ function resolveResizablePanelSizes(params) {
6898
+ const {
6899
+ afterMaxSize,
6900
+ afterMinSize,
6901
+ beforeMaxSize,
6902
+ beforeMinSize,
6903
+ delta,
6904
+ startAfterSize,
6905
+ startBeforeSize
6906
+ } = params;
6907
+ const safeBeforeMin = normalizePositiveNumber(
6908
+ beforeMinSize,
6909
+ DEFAULT_MIN_SIZE
6910
+ );
6911
+ const safeAfterMin = normalizePositiveNumber(afterMinSize, DEFAULT_MIN_SIZE);
6912
+ const safeBeforeMax = normalizeMaxSize(beforeMaxSize, safeBeforeMin);
6913
+ const safeAfterMax = normalizeMaxSize(afterMaxSize, safeAfterMin);
6914
+ const minDelta = Math.max(
6915
+ safeBeforeMin - startBeforeSize,
6916
+ startAfterSize - safeAfterMax
6917
+ );
6918
+ const maxDelta = Math.min(
6919
+ safeBeforeMax - startBeforeSize,
6920
+ startAfterSize - safeAfterMin
6921
+ );
6922
+ const safeDelta = clamp3(
6923
+ Number.isFinite(delta) ? delta : 0,
6924
+ minDelta,
6925
+ maxDelta
6926
+ );
6927
+ return {
6928
+ afterSize: Math.round((startAfterSize - safeDelta) * 100) / 100,
6929
+ beforeSize: Math.round((startBeforeSize + safeDelta) * 100) / 100
6930
+ };
6931
+ }
6932
+ function createResizeInfo(beforePanelId, afterPanelId, direction) {
6933
+ return { afterPanelId, beforePanelId, direction };
6934
+ }
6935
+ function resolveElementSize(element, direction) {
6936
+ const rect = element.getBoundingClientRect();
6937
+ return direction === "horizontal" ? rect.width : rect.height;
6938
+ }
6939
+ function resolvePointerPosition(event, direction) {
6940
+ return direction === "horizontal" ? event.clientX : event.clientY;
6941
+ }
6942
+ function resolveResizeCursor(direction) {
6943
+ return direction === "horizontal" ? "col-resize" : "row-resize";
6944
+ }
6945
+ function resolveKeyboardDeltaDirection(key, direction) {
6946
+ if (direction === "horizontal") {
6947
+ return key === "ArrowLeft" ? -1 : key === "ArrowRight" ? 1 : 0;
6948
+ }
6949
+ return key === "ArrowUp" ? -1 : key === "ArrowDown" ? 1 : 0;
6950
+ }
6951
+ function resolveCollapsedPanelStyle(direction) {
6952
+ return direction === "horizontal" ? { flex: "0 0 0px", maxWidth: 0, minWidth: 0, width: 0 } : { flex: "0 0 0px", height: 0, maxHeight: 0, minHeight: 0 };
6953
+ }
6954
+ function resolvePanelStyle(params) {
6955
+ const { configuredSize, direction, isLast, maxSize, minSize } = params;
6956
+ const size = normalizeOptionalSize(configuredSize, minSize, maxSize);
6957
+ const flex = size == null ? "1 1 0" : isLast ? `1 1 ${size}px` : `0 0 ${size}px`;
6958
+ return direction === "horizontal" ? {
6959
+ flex,
6960
+ maxWidth: Number.isFinite(maxSize) ? maxSize : void 0,
6961
+ minWidth: minSize,
6962
+ width: size
6963
+ } : {
6964
+ flex,
6965
+ height: size,
6966
+ maxHeight: Number.isFinite(maxSize) ? maxSize : void 0,
6967
+ minHeight: minSize
6968
+ };
6969
+ }
6970
+ function normalizeOptionalSize(value, minSize, maxSize) {
6971
+ if (typeof value !== "number" || !Number.isFinite(value)) {
6972
+ return void 0;
6973
+ }
6974
+ return clamp3(value, minSize, maxSize);
6975
+ }
6976
+ function normalizePositiveNumber(value, fallback) {
6977
+ return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback;
6978
+ }
6979
+ function normalizeMaxSize(value, minSize) {
6980
+ return typeof value === "number" && Number.isFinite(value) ? Math.max(value, minSize) : Number.POSITIVE_INFINITY;
6981
+ }
6982
+ function clamp3(value, min, max) {
6983
+ if (min > max) {
6984
+ return min;
6985
+ }
6986
+ return Math.min(Math.max(value, min), max);
6987
+ }
6988
+ var ReactAutoComplete = React.forwardRef(function ReactAutoComplete2(props, ref) {
6989
+ const {
6990
+ onChange,
6991
+ onInputValueChange,
6992
+ onPressEnter,
6993
+ options: initialOptions,
6994
+ value,
6995
+ ...restProps
6996
+ } = props;
6997
+ const [options, setOptions] = React.useState(initialOptions);
6998
+ React.useEffect(() => {
6999
+ setOptions(initialOptions);
7000
+ }, [initialOptions]);
7001
+ return /* @__PURE__ */ jsxRuntime.jsx(
7002
+ ReactSelect,
7003
+ {
7004
+ ...restProps,
7005
+ ref,
7006
+ allowCustomValue: true,
7007
+ showSearch: true,
7008
+ value,
7009
+ options,
7010
+ onChange: (nextValue, info) => {
7011
+ onChange?.(
7012
+ options.find((option) => String(option.value) === String(nextValue))?.value ?? nextValue,
7013
+ info
7014
+ );
7015
+ },
7016
+ onInputValueChange: (input) => {
7017
+ onInputValueChange?.(input);
7018
+ onChange?.(input, { trigger: "input" });
7019
+ },
7020
+ onPressEnter: async (input) => {
7021
+ const nextOptions = await onPressEnter?.(input);
7022
+ if (nextOptions) {
7023
+ setOptions(nextOptions);
7024
+ }
7025
+ onChange?.(
7026
+ nextOptions ? resolveAutoCompleteValue(input, nextOptions) : input,
7027
+ { trigger: "keyboard" }
7028
+ );
7029
+ }
7030
+ }
7031
+ );
7032
+ });
7033
+ function resolveAutoCompleteValue(input, options) {
7034
+ const normalizedInput = input.toLowerCase();
7035
+ return options.find(
7036
+ (option) => option.label.toLowerCase() === normalizedInput || String(option.value).toLowerCase() === normalizedInput
7037
+ )?.value ?? input;
7038
+ }
7039
+ var ReactTimePicker = React.forwardRef(
5808
7040
  function ReactTimePicker2(props, ref) {
5809
7041
  const {
5810
7042
  autoFocus,
@@ -5822,22 +7054,22 @@ var ReactTimePicker = react.forwardRef(
5822
7054
  value,
5823
7055
  ...restProps
5824
7056
  } = props;
5825
- const triggerRef = react.useRef(null);
5826
- const inputRef = react.useRef(null);
5827
- const popupRef = react.useRef(null);
5828
- const skipFocusOpenRef = react.useRef(false);
5829
- const [open, setOpen] = react.useState(false);
5830
- const [draftValue, setDraftValue] = react.useState(value ?? "");
5831
- const parsedValue = react.useMemo(() => parseTimeValue(value), [value]);
7057
+ const triggerRef = React.useRef(null);
7058
+ const inputRef = React.useRef(null);
7059
+ const popupRef = React.useRef(null);
7060
+ const skipFocusOpenRef = React.useRef(false);
7061
+ const [open, setOpen] = React.useState(false);
7062
+ const [draftValue, setDraftValue] = React.useState(value ?? "");
7063
+ const parsedValue = React.useMemo(() => parseTimeValue(value), [value]);
5832
7064
  const displayValue = parsedValue ? formatTimeValue(parsedValue) : value ?? "";
5833
7065
  const showClear = allowClear && !disabled && typeof value === "string" && value.trim().length > 0;
5834
- react.useImperativeHandle(ref, () => inputRef.current);
5835
- react.useEffect(() => {
7066
+ React.useImperativeHandle(ref, () => inputRef.current);
7067
+ React.useEffect(() => {
5836
7068
  if (autoFocus) {
5837
7069
  inputRef.current?.focus();
5838
7070
  }
5839
7071
  }, [autoFocus]);
5840
- react.useEffect(() => {
7072
+ React.useEffect(() => {
5841
7073
  setDraftValue(value ?? "");
5842
7074
  }, [value]);
5843
7075
  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-time-wrap`, children: [
@@ -6042,7 +7274,7 @@ function handleInputBlur4(params) {
6042
7274
  setOpen(false);
6043
7275
  onBlur?.(event);
6044
7276
  }
6045
- var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props, ref) {
7277
+ var ReactTimeRangePicker = React.forwardRef(function ReactTimeRangePicker2(props, ref) {
6046
7278
  const {
6047
7279
  autoFocus,
6048
7280
  className,
@@ -6059,23 +7291,23 @@ var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props
6059
7291
  showArrow = true,
6060
7292
  ...restProps
6061
7293
  } = props;
6062
- const triggerRef = react.useRef(null);
6063
- const startInputRef = react.useRef(null);
6064
- const endInputRef = react.useRef(null);
6065
- const popupRef = react.useRef(null);
6066
- const [open, setOpen] = react.useState(false);
6067
- const [activePart, setActivePart] = react.useState("start");
6068
- const skipFocusOpenRef = react.useRef(false);
6069
- const [draftRange, setDraftRange] = react.useState(
7294
+ const triggerRef = React.useRef(null);
7295
+ const startInputRef = React.useRef(null);
7296
+ const endInputRef = React.useRef(null);
7297
+ const popupRef = React.useRef(null);
7298
+ const [open, setOpen] = React.useState(false);
7299
+ const [activePart, setActivePart] = React.useState("start");
7300
+ const skipFocusOpenRef = React.useRef(false);
7301
+ const [draftRange, setDraftRange] = React.useState(
6070
7302
  () => parseTimeRangeValue(value)
6071
7303
  );
6072
- react.useImperativeHandle(ref, () => startInputRef.current);
6073
- react.useEffect(() => {
7304
+ React.useImperativeHandle(ref, () => startInputRef.current);
7305
+ React.useEffect(() => {
6074
7306
  if (autoFocus) {
6075
7307
  startInputRef.current?.focus();
6076
7308
  }
6077
7309
  }, [autoFocus]);
6078
- react.useEffect(() => {
7310
+ React.useEffect(() => {
6079
7311
  setDraftRange(parseTimeRangeValue(value));
6080
7312
  }, [rangeSeparator, value]);
6081
7313
  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-time-wrap`, children: [
@@ -6362,7 +7594,7 @@ function compareTimeValue(left, right) {
6362
7594
  const rightSeconds = Number(rightValue.hour) * 3600 + Number(rightValue.minute) * 60 + Number(rightValue.second);
6363
7595
  return leftSeconds - rightSeconds;
6364
7596
  }
6365
- var ReactYearPicker = react.forwardRef(
7597
+ var ReactYearPicker = React.forwardRef(
6366
7598
  function ReactYearPicker2(props, ref) {
6367
7599
  const {
6368
7600
  autoFocus,
@@ -6380,34 +7612,34 @@ var ReactYearPicker = react.forwardRef(
6380
7612
  value,
6381
7613
  ...restProps
6382
7614
  } = props;
6383
- const triggerRef = react.useRef(null);
6384
- const inputRef = react.useRef(null);
6385
- const popupRef = react.useRef(null);
6386
- const skipFocusOpenRef = react.useRef(false);
6387
- const [open, setOpen] = react.useState(false);
6388
- const [mode, setMode] = react.useState("year");
6389
- const selectedYear = react.useMemo(() => parseYearValue(value), [value]);
6390
- const [panelStartYear, setPanelStartYear] = react.useState(
7615
+ const triggerRef = React.useRef(null);
7616
+ const inputRef = React.useRef(null);
7617
+ const popupRef = React.useRef(null);
7618
+ const skipFocusOpenRef = React.useRef(false);
7619
+ const [open, setOpen] = React.useState(false);
7620
+ const [mode, setMode] = React.useState("year");
7621
+ const selectedYear = React.useMemo(() => parseYearValue(value), [value]);
7622
+ const [panelStartYear, setPanelStartYear] = React.useState(
6391
7623
  () => resolveDecadeStart6(selectedYear ?? (/* @__PURE__ */ new Date()).getFullYear())
6392
7624
  );
6393
7625
  const displayValue = selectedYear == null ? "" : String(selectedYear);
6394
7626
  const showClear = allowClear && !disabled && displayValue.length > 0;
6395
- const yearItems = react.useMemo(() => {
7627
+ const yearItems = React.useMemo(() => {
6396
7628
  return Array.from({ length: 12 }, (_, index) => panelStartYear - 1 + index);
6397
7629
  }, [panelStartYear]);
6398
- const decadePanelStart = react.useMemo(() => {
7630
+ const decadePanelStart = React.useMemo(() => {
6399
7631
  return Math.floor(panelStartYear / 100) * 100;
6400
7632
  }, [panelStartYear]);
6401
- const decadeItems = react.useMemo(() => {
7633
+ const decadeItems = React.useMemo(() => {
6402
7634
  return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
6403
7635
  }, [decadePanelStart]);
6404
- react.useImperativeHandle(ref, () => inputRef.current);
6405
- react.useEffect(() => {
7636
+ React.useImperativeHandle(ref, () => inputRef.current);
7637
+ React.useEffect(() => {
6406
7638
  if (autoFocus) {
6407
7639
  inputRef.current?.focus();
6408
7640
  }
6409
7641
  }, [autoFocus]);
6410
- react.useEffect(() => {
7642
+ React.useEffect(() => {
6411
7643
  if (!open) {
6412
7644
  return;
6413
7645
  }
@@ -6688,6 +7920,7 @@ function resolveDecadeStart6(year) {
6688
7920
  }
6689
7921
 
6690
7922
  exports.REACT_COMPONENT_PREFIX = REACT_COMPONENT_PREFIX;
7923
+ exports.ReactAutoComplete = ReactAutoComplete;
6691
7924
  exports.ReactCheckbox = ReactCheckbox;
6692
7925
  exports.ReactColorPicker = ReactColorPicker;
6693
7926
  exports.ReactContentScaleProvider = ReactContentScaleProvider;
@@ -6695,21 +7928,26 @@ exports.ReactDatePicker = ReactDatePicker;
6695
7928
  exports.ReactDateRangePicker = ReactDateRangePicker;
6696
7929
  exports.ReactDateTimePicker = ReactDateTimePicker;
6697
7930
  exports.ReactDateTimeRangePicker = ReactDateTimeRangePicker;
7931
+ exports.ReactFilterPanel = ReactFilterPanel;
6698
7932
  exports.ReactImagePreview = ReactImagePreview;
6699
7933
  exports.ReactInput = ReactInput;
6700
7934
  exports.ReactInputNumber = ReactInputNumber;
7935
+ exports.ReactInputRange = ReactInputRange;
7936
+ exports.ReactModal = ReactModal;
6701
7937
  exports.ReactMonthPicker = ReactMonthPicker;
6702
7938
  exports.ReactNumberInput = ReactNumberInput;
6703
7939
  exports.ReactPagination = ReactPagination;
6704
7940
  exports.ReactPopconfirm = ReactPopconfirm;
6705
7941
  exports.ReactPopup = ReactPopup;
6706
7942
  exports.ReactQuarterPicker = ReactQuarterPicker;
7943
+ exports.ReactResizablePanels = ReactResizablePanels;
6707
7944
  exports.ReactSelect = ReactSelect;
6708
7945
  exports.ReactTimePicker = ReactTimePicker;
6709
7946
  exports.ReactTimeRangePicker = ReactTimeRangePicker;
6710
7947
  exports.ReactTransition = ReactTransition;
6711
7948
  exports.ReactVirtualList = ReactVirtualList;
6712
7949
  exports.ReactYearPicker = ReactYearPicker;
7950
+ exports.resolveResizablePanelSizes = resolveResizablePanelSizes;
6713
7951
  exports.useReactContentScale = useReactContentScale;
6714
7952
  exports.useReactTransition = useReactTransition;
6715
7953
  //# sourceMappingURL=index.cjs.map