@clerk/ui 1.0.0-canary.v20260109133726 → 1.0.0-canary.v20260109180221

package/dist/ClerkUi.js

@@ -2,8 +2,8 @@ import { mountComponentRenderer } from "./Components.js";
 
 //#region src/ClerkUi.ts
 var ClerkUi = class {
-	static version = "1.0.0-canary.v20260109133726";
-	version = "1.0.0-canary.v20260109133726";
+	static version = "1.0.0-canary.v20260109180221";
+	version = "1.0.0-canary.v20260109180221";
 	#componentRenderer;
 	constructor(getClerk, getEnvironment, options, moduleManager) {
 		this.#componentRenderer = mountComponentRenderer(getClerk, getEnvironment, options, moduleManager);

package/dist/elements/Select.js

@@ -236,7 +236,6 @@ const SelectButton = (props) => {
 	let show = children;
 	if (!children) show = selectedOption ? buttonRenderOption(selectedOption) : /* @__PURE__ */ jsx(Text, {
 		as: "span",
-		sx: (t) => ({ opacity: t.opacity.$inactive }),
 		children: placeholder
 	});
 	return /* @__PURE__ */ jsxs(Button, {

package/dist/elements/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["show: React.ReactNode","ChevronDown"],"sources":["../../src/elements/Select.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { SelectId } from '@clerk/shared/types';\nimport type { PropsWithChildren, ReactElement, ReactNode } from 'react';\nimport React, { useState } from 'react';\n\nimport { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';\nimport { usePopover, useSearchInput } from '../hooks';\nimport { ChevronDown } from '../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../styledSystem';\nimport { animations, common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { withFloatingTree } from './contexts';\nimport type { InputWithIcon } from './InputWithIcon';\nimport { Popover } from './Popover';\n\ntype UsePopoverReturn = ReturnType<typeof usePopover>;\ntype UseSearchInputReturn = ReturnType<typeof useSearchInput>;\n\ntype Option = { value: string | null; label?: string };\n\ntype RenderOption<O extends Option> = (option: O, index?: number, isSelected?: boolean) => ReactNode;\n\ntype SelectProps<O extends Option> = {\n  options: O[];\n  value: string | null;\n  onChange: (option: O) => void;\n  searchPlaceholder?: string;\n  placeholder?: string;\n  comparator?: (term: string, option: O) => boolean;\n  noResultsMessage?: string;\n  renderOption?: RenderOption<O>;\n  elementId?: SelectId;\n  portal?: boolean;\n  referenceElement?: React.RefObject<HTMLElement>;\n};\n\ntype SelectState<O extends Option> = Pick<\n  SelectProps<O>,\n  'placeholder' | 'searchPlaceholder' | 'elementId' | 'value' | 'comparator' | 'noResultsMessage'\n> & {\n  popoverCtx: UsePopoverReturn;\n  searchInputCtx: UseSearchInputReturn;\n  renderOption: RenderOption<O>;\n  buttonRenderOption: RenderOption<O>;\n  selectedOption: Option | null;\n  select: (option: O) => void;\n  focusedItemRef: React.RefObject<HTMLDivElement>;\n  onTriggerClick: () => void;\n  portal?: boolean;\n};\n\nconst [SelectStateCtx, useSelectState] = createContextAndHook<SelectState<any>>('SelectState');\n\nconst defaultRenderOption = <O extends Option>(option: O, _index?: number) => {\n  return (\n    <Flex\n      sx={theme => ({\n        position: 'relative',\n        width: '100%',\n        padding: `${theme.space.$2} ${theme.space.$4}`,\n        margin: `0 ${theme.space.$1}`,\n        borderRadius: theme.radii.$md,\n        '&:hover, &[data-focused=\"true\"]': {\n          background: common.mutedBackground(theme),\n        },\n        '&::before': {\n          content: '\"\"',\n          position: 'absolute',\n          inset: `calc(${theme.space.$0x5} * -1) calc(${theme.space.$1} * -1)`,\n        },\n      })}\n    >\n      <Text truncate>{option.label || option.value}</Text>\n    </Flex>\n  );\n};\n\nconst defaultButtonRenderOption = <O extends Option>(option: O) => {\n  return option.label || option.value;\n};\n\nexport const Select = withFloatingTree(<O extends Option>(props: PropsWithChildren<SelectProps<O>>) => {\n  const {\n    value,\n    options,\n    onChange,\n    renderOption,\n    noResultsMessage,\n    comparator,\n    placeholder = 'Select an option',\n    searchPlaceholder,\n    elementId,\n    children,\n    portal = false,\n    referenceElement = null,\n    ...rest\n  } = props;\n  const popoverCtx = usePopover({\n    autoUpdate: true,\n    adjustToReferenceWidth: !!referenceElement,\n    referenceElement: referenceElement,\n  });\n  const togglePopover = popoverCtx.toggle;\n  const focusedItemRef = React.useRef<HTMLDivElement>(null);\n  const searchInputCtx = useSearchInput({\n    items: options,\n    comparator: comparator || (() => true),\n  });\n\n  const select = React.useCallback(\n    (option: O) => {\n      onChange?.(option);\n      togglePopover();\n    },\n    [togglePopover, onChange],\n  );\n\n  const defaultChildren = (\n    <>\n      <SelectOptionList />\n      <SelectButton />\n    </>\n  );\n\n  return (\n    <SelectStateCtx.Provider\n      value={{\n        value: {\n          popoverCtx,\n          searchInputCtx,\n          selectedOption: options.find(o => o.value === value) || null,\n          noResultsMessage,\n          focusedItemRef,\n          value,\n          renderOption: renderOption || defaultRenderOption,\n          buttonRenderOption: renderOption || defaultButtonRenderOption,\n          placeholder,\n          searchPlaceholder,\n          comparator,\n          select,\n          onTriggerClick: togglePopover,\n          elementId,\n          portal,\n        },\n      }}\n      {...rest}\n    >\n      {React.Children.count(children) ? children : defaultChildren}\n    </SelectStateCtx.Provider>\n  );\n}) as <O extends Option>(props: PropsWithChildren<SelectProps<O>>) => ReactElement;\n\ntype SelectrenderOptionProps<O extends Option> = {\n  option: Option;\n  index: number;\n  renderOption: RenderOption<O>;\n  handleSelect: (option: Option) => void;\n  isFocused?: boolean;\n  isSelected?: boolean;\n  elementId?: SelectId;\n};\n\nconst SelectRenderOption = React.memo(\n  React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {\n    const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;\n\n    return (\n      <Flex\n        ref={ref}\n        sx={{\n          userSelect: 'none',\n          cursor: 'pointer',\n        }}\n        onClick={() => {\n          handleSelect(option);\n        }}\n      >\n        {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {\n          //@ts-expect-error\n          elementDescriptor: descriptors.selectOption,\n          elementId: descriptors.selectOption.setId(elementId),\n          'data-selected': isSelected,\n          'data-focused': isFocused,\n        })}\n      </Flex>\n    );\n  }),\n);\n\nconst SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {\n  const { sx, ...rest } = props;\n  React.useEffect(() => {\n    // @ts-expect-error\n    return () => props.onChange({ target: { value: '' } });\n  }, []);\n  const { elementId } = useSelectState();\n\n  return (\n    <Flex sx={t => ({ padding: t.space.$0x5 })}>\n      <Input\n        elementDescriptor={descriptors.selectSearchInput}\n        elementId={descriptors.selectSearchInput.setId(elementId)}\n        focusRing={false}\n        variant='unstyled'\n        sx={[\n          t => ({\n            borderRadius: t.radii.$md,\n            backgroundColor: t.colors.$neutralAlpha100,\n            padding: t.space.$2,\n          }),\n          sx,\n        ]}\n        {...rest}\n      />\n    </Flex>\n  );\n};\n\nexport const SelectNoResults = (props: PropsOfComponent<typeof Text>) => {\n  const { sx, ...rest } = props;\n  return (\n    <Text\n      as='div'\n      sx={[\n        theme => ({\n          width: '100%',\n          padding: `${theme.space.$1} ${theme.space.$2} ${theme.space.$2} ${theme.space.$2}`,\n        }),\n        sx,\n      ]}\n      {...rest}\n    />\n  );\n};\n\ntype SelectOptionListProps = PropsOfComponent<typeof Flex> & {\n  containerSx?: ThemableCssProp;\n};\n\nexport const SelectOptionList = (props: SelectOptionListProps) => {\n  const { containerSx, sx, ...rest } = props;\n  const {\n    popoverCtx,\n    searchInputCtx,\n    value,\n    renderOption,\n    searchPlaceholder,\n    comparator,\n    focusedItemRef,\n    noResultsMessage,\n    select,\n    onTriggerClick,\n    elementId,\n    portal,\n  } = useSelectState();\n  const { filteredItems: options, searchInputProps } = searchInputCtx;\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const { isOpen, floating, styles, nodeId, context } = popoverCtx;\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  const scrollToItemOnSelectedIndexChange = () => {\n    if (!isOpen) {\n      setFocusedIndex(-1);\n      return;\n    }\n    // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()\n    focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });\n  };\n\n  React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);\n  React.useEffect(() => setFocusedIndex(0), [options.length]);\n  React.useEffect(() => {\n    if (!comparator) {\n      containerRef?.current?.focus();\n    }\n\n    if (isOpen) {\n      setFocusedIndex(options.findIndex(o => o.value === value));\n      // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()\n      focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });\n      return;\n    }\n  }, [isOpen]);\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      if (isOpen) {\n        return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));\n      }\n      return onTriggerClick();\n    }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (isOpen) {\n        return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));\n      }\n      return onTriggerClick();\n    }\n\n    if (e.key === 'Enter' && focusedIndex >= 0) {\n      e.preventDefault();\n      return select(options[focusedIndex]);\n    }\n  };\n\n  return (\n    <Popover\n      nodeId={nodeId}\n      context={context}\n      isOpen={isOpen}\n      portal={portal || false}\n      order={['content']}\n    >\n      <Flex\n        elementDescriptor={descriptors.selectOptionsContainer}\n        elementId={descriptors.selectOptionsContainer.setId(elementId)}\n        ref={floating}\n        onKeyDown={onKeyDown}\n        direction='col'\n        justify='start'\n        sx={[\n          theme => ({\n            backgroundColor: colors.makeSolid(theme.colors.$colorBackground),\n            borderRadius: theme.radii.$lg,\n            overflow: 'hidden',\n            animation: `${animations.dropdownSlideInScaleAndFade} ${theme.transitionDuration.$slower} ${theme.transitionTiming.$slowBezier}`,\n            transformOrigin: 'top center',\n            boxShadow: theme.shadows.$menuShadow,\n            zIndex: theme.zIndices.$dropdown,\n          }),\n          sx,\n        ]}\n        style={{ ...styles, left: styles.left - 1 }}\n      >\n        {comparator && (\n          <SelectSearchbar\n            placeholder={searchPlaceholder}\n            {...searchInputProps}\n          />\n        )}\n        <Flex\n          ref={containerRef}\n          direction='col'\n          tabIndex={comparator ? undefined : 0}\n          sx={[\n            theme => ({\n              gap: theme.space.$0x5,\n              outline: 'none',\n              overflowY: 'auto',\n              maxHeight: '18vh',\n              padding: `${theme.space.$0x5} ${theme.space.$0x5}`,\n            }),\n            containerSx,\n          ]}\n          {...rest}\n        >\n          {options.map((option, index) => {\n            const isFocused = index === focusedIndex;\n            const isSelected = value === option.value;\n\n            return (\n              <SelectRenderOption\n                key={option.value}\n                index={index}\n                ref={isFocused ? focusedItemRef : undefined}\n                option={option}\n                renderOption={renderOption}\n                isSelected={isSelected}\n                isFocused={isFocused}\n                handleSelect={select}\n                elementId={elementId}\n              />\n            );\n          })}\n          {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}\n        </Flex>\n      </Flex>\n    </Popover>\n  );\n};\n\nexport const SelectButton = (\n  props: PropsOfComponent<typeof Button> & {\n    icon?: React.ReactElement | React.ComponentType;\n    iconSx?: ThemableCssProp;\n  },\n) => {\n  const { sx, children, icon, iconSx, ...rest } = props;\n  const { popoverCtx, onTriggerClick, buttonRenderOption, selectedOption, placeholder, elementId } = useSelectState();\n  const { reference } = popoverCtx;\n\n  let show: React.ReactNode = children;\n  if (!children) {\n    show = selectedOption ? (\n      buttonRenderOption(selectedOption)\n    ) : (\n      <Text\n        as='span'\n        sx={t => ({ opacity: t.opacity.$inactive })}\n      >\n        {placeholder}\n      </Text>\n    );\n  }\n\n  return (\n    <Button\n      elementDescriptor={descriptors.selectButton}\n      elementId={descriptors.selectButton.setId(elementId)}\n      ref={reference}\n      variant='outline'\n      textVariant='buttonLarge'\n      onClick={onTriggerClick}\n      sx={[\n        theme => ({\n          gap: theme.space.$2,\n          paddingLeft: theme.space.$3x5,\n          paddingRight: theme.space.$3x5,\n          alignItems: 'center',\n          '> *': { pointerEvents: 'none' },\n        }),\n        sx,\n      ]}\n      {...rest}\n    >\n      {show}\n      <Icon\n        elementDescriptor={descriptors.selectButtonIcon}\n        elementId={descriptors.selectButtonIcon.setId(elementId)}\n        size='md'\n        icon={icon || ChevronDown}\n        sx={iconSx}\n      />\n    </Button>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["show: React.ReactNode","ChevronDown"],"sources":["../../src/elements/Select.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { SelectId } from '@clerk/shared/types';\nimport type { PropsWithChildren, ReactElement, ReactNode } from 'react';\nimport React, { useState } from 'react';\n\nimport { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';\nimport { usePopover, useSearchInput } from '../hooks';\nimport { ChevronDown } from '../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../styledSystem';\nimport { animations, common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { withFloatingTree } from './contexts';\nimport type { InputWithIcon } from './InputWithIcon';\nimport { Popover } from './Popover';\n\ntype UsePopoverReturn = ReturnType<typeof usePopover>;\ntype UseSearchInputReturn = ReturnType<typeof useSearchInput>;\n\ntype Option = { value: string | null; label?: string };\n\ntype RenderOption<O extends Option> = (option: O, index?: number, isSelected?: boolean) => ReactNode;\n\ntype SelectProps<O extends Option> = {\n  options: O[];\n  value: string | null;\n  onChange: (option: O) => void;\n  searchPlaceholder?: string;\n  placeholder?: string;\n  comparator?: (term: string, option: O) => boolean;\n  noResultsMessage?: string;\n  renderOption?: RenderOption<O>;\n  elementId?: SelectId;\n  portal?: boolean;\n  referenceElement?: React.RefObject<HTMLElement>;\n};\n\ntype SelectState<O extends Option> = Pick<\n  SelectProps<O>,\n  'placeholder' | 'searchPlaceholder' | 'elementId' | 'value' | 'comparator' | 'noResultsMessage'\n> & {\n  popoverCtx: UsePopoverReturn;\n  searchInputCtx: UseSearchInputReturn;\n  renderOption: RenderOption<O>;\n  buttonRenderOption: RenderOption<O>;\n  selectedOption: Option | null;\n  select: (option: O) => void;\n  focusedItemRef: React.RefObject<HTMLDivElement>;\n  onTriggerClick: () => void;\n  portal?: boolean;\n};\n\nconst [SelectStateCtx, useSelectState] = createContextAndHook<SelectState<any>>('SelectState');\n\nconst defaultRenderOption = <O extends Option>(option: O, _index?: number) => {\n  return (\n    <Flex\n      sx={theme => ({\n        position: 'relative',\n        width: '100%',\n        padding: `${theme.space.$2} ${theme.space.$4}`,\n        margin: `0 ${theme.space.$1}`,\n        borderRadius: theme.radii.$md,\n        '&:hover, &[data-focused=\"true\"]': {\n          background: common.mutedBackground(theme),\n        },\n        '&::before': {\n          content: '\"\"',\n          position: 'absolute',\n          inset: `calc(${theme.space.$0x5} * -1) calc(${theme.space.$1} * -1)`,\n        },\n      })}\n    >\n      <Text truncate>{option.label || option.value}</Text>\n    </Flex>\n  );\n};\n\nconst defaultButtonRenderOption = <O extends Option>(option: O) => {\n  return option.label || option.value;\n};\n\nexport const Select = withFloatingTree(<O extends Option>(props: PropsWithChildren<SelectProps<O>>) => {\n  const {\n    value,\n    options,\n    onChange,\n    renderOption,\n    noResultsMessage,\n    comparator,\n    placeholder = 'Select an option',\n    searchPlaceholder,\n    elementId,\n    children,\n    portal = false,\n    referenceElement = null,\n    ...rest\n  } = props;\n  const popoverCtx = usePopover({\n    autoUpdate: true,\n    adjustToReferenceWidth: !!referenceElement,\n    referenceElement: referenceElement,\n  });\n  const togglePopover = popoverCtx.toggle;\n  const focusedItemRef = React.useRef<HTMLDivElement>(null);\n  const searchInputCtx = useSearchInput({\n    items: options,\n    comparator: comparator || (() => true),\n  });\n\n  const select = React.useCallback(\n    (option: O) => {\n      onChange?.(option);\n      togglePopover();\n    },\n    [togglePopover, onChange],\n  );\n\n  const defaultChildren = (\n    <>\n      <SelectOptionList />\n      <SelectButton />\n    </>\n  );\n\n  return (\n    <SelectStateCtx.Provider\n      value={{\n        value: {\n          popoverCtx,\n          searchInputCtx,\n          selectedOption: options.find(o => o.value === value) || null,\n          noResultsMessage,\n          focusedItemRef,\n          value,\n          renderOption: renderOption || defaultRenderOption,\n          buttonRenderOption: renderOption || defaultButtonRenderOption,\n          placeholder,\n          searchPlaceholder,\n          comparator,\n          select,\n          onTriggerClick: togglePopover,\n          elementId,\n          portal,\n        },\n      }}\n      {...rest}\n    >\n      {React.Children.count(children) ? children : defaultChildren}\n    </SelectStateCtx.Provider>\n  );\n}) as <O extends Option>(props: PropsWithChildren<SelectProps<O>>) => ReactElement;\n\ntype SelectrenderOptionProps<O extends Option> = {\n  option: Option;\n  index: number;\n  renderOption: RenderOption<O>;\n  handleSelect: (option: Option) => void;\n  isFocused?: boolean;\n  isSelected?: boolean;\n  elementId?: SelectId;\n};\n\nconst SelectRenderOption = React.memo(\n  React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {\n    const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;\n\n    return (\n      <Flex\n        ref={ref}\n        sx={{\n          userSelect: 'none',\n          cursor: 'pointer',\n        }}\n        onClick={() => {\n          handleSelect(option);\n        }}\n      >\n        {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {\n          //@ts-expect-error\n          elementDescriptor: descriptors.selectOption,\n          elementId: descriptors.selectOption.setId(elementId),\n          'data-selected': isSelected,\n          'data-focused': isFocused,\n        })}\n      </Flex>\n    );\n  }),\n);\n\nconst SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {\n  const { sx, ...rest } = props;\n  React.useEffect(() => {\n    // @ts-expect-error\n    return () => props.onChange({ target: { value: '' } });\n  }, []);\n  const { elementId } = useSelectState();\n\n  return (\n    <Flex sx={t => ({ padding: t.space.$0x5 })}>\n      <Input\n        elementDescriptor={descriptors.selectSearchInput}\n        elementId={descriptors.selectSearchInput.setId(elementId)}\n        focusRing={false}\n        variant='unstyled'\n        sx={[\n          t => ({\n            borderRadius: t.radii.$md,\n            backgroundColor: t.colors.$neutralAlpha100,\n            padding: t.space.$2,\n          }),\n          sx,\n        ]}\n        {...rest}\n      />\n    </Flex>\n  );\n};\n\nexport const SelectNoResults = (props: PropsOfComponent<typeof Text>) => {\n  const { sx, ...rest } = props;\n  return (\n    <Text\n      as='div'\n      sx={[\n        theme => ({\n          width: '100%',\n          padding: `${theme.space.$1} ${theme.space.$2} ${theme.space.$2} ${theme.space.$2}`,\n        }),\n        sx,\n      ]}\n      {...rest}\n    />\n  );\n};\n\ntype SelectOptionListProps = PropsOfComponent<typeof Flex> & {\n  containerSx?: ThemableCssProp;\n};\n\nexport const SelectOptionList = (props: SelectOptionListProps) => {\n  const { containerSx, sx, ...rest } = props;\n  const {\n    popoverCtx,\n    searchInputCtx,\n    value,\n    renderOption,\n    searchPlaceholder,\n    comparator,\n    focusedItemRef,\n    noResultsMessage,\n    select,\n    onTriggerClick,\n    elementId,\n    portal,\n  } = useSelectState();\n  const { filteredItems: options, searchInputProps } = searchInputCtx;\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const { isOpen, floating, styles, nodeId, context } = popoverCtx;\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  const scrollToItemOnSelectedIndexChange = () => {\n    if (!isOpen) {\n      setFocusedIndex(-1);\n      return;\n    }\n    // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()\n    focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });\n  };\n\n  React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);\n  React.useEffect(() => setFocusedIndex(0), [options.length]);\n  React.useEffect(() => {\n    if (!comparator) {\n      containerRef?.current?.focus();\n    }\n\n    if (isOpen) {\n      setFocusedIndex(options.findIndex(o => o.value === value));\n      // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()\n      focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });\n      return;\n    }\n  }, [isOpen]);\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      if (isOpen) {\n        return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));\n      }\n      return onTriggerClick();\n    }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (isOpen) {\n        return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));\n      }\n      return onTriggerClick();\n    }\n\n    if (e.key === 'Enter' && focusedIndex >= 0) {\n      e.preventDefault();\n      return select(options[focusedIndex]);\n    }\n  };\n\n  return (\n    <Popover\n      nodeId={nodeId}\n      context={context}\n      isOpen={isOpen}\n      portal={portal || false}\n      order={['content']}\n    >\n      <Flex\n        elementDescriptor={descriptors.selectOptionsContainer}\n        elementId={descriptors.selectOptionsContainer.setId(elementId)}\n        ref={floating}\n        onKeyDown={onKeyDown}\n        direction='col'\n        justify='start'\n        sx={[\n          theme => ({\n            backgroundColor: colors.makeSolid(theme.colors.$colorBackground),\n            borderRadius: theme.radii.$lg,\n            overflow: 'hidden',\n            animation: `${animations.dropdownSlideInScaleAndFade} ${theme.transitionDuration.$slower} ${theme.transitionTiming.$slowBezier}`,\n            transformOrigin: 'top center',\n            boxShadow: theme.shadows.$menuShadow,\n            zIndex: theme.zIndices.$dropdown,\n          }),\n          sx,\n        ]}\n        style={{ ...styles, left: styles.left - 1 }}\n      >\n        {comparator && (\n          <SelectSearchbar\n            placeholder={searchPlaceholder}\n            {...searchInputProps}\n          />\n        )}\n        <Flex\n          ref={containerRef}\n          direction='col'\n          tabIndex={comparator ? undefined : 0}\n          sx={[\n            theme => ({\n              gap: theme.space.$0x5,\n              outline: 'none',\n              overflowY: 'auto',\n              maxHeight: '18vh',\n              padding: `${theme.space.$0x5} ${theme.space.$0x5}`,\n            }),\n            containerSx,\n          ]}\n          {...rest}\n        >\n          {options.map((option, index) => {\n            const isFocused = index === focusedIndex;\n            const isSelected = value === option.value;\n\n            return (\n              <SelectRenderOption\n                key={option.value}\n                index={index}\n                ref={isFocused ? focusedItemRef : undefined}\n                option={option}\n                renderOption={renderOption}\n                isSelected={isSelected}\n                isFocused={isFocused}\n                handleSelect={select}\n                elementId={elementId}\n              />\n            );\n          })}\n          {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}\n        </Flex>\n      </Flex>\n    </Popover>\n  );\n};\n\nexport const SelectButton = (\n  props: PropsOfComponent<typeof Button> & {\n    icon?: React.ReactElement | React.ComponentType;\n    iconSx?: ThemableCssProp;\n  },\n) => {\n  const { sx, children, icon, iconSx, ...rest } = props;\n  const { popoverCtx, onTriggerClick, buttonRenderOption, selectedOption, placeholder, elementId } = useSelectState();\n  const { reference } = popoverCtx;\n\n  let show: React.ReactNode = children;\n  if (!children) {\n    show = selectedOption ? buttonRenderOption(selectedOption) : <Text as='span'>{placeholder}</Text>;\n  }\n\n  return (\n    <Button\n      elementDescriptor={descriptors.selectButton}\n      elementId={descriptors.selectButton.setId(elementId)}\n      ref={reference}\n      variant='outline'\n      textVariant='buttonLarge'\n      onClick={onTriggerClick}\n      sx={[\n        theme => ({\n          gap: theme.space.$2,\n          paddingLeft: theme.space.$3x5,\n          paddingRight: theme.space.$3x5,\n          alignItems: 'center',\n          '> *': { pointerEvents: 'none' },\n        }),\n        sx,\n      ]}\n      {...rest}\n    >\n      {show}\n      <Icon\n        elementDescriptor={descriptors.selectButtonIcon}\n        elementId={descriptors.selectButtonIcon.setId(elementId)}\n        size='md'\n        icon={icon || ChevronDown}\n        sx={iconSx}\n      />\n    </Button>\n  );\n};\n"],"mappings":"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"}

package/dist/index.js

@@ -3,7 +3,7 @@
 * Default ui object for Clerk UI components
 * Tagged with the internal Appearance type for type-safe appearance prop inference
 */
-const ui = { version: "1.0.0-canary.v20260109133726" };
+const ui = { version: "1.0.0-canary.v20260109180221" };
 
 //#endregion
 export { ui };

package/dist/internal/index.js

@@ -5,7 +5,7 @@
 * Do not use
 */
 const localUiForTesting = {
-	version: "1.0.0-canary.v20260109133726",
+	version: "1.0.0-canary.v20260109180221",
 	url: "http://localhost:4011/npm/ui.browser.js"
 };
 

package/dist/lazyModules/components.d.ts

@@ -3,38 +3,38 @@ import { AvailableComponentProps } from "../types.js";
 import { WithInternalRouting } from "../internal/routing.js";
 import * as react0 from "react";
 import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
-import * as _clerk_shared_types151 from "@clerk/shared/types";
+import * as _clerk_shared_types0 from "@clerk/shared/types";
 
 //#region src/lazyModules/components.d.ts
 
 declare const ClerkComponents: {
-  SignIn: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types151.SignInProps>>;
-  SignUp: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types151.SignUpProps>>;
-  UserAvatar: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types151.UserAvatarProps>>;
+  SignIn: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types0.SignInProps>>;
+  SignUp: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types0.SignUpProps>>;
+  UserAvatar: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types0.UserAvatarProps>>;
   UserButton: react0.LazyExoticComponent<react0.ComponentType<unknown>>;
-  UserProfile: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types151.UserProfileProps>>;
-  UserVerification: react0.LazyExoticComponent<react0.ComponentType<WithInternalRouting<_clerk_shared_types151.__internal_UserVerificationProps>>>;
-  EnableOrganizationsPrompt: react0.LazyExoticComponent<(props: _clerk_shared_types151.__internal_EnableOrganizationsPromptProps) => JSX.Element>;
+  UserProfile: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types0.UserProfileProps>>;
+  UserVerification: react0.LazyExoticComponent<react0.ComponentType<WithInternalRouting<_clerk_shared_types0.__internal_UserVerificationProps>>>;
+  EnableOrganizationsPrompt: react0.LazyExoticComponent<(props: _clerk_shared_types0.__internal_EnableOrganizationsPromptProps) => JSX.Element>;
   OrganizationSwitcher: react0.LazyExoticComponent<react0.ComponentType<unknown>>;
   OrganizationList: react0.LazyExoticComponent<() => _emotion_react_jsx_runtime0.JSX.Element>;
-  OrganizationProfile: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types151.OrganizationProfileProps>>;
+  OrganizationProfile: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types0.OrganizationProfileProps>>;
   CreateOrganization: react0.LazyExoticComponent<(props: unknown) => _emotion_react_jsx_runtime0.JSX.Element>;
-  SignInModal: react0.LazyExoticComponent<(props: _clerk_shared_types151.SignInModalProps) => JSX.Element>;
-  SignUpModal: react0.LazyExoticComponent<(props: _clerk_shared_types151.SignUpModalProps) => JSX.Element>;
-  UserProfileModal: react0.LazyExoticComponent<(props: _clerk_shared_types151.UserProfileModalProps) => JSX.Element>;
-  OrganizationProfileModal: react0.LazyExoticComponent<(props: _clerk_shared_types151.OrganizationProfileModalProps) => JSX.Element>;
-  CreateOrganizationModal: react0.LazyExoticComponent<(props: _clerk_shared_types151.CreateOrganizationModalProps) => JSX.Element>;
-  UserVerificationModal: react0.LazyExoticComponent<(props: _clerk_shared_types151.__internal_UserVerificationModalProps) => JSX.Element>;
-  GoogleOneTap: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types151.GoogleOneTapProps>>;
+  SignInModal: react0.LazyExoticComponent<(props: _clerk_shared_types0.SignInModalProps) => JSX.Element>;
+  SignUpModal: react0.LazyExoticComponent<(props: _clerk_shared_types0.SignUpModalProps) => JSX.Element>;
+  UserProfileModal: react0.LazyExoticComponent<(props: _clerk_shared_types0.UserProfileModalProps) => JSX.Element>;
+  OrganizationProfileModal: react0.LazyExoticComponent<(props: _clerk_shared_types0.OrganizationProfileModalProps) => JSX.Element>;
+  CreateOrganizationModal: react0.LazyExoticComponent<(props: _clerk_shared_types0.CreateOrganizationModalProps) => JSX.Element>;
+  UserVerificationModal: react0.LazyExoticComponent<(props: _clerk_shared_types0.__internal_UserVerificationModalProps) => JSX.Element>;
+  GoogleOneTap: react0.LazyExoticComponent<react0.ComponentType<_clerk_shared_types0.GoogleOneTapProps>>;
   Waitlist: react0.LazyExoticComponent<(props: unknown) => _emotion_react_jsx_runtime0.JSX.Element>;
-  WaitlistModal: react0.LazyExoticComponent<(props: _clerk_shared_types151.WaitlistModalProps) => JSX.Element>;
+  WaitlistModal: react0.LazyExoticComponent<(props: _clerk_shared_types0.WaitlistModalProps) => JSX.Element>;
   BlankCaptchaModal: react0.LazyExoticComponent<typeof BlankCaptchaModal>;
-  PricingTable: react0.LazyExoticComponent<(props: _clerk_shared_types151.PricingTableProps) => _emotion_react_jsx_runtime0.JSX.Element>;
-  Checkout: react0.LazyExoticComponent<(props: _clerk_shared_types151.__internal_CheckoutProps) => _emotion_react_jsx_runtime0.JSX.Element>;
-  PlanDetails: react0.LazyExoticComponent<(props: _clerk_shared_types151.__internal_PlanDetailsProps) => _emotion_react_jsx_runtime0.JSX.Element>;
+  PricingTable: react0.LazyExoticComponent<(props: _clerk_shared_types0.PricingTableProps) => _emotion_react_jsx_runtime0.JSX.Element>;
+  Checkout: react0.LazyExoticComponent<(props: _clerk_shared_types0.__internal_CheckoutProps) => _emotion_react_jsx_runtime0.JSX.Element>;
+  PlanDetails: react0.LazyExoticComponent<(props: _clerk_shared_types0.__internal_PlanDetailsProps) => _emotion_react_jsx_runtime0.JSX.Element>;
   APIKeys: react0.LazyExoticComponent<react0.ComponentType<unknown>>;
   OAuthConsent: react0.LazyExoticComponent<(props: unknown) => _emotion_react_jsx_runtime0.JSX.Element>;
-  SubscriptionDetails: react0.LazyExoticComponent<(props: _clerk_shared_types151.__internal_SubscriptionDetailsProps) => _emotion_react_jsx_runtime0.JSX.Element>;
+  SubscriptionDetails: react0.LazyExoticComponent<(props: _clerk_shared_types0.__internal_SubscriptionDetailsProps) => _emotion_react_jsx_runtime0.JSX.Element>;
   TaskChooseOrganization: react0.LazyExoticComponent<react0.ComponentType<AvailableComponentProps>>;
   TaskResetPassword: react0.LazyExoticComponent<react0.ComponentType<AvailableComponentProps>>;
 };

package/dist/lazyModules/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","names":[],"sources":["../../src/lazyModules/components.ts"],"sourcesContent":[],"mappings":";;;;;;;;;cAuJa;0DA8BZ,sBAAA,CAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEW,kBAAA,gBAAkC"}
+{"version":3,"file":"components.d.ts","names":[],"sources":["../../src/lazyModules/components.ts"],"sourcesContent":[],"mappings":";;;;;;;;;cAuJa;0DA8BZ,oBAAA,CAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEW,kBAAA,gBAAkC"}