diff --git a/.changeset/modern-collections.md b/.changeset/modern-collections.md new file mode 100644 index 000000000..beea5d8f3 --- /dev/null +++ b/.changeset/modern-collections.md @@ -0,0 +1,7 @@ +--- +'@keystar/ui': minor +--- + +Replace the legacy collection compatibility APIs with explicit React Aria Components collection composition across list boxes, list views, tables, menus, tabs, tags, pickers, combo boxes, navigation trees, action groups, and editor autocomplete. + +Collection children now use component-specific names such as `MenuItem`, `ListBoxItem`, `TableRow`, `Tab`, and `Tag`, with explicit collection, section, header, and load-more components where applicable. diff --git a/design-system/docs/components/theme-switcher.tsx b/design-system/docs/components/theme-switcher.tsx index 2314c8222..2097a1034 100644 --- a/design-system/docs/components/theme-switcher.tsx +++ b/design-system/docs/components/theme-switcher.tsx @@ -5,7 +5,7 @@ import { monitorIcon } from '@keystar/ui/icon/icons/monitorIcon'; import { moonIcon } from '@keystar/ui/icon/icons/moonIcon'; import { sunIcon } from '@keystar/ui/icon/icons/sunIcon'; import { Icon } from '@keystar/ui/icon'; -import { MenuTrigger, Menu, Item } from '@keystar/ui/menu'; +import { MenuTrigger, Menu, MenuItem } from '@keystar/ui/menu'; import { useRootColorScheme } from '@keystar/ui/next'; import { SCHEME_AUTO, SCHEME_DARK, SCHEME_LIGHT } from '@keystar/ui/primitives'; @@ -48,10 +48,10 @@ export function ColorSchemeMenu() { selectionMode="single" > {item => ( - + {item.label} - + )} diff --git a/design-system/pkg/package.json b/design-system/pkg/package.json index 100b2157d..b459eab92 100644 --- a/design-system/pkg/package.json +++ b/design-system/pkg/package.json @@ -1482,14 +1482,15 @@ "@emotion/sheet": "^1.4.0", "@emotion/utils": "^1.4.2", "@floating-ui/react": "^0.24.0", - "@internationalized/date": "^3.12.2", + "@internationalized/date": "^3.12.3", "@internationalized/number": "^3.6.7", - "@internationalized/string": "^3.2.9", - "@react-types/shared": "^3.36.0", + "@internationalized/string": "^3.2.10", + "@react-types/shared": "^3.36.1", "@types/react": "^19.0.8", "emery": "^1.4.1", "facepaint": "^1.2.1", "react-aria": "catalog:", + "react-aria-components": "catalog:", "react-stately": "catalog:" }, "devDependencies": { @@ -1515,6 +1516,7 @@ "next": ">=14", "react": "^18.2.0 || ^19.0.0", "react-aria": "catalog:", + "react-aria-components": "catalog:", "react-dom": "^18.2.0 || ^19.0.0", "react-stately": "catalog:" }, diff --git a/design-system/pkg/src/action-bar/ActionBar.tsx b/design-system/pkg/src/action-bar/ActionBar.tsx index a14c7c126..02529639a 100644 --- a/design-system/pkg/src/action-bar/ActionBar.tsx +++ b/design-system/pkg/src/action-bar/ActionBar.tsx @@ -1,11 +1,12 @@ import { FocusScope } from 'react-aria/FocusScope'; import { announce } from 'react-aria/private/live-announcer/LiveAnnouncer'; import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { useKeyboard } from 'react-aria/useKeyboard'; import { filterDOMProps } from 'react-aria/filterDOMProps'; import { useObjectRef } from 'react-aria/useObjectRef'; +import { Toolbar } from 'react-aria-components/Toolbar'; import React, { ForwardedRef, + KeyboardEvent, ReactElement, Ref, useEffect, @@ -46,11 +47,11 @@ function ActionBar( ); } -interface ActionBarInnerProps extends ActionBarProps { +interface ActionBarInnerProps extends ActionBarProps { isOpen?: boolean; } -function ActionBarInner( +function ActionBarInner( props: ActionBarInnerProps, ref: Ref ) { @@ -78,14 +79,12 @@ function ActionBarInner( setLastCount(selectedItemCount); } - let { keyboardProps } = useKeyboard({ - onKeyDown(e) { - if (e.key === 'Escape') { - e.preventDefault(); - onClearSelection(); - } - }, - }); + let onKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + event.preventDefault(); + onClearSelection(); + } + }; // Announce "actions available" on mount. let isInitial = useRef(true); @@ -102,7 +101,7 @@ function ActionBarInner(
( styleProps.className )} > -
( )} > ( stringFormatter.format('selected', { count: lastCount }) */} -
+
); } -const ActionBarInnerWithRef = React.forwardRef(ActionBarInner) as ( +const ActionBarInnerWithRef = React.forwardRef(ActionBarInner) as < + T extends object, +>( props: ActionBarInnerProps & { ref?: Ref } ) => ReactElement; @@ -197,7 +200,7 @@ const ActionBarInnerWithRef = React.forwardRef(ActionBarInner) as ( * Action bars are used for single and bulk selection patterns when a user needs * to perform actions on one or more items at the same time. */ -const _ActionBar: ( +const _ActionBar: ( props: ActionBarProps & { ref?: ForwardedRef } ) => ReactElement = React.forwardRef(ActionBar as any) as any; diff --git a/design-system/pkg/src/action-bar/index.ts b/design-system/pkg/src/action-bar/index.ts index 03f1980d3..e418b5213 100644 --- a/design-system/pkg/src/action-bar/index.ts +++ b/design-system/pkg/src/action-bar/index.ts @@ -1,6 +1,6 @@ 'use client'; -export { Item } from 'react-stately/Item'; +export { ActionGroupItem as ActionBarItem } from '@keystar/ui/action-group'; export { ActionBar } from './ActionBar'; export { ActionBarContainer } from './ActionBarContainer'; diff --git a/design-system/pkg/src/action-bar/stories/ListExample.tsx b/design-system/pkg/src/action-bar/stories/ListExample.tsx index 94e03c239..659a5fd82 100644 --- a/design-system/pkg/src/action-bar/stories/ListExample.tsx +++ b/design-system/pkg/src/action-bar/stories/ListExample.tsx @@ -2,12 +2,17 @@ import { Icon } from '@keystar/ui/icon'; import { copyIcon } from '@keystar/ui/icon/icons/copyIcon'; import { pencilIcon } from '@keystar/ui/icon/icons/pencilIcon'; import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon'; -import { Item, ListView } from '@keystar/ui/list-view'; +import { ListViewItem, ListView } from '@keystar/ui/list-view'; import { Text } from '@keystar/ui/typography'; import { Selection } from '@react-types/shared'; import React, { useState } from 'react'; -import { ActionBar, ActionBarContainer, ActionBarProps } from '../index'; +import { + ActionBar, + ActionBarContainer, + ActionBarItem, + ActionBarProps, +} from '../index'; export const ListExample = (props: Partial>) => { let [selectedKeys, setSelectedKeys] = useState(new Set()); @@ -22,9 +27,9 @@ export const ListExample = (props: Partial>) => { selectedKeys={selectedKeys} > {(item: any) => ( - + {item.name} - + )} >) => { onClearSelection={() => setSelectedKeys(new Set())} {...props} > - + Edit - - + + Copy - - + + Delete - + ); diff --git a/design-system/pkg/src/action-bar/test/ActionBar.test.tsx b/design-system/pkg/src/action-bar/test/ActionBar.test.tsx index 32c6565af..4ec910f95 100644 --- a/design-system/pkg/src/action-bar/test/ActionBar.test.tsx +++ b/design-system/pkg/src/action-bar/test/ActionBar.test.tsx @@ -48,7 +48,7 @@ describe('action-bar/ActionBar', () => { expect(toolbar).toHaveAttribute('aria-label', 'Actions'); let buttons = within(toolbar).getAllByRole('button'); - expect(buttons).toHaveLength(3); + expect(buttons).toHaveLength(4); expect(tree.getByText('1 selected')).toBeInTheDocument(); diff --git a/design-system/pkg/src/action-bar/types.ts b/design-system/pkg/src/action-bar/types.ts index 2cc29912b..575e0b739 100644 --- a/design-system/pkg/src/action-bar/types.ts +++ b/design-system/pkg/src/action-bar/types.ts @@ -1,18 +1,19 @@ import { BaseStyleProps } from '@keystar/ui/style'; -import { DOMProps, ItemProps, Key } from '@react-types/shared'; +import { DOMProps, Key } from '@react-types/shared'; import { ReactElement, ReactNode } from 'react'; +import type { ActionGroupItemProps } from '@keystar/ui/action-group'; -type ItemElement = ReactElement> | null; +type ItemElement = ReactElement | null; -export type ActionBarProps = { - children: ItemElement | ItemElement[] | ((item: T) => ItemElement); +export type ActionBarProps = { + children: ItemElement | ItemElement[] | ((item: T) => ItemElement); items?: Iterable; disabledKeys?: Iterable; selectedItemCount: number | 'all'; onClearSelection: () => void; isEmphasized?: boolean; onAction?: (key: Key) => void; - buttonLabelBehavior?: 'show' | 'collapse' | 'hide'; + buttonLabelBehavior?: 'show' | 'hide'; } & DOMProps & BaseStyleProps; diff --git a/design-system/pkg/src/action-group/ActionGroup.tsx b/design-system/pkg/src/action-group/ActionGroup.tsx index 943a0ada4..8b10d7e76 100644 --- a/design-system/pkg/src/action-group/ActionGroup.tsx +++ b/design-system/pkg/src/action-group/ActionGroup.tsx @@ -1,643 +1,342 @@ -import { useActionGroup } from 'react-aria/private/actiongroup/useActionGroup'; -import { useActionGroupItem } from 'react-aria/private/actiongroup/useActionGroupItem'; -import { FocusScope } from 'react-aria/FocusScope'; -import { PressResponder } from 'react-aria/private/interactions/PressResponder'; -import { filterDOMProps } from 'react-aria/filterDOMProps'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useId } from 'react-aria/useId'; import { - useLayoutEffect, - ForwardedRef, - ReactElement, - ReactNode, + Fragment, + createContext, + type ForwardedRef, + type ReactElement, forwardRef, - useCallback, + useContext, + useEffect, useMemo, - useRef, useState, - RefObject, } from 'react'; +import type { + Collection as AriaCollection, + Key, + Node, +} from '@react-types/shared'; +import { Collection } from 'react-aria-components/Collection'; +import { + CollectionBuilder, + createLeafComponent, +} from 'react-aria-components/CollectionBuilder'; +import { Toolbar } from 'react-aria-components/Toolbar'; import { useObjectRef } from 'react-aria/useObjectRef'; -import { useResizeObserver } from 'react-aria/private/utils/useResizeObserver'; -import { useValueEffect } from 'react-aria/private/utils/useValueEffect'; -import { ListState, useListState } from 'react-stately/useListState'; -import { AriaLabelingProps, DOMProps, Node } from '@react-types/shared'; -import { ActionButton, actionButtonClassList } from '@keystar/ui/button'; -import { KeystarProvider, useProviderProps } from '@keystar/ui/core'; -import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon'; -import { moreHorizontalIcon } from '@keystar/ui/icon/icons/moreHorizontalIcon'; +import { + actionButtonClassList, + ActionButton, + ToggleButton, +} from '@keystar/ui/button'; import { Icon } from '@keystar/ui/icon'; -import { Item, Menu, MenuTrigger } from '@keystar/ui/menu'; -import { Kbd, Text } from '@keystar/ui/typography'; -import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'; -import { ClearSlots, SlotProvider, useSlotProps } from '@keystar/ui/slots'; +import { moreHorizontalIcon } from '@keystar/ui/icon/icons/moreHorizontalIcon'; +import { Menu, MenuItem, MenuTrigger } from '@keystar/ui/menu'; import { - BaseStyleProps, classNames, css, toDataAttributes, tokenSchema, useStyleProps, } from '@keystar/ui/style'; -import { isReactText } from '@keystar/ui/utils'; +import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'; -import { ActionGroupProps } from './types'; +import type { ActionGroupItemProps, ActionGroupProps } from './types'; + +const ActionGroupContext = createContext<{ + isDisabled: boolean; + disabledKeys: Set; + onAction?: (key: Key) => void; + hideButtonText: boolean; + prominence: 'low' | 'default'; + selectionMode: 'none' | 'single' | 'multiple'; + selectedKeys: Set; + toggle(key: Key): void; +} | null>(null); function ActionGroup( props: ActionGroupProps, forwardedRef: ForwardedRef ) { - props = useProviderProps(props); - props = useSlotProps(props, 'actionGroup'); + return ( + {props.children}} + > + {collection => ( + + )} + + ); +} +function ActionGroupInner( + props: ActionGroupProps & { + collection: AriaCollection>; + forwardedRef: ForwardedRef; + } +) { let { + collection, + forwardedRef, density, - prominence, isJustified, - isDisabled, + isDisabled = false, + disabledKeys: disabledKeysProp, orientation = 'horizontal', overflowMode = 'wrap', + buttonLabelBehavior = 'show', onAction, - buttonLabelBehavior, + prominence = 'default', + selectionMode = 'none', + selectedKeys: controlledSelectedKeys, + defaultSelectedKeys, + disallowEmptySelection = false, + onSelectionChange, summaryIcon, - ...otherProps + role = selectionMode === 'none' ? 'toolbar' : 'group', } = props; - - // High prominence buttons should be used sparingly and in isolation, so they - // are not supported in groups. - prominence = prominence === 'low' ? 'low' : 'default'; - - let domRef = useObjectRef(forwardedRef); - let wrapperRef = useRef(null); - let state = useListState({ ...props, suppressTextValueWarning: true }); - let { actionGroupProps } = useActionGroup(props, state, domRef); - let providerProps = { isDisabled }; let styleProps = useStyleProps(props); - - // Only hide button text if every item contains more than just plain text (we assume an icon). - let isIconCollapsible = useMemo( - () => - [...state.collection].every(item => typeof item.rendered !== 'string'), - [state.collection] + let items = useMemo(() => [...collection], [collection]); + let [uncontrolledKeys, setUncontrolledKeys] = useState( + () => new Set(defaultSelectedKeys) ); - let [{ visibleItems, hideButtonText, isMeasuring }, setVisibleItems] = - useValueEffect({ - visibleItems: state.collection.size, - hideButtonText: buttonLabelBehavior === 'hide' && isIconCollapsible, - isMeasuring: false, - }); - - let selectionMode = state.selectionManager.selectionMode; - let updateOverflow = useCallback(() => { - if (overflowMode === 'wrap') { - return; - } - - if (orientation === 'vertical' && selectionMode !== 'none') { - // Collapsing vertical action groups with selection is currently unsupported. + let selectedKeys = controlledSelectedKeys + ? new Set(controlledSelectedKeys) + : uncontrolledKeys; + let disabledKeys = new Set(disabledKeysProp); + let [visibleCount, setVisibleCount] = useState(items.length); + let groupRef = useObjectRef(forwardedRef); + + useEffect(() => { + let element = groupRef.current; + if (!element || overflowMode !== 'collapse') { + setVisibleCount(items.length); return; } - let computeVisibleItems = (visibleItems: number) => { - if (domRef.current && wrapperRef.current) { - let listItems = Array.from(domRef.current.children) as HTMLLIElement[]; - let containerSize = - orientation === 'horizontal' - ? wrapperRef.current.getBoundingClientRect().width - : wrapperRef.current.getBoundingClientRect().height; - - let isShowingMenu = visibleItems < state.collection.size; - let calculatedSize = 0; - let newVisibleItems = 0; - - if (isShowingMenu) { - let item = listItems.pop(); - if (item) { - calculatedSize += - orientation === 'horizontal' - ? outerWidth(item, false, true) - : outerHeight(item, false, true); - } - } - - for (let [i, item] of listItems.entries()) { - calculatedSize += - orientation === 'horizontal' - ? outerWidth(item, i === 0, i === listItems.length - 1) - : outerHeight(item, i === 0, i === listItems.length - 1); - if (Math.round(calculatedSize) <= Math.round(containerSize)) { - newVisibleItems++; - } else { - break; - } - } - - // If selection is enabled, and not all of the items fit, collapse all of them into a dropdown - // immediately rather than having some visible and some not. - if ( - selectionMode !== 'none' && - newVisibleItems < state.collection.size - ) { - return 0; - } - - return newVisibleItems; + let update = () => { + let available = element.getBoundingClientRect().width; + let children = Array.from(element.children) as HTMLElement[]; + let overflowButtonWidth = 40; + let used = 0; + let count = 0; + for (let child of children.slice(0, items.length)) { + let width = child.getBoundingClientRect().width; + if (used + width + overflowButtonWidth > available) break; + used += width; + count++; } - return visibleItems; + if (selectionMode !== 'none' && count < items.length) count = 0; + setVisibleCount(count < items.length ? count : items.length); }; - setVisibleItems(function* () { - let hideButtonText = buttonLabelBehavior === 'hide' && isIconCollapsible; - - // Update to show all items. - yield { - visibleItems: state.collection.size, - hideButtonText, - isMeasuring: true, - }; - - // Measure, and update to show the items that fit. - let newVisibleItems = computeVisibleItems(state.collection.size); - let isMeasuring = - newVisibleItems < state.collection.size && newVisibleItems > 0; - - // If not all of the buttons fit, and buttonLabelBehavior is 'collapse', then first try hiding - // the button text and only showing icons. Only if that still doesn't fit collapse into a menu. - if ( - newVisibleItems < state.collection.size && - buttonLabelBehavior === 'collapse' && - isIconCollapsible - ) { - yield { - visibleItems: state.collection.size, - hideButtonText: true, - isMeasuring: true, - }; + let observer = new ResizeObserver(update); + observer.observe(element); + update(); + return () => observer.disconnect(); + }, [groupRef, items.length, overflowMode, selectionMode]); - newVisibleItems = computeVisibleItems(state.collection.size); - isMeasuring = - newVisibleItems < state.collection.size && newVisibleItems > 0; - hideButtonText = true; - } - - yield { - visibleItems: newVisibleItems, - hideButtonText, - isMeasuring, - }; - - // If the number of items is less than the number of children, - // then update again to ensure that the menu fits. - if (isMeasuring) { - yield { - visibleItems: computeVisibleItems(newVisibleItems), - hideButtonText, - isMeasuring: false, - }; - } - }); - }, [ - domRef, - state.collection, - setVisibleItems, - overflowMode, - selectionMode, - buttonLabelBehavior, - isIconCollapsible, - orientation, - ]); + let toggle = (key: Key) => { + if (isDisabled || disabledKeys.has(key)) return; + if (selectionMode === 'none') { + onAction?.(key); + return; + } + let next = new Set(selectedKeys); + if (selectionMode === 'single') { + next = + next.has(key) && !disallowEmptySelection ? new Set() : new Set([key]); + } else if (next.has(key)) { + next.delete(key); + } else { + next.add(key); + } + if (!controlledSelectedKeys) setUncontrolledKeys(next); + onSelectionChange?.(next); + onAction?.(key); + }; - // Watch the parent element for size changes. Watching only the action group itself may not work - // in all scenarios because it may not shrink when available space is reduced. - let parentRef = useMemo( - () => ({ - get current() { - return wrapperRef.current?.parentElement; + let visibleItems = items.slice(0, visibleCount); + let overflowItems = items.slice(visibleCount); + let groupContents = ( + <> + {visibleItems.map(item => ( + {item.render?.(item)} + ))} + {overflowItems.length > 0 && ( + + + {summaryIcon ?? } + + toggle(key)}> + {overflowItems.map(item => ( + + {item.props.children} + + ))} + + + )} + + ); + let groupProps = { + ref: groupRef, + 'aria-label': props['aria-label'], + 'aria-labelledby': props['aria-labelledby'], + ...toDataAttributes({ + compact: density === 'compact' || undefined, + justified: isJustified || undefined, + orientation, + overflow: overflowMode, + prominence: prominence === 'default' ? undefined : prominence, + }), + className: css({ + display: 'flex', + flexDirection: orientation === 'vertical' ? 'column' : 'row', + flexWrap: overflowMode === 'wrap' ? 'wrap' : 'nowrap', + gap: tokenSchema.size.space.regular, + minWidth: 0, + '&[data-justified] > *': { flexGrow: 1 }, + '&[data-compact]:not([data-prominence=low])': { + gap: 0, + [actionButtonClassList.selector('root', 'child')]: { + borderRadius: 0, + '&:first-of-type': { + borderBottomLeftRadius: tokenSchema.size.radius.regular, + borderTopLeftRadius: tokenSchema.size.radius.regular, + }, + '&:last-of-type': { + borderBottomRightRadius: tokenSchema.size.radius.regular, + borderTopRightRadius: tokenSchema.size.radius.regular, + }, + '&:not(:last-of-type)': { + marginInlineEnd: `calc(${tokenSchema.size.border.regular} * -1)`, + }, + '&[data-focus-visible], &[data-hovered], &[data-pressed]': { + zIndex: 1, + }, + '&[data-selected]': { zIndex: 2 }, + }, + }, + '&[data-compact][data-prominence=low]': { + gap: tokenSchema.size.space.small, }, }), - [wrapperRef] - ); - useResizeObserver({ - ref: overflowMode !== 'wrap' ? parentRef : undefined, - onResize: updateOverflow, - }); - useLayoutEffect(updateOverflow, [updateOverflow, state.collection]); - - let children = [...state.collection]; - let menuItem: ReactElement | null = null; - let menuProps = {}; - - // If there are no visible items, don't apply any props to the action group container - // and pass all aria labeling props through to the menu button. - if (overflowMode === 'collapse' && visibleItems === 0) { - menuProps = filterDOMProps(props, { labelable: true }); - actionGroupProps = {}; - } - - if (overflowMode === 'collapse' && visibleItems < state.collection.size) { - let menuChildren = children.slice(visibleItems); - children = children.slice(0, visibleItems); - menuItem = ( - - ); - } - - let style = { - ...styleProps.style, - // While measuring, take up as much space as possible. - flexBasis: isMeasuring ? '100%' : undefined, - }; - + } as const; return ( - -
+ + {role === 'toolbar' ? ( + + {groupContents} + + ) : (
- - {children.map(item => ( - - ))} - {menuItem} - + {groupContents}
-
- + )} + ); } -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref - -/** Group related action buttons together. */ -const _ActionGroup: ( - props: ActionGroupProps & { ref?: RefObject } -) => ReactElement = forwardRef(ActionGroup) as any; +const _ActionGroup = forwardRef(ActionGroup) as ( + props: ActionGroupProps & { ref?: ForwardedRef } +) => ReactElement; export { _ActionGroup as ActionGroup }; -interface ActionGroupItemProps extends DOMProps, BaseStyleProps { - item: Node; - state: ListState; - isDisabled?: boolean; - hideButtonText?: boolean; - orientation?: 'horizontal' | 'vertical'; - prominence?: 'low' | 'default'; - onAction?: (key: string | number) => void; -} - -function ActionGroupItem({ - item, - state, - isDisabled, - onAction, - hideButtonText, - orientation, - prominence, -}: ActionGroupItemProps) { - let ref = useRef(null); - let { buttonProps } = useActionGroupItem({ key: item.key }, state); - isDisabled = isDisabled || state.disabledKeys.has(item.key); - let isSelected = state.selectionManager.isSelected(item.key); - let domProps = filterDOMProps(item.props); - - if (onAction && !isDisabled) { - buttonProps = mergeProps(buttonProps, { - onPress: () => onAction(item.key), - }); - } - - // If button text is hidden, we need to show it as a tooltip instead, so - // go find the text element in the DOM after rendering. - let textId = useId(); - let kbdId = useId(); - let [textContent, setTextContent] = useState(''); - let [kbdContent, setKbdContent] = useState(''); - useLayoutEffect(() => { - if (hideButtonText) { - setTextContent(document.getElementById(textId)?.textContent); - setKbdContent(document.getElementById(kbdId)?.textContent); - } - }, [hideButtonText, item.rendered, textId, kbdId]); - - let button = ( - // Use a PressResponder to send DOM props through. - // Button doesn't allow overriding the role by default. - - - , + node: Node + ) { + let context = useContext(ActionGroupContext); + if (!context) return null; + let id = node.key; + let textValue = node.textValue || undefined; + let isDisabled = + context.isDisabled || context.disabledKeys.has(id) || props.isDisabled; + let isSelected = context.selectedKeys.has(id); + let sharedProps = { + 'aria-label': context.hideButtonText ? textValue : undefined, + isDisabled, + prominence: context.prominence, + UNSAFE_className: context.hideButtonText + ? css({ + [actionButtonClassList.selector('text', 'descendant')]: { + display: 'none', }, - }} + }) + : undefined, + } as const; + let button = + context.selectionMode === 'none' ? ( + context.toggle(id)} > - - {item.rendered} - - - - - ); - - if (hideButtonText && textContent) { - button = ( - + {props.children} + + ) : ( + context.toggle(id)} + > + {props.children} + + ); + return context.hideButtonText && textValue ? ( + {button} - - {kbdContent ? ( - <> - {textContent} - {kbdContent} - - ) : ( - textContent - )} - + {textValue} + ) : ( + button ); } - - if (item.wrapper) { - button = item.wrapper(button); - } - - return button; -} - -interface ActionGroupMenuProps extends AriaLabelingProps { - hideButtonText?: boolean; - isDisabled?: boolean; - isOnlyItem?: boolean; - items: Node[]; - onAction?: (key: string | number) => void; - orientation?: 'horizontal' | 'vertical'; - prominence?: 'low' | 'default'; - state: ListState; - summaryIcon?: ReactNode; -} - -function ActionGroupMenu({ - hideButtonText, - isDisabled, - isOnlyItem, - items, - onAction, - orientation, - prominence, - state, - summaryIcon, - ...otherProps -}: ActionGroupMenuProps) { - // Use the key of the first item within the menu as the key of the button. - // The key must actually exist in the collection for focus to work correctly. - let key = items[0].key; - let { buttonProps } = useActionGroupItem({ key }, state); - - // The menu button shouldn't act like an actual action group item. - delete buttonProps.onPress; - delete buttonProps.role; - delete buttonProps['aria-checked']; - - // If no aria-label or aria-labelledby is given, provide a default one. - let ariaLabel = - otherProps['aria-label'] || - (otherProps['aria-labelledby'] ? undefined : '…'); - let ariaLabelledby = otherProps['aria-labelledby']; - let textId = useId(); - let id = useId(); - - // Summary icon only applies when selection is enabled. - if (state.selectionManager.selectionMode === 'none') { - summaryIcon = null; - } - - // If there is a selection, show the selected state on the menu button. - let isSelected = - state.selectionManager.selectionMode !== 'none' && - items.some(i => state.selectionManager.isSelected(i.key)); - - // If single selection and empty selection is not allowed, swap the contents of the button to the selected item (like a Picker). - if ( - !summaryIcon && - state.selectionManager.selectionMode === 'single' && - state.selectionManager.disallowEmptySelection && - state.selectionManager.firstSelectedKey != null - ) { - let selectedItem = state.collection.getItem( - state.selectionManager.firstSelectedKey - ); - if (selectedItem) { - summaryIcon = selectedItem.rendered; - if (isReactText(summaryIcon)) { - summaryIcon = {summaryIcon}; - } - ariaLabelledby = `${ariaLabelledby ?? id} ${textId}`; - } - } - - if (summaryIcon) { - // If there's a custom summary icon, also add a chevron. - summaryIcon = ( - <> - {summaryIcon} - - - ); - } - - return ( - // Use a PressResponder to send DOM props through. - - - - - {summaryIcon || } - - - - state.selectionManager.setSelectedKeys(keys)} - onAction={onAction} - > - {node => ( - - {node.rendered} - - )} - - - ); -} - -function outerWidth( - element: HTMLElement, - ignoreLeftMargin: boolean, - ignoreRightMargin: boolean -) { - let style = window.getComputedStyle(element); - return ( - element.offsetWidth + - (ignoreLeftMargin ? 0 : toNumber(style.marginLeft)) + - (ignoreRightMargin ? 0 : toNumber(style.marginRight)) - ); -} - -function outerHeight( - element: HTMLElement, - ignoreTopMargin: boolean, - ignoreBottomMargin: boolean -) { - let style = window.getComputedStyle(element); - return ( - element.offsetHeight + - (ignoreTopMargin ? 0 : toNumber(style.marginTop)) + - (ignoreBottomMargin ? 0 : toNumber(style.marginBottom)) - ); -} - -function toNumber(value: string) { - let parsed = parseInt(value, 10); - return isNaN(parsed) ? 0 : parsed; -} +); diff --git a/design-system/pkg/src/action-group/docs/index.mdoc b/design-system/pkg/src/action-group/docs/index.mdoc index 30a913587..817f62572 100644 --- a/design-system/pkg/src/action-group/docs/index.mdoc +++ b/design-system/pkg/src/action-group/docs/index.mdoc @@ -1,335 +1,122 @@ --- title: ActionGroup description: - Groups multiple related actions in a stack or row to help with arrangement, - spacing, and selection. + Groups related actions in a row or stack and optionally supports selection. category: Buttons --- ## Example -On mobile devices, the `Menu` automatically displays in a tray instead of a -popover to improve usability. - ```jsx {% live=true %} let [action, setAction] = React.useState(); return ( - - Add - Edit - Delete + + Add + Edit + Delete Action: {action} ); ``` -## Patterns - -### Collections - -`ActionGroup` implements the `react-stately` -[collection component](https://react-spectrum.adobe.com/react-stately/collections.html), -``. +## Collections -Static collections, seen in the example above, can be used when the full list of -options is known ahead of time. - -Dynamic collections, as shown below, provide an iterable list of `items` to the -component and a render function that returns `Item` elements. +`ActionGroup` uses explicit `ActionGroupItem` children. Dynamic data is +provided with `items` and a render function. ```jsx {% live=true %} let items = [ - { key: 'add', label: 'Add' }, - { key: 'edit', label: 'Edit' }, - { key: 'delete', label: 'Delete' }, + { id: 'add', label: 'Add' }, + { id: 'edit', label: 'Edit' }, + { id: 'delete', label: 'Delete' }, ]; -return ( - alert(key)}> - {item => {item.label}} - -); -``` - -### Slots - -Icons can be added as `children` of an item, to better communicate the intent of -each option. - -```jsx {% live=true %} - - - - Add - - - - Edit - - - - Delete - - -``` - -When the `buttonLabelBehavior` is set to `"hide"`, the label is hidden and -automatically shown in a tooltip. - -```jsx {% live=true %} - - - - Add - - - - Edit - - - - Delete - - -``` - -### Selection - -Enable the selection of items with the `selectionMode` prop. See the -`react-stately` -[selection docs](https://react-spectrum.adobe.com/react-stately/selection.html#selected-key-data-type) -for more information about selection. - -```jsx {% live=true %} - - Bold - Italic - Underline - Strikethrough - -``` - -Use the `selectedKeys` prop and the `onSelectionChange` handler to control the -selected state of items within the action group. - -```jsx {% live=true %} -let [selected, setSelected] = React.useState(new Set(['italic'])); -return ( - - Bold - Italic - Underline - Strikethrough - -); -``` - -Setting the `selectionMode` to `"multiple"` allows more than one selection. - -```jsx {% live=true %} -let [selected, setSelected] = React.useState(new Set(['bold', 'italic'])); return ( alert(key)} > - Bold - Italic - Underline - Strikethrough + {item => {item.label}} ); ``` -### Collapsing - -By default, items wrap to form a new line when horizontal space is limited. -However, this can cause content to shift below the group. If items should always -appear in a single line, the `overflowMode` can be set to `"collapse"`. In this -mode, when horizontal space is limited, items will collapse into a -[menu](/package/menu). The exact behavior depends on the -[selection mode](#selection). - -#### Standard - -When selection is not enabled, `ActionGroup` displays as many items as possible -and collapses the remaining items into a “more actions” menu. +## Icons ```jsx {% live=true %} - - + + Add - - + + Edit - - - - Copy - - + + Delete - + ``` -#### Multi-select +## Selection -When [selection is enabled](#selection) and space is limited, _all items_ are -collapsed into a menu together. The menu button indicates when one of the -options within it is selected by showing a highlighted state. - -A `summaryIcon` should be specified to visually communicate the purpose of the -`ActionGroup` when collapsed, and an `aria-label` should be provided to describe -the group to assistive technology. +Use `selectionMode` for toggle-button groups. Selection can be controlled +with `selectedKeys` and `onSelectionChange`, or initialized with +`defaultSelectedKeys`. ```jsx {% live=true %} } - maxWidth="scale.1200" + defaultSelectedKeys={['bold']} > - - - Bold - - - - Italic - - - - Underline - - - - Strikethrough - - -``` - -#### Single-select - -A special case where a `summaryIcon` is not needed is a single selectable -`ActionGroup` (`selectionMode="single"`) which enforces that an item is always -selected (`disallowEmptySelection`). In this case, the selected item is -displayed inside the menu button when collapsed. - -```jsx {% live=true %} - - - - Align Left - - - - Align Center - - - Align Right - - - - - Justify - - -``` - -## Props - -### Disabled - -To disable the entire group, use the `isDisabled` prop. - -```jsx {% live=true %} - - Add - Edit - Delete - -``` - -To disable individual items, a list of `disabledKeys` can be provided. - -```jsx {% live=true %} - - Add - Edit - Delete - -``` - -### Prominence - -By default, buttons have a background and border, which works well to separate -buttons from surrounding content. Low `prominence` buttons have no “chrome” -until they’re interacted with. - -```jsx {% live=true %} - - Add - Edit - Delete + Bold + Italic + Underline ``` -High prominence buttons should be used sparingly and in isolation, so they are -not supported in groups. - -### Density +## Overflow -The `density` prop affects the gap between items. In the default case the -borders of neighbouring buttons are merged, making them contiguous. +`overflowMode="wrap"` wraps actions. With `overflowMode="collapse"`, actions +that do not fit move into an explicit overflow menu. Provide a data/render +source when items need to be transformed responsively. ```jsx {% live=true %} - - Add - Edit - Delete - -``` - -Low `prominence` groups have a reduced gap between each button. +let actions = [ + { id: 'add', label: 'Add' }, + { id: 'edit', label: 'Edit' }, + { id: 'copy', label: 'Copy' }, + { id: 'delete', label: 'Delete' }, +]; -```jsx {% live=true %} - - Add - Edit - Delete - +return ( + + {item => {item.label}} + +); ``` -### Justified - -The `isJustified` prop will divide the available horizontal space evenly among -the buttons. +## Links ```jsx {% live=true %} - - Add - Edit - Delete + + + Keystatic + + + Keystone + ``` diff --git a/design-system/pkg/src/action-group/index.ts b/design-system/pkg/src/action-group/index.ts index 9f796e09b..ca472df26 100644 --- a/design-system/pkg/src/action-group/index.ts +++ b/design-system/pkg/src/action-group/index.ts @@ -1,7 +1,5 @@ 'use client'; -export { Item } from 'react-stately/Item'; +export { ActionGroup, ActionGroupItem } from './ActionGroup'; -export { ActionGroup } from './ActionGroup'; - -export type { ActionGroupProps } from './types'; +export type { ActionGroupItemProps, ActionGroupProps } from './types'; diff --git a/design-system/pkg/src/action-group/stories/ActionGroup.stories.tsx b/design-system/pkg/src/action-group/stories/ActionGroup.stories.tsx index fbcbee4de..bb5c1ab0d 100644 --- a/design-system/pkg/src/action-group/stories/ActionGroup.stories.tsx +++ b/design-system/pkg/src/action-group/stories/ActionGroup.stories.tsx @@ -18,10 +18,10 @@ import { plusIcon } from '@keystar/ui/icon/icons/plusIcon'; import { Icon } from '@keystar/ui/icon'; import { Flex } from '@keystar/ui/layout'; import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'; -import { Kbd, Text } from '@keystar/ui/typography'; +import { Text } from '@keystar/ui/typography'; import { PropsWithChildren } from 'react'; -import { ActionGroup, ActionGroupProps, Item } from '..'; +import { ActionGroup, ActionGroupProps, ActionGroupItem } from '..'; import { css } from '@keystar/ui/style'; let onSelectionChange = action('onSelectionChange'); @@ -65,9 +65,9 @@ export default { export const Default = () => ( - Add - Delete - Edit + Add + Delete + Edit ); @@ -77,9 +77,9 @@ Default.story = { export const ProminenceLow = () => ( - Add - Delete - Edit + Add + Delete + Edit ); @@ -89,15 +89,19 @@ ProminenceLow.story = { export const Links = () => ( - + Apple - - + + Google - - + + Microsoft - + ); @@ -194,9 +198,9 @@ SelectionModeMultipleCompact.story = { export const DynamicDefault = () => ( {item => ( - + {item.children} - + )} ); @@ -213,9 +217,9 @@ export const DynamicSingleSelection = () => ( items={editItems} > {item => ( - + {item.children} - + )} ); @@ -233,22 +237,22 @@ ManualTooltips.story = { export const OverflowModeWrap = () => ( - + Bold - - + + Italic - - + + Underline - - + + Strikethrough - + ); @@ -258,118 +262,56 @@ OverflowModeWrap.story = { }; export const OverflowModeCollapse = () => ( - - - - - Bold - B - - - - Italic - I - - - - Underline - - - - Strikethrough - - - -); - -OverflowModeCollapse.story = { - name: 'overflowMode: collapse', -}; - -export const CollapseWithLinks = () => ( - - - - Apple - - - Google - - - Microsoft - - - -); - -CollapseWithLinks.story = { - name: 'overflowMode: collapse + links', -}; - -export const ButtonLabelBehaviorHide = () => ( - - - Bold - B - - - - Italic - I - - - - Underline - - - - Strikethrough - + {item => ( + + + {item.children} + + )} ); -ButtonLabelBehaviorHide.story = { - name: 'buttonLabelBehavior: hide', +OverflowModeCollapse.story = { + name: 'overflowMode: collapse', }; -export const ButtonLabelBehaviorCollapse = () => ( +export const CollapseWithLinks = () => ( - - - Bold - B - - - - Italic - I - - - - Underline - - - - Strikethrough - + {item => ( + + {item.label} + + )} ); -ButtonLabelBehaviorCollapse.story = { - name: 'buttonLabelBehavior: collapse', +CollapseWithLinks.story = { + name: 'overflowMode: collapse + links', }; export const OverflowModeCollapseSelection = () => ( @@ -459,7 +401,11 @@ function renderText( {...props} > {items.map(itemProps => ( - + ))} ); @@ -478,14 +424,14 @@ function renderBoth( {items.map(itemProps => { let icon = iconMap[itemProps.children as keyof typeof iconMap]; return ( - {itemProps.children} - + ); })} @@ -505,13 +451,13 @@ function renderIcons( {items.map(itemProps => { let icon = iconMap[itemProps.children as keyof typeof iconMap]; return ( - - + ); })} @@ -532,12 +478,13 @@ function renderTooltips( let icon = iconMap[itemProps.children as keyof typeof iconMap]; return ( - - + {itemProps.children} ); @@ -550,30 +497,18 @@ function renderCollapsibleFormatting(props = {}) { return ( - - - Bold - B - - - - Italic - I - - - - Underline - - - - Strikethrough - + {item => ( + + + {item.children} + + )} ); } @@ -582,30 +517,25 @@ function renderCollapsibleAlignment(props = {}) { return ( - - - Align Left - - - - Align Center - - - Align Right - - - - - Justify - + {item => ( + + + {item.label} + + )} ); } diff --git a/design-system/pkg/src/action-group/test/ActionGroup.test.tsx b/design-system/pkg/src/action-group/test/ActionGroup.test.tsx index 610e3cb7a..ae60e4718 100644 --- a/design-system/pkg/src/action-group/test/ActionGroup.test.tsx +++ b/design-system/pkg/src/action-group/test/ActionGroup.test.tsx @@ -1,18 +1,109 @@ -import { renderWithProvider } from '#test-utils'; +import { firePress, renderWithProvider } from '#test-utils'; -import { ActionGroup, Item } from '..'; -import { expect, describe, it } from '@jest/globals'; +import { ActionGroup, ActionGroupItem } from '..'; +import { expect, describe, it, jest } from '@jest/globals'; +import { Text } from '@keystar/ui/typography'; describe('action-group/ActionGroup', () => { it('renders', () => { const { getByRole, getAllByRole } = renderWithProvider( - Child one - Child two + Child one + Child two ); expect(getByRole('toolbar')).toBeTruthy(); expect(getAllByRole('button')).toHaveLength(2); }); + + it('supports actions and selection without collection state adapters', () => { + let onAction = jest.fn(); + let onSelectionChange = jest.fn(); + let result = renderWithProvider( + + Bold + Italic + + ); + + firePress(result.getByRole('button', { name: 'Bold' })); + expect(onAction).toHaveBeenCalledWith('bold'); + expect(onSelectionChange).toHaveBeenCalledWith(new Set(['bold'])); + expect(result.getByRole('button', { name: 'Bold' })).toHaveAttribute( + 'aria-pressed', + 'true' + ); + }); + + it('keeps hidden labels accessible', () => { + let result = renderWithProvider( + + + icon + Bold + + + ); + + expect(result.getByRole('button', { name: 'Bold' })).toBeVisible(); + }); + + it('keeps disabled actions disabled after collapsing into the menu', () => { + let bounds = jest + .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect') + .mockReturnValue(new DOMRect(0, 0, 40, 40)); + let originalResizeObserver = global.ResizeObserver; + global.ResizeObserver = class { + constructor(private callback: ResizeObserverCallback) {} + observe() { + this.callback([], this as unknown as ResizeObserver); + } + disconnect() {} + unobserve() {} + } as typeof ResizeObserver; + let onAction = jest.fn(); + let consoleError = jest + .spyOn(console, 'error') + .mockImplementation(() => {}); + try { + let result = renderWithProvider( + + {item => Delete} + + ); + + firePress(result.getByRole('button', { name: 'More actions' })); + let deleteAction = result.getByRole('menuitem', { name: 'Delete' }); + expect(deleteAction).toHaveAttribute('aria-disabled', 'true'); + firePress(deleteAction); + expect(onAction).not.toHaveBeenCalled(); + expect( + consoleError.mock.calls.some(args => + args.some( + arg => + typeof arg === 'string' && + arg.includes( + 'Each child in a list should have a unique "key" prop' + ) + ) + ) + ).toBe(false); + } finally { + bounds.mockRestore(); + consoleError.mockRestore(); + global.ResizeObserver = originalResizeObserver; + } + }); }); diff --git a/design-system/pkg/src/action-group/types.ts b/design-system/pkg/src/action-group/types.ts index 63de225ba..ee6680e9a 100644 --- a/design-system/pkg/src/action-group/types.ts +++ b/design-system/pkg/src/action-group/types.ts @@ -1,41 +1,38 @@ -import { AriaActionGroupProps } from 'react-aria/private/actiongroup/useActionGroup'; -import { ReactElement } from 'react'; +import type { Key } from '@react-types/shared'; +import type { AnchorHTMLAttributes, ReactElement, ReactNode } from 'react'; -import { BaseStyleProps } from '@keystar/ui/style'; +import type { BaseStyleProps } from '@keystar/ui/style'; -export type ActionGroupProps = AriaActionGroupProps & { - /** - * Sets the amount of space between buttons. - * @default 'regular' - */ +export interface ActionGroupItemProps { + id: Key; + children: ReactNode; + isDisabled?: boolean; + textValue?: string; + href?: string; + target?: AnchorHTMLAttributes['target']; + rel?: AnchorHTMLAttributes['rel']; +} + +export interface ActionGroupProps extends BaseStyleProps { + children: ReactNode | ((item: T) => ReactNode); + items?: Iterable; density?: 'compact' | 'regular'; - /** Whether the buttons should be justified in their container. */ isJustified?: boolean; - /** - * Defines the behavior of the group when the buttons do not fit in the - * available space. When set to 'wrap', the items wrap to form a new line. - * When set to 'collapse', the items that do not fit are collapsed into a - * dropdown menu. - * @default 'wrap' - */ + isDisabled?: boolean; + disabledKeys?: Iterable; + orientation?: 'horizontal' | 'vertical'; overflowMode?: 'wrap' | 'collapse'; - /** - * Defines when the text within the buttons should be hidden and only the icon - * should be shown. When set to 'hide', the text is always shown in a tooltip. - * When set to 'collapse', the text is visible if space is available, and - * hidden when space is limited. The text is always visible when the item is - * collapsed into a menu. - * @default 'show' - */ - buttonLabelBehavior?: 'show' | 'collapse' | 'hide'; - /** - * The prominence of each button in the group. - * @default 'default' - */ + buttonLabelBehavior?: 'show' | 'hide'; prominence?: 'low' | 'default'; - /** - * The icon to display in the dropdown menu trigger button when a selectable - * group is collapsed. - */ + selectionMode?: 'none' | 'single' | 'multiple'; + selectedKeys?: Iterable; + defaultSelectedKeys?: Iterable; + disallowEmptySelection?: boolean; + onSelectionChange?: (keys: Set) => void; + onAction?: (key: Key) => void; summaryIcon?: ReactElement; -} & BaseStyleProps; + /** The composite role. Use `group` when nesting within another toolbar. */ + role?: 'toolbar' | 'group'; + 'aria-label'?: string; + 'aria-labelledby'?: string; +} diff --git a/design-system/pkg/src/breadcrumbs/BreadcrumbItem.tsx b/design-system/pkg/src/breadcrumbs/BreadcrumbItem.tsx index 27d19ee01..1902a37fd 100644 --- a/design-system/pkg/src/breadcrumbs/BreadcrumbItem.tsx +++ b/design-system/pkg/src/breadcrumbs/BreadcrumbItem.tsx @@ -1,27 +1,29 @@ -import { useBreadcrumbItem } from 'react-aria/useBreadcrumbs'; -import { useLocale } from 'react-aria/I18nProvider'; -import { useHover } from 'react-aria/useHover'; -import { mergeProps } from 'react-aria/mergeProps'; -import React, { Fragment, useMemo, useRef, ElementType } from 'react'; +import { + Breadcrumb as AriaBreadcrumb, + type BreadcrumbRenderProps, +} from 'react-aria-components/Breadcrumbs'; +import { Link } from 'react-aria-components/Link'; +import { useLocale } from 'react-aria-components'; +import { + type ForwardedRef, + type ReactNode, + forwardRef, + useContext, +} from 'react'; import { Icon } from '@keystar/ui/icon'; -import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'; import { chevronLeftIcon } from '@keystar/ui/icon/icons/chevronLeftIcon'; +import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'; import { ClassList, - FocusRing, classNames, css, - toDataAttributes, tokenSchema, + useStyleProps, } from '@keystar/ui/style'; -import { BreadcrumbItemProps as _BreadcrumbItemProps } from './types'; - -type BreadcrumbItemProps = _BreadcrumbItemProps & { - /** @private internal prop for distinguishing link behaviour. */ - isMenu?: boolean; -}; +import { BreadcrumbsStyleContext } from './context'; +import type { BreadcrumbItemProps } from './types'; export const breadcrumbsClassList = new ClassList('Breadcrumbs', [ 'item', @@ -30,106 +32,94 @@ export const breadcrumbsClassList = new ClassList('Breadcrumbs', [ 'separator', ]); -export function BreadcrumbItem(props: BreadcrumbItemProps) { - let { children, isCurrent, isDisabled, isMenu, size = 'regular' } = props; - let { href, ...propsWithoutHref } = props; - +function BreadcrumbItemImpl( + props: BreadcrumbItemProps, + forwardedRef: ForwardedRef +) { + let { children, href, size: sizeProp, ...otherProps } = props; + let { size: contextSize } = useContext(BreadcrumbsStyleContext); + let size = sizeProp ?? contextSize; let { direction } = useLocale(); - let ref = useRef(null); - let ElementType: ElementType = href ? 'a' : 'span'; - let { itemProps } = useBreadcrumbItem( - { - ...propsWithoutHref, - ...(href ? { href } : {}), - elementType: ElementType, - }, - ref - ); - let { hoverProps, isHovered } = useHover(props); - let icon = useMemo(() => { - return direction === 'rtl' ? chevronLeftIcon : chevronRightIcon; - }, [direction]); - - // if this item contains a menu button, then it shouldn't be a link - if (isMenu) { - itemProps = {}; - } - + let styleProps = useStyleProps(props); return ( - - - + {states => ( + <> + + {resolveChildren(children, states)} + + {!states.isCurrent && ( + )} - > - {children} - - - {!isCurrent && ( - + )} - + ); } + +export const BreadcrumbItem = forwardRef(BreadcrumbItemImpl); + +function resolveChildren( + children: BreadcrumbItemProps['children'], + states: BreadcrumbRenderProps +): ReactNode { + return typeof children === 'function' + ? (children as (states: BreadcrumbRenderProps) => ReactNode)(states) + : children; +} diff --git a/design-system/pkg/src/breadcrumbs/Breadcrumbs.tsx b/design-system/pkg/src/breadcrumbs/Breadcrumbs.tsx index 969717b8d..eb6c3f6c1 100644 --- a/design-system/pkg/src/breadcrumbs/Breadcrumbs.tsx +++ b/design-system/pkg/src/breadcrumbs/Breadcrumbs.tsx @@ -1,265 +1,235 @@ -import { useBreadcrumbs } from 'react-aria/useBreadcrumbs'; +import { type Collection, type Key, type Node } from '@react-types/shared'; import { - useLayoutEffect, - Children, - ForwardedRef, - Key, - ReactElement, + CollectionRendererContext, + type CollectionRenderer, +} from 'react-aria-components/CollectionBuilder'; +import { Breadcrumbs as AriaBreadcrumbs } from 'react-aria-components/Breadcrumbs'; +import { + type ForwardedRef, + type ReactElement, + type RefObject, + Fragment, + createContext, forwardRef, - isValidElement, useCallback, + useContext, + useEffect, + useMemo, useRef, useState, - Ref, } from 'react'; import { useObjectRef } from 'react-aria/useObjectRef'; -import { useResizeObserver } from 'react-aria/private/utils/useResizeObserver'; -import { useValueEffect } from 'react-aria/private/utils/useValueEffect'; import { ActionButton } from '@keystar/ui/button'; -import { useProviderProps } from '@keystar/ui/core'; import { Icon } from '@keystar/ui/icon'; -import { folderClosedIcon } from '@keystar/ui/icon/icons/folderClosedIcon'; -import { folderOpenIcon } from '@keystar/ui/icon/icons/folderOpenIcon'; -import { Menu, MenuTrigger } from '@keystar/ui/menu'; -import { classNames, css, tokenSchema, useStyleProps } from '@keystar/ui/style'; +import { moreHorizontalIcon } from '@keystar/ui/icon/icons/moreHorizontalIcon'; +import { Menu, MenuItem, MenuTrigger } from '@keystar/ui/menu'; +import { classNames, css, useStyleProps } from '@keystar/ui/style'; -import { BreadcrumbItem, breadcrumbsClassList } from './BreadcrumbItem'; -import { BreadcrumbsProps } from './types'; -import { ItemProps } from '@react-types/shared'; +import { breadcrumbsClassList } from './BreadcrumbItem'; +import { BreadcrumbsStyleContext } from './context'; +import type { BreadcrumbsProps } from './types'; -const MIN_VISIBLE_ITEMS = 1; const MAX_VISIBLE_ITEMS = 4; -function Breadcrumbs( +const CollapseContext = createContext<{ + containerRef: RefObject; + onAction?: (key: Key) => void; + isDisabled?: boolean; +} | null>(null); + +const CollapsingCollectionRenderer: CollectionRenderer = { + CollectionRoot({ collection }) { + return ; + }, + CollectionBranch({ collection }) { + return ; + }, +}; + +function Breadcrumbs( props: BreadcrumbsProps, - ref: ForwardedRef + forwardedRef: ForwardedRef ) { - props = useProviderProps(props); - let { - children, - showRoot, - size = 'regular', - isDisabled, - onAction, - ...otherProps - } = props; - - // Not using React.Children.toArray because it mutates the key prop. - let childArray: ReactElement>[] = []; - Children.forEach(children, child => { - if (isValidElement(child)) { - childArray.push(child); - } - }); + let { size = 'regular', ...otherProps } = props; + let styleProps = useStyleProps(props); + let domRef = useObjectRef(forwardedRef); - let domRef = useObjectRef(ref); - let listRef = useRef(null); - let [menuIsOpen, setMenuOpen] = useState(false); - - let [visibleItems, setVisibleItems] = useValueEffect(childArray.length); + return ( + + + + + + + + ); +} - let { navProps } = useBreadcrumbs(props); - let styleProps = useStyleProps(otherProps); +function CollapsingCollection({ + collection, +}: { + collection: Collection>; +}) { + let context = useContext(CollapseContext); + let [visibleCount, setVisibleCount] = useState(collection.size); + let needsMeasure = useRef(true); + let menuRef = useRef(null); + let items = useMemo( + () => Array.from(collection.getKeys(), key => collection.getItem(key)!), + [collection] + ); let updateOverflow = useCallback(() => { - let computeVisibleItems = (visibleItems: number): number => { - // refs may be null at runtime - let currListRef: HTMLUListElement | null = listRef.current; - if (!currListRef) { - return visibleItems; - } - - let listItems = Array.from(currListRef.children) as HTMLLIElement[]; - if (listItems.length <= 0) { - return visibleItems; - } - let containerWidth = currListRef.offsetWidth; - let isShowingMenu = childArray.length > visibleItems; - let calculatedWidth = 0; - let newVisibleItems = 0; - let maxVisibleItems = MAX_VISIBLE_ITEMS; - - if (showRoot) { - calculatedWidth += (listItems.shift() as HTMLLIElement).offsetWidth; - newVisibleItems++; - } - - if (isShowingMenu) { - calculatedWidth += (listItems.shift() as HTMLLIElement).offsetWidth; - maxVisibleItems--; - } - - if (showRoot && calculatedWidth >= containerWidth) { - newVisibleItems--; - } - - if (listItems.length > 0) { - // Ensure the last breadcrumb isn't truncated when we measure it. - let last = listItems.pop() as HTMLLIElement; - last.style.overflow = 'visible'; - - calculatedWidth += last.offsetWidth; - if (calculatedWidth < containerWidth) { - newVisibleItems++; - } - - last.style.overflow = ''; - } - - for (let breadcrumb of listItems.reverse()) { - calculatedWidth += breadcrumb.offsetWidth; - if (calculatedWidth < containerWidth) { - newVisibleItems++; - } - } - - return Math.max( - MIN_VISIBLE_ITEMS, - Math.min(maxVisibleItems, newVisibleItems) - ); - }; - - setVisibleItems(function* () { - // Update to show all items. - yield childArray.length; - - // Measure, and update to show the items that fit. - let newVisibleItems = computeVisibleItems(childArray.length); - yield newVisibleItems; - - // If the number of items is less than the number of children, - // then update again to ensure that the menu fits. - if (newVisibleItems < childArray.length && newVisibleItems > 1) { - yield computeVisibleItems(newVisibleItems); - } - }); - }, [childArray.length, setVisibleItems, showRoot]); - - useResizeObserver({ ref: domRef, onResize: updateOverflow }); - - let lastChildren = useRef(null); - useLayoutEffect(() => { - if (children !== lastChildren.current) { - lastChildren.current = children; - updateOverflow(); + let container = context?.containerRef.current; + if (!container || !container.offsetWidth) { + setVisibleCount(collection.size); + return; } - }); - - let contents = childArray; - if (childArray.length > visibleItems) { - let selectedItem = childArray[childArray.length - 1]; - let selectedKey = selectedItem.key ?? childArray.length - 1; - let onMenuAction = (key: Key) => { - // Don't fire onAction when clicking on the last item - if (key !== selectedKey && onAction) { - onAction(key); - } - }; + if (!needsMeasure.current) return; - let menuItem = ( - - - - - - - {childArray} - - - + let items = Array.from(container.children).filter( + (element): element is HTMLLIElement => + element instanceof HTMLLIElement && element.hasAttribute('data-rac') ); + if (items.length !== collection.size) return; + + let itemWidths = items.map(item => item.offsetWidth); + let menuWidth = menuRef.current?.offsetWidth; + if (!menuWidth) return; + + let gap = Number.parseFloat(getComputedStyle(container).gap) || 0; + let allWidth = itemWidths.reduce((sum, width) => sum + width, 0); + if ( + collection.size <= MAX_VISIBLE_ITEMS && + allWidth + gap * Math.max(0, collection.size - 1) <= container.offsetWidth + ) { + needsMeasure.current = false; + setVisibleCount(collection.size); + return; + } - contents = [menuItem]; - let breadcrumbs = [...childArray]; - let endItems = visibleItems; - if (showRoot && visibleItems > 1) { - let rootItem = breadcrumbs.shift(); - if (rootItem) { - contents.unshift(rootItem); - } - endItems--; + let available = container.offsetWidth - itemWidths[0] - menuWidth - gap * 2; + // Count the visible trailing items. The first item and the overflow menu + // are accounted for separately when rendering below. + let count = 0; + for (let width of itemWidths.slice(1).reverse()) { + if (available < width) break; + available -= width + gap; + count++; + if (count >= MAX_VISIBLE_ITEMS - 2) break; } - contents.push(...breadcrumbs.slice(-endItems)); - } + needsMeasure.current = false; + setVisibleCount(Math.max(1, count)); + }, [collection.size, context]); + + useEffect(() => { + needsMeasure.current = true; + setVisibleCount(collection.size); + }, [collection]); + + useEffect(() => { + updateOverflow(); + let container = context?.containerRef.current; + if (!container || typeof ResizeObserver === 'undefined') return; + let observer = new ResizeObserver(() => { + needsMeasure.current = true; + setVisibleCount(collection.size); + }); + observer.observe(container); + return () => observer.disconnect(); + }, [collection.size, context, updateOverflow, visibleCount]); + + useEffect(() => { + document.fonts?.ready.then(() => { + needsMeasure.current = true; + updateOverflow(); + }); + }, [updateOverflow]); - let lastIndex = contents.length - 1; - let breadcrumbItems = contents.map((child, index) => { - let isCurrent = index === lastIndex; - let key = child.key ?? index; - let onPress = () => { - if (onAction) { - onAction(key); - } - }; + let sliceIndex = collection.size - visibleCount; + let hasOverflow = visibleCount < collection.size && collection.size > 2; + let overflowItems = hasOverflow ? items.slice(1, sliceIndex) : []; - return ( + return ( + <> - ); - }); - - return ( - + ); } -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref - -/** - * Breadcrumbs show hierarchy and navigational context for a user's location - * within an application. - */ -const _Breadcrumbs: ( - props: BreadcrumbsProps & { ref?: Ref } -) => ReactElement = forwardRef(Breadcrumbs) as any; +const _Breadcrumbs = forwardRef(Breadcrumbs) as ( + props: BreadcrumbsProps & { ref?: ForwardedRef } +) => ReactElement; export { _Breadcrumbs as Breadcrumbs }; diff --git a/design-system/pkg/src/breadcrumbs/context.ts b/design-system/pkg/src/breadcrumbs/context.ts new file mode 100644 index 000000000..b04a915f7 --- /dev/null +++ b/design-system/pkg/src/breadcrumbs/context.ts @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const BreadcrumbsStyleContext = createContext({ size: 'regular' }); diff --git a/design-system/pkg/src/breadcrumbs/docs/index.mdoc b/design-system/pkg/src/breadcrumbs/docs/index.mdoc index 47676affc..11e6ca9a1 100644 --- a/design-system/pkg/src/breadcrumbs/docs/index.mdoc +++ b/design-system/pkg/src/breadcrumbs/docs/index.mdoc @@ -9,131 +9,51 @@ category: Navigation ## Example ```jsx {% live=true %} - - Dashboard - Posts - Some post title + + Dashboard + Posts + Some post title ``` -## Patterns +## Collections -### Collections - -Breadcrumbs implements `react-stately` -[collection components](https://react-spectrum.adobe.com/react-stately/collections.html), -accepting only static children. - -`Breadcrumbs` accepts `` elements as children, each with a `key` prop, -which is passed to the `onAction` handler to identify the selected item. +`Breadcrumbs` accepts explicit `BreadcrumbItem` children. It supports both +static composition and the React Aria Components dynamic collection API. ```jsx {% live=true %} let items = [ - { key: 'dashboard', label: 'Dashboard' }, - { key: 'posts', label: 'Posts' }, - { key: 'some-post-title', label: 'Some post title' }, + { id: 'dashboard', label: 'Dashboard', href: '/' }, + { id: 'posts', label: 'Posts', href: '/posts' }, + { id: 'current', label: 'Some post title' }, ]; -let [itemKey, setItemKey] = React.useState(); return ( - - - {items.map(item => ( - {item.label} - ))} - - Last key: {itemKey} - + + {item => ( + {item.label} + )} + ); ``` -### Links - -By default, interacting with an item in Breadcrumbs triggers `onAction`. Items -may also be links to another page or website. This can be achieved by passing -an `href` prop to the `` component. - -```jsx {% live=true %} - - Home - Breadcrumbs - -``` - -#### Client-side routing - -The `` component works with frameworks and client-side routers like -[Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). -As with other components that support links, this works via the -[Provider](/package/core#provider) component at the root of your app. See the -[client-side routing](/package/core#client-side-routing) section to learn how -to set this up. - -### Overflow - -Breadcrumbs collapses items into a menu when space is limited. It will only show -a maximum of 4 visible items including the root and menu button, if either are -visible. Note that the last breadcrumb item will automatically truncate with an -ellipsis instead of collapsing into the menu. - -Resize your browser window to see the above behavior in the examples below. - -```jsx {% live=true %} - - Home - Products - Tools - Power Tools - Drills - Impact Drill Drivers - -``` - -If the root item cannot be rendered in the available horizontal space, it will -be collapsed into the menu regardless of `showRoot`. +The final item is the current page. Its `href` is omitted from the rendered +link and `aria-current="page"` is applied automatically. -```jsx {% live=true %} - - Home - Products - Tools - Power Tools - Drills - Impact Drill Drivers - -``` +## Client-side routing -## Props +`BreadcrumbItem` works with frameworks and client-side routers through the +[Provider](/package/core#provider) at the root of your application. See +[client-side routing](/package/core#client-side-routing) for configuration. -### Disabled +## Sizes -Breadcrumbs in a disabled state shows items, but indicates that navigation is -not available. This can be used to maintain layout continuity. +Use the `size` prop on `Breadcrumbs` to set the text size for all items. An +individual `BreadcrumbItem` can override it. ```jsx {% live=true %} - - Dashboard - Posts - Some post title + + Home + Breadcrumbs ``` - -### Size - -Breadcrumbs accept a `size` prop, which aligns with the -[Text](/package/typography/text) component. - -```jsx {% live=true %} - - - Dashboard - Posts - Some post title - - - Dashboard - Posts - Some post title - - -``` diff --git a/design-system/pkg/src/breadcrumbs/index.ts b/design-system/pkg/src/breadcrumbs/index.ts index a3a865fb8..7f8b4817a 100644 --- a/design-system/pkg/src/breadcrumbs/index.ts +++ b/design-system/pkg/src/breadcrumbs/index.ts @@ -1,7 +1,6 @@ 'use client'; -export { Item } from 'react-stately/Item'; - export { Breadcrumbs } from './Breadcrumbs'; +export { BreadcrumbItem } from './BreadcrumbItem'; -export type { BreadcrumbsProps } from './types'; +export type { BreadcrumbItemProps, BreadcrumbsProps } from './types'; diff --git a/design-system/pkg/src/breadcrumbs/stories/Breadcrumbs.stories.tsx b/design-system/pkg/src/breadcrumbs/stories/Breadcrumbs.stories.tsx index da40c04e6..0039ae5b2 100644 --- a/design-system/pkg/src/breadcrumbs/stories/Breadcrumbs.stories.tsx +++ b/design-system/pkg/src/breadcrumbs/stories/Breadcrumbs.stories.tsx @@ -1,7 +1,7 @@ import { Box, VStack } from '@keystar/ui/layout'; import { StoryFn, StoryObj, action } from '@keystar/ui-storybook'; -import { Breadcrumbs, BreadcrumbsProps, Item } from '..'; +import { Breadcrumbs, BreadcrumbsProps, BreadcrumbItem } from '..'; import { ReactNode } from 'react'; export type BreadcrumbsStory = StoryObj; @@ -44,9 +44,9 @@ export const Sizes = () => ( {sizes.map(size => ( - Size: {size} - Second - Third + Size: {size} + Second + Third ))} @@ -54,23 +54,27 @@ export const Sizes = () => ( export const ManyItems = () => ( - Home - Products - Tools - Power Tools - Drills - Impact Drill Drivers + Home + Products + Tools + Power Tools + Drills + + Impact Drill Drivers + ); export const ShowRoot = () => ( - - Home - Products - Tools - Power Tools - Drills - Impact Drill Drivers + + Home + Products + Tools + Power Tools + Drills + + Impact Drill Drivers + ); @@ -86,26 +90,28 @@ export const Resizable = () => ( }} > - First item with long text - Second item with long text - Third item with long text + First item with long text + Second item with long text + Third item with long text ); export const SingleItem = () => ( - Dashboard + Dashboard ); export const Links = () => ( - Example.com - Foo - Bar - Baz - Qux + Example.com + Foo + Bar + Baz + + Qux + ); @@ -113,12 +119,14 @@ type Render = (() => ReactNode) & { storyName?: string; }; -function render(props: Partial> = {}): Render { +function render( + props: Partial> = {} +): Render { return () => ( - Dashboard - Posts - Some post title + Dashboard + Posts + Some post title ); } diff --git a/design-system/pkg/src/breadcrumbs/test/Breadcrumbs.test.tsx b/design-system/pkg/src/breadcrumbs/test/Breadcrumbs.test.tsx index 19bc4f2ca..6dcebe8e2 100644 --- a/design-system/pkg/src/breadcrumbs/test/Breadcrumbs.test.tsx +++ b/design-system/pkg/src/breadcrumbs/test/Breadcrumbs.test.tsx @@ -1,216 +1,110 @@ -import { beforeEach, expect, describe, it, jest } from '@jest/globals'; +import { describe, expect, it, jest } from '@jest/globals'; -import { Breadcrumbs, Item } from '..'; -import { firePress, renderWithProvider, within } from '#test-utils'; +import { renderWithProvider } from '#test-utils'; +import { BreadcrumbItem, Breadcrumbs } from '..'; describe('breadcrumbs/Breadcrumbs', () => { - beforeEach(() => { - // avoid issues when measuring the width of the breadcrumbs - jest - .spyOn(HTMLElement.prototype, 'offsetWidth', 'get') - .mockImplementation(function () { - // @ts-expect-error - if (this instanceof HTMLUListElement) { - return 500; - } - - return 100; - }); - }); - - it('handles defaults', function () { - let { getByLabelText } = renderWithProvider( - - Folder 1 - - ); - - let breadcrumbs = getByLabelText('breadcrumbs-test'); - expect(breadcrumbs).toHaveAttribute('id', 'breadcrumbs-id'); - }); - - it('handles multiple items', () => { - let { getByText } = renderWithProvider( - - Folder 1 - Folder 2 - Folder 3 - - ); - let item1 = getByText('Folder 1'); - expect(item1.tabIndex).toBe(0); - expect(item1).not.toHaveAttribute('aria-current'); - let item2 = getByText('Folder 2'); - expect(item2.tabIndex).toBe(0); - expect(item2).not.toHaveAttribute('aria-current'); - let item3 = getByText('Folder 3'); - expect(item3.tabIndex).toBe(-1); - expect(item3).toHaveAttribute('aria-current', 'page'); - }); - - it('handles single item and showRoot', () => { - let { getByText } = renderWithProvider( - - Folder 1 - - ); - let item = getByText('Folder 1'); - expect(item).toBeTruthy(); - expect(item.tabIndex).toBe(-1); - }); - - it('shows four items with no menu', () => { - let { getByText, getByRole } = renderWithProvider( - - Folder 1 - Folder 2 - Folder 3 - Folder 4 - - ); - let { children } = getByRole('list'); - expect(within(children[0] as HTMLElement).queryByRole('button')).toBeNull(); - expect(getByText('Folder 1')).toBeTruthy(); - expect(getByText('Folder 2')).toBeTruthy(); - expect(getByText('Folder 3')).toBeTruthy(); - expect(getByText('Folder 4')).toBeTruthy(); - }); - - it('shows a maximum of 4 items', () => { - let { getByText, getByRole } = renderWithProvider( - - Folder 1 - Folder 2 - Folder 3 - Folder 4 - Folder 5 + it('renders an accessible static collection', () => { + let result = renderWithProvider( + + Folder 1 + Folder 2 + Folder 3 ); - let { children } = getByRole('list'); - expect(within(children[0] as HTMLElement).getByRole('button')).toBeTruthy(); - expect(() => getByText('Folder 1')).toThrow(); - expect(() => getByText('Folder 2')).toThrow(); - expect(getByText('Folder 3')).toBeTruthy(); - expect(getByText('Folder 4')).toBeTruthy(); - expect(getByText('Folder 5')).toBeTruthy(); - }); - it('shows a maximum of 4 items with showRoot', () => { - let { getByText, getByRole } = renderWithProvider( - - Folder 1 - Folder 2 - Folder 3 - Folder 4 - Folder 5 - + let list = result.getByRole('list', { name: 'Breadcrumbs' }); + expect(list).toHaveAttribute('id', 'breadcrumbs-id'); + expect(result.getAllByRole('listitem')).toHaveLength(3); + expect(result.getByText('Folder 1')).toHaveAttribute('href', '/one'); + expect(result.getByText('Folder 2')).toHaveAttribute('href', '/one/two'); + expect(result.getByText('Folder 3')).toHaveAttribute( + 'aria-current', + 'page' ); - let { children } = getByRole('list'); - expect(getByText('Folder 1')).toBeTruthy(); - expect(within(children[1] as HTMLElement).getByRole('button')).toBeTruthy(); - expect(() => getByText('Folder 2')).toThrow(); - expect(() => getByText('Folder 3')).toThrow(); - expect(getByText('Folder 4')).toBeTruthy(); - expect(getByText('Folder 5')).toBeTruthy(); + expect(result.getByText('Folder 3')).not.toHaveAttribute('href'); }); - it('handles isDisabled', () => { - let { getByText } = renderWithProvider( - - Folder 1 - Folder 2 + it('renders a dynamic collection', () => { + let items = [ + { id: 'one', label: 'Folder 1', href: '/one' }, + { id: 'two', label: 'Folder 2', href: '/one/two' }, + ]; + let result = renderWithProvider( + + {item => {item.label}} ); - let item1 = getByText('Folder 1'); - expect(item1).toHaveAttribute('aria-disabled', 'true'); - let item2 = getByText('Folder 2'); - expect(item2).toHaveAttribute('aria-disabled', 'true'); - }); - - it('supports aria-label', function () { - let { getByRole } = renderWithProvider( - - Folder 1 - + expect(result.getAllByRole('listitem')).toHaveLength(2); + expect(result.getByText('Folder 1')).toHaveAttribute('href', '/one'); + expect(result.getByText('Folder 2')).toHaveAttribute( + 'aria-current', + 'page' ); - let breadcrumbs = getByRole('navigation'); - expect(breadcrumbs).toHaveAttribute('aria-label', 'Test'); }); - it('supports aria-labelledby', function () { - let { getByRole } = renderWithProvider( + it('forwards accessibility and custom DOM props', () => { + let result = renderWithProvider( <> - Test - - Folder 1 + Location + Current folder + + Folder 1 ); - let breadcrumbs = getByRole('navigation'); - expect(breadcrumbs).toHaveAttribute('aria-labelledby', 'test'); - }); - it('supports aria-describedby', function () { - let { getByRole } = renderWithProvider( - <> - Test - - Folder 1 - - - ); - let breadcrumbs = getByRole('navigation'); - expect(breadcrumbs).toHaveAttribute('aria-describedby', 'test'); + let list = result.getByTestId('breadcrumbs'); + expect(list).toHaveAttribute('aria-labelledby', 'breadcrumb-label'); + expect(list).toHaveAttribute('aria-describedby', 'breadcrumb-description'); }); - it('supports custom props', function () { - let { getByRole } = renderWithProvider( - - Folder 1 + it('disables all items when the collection is disabled', () => { + let result = renderWithProvider( + + Folder 1 + Folder 2 ); - let breadcrumbs = getByRole('navigation'); - expect(breadcrumbs).toHaveAttribute('data-testid', 'test'); + + for (let link of result.getAllByRole('link')) { + expect(link).toHaveAttribute('aria-disabled', 'true'); + } }); - it('should support links', function () { - let { getByRole, getAllByRole } = renderWithProvider( - - Example.com - Foo - Bar - Baz - Qux + it('does not pass an empty href to the rendered element', () => { + let result = renderWithProvider( + + Folder 1 ); - let links = getAllByRole('link'); - expect(links).toHaveLength(3); - expect(links[0]).toHaveAttribute('href', 'https://example.com/foo/bar'); - expect(links[1]).toHaveAttribute('href', 'https://example.com/foo/bar/baz'); - expect(links[2]).toHaveAttribute( - 'href', - 'https://example.com/foo/bar/baz/qux' - ); - - let menuButton = getByRole('button'); - firePress(menuButton); - - let menu = getByRole('menu'); - let items = within(menu).getAllByRole('menuitemradio'); - expect(items).toHaveLength(5); - expect(items[0].tagName).toBe('A'); - expect(items[0]).toHaveAttribute('href', 'https://example.com'); + expect(result.getByText('Folder 1')).not.toHaveAttribute('href'); }); - it('does not pass an empty href to the rendered element', function () { - let { getByText } = renderWithProvider( - - Folder 1 + it('collapses intermediate breadcrumbs when space is limited', () => { + let width = jest + .spyOn(window.HTMLElement.prototype, 'offsetWidth', 'get') + .mockImplementation(function (this: HTMLElement) { + return this.tagName === 'OL' ? 80 : 30; + }); + let result = renderWithProvider( + + Folder 1 + Folder 2 + Folder 3 + Folder 4 + Folder 5 ); - expect(getByText('Folder 1')).not.toHaveAttribute('href'); + expect(result.getAllByRole('listitem')).toHaveLength(3); + expect(result.getByRole('button', { name: 'More breadcrumbs' })).toBeVisible(); + width.mockRestore(); }); }); diff --git a/design-system/pkg/src/breadcrumbs/types.ts b/design-system/pkg/src/breadcrumbs/types.ts index e71c21618..f6937837e 100644 --- a/design-system/pkg/src/breadcrumbs/types.ts +++ b/design-system/pkg/src/breadcrumbs/types.ts @@ -1,32 +1,22 @@ -import { - AriaBreadcrumbsProps, - BreadcrumbItemProps as ReactBreadcrumbItemProps, -} from 'react-aria/useBreadcrumbs'; -import { ItemProps } from '@react-types/shared'; -import { Key, ReactElement } from 'react'; +import type { + BreadcrumbProps as AriaBreadcrumbProps, + BreadcrumbsProps as AriaBreadcrumbsProps, +} from 'react-aria-components/Breadcrumbs'; -import { BaseStyleProps } from '@keystar/ui/style'; -import { TextProps } from '@keystar/ui/typography'; +import type { BaseStyleProps } from '@keystar/ui/style'; +import type { TextProps } from '@keystar/ui/typography'; type BreadcrumbSize = NonNullable; -export type BreadcrumbsProps = AriaBreadcrumbsProps & - BaseStyleProps & { - /** 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; - /** Whether to always show the root item if the items are collapsed. */ - showRoot?: boolean; - /** - * Size of the Breadcrumbs including spacing and layout. - * @default 'regular' - */ - size?: BreadcrumbSize; - }; +export interface BreadcrumbsProps + extends Omit, 'className' | 'style'>, + BaseStyleProps { + size?: BreadcrumbSize; +} -export type BreadcrumbItemProps = ReactBreadcrumbItemProps & { +export interface BreadcrumbItemProps + extends Omit, + BaseStyleProps { + href?: string; size?: BreadcrumbSize; -}; +} diff --git a/design-system/pkg/src/button/ActionButton.tsx b/design-system/pkg/src/button/ActionButton.tsx index a7aebe43a..c58147228 100644 --- a/design-system/pkg/src/button/ActionButton.tsx +++ b/design-system/pkg/src/button/ActionButton.tsx @@ -1,14 +1,16 @@ -import { useButton } from 'react-aria/useButton'; -import { useHover } from 'react-aria/useHover'; -import { useLink } from 'react-aria/useLink'; -import { filterDOMProps } from 'react-aria/filterDOMProps'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useObjectRef } from 'react-aria/useObjectRef'; +import { + Button as AriaButton, + type ButtonProps as AriaButtonProps, +} from 'react-aria-components/Button'; +import { + Link as AriaLink, + type LinkProps as AriaLinkProps, +} from 'react-aria-components/Link'; import { ForwardedRef, forwardRef, useMemo } from 'react'; import { useProviderProps } from '@keystar/ui/core'; import { SlotProvider, SlotContextType, useSlotProps } from '@keystar/ui/slots'; -import { FocusRing } from '@keystar/ui/style'; +import { filterStyleProps } from '@keystar/ui/style'; import { Text } from '@keystar/ui/typography'; import { isReactText } from '@keystar/ui/utils'; @@ -32,25 +34,28 @@ export const ActionButton = forwardRef(function ActionButton( props: ActionButtonProps, forwardedRef: ForwardedRef ) { - const domRef = useObjectRef(forwardedRef); + props = useProviderProps(props); + props = useSlotProps(props, 'button'); const children = useActionButtonChildren(props); if ('href' in props && props.href) { return ( - - } {...props}> - {children} - - + } + {...props} + > + {children} + ); } return ( - - } {...props}> - {children} - - + } + {...props} + > + {children} + ); }); @@ -62,25 +67,17 @@ const LinkButton = forwardRef(function LinkActionButton( props: ActionLinkElementProps, forwardedRef: ForwardedRef ) { - const { children, isDisabled, ...otherProps } = props; - - const domRef = useObjectRef(forwardedRef); - const { buttonProps, isPressed } = useButton( - { elementType: 'a', ...props }, - domRef - ); - const { linkProps } = useLink(props, domRef); - const { hoverProps, isHovered } = useHover({ isDisabled }); - const styleProps = useActionButtonStyles(props, { isHovered, isPressed }); + const { children } = props; + const styleProps = useActionButtonStyles(props); return ( - {children} - + ); }); @@ -89,24 +86,21 @@ const BaseButton = forwardRef(function BaseActionButton( props: ActionButtonElementProps, forwardedRef: ForwardedRef ) { - props = useProviderProps(props); - props = useSlotProps(props, 'button'); - - const { children, isDisabled, ...otherProps } = props; - const domRef = useObjectRef(forwardedRef); - const { buttonProps, isPressed } = useButton(props, domRef); - const { hoverProps, isHovered } = useHover({ isDisabled }); - const styleProps = useActionButtonStyles(props, { isHovered, isPressed }); + const { children } = props; + const styleProps = useActionButtonStyles(props); return ( - + ); }); diff --git a/design-system/pkg/src/button/Button.tsx b/design-system/pkg/src/button/Button.tsx index d1c325349..361f9d4de 100644 --- a/design-system/pkg/src/button/Button.tsx +++ b/design-system/pkg/src/button/Button.tsx @@ -1,19 +1,19 @@ -import { useButton } from 'react-aria/useButton'; -import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { useHover } from 'react-aria/useHover'; -import { useLink } from 'react-aria/useLink'; -import { filterDOMProps } from 'react-aria/filterDOMProps'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useObjectRef } from 'react-aria/useObjectRef'; +import { + Button as AriaButton, + type ButtonProps as AriaButtonProps, +} from 'react-aria-components/Button'; +import { + Link as AriaLink, + type LinkProps as AriaLinkProps, +} from 'react-aria-components/Link'; import { ForwardedRef, forwardRef, useEffect, useMemo, useState } from 'react'; import { useProviderProps } from '@keystar/ui/core'; import { SlotProvider, useSlotProps } from '@keystar/ui/slots'; -import { FocusRing } from '@keystar/ui/style'; +import { filterStyleProps } from '@keystar/ui/style'; import { Text } from '@keystar/ui/typography'; import { isReactText } from '@keystar/ui/utils'; -import localizedMessages from './l10n'; import { ButtonElementProps, ButtonProps, @@ -34,24 +34,25 @@ export const Button = forwardRef(function Button( props = useProviderProps(props); props = useSlotProps(props, 'button'); const children = useButtonChildren(props); - const domRef = useObjectRef(forwardedRef); if ('href' in props && props.href) { return ( - - } {...props}> - {children} - - + } + {...props} + > + {children} + ); } return ( - - } {...props}> - {children} - - + } + {...props} + > + {children} + ); }); @@ -63,25 +64,21 @@ const LinkButton = forwardRef(function Button( props: LinkElementProps, forwardedRef: ForwardedRef ) { - const { children, isDisabled, ...otherProps } = props; - - const domRef = useObjectRef(forwardedRef); - const { buttonProps, isPressed } = useButton( - { elementType: 'a', ...props }, - domRef - ); - const { linkProps } = useLink(props, domRef); - const { hoverProps, isHovered } = useHover({ isDisabled }); - const styleProps = useButtonStyles(props, { isHovered, isPressed }); + const { children } = props; + const styleProps = useButtonStyles(props); return ( - {children} - + ); }); @@ -90,19 +87,10 @@ const BaseButton = forwardRef(function Button( props: ButtonElementProps, forwardedRef: ForwardedRef ) { - props = disablePendingProps(props); - const { children, isDisabled, isPending, ...otherProps } = props; + const { children, isPending } = props; const [isProgressVisible, setIsProgressVisible] = useState(false); - const stringFormatter = useLocalizedStringFormatter(localizedMessages); - const domRef = useObjectRef(forwardedRef); - const { buttonProps, isPressed } = useButton(props, domRef); - const { hoverProps, isHovered } = useHover({ isDisabled }); - const styleProps = useButtonStyles(props, { - isHovered, - isPending: isProgressVisible, - isPressed, - }); + const styleProps = useButtonStyles(props); // wait a second before showing the progress indicator. for actions that // resolve quickly, this prevents a flash of the pending treatment. @@ -121,57 +109,30 @@ const BaseButton = forwardRef(function Button( }; }, [isPending]); - // prevent form submission when while pending - const pendingProps = isPending - ? { - onClick: (e: MouseEvent) => e.preventDefault(), - } - : { - onClick: () => {}, // satisfy TS expectations… - }; - return ( - + ); }); -// Utils -// ----------------------------------------------------------------------------- - -function disablePendingProps(props: ButtonElementProps) { - // disallow interaction while the button is pending - if (props.isPending) { - props = { ...props }; - props.onKeyDown = undefined; - props.onKeyUp = undefined; - props.onPress = undefined; - props.onPressChange = undefined; - props.onPressEnd = undefined; - props.onPressStart = undefined; - props.onPressUp = undefined; - } - - return props; -} - export const useButtonChildren = (props: CommonButtonProps) => { const { children } = props; diff --git a/design-system/pkg/src/button/ClearButton.tsx b/design-system/pkg/src/button/ClearButton.tsx index 46167d9f5..fe642f34d 100644 --- a/design-system/pkg/src/button/ClearButton.tsx +++ b/design-system/pkg/src/button/ClearButton.tsx @@ -1,7 +1,7 @@ -import { useButton } from 'react-aria/useButton'; -import { useHover } from 'react-aria/useHover'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useObjectRef } from 'react-aria/useObjectRef'; +import { + Button as AriaButton, + type ButtonProps as AriaButtonProps, +} from 'react-aria-components/Button'; import { ForwardedRef, forwardRef } from 'react'; import { xIcon } from '@keystar/ui/icon/icons/xIcon'; @@ -9,13 +9,12 @@ import { Icon } from '@keystar/ui/icon'; import { classNames, css, - FocusRing, + filterStyleProps, toDataAttributes, tokenSchema, transition, useStyleProps, } from '@keystar/ui/style'; -import { PropsWithElementType } from '@keystar/ui/utils/ts'; import { ButtonProps } from './types'; @@ -25,6 +24,7 @@ type ClearButtonProps = Omit< > & { excludeFromTabOrder?: boolean; preventFocus?: boolean; + slot?: AriaButtonProps['slot']; static?: 'dark' | 'light'; }; @@ -35,49 +35,30 @@ type ClearButtonProps = Omit< * search. */ export const ClearButton = forwardRef(function ClearButton( - props: PropsWithElementType, + props: ClearButtonProps, forwardedRef: ForwardedRef ) { - let { - autoFocus, - isDisabled, - preventFocus, - elementType = preventFocus ? 'div' : 'button', - ...otherProps - } = props; - - let domRef = useObjectRef(forwardedRef); - let { buttonProps, isPressed } = useButton({ ...props, elementType }, domRef); - let { hoverProps, isHovered } = useHover({ isDisabled }); - let styleProps = useClearButtonStyles(otherProps, { isHovered, isPressed }); + let { autoFocus, excludeFromTabOrder, preventFocus, ...otherProps } = props; - // For cases like the clear button in a search field, remove the tabIndex so - // iOS 14 with VoiceOver doesn't focus the button and hide the keyboard when - // moving the cursor over the clear button. - if (preventFocus) { - const { tabIndex, ..._buttonProps } = buttonProps; - buttonProps = _buttonProps; - } - - let ElementType = elementType; + let styleProps = useClearButtonStyles(otherProps); return ( - - - - - + event.preventDefault() : undefined} + ref={forwardedRef} + > + + ); }); -function useClearButtonStyles( - props: ClearButtonProps, - state: { isHovered: boolean; isPressed: boolean } -) { - let { isPressed, isHovered } = state; +function useClearButtonStyles(props: ClearButtonProps) { let styleProps = useStyleProps(props); const clearButtonStyles = css({ @@ -107,15 +88,15 @@ function useClearButtonStyles( easing: 'easeOut', }), }, - '&[data-focus=visible]::after': { + '&[data-focus-visible]::after': { boxShadow: `0 0 0 ${tokenSchema.size.alias.focusRing} var(--focus-ring-color)`, margin: `calc(-1 * ${tokenSchema.size.alias.focusRingGap})`, }, - '&[data-interaction=hover]': { + '&[data-hovered]': { color: tokenSchema.color.foreground.neutral, }, - '&[data-interaction=press]': { + '&[data-pressed]': { color: tokenSchema.color.foreground.neutralEmphasis, }, '&:disabled, &[aria-disabled]': { @@ -126,10 +107,10 @@ function useClearButtonStyles( '&[data-static=light]': { color: '#fff', - '&[data-interaction=hover], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#ffffff1a', }, - '&[data-interaction=press]': { + '&[data-pressed]': { backgroundColor: '#ffffff26', }, '&:disabled, &[aria-disabled]': { @@ -140,10 +121,10 @@ function useClearButtonStyles( '&[data-static=dark]': { color: '#000', - '&[data-interaction=hover], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#0000001a', }, - '&[data-interaction=press]': { + '&[data-pressed]': { backgroundColor: '#00000026', }, '&:disabled, &[aria-disabled]': { @@ -156,7 +137,6 @@ function useClearButtonStyles( ...styleProps, ...toDataAttributes({ static: props.static, - interaction: isPressed ? 'press' : isHovered ? 'hover' : undefined, }), className: classNames(clearButtonStyles, styleProps.className), }; diff --git a/design-system/pkg/src/button/FieldButton.tsx b/design-system/pkg/src/button/FieldButton.tsx index 2cfd36c6f..fe1efb5c8 100644 --- a/design-system/pkg/src/button/FieldButton.tsx +++ b/design-system/pkg/src/button/FieldButton.tsx @@ -1,7 +1,7 @@ -import { useButton } from 'react-aria/useButton'; -import { useHover } from 'react-aria/useHover'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useObjectRef } from 'react-aria/useObjectRef'; +import { + Button as AriaButton, + type ButtonProps as AriaButtonProps, +} from 'react-aria-components/Button'; import { ForwardedRef, forwardRef, @@ -11,8 +11,7 @@ import { } from 'react'; import { useSlotProps } from '@keystar/ui/slots'; -import { FocusRing, classNames, css } from '@keystar/ui/style'; -import { PropsWithElementType } from '@keystar/ui/utils/ts'; +import { classNames, css, filterStyleProps } from '@keystar/ui/style'; import { FieldButtonProps } from './types'; import { useActionButtonStyles } from './useActionButtonStyles'; @@ -22,59 +21,44 @@ import { useActionButtonChildren } from './ActionButton'; export const FieldButton: ForwardRefExoticComponent< FieldButtonProps & { ref?: Ref } > = forwardRef(function FieldButton( - props: PropsWithElementType, + props: FieldButtonProps, forwardedRef: ForwardedRef ) { props = useSlotProps(props, 'button'); - let { - elementType: ElementType = 'button', - isDisabled, - autoFocus, - isActive, - } = props; - let domRef = useObjectRef(forwardedRef); - let { buttonProps, isPressed } = useButton(props, domRef); - let { hoverProps, isHovered } = useHover({ isDisabled }); - let { children, styleProps } = useFieldButton(props, { - isHovered, - isPressed: isActive ?? isPressed, - }); + let { isActive } = props; + let { children, styleProps } = useFieldButton(props); return ( - - - {children} - - + + {children} + ); }); // Utils // ----------------------------------------------------------------------------- -type FieldButtonState = { - isHovered: boolean; - isPressed: boolean; -}; - -export function useFieldButton( - props: FieldButtonProps, - state: FieldButtonState -) { - let { isHovered, isPressed } = state; - const styleProps = useActionButtonStyles(props, { isHovered, isPressed }); +export function useFieldButton(props: FieldButtonProps) { + const styleProps = useActionButtonStyles(props); let slots = useMemo(() => ({ text: { flex: true } }), []); let children = useActionButtonChildren(props, slots); diff --git a/design-system/pkg/src/button/ToggleButton.tsx b/design-system/pkg/src/button/ToggleButton.tsx index 67dfeb8ac..9e334602b 100644 --- a/design-system/pkg/src/button/ToggleButton.tsx +++ b/design-system/pkg/src/button/ToggleButton.tsx @@ -1,9 +1,7 @@ -import { useToggleButton } from 'react-aria/useToggleButton'; -import { useHover } from 'react-aria/useHover'; -import { filterDOMProps } from 'react-aria/filterDOMProps'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useObjectRef } from 'react-aria/useObjectRef'; -import { useToggleState } from 'react-stately/useToggleState'; +import { + ToggleButton as AriaToggleButton, + type ToggleButtonProps as AriaToggleButtonProps, +} from 'react-aria-components/ToggleButton'; import { ForwardedRef, forwardRef, @@ -13,7 +11,7 @@ import { import { useProviderProps } from '@keystar/ui/core'; import { useSlotProps } from '@keystar/ui/slots'; -import { FocusRing } from '@keystar/ui/style'; +import { filterStyleProps } from '@keystar/ui/style'; import { useActionButtonStyles } from './useActionButtonStyles'; import { ToggleButtonProps } from './types'; @@ -29,31 +27,22 @@ export const ToggleButton: ForwardRefExoticComponent< props: ToggleButtonProps, forwardedRef: ForwardedRef ) { - const { isDisabled, ...otherProps } = props; props = useProviderProps(props); props = useSlotProps(props, 'button'); const children = useActionButtonChildren(props); - const domRef = useObjectRef(forwardedRef); - const state = useToggleState(props); - const { buttonProps, isPressed } = useToggleButton(props, state, domRef); - const { hoverProps, isHovered } = useHover({ isDisabled }); - const styleProps = useActionButtonStyles(props, { - isHovered, - isPressed, - isSelected: state.isSelected, - }); + const styleProps = useActionButtonStyles(props); return ( - - - + + {children} + ); }); diff --git a/design-system/pkg/src/button/useActionButtonStyles.tsx b/design-system/pkg/src/button/useActionButtonStyles.tsx index 05fed5aba..b2ca95073 100644 --- a/design-system/pkg/src/button/useActionButtonStyles.tsx +++ b/design-system/pkg/src/button/useActionButtonStyles.tsx @@ -10,30 +10,18 @@ import { import { ActionButtonProps } from './types'; -type ButtonState = { - isHovered: boolean; - isPressed: boolean; - isSelected?: boolean; -}; - export const actionButtonClassList = new ClassList('ActionButton', [ 'icon', 'text', ]); -export function useActionButtonStyles( - props: ActionButtonProps, - state: ButtonState -) { +export function useActionButtonStyles(props: ActionButtonProps) { const { prominence = 'default' } = props; - const { isHovered, isPressed } = state; - const isSelected = - ('isSelected' in props && props.isSelected) || state.isSelected; + const isSelected = 'isSelected' in props && props.isSelected; const styleProps = useStyleProps(props); return { ...toDataAttributes({ - interaction: isPressed ? 'press' : isHovered ? 'hover' : undefined, prominence: prominence === 'default' ? undefined : prominence, selected: isSelected || undefined, static: props.static, @@ -92,7 +80,7 @@ export function useActionButtonStyles( easing: 'easeOut', }), }, - '&[data-focus=visible]::after': { + '&[data-focus-visible]::after': { boxShadow: `0 0 0 ${tokenSchema.size.alias.focusRing} var(--focus-ring-color)`, }, @@ -105,13 +93,13 @@ export function useActionButtonStyles( color: tokenSchema.color.alias.foregroundIdle, // interactions - '&[data-interaction=hover]': { + '&[data-hovered]': { backgroundColor: tokenSchema.color.alias.backgroundHovered, borderColor: tokenSchema.color.alias.borderHovered, // boxShadow: `${tokenSchema.size.shadow.small} ${tokenSchema.color.shadow.regular}`, color: tokenSchema.color.alias.foregroundHovered, }, - '&[data-interaction=press]': { + '&[data-pressed], &[data-active]': { backgroundColor: tokenSchema.color.alias.backgroundPressed, borderColor: tokenSchema.color.alias.borderPressed, color: tokenSchema.color.alias.foregroundPressed, @@ -123,11 +111,11 @@ export function useActionButtonStyles( borderColor: tokenSchema.color.foreground.neutralSecondary, color: tokenSchema.color.foreground.inverse, - '&[data-interaction=hover]': { + '&[data-hovered]': { backgroundColor: tokenSchema.color.foreground.neutral, borderColor: tokenSchema.color.foreground.neutral, }, - '&[data-interaction=press]': { + '&[data-pressed], &[data-active]': { backgroundColor: tokenSchema.color.foreground.neutralEmphasis, borderColor: tokenSchema.color.foreground.neutralEmphasis, }, @@ -146,11 +134,11 @@ export function useActionButtonStyles( borderColor: '#fff6', color: '#fff', - '&[data-interaction=hover], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#ffffff1a', borderColor: '#ffffff8c', }, - '&[data-interaction=press]': { + '&[data-pressed], &[data-active]': { backgroundColor: '#ffffff26', borderColor: '#ffffffb3', }, @@ -163,11 +151,11 @@ export function useActionButtonStyles( borderColor: '#0006', color: '#000', - '&[data-interaction=hover], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#0000001a', borderColor: '#0000008c', }, - '&[data-interaction=press]': { + '&[data-pressed], &[data-active]': { backgroundColor: '#00000026', borderColor: '#000000b3', }, @@ -183,11 +171,11 @@ export function useActionButtonStyles( color: tokenSchema.color.foreground.neutral, // interactions - '&[data-interaction=hover]': { + '&[data-hovered]': { backgroundColor: tokenSchema.color.alias.backgroundHovered, color: tokenSchema.color.alias.foregroundHovered, }, - '&[data-interaction=press]': { + '&[data-pressed], &[data-active]': { backgroundColor: tokenSchema.color.alias.backgroundPressed, color: tokenSchema.color.alias.foregroundPressed, }, @@ -198,11 +186,11 @@ export function useActionButtonStyles( borderColor: tokenSchema.color.foreground.neutralSecondary, color: tokenSchema.color.foreground.inverse, - '&[data-interaction=hover]': { + '&[data-hovered]': { backgroundColor: tokenSchema.color.foreground.neutral, borderColor: tokenSchema.color.foreground.neutral, }, - '&[data-interaction=press]': { + '&[data-pressed], &[data-active]': { backgroundColor: tokenSchema.color.foreground.neutralEmphasis, borderColor: tokenSchema.color.foreground.neutralEmphasis, }, @@ -216,10 +204,10 @@ export function useActionButtonStyles( '&[data-static=light]': { color: '#fff', - '&[data-interaction=hover], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#ffffff1a', }, - '&[data-interaction=press]': { + '&[data-pressed], &[data-active]': { backgroundColor: '#ffffff26', }, '&:disabled, &[aria-disabled]': { @@ -229,10 +217,10 @@ export function useActionButtonStyles( '&[data-static=dark]': { color: '#000', - '&[data-interaction=hover], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#0000001a', }, - '&[data-interaction=press]': { + '&[data-pressed], &[data-active]': { backgroundColor: '#00000026', }, '&:disabled, &[aria-disabled]': { diff --git a/design-system/pkg/src/button/useButtonStyles.tsx b/design-system/pkg/src/button/useButtonStyles.tsx index 0a13aab07..b911f6f31 100644 --- a/design-system/pkg/src/button/useButtonStyles.tsx +++ b/design-system/pkg/src/button/useButtonStyles.tsx @@ -10,28 +10,17 @@ import { import { ButtonProps } from './types'; -type ButtonState = { - isHovered: boolean; - isPressed: boolean; - isPending?: boolean; - isSelected?: boolean; -}; - export const buttonClassList = new ClassList('Button', ['icon', 'text']); -export function useButtonStyles(props: ButtonProps, state: ButtonState) { +export function useButtonStyles(props: ButtonProps) { const { prominence = 'default', tone = prominence === 'high' ? 'accent' : 'neutral', } = props; - const { isHovered, isPending, isPressed } = state; const styleProps = useStyleProps(props); return { ...toDataAttributes({ - hovered: isHovered || undefined, - pending: isPending || undefined, - pressed: isPressed || undefined, prominence: prominence === 'default' ? undefined : prominence, tone: tone, static: props.static, @@ -73,7 +62,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { fontWeight: 'inherit', marginInline: tokenSchema.size.space.regular, }, - [`&[data-pending] ${buttonClassList.selector('text')}`]: { + [`&[data-progress-visible] ${buttonClassList.selector('text')}`]: { opacity: 0, }, @@ -83,7 +72,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { height: tokenSchema.size.scale[225], width: tokenSchema.size.scale[225], }, - [`&[data-pending] ${buttonClassList.selector('icon')}`]: { + [`&[data-progress-visible] ${buttonClassList.selector('icon')}`]: { opacity: 0, }, @@ -105,7 +94,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { easing: 'easeOut', }), }, - '&[data-focus=visible]::after': { + '&[data-focus-visible]::after': { boxShadow: `0 0 0 ${tokenSchema.size.alias.focusRing} var(--focus-ring-color)`, margin: `calc(-1 * ${tokenSchema.size.alias.focusRingGap})`, }, @@ -115,7 +104,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { backgroundColor: tokenSchema.color.scale.slate4, color: tokenSchema.color.foreground.neutralEmphasis, - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: tokenSchema.color.scale.slate5, }, '&[data-pressed]': { @@ -141,7 +130,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { backgroundColor: '#ffffff12', color: '#fff', - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#ffffff1a', }, '&[data-pressed]': { @@ -156,7 +145,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { backgroundColor: '#00000012', color: '#000', - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#0000001a', }, '&[data-pressed]': { @@ -174,7 +163,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { backgroundColor: tokenSchema.color.scale.slate10, color: tokenSchema.color.foreground.inverse, - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: tokenSchema.color.scale.slate11, }, '&[data-pressed]': { @@ -186,7 +175,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { backgroundColor: tokenSchema.color.scale.indigo9, color: tokenSchema.color.foreground.onEmphasis, - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: tokenSchema.color.scale.indigo10, }, '&[data-pressed]': { @@ -197,7 +186,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { backgroundColor: tokenSchema.color.scale.red9, color: tokenSchema.color.foreground.onEmphasis, - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: tokenSchema.color.scale.red10, }, '&[data-pressed]': { @@ -216,7 +205,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { backgroundColor: '#ffffffe6', color: '#000', - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#fff', }, '&[data-pressed]': { @@ -231,7 +220,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { backgroundColor: '#000000e6', color: '#fff', - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#000', }, '&[data-pressed]': { @@ -249,7 +238,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { color: tokenSchema.color.foreground.neutral, // neutral interactions - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: tokenSchema.color.alias.backgroundHovered, color: tokenSchema.color.foreground.neutralEmphasis, }, @@ -260,7 +249,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { // tones '&[data-tone=accent]': { color: tokenSchema.color.foreground.accent, - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: tokenSchema.color.scale.indigo3, }, '&[data-pressed]': { @@ -269,7 +258,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { }, '&[data-tone=critical]': { color: tokenSchema.color.foreground.critical, - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: tokenSchema.color.scale.red3, }, '&[data-pressed]': { @@ -286,7 +275,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { '&[data-static=light]': { color: '#fff', - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#ffffff1a', }, '&[data-pressed]': { @@ -299,7 +288,7 @@ export function useButtonStyles(props: ButtonProps, state: ButtonState) { '&[data-static=dark]': { color: '#000', - '&[data-hovered], &[data-focus="visible"]': { + '&[data-hovered], &[data-focus-visible]': { backgroundColor: '#0000001a', }, '&[data-pressed]': { diff --git a/design-system/pkg/src/calendar/Calendar.tsx b/design-system/pkg/src/calendar/Calendar.tsx index 1d8942250..539593da5 100644 --- a/design-system/pkg/src/calendar/Calendar.tsx +++ b/design-system/pkg/src/calendar/Calendar.tsx @@ -1,20 +1,21 @@ -import { createCalendar } from '@internationalized/date'; -import { useCalendar } from 'react-aria/useCalendar'; -import { useLocale } from 'react-aria/I18nProvider'; -import { useObjectRef } from 'react-aria/useObjectRef'; -import { useCalendarState, DateValue } from 'react-stately/useCalendarState'; - import { - forwardRef, + Calendar as AriaCalendar, + type CalendarProps as AriaCalendarProps, + type CalendarState, + type DateValue, +} from 'react-aria-components/Calendar'; +import { ForwardedRef, ReactElement, + forwardRef, useImperativeHandle, - useMemo, + useRef, } from 'react'; import { useProviderProps } from '@keystar/ui/core'; +import { classNames, filterStyleProps, useStyleProps } from '@keystar/ui/style'; -import { CalendarBase } from './CalendarBase'; +import { CalendarBase, calendarRootClassName } from './CalendarBase'; import { CalendarProps } from './types'; function Calendar( @@ -22,51 +23,36 @@ function Calendar( forwardedRef: ForwardedRef ) { props = useProviderProps(props); - let { visibleMonths = 1 } = props; - visibleMonths = Math.max(visibleMonths, 1); - let visibleDuration = useMemo( - () => ({ months: visibleMonths }), - [visibleMonths] - ); - let { locale } = useLocale(); - let state = useCalendarState({ - ...props, - locale, - visibleDuration, - createCalendar, - }); + let visibleMonths = Math.max(props.visibleMonths ?? 1, 1); + let { visibleMonths: _visibleMonths, ...otherProps } = props; + let domRef = useRef(null); + let stateRef = useRef | null>(null); + let styleProps = useStyleProps(props); - let domRef = useObjectRef(forwardedRef); - // @ts-expect-error FIXME: not sure how to properly resolve this type issue useImperativeHandle(forwardedRef, () => ({ - ...domRef.current, + ...domRef.current!, focus() { - state.setFocused(true); + stateRef.current?.setFocused(true); }, })); - let { calendarProps, prevButtonProps, nextButtonProps } = useCalendar( - props, - state - ); - return ( - + )} + ref={domRef} + visibleDuration={{ months: visibleMonths }} + className={classNames(calendarRootClassName, styleProps.className)} + style={styleProps.style} + > + {({ state }) => { + stateRef.current = state; + return ; + }} + ); } -/** - * Calendars display a grid of days in one or more months and allow users to - * select a single date. - */ +/** Calendars display one or more months and allow single-date selection. */ const _Calendar = forwardRef(Calendar) as ( props: CalendarProps & { ref?: ForwardedRef } ) => ReactElement; diff --git a/design-system/pkg/src/calendar/CalendarBase.tsx b/design-system/pkg/src/calendar/CalendarBase.tsx index affdf025e..9cfbff82c 100644 --- a/design-system/pkg/src/calendar/CalendarBase.tsx +++ b/design-system/pkg/src/calendar/CalendarBase.tsx @@ -1,54 +1,40 @@ -import { AriaButtonProps } from 'react-aria/useButton'; -import { - CalendarPropsBase, - CalendarState, -} from 'react-stately/useCalendarState'; -import { RangeCalendarState } from 'react-stately/useRangeCalendarState'; -import { DOMProps } from '@react-types/shared'; import { useDateFormatter } from 'react-aria/useDateFormatter'; -import { useLocale } from 'react-aria/I18nProvider'; -import { VisuallyHidden } from 'react-aria/VisuallyHidden'; -import React, { HTMLAttributes, RefObject } from 'react'; +import { useLocale } from 'react-aria-components/I18nProvider'; +import { + Button as AriaButton, + CalendarCell, + CalendarGrid, + CalendarGridBody, + CalendarGridHeader, + CalendarHeaderCell, + type CalendarState, +} from 'react-aria-components/Calendar'; +import type { RangeCalendarState } from 'react-aria-components/RangeCalendar'; -import { ActionButton } from '@keystar/ui/button'; +import { ActionButton, type ActionButtonProps } from '@keystar/ui/button'; import { Icon } from '@keystar/ui/icon'; import { chevronLeftIcon } from '@keystar/ui/icon/icons/chevronLeftIcon'; import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'; -import { - BaseStyleProps, - classNames, - css, - tokenSchema, - useStyleProps, -} from '@keystar/ui/style'; -import { Heading } from '@keystar/ui/typography'; +import { css, tokenSchema } from '@keystar/ui/style'; +import { Heading, Text } from '@keystar/ui/typography'; -import { CalendarMonth } from './CalendarMonth'; +type CalendarBaseProps = { + state: CalendarState<'single'> | RangeCalendarState; + visibleMonths: number; +}; -interface CalendarBaseProps - extends CalendarPropsBase, - DOMProps, - BaseStyleProps { - state: T; - visibleMonths?: number; - calendarProps: HTMLAttributes; - nextButtonProps: AriaButtonProps; - prevButtonProps: AriaButtonProps; - calendarRef: RefObject; -} +export const calendarRootClassName = css({ + boxSizing: 'border-box', + maxWidth: '100%', + overflow: 'auto', + padding: `calc(${tokenSchema.size.alias.focusRing} + ${tokenSchema.size.alias.focusRingGap})`, + '--calendar-cell-width': tokenSchema.size.element.regular, + '--calendar-cell-padding': tokenSchema.size.space.xsmall, + '--calendar-width': + 'calc(var(--calendar-cell-width) * 7 + var(--calendar-cell-padding) * 12)', +}); -export function CalendarBase( - props: CalendarBaseProps -) { - let { - state, - calendarProps, - nextButtonProps, - prevButtonProps, - calendarRef: ref, - visibleMonths = 1, - } = props; - let styleProps = useCalendarStyles(props); +export function CalendarBase({ state, visibleMonths }: CalendarBaseProps) { let { direction } = useLocale(); let currentMonth = state.visibleRange.start; let monthDateFormatter = useDateFormatter({ @@ -63,142 +49,184 @@ export function CalendarBase( timeZone: state.timeZone, }); - let titles = []; - let calendars = []; - for (let i = 0; i < visibleMonths; i++) { - let d = currentMonth.add({ months: i }); - titles.push( -
- {i === 0 && ( - - - - )} - - - - {i === visibleMonths - 1 && ( - +
+ {Array.from({ length: visibleMonths }, (_, index) => { + let date = currentMonth.add({ months: index }); + return ( +
+ {index === 0 && ( + + + + )} + + {monthDateFormatter.format(date.toDate(state.timeZone))} + + {index === visibleMonths - 1 && ( + + + + )} +
+ ); + })} +
+
+ {Array.from({ length: visibleMonths }, (_, index) => ( + - - - )} + + {day => ( + + + {day} + + + )} + + + {date => ( + + {({ formattedDate }) => ( + + {formattedDate} + + )} + + )} + + + ))}
- ); - - calendars.push( - - ); - } + + ); +} +function CalendarButton({ + children, + gridArea, + slot, +}: Pick & { + slot: 'next' | 'previous'; +}) { return ( -
- {/* Add a screen reader only description of the entire visible range rather than - * a separate heading above each month grid. This is placed first in the DOM order - * so that it is the first thing a touch screen reader user encounters. - * In addition, VoiceOver on iOS does not announce the aria-label of the grid - * elements, so the aria-label of the Calendar is included here as well. */} - - {calendarProps['aria-label']} - - -
{titles}
-
{calendars}
- - {/* For touch screen readers, add a visually hidden next button after the month grid - * so it's easy to navigate after reaching the end without going all the way - * back to the start of the month. */} - -
+ )} + > + {children} + ); } -function useCalendarStyles( - props: CalendarBaseProps -) { - let styleProps = useStyleProps(props); +const cellClassName = css({ + boxSizing: 'content-box', + height: 'var(--calendar-cell-width)', + padding: 'var(--calendar-cell-padding)', + textAlign: 'center', + width: 'var(--calendar-cell-width)', +}); - let root = { - ...styleProps, - className: classNames( - css({ - boxSizing: 'border-box', - maxWidth: '100%', - overflow: 'auto', - // make space for the focus ring, so it doesn't get cropped - padding: `calc(${tokenSchema.size.alias.focusRing} + ${tokenSchema.size.alias.focusRingGap})`, - '--calendar-cell-width': tokenSchema.size.element.regular, - '--calendar-cell-padding': tokenSchema.size.space.xsmall, - '--calendar-width': - 'calc(var(--calendar-cell-width) * 7 + var(--calendar-cell-padding) * 12)', - }), - styleProps.className - ), - }; - let titles = { - className: css({ - boxSizing: 'border-box', - display: 'grid', - gap: tokenSchema.size.space.large, - gridAutoColumns: '1fr', - gridAutoFlow: 'column', - paddingInline: 'var(--calendar-cell-padding)', - width: '100%', - }), - }; - let calendars = { - className: css({ - display: 'grid', - gridAutoColumns: '1fr', - gridAutoFlow: 'column', - alignItems: 'start', - gap: tokenSchema.size.space.large, - }), - }; - let monthHeader = { - className: css({ - alignItems: 'center', - display: 'grid', - gridTemplateAreas: `"prev title next"`, - gridTemplateColumns: 'minmax(auto, 1fr) auto minmax(auto, 1fr)', - width: 'var(--calendar-width)', - }), - }; +const dayClassName = css({ + alignItems: 'center', + borderRadius: tokenSchema.size.radius.full, + color: tokenSchema.color.foreground.neutral, + cursor: 'default', + display: 'flex', + height: 'var(--calendar-cell-width)', + justifyContent: 'center', + outline: 0, + width: 'var(--calendar-cell-width)', - return { calendars, monthHeader, root, titles }; -} + '&[data-hovered]': { + backgroundColor: tokenSchema.color.alias.backgroundHovered, + }, + '&[data-pressed]': { + backgroundColor: tokenSchema.color.alias.backgroundPressed, + }, + '&[data-selected]': { + backgroundColor: tokenSchema.color.background.accentEmphasis, + color: tokenSchema.color.foreground.onEmphasis, + fontWeight: tokenSchema.typography.fontWeight.semibold, + }, + '&[data-focus-visible]': { + boxShadow: `0 0 0 ${tokenSchema.size.alias.focusRing} ${tokenSchema.color.alias.focusRing}`, + }, + '&[data-disabled], &[data-outside-month]': { + color: tokenSchema.color.alias.foregroundDisabled, + }, + '&[data-unavailable]': { + color: tokenSchema.color.foreground.critical, + textDecoration: 'line-through', + }, + '&[data-invalid][data-selected]': { + backgroundColor: tokenSchema.color.background.criticalEmphasis, + }, +}); diff --git a/design-system/pkg/src/calendar/CalendarCell.tsx b/design-system/pkg/src/calendar/CalendarCell.tsx deleted file mode 100644 index a1985bf1d..000000000 --- a/design-system/pkg/src/calendar/CalendarCell.tsx +++ /dev/null @@ -1,270 +0,0 @@ -import { - CalendarDate, - getDayOfWeek, - isSameDay, - isSameMonth, - isToday, -} from '@internationalized/date'; -import { AriaCalendarCellProps, useCalendarCell } from 'react-aria/useCalendar'; -import { useFocusRing } from 'react-aria/useFocusRing'; -import { useLocale } from 'react-aria/I18nProvider'; -import { useHover } from 'react-aria/useHover'; -import { mergeProps } from 'react-aria/mergeProps'; -import { CalendarState } from 'react-stately/useCalendarState'; -import { RangeCalendarState } from 'react-stately/useRangeCalendarState'; -import React, { useRef } from 'react'; - -import { css, toDataAttributes, tokenSchema } from '@keystar/ui/style'; -import { Text } from '@keystar/ui/typography'; - -interface CalendarCellProps extends AriaCalendarCellProps { - state: CalendarState | RangeCalendarState; - currentMonth: CalendarDate; -} - -export function CalendarCell({ - currentMonth, - state, - ...props -}: CalendarCellProps) { - let ref = useRef(null); - let { - buttonProps, - cellProps, - formattedDate, - isDisabled, - isFocused, - isInvalid, - isPressed, - isSelected, - } = useCalendarCell( - { - ...props, - isDisabled: !isSameMonth(props.date, currentMonth), - }, - state, - ref - ); - let isUnavailable = state.isCellUnavailable(props.date) && !isDisabled; - let isLastSelectedBeforeDisabled = - !isDisabled && - !isInvalid && - state.isCellUnavailable(props.date.add({ days: 1 })); - let isFirstSelectedAfterDisabled = - !isDisabled && - !isInvalid && - state.isCellUnavailable(props.date.subtract({ days: 1 })); - let highlightedRange = 'highlightedRange' in state && state.highlightedRange; - let isSelectionStart = - isSelected && - highlightedRange && - isSameDay(props.date, highlightedRange.start); - let isSelectionEnd = - isSelected && - highlightedRange && - isSameDay(props.date, highlightedRange.end); - let { locale } = useLocale(); - let dayOfWeek = getDayOfWeek(props.date, locale); - let isRangeStart = - isSelected && - (isFirstSelectedAfterDisabled || dayOfWeek === 0 || props.date.day === 1); - let isRangeEnd = - isSelected && - (isLastSelectedBeforeDisabled || - dayOfWeek === 6 || - props.date.day === currentMonth.calendar.getDaysInMonth(currentMonth)); - let { focusProps, isFocusVisible } = useFocusRing(); - let { hoverProps, isHovered } = useHover({ - isDisabled: isDisabled || isUnavailable || state.isReadOnly, - }); - - let dayState = { - // Style disabled (i.e. out of min/max range), but selected dates as unavailable - // since it is more clear than trying to dim the selection. - isDisabled: isDisabled && !isInvalid, - isFocused: isFocused && isFocusVisible, - isHovered: isHovered, - isInvalid: isInvalid, - isOutsideMonth: !isSameMonth(props.date, currentMonth), - isPressed: isPressed && !state.isReadOnly, - isRangeEnd: isRangeEnd, - isRangeSelection: isSelected && 'highlightedRange' in state, - isRangeStart: isRangeStart, - isSelected: isSelected, - isSelectionEnd: isSelectionEnd, - isSelectionStart: isSelectionStart, - isToday: isToday(props.date, state.timeZone), - isUnavailable: isUnavailable || (isInvalid && isDisabled), - }; - let cellStyleProps = useCellStyles(dayState); - let dayStyleProps = useDayStyles(dayState); - - return ( - - - - {formattedDate} - - - - ); -} - -export function useCellStyles(props: Partial = {}) { - let cellSize = `var(--calendar-cell-width, ${tokenSchema.size.element.regular})`; - let cellPadding = `var(--calendar-cell-padding, ${tokenSchema.size.space.xsmall})`; - return { - ...toDataAttributes(props, { - omitFalsyValues: true, - trimBooleanKeys: true, - }), - className: css({ - boxSizing: 'content-box', - height: cellSize, - padding: cellPadding, - position: 'relative', - textAlign: 'center', - width: cellSize, - - '&[data-range-selection]:not([data-outside-month])': { - backgroundColor: tokenSchema.color.alias.backgroundSelected, - '&[data-invalid]': { - backgroundColor: tokenSchema.color.background.critical, - color: tokenSchema.color.foreground.critical, - }, - }, - '&[data-selection-start], &[data-range-start]': { - borderStartStartRadius: tokenSchema.size.radius.full, - borderEndStartRadius: tokenSchema.size.radius.full, - }, - '&[data-selection-end], &[data-range-end]': { - borderStartEndRadius: tokenSchema.size.radius.full, - borderEndEndRadius: tokenSchema.size.radius.full, - }, - }), - }; -} - -type CellStyleProps = { - isDisabled: boolean; - isFocused: boolean; - isHovered: boolean; - isInvalid: boolean; - isOutsideMonth: boolean; - isPressed: boolean; - isRangeEnd: boolean; - isRangeSelection: boolean; - isRangeStart: boolean; - isSelected: boolean; - isSelectionEnd: boolean | null; - isSelectionStart: boolean | null; - isToday: boolean; - isUnavailable: boolean; -}; - -function useDayStyles(props: CellStyleProps) { - let className = css({ - alignItems: 'center', - borderRadius: tokenSchema.size.radius.full, - color: tokenSchema.color.foreground.neutral, - cursor: 'default', - display: 'flex', - inset: tokenSchema.size.space.xsmall, - justifyContent: 'center', - outline: 0, - position: 'absolute', - - // Date specific - // ------------------------------------------------------------------------- - - // hide dates from other months - '&[data-outside-month]': { - visibility: 'hidden', - }, - - // today — indicated by a small underline beneath the date - '&[data-today]': { - color: tokenSchema.color.foreground.accent, - fontWeight: tokenSchema.typography.fontWeight.semibold, - - '&:not([data-unavailable])::before': { - backgroundColor: 'currentColor', - borderRadius: tokenSchema.size.radius.full, - content: '""', - height: tokenSchema.size.border.medium, - marginInline: 'auto', - position: 'absolute', - top: `calc(50% + 1ch)`, - width: '2ch', - }, - }, - - // unavailable — indicated by an angled strike-through over the date - '&[data-unavailable]:not([data-selected])': { - '::before': { - backgroundColor: 'currentColor', - borderRadius: tokenSchema.size.radius.full, - content: '""', - height: tokenSchema.size.border.medium, - marginInline: 'auto', - position: 'absolute', - top: '50%', - insetInline: tokenSchema.size.space.small, - transform: 'rotate(-16deg)', - }, - }, - - // Interaction states - // ------------------------------------------------------------------------- - - '&[data-hovered]': { - backgroundColor: tokenSchema.color.alias.backgroundHovered, - color: tokenSchema.color.alias.foregroundHovered, - }, - '&[data-pressed]': { - backgroundColor: tokenSchema.color.alias.backgroundPressed, - }, - '&[data-focused]': { - outline: `${tokenSchema.size.alias.focusRing} solid ${tokenSchema.color.alias.focusRing}`, - outlineOffset: tokenSchema.size.alias.focusRingGap, - }, - - // Selection states - // ------------------------------------------------------------------------- - - '&[data-disabled]': { - color: tokenSchema.color.alias.foregroundDisabled, - }, - '&[data-selected]:not([data-range-selection], [data-disabled]), &[data-selection-start], &[data-selection-end]': - { - backgroundColor: tokenSchema.color.background.accentEmphasis, - color: tokenSchema.color.foreground.onEmphasis, - - '&[data-invalid]': { - backgroundColor: tokenSchema.color.background.criticalEmphasis, - }, - }, - '&[data-range-selection]:not([data-selection-start], [data-selection-end])': - { - color: tokenSchema.color.foreground.accent, - '&[data-hovered]': { - backgroundColor: tokenSchema.color.alias.backgroundSelectedHovered, - }, - '&[data-invalid]': { - color: tokenSchema.color.foreground.critical, - }, - }, - }); - - return { - ...toDataAttributes(props, { - omitFalsyValues: true, - trimBooleanKeys: true, - }), - className, - }; -} diff --git a/design-system/pkg/src/calendar/CalendarMonth.tsx b/design-system/pkg/src/calendar/CalendarMonth.tsx deleted file mode 100644 index 0e6ba359e..000000000 --- a/design-system/pkg/src/calendar/CalendarMonth.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { - CalendarDate, - endOfMonth, - getWeeksInMonth, -} from '@internationalized/date'; -import { useCalendarGrid } from 'react-aria/useCalendar'; -import { useLocale } from 'react-aria/I18nProvider'; -import { - CalendarState, - CalendarPropsBase, -} from 'react-stately/useCalendarState'; -import { RangeCalendarState } from 'react-stately/useRangeCalendarState'; - -import { DOMProps } from '@react-types/shared'; -import React from 'react'; - -import { css } from '@keystar/ui/style'; -import { Text } from '@keystar/ui/typography'; - -import { CalendarCell, useCellStyles } from './CalendarCell'; - -interface CalendarMonthProps extends CalendarPropsBase, DOMProps { - state: CalendarState | RangeCalendarState; - startDate: CalendarDate; -} - -export function CalendarMonth(props: CalendarMonthProps) { - let { state, startDate } = props; - let { gridProps, headerProps, weekDays } = useCalendarGrid( - { - ...props, - endDate: endOfMonth(startDate), - }, - state - ); - - let { locale } = useLocale(); - let weeksInMonth = getWeeksInMonth(startDate, locale); - let cellStyleProps = useCellStyles(); - - return ( - - - - {weekDays.map((day, index) => ( - - ))} - - - - {[...new Array(weeksInMonth).keys()].map(weekIndex => ( - - {state - .getDatesInWeek(weekIndex, startDate) - .map((date, i) => - date ? ( - - ) : ( - - ))} - -
- - {day} - -
- ) - )} -
- ); -} diff --git a/design-system/pkg/src/calendar/RangeCalendar.tsx b/design-system/pkg/src/calendar/RangeCalendar.tsx index 32eb7b833..5656bfb1b 100644 --- a/design-system/pkg/src/calendar/RangeCalendar.tsx +++ b/design-system/pkg/src/calendar/RangeCalendar.tsx @@ -1,20 +1,21 @@ -import { createCalendar } from '@internationalized/date'; -import { useRangeCalendar } from 'react-aria/useRangeCalendar'; -import { useLocale } from 'react-aria/I18nProvider'; -import { useObjectRef } from 'react-aria/useObjectRef'; -import { useRangeCalendarState } from 'react-stately/useRangeCalendarState'; -import { DateValue } from 'react-stately/useCalendarState'; import { - forwardRef, + RangeCalendar as AriaRangeCalendar, + type RangeCalendarProps as AriaRangeCalendarProps, + type RangeCalendarState, + type DateValue, +} from 'react-aria-components/RangeCalendar'; +import { ForwardedRef, ReactElement, + forwardRef, useImperativeHandle, - useMemo, + useRef, } from 'react'; import { useProviderProps } from '@keystar/ui/core'; +import { classNames, filterStyleProps, useStyleProps } from '@keystar/ui/style'; -import { CalendarBase } from './CalendarBase'; +import { CalendarBase, calendarRootClassName } from './CalendarBase'; import { RangeCalendarProps } from './types'; function RangeCalendar( @@ -22,52 +23,36 @@ function RangeCalendar( forwardedRef: ForwardedRef ) { props = useProviderProps(props); - let { visibleMonths = 1 } = props; - visibleMonths = Math.max(visibleMonths, 1); - let visibleDuration = useMemo( - () => ({ months: visibleMonths }), - [visibleMonths] - ); - let { locale } = useLocale(); - let state = useRangeCalendarState({ - ...props, - locale, - visibleDuration, - createCalendar, - }); + let visibleMonths = Math.max(props.visibleMonths ?? 1, 1); + let { visibleMonths: _visibleMonths, ...otherProps } = props; + let domRef = useRef(null); + let stateRef = useRef(null); + let styleProps = useStyleProps(props); - let domRef = useObjectRef(forwardedRef); - // @ts-expect-error FIXME: not sure how to properly resolve this type issue useImperativeHandle(forwardedRef, () => ({ - ...domRef.current, + ...domRef.current!, focus() { - state.setFocused(true); + stateRef.current?.setFocused(true); }, })); - let { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar( - props, - state, - domRef - ); - return ( - + )} + ref={domRef} + visibleDuration={{ months: visibleMonths }} + className={classNames(calendarRootClassName, styleProps.className)} + style={styleProps.style} + > + {({ state }) => { + stateRef.current = state; + return ; + }} + ); } -/** - * RangeCalendars display a grid of days in one or more months and allow users - * to select a contiguous range of dates. - */ +/** Range calendars display one or more months and allow range selection. */ const _RangeCalendar = forwardRef(RangeCalendar) as ( props: RangeCalendarProps & { ref?: ForwardedRef } ) => ReactElement; diff --git a/design-system/pkg/src/calendar/test/Calendar.test.tsx b/design-system/pkg/src/calendar/test/Calendar.test.tsx index 16994c140..1a04a54c8 100644 --- a/design-system/pkg/src/calendar/test/Calendar.test.tsx +++ b/design-system/pkg/src/calendar/test/Calendar.test.tsx @@ -11,7 +11,7 @@ import { import { act, fireEvent, firePress, renderWithProvider } from '#test-utils'; import { Calendar } from '../index'; -import { useLocale } from 'react-aria/I18nProvider'; +import { useLocale } from 'react-aria-components'; const tmInceptionDate = new CalendarDate(2013, 9, 4); const keyCodes = { diff --git a/design-system/pkg/src/calendar/types.ts b/design-system/pkg/src/calendar/types.ts index 09f80f026..f04b62f52 100644 --- a/design-system/pkg/src/calendar/types.ts +++ b/design-system/pkg/src/calendar/types.ts @@ -1,24 +1,30 @@ -import { AriaCalendarProps } from 'react-aria/useCalendar'; -import { AriaRangeCalendarProps } from 'react-aria/useRangeCalendar'; -import { DateValue } from 'react-stately/useCalendarState'; +import type { + CalendarProps as AriaCalendarProps, + DateValue, +} from 'react-aria-components/Calendar'; +import type { RangeCalendarProps as AriaRangeCalendarProps } from 'react-aria-components/RangeCalendar'; import { BaseStyleProps } from '@keystar/ui/style'; -export interface CalendarProps - extends AriaCalendarProps, - BaseStyleProps { - /** - * The number of months to display at once. Up to 3 months are supported. - * @default 1 - */ - visibleMonths?: number; -} +export type CalendarProps = Omit< + AriaCalendarProps, + 'children' | 'className' | 'style' | 'visibleDuration' +> & + BaseStyleProps & { + /** + * The number of months to display at once. Up to 3 months are supported. + * @default 1 + */ + visibleMonths?: number; + }; -export interface RangeCalendarProps - extends AriaRangeCalendarProps, - BaseStyleProps { - /** - * The number of months to display at once. Up to 3 months are supported. - * @default 1 - */ - visibleMonths?: number; -} +export type RangeCalendarProps = Omit< + AriaRangeCalendarProps, + 'children' | 'className' | 'style' | 'visibleDuration' +> & + BaseStyleProps & { + /** + * The number of months to display at once. Up to 3 months are supported. + * @default 1 + */ + visibleMonths?: number; + }; diff --git a/design-system/pkg/src/checkbox/Checkbox.tsx b/design-system/pkg/src/checkbox/Checkbox.tsx index 1027e66bc..ba4a489f0 100644 --- a/design-system/pkg/src/checkbox/Checkbox.tsx +++ b/design-system/pkg/src/checkbox/Checkbox.tsx @@ -1,14 +1,8 @@ -import { useCheckbox } from 'react-aria/useCheckbox'; -import { useCheckboxGroupItem } from 'react-aria/useCheckboxGroup'; -import { useToggleState } from 'react-stately/useToggleState'; import { - HTMLAttributes, - InputHTMLAttributes, - RefObject, - useContext, - useMemo, - useRef, -} from 'react'; + Checkbox as AriaCheckbox, + type CheckboxProps as AriaCheckboxProps, +} from 'react-aria-components/Checkbox'; +import { HTMLAttributes, useMemo } from 'react'; import { Icon } from '@keystar/ui/icon'; import { checkIcon } from '@keystar/ui/icon/icons/checkIcon'; @@ -16,9 +10,9 @@ import { minusIcon } from '@keystar/ui/icon/icons/minusIcon'; import { SlotProvider } from '@keystar/ui/slots'; import { ClassList, - FocusRing, classNames, css, + filterStyleProps, tokenSchema, transition, useStyleProps, @@ -27,65 +21,11 @@ import { Text } from '@keystar/ui/typography'; import { isReactText } from '@keystar/ui/utils'; import { CheckboxProps } from './types'; -import { CheckboxGroupContext } from './context'; const checkboxClassList = new ClassList('Checkbox', ['indicator']); export function Checkbox(props: CheckboxProps) { - let groupState = useContext(CheckboxGroupContext); - return groupState ? ( - - ) : ( - - ); -} - -function CheckboxInGroup({ - groupState, - ...props -}: CheckboxProps & { groupState: CheckboxGroupContext }) { - let inputRef = useRef(null); - const { inputProps } = useCheckboxGroupItem( - { - ...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, - }, - groupState.state, - inputRef - ); - return ( - - ); -} - -function CheckboxAlone(props: CheckboxProps) { - let inputRef = useRef(null); - const { inputProps } = useCheckbox(props, useToggleState(props), inputRef); - return ( - - ); -} - -function CheckboxInner( - props: CheckboxProps & { - inputRef: RefObject; - inputProps: InputHTMLAttributes; - } -) { - let { - autoFocus, - children, - inputProps, - inputRef, - isDisabled = false, - isIndeterminate = false, - prominence, - ...otherProps - } = props; + let { children, prominence, ...otherProps } = props; let styleProps = useStyleProps(otherProps); @@ -108,35 +48,27 @@ function CheckboxInner( ); return ( - + {({ isIndeterminate }) => ( + <> + + + {children && ( + + {isReactText(children) ? {children} : children} + + )} + + + )} + ); } @@ -146,7 +78,8 @@ function CheckboxInner( let sizeToken = tokenSchema.size.element.xsmall; type IndicatorProps = Pick; -const Indicator = (props: IndicatorProps) => { +/** @private A presentational checkbox indicator for state-managed checkbox primitives. */ +export const CheckboxIndicator = (props: IndicatorProps) => { let { isIndeterminate, prominence } = props; return ( @@ -199,6 +132,10 @@ const Indicator = (props: IndicatorProps) => { boxShadow: `0 0 0 ${tokenSchema.size.alias.focusRing} ${tokenSchema.color.alias.focusRing}`, margin: `calc(${tokenSchema.size.alias.focusRingGap} * -1)`, }, + 'label[data-focus-visible] &::after': { + boxShadow: `0 0 0 ${tokenSchema.size.alias.focusRing} ${tokenSchema.color.alias.focusRing}`, + margin: `calc(${tokenSchema.size.alias.focusRingGap} * -1)`, + }, // border / background '&::before': { @@ -218,12 +155,25 @@ const Indicator = (props: IndicatorProps) => { borderColor: tokenSchema.color.alias.borderDisabled, }, }, + 'label[data-disabled] &': { + color: tokenSchema.color.alias.foregroundDisabled, + '&::before': { + backgroundColor: tokenSchema.color.alias.borderDisabled, + borderColor: tokenSchema.color.alias.borderDisabled, + }, + }, 'input[type="checkbox"]:enabled:hover + &::before': { borderColor: tokenSchema.color.scale.slate9, }, + 'label:not([data-disabled])[data-hovered] &::before': { + borderColor: tokenSchema.color.scale.slate9, + }, 'input[type="checkbox"]:enabled:active + &::before': { borderColor: tokenSchema.color.scale.slate10, }, + 'label:not([data-disabled])[data-pressed] &::before': { + borderColor: tokenSchema.color.scale.slate10, + }, // checked states 'input[type="checkbox"]:checked + &, input[type="checkbox"]:indeterminate + &': @@ -237,18 +187,40 @@ const Indicator = (props: IndicatorProps) => { transform: `scale(1)`, }, }, + 'label[data-selected] &, label[data-indeterminate] &': { + '&::before': { + borderWidth: `calc(${sizeToken} / 2)`, + }, + + [checkboxClassList.selector('indicator')]: { + opacity: 1, + transform: `scale(1)`, + }, + }, 'input[type="checkbox"]:enabled:checked + &::before, input[type="checkbox"]:enabled:indeterminate + &::before': { borderColor: 'var(--selected-idle-bg)', }, + 'label:not([data-disabled])[data-selected] &::before, label:not([data-disabled])[data-indeterminate] &::before': + { + borderColor: 'var(--selected-idle-bg)', + }, 'input[type="checkbox"]:enabled:checked:hover + &::before, input[type="checkbox"]:enabled:indeterminate:hover + &::before': { borderColor: 'var(--selected-hover-bg)', }, + 'label:not([data-disabled])[data-hovered][data-selected] &::before, label:not([data-disabled])[data-hovered][data-indeterminate] &::before': + { + borderColor: 'var(--selected-hover-bg)', + }, 'input[type="checkbox"]:enabled:checked:active + &::before, input[type="checkbox"]:enabled:indeterminate:active + &::before': { borderColor: 'var(--selected-pressed-bg)', }, + 'label:not([data-disabled])[data-pressed][data-selected] &::before, label:not([data-disabled])[data-pressed][data-indeterminate] &::before': + { + borderColor: 'var(--selected-pressed-bg)', + }, }) )} > @@ -282,6 +254,12 @@ const Content = (props: HTMLAttributes) => { 'input[type="checkbox"]:disabled ~ &': { color: tokenSchema.color.alias.foregroundDisabled, }, + 'label[data-hovered] &': { + color: tokenSchema.color.alias.foregroundHovered, + }, + 'label[data-disabled] &': { + color: tokenSchema.color.alias.foregroundDisabled, + }, }) )} {...props} diff --git a/design-system/pkg/src/checkbox/CheckboxGroup.tsx b/design-system/pkg/src/checkbox/CheckboxGroup.tsx index 9abfbb1ba..2da2c4ad4 100644 --- a/design-system/pkg/src/checkbox/CheckboxGroup.tsx +++ b/design-system/pkg/src/checkbox/CheckboxGroup.tsx @@ -1,17 +1,26 @@ -import { useCheckboxGroup } from 'react-aria/useCheckboxGroup'; -import { useCheckboxGroupState } from 'react-stately/useCheckboxGroupState'; -import React, { - ForwardedRef, - ForwardRefExoticComponent, - forwardRef, -} from 'react'; +import { + CheckboxGroup as AriaCheckboxGroup, + type CheckboxGroupProps as AriaCheckboxGroupProps, +} from 'react-aria-components/CheckboxGroup'; +import { ForwardedRef, ForwardRefExoticComponent, forwardRef } from 'react'; import { useProviderProps } from '@keystar/ui/core'; -import { FieldPrimitive, validateFieldProps } from '@keystar/ui/field'; -import { classNames, css, toDataAttributes } from '@keystar/ui/style'; +import { validateFieldProps } from '@keystar/ui/field'; +import { + classNames, + css, + filterStyleProps, + toDataAttributes, + useStyleProps, +} from '@keystar/ui/style'; -import { CheckboxGroupContext } from './context'; import { CheckboxGroupProps } from './types'; +import { + FieldDescriptionElement, + FieldErrorElement, + FieldLabelElement, + fieldRootClassName, +} from '../field/FieldElements'; /** * A checkbox group allows users to select one or more items from a list of @@ -24,23 +33,36 @@ export const CheckboxGroup: ForwardRefExoticComponent = ) { props = useProviderProps(props); props = validateFieldProps(props); - let { children, orientation = 'vertical', validationState } = props; - let state = useCheckboxGroupState(props); - let { labelProps, groupProps, descriptionProps, errorMessageProps } = - useCheckboxGroup(props, state); + let { + children, + contextualHelp, + description, + errorMessage, + isRequired, + label, + orientation = 'vertical', + validationState, + ...otherProps + } = props; + let styleProps = useStyleProps(props); return ( - + + {description}
= }) )} > - - {children} - + {children}
- + {errorMessage} + ); }); diff --git a/design-system/pkg/src/checkbox/context.ts b/design-system/pkg/src/checkbox/context.ts deleted file mode 100644 index 8a2cccedc..000000000 --- a/design-system/pkg/src/checkbox/context.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CheckboxGroupState } from 'react-stately/useCheckboxGroupState'; -import { ValidationState } from '@react-types/shared'; -import React from 'react'; - -export type CheckboxGroupContext = { - validationState?: ValidationState; - state: CheckboxGroupState; -}; - -export const CheckboxGroupContext = - React.createContext(null); diff --git a/design-system/pkg/src/checkbox/index.ts b/design-system/pkg/src/checkbox/index.ts index 53c471e0b..97290813c 100644 --- a/design-system/pkg/src/checkbox/index.ts +++ b/design-system/pkg/src/checkbox/index.ts @@ -1,6 +1,6 @@ 'use client'; -export { Checkbox } from './Checkbox'; +export { Checkbox, CheckboxIndicator } from './Checkbox'; export { CheckboxGroup } from './CheckboxGroup'; export type { CheckboxProps, CheckboxGroupProps } from './types'; diff --git a/design-system/pkg/src/checkbox/types.ts b/design-system/pkg/src/checkbox/types.ts index 5a11ed885..8e22d61d5 100644 --- a/design-system/pkg/src/checkbox/types.ts +++ b/design-system/pkg/src/checkbox/types.ts @@ -1,9 +1,10 @@ -import { AriaCheckboxGroupProps } from 'react-aria/useCheckboxGroup'; +import type { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components/CheckboxGroup'; import { DOMProps, InputBase, FocusableProps, Orientation, + ValidationState, } from '@react-types/shared'; import { ReactNode } from 'react'; @@ -56,7 +57,10 @@ export type CheckboxProps = { BaseStyleProps & DOMProps; -export type CheckboxGroupProps = AriaCheckboxGroupProps & +export type CheckboxGroupProps = Omit< + AriaCheckboxGroupProps, + 'children' | 'className' | 'style' +> & FieldProps & BaseStyleProps & { /** The checkboxes contained within the group. */ @@ -66,4 +70,6 @@ export type CheckboxGroupProps = AriaCheckboxGroupProps & * @default 'vertical' */ orientation?: Orientation; + /** Whether the group is valid or invalid. */ + validationState?: ValidationState; }; diff --git a/design-system/pkg/src/combobox/Combobox.tsx b/design-system/pkg/src/combobox/Combobox.tsx index 000fafb71..28376d270 100644 --- a/design-system/pkg/src/combobox/Combobox.tsx +++ b/design-system/pkg/src/combobox/Combobox.tsx @@ -1,365 +1,16 @@ -import { useComboBox } from 'react-aria/useComboBox'; -import { useFilter } from 'react-aria/useFilter'; -import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { PressResponder } from 'react-aria/private/interactions/PressResponder'; -import React, { - useLayoutEffect, - CSSProperties, - ForwardedRef, - InputHTMLAttributes, - ReactElement, - RefObject, - useCallback, - useEffect, - useRef, - useState, -} from 'react'; -import { useObjectRef } from 'react-aria/useObjectRef'; -import { useResizeObserver } from 'react-aria/private/utils/useResizeObserver'; -import { useComboBoxState } from 'react-stately/useComboBoxState'; -import { AriaButtonProps } from 'react-aria/useButton'; -import { LoadingState } from '@react-types/shared'; +import { type ForwardedRef, type ReactElement, forwardRef } from 'react'; -import { FieldButton } from '@keystar/ui/button'; -import { useProviderProps } from '@keystar/ui/core'; -import { FieldPrimitive } from '@keystar/ui/field'; -import { Icon } from '@keystar/ui/icon'; -import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon'; -import { Flex } from '@keystar/ui/layout'; -import { ListBoxBase, listStyles, useListBoxLayout } from '@keystar/ui/listbox'; -import { Popover } from '@keystar/ui/overlays'; -import { ProgressCircle } from '@keystar/ui/progress'; -import { - FocusRing, - css, - tokenSchema, - useIsMobileDevice, -} from '@keystar/ui/style'; -import { - TextFieldPrimitive, - validateTextFieldProps, -} from '@keystar/ui/text-field'; -import { Text } from '@keystar/ui/typography'; - -import { comboboxClassList } from './class-list'; -import localizedMessages from './l10n'; -import { MobileCombobox } from './MobileCombobox'; -import { ComboboxProps } from './types'; +import { ComboboxBase } from './ComboboxBase'; +import type { ComboboxProps } from './types'; function Combobox( props: ComboboxProps, forwardedRef: ForwardedRef ) { - props = useProviderProps(props); - // FIXME - props = validateTextFieldProps(props as any) as typeof props; - - let isMobile = useIsMobileDevice(); - if (isMobile) { - // menuTrigger=focus/manual don't apply to mobile combobox - return ; - } else { - // @ts-expect-error FIXME: 'T' could be instantiated with an arbitrary type which could be unrelated to 'unknown'. - return ; - } + return ComboboxBase(props, forwardedRef, 'single'); } -const ComboboxBase = React.forwardRef(function ComboboxBase( - props: ComboboxProps, - forwardedRef: ForwardedRef -) { - let { - align = 'start', - menuTrigger = 'input', - shouldFlip = true, - direction = 'bottom', - loadingState, - menuWidth, - onLoadMore, - } = props; - - let isAsync = loadingState != null; - let buttonRef = useRef(null); - let inputRef = useRef(null); - let listBoxRef = useRef(null); - let popoverRef = useRef(null); - let fieldRef = useObjectRef(forwardedRef); - - let { contains } = useFilter({ sensitivity: 'base' }); - let state = useComboBoxState({ - ...props, - defaultFilter: contains, - allowsEmptyCollection: isAsync, - }); - let layout = useListBoxLayout(); - - let { - buttonProps, - inputProps, - listBoxProps, - labelProps, - descriptionProps, - errorMessageProps, - } = useComboBox( - { - ...props, - layoutDelegate: layout, - buttonRef, - popoverRef, - listBoxRef, - inputRef, - menuTrigger, - }, - state - ); - - let popoverStyle = usePopoverStyles({ - menuWidth, - buttonRef, - inputRef, - fieldRef, - }); - - return ( - <> - - - - - - isAsync && - } - /> - - - ); -}); - -export function ComboboxEmptyState(props: { loadingState?: LoadingState }) { - let stringFormatter = useLocalizedStringFormatter(localizedMessages); - return ( - - - {props.loadingState === 'loading' - ? stringFormatter.format('loading') - : stringFormatter.format('noResults')} - - - ); -} - -export function usePopoverStyles(props: { - menuWidth?: number; - buttonRef: RefObject; - inputRef: RefObject; - fieldRef: RefObject; -}) { - const { buttonRef, inputRef, fieldRef, menuWidth: menuWidthProp } = props; - - // Measure the width of the input and the button to inform the width of the menu (below). - let [menuWidth, setMenuWidth] = useState(); - - let onResize = useCallback(() => { - if (buttonRef.current && inputRef.current) { - let buttonWidth = buttonRef.current.offsetWidth; - let inputWidth = inputRef.current.offsetWidth; - - setMenuWidth(inputWidth + buttonWidth); - } - }, [buttonRef, inputRef, setMenuWidth]); - - useResizeObserver({ - ref: fieldRef, - onResize: onResize, - }); - - useLayoutEffect(onResize, [onResize]); - - return { - width: menuWidth, - minWidth: menuWidthProp ?? menuWidth, - }; -} - -interface ComboboxInputProps extends ComboboxProps { - inputProps: InputHTMLAttributes; - inputRef: RefObject; - triggerProps: AriaButtonProps; - triggerRef: RefObject; - style?: CSSProperties; - isOpen?: boolean; -} - -/** @private Used by multi variant. */ -export const ComboboxInput = React.forwardRef(function ComboboxInput( - props: ComboboxInputProps, - forwardedRef: ForwardedRef -) { - let { - isDisabled, - inputProps, - inputRef, - triggerProps, - triggerRef, - autoFocus, - style, - loadingState, - isOpen, - menuTrigger, - } = props; - let stringFormatter = useLocalizedStringFormatter(localizedMessages); - let timeoutRef = useRef(undefined); - let [showLoading, setShowLoading] = useState(false); - - let loadingCircle = ( - - - - ); - - let isLoading = loadingState === 'loading' || loadingState === 'filtering'; - let inputValue = inputProps.value; - let lastInputValue = useRef(inputValue); - useEffect(() => { - if (isLoading && !showLoading) { - if (!timeoutRef.current) { - timeoutRef.current = setTimeout(() => { - setShowLoading(true); - }, 500); - } - - // If user is typing, clear the timer and restart since it is a new request - if (inputValue !== lastInputValue.current) { - clearTimeout(timeoutRef.current); - timeoutRef.current = setTimeout(() => { - setShowLoading(true); - }, 500); - } - } else if (!isLoading) { - // If loading is no longer happening, clear any timers and hide the loading circle - setShowLoading(false); - clearTimeout(timeoutRef.current); - timeoutRef.current = undefined; - } - - lastInputValue.current = inputValue; - }, [isLoading, showLoading, inputValue]); - - return ( - -
- - {showLoading && - (isOpen || menuTrigger === 'manual' || loadingState === 'loading') - ? loadingCircle - : null} - - - - - - - } - /> -
- - ); -}) as ( - props: ComboboxInputProps & { ref?: ForwardedRef } -) => ReactElement; - -/** - * A combobox combines a text input with a listbox, and allows users to filter a - * list of options. - */ -const _Combobox: ( +const _Combobox = forwardRef(Combobox) as ( props: ComboboxProps & { ref?: ForwardedRef } -) => ReactElement = React.forwardRef(Combobox as any) as any; - +) => ReactElement; export { _Combobox as Combobox }; diff --git a/design-system/pkg/src/combobox/ComboboxBase.tsx b/design-system/pkg/src/combobox/ComboboxBase.tsx new file mode 100644 index 000000000..67a01c759 --- /dev/null +++ b/design-system/pkg/src/combobox/ComboboxBase.tsx @@ -0,0 +1,128 @@ +import { Button as AriaButton } from 'react-aria-components/Button'; +import { + ComboBox as AriaComboBox, + type ComboBoxProps as AriaComboBoxProps, +} from 'react-aria-components/ComboBox'; +import { Input } from 'react-aria-components/Input'; +import type { ForwardedRef } from 'react'; + +import { FieldButton } from '@keystar/ui/button'; +import type { FieldButtonProps } from '@keystar/ui/button'; +import { Icon } from '@keystar/ui/icon'; +import { chevronsUpDownIcon } from '@keystar/ui/icon/icons/chevronsUpDownIcon'; +import { ListBox } from '@keystar/ui/listbox'; +import { Popover } from '@keystar/ui/overlays'; +import { + classNames, + css, + filterStyleProps, + tokenSchema, + useStyleProps, +} from '@keystar/ui/style'; + +import type { ComboboxMultiProps, ComboboxProps } from './types'; +import { + FieldDescriptionElement, + FieldErrorElement, + FieldLabelElement, + fieldRootClassName, +} from '../field/FieldElements'; + +export function ComboboxBase( + props: M extends 'multiple' ? ComboboxMultiProps : ComboboxProps, + forwardedRef: ForwardedRef, + selectionMode: M +) { + let { + align = 'start', + children, + contextualHelp, + dependencies, + description, + direction = 'bottom', + label, + menuWidth, + errorMessage, + isRequired, + labelElementType: _labelElementType, + shouldFlip = true, + ...comboBoxProps + } = props; + let styleProps = useStyleProps({ width: 'alias.singleLineWidth', ...props }); + + return ( + )} + ref={forwardedRef} + selectionMode={selectionMode} + isInvalid={comboBoxProps.isInvalid || Boolean(errorMessage)} + isRequired={isRequired} + className={classNames(fieldRootClassName, styleProps.className)} + style={styleProps.style} + > + + {description} +
+ + ( + + )} + > + + +
+ + {children} + + {errorMessage} + + ); +} diff --git a/design-system/pkg/src/combobox/ComboboxMulti.tsx b/design-system/pkg/src/combobox/ComboboxMulti.tsx index c826db792..f54d144c9 100644 --- a/design-system/pkg/src/combobox/ComboboxMulti.tsx +++ b/design-system/pkg/src/combobox/ComboboxMulti.tsx @@ -1,151 +1,16 @@ -import { useObjectRef } from 'react-aria/useObjectRef'; -import React, { ForwardedRef, ReactElement, useRef } from 'react'; +import { type ForwardedRef, type ReactElement, forwardRef } from 'react'; -import { useProviderProps } from '@keystar/ui/core'; -import { FieldPrimitive } from '@keystar/ui/field'; -import { ListBoxBase, listStyles, useListBoxLayout } from '@keystar/ui/listbox'; -import { Popover } from '@keystar/ui/overlays'; -import { useIsMobileDevice } from '@keystar/ui/style'; -import { validateTextFieldProps } from '@keystar/ui/text-field'; - -import { - ComboboxEmptyState, - ComboboxInput, - usePopoverStyles, -} from './Combobox'; -import { MobileComboboxMulti } from './MobileComboboxMulti'; -import { ComboboxMultiProps } from './types'; -import { useComboboxMultiState } from './useComboboxMultiState'; -import { useComboboxMulti } from './useComboboxMulti'; +import { ComboboxBase } from './ComboboxBase'; +import type { ComboboxMultiProps } from './types'; function ComboboxMulti( props: ComboboxMultiProps, forwardedRef: ForwardedRef ) { - props = useProviderProps(props); - // FIXME - props = validateTextFieldProps(props as any) as typeof props; - - let isMobile = useIsMobileDevice(); - if (isMobile) { - // menuTrigger=focus/manual don't apply to mobile combobox - return ( - - ); - } else { - // @ts-expect-error FIXME: 'T' could be instantiated with an arbitrary type which could be unrelated to 'unknown'. - return ; - } + return ComboboxBase(props, forwardedRef, 'multiple'); } -const ComboboxMultiBase = React.forwardRef(function ComboboxMultiBase< - T extends object, ->(props: ComboboxMultiProps, forwardedRef: ForwardedRef) { - let { - align = 'start', - // menuTrigger = 'focus', - shouldFlip = true, - direction = 'bottom', - loadingState, - menuWidth, - onLoadMore, - } = props; - - let isAsync = loadingState != null; - let buttonRef = useRef(null); - let inputRef = useRef(null); - let listBoxRef = useRef(null); - let popoverRef = useRef(null); - let fieldRef = useObjectRef(forwardedRef); - - let layoutDelegate = useListBoxLayout(); - let state = useComboboxMultiState(props); - let { - buttonProps, - descriptionProps, - errorMessageProps, - inputProps, - labelProps, - listBoxProps, - } = useComboboxMulti( - { - ...props, - buttonRef, - inputRef, - layoutDelegate, - listBoxRef, - popoverRef, - }, - state - ); - - let popoverStyle = usePopoverStyles({ - menuWidth, - buttonRef, - inputRef, - fieldRef, - }); - - return ( - <> - - {/* @ts-expect-error FIXME: not sure how to resolve this type error */} - - - - - isAsync && - } - /> - - - ); -}); - -/** - * This component is not accessible, use with caution. - * - * A multi-combobox combines a text input with a listbox, and allows users to filter a - * list of options. - */ -const _ComboboxMulti: ( +const _ComboboxMulti = forwardRef(ComboboxMulti) as ( props: ComboboxMultiProps & { ref?: ForwardedRef } -) => ReactElement = React.forwardRef(ComboboxMulti as any) as any; - +) => ReactElement; export { _ComboboxMulti as ComboboxMulti }; diff --git a/design-system/pkg/src/combobox/MobileCombobox.tsx b/design-system/pkg/src/combobox/MobileCombobox.tsx deleted file mode 100644 index f507095c1..000000000 --- a/design-system/pkg/src/combobox/MobileCombobox.tsx +++ /dev/null @@ -1,523 +0,0 @@ -import { useButton, AriaButtonProps } from 'react-aria/useButton'; -import { useComboBox } from 'react-aria/useComboBox'; -import { useDialog } from 'react-aria/useDialog'; -import { FocusScope } from 'react-aria/FocusScope'; -import { focusSafely } from 'react-aria/private/interactions/focusSafely'; -import { useFilter } from 'react-aria/useFilter'; -import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { setInteractionModality } from 'react-aria/private/interactions/useFocusVisible'; -import { useHover } from 'react-aria/useHover'; -import { useField } from 'react-aria/useField'; -import { DismissButton } from 'react-aria/Overlay'; -import { useOverlayTrigger } from 'react-aria/useOverlayTrigger'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useId } from 'react-aria/useId'; -import { useObjectRef } from 'react-aria/useObjectRef'; -import { - ComboBoxState, - useComboBoxState, -} from 'react-stately/useComboBoxState'; - -import { ValidationState } from '@react-types/shared'; -import React, { - CSSProperties, - ForwardedRef, - HTMLAttributes, - KeyboardEvent, - ReactElement, - ReactNode, - useCallback, - useEffect, - useRef, - useState, -} from 'react'; - -import { - ClearButton, - FieldButtonProps, - useFieldButton, -} from '@keystar/ui/button'; -import { useProviderProps } from '@keystar/ui/core'; -import { FieldPrimitive } from '@keystar/ui/field'; -import { Icon } from '@keystar/ui/icon'; -import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon'; -import { Flex } from '@keystar/ui/layout'; -import { ListBoxBase, useListBoxLayout } from '@keystar/ui/listbox'; -import { Tray } from '@keystar/ui/overlays'; -import { ProgressCircle } from '@keystar/ui/progress'; -import { - FocusRing, - css, - toDataAttributes, - tokenSchema, - transition, -} from '@keystar/ui/style'; -import { TextFieldPrimitive } from '@keystar/ui/text-field'; -import { Text } from '@keystar/ui/typography'; - -import localizedMessages from './l10n'; -import { ComboboxProps } from './types'; -import { comboboxClassList } from './class-list'; - -function MobileCombobox( - _props: ComboboxProps, - forwardedRef: ForwardedRef -) { - const props = useProviderProps(_props); - - let { isDisabled, validationState, isReadOnly } = props; - - let { contains } = useFilter({ sensitivity: 'base' }); - let state = useComboBoxState({ - ...props, - defaultFilter: contains, - allowsEmptyCollection: true, - // Needs to be false here otherwise we double up on - // commitSelection/commitCustomValue calls when user taps on underlay (i.e. - // initial tap will call setFocused(false) -> - // commitSelection/commitCustomValue via onBlur, then the closing of the - // tray will call setFocused(false) again due to cleanup effect) - shouldCloseOnBlur: false, - }); - - let buttonRef = useRef(null); - let domRef = useObjectRef(forwardedRef); - let { triggerProps, overlayProps } = useOverlayTrigger( - { type: 'listbox' }, - state, - buttonRef - ); - - let { labelProps, fieldProps } = useField({ - ...props, - labelElementType: 'span', - }); - - // Focus the button and show focus ring when clicking on the label - labelProps = { - ...labelProps, - onClick: () => { - let button = buttonRef.current; - if (button && !props.isDisabled) { - button.focus(); - setInteractionModality('keyboard'); - } - }, - }; - - return ( - <> - - !isReadOnly && state.open(null, 'manual')} - > - {state.inputValue || props.placeholder || ''} - - - - - - - ); -} - -interface ComboboxButtonProps extends AriaButtonProps { - children?: ReactNode; - className?: string; - isReadOnly?: boolean; - isDisabled?: boolean; - isPlaceholder?: boolean; - style?: CSSProperties; - validationState?: ValidationState; -} - -const ComboboxButton = React.forwardRef(function ComboboxButton( - props: ComboboxButtonProps, - forwardedRef: ForwardedRef -) { - let { isDisabled, isPlaceholder, validationState, children, style } = props; - let valueId = useId(); - let invalidId = useId(); - - let domRef = useObjectRef(forwardedRef); - let { hoverProps, isHovered } = useHover({}); - let { buttonProps, isPressed } = useButton( - { - ...props, - 'aria-labelledby': [ - props['aria-labelledby'], - props['aria-label'] && !props['aria-labelledby'] ? props.id : null, - valueId, - validationState === 'invalid' ? invalidId : null, - ] - .filter(Boolean) - .join(' '), - elementType: 'div', - }, - domRef - ); - - return ( - - - - - {children} - - - - - - - - - ); -}); - -type CosmeticProps = FieldButtonProps & { - isHovered: boolean; - isPressed: boolean; -}; -const CosmeticFieldButton = (props: CosmeticProps) => { - let { isHovered, isPressed, ...otherProps } = props; - let { children, styleProps } = useFieldButton(otherProps, { - isHovered, - isPressed, - }); - return ( -
- {children} -
- ); -}; - -const InputStateIndicator = (props: CosmeticProps) => { - let { isDisabled, isHovered, isPressed } = props; - return ( -
- ); -}; - -interface ComboboxTrayProps extends ComboboxProps { - state: ComboBoxState; - overlayProps: HTMLAttributes; - loadingIndicator?: ReactElement; - onClose: () => void; -} - -function ComboboxTray(props: ComboboxTrayProps) { - let { - state, - isDisabled, - validationState, - label, - overlayProps, - loadingState, - onLoadMore, - onClose, - } = props; - - let timeoutRef = useRef(undefined); - let [showLoading, setShowLoading] = useState(false); - let inputRef = useRef(null); - let buttonRef = useRef(null); - let popoverRef = useRef(null); - let listBoxRef = useRef(null); - let layout = useListBoxLayout(); - let stringFormatter = useLocalizedStringFormatter(localizedMessages); - - let { inputProps, listBoxProps, labelProps } = useComboBox( - { - ...props, - layoutDelegate: layout, - buttonRef, - popoverRef, - listBoxRef, - inputRef, - }, - state - ); - - React.useEffect(() => { - let input = inputRef.current; - if (input) { - focusSafely(input); - } - - // When the tray unmounts, set state.isFocused (i.e. the tray input's focus tracker) to false. - // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay - // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to "contain") - // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363 - return () => { - state.setFocused(false); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - let { dialogProps } = useDialog( - { - 'aria-labelledby': useId(labelProps.id), - }, - popoverRef - ); - - // Override the role of the input to "searchbox" instead of "combobox". - // Since the listbox is always visible, the combobox role doesn't really give us anything. - // VoiceOver on iOS reads "double tap to collapse" when focused on the input rather than - // "double tap to edit text", as with a textbox or searchbox. We'd like double tapping to - // open the virtual keyboard rather than closing the tray. - inputProps.role = 'searchbox'; - inputProps['aria-haspopup'] = 'listbox'; - delete inputProps.onTouchEnd; - - let clearButton = ( - { - state.setInputValue(''); - let input = inputRef.current; - if (input) { - input.focus(); - } - }} - isDisabled={isDisabled} - /> - ); - - let loadingCircle = ( - - - - ); - - // Close the software keyboard on scroll to give the user a bigger area to scroll. - // But only do this if scrolling with touch, otherwise it can cause issues with touch - // screen readers. - let isTouchDown = useRef(false); - let onTouchStart = () => { - isTouchDown.current = true; - }; - - let onTouchEnd = () => { - isTouchDown.current = false; - }; - - let onScroll = useCallback(() => { - let input = inputRef.current; - let popover = popoverRef.current; - if (!input || document.activeElement !== input || !isTouchDown.current) { - return; - } - - if (popover) { - popover.focus(); - } - }, [inputRef, popoverRef, isTouchDown]); - - let inputValue = inputProps.value; - let lastInputValue = useRef(inputValue); - useEffect(() => { - if (loadingState === 'filtering' && !showLoading) { - if (!timeoutRef.current) { - timeoutRef.current = setTimeout(() => { - setShowLoading(true); - }, 500); - } - - // If user is typing, clear the timer and restart since it is a new request - if (inputValue !== lastInputValue.current) { - clearTimeout(timeoutRef.current); - timeoutRef.current = setTimeout(() => { - setShowLoading(true); - }, 500); - } - } else if (loadingState !== 'filtering') { - // If loading is no longer happening, clear any timers and hide the loading circle - setShowLoading(false); - clearTimeout(timeoutRef.current); - timeoutRef.current = undefined; - } - - lastInputValue.current = inputValue; - }, [loadingState, inputValue, showLoading]); - - let onKeyDown = (e: KeyboardEvent) => { - let popover = popoverRef.current; - // Close virtual keyboard if user hits Enter w/o any focused options - if ( - popover && - e.key === 'Enter' && - state.selectionManager.focusedKey == null - ) { - popover.focus(); - } else { - inputProps.onKeyDown?.(e); - } - }; - - return ( - - - - - {showLoading && loadingState === 'filtering' && loadingCircle} - {(state.inputValue !== '' || - loadingState === 'filtering' || - validationState != null) && - !props.isReadOnly && - clearButton} - - } - /> - - loadingState !== 'loading' && ( - - - {stringFormatter.format('noResults')} - - - ) - } - ref={listBoxRef} - onScroll={onScroll} - onLoadMore={onLoadMore} - isLoading={ - loadingState === 'loading' || loadingState === 'loadingMore' - } - /> - - - - ); -} -const _MobileCombobox: ( - props: ComboboxProps & { ref?: ForwardedRef } -) => ReactElement = React.forwardRef(MobileCombobox as any) as any; - -export { _MobileCombobox as MobileCombobox }; diff --git a/design-system/pkg/src/combobox/MobileComboboxMulti.tsx b/design-system/pkg/src/combobox/MobileComboboxMulti.tsx deleted file mode 100644 index 86fcde8c9..000000000 --- a/design-system/pkg/src/combobox/MobileComboboxMulti.tsx +++ /dev/null @@ -1,518 +0,0 @@ -import { useButton, AriaButtonProps } from 'react-aria/useButton'; -import { useDialog } from 'react-aria/useDialog'; -import { FocusScope } from 'react-aria/FocusScope'; -import { focusSafely } from 'react-aria/private/interactions/focusSafely'; -import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { setInteractionModality } from 'react-aria/private/interactions/useFocusVisible'; -import { useHover } from 'react-aria/useHover'; -import { useField } from 'react-aria/useField'; -import { DismissButton } from 'react-aria/Overlay'; -import { useOverlayTrigger } from 'react-aria/useOverlayTrigger'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useId } from 'react-aria/useId'; -import { useObjectRef } from 'react-aria/useObjectRef'; - -import { ValidationState } from '@react-types/shared'; -import React, { - CSSProperties, - ForwardedRef, - HTMLAttributes, - KeyboardEvent, - ReactElement, - ReactNode, - useCallback, - useEffect, - useRef, - useState, -} from 'react'; - -import { - ClearButton, - FieldButtonProps, - useFieldButton, -} from '@keystar/ui/button'; -import { useProviderProps } from '@keystar/ui/core'; -import { FieldPrimitive } from '@keystar/ui/field'; -import { Icon } from '@keystar/ui/icon'; -import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon'; -import { Flex } from '@keystar/ui/layout'; -import { ListBoxBase, useListBoxLayout } from '@keystar/ui/listbox'; -import { Tray } from '@keystar/ui/overlays'; -import { ProgressCircle } from '@keystar/ui/progress'; -import { - FocusRing, - css, - toDataAttributes, - tokenSchema, - transition, -} from '@keystar/ui/style'; -import { TextFieldPrimitive } from '@keystar/ui/text-field'; -import { Text } from '@keystar/ui/typography'; - -import localizedMessages from './l10n'; -import { ComboboxMultiProps } from './types'; -import { comboboxClassList } from './class-list'; -import { - ComboboxMultiState, - useComboboxMultiState, -} from './useComboboxMultiState'; -import { useComboboxMulti } from './useComboboxMulti'; - -function MobileComboboxMulti( - _props: ComboboxMultiProps, - forwardedRef: ForwardedRef -) { - const props = useProviderProps(_props); - - let { isDisabled, isReadOnly, validationState } = props; - - // let { contains } = useFilter({ sensitivity: 'base' }); - let state = useComboboxMultiState({ - ...props, - // defaultFilter: contains, - allowsEmptyCollection: true, - }); - - let buttonRef = useRef(null); - let domRef = useObjectRef(forwardedRef); - let { triggerProps, overlayProps } = useOverlayTrigger( - { type: 'listbox' }, - state, - buttonRef - ); - - let { labelProps, fieldProps } = useField({ - ...props, - labelElementType: 'span', - }); - - // Focus the button and show focus ring when clicking on the label - labelProps = { - ...labelProps, - onClick: () => { - let button = buttonRef.current; - if (button && !props.isDisabled) { - button.focus(); - setInteractionModality('keyboard'); - } - }, - }; - - return ( - <> - - !isReadOnly && state.open()} - > - {state.inputValue || props.placeholder || ''} - - - - - - - ); -} - -interface ComboboxButtonProps extends AriaButtonProps { - children?: ReactNode; - className?: string; - isReadOnly?: boolean; - isDisabled?: boolean; - isPlaceholder?: boolean; - style?: CSSProperties; - validationState?: ValidationState; -} - -const ComboboxButton = React.forwardRef(function ComboboxButton( - props: ComboboxButtonProps, - forwardedRef: ForwardedRef -) { - let { isDisabled, isPlaceholder, validationState, children, style } = props; - let valueId = useId(); - let invalidId = useId(); - - let domRef = useObjectRef(forwardedRef); - let { hoverProps, isHovered } = useHover({}); - let { buttonProps, isPressed } = useButton( - { - ...props, - 'aria-labelledby': [ - props['aria-labelledby'], - props['aria-label'] && !props['aria-labelledby'] ? props.id : null, - valueId, - validationState === 'invalid' ? invalidId : null, - ] - .filter(Boolean) - .join(' '), - elementType: 'div', - }, - domRef - ); - - return ( - - - - - {children} - - - - - - - - - ); -}); - -type CosmeticProps = FieldButtonProps & { - isHovered: boolean; - isPressed: boolean; -}; -const CosmeticFieldButton = (props: CosmeticProps) => { - let { isHovered, isPressed, ...otherProps } = props; - let { children, styleProps } = useFieldButton(otherProps, { - isHovered, - isPressed, - }); - return ( -
- {children} -
- ); -}; - -const InputStateIndicator = (props: CosmeticProps) => { - let { isDisabled, isHovered, isPressed } = props; - return ( -
- ); -}; - -interface ComboboxTrayProps extends ComboboxMultiProps { - state: ComboboxMultiState; - overlayProps: HTMLAttributes; - loadingIndicator?: ReactElement; - onClose: () => void; -} - -function ComboboxTray(props: ComboboxTrayProps) { - let { - state, - isDisabled, - validationState, - label, - overlayProps, - loadingState, - onLoadMore, - onClose, - } = props; - - let timeoutRef = useRef(undefined); - let [showLoading, setShowLoading] = useState(false); - let inputRef = useRef(null); - let buttonRef = useRef(null); - let popoverRef = useRef(null); - let listBoxRef = useRef(null); - let layout = useListBoxLayout(); - let stringFormatter = useLocalizedStringFormatter(localizedMessages); - - let { inputProps, listBoxProps, labelProps } = useComboboxMulti( - { - ...props, - layoutDelegate: layout, - buttonRef, - popoverRef, - listBoxRef, - inputRef, - // fix for close on blur behaviour - shouldCloseOnBlur: false, - }, - state - ); - - React.useEffect(() => { - let input = inputRef.current; - if (input) { - focusSafely(input); - } - - // When the tray unmounts, set state.isFocused (i.e. the tray input's focus tracker) to false. - // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay - // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to "contain") - // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363 - return () => { - state.selectionManager.setFocusedKey(null); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - let { dialogProps } = useDialog( - { - 'aria-labelledby': useId(labelProps.id), - }, - popoverRef - ); - - // Override the role of the input to "searchbox" instead of "combobox". - // Since the listbox is always visible, the combobox role doesn't really give us anything. - // VoiceOver on iOS reads "double tap to collapse" when focused on the input rather than - // "double tap to edit text", as with a textbox or searchbox. We'd like double tapping to - // open the virtual keyboard rather than closing the tray. - inputProps.role = 'searchbox'; - inputProps['aria-haspopup'] = 'listbox'; - delete inputProps.onTouchEnd; - - let clearButton = ( - { - state.setInputValue(''); - let input = inputRef.current; - if (input) { - input.focus(); - } - }} - isDisabled={isDisabled} - /> - ); - - let loadingCircle = ( - - - - ); - - // Close the software keyboard on scroll to give the user a bigger area to scroll. - // But only do this if scrolling with touch, otherwise it can cause issues with touch - // screen readers. - let isTouchDown = useRef(false); - let onTouchStart = () => { - isTouchDown.current = true; - }; - - let onTouchEnd = () => { - isTouchDown.current = false; - }; - - let onScroll = useCallback(() => { - let input = inputRef.current; - let popover = popoverRef.current; - if (!input || document.activeElement !== input || !isTouchDown.current) { - return; - } - - if (popover) { - popover.focus(); - } - }, [inputRef, popoverRef, isTouchDown]); - - let inputValue = inputProps.value; - let lastInputValue = useRef(inputValue); - useEffect(() => { - if (loadingState === 'filtering' && !showLoading) { - if (!timeoutRef.current) { - timeoutRef.current = setTimeout(() => { - setShowLoading(true); - }, 500); - } - - // If user is typing, clear the timer and restart since it is a new request - if (inputValue !== lastInputValue.current) { - clearTimeout(timeoutRef.current); - timeoutRef.current = setTimeout(() => { - setShowLoading(true); - }, 500); - } - } else if (loadingState !== 'filtering') { - // If loading is no longer happening, clear any timers and hide the loading circle - setShowLoading(false); - clearTimeout(timeoutRef.current); - timeoutRef.current = undefined; - } - - lastInputValue.current = inputValue; - }, [loadingState, inputValue, showLoading]); - - let onKeyDown = (e: KeyboardEvent) => { - let popover = popoverRef.current; - // Close virtual keyboard if user hits Enter w/o any focused options - if ( - popover && - e.key === 'Enter' && - state.selectionManager.focusedKey == null - ) { - popover.focus(); - } else { - inputProps.onKeyDown?.(e); - } - }; - - return ( - - - - - {showLoading && loadingState === 'filtering' && loadingCircle} - {(state.inputValue !== '' || - loadingState === 'filtering' || - validationState != null) && - !props.isReadOnly && - clearButton} - - } - /> - - loadingState !== 'loading' && ( - - - {stringFormatter.format('noResults')} - - - ) - } - ref={listBoxRef} - onScroll={onScroll} - onLoadMore={onLoadMore} - isLoading={ - loadingState === 'loading' || loadingState === 'loadingMore' - } - /> - - - - ); -} -const _MobileComboboxMulti: ( - props: ComboboxMultiProps & { ref?: ForwardedRef } -) => ReactElement = React.forwardRef(MobileComboboxMulti as any) as any; - -export { _MobileComboboxMulti as MobileComboboxMulti }; diff --git a/design-system/pkg/src/combobox/docs/index.mdoc b/design-system/pkg/src/combobox/docs/index.mdoc index 87c3f2341..3fe12724f 100644 --- a/design-system/pkg/src/combobox/docs/index.mdoc +++ b/design-system/pkg/src/combobox/docs/index.mdoc @@ -13,9 +13,9 @@ popover to improve usability. ```jsx {% live=true %} - Compact - Regular - Spacious + Compact + Regular + Spacious ``` @@ -23,9 +23,9 @@ popover to improve usability. ### Collections -Combobox implements `react-stately` -[collection components](https://react-spectrum.adobe.com/react-stately/collections.html), -`` and `
`. +Combobox implements `react-aria-components` +[collection components](https://react-spectrum.adobe.com/react-aria-components/collections.html), +`` and ``. Static collections, seen in the example above, can be used when the full list of options is known ahead of time. @@ -49,7 +49,7 @@ let [animalId, setAnimalId] = React.useState(); return ( - {item => {item.name}} + {item => {item.name}} Selected ID: {animalId} @@ -67,27 +67,28 @@ then this is _used automatically and a **key prop is not required**_. #### Sections -Use the `
` component to group related items. Each `Section` takes a -`title` and `key` prop. +Use `` with an explicit `` to group +related items. ```jsx {% live=true %} -
- Bilby - Kangaroo - Quokka -
-
- Echidna - Dingo - Cassowary -
+ + Marsupials + Bilby + Kangaroo + Quokka + + + Other + Echidna + Dingo + Cassowary + ``` -Sections used with dynamic items are populated from a hierarchical data -structure. Similar to the combobox itself, `Section` takes an array of data -using the `items` prop. +Sections used with dynamic items are populated with an explicit +``. ```jsx {% live=true %} let items = [ @@ -116,9 +117,12 @@ return ( onSelectionChange={selected => alert(selected)} > {item => ( -
- {item => {item.name}} -
+ + {item.name} + + {item => {item.name}} + + )} ); @@ -130,8 +134,8 @@ Setting a selected item can be done by using the `defaultSelectedKey` or `selectedKey` prop. The selected key corresponds to the key of an item, where `"id"` is used by default. -See the `react-stately` -[selection docs](https://react-spectrum.adobe.com/react-stately/selection.html#selected-key-data-type) +See the `react-aria-components` +[selection docs](https://react-spectrum.adobe.com/react-aria-components/selection.html#selected-key-data-type) for more information. #### Controlled @@ -158,7 +162,7 @@ return ( selectedKey={animal} onSelectionChange={setAnimal} > - {item => {item.name}} + {item => {item.name}} ); ``` @@ -179,7 +183,7 @@ let items = [ return ( - {item => {item.name}} + {item => {item.name}} ); ``` @@ -193,21 +197,21 @@ the prop `slot="description"` must be used to distinguish it from the primary ```jsx {% live=true %} - + Read Read only - - + + Write Read and write - - + + Admin Unrestricted access - + ``` @@ -225,9 +229,9 @@ accessibility. ```jsx {% live=true %} - Compact - Regular - Spacious + Compact + Regular + Spacious ``` @@ -238,9 +242,9 @@ available. ```jsx {% live=true %} - Compact - Regular - Spacious + Compact + Regular + Spacious ``` @@ -248,9 +252,9 @@ You can also provide `disabledKeys` to limit [selection](#selection). ```jsx {% live=true %} - Compact - Regular - Spacious + Compact + Regular + Spacious ``` @@ -261,9 +265,9 @@ field remains focusable and the contents can still be copied. ```jsx {% live=true %} - Compact - Regular - Spacious + Compact + Regular + Spacious ``` @@ -273,9 +277,9 @@ A combobox can be marked as required by setting the `isRequired` prop. ```jsx {% live=true %} - Australian dollar - British pound - Japanese yen + Australian dollar + British pound + Japanese yen ``` @@ -289,9 +293,9 @@ requirements for what to choose. label="Default currency" description="Products without an ISO currency code will default to this currency." > - Australian dollar - British pound - Japanese yen + Australian dollar + British pound + Japanese yen ``` @@ -307,9 +311,9 @@ met, prompting the user to adjust what they had originally selected. isRequired selectedKey={null} > - Australian dollar - British pound - Japanese yen + Australian dollar + British pound + Japanese yen ``` @@ -319,9 +323,9 @@ The menu will assume the `width` of the invoking trigger. ```jsx {% live=true %} - Compact - Regular - Spacious + Compact + Regular + Spacious ``` @@ -333,8 +337,9 @@ should always render above. ```jsx {% live=true %} - Compact - Regular - Spacious + Compact + Regular + Spacious ``` + diff --git a/design-system/pkg/src/combobox/index.ts b/design-system/pkg/src/combobox/index.ts index 0630d0e0a..c46ab35bd 100644 --- a/design-system/pkg/src/combobox/index.ts +++ b/design-system/pkg/src/combobox/index.ts @@ -1,7 +1,12 @@ 'use client'; -export { Item } from 'react-stately/Item'; -export { Section } from 'react-stately/Section'; +export { + ListBoxItem as ComboboxItem, + ListBoxHeader as ComboboxHeader, + ListBoxLoadMoreItem as ComboboxLoadMoreItem, + ListBoxSection as ComboboxSection, +} from '@keystar/ui/listbox'; +export { Collection as ComboboxCollection } from 'react-aria-components/Collection'; export { Combobox } from './Combobox'; export { ComboboxMulti } from './ComboboxMulti'; diff --git a/design-system/pkg/src/combobox/l10n.json b/design-system/pkg/src/combobox/l10n.json deleted file mode 100644 index dfdb07bbe..000000000 --- a/design-system/pkg/src/combobox/l10n.json +++ /dev/null @@ -1,274 +0,0 @@ -{ - "ar-AE": { - "clear": "مسح", - "invalid": "(غير صالح)", - "loading": "جارٍ التحميل...", - "noResults": "لا توجد نتائج", - "buttonLabel": "عرض المقترحات", - "listboxLabel": "مقترحات" - }, - "bg-BG": { - "clear": "Изчисти", - "invalid": "(невалиден)", - "loading": "Зареждане...", - "noResults": "Няма резултати", - "buttonLabel": "Покажи предложения", - "listboxLabel": "Предложения" - }, - "cs-CZ": { - "clear": "Vymazat", - "invalid": "(neplatné)", - "loading": "Načítání...", - "noResults": "Žádné výsledky", - "buttonLabel": "Zobrazit doporučení", - "listboxLabel": "Návrhy" - }, - "da-DK": { - "clear": "Ryd", - "invalid": "(ugyldig)", - "loading": "Indlæser ...", - "noResults": "Ingen resultater", - "buttonLabel": "Vis forslag", - "listboxLabel": "Forslag" - }, - "de-DE": { - "clear": "Löschen", - "invalid": "(ungültig)", - "loading": "Wird geladen...", - "noResults": "Keine Ergebnisse", - "buttonLabel": "Empfehlungen anzeigen", - "listboxLabel": "Empfehlungen" - }, - "el-GR": { - "clear": "Καθαρισμός", - "invalid": "(δεν ισχύει)", - "loading": "Φόρτωση...", - "noResults": "Χωρίς αποτέλεσμα", - "buttonLabel": "Προβολή προτάσεων", - "listboxLabel": "Προτάσεις" - }, - "en-US": { - "clear": "Clear", - "invalid": "(invalid)", - "loading": "Loading...", - "noResults": "No results", - "buttonLabel": "Show suggestions", - "listboxLabel": "Suggestions" - }, - "es-ES": { - "clear": "Borrar", - "invalid": "(no válido)", - "loading": "Cargando...", - "noResults": "Sin resultados", - "buttonLabel": "Mostrar sugerencias", - "listboxLabel": "Sugerencias" - }, - "et-EE": { - "clear": "Puhasta", - "invalid": "(kehtetu)", - "loading": "Laadimine...", - "noResults": "Tulemusi pole", - "buttonLabel": "Kuva soovitused", - "listboxLabel": "Soovitused" - }, - "fi-FI": { - "clear": "Kirkas", - "invalid": "(epäkelpo)", - "loading": "Ladataan...", - "noResults": "Ei tuloksia", - "buttonLabel": "Näytä ehdotukset", - "listboxLabel": "Ehdotukset" - }, - "fr-FR": { - "clear": "Effacer", - "invalid": "(non valide)", - "loading": "Chargement en cours...", - "noResults": "Aucun résultat", - "buttonLabel": "Afficher les suggestions", - "listboxLabel": "Suggestions" - }, - "he-IL": { - "clear": "נקי", - "invalid": "(לא חוקי)", - "loading": "טוען...", - "noResults": "אין תוצאות", - "buttonLabel": "הצג הצעות", - "listboxLabel": "הצעות" - }, - "hr-HR": { - "clear": "Izbriši", - "invalid": "(nevažeće)", - "loading": "Učitavam...", - "noResults": "Nema rezultata", - "buttonLabel": "Prikaži prijedloge", - "listboxLabel": "Prijedlozi" - }, - "hu-HU": { - "clear": "Törlés", - "invalid": "(érvénytelen)", - "loading": "Betöltés folyamatban…", - "noResults": "Nincsenek találatok", - "buttonLabel": "Javaslatok megjelenítése", - "listboxLabel": "Javaslatok" - }, - "it-IT": { - "clear": "Cancella", - "invalid": "(non valido)", - "loading": "Caricamento in corso...", - "noResults": "Nessun risultato", - "buttonLabel": "Mostra suggerimenti", - "listboxLabel": "Suggerimenti" - }, - "ja-JP": { - "clear": "クリア", - "invalid": "(無効)", - "loading": "読み込み中...", - "noResults": "結果なし", - "buttonLabel": "候補を表示", - "listboxLabel": "候補" - }, - "ko-KR": { - "clear": "지우기", - "invalid": "(유효하지 않음)", - "loading": "로드 중...", - "noResults": "결과 없음", - "buttonLabel": "제안 사항 표시", - "listboxLabel": "제안" - }, - "lt-LT": { - "clear": "Skaidrus", - "invalid": "(netinkama)", - "loading": "Įkeliama...", - "noResults": "Be rezultatų", - "buttonLabel": "Rodyti pasiūlymus", - "listboxLabel": "Pasiūlymai" - }, - "lv-LV": { - "clear": "Notīrīt", - "invalid": "(nederīgs)", - "loading": "Notiek ielāde...", - "noResults": "Nav rezultātu", - "buttonLabel": "Rādīt ieteikumus", - "listboxLabel": "Ieteikumi" - }, - "nb-NO": { - "clear": "Tøm", - "invalid": "(ugyldig)", - "loading": "Laster inn ...", - "noResults": "Ingen resultater", - "buttonLabel": "Vis forslag", - "listboxLabel": "Forslag" - }, - "nl-NL": { - "clear": "Helder", - "invalid": "(ongeldig)", - "loading": "Laden...", - "noResults": "Geen resultaten", - "buttonLabel": "Suggesties weergeven", - "listboxLabel": "Suggesties" - }, - "pl-PL": { - "clear": "Wyczyść", - "invalid": "(nieprawidłowy)", - "loading": "Trwa ładowanie...", - "noResults": "Brak wyników", - "buttonLabel": "Wyświetlaj sugestie", - "listboxLabel": "Sugestie" - }, - "pt-BR": { - "clear": "Limpar", - "invalid": "(inválido)", - "loading": "Carregando...", - "noResults": "Nenhum resultado", - "buttonLabel": "Mostrar sugestões", - "listboxLabel": "Sugestões" - }, - "pt-PT": { - "clear": "Limpar", - "invalid": "(inválido)", - "loading": "A carregar...", - "noResults": "Sem resultados", - "buttonLabel": "Apresentar sugestões", - "listboxLabel": "Sugestões" - }, - "ro-RO": { - "clear": "Golire", - "invalid": "(nevalid)", - "loading": "Se încarcă...", - "noResults": "Niciun rezultat", - "buttonLabel": "Afișare sugestii", - "listboxLabel": "Sugestii" - }, - "ru-RU": { - "clear": "Очистить", - "invalid": "(недействительно)", - "loading": "Загрузка...", - "noResults": "Результаты отсутствуют", - "buttonLabel": "Показать предложения", - "listboxLabel": "Предложения" - }, - "sk-SK": { - "clear": "Vymazať", - "invalid": "(neplatné)", - "loading": "Načítava sa...", - "noResults": "Žiadne výsledky", - "buttonLabel": "Zobraziť návrhy", - "listboxLabel": "Návrhy" - }, - "sl-SI": { - "clear": "Jasen", - "invalid": "(neveljavno)", - "loading": "Nalaganje...", - "noResults": "Ni rezultatov", - "buttonLabel": "Prikaži predloge", - "listboxLabel": "Predlogi" - }, - "sr-SP": { - "clear": "Izbriši", - "invalid": "(nevažeće)", - "loading": "Učitavam...", - "noResults": "Nema rezultata", - "buttonLabel": "Prikaži predloge", - "listboxLabel": "Predlozi" - }, - "sv-SE": { - "clear": "Rensa", - "invalid": "(ogiltigt)", - "loading": "Läser in...", - "noResults": "Inga resultat", - "buttonLabel": "Visa förslag", - "listboxLabel": "Förslag" - }, - "tr-TR": { - "clear": "Temizle", - "invalid": "(geçersiz)", - "loading": "Yükleniyor...", - "noResults": "Sonuç yok", - "buttonLabel": "Önerileri göster", - "listboxLabel": "Öneriler" - }, - "uk-UA": { - "clear": "Очистити", - "invalid": "(недійсне)", - "loading": "Завантаження...", - "noResults": "Результатів немає", - "buttonLabel": "Показати пропозиції", - "listboxLabel": "Пропозиції" - }, - "zh-CN": { - "clear": "透明", - "invalid": "（无效）", - "loading": "正在加载...", - "noResults": "无结果", - "buttonLabel": "显示建议", - "listboxLabel": "建议" - }, - "zh-TW": { - "clear": "清除", - "invalid": "(無效)", - "loading": "正在載入...", - "noResults": "無任何結果", - "buttonLabel": "顯示建議", - "listboxLabel": "建議" - } -} diff --git a/design-system/pkg/src/combobox/stories/Combobox.stories.tsx b/design-system/pkg/src/combobox/stories/Combobox.stories.tsx index 513c7d069..6ea8745a3 100644 --- a/design-system/pkg/src/combobox/stories/Combobox.stories.tsx +++ b/design-system/pkg/src/combobox/stories/Combobox.stories.tsx @@ -9,7 +9,15 @@ import { Icon } from '@keystar/ui/icon'; import { Flex } from '@keystar/ui/layout'; import { Text } from '@keystar/ui/typography'; -import { Combobox, ComboboxProps, Item, Section } from '..'; +import { + Combobox, + ComboboxCollection, + ComboboxHeader, + ComboboxItem, + ComboboxLoadMoreItem, + ComboboxProps, + ComboboxSection, +} from '..'; let flatItems = [ { id: '1', name: 'Echidna' }, @@ -48,10 +56,10 @@ let manySections: { name: string; children: { name: string }[] }[] = []; for (let i = 0; i < 50; i++) { let children = []; for (let j = 0; j < 50; j++) { - children.push({ name: `Section ${i}, Item ${j}` }); + children.push({ name: `ComboboxSection ${i}, ComboboxItem ${j}` }); } - manySections.push({ name: 'Section ' + i, children }); + manySections.push({ name: 'ComboboxSection ' + i, children }); } const defaultActions = { @@ -73,9 +81,11 @@ export const DefaultWithControls = (args: ArgTypes) => ( {...defaultActions} {...args} > - One - Two - Three has a long label that will wrap + One + Two + + Three has a long label that will wrap + ); @@ -103,31 +113,36 @@ DefaultWithControls.argTypes = { export const Sections = () => ( -
- Bilby - Kangaroo - Quokka -
-
- Echidna - Dingo - Cassowary -
+ + Marsupials + Bilby + Kangaroo + Quokka + + + Other + Echidna + Dingo + Cassowary + ); export const Dynamic = () => ( - {item => {item.name}} + {item => {item.name}} ); export const DynamicWithSections = () => ( {section => ( -
- {item => {item.name}} -
+ + {section.name} + + {item => {item.name}} + + )} ); @@ -135,40 +150,45 @@ export const DynamicWithSections = () => ( export const ManySections = () => ( {section => ( -
- {item => {item.name}} -
+ + {section.name} + + {item => {item.name}} + + )} ); export const ComplexItems = () => ( -
- + + ComboboxSection 1 + Bold - - + + Italic - -
-
- + + + + ComboboxSection 3 + Left The description text for left is long - - + + Center has a long label that wraps - - + + Right - -
+ + ); @@ -180,9 +200,12 @@ export const DisabledKeys = () => ( {...defaultActions} > {section => ( -
- {item => {item.name}} -
+ + {section.name} + + {item => {item.name}} + + )} ); @@ -201,12 +224,9 @@ export const AutoFocus = () => render({ autoFocus: true }); export const LoadingState = () => { return ( - {render({ label: 'Combobox (loading)', loadingState: 'loading' })} - {render({ label: 'Combobox (filtering)', loadingState: 'filtering' })} - {render({ - label: 'Combobox (loading more)', - loadingState: 'loadingMore', - })} + {render({ label: 'Combobox (loading)', isLoading: true })} + {render({ label: 'Combobox (filtering)', isLoading: true })} + {render({ label: 'Combobox (loading more)', isLoading: true })} ); }; @@ -219,12 +239,18 @@ export const CustomMenuWidths = () => ( ); -function render(props: Partial>) { +function render( + props: Partial> & { isLoading?: boolean } +) { + let { isLoading, ...comboboxProps } = props; return ( - - One - Two - Three has a long label that will wrap + + One + Two + + Three has a long label that will wrap + + {isLoading && } ); } diff --git a/design-system/pkg/src/combobox/stories/ComboboxMulti.stories.tsx b/design-system/pkg/src/combobox/stories/ComboboxMulti.stories.tsx index c7a6e8c09..b1e37b6eb 100644 --- a/design-system/pkg/src/combobox/stories/ComboboxMulti.stories.tsx +++ b/design-system/pkg/src/combobox/stories/ComboboxMulti.stories.tsx @@ -9,7 +9,15 @@ import { Icon } from '@keystar/ui/icon'; import { Flex } from '@keystar/ui/layout'; import { Text } from '@keystar/ui/typography'; -import { ComboboxMulti, ComboboxMultiProps, Item, Section } from '../index'; +import { + ComboboxCollection, + ComboboxHeader, + ComboboxItem, + ComboboxLoadMoreItem, + ComboboxMulti, + ComboboxMultiProps, + ComboboxSection, +} from '../index'; let flatItems = [ { id: '1', name: 'Echidna' }, @@ -48,10 +56,10 @@ let manySections: { name: string; children: { name: string }[] }[] = []; for (let i = 0; i < 50; i++) { let children = []; for (let j = 0; j < 50; j++) { - children.push({ name: `Section ${i}, Item ${j}` }); + children.push({ name: `ComboboxSection ${i}, ComboboxItem ${j}` }); } - manySections.push({ name: 'Section ' + i, children }); + manySections.push({ name: 'ComboboxSection ' + i, children }); } const defaultActions = { @@ -73,9 +81,11 @@ export const DefaultWithControls = (args: ArgTypes) => ( {...defaultActions} {...args} > - One - Two - Three has a long label that will wrap + One + Two + + Three has a long label that will wrap + ); @@ -103,16 +113,18 @@ DefaultWithControls.argTypes = { export const Sections = () => ( -
- Bilby - Kangaroo - Quokka -
-
- Echidna - Dingo - Cassowary -
+ + Marsupials + Bilby + Kangaroo + Quokka + + + Other + Echidna + Dingo + Cassowary + ); @@ -122,7 +134,7 @@ export const Dynamic = () => ( defaultItems={flatItems} {...defaultActions} > - {item => {item.name}} + {item => {item.name}} ); @@ -133,9 +145,12 @@ export const DynamicWithSections = () => ( {...defaultActions} > {section => ( -
- {item => {item.name}} -
+ + {section.name} + + {item => {item.name}} + + )} ); @@ -143,40 +158,45 @@ export const DynamicWithSections = () => ( export const ManySections = () => ( {section => ( -
- {item => {item.name}} -
+ + {section.name} + + {item => {item.name}} + + )} ); export const ComplexItems = () => ( -
- + + ComboboxSection 1 + Bold - - + + Italic - -
-
- + + + + ComboboxSection 3 + Left The description text for left is long - - + + Center has a long label that wraps - - + + Right - -
+ + ); @@ -188,46 +208,53 @@ export const DisabledKeys = () => ( {...defaultActions} > {section => ( -
- {item => {item.name}} -
+ + {section.name} + + {item => {item.name}} + + )} ); -export const IsDisabled = () => - render({ isDisabled: true, selectedKeys: ['One'] }); +export const IsDisabled = () => render({ isDisabled: true, value: ['One'] }); -export const IsReadOnly = () => - render({ isReadOnly: true, selectedKeys: ['One'] }); +export const IsReadOnly = () => render({ isReadOnly: true, value: ['One'] }); export const IsRequired = () => - render({ isRequired: true, defaultSelectedKeys: ['One'] }); + render({ isRequired: true, defaultValue: ['One'] }); export const AutoFocus = () => render({ autoFocus: true }); export const LoadingState = () => { return ( - {render({ label: 'ComboboxMulti (loading)', loadingState: 'loading' })} + {render({ label: 'ComboboxMulti (loading)', isLoading: true })} {render({ label: 'ComboboxMulti (filtering)', - loadingState: 'filtering', + isLoading: true, })} {render({ label: 'ComboboxMulti (loading more)', - loadingState: 'loadingMore', + isLoading: true, })} ); }; -function render(props: Partial>) { +function render( + props: Partial> & { isLoading?: boolean } +) { + let { isLoading, ...comboboxProps } = props; return ( - - One - Two - Three has a long label that will wrap + + One + Two + + Three has a long label that will wrap + + {isLoading && } ); } diff --git a/design-system/pkg/src/combobox/test/Combobox.test.tsx b/design-system/pkg/src/combobox/test/Combobox.test.tsx index 1a635a15c..bd56da40c 100644 --- a/design-system/pkg/src/combobox/test/Combobox.test.tsx +++ b/design-system/pkg/src/combobox/test/Combobox.test.tsx @@ -4,7 +4,7 @@ import { beforeAll, expect, jest, describe, it } from '@jest/globals'; import { act, fireEvent, firePress, renderWithProvider } from '#test-utils'; -import { Combobox, Item } from '..'; +import { Combobox, ComboboxItem } from '..'; let onChange = jest.fn(); let onOpenChange = jest.fn(); @@ -23,9 +23,9 @@ let defaultProps = { const ExampleCombobox = forwardRef((props = {}, ref: any) => ( - Item one - Item two - Item three + ComboboxItem one + ComboboxItem two + ComboboxItem three )); @@ -139,4 +139,28 @@ describe('combobox/Combobox', () => { expect(onOpenChange).not.toHaveBeenCalled(); expect(onInputChange).not.toHaveBeenCalled(); }); + + it('keeps virtual listbox focus in sync with input keyboard navigation', function () { + let tree = renderCombobox(); + let combobox = tree.getByRole('combobox'); + + act(() => { + combobox.focus(); + fireEvent.keyDown(combobox, { key: 'ArrowDown', code: 40, charCode: 40 }); + fireEvent.keyUp(combobox, { key: 'ArrowDown', code: 40, charCode: 40 }); + jest.runAllTimers(); + }); + + let options = tree.getAllByRole('option'); + expect(options[0]).toHaveAttribute('data-focused', 'true'); + + act(() => { + fireEvent.keyDown(combobox, { key: 'ArrowDown', code: 40, charCode: 40 }); + fireEvent.keyUp(combobox, { key: 'ArrowDown', code: 40, charCode: 40 }); + jest.runAllTimers(); + }); + + expect(options[0]).not.toHaveAttribute('data-focused'); + expect(options[1]).toHaveAttribute('data-focused', 'true'); + }); }); diff --git a/design-system/pkg/src/combobox/types.ts b/design-system/pkg/src/combobox/types.ts index 72ac2d4e8..db78179c2 100644 --- a/design-system/pkg/src/combobox/types.ts +++ b/design-system/pkg/src/combobox/types.ts @@ -1,88 +1,24 @@ -import type { AriaComboBoxProps } from 'react-aria/useComboBox'; -import { - AsyncLoadable, - CollectionBase, - FocusableProps, - Key, - LoadingState, - MultipleSelection, - TextInputBase, - Validation, -} from '@react-types/shared'; +import type { ComboBoxProps as AriaComboBoxProps } from 'react-aria-components/ComboBox'; +import type { ListBoxProps } from '@keystar/ui/listbox'; -import { FieldProps } from '@keystar/ui/field'; -import { BaseStyleProps } from '@keystar/ui/style'; +import type { FieldProps } from '@keystar/ui/field'; +import type { BaseStyleProps } from '@keystar/ui/style'; -type CommonProps = { - /** - * Alignment of the menu, relative to the combobox. Only relevant when - * used in combination with the `menuWidth` prop. - * @default 'start' - */ - align?: 'start' | 'end'; - /** - * Direction the menu will render relative to the combobox. - * @default 'bottom' - */ - direction?: 'bottom' | 'top'; - /** The current loading state of the Combobox. Determines whether or not the - * progress circle should be shown. */ - loadingState?: LoadingState; - /** - * The interaction required to display the menu. - * - * NOTE: this prop has no effect on the mobile experience. - * @default 'input' - */ - menuTrigger?: 'focus' | 'input' | 'manual'; - /** - * A fixed width for the menu. By default, the menu will match the - * width of the combobox. Values less than the width of the combobox are ignored. - * - * NOTE: this prop has no effect on the mobile experience. - */ - menuWidth?: number; - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean; -}; - -export type ComboboxProps = Omit< - AriaComboBoxProps, - 'menuTrigger' | keyof FieldProps +type CommonProps = Omit< + AriaComboBoxProps, + 'children' | 'className' | 'style' | keyof FieldProps > & + Pick, 'children' | 'dependencies'> & FieldProps & - BaseStyleProps & - Omit & - CommonProps; + BaseStyleProps & { + align?: 'start' | 'end'; + direction?: 'bottom' | 'top'; + menuWidth?: number; + placeholder?: string; + shouldFlip?: boolean; + }; -export interface ComboboxMultiValidationValue { - /** The selected key in the ComboBox. */ - selectedKeys: Set; - /** The value of the ComboBox input. */ - inputValue: string; -} -export interface ComboboxMultiProps - extends CollectionBase, - Omit, - Omit, - TextInputBase, - FocusableProps, - Validation, - CommonProps, - FieldProps { - /** The list of ComboBox items (uncontrolled). */ - defaultItems?: Iterable; - /** The list of ComboBox items (controlled). */ - items?: Iterable; - /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ - onOpenChange?: (isOpen: boolean) => void; - /** The value of the ComboBox input (controlled). */ - inputValue?: string; - /** The default value of the ComboBox input (uncontrolled). */ - defaultInputValue?: string; - /** Handler that is called when the ComboBox input value changes. */ - onInputChange?: (value: string) => void; -} +export type ComboboxProps = CommonProps; +export type ComboboxMultiProps = CommonProps & { + selectionMode?: 'multiple'; +}; diff --git a/design-system/pkg/src/combobox/useComboboxMulti.ts b/design-system/pkg/src/combobox/useComboboxMulti.ts deleted file mode 100644 index 426348f42..000000000 --- a/design-system/pkg/src/combobox/useComboboxMulti.ts +++ /dev/null @@ -1,286 +0,0 @@ -import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { useMenuTrigger } from 'react-aria/useMenu'; -import { getItemId, listData } from 'react-aria/private/listbox/utils'; -import { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside'; -import { ListKeyboardDelegate } from 'react-aria/ListKeyboardDelegate'; -import { useSelectableCollection } from 'react-aria/private/selection/useSelectableCollection'; -import { useTextField } from 'react-aria/useTextField'; -import { chain } from 'react-aria/chain'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useLabels } from 'react-aria/private/utils/useLabels'; -import { - KeyboardDelegate, - KeyboardEvent, - LayoutDelegate, - RefObject, - PressEvent, -} from '@react-types/shared'; - -import { FocusEvent, useEffect, useMemo, useRef } from 'react'; - -import localizedMessages from './l10n'; -import { ComboboxMultiProps } from './types'; -import { ComboboxMultiState } from './useComboboxMultiState'; - -export interface ComboboxMultiOptions - extends Omit, 'children'> { - /** The ref for the input element. */ - inputRef: RefObject; - /** The ref for the list box popover. */ - popoverRef: RefObject; - /** The ref for the list box. */ - listBoxRef: RefObject; - /** The ref for the optional list box popup trigger button. */ - buttonRef?: RefObject; - /** An optional keyboard delegate implementation, to override the default. */ - keyboardDelegate?: KeyboardDelegate; - /** - * A delegate object that provides layout information for items in the collection. - * By default this uses the DOM, but this can be overridden to implement things like - * virtualized scrolling. - */ - layoutDelegate?: LayoutDelegate; - /** Whether the combo box menu should close on blur. */ - shouldCloseOnBlur?: boolean; -} - -export function useComboboxMulti( - props: ComboboxMultiOptions, - state: ComboboxMultiState -) { - let { - isDisabled, - isReadOnly, - menuTrigger = 'input', - buttonRef: buttonRefProp, - inputRef, - keyboardDelegate, - layoutDelegate, - listBoxRef, - popoverRef, - shouldCloseOnBlur = true, - } = props; - - // combobox doesn't require a button element, so we need a backup ref for the - // menu trigger hook - let backupBtnRef = useRef(null); - let buttonRef = buttonRefProp ?? backupBtnRef; - let { menuTriggerProps, menuProps } = useMenuTrigger( - { - type: 'listbox', - isDisabled: isDisabled || isReadOnly, - }, - state, - buttonRef - ); - - // Set listbox id so it can be used when calling getItemId later - listData.set(state, { id: menuProps.id! }); - - let stringFormatter = useLocalizedStringFormatter(localizedMessages); - - // By default, a KeyboardDelegate is provided which uses the DOM to query - // layout information (e.g. for page up/page down). When virtualized, the - // layout object will be passed in as a prop and override this. - let delegate = useMemo( - () => - keyboardDelegate || - new ListKeyboardDelegate({ - collection: state.collection, - disabledKeys: state.selectionManager.disabledKeys, - ref: listBoxRef, - layoutDelegate, - }), - [ - keyboardDelegate, - layoutDelegate, - state.collection, - state.selectionManager.disabledKeys, - listBoxRef, - ] - ); - - // Use useSelectableCollection to get the keyboard handlers to apply to the textfield - let { collectionProps } = useSelectableCollection({ - selectionManager: state.selectionManager, - keyboardDelegate: delegate, - disallowTypeAhead: true, - disallowEmptySelection: true, - shouldFocusWrap: true, - ref: inputRef, - // This would be nice but it'd have to work with the _filtered_ collection - disallowSelectAll: true, - // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component - isVirtualized: true, - }); - - useEffect(() => { - if (state.isOpen) { - return ariaHideOutside( - [inputRef.current, popoverRef.current].filter( - element => element != null - ) - ); - } - }, [state.isOpen, inputRef, popoverRef]); - - // TextField - // --------------------------------------------------------------------------- - - let onKeyDown = (e: KeyboardEvent) => { - // Ignore composition events for CJK input - if (e.nativeEvent.isComposing) { - return; - } - - switch (e.key) { - case 'Enter': - // Prevent form submission when open, assume the intent is selection - if (state.isOpen) { - e.preventDefault(); - } - if (state.selectionManager.focusedKey) { - state.selectionManager.select(state.selectionManager.focusedKey); - } - - // Clear the input value after selection but keep the menu open - state.setInputValue(''); - break; - case 'Escape': - // Propagate the event when closed, assume the intent is to dismiss a - // parental the dialog - if (!state.isOpen) { - e.continuePropagation(); - } - - state.close(); - break; - case 'ArrowDown': - state.open('first'); - break; - case 'ArrowUp': - state.open('last'); - break; - case 'ArrowLeft': - case 'ArrowRight': - state.selectionManager.setFocusedKey(null); - break; - } - }; - let onBlur = (e: FocusEvent) => { - props.onBlur?.(e); - if (shouldCloseOnBlur) { - state.close(); - } - }; - let onFocus = (e: FocusEvent) => { - props.onFocus?.(e); - if (menuTrigger === 'focus' && !props.isReadOnly) { - state.open(); - } - state.selectionManager.setFocused(true); - }; - - let { labelProps, inputProps, descriptionProps, errorMessageProps } = - useTextField( - { - ...props, - onBlur, - onFocus, - onChange: state.setInputValue, - onKeyDown: !props.isReadOnly - ? chain( - state.isOpen && collectionProps.onKeyDown, - onKeyDown, - props.onKeyDown - ) - : props.onKeyDown, - autoComplete: 'off', - validate: undefined, - value: state.inputValue, - }, - inputRef - ); - - // Button - // --------------------------------------------------------------------------- - - let onPress = (e: PressEvent) => { - if (e.pointerType === 'touch') { - // Focus the input field in case it isn't focused yet - inputRef.current?.focus(); - state.toggle(); - } - }; - let onPressStart = (e: PressEvent) => { - if (e.pointerType !== 'touch') { - inputRef.current?.focus(); - let strategy = - e.pointerType === 'keyboard' || e.pointerType === 'virtual' - ? ('first' as const) - : null; - state.toggle(strategy); - } - }; - - // Misc. - // --------------------------------------------------------------------------- - - let { isInvalid, validationErrors, validationDetails } = - state.displayValidation; - let focusedItem = - state.selectionManager.focusedKey != null && state.isOpen - ? state.collection.getItem(state.selectionManager.focusedKey) - : undefined; - - let triggerLabelProps = useLabels({ - id: menuTriggerProps.id, - 'aria-label': stringFormatter.format('buttonLabel'), - 'aria-labelledby': props['aria-labelledby'] || labelProps.id, - }); - let listBoxProps = useLabels({ - id: menuProps.id, - 'aria-label': stringFormatter.format('listboxLabel'), - 'aria-labelledby': props['aria-labelledby'] || labelProps.id, - }); - - return { - buttonProps: { - ...menuTriggerProps, - ...triggerLabelProps, - excludeFromTabOrder: true, - isDisabled: props.isDisabled || props.isReadOnly, - onPress, - onPressStart, - }, - descriptionProps, - errorMessageProps, - inputProps: mergeProps(inputProps, { - role: 'combobox', - 'aria-expanded': menuTriggerProps['aria-expanded'], - 'aria-controls': state.isOpen ? menuProps.id : undefined, - 'aria-autocomplete': 'list', - 'aria-activedescendant': focusedItem - ? getItemId(state, focusedItem.key) - : undefined, - // onTouchEnd, - // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions. - autoCorrect: 'off', - // This disable's the macOS Safari spell check auto corrections. - spellCheck: 'false', - }), - listBoxProps: mergeProps(menuProps, listBoxProps, { - onAction: undefined, - // autoFocus: state.focusStrategy, - shouldUseVirtualFocus: true, - shouldSelectOnPressUp: true, - shouldFocusOnHover: true, - // layout: layoutDelegate, - linkBehavior: 'selection' as const, - }), - labelProps, - isInvalid, - validationErrors, - validationDetails, - }; -} diff --git a/design-system/pkg/src/combobox/useComboboxMultiState.ts b/design-system/pkg/src/combobox/useComboboxMultiState.ts deleted file mode 100644 index bbfa3f2a0..000000000 --- a/design-system/pkg/src/combobox/useComboboxMultiState.ts +++ /dev/null @@ -1,272 +0,0 @@ -import { useFilter } from 'react-aria/useFilter'; -import { getChildNodes } from 'react-stately/private/collections/getChildNodes'; -import { - FormValidationState, - useFormValidationState, -} from 'react-stately/private/form/useFormValidationState'; -import { ListCollection } from 'react-stately/private/list/ListCollection'; -import { ListState, useListState } from 'react-stately/useListState'; -import { - MenuTriggerState, - useMenuTriggerState, -} from 'react-stately/useMenuTriggerState'; -import { useControlledState } from 'react-stately/useControlledState'; -import { useCallback, useEffect, useMemo, useState } from 'react'; -import { - Collection, - CollectionStateBase, - FocusStrategy, - Node, -} from '@react-types/shared'; - -import { usePrevious } from '../utils'; -import { ComboboxMultiProps } from './types'; - -export interface ComboboxMultiStateOptions - extends Omit, 'children'>, - CollectionStateBase { - /** Whether the combo box allows the menu to be open when the collection is empty. */ - allowsEmptyCollection?: boolean; -} - -export interface ComboboxMultiState - extends ListState, - MenuTriggerState, - FormValidationState { - /** Whether the select is currently focused. */ - // readonly isFocused: boolean, - - /** Sets whether the select is focused. */ - // setFocused(isFocused: boolean): void, - - /** Controls which item will be auto focused when the menu opens. */ - // readonly focusStrategy: FocusStrategy | null, - - /** Opens the menu. */ - // open(focusStrategy?: FocusStrategy | null): void, - - /** Toggles the menu. */ - // toggle(focusStrategy?: FocusStrategy | null): void - /** The current value of the combo box input. */ - inputValue: string; - /** Sets the value of the combo box input. */ - setInputValue(value: string): void; -} - -export function useComboboxMultiState( - props: ComboboxMultiStateOptions -): ComboboxMultiState { - let { allowsEmptyCollection = false, menuTrigger = 'input' } = props; - let [showAllItems, setShowAllItems] = useState(false); - let listState = useListState({ - ...props, - items: props.items ?? props.defaultItems, - selectionBehavior: 'toggle', - selectionMode: 'multiple', - }); - let triggerState = useMenuTriggerState({ - ...props, - onOpenChange: props.onOpenChange, - isOpen: undefined, - defaultOpen: undefined, - }); - let [inputValue, setInputValue] = useControlledState( - props.inputValue, - props.defaultInputValue ?? '', - props.onInputChange - ); - let lastInputValue = usePrevious(inputValue); - - // Preserve original collection so we can show all items on demand - let { collection } = listState; - let originalCollection = collection; - let { contains } = useFilter({ sensitivity: 'base' }); - let filteredCollection = useMemo(() => { - // No filter if items are controlled - if (props.items != null) { - return collection; - } - - return filterCollection(collection, inputValue, contains); - }, [collection, inputValue, contains, props.items]); - let [lastCollection, setLastCollection] = useState(filteredCollection); - let updateLastCollection = useCallback(() => { - setLastCollection(showAllItems ? originalCollection : filteredCollection); - }, [showAllItems, originalCollection, filteredCollection]); - - let closeMenu = () => { - // keep the old collection while closing the menu - updateLastCollection(); - triggerState.close(); - }; - let close = () => { - // clear the input on user initiated close - setInputValue(''); - closeMenu(); - }; - let open = (focusStrategy: FocusStrategy | null = null) => { - let displayAllItems = menuTrigger === 'focus'; - // Prevent open operations from triggering if there is nothing to display: - // - Also prevent open operations from triggering if items are uncontrolled - // but defaultItems is empty, even if displayAllItems is true. - // - This is to prevent comboboxes with empty defaultItems from opening but - // allow controlled items comboboxes to open even if the inital list is - // empty. - if ( - allowsEmptyCollection || - filteredCollection.size > 0 || - (displayAllItems && originalCollection.size > 0) || - props.items - ) { - if ( - displayAllItems && - !triggerState.isOpen && - props.items === undefined - ) { - // Show all items if menu is manually opened. Ignored if items are controlled - setShowAllItems(true); - } - - triggerState.open(focusStrategy); - } - }; - - let toggle = (focusStrategy: FocusStrategy | null = null) => { - let displayAllItems = menuTrigger === 'focus'; - // If the menu is closed and there is nothing to display, early return so - // toggle isn't called to prevent extraneous onOpenChange - if ( - !( - allowsEmptyCollection || - filteredCollection.size > 0 || - (displayAllItems && originalCollection.size > 0) || - props.items - ) && - !triggerState.isOpen - ) { - return; - } - - if (displayAllItems && !triggerState.isOpen && props.items === undefined) { - // Show all items if menu is toggled open. Ignored if items are controlled - setShowAllItems(true); - } - - triggerState.toggle(focusStrategy); - - // keep the old collection while closing the menu - if (triggerState.isOpen) { - updateLastCollection(); - } - }; - - // commit controlled selection on close - let commit = () => { - if (props.selectedKeys !== undefined && props.inputValue !== undefined) { - props.onSelectionChange?.(listState.selectionManager.selectedKeys); - } - - close(); - }; - - useEffect(() => { - // Open the menu when the input value changes - if (!triggerState.isOpen && inputValue && inputValue !== lastInputValue) { - triggerState.open(); - } - - // Close the menu if the collection is empty. Don't close menu if filtered collection size is 0 - // but we are currently showing all items via button press - if ( - !showAllItems && - !allowsEmptyCollection && - triggerState.isOpen && - filteredCollection.size === 0 - ) { - closeMenu(); - } - }); - - let validation = useFormValidationState({ - ...props, - value: useMemo( - () => ({ - inputValue, - selectedKeys: listState.selectionManager.selectedKeys, - }), - [inputValue, listState.selectionManager.selectedKeys] - ), - }); - - let displayedCollection = useMemo(() => { - if (triggerState.isOpen) { - if (showAllItems) { - return originalCollection; - } else { - return filteredCollection; - } - } else { - return lastCollection; - } - }, [ - triggerState.isOpen, - originalCollection, - filteredCollection, - showAllItems, - lastCollection, - ]); - - return { - ...validation, - focusStrategy: triggerState.focusStrategy, - isOpen: triggerState.isOpen, - setOpen: triggerState.setOpen, - toggle, - open, - close: commit, - selectionManager: listState.selectionManager, - disabledKeys: listState.disabledKeys, - collection: displayedCollection, - inputValue, - setInputValue, - }; -} - -type FilterFn = (textValue: string, inputValue: string) => boolean; - -function filterCollection( - collection: Collection>, - inputValue: string, - filter: FilterFn -): Collection> { - return new ListCollection( - filterNodes(collection, collection, inputValue, filter) - ); -} - -function filterNodes( - collection: Collection>, - nodes: Iterable>, - inputValue: string, - filter: FilterFn -): Iterable> { - let filteredNode: Node[] = []; - for (let node of nodes) { - if (node.type === 'section' && node.hasChildNodes) { - let filtered = filterNodes( - collection, - getChildNodes(node, collection), - inputValue, - filter - ); - if ([...filtered].some(node => node.type === 'item')) { - filteredNode.push({ ...node, childNodes: filtered }); - } - } else if (node.type === 'item' && filter(node.textValue, inputValue)) { - filteredNode.push({ ...node }); - } else if (node.type !== 'item') { - filteredNode.push({ ...node }); - } - } - return filteredNode; -} diff --git a/design-system/pkg/src/contextual-help/ContextualHelp.tsx b/design-system/pkg/src/contextual-help/ContextualHelp.tsx index 18a51f0e8..875ef1383 100644 --- a/design-system/pkg/src/contextual-help/ContextualHelp.tsx +++ b/design-system/pkg/src/contextual-help/ContextualHelp.tsx @@ -1,6 +1,4 @@ import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useLabels } from 'react-aria/private/utils/useLabels'; import { ForwardRefExoticComponent, ForwardedRef, @@ -29,14 +27,20 @@ export const ContextualHelp: ForwardRefExoticComponent< let { children, variant = 'help', ...otherProps } = props; let stringFormatter = useLocalizedStringFormatter(localizedMessages); - let labelProps = useLabels(otherProps, stringFormatter.format(variant)); + let ariaLabel = + otherProps['aria-label'] ?? + (otherProps['aria-labelledby'] + ? undefined + : stringFormatter.format(variant)); let icon = variant === 'info' ? infoIcon : helpCircleIcon; return ( & BaseStyleProps & DOMProps & AriaLabelingProps; diff --git a/design-system/pkg/src/core/KeystarProvider.tsx b/design-system/pkg/src/core/KeystarProvider.tsx index 94ca830d4..ba7d8d8c9 100644 --- a/design-system/pkg/src/core/KeystarProvider.tsx +++ b/design-system/pkg/src/core/KeystarProvider.tsx @@ -1,10 +1,5 @@ import { HTMLAttributes, useContext } from 'react'; -import { I18nProvider, useLocale } from 'react-aria/I18nProvider'; -import { - ModalProvider, - useModalProvider, -} from 'react-aria/private/overlays/useModal'; -import { RouterProvider } from 'react-aria/private/utils/openLink'; +import { I18nProvider, RouterProvider, useLocale } from 'react-aria-components'; import { filterDOMProps } from 'react-aria/filterDOMProps'; import { @@ -93,7 +88,7 @@ export const KeystarProvider = forwardRefWithAs( - {contents} + {contents} @@ -107,12 +102,10 @@ const ProviderWrapper = forwardRefWithAs< >(function ProviderWrapper(props, forwardedRef) { let { children, style } = props; let { locale, direction } = useLocale(); - let { modalProviderProps } = useModalProvider(); let { colorScheme } = useProvider(); const ElementType = props.elementType ?? 'div'; return ( - First - Second - Third + First + Second + Third ( props: DateFieldProps, ref: Ref ) { props = useProviderProps(props); - let { autoFocus, isDisabled, isReadOnly } = props; - let domRef = useFocusManagerRef(ref); - let { locale } = useLocale(); - let state = useDateFieldState({ - ...props, - locale, - createCalendar, - }); - - let fieldRef = useRef(null); - let inputRef = useRef(null); - let { - descriptionProps, - errorMessageProps, - fieldProps, - inputProps, - labelProps, - } = useDateField({ ...props, inputRef }, state, fieldRef); - - // Note: this description is intentionally not passed to useDatePicker. - // The format help text is unnecessary for screen reader users because each segment already has a label. let description = useFormatHelpText(props); - if (description && !props.description) { - let { id, ..._descriptionProps } = descriptionProps; - descriptionProps = _descriptionProps; - } - if (props.errorMessage) { - state = { - ...state, - validationState: 'invalid', - }; - } + let { + contextualHelp, + errorMessage, + isRequired, + label, + labelElementType: _labelElementType, + ...otherProps + } = props; + let styleProps = useStyleProps(props); return ( - )} ref={domRef} - description={description} - labelElementType="span" - labelProps={labelProps} - descriptionProps={descriptionProps} - errorMessageProps={errorMessageProps} - // validationState={state.validationState} + isInvalid={Boolean(errorMessage)} + isRequired={isRequired} + className={classNames(fieldRootClassName, styleProps.className)} + style={styleProps.style} > - - {state.segments.map((segment, i) => ( - - ))} - - - + + {description} + + {errorMessage} + ); } diff --git a/design-system/pkg/src/date-time/DatePicker.tsx b/design-system/pkg/src/date-time/DatePicker.tsx index 0e52db037..c457695f5 100644 --- a/design-system/pkg/src/date-time/DatePicker.tsx +++ b/design-system/pkg/src/date-time/DatePicker.tsx @@ -1,33 +1,39 @@ -import { useDatePicker } from 'react-aria/useDatePicker'; -import { useFocusRing } from 'react-aria/useFocusRing'; -import { useHover } from 'react-aria/useHover'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useDatePickerState } from 'react-stately/useDatePickerState'; -import { DateValue } from 'react-stately/useCalendarState'; -import React, { ReactElement, Ref, useRef } from 'react'; +import { + DatePicker as AriaDatePicker, + type DatePickerProps as AriaDatePickerProps, + type DateValue, +} from 'react-aria-components/DatePicker'; +import { Dialog } from 'react-aria-components/Dialog'; +import { Group } from 'react-aria-components/Group'; +import React, { ReactElement, Ref } from 'react'; import { FieldButton } from '@keystar/ui/button'; import { Calendar } from '@keystar/ui/calendar'; import { useProviderProps } from '@keystar/ui/core'; -import { FieldPrimitive } from '@keystar/ui/field'; import { Icon } from '@keystar/ui/icon'; +import { Popover } from '@keystar/ui/overlays'; import { calendarDaysIcon } from '@keystar/ui/icon/icons/calendarDaysIcon'; import { + classNames, css, - toDataAttributes, + filterStyleProps, tokenSchema, - transition, + useStyleProps, } from '@keystar/ui/style'; -import { DatePickerField } from './DatePickerField'; -import { DatePickerPopover } from './DatePickerPopover'; -import { Input } from './Input'; import { DatePickerProps } from './types'; +import { SegmentedDateInput } from './SegmentedDateInput'; import { useFocusManagerRef, useFormatHelpText, useVisibleMonths, } from './utils'; +import { + FieldDescriptionElement, + FieldErrorElement, + FieldLabelElement, + fieldRootClassName, +} from '../field/FieldElements'; function DatePicker( props: DatePickerProps, @@ -35,193 +41,122 @@ function DatePicker( ) { props = useProviderProps(props); let { - autoFocus, - isDisabled, - isReadOnly, + contextualHelp, + errorMessage, + isRequired, + label, + labelElementType: _labelElementType, maxVisibleMonths = 1, pageBehavior, + shouldFlip, + ...otherProps } = props; - let { hoverProps, isHovered } = useHover({ isDisabled }); - - let triggerRef = useRef(null); - let domRef = useFocusManagerRef(forwardedRef); - let state = useDatePickerState(props); - if (props.errorMessage) { - state = { - ...state, - validationState: 'invalid', - }; - } - let { - buttonProps, - calendarProps, - descriptionProps, - dialogProps, - errorMessageProps, - fieldProps, - groupProps, - labelProps, - } = useDatePicker(props, state, triggerRef); - - let { isFocused, focusProps } = useFocusRing({ - within: true, - isTextInput: true, - autoFocus, - }); - - let { isFocused: isFocusedButton, focusProps: focusPropsButton } = - useFocusRing({ - within: false, - isTextInput: false, - autoFocus, - }); - - // Note: this description is intentionally not passed to useDatePicker. - // The format help text is unnecessary for screen reader users because each segment already has a label. let description = useFormatHelpText(props); - if (description && !props.description) { - const { id, ..._descriptionProps } = descriptionProps; - descriptionProps = _descriptionProps; - } - let visibleMonths = useVisibleMonths(maxVisibleMonths); - - let styleProps = usePickerStyles({ - isHovered, - isFocused, - // prefer focusring appearance, regardless of input modality. otherwise it looks like a read-only field - isFocusVisible: isFocused && !isFocusedButton, - isDisabled, - isReadOnly, - isInvalid: state.isInvalid, - }); + let domRef = useFocusManagerRef(forwardedRef); + let styleProps = useStyleProps(props); return ( - )} ref={domRef} - description={description} - labelElementType="span" - labelProps={labelProps} - descriptionProps={descriptionProps} - errorMessageProps={errorMessageProps} - // validationState={state.validationState} + isInvalid={Boolean(errorMessage)} + isRequired={isRequired} + className={classNames( + fieldRootClassName, + pickerRootClassName, + styleProps.className + )} + style={styleProps.style} > -
- - {/* @ts-expect-error can't reconcile changes to react-aria errorMessage fn type */} - - + + {description} + + - - - -
- + + + +
+ +
+ + + {errorMessage} + ); } -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref - -/** - * DatePickers combine a DateField and a Calendar popover to allow users to - * enter or select a date and time value. - */ +/** Date pickers combine segmented input with a calendar popover. */ const _DatePicker: ( props: DatePickerProps & { ref?: Ref } ) => ReactElement = React.forwardRef(DatePicker as any) as any; export { _DatePicker as DatePicker }; -export function usePickerStyles(state: { - isHovered: boolean; - isFocused: boolean; - isFocusVisible: boolean; - isDisabled?: boolean; - isReadOnly?: boolean; - isInvalid?: boolean; -}) { - let root = { - ...toDataAttributes(state, { - omitFalsyValues: true, - trimBooleanKeys: true, - }), - className: css({ - borderRadius: tokenSchema.size.radius.regular, - display: 'flex', - position: 'relative', - - '&::after': { - borderRadius: `inherit`, - content: '""', - inset: tokenSchema.size.border.regular, - margin: 0, - pointerEvents: 'none', - position: 'absolute' as const, - transition: transition(['box-shadow', 'margin'], { - easing: 'easeOut', - }), - }, - '&[data-focus-visible]::after': { - boxShadow: `0 0 0 ${tokenSchema.size.alias.focusRing} ${tokenSchema.color.alias.focusRing}`, - }, - }), - }; - let input = { - className: css({ - borderStartEndRadius: 0, - borderEndEndRadius: 0, - borderInlineEndWidth: 0, - - [`.${root.className}[data-focused] &`]: { - borderColor: tokenSchema.color.alias.borderFocused, - }, - }), - }; - let button = { - UNSAFE_className: css({ - borderStartStartRadius: 0, - borderEndStartRadius: 0, - - [`.${root.className}[data-read-only] &`]: { - borderColor: tokenSchema.color.alias.borderIdle, - }, - [`.${root.className}[data-invalid] &`]: { - borderColor: tokenSchema.color.alias.borderInvalid, - }, - [`.${root.className}[data-focused] &`]: { - borderColor: tokenSchema.color.alias.borderFocused, - }, - [`.${root.className}[data-disabled] &`]: { - borderColor: 'transparent', - }, - }), - }; - - return { button, input, root }; -} +export const pickerGroupClassName = css({ + borderRadius: tokenSchema.size.radius.regular, + display: 'flex', + position: 'relative', +}); + +export const pickerRootClassName = css({ + [`&[data-focus-within] .${pickerGroupClassName}`]: { + borderColor: tokenSchema.color.alias.borderFocused, + }, +}); + +export const pickerInputClassName = css({ + borderEndEndRadius: 0, + borderInlineEndWidth: 0, + borderStartEndRadius: 0, +}); + +export const pickerButtonClassName = css({ + borderEndStartRadius: 0, + borderStartStartRadius: 0, +}); + +export const pickerPopoverClassName = css({ + backgroundColor: tokenSchema.color.background.surface, + border: `${tokenSchema.size.border.regular} solid ${tokenSchema.color.border.emphasis}`, + borderRadius: tokenSchema.size.radius.medium, + boxSizing: 'content-box', + filter: `drop-shadow(0 1px 4px ${tokenSchema.color.shadow.regular})`, + outline: 0, +}); + +export const pickerDialogClassName = css({ + display: 'flex', + justifyContent: 'center', + maxHeight: 'inherit', + outline: 0, + overflowY: 'auto', + WebkitOverflowScrolling: 'touch', +}); + +export const pickerCalendarContainerClassName = css({ + paddingInline: tokenSchema.size.space.medium, + paddingTop: tokenSchema.size.space.medium, + '&::after': { + content: '""', + display: 'block', + height: tokenSchema.size.space.medium, + }, +}); diff --git a/design-system/pkg/src/date-time/DatePickerField.tsx b/design-system/pkg/src/date-time/DatePickerField.tsx deleted file mode 100644 index b3801366b..000000000 --- a/design-system/pkg/src/date-time/DatePickerField.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { DateValue, createCalendar } from '@internationalized/date'; -import { useDateField } from 'react-aria/useDateField'; -import { useLocale } from 'react-aria/I18nProvider'; -import { useDateFieldState } from 'react-stately/useDateFieldState'; -import { useRef } from 'react'; - -import { css, tokenSchema } from '@keystar/ui/style'; - -import { InputSegment } from './InputSegment'; -import { DatePickerProps } from './types'; - -interface DatePickerFieldProps extends DatePickerProps { - maxGranularity?: DatePickerProps['granularity']; - rangeFieldType?: 'start' | 'end'; -} - -/** @private for internal use only. */ -export function DatePickerField( - props: DatePickerFieldProps -) { - let { rangeFieldType } = props; - - let fieldRef = useRef(null); - let inputRef = useRef(null); - let { locale } = useLocale(); - let state = useDateFieldState({ ...props, locale, createCalendar }); - let { fieldProps, inputProps } = useDateField( - { ...props, inputRef }, - state, - fieldRef - ); - - return ( -
- {state.segments.map((segment, i) => ( - - ))} - -
- ); -} diff --git a/design-system/pkg/src/date-time/DatePickerPopover.tsx b/design-system/pkg/src/date-time/DatePickerPopover.tsx deleted file mode 100644 index 672c19941..000000000 --- a/design-system/pkg/src/date-time/DatePickerPopover.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { AriaDialogProps, useDialog } from 'react-aria/useDialog'; -import { useLocale } from 'react-aria/I18nProvider'; -import { DatePickerState } from 'react-stately/useDatePickerState'; -import { DateRangePickerState } from 'react-stately/useDateRangePickerState'; -import { ReactNode, RefObject, useRef } from 'react'; - -import { Popover, Tray } from '@keystar/ui/overlays'; -import { css, tokenSchema, useIsMobileDevice } from '@keystar/ui/style'; - -export function DatePickerPopover({ - state, - ...props -}: { - children: ReactNode; - dialogProps: AriaDialogProps; - shouldFlip?: boolean; - state: DatePickerState | DateRangePickerState; - triggerRef: RefObject; -}) { - let scrollRef = useRef(null); - let { direction } = useLocale(); - let isMobile = useIsMobileDevice(); - let { dialogProps } = useDialog(props.dialogProps, scrollRef); - - let content = ( -
-
- {props.children} -
-
- ); - - let overlay; - if (isMobile) { - overlay = {content}; - } else { - overlay = ( - - {content} - - ); - } - - return overlay; -} diff --git a/design-system/pkg/src/date-time/DateRangePicker.tsx b/design-system/pkg/src/date-time/DateRangePicker.tsx index 590941387..72f05cefd 100644 --- a/design-system/pkg/src/date-time/DateRangePicker.tsx +++ b/design-system/pkg/src/date-time/DateRangePicker.tsx @@ -1,29 +1,49 @@ -import { useDateRangePicker } from 'react-aria/useDateRangePicker'; -import { useFocusRing } from 'react-aria/useFocusRing'; -import { useHover } from 'react-aria/useHover'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useDateRangePickerState } from 'react-stately/useDateRangePickerState'; -import { DateValue } from 'react-stately/useCalendarState'; -import React, { ReactElement, Ref, useRef } from 'react'; +import { + DateRangePicker as AriaDateRangePicker, + type DateRangePickerProps as AriaDateRangePickerProps, + type DateValue, +} from 'react-aria-components/DateRangePicker'; +import { Dialog } from 'react-aria-components/Dialog'; +import { Group } from 'react-aria-components/Group'; +import React, { ReactElement, Ref } from 'react'; import { FieldButton } from '@keystar/ui/button'; import { RangeCalendar } from '@keystar/ui/calendar'; import { useProviderProps } from '@keystar/ui/core'; -import { FieldPrimitive } from '@keystar/ui/field'; import { Icon } from '@keystar/ui/icon'; +import { Popover } from '@keystar/ui/overlays'; import { calendarDaysIcon } from '@keystar/ui/icon/icons/calendarDaysIcon'; +import { + classNames, + css, + filterStyleProps, + tokenSchema, + useStyleProps, +} from '@keystar/ui/style'; import { Text } from '@keystar/ui/typography'; -import { Input } from './Input'; -import { DatePickerField } from './DatePickerField'; -import { usePickerStyles } from './DatePicker'; -import { DatePickerPopover } from './DatePickerPopover'; +import { + pickerButtonClassName, + pickerCalendarContainerClassName, + pickerDialogClassName, + pickerGroupClassName, + pickerInputClassName, + pickerPopoverClassName, + pickerRootClassName, +} from './DatePicker'; import { DateRangePickerProps } from './types'; +import { SegmentedDateInput } from './SegmentedDateInput'; import { useFocusManagerRef, useFormatHelpText, useVisibleMonths, } from './utils'; +import { + FieldDescriptionElement, + FieldErrorElement, + FieldLabelElement, + fieldRootClassName, +} from '../field/FieldElements'; function DateRangePicker( props: DateRangePickerProps, @@ -31,138 +51,93 @@ function DateRangePicker( ) { props = useProviderProps(props); let { - autoFocus, - isDisabled, - isReadOnly, + contextualHelp, + errorMessage, + isRequired, + label, + labelElementType: _labelElementType, maxVisibleMonths = 1, pageBehavior, + shouldFlip, + ...otherProps } = props; - let { hoverProps, isHovered } = useHover({ isDisabled }); - - let triggerRef = useRef(null); - let domRef = useFocusManagerRef(forwardedRef); - let state = useDateRangePickerState(props); - if (props.errorMessage) { - state = { - ...state, - validationState: 'invalid', - }; - } - let { - buttonProps, - calendarProps, - descriptionProps, - dialogProps, - endFieldProps, - errorMessageProps, - groupProps, - labelProps, - startFieldProps, - } = useDateRangePicker(props, state, triggerRef); - - let { isFocused, isFocusVisible, focusProps } = useFocusRing({ - within: true, - isTextInput: true, - autoFocus, - }); - - let { isFocused: isFocusedButton, focusProps: focusPropsButton } = - useFocusRing({ - within: false, - isTextInput: false, - autoFocus, - }); - - // Note: this description is intentionally not passed to useDateRangePicker. - // The format help text is unnecessary for screen reader users because each segment already has a label. let description = useFormatHelpText(props); - if (description && !props.description) { - const { id, ..._descriptionProps } = descriptionProps; - descriptionProps = _descriptionProps; - } - let visibleMonths = useVisibleMonths(maxVisibleMonths); - - let styleProps = usePickerStyles({ - isHovered, - isFocused, - isFocusVisible: isFocusVisible && !isFocusedButton, - isDisabled, - isReadOnly, - isInvalid: state.validationState === 'invalid', - }); + let domRef = useFocusManagerRef(forwardedRef); + let styleProps = useStyleProps(props); return ( - )} ref={domRef} - description={description} - labelElementType="span" - labelProps={labelProps} - descriptionProps={descriptionProps} - errorMessageProps={errorMessageProps} - // validationState={state.validationState} + isInvalid={Boolean(errorMessage)} + isRequired={isRequired} + className={classNames( + fieldRootClassName, + pickerRootClassName, + styleProps.className + )} + style={styleProps.style} > -
- - {/* @ts-expect-error can't reconcile changes to react-aria errorMessage fn type */} - - {/* em—dash */} - - {/* @ts-expect-error can't reconcile changes to react-aria errorMessage fn type */} - - + + {description} + + + + - - - -
- + + + +
+ +
+ + + {errorMessage} + ); } -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref +const rangeStartClassName = css({ + borderEndEndRadius: 0, + borderStartEndRadius: 0, + paddingInlineEnd: tokenSchema.size.space.regular, +}); + +const rangeEndClassName = css({ + borderRadius: 0, + paddingInlineStart: tokenSchema.size.space.regular, +}); -/** - * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users - * to enter or select a date and time range. - */ +/** Date range pickers combine two segmented inputs with a range calendar. */ const _DateRangePicker: ( props: DateRangePickerProps & { ref?: Ref } ) => ReactElement = React.forwardRef(DateRangePicker as any) as any; diff --git a/design-system/pkg/src/date-time/Input.tsx b/design-system/pkg/src/date-time/Input.tsx deleted file mode 100644 index dd532b6f6..000000000 --- a/design-system/pkg/src/date-time/Input.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { mergeProps } from 'react-aria/mergeProps'; -import { useObjectRef } from 'react-aria/useObjectRef'; -import { useFocusRing } from 'react-aria/useFocusRing'; -import { CSSProperties, DOMAttributes, ReactNode, forwardRef } from 'react'; - -import { - classNames, - css, - toDataAttributes, - tokenSchema, -} from '@keystar/ui/style'; - -type InputProps = { - autoFocus?: boolean; - children?: ReactNode; - className?: string; - disableFocusRing?: boolean; - fieldProps?: DOMAttributes; - isDisabled?: boolean; - style?: CSSProperties; - /** @deprecated use isInvalid */ - validationState?: 'valid' | 'invalid'; - isInvalid?: boolean; -}; - -export const Input = forwardRef( - function Input(props, forwardedRef) { - let inputRef = useObjectRef(forwardedRef); - let { - children, - disableFocusRing, - fieldProps, - isDisabled, - validationState, - } = props; - - let { focusProps, isFocused } = useFocusRing({ - isTextInput: true, - within: true, - }); - - let isInvalid = - (props.isInvalid ?? validationState === 'invalid') && !isDisabled; - let styleProps = useInputStyles(props, { - isDisabled, - isInvalid, - isFocused, - // prefer focusring appearance, regardless of input modality. otherwise it looks like a read-only field - isFocusVisible: isFocused && !disableFocusRing, - }); - - return ( -
-
- {children} -
-
- ); - } -); - -type InputState = { - isDisabled?: boolean; - isFocused: boolean; - isFocusVisible: boolean; - isInvalid: boolean; -}; - -function useInputStyles(props: InputProps, state: InputState) { - let className = classNames( - css({ - backgroundColor: tokenSchema.color.background.canvas, - border: `${tokenSchema.size.border.regular} solid ${tokenSchema.color.alias.borderIdle}`, - borderRadius: tokenSchema.size.radius.regular, - cursor: 'text', - height: tokenSchema.size.element.regular, - lineHeight: tokenSchema.typography.lineheight.small, - outline: 0, - overflow: 'visible', - paddingBlock: tokenSchema.size.space.small, - paddingInline: tokenSchema.size.space.medium, - position: 'relative', - textIndent: 0, - verticalAlign: 'top', - - minWidth: tokenSchema.size.scale[2000], - width: '100%', - - '&[data-invalid]': { - borderColor: tokenSchema.color.alias.borderInvalid, - }, - '&[data-focused]': { - borderColor: tokenSchema.color.alias.borderFocused, - boxShadow: `0 0 0 1px ${tokenSchema.color.alias.borderFocused}`, - }, - // '&[data-focus-visible]': { - // boxShadow: `0 0 0 1px ${tokenSchema.color.alias.borderFocused}`, - // }, - '&[data-disabled]': { - backgroundColor: tokenSchema.color.alias.backgroundDisabled, - borderColor: 'transparent', - }, - }), - props.className - ); - - return { - ...toDataAttributes(state, { - omitFalsyValues: true, - trimBooleanKeys: true, - }), - className, - style: props.style, - }; -} diff --git a/design-system/pkg/src/date-time/InputSegment.tsx b/design-system/pkg/src/date-time/InputSegment.tsx deleted file mode 100644 index 2b8fbd703..000000000 --- a/design-system/pkg/src/date-time/InputSegment.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { useDateSegment } from 'react-aria/useDateField'; -import { DateFieldState, DateSegment } from 'react-stately/useDateFieldState'; -import React, { useRef } from 'react'; - -import { - ClassList, - classNames, - css, - toDataAttributes, - tokenSchema, -} from '@keystar/ui/style'; -import { Text } from '@keystar/ui/typography'; - -const segmentClassList = new ClassList('InputSegment', ['editable']); - -interface InputSegmentProps { - segment: DateSegment; - state: DateFieldState; -} - -export function InputSegment({ segment, state }: InputSegmentProps) { - if (segment.type === 'literal') { - return ; - } - - return ; -} - -/** A separator, e.g. punctuation like "/" or "." */ -function LiteralSegment({ segment }: { segment: DateSegment }) { - return ( - - ); -} - -function EditableSegment({ segment, state }: InputSegmentProps) { - let ref = useRef(null); - let { segmentProps } = useDateSegment(segment, state, ref); - let styleProps = useEditableSectionStyles(segment); - - return ( -
- - {!segment.isPlaceholder && segment.text} -
- ); -} - -function useEditableSectionStyles(segment: DateSegment) { - return { - ...toDataAttributes( - { placeholder: segment.isPlaceholder, readonly: !segment.isEditable }, - { omitFalsyValues: true } - ), - className: classNames( - css({ - borderRadius: tokenSchema.size.radius.small, - color: tokenSchema.color.foreground.neutral, - paddingInline: tokenSchema.size.space.xsmall, - - // text styles - fontFamily: tokenSchema.typography.fontFamily.base, - fontSize: tokenSchema.typography.text.regular.size, - fontVariantNumeric: 'tabular-nums', - fontWeight: tokenSchema.typography.fontWeight.regular, - lineHeight: tokenSchema.typography.lineheight.small, - whiteSpace: 'nowrap', - MozOsxFontSmoothing: 'auto', - WebkitFontSmoothing: 'auto', - - '[dir=ltr] &': { textAlign: 'right' }, - '[dir=rtl] &': { textAlign: 'left' }, - - '&[data-placeholder]': { - color: tokenSchema.color.foreground.neutralTertiary, - }, - - '&:focus': { - backgroundColor: tokenSchema.color.background.accentEmphasis, - color: tokenSchema.color.foreground.onEmphasis, - outline: 'none', - }, - }), - segmentClassList.element('editable') - ), - style: { - minWidth: - segment.maxValue != null - ? String(segment.maxValue).length + 'ch' - : undefined, - }, - }; -} diff --git a/design-system/pkg/src/date-time/SegmentedDateInput.tsx b/design-system/pkg/src/date-time/SegmentedDateInput.tsx new file mode 100644 index 000000000..68156da57 --- /dev/null +++ b/design-system/pkg/src/date-time/SegmentedDateInput.tsx @@ -0,0 +1,91 @@ +import { + DateInput as AriaDateInput, + DateSegment as AriaDateSegment, +} from 'react-aria-components/DateField'; + +import { classNames, css, tokenSchema } from '@keystar/ui/style'; + +export function SegmentedDateInput({ + className, + slot, + ...props +}: { + className?: string; + slot?: string; + 'data-testid'?: string; +}) { + return ( + + {segment => ( + + )} + + ); +} diff --git a/design-system/pkg/src/date-time/TimeField.tsx b/design-system/pkg/src/date-time/TimeField.tsx index f85032aef..da0bcd096 100644 --- a/design-system/pkg/src/date-time/TimeField.tsx +++ b/design-system/pkg/src/date-time/TimeField.tsx @@ -1,60 +1,58 @@ -import { useTimeField } from 'react-aria/useTimeField'; -import { useLocale } from 'react-aria/I18nProvider'; -import React, { ReactElement, Ref, useRef } from 'react'; - -import { TimeValue, useTimeFieldState } from 'react-stately/useTimeFieldState'; +import { + TimeField as AriaTimeField, + type TimeFieldProps as AriaTimeFieldProps, + type TimeValue, +} from 'react-aria-components/TimeField'; +import React, { ReactElement, Ref } from 'react'; import { useProviderProps } from '@keystar/ui/core'; -import { FieldPrimitive } from '@keystar/ui/field'; +import { classNames, filterStyleProps, useStyleProps } from '@keystar/ui/style'; -import { Input } from './Input'; -import { InputSegment } from './InputSegment'; +import { SegmentedDateInput } from './SegmentedDateInput'; import { TimeFieldProps } from './types'; import { useFocusManagerRef } from './utils'; +import { + FieldDescriptionElement, + FieldErrorElement, + FieldLabelElement, + fieldRootClassName, +} from '../field/FieldElements'; function TimeField( props: TimeFieldProps, ref: Ref ) { props = useProviderProps(props); - let { autoFocus, isDisabled } = props; - let domRef = useFocusManagerRef(ref); - let { locale } = useLocale(); - let state = useTimeFieldState({ ...props, locale }); - - let inputRef = useRef(null); - let { labelProps, fieldProps, descriptionProps, errorMessageProps } = - useTimeField(props, state, inputRef); - - if (props.errorMessage) { - state = { - ...state, - validationState: 'invalid', - }; - } + let { + contextualHelp, + description, + errorMessage, + isRequired, + label, + labelElementType: _labelElementType, + ...otherProps + } = props; + let styleProps = useStyleProps(props); return ( - )} ref={domRef} - labelProps={labelProps} - descriptionProps={descriptionProps} - errorMessageProps={errorMessageProps} - // validationState={state.validationState} + isInvalid={Boolean(errorMessage)} + isRequired={isRequired} + className={classNames(fieldRootClassName, styleProps.className)} + style={styleProps.style} > - - {state.segments.map((segment, i) => ( - - ))} - - + + {description} + + {errorMessage} + ); } diff --git a/design-system/pkg/src/date-time/stories/DateField.stories.tsx b/design-system/pkg/src/date-time/stories/DateField.stories.tsx index a63aa5655..6e85d3cbe 100644 --- a/design-system/pkg/src/date-time/stories/DateField.stories.tsx +++ b/design-system/pkg/src/date-time/stories/DateField.stories.tsx @@ -9,10 +9,16 @@ import { parseZonedDateTime, toZoned, } from '@internationalized/date'; -import { useLocale } from 'react-aria/I18nProvider'; +import { useLocale } from 'react-aria-components'; import { KeystarProvider } from '@keystar/ui/core'; import { Flex } from '@keystar/ui/layout'; -import { Item, Picker, Section } from '@keystar/ui/picker'; +import { + Picker, + PickerCollection, + PickerHeader, + PickerItem, + PickerSection, +} from '@keystar/ui/picker'; import { ArgTypes, action } from '@keystar/ui-storybook'; import React from 'react'; @@ -282,7 +288,10 @@ function Example(props: DateFieldProps) { ? pref.ordering .split(' ') .map(p => calendars.find(c => c.key === p)) - .filter(Boolean) + .filter( + (calendar): calendar is NonNullable => + calendar !== undefined + ) : [calendars[0]], [pref] ); @@ -310,7 +319,7 @@ function Example(props: DateFieldProps) { value={locale} onChange={updateLocale} > - {item => {item.label}} + {item => {item.label}} (props: DateFieldProps) { } }} > -
- {item => {item?.name || 'ERROR'}} -
-
- {item => {item.name}} -
+ + Preferred + + {item => {item.name}} + + + + Other + + {item => {item.name}} + + { it('should be labellable', () => { - let { getAllByRole, getByText } = renderWithProvider( - - ); - - let label = getByText('Date'); + let { getAllByRole } = renderWithProvider(); let group = getAllByRole('group')[0]; - expect(group).toHaveAttribute('aria-labelledby', label.id); + let labelId = group.getAttribute('aria-labelledby')!; + expect(document.getElementById(labelId)).toHaveTextContent('Date'); let segments = getAllByRole('spinbutton'); for (let segment of segments) { @@ -23,15 +20,15 @@ describe('date-time/DateField', () => { let segmentId = segment.getAttribute('id'); expect(segment).toHaveAttribute( 'aria-labelledby', - `${segmentId} ${label.id}` + `${segmentId} ${labelId}` ); } }); it('should pass through data attributes', function () { - let { getByTestId } = renderWithProvider( + let { getByRole, getByTestId } = renderWithProvider( ); - expect(getByTestId('foo')).toHaveAttribute('role', 'group'); + expect(getByTestId('foo')).toContainElement(getByRole('group')); }); it('should support focusing via a ref', function () { diff --git a/design-system/pkg/src/date-time/test/DatePicker.test.tsx b/design-system/pkg/src/date-time/test/DatePicker.test.tsx index 878218c15..564ab8e18 100644 --- a/design-system/pkg/src/date-time/test/DatePicker.test.tsx +++ b/design-system/pkg/src/date-time/test/DatePicker.test.tsx @@ -143,10 +143,10 @@ describe('date-time/DatePicker', () => { }); it('should pass through data attributes', function () { - let { getByTestId } = renderWithProvider( + let { getAllByRole, getByTestId } = renderWithProvider( ); - expect(getByTestId('foo')).toHaveAttribute('role', 'group'); + expect(getByTestId('foo')).toContainElement(getAllByRole('group')[0]); }); // eslint-disable-next-line jest/no-disabled-tests diff --git a/design-system/pkg/src/date-time/test/DateRangePicker.test.tsx b/design-system/pkg/src/date-time/test/DateRangePicker.test.tsx index 15c6e280a..ff364bcd9 100644 --- a/design-system/pkg/src/date-time/test/DateRangePicker.test.tsx +++ b/design-system/pkg/src/date-time/test/DateRangePicker.test.tsx @@ -219,10 +219,10 @@ describe('date-time/DateRangePicker', () => { }); it('should pass through data attributes', function () { - let { getByTestId } = renderWithProvider( + let { getAllByRole, getByTestId } = renderWithProvider( ); - expect(getByTestId('foo')).toHaveAttribute('role', 'group'); + expect(getByTestId('foo')).toContainElement(getAllByRole('group')[0]); }); // eslint-disable-next-line jest/no-disabled-tests diff --git a/design-system/pkg/src/date-time/test/TimeField.test.tsx b/design-system/pkg/src/date-time/test/TimeField.test.tsx index 6d7954401..d4d3c31ed 100644 --- a/design-system/pkg/src/date-time/test/TimeField.test.tsx +++ b/design-system/pkg/src/date-time/test/TimeField.test.tsx @@ -9,14 +9,11 @@ import { TimeField } from '..'; describe('date-time/TimeField', () => { it('should be labellable', () => { - let { getAllByRole, getByText } = renderWithProvider( - - ); - - let label = getByText('Time'); + let { getAllByRole } = renderWithProvider(); let group = getAllByRole('group')[0]; - expect(group).toHaveAttribute('aria-labelledby', label.id); + let labelId = group.getAttribute('aria-labelledby')!; + expect(document.getElementById(labelId)).toHaveTextContent('Time'); let segments = getAllByRole('spinbutton'); for (let segment of segments) { @@ -24,7 +21,7 @@ describe('date-time/TimeField', () => { let segmentId = segment.getAttribute('id'); expect(segment).toHaveAttribute( 'aria-labelledby', - `${segmentId} ${label.id}` + `${segmentId} ${labelId}` ); } }); @@ -57,10 +54,10 @@ describe('date-time/TimeField', () => { } }); it('should pass through data attributes', function () { - let { getByTestId } = renderWithProvider( + let { getByRole, getByTestId } = renderWithProvider( ); - expect(getByTestId('foo')).toHaveAttribute('role', 'group'); + expect(getByTestId('foo')).toContainElement(getByRole('group')); }); it('should support focusing via a ref', function () { let ref = createRef(); diff --git a/design-system/pkg/src/date-time/types.ts b/design-system/pkg/src/date-time/types.ts index 43e72d604..7aa198f96 100644 --- a/design-system/pkg/src/date-time/types.ts +++ b/design-system/pkg/src/date-time/types.ts @@ -1,84 +1,48 @@ -import { AriaDatePickerProps } from 'react-aria/useDatePicker'; -import { AriaDateRangePickerProps } from 'react-aria/useDateRangePicker'; -import { DateValue } from 'react-stately/useCalendarState'; -import { Granularity, MappedDateValue } from 'react-stately/useDateFieldState'; -import { MappedTimeValue, TimeValue } from 'react-stately/useTimeFieldState'; -import { FocusableProps, RangeValue, ValueBase } from '@react-types/shared'; +import type { + DateFieldProps as AriaDateFieldProps, + DateValue, +} from 'react-aria-components/DateField'; +import type { DatePickerProps as AriaDatePickerProps } from 'react-aria-components/DatePicker'; +import type { DateRangePickerProps as AriaDateRangePickerProps } from 'react-aria-components/DateRangePicker'; +import type { + TimeFieldProps as AriaTimeFieldProps, + TimeValue, +} from 'react-aria-components/TimeField'; import { FieldProps } from '@keystar/ui/field'; +import { BaseStyleProps } from '@keystar/ui/style'; -type DateFieldBase = { - /** The minimum allowed date that a user may select. */ - minValue?: DateValue; - /** The maximum allowed date that a user may select. */ - maxValue?: DateValue; - /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ - isDateUnavailable?: (date: DateValue) => boolean; - /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */ - placeholderValue?: T; - /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ - hourCycle?: 12 | 24; - /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */ - granularity?: Granularity; - /** - * Whether to hide the time zone abbreviation. - * @default false - */ - hideTimeZone?: boolean; - /** - * Whether to always show leading zeros in the month, day, and hour fields. - * By default, this is determined by the user's locale. - */ - shouldForceLeadingZeros?: boolean; -}; +type FieldCompositionProps = FieldProps & BaseStyleProps; -export type DateFieldProps = DateFieldBase & - FocusableProps & - ValueBase | null> & - FieldProps; +export type DateFieldProps = Omit< + AriaDateFieldProps, + 'children' | 'className' | 'style' | keyof FieldCompositionProps +> & + FieldCompositionProps; -export type TimeFieldProps = { - /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ - hourCycle?: 12 | 24; - /** - * Determines the smallest unit that is displayed in the time picker. - * @default 'minute' - */ - granularity?: Exclude; - /** Whether to hide the time zone abbreviation. */ - hideTimeZone?: boolean; - /** - * A placeholder time that influences the format of the placeholder shown when no value is selected. - * Defaults to 12:00 AM or 00:00 depending on the hour cycle. - */ - placeholderValue?: T; - /** The minimum allowed time that a user may select. */ - minValue?: TimeValue; - /** The maximum allowed time that a user may select. */ - maxValue?: TimeValue; -} & FocusableProps & - ValueBase | null> & - FieldProps; +export type TimeFieldProps = Omit< + AriaTimeFieldProps, + 'children' | 'className' | 'style' | keyof FieldCompositionProps +> & + FieldCompositionProps; -type DatePickerBase = { - /** - * The maximum number of months to display at once in the calendar popover, if screen space permits. - * @default 1 - */ +type PickerOptions = { + /** The maximum number of months to display at once. */ maxVisibleMonths?: number; - /** - * Whether the calendar popover should automatically flip direction when space is limited. - * @default true - */ + /** Whether the calendar popover should flip when space is limited. */ shouldFlip?: boolean; -} & DateFieldBase & - FocusableProps & - FieldProps; +}; -export type DatePickerProps = DatePickerBase & - AriaDatePickerProps & - ValueBase | null>; +export type DatePickerProps = Omit< + AriaDatePickerProps, + 'children' | 'className' | 'style' | keyof FieldCompositionProps +> & + FieldCompositionProps & + PickerOptions; -export type DateRangePickerProps = DatePickerBase & - AriaDateRangePickerProps & - ValueBase | null, RangeValue>>; +export type DateRangePickerProps = Omit< + AriaDateRangePickerProps, + 'children' | 'className' | 'style' | keyof FieldCompositionProps +> & + FieldCompositionProps & + PickerOptions; diff --git a/design-system/pkg/src/date-time/utils.ts b/design-system/pkg/src/date-time/utils.ts index f94c85527..8751b0cce 100644 --- a/design-system/pkg/src/date-time/utils.ts +++ b/design-system/pkg/src/date-time/utils.ts @@ -1,5 +1,4 @@ -import { useDisplayNames } from 'react-aria/private/datepicker/useDisplayNames'; -import { createFocusManager } from 'react-aria/private/focus/FocusScope'; +import { useLocale } from 'react-aria-components'; import { useDateFormatter } from 'react-aria/useDateFormatter'; import { useLayoutEffect, @@ -16,7 +15,11 @@ export function useFormatHelpText(props: { showFormatHelpText?: boolean; }) { let formatter = useDateFormatter({ dateStyle: 'short' }); - let displayNames = useDisplayNames(); + let { locale } = useLocale(); + let displayNames = useMemo( + () => new Intl.DisplayNames(locale, { type: 'dateTimeField' }), + [locale] + ); return useMemo(() => { if (props.description) { return props.description; @@ -75,7 +78,9 @@ export function useFocusManagerRef(ref: Ref) { useImperativeHandle(ref, () => ({ ...domRef.current, focus() { - createFocusManager(domRef).focusFirst({ tabbable: true }); + domRef.current + ?.querySelector('[tabindex]:not([tabindex="-1"])') + ?.focus(); }, })); return domRef; diff --git a/design-system/pkg/src/dialog/Dialog.tsx b/design-system/pkg/src/dialog/Dialog.tsx index 8e52a62c3..26caa9aff 100644 --- a/design-system/pkg/src/dialog/Dialog.tsx +++ b/design-system/pkg/src/dialog/Dialog.tsx @@ -1,13 +1,15 @@ -import { useDialog } from 'react-aria/useDialog'; +import { + Dialog as AriaDialog, + type DialogProps as AriaDialogProps, +} from 'react-aria-components/Dialog'; import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useObjectRef } from 'react-aria/useObjectRef'; import { ForwardedRef, forwardRef, ForwardRefExoticComponent, Ref, useContext, + useId, useMemo, useRef, } from 'react'; @@ -22,6 +24,7 @@ import { breakpointQueries, classNames, css, + filterStyleProps, toDataAttributes, tokenSchema, useStyleProps, @@ -57,17 +60,14 @@ export const Dialog: ForwardRefExoticComponent< let { children, isDismissable = contextProps.isDismissable, - onDismiss = contextProps.onClose, + onDismiss, size, + ...ariaProps } = props; let stringFormatter = useLocalizedStringFormatter(localizedMessages); - let domRef = useObjectRef(forwardedRef); let gridRef = useRef(null); - let { dialogProps, titleProps } = useDialog( - mergeProps(contextProps, props), - domRef - ); + let headingId = useId(); // analyse children to determine grid areas. need a unique identifier for each slot. // const headingSize = type === 'popover' ? 'small' : 'regular'; @@ -90,7 +90,7 @@ export const Dialog: ForwardRefExoticComponent< ), elementType: 'h2' as const, size: headingSize as typeof headingSize, // FIXME: declared as const—shouldn't need this weirdness. - ...titleProps, + id: headingId, }, header: { // ...toDataAttributes({ hasHeading }), @@ -128,7 +128,7 @@ export const Dialog: ForwardRefExoticComponent< hasHeader, hasHeading, headingSize, - titleProps, + headingId, type, ] ); @@ -144,28 +144,46 @@ export const Dialog: ForwardRefExoticComponent< }); return ( -
- - {children} - {isDismissable && ( - - - - )} - -
+ + {({ close }) => ( + + + {children} + {isDismissable && ( + + + + )} + + + )} + ); }); diff --git a/design-system/pkg/src/dialog/DialogContainer.tsx b/design-system/pkg/src/dialog/DialogContainer.tsx index 1c1bc7474..65147f0f8 100644 --- a/design-system/pkg/src/dialog/DialogContainer.tsx +++ b/design-system/pkg/src/dialog/DialogContainer.tsx @@ -1,4 +1,3 @@ -import { useOverlayTriggerState } from 'react-stately/useOverlayTriggerState'; import React, { isValidElement, ReactElement, useState } from 'react'; import { Modal } from '@keystar/ui/overlays'; @@ -33,18 +32,12 @@ export function DialogContainer(props: DialogContainerProps) { isDismissable, }; - let state = useOverlayTriggerState({ - isOpen: !!child, - onOpenChange: isOpen => { - if (!isOpen) { - onDismiss(); - } - }, - }); - return ( { + if (!isOpen) onDismiss(); + }} type={type} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} diff --git a/design-system/pkg/src/dialog/DialogTrigger.tsx b/design-system/pkg/src/dialog/DialogTrigger.tsx index b3dd2b0b2..919b3fcd1 100644 --- a/design-system/pkg/src/dialog/DialogTrigger.tsx +++ b/design-system/pkg/src/dialog/DialogTrigger.tsx @@ -1,28 +1,17 @@ -import { PressResponder } from 'react-aria/private/interactions/PressResponder'; -import { useOverlayTrigger } from 'react-aria/useOverlayTrigger'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useEffectEvent } from 'react-aria/private/utils/useEffectEvent'; import { - OverlayTriggerState, - useOverlayTriggerState, -} from 'react-stately/useOverlayTriggerState'; -import { assertNever } from 'emery'; -import { - Children, - Fragment, - ReactElement, - useEffect, - useRef, - type JSX, -} from 'react'; + DialogTrigger as AriaDialogTrigger, + OverlayTriggerStateContext, +} from 'react-aria-components/Dialog'; +import { type ReactElement, useContext } from 'react'; -import { Modal, Popover, PopoverProps, Tray } from '@keystar/ui/overlays'; +import { Modal, Popover, Tray } from '@keystar/ui/overlays'; import { breakpointQueries, useMediaQuery } from '@keystar/ui/style'; import { DialogContext } from './context'; -import { DialogRenderFn, DialogProps, DialogTriggerProps } from './types'; +import { DialogRenderFn, DialogTriggerProps, DialogType } from './types'; -function DialogTrigger(props: DialogTriggerProps) { +/** Links a RAC-aware trigger with a dialog overlay. */ +export function DialogTrigger(props: DialogTriggerProps) { let { children, type = 'modal', @@ -31,214 +20,115 @@ function DialogTrigger(props: DialogTriggerProps) { targetRef, isDismissable, isKeyboardDismissDisabled, + isOpen, + defaultOpen, + onOpenChange, ...positionProps } = props; - if (!Array.isArray(children) || children.length > 2) { + if (!Array.isArray(children) || children.length !== 2) { throw new Error('DialogTrigger must have exactly 2 children'); } - // if a function is passed as the second child, it won't appear in toArray let [trigger, content] = children as [ReactElement, DialogRenderFn]; - // On small devices, show a modal or tray instead of a popover. let isMobile = useMediaQuery(breakpointQueries.below.tablet); if (isMobile) { - // handle cases where desktop popovers need a close button for the mobile modal view if (type !== 'modal' && mobileType === 'modal') { isDismissable = true; } - type = mobileType; } - let state = useOverlayTriggerState(props); - let wasOpen = useRef(false); - wasOpen.current = state.isOpen; - let isExiting = useRef(false); - let onExiting = () => (isExiting.current = true); - let onExited = () => (isExiting.current = false); - - const onUnmount = useEffectEvent(() => { - if ( - (wasOpen.current || isExiting.current) && - type !== 'popover' && - type !== 'tray' - ) { - console.warn( - 'A DialogTrigger unmounted while open. This is likely due to being placed within a trigger that unmounts or inside a conditional. Consider using a DialogContainer instead.' - ); - } - }); - - // eslint-disable-next-line arrow-body-style - useEffect(() => { - return onUnmount; - }, [onUnmount]); - - if (type === 'popover') { - return ( - - ); - } - - let renderOverlay = () => { - switch (type) { - case 'fullscreen': - case 'modal': - return ( - - {typeof content === 'function' ? content(state.close) : content} - - ); - case 'tray': - return ( - - {typeof content === 'function' ? content(state.close) : content} - - ); - } - - assertNever(type as never); - }; - - return ( - ); -} - -// Support DialogTrigger inside components using CollectionBuilder. -DialogTrigger.getCollectionNode = function* (props: DialogTriggerProps) { - // @ts-ignore - let [trigger] = Children.toArray(props.children); - let [, content] = props.children as [ReactElement, DialogRenderFn]; - yield { - element: trigger, - wrapper: (element: ReactElement) => ( - - {element} - {content} - - ), - }; -}; - -/** - * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's - * open state with the trigger's press state. Additionally, it allows you to customize the type and - * positioning of the Dialog. - */ - -// We don't want getCollectionNode to show up in the type definition -let _DialogTrigger = DialogTrigger as ( - props: DialogTriggerProps -) => JSX.Element; -export { _DialogTrigger as DialogTrigger }; - -function PopoverTrigger({ - state, - targetRef, - trigger, - content, - hideArrow, - ...props -}: Omit & - Omit & { - trigger: ReactElement; - content: DialogRenderFn | ReactElement; - }) { - let triggerRef = useRef(null); - let { triggerProps, overlayProps } = useOverlayTrigger( - { type: 'dialog' }, - state, - triggerRef - ); - - let triggerPropsWithRef = { - ...triggerProps, - ref: targetRef ? undefined : triggerRef, - }; - - let overlay = ( - - {typeof content === 'function' ? content(state.close) : content} - - ); return ( - + + {trigger} + {renderOverlay(type, dialog, { + ...positionProps, + hideArrow, + isDismissable, + isKeyboardDismissDisabled, + targetRef, + })} + ); } -interface DialogTriggerBase { - type: 'modal' | 'popover' | 'tray' | 'fullscreen'; - state: OverlayTriggerState; - isDismissable?: boolean; - dialogProps?: DialogProps | {}; - triggerProps?: any; - overlay: ReactElement; - trigger: ReactElement; +function renderOverlay( + type: DialogType, + dialog: ReactElement, + props: Omit +) { + let { + hideArrow, + isDismissable, + isKeyboardDismissDisabled, + targetRef, + ...positionProps + } = props; + + switch (type) { + case 'popover': + return ( + + {dialog} + + ); + case 'tray': + return ( + + {dialog} + + ); + case 'fullscreen': + case 'modal': + return ( + + {dialog} + + ); + } } -function DialogTriggerBase({ - type, - state, +function DialogContent({ + content, isDismissable, - dialogProps = {}, - triggerProps = {}, - overlay, - trigger, -}: DialogTriggerBase) { - let context = { - type, - onClose: state.close, - isDismissable, - ...dialogProps, - }; + type, +}: { + content: DialogRenderFn | ReactElement; + isDismissable?: boolean; + type: DialogType; +}) { + let state = useContext(OverlayTriggerStateContext); + if (!state) return null; return ( - - - {trigger} - - {overlay} - + + {typeof content === 'function' ? content(state.close) : content} + ); } diff --git a/design-system/pkg/src/dialog/docs/index.mdoc b/design-system/pkg/src/dialog/docs/index.mdoc index 44ff59dd0..ee65d13f1 100644 --- a/design-system/pkg/src/dialog/docs/index.mdoc +++ b/design-system/pkg/src/dialog/docs/index.mdoc @@ -86,9 +86,9 @@ return ( <> setSize(old => (old ? null : key))}> {['small', 'medium', 'large'].map(key => ( - + {key} - + ))} setSize(null)} isDismissable> diff --git a/design-system/pkg/src/dialog/test/DialogTrigger.test.tsx b/design-system/pkg/src/dialog/test/DialogTrigger.test.tsx new file mode 100644 index 000000000..f5d476bcd --- /dev/null +++ b/design-system/pkg/src/dialog/test/DialogTrigger.test.tsx @@ -0,0 +1,43 @@ +import { describe, expect, it, jest } from '@jest/globals'; + +import { Button } from '@keystar/ui/button'; +import { firePress, renderWithProvider } from '#test-utils'; + +import { Dialog, DialogTrigger } from '..'; + +describe('dialog/DialogTrigger', () => { + it('opens and closes a modal through RAC state', () => { + let onOpenChange = jest.fn(); + let tree = renderWithProvider( + + + {close => ( + + + + )} + + ); + + firePress(tree.getByRole('button', { name: 'Open dialog' })); + expect(tree.getByRole('dialog', { name: 'Example dialog' })).toBeVisible(); + + firePress(tree.getByRole('button', { name: 'Close dialog' })); + expect( + tree.queryByRole('dialog', { name: 'Example dialog' }) + ).not.toBeInTheDocument(); + expect(onOpenChange).toHaveBeenNthCalledWith(1, true); + expect(onOpenChange).toHaveBeenNthCalledWith(2, false); + }); + + it('supports a controlled popover dialog', () => { + let tree = renderWithProvider( + + + Popover contents + + ); + + expect(tree.getByRole('dialog', { name: 'Popover dialog' })).toBeVisible(); + }); +}); diff --git a/design-system/pkg/src/dialog/types.ts b/design-system/pkg/src/dialog/types.ts index fc675c075..3f2d50905 100644 --- a/design-system/pkg/src/dialog/types.ts +++ b/design-system/pkg/src/dialog/types.ts @@ -1,9 +1,9 @@ import { ReactElement, ReactNode, RefObject } from 'react'; import { AriaLabelingProps, DOMProps } from '@react-types/shared'; +import type { DialogTriggerProps as AriaDialogTriggerProps } from 'react-aria-components/Dialog'; +import type { PopoverProps as AriaPopoverProps } from 'react-aria-components/Popover'; -import { OverlayTriggerProps, PositionProps } from '@keystar/ui/overlays'; import { BaseStyleProps } from '@keystar/ui/style'; -import { OverlayTriggerState } from 'react-stately/useOverlayTriggerState'; export type DialogType = 'modal' | 'popover' | 'tray' | 'fullscreen'; export type DialogSize = 'small' | 'medium' | 'large'; @@ -13,19 +13,6 @@ export interface DialogContainerValue { dismiss(): void; } -export type DialogTriggerBase = { - type: DialogType; - state: OverlayTriggerState; - isDismissable?: boolean; - dialogProps?: DialogProps | {}; - triggerProps?: any; - hideArrow?: boolean; - overlay: ReactElement; - trigger: ReactElement; -}; - -// ----------------------------------------------------------------------------- - export type DialogRenderFn = (close: () => void) => ReactElement; export type DialogTriggerProps = { @@ -49,8 +36,17 @@ export type DialogTriggerProps = { isDismissable?: boolean; /** Whether pressing the escape key to close the dialog should be disabled. */ isKeyboardDismissDisabled?: boolean; -} & OverlayTriggerProps & - PositionProps; +} & Omit & + Pick< + AriaPopoverProps, + | 'boundaryElement' + | 'containerPadding' + | 'crossOffset' + | 'offset' + | 'placement' + | 'scrollRef' + | 'shouldFlip' + >; export interface DialogContainerProps { /** The dialog to display, if any. */ diff --git a/design-system/pkg/src/drag-and-drop/DropZone.tsx b/design-system/pkg/src/drag-and-drop/DropZone.tsx index 3bd086eef..fe9b04e7f 100644 --- a/design-system/pkg/src/drag-and-drop/DropZone.tsx +++ b/design-system/pkg/src/drag-and-drop/DropZone.tsx @@ -1,147 +1,93 @@ 'use client'; -import { DropOptions, useDrop } from 'react-aria/useDrop'; -import { useClipboard } from 'react-aria/useClipboard'; -import { useFocusRing } from 'react-aria/useFocusRing'; import { useLocalizedStringFormatter } from 'react-aria/useLocalizedStringFormatter'; -import { filterDOMProps } from 'react-aria/filterDOMProps'; -import { mergeProps } from 'react-aria/mergeProps'; -import { useLabels } from 'react-aria/private/utils/useLabels'; -import { useObjectRef } from 'react-aria/useObjectRef'; -import { useSlotId } from 'react-aria/private/utils/useId'; -import { VisuallyHidden } from 'react-aria/VisuallyHidden'; +import { + DropZone as AriaDropZone, + type DropZoneProps as AriaDropZoneProps, +} from 'react-aria-components/DropZone'; import { AriaLabelingProps, DOMProps } from '@react-types/shared'; -import { useMemo, useRef } from 'react'; +import { ForwardedRef, forwardRef } from 'react'; import { BaseStyleProps, ClassList, classNames, css, - toDataAttributes, + filterStyleProps, tokenSchema, useStyleProps, } from '@keystar/ui/style'; import { WithRenderProps } from '@keystar/ui/types'; -import { useRenderProps } from '@keystar/ui/utils'; -import { forwardRefWithAs } from '@keystar/ui/utils/ts'; import localizedMessages from './l10n'; import { SlotProvider } from '../slots'; export type DropZoneProps = Omit< - DropOptions, - 'getDropOperationForPoint' | 'ref' | 'hasDropButton' + AriaDropZoneProps, + 'children' | 'className' | 'style' > & WithRenderProps<{ isDropTarget: boolean }> & BaseStyleProps & DOMProps & - AriaLabelingProps; + AriaLabelingProps & { + className?: string; + }; export const dropZoneClassList = new ClassList('DropZone'); -/** - * A DropZone is an area into which one or multiple objects can be dragged and - * dropped. - */ -export const DropZone = forwardRefWithAs( - function DropZone(props, forwardedRef) { - let dropzoneRef = useObjectRef(forwardedRef); - let buttonRef = useRef(null); - let { dropProps, dropButtonProps, isDropTarget } = useDrop({ - ...props, - ref: buttonRef, - hasDropButton: true, - }); - let { clipboardProps } = useClipboard({ - onPaste: items => - props.onDrop?.({ - type: 'drop', - items, - x: 0, - y: 0, - dropOperation: 'copy', - }), - }); - let { focusProps, isFocused, isFocusVisible } = useFocusRing(); - let stringFormatter = useLocalizedStringFormatter(localizedMessages); - let labelId = useSlotId(); - let dropzoneId = useSlotId(); - let ariaLabel = - props['aria-label'] || stringFormatter.format('dropzoneLabel'); - let messageId = props['aria-labelledby']; - // Chrome + VO will not announce the drop zone's accessible name if useLabels combines an aria-label and aria-labelledby - let ariaLabelledby = [dropzoneId, labelId, messageId] - .filter(Boolean) - .join(' '); - let labelProps = useLabels({ 'aria-labelledby': ariaLabelledby }); - - // Use the "label" slot so consumers can choose whether to put it on a - // `Heading` or `Text` instance. - // TODO: warn when no label is provided - let slots = { - icon: { color: isDropTarget ? 'accent' : 'neutral' }, - label: { - id: labelId, - color: isDropTarget ? 'accent' : undefined, - }, - } as const; +/** A DropZone is an area into which one or multiple objects may be dropped. */ +export const DropZone = forwardRef(function DropZone( + props: DropZoneProps, + forwardedRef: ForwardedRef +) { + let stringFormatter = useLocalizedStringFormatter(localizedMessages); + let { className, ...styleInputProps } = props; + let styleProps = useStyleProps(styleInputProps); + let children = props.children; - let renderProps = useMemo(() => ({ isDropTarget }), [isDropTarget]); - let children = useRenderProps(props, renderProps); - let styleProps = useStyleProps(props); - let ElementType = props.elementType || 'div'; + return ( + - - {/* Added as a workaround for a Chrome + VO bug where it will not announce the aria label */} - -