@sesamehr/react-design-system 2.0.0-beta.8 → 2.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Feedback/Popover/PopoverContent.d.ts +0 -7
- package/dist/Feedback/Tooltip/TooltipContent.d.ts +0 -1
- package/dist/Forms/Inputs/Combobox/ComboboxContent.d.ts +0 -11
- package/dist/Forms/Inputs/SearchPanel/SearchPanelList.d.ts +0 -31
- package/dist/Forms/Inputs/Select/SelectContent.d.ts +0 -10
- package/dist/react-design-system.css +1 -1
- package/dist/react-design-system.js +1567 -1562
- package/dist/react-design-system.umd.cjs +29 -29
- package/package.json +1 -1
|
@@ -3,11 +3,4 @@ export interface PopoverContentProps extends React.ComponentPropsWithoutRef<type
|
|
|
3
3
|
showArrow?: boolean;
|
|
4
4
|
dataTestid: string;
|
|
5
5
|
}
|
|
6
|
-
/**
|
|
7
|
-
* PopoverContent — portalled Radix popover content with optional arrow.
|
|
8
|
-
*
|
|
9
|
-
* `asChild` draws it on the shared `Surface`, which is what keeps a popover
|
|
10
|
-
* and a select open on the same screen from having different corners. Only the
|
|
11
|
-
* padding is a popover's own.
|
|
12
|
-
*/
|
|
13
6
|
export declare const PopoverContent: import('react').ForwardRefExoticComponent<PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -3,5 +3,4 @@ export interface TooltipContentProps extends React.ComponentPropsWithoutRef<type
|
|
|
3
3
|
showArrow?: boolean;
|
|
4
4
|
dataTestid: string;
|
|
5
5
|
}
|
|
6
|
-
/** TooltipContent — portalled Radix tooltip content with optional arrow. */
|
|
7
6
|
export declare const TooltipContent: import('react').ForwardRefExoticComponent<TooltipContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -4,15 +4,4 @@ export interface ComboboxContentProps extends Omit<React.ComponentPropsWithoutRe
|
|
|
4
4
|
sideOffset?: number;
|
|
5
5
|
align?: 'start' | 'center' | 'end';
|
|
6
6
|
}
|
|
7
|
-
/**
|
|
8
|
-
* ComboboxContent — the popover surface and the scrollable list in one.
|
|
9
|
-
* `@radix-ui/react-popover` provides the portal + positioning; `cmdk`'s `Command`
|
|
10
|
-
* provides item filtering. A visually-hidden `CommandInput` receives the shared
|
|
11
|
-
* search string so typing in the anchored input filters the list.
|
|
12
|
-
*
|
|
13
|
-
* `asChild` puts the shared `Surface` where the popover content element would
|
|
14
|
-
* be, and the shared viewport where cmdk's list would be, so a combobox and a
|
|
15
|
-
* select are the same card with the same padding by construction rather than
|
|
16
|
-
* by two stylesheets agreeing.
|
|
17
|
-
*/
|
|
18
7
|
export declare const ComboboxContent: import('react').ForwardRefExoticComponent<ComboboxContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1,36 +1,5 @@
|
|
|
1
1
|
import { CommandList } from 'cmdk';
|
|
2
2
|
export type SearchPanelListProps = React.ComponentPropsWithoutRef<typeof CommandList>;
|
|
3
|
-
/**
|
|
4
|
-
* The scrolling list of groups and rows — `role="listbox"` and the rows in it —
|
|
5
|
-
* on a card that floats over the page.
|
|
6
|
-
*
|
|
7
|
-
* **It floats, and that is the point.** In the flow it pushed everything below
|
|
8
|
-
* the panel down the moment an answer landed, which is not what a dropdown does
|
|
9
|
-
* and is disqualifying for a search that lives in a header. The card is
|
|
10
|
-
* positioned by Radix's popper against the anchor `SearchPanel` wraps around
|
|
11
|
-
* itself, so it is exactly the field's width, it flips above the field when
|
|
12
|
-
* there is no room below, and it is `position: fixed` — no ancestor's
|
|
13
|
-
* `overflow` can clip it.
|
|
14
|
-
*
|
|
15
|
-
* **No portal, and that is also the point.** Everything the keyboard is made of
|
|
16
|
-
* is a relationship between this list and the field above it: cmdk gathers the
|
|
17
|
-
* rows by querying the `Command` element they sit inside, `aria-activedescendant`
|
|
18
|
-
* on the field points at a row's `id`, and the panel's custom properties reach
|
|
19
|
-
* the rows by inheriting down the tree. A `Popover.Portal` would move the rows
|
|
20
|
-
* out of `Command` entirely, and the arrows would stop finding them.
|
|
21
|
-
* Popper-positioned content does not need a portal to escape the flow —
|
|
22
|
-
* `position: fixed` already does — so it does not get one.
|
|
23
|
-
*
|
|
24
|
-
* The two auto-focus events are prevented for the same reason. A popover
|
|
25
|
-
* focuses its content when it opens and hands focus back when it closes; both
|
|
26
|
-
* would take focus off the search field, which is the one thing the arrow keys
|
|
27
|
-
* depend on. `role="presentation"` and the blanked `aria-labelledby` finish the
|
|
28
|
-
* job: the primitive believes it is a dialog, a screen reader must not, and the
|
|
29
|
-
* name it points at belongs to a trigger this panel does not have. Radix
|
|
30
|
-
* spreads the caller's props *after* its own `role`, so saying so here is
|
|
31
|
-
* enough — the Vue port has to write the same two attributes one level further
|
|
32
|
-
* down, where reka merges last.
|
|
33
|
-
*/
|
|
34
3
|
export declare const SearchPanelList: import('react').ForwardRefExoticComponent<Omit<{
|
|
35
4
|
children?: React.ReactNode;
|
|
36
5
|
} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
|
|
@@ -4,14 +4,4 @@ export interface SelectContentProps extends Omit<React.ComponentPropsWithoutRef<
|
|
|
4
4
|
sideOffset?: number;
|
|
5
5
|
align?: 'start' | 'center' | 'end';
|
|
6
6
|
}
|
|
7
|
-
/**
|
|
8
|
-
* The floating list. Always positioned against the trigger rather than over it,
|
|
9
|
-
* so the popup matches the trigger's width and never covers it.
|
|
10
|
-
*
|
|
11
|
-
* `asChild` hands the primitive's positioning, `data-state` and `data-side` to
|
|
12
|
-
* the shared `Surface`, which is the one element `Popover`, `Select`,
|
|
13
|
-
* `Combobox` and `SearchPanel` may have in common. Exactly one child sits at
|
|
14
|
-
* each slot position — Radix's `Slot` throws on a second, which is the whole
|
|
15
|
-
* reason the arrangement is safe to read at a glance.
|
|
16
|
-
*/
|
|
17
7
|
export declare const SelectContent: import('react').ForwardRefExoticComponent<SelectContentProps & import('react').RefAttributes<HTMLDivElement>>;
|