react-aria-components 0.0.4 → 1.0.0-alpha.2

package/src/Popover.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, usePopover} from 'react-aria';
+import {ContextValue, HiddenContext, RenderProps, SlotProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
+import {OverlayArrowContext} from './OverlayArrow';
+import {OverlayTriggerState} from 'react-stately';
+import React, {createContext, ForwardedRef, forwardRef, RefObject} from 'react';
+
+export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'>, RenderProps<PopoverRenderProps>, SlotProps {
+  /**
+   * The ref for the element which the popover positions itself with respect to.
+   *
+   * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,
+   * this is set automatically. It is only required when used standalone.
+   */
+  triggerRef?: RefObject<Element>
+}
+
+export interface PopoverRenderProps {
+  /**
+   * The placement of the tooltip relative to the trigger.
+   * @selector [data-placement="left | right | top | bottom"]
+   */
+  placement: PlacementAxis,
+  /**
+   * Whether the popover is currently entering. Use this to apply animations.
+   * @selector [data-entering]
+   */
+  isEntering: boolean,
+  /**
+   * Whether the popover is currently exiting. Use this to apply animations.
+   * @selector [data-exiting]
+   */
+  isExiting: boolean
+}
+
+interface PopoverContextValue extends PopoverProps {
+  state: OverlayTriggerState,
+  preserveChildren?: boolean,
+  triggerRef: RefObject<Element>
+}
+
+export const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);
+
+function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
+  [props, ref] = useContextProps(props, ref, PopoverContext);
+  let {preserveChildren, state, triggerRef} = props as PopoverContextValue;
+  let isExiting = useExitAnimation(ref, state.isOpen);
+
+  if (state && !state.isOpen && !isExiting) {
+    return preserveChildren ? <HiddenContext.Provider value>{props.children}</HiddenContext.Provider> : null;
+  }
+
+  return (
+    <PopoverInner
+      {...props}
+      triggerRef={triggerRef}
+      state={state}
+      popoverRef={ref}
+      isExiting={isExiting} />
+  );
+}
+
+/**
+ * A popover is an overlay element positioned relative to a trigger.
+ */
+const _Popover = forwardRef(Popover);
+export {_Popover as Popover};
+
+interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {
+  state: OverlayTriggerState,
+  isExiting: boolean
+}
+
+function PopoverInner({children, state, isExiting, ...props}: PopoverInnerProps) {
+  let {popoverProps, underlayProps, arrowProps, placement} = usePopover({
+    ...props,
+    offset: props.offset ?? 8
+  }, state);
+
+  let ref = props.popoverRef as RefObject<HTMLDivElement>;
+  let isEntering = useEnterAnimation(ref, !!placement);
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-Popover',
+    values: {
+      placement,
+      isEntering,
+      isExiting
+    }
+  });
+
+  let style = {...renderProps.style, ...popoverProps.style};
+
+  return (
+    <Overlay>
+      {!props.isNonModal && <div {...underlayProps} style={{position: 'fixed', inset: 0}} />}
+      <div
+        {...popoverProps}
+        {...renderProps}
+        ref={ref}
+        slot={props.slot}
+        style={style}
+        data-placement={placement}
+        data-entering={isEntering || undefined}
+        data-exiting={isExiting || undefined}>
+        {!props.isNonModal && <DismissButton onDismiss={state.close} />}
+        <OverlayArrowContext.Provider value={{arrowProps, placement}}>
+          {children}
+        </OverlayArrowContext.Provider>
+        <DismissButton onDismiss={state.close} />
+      </div>
+    </Overlay>
+  );
+}

package/src/ProgressBar.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaProgressBarProps, useProgressBar} from 'react-aria';
+import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {LabelContext} from './Label';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+
+export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'label'>, RenderProps<ProgressBarRenderProps>, SlotProps {}
+
+export interface ProgressBarRenderProps {
+  /**
+   * The value as a percentage between the minimum and maximum.
+   */
+  percentage?: number,
+  /**
+   * A formatted version of the value.
+   * @selector [aria-valuetext]
+   */
+  valueText?: string,
+  /**
+   * Whether the progress bar is indeterminate.
+   * @selector :not([aria-valuenow])
+   */
+  isIndeterminate: boolean
+}
+
+export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, HTMLDivElement>>(null);
+
+function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ProgressBarContext);
+  let {
+    value = 0,
+    minValue = 0,
+    maxValue = 100,
+    isIndeterminate = false
+  } = props;
+
+  let [labelRef, label] = useSlot();
+  let {
+    progressBarProps,
+    labelProps
+  } = useProgressBar({...props, label});
+
+  // Calculate the width of the progress bar as a percentage
+  let percentage = isIndeterminate ? undefined : (value - minValue) / (maxValue - minValue) * 100;
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-ProgressBar',
+    values: {
+      percentage,
+      valueText: progressBarProps['aria-valuetext'],
+      isIndeterminate
+    }
+  });
+
+  return (
+    <div {...progressBarProps} {...renderProps} ref={ref} slot={props.slot}>
+      <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
+        {renderProps.children}
+      </LabelContext.Provider>
+    </div>
+  );
+}
+
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ */
+const _ProgressBar = forwardRef(ProgressBar);
+export {_ProgressBar as ProgressBar};

package/src/RadioGroup.tsx

@@ -0,0 +1,219 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaRadioGroupProps, AriaRadioProps, Orientation, useFocusRing, useHover, usePress, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
+import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {LabelContext} from './Label';
+import {mergeProps, useObjectRef} from '@react-aria/utils';
+import {RadioGroupState, useRadioGroupState, ValidationState} from 'react-stately';
+import React, {createContext, ForwardedRef, forwardRef, useState} from 'react';
+import {TextContext} from './Text';
+
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage'>, RenderProps<RadioGroupRenderProps>, SlotProps {}
+export interface RadioProps extends Omit<AriaRadioProps, 'children'>, RenderProps<RadioRenderProps> {}
+
+export interface RadioGroupRenderProps {
+  /**
+   * The orientation of the radio group.
+   * @selector [aria-orientation="horizontal | vertical"]
+   */
+  orientation: Orientation,
+  /**
+   * Whether the radio group is disabled.
+   * @selector [aria-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the radio group is read only.
+   * @selector [aria-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the radio group is required.
+   * @selector [aria-required]
+   */
+  isRequired: boolean,
+  /**
+   * The validation state of the radio group.
+   * @selector [aria-invalid]
+   */
+  validationState: ValidationState | null
+}
+
+export interface RadioRenderProps {
+  /**
+   * Whether the radio is selected.
+   * @selector [data-selected]
+   */
+   isSelected: boolean,
+   /**
+    * Whether the radio is currently hovered with a mouse.
+    * @selector [data-hovered]
+    */
+   isHovered: boolean,
+   /**
+    * Whether the radio is currently in a pressed state.
+    * @selector [data-pressed]
+    */
+   isPressed: boolean,
+   /**
+    * Whether the radio is focused, either via a mouse or keyboard.
+    * @selector [data-focused]
+    */
+   isFocused: boolean,
+   /**
+    * Whether the radio is keyboard focused.
+    * @selector [data-focus-visible]
+    */
+   isFocusVisible: boolean,
+   /**
+    * Whether the radio is disabled.
+    * @selector [data-disabled]
+    */
+   isDisabled: boolean,
+   /**
+    * Whether the radio is read only.
+    * @selector [data-readonly]
+    */
+   isReadOnly: boolean,
+   /**
+    * Whether the radio is valid or invalid.
+    * @selector [data-validation-state="valid | invalid"]
+    */
+   validationState: ValidationState | null,
+   /**
+    * Whether the checkbox is required.
+    * @selector [data-required]
+    */
+   isRequired: boolean
+}
+
+export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
+let InternalRadioContext = createContext<RadioGroupState | null>(null);
+
+function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, RadioGroupContext);
+  let state = useRadioGroupState(props);
+  let [labelRef, label] = useSlot();
+  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps} = useRadioGroup({
+    ...props,
+    label
+  }, state);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      orientation: props.orientation || 'vertical',
+      isDisabled: state.isDisabled,
+      isReadOnly: state.isReadOnly,
+      isRequired: state.isRequired,
+      validationState: state.validationState
+    },
+    defaultClassName: 'react-aria-RadioGroup'
+  });
+
+  return (
+    <div {...radioGroupProps} {...renderProps} ref={ref} slot={props.slot}>
+      <Provider
+        values={[
+          [InternalRadioContext, state],
+          [LabelContext, {...labelProps, ref: labelRef}],
+          [TextContext, {
+            slots: {
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </div>
+  );
+}
+
+function Radio(props: RadioProps, ref: ForwardedRef<HTMLInputElement>) {
+  let state = React.useContext(InternalRadioContext)!;
+  let domRef = useObjectRef(ref);
+  let {inputProps, isSelected, isDisabled, isPressed: isPressedKeyboard} = useRadio(props, state, domRef);
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
+  let interactionDisabled = isDisabled || state.isReadOnly;
+
+  // Handle press state for full label. Keyboard press state is returned by useCheckbox
+  // since it is handled on the <input> element itself.
+  let [isPressed, setPressed] = useState(false);
+  let {pressProps} = usePress({
+    isDisabled: interactionDisabled,
+    onPressStart(e) {
+      if (e.pointerType !== 'keyboard') {
+        setPressed(true);
+      }
+    },
+    onPressEnd(e) {
+      if (e.pointerType !== 'keyboard') {
+        setPressed(false);
+      }
+    }
+  });
+
+  let {hoverProps, isHovered} = useHover({
+    isDisabled: interactionDisabled
+  });
+
+  let pressed = interactionDisabled ? false : (isPressed || isPressedKeyboard);
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-Radio',
+    values: {
+      isSelected,
+      isPressed: pressed,
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isReadOnly: state.isReadOnly,
+      validationState: state.validationState,
+      isRequired: state.isRequired
+    }
+  });
+
+  return (
+    <label
+      {...mergeProps(pressProps, hoverProps, renderProps)}
+      data-selected={isSelected || undefined}
+      data-pressed={pressed || undefined}
+      data-hovered={isHovered || undefined}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-disabled={isDisabled || undefined}
+      data-readonly={state.isReadOnly || undefined}
+      data-validation-state={state.validationState || undefined}
+      data-required={state.isRequired || undefined}>
+      <VisuallyHidden>
+        <input {...inputProps} {...focusProps} ref={domRef} />
+      </VisuallyHidden>
+      {renderProps.children}
+    </label>
+  );
+}
+
+/**
+ * A radio group allows a user to select a single item from a list of mutually exclusive options.
+ */
+const _RadioGroup = forwardRef(RadioGroup);
+
+/**
+ * A radio represents an individual option within a radio group.
+ */
+const _Radio = forwardRef(Radio);
+
+export {_RadioGroup as RadioGroup, _Radio as Radio};

package/src/SearchField.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaSearchFieldProps, useSearchField} from 'react-aria';
+import {ButtonContext} from './Button';
+import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {InputContext} from './Input';
+import {LabelContext} from './Label';
+import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import {SearchFieldState, useSearchFieldState} from 'react-stately';
+import {TextContext} from './Text';
+
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage'>, RenderProps<SearchFieldState>, SlotProps {}
+
+export interface SearchFieldRenderProps {
+  /**
+   * Whether the search field is empty.
+   * @selector [data-empty]
+   */
+  isEmpty: boolean
+}
+
+export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);
+
+function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, SearchFieldContext);
+  let inputRef = useRef<HTMLInputElement>(null);
+  let [labelRef, label] = useSlot();
+  let state = useSearchFieldState(props);
+  let {labelProps, inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
+    ...props,
+    label
+  }, state, inputRef);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: state,
+    defaultClassName: 'react-aria-SearchField'
+  });
+
+  return (
+    <div
+      {...renderProps}
+      ref={ref}
+      slot={props.slot}
+      data-empty={state.value === '' || undefined}>
+      <Provider
+        values={[
+          [LabelContext, {...labelProps, ref: labelRef}],
+          [InputContext, {...inputProps, ref: inputRef}],
+          [ButtonContext, clearButtonProps],
+          [TextContext, {
+            slots: {
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </div>
+  );
+}
+
+/**
+ * A search field allows a user to enter and clear a search query.
+ */
+const _SearchField = forwardRef(SearchField);
+export {_SearchField as SearchField};

package/src/Select.tsx

@@ -0,0 +1,180 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria';
+import {ButtonContext} from './Button';
+import {ContextValue, forwardRefType, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {createContext, ForwardedRef, HTMLAttributes, ReactNode, useCallback, useContext, useRef, useState} from 'react';
+import {ItemRenderProps, useCollection} from './Collection';
+import {LabelContext} from './Label';
+import {ListBoxContext, ListBoxProps} from './ListBox';
+import {PopoverContext} from './Popover';
+import React, {forwardRef} from 'react';
+import {SelectState, useSelectState} from 'react-stately';
+import {TextContext} from './Text';
+import {useResizeObserver} from '@react-aria/utils';
+
+export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'description' | 'errorMessage'>, RenderProps<SelectState<T>>, SlotProps {}
+
+interface SelectValueContext {
+  state: SelectState<unknown>,
+  valueProps: HTMLAttributes<HTMLElement>
+}
+
+export const SelectContext = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
+const InternalSelectContext = createContext<SelectValueContext | null>(null);
+
+function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, SelectContext);
+  let [listBoxProps, setListBoxProps] = useState<ListBoxProps<any>>({children: []});
+
+  let {portal, collection} = useCollection({
+    items: props.items ?? listBoxProps.items,
+    children: listBoxProps.children
+  });
+  let state = useSelectState({
+    ...props,
+    collection,
+    children: undefined
+  });
+
+  // Get props for child elements from useSelect
+  let buttonRef = useRef<HTMLButtonElement>(null);
+  let [labelRef, label] = useSlot();
+  let {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    descriptionProps,
+    errorMessageProps
+  } = useSelect({...props, label}, state, buttonRef);
+
+  // Make menu width match input + button
+  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth + 'px');
+    }
+  }, [buttonRef]);
+
+  useResizeObserver({
+    ref: buttonRef,
+    onResize: onResize
+  });
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: state,
+    defaultClassName: 'react-aria-Select'
+  });
+
+  return (
+    <Provider
+      values={[
+        [InternalSelectContext, {state, valueProps}],
+        [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
+        [ButtonContext, {...triggerProps, ref: buttonRef, isPressed: state.isOpen}],
+        [PopoverContext, {
+          state,
+          triggerRef: buttonRef,
+          preserveChildren: true,
+          placement: 'bottom start',
+          style: {'--trigger-width': buttonWidth} as React.CSSProperties
+        }],
+        [ListBoxContext, {state, [slotCallbackSymbol]: setListBoxProps, ...menuProps}],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }]
+      ]}>
+      <div {...renderProps} ref={ref} slot={props.slot}>
+        {props.children}
+      </div>
+      {portal}
+      <HiddenSelect
+        state={state}
+        triggerRef={buttonRef}
+        label={label}
+        name={props.name} />
+    </Provider>
+  );
+}
+
+/**
+ * A select displays a collapsible list of options and allows a user to select one of them.
+ */
+const _Select = (forwardRef as forwardRefType)(Select);
+export {_Select as Select};
+
+export interface SelectValueRenderProps<T> {
+  /**
+   * Whether the value is a placeholder.
+   * @selector [data-placeholder]
+   */
+  isPlaceholder: boolean,
+  /** The object value of the currently selected item. */
+  selectedItem: T | null,
+  /** The textValue of the currently selected item. */
+  selectedText: string | null
+}
+
+export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>> {}
+
+function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
+  let {state, valueProps} = useContext(InternalSelectContext)!;
+  let rendered = state.selectedItem?.rendered;
+  if (typeof rendered === 'function') {
+    // If the selected item has a function as a child, we need to call it to render to JSX.
+    let fn = rendered as (s: ItemRenderProps) => ReactNode;
+    rendered = fn({
+      isHovered: false,
+      isPressed: false,
+      isSelected: false,
+      isFocused: false,
+      isFocusVisible: false,
+      isDisabled: false,
+      selectionMode: 'single',
+      selectionBehavior: 'toggle'
+    });
+  }
+
+  let renderProps = useRenderProps({
+    ...props,
+    // TODO: localize this.
+    defaultChildren: rendered || 'Select an item',
+    defaultClassName: 'react-aria-SelectValue',
+    values: {
+      selectedItem: state.selectedItem?.value as T ?? null,
+      selectedText: state.selectedItem?.textValue ?? null,
+      isPlaceholder: !state.selectedItem
+    }
+  });
+
+  return (
+    <span ref={ref} {...valueProps} {...renderProps} data-placeholder={!state.selectedItem || undefined}>
+      {/* clear description and error message slots */}
+      <TextContext.Provider value={undefined}>
+        {renderProps.children}
+      </TextContext.Provider>
+    </span>
+  );
+}
+
+/**
+ * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
+ * It is usually placed within the button element.
+ */
+const _SelectValue = (forwardRef as forwardRefType)(SelectValue);
+export {_SelectValue as SelectValue};