@yamada-ui/autocomplete/dist/use-autocomplete-list.js

Yamada UI autocomplete component

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/use-autocomplete-list.ts
var use_autocomplete_list_exports = {};
__export(use_autocomplete_list_exports, {
  useAutocompleteList: () => useAutocompleteList
});
module.exports = __toCommonJS(use_autocomplete_list_exports);
var import_utils2 = require("@yamada-ui/utils");
var import_react = require("react");

// src/autocomplete-context.ts
var import_use_descendant = require("@yamada-ui/use-descendant");
var import_utils = require("@yamada-ui/utils");
var {
  DescendantsContextProvider: AutocompleteDescendantsContextProvider,
  useDescendant: useAutocompleteDescendant,
  useDescendants: useAutocompleteDescendants,
  useDescendantsContext: useAutocompleteDescendantsContext
} = (0, import_use_descendant.createDescendant)();
var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
  name: "AutocompleteContext",
  errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
});

// src/use-autocomplete-list.ts
var useAutocompleteList = () => {
  const { focusedIndex, open, rebirthOptions, value } = useAutocompleteContext();
  const descendants = useAutocompleteDescendantsContext();
  const listRef = (0, import_react.useRef)(null);
  const beforeFocusedIndex = (0, import_react.useRef)(-1);
  const selectedValue = descendants.value(focusedIndex);
  const isMulti = (0, import_utils2.isArray)(value);
  const onAnimationComplete = (0, import_react.useCallback)(() => {
    if (!open) rebirthOptions(false);
  }, [open, rebirthOptions]);
  (0, import_react.useEffect)(() => {
    if (!listRef.current || !selectedValue) return;
    if (beforeFocusedIndex.current === selectedValue.index) return;
    const parent = listRef.current;
    const child = selectedValue.node;
    const parentHeight = parent.clientHeight;
    const viewTop = parent.scrollTop;
    const viewBottom = viewTop + parentHeight;
    const childHeight = child.clientHeight;
    const childTop = child.offsetTop;
    const childBottom = childTop + childHeight;
    const isInView = viewTop <= childTop && childBottom <= viewBottom;
    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
    if (!isInView) {
      if (childBottom <= parentHeight) {
        listRef.current.scrollTo({ top: 0 });
      } else {
        if (!isScrollBottom) {
          listRef.current.scrollTo({ top: childTop + 1 });
        } else {
          listRef.current.scrollTo({ top: childBottom - parentHeight });
        }
      }
    }
    beforeFocusedIndex.current = selectedValue.index;
  }, [listRef, selectedValue]);
  (0, import_utils2.useUpdateEffect)(() => {
    if (!open) beforeFocusedIndex.current = -1;
  }, [open]);
  const getContainerProps = (0, import_react.useCallback)(
    (props = {}, ref = null) => ({
      ref,
      "aria-multiselectable": (0, import_utils2.ariaAttr)(isMulti),
      role: "listbox",
      ...props,
      onAnimationComplete: (0, import_utils2.handlerAll)(
        props.onAnimationComplete,
        onAnimationComplete
      )
    }),
    [isMulti, onAnimationComplete]
  );
  const getListProps = (0, import_react.useCallback)(
    (props = {}, ref = null) => ({
      ref: (0, import_utils2.mergeRefs)(listRef, ref),
      position: "relative",
      tabIndex: -1,
      ...props
    }),
    [listRef]
  );
  return {
    getContainerProps,
    getListProps
  };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useAutocompleteList
});
//# sourceMappingURL=use-autocomplete-list.js.map