Skip to content

Commit 101d077

Browse files
LFDanLuLFDanLu
authored
chore: Update JSDocs and apis for release (#7595)
* Update JSDocs and apis for release * typo
1 parent 73bbc40 commit 101d077

File tree

6 files changed

+41
-24
lines changed

6 files changed

+41
-24
lines changed

‎packages/@react-spectrum/s2/src/CardView.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
6262
onLoadMore?: () => void,
6363
/** Spectrum-defined styles, returned by the `style()` macro. */
6464
styles?: StylesPropWithHeight,
65+
/** Provides the ActionBar to render when cards are selected in the CardView. */
6566
renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
6667
}
6768

‎packages/@react-spectrum/s2/src/TableView.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ interface S2TableProps {
105105
loadingState?: LoadingState,
106106
/** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
107107
onLoadMore?: () => any,
108+
/** Provides the ActionBar to display when rows are selected in the TableView. */
108109
renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
109110
}
110111

‎packages/@react-spectrum/s2/src/Tabs.tsx

+26-18
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
5353
*/
5454
density?: 'compact' | 'regular',
5555
/**
56-
* If the tabs should only display icons and no text.
56+
* Defines if the text within the tabs should be hidden and only the icon should be shown.
57+
* The text is always visible when the item is collapsed into a picker.
58+
* @default 'show'
5759
*/
58-
isIconOnly?: boolean
60+
labelBehavior?: 'show' | 'hide'
5961
}
6062

6163
export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
@@ -96,7 +98,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
9698
isDisabled,
9799
disabledKeys,
98100
orientation = 'horizontal',
99-
isIconOnly = false
101+
labelBehavior = 'show'
100102
} = props;
101103
let domRef = useDOMRef(ref);
102104
let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
@@ -112,7 +114,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
112114
disabledKeys,
113115
selectedKey: value,
114116
onSelectionChange: setValue,
115-
isIconOnly,
117+
labelBehavior,
116118
onFocus: () => pickerRef.current?.focus(),
117119
pickerRef
118120
}]
@@ -141,10 +143,12 @@ const tablist = style({
141143
compact: 24,
142144
regular: 32
143145
},
144-
isIconOnly: {
145-
density: {
146-
compact: 16,
147-
regular: 24
146+
labelBehavior: {
147+
hide: {
148+
density: {
149+
compact: 16,
150+
regular: 24
151+
}
148152
}
149153
}
150154
}
@@ -170,7 +174,7 @@ const tablist = style({
170174
});
171175

172176
export function TabList<T extends object>(props: TabListProps<T>) {
173-
let {density, isDisabled, disabledKeys, orientation, isIconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
177+
let {density, isDisabled, disabledKeys, orientation, labelBehavior, onFocus} = useContext(InternalTabsContext) ?? {};
174178
let {showItems} = useContext(CollapseContext) ?? {};
175179
let state = useContext(TabListStateContext);
176180
let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
@@ -208,7 +212,7 @@ export function TabList<T extends object>(props: TabListProps<T>) {
208212
<RACTabList
209213
{...props}
210214
ref={tablistRef}
211-
className={renderProps => tablist({...renderProps, isIconOnly, density})} />
215+
className={renderProps => tablist({...renderProps, labelBehavior, density})} />
212216
{orientation === 'horizontal' &&
213217
<TabLine showItems={showItems} disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
214218
</div>
@@ -255,7 +259,7 @@ const selectedIndicator = style({
255259
transitionTimingFunction: 'in-out'
256260
});
257261

258-
function TabLine(props: TabLineProps & {isIconOnly?: boolean}) {
262+
function TabLine(props: TabLineProps) {
259263
let {
260264
disabledKeys,
261265
isDisabled: isTabsDisabled,
@@ -342,7 +346,9 @@ const tab = style({
342346
flexShrink: 0,
343347
transition: 'default',
344348
paddingX: {
345-
isIconOnly: size(6)
349+
labelBehavior: {
350+
hide: size(6)
351+
}
346352
}
347353
}, getAllowedOverrides());
348354

@@ -356,15 +362,15 @@ const icon = style({
356362
});
357363

358364
export function Tab(props: TabProps) {
359-
let {density, isIconOnly} = useContext(InternalTabsContext) ?? {};
365+
let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};
360366

361367
return (
362368
<RACTab
363369
{...props}
364370
// @ts-ignore
365371
originalProps={props}
366372
style={props.UNSAFE_style}
367-
className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, isIconOnly}, props.styles)}>
373+
className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>
368374
{({
369375
// @ts-ignore
370376
isMenu
@@ -380,9 +386,11 @@ export function Tab(props: TabProps) {
380386
style({
381387
order: 1,
382388
display: {
383-
isIconOnly: 'none'
389+
labelBehavior: {
390+
hide: 'none'
391+
}
384392
}
385-
})({isIconOnly})
393+
})({labelBehavior})
386394
}],
387395
[IconContext, {
388396
render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
@@ -479,7 +487,7 @@ let HiddenTabs = function (props: {
479487
let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']}) => {
480488
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
481489
let {items} = props;
482-
let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, isIconOnly} = useContext(InternalTabsContext);
490+
let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, labelBehavior} = useContext(InternalTabsContext);
483491
let state = useContext(TabListStateContext);
484492
let allKeysDisabled = useMemo(() => {
485493
return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
@@ -501,7 +509,7 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
501509
ref={pickerRef ? pickerRef : undefined}
502510
isDisabled={isDisabled || allKeysDisabled}
503511
density={density!}
504-
isIconOnly={isIconOnly}
512+
labelBehavior={labelBehavior}
505513
items={items}
506514
disabledKeys={disabledKeys}
507515
selectedKey={selectedKey}

‎packages/@react-spectrum/s2/src/TabsPicker.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,9 @@ export interface PickerProps<T extends object> extends
8888
density: 'compact' | 'regular',
8989
/**
9090
* If the tab picker should only display icon and no text for the button label.
91+
* @default 'show
9192
*/
92-
isIconOnly?: boolean
93+
labelBehavior?: 'show' | 'hide'
9394
}
9495

9596
export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
@@ -162,7 +163,9 @@ const iconCenterWrapper = style({
162163
display: 'flex',
163164
gridArea: 'icon',
164165
paddingStart: {
165-
isIconOnly: size(6)
166+
labelBehavior: {
167+
hide: size(6)
168+
}
166169
}
167170
});
168171

@@ -181,7 +184,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
181184
items,
182185
placeholder = stringFormatter.format('picker.placeholder'),
183186
density,
184-
isIconOnly,
187+
labelBehavior = 'show',
185188
...pickerProps
186189
} = props;
187190
let isQuiet = true;
@@ -217,7 +220,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
217220
[IconContext, {
218221
slots: {
219222
icon: {
220-
render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({isIconOnly})}),
223+
render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
221224
styles: icon
222225
}
223226
}
@@ -228,11 +231,13 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
228231
[DEFAULT_SLOT]: {styles: style({
229232
display: {
230233
default: 'block',
231-
isIconOnly: 'none'
234+
labelBehavior: {
235+
hide: 'none'
236+
}
232237
},
233238
flexGrow: 1,
234239
truncate: true
235-
})({isIconOnly})}
240+
})({labelBehavior})}
236241
}
237242
}],
238243
[InsideSelectValueContext, true]

‎packages/@react-stately/selection/src/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -108,5 +108,6 @@ export interface MultipleSelectionManager extends FocusState {
108108
isLink(key: Key): boolean,
109109
/** Returns the props for the given item. */
110110
getItemProps(key: Key): any,
111+
/** The collection of nodes that the selection manager handles. */
111112
collection: Collection<Node<unknown>>
112113
}

‎packages/react-aria-components/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export {FormValidationContext} from 'react-stately';
8383
export {parseColor, getColorChannels} from '@react-stately/color';
8484
export {ListLayout as UNSTABLE_ListLayout, GridLayout as UNSTABLE_GridLayout} from '@react-stately/layout';
8585

86+
export type {AutocompleteProps} from './Autocomplete';
8687
export type {BreadcrumbsProps, BreadcrumbProps, BreadcrumbRenderProps} from './Breadcrumbs';
8788
export type {ButtonProps, ButtonRenderProps} from './Button';
8889
export type {CalendarCellProps, CalendarProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps, RangeCalendarRenderProps} from './Calendar';

0 commit comments

Comments
 (0)