@canvas-components/react-components 0.3.16 → 0.3.18

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 (3) hide show
  1. package/dist/index.cjs +46 -13
  2. package/dist/index.js +46 -13
  3. package/package.json +1 -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-label {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\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()) {
@@ -1058,9 +1062,16 @@ var ReactSelect = React.forwardRef(
1058
1062
  }
1059
1063
  selectOption(option, "mouse");
1060
1064
  },
1061
- children: renderSelectOptionLabel(
1062
- option.label,
1063
- showSearch ? searchKeyword : ""
1065
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1066
+ "span",
1067
+ {
1068
+ className: `${REACT_COMPONENT_PREFIX}-select-option-label`,
1069
+ title: option.label,
1070
+ children: renderSelectOptionLabel(
1071
+ option.label,
1072
+ showSearch ? searchKeyword : ""
1073
+ )
1074
+ }
1064
1075
  )
1065
1076
  },
1066
1077
  String(option.value)
@@ -1085,11 +1096,24 @@ function filterSelectOptions(options, input, showSearch, filterOption) {
1085
1096
  return options.filter((option) => filterOption(search, option));
1086
1097
  }
1087
1098
  const normalizedSearch = search.toLowerCase();
1088
- return options.filter((option) => {
1089
- return option.label.toLowerCase().includes(normalizedSearch) || String(option.value).toLowerCase().includes(normalizedSearch);
1090
- });
1099
+ return options.map((option, index) => ({
1100
+ option,
1101
+ index,
1102
+ score: Math.max(
1103
+ scoreSelectMatch(option.label, normalizedSearch),
1104
+ scoreSelectMatch(String(option.value), normalizedSearch)
1105
+ )
1106
+ })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score || a.index - b.index).map(({ option }) => option);
1107
+ }
1108
+ function scoreSelectMatch(text, search) {
1109
+ const normalized = text.toLowerCase();
1110
+ const index = normalized.indexOf(search);
1111
+ if (index < 0) return 0;
1112
+ if (normalized === search) return 3;
1113
+ return (index === 0 ? 2 : 1) + search.length / normalized.length;
1091
1114
  }
1092
- function resolveSelectEnterOption(options) {
1115
+ function resolveSelectEnterOption(options, activeIndex = -1) {
1116
+ if (options[activeIndex] && !options[activeIndex].disabled) return options[activeIndex];
1093
1117
  return options.find((option) => !option.disabled);
1094
1118
  }
1095
1119
  function resolveSelectKeywordOnOpen(selectedLabel) {
@@ -1229,12 +1253,12 @@ function ReactFilterPanel(props) {
1229
1253
  secondConditionSecondValue: second.secondValue ?? ""
1230
1254
  });
1231
1255
  };
1232
- const toggle = (keys, checked) => {
1256
+ const toggle = (keys, checked, applyImmediately = true) => {
1233
1257
  const next = new Set(draft.selectedKeys ?? []);
1234
1258
  keys.forEach((key) => checked ? next.add(key) : next.delete(key));
1235
1259
  const value = { ...draft, filterType: "value", selectedKeys: Array.from(next) };
1236
1260
  setDraft(value);
1237
- if (request.filterOptionImmediateApply) request.onApply(value);
1261
+ if (applyImmediately && request.filterOptionImmediateApply) request.onApply(value);
1238
1262
  };
1239
1263
  const apply = () => {
1240
1264
  request.onApply({ ...draft, filterType: tab });
@@ -1286,7 +1310,7 @@ function ReactFilterPanel(props) {
1286
1310
  {
1287
1311
  checked: allChecked,
1288
1312
  indeterminate: selectedCount > 0 && !allChecked,
1289
- onChange: (event) => toggle(visibleKeys, !!event.target.checked)
1313
+ onChange: (event) => toggle(visibleKeys, !!event.target.checked, false)
1290
1314
  }
1291
1315
  ),
1292
1316
  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -8229,6 +8253,13 @@ function ReactCascader(props) {
8229
8253
  if (!interactive) return;
8230
8254
  setOpen(true);
8231
8255
  if (!multiple) setPath(selected);
8256
+ if (!open) {
8257
+ const selectedIndex = options.indexOf(selected[0]);
8258
+ setFocus({
8259
+ column: 0,
8260
+ index: selectedIndex >= 0 && !options[selectedIndex].disabled ? selectedIndex : options.findIndex((option) => !option.disabled)
8261
+ });
8262
+ }
8232
8263
  };
8233
8264
  return /* @__PURE__ */ jsxRuntime.jsxs(
8234
8265
  "div",
@@ -8275,6 +8306,7 @@ function ReactCascader(props) {
8275
8306
  if (event.defaultPrevented || !interactive) return;
8276
8307
  if (event.key === "Escape") {
8277
8308
  event.preventDefault();
8309
+ event.stopPropagation();
8278
8310
  setOpen(false);
8279
8311
  setKeyword("");
8280
8312
  setTyping(false);
@@ -8289,6 +8321,7 @@ function ReactCascader(props) {
8289
8321
  ].includes(event.key))
8290
8322
  return;
8291
8323
  event.preventDefault();
8324
+ event.stopPropagation();
8292
8325
  setOpen(true);
8293
8326
  const column = searching ? 0 : Math.min(focus.column, columns.length - 1);
8294
8327
  const items = searching ? results.map((result) => result[result.length - 1]) : columns[column];
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-label {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\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()) {
@@ -1037,9 +1041,16 @@ var ReactSelect = forwardRef(
1037
1041
  }
1038
1042
  selectOption(option, "mouse");
1039
1043
  },
1040
- children: renderSelectOptionLabel(
1041
- option.label,
1042
- showSearch ? searchKeyword : ""
1044
+ children: /* @__PURE__ */ jsx(
1045
+ "span",
1046
+ {
1047
+ className: `${REACT_COMPONENT_PREFIX}-select-option-label`,
1048
+ title: option.label,
1049
+ children: renderSelectOptionLabel(
1050
+ option.label,
1051
+ showSearch ? searchKeyword : ""
1052
+ )
1053
+ }
1043
1054
  )
1044
1055
  },
1045
1056
  String(option.value)
@@ -1064,11 +1075,24 @@ function filterSelectOptions(options, input, showSearch, filterOption) {
1064
1075
  return options.filter((option) => filterOption(search, option));
1065
1076
  }
1066
1077
  const normalizedSearch = search.toLowerCase();
1067
- return options.filter((option) => {
1068
- return option.label.toLowerCase().includes(normalizedSearch) || String(option.value).toLowerCase().includes(normalizedSearch);
1069
- });
1078
+ return options.map((option, index) => ({
1079
+ option,
1080
+ index,
1081
+ score: Math.max(
1082
+ scoreSelectMatch(option.label, normalizedSearch),
1083
+ scoreSelectMatch(String(option.value), normalizedSearch)
1084
+ )
1085
+ })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score || a.index - b.index).map(({ option }) => option);
1086
+ }
1087
+ function scoreSelectMatch(text, search) {
1088
+ const normalized = text.toLowerCase();
1089
+ const index = normalized.indexOf(search);
1090
+ if (index < 0) return 0;
1091
+ if (normalized === search) return 3;
1092
+ return (index === 0 ? 2 : 1) + search.length / normalized.length;
1070
1093
  }
1071
- function resolveSelectEnterOption(options) {
1094
+ function resolveSelectEnterOption(options, activeIndex = -1) {
1095
+ if (options[activeIndex] && !options[activeIndex].disabled) return options[activeIndex];
1072
1096
  return options.find((option) => !option.disabled);
1073
1097
  }
1074
1098
  function resolveSelectKeywordOnOpen(selectedLabel) {
@@ -1208,12 +1232,12 @@ function ReactFilterPanel(props) {
1208
1232
  secondConditionSecondValue: second.secondValue ?? ""
1209
1233
  });
1210
1234
  };
1211
- const toggle = (keys, checked) => {
1235
+ const toggle = (keys, checked, applyImmediately = true) => {
1212
1236
  const next = new Set(draft.selectedKeys ?? []);
1213
1237
  keys.forEach((key) => checked ? next.add(key) : next.delete(key));
1214
1238
  const value = { ...draft, filterType: "value", selectedKeys: Array.from(next) };
1215
1239
  setDraft(value);
1216
- if (request.filterOptionImmediateApply) request.onApply(value);
1240
+ if (applyImmediately && request.filterOptionImmediateApply) request.onApply(value);
1217
1241
  };
1218
1242
  const apply = () => {
1219
1243
  request.onApply({ ...draft, filterType: tab });
@@ -1265,7 +1289,7 @@ function ReactFilterPanel(props) {
1265
1289
  {
1266
1290
  checked: allChecked,
1267
1291
  indeterminate: selectedCount > 0 && !allChecked,
1268
- onChange: (event) => toggle(visibleKeys, !!event.target.checked)
1292
+ onChange: (event) => toggle(visibleKeys, !!event.target.checked, false)
1269
1293
  }
1270
1294
  ),
1271
1295
  /* @__PURE__ */ jsxs("span", { children: [
@@ -8208,6 +8232,13 @@ function ReactCascader(props) {
8208
8232
  if (!interactive) return;
8209
8233
  setOpen(true);
8210
8234
  if (!multiple) setPath(selected);
8235
+ if (!open) {
8236
+ const selectedIndex = options.indexOf(selected[0]);
8237
+ setFocus({
8238
+ column: 0,
8239
+ index: selectedIndex >= 0 && !options[selectedIndex].disabled ? selectedIndex : options.findIndex((option) => !option.disabled)
8240
+ });
8241
+ }
8211
8242
  };
8212
8243
  return /* @__PURE__ */ jsxs(
8213
8244
  "div",
@@ -8254,6 +8285,7 @@ function ReactCascader(props) {
8254
8285
  if (event.defaultPrevented || !interactive) return;
8255
8286
  if (event.key === "Escape") {
8256
8287
  event.preventDefault();
8288
+ event.stopPropagation();
8257
8289
  setOpen(false);
8258
8290
  setKeyword("");
8259
8291
  setTyping(false);
@@ -8268,6 +8300,7 @@ function ReactCascader(props) {
8268
8300
  ].includes(event.key))
8269
8301
  return;
8270
8302
  event.preventDefault();
8303
+ event.stopPropagation();
8271
8304
  setOpen(true);
8272
8305
  const column = searching ? 0 : Math.min(focus.column, columns.length - 1);
8273
8306
  const items = searching ? results.map((result) => result[result.length - 1]) : columns[column];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canvas-components/react-components",
3
- "version": "0.3.16",
3
+ "version": "0.3.18",
4
4
  "description": "Shared React UI primitives for canvas-components adapters.",
5
5
  "license": "MIT",
6
6
  "type": "module",