From 4b9a3333008cc99ced569147465cd5bf44beaf59 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Wed, 27 Mar 2024 22:40:36 -0600 Subject: [PATCH 1/7] v1.2.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 84e0a26a..59e23338 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.2.0", + "version": "1.2.1", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", From dea9c0bde599ef89c08ca1bac66efc25385b3bdd Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Thu, 9 May 2024 10:40:11 -0700 Subject: [PATCH 2/7] v1.3.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0b98eaac..87e47978 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.3.0", + "version": "1.3.1", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", From fca0b32849b1640e5bbf7971eba3505fa56cec66 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Sat, 18 May 2024 12:18:51 -0600 Subject: [PATCH 3/7] remove more --- package.json | 1 - src/breadcrumbs/BreadcrumbItem.tsx | 2 +- src/breadcrumbs/Breadcrumbs.tsx | 9 +++- src/dialog/Dialog.tsx | 2 +- src/field/Field.tsx | 3 +- src/field/FieldLabel.tsx | 8 +++- src/listbox/ListBox.tsx | 2 +- src/listbox/ListBoxBase.tsx | 13 +++--- src/listbox/ListBoxOption.tsx | 2 +- src/listbox/ListBoxSection.tsx | 2 +- src/menu/ActionMenu.tsx | 3 +- src/menu/Menu.tsx | 5 ++- src/menu/MenuItem.tsx | 2 +- src/menu/MenuSection.tsx | 3 +- src/menu/MenuTrigger.tsx | 10 +++-- src/picker/Picker.tsx | 3 +- src/progress/ProgressCircle.tsx | 8 +++- src/slider/RangeSlider.tsx | 2 +- src/slider/SliderBase.tsx | 2 +- src/textfield/TextFieldBase.tsx | 3 +- src/types/breadcrumb.ts | 68 ++++++++++++++++++++++++++++++ src/types/collection.ts | 38 +++++++++++++++++ src/types/dom.ts | 18 ++++++++ src/types/index.ts | 1 + src/types/menu.ts | 14 +++--- src/view/Content.tsx | 3 +- yarn.lock | 2 +- 27 files changed, 180 insertions(+), 49 deletions(-) create mode 100644 src/types/breadcrumb.ts diff --git a/package.json b/package.json index 00c2cb83..c3372f83 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,6 @@ "@react-stately/tooltip": "^3.2.2", "@react-stately/utils": "^3.5.1", "@react-stately/virtualizer": "^3.3.1", - "@react-types/shared": "^3.15.0", "clsx": "^1.1.1", "eslint-config-prettier": "^8.8.0", "react-transition-group": "^4.4.5" diff --git a/src/breadcrumbs/BreadcrumbItem.tsx b/src/breadcrumbs/BreadcrumbItem.tsx index d87dc06f..6cdf70ae 100644 --- a/src/breadcrumbs/BreadcrumbItem.tsx +++ b/src/breadcrumbs/BreadcrumbItem.tsx @@ -1,4 +1,3 @@ -import { BreadcrumbItemProps } from '@react-types/breadcrumbs'; import { FocusRing } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; import React, { Fragment, useRef } from 'react'; @@ -6,6 +5,7 @@ import { useBreadcrumbItem } from '@react-aria/breadcrumbs'; import { useHover } from '@react-aria/interactions'; import { classNames, getWrappedElement } from '../utils'; import { ChevronRightOutline, Icon } from '../icon'; +import { BreadcrumbItemProps } from '../types'; export function BreadcrumbItem(props: BreadcrumbItemProps) { const { children, isCurrent, isDisabled } = props; diff --git a/src/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx index 87f228da..ea8abcd4 100644 --- a/src/breadcrumbs/Breadcrumbs.tsx +++ b/src/breadcrumbs/Breadcrumbs.tsx @@ -1,4 +1,3 @@ -import { DOMRef } from '@react-types/shared'; import React, { Key, ReactElement, useCallback, useRef } from 'react'; import { useBreadcrumbs } from '@react-aria/breadcrumbs'; import { useLayoutEffect, useValueEffect } from '@react-aria/utils'; @@ -11,7 +10,13 @@ import { FolderOutline } from '../icon/Icons'; import { classNames, useDOMRef } from '../utils'; import { ActionButton } from '../button'; import theme from '../theme'; -import { AriaLabelingProps, DOMProps, ItemProps, StyleProps } from '../types'; +import { + AriaLabelingProps, + DOMProps, + DOMRef, + ItemProps, + StyleProps, +} from '../types'; import { BreadcrumbItem } from './BreadcrumbItem'; const MIN_VISIBLE_ITEMS = 1; diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx index 253a4c89..c171f4d5 100644 --- a/src/dialog/Dialog.tsx +++ b/src/dialog/Dialog.tsx @@ -1,4 +1,3 @@ -import { DOMRef } from '@react-types/shared'; import { FocusScope } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; import React, { useContext } from 'react'; @@ -9,6 +8,7 @@ import { Heading } from '../content'; import { CloseOutline, Icon } from '../icon'; import { classNames, useDOMRef } from '../utils'; import { Button } from '../button'; +import { DOMRef } from '../types'; import { DialogContext, DialogContextValue } from './context'; const dialogCSS = css` diff --git a/src/field/Field.tsx b/src/field/Field.tsx index bcbab7a4..0cfdcb20 100644 --- a/src/field/Field.tsx +++ b/src/field/Field.tsx @@ -1,5 +1,4 @@ import { css, keyframes } from '@emotion/react'; -import { LabelPosition } from '@react-types/shared'; import { mergeProps } from '@react-aria/utils'; import React, { RefObject, @@ -7,7 +6,7 @@ import React, { ReactNode, ReactElement, } from 'react'; -import { Validation } from '../types'; +import { LabelPosition, Validation } from '../types'; import { classNames } from '../utils'; import { useFormProps } from '../form'; import { FieldLabel, FieldLabelProps } from './FieldLabel'; diff --git a/src/field/FieldLabel.tsx b/src/field/FieldLabel.tsx index 523128e7..fcd9823d 100644 --- a/src/field/FieldLabel.tsx +++ b/src/field/FieldLabel.tsx @@ -1,9 +1,13 @@ -import { DOMRef } from '@react-types/shared'; import { css } from '@emotion/react'; import { filterDOMProps } from '@react-aria/utils'; import React, { ReactNode, ElementType, HTMLAttributes } from 'react'; import { classNames, useDOMRef } from '../utils'; -import { DOMProps, LabelableProps, ExtendableLabelProps } from '../types'; +import { + DOMProps, + LabelableProps, + ExtendableLabelProps, + DOMRef, +} from '../types'; import theme from '../theme'; interface LabelProps { diff --git a/src/listbox/ListBox.tsx b/src/listbox/ListBox.tsx index 174c5c47..161d100a 100644 --- a/src/listbox/ListBox.tsx +++ b/src/listbox/ListBox.tsx @@ -1,4 +1,3 @@ -import { DOMRef } from '@react-types/shared'; import React, { ReactElement, CSSProperties, ReactNode, Key } from 'react'; import { useListState } from '@react-stately/list'; import { useDOMRef } from '../utils'; @@ -6,6 +5,7 @@ import { AriaLabelingProps, CollectionBase, DOMProps, + DOMRef, MultipleSelection, SelectionBehavior, } from '../types'; diff --git a/src/listbox/ListBoxBase.tsx b/src/listbox/ListBoxBase.tsx index e755fcdc..d1c17588 100644 --- a/src/listbox/ListBoxBase.tsx +++ b/src/listbox/ListBoxBase.tsx @@ -1,10 +1,3 @@ -import { - AriaLabelingProps, - DOMProps, - FocusStrategy, - Node, - StyleProps, -} from '@react-types/shared'; import { AriaListBoxOptions, useListBox } from '@react-aria/listbox'; import { ListLayout } from '@react-stately/layout'; @@ -21,6 +14,12 @@ import React, { import { ReusableView } from '@react-stately/virtualizer'; import { useCollator } from '@react-aria/i18n'; import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer'; +import { + AriaLabelingProps, + DOMProps, + FocusStrategy, + StyleProps, +} from '../types'; import { ListBoxSection } from './ListBoxSection'; import { ListBoxOption } from './ListBoxOption'; import { ListBoxContext } from './ListBoxContext'; diff --git a/src/listbox/ListBoxOption.tsx b/src/listbox/ListBoxOption.tsx index 4d0ef5ae..2a430b29 100644 --- a/src/listbox/ListBoxOption.tsx +++ b/src/listbox/ListBoxOption.tsx @@ -1,7 +1,6 @@ import { FocusRing } from '@react-aria/focus'; import { isFocusVisible, useHover } from '@react-aria/interactions'; import { mergeProps } from '@react-aria/utils'; -import { Node } from '@react-types/shared'; import React, { useContext } from 'react'; import { useOption } from '@react-aria/listbox'; import { useRef } from 'react'; @@ -9,6 +8,7 @@ import { Text } from '../content'; import { classNames } from '../utils'; import { Icon, CheckmarkOutline } from '../icon'; import { menuItemCSS } from '../menu/styles'; +import { Node } from '../types'; import { ListBoxContext } from './ListBoxContext'; interface OptionProps { diff --git a/src/listbox/ListBoxSection.tsx b/src/listbox/ListBoxSection.tsx index 201adfb4..0f88ff80 100644 --- a/src/listbox/ListBoxSection.tsx +++ b/src/listbox/ListBoxSection.tsx @@ -3,7 +3,6 @@ import { layoutInfoToStyle, useVirtualizerItem, } from '@react-aria/virtualizer'; -import { Node } from '@react-types/shared'; import React, { Fragment, ReactNode, useContext, useRef } from 'react'; import { LayoutInfo } from '@react-stately/virtualizer'; import { useListBoxSection } from '@react-aria/listbox'; @@ -11,6 +10,7 @@ import { useLocale } from '@react-aria/i18n'; import { useSeparator } from '@react-aria/separator'; import { css } from '@emotion/react'; import theme from '../theme'; +import { Node } from '../types'; import { ListBoxContext } from './ListBoxContext'; interface ListBoxSectionProps extends Omit { diff --git a/src/menu/ActionMenu.tsx b/src/menu/ActionMenu.tsx index 7adefe62..4c6ca3e3 100644 --- a/src/menu/ActionMenu.tsx +++ b/src/menu/ActionMenu.tsx @@ -1,9 +1,8 @@ import { filterDOMProps } from '@react-aria/utils'; -import { FocusableRef } from '@react-types/shared'; import React, { forwardRef } from 'react'; import { css } from '@emotion/react'; import { ArrowIosDownwardOutline, Icon, MoreHorizontalOutline } from '../icon'; -import { ActionMenuProps } from '../types'; +import { ActionMenuProps, FocusableRef } from '../types'; import { Button } from '../button'; import { MenuTrigger } from './MenuTrigger'; import { Menu } from './Menu'; diff --git a/src/menu/Menu.tsx b/src/menu/Menu.tsx index b33bc6d9..045620ac 100644 --- a/src/menu/Menu.tsx +++ b/src/menu/Menu.tsx @@ -1,5 +1,5 @@ import { mergeProps, useSyncRef } from '@react-aria/utils'; -import React, { Key, ReactElement, useContext } from 'react'; +import React, { ReactElement, useContext } from 'react'; import { useMenu } from '@react-aria/menu'; import { useTreeState } from '@react-stately/tree'; import { css } from '@emotion/react'; @@ -16,6 +16,7 @@ import { MenuContext } from './context'; import { MenuItem } from './MenuItem'; import { MenuSection } from './MenuSection'; +type Key = string | number; export interface MenuProps extends CollectionBase, MultipleSelection { /** Where the focus should be set. */ autoFocus?: boolean | FocusStrategy; @@ -32,7 +33,7 @@ export interface AriaMenuProps DOMProps, AriaLabelingProps {} -export type MenuComponentProps = AriaMenuProps +export type MenuComponentProps = AriaMenuProps; const menuULCSS = css` background-color: var(--ac-global-menu-background-color); diff --git a/src/menu/MenuItem.tsx b/src/menu/MenuItem.tsx index b55139cc..256d1179 100644 --- a/src/menu/MenuItem.tsx +++ b/src/menu/MenuItem.tsx @@ -1,6 +1,5 @@ import { FocusRing } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; -import { Node } from '@react-types/shared'; import React, { Key, useRef } from 'react'; import { TreeState } from '@react-stately/tree'; import { useHover } from '@react-aria/interactions'; @@ -8,6 +7,7 @@ import { useMenuItem } from '@react-aria/menu'; import { Text } from '../content'; import { classNames } from '../utils'; import { Icon, CheckmarkOutline } from '../icon'; +import { Node } from '../types'; import { useMenuContext } from './context'; import { menuItemCSS } from './styles'; diff --git a/src/menu/MenuSection.tsx b/src/menu/MenuSection.tsx index bb2aa571..564c0cff 100644 --- a/src/menu/MenuSection.tsx +++ b/src/menu/MenuSection.tsx @@ -1,4 +1,3 @@ -import { Node } from '@react-types/shared'; import React, { Fragment, Key } from 'react'; import { TreeState } from '@react-stately/tree'; import { useMenuSection } from '@react-aria/menu'; @@ -6,8 +5,8 @@ import { useSeparator } from '@react-aria/separator'; import { getChildNodes } from '@react-stately/collections'; import { css } from '@emotion/react'; import theme from '../theme'; +import { Node } from '../types'; import { MenuItem } from './MenuItem'; - interface MenuSectionProps { item: Node; state: TreeState; diff --git a/src/menu/MenuTrigger.tsx b/src/menu/MenuTrigger.tsx index b566ace4..8fb2fa06 100644 --- a/src/menu/MenuTrigger.tsx +++ b/src/menu/MenuTrigger.tsx @@ -1,14 +1,18 @@ import { DismissButton, useOverlayPosition } from '@react-aria/overlays'; -import { DOMRef, DOMRefValue } from '@react-types/shared'; import { FocusScope } from '@react-aria/focus'; -import { Placement } from '@react-types/overlays'; import { PressResponder } from '@react-aria/interactions'; import React, { forwardRef, Fragment, ReactElement, useRef } from 'react'; import { useMenuTrigger } from '@react-aria/menu'; import { useMenuTriggerState } from '@react-stately/menu'; import { Popover } from '../popover'; import { unwrapDOMRef, useDOMRef } from '../utils'; -import { Alignment, OverlayTriggerProps } from '../types'; +import { + Alignment, + DOMRef, + DOMRefValue, + OverlayTriggerProps, + Placement, +} from '../types'; import { MenuContext } from './context'; type MenuTriggerType = 'press' | 'longPress'; diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx index 88dbd999..bcad9150 100644 --- a/src/picker/Picker.tsx +++ b/src/picker/Picker.tsx @@ -7,11 +7,10 @@ import { useLayoutEffect, useResizeObserver, } from '@react-aria/utils'; -import { Placement } from '@react-types/overlays'; import { PressResponder, useHover } from '@react-aria/interactions'; import React, { ReactElement, useCallback, useRef, useState } from 'react'; import { useSelectState } from '@react-stately/select'; -import { PickerProps } from '../types'; +import { PickerProps, Placement } from '../types'; import { DropdownMenu, DropdownButton } from '../dropdown'; import { ListBoxBase, useListBoxLayout } from '../listbox'; import { diff --git a/src/progress/ProgressCircle.tsx b/src/progress/ProgressCircle.tsx index c016a638..2a6156fd 100644 --- a/src/progress/ProgressCircle.tsx +++ b/src/progress/ProgressCircle.tsx @@ -1,9 +1,13 @@ import { clamp } from '@react-aria/utils'; -import { AriaLabelingProps, DOMRef } from '@react-types/shared'; import React, { CSSProperties } from 'react'; import { useProgressBar } from '@react-aria/progress'; import { classNames, useDOMRef } from '../utils'; -import { DOMProps, ProgressBaseProps } from '../types'; +import { + AriaLabelingProps, + DOMProps, + DOMRef, + ProgressBaseProps, +} from '../types'; import { progressCircleCSS } from './styles'; interface AriaProgressCircleProps extends DOMProps, AriaLabelingProps {} diff --git a/src/slider/RangeSlider.tsx b/src/slider/RangeSlider.tsx index 4849a193..9546b3fc 100644 --- a/src/slider/RangeSlider.tsx +++ b/src/slider/RangeSlider.tsx @@ -1,7 +1,7 @@ -import { FocusableRef } from '@react-types/shared'; import React from 'react'; import { useLocale } from '@react-aria/i18n'; import { RangeSliderProps } from '../types/slider'; +import { FocusableRef } from '../types'; import { SliderBase, SliderBaseChildArguments, diff --git a/src/slider/SliderBase.tsx b/src/slider/SliderBase.tsx index 1f88ea65..9464cfa0 100644 --- a/src/slider/SliderBase.tsx +++ b/src/slider/SliderBase.tsx @@ -1,4 +1,3 @@ -import { FocusableRef } from '@react-types/shared'; import React, { CSSProperties, ReactNode, RefObject, useRef } from 'react'; import { SliderState, useSliderState } from '@react-stately/slider'; import { useNumberFormatter } from '@react-aria/i18n'; @@ -7,6 +6,7 @@ import { css } from '@emotion/react'; import { useProviderProps } from '../provider'; import { BarSliderBase } from '../types/slider'; import { classNames, useFocusableRef } from '../utils'; +import { FocusableRef } from '../types'; import { labelCSS, labelContainerCSS, sliderCSS } from './styles'; export interface SliderBaseChildArguments { inputRef: RefObject; diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx index d336d91c..ff9e98bf 100644 --- a/src/textfield/TextFieldBase.tsx +++ b/src/textfield/TextFieldBase.tsx @@ -1,7 +1,6 @@ import { css, keyframes } from '@emotion/react'; import { FocusRing } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; -import { PressEvents } from '@react-types/shared'; import React, { HTMLAttributes, InputHTMLAttributes, @@ -14,7 +13,7 @@ import React, { useRef, forwardRef, } from 'react'; -import { useHover } from '@react-aria/interactions'; +import { PressEvents, useHover } from '@react-aria/interactions'; import { classNames, createFocusableRef } from '../utils'; import { Field } from '../field'; import { Icon, AlertCircleOutline } from '../icon'; diff --git a/src/types/breadcrumb.ts b/src/types/breadcrumb.ts new file mode 100644 index 00000000..750a98fd --- /dev/null +++ b/src/types/breadcrumb.ts @@ -0,0 +1,68 @@ +import { AriaLinkProps } from '@react-types/link'; +import { Key, ReactElement, ReactNode } from 'react'; +import { AriaLabelingProps, DOMProps, LinkDOMProps } from './dom'; +import { ItemProps } from './collection'; +import { StyleProps } from './style'; + +export interface BreadcrumbItemProps extends AriaLinkProps, LinkDOMProps { + /** Whether the breadcrumb item represents the current page. */ + isCurrent?: boolean; + /** + * The type of current location the breadcrumb item represents, if `isCurrent` is true. + * @default 'page' + */ + 'aria-current'?: + | 'page' + | 'step' + | 'location' + | 'date' + | 'time' + | boolean + | 'true' + | 'false'; + /** Whether the breadcrumb item is disabled. */ + isDisabled?: boolean; + /** The contents of the breadcrumb item. */ + children: ReactNode; +} + +export interface AriaBreadcrumbItemProps extends BreadcrumbItemProps, DOMProps { + /** + * The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'. + * @default 'a' + */ + elementType?: string; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface BreadcrumbsProps {} +export interface AriaBreadcrumbsProps + extends BreadcrumbsProps, + DOMProps, + AriaLabelingProps {} + +export interface ACBreadcrumbsProps + extends AriaBreadcrumbsProps, + StyleProps { + /** The breadcrumb items. */ + children: ReactElement> | ReactElement>[]; + /** Whether the Breadcrumbs are disabled. */ + isDisabled?: boolean; + /** Called when an item is acted upon (usually selection via press). */ + onAction?: (key: Key) => void; + /** + * Size of the Breadcrumbs including spacing and layout. + * @default 'L' + */ + size?: 'S' | 'M' | 'L'; + /** Whether to always show the root item if the items are collapsed. */ + showRoot?: boolean; + /** + * Whether to place the last Breadcrumb item onto a new line. + */ + isMultiline?: boolean; + /** + * Whether to autoFocus the last Breadcrumb item when the Breadcrumbs render. + */ + autoFocusCurrent?: boolean; +} diff --git a/src/types/collection.ts b/src/types/collection.ts index 1246397c..2a69c478 100644 --- a/src/types/collection.ts +++ b/src/types/collection.ts @@ -51,3 +51,41 @@ export interface CollectionBase { /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */ disabledKeys?: Iterable; } + +export interface Node { + /** The type of item this node represents. */ + type: string; + /** A unique key for the node. */ + key: Key; + /** The object value the node was created from. */ + value: T | null; + /** The level of depth this node is at in the heirarchy. */ + level: number; + /** Whether this item has children, even if not loaded yet. */ + hasChildNodes: boolean; + /** + * The loaded children of this node. + * @deprecated Use `collection.getChildren(node.key)` instead. + */ + childNodes: Iterable>; + /** The rendered contents of this node (e.g. JSX). */ + rendered: ReactNode; + /** A string value for this node, used for features like typeahead. */ + textValue: string; + /** An accessibility label for this node. */ + 'aria-label'?: string; + /** The index of this node within its parent. */ + index?: number; + /** A function that should be called to wrap the rendered node. */ + wrapper?: (element: ReactElement) => ReactElement; + /** The key of the parent node. */ + parentKey?: Key | null; + /** The key of the node before this node. */ + prevKey?: Key | null; + /** The key of the node after this node. */ + nextKey?: Key | null; + /** Additional properties specific to a particular node type. */ + props?: any; + /** @private */ + shouldInvalidate?: (context: unknown) => boolean; +} diff --git a/src/types/dom.ts b/src/types/dom.ts index 3a1f5083..696a9dc8 100644 --- a/src/types/dom.ts +++ b/src/types/dom.ts @@ -3,6 +3,8 @@ import { CompositionEventHandler, DOMFactory, FormEventHandler, + HTMLAttributeAnchorTarget, + HTMLAttributeReferrerPolicy, HTMLAttributes, ReactDOM, ReactEventHandler, @@ -30,6 +32,22 @@ export interface AriaLabelingProps { 'aria-details'?: string; } +// Make sure to update filterDOMProps.ts when updating this. +export interface LinkDOMProps { + /** A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). */ + href?: string; + /** The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */ + target?: HTMLAttributeAnchorTarget; + /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */ + rel?: string; + /** Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). */ + download?: boolean | string; + /** A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). */ + ping?: string; + /** How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */ + referrerPolicy?: HTMLAttributeReferrerPolicy; +} + export interface AriaValidationProps { // https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage /** diff --git a/src/types/index.ts b/src/types/index.ts index 49a6b4fe..17d8878a 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -16,3 +16,4 @@ export * from './style'; export * from './progress'; export * from './style'; export * from './locale'; +export * from './breadcrumb'; diff --git a/src/types/menu.ts b/src/types/menu.ts index 9bd4902a..b00b6d70 100644 --- a/src/types/menu.ts +++ b/src/types/menu.ts @@ -1,15 +1,11 @@ -import { - Alignment, - AriaLabelingProps, - CollectionBase, - DOMProps, - FocusStrategy, - MultipleSelection, - StyleProps, -} from '@react-types/shared'; import { Key, ReactElement, ReactNode } from 'react'; import { ButtonProps } from './button'; import { OverlayTriggerProps } from './overlays'; +import { Alignment } from './labelable'; +import { FocusStrategy, MultipleSelection } from './selection'; +import { CollectionBase } from './collection'; +import { AriaLabelingProps, DOMProps } from './dom'; +import { StyleProps } from './style'; export type MenuTriggerType = 'press' | 'longPress'; diff --git a/src/view/Content.tsx b/src/view/Content.tsx index 0d2c1015..fc5a59ed 100644 --- a/src/view/Content.tsx +++ b/src/view/Content.tsx @@ -1,8 +1,7 @@ -import { DOMRef } from '@react-types/shared'; import { filterDOMProps } from '@react-aria/utils'; import React, { forwardRef, ReactNode } from 'react'; import { useDOMRef } from '../utils'; -import { DOMProps } from '../types'; +import { DOMProps, DOMRef } from '../types'; export interface ContentProps extends DOMProps { /** diff --git a/yarn.lock b/yarn.lock index fcea50f9..e7c237e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2692,7 +2692,7 @@ dependencies: "@react-types/shared" "^3.21.0" -"@react-types/shared@^3.15.0", "@react-types/shared@^3.16.0", "@react-types/shared@^3.21.0": +"@react-types/shared@^3.16.0", "@react-types/shared@^3.21.0": version "3.21.0" resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.21.0.tgz#1af41fdf7dfbdbd33bbc1210617c43ed0d4ef20c" integrity sha512-wJA2cUF8dP4LkuNUt9Vh2kkfiQb2NLnV2pPXxVnKJZ7d4x2/7VPccN+LYPnH8m0X3+rt50cxWuPKQmjxSsCFOg== From a9bc55fdbc49c3b7aa9cc5b865b7a5ef963fa929 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Sat, 18 May 2024 12:23:02 -0600 Subject: [PATCH 4/7] more cleanup --- src/breadcrumbs/Breadcrumbs.tsx | 40 ++------------------------------- src/types/breadcrumb.ts | 8 ------- 2 files changed, 2 insertions(+), 46 deletions(-) diff --git a/src/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx index ea8abcd4..4d9e873b 100644 --- a/src/breadcrumbs/Breadcrumbs.tsx +++ b/src/breadcrumbs/Breadcrumbs.tsx @@ -10,13 +10,7 @@ import { FolderOutline } from '../icon/Icons'; import { classNames, useDOMRef } from '../utils'; import { ActionButton } from '../button'; import theme from '../theme'; -import { - AriaLabelingProps, - DOMProps, - DOMRef, - ItemProps, - StyleProps, -} from '../types'; +import { ACBreadcrumbsProps, DOMRef } from '../types'; import { BreadcrumbItem } from './BreadcrumbItem'; const MIN_VISIBLE_ITEMS = 1; @@ -24,36 +18,6 @@ const MAX_VISIBLE_ITEMS = 4; // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface BreadcrumbsProps {} -export interface AriaBreadcrumbsProps - extends BreadcrumbsProps, - DOMProps, - AriaLabelingProps {} - -export interface ArizeBreadcrumbsProps - extends AriaBreadcrumbsProps, - StyleProps { - /** The breadcrumb items. */ - children: ReactElement> | ReactElement>[]; - /** Whether the Breadcrumbs are disabled. */ - isDisabled?: boolean; - /** Called when an item is acted upon (usually selection via press). */ - onAction?: (key: Key) => void; - /** - * Size of the Breadcrumbs including spacing and layout. - * @default 'L' - */ - size?: 'S' | 'M' | 'L'; - /** Whether to always show the root item if the items are collapsed. */ - showRoot?: boolean; - /** - * Whether to place the last Breadcrumb item onto a new line. - */ - isMultiline?: boolean; - /** - * Whether to autoFocus the last Breadcrumb item when the Breadcrumbs render. - */ - autoFocusCurrent?: boolean; -} const ulCSS = css` flex-wrap: nowrap; @@ -93,7 +57,7 @@ const liCSS = css` } `; -function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { +function Breadcrumbs(props: ACBreadcrumbsProps, ref: DOMRef) { props = useProviderProps(props); const { size = 'L', diff --git a/src/types/breadcrumb.ts b/src/types/breadcrumb.ts index 750a98fd..dccd5dad 100644 --- a/src/types/breadcrumb.ts +++ b/src/types/breadcrumb.ts @@ -26,14 +26,6 @@ export interface BreadcrumbItemProps extends AriaLinkProps, LinkDOMProps { children: ReactNode; } -export interface AriaBreadcrumbItemProps extends BreadcrumbItemProps, DOMProps { - /** - * The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'. - * @default 'a' - */ - elementType?: string; -} - // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface BreadcrumbsProps {} export interface AriaBreadcrumbsProps From 4c47fd9702a07a51de2e18d0ccb8892ed3641f07 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Sat, 18 May 2024 12:24:31 -0600 Subject: [PATCH 5/7] WIP --- src/menu/Menu.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/menu/Menu.tsx b/src/menu/Menu.tsx index 045620ac..e548021a 100644 --- a/src/menu/Menu.tsx +++ b/src/menu/Menu.tsx @@ -1,5 +1,5 @@ import { mergeProps, useSyncRef } from '@react-aria/utils'; -import React, { ReactElement, useContext } from 'react'; +import React, { Key, ReactElement, useContext } from 'react'; import { useMenu } from '@react-aria/menu'; import { useTreeState } from '@react-stately/tree'; import { css } from '@emotion/react'; @@ -16,7 +16,6 @@ import { MenuContext } from './context'; import { MenuItem } from './MenuItem'; import { MenuSection } from './MenuSection'; -type Key = string | number; export interface MenuProps extends CollectionBase, MultipleSelection { /** Where the focus should be set. */ autoFocus?: boolean | FocusStrategy; From 7c9f0d9c1973e3b4e4e245d7a0df06d27d4d58e1 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Sat, 18 May 2024 12:28:51 -0600 Subject: [PATCH 6/7] remove more --- src/breadcrumbs/Breadcrumbs.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx index 4d9e873b..1a5a4e62 100644 --- a/src/breadcrumbs/Breadcrumbs.tsx +++ b/src/breadcrumbs/Breadcrumbs.tsx @@ -16,9 +16,6 @@ import { BreadcrumbItem } from './BreadcrumbItem'; const MIN_VISIBLE_ITEMS = 1; const MAX_VISIBLE_ITEMS = 4; -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface BreadcrumbsProps {} - const ulCSS = css` flex-wrap: nowrap; flex: 1 0; From 86a32e3a659acc5aff1f27e4cc64365b75b44990 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Sat, 18 May 2024 12:31:47 -0600 Subject: [PATCH 7/7] fix node --- src/listbox/ListBoxBase.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/listbox/ListBoxBase.tsx b/src/listbox/ListBoxBase.tsx index d1c17588..24f5f43d 100644 --- a/src/listbox/ListBoxBase.tsx +++ b/src/listbox/ListBoxBase.tsx @@ -19,6 +19,7 @@ import { DOMProps, FocusStrategy, StyleProps, + Node, } from '../types'; import { ListBoxSection } from './ListBoxSection'; import { ListBoxOption } from './ListBoxOption';