Resource Picker

ResourcePickerClassNames

interface ResourcePickerClassNames {
  readonly root?: string;
  readonly search?: string;
  readonly list?: string;
  readonly option?: string;
  readonly avatar?: string;
  readonly details?: string;
  readonly muted?: string
}

---

ResourcePickerId

export type ResourcePickerId = string | number;

---

ResourcePickerItem

interface ResourcePickerItem {
  readonly id: Id;
  readonly name: string;
  readonly avatarUrl?: string;
  readonly role?: string;
  readonly color?: string
}

---

ResourcePickerText

interface ResourcePickerText {
  readonly groupAriaLabel: string;
  readonly searchPlaceholder: string;
  readonly searchAriaLabel: string;
  readonly emptyResources: string;
  readonly emptySearch: string
}

---

ResourcePickerUnassignedOption

interface ResourcePickerUnassignedOption {
  readonly label: string;
  readonly dataAttribute?: string
}

---

SharedResourcePickerProps

interface SharedResourcePickerProps {
  readonly resources: readonly Resource[];
  readonly selectedResourceIds: readonly Id[];
  readonly text: ResourcePickerText;
  readonly onChange: (resourceIds: readonly Id[]) => void;
  readonly classNames?: ResourcePickerClassNames;
  readonly disabled?: boolean;
  /** Keeps the full list visible or presents it as a compact combobox. */
    readonly presentation?: 'inline' | 'dropdown';
  /** Allows more than one selected resource. Defaults to true. */
    readonly multiple?: boolean;
  /** Keeps resources in caller-provided order instead of sorting by name. */
    readonly preserveOrder?: boolean;
  readonly unassigned?: ResourcePickerUnassignedOption;
  readonly resourceDataAttribute?: string;
  readonly isResourceDisabled?: (resource: Resource) => boolean;
  readonly getAvatarColor?: (resource: Resource) => string | undefined
}

---

SharedResourcePicker

export function SharedResourcePicker<
  Id extends ResourcePickerId,
  Resource extends ResourcePickerItem<Id>,
>({
  resources,
  selectedResourceIds,
  text,
  onChange,
  classNames,
  disabled = false,
  presentation = 'inline',
  multiple = true,
  preserveOrder = false,
  unassigned,
  resourceDataAttribute,
  isResourceDisabled,
  getAvatarColor,
}: SharedResourcePickerProps<Id, Resource>);

---

getResourcePickerInitials

export function getResourcePickerInitials(name: string): string;

---

getResourcePickerColor

export function getResourcePickerColor(id: ResourcePickerId): string;

---

getResourcePickerForegroundColor

Chooses readable initials for hex avatar colors. Unknown CSS color formats retain the picker’s dark foreground fallback instead of guessing.

export function getResourcePickerForegroundColor(background: string): string;

---

ResourcePickerAvatar

export function ResourcePickerAvatar<Id extends ResourcePickerId>({
  resource,
  className,
  color,
}: ResourcePickerAvatarProps<Id>);

---

ResourcePickerAvatarProps

interface ResourcePickerAvatarProps {
  readonly resource: ResourcePickerItem<Id>;
  readonly className?: string;
  readonly color?: string
}

---

ResourcePickerOption

export function ResourcePickerOption<
  Id extends ResourcePickerId,
  Resource extends ResourcePickerItem<Id>,
>({
  resource,
  selected,
  selectedResourceIds,
  disabled,
  multiple,
  resourceDataAttribute,
  classNames,
  isResourceDisabled,
  getAvatarColor,
  optionId,
  focused = false,
  onFocus,
  onChange,
}: ResourcePickerOptionProps<Id, Resource>);

---

ResourcePickerOptionProps

interface ResourcePickerOptionProps {
  readonly resource: Resource;
  readonly selected: boolean;
  readonly selectedResourceIds: readonly Id[];
  readonly disabled: boolean;
  readonly multiple: boolean;
  readonly resourceDataAttribute?: string;
  readonly classNames?: ResourcePickerClassNames;
  readonly isResourceDisabled?: (resource: Resource) => boolean;
  readonly getAvatarColor?: (resource: Resource) => string | undefined;
  readonly optionId?: string;
  readonly focused?: boolean;
  readonly onFocus?: () => void;
  readonly onChange: (resourceIds: readonly Id[]) => void
}

---

ResourcePickerPopup

Resource-picker-local portal.

Enterprise and Pro are shipped as separate bundles. Keeping the portal in this bundle ensures its VNodes and hooks use the same Preact runtime as the picker that owns them.

export function ResourcePickerPopup({
  triggerRef,
  portalTarget,
  popupId,
  children,
}: ResourcePickerPopupProps);

---

resourcePickerIdKey

export function resourcePickerIdKey(id: ResourcePickerId): string;

---

uniqueResourcePickerIds

export function uniqueResourcePickerIds<Id extends ResourcePickerId>(
  ids: readonly Id[],
): readonly Id[];

---

resourcePickerDataAttribute

export function resourcePickerDataAttribute(
  attribute: string | undefined,
  value: string,
): Record<string, string>;

---

resourcePickerClasses

export function resourcePickerClasses(
  ...values: readonly (string | undefined)[]
): string;