@adecore/ui 0.33.3 → 0.34.1

package/dist/combobox/parts.js

@@ -0,0 +1,556 @@
+import { c as _c } from "react/compiler-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { withClass } from '../class-name.js';
+import { fieldControlProps, useFieldControl } from '../field-context.js';
+import { Icon } from "../Icon.js";
+import { Kbd } from "../Kbd.js";
+import { MENU_LABEL } from "../menu/parts.js";
+import { splitPlacement } from '../placement.js';
+import { renderPositioner } from '../popup-layer.js';
+/* A line in the list instead of rows: nothing found, a search still running. It takes no room while it has nothing to say. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LIST_NOTE = 'text-center text-xs text-text-faint not-empty:px-3 not-empty:py-4';
+/* The field keeps free text: Base UI's autocomplete, whose suggestions only offer text, rather than its combobox, which holds a value. */
+export const ComboboxRoot = Autocomplete.Root;
+/* The field the suggestions open under, drawn as the library's `Input`. */
+export function ComboboxInput(t0) {
+  const $ = _c(39);
+  let className;
+  let icon;
+  let id;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      mono: t2,
+      icon,
+      className,
+      id,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = icon;
+    $[3] = id;
+    $[4] = props;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    className = $[1];
+    icon = $[2];
+    id = $[3];
+    props = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const size = t1 === undefined ? "md" : t1;
+  const mono = t2 === undefined ? false : t2;
+  const field = useFieldControl();
+  const small = size === "sm";
+  let t3;
+  if ($[7] !== field || $[8] !== id) {
+    t3 = fieldControlProps(field, id);
+    $[7] = field;
+    $[8] = id;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== props || $[11] !== t3) {
+    t4 = {
+      ...t3,
+      ...props
+    };
+    $[10] = props;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const control = t4;
+  if (icon === undefined) {
+    const t5 = small && "field-sm";
+    const t6 = mono && "font-mono text-code";
+    let t7;
+    if ($[13] !== className || $[14] !== t5 || $[15] !== t6) {
+      t7 = clsx("field", t5, t6, className);
+      $[13] = className;
+      $[14] = t5;
+      $[15] = t6;
+      $[16] = t7;
+    } else {
+      t7 = $[16];
+    }
+    let t8;
+    if ($[17] !== control || $[18] !== t7) {
+      t8 = /*#__PURE__*/_jsx(Autocomplete.Input, {
+        ...control,
+        className: t7
+      });
+      $[17] = control;
+      $[18] = t7;
+      $[19] = t8;
+    } else {
+      t8 = $[19];
+    }
+    return t8;
+  }
+  const t5 = small && "field-sm";
+  let t6;
+  if ($[20] !== className || $[21] !== t5) {
+    t6 = clsx("field relative flex p-0", t5, className);
+    $[20] = className;
+    $[21] = t5;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+  const t7 = small ? 12 : 14;
+  const t8 = small ? "left-2" : "left-2.5";
+  let t9;
+  if ($[23] !== t8) {
+    t9 = clsx("pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint", t8);
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== icon || $[26] !== t7 || $[27] !== t9) {
+    t10 = /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: t7,
+      className: t9
+    });
+    $[25] = icon;
+    $[26] = t7;
+    $[27] = t9;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  const t11 = small ? "pr-2 pl-7" : "pr-2.5 pl-8";
+  const t12 = mono && "font-mono text-code";
+  let t13;
+  if ($[29] !== t11 || $[30] !== t12) {
+    t13 = clsx("min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint", t11, t12);
+    $[29] = t11;
+    $[30] = t12;
+    $[31] = t13;
+  } else {
+    t13 = $[31];
+  }
+  let t14;
+  if ($[32] !== control || $[33] !== t13) {
+    t14 = /*#__PURE__*/_jsx(Autocomplete.Input, {
+      ...control,
+      className: t13
+    });
+    $[32] = control;
+    $[33] = t13;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+  let t15;
+  if ($[35] !== t10 || $[36] !== t14 || $[37] !== t6) {
+    t15 = /*#__PURE__*/_jsxs(Autocomplete.InputGroup, {
+      className: t6,
+      children: [t10, t14]
+    });
+    $[35] = t10;
+    $[36] = t14;
+    $[37] = t6;
+    $[38] = t15;
+  } else {
+    t15 = $[38];
+  }
+  return t15;
+}
+/* The portal, the positioner and the menu surface of the suggestions: under the field and at least as wide as it. */
+export function ComboboxPopup(t0) {
+  const $ = _c(17);
+  let align;
+  let className;
+  let side;
+  let sideOffset;
+  let t1;
+  if ($[0] !== t0) {
+    const {
+      side: t2,
+      align: t3,
+      sideOffset: t4,
+      className: t5,
+      ...props
+    } = t0;
+    className = t5;
+    side = t2 === undefined ? "bottom" : t2;
+    align = t3 === undefined ? "start" : t3;
+    sideOffset = t4 === undefined ? 6 : t4;
+    t1 = splitPlacement(props);
+    $[0] = t0;
+    $[1] = align;
+    $[2] = className;
+    $[3] = side;
+    $[4] = sideOffset;
+    $[5] = t1;
+  } else {
+    align = $[1];
+    className = $[2];
+    side = $[3];
+    sideOffset = $[4];
+    t1 = $[5];
+  }
+  const [placement, popupProps] = t1;
+  let t2;
+  if ($[6] !== className) {
+    t2 = withClass("menu-popup min-w-(--anchor-width)", className);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== popupProps || $[9] !== t2) {
+    t3 = /*#__PURE__*/_jsx(Autocomplete.Popup, {
+      className: t2,
+      ...popupProps
+    });
+    $[8] = popupProps;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== align || $[12] !== placement || $[13] !== side || $[14] !== sideOffset || $[15] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Autocomplete.Portal, {
+      children: /*#__PURE__*/_jsx(Autocomplete.Positioner, {
+        className: "popup-positioner",
+        render: renderPositioner,
+        ...placement,
+        side: side,
+        align: align,
+        sideOffset: sideOffset,
+        children: t3
+      })
+    });
+    $[11] = align;
+    $[12] = placement;
+    $[13] = side;
+    $[14] = sideOffset;
+    $[15] = t3;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  return t4;
+}
+export function ComboboxList(props) {
+  const $ = _c(5);
+  const {
+    t
+  } = useTranslation("ui");
+  let t0;
+  if ($[0] !== t) {
+    t0 = t("combobox.suggestions");
+    $[0] = t;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== props || $[3] !== t0) {
+    t1 = /*#__PURE__*/_jsx(Autocomplete.List, {
+      "aria-label": t0,
+      ...props
+    });
+    $[2] = props;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+/*
+ * One suggestion. Its children are the label. `onClick` runs for a click and for Enter on the
+ * highlighted row; Base UI clicks the row for Enter, so a modifier held with Enter is read in the
+ * field's `onKeyDown` instead.
+ */
+export function ComboboxItem(t0) {
+  const $ = _c(36);
+  let children;
+  let className;
+  let description;
+  let hint;
+  let icon;
+  let props;
+  let shortcut;
+  let t1;
+  let trailing;
+  if ($[0] !== t0) {
+    ({
+      icon,
+      hint,
+      description,
+      trailing,
+      shortcut,
+      unstyled: t1,
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = description;
+    $[4] = hint;
+    $[5] = icon;
+    $[6] = props;
+    $[7] = shortcut;
+    $[8] = t1;
+    $[9] = trailing;
+  } else {
+    children = $[1];
+    className = $[2];
+    description = $[3];
+    hint = $[4];
+    icon = $[5];
+    props = $[6];
+    shortcut = $[7];
+    t1 = $[8];
+    trailing = $[9];
+  }
+  const unstyled = t1 === undefined ? false : t1;
+  if (unstyled) {
+    let t2;
+    if ($[10] !== children || $[11] !== className || $[12] !== props) {
+      t2 = /*#__PURE__*/_jsx(Autocomplete.Item, {
+        className: className,
+        ...props,
+        children: children
+      });
+      $[10] = children;
+      $[11] = className;
+      $[12] = props;
+      $[13] = t2;
+    } else {
+      t2 = $[13];
+    }
+    return t2;
+  }
+  let t2;
+  if ($[14] !== children) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 truncate",
+      children: children
+    });
+    $[14] = children;
+    $[15] = t2;
+  } else {
+    t2 = $[15];
+  }
+  const label = t2;
+  let t3;
+  if ($[16] !== className || $[17] !== description) {
+    t3 = withClass(clsx("menu-item", description !== undefined && "items-start"), className);
+    $[16] = className;
+    $[17] = description;
+    $[18] = t3;
+  } else {
+    t3 = $[18];
+  }
+  let t4;
+  if ($[19] !== icon) {
+    t4 = icon !== undefined && /*#__PURE__*/_jsx("span", {
+      className: "flex h-lh shrink-0 items-center text-text-faint",
+      children: icon
+    });
+    $[19] = icon;
+    $[20] = t4;
+  } else {
+    t4 = $[20];
+  }
+  let t5;
+  if ($[21] !== description || $[22] !== label) {
+    t5 = description === undefined ? label : /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 flex-col",
+      children: [label, /*#__PURE__*/_jsx("span", {
+        className: "truncate text-xs text-text-faint",
+        children: description
+      })]
+    });
+    $[21] = description;
+    $[22] = label;
+    $[23] = t5;
+  } else {
+    t5 = $[23];
+  }
+  let t6;
+  if ($[24] !== hint) {
+    t6 = hint !== undefined && /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 shrink-1000 truncate text-xs/[inherit] text-text-faint",
+      children: hint
+    });
+    $[24] = hint;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  let t7;
+  if ($[26] !== shortcut || $[27] !== trailing) {
+    t7 = (trailing !== undefined || shortcut !== undefined) && /*#__PURE__*/_jsxs("span", {
+      className: "ml-auto flex h-lh shrink-0 items-center gap-2 pl-3",
+      children: [trailing, shortcut !== undefined && /*#__PURE__*/_jsx(Kbd, {
+        shortcut: shortcut
+      })]
+    });
+    $[26] = shortcut;
+    $[27] = trailing;
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  let t8;
+  if ($[29] !== props || $[30] !== t3 || $[31] !== t4 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7) {
+    t8 = /*#__PURE__*/_jsxs(Autocomplete.Item, {
+      className: t3,
+      ...props,
+      children: [t4, t5, t6, t7]
+    });
+    $[29] = props;
+    $[30] = t3;
+    $[31] = t4;
+    $[32] = t5;
+    $[33] = t6;
+    $[34] = t7;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
+  }
+  return t8;
+}
+export const ComboboxGroup = Autocomplete.Group;
+export function ComboboxGroupLabel(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = withClass(MENU_LABEL, className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Autocomplete.GroupLabel, {
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+export const ComboboxCollection = Autocomplete.Collection;
+/* Its children show only while the list has no rows. Needs `items` on the root. */
+export function ComboboxEmpty(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = withClass(LIST_NOTE, className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Autocomplete.Empty, {
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+/* A line read out as it changes, such as a search that is still running or how many it found. It stays mounted; only its children come and go. */
+export function ComboboxStatus(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = withClass(LIST_NOTE, className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Autocomplete.Status, {
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}

package/dist/command-palette/index.parts.d.ts

@@ -0,0 +1,2 @@
+export { ComboboxCollection as Collection, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxItem as Item, ComboboxStatus as Status } from '../combobox/parts.tsx';
+export { CommandPaletteFooter as Footer, CommandPaletteInput as Input, CommandPaletteList as List, CommandPalettePopup as Popup, CommandPaletteRoot as Root } from './parts.tsx';

package/dist/command-palette/index.parts.js

@@ -0,0 +1,3 @@
+/* A command palette is a combobox in a dialog; its rows, groups and notes are the combobox's own. */
+export { ComboboxCollection as Collection, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxItem as Item, ComboboxStatus as Status } from "../combobox/parts.js";
+export { CommandPaletteFooter as Footer, CommandPaletteInput as Input, CommandPaletteList as List, CommandPalettePopup as Popup, CommandPaletteRoot as Root } from "./parts.js";

package/dist/command-palette/parts.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { useRender } from '@base-ui/react/use-render';
+import { DialogRoot, type DialogPopupProps } from '../dialog/parts.tsx';
+declare const SIZE: {
+    readonly md: 'w-[576px]';
+    readonly lg: 'w-[760px]';
+};
+type AutocompleteProps<ItemValue> = Omit<Autocomplete.Root.Props<ItemValue>, 'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete' | 'inline' | 'openOnInputClick' | 'modal' | 'actionsRef' | 'items'> & {
+    items?: readonly ItemValue[] | readonly {
+        readonly items: readonly ItemValue[];
+    }[];
+};
+type DialogProps = Pick<ComponentProps<typeof DialogRoot>, 'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete'>;
+export type CommandPaletteRootProps<ItemValue> = AutocompleteProps<ItemValue> & DialogProps;
+export declare function CommandPaletteRoot<ItemValue>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, autoHighlight, keepHighlight, items, children, ...props }: CommandPaletteRootProps<ItemValue>): import("react").JSX.Element;
+export type CommandPalettePopupProps = Omit<DialogPopupProps, 'size'> & {
+    size?: keyof typeof SIZE;
+};
+export declare function CommandPalettePopup({ size, initialFocus, className, ...props }: CommandPalettePopupProps): import("react").JSX.Element;
+export type CommandPaletteInputProps = Omit<ComponentProps<typeof Autocomplete.Input>, 'className'> & {
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    escapeHint?: boolean;
+    mono?: boolean;
+    className?: string;
+};
+export declare function CommandPaletteInput({ leading, trailing, escapeHint, mono, className, ref, ...props }: CommandPaletteInputProps): import("react").JSX.Element;
+export declare function CommandPaletteList({ className, ...props }: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
+export type CommandPaletteFooterProps = useRender.ComponentProps<'div'>;
+export declare function CommandPaletteFooter({ render, className, ref, ...props }: CommandPaletteFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};