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

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.
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],