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

package/src/Group.tsx

@@ -0,0 +1,114 @@
+/*
+ * 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 {AriaLabelingProps, DOMProps, forwardRefType} from '@react-types/shared';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
+import {HoverProps, mergeProps, useFocusRing, useHover} from 'react-aria';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+
+export interface GroupRenderProps {
+  /**
+   * Whether the group is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether an element within the group is focused, either via a mouse or keyboard.
+   * @selector [data-focus-within]
+   */
+  isFocusWithin: boolean,
+  /**
+   * Whether an element within the group is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the group is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the group is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean
+}
+
+export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style' | 'render' | 'role' | 'slot'>, DOMProps, HoverProps, RenderProps<GroupRenderProps>, SlotProps {
+ /**
+  * 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-Group'
+  */
+ className?: ClassNameOrFunction<GroupRenderProps>,
+ /** Whether the group is disabled. */
+ isDisabled?: boolean,
+ /** Whether the group is invalid. */
+ isInvalid?: boolean,
+ /** Whether the group is read only. */
+ isReadOnly?: boolean,
+ /**
+  * An accessibility role for the group. By default, this is set to `'group'`.
+  * Use `'region'` when the contents of the group is important enough to be
+  * included in the page table of contents. Use `'presentation'` if the group
+  * is visual only and does not represent a semantic grouping of controls.
+  * @default 'group'
+  */
+ role?: 'group' | 'region' | 'presentation'
+}
+
+export const GroupContext = createContext<ContextValue<GroupProps, HTMLDivElement>>({});
+
+/**
+ * A group represents a set of related UI controls, and supports interactive states for styling.
+ */
+export const Group = /*#__PURE__*/ (forwardRef as forwardRefType)(function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, GroupContext);
+  let {isDisabled, isInvalid, isReadOnly, onHoverStart, onHoverChange, onHoverEnd, ...otherProps} = props;
+  isDisabled ??= !!props['aria-disabled'] && props['aria-disabled'] !== 'false';
+  isInvalid ??= !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
+
+  let {hoverProps, isHovered} = useHover({onHoverStart, onHoverChange, onHoverEnd, isDisabled});
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing({
+    within: true
+  });
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {isHovered, isFocusWithin: isFocused, isFocusVisible, isDisabled, isInvalid},
+    defaultClassName: 'react-aria-Group'
+  });
+
+  return (
+    <dom.div
+      {...mergeProps(otherProps, focusProps, hoverProps)}
+      {...renderProps}
+      ref={ref}
+      role={props.role ?? 'group'}
+      slot={props.slot ?? undefined}
+      data-focus-within={isFocused || undefined}
+      data-hovered={isHovered || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-disabled={isDisabled || undefined}
+      data-invalid={isInvalid || undefined}
+      data-readonly={isReadOnly || undefined}>
+      {renderProps.children}
+    </dom.div>
+  );
+});

package/src/Header.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 {ContextValue, dom, DOMRenderProps, useContextProps} from './utils';
+import {createLeafComponent, HeaderNode} from '@react-aria/collections';
+import React, {createContext, ForwardedRef, HTMLAttributes} from 'react';
+
+export interface HeaderProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'header', undefined> {}
+
+export const HeaderContext = createContext<ContextValue<HeaderProps, HTMLElement>>({});
+
+export const Header = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HeaderProps, ref: ForwardedRef<HTMLElement>) {
+  [props, ref] = useContextProps(props, ref, HeaderContext);
+  return (
+    <dom.header className="react-aria-Header" {...props} ref={ref}>
+      {props.children}
+    </dom.header>
+  );
+});

package/src/Heading.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 {dom, DOMRenderProps, useContextProps} from './utils';
+import {HeadingContext} from './RSPContexts';
+import React, {ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+
+export interface HeadingProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'h1', undefined> {
+  level?: number
+}
+
+export const Heading = forwardRef(function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
+  [props, ref] = useContextProps(props, ref, HeadingContext);
+  let {children, level = 3, className, ...domProps} = props;
+  let Element = dom[`h${level}`];
+
+  return (
+    <Element {...domProps} ref={ref} className={className ?? 'react-aria-Heading'}>
+      {children}
+    </Element>
+  );
+});

package/src/HiddenDateInput.tsx

@@ -0,0 +1,152 @@
+/*
+ * Copyright 2025 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 {CalendarDate, CalendarDateTime, parseDate, parseDateTime, toCalendarDate, toCalendarDateTime, toLocalTimeZone} from '@internationalized/date';
+import {DateFieldState, DatePickerState, DateSegmentType} from 'react-stately';
+import {getEventTarget} from '@react-aria/utils';
+import React, {ReactNode} from 'react';
+import {useVisuallyHidden} from 'react-aria';
+
+interface AriaHiddenDateInputProps {
+  /**
+   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+   */
+  autoComplete?: string,
+  /** HTML form input name. */
+  name?: string,
+  /** Sets the disabled state of the input. */
+  isDisabled?: boolean
+}
+
+interface HiddenDateInputProps extends AriaHiddenDateInputProps {
+  /**
+   * State for the input.
+   */
+  state: DateFieldState | DatePickerState
+}
+
+export interface HiddenDateAria {
+  /** Props for the container element. */
+  containerProps: React.HTMLAttributes<HTMLDivElement>,
+  /** Props for the hidden input element. */
+  inputProps: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+const dateSegments = ['day', 'month', 'year'];
+const granularityMap = {'hour': 1, 'minute': 2, 'second': 3};
+
+export function useHiddenDateInput(props: HiddenDateInputProps, state: DateFieldState | DatePickerState) : HiddenDateAria {
+  let {
+    autoComplete,
+    isDisabled,
+    name
+  } = props;
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      // Prevent page scrolling.
+      position: 'fixed',
+      top: 0,
+      left: 0
+    }
+  });
+
+  let inputStep = 60;
+  if (state.granularity === 'second') {
+    inputStep = 1;
+  } else if (state.granularity === 'hour') {
+    inputStep = 3600;
+  }
+  
+  let dateValue = '';
+  if (state.value) {
+    if (state.granularity === 'day') {
+      dateValue = toCalendarDate(state.value).toString();
+    } else {
+      dateValue = toCalendarDateTime('timeZone' in state.value ? toLocalTimeZone(state.value) : state.value).toString();
+    }
+  }
+
+  let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';
+
+  let timeSegments = ['hour', 'minute', 'second'];
+  // Depending on the granularity, we only want to validate certain time segments
+  let end = 0;
+  if (timeSegments.includes(state.granularity)) {
+    end = granularityMap[state.granularity];
+    timeSegments = timeSegments.slice(0, end);
+  }
+
+  return {
+    containerProps: {
+      ...visuallyHiddenProps,
+      'aria-hidden': true,
+      // @ts-ignore
+      ['data-react-aria-prevent-focus']: true,
+      // @ts-ignore
+      ['data-a11y-ignore']: 'aria-hidden-focus'
+    },
+    inputProps: {
+      tabIndex: -1,
+      autoComplete,
+      disabled: isDisabled,
+      type: inputType,
+      // We set the form prop to an empty string to prevent the hidden date input's value from being submitted
+      form: '',
+      name,
+      step: inputStep,
+      value: dateValue,
+      onChange: (e) => {
+        let targetString = getEventTarget(e).value.toString();
+        if (targetString) {
+          try {
+            let targetValue: CalendarDateTime | CalendarDate = parseDateTime(targetString);
+            if (state.granularity === 'day') {
+              targetValue = parseDate(targetString);
+            }
+            // We check to to see if setSegment exists in the state since it only exists in DateFieldState and not DatePickerState.
+            // The setValue method has different behavior depending on if it's coming from DateFieldState or DatePickerState.
+            // In DateFieldState, setValue firsts checks to make sure that each segment is filled before committing the newValue
+            // which is why in the code below we first set each segment to validate it before committing the new value.
+            // However, in DatePickerState, since we have to be able to commit values from the Calendar popover, we are also able to
+            // set a new value when the field itself is empty.
+            if ('setSegment' in state) {
+              for (let type in targetValue) {
+                // eslint-disable-next-line max-depth
+                if (dateSegments.includes(type)) {
+                  state.setSegment(type as DateSegmentType, targetValue[type]);
+                }
+                // eslint-disable-next-line max-depth
+                if (timeSegments.includes(type)) {
+                  state.setSegment(type as DateSegmentType, targetValue[type]);
+                }
+              }
+            }
+            state.setValue(targetValue);
+          } catch {
+            // ignore
+          }
+        }
+      }
+    }
+  };
+}
+
+export function HiddenDateInput(props: HiddenDateInputProps): ReactNode | null {
+  let {state} = props;
+  let {containerProps, inputProps} = useHiddenDateInput({...props}, state);
+  return (
+    <div {...containerProps} data-testid="hidden-dateinput-container">
+      <input {...inputProps} />
+    </div>
+  );
+}

package/src/Input.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 {
+ ClassNameOrFunction,
+ ContextValue,
+ dom,
+ StyleRenderProps,
+ useContextProps,
+ useRenderProps
+} from './utils';
+import {createHideableComponent} from '@react-aria/collections';
+import {HoverEvents, mergeProps, useFocusRing, useHover} from 'react-aria';
+import React, {createContext, ForwardedRef, InputHTMLAttributes} from 'react';
+
+export interface InputRenderProps {
+  /**
+   * Whether the input is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the input is focused, either via a mouse or keyboard.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the input is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the input is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the input is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean
+}
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps, 'input'> {
+ /**
+  * 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-Input'
+  */
+ className?: ClassNameOrFunction<InputRenderProps>,
+ /**
+  * Temporary text that occupies the text input when it is empty.
+  * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder).
+  */
+ placeholder?: string
+}
+
+export const InputContext = createContext<ContextValue<InputProps, HTMLInputElement>>({});
+
+let filterHoverProps = (props: InputProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {onHoverStart, onHoverChange, onHoverEnd, ...otherProps} = props;
+  return otherProps;
+};
+
+/**
+ * An input allows a user to input text.
+ */
+export const Input = /*#__PURE__*/ createHideableComponent(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+  [props, ref] = useContextProps(props, ref, InputContext);
+
+  let {hoverProps, isHovered} = useHover({
+    ...props,
+    isDisabled: props.disabled
+  });
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing({
+    isTextInput: true,
+    autoFocus: props.autoFocus
+  });
+
+  let isInvalid = !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled: props.disabled || false,
+      isInvalid
+    },
+    defaultClassName: 'react-aria-Input'
+  });
+
+  return (
+    <dom.input
+      {...mergeProps(filterHoverProps(props), focusProps, hoverProps)}
+      {...renderProps}
+      ref={ref}
+      data-focused={isFocused || undefined}
+      data-disabled={props.disabled || undefined}
+      data-hovered={isHovered || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-invalid={isInvalid || undefined} />
+  );
+});

package/src/Keyboard.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 {ContextValue, dom, DOMRenderProps, useContextProps} from './utils';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+
+export interface KeyboardProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'kbd', undefined> {}
+
+export const KeyboardContext = createContext<ContextValue<KeyboardProps, HTMLElement>>({});
+
+export const Keyboard = forwardRef(function Keyboard(props: KeyboardProps, ref: ForwardedRef<HTMLElement>) {
+  [props, ref] = useContextProps(props, ref, KeyboardContext);
+  return <dom.kbd dir="ltr" {...props} ref={ref} />;
+});

package/src/Label.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 {ContextValue, dom, DOMRenderProps, useContextProps} from './utils';
+import {createHideableComponent} from '@react-aria/collections';
+import React, {createContext, ForwardedRef, LabelHTMLAttributes} from 'react';
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement>, DOMRenderProps<'label', undefined> {
+  elementType?: string
+}
+
+export const LabelContext = createContext<ContextValue<LabelProps, HTMLLabelElement>>({});
+
+export const Label = /*#__PURE__*/ createHideableComponent(function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
+  [props, ref] = useContextProps(props, ref, LabelContext);
+  let {elementType = 'label', ...labelProps} = props;
+  let ElementType = dom[elementType];
+  // @ts-ignore
+  return <ElementType className="react-aria-Label" {...labelProps} ref={ref} />;
+});

package/src/Link.tsx

@@ -0,0 +1,115 @@
+/*
+ * 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 {AriaLinkOptions, HoverEvents, mergeProps, useFocusRing, useHover, useLink} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  PossibleLinkDOMRenderProps,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
+import {DOMProps, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+
+export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, Omit<RenderProps<LinkRenderProps>, 'render'>, PossibleLinkDOMRenderProps<'span', LinkRenderProps>, SlotProps, DOMProps, Omit<GlobalDOMAttributes<HTMLAnchorElement>, '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-Link'
+  */
+ className?: ClassNameOrFunction<LinkRenderProps>
+}
+
+export interface LinkRenderProps {
+  /**
+   * Whether the link is the current item within a list.
+   * @selector [data-current]
+   */
+  isCurrent: boolean,
+  /**
+   * Whether the link is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the link is currently in a pressed state.
+   * @selector [data-pressed]
+   */
+  isPressed: boolean,
+  /**
+   * Whether the link is focused, either via a mouse or keyboard.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the link is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the link is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean
+}
+
+export const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(null);
+
+/**
+ * A link allows a user to navigate to another page or resource within a web page
+ * or application.
+ */
+export const Link = /*#__PURE__*/ (forwardRef as forwardRefType)(function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
+  [props, ref] = useContextProps(props, ref, LinkContext);
+
+  let elementType = props.href && !props.isDisabled ? 'a' : 'span';
+  let {linkProps, isPressed} = useLink({...props, elementType}, ref);
+  let ElementType = dom[elementType];
+
+  let {hoverProps, isHovered} = useHover(props);
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+
+  let renderProps = useRenderProps<LinkRenderProps, 'span' | 'a'>({
+    ...props,
+    defaultClassName: 'react-aria-Link',
+    values: {
+      isCurrent: !!props['aria-current'],
+      isDisabled: props.isDisabled || false,
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.onClick;
+
+  return (
+    <ElementType
+      ref={ref}
+      slot={props.slot || undefined}
+      {...mergeProps(DOMProps, renderProps, linkProps, hoverProps, focusProps)}
+      data-focused={isFocused || undefined}
+      data-hovered={isHovered || undefined}
+      data-pressed={isPressed || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-current={!!props['aria-current'] || undefined}
+      data-disabled={props.isDisabled  || undefined}>
+      {renderProps.children}
+    </ElementType>
+  );
+});