chore(clerk-js,types,localizations): Introduce minimum length for organization memberships search

.changeset/tricky-spiders-jog.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
+---
+
+Introduce minimum length for organization memberships search

packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx

@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
  <Button
  elementDescriptor={descriptors.membersPageInviteButton}
  aria-label='Invite'
- textVariant='buttonSmall'
  localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+ sx={{ height: 'min-content' }}
  />
  </Action.Trigger>
  )}

packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx

@@ -0,0 +1,105 @@
+import type { useOrganization } from '@clerk/shared/react';
+import type { GetMembersParams } from '@clerk/types';
+import { useEffect } from 'react';
+
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
+import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
+
+type MembersSearchProps = {
+ /**
+ * Controlled query param state by parent component
+ */
+ query: GetMembersParams['query'];
+ /**
+ * Paginated organization memberships
+ */
+ memberships: ReturnType<typeof useOrganization>['memberships'];
+ /**
+ * Handler for value changes
+ */
+ onChange: (query: string) => void;
+ /**
+ * Minimum search length to trigger query
+ */
+ minLength: number;
+};
+
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+ const { t } = useLocalizations();
+ const searchField = useFormControl('search', '', {
+ type: 'search',
+ label: '',
+ placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+ });
+ const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value.trim();
+
+ searchField.onChange(event);
+ onChange(value);
+
+ if (value.length >= minLength) {
+ searchField.clearFeedback();
+ return;
+ }
+
+ searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+ };
+
+ // If search is not performed on a initial page, resets pagination offset
+ // based on the response count
+ useEffect(() => {
+ if (!searchField.value || !memberships?.data) {
+ return;
+ }
+
+ const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;
+ if (hasOnePageLeft) {
+ memberships?.fetchPage?.(1);
+ }
+ }, [searchField.value, memberships]);
+
+ const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
+
+ return (
+ <Flex
+ sx={{ minWidth: '50%', position: 'relative' }}
+ direction='col'
+ elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
+ >
+ <Field.Root {...searchField}>
+ <InputWithIcon
+ type='search'
+ spellCheck={false}
+ aria-label='Search'
+ autoCapitalize='none'
+ minLength={minLength}
+ onFocus={inputProps.onFocus}
+ onBlur={inputProps.onBlur}
+ onChange={handleChange}
+ placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInput}
+ leftIcon={
+ isFetchingNewData ? (
+ <Spinner size='xs' />
+ ) : (
+ <Icon
+ icon={MagnifyingGlass}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+ />
+ )
+ }
+ />
+
+ <Field.Feedback />
+ </Field.Root>
+ </Flex>
+ );
+};

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -21,11 +22,12 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
  const { organizationSettings } = useEnvironment();
@@ -35,15 +37,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
  const [query, setQuery] = useState('');
- const [search, setSearch] = useState('');
+ const debouncedQuery = useDebounce(query, 600);
 
  const { membershipRequests, memberships, invitations } = useOrganization({
  membershipRequests: isDomainsEnabled || undefined,
  invitations: canManageMemberships || undefined,
  memberships: canReadMemberships
  ? {
  keepPreviousData: true,
- query: query || undefined,
+ query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
  }
  : undefined,
  });
@@ -139,12 +141,11 @@ export const OrganizationMembers = withCardStateProvider(() => {
  >
  <MembersActionsRow
  actionSlot={
- <MembersSearch
+ <MembersSearchForm
+ minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
  query={query}
- value={search}
  memberships={memberships}
- onSearchChange={query => setSearch(query)}
- onQueryTrigger={query => setQuery(query)}
+ onChange={query => setQuery(query)}
  />
  }
  />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'organizationSwitcherPopoverActionButtonIcon',
  'organizationSwitcherPopoverFooter',
 
+ 'organizationProfileMembersSearchContainer',
  'organizationProfileMembersSearchInputIcon',
  'organizationProfileMembersSearchInput',
 

packages/localizations/src/ar-SA.ts

@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
  membersPage: {
  action__invite: 'دعوة',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'إزالة عضو',
  tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'إزالة',
  menuAction__rename: 'إعادة تسمية',
+ primaryButton: undefined,
  title: 'مفاتيح المرور',
  },
  passwordSection: {

packages/localizations/src/be-BY.ts

@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
  membersPage: {
  action__invite: 'Пригласить',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Удалить удзельніка',
  tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Выдаліць passkey',
  menuAction__rename: 'Перайменаваць passkey',
+ primaryButton: undefined,
  title: 'Passkeys',
  },
  passwordSection: {

packages/localizations/src/bg-BG.ts

@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
  membersPage: {
  action__invite: 'Покани',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Премахване на член',
  tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/ca-ES.ts

@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
  },
  membersPage: {
  action__invite: 'Convida',
+ action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Elimina membre',
  tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/cs-CZ.ts

@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
  membersPage: {
  action__invite: 'Pozvat',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Odstranit člena',
  tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Odstranit',
  menuAction__rename: 'Přejmenovat',
+ primaryButton: undefined,
  title: 'Správa klíčů',
  },
  passwordSection: {

packages/localizations/src/da-DK.ts

@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
  membersPage: {
  action__invite: 'Inviter',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Fjern medlem',
  tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Fjern adgangsnøgle',
  menuAction__rename: 'Omdøb adgangsnøgle',
+ primaryButton: undefined,
  title: 'Adgangsnøgler',
  },
  passwordSection: {

.changeset/tricky-spiders-jog.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
+---
+
+Introduce minimum length for organization memberships search

packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx

@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
  <Button
  elementDescriptor={descriptors.membersPageInviteButton}
  aria-label='Invite'
- textVariant='buttonSmall'
  localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+ sx={{ height: 'min-content' }}
  />
  </Action.Trigger>
  )}

packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx

@@ -0,0 +1,105 @@
+import type { useOrganization } from '@clerk/shared/react';
+import type { GetMembersParams } from '@clerk/types';
+import { useEffect } from 'react';
+
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
+import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
+
+type MembersSearchProps = {
+ /**
+ * Controlled query param state by parent component
+ */
+ query: GetMembersParams['query'];
+ /**
+ * Paginated organization memberships
+ */
+ memberships: ReturnType<typeof useOrganization>['memberships'];
+ /**
+ * Handler for value changes
+ */
+ onChange: (query: string) => void;
+ /**
+ * Minimum search length to trigger query
+ */
+ minLength: number;
+};
+
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+ const { t } = useLocalizations();
+ const searchField = useFormControl('search', '', {
+ type: 'search',
+ label: '',
+ placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+ });
+ const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value.trim();
+
+ searchField.onChange(event);
+ onChange(value);
+
+ if (value.length >= minLength) {
+ searchField.clearFeedback();
+ return;
+ }
+
+ searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+ };
+
+ // If search is not performed on a initial page, resets pagination offset
+ // based on the response count
+ useEffect(() => {
+ if (!searchField.value || !memberships?.data) {
+ return;
+ }
+
+ const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;
+ if (hasOnePageLeft) {
+ memberships?.fetchPage?.(1);
+ }
+ }, [searchField.value, memberships]);
+
+ const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
+
+ return (
+ <Flex
+ sx={{ minWidth: '50%', position: 'relative' }}
+ direction='col'
+ elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
+ >
+ <Field.Root {...searchField}>
+ <InputWithIcon
+ type='search'
+ spellCheck={false}
+ aria-label='Search'
+ autoCapitalize='none'
+ minLength={minLength}
+ onFocus={inputProps.onFocus}
+ onBlur={inputProps.onBlur}
+ onChange={handleChange}
+ placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInput}
+ leftIcon={
+ isFetchingNewData ? (
+ <Spinner size='xs' />
+ ) : (
+ <Icon
+ icon={MagnifyingGlass}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+ />
+ )
+ }
+ />
+
+ <Field.Feedback />
+ </Field.Root>
+ </Flex>
+ );
+};

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -21,11 +22,12 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
  const { organizationSettings } = useEnvironment();
@@ -35,15 +37,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
  const [query, setQuery] = useState('');
- const [search, setSearch] = useState('');
+ const debouncedQuery = useDebounce(query, 600);
 
  const { membershipRequests, memberships, invitations } = useOrganization({
  membershipRequests: isDomainsEnabled || undefined,
  invitations: canManageMemberships || undefined,
  memberships: canReadMemberships
  ? {
  keepPreviousData: true,
- query: query || undefined,
+ query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
  }
  : undefined,
  });
@@ -139,12 +141,11 @@ export const OrganizationMembers = withCardStateProvider(() => {
  >
  <MembersActionsRow
  actionSlot={
- <MembersSearch
+ <MembersSearchForm
+ minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
  query={query}
- value={search}
  memberships={memberships}
- onSearchChange={query => setSearch(query)}
- onQueryTrigger={query => setQuery(query)}
+ onChange={query => setQuery(query)}
  />
  }
  />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'organizationSwitcherPopoverActionButtonIcon',
  'organizationSwitcherPopoverFooter',
 
+ 'organizationProfileMembersSearchContainer',
  'organizationProfileMembersSearchInputIcon',
  'organizationProfileMembersSearchInput',
 

packages/localizations/src/ar-SA.ts

@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
  membersPage: {
  action__invite: 'دعوة',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'إزالة عضو',
  tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'إزالة',
  menuAction__rename: 'إعادة تسمية',
+ primaryButton: undefined,
  title: 'مفاتيح المرور',
  },
  passwordSection: {

packages/localizations/src/be-BY.ts

@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
  membersPage: {
  action__invite: 'Пригласить',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Удалить удзельніка',
  tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Выдаліць passkey',
  menuAction__rename: 'Перайменаваць passkey',
+ primaryButton: undefined,
  title: 'Passkeys',
  },
  passwordSection: {

packages/localizations/src/bg-BG.ts

@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
  membersPage: {
  action__invite: 'Покани',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Премахване на член',
  tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/ca-ES.ts

@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
  },
  membersPage: {
  action__invite: 'Convida',
+ action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Elimina membre',
  tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/cs-CZ.ts

@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
  membersPage: {
  action__invite: 'Pozvat',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Odstranit člena',
  tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Odstranit',
  menuAction__rename: 'Přejmenovat',
+ primaryButton: undefined,
  title: 'Správa klíčů',
  },
  passwordSection: {

packages/localizations/src/da-DK.ts

@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
  membersPage: {
  action__invite: 'Inviter',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Fjern medlem',
  tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Fjern adgangsnøgle',
  menuAction__rename: 'Omdøb adgangsnøgle',
+ primaryButton: undefined,
  title: 'Adgangsnøgler',
  },
  passwordSection: {

.changeset/tricky-spiders-jog.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
+---
+
+Introduce minimum length for organization memberships search

packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx

@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
  <Button
  elementDescriptor={descriptors.membersPageInviteButton}
  aria-label='Invite'
- textVariant='buttonSmall'
  localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+ sx={{ height: 'min-content' }}
  />
  </Action.Trigger>
  )}

packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx

@@ -0,0 +1,105 @@
+import type { useOrganization } from '@clerk/shared/react';
+import type { GetMembersParams } from '@clerk/types';
+import { useEffect } from 'react';
+
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
+import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
+
+type MembersSearchProps = {
+ /**
+ * Controlled query param state by parent component
+ */
+ query: GetMembersParams['query'];
+ /**
+ * Paginated organization memberships
+ */
+ memberships: ReturnType<typeof useOrganization>['memberships'];
+ /**
+ * Handler for value changes
+ */
+ onChange: (query: string) => void;
+ /**
+ * Minimum search length to trigger query
+ */
+ minLength: number;
+};
+
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+ const { t } = useLocalizations();
+ const searchField = useFormControl('search', '', {
+ type: 'search',
+ label: '',
+ placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+ });
+ const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value.trim();
+
+ searchField.onChange(event);
+ onChange(value);
+
+ if (value.length >= minLength) {
+ searchField.clearFeedback();
+ return;
+ }
+
+ searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+ };
+
+ // If search is not performed on a initial page, resets pagination offset
+ // based on the response count
+ useEffect(() => {
+ if (!searchField.value || !memberships?.data) {
+ return;
+ }
+
+ const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;
+ if (hasOnePageLeft) {
+ memberships?.fetchPage?.(1);
+ }
+ }, [searchField.value, memberships]);
+
+ const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
+
+ return (
+ <Flex
+ sx={{ minWidth: '50%', position: 'relative' }}
+ direction='col'
+ elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
+ >
+ <Field.Root {...searchField}>
+ <InputWithIcon
+ type='search'
+ spellCheck={false}
+ aria-label='Search'
+ autoCapitalize='none'
+ minLength={minLength}
+ onFocus={inputProps.onFocus}
+ onBlur={inputProps.onBlur}
+ onChange={handleChange}
+ placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInput}
+ leftIcon={
+ isFetchingNewData ? (
+ <Spinner size='xs' />
+ ) : (
+ <Icon
+ icon={MagnifyingGlass}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+ />
+ )
+ }
+ />
+
+ <Field.Feedback />
+ </Field.Root>
+ </Flex>
+ );
+};

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -21,11 +22,12 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
  const { organizationSettings } = useEnvironment();
@@ -35,15 +37,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
  const [query, setQuery] = useState('');
- const [search, setSearch] = useState('');
+ const debouncedQuery = useDebounce(query, 600);
 
  const { membershipRequests, memberships, invitations } = useOrganization({
  membershipRequests: isDomainsEnabled || undefined,
  invitations: canManageMemberships || undefined,
  memberships: canReadMemberships
  ? {
  keepPreviousData: true,
- query: query || undefined,
+ query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
  }
  : undefined,
  });
@@ -139,12 +141,11 @@ export const OrganizationMembers = withCardStateProvider(() => {
  >
  <MembersActionsRow
  actionSlot={
- <MembersSearch
+ <MembersSearchForm
+ minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
  query={query}
- value={search}
  memberships={memberships}
- onSearchChange={query => setSearch(query)}
- onQueryTrigger={query => setQuery(query)}
+ onChange={query => setQuery(query)}
  />
  }
  />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'organizationSwitcherPopoverActionButtonIcon',
  'organizationSwitcherPopoverFooter',
 
+ 'organizationProfileMembersSearchContainer',
  'organizationProfileMembersSearchInputIcon',
  'organizationProfileMembersSearchInput',
 

packages/localizations/src/ar-SA.ts

@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
  membersPage: {
  action__invite: 'دعوة',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'إزالة عضو',
  tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'إزالة',
  menuAction__rename: 'إعادة تسمية',
+ primaryButton: undefined,
  title: 'مفاتيح المرور',
  },
  passwordSection: {

packages/localizations/src/be-BY.ts

@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
  membersPage: {
  action__invite: 'Пригласить',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Удалить удзельніка',
  tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Выдаліць passkey',
  menuAction__rename: 'Перайменаваць passkey',
+ primaryButton: undefined,
  title: 'Passkeys',
  },
  passwordSection: {

packages/localizations/src/bg-BG.ts

@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
  membersPage: {
  action__invite: 'Покани',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Премахване на член',
  tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/ca-ES.ts

@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
  },
  membersPage: {
  action__invite: 'Convida',
+ action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Elimina membre',
  tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/cs-CZ.ts

@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
  membersPage: {
  action__invite: 'Pozvat',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Odstranit člena',
  tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Odstranit',
  menuAction__rename: 'Přejmenovat',
+ primaryButton: undefined,
  title: 'Správa klíčů',
  },
  passwordSection: {

packages/localizations/src/da-DK.ts

@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
  membersPage: {
  action__invite: 'Inviter',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Fjern medlem',
  tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Fjern adgangsnøgle',
  menuAction__rename: 'Omdøb adgangsnøgle',
+ primaryButton: undefined,
  title: 'Adgangsnøgler',
  },
  passwordSection: {

.changeset/tricky-spiders-jog.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
+---
+
+Introduce minimum length for organization memberships search

packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx

@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
  <Button
  elementDescriptor={descriptors.membersPageInviteButton}
  aria-label='Invite'
- textVariant='buttonSmall'
  localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+ sx={{ height: 'min-content' }}
  />
  </Action.Trigger>
  )}

packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx

@@ -0,0 +1,105 @@
+import type { useOrganization } from '@clerk/shared/react';
+import type { GetMembersParams } from '@clerk/types';
+import { useEffect } from 'react';
+
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
+import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
+
+type MembersSearchProps = {
+ /**
+ * Controlled query param state by parent component
+ */
+ query: GetMembersParams['query'];
+ /**
+ * Paginated organization memberships
+ */
+ memberships: ReturnType<typeof useOrganization>['memberships'];
+ /**
+ * Handler for value changes
+ */
+ onChange: (query: string) => void;
+ /**
+ * Minimum search length to trigger query
+ */
+ minLength: number;
+};
+
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+ const { t } = useLocalizations();
+ const searchField = useFormControl('search', '', {
+ type: 'search',
+ label: '',
+ placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+ });
+ const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value.trim();
+
+ searchField.onChange(event);
+ onChange(value);
+
+ if (value.length >= minLength) {
+ searchField.clearFeedback();
+ return;
+ }
+
+ searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+ };
+
+ // If search is not performed on a initial page, resets pagination offset
+ // based on the response count
+ useEffect(() => {
+ if (!searchField.value || !memberships?.data) {
+ return;
+ }
+
+ const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;
+ if (hasOnePageLeft) {
+ memberships?.fetchPage?.(1);
+ }
+ }, [searchField.value, memberships]);
+
+ const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
+
+ return (
+ <Flex
+ sx={{ minWidth: '50%', position: 'relative' }}
+ direction='col'
+ elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
+ >
+ <Field.Root {...searchField}>
+ <InputWithIcon
+ type='search'
+ spellCheck={false}
+ aria-label='Search'
+ autoCapitalize='none'
+ minLength={minLength}
+ onFocus={inputProps.onFocus}
+ onBlur={inputProps.onBlur}
+ onChange={handleChange}
+ placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInput}
+ leftIcon={
+ isFetchingNewData ? (
+ <Spinner size='xs' />
+ ) : (
+ <Icon
+ icon={MagnifyingGlass}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+ />
+ )
+ }
+ />
+
+ <Field.Feedback />
+ </Field.Root>
+ </Flex>
+ );
+};

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -21,11 +22,12 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
  const { organizationSettings } = useEnvironment();
@@ -35,15 +37,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
  const [query, setQuery] = useState('');
- const [search, setSearch] = useState('');
+ const debouncedQuery = useDebounce(query, 600);
 
  const { membershipRequests, memberships, invitations } = useOrganization({
  membershipRequests: isDomainsEnabled || undefined,
  invitations: canManageMemberships || undefined,
  memberships: canReadMemberships
  ? {
  keepPreviousData: true,
- query: query || undefined,
+ query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
  }
  : undefined,
  });
@@ -139,12 +141,11 @@ export const OrganizationMembers = withCardStateProvider(() => {
  >
  <MembersActionsRow
  actionSlot={
- <MembersSearch
+ <MembersSearchForm
+ minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
  query={query}
- value={search}
  memberships={memberships}
- onSearchChange={query => setSearch(query)}
- onQueryTrigger={query => setQuery(query)}
+ onChange={query => setQuery(query)}
  />
  }
  />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'organizationSwitcherPopoverActionButtonIcon',
  'organizationSwitcherPopoverFooter',
 
+ 'organizationProfileMembersSearchContainer',
  'organizationProfileMembersSearchInputIcon',
  'organizationProfileMembersSearchInput',
 

packages/localizations/src/ar-SA.ts

@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
  membersPage: {
  action__invite: 'دعوة',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'إزالة عضو',
  tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'إزالة',
  menuAction__rename: 'إعادة تسمية',
+ primaryButton: undefined,
  title: 'مفاتيح المرور',
  },
  passwordSection: {

packages/localizations/src/be-BY.ts

@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
  membersPage: {
  action__invite: 'Пригласить',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Удалить удзельніка',
  tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Выдаліць passkey',
  menuAction__rename: 'Перайменаваць passkey',
+ primaryButton: undefined,
  title: 'Passkeys',
  },
  passwordSection: {

packages/localizations/src/bg-BG.ts

@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
  membersPage: {
  action__invite: 'Покани',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Премахване на член',
  tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/ca-ES.ts

@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
  },
  membersPage: {
  action__invite: 'Convida',
+ action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Elimina membre',
  tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/cs-CZ.ts

@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
  membersPage: {
  action__invite: 'Pozvat',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Odstranit člena',
  tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Odstranit',
  menuAction__rename: 'Přejmenovat',
+ primaryButton: undefined,
  title: 'Správa klíčů',
  },
  passwordSection: {

packages/localizations/src/da-DK.ts

@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
  membersPage: {
  action__invite: 'Inviter',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Fjern medlem',
  tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Fjern adgangsnøgle',
  menuAction__rename: 'Omdøb adgangsnøgle',
+ primaryButton: undefined,
  title: 'Adgangsnøgler',
  },
  passwordSection: {

.changeset/tricky-spiders-jog.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
+---
+
+Introduce minimum length for organization memberships search

packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx

@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
  <Button
  elementDescriptor={descriptors.membersPageInviteButton}
  aria-label='Invite'
- textVariant='buttonSmall'
  localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+ sx={{ height: 'min-content' }}
  />
  </Action.Trigger>
  )}

packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx

@@ -0,0 +1,105 @@
+import type { useOrganization } from '@clerk/shared/react';
+import type { GetMembersParams } from '@clerk/types';
+import { useEffect } from 'react';
+
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
+import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
+
+type MembersSearchProps = {
+ /**
+ * Controlled query param state by parent component
+ */
+ query: GetMembersParams['query'];
+ /**
+ * Paginated organization memberships
+ */
+ memberships: ReturnType<typeof useOrganization>['memberships'];
+ /**
+ * Handler for value changes
+ */
+ onChange: (query: string) => void;
+ /**
+ * Minimum search length to trigger query
+ */
+ minLength: number;
+};
+
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+ const { t } = useLocalizations();
+ const searchField = useFormControl('search', '', {
+ type: 'search',
+ label: '',
+ placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+ });
+ const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value.trim();
+
+ searchField.onChange(event);
+ onChange(value);
+
+ if (value.length >= minLength) {
+ searchField.clearFeedback();
+ return;
+ }
+
+ searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+ };
+
+ // If search is not performed on a initial page, resets pagination offset
+ // based on the response count
+ useEffect(() => {
+ if (!searchField.value || !memberships?.data) {
+ return;
+ }
+
+ const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;
+ if (hasOnePageLeft) {
+ memberships?.fetchPage?.(1);
+ }
+ }, [searchField.value, memberships]);
+
+ const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
+
+ return (
+ <Flex
+ sx={{ minWidth: '50%', position: 'relative' }}
+ direction='col'
+ elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
+ >
+ <Field.Root {...searchField}>
+ <InputWithIcon
+ type='search'
+ spellCheck={false}
+ aria-label='Search'
+ autoCapitalize='none'
+ minLength={minLength}
+ onFocus={inputProps.onFocus}
+ onBlur={inputProps.onBlur}
+ onChange={handleChange}
+ placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInput}
+ leftIcon={
+ isFetchingNewData ? (
+ <Spinner size='xs' />
+ ) : (
+ <Icon
+ icon={MagnifyingGlass}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+ />
+ )
+ }
+ />
+
+ <Field.Feedback />
+ </Field.Root>
+ </Flex>
+ );
+};

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -21,11 +22,12 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
  const { organizationSettings } = useEnvironment();
@@ -35,15 +37,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
  const [query, setQuery] = useState('');
- const [search, setSearch] = useState('');
+ const debouncedQuery = useDebounce(query, 600);
 
  const { membershipRequests, memberships, invitations } = useOrganization({
  membershipRequests: isDomainsEnabled || undefined,
  invitations: canManageMemberships || undefined,
  memberships: canReadMemberships
  ? {
  keepPreviousData: true,
- query: query || undefined,
+ query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
  }
  : undefined,
  });
@@ -139,12 +141,11 @@ export const OrganizationMembers = withCardStateProvider(() => {
  >
  <MembersActionsRow
  actionSlot={
- <MembersSearch
+ <MembersSearchForm
+ minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
  query={query}
- value={search}
  memberships={memberships}
- onSearchChange={query => setSearch(query)}
- onQueryTrigger={query => setQuery(query)}
+ onChange={query => setQuery(query)}
  />
  }
  />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'organizationSwitcherPopoverActionButtonIcon',
  'organizationSwitcherPopoverFooter',
 
+ 'organizationProfileMembersSearchContainer',
  'organizationProfileMembersSearchInputIcon',
  'organizationProfileMembersSearchInput',
 

packages/localizations/src/ar-SA.ts

@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
  membersPage: {
  action__invite: 'دعوة',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'إزالة عضو',
  tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'إزالة',
  menuAction__rename: 'إعادة تسمية',
+ primaryButton: undefined,
  title: 'مفاتيح المرور',
  },
  passwordSection: {

packages/localizations/src/be-BY.ts

@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
  membersPage: {
  action__invite: 'Пригласить',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Удалить удзельніка',
  tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Выдаліць passkey',
  menuAction__rename: 'Перайменаваць passkey',
+ primaryButton: undefined,
  title: 'Passkeys',
  },
  passwordSection: {

packages/localizations/src/bg-BG.ts

@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
  membersPage: {
  action__invite: 'Покани',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Премахване на член',
  tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/ca-ES.ts

@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
  },
  membersPage: {
  action__invite: 'Convida',
+ action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Elimina membre',
  tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/cs-CZ.ts

@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
  membersPage: {
  action__invite: 'Pozvat',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Odstranit člena',
  tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Odstranit',
  menuAction__rename: 'Přejmenovat',
+ primaryButton: undefined,
  title: 'Správa klíčů',
  },
  passwordSection: {

packages/localizations/src/da-DK.ts

@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
  membersPage: {
  action__invite: 'Inviter',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Fjern medlem',
  tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Fjern adgangsnøgle',
  menuAction__rename: 'Omdøb adgangsnøgle',
+ primaryButton: undefined,
  title: 'Adgangsnøgler',
  },
  passwordSection: {

.changeset/tricky-spiders-jog.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
+---
+
+Introduce minimum length for organization memberships search

packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx

@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
  <Button
  elementDescriptor={descriptors.membersPageInviteButton}
  aria-label='Invite'
- textVariant='buttonSmall'
  localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+ sx={{ height: 'min-content' }}
  />
  </Action.Trigger>
  )}

packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx

@@ -0,0 +1,105 @@
+import type { useOrganization } from '@clerk/shared/react';
+import type { GetMembersParams } from '@clerk/types';
+import { useEffect } from 'react';
+
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
+import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
+
+type MembersSearchProps = {
+ /**
+ * Controlled query param state by parent component
+ */
+ query: GetMembersParams['query'];
+ /**
+ * Paginated organization memberships
+ */
+ memberships: ReturnType<typeof useOrganization>['memberships'];
+ /**
+ * Handler for value changes
+ */
+ onChange: (query: string) => void;
+ /**
+ * Minimum search length to trigger query
+ */
+ minLength: number;
+};
+
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+ const { t } = useLocalizations();
+ const searchField = useFormControl('search', '', {
+ type: 'search',
+ label: '',
+ placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+ });
+ const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value.trim();
+
+ searchField.onChange(event);
+ onChange(value);
+
+ if (value.length >= minLength) {
+ searchField.clearFeedback();
+ return;
+ }
+
+ searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+ };
+
+ // If search is not performed on a initial page, resets pagination offset
+ // based on the response count
+ useEffect(() => {
+ if (!searchField.value || !memberships?.data) {
+ return;
+ }
+
+ const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;
+ if (hasOnePageLeft) {
+ memberships?.fetchPage?.(1);
+ }
+ }, [searchField.value, memberships]);
+
+ const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
+
+ return (
+ <Flex
+ sx={{ minWidth: '50%', position: 'relative' }}
+ direction='col'
+ elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
+ >
+ <Field.Root {...searchField}>
+ <InputWithIcon
+ type='search'
+ spellCheck={false}
+ aria-label='Search'
+ autoCapitalize='none'
+ minLength={minLength}
+ onFocus={inputProps.onFocus}
+ onBlur={inputProps.onBlur}
+ onChange={handleChange}
+ placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInput}
+ leftIcon={
+ isFetchingNewData ? (
+ <Spinner size='xs' />
+ ) : (
+ <Icon
+ icon={MagnifyingGlass}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+ />
+ )
+ }
+ />
+
+ <Field.Feedback />
+ </Field.Root>
+ </Flex>
+ );
+};

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -21,11 +22,12 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
  const { organizationSettings } = useEnvironment();
@@ -35,15 +37,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
  const [query, setQuery] = useState('');
- const [search, setSearch] = useState('');
+ const debouncedQuery = useDebounce(query, 600);
 
  const { membershipRequests, memberships, invitations } = useOrganization({
  membershipRequests: isDomainsEnabled || undefined,
  invitations: canManageMemberships || undefined,
  memberships: canReadMemberships
  ? {
  keepPreviousData: true,
- query: query || undefined,
+ query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
  }
  : undefined,
  });
@@ -139,12 +141,11 @@ export const OrganizationMembers = withCardStateProvider(() => {
  >
  <MembersActionsRow
  actionSlot={
- <MembersSearch
+ <MembersSearchForm
+ minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
  query={query}
- value={search}
  memberships={memberships}
- onSearchChange={query => setSearch(query)}
- onQueryTrigger={query => setQuery(query)}
+ onChange={query => setQuery(query)}
  />
  }
  />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'organizationSwitcherPopoverActionButtonIcon',
  'organizationSwitcherPopoverFooter',
 
+ 'organizationProfileMembersSearchContainer',
  'organizationProfileMembersSearchInputIcon',
  'organizationProfileMembersSearchInput',
 

packages/localizations/src/ar-SA.ts

@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
  membersPage: {
  action__invite: 'دعوة',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'إزالة عضو',
  tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'إزالة',
  menuAction__rename: 'إعادة تسمية',
+ primaryButton: undefined,
  title: 'مفاتيح المرور',
  },
  passwordSection: {

packages/localizations/src/be-BY.ts

@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
  membersPage: {
  action__invite: 'Пригласить',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Удалить удзельніка',
  tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Выдаліць passkey',
  menuAction__rename: 'Перайменаваць passkey',
+ primaryButton: undefined,
  title: 'Passkeys',
  },
  passwordSection: {

packages/localizations/src/bg-BG.ts

@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
  membersPage: {
  action__invite: 'Покани',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Премахване на член',
  tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/ca-ES.ts

@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
  },
  membersPage: {
  action__invite: 'Convida',
+ action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Elimina membre',
  tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/cs-CZ.ts

@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
  membersPage: {
  action__invite: 'Pozvat',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Odstranit člena',
  tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Odstranit',
  menuAction__rename: 'Přejmenovat',
+ primaryButton: undefined,
  title: 'Správa klíčů',
  },
  passwordSection: {

packages/localizations/src/da-DK.ts

@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
  membersPage: {
  action__invite: 'Inviter',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Fjern medlem',
  tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Fjern adgangsnøgle',
  menuAction__rename: 'Omdøb adgangsnøgle',
+ primaryButton: undefined,
  title: 'Adgangsnøgler',
  },
  passwordSection: {

.changeset/tricky-spiders-jog.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
+---
+
+Introduce minimum length for organization memberships search

packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx

@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
  <Button
  elementDescriptor={descriptors.membersPageInviteButton}
  aria-label='Invite'
- textVariant='buttonSmall'
  localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+ sx={{ height: 'min-content' }}
  />
  </Action.Trigger>
  )}

packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx

@@ -0,0 +1,105 @@
+import type { useOrganization } from '@clerk/shared/react';
+import type { GetMembersParams } from '@clerk/types';
+import { useEffect } from 'react';
+
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
+import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
+
+type MembersSearchProps = {
+ /**
+ * Controlled query param state by parent component
+ */
+ query: GetMembersParams['query'];
+ /**
+ * Paginated organization memberships
+ */
+ memberships: ReturnType<typeof useOrganization>['memberships'];
+ /**
+ * Handler for value changes
+ */
+ onChange: (query: string) => void;
+ /**
+ * Minimum search length to trigger query
+ */
+ minLength: number;
+};
+
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+ const { t } = useLocalizations();
+ const searchField = useFormControl('search', '', {
+ type: 'search',
+ label: '',
+ placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+ });
+ const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value.trim();
+
+ searchField.onChange(event);
+ onChange(value);
+
+ if (value.length >= minLength) {
+ searchField.clearFeedback();
+ return;
+ }
+
+ searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+ };
+
+ // If search is not performed on a initial page, resets pagination offset
+ // based on the response count
+ useEffect(() => {
+ if (!searchField.value || !memberships?.data) {
+ return;
+ }
+
+ const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;
+ if (hasOnePageLeft) {
+ memberships?.fetchPage?.(1);
+ }
+ }, [searchField.value, memberships]);
+
+ const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
+
+ return (
+ <Flex
+ sx={{ minWidth: '50%', position: 'relative' }}
+ direction='col'
+ elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
+ >
+ <Field.Root {...searchField}>
+ <InputWithIcon
+ type='search'
+ spellCheck={false}
+ aria-label='Search'
+ autoCapitalize='none'
+ minLength={minLength}
+ onFocus={inputProps.onFocus}
+ onBlur={inputProps.onBlur}
+ onChange={handleChange}
+ placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInput}
+ leftIcon={
+ isFetchingNewData ? (
+ <Spinner size='xs' />
+ ) : (
+ <Icon
+ icon={MagnifyingGlass}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+ />
+ )
+ }
+ />
+
+ <Field.Feedback />
+ </Field.Root>
+ </Flex>
+ );
+};

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -21,11 +22,12 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
  const { organizationSettings } = useEnvironment();
@@ -35,15 +37,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
  const [query, setQuery] = useState('');
- const [search, setSearch] = useState('');
+ const debouncedQuery = useDebounce(query, 600);
 
  const { membershipRequests, memberships, invitations } = useOrganization({
  membershipRequests: isDomainsEnabled || undefined,
  invitations: canManageMemberships || undefined,
  memberships: canReadMemberships
  ? {
  keepPreviousData: true,
- query: query || undefined,
+ query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
  }
  : undefined,
  });
@@ -139,12 +141,11 @@ export const OrganizationMembers = withCardStateProvider(() => {
  >
  <MembersActionsRow
  actionSlot={
- <MembersSearch
+ <MembersSearchForm
+ minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
  query={query}
- value={search}
  memberships={memberships}
- onSearchChange={query => setSearch(query)}
- onQueryTrigger={query => setQuery(query)}
+ onChange={query => setQuery(query)}
  />
  }
  />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'organizationSwitcherPopoverActionButtonIcon',
  'organizationSwitcherPopoverFooter',
 
+ 'organizationProfileMembersSearchContainer',
  'organizationProfileMembersSearchInputIcon',
  'organizationProfileMembersSearchInput',
 

packages/localizations/src/ar-SA.ts

@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
  membersPage: {
  action__invite: 'دعوة',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'إزالة عضو',
  tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'إزالة',
  menuAction__rename: 'إعادة تسمية',
+ primaryButton: undefined,
  title: 'مفاتيح المرور',
  },
  passwordSection: {

packages/localizations/src/be-BY.ts

@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
  membersPage: {
  action__invite: 'Пригласить',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Удалить удзельніка',
  tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Выдаліць passkey',
  menuAction__rename: 'Перайменаваць passkey',
+ primaryButton: undefined,
  title: 'Passkeys',
  },
  passwordSection: {

packages/localizations/src/bg-BG.ts

@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
  membersPage: {
  action__invite: 'Покани',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Премахване на член',
  tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/ca-ES.ts

@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
  },
  membersPage: {
  action__invite: 'Convida',
+ action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Elimina membre',
  tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/cs-CZ.ts

@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
  membersPage: {
  action__invite: 'Pozvat',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Odstranit člena',
  tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Odstranit',
  menuAction__rename: 'Přejmenovat',
+ primaryButton: undefined,
  title: 'Správa klíčů',
  },
  passwordSection: {

packages/localizations/src/da-DK.ts

@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
  membersPage: {
  action__invite: 'Inviter',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Fjern medlem',
  tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Fjern adgangsnøgle',
  menuAction__rename: 'Omdøb adgangsnøgle',
+ primaryButton: undefined,
  title: 'Adgangsnøgler',
  },
  passwordSection: {

.changeset/tricky-spiders-jog.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
+---
+
+Introduce minimum length for organization memberships search

packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx

@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
  <Button
  elementDescriptor={descriptors.membersPageInviteButton}
  aria-label='Invite'
- textVariant='buttonSmall'
  localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+ sx={{ height: 'min-content' }}
  />
  </Action.Trigger>
  )}

packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx

@@ -0,0 +1,105 @@
+import type { useOrganization } from '@clerk/shared/react';
+import type { GetMembersParams } from '@clerk/types';
+import { useEffect } from 'react';
+
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
+import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
+
+type MembersSearchProps = {
+ /**
+ * Controlled query param state by parent component
+ */
+ query: GetMembersParams['query'];
+ /**
+ * Paginated organization memberships
+ */
+ memberships: ReturnType<typeof useOrganization>['memberships'];
+ /**
+ * Handler for value changes
+ */
+ onChange: (query: string) => void;
+ /**
+ * Minimum search length to trigger query
+ */
+ minLength: number;
+};
+
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+ const { t } = useLocalizations();
+ const searchField = useFormControl('search', '', {
+ type: 'search',
+ label: '',
+ placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+ });
+ const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = event.target.value.trim();
+
+ searchField.onChange(event);
+ onChange(value);
+
+ if (value.length >= minLength) {
+ searchField.clearFeedback();
+ return;
+ }
+
+ searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+ };
+
+ // If search is not performed on a initial page, resets pagination offset
+ // based on the response count
+ useEffect(() => {
+ if (!searchField.value || !memberships?.data) {
+ return;
+ }
+
+ const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;
+ if (hasOnePageLeft) {
+ memberships?.fetchPage?.(1);
+ }
+ }, [searchField.value, memberships]);
+
+ const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
+
+ return (
+ <Flex
+ sx={{ minWidth: '50%', position: 'relative' }}
+ direction='col'
+ elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
+ >
+ <Field.Root {...searchField}>
+ <InputWithIcon
+ type='search'
+ spellCheck={false}
+ aria-label='Search'
+ autoCapitalize='none'
+ minLength={minLength}
+ onFocus={inputProps.onFocus}
+ onBlur={inputProps.onBlur}
+ onChange={handleChange}
+ placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInput}
+ leftIcon={
+ isFetchingNewData ? (
+ <Spinner size='xs' />
+ ) : (
+ <Icon
+ icon={MagnifyingGlass}
+ elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+ />
+ )
+ }
+ />
+
+ <Field.Feedback />
+ </Field.Root>
+ </Flex>
+ );
+};

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -21,11 +22,12 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
  const { organizationSettings } = useEnvironment();
@@ -35,15 +37,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
  const [query, setQuery] = useState('');
- const [search, setSearch] = useState('');
+ const debouncedQuery = useDebounce(query, 600);
 
  const { membershipRequests, memberships, invitations } = useOrganization({
  membershipRequests: isDomainsEnabled || undefined,
  invitations: canManageMemberships || undefined,
  memberships: canReadMemberships
  ? {
  keepPreviousData: true,
- query: query || undefined,
+ query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
  }
  : undefined,
  });
@@ -139,12 +141,11 @@ export const OrganizationMembers = withCardStateProvider(() => {
  >
  <MembersActionsRow
  actionSlot={
- <MembersSearch
+ <MembersSearchForm
+ minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
  query={query}
- value={search}
  memberships={memberships}
- onSearchChange={query => setSearch(query)}
- onQueryTrigger={query => setQuery(query)}
+ onChange={query => setQuery(query)}
  />
  }
  />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'organizationSwitcherPopoverActionButtonIcon',
  'organizationSwitcherPopoverFooter',
 
+ 'organizationProfileMembersSearchContainer',
  'organizationProfileMembersSearchInputIcon',
  'organizationProfileMembersSearchInput',
 

packages/localizations/src/ar-SA.ts

@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
  membersPage: {
  action__invite: 'دعوة',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'إزالة عضو',
  tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'إزالة',
  menuAction__rename: 'إعادة تسمية',
+ primaryButton: undefined,
  title: 'مفاتيح المرور',
  },
  passwordSection: {

packages/localizations/src/be-BY.ts

@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
  membersPage: {
  action__invite: 'Пригласить',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Удалить удзельніка',
  tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Выдаліць passkey',
  menuAction__rename: 'Перайменаваць passkey',
+ primaryButton: undefined,
  title: 'Passkeys',
  },
  passwordSection: {

packages/localizations/src/bg-BG.ts

@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
  membersPage: {
  action__invite: 'Покани',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Премахване на член',
  tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/ca-ES.ts

@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
  },
  membersPage: {
  action__invite: 'Convida',
+ action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Elimina membre',
  tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: undefined,
  menuAction__rename: undefined,
+ primaryButton: undefined,
  title: undefined,
  },
  passwordSection: {

packages/localizations/src/cs-CZ.ts

@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
  membersPage: {
  action__invite: 'Pozvat',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Odstranit člena',
  tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Odstranit',
  menuAction__rename: 'Přejmenovat',
+ primaryButton: undefined,
  title: 'Správa klíčů',
  },
  passwordSection: {

packages/localizations/src/da-DK.ts

@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
  membersPage: {
  action__invite: 'Inviter',
  action__search: undefined,
+ action__search_minLength: undefined,
  activeMembersTab: {
  menuAction__remove: 'Fjern medlem',
  tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
  passkeysSection: {
  menuAction__destructive: 'Fjern adgangsnøgle',
  menuAction__rename: 'Omdøb adgangsnøgle',
+ primaryButton: undefined,
  title: 'Adgangsnøgler',
  },
  passwordSection: {