@botiverse/raft-ui 0.28.0 → 0.30.0
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/CHANGELOG.md +32 -0
- package/dist/{inbox-item-CfS34Ssw.mjs → inbox-item-69Tx19JG.mjs} +308 -21
- package/dist/{inbox-item-D1MJIoH9.d.mts → inbox-item-CXvn7hxs.d.mts} +5 -4
- package/dist/index.d.mts +2 -2
- package/dist/index.mjs +2 -278
- package/dist/wip.d.mts +65 -2
- package/dist/wip.mjs +243 -3
- package/package.json +1 -1
package/dist/wip.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { $i as MobileNavServerPopoverDestinationProps, $s as DialogTitleProps, B as MessageListJumpPill, C as InboxItemProps, Ca as PopoverBodyProps, Cs as DialogCommitProps, Es as Dialog, G as MessageListJumpPillProps, H as MessageListJumpPillDismissProps, Is as DialogFooterNote, Ji as MobileNavServerItemProps, Js as DialogSheetBack, Jt as MessageReferenceIcon, Ls as DialogFooterNoteProps, Ms as DialogContentProps, Qi as MobileNavServerPopoverDestination, R as MessageListJumpControls, Sa as PopoverBody, Ss as DialogCommit, Ti as PreviewCardMetaProps, Ts as DialogSheetContentProps, U as MessageListJumpPillGroup, V as MessageListJumpPillDismiss, W as MessageListJumpPillGroupProps, Xi as MobileNavServerPopoverContent, Yi as MobileNavServerPopover, Ys as DialogSheetBackProps, Yt as MessageReferenceIconProps, Zi as MobileNavServerPopoverContentProps, _a as PopoverActionsProps, aa as MobileNavServerPopoverListProps, ac as ButtonProps, ar as MessageItemDelegatedByButtonProps, bi as PreviewCardFooter, bs as TextLinkProps, ca as MobileNavServerPopoverRowBody, ci as PreviewCardActions, cr as MessageItemDelegatedByProps, ct as MessageQuotedPreviewAuthorDelegatedBy, da as MobileNavServerPopoverRowDescriptionProps, dc as StyledProps, ea as MobileNavServerPopoverDestinations, ec as DialogTrigger, fa as MobileNavServerPopoverRowLabel, fi as PreviewCardBody, ga as PopoverActions, ho as DropdownMenuLinkItemProps, ia as MobileNavServerPopoverList, ir as MessageItemDelegatedByButton, ks as DialogClose, la as MobileNavServerPopoverRowBodyProps, lc as VariantProps, li as PreviewCardActionsProps, ls as ListRowProps, lt as MessageQuotedPreviewAuthorDelegatedByProps, ma as MobileNavServerPopoverRowProps, mo as DropdownMenuLinkItem, na as MobileNavServerPopoverGroup, nn as MessageReferenceReadMark, nr as MessageItemDelegatedAvatarProps, oa as MobileNavServerPopoverProps, or as MessageItemDelegatedByName, pa as MobileNavServerPopoverRowLabelProps, pi as PreviewCardBodyProps, qi as MobileNavServerItem, ra as MobileNavServerPopoverGroupProps, rn as MessageReferenceReadMarkProps, rr as MessageItemDelegatedBy, sa as MobileNavServerPopoverRow, sr as MessageItemDelegatedByNameProps, ta as MobileNavServerPopoverDestinationsProps, tr as MessageItemDelegatedAvatar, u as InboxItemDensity, ua as MobileNavServerPopoverRowDescription, uc as DataAttributes, vi as PreviewCardEyebrow, wi as PreviewCardMeta, ws as DialogSheetContent, xi as PreviewCardFooterProps, yi as PreviewCardEyebrowProps, z as MessageListJumpControlsProps } from "./inbox-item-
|
|
1
|
+
import { $i as MobileNavServerPopoverDestinationProps, $s as DialogTitleProps, B as MessageListJumpPill, C as InboxItemProps, Ca as PopoverBodyProps, Cs as DialogCommitProps, Es as Dialog, G as MessageListJumpPillProps, H as MessageListJumpPillDismissProps, Is as DialogFooterNote, Ji as MobileNavServerItemProps, Js as DialogSheetBack, Jt as MessageReferenceIcon, Ls as DialogFooterNoteProps, Ms as DialogContentProps, Qi as MobileNavServerPopoverDestination, R as MessageListJumpControls, Sa as PopoverBody, Ss as DialogCommit, Ti as PreviewCardMetaProps, Ts as DialogSheetContentProps, U as MessageListJumpPillGroup, V as MessageListJumpPillDismiss, W as MessageListJumpPillGroupProps, Xi as MobileNavServerPopoverContent, Yi as MobileNavServerPopover, Ys as DialogSheetBackProps, Yt as MessageReferenceIconProps, Zi as MobileNavServerPopoverContentProps, _a as PopoverActionsProps, aa as MobileNavServerPopoverListProps, ac as ButtonProps, ar as MessageItemDelegatedByButtonProps, bi as PreviewCardFooter, bs as TextLinkProps, ca as MobileNavServerPopoverRowBody, ci as PreviewCardActions, cr as MessageItemDelegatedByProps, ct as MessageQuotedPreviewAuthorDelegatedBy, da as MobileNavServerPopoverRowDescriptionProps, dc as StyledProps, ea as MobileNavServerPopoverDestinations, ec as DialogTrigger, fa as MobileNavServerPopoverRowLabel, fi as PreviewCardBody, ga as PopoverActions, ho as DropdownMenuLinkItemProps, ia as MobileNavServerPopoverList, ir as MessageItemDelegatedByButton, ks as DialogClose, la as MobileNavServerPopoverRowBodyProps, lc as VariantProps, li as PreviewCardActionsProps, ls as ListRowProps, lt as MessageQuotedPreviewAuthorDelegatedByProps, ma as MobileNavServerPopoverRowProps, mo as DropdownMenuLinkItem, na as MobileNavServerPopoverGroup, nn as MessageReferenceReadMark, nr as MessageItemDelegatedAvatarProps, oa as MobileNavServerPopoverProps, or as MessageItemDelegatedByName, pa as MobileNavServerPopoverRowLabelProps, pi as PreviewCardBodyProps, qi as MobileNavServerItem, ra as MobileNavServerPopoverGroupProps, rn as MessageReferenceReadMarkProps, rr as MessageItemDelegatedBy, sa as MobileNavServerPopoverRow, sr as MessageItemDelegatedByNameProps, ta as MobileNavServerPopoverDestinationsProps, tr as MessageItemDelegatedAvatar, u as InboxItemDensity, ua as MobileNavServerPopoverRowDescription, uc as DataAttributes, vi as PreviewCardEyebrow, wi as PreviewCardMeta, ws as DialogSheetContent, xi as PreviewCardFooterProps, yi as PreviewCardEyebrowProps, z as MessageListJumpControlsProps } from "./inbox-item-CXvn7hxs.mjs";
|
|
2
2
|
import { CSSProperties, ComponentProps, ComponentPropsWithRef, PointerEvent, ReactNode, RefObject } from "react";
|
|
3
3
|
import { Button } from "@base-ui/react/button";
|
|
4
4
|
import { useRender } from "@base-ui/react/use-render";
|
|
@@ -706,4 +706,67 @@ type PullToRefreshIndicatorProps = Omit<ComponentProps<"div">, "children"> & {
|
|
|
706
706
|
*/
|
|
707
707
|
export declare function PullToRefreshIndicator({ pull, label, className, style, ...props }: PullToRefreshIndicatorProps): import("react").JSX.Element;
|
|
708
708
|
//#endregion
|
|
709
|
-
|
|
709
|
+
//#region src/components/choice-list/choice-list.d.ts
|
|
710
|
+
type ChoiceListItem = {
|
|
711
|
+
value: string;
|
|
712
|
+
/** The row's name. The radio or checkbox is named by this alone. */
|
|
713
|
+
label: ReactNode;
|
|
714
|
+
/** What the search matches, case-insensitively. Defaults to `label` when it is a string. */
|
|
715
|
+
searchText?: string;
|
|
716
|
+
/**
|
|
717
|
+
* Up to two lines under the name, each cut to one line. An empty line
|
|
718
|
+
* (null, false or "") is not drawn. Colour inside a line is the caller's.
|
|
719
|
+
*/
|
|
720
|
+
description?: ReactNode | readonly ReactNode[];
|
|
721
|
+
/** Drawn before the radio's or checkbox's row text: an avatar, an icon. */
|
|
722
|
+
media?: ReactNode;
|
|
723
|
+
/**
|
|
724
|
+
* A button at the end of the row, such as one that opens details. It sits
|
|
725
|
+
* outside the row's label and the group: clicking it chooses nothing, and
|
|
726
|
+
* it is a Tab stop of its own after the group, in row order.
|
|
727
|
+
*/
|
|
728
|
+
action?: ReactNode;
|
|
729
|
+
disabled?: boolean;
|
|
730
|
+
};
|
|
731
|
+
type ChoiceListCommonProps = {
|
|
732
|
+
items: readonly ChoiceListItem[];
|
|
733
|
+
/**
|
|
734
|
+
* When the search box shows. `"always"` when people look for an item they
|
|
735
|
+
* know by name, such as a person: the box shows at any count, and with a
|
|
736
|
+
* mouse or trackpad focus starts in it. `"auto"` when people choose by
|
|
737
|
+
* comparing the rows: the box shows only above 5 items.
|
|
738
|
+
*/
|
|
739
|
+
search?: "auto" | "always";
|
|
740
|
+
"aria-label"?: string;
|
|
741
|
+
"aria-labelledby"?: string;
|
|
742
|
+
disabled?: boolean;
|
|
743
|
+
/**
|
|
744
|
+
* The search box's accessible name. Required: any list can come to search,
|
|
745
|
+
* since `"auto"` shows the box once the items, usually from data, pass 5.
|
|
746
|
+
*/
|
|
747
|
+
searchLabel: string;
|
|
748
|
+
searchPlaceholder?: string;
|
|
749
|
+
/** The search box's text when the list first draws, such as a search carried over. */
|
|
750
|
+
defaultSearchValue?: string;
|
|
751
|
+
/** The clear button's accessible name. */
|
|
752
|
+
clearSearchLabel: string;
|
|
753
|
+
/** The line under the chosen rows when nothing else matches. */
|
|
754
|
+
noMatchLabel?: ReactNode;
|
|
755
|
+
/** The line drawn when there are no items at all. */
|
|
756
|
+
empty?: ReactNode;
|
|
757
|
+
className?: string;
|
|
758
|
+
};
|
|
759
|
+
type ChoiceListSingleProps = ChoiceListCommonProps & {
|
|
760
|
+
multiple?: false;
|
|
761
|
+
value: string | null;
|
|
762
|
+
onValueChange: (value: string) => void;
|
|
763
|
+
};
|
|
764
|
+
type ChoiceListMultipleProps = ChoiceListCommonProps & {
|
|
765
|
+
multiple: true;
|
|
766
|
+
value: readonly string[];
|
|
767
|
+
onValueChange: (value: string[]) => void;
|
|
768
|
+
};
|
|
769
|
+
type ChoiceListProps = ChoiceListSingleProps | ChoiceListMultipleProps;
|
|
770
|
+
export declare function ChoiceList(props: ChoiceListProps): import("react").JSX.Element;
|
|
771
|
+
//#endregion
|
|
772
|
+
export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, type EllipsisProps, type EllipsisState, type EllipsisToggleProps, type HoldThenMoveOptions, type InboxItemLeadingBadgeProps, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, type ListRowSkeletonProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, type MeterHeaderProps, type MeterIndicatorProps, type MeterLabelProps, type MeterProps, type MeterTrackProps, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, type OverlayLayerKind, type OverlayLayerProviderProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, type UseCommentMarginFitsOptions, type UsePullToRefreshOptions };
|
package/dist/wip.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { $r as
|
|
2
|
-
import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
|
|
1
|
+
import { $r as ListRowBody, Bn as MobileNavServerPopoverDestination, C as MessageListJumpPill, Cn as PreviewCardActions, Cr as DropdownMenuLinkItem, F as MessageQuotedPreviewAuthorDelegatedBy, Fi as TextLink, Ft as MessageItemDelegatedAvatar, Gn as MobileNavServerPopoverRowBody, Hi as defaultNativeButton, Hn as MobileNavServerPopoverGroup, It as MessageItemDelegatedBy, Ki as useThemeScopeProps, Kn as MobileNavServerPopoverRowDescription, Ln as MobileNavServerItem, Lt as MessageItemDelegatedByButton, Mi as DialogTrigger, On as PreviewCardEyebrow, Qn as PopoverBody, Qr as ListRow, Rn as MobileNavServerPopover, Rt as MessageItemDelegatedByName, S as MessageListJumpControls, T as MessageListJumpPillGroup, Tn as PreviewCardBody, Ui as OverlayLayerProvider, Un as MobileNavServerPopoverList, Vi as Spinner, Vn as MobileNavServerPopoverDestinations, Wi as useParentOverlayKind, Wn as MobileNavServerPopoverRow, Yi as tv, Yn as PopoverActions, Yr as Checkbox, _ as InboxItemTrailing, _n as useOverflowTitle, a as InboxItemContext, ai as ListRowMeta, at as MessageReferenceIcon, b as useLatestRef, bi as DialogClose, bn as observeTruncation, c as InboxItemLeading, dn as RadioGroup, ei as ListRowBottom, g as InboxItemTitle, gi as DialogSheetContent, gn as InputGroupInput, h as InboxItemTimestamp, hi as DialogCommit, hn as InputGroupAddon, i as InboxItemContent, ji as DialogTitle, jn as PreviewCardMeta, ki as DialogSheetBack, kn as PreviewCardFooter, li as Tooltip, lr as useHoldThenMoveTouchSensor, lt as MessageReferenceReadMark, mn as InputGroup, ni as ListRowDescription, o as InboxItemHeading, oi as ListRowTitle, pi as TooltipTrigger, pn as RadioGroupItem, qi as useTheme, qn as MobileNavServerPopoverRowLabel, r as InboxItemBody, si as ListRowTop, t as InboxItem, ui as TooltipContent, vi as Dialog, vn as measureContent, w as MessageListJumpPillDismiss, wi as DialogFooterNote, x as Skeleton, xi as DialogContent, xn as readNow, y as inboxItem, yn as measureElement, zi as Button$1, zn as MobileNavServerPopoverContent } from "./inbox-item-69Tx19JG.mjs";
|
|
2
|
+
import { Check, ChevronDown, LoaderCircle, Plus, Search, X } from "lucide-react";
|
|
3
3
|
import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
4
4
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { Button } from "@base-ui/react/button";
|
|
@@ -7,6 +7,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
|
|
|
7
7
|
import { useRender } from "@base-ui/react/use-render";
|
|
8
8
|
import { Combobox } from "@base-ui/react/combobox";
|
|
9
9
|
import { Meter as Meter$1 } from "@base-ui/react/meter";
|
|
10
|
+
import { CheckboxGroup } from "@base-ui/react/checkbox-group";
|
|
10
11
|
//#region src/lib/phone-media.ts
|
|
11
12
|
/**
|
|
12
13
|
* A phone: a touch screen narrower than the desktop layout. The complement, on
|
|
@@ -2327,4 +2328,243 @@ function PullToRefreshIndicator({ pull, label, className, style, ...props }) {
|
|
|
2327
2328
|
});
|
|
2328
2329
|
}
|
|
2329
2330
|
//#endregion
|
|
2330
|
-
|
|
2331
|
+
//#region src/components/choice-list/choice-list.recipe.ts
|
|
2332
|
+
const choiceList = tv({
|
|
2333
|
+
slots: {
|
|
2334
|
+
root: ["grid min-w-0 gap-2"],
|
|
2335
|
+
searchInput: ["[&::-webkit-search-cancel-button]:appearance-none"],
|
|
2336
|
+
frame: ["min-w-0 rounded-container border border-line-hairline bg-layer-card p-1"],
|
|
2337
|
+
rows: ["grid grid-cols-[minmax(0,1fr)_auto] gap-x-0 gap-y-0.5"],
|
|
2338
|
+
group: ["col-span-2 col-start-1 grid grid-cols-subgrid grid-rows-subgrid gap-x-0 gap-y-0.5"],
|
|
2339
|
+
item: [
|
|
2340
|
+
"col-span-2 flex min-w-0 items-start gap-2.5 rounded-chip px-2.5",
|
|
2341
|
+
"min-h-option py-option-inset",
|
|
2342
|
+
"pointer-coarse:min-h-11 pointer-coarse:py-[calc((--spacing(11)-1lh)/2)]",
|
|
2343
|
+
"text-left font-sans text-subhead",
|
|
2344
|
+
"not-data-disabled:hover:bg-brand-soft not-data-disabled:active:overlay-medium",
|
|
2345
|
+
"data-disabled:cursor-not-allowed"
|
|
2346
|
+
],
|
|
2347
|
+
media: ["flex h-lh shrink-0 items-center"],
|
|
2348
|
+
body: ["grid min-w-0 flex-1 gap-0.5"],
|
|
2349
|
+
label: ["truncate font-semibold text-foreground", "in-data-disabled:text-foreground-disabled"],
|
|
2350
|
+
description: ["block truncate font-sans text-footnote font-normal text-foreground-muted", "in-data-disabled:text-foreground-disabled"],
|
|
2351
|
+
action: [
|
|
2352
|
+
"relative z-10 col-start-2 flex h-lh items-center self-start pr-1",
|
|
2353
|
+
"mt-option-inset pointer-coarse:mt-[calc((--spacing(11)-1lh)/2)]",
|
|
2354
|
+
"font-sans text-subhead"
|
|
2355
|
+
],
|
|
2356
|
+
note: ["px-2.5 py-2 font-sans text-callout text-foreground-hint"]
|
|
2357
|
+
},
|
|
2358
|
+
variants: {
|
|
2359
|
+
scroll: { true: { frame: ["max-h-72 overflow-y-auto overscroll-contain"] } },
|
|
2360
|
+
hasAction: { true: { item: ["pr-11"] } }
|
|
2361
|
+
}
|
|
2362
|
+
});
|
|
2363
|
+
//#endregion
|
|
2364
|
+
//#region src/components/choice-list/choice-list.tsx
|
|
2365
|
+
const SEARCH_ABOVE = 5;
|
|
2366
|
+
const MAX_DESCRIPTION_LINES = 2;
|
|
2367
|
+
function isDrawn(line) {
|
|
2368
|
+
return line !== null && line !== void 0 && line !== false && line !== "";
|
|
2369
|
+
}
|
|
2370
|
+
function descriptionLines(description) {
|
|
2371
|
+
return (Array.isArray(description) ? description : [description]).filter(isDrawn);
|
|
2372
|
+
}
|
|
2373
|
+
const NOT_TEXT_INPUTS = /* @__PURE__ */ new Set([
|
|
2374
|
+
"button",
|
|
2375
|
+
"checkbox",
|
|
2376
|
+
"radio",
|
|
2377
|
+
"submit",
|
|
2378
|
+
"reset",
|
|
2379
|
+
"image",
|
|
2380
|
+
"file",
|
|
2381
|
+
"range",
|
|
2382
|
+
"color"
|
|
2383
|
+
]);
|
|
2384
|
+
function isTextEntry(element) {
|
|
2385
|
+
if (!(element instanceof HTMLElement)) return false;
|
|
2386
|
+
if (element.isContentEditable || element instanceof HTMLTextAreaElement) return true;
|
|
2387
|
+
if (element instanceof HTMLSelectElement) return true;
|
|
2388
|
+
return element instanceof HTMLInputElement && !NOT_TEXT_INPUTS.has(element.type);
|
|
2389
|
+
}
|
|
2390
|
+
function searchTextOf(item) {
|
|
2391
|
+
if (item.searchText !== void 0) return item.searchText;
|
|
2392
|
+
return typeof item.label === "string" ? item.label : "";
|
|
2393
|
+
}
|
|
2394
|
+
function visibleItems(items, needle, pinned, chosen) {
|
|
2395
|
+
if (!needle) return {
|
|
2396
|
+
rows: items,
|
|
2397
|
+
noMatch: false
|
|
2398
|
+
};
|
|
2399
|
+
const matches = (item) => searchTextOf(item).toLowerCase().includes(needle);
|
|
2400
|
+
const isPinned = (item) => pinned.includes(item.value);
|
|
2401
|
+
const top = items.filter((item) => isPinned(item) || chosen.includes(item.value) && !matches(item));
|
|
2402
|
+
const rest = items.filter((item) => !top.includes(item) && matches(item));
|
|
2403
|
+
return {
|
|
2404
|
+
rows: [...top, ...rest],
|
|
2405
|
+
noMatch: !items.some(matches)
|
|
2406
|
+
};
|
|
2407
|
+
}
|
|
2408
|
+
function ChoiceList(props) {
|
|
2409
|
+
const { items, search = "auto", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled = false, searchLabel, searchPlaceholder, defaultSearchValue = "", clearSearchLabel, noMatchLabel, empty, className } = props;
|
|
2410
|
+
const value = props.value;
|
|
2411
|
+
const chosen = useMemo(() => value === null ? [] : typeof value === "string" ? [value] : value, [value]);
|
|
2412
|
+
const [query, setQuery] = useState(defaultSearchValue);
|
|
2413
|
+
const [pinned, setPinned] = useState(chosen);
|
|
2414
|
+
const inputRef = useRef(null);
|
|
2415
|
+
const baseId = useId();
|
|
2416
|
+
const searchable = items.length > 0 && (search === "always" || items.length > SEARCH_ABOVE);
|
|
2417
|
+
const [wasSearchable, setWasSearchable] = useState(searchable);
|
|
2418
|
+
if (wasSearchable !== searchable) {
|
|
2419
|
+
setWasSearchable(searchable);
|
|
2420
|
+
if (!searchable) setQuery("");
|
|
2421
|
+
}
|
|
2422
|
+
const { rows, noMatch } = visibleItems(items, searchable ? query.trim().toLowerCase() : "", pinned, chosen);
|
|
2423
|
+
const hasAction = rows.some((item) => item.action !== void 0 && item.action !== null);
|
|
2424
|
+
const slots = choiceList({ scroll: searchable });
|
|
2425
|
+
useEffect(() => {
|
|
2426
|
+
if (process.env.NODE_ENV === "production") return;
|
|
2427
|
+
if (!ariaLabel && !ariaLabelledBy) console.warn("raft-ui: a ChoiceList has neither aria-label nor aria-labelledby.");
|
|
2428
|
+
if (items.some((item) => descriptionLines(item.description).length > MAX_DESCRIPTION_LINES)) console.warn(`raft-ui: a ChoiceList item has more than ${MAX_DESCRIPTION_LINES} description lines; only the first ${MAX_DESCRIPTION_LINES} are drawn.`);
|
|
2429
|
+
}, [
|
|
2430
|
+
ariaLabel,
|
|
2431
|
+
ariaLabelledBy,
|
|
2432
|
+
items
|
|
2433
|
+
]);
|
|
2434
|
+
const focusSearch = search === "always" && searchable;
|
|
2435
|
+
const focusedSearch = useRef(false);
|
|
2436
|
+
useEffect(() => {
|
|
2437
|
+
if (!focusSearch || focusedSearch.current) return;
|
|
2438
|
+
focusedSearch.current = true;
|
|
2439
|
+
const input = inputRef.current;
|
|
2440
|
+
if (!input || typeof window.matchMedia !== "function") return;
|
|
2441
|
+
if (!window.matchMedia("(pointer: fine)").matches) return;
|
|
2442
|
+
if (isTextEntry(document.activeElement)) return;
|
|
2443
|
+
input.focus({ preventScroll: true });
|
|
2444
|
+
}, [focusSearch]);
|
|
2445
|
+
const changeQuery = useCallback((event) => {
|
|
2446
|
+
setQuery(event.currentTarget.value);
|
|
2447
|
+
setPinned(chosen);
|
|
2448
|
+
}, [chosen]);
|
|
2449
|
+
const clearQuery = useCallback(() => {
|
|
2450
|
+
setQuery("");
|
|
2451
|
+
setPinned(chosen);
|
|
2452
|
+
inputRef.current?.focus();
|
|
2453
|
+
}, [chosen]);
|
|
2454
|
+
const groupProps = {
|
|
2455
|
+
"aria-label": ariaLabel,
|
|
2456
|
+
"aria-labelledby": ariaLabelledBy,
|
|
2457
|
+
disabled,
|
|
2458
|
+
className: slots.group(),
|
|
2459
|
+
style: { gridRow: `1 / span ${rows.length}` }
|
|
2460
|
+
};
|
|
2461
|
+
const rowElements = rows.map((item) => {
|
|
2462
|
+
const id = `${baseId}-${items.indexOf(item)}`;
|
|
2463
|
+
const lines = descriptionLines(item.description).slice(0, MAX_DESCRIPTION_LINES);
|
|
2464
|
+
const rowDisabled = disabled || item.disabled === true;
|
|
2465
|
+
const markProps = {
|
|
2466
|
+
value: item.value,
|
|
2467
|
+
disabled: item.disabled,
|
|
2468
|
+
"aria-labelledby": `${id}-label`,
|
|
2469
|
+
"aria-describedby": lines.length > 0 ? `${id}-description` : void 0
|
|
2470
|
+
};
|
|
2471
|
+
return /* @__PURE__ */ jsxs("label", {
|
|
2472
|
+
"data-slot": "choice-list-item",
|
|
2473
|
+
"data-disabled": rowDisabled ? "" : void 0,
|
|
2474
|
+
className: slots.item({ hasAction }),
|
|
2475
|
+
children: [
|
|
2476
|
+
props.multiple ? /* @__PURE__ */ jsx(Checkbox, { ...markProps }) : /* @__PURE__ */ jsx(RadioGroupItem, { ...markProps }),
|
|
2477
|
+
item.media !== void 0 && item.media !== null ? /* @__PURE__ */ jsx("span", {
|
|
2478
|
+
"data-slot": "choice-list-media",
|
|
2479
|
+
className: slots.media(),
|
|
2480
|
+
children: item.media
|
|
2481
|
+
}) : null,
|
|
2482
|
+
/* @__PURE__ */ jsxs("span", {
|
|
2483
|
+
"data-slot": "choice-list-body",
|
|
2484
|
+
className: slots.body(),
|
|
2485
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
2486
|
+
id: `${id}-label`,
|
|
2487
|
+
"data-slot": "choice-list-label",
|
|
2488
|
+
className: slots.label(),
|
|
2489
|
+
children: item.label
|
|
2490
|
+
}), lines.length > 0 ? /* @__PURE__ */ jsx("span", {
|
|
2491
|
+
id: `${id}-description`,
|
|
2492
|
+
className: "contents",
|
|
2493
|
+
children: lines.map((line, index) => /* @__PURE__ */ jsx("span", {
|
|
2494
|
+
"data-slot": "choice-list-description",
|
|
2495
|
+
className: slots.description(),
|
|
2496
|
+
children: line
|
|
2497
|
+
}, index))
|
|
2498
|
+
}) : null]
|
|
2499
|
+
})
|
|
2500
|
+
]
|
|
2501
|
+
}, item.value);
|
|
2502
|
+
});
|
|
2503
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
2504
|
+
"data-slot": "choice-list",
|
|
2505
|
+
className: slots.root({ className }),
|
|
2506
|
+
children: [searchable ? /* @__PURE__ */ jsxs(InputGroup, {
|
|
2507
|
+
"data-slot": "choice-list-search",
|
|
2508
|
+
children: [
|
|
2509
|
+
/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { "aria-hidden": true }) }),
|
|
2510
|
+
/* @__PURE__ */ jsx(InputGroupInput, {
|
|
2511
|
+
ref: inputRef,
|
|
2512
|
+
type: "search",
|
|
2513
|
+
value: query,
|
|
2514
|
+
onChange: changeQuery,
|
|
2515
|
+
"aria-label": searchLabel,
|
|
2516
|
+
placeholder: searchPlaceholder,
|
|
2517
|
+
disabled,
|
|
2518
|
+
autoComplete: "off",
|
|
2519
|
+
className: slots.searchInput()
|
|
2520
|
+
}),
|
|
2521
|
+
query ? /* @__PURE__ */ jsx(InputGroupAddon, {
|
|
2522
|
+
align: "inline-end",
|
|
2523
|
+
children: /* @__PURE__ */ jsx(Button$1, {
|
|
2524
|
+
variant: "ghost",
|
|
2525
|
+
size: "icon-md",
|
|
2526
|
+
"aria-label": clearSearchLabel,
|
|
2527
|
+
onClick: clearQuery,
|
|
2528
|
+
children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
|
|
2529
|
+
})
|
|
2530
|
+
}) : null
|
|
2531
|
+
]
|
|
2532
|
+
}) : null, /* @__PURE__ */ jsx("div", {
|
|
2533
|
+
"data-slot": "choice-list-frame",
|
|
2534
|
+
className: slots.frame(),
|
|
2535
|
+
children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
|
|
2536
|
+
"data-slot": "choice-list-note",
|
|
2537
|
+
className: slots.note(),
|
|
2538
|
+
children: empty
|
|
2539
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [rows.length > 0 ? /* @__PURE__ */ jsxs("div", {
|
|
2540
|
+
"data-slot": "choice-list-rows",
|
|
2541
|
+
className: slots.rows(),
|
|
2542
|
+
children: [props.multiple ? /* @__PURE__ */ jsx(CheckboxGroup, {
|
|
2543
|
+
"data-slot": "choice-list-group",
|
|
2544
|
+
value: props.value,
|
|
2545
|
+
onValueChange: props.onValueChange,
|
|
2546
|
+
...groupProps,
|
|
2547
|
+
children: rowElements
|
|
2548
|
+
}) : /* @__PURE__ */ jsx(RadioGroup, {
|
|
2549
|
+
"data-slot": "choice-list-group",
|
|
2550
|
+
value: props.value,
|
|
2551
|
+
onValueChange: props.onValueChange,
|
|
2552
|
+
...groupProps,
|
|
2553
|
+
children: rowElements
|
|
2554
|
+
}), rows.map((item, index) => item.action !== void 0 && item.action !== null ? /* @__PURE__ */ jsx("div", {
|
|
2555
|
+
"data-slot": "choice-list-action",
|
|
2556
|
+
className: slots.action(),
|
|
2557
|
+
style: { gridRow: index + 1 },
|
|
2558
|
+
children: item.action
|
|
2559
|
+
}, item.value) : null)]
|
|
2560
|
+
}) : null, searchable ? /* @__PURE__ */ jsx("p", {
|
|
2561
|
+
role: "status",
|
|
2562
|
+
"data-slot": "choice-list-status",
|
|
2563
|
+
className: noMatch ? slots.note() : "sr-only",
|
|
2564
|
+
children: noMatch ? noMatchLabel : null
|
|
2565
|
+
}) : null] })
|
|
2566
|
+
})]
|
|
2567
|
+
});
|
|
2568
|
+
}
|
|
2569
|
+
//#endregion
|
|
2570
|
+
export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, ListRowSkeleton, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
|