@yamada-ui/autocomplete 2.0.0-next-20240613232518 → 2.0.0-next-20240615222442

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.js CHANGED
@@ -160,8 +160,7 @@ var flattenItems = (items) => {
160
160
  var _a;
161
161
  const { isDisabled, isFocusable } = item;
162
162
  const trulyDisabled = !!isDisabled && !isFocusable;
163
- if (trulyDisabled)
164
- return;
163
+ if (trulyDisabled) return;
165
164
  if ("items" in item) {
166
165
  return filterItems((_a = item.items) != null ? _a : []);
167
166
  } else {
@@ -296,23 +295,18 @@ var useAutocomplete = ({
296
295
  });
297
296
  const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
298
297
  const onOpen = (0, import_react.useCallback)(() => {
299
- if (formControlProps.disabled || formControlProps.readOnly)
300
- return;
301
- if (!allowCreate && (isEmpty || isAllSelected))
302
- return;
298
+ if (formControlProps.disabled || formControlProps.readOnly) return;
299
+ if (!allowCreate && (isEmpty || isAllSelected)) return;
303
300
  onInternalOpen();
304
- if (inputRef.current)
305
- inputRef.current.focus();
301
+ if (inputRef.current) inputRef.current.focus();
306
302
  }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
307
303
  const onFocusFirst = (0, import_react.useCallback)(() => {
308
304
  const id2 = setTimeout(() => {
309
- if (isEmpty || isAllSelected)
310
- return;
305
+ if (isEmpty || isAllSelected) return;
311
306
  const first = descendants.enabledFirstValue(
312
307
  ({ node }) => "target" in node.dataset
313
308
  );
314
- if (!first)
315
- return;
309
+ if (!first) return;
316
310
  if (!isMulti || !omitSelectedValues) {
317
311
  setFocusedIndex(first.index);
318
312
  } else {
@@ -336,13 +330,11 @@ var useAutocomplete = ({
336
330
  ]);
337
331
  const onFocusLast = (0, import_react.useCallback)(() => {
338
332
  const id2 = setTimeout(() => {
339
- if (isEmpty || isAllSelected)
340
- return;
333
+ if (isEmpty || isAllSelected) return;
341
334
  const last = descendants.enabledLastValue(
342
335
  ({ node }) => "target" in node.dataset
343
336
  );
344
- if (!last)
345
- return;
337
+ if (!last) return;
346
338
  if (!isMulti || !omitSelectedValues) {
347
339
  setFocusedIndex(last.index);
348
340
  } else {
@@ -373,8 +365,7 @@ var useAutocomplete = ({
373
365
  return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
374
366
  }
375
367
  );
376
- if (selected)
377
- setFocusedIndex(selected.index);
368
+ if (selected) setFocusedIndex(selected.index);
378
369
  });
379
370
  timeoutIds.current.add(id2);
380
371
  }, [descendants, isMulti, value]);
@@ -386,8 +377,7 @@ var useAutocomplete = ({
386
377
  index,
387
378
  ({ node }) => "target" in node.dataset
388
379
  );
389
- if (!next)
390
- return;
380
+ if (!next) return;
391
381
  if (!isMulti || !omitSelectedValues) {
392
382
  setFocusedIndex(next.index);
393
383
  } else {
@@ -418,8 +408,7 @@ var useAutocomplete = ({
418
408
  index,
419
409
  ({ node }) => "target" in node.dataset
420
410
  );
421
- if (!prev)
422
- return;
411
+ if (!prev) return;
423
412
  if (!isMulti || !omitSelectedValues) {
424
413
  setFocusedIndex(prev.index);
425
414
  } else {
@@ -473,8 +462,7 @@ var useAutocomplete = ({
473
462
  values.forEach(({ node }) => {
474
463
  node.dataset.target = "";
475
464
  });
476
- if (runFocus)
477
- onFocusFirst();
465
+ if (runFocus) onFocusFirst();
478
466
  setIsHit(true);
479
467
  },
480
468
  [descendants, onFocusFirst]
@@ -544,10 +532,8 @@ var useAutocomplete = ({
544
532
  }
545
533
  ).length > 0;
546
534
  onChangeLabel(newValue);
547
- if (allowFree || isHit2)
548
- setInputValue("");
549
- if (isMulti && runRebirth)
550
- rebirthOptions(false);
535
+ if (allowFree || isHit2) setInputValue("");
536
+ if (isMulti && runRebirth) rebirthOptions(false);
551
537
  },
552
538
  [
553
539
  allowFree,
@@ -564,14 +550,11 @@ var useAutocomplete = ({
564
550
  let enabledValue = descendants.value(focusedIndex);
565
551
  if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
566
552
  enabledValue = void 0;
567
- if (!enabledValue)
568
- return;
553
+ if (!enabledValue) return;
569
554
  const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
570
555
  onChange(value2);
571
- if (closeOnSelect)
572
- onClose();
573
- if (omitSelectedValues)
574
- onFocusNext();
556
+ if (closeOnSelect) onClose();
557
+ if (omitSelectedValues) onFocusNext();
575
558
  }, [
576
559
  closeOnSelect,
577
560
  descendants,
@@ -583,8 +566,7 @@ var useAutocomplete = ({
583
566
  ]);
584
567
  const onSearch = (0, import_react.useCallback)(
585
568
  (ev) => {
586
- if (!isOpen)
587
- onOpen();
569
+ if (!isOpen) onOpen();
588
570
  onSearchProp == null ? void 0 : onSearchProp(ev);
589
571
  const value2 = ev.target.value;
590
572
  const computedValue = format(value2);
@@ -605,12 +587,10 @@ var useAutocomplete = ({
605
587
  }, []);
606
588
  const onCreate = (0, import_react.useCallback)(() => {
607
589
  var _a, _b;
608
- if (!listRef.current)
609
- return;
590
+ if (!listRef.current) return;
610
591
  const newItem = { label: inputValue, value: inputValue };
611
592
  let newItems = [];
612
- if (resolvedItems)
613
- newItems = resolvedItems;
593
+ if (resolvedItems) newItems = resolvedItems;
614
594
  if (firstInsertPositionItem === "first") {
615
595
  newItems = [newItem, ...newItems];
616
596
  } else if (firstInsertPositionItem === "last") {
@@ -653,31 +633,25 @@ var useAutocomplete = ({
653
633
  ]);
654
634
  const onClick = (0, import_react.useCallback)(() => {
655
635
  if (isOpen) {
656
- if (inputRef.current)
657
- inputRef.current.focus();
636
+ if (inputRef.current) inputRef.current.focus();
658
637
  } else {
659
638
  onOpen();
660
639
  onFocusFirstOrSelected();
661
640
  }
662
641
  }, [isOpen, onFocusFirstOrSelected, onOpen]);
663
642
  const onFocus = (0, import_react.useCallback)(() => {
664
- if (isOpen)
665
- return;
643
+ if (isOpen) return;
666
644
  onOpen();
667
645
  onFocusFirstOrSelected();
668
646
  }, [isOpen, onFocusFirstOrSelected, onOpen]);
669
647
  const onBlur = (0, import_react.useCallback)(
670
648
  (ev) => {
671
649
  const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
672
- if ((0, import_utils.isContains)(containerRef.current, relatedTarget))
673
- return;
674
- if (!closeOnBlur && isHit)
675
- return;
676
- if (allowFree && !!inputValue)
677
- onChange(inputValue, false);
650
+ if ((0, import_utils.isContains)(containerRef.current, relatedTarget)) return;
651
+ if (!closeOnBlur && isHit) return;
652
+ if (allowFree && !!inputValue) onChange(inputValue, false);
678
653
  setInputValue("");
679
- if (isOpen)
680
- onClose();
654
+ if (isOpen) onClose();
681
655
  },
682
656
  [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange]
683
657
  );
@@ -687,8 +661,7 @@ var useAutocomplete = ({
687
661
  } else {
688
662
  onChange(value[value.length - 1]);
689
663
  }
690
- if (!isOpen)
691
- onFocus();
664
+ if (!isOpen) onFocus();
692
665
  }, [isMulti, isOpen, onChange, onFocus, value]);
693
666
  const onClear = (0, import_react.useCallback)(
694
667
  (ev) => {
@@ -698,27 +671,22 @@ var useAutocomplete = ({
698
671
  setLabel(void 0);
699
672
  setInputValue("");
700
673
  rebirthOptions();
701
- if (isOpen && inputRef.current)
702
- inputRef.current.focus();
674
+ if (isOpen && inputRef.current) inputRef.current.focus();
703
675
  },
704
676
  [isOpen, setLabel, setInputValue, setValue, rebirthOptions]
705
677
  );
706
678
  const onKeyDown = (0, import_react.useCallback)(
707
679
  (ev) => {
708
- if (ev.key === " ")
709
- ev.key = ev.code;
710
- if (formControlProps.disabled || formControlProps.readOnly)
711
- return;
712
- if (isComposition.current)
713
- return;
680
+ if (ev.key === " ") ev.key = ev.code;
681
+ if (formControlProps.disabled || formControlProps.readOnly) return;
682
+ if (isComposition.current) return;
714
683
  const enabledDelete = label === inputValue || !inputValue.length;
715
684
  const actions = {
716
685
  ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
717
686
  ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
718
687
  Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
719
688
  Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
720
- if (inputValue)
721
- onChange(inputValue);
689
+ if (inputValue) onChange(inputValue);
722
690
  setFocusedIndex(0);
723
691
  } : void 0,
724
692
  Home: isOpen ? onFocusFirst : void 0,
@@ -727,8 +695,7 @@ var useAutocomplete = ({
727
695
  Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
728
696
  };
729
697
  const action = actions[ev.key];
730
- if (!action)
731
- return;
698
+ if (!action) return;
732
699
  ev.preventDefault();
733
700
  ev.stopPropagation();
734
701
  action(ev);
@@ -759,10 +726,8 @@ var useAutocomplete = ({
759
726
  ]
760
727
  );
761
728
  (0, import_react.useEffect)(() => {
762
- if (!isMulti)
763
- return;
764
- if (!omitSelectedValues && (0, import_utils.isUndefined)(maxSelectValues))
765
- return;
729
+ if (!isMulti) return;
730
+ if (!omitSelectedValues && (0, import_utils.isUndefined)(maxSelectValues)) return;
766
731
  const isAll = value.length > 0 && value.length === descendants.count();
767
732
  const isMax = value.length === maxSelectValues;
768
733
  if (isAll || isMax) {
@@ -787,20 +752,17 @@ var useAutocomplete = ({
787
752
  const label2 = getSelectedValues(value);
788
753
  setLabel(label2);
789
754
  } else {
790
- if (prevValue.current === value)
791
- return;
755
+ if (prevValue.current === value) return;
792
756
  onChangeLabel(value, false);
793
757
  }
794
758
  }, [isMulti, value, onChangeLabel, getSelectedValues]);
795
759
  (0, import_utils.useUpdateEffect)(() => {
796
- if (isOpen || allowFree)
797
- return;
760
+ if (isOpen || allowFree) return;
798
761
  setFocusedIndex(-1);
799
762
  setInputValue("");
800
763
  }, [isOpen]);
801
764
  (0, import_utils.useUpdateEffect)(() => {
802
- if (!isHit)
803
- setFocusedIndex(-2);
765
+ if (!isHit) setFocusedIndex(-2);
804
766
  }, [isHit]);
805
767
  (0, import_utils.useUnmountEffect)(() => {
806
768
  timeoutIds.current.forEach((id2) => clearTimeout(id2));
@@ -909,8 +871,7 @@ var useAutocompleteInput = () => {
909
871
  isOpen
910
872
  } = useAutocompleteContext();
911
873
  (0, import_utils.useUpdateEffect)(() => {
912
- if (isAllSelected && inputRef.current)
913
- inputRef.current.blur();
874
+ if (isAllSelected && inputRef.current) inputRef.current.blur();
914
875
  }, [isAllSelected]);
915
876
  const getInputProps = (0, import_react.useCallback)(
916
877
  (props = {}, ref = null) => ({
@@ -963,14 +924,11 @@ var useAutocompleteList = () => {
963
924
  const beforeFocusedIndex = (0, import_react.useRef)(-1);
964
925
  const selectedValue = descendants.value(focusedIndex);
965
926
  const onAnimationComplete = (0, import_react.useCallback)(() => {
966
- if (!isOpen)
967
- rebirthOptions(false);
927
+ if (!isOpen) rebirthOptions(false);
968
928
  }, [isOpen, rebirthOptions]);
969
929
  (0, import_react.useEffect)(() => {
970
- if (!listRef.current || !selectedValue)
971
- return;
972
- if (beforeFocusedIndex.current === selectedValue.index)
973
- return;
930
+ if (!listRef.current || !selectedValue) return;
931
+ if (beforeFocusedIndex.current === selectedValue.index) return;
974
932
  const parent = listRef.current;
975
933
  const child = selectedValue.node;
976
934
  const parentHeight = parent.clientHeight;
@@ -995,8 +953,7 @@ var useAutocompleteList = () => {
995
953
  beforeFocusedIndex.current = selectedValue.index;
996
954
  }, [listRef, selectedValue]);
997
955
  (0, import_utils.useUpdateEffect)(() => {
998
- if (!isOpen)
999
- beforeFocusedIndex.current = -1;
956
+ if (!isOpen) beforeFocusedIndex.current = -1;
1000
957
  }, [isOpen]);
1001
958
  const getListProps = (0, import_react.useCallback)(
1002
959
  (props = {}, ref = null) => ({
@@ -1119,23 +1076,18 @@ var useAutocompleteOption = (props) => {
1119
1076
  (ev) => {
1120
1077
  ev.stopPropagation();
1121
1078
  if (isDisabled) {
1122
- if (inputRef.current)
1123
- inputRef.current.focus();
1079
+ if (inputRef.current) inputRef.current.focus();
1124
1080
  return;
1125
1081
  }
1126
1082
  if (!isTargetOption(ev.currentTarget)) {
1127
- if (inputRef.current)
1128
- inputRef.current.focus();
1083
+ if (inputRef.current) inputRef.current.focus();
1129
1084
  return;
1130
1085
  }
1131
1086
  setFocusedIndex(index);
1132
1087
  onChange(optionValue != null ? optionValue : "");
1133
- if (inputRef.current)
1134
- inputRef.current.focus();
1135
- if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
1136
- onClose();
1137
- if (omitSelectedValues)
1138
- onFocusNext(index);
1088
+ if (inputRef.current) inputRef.current.focus();
1089
+ if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
1090
+ if (omitSelectedValues) onFocusNext(index);
1139
1091
  },
1140
1092
  [
1141
1093
  onFocusNext,
@@ -1152,8 +1104,7 @@ var useAutocompleteOption = (props) => {
1152
1104
  ]
1153
1105
  );
1154
1106
  (0, import_utils.useUpdateEffect)(() => {
1155
- if (isSelected)
1156
- onChangeLabel(optionValue != null ? optionValue : "", false);
1107
+ if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", false);
1157
1108
  }, [optionValue]);
1158
1109
  const getOptionProps = (0, import_react.useCallback)(
1159
1110
  (props2 = {}, ref = null) => {
@@ -1760,15 +1711,13 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
1760
1711
  const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
1761
1712
  const { getInputProps } = useAutocompleteInput();
1762
1713
  const cloneChildren = (0, import_react3.useMemo)(() => {
1763
- if (!(label == null ? void 0 : label.length))
1764
- return null;
1714
+ if (!(label == null ? void 0 : label.length)) return null;
1765
1715
  if (component) {
1766
1716
  return label.map((label2, index) => {
1767
1717
  const onRemove = (ev) => {
1768
1718
  ev.stopPropagation();
1769
1719
  onChange(value[index]);
1770
- if (inputRef.current)
1771
- inputRef.current.focus();
1720
+ if (inputRef.current) inputRef.current.focus();
1772
1721
  };
1773
1722
  const el = component({
1774
1723
  value: value[index],