@depup/react-aria-components 1.16.0-depup.0

package/src/ColorThumb.tsx

@@ -0,0 +1,108 @@
+import {ClassNameOrFunction, dom, RenderProps, useRenderProps} from './utils';
+import {Color} from 'react-stately';
+import {filterDOMProps} from '@react-aria/utils';
+import {GlobalDOMAttributes, HoverEvents, RefObject} from '@react-types/shared';
+import {mergeProps, useFocusRing, useHover} from 'react-aria';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';
+
+interface ColorState {
+  getDisplayColor(): Color,
+  isDragging: boolean
+}
+
+interface InternalColorThumbContextValue {
+  state: ColorState,
+  thumbProps: HTMLAttributes<HTMLElement>,
+  inputXRef: RefObject<HTMLInputElement | null>,
+  inputYRef?: RefObject<HTMLInputElement | null>,
+  xInputProps: InputHTMLAttributes<HTMLInputElement>,
+  yInputProps?: InputHTMLAttributes<HTMLInputElement>,
+  isDisabled?: boolean
+}
+
+export const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);
+
+export interface ColorThumbRenderProps {
+  /**
+   * The selected color, excluding the alpha channel.
+   */
+  color: Color,
+  /**
+   * Whether this thumb is currently being dragged.
+   * @selector [data-dragging]
+   */
+  isDragging: boolean,
+  /**
+   * Whether the thumb is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the thumb is currently focused.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the thumb is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the thumb is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean
+}
+
+export interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-ColorThumb'
+   */
+  className?: ClassNameOrFunction<ColorThumbRenderProps>
+}
+
+/**
+ * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
+ */
+export const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  let {hoverProps, isHovered} = useHover(props);
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-ColorThumb',
+    defaultStyle: {
+      ...thumbProps.style,
+      backgroundColor: state.getDisplayColor().toString()
+    },
+    values: {
+      color: state.getDisplayColor(),
+      isHovered,
+      isDragging: state.isDragging,
+      isFocused,
+      isFocusVisible,
+      isDisabled
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <dom.div
+      {...mergeProps(thumbProps, hoverProps, DOMProps)}
+      {...renderProps}
+      ref={ref}
+      data-hovered={isHovered || undefined}
+      data-dragging={state.isDragging || undefined}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-disabled={isDisabled || undefined}>
+      <input ref={inputXRef} {...xInputProps} {...focusProps} />
+      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}
+      {renderProps.children}
+    </dom.div>
+  );
+});

package/src/ColorWheel.tsx

@@ -0,0 +1,122 @@
+import {AriaColorWheelOptions, useColorWheel} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RenderProps,
+  SlotProps,
+  StyleRenderProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
+import {ColorWheelContext} from './RSPContexts';
+import {ColorWheelState, useColorWheelState} from 'react-stately';
+import {filterDOMProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
+import {InternalColorThumbContext} from './ColorThumb';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';
+
+export interface ColorWheelRenderProps {
+  /**
+   * Whether the color wheel is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * State of the color wheel.
+   */
+  state: ColorWheelState
+}
+
+export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-ColorWheel'
+   */
+  className?: ClassNameOrFunction<ColorWheelRenderProps>
+}
+
+export const ColorWheelStateContext = createContext<ColorWheelState | null>(null);
+
+/**
+ * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ColorWheelContext);
+  let state = useColorWheelState(props);
+  let inputRef = useRef(null);
+  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      state,
+      isDisabled: props.isDisabled || false
+    },
+    defaultClassName: 'react-aria-ColorWheel',
+    defaultStyle: {
+      position: 'relative'
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <dom.div
+      {...DOMProps}
+      {...renderProps}
+      ref={ref}
+      slot={props.slot || undefined}
+      data-disabled={props.isDisabled || undefined}>
+      <Provider
+        values={[
+          [ColorWheelStateContext, state],
+          [ColorWheelTrackContext, trackProps],
+          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </dom.div>
+  );
+});
+
+export interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}
+export interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-ColorWheelTrack'
+   */
+  className?: ClassNameOrFunction<ColorWheelTrackRenderProps>
+}
+interface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, StyleRenderProps<ColorWheelTrackRenderProps> {}
+
+export const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);
+
+/**
+ * A color wheel track renders a circular gradient track.
+ */
+export const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);
+  let state = useContext(ColorWheelStateContext)!;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {className, style, ...rest} = props;
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-ColorWheelTrack',
+    values: {
+      isDisabled: state.isDisabled,
+      state
+    }
+  });
+
+  return (
+    <dom.div
+      {...rest}
+      {...renderProps}
+      ref={ref}
+      data-disabled={state.isDisabled || undefined} />
+  );
+});

package/src/ComboBox.tsx

@@ -0,0 +1,325 @@
+/*
+ * 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 {AriaComboBoxProps, useComboBox, useFilter, useListFormatter} from 'react-aria';
+import {ButtonContext} from './Button';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
+import {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';
+import {CollectionBuilder, createHideableComponent} from '@react-aria/collections';
+import {FieldErrorContext} from './FieldError';
+import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
+import {FormContext} from './Form';
+import {forwardRefType, GlobalDOMAttributes, Key, RefObject} from '@react-types/shared';
+import {GroupContext} from './Group';
+import {InputContext} from './Input';
+import {LabelContext} from './Label';
+import {ListBoxContext, ListStateContext} from './ListBox';
+import {OverlayTriggerStateContext} from './Dialog';
+import {PopoverContext} from './Popover';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import {TextContext} from './Text';
+
+type SelectionMode = 'single' | 'multiple';
+
+export interface ComboBoxRenderProps {
+  /**
+   * Whether the combobox is currently open.
+   * @selector [data-open]
+   */
+  isOpen: boolean,
+  /**
+   * Whether the combobox is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the combobox is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the combobox is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean
+}
+
+export interface ComboBoxProps<T extends object, M extends SelectionMode = 'single'> extends Omit<AriaComboBoxProps<T, M>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-ComboBox'
+   */
+  className?: ClassNameOrFunction<ComboBoxRenderProps>,
+  /** The filter function used to determine if a option should be included in the combo box list. */
+  defaultFilter?: (textValue: string, inputValue: string) => boolean,
+  /**
+   * Whether the text or key of the selected item is submitted as part of an HTML form.
+   * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.
+   * @default 'key'
+   */
+  formValue?: 'text' | 'key',
+  /** Whether the combo box allows the menu to be open when the collection is empty. */
+  allowsEmptyCollection?: boolean
+}
+
+export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any, SelectionMode>, HTMLDivElement>>(null);
+export const ComboBoxStateContext = createContext<ComboBoxState<any, SelectionMode> | null>(null);
+
+/**
+ * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
+ */
+export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object, M extends SelectionMode = 'single'>(props: ComboBoxProps<T, M>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ComboBoxContext);
+  let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
+  let content = useMemo(() => (
+    <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>
+      {typeof children === 'function'
+        ? children({
+          isOpen: false,
+          isDisabled,
+          isInvalid,
+          isRequired,
+          defaultChildren: null
+        })
+        : children}
+    </ListBoxContext.Provider>
+  ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);
+
+  return (
+    <CollectionBuilder content={content}>
+      {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}
+    </CollectionBuilder>
+  );
+});
+
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];
+
+interface ComboBoxInnerProps<T extends object> {
+  props: ComboBoxProps<T, SelectionMode>,
+  collection: Collection<Node<T>>,
+  comboBoxRef: RefObject<HTMLDivElement | null>
+}
+
+function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {
+  let {
+    name,
+    formValue = 'key',
+    allowsCustomValue
+  } = props;
+  if (allowsCustomValue) {
+    formValue = 'text';
+  }
+
+  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
+  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+  let {contains} = useFilter({sensitivity: 'base'});
+  let state = useComboBoxState({
+    ...props,
+    defaultFilter: props.defaultFilter || contains,
+    // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
+    items: props.items,
+    children: undefined,
+    collection,
+    validationBehavior
+  });
+
+  let buttonRef = useRef<HTMLButtonElement>(null);
+  let inputRef = useRef<HTMLInputElement>(null);
+  let listBoxRef = useRef<HTMLDivElement>(null);
+  let popoverRef = useRef<HTMLDivElement>(null);
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {
+    buttonProps,
+    inputProps,
+    listBoxProps,
+    labelProps,
+    descriptionProps,
+    errorMessageProps,
+    valueProps,
+    ...validation
+  } = useComboBox({
+    ...removeDataAttributes(props),
+    label,
+    inputRef,
+    buttonRef,
+    listBoxRef,
+    popoverRef,
+    name: formValue === 'text' ? name : undefined,
+    validationBehavior
+  }, state);
+
+  // Make menu width match input + button
+  let [menuWidth, setMenuWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (inputRef.current) {
+      let buttonRect = buttonRef.current?.getBoundingClientRect();
+      let inputRect = inputRef.current.getBoundingClientRect();
+      let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
+      let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
+      setMenuWidth((maxX - minX) + 'px');
+    }
+  }, [buttonRef, inputRef, setMenuWidth]);
+
+  useResizeObserver({
+    ref: inputRef,
+    onResize: onResize
+  });
+
+  // Only expose a subset of state to renderProps function to avoid infinite render loop
+  let renderPropsState = useMemo(() => ({
+    isOpen: state.isOpen,
+    isDisabled: props.isDisabled || false,
+    isInvalid: validation.isInvalid || false,
+    isRequired: props.isRequired || false
+  }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: renderPropsState,
+    defaultClassName: 'react-aria-ComboBox'
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  let inputs: ReactElement[] = [];
+  if (name && formValue === 'key') {
+    let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
+    if (values.length === 0) {
+      values = [null];
+    }
+
+    inputs = values.map((value, i) => (
+      <input key={i} type="hidden" name={name} form={props.form} value={value ?? ''} />
+    ));
+  }
+
+  return (
+    <Provider
+      values={[
+        [ComboBoxStateContext, state],
+        [LabelContext, {...labelProps, ref: labelRef}],
+        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],
+        [InputContext, {...inputProps, ref: inputRef}],
+        [OverlayTriggerStateContext, state],
+        [PopoverContext, {
+          ref: popoverRef,
+          triggerRef: inputRef,
+          scrollRef: listBoxRef,
+          placement: 'bottom start',
+          isNonModal: true,
+          trigger: 'ComboBox',
+          style: {'--trigger-width': menuWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
+        }],
+        [ListBoxContext, {...listBoxProps, ref: listBoxRef}],
+        [ListStateContext, state],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }],
+        [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],
+        [FieldErrorContext, validation],
+        [ComboBoxValueContext, valueProps]
+      ]}>
+      <dom.div
+        {...DOMProps}
+        {...renderProps}
+        ref={ref}
+        slot={props.slot || undefined}
+        data-focused={state.isFocused || undefined}
+        data-open={state.isOpen || undefined}
+        data-disabled={props.isDisabled || undefined}
+        data-invalid={validation.isInvalid || undefined}
+        data-required={props.isRequired || undefined}>
+        {renderProps.children}
+        {inputs}
+      </dom.div>
+    </Provider>
+  );
+}
+
+export interface ComboBoxValueRenderProps<T> {
+  /**
+   * Whether the value is a placeholder.
+   * @selector [data-placeholder]
+   */
+  isPlaceholder: boolean,
+  /** The object values of the currently selected items. */
+  selectedItems: (T | null)[],
+  /** The textValue of the currently selected items. */
+  selectedText: string,
+  /** The state of the ComboBox. */
+  state: ComboBoxState<T, 'single' | 'multiple'>
+}
+
+export interface ComboBoxValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<ComboBoxValueRenderProps<T>, 'div'> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-ComboBoxValue'
+   */
+  className?: ClassNameOrFunction<ComboBoxValueRenderProps<T>>,
+  /** A value to display when no items are selected. */
+  placeholder?: ReactNode
+}
+
+export const ComboBoxValueContext = createContext<ContextValue<ComboBoxValueProps<any>, HTMLDivElement>>(null);
+
+/**
+ * ComboBoxValue renders the selected values of a ComboBox, or a placeholder if no value is selected.
+ * By default, the items are rendered as a comma separated list. Use the render function to customize this.
+ */
+export const ComboBoxValue = /*#__PURE__*/ createHideableComponent(function ComboBoxValue<T extends object>(props: ComboBoxValueProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ComboBoxValueContext);
+  let state = useContext(ComboBoxStateContext)!;
+  let formatter = useListFormatter();
+  let selectedText = useMemo(() => formatter.format(state.selectedItems.map(item => item?.textValue || '').filter(v => v !== '')), [formatter, state.selectedItems]);
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultChildren: selectedText || props.placeholder,
+    defaultClassName: 'react-aria-ComboBoxValue',
+    values: {
+      selectedItems: useMemo(() => state.selectedItems.map(item => item.value as T ?? null), [state.selectedItems]),
+      selectedText,
+      isPlaceholder: state.selectedItems.length === 0,
+      state
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+
+  return (
+    <dom.div
+      ref={ref}
+      {...DOMProps}
+      {...renderProps}
+      data-placeholder={state.selectedItems.length === 0 || undefined} />
+  );
+});