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

package/src/Checkbox.tsx

@@ -0,0 +1,282 @@
+/*
+ * 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 {AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, mergeProps, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusRing, useHover, VisuallyHidden} from 'react-aria';
+import {CheckboxContext} from './RSPContexts';
+import {CheckboxGroupState, useCheckboxGroupState, useToggleState} from 'react-stately';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
+import {FieldErrorContext} from './FieldError';
+import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
+import {FormContext} from './Form';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
+import {LabelContext} from './Label';
+import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
+import {TextContext} from './Text';
+
+export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps, 'div'>, 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-CheckboxGroup'
+   */
+  className?: ClassNameOrFunction<CheckboxGroupRenderProps>
+}
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, '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-Checkbox'
+   */
+  className?: ClassNameOrFunction<CheckboxRenderProps>,
+  /**
+   * A ref for the HTML input element.
+   */
+  inputRef?: RefObject<HTMLInputElement | null>
+}
+
+export interface CheckboxGroupRenderProps {
+  /**
+   * Whether the checkbox group is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the checkbox group is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the checkbox group is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
+  /**
+   * Whether the checkbox group is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * State of the checkbox group.
+   */
+  state: CheckboxGroupState
+}
+
+export interface CheckboxRenderProps {
+  /**
+   * Whether the checkbox is selected.
+   * @selector [data-selected]
+   */
+  isSelected: boolean,
+  /**
+   * Whether the checkbox is indeterminate.
+   * @selector [data-indeterminate]
+   */
+  isIndeterminate: boolean,
+  /**
+   * Whether the checkbox is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the checkbox is currently in a pressed state.
+   * @selector [data-pressed]
+   */
+  isPressed: boolean,
+  /**
+   * Whether the checkbox is focused, either via a mouse or keyboard.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the checkbox is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the checkbox is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the checkbox is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the checkbox invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the checkbox is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean
+}
+
+export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);
+export const CheckboxGroupStateContext = createContext<CheckboxGroupState | null>(null);
+
+/**
+ * A checkbox group allows a user to select multiple items from a list of options.
+ */
+export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
+  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
+  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+  let state = useCheckboxGroupState({
+    ...props,
+    validationBehavior
+  });
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {groupProps, labelProps, descriptionProps, errorMessageProps, ...validation} = useCheckboxGroup({
+    ...props,
+    label,
+    validationBehavior
+  }, state);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      isDisabled: state.isDisabled,
+      isReadOnly: state.isReadOnly,
+      isRequired: props.isRequired || false,
+      isInvalid: state.isInvalid,
+      state
+    },
+    defaultClassName: 'react-aria-CheckboxGroup'
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+
+  return (
+    <dom.div
+      {...mergeProps(DOMProps, renderProps, groupProps)}
+      ref={ref}
+      slot={props.slot || undefined}
+      data-readonly={state.isReadOnly || undefined}
+      data-required={props.isRequired || undefined}
+      data-invalid={state.isInvalid || undefined}
+      data-disabled={props.isDisabled || undefined}>
+      <Provider
+        values={[
+          [CheckboxGroupStateContext, state],
+          [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
+          [TextContext, {
+            slots: {
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }],
+          [FieldErrorContext, validation]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </dom.div>
+  );
+});
+
+/**
+ * A checkbox allows a user to select multiple items from a list of individual items, or
+ * to mark one individual item as selected.
+ */
+export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
+  let {
+    inputRef: userProvidedInputRef = null,
+    ...otherProps
+  } = props;
+  [props, ref] = useContextProps(otherProps, ref, CheckboxContext);
+  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
+  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+  let groupState = useContext(CheckboxGroupStateContext);
+  let inputRef = useObjectRef(useMemo(() => mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null), [userProvidedInputRef, props.inputRef]));
+  let {labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid} = groupState
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ? useCheckboxGroupItem({
+      ...removeDataAttributes(props),
+      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+      // it's passed explicitly here to avoid typescript error (requires ignore).
+      // @ts-ignore
+      value: props.value,
+      // ReactNode type doesn't allow function children.
+      children: typeof props.children === 'function' ? true : props.children
+    }, groupState, inputRef)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    : useCheckbox({
+      ...removeDataAttributes(props),
+      children: typeof props.children === 'function' ? true : props.children,
+      validationBehavior
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    }, useToggleState(props), inputRef);
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
+  let isInteractionDisabled = isDisabled || isReadOnly;
+
+  let {hoverProps, isHovered} = useHover({
+    ...props,
+    isDisabled: isInteractionDisabled
+  });
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-Checkbox',
+    values: {
+      isSelected,
+      isIndeterminate: props.isIndeterminate || false,
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired: props.isRequired || false
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
+  return (
+    <dom.label
+      {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
+      ref={ref}
+      slot={props.slot || undefined}
+      data-selected={isSelected || undefined}
+      data-indeterminate={props.isIndeterminate || undefined}
+      data-pressed={isPressed || undefined}
+      data-hovered={isHovered || undefined}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-disabled={isDisabled || undefined}
+      data-readonly={isReadOnly || undefined}
+      data-invalid={isInvalid || undefined}
+      data-required={props.isRequired || undefined}>
+      <VisuallyHidden elementType="span">
+        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
+      </VisuallyHidden>
+      {renderProps.children}
+    </dom.label>
+  );
+});

package/src/Collection.tsx

@@ -0,0 +1,225 @@
+/*
+ * 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 {CollectionBase, DropTargetDelegate, GlobalDOMAttributes, ItemDropTarget, Key, LayoutDelegate, RefObject} from '@react-types/shared';
+import {createBranchComponent, useCachedChildren} from '@react-aria/collections';
+import {Collection as ICollection, Node, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps} from 'react-stately';
+import React, {cloneElement, createContext, ForwardedRef, HTMLAttributes, isValidElement, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
+import {StyleProps} from './utils';
+
+export interface CollectionProps<T> extends Omit<CollectionBase<T>, 'children'> {
+  /** The contents of the collection. */
+  children?: ReactNode | ((item: T) => ReactNode),
+  /** Values that should invalidate the item cache when using dynamic collections. */
+  dependencies?: ReadonlyArray<any>
+}
+
+export interface ItemRenderProps {
+  /**
+   * Whether the item is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the item is currently in a pressed state.
+   * @selector [data-pressed]
+   */
+  isPressed: boolean,
+  /**
+   * Whether the item is currently selected.
+   * @selector [data-selected]
+   */
+  isSelected: boolean,
+  /**
+   * Whether the item is currently focused.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the item is currently keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the item is non-interactive, i.e. both selection and actions are disabled and the item may
+   * not be focused. Dependent on `disabledKeys` and `disabledBehavior`.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * The type of selection that is allowed in the collection.
+   * @selector [data-selection-mode="single | multiple"]
+   */
+  selectionMode: SelectionMode,
+  /** The selection behavior for the collection. */
+  selectionBehavior: SelectionBehavior,
+  /**
+   * Whether the item allows dragging.
+   * @note This property is only available in collection components that support drag and drop.
+   * @selector [data-allows-dragging]
+   */
+  allowsDragging?: boolean,
+  /**
+   * Whether the item is currently being dragged.
+   * @note This property is only available in collection components that support drag and drop.
+   * @selector [data-dragging]
+   */
+  isDragging?: boolean,
+  /**
+   * Whether the item is currently an active drop target.
+   * @note This property is only available in collection components that support drag and drop.
+   * @selector [data-drop-target]
+   */
+  isDropTarget?: boolean
+}
+
+export interface SectionProps<T> extends Omit<SharedSectionProps<T>, 'children' | 'title'>, StyleProps, GlobalDOMAttributes<HTMLElement> {
+  /** The unique id of the section. */
+  id?: Key,
+  /** The object value that this section represents. When using dynamic collections, this is set automatically. */
+  value?: T,
+  /** Static child items or a function to render children. */
+  children?: ReactNode | ((item: T) => ReactElement),
+  /** Values that should invalidate the item cache when using dynamic collections. */
+  dependencies?: ReadonlyArray<any>
+}
+
+interface SectionContextValue {
+  name: string,
+  render: (props: SectionProps<any>, ref: ForwardedRef<HTMLElement>, section: Node<any>, className?: string) => ReactElement
+}
+
+export const SectionContext = createContext<SectionContextValue | null>(null);
+
+/** @deprecated */
+export const Section = /*#__PURE__*/ createBranchComponent('section', <T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>): JSX.Element => {
+  let {name, render} = useContext(SectionContext)!;
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
+  }
+  return render(props, ref, section, 'react-aria-Section');
+});
+
+export interface CollectionBranchProps {
+  /** The collection of items to render. */
+  collection: ICollection<Node<unknown>>,
+  /** The parent node of the items to render. */
+  parent: Node<unknown>,
+  /** A function that renders a drop indicator between items. */
+  renderDropIndicator?: (target: ItemDropTarget) => ReactNode
+}
+
+export interface CollectionRootProps extends HTMLAttributes<HTMLElement> {
+  /** The collection of items to render. */
+  collection: ICollection<Node<unknown>>,
+  /** A set of keys for items that should always be persisted in the DOM. */
+  persistedKeys?: Set<Key> | null,
+  /** A ref to the scroll container for the collection. */
+  scrollRef?: RefObject<HTMLElement | null>,
+  /** A function that renders a drop indicator between items. */
+  renderDropIndicator?: (target: ItemDropTarget) => ReactNode
+}
+
+export interface CollectionRenderer {
+  /** Whether this is a virtualized collection. */
+  isVirtualized?: boolean,
+  /** A delegate object that provides layout information for items in the collection. */
+  layoutDelegate?: LayoutDelegate,
+  /** A delegate object that provides drop targets for pointer coordinates within the collection. */
+  dropTargetDelegate?: DropTargetDelegate,
+  /** A component that renders the root collection items. */
+  CollectionRoot: React.ComponentType<CollectionRootProps>,
+   /** A component that renders the child collection items. */
+  CollectionBranch: React.ComponentType<CollectionBranchProps>
+}
+
+export const DefaultCollectionRenderer: CollectionRenderer = {
+  CollectionRoot({collection, renderDropIndicator}) {
+    return useCollectionRender(collection, null, renderDropIndicator);
+  },
+  CollectionBranch({collection, parent, renderDropIndicator}) {
+    return useCollectionRender(collection, parent, renderDropIndicator);
+  }
+};
+
+function useCollectionRender(
+  collection: ICollection<Node<unknown>>,
+  parent: Node<unknown> | null,
+  renderDropIndicator?: (target: ItemDropTarget) => ReactNode
+) {
+  return useCachedChildren({
+    items: parent ? collection.getChildren!(parent.key) : collection,
+    dependencies: [renderDropIndicator],
+    children(node) {
+      // Return a empty fragment since we don't want to render the content twice
+      // If we don't skip the content node here, we end up rendering them twice in a Tree since we also render the content node in TreeItem
+      if (node.type === 'content') {
+        return <></>;
+      }
+
+      let rendered = node.render!(node);
+      if (!renderDropIndicator || node.type !== 'item') {
+        return rendered;
+      }
+
+      return (
+        <>
+          {renderDropIndicator({type: 'item', key: node.key, dropPosition: 'before'})}
+          {rendered}
+          {renderAfterDropIndicators(collection, node, renderDropIndicator)}
+        </>
+      );
+    }
+  });
+}
+
+export function renderAfterDropIndicators(collection: ICollection<Node<unknown>>, node: Node<unknown>, renderDropIndicator: (target: ItemDropTarget) => ReactNode): ReactNode {
+  let key = node.key;
+  let keyAfter = collection.getKeyAfter(key);
+  let nextItemInFlattenedCollection = keyAfter != null ? collection.getItem(keyAfter) : null;
+  while (nextItemInFlattenedCollection != null && nextItemInFlattenedCollection.type !== 'item') {
+    keyAfter = collection.getKeyAfter(nextItemInFlattenedCollection.key);
+    nextItemInFlattenedCollection = keyAfter != null ? collection.getItem(keyAfter) : null;
+  }
+
+  let nextItemInSameLevel = node.nextKey != null ? collection.getItem(node.nextKey) : null;
+  while (nextItemInSameLevel != null && nextItemInSameLevel.type !== 'item') {
+    nextItemInSameLevel = nextItemInSameLevel.nextKey != null ? collection.getItem(nextItemInSameLevel.nextKey) : null;
+  }
+
+  // Render one or more "after" drop indicators when the next item in the flattened collection
+  // has a smaller level, is not an item, or there are no more items in the collection.
+  // Otherwise, the "after" position is equivalent to the next item's "before" position.
+  let afterIndicators: ReactNode[] = [];
+  if (nextItemInSameLevel == null) {
+    let current: Node<unknown> | null = node;
+    while (current?.type === 'item' && (!nextItemInFlattenedCollection || (current.parentKey !== nextItemInFlattenedCollection.parentKey && nextItemInFlattenedCollection.level < current.level))) {
+      let indicator = renderDropIndicator({
+        type: 'item',
+        key: current.key,
+        dropPosition: 'after'
+      });
+      if (isValidElement(indicator)) {
+        afterIndicators.push(cloneElement(indicator, {key: `${current.key}-after`}));
+      }
+      current = current.parentKey != null ? collection.getItem(current.parentKey) : null;
+    }
+  }
+
+  return afterIndicators;
+}
+
+export const CollectionRendererContext = createContext<CollectionRenderer>(DefaultCollectionRenderer);
+
+type PersistedKeysReturnValue = Set<Key> | null;
+export function usePersistedKeys(focusedKey: Key | null): PersistedKeysReturnValue {
+  return useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
+}

package/src/ColorArea.tsx

@@ -0,0 +1,89 @@
+import {AriaColorAreaProps, useColorArea} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  dom,
+  Provider,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
+import {ColorAreaContext} from './RSPContexts';
+import {ColorAreaState, useColorAreaState} from 'react-stately';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
+import {InternalColorThumbContext} from './ColorThumb';
+import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+
+export interface ColorAreaRenderProps {
+  /**
+   * Whether the color area is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * State of the color area.
+   */
+  state: ColorAreaState
+}
+
+export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, 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-ColorArea'
+   */
+  className?: ClassNameOrFunction<ColorAreaRenderProps>
+}
+
+export const ColorAreaStateContext = createContext<ColorAreaState | null>(null);
+
+/**
+ * A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ */
+export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ColorAreaContext);
+  let inputXRef = useRef(null);
+  let inputYRef = useRef(null);
+
+  let state = useColorAreaState(props);
+  let {
+    colorAreaProps,
+    xInputProps,
+    yInputProps,
+    thumbProps
+  } = useColorArea({
+    ...props,
+    inputXRef,
+    inputYRef,
+    containerRef: ref
+  }, state);
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-ColorArea',
+    defaultStyle: colorAreaProps.style,
+    values: {
+      state,
+      isDisabled: props.isDisabled || false
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <dom.div
+      ref={ref}
+      {...mergeProps(DOMProps, colorAreaProps, renderProps)}
+      slot={props.slot || undefined}
+      data-disabled={props.isDisabled || undefined}>
+      <Provider
+        values={[
+          [ColorAreaStateContext, state],
+          [InternalColorThumbContext, {state, thumbProps, inputXRef, xInputProps, inputYRef, yInputProps, isDisabled: props.isDisabled}]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </dom.div>
+  );
+});