@yamada-ui/autocomplete/dist/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/autocomplete-list.tsx
var autocomplete_list_exports = {};
__export(autocomplete_list_exports, {
  AutocompleteList: () => AutocompleteList
});
module.exports = __toCommonJS(autocomplete_list_exports);
var import_core = require("@yamada-ui/core");
var import_popover = require("@yamada-ui/popover");
var import_utils3 = require("@yamada-ui/utils");

// 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 import_utils2 = require("@yamada-ui/utils");
var import_react = require("react");
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
  };
};

// src/autocomplete-list.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var AutocompleteList = (0, import_core.forwardRef)(
  ({
    className,
    children,
    footer,
    header,
    maxW,
    maxWidth = maxW,
    minW,
    minWidth = minW,
    w,
    width = w,
    contentProps,
    ...rest
  }, ref) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
    const { styles } = useAutocompleteContext();
    const { getContainerProps, getListProps } = useAutocompleteList();
    width != null ? width : width = (_c = (_a = styles.list) == null ? void 0 : _a.width) != null ? _c : (_b = styles.list) == null ? void 0 : _b.w;
    minWidth != null ? minWidth : minWidth = (_f = (_d = styles.list) == null ? void 0 : _d.minWidth) != null ? _f : (_e = styles.list) == null ? void 0 : _e.minW;
    maxWidth != null ? maxWidth : maxWidth = (_i = (_g = styles.list) == null ? void 0 : _g.maxWidth) != null ? _i : (_h = styles.list) == null ? void 0 : _h.maxW;
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      import_popover.PopoverContent,
      {
        as: "div",
        className: "ui-autocomplete__popover",
        maxWidth,
        minWidth,
        width,
        __css: styles.content,
        ...getContainerProps(contentProps),
        children: [
          header ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.header, { className: "ui-autocomplete__header", __css: styles.header, children: header }) : null,
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_core.ui.div,
            {
              className: (0, import_utils3.cx)("ui-autocomplete__list", className),
              __css: styles.list,
              ...getListProps(rest, ref),
              children
            }
          ),
          footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.footer, { className: "ui-autocomplete__footer", __css: styles.footer, children: footer }) : null
        ]
      }
    );
  }
);
AutocompleteList.displayName = "AutocompleteList";
AutocompleteList.__ui__ = "AutocompleteList";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  AutocompleteList
});
//# sourceMappingURL=autocomplete-list.js.map