@botiverse/raft-ui 0.10.7 → 0.12.0

package/dist/style.css

@@ -1004,6 +1004,55 @@
     transform: translate(-1.5px, 1.2px) rotate(-8deg);
   }
 }
+@layer components {
+  .r-virtual-list {
+    max-height: inherit;
+    overflow-anchor: none;
+    outline: none;
+    min-width: 1px;
+    height: 100%;
+    overflow: hidden auto;
+  }
+
+  .r-virtual-list.r-virtual-list--ios-compensation-enabled {
+    overscroll-behavior: none;
+  }
+
+  .r-virtual-list.r-virtual-list--x-scrollable {
+    overflow-x: auto;
+  }
+
+  .r-virtual-list:not(.r-virtual-list--show-scrollbar) {
+    scrollbar-width: none;
+  }
+
+  .r-virtual-list:not(.r-virtual-list--show-scrollbar)::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  .r-virtual-list.r-virtual-list--empty-centered {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .r-virtual-list__empty.r-virtual-list__empty--center {
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    min-height: 0;
+    display: flex;
+  }
+
+  @media print {
+    .r-virtual-list.r-virtual-list--printable {
+      height: auto !important;
+      max-height: none !important;
+      overflow: visible !important;
+    }
+  }
+}
 .r-combobox-select {
   min-width: 0;
   position: relative;
@@ -1156,7 +1205,7 @@
   width: var(--anchor-width, max-content);
   min-width: 13.75rem;
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), max(24rem, var(--combobox-select-list-max-height, 0px)));
   background: var(--layer-popover);
   color: var(--foreground);
   box-shadow: 0 0 0 1px var(--line-seam),
@@ -1168,8 +1217,9 @@
 }
 
 .r-combobox-select__list {
+  box-sizing: border-box;
+  max-height: var(--combobox-select-list-max-height, 16rem);
   overscroll-behavior: contain;
-  max-height: 16rem;
   padding: 6px;
   scroll-padding-block: 6px;
   overflow-y: auto;
@@ -1300,134 +1350,12 @@
   color: var(--foreground-disabled);
 }
 
-.r-combobox-select__trigger {
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: inherit;
-  color: inherit;
-  font: inherit;
-  text-align: start;
-  cursor: default;
-  -webkit-tap-highlight-color: transparent;
-  background: none;
-  border: 0;
-  outline: 0;
-  flex: 1;
-  align-items: center;
-  padding: 0;
-  display: flex;
-}
-
-.r-combobox-select__trigger:after {
-  content: "";
-  border-radius: inherit;
-  position: absolute;
-  inset: 0;
-}
-
-.r-combobox-select__trigger:disabled {
-  color: inherit;
-}
-
-.r-combobox-select__value {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.r-combobox-select__placeholder {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  color: var(--foreground-hint);
-  overflow: hidden;
-}
-
-.r-combobox-select__trigger .r-combobox-select__chips {
-  margin-inline-start: -6px;
-}
-
-.r-combobox-select__trigger .r-combobox-select__chip {
-  padding-inline-end: 8px;
-}
-
-.r-combobox-select__clear {
-  z-index: 1;
-  position: relative;
-}
-
-.r-combobox-select__arrow {
-  pointer-events: none;
-}
-
-.r-combobox-select__control--trigger[data-popup-open] .r-combobox-select__arrow > svg {
-  transform: rotate(180deg);
-}
-
 .r-combobox-select__popup--anchored .r-combobox-select__list {
-  box-sizing: border-box;
-  max-height: min(calc(16rem + 12px), var(--available-height, 100vh));
-}
-
-.r-combobox-select__sheet-popup {
-  height: 82dvh;
-}
-
-.r-combobox-select__sheet {
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-}
-
-.r-combobox-select__sheet-header {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  padding-inline-end: 8px;
-}
-
-.r-combobox-select__sheet-title {
-  flex: 1;
-  min-width: 0;
-}
-
-.r-combobox-select__sheet-search {
-  flex: none;
-  padding: 4px 16px 8px;
-}
-
-.r-combobox-select__search-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--foreground-hint);
-  flex: none;
-}
-
-.r-combobox-select__sheet-body {
-  overscroll-behavior: contain;
-  min-height: 0;
-  padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px));
-  overflow-y: auto;
-}
-
-.r-combobox-select__sheet .r-combobox-select__list {
-  max-height: none;
-  padding: 0;
-  overflow: visible;
-}
-
-.r-combobox-select__sheet .r-combobox-select__option {
-  min-height: 52px;
-  font-size: var(--text-body);
-  line-height: var(--text-body--line-height);
-  padding: 0 12px;
+  max-height: min(var(--combobox-select-list-max-height, 16rem), var(--available-height, 100vh));
 }
 
-.r-combobox-select__sheet .r-combobox-select__group-label {
-  padding: 12px 12px 4px;
+.r-combobox-select__control--phone .r-combobox-select__input {
+  font-size: max(1em, 16px);
 }
 
 @keyframes r-combobox-select-spin {

package/dist/styles.css

@@ -4,6 +4,7 @@
 @import "./components/timeline/timeline.css";
 @import "./components/steps/steps.css";
 @import "./components/steps/otter-indicator.css";
+@import "./components/virtual-list/styles/virtual-list.css";
 
 /* `dark:` follows the nearest explicit mode class, and before hydration the
    system preference. A `.light` island inside a dark page re-enters light

package/dist/wip.d.mts

@@ -1,4 +1,4 @@
-import { M as StyledProps, O as ButtonProps, T as DialogTrigger, i as DialogClose, j as DataAttributes, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-CDHLWJtB.mjs";
+import { C as MessageQuotedPreviewAuthorDelegatedBy, Hi as DialogTitleProps, Ki as ButtonProps, Si as DialogClose, Ti as DialogContentProps, Ui as DialogTrigger, Xi as StyledProps, Yi as DataAttributes, a as MessageListJumpPillDismissProps, c as MessageListJumpPillProps, cn as MessageItemDelegatedAvatar, dn as MessageItemDelegatedByButton, fn as MessageItemDelegatedByButtonProps, hn as MessageItemDelegatedByProps, i as MessageListJumpPillDismiss, ln as MessageItemDelegatedAvatarProps, mn as MessageItemDelegatedByNameProps, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, pn as MessageItemDelegatedByName, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, un as MessageItemDelegatedBy, w as MessageQuotedPreviewAuthorDelegatedByProps, yi as Dialog } from "./index-epyBg4aG.mjs";
 import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
@@ -24,12 +24,6 @@ interface ComboboxSelectMessages {
   chipDescription: string;
   inputDescription: string;
   remove: (label: string) => string;
-  /** The placeholder of the search input at the top of the phone's bottom sheet. */
-  search: string;
-  /** The button that closes the phone's bottom sheet of a multiple select. */
-  done: string;
-  /** The close button of the phone's bottom sheet. */
-  close: string;
 }
 type RootProps = Combobox.Root.Props<unknown, boolean>;
 type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false> = Pick<RootProps, "name" | "form" | "required" | "disabled" | "readOnly" | "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete" | "autoHighlight" | "autoComplete" | "inputValue" | "defaultInputValue" | "onInputValueChange"> & Pick<ComponentPropsWithRef<"input">, "id" | "ref" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid"> & {
@@ -75,30 +69,23 @@ type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean
   loadingContent?: ReactNode;
   messages?: Partial<ComboboxSelectMessages>;
   /**
-   * On a phone (a touch screen under 48rem), more selectable options than this open a
-   * bottom sheet instead of the anchored list.
-   * @default 10
+   * The tallest the list gets before it scrolls, its 6px padding above and below
+   * included: a CSS length, or a number of pixels. On a phone the list also gets
+   * shorter to fit the room on its side, and opens above when that side has more
+   * room and below is short of this height.
+   * @default "16rem"
    */
-  sheetThreshold?: number;
-  /**
-   * The title of the phone's bottom sheet. Defaults to the field's name: `aria-label`,
-   * the text of `aria-labelledby`, or the `<label>` whose `for` is the field's `id`.
-   */
-  sheetTitle?: ReactNode;
-  /** The text input: the field on a desktop, the search input of the bottom sheet on a phone. */
+  listMaxHeight?: number | string;
   inputProps?: Omit<Combobox.Input.Props, "value" | "defaultValue" | "size" | "children">;
-  /** The portal of the list, and of the phone's anchored list and bottom sheet. */
   portalProps?: Combobox.Portal.Props;
-  /** The desktop list's positioner. A phone positions its list itself. */
   positionerProps?: Omit<Combobox.Positioner.Props, "children">;
-  /** The desktop list's popup. */
   popupProps?: Omit<Combobox.Popup.Props, "children">;
   className?: string;
   style?: CSSProperties;
 };
 //#endregion
 //#region src/components/combobox-select/combobox-select.d.ts
-export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, sheetThreshold, sheetTitle, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
+export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, listMaxHeight, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, onOpenChange, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
 //#endregion
 //#region src/components/announcement-dialog/announcement-dialog.d.ts
 export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;
@@ -278,4 +265,4 @@ type UseCommentMarginFitsOptions = {
  */
 export declare function useCommentMarginFits(element: Element | null, { minWidth }?: UseCommentMarginFitsOptions): boolean;
 //#endregion
-export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, 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, type UseCommentMarginFitsOptions };
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, 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, 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, type UseCommentMarginFitsOptions };