@webority/ui-react 0.31.0 → 0.33.0

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;