@canvas-components/react-components 0.3.15 → 0.3.17

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 (7) hide show
  1. package/dist/index.cjs +47 -13
  2. package/dist/index.d.cts +3 -1
  3. package/dist/index.d.ts +3 -1
  4. package/dist/index.js +47 -14
  5. package/package.json +1 -1
  6. package/dist/index.cjs.map +0 -1
  7. package/dist/index.js.map +0 -1
package/dist/index.cjs CHANGED
@@ -738,7 +738,7 @@ var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, re
738
738
  });
739
739
 
740
740
  // src/components/select/style.css
741
- 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 pointer-events: none;\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.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader: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.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader: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');
741
+ 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.canvas-react-select:focus-within {\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 pointer-events: none;\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.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader: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.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader: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');
742
742
  var ReactSelect = React.forwardRef(
743
743
  function ReactSelect2(props, ref) {
744
744
  const {
@@ -801,11 +801,15 @@ var ReactSelect = React.forwardRef(
801
801
  }
802
802
  }, [open, searching, showSearch]);
803
803
  React.useEffect(() => {
804
+ if (searching && searchKeyword.trim()) {
805
+ setActiveIndex(filteredOptions.findIndex((option) => !option.disabled));
806
+ return;
807
+ }
804
808
  const nextIndex = filteredOptions.findIndex(
805
809
  (option) => String(option.value) === String(value ?? "")
806
810
  );
807
811
  setActiveIndex(nextIndex >= 0 ? nextIndex : 0);
808
- }, [filteredOptions, value]);
812
+ }, [filteredOptions, value, searching, searchKeyword]);
809
813
  React.useEffect(() => {
810
814
  if (!open) {
811
815
  return;
@@ -945,7 +949,7 @@ var ReactSelect = React.forwardRef(
945
949
  openSelect();
946
950
  return;
947
951
  }
948
- const targetOption = resolveSelectEnterOption(filteredOptions);
952
+ const targetOption = resolveSelectEnterOption(filteredOptions, activeIndex);
949
953
  if (targetOption && !targetOption.disabled) {
950
954
  selectOption(targetOption, "keyboard");
951
955
  } else if (allowCustomValue && keyword.trim()) {
@@ -1085,11 +1089,24 @@ function filterSelectOptions(options, input, showSearch, filterOption) {
1085
1089
  return options.filter((option) => filterOption(search, option));
1086
1090
  }
1087
1091
  const normalizedSearch = search.toLowerCase();
1088
- return options.filter((option) => {
1089
- return option.label.toLowerCase().includes(normalizedSearch) || String(option.value).toLowerCase().includes(normalizedSearch);
1090
- });
1092
+ return options.map((option, index) => ({
1093
+ option,
1094
+ index,
1095
+ score: Math.max(
1096
+ scoreSelectMatch(option.label, normalizedSearch),
1097
+ scoreSelectMatch(String(option.value), normalizedSearch)
1098
+ )
1099
+ })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score || a.index - b.index).map(({ option }) => option);
1100
+ }
1101
+ function scoreSelectMatch(text, search) {
1102
+ const normalized = text.toLowerCase();
1103
+ const index = normalized.indexOf(search);
1104
+ if (index < 0) return 0;
1105
+ if (normalized === search) return 3;
1106
+ return (index === 0 ? 2 : 1) + search.length / normalized.length;
1091
1107
  }
1092
- function resolveSelectEnterOption(options) {
1108
+ function resolveSelectEnterOption(options, activeIndex = -1) {
1109
+ if (options[activeIndex] && !options[activeIndex].disabled) return options[activeIndex];
1093
1110
  return options.find((option) => !option.disabled);
1094
1111
  }
1095
1112
  function resolveSelectKeywordOnOpen(selectedLabel) {
@@ -1229,12 +1246,12 @@ function ReactFilterPanel(props) {
1229
1246
  secondConditionSecondValue: second.secondValue ?? ""
1230
1247
  });
1231
1248
  };
1232
- const toggle = (keys, checked) => {
1249
+ const toggle = (keys, checked, applyImmediately = true) => {
1233
1250
  const next = new Set(draft.selectedKeys ?? []);
1234
1251
  keys.forEach((key) => checked ? next.add(key) : next.delete(key));
1235
1252
  const value = { ...draft, filterType: "value", selectedKeys: Array.from(next) };
1236
1253
  setDraft(value);
1237
- if (request.filterOptionImmediateApply) request.onApply(value);
1254
+ if (applyImmediately && request.filterOptionImmediateApply) request.onApply(value);
1238
1255
  };
1239
1256
  const apply = () => {
1240
1257
  request.onApply({ ...draft, filterType: tab });
@@ -1286,7 +1303,7 @@ function ReactFilterPanel(props) {
1286
1303
  {
1287
1304
  checked: allChecked,
1288
1305
  indeterminate: selectedCount > 0 && !allChecked,
1289
- onChange: (event) => toggle(visibleKeys, !!event.target.checked)
1306
+ onChange: (event) => toggle(visibleKeys, !!event.target.checked, false)
1290
1307
  }
1291
1308
  ),
1292
1309
  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -6515,6 +6532,14 @@ if (typeof globalThis.addEventListener === "function") {
6515
6532
  listeners.forEach((listener) => listener());
6516
6533
  });
6517
6534
  }
6535
+ function resolveReactScrollbarMode(value) {
6536
+ const modes = ["horizontal", "vertical"].filter((axis) => value?.[axis] !== false && value?.[axis]?.visible !== false).map((axis) => {
6537
+ const axisValue = value?.[axis];
6538
+ return axisValue && axisValue.mode || value?.mode || "scrollbar";
6539
+ });
6540
+ if (modes.length === 0) return value?.mode ?? "scrollbar";
6541
+ return modes.every((mode) => mode === modes[0]) ? modes[0] : void 0;
6542
+ }
6518
6543
  var rowStyle = {
6519
6544
  display: "grid",
6520
6545
  gridTemplateColumns: "108px minmax(0, 1fr)",
@@ -6568,7 +6593,8 @@ function ReactScrollbarSettingsDialog(props) {
6568
6593
  /* @__PURE__ */ jsxRuntime.jsx(
6569
6594
  ReactSelect,
6570
6595
  {
6571
- value: draft.mode ?? "scrollbar",
6596
+ value: resolveReactScrollbarMode(draft),
6597
+ placeholder: "\u6309\u8F74\u5206\u522B\u8BBE\u7F6E",
6572
6598
  options: [
6573
6599
  { label: "\u6EDA\u52A8\u6761", value: "scrollbar" },
6574
6600
  { label: "\u6309\u94AE", value: "button" }
@@ -8220,6 +8246,13 @@ function ReactCascader(props) {
8220
8246
  if (!interactive) return;
8221
8247
  setOpen(true);
8222
8248
  if (!multiple) setPath(selected);
8249
+ if (!open) {
8250
+ const selectedIndex = options.indexOf(selected[0]);
8251
+ setFocus({
8252
+ column: 0,
8253
+ index: selectedIndex >= 0 && !options[selectedIndex].disabled ? selectedIndex : options.findIndex((option) => !option.disabled)
8254
+ });
8255
+ }
8223
8256
  };
8224
8257
  return /* @__PURE__ */ jsxRuntime.jsxs(
8225
8258
  "div",
@@ -8266,6 +8299,7 @@ function ReactCascader(props) {
8266
8299
  if (event.defaultPrevented || !interactive) return;
8267
8300
  if (event.key === "Escape") {
8268
8301
  event.preventDefault();
8302
+ event.stopPropagation();
8269
8303
  setOpen(false);
8270
8304
  setKeyword("");
8271
8305
  setTyping(false);
@@ -8280,6 +8314,7 @@ function ReactCascader(props) {
8280
8314
  ].includes(event.key))
8281
8315
  return;
8282
8316
  event.preventDefault();
8317
+ event.stopPropagation();
8283
8318
  setOpen(true);
8284
8319
  const column = searching ? 0 : Math.min(focus.column, columns.length - 1);
8285
8320
  const items = searching ? results.map((result) => result[result.length - 1]) : columns[column];
@@ -9826,6 +9861,7 @@ exports.ReactVirtualList = ReactVirtualList;
9826
9861
  exports.ReactYearPicker = ReactYearPicker;
9827
9862
  exports.getSharedScrollbarSettings = getSharedScrollbarSettings;
9828
9863
  exports.reactMessage = reactMessage;
9864
+ exports.resolveReactScrollbarMode = resolveReactScrollbarMode;
9829
9865
  exports.resolveResizablePanelSizes = resolveResizablePanelSizes;
9830
9866
  exports.setSharedScrollbarSettings = setSharedScrollbarSettings;
9831
9867
  exports.subscribeSharedScrollbarSettings = subscribeSharedScrollbarSettings;
@@ -9833,5 +9869,3 @@ exports.useReactContentScale = useReactContentScale;
9833
9869
  exports.useReactForm = useReactForm;
9834
9870
  exports.useReactFormWatch = useReactFormWatch;
9835
9871
  exports.useReactTransition = useReactTransition;
9836
- //# sourceMappingURL=index.cjs.map
9837
- //# sourceMappingURL=index.cjs.map
package/dist/index.d.cts CHANGED
@@ -465,6 +465,8 @@ interface ReactScrollbarAxisSettings {
465
465
  buttonHoverBackgroundColor?: string;
466
466
  buttonPressedBackgroundColor?: string;
467
467
  }
468
+ /** 根据实际启用的轴解析菜单中的统一模式；两轴不同时不预选模式。 */
469
+ declare function resolveReactScrollbarMode(value?: ReactScrollbarSettings): "scrollbar" | "button" | undefined;
468
470
  /** 同时供列表与透视表使用的滚动条配置弹窗。 */
469
471
  declare function ReactScrollbarSettingsDialog(props: {
470
472
  value?: ReactScrollbarSettings;
@@ -1408,4 +1410,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
1408
1410
  */
1409
1411
  declare const REACT_COMPONENT_PREFIX = "canvas-react";
1410
1412
 
1411
- export { type CascaderCheckedStrategy, type CascaderPath, REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactScrollbarPositionDialog, type ReactScrollbarSettings, ReactScrollbarSettingsDialog, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactTreeSelect, type ReactTreeSelectChangeInfo, type TreeSelectNode as ReactTreeSelectNode, type ReactTreeSelectProps, type ReactTreeSelectValue, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, type SharedScrollbarSettings, getSharedScrollbarSettings, reactMessage, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
1413
+ export { type CascaderCheckedStrategy, type CascaderPath, REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactScrollbarPositionDialog, type ReactScrollbarSettings, ReactScrollbarSettingsDialog, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactTreeSelect, type ReactTreeSelectChangeInfo, type TreeSelectNode as ReactTreeSelectNode, type ReactTreeSelectProps, type ReactTreeSelectValue, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, type SharedScrollbarSettings, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
package/dist/index.d.ts CHANGED
@@ -465,6 +465,8 @@ interface ReactScrollbarAxisSettings {
465
465
  buttonHoverBackgroundColor?: string;
466
466
  buttonPressedBackgroundColor?: string;
467
467
  }
468
+ /** 根据实际启用的轴解析菜单中的统一模式；两轴不同时不预选模式。 */
469
+ declare function resolveReactScrollbarMode(value?: ReactScrollbarSettings): "scrollbar" | "button" | undefined;
468
470
  /** 同时供列表与透视表使用的滚动条配置弹窗。 */
469
471
  declare function ReactScrollbarSettingsDialog(props: {
470
472
  value?: ReactScrollbarSettings;
@@ -1408,4 +1410,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
1408
1410
  */
1409
1411
  declare const REACT_COMPONENT_PREFIX = "canvas-react";
1410
1412
 
1411
- export { type CascaderCheckedStrategy, type CascaderPath, REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactScrollbarPositionDialog, type ReactScrollbarSettings, ReactScrollbarSettingsDialog, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactTreeSelect, type ReactTreeSelectChangeInfo, type TreeSelectNode as ReactTreeSelectNode, type ReactTreeSelectProps, type ReactTreeSelectValue, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, type SharedScrollbarSettings, getSharedScrollbarSettings, reactMessage, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
1413
+ export { type CascaderCheckedStrategy, type CascaderPath, REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactScrollbarPositionDialog, type ReactScrollbarSettings, ReactScrollbarSettingsDialog, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactTreeSelect, type ReactTreeSelectChangeInfo, type TreeSelectNode as ReactTreeSelectNode, type ReactTreeSelectProps, type ReactTreeSelectValue, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, type SharedScrollbarSettings, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
package/dist/index.js CHANGED
@@ -717,7 +717,7 @@ var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
717
717
  });
718
718
 
719
719
  // src/components/select/style.css
720
- 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 pointer-events: none;\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.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader: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.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader: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');
720
+ 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.canvas-react-select:focus-within {\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 pointer-events: none;\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.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader: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.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader: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');
721
721
  var ReactSelect = forwardRef(
722
722
  function ReactSelect2(props, ref) {
723
723
  const {
@@ -780,11 +780,15 @@ var ReactSelect = forwardRef(
780
780
  }
781
781
  }, [open, searching, showSearch]);
782
782
  useEffect(() => {
783
+ if (searching && searchKeyword.trim()) {
784
+ setActiveIndex(filteredOptions.findIndex((option) => !option.disabled));
785
+ return;
786
+ }
783
787
  const nextIndex = filteredOptions.findIndex(
784
788
  (option) => String(option.value) === String(value ?? "")
785
789
  );
786
790
  setActiveIndex(nextIndex >= 0 ? nextIndex : 0);
787
- }, [filteredOptions, value]);
791
+ }, [filteredOptions, value, searching, searchKeyword]);
788
792
  useEffect(() => {
789
793
  if (!open) {
790
794
  return;
@@ -924,7 +928,7 @@ var ReactSelect = forwardRef(
924
928
  openSelect();
925
929
  return;
926
930
  }
927
- const targetOption = resolveSelectEnterOption(filteredOptions);
931
+ const targetOption = resolveSelectEnterOption(filteredOptions, activeIndex);
928
932
  if (targetOption && !targetOption.disabled) {
929
933
  selectOption(targetOption, "keyboard");
930
934
  } else if (allowCustomValue && keyword.trim()) {
@@ -1064,11 +1068,24 @@ function filterSelectOptions(options, input, showSearch, filterOption) {
1064
1068
  return options.filter((option) => filterOption(search, option));
1065
1069
  }
1066
1070
  const normalizedSearch = search.toLowerCase();
1067
- return options.filter((option) => {
1068
- return option.label.toLowerCase().includes(normalizedSearch) || String(option.value).toLowerCase().includes(normalizedSearch);
1069
- });
1071
+ return options.map((option, index) => ({
1072
+ option,
1073
+ index,
1074
+ score: Math.max(
1075
+ scoreSelectMatch(option.label, normalizedSearch),
1076
+ scoreSelectMatch(String(option.value), normalizedSearch)
1077
+ )
1078
+ })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score || a.index - b.index).map(({ option }) => option);
1079
+ }
1080
+ function scoreSelectMatch(text, search) {
1081
+ const normalized = text.toLowerCase();
1082
+ const index = normalized.indexOf(search);
1083
+ if (index < 0) return 0;
1084
+ if (normalized === search) return 3;
1085
+ return (index === 0 ? 2 : 1) + search.length / normalized.length;
1070
1086
  }
1071
- function resolveSelectEnterOption(options) {
1087
+ function resolveSelectEnterOption(options, activeIndex = -1) {
1088
+ if (options[activeIndex] && !options[activeIndex].disabled) return options[activeIndex];
1072
1089
  return options.find((option) => !option.disabled);
1073
1090
  }
1074
1091
  function resolveSelectKeywordOnOpen(selectedLabel) {
@@ -1208,12 +1225,12 @@ function ReactFilterPanel(props) {
1208
1225
  secondConditionSecondValue: second.secondValue ?? ""
1209
1226
  });
1210
1227
  };
1211
- const toggle = (keys, checked) => {
1228
+ const toggle = (keys, checked, applyImmediately = true) => {
1212
1229
  const next = new Set(draft.selectedKeys ?? []);
1213
1230
  keys.forEach((key) => checked ? next.add(key) : next.delete(key));
1214
1231
  const value = { ...draft, filterType: "value", selectedKeys: Array.from(next) };
1215
1232
  setDraft(value);
1216
- if (request.filterOptionImmediateApply) request.onApply(value);
1233
+ if (applyImmediately && request.filterOptionImmediateApply) request.onApply(value);
1217
1234
  };
1218
1235
  const apply = () => {
1219
1236
  request.onApply({ ...draft, filterType: tab });
@@ -1265,7 +1282,7 @@ function ReactFilterPanel(props) {
1265
1282
  {
1266
1283
  checked: allChecked,
1267
1284
  indeterminate: selectedCount > 0 && !allChecked,
1268
- onChange: (event) => toggle(visibleKeys, !!event.target.checked)
1285
+ onChange: (event) => toggle(visibleKeys, !!event.target.checked, false)
1269
1286
  }
1270
1287
  ),
1271
1288
  /* @__PURE__ */ jsxs("span", { children: [
@@ -6494,6 +6511,14 @@ if (typeof globalThis.addEventListener === "function") {
6494
6511
  listeners.forEach((listener) => listener());
6495
6512
  });
6496
6513
  }
6514
+ function resolveReactScrollbarMode(value) {
6515
+ const modes = ["horizontal", "vertical"].filter((axis) => value?.[axis] !== false && value?.[axis]?.visible !== false).map((axis) => {
6516
+ const axisValue = value?.[axis];
6517
+ return axisValue && axisValue.mode || value?.mode || "scrollbar";
6518
+ });
6519
+ if (modes.length === 0) return value?.mode ?? "scrollbar";
6520
+ return modes.every((mode) => mode === modes[0]) ? modes[0] : void 0;
6521
+ }
6497
6522
  var rowStyle = {
6498
6523
  display: "grid",
6499
6524
  gridTemplateColumns: "108px minmax(0, 1fr)",
@@ -6547,7 +6572,8 @@ function ReactScrollbarSettingsDialog(props) {
6547
6572
  /* @__PURE__ */ jsx(
6548
6573
  ReactSelect,
6549
6574
  {
6550
- value: draft.mode ?? "scrollbar",
6575
+ value: resolveReactScrollbarMode(draft),
6576
+ placeholder: "\u6309\u8F74\u5206\u522B\u8BBE\u7F6E",
6551
6577
  options: [
6552
6578
  { label: "\u6EDA\u52A8\u6761", value: "scrollbar" },
6553
6579
  { label: "\u6309\u94AE", value: "button" }
@@ -8199,6 +8225,13 @@ function ReactCascader(props) {
8199
8225
  if (!interactive) return;
8200
8226
  setOpen(true);
8201
8227
  if (!multiple) setPath(selected);
8228
+ if (!open) {
8229
+ const selectedIndex = options.indexOf(selected[0]);
8230
+ setFocus({
8231
+ column: 0,
8232
+ index: selectedIndex >= 0 && !options[selectedIndex].disabled ? selectedIndex : options.findIndex((option) => !option.disabled)
8233
+ });
8234
+ }
8202
8235
  };
8203
8236
  return /* @__PURE__ */ jsxs(
8204
8237
  "div",
@@ -8245,6 +8278,7 @@ function ReactCascader(props) {
8245
8278
  if (event.defaultPrevented || !interactive) return;
8246
8279
  if (event.key === "Escape") {
8247
8280
  event.preventDefault();
8281
+ event.stopPropagation();
8248
8282
  setOpen(false);
8249
8283
  setKeyword("");
8250
8284
  setTyping(false);
@@ -8259,6 +8293,7 @@ function ReactCascader(props) {
8259
8293
  ].includes(event.key))
8260
8294
  return;
8261
8295
  event.preventDefault();
8296
+ event.stopPropagation();
8262
8297
  setOpen(true);
8263
8298
  const column = searching ? 0 : Math.min(focus.column, columns.length - 1);
8264
8299
  const items = searching ? results.map((result) => result[result.length - 1]) : columns[column];
@@ -9763,6 +9798,4 @@ function resolveDecadeStart6(year) {
9763
9798
  return Math.floor(year / 10) * 10;
9764
9799
  }
9765
9800
 
9766
- export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCascader, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactScrollbarPositionDialog, ReactScrollbarSettingsDialog, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactTreeSelect, ReactVirtualList, ReactYearPicker, getSharedScrollbarSettings, reactMessage, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
9767
- //# sourceMappingURL=index.js.map
9768
- //# sourceMappingURL=index.js.map
9801
+ export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCascader, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactScrollbarPositionDialog, ReactScrollbarSettingsDialog, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactTreeSelect, ReactVirtualList, ReactYearPicker, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canvas-components/react-components",
3
- "version": "0.3.15",
3
+ "version": "0.3.17",
4
4
  "description": "Shared React UI primitives for canvas-components adapters.",
5
5
  "license": "MIT",
6
6
  "type": "module",