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

package/src/ColorField.tsx

@@ -0,0 +1,243 @@
+/*
+ * 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 {AriaColorFieldProps, useColorChannelField, useColorField, useLocale} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  dom,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot
+} from './utils';
+import {ColorChannel, ColorFieldState, ColorSpace, useColorChannelFieldState, useColorFieldState} from 'react-stately';
+import {ColorFieldContext} from './RSPContexts';
+import {FieldErrorContext} from './FieldError';
+import {filterDOMProps} from '@react-aria/utils';
+import {GlobalDOMAttributes, InputDOMProps, ValidationResult} from '@react-types/shared';
+import {GroupContext} from './Group';
+import {InputContext} from './Input';
+import {LabelContext} from './Label';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
+import {TextContext} from './Text';
+
+export interface ColorFieldRenderProps {
+  /**
+   * Whether the color field is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the color field is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the color field is read only.
+   * @selector [data-readonly]
+   */
+   isReadOnly: boolean,
+   /**
+    * Whether the color field is required.
+    * @selector [data-required]
+    */
+   isRequired: boolean,
+  /**
+   * The color channel that this field edits, or "hex" if no `channel` prop is set.
+   * @selector [data-channel="hex | hue | saturation | ..."]
+   */
+  channel: ColorChannel | 'hex',
+  /**
+   * State of the color field.
+   */
+  state: ColorFieldState
+}
+
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, 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-ColorField'
+   */
+  className?: ClassNameOrFunction<ColorFieldRenderProps>,
+  /**
+   * The color channel that this field edits. If not provided, 
+   * the color is edited as a hex value.
+   */
+  channel?: ColorChannel,
+  /**
+   * The color space that the color field operates in if a `channel` prop is provided.
+   * If no `channel` is provided, the color field always displays the color as an RGB hex value.
+   */
+  colorSpace?: ColorSpace
+}
+
+export const ColorFieldStateContext = createContext<ColorFieldState | null>(null);
+
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+export const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ColorFieldContext);
+  if (props.channel) {
+    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;
+  } else {
+    return <HexColorField {...props} forwardedRef={ref} />;
+  }
+});
+
+interface ColorChannelFieldProps extends Omit<ColorFieldProps, 'channel'> {
+  channel: ColorChannel,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+}
+
+function ColorChannelField(props: ColorChannelFieldProps) {
+  let {locale} = useLocale();
+  let state = useColorChannelFieldState({
+    ...props,
+    locale
+  });
+
+  let inputRef = useRef<HTMLInputElement>(null);
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {
+    labelProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validation
+  } = useColorChannelField({
+    ...removeDataAttributes(props),
+    label,
+    validationBehavior: props.validationBehavior ?? 'native'
+  }, state, inputRef);
+
+  return (
+    <>
+      {useChildren(
+        props,
+        state,
+        props.forwardedRef,
+        inputProps,
+        inputRef,
+        labelProps,
+        labelRef,
+        descriptionProps,
+        errorMessageProps,
+        validation
+      )}
+      {props.name && <input type="hidden" name={props.name} form={props.form} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
+    </>
+  );
+}
+
+interface HexColorFieldProps extends ColorFieldProps {
+  forwardedRef: ForwardedRef<HTMLDivElement>
+}
+
+function HexColorField(props: HexColorFieldProps) {
+  let state = useColorFieldState({
+    ...props,
+    validationBehavior: props.validationBehavior ?? 'native'
+  });
+
+  let inputRef = useRef<HTMLInputElement>(null);
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {
+    labelProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validation
+  } = useColorField({
+    ...removeDataAttributes(props),
+    label,
+    validationBehavior: props.validationBehavior ?? 'native'
+  }, state, inputRef);
+
+  return useChildren(
+    props,
+    state,
+    props.forwardedRef,
+    inputProps,
+    inputRef,
+    labelProps,
+    labelRef,
+    descriptionProps,
+    errorMessageProps,
+    validation
+  );
+}
+
+function useChildren(
+  props: ColorFieldProps,
+  state: ColorFieldState,
+  ref: ForwardedRef<HTMLDivElement>,
+  inputProps: InputHTMLAttributes<HTMLElement>,
+  inputRef: Ref<HTMLInputElement>,
+  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
+  labelRef: Ref<HTMLLabelElement>,
+  descriptionProps: HTMLAttributes<HTMLElement>,
+  errorMessageProps: HTMLAttributes<HTMLElement>,
+  validation: ValidationResult
+) {
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      state,
+      channel: props.channel || 'hex',
+      isDisabled: props.isDisabled || false,
+      isInvalid: validation.isInvalid || false,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
+    },
+    defaultClassName: 'react-aria-ColorField'
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <Provider
+      values={[
+        [ColorFieldStateContext, state],
+        [InputContext, {...inputProps, ref: inputRef}],
+        [LabelContext, {...labelProps, ref: labelRef}],
+        [GroupContext, {role: 'presentation', isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }],
+        [FieldErrorContext, validation]
+      ]}>
+      <dom.div
+        {...DOMProps}
+        {...renderProps}
+        ref={ref}
+        slot={props.slot || undefined}
+        data-channel={props.channel || 'hex'}
+        data-disabled={props.isDisabled || undefined}
+        data-invalid={validation.isInvalid || undefined}
+        data-readonly={props.isReadOnly || undefined}
+        data-required={props.isRequired || undefined} />
+    </Provider>
+  );
+}

package/src/ColorPicker.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2024 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 {ChildrenOrFunction, Provider, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
+import {Color, ColorPickerState, ColorPickerProps as StatelyColorPickerProps, useColorPickerState} from 'react-stately';
+import {ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext} from './RSPContexts';
+import {ColorSwatchContext} from './ColorSwatch';
+import {ColorSwatchPickerContext} from './ColorSwatchPicker';
+import {mergeProps} from 'react-aria';
+import React, {createContext, JSX} from 'react';
+
+export interface ColorPickerRenderProps {
+  /** The currently selected color. */
+  color: Color
+}
+
+export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps {
+  /** The children of the component. A function may be provided to alter the children based on component state. */
+  children: ChildrenOrFunction<ColorPickerRenderProps>
+}
+
+export const ColorPickerContext = createContext<SlottedContextValue<ColorPickerProps>>(null);
+export const ColorPickerStateContext = createContext<ColorPickerState | null>(null);
+
+/**
+ * A ColorPicker synchronizes a color value between multiple React Aria color components.
+ * It simplifies building color pickers with customizable layouts via composition.
+ */
+export function ColorPicker(props: ColorPickerProps): JSX.Element {
+  let ctx = useSlottedContext(ColorPickerContext, props.slot);
+  props = mergeProps(ctx, props);
+  let state = useColorPickerState(props);
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      color: state.color
+    }
+  });
+
+  return (
+    <Provider
+      values={[
+        [ColorPickerStateContext, state],
+        [ColorSliderContext, {value: state.color, onChange: state.setColor}],
+        [ColorAreaContext, {value: state.color, onChange: state.setColor}],
+        [ColorWheelContext, {value: state.color, onChange: state.setColor}],
+        [ColorFieldContext, {value: state.color, onChange: state.setColor}],
+        [ColorSwatchContext, {color: state.color}],
+        [ColorSwatchPickerContext, {value: state.color, onChange: state.setColor}]
+      ]}>
+      {renderProps.children}
+    </Provider>
+  );
+}

package/src/ColorSlider.tsx

@@ -0,0 +1,110 @@
+import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  dom,
+  Provider,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot
+} from './utils';
+import {ColorSliderContext} from './RSPContexts';
+import {ColorSliderState, useColorSliderState} from 'react-stately';
+import {filterDOMProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
+import {InternalColorThumbContext} from './ColorThumb';
+import {LabelContext} from './Label';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';
+
+export interface ColorSliderRenderProps {
+  /**
+   * The orientation of the color slider.
+   * @selector [data-orientation="horizontal | vertical"]
+   */
+  orientation: Orientation,
+  /**
+   * Whether the color slider is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * State of the color slider.
+   */
+  state: ColorSliderState
+}
+
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, 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-ColorSlider'
+   */
+  className?: ClassNameOrFunction<ColorSliderRenderProps>
+}
+
+export const ColorSliderStateContext = createContext<ColorSliderState | null>(null);
+
+/**
+ * A color slider allows users to adjust an individual channel of a color value.
+ */
+export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ColorSliderContext);
+  let {locale} = useLocale();
+  let state = useColorSliderState({...props, locale});
+  let trackRef = React.useRef(null);
+  let inputRef = React.useRef(null);
+
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {
+    trackProps,
+    thumbProps,
+    inputProps,
+    labelProps,
+    outputProps
+  } = useColorSlider({
+    ...props,
+    label,
+    trackRef,
+    inputRef
+  }, state);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      orientation: state.orientation,
+      isDisabled: state.isDisabled,
+      state
+    },
+    defaultClassName: 'react-aria-ColorSlider'
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <Provider
+      values={[
+        [ColorSliderStateContext, state],
+        [SliderStateContext, state],
+        [SliderTrackContext, {...trackProps, ref: trackRef}],
+        [SliderOutputContext, outputProps],
+        [LabelContext, {
+          ...labelProps,
+          ref: labelRef,
+          children: state.value.getChannelName(props.channel, locale)
+        }],
+        [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]
+      ]}>
+      <dom.div
+        {...DOMProps}
+        {...renderProps}
+        ref={ref}
+        slot={props.slot || undefined}
+        data-orientation={state.orientation}
+        data-disabled={state.isDisabled || undefined} />
+    </Provider>
+  );
+});

package/src/ColorSwatch.tsx

@@ -0,0 +1,54 @@
+import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  SlotProps,
+  StyleRenderProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
+import {Color} from 'react-stately';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+
+export interface ColorSwatchRenderProps {
+  /** The color of the swatch. */
+  color: Color
+}
+
+export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, 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-ColorSwatch'
+   */
+  className?: ClassNameOrFunction<ColorSwatchRenderProps>
+}
+
+export const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);
+
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ColorSwatchContext);
+  let {colorSwatchProps, color} = useColorSwatch(props);
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-ColorSwatch',
+    defaultStyle: colorSwatchProps.style,
+    values: {
+      color
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  
+  return (
+    <dom.div
+      {...mergeProps(DOMProps, colorSwatchProps, renderProps)}
+      slot={props.slot || undefined}
+      ref={ref} />
+  );
+});

package/src/ColorSwatchPicker.tsx

@@ -0,0 +1,125 @@
+import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents, PressEvents, ValueBase} from '@react-types/shared';
+import {
+  ClassNameOrFunction,
+  composeRenderProps,
+  ContextValue,
+  RenderProps,
+  StyleRenderProps,
+  useContextProps
+} from './utils';
+import {Color, parseColor, useColorPickerState} from 'react-stately';
+import {ColorSwatchContext} from './ColorSwatch';
+import {filterDOMProps} from '@react-aria/utils';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';
+import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';
+import {useLocale, useLocalizedStringFormatter} from 'react-aria';
+
+export interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}
+export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps>, 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-ColorSwatchPicker'
+   */
+  className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>,
+  /** The children of the ColorSwatchPicker. */
+  children?: ReactNode,
+  /**
+   * Whether the items are arranged in a stack or grid.
+   * @default 'grid'
+   */
+  layout?: 'grid' | 'stack'
+}
+
+export const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);
+const ColorMapContext = createContext<Map<string, Color> | null>(null);
+
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);
+  let state = useColorPickerState(props);
+  let colorMap = useMemo(() => new Map(), []);
+  let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');
+
+  return (
+    <ListBox
+      {...filterDOMProps(props, {labelable: true})}
+      ref={ref}
+      className={props.className || 'react-aria-ColorSwatchPicker'}
+      style={props.style}
+      aria-label={props['aria-label'] || (!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)}
+      layout={props.layout || 'grid'}
+      selectionMode="single"
+      selectedKeys={[state.color.toString('hexa')]}
+      onSelectionChange={(keys) => {
+        // single select, 'all' cannot occur. appease typescript.
+        if (keys !== 'all') {
+          state.setColor(colorMap.get([...keys][0]));
+        }
+      }}
+      disallowEmptySelection>
+      <ColorMapContext.Provider value={colorMap}>
+        {props.children}
+      </ColorMapContext.Provider>
+    </ListBox>
+  );
+});
+
+export interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {
+  /** The color of the swatch. */
+  color: Color
+}
+
+export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+  /**
+   * 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-ColorSwatchPickerItem'
+   */
+  className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>,
+  /** The color of the swatch. */
+  color: string | Color,
+  /** Whether the color swatch is disabled. */
+  isDisabled?: boolean
+}
+
+export const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {
+  let propColor = props.color || '#0000';
+  let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);
+  let {locale} = useLocale();
+  let map = useContext(ColorMapContext)!;
+  useEffect(() => {
+    let key = color.toString('hexa');
+    map.set(key, color);
+    return () => {
+      map.delete(key);
+    };
+  }, [color, map]);
+
+  let wrap = (v) => {
+    if (typeof v === 'function') {
+      return (renderProps) => v({...renderProps, color});
+    }
+    return v;
+  };
+
+  return (
+    <ListBoxItem
+      {...props}
+      // ColorSwatchPickerItem is never a link.
+      render={props.render as any}
+      ref={ref}
+      id={color.toString('hexa')}
+      textValue={color.getColorName(locale)}
+      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}
+      style={wrap(props.style)}>
+      {composeRenderProps(wrap(props.children), children => (
+        <ColorSwatchContext.Provider value={{color}}>
+          {children}
+        </ColorSwatchContext.Provider>
+      ))}
+    </ListBoxItem>
+  );
+});