synapse-react-client/dist/components/UserSearchBox/UserSearchBox.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as t } from "react/jsx-runtime";
import { useState as p, useMemo as b, createElement as D } from "react";
import "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import { TYPE_FILTER as H } from "@sage-bionetworks/synapse-types";
import "../../utils/functions/EntityTypeUtils.js";
import "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "@tanstack/react-query";
import "../../utils/PermissionLevelToAccessType.js";
import { useDebouncedEffect as Y } from "../../utils/hooks/useDebouncedEffect.js";
import "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import { Skeleton as k, Autocomplete as M, TextField as R, Box as j } from "@mui/material";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css                                   */
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import "react-router";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import { useGetUserGroupHeader as L, useSearchUserGroupHeaders as q } from "../../synapse-queries/user/useUserGroupHeader.js";
import V from "../UserOrTeamBadge/UserOrTeamBadge.js";
function Te(C) {
  const {
    inputId: E,
    defaultValue: c = null,
    onChange: T,
    filterPredicate: f,
    typeFilter: n,
    placeholder: d,
    autoFocus: w = !1,
    value: l
  } = C, i = l !== void 0, [r, h] = p(""), [a, x] = p("");
  Y(
    () => {
      x(r);
    },
    [r],
    500
  );
  const [N, g] = p(!1), { data: y, isLoading: F } = L(c ?? "", {
    enabled: !!c && !i
  }), I = i && typeof l == "string" ? l : null, {
    data: G,
    isLoading: U
  } = L(I ?? "", {
    enabled: !!I
  }), [v, P] = p(void 0), s = i ? typeof l == "string" ? G ?? null : null : v !== void 0 ? v : y ?? null, m = s !== null && !N, _ = !!a, { data: O, isLoading: S } = q(
    a,
    n,
    {
      enabled: _
    }
  ), B = b(
    () => (O ?? []).filter(f ?? (() => !0)),
    [O, f]
  ), A = b(() => d !== void 0 ? d : n == H.USERS_ONLY ? "Name (first and last)" : n == H.TEAMS_ONLY ? "Team name" : "Name (first and last) or team name", [d, n]);
  return F || U ? /* @__PURE__ */ t(k, { width: "100%" }) : /* @__PURE__ */ t(
    M,
    {
      id: E,
      value: s,
      inputValue: r,
      onInputChange: (o, e, u) => {
        h(u === "selectOption" || u === "reset" ? "" : e);
      },
      openOnFocus: s !== null,
      onOpen: () => {
        g(!0);
      },
      onClose: () => g(!1),
      options: B,
      filterOptions: (o) => o,
      loading: S || r !== a,
      isOptionEqualToValue: (o, e) => o.ownerId === e.ownerId,
      getOptionLabel: (o) => o.userName,
      renderOption: (o, e) => /* @__PURE__ */ D("li", { ...o, key: e.ownerId }, /* @__PURE__ */ t(
        V,
        {
          userGroupHeader: e,
          disableHref: !0,
          showFullName: !0,
          showCardOnHover: !1
        }
      )),
      renderInput: ({
        inputProps: o,
        InputProps: e,
        ...u
      }) => /* @__PURE__ */ t(
        R,
        {
          ...u,
          placeholder: m ? void 0 : A,
          autoFocus: w,
          slotProps: {
            htmlInput: {
              ...o,
              // While the badge is displayed, hide the underlying input text and cursor.
              // Merge custom styles with parent styles to preserve mouse selection and other behaviors.
              style: {
                ...o.style,
                ...m ? { color: "transparent" } : {}
              }
            },
            input: {
              ...e,
              startAdornment: m ? /* @__PURE__ */ t(j, { sx: { ml: 1 }, children: /* @__PURE__ */ t(
                V,
                {
                  userGroupHeader: s,
                  disableHref: !0,
                  showFullName: !0,
                  showCardOnHover: !1
                }
              ) }) : void 0
            }
          }
        }
      ),
      onChange: (o, e) => {
        i || P(e), T?.(
          e?.ownerId != null ? e.ownerId.toString() : null,
          e ?? null
        );
      },
      noOptionsText: S || r !== a ? "Loading…" : "No options",
      clearOnEscape: !0
    }
  );
}
export {
  Te as default
};
//# sourceMappingURL=UserSearchBox.js.map