Function IconPicker

packages/dev/s2-docs/src/IconPicker.tsx:59–151

({value, onChange, label, contextualHelp}: IconPickerProps)

}

export function IconPicker({value, onChange, label, contextualHelp}: IconPickerProps) {
  let {contains} = useFilter({sensitivity: 'base'});

  // For mouse interactions, pickers open on press start. When the popover underlay appears
  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
  // to occur. We override this by listening for pointerup on the document ourselves.
  let [isPressed, setPressed] = useState(false);
  let {addGlobalListener} = useGlobalListeners();
  let onPressStart = e => {
    if (e.pointerType !== 'mouse') {
      return;
    }
    setPressed(true);
    addGlobalListener(
      document,
      'pointerup',
      () => {
        setPressed(false);
      },
      {once: true, capture: true}
    );
  };

  let valueObject: IconValue = typeof value === 'string' ? {text: value} : value;

  return (
    <Select
      aria-label="Icon"
      value={valueObject?.icon ?? null}
      onChange={icon => {
        if (!icon || icon === valueObject?.icon) {
          onChange({...valueObject, icon: null});
        } else if (icon) {
          onChange({...valueObject, icon: icon as string});
        }
      }}
      className={style({display: 'flex', flexDirection: 'column', gap: 2, width: 'fit'})}>
      {label && (
        <div>
          <Label className={style({font: 'ui', color: 'neutral-subdued'})}>{label}</Label>
          {contextualHelp && (
            <>
              &nbsp;<div style={{display: 'inline-flex'}}>{contextualHelp}</div>
            </>
          )}
        </div>
      )}
      <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
        <ActionButton
          // @ts-ignore
          isPressed={false}>
          <SelectValue<(typeof iconList)[0]> className={style({display: 'contents'})}>
            {({isPlaceholder, selectedItem}) =>
              isPlaceholder ? (
                'No icon'
              ) : (
                <>{createElement(selectedItem?.icon, {'aria-label': selectedItem?.id})}</>
              )