@webority/ui-react 0.30.0 → 0.32.0

package/dist/types/components/AppDropZone.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Document drop zone: a drag-and-drop target that hands the chosen file to the page and keeps
+ * nothing. Unlike `AppFilePicker` it has no value and shows no preview; the page decides what
+ * the file becomes (an upload, a viewer, a parse). A file that fails the type or size check is
+ * rejected inline and never reaches `onChange`.
+ *
+ * @param {object} props
+ * @param {(file: File | File[]) => void} props.onChange Single mode: the validated File. Multiple
+ *   mode: the validated Files of that pick or drop. Not called when nothing passes validation.
+ * @param {string} [props.label]
+ * @param {string} [props.id] DOM id for the file input and its label's `for` target.
+ * @param {boolean} [props.multiple=false] Take several files per pick or drop; `onChange` gets an array.
+ * @param {string} [props.accept=""] Accepted file types (the `accept` attribute). Empty takes any file.
+ * @param {number} [props.maxSizeMb] Defaults to the shared DEFAULT_MAX_SIZE_MB. 0 means no size
+ *   limit: nothing is rejected for its size, and the hint names no size.
+ * @param {string} [props.error] Message below the zone; also styles the zone as errored.
+ * @param {string} [props.hint] Helper text below the zone; an error (the caller's or a rejected
+ *   pick's) replaces it while it shows.
+ * @param {boolean} [props.disabled=false] Blocks click and drop.
+ * @param {string} [props.className] Class to apply to the control element, the visible zone.
+ * @param {string} [props.fieldClassName] Class to apply to the wrapper field div.
+ * @param {object} [props.style] Inline style; lands on the control with `className`.
+ */
+export default function AppDropZone({ label, id, onChange, multiple, accept, maxSizeMb, error, hint, disabled, className, fieldClassName, style, ...rest }: {
+    onChange: (file: File | File[]) => void;
+    label?: string;
+    id?: string;
+    multiple?: boolean;
+    accept?: string;
+    maxSizeMb?: number;
+    error?: string;
+    hint?: string;
+    disabled?: boolean;
+    className?: string;
+    fieldClassName?: string;
+    style?: object;
+}): import("react").JSX.Element;

package/dist/types/components/AppFilePicker.d.ts

@@ -6,7 +6,8 @@
  * choice via onPick — a File|null in single mode, a File[] in multiple mode.
  *
  * Not just images: widen `accept` (e.g. "image/*,application/pdf") and non-image files show a
- * file-type icon instead of a thumbnail.
+ * file-type icon instead of a thumbnail. A single PDF shows its first page instead, drawn by the
+ * lazily loaded viewer entry; the icon stays if the page cannot be drawn.
  *
  * @param {object} props
  * @param {string} [props.label]

package/dist/types/components/AppKanban.d.ts

@@ -13,15 +13,19 @@ import "@webority/ui-elements";
  * that needs a decision first (a reason for a lost deal) opens the product's own AppModal from
  * `onMove` and settles the promise with the modal's outcome.
  *
- * Below the md breakpoint the board shows one column per screen with a column switcher above it;
- * the board scrolls inside itself, so the page never scrolls sideways.
+ * Below the md breakpoint the board shows one column per screen with a column switcher above it
+ * that stays at the top of the viewport; the board scrolls inside itself, so the page never
+ * scrolls sideways.
  *
  * @param {object} props
  * @param {{ key: string, title: string, tone?: 'neutral'|'primary'|'info'|'success'|'warning'|'danger',
  *   href?: string, summary?: import('react').ReactNode | ((cards: object[]) => import('react').ReactNode),
- *   acceptFrom?: string[], collapsible?: boolean, collapsed?: boolean, emptyText?: string }[]} props.columns
+ *   acceptFrom?: string[], collapsible?: boolean, collapsed?: boolean, emptyText?: string,
+ *   visibleLimit?: number }[]} props.columns
  *   The columns, left to right. `acceptFrom` lists the only columns this one takes cards from;
  *   `collapsible` columns fold to a strip, remembered per `boardId`; `collapsed` is the first state.
+ *   `visibleLimit` shows the first N cards the filter lets through, with "Show N more" for the
+ *   rest; the count still covers every card, and a card dropped there always shows.
  * @param {object[]} props.cards Every card on the board.
  * @param {(card: object) => import('react').ReactNode} props.renderCard The card's content.
  * @param {(card: object) => string} [props.getCardKey] Default `card.key ?? card.id`.
@@ -29,6 +33,9 @@ import "@webority/ui-elements";
  * @param {(card: object) => number} [props.getCardValue] The number a computed summary adds up.
  * @param {(card: object) => string} [props.cardLabel] The card's accessible name, used in announcements.
  * @param {(card: object) => boolean} [props.isCardLocked] A locked card cannot be moved.
+ * @param {(attempt: { card: object, key: string, reason: 'locked'|'readonly' }) => void} [props.onLocked]
+ *   Someone tried to pick up a card that cannot move (a locked card, or any card on a read-only
+ *   board); show your own message. Screen readers are told either way.
  * @param {(move: { card: object, key: string, from: string, to: string, index: number }) => void | Promise<unknown>} [props.onMove]
  * @param {(card: object, from: string, to: string) => boolean | string} [props.accept] Refuse a move:
  *   false, or a string saying why (shown in the column while the card is carried).
@@ -37,13 +44,14 @@ import "@webority/ui-elements";
  * @param {string} [props.ariaLabel='Board'] Accessible name of the board region.
  * @param {string} [props.emptyText='Nothing here'] Text of an empty column.
  * @param {boolean} [props.readOnly=false] No card can move.
+ * @param {boolean} [props.swipeHint=false] On phones, a "Swipe sideways or tap a column" line under the switcher.
  * @param {'number'|'currency'|'compact'} [props.summaryFormat] Each column's summary becomes the sum
  *   of its visible cards' `getCardValue`, in this format.
  * @param {'rupees'|'paise'} [props.summaryUnit='rupees'] The unit of the card values.
  * @param {string} [props.className]
  * @param {string} [props.id] The board's id; the column, body and help ids derive from it. Generated when omitted.
  */
-export default function AppKanban({ columns, cards, renderCard, getCardKey, getCardColumn, getCardValue, cardLabel, isCardLocked, onMove, accept, filter, boardId, ariaLabel, emptyText, readOnly, summaryFormat, summaryUnit, className, id, ...rest }: {
+export default function AppKanban({ columns, cards, renderCard, getCardKey, getCardColumn, getCardValue, cardLabel, isCardLocked, onLocked, onMove, accept, filter, boardId, ariaLabel, emptyText, readOnly, swipeHint, summaryFormat, summaryUnit, className, id, ...rest }: {
     columns: {
         key: string;
         title: string;
@@ -54,6 +62,7 @@ export default function AppKanban({ columns, cards, renderCard, getCardKey, getC
         collapsible?: boolean;
         collapsed?: boolean;
         emptyText?: string;
+        visibleLimit?: number;
     }[];
     cards: object[];
     renderCard: (card: object) => import('react').ReactNode;
@@ -62,6 +71,11 @@ export default function AppKanban({ columns, cards, renderCard, getCardKey, getC
     getCardValue?: (card: object) => number;
     cardLabel?: (card: object) => string;
     isCardLocked?: (card: object) => boolean;
+    onLocked?: (attempt: {
+        card: object;
+        key: string;
+        reason: 'locked' | 'readonly';
+    }) => void;
     onMove?: (move: {
         card: object;
         key: string;
@@ -75,6 +89,7 @@ export default function AppKanban({ columns, cards, renderCard, getCardKey, getC
     ariaLabel?: string;
     emptyText?: string;
     readOnly?: boolean;
+    swipeHint?: boolean;
     summaryFormat?: 'number' | 'currency' | 'compact';
     summaryUnit?: 'rupees' | 'paise';
     className?: string;

package/dist/types/components/AppShell.d.ts

@@ -166,8 +166,10 @@ export type SearchShape = {
  * each item's `active` decides, as before.
  *
  * @param {object} props
- * @param {{ label?: string, items: NavItemShape[] }[]} props.groups Nav groups, in order.
- *   Groups after the first are separated by a rule. A group left with no items is not rendered.
+ * @param {{ label?: string, items: NavItemShape[], after?: import('react').ReactNode }[]} props.groups Nav groups, in order.
+ *   Groups after the first are separated by a rule. A group left with no items is not rendered,
+ *   and neither is its `after`. `after` is a node rendered right after that group's links (an
+ *   "add a space" row, a help note); it is hidden on the collapsed rail and shown in the drawer.
  * @param {import('react').ReactNode} [props.brand] The logo row at the top of the sidebar.
  * @param {import('react').ReactNode} [props.sidebarStart] Between the brand row and the nav —
  *   a workspace/tenant switcher, an environment badge. Hidden on the collapsed rail.
@@ -198,6 +200,7 @@ export default function AppShell({ groups, brand, sidebarStart, sidebarStartComp
     groups: {
         label?: string;
         items: NavItemShape[];
+        after?: import('react').ReactNode;
     }[];
     brand?: import('react').ReactNode;
     sidebarStart?: import('react').ReactNode;

package/dist/types/components/AppTour.d.ts

@@ -0,0 +1,32 @@
+import "@webority/ui-elements";
+/**
+ * A step-by-step product tour over the shared `<wui-tour>` element: the page is dimmed except
+ * around the step's target, and a card holds the step text with Back, Next and Skip. Steps are
+ * data, anchored to elements by CSS selector. A step whose target is missing or hidden is
+ * dropped.
+ *
+ * Accessibility: focus moves into the card on open, stays there while the tour runs, and returns
+ * to where it was on close; each step is announced; Escape skips the tour; the arrow keys move
+ * between steps. On a phone the card sits on the side of the target with room and never covers it.
+ *
+ * Set `open` to run the tour and set it back to false from `onClose`. Pass a `seenStore` to
+ * remember that a person has seen it: it is asked before showing and written when the tour
+ * finishes or is skipped. `createLocalSeenStore()` (from `@webority/ui-elements`) keeps that in
+ * the browser; a product that keeps it on its server passes its own `{ isSeen, markSeen }`.
+ *
+ * @param {object} props
+ * @param {boolean} props.open Runs the tour. Set it back to false from `onClose`.
+ * @param {(reason: 'finished'|'skipped'|'alreadySeen'|'noTargets') => void} props.onClose Called when the tour ends.
+ *   `finished`: the person stepped past the last step; `skipped`: Skip or Escape (both marked
+ *   seen); `alreadySeen`: the store says it was seen, so nothing showed; `noTargets`: no step had
+ *   a visible target, so nothing showed (not marked seen).
+ * @param {string} props.tourId Names the tour in the seen store.
+ * @param {{ target: string, title?: string, description: string }[]} props.steps `target` is a CSS selector.
+ * @param {{ isSeen: (tourId: string) => Promise<boolean>, markSeen: (tourId: string) => Promise<void> }} [props.seenStore]
+ *   Read through a ref, so an inline object does not restart a running tour.
+ * @param {(step: object, index: number) => void | Promise<void>} [props.onBeforeStep] Runs before each step's target is looked up, awaited. Use it to open a menu or switch a tab so the target is visible.
+ * @param {{ back?: string, next?: string, skip?: string, done?: string }} [props.labels] Button text; defaults Back, Next, Skip, Done.
+ * @param {string} [props.className]
+ */
+declare const AppTour: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppTour;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { postedMasked } from "@webority/ui-elements";
+export { createLocalSeenStore, postedMasked } from "@webority/ui-elements";
 export { default as AppAccordion } from "./components/AppAccordion.jsx";
 export { default as AppActionIcon } from "./components/AppActionIcon.jsx";
 export { default as AppAlert } from "./components/AppAlert.jsx";
@@ -8,7 +8,6 @@ export { default as AppAvatar } from "./components/AppAvatar.jsx";
 export { default as AppAvatarGroup } from "./components/AppAvatarGroup.jsx";
 export { default as AppBadge } from "./components/AppBadge.jsx";
 export { default as AppBanner } from "./components/AppBanner.jsx";
-export { default as AppBarChart } from "./components/AppBarChart.jsx";
 export { default as AppBreadcrumbs } from "./components/AppBreadcrumbs.jsx";
 export { default as AppButton } from "./components/AppButton.jsx";
 export { default as AppCalendar } from "./components/AppCalendar.jsx";
@@ -35,6 +34,7 @@ export { default as AppDatePicker } from "./components/AppDatePicker.jsx";
 export { default as AppDateRangePicker } from "./components/AppDateRangePicker.jsx";
 export { default as AppDescriptions } from "./components/AppDescriptions.jsx";
 export { default as AppDropdown } from "./components/AppDropdown.jsx";
+export { default as AppDropZone } from "./components/AppDropZone.jsx";
 export { default as AppEmptyState } from "./components/AppEmptyState.jsx";
 export { default as AppErrorSummary } from "./components/AppErrorSummary.jsx";
 export { default as AppFileAttachment } from "./components/AppFileAttachment.jsx";
@@ -51,7 +51,6 @@ export { default as AppInfoTip } from "./components/AppInfoTip.jsx";
 export { default as AppInput } from "./components/AppInput.jsx";
 export { default as AppKanban } from "./components/AppKanban.jsx";
 export { default as AppKpiTile } from "./components/AppKpiTile.jsx";
-export { default as AppLineChart } from "./components/AppLineChart.jsx";
 export { default as AppLink } from "./components/AppLink.jsx";
 export { default as AppLogoPicker } from "./components/AppLogoPicker.jsx";
 export { default as AppMeter } from "./components/AppMeter.jsx";
@@ -101,6 +100,7 @@ export { default as AppTimePicker } from "./components/AppTimePicker.jsx";
 export { default as AppToast } from "./components/AppToast.jsx";
 export { default as AppToolbar } from "./components/AppToolbar.jsx";
 export { default as AppTooltip } from "./components/AppTooltip.jsx";
+export { default as AppTour } from "./components/AppTour.jsx";
 export { default as AppTreeView } from "./components/AppTreeView.jsx";
 export { default as AppWizard } from "./components/AppWizard.jsx";
 export { default as AppWorkspaceSwitcher } from "./components/AppWorkspaceSwitcher.jsx";
@@ -108,6 +108,7 @@ export { MODAL_ICONS } from "./components/ModalIcons.jsx";
 export { dismissAll, errorToast, toast } from "./components/toast.js";
 export { buildListQuery, parseListQuery } from "./lib/listQuery.js";
 export { useCommandPaletteShortcut } from "./lib/useCommandPaletteShortcut.js";
+export { useFloatingStack } from "./lib/useFloatingStack.js";
 export { useListQuery } from "./lib/useListQuery.js";
 export { usePagination } from "./lib/usePagination.js";
 export { useTableView } from "./lib/useTableView.js";

package/dist/types/lib/useFloatingStack.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The one fixed container in a bottom corner that floating buttons stack in, so two of them
+ * (the chat launcher and the report-an-issue button) sit one above the other with a gap and
+ * never overlap. Render into it with `createPortal`, wrapping each button in a
+ * `.wui-floating-stack-item` (`--primary` sits in the corner, `--secondary` stacks above it).
+ *
+ * The container is created for the first caller in a corner and removed with the last, so the
+ * hook belongs in a component that renders the button. Returns null until the container exists
+ * (the first render), so render nothing then.
+ *
+ * @param {"end"|"start"} [position="end"] The bottom corner the stack is pinned to.
+ * @param {boolean} [enabled=true] Hooks cannot be called conditionally; pass false when this
+ *   render has nothing to put in the stack, and no container is created or held.
+ * @returns {HTMLElement|null} The container to portal into.
+ */
+export declare function useFloatingStack(position?: "end" | "start", enabled?: boolean): HTMLElement | null;