@cratis/scene.blueprint.default 4.38.0 → 4.40.0

package/dist/cjs/foundation/KanbanBoard.js

@@ -0,0 +1,222 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_react = require('@cratis/scene.react');
+var boardModel = require('./boardModel.js');
+var ComponentState = require('./ComponentState.js');
+var FoundationIcon = require('./FoundationIcon.js');
+var foundationStrings = require('./foundationStrings.js');
+var PermissionRule = require('./PermissionRule.js');
+var StateFrame = require('./StateFrame.js');
+
+/**
+ * The `kanbanBoard` component: columns mapped to a status or stage, with cards that move between them.
+ *
+ * `columns` (`id`, `label`, `limit`) and `cards` (`id`, `title`, `column`, `assignee`, up to three `fields`, `badges`) come from a query. A card moves by
+ * dragging it to another column **and** by its own "Move to" menu - the keyboard and screen-reader alternative, so nothing depends on a pointer
+ * - and every move is announced. Columns show their count and a limit indicator that says "Over the limit" in words, and collapse to a
+ * strip. The new arrangement is published as `value` (the cards with their columns) for the screen to save; with `editPermission` not enabled the
+ * board is read-only. A card whose column no longer exists is shown in the first column rather than lost.
+ */ function KanbanBoard({ element, interactions, bindingOutputs }) {
+    const columns = react.useMemo(()=>boardModel.readColumnsOfBoard(element.properties.columns), [
+        element.properties.columns
+    ]);
+    const supplied = react.useMemo(()=>boardModel.readCards(element.properties.cards), [
+        element.properties.cards
+    ]);
+    const suppliedKey = JSON.stringify(supplied);
+    const [cards, setCards] = react.useState(supplied);
+    const [collapsed, setCollapsed] = react.useState(new Set());
+    const [announcement, setAnnouncement] = react.useState('');
+    const [dragging, setDragging] = react.useState();
+    const strings = foundationStrings.readFoundationStrings(element);
+    const state = ComponentState.readComponentState(element, columns.length > 0);
+    const locked = PermissionRule.readPermissionRule(element, 'editPermission') !== 'enabled';
+    react.useEffect(()=>setCards(supplied), [
+        suppliedKey
+    ]);
+    scene_react.useValueOutput(bindingOutputs, cards.map((card)=>({
+            id: card.id,
+            column: card.column
+        })));
+    const move = (id, to)=>{
+        const card = cards.find((candidate)=>candidate.id === id);
+        const target = columns.find((column)=>column.id === to);
+        const next = boardModel.moveCard(columns, cards, id, to);
+        if (!card || !target || next === cards) return;
+        setCards(next);
+        setAnnouncement(foundationStrings.formatText(strings.boardMoved, {
+            title: card.title,
+            column: target.label
+        }));
+        interactions?.onChange?.();
+    };
+    const drop = (event, to)=>{
+        event.preventDefault();
+        if (dragging) move(dragging, to);
+        setDragging(undefined);
+    };
+    const toggle = (id)=>setCollapsed((current)=>{
+            const next = new Set(current);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    return /*#__PURE__*/ jsxRuntime.jsx(StateFrame.FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "kanban-board",
+        state: state,
+        skeleton: [
+            100,
+            100,
+            100
+        ],
+        children: (state === ComponentState.ComponentState.Ready || state === ComponentState.ComponentState.Partial) && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    role: "status",
+                    "aria-live": "polite",
+                    className: "foundation-visually-hidden",
+                    children: announcement
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "foundation-board",
+                    children: columns.map((column)=>{
+                        const inColumn = boardModel.cardsOf(columns, cards, column.id);
+                        const closed = collapsed.has(column.id);
+                        const over = boardModel.overLimit(column, inColumn.length);
+                        return /*#__PURE__*/ jsxRuntime.jsxs("section", {
+                            className: "foundation-board-column",
+                            "data-collapsed": closed,
+                            "data-over": over,
+                            "aria-label": foundationStrings.formatText(strings.boardColumn, {
+                                column: column.label,
+                                count: inColumn.length
+                            }),
+                            onDragOver: (event)=>{
+                                if (!locked) event.preventDefault();
+                            },
+                            onDrop: (event)=>{
+                                if (!locked) drop(event, column.id);
+                            },
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs("header", {
+                                    className: "foundation-board-header",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            type: "button",
+                                            className: "foundation-icon-button",
+                                            "aria-expanded": !closed,
+                                            "aria-label": foundationStrings.formatText(closed ? strings.boardExpand : strings.boardCollapse, {
+                                                column: column.label
+                                            }),
+                                            onClick: ()=>toggle(column.id),
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                                                name: closed ? 'chevron-right' : 'chevron-down'
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("h3", {
+                                            children: column.label
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                            className: "foundation-count",
+                                            children: [
+                                                inColumn.length,
+                                                column.limit > 0 ? ` / ${column.limit}` : ''
+                                            ]
+                                        }),
+                                        over && /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                            className: "foundation-chip",
+                                            "data-tone": "danger",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                                                    name: "alert"
+                                                }),
+                                                foundationStrings.formatText(strings.boardWipExceeded, {
+                                                    limit: column.limit
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                !closed && /*#__PURE__*/ jsxRuntime.jsxs("ul", {
+                                    className: "foundation-board-cards",
+                                    children: [
+                                        inColumn.length === 0 && /*#__PURE__*/ jsxRuntime.jsx("li", {
+                                            className: "foundation-count",
+                                            children: strings.boardNoCards
+                                        }),
+                                        inColumn.map((card)=>/*#__PURE__*/ jsxRuntime.jsxs("li", {
+                                                className: "foundation-board-card",
+                                                draggable: !locked,
+                                                onDragStart: ()=>setDragging(card.id),
+                                                onDragEnd: ()=>setDragging(undefined),
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx("strong", {
+                                                        children: card.title
+                                                    }),
+                                                    card.assignee && /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                                        className: "foundation-count",
+                                                        children: [
+                                                            /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                                                                name: "user"
+                                                            }),
+                                                            " ",
+                                                            card.assignee
+                                                        ]
+                                                    }),
+                                                    card.fields.map((field)=>/*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                                            className: "foundation-board-field",
+                                                            children: [
+                                                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                                    className: "foundation-count",
+                                                                    children: field.label
+                                                                }),
+                                                                " ",
+                                                                field.value
+                                                            ]
+                                                        }, field.label)),
+                                                    card.badges.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                        className: "foundation-board-badges",
+                                                        children: card.badges.map((badge)=>/*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                                className: "foundation-chip",
+                                                                "data-tone": "neutral",
+                                                                children: badge
+                                                            }, badge))
+                                                    }),
+                                                    !locked && /*#__PURE__*/ jsxRuntime.jsxs("select", {
+                                                        className: "foundation-board-move",
+                                                        "aria-label": foundationStrings.formatText(strings.boardMoveCard, {
+                                                            title: card.title
+                                                        }),
+                                                        value: column.id,
+                                                        onChange: (event)=>move(card.id, event.target.value),
+                                                        children: [
+                                                            /*#__PURE__*/ jsxRuntime.jsx("option", {
+                                                                value: column.id,
+                                                                disabled: true,
+                                                                children: strings.boardMoveTo
+                                                            }),
+                                                            columns.filter((other)=>other.id !== column.id).map((other)=>/*#__PURE__*/ jsxRuntime.jsx("option", {
+                                                                    value: other.id,
+                                                                    children: other.label
+                                                                }, other.id))
+                                                        ]
+                                                    })
+                                                ]
+                                            }, card.id))
+                                    ]
+                                })
+                            ]
+                        }, column.id);
+                    })
+                })
+            ]
+        })
+    });
+}
+
+exports.KanbanBoard = KanbanBoard;
+//# sourceMappingURL=KanbanBoard.js.map

package/dist/cjs/foundation/KanbanBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.js","sources":["../../../foundation/KanbanBoard.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DragEvent, useEffect, useMemo, useState } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { BoardCard, BoardColumn, cardsOf, moveCard, overLimit, readCards, readColumnsOfBoard } from './boardModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationIcon } from './FoundationIcon';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { readPermissionRule } from './PermissionRule';\nimport { FoundationFrame } from './StateFrame';\n\n/**\n * The `kanbanBoard` component: columns mapped to a status or stage, with cards that move between them.\n *\n * `columns` (`id`, `label`, `limit`) and `cards` (`id`, `title`, `column`, `assignee`, up to three `fields`, `badges`) come from a query. A card moves by\n * dragging it to another column **and** by its own \"Move to\" menu - the keyboard and screen-reader alternative, so nothing depends on a pointer\n * - and every move is announced. Columns show their count and a limit indicator that says \"Over the limit\" in words, and collapse to a\n * strip. The new arrangement is published as `value` (the cards with their columns) for the screen to save; with `editPermission` not enabled the\n * board is read-only. A card whose column no longer exists is shown in the first column rather than lost.\n */\nexport function KanbanBoard({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const columns = useMemo(() => readColumnsOfBoard(element.properties.columns), [element.properties.columns]);\n    const supplied = useMemo(() => readCards(element.properties.cards), [element.properties.cards]);\n    const suppliedKey = JSON.stringify(supplied);\n    const [cards, setCards] = useState<BoardCard[]>(supplied);\n    const [collapsed, setCollapsed] = useState<Set<string>>(new Set());\n    const [announcement, setAnnouncement] = useState('');\n    const [dragging, setDragging] = useState<string | undefined>();\n    const strings = readFoundationStrings(element);\n    const state = readComponentState(element, columns.length > 0);\n    const locked = readPermissionRule(element, 'editPermission') !== 'enabled';\n\n    useEffect(() => setCards(supplied), [suppliedKey]);\n    useValueOutput(bindingOutputs, cards.map(card => ({ id: card.id, column: card.column })));\n\n    const move = (id: string, to: string) => {\n        const card = cards.find(candidate => candidate.id === id);\n        const target = columns.find(column => column.id === to);\n        const next = moveCard(columns, cards, id, to);\n        if (!card || !target || next === cards) return;\n        setCards(next);\n        setAnnouncement(formatText(strings.boardMoved, { title: card.title, column: target.label }));\n        interactions?.onChange?.();\n    };\n    const drop = (event: DragEvent, to: string) => { event.preventDefault(); if (dragging) move(dragging, to); setDragging(undefined); };\n    const toggle = (id: string) => setCollapsed(current => { const next = new Set(current); if (next.has(id)) next.delete(id); else next.add(id); return next; });\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='kanban-board' state={state} skeleton={[100, 100, 100]}>\n            {(state === ComponentState.Ready || state === ComponentState.Partial) && (\n                <>\n                    <div role='status' aria-live='polite' className='foundation-visually-hidden'>{announcement}</div>\n                    <div className='foundation-board'>\n                        {columns.map((column: BoardColumn) => {\n                            const inColumn = cardsOf(columns, cards, column.id);\n                            const closed = collapsed.has(column.id);\n                            const over = overLimit(column, inColumn.length);\n                            return (\n                                <section key={column.id} className='foundation-board-column' data-collapsed={closed} data-over={over} aria-label={formatText(strings.boardColumn, { column: column.label, count: inColumn.length })}\n                                    onDragOver={event => { if (!locked) event.preventDefault(); }} onDrop={event => { if (!locked) drop(event, column.id); }}>\n                                    <header className='foundation-board-header'>\n                                        <button type='button' className='foundation-icon-button' aria-expanded={!closed} aria-label={formatText(closed ? strings.boardExpand : strings.boardCollapse, { column: column.label })} onClick={() => toggle(column.id)}>\n                                            <FoundationIcon name={closed ? 'chevron-right' : 'chevron-down'} />\n                                        </button>\n                                        <h3>{column.label}</h3>\n                                        <span className='foundation-count'>{inColumn.length}{column.limit > 0 ? ` / ${column.limit}` : ''}</span>\n                                        {over && <span className='foundation-chip' data-tone='danger'><FoundationIcon name='alert' />{formatText(strings.boardWipExceeded, { limit: column.limit })}</span>}\n                                    </header>\n                                    {!closed && (\n                                        <ul className='foundation-board-cards'>\n                                            {inColumn.length === 0 && <li className='foundation-count'>{strings.boardNoCards}</li>}\n                                            {inColumn.map(card => (\n                                                <li key={card.id} className='foundation-board-card' draggable={!locked} onDragStart={() => setDragging(card.id)} onDragEnd={() => setDragging(undefined)}>\n                                                    <strong>{card.title}</strong>\n                                                    {card.assignee && <span className='foundation-count'><FoundationIcon name='user' /> {card.assignee}</span>}\n                                                    {card.fields.map(field => <span key={field.label} className='foundation-board-field'><span className='foundation-count'>{field.label}</span> {field.value}</span>)}\n                                                    {card.badges.length > 0 && <span className='foundation-board-badges'>{card.badges.map(badge => <span key={badge} className='foundation-chip' data-tone='neutral'>{badge}</span>)}</span>}\n                                                    {!locked && (\n                                                        <select className='foundation-board-move' aria-label={formatText(strings.boardMoveCard, { title: card.title })} value={column.id} onChange={event => move(card.id, event.target.value)}>\n                                                            <option value={column.id} disabled>{strings.boardMoveTo}</option>\n                                                            {columns.filter(other => other.id !== column.id).map(other => <option key={other.id} value={other.id}>{other.label}</option>)}\n                                                        </select>\n                                                    )}\n                                                </li>\n                                            ))}\n                                        </ul>\n                                    )}\n                                </section>\n                            );\n                        })}\n                    </div>\n                </>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["KanbanBoard","element","interactions","bindingOutputs","columns","useMemo","readColumnsOfBoard","properties","supplied","readCards","cards","suppliedKey","JSON","stringify","setCards","useState","collapsed","setCollapsed","Set","announcement","setAnnouncement","dragging","setDragging","strings","readFoundationStrings","state","readComponentState","length","locked","readPermissionRule","useEffect","useValueOutput","map","card","id","column","move","to","find","candidate","target","next","moveCard","formatText","boardMoved","title","label","onChange","drop","event","preventDefault","undefined","toggle","current","has","delete","add","_jsx","FoundationFrame","name","skeleton","ComponentState","Ready","Partial","_jsxs","_Fragment","div","role","aria-live","className","inColumn","cardsOf","closed","over","overLimit","section","data-collapsed","data-over","aria-label","boardColumn","count","onDragOver","onDrop","header","button","type","aria-expanded","boardExpand","boardCollapse","onClick","FoundationIcon","h3","span","limit","data-tone","boardWipExceeded","ul","li","boardNoCards","draggable","onDragStart","onDragEnd","strong","assignee","fields","field","value","badges","badge","select","boardMoveCard","option","disabled","boardMoveTo","filter","other"],"mappings":";;;;;;;;;;;;AAYA;;;;;;;;IASO,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,YAAY,EAAEC,cAAc,EAA4B,EAAA;IAC3F,MAAMC,OAAAA,GAAUC,cAAQ,IAAMC,6BAAAA,CAAmBL,QAAQM,UAAU,CAACH,OAAO,CAAA,EAAG;QAACH,OAAAA,CAAQM,UAAU,CAACH;AAAQ,KAAA,CAAA;IAC1G,MAAMI,QAAAA,GAAWH,cAAQ,IAAMI,oBAAAA,CAAUR,QAAQM,UAAU,CAACG,KAAK,CAAA,EAAG;QAACT,OAAAA,CAAQM,UAAU,CAACG;AAAM,KAAA,CAAA;IAC9F,MAAMC,WAAAA,GAAcC,IAAAA,CAAKC,SAAS,CAACL,QAAAA,CAAAA;AACnC,IAAA,MAAM,CAACE,KAAAA,EAAOI,QAAAA,CAAS,GAAGC,cAAAA,CAAsBP,QAAAA,CAAAA;AAChD,IAAA,MAAM,CAACQ,SAAAA,EAAWC,YAAAA,CAAa,GAAGF,eAAsB,IAAIG,GAAAA,EAAAA,CAAAA;AAC5D,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGL,cAAAA,CAAS,EAAA,CAAA;IACjD,MAAM,CAACM,QAAAA,EAAUC,WAAAA,CAAY,GAAGP,cAAAA,EAAAA;AAChC,IAAA,MAAMQ,UAAUC,uCAAAA,CAAsBvB,OAAAA,CAAAA;AACtC,IAAA,MAAMwB,KAAAA,GAAQC,iCAAAA,CAAmBzB,OAAAA,EAASG,OAAAA,CAAQuB,MAAM,GAAG,CAAA,CAAA;IAC3D,MAAMC,MAAAA,GAASC,iCAAAA,CAAmB5B,OAAAA,EAAS,gBAAA,CAAA,KAAsB,SAAA;IAEjE6B,eAAAA,CAAU,IAAMhB,SAASN,QAAAA,CAAAA,EAAW;AAACG,QAAAA;AAAY,KAAA,CAAA;AACjDoB,IAAAA,0BAAAA,CAAe5B,gBAAgBO,KAAAA,CAAMsB,GAAG,CAACC,CAAAA,QAAS;AAAEC,YAAAA,EAAAA,EAAID,KAAKC,EAAE;AAAEC,YAAAA,MAAAA,EAAQF,KAAKE;SAAO,CAAA,CAAA,CAAA;IAErF,MAAMC,IAAAA,GAAO,CAACF,EAAAA,EAAYG,EAAAA,GAAAA;QACtB,MAAMJ,IAAAA,GAAOvB,MAAM4B,IAAI,CAACC,CAAAA,SAAAA,GAAaA,SAAAA,CAAUL,EAAE,KAAKA,EAAAA,CAAAA;QACtD,MAAMM,MAAAA,GAASpC,QAAQkC,IAAI,CAACH,CAAAA,MAAAA,GAAUA,MAAAA,CAAOD,EAAE,KAAKG,EAAAA,CAAAA;AACpD,QAAA,MAAMI,IAAAA,GAAOC,mBAAAA,CAAStC,OAAAA,EAASM,KAAAA,EAAOwB,EAAAA,EAAIG,EAAAA,CAAAA;AAC1C,QAAA,IAAI,CAACJ,IAAAA,IAAQ,CAACO,MAAAA,IAAUC,SAAS/B,KAAAA,EAAO;QACxCI,QAAAA,CAAS2B,IAAAA,CAAAA;QACTrB,eAAAA,CAAgBuB,4BAAAA,CAAWpB,OAAAA,CAAQqB,UAAU,EAAE;AAAEC,YAAAA,KAAAA,EAAOZ,KAAKY,KAAK;AAAEV,YAAAA,MAAAA,EAAQK,OAAOM;AAAM,SAAA,CAAA,CAAA;QACzF5C,YAAAA,EAAc6C,QAAAA,IAAAA;AAClB,IAAA,CAAA;IACA,MAAMC,IAAAA,GAAO,CAACC,KAAAA,EAAkBZ,EAAAA,GAAAA;AAAiBY,QAAAA,KAAAA,CAAMC,cAAc,EAAA;QAAI,IAAI7B,QAAAA,EAAUe,KAAKf,QAAAA,EAAUgB,EAAAA,CAAAA;QAAKf,WAAAA,CAAY6B,SAAAA,CAAAA;AAAY,IAAA,CAAA;AACnI,IAAA,MAAMC,MAAAA,GAAS,CAAClB,EAAAA,GAAejB,YAAAA,CAAaoC,CAAAA,OAAAA,GAAAA;YAAa,MAAMZ,IAAAA,GAAO,IAAIvB,GAAAA,CAAImC,OAAAA,CAAAA;AAAU,YAAA,IAAIZ,KAAKa,GAAG,CAACpB,EAAAA,CAAAA,EAAKO,IAAAA,CAAKc,MAAM,CAACrB,EAAAA,CAAAA;AAAUO,iBAAAA,IAAAA,CAAKe,GAAG,CAACtB,EAAAA,CAAAA;YAAK,OAAOO,IAAAA;AAAM,QAAA,CAAA,CAAA;AAE3J,IAAA,qBACIgB,cAAA,CAACC,0BAAAA,EAAAA;QAAgBzD,OAAAA,EAASA,OAAAA;QAASC,YAAAA,EAAcA,YAAAA;QAAcyD,IAAAA,EAAK,cAAA;QAAelC,KAAAA,EAAOA,KAAAA;QAAOmC,QAAAA,EAAU;AAAC,YAAA,GAAA;AAAK,YAAA,GAAA;AAAK,YAAA;AAAI,SAAA;kBACrH,CAACnC,UAAUoC,6BAAAA,CAAeC,KAAK,IAAIrC,KAAAA,KAAUoC,6BAAAA,CAAeE,OAAM,mBAC/DC,eAAA,CAAAC,mBAAA,EAAA;;8BACIR,cAAA,CAACS,KAAAA,EAAAA;oBAAIC,IAAAA,EAAK,QAAA;oBAASC,WAAAA,EAAU,QAAA;oBAASC,SAAAA,EAAU,4BAAA;AAA8BlD,oBAAAA,QAAAA,EAAAA;;8BAC9EsC,cAAA,CAACS,KAAAA,EAAAA;oBAAIG,SAAAA,EAAU,kBAAA;8BACVjE,OAAAA,CAAQ4B,GAAG,CAAC,CAACG,MAAAA,GAAAA;AACV,wBAAA,MAAMmC,QAAAA,GAAWC,kBAAAA,CAAQnE,OAAAA,EAASM,KAAAA,EAAOyB,OAAOD,EAAE,CAAA;AAClD,wBAAA,MAAMsC,MAAAA,GAASxD,SAAAA,CAAUsC,GAAG,CAACnB,OAAOD,EAAE,CAAA;AACtC,wBAAA,MAAMuC,IAAAA,GAAOC,oBAAAA,CAAUvC,MAAAA,EAAQmC,QAAAA,CAAS3C,MAAM,CAAA;AAC9C,wBAAA,qBACIqC,eAAA,CAACW,SAAAA,EAAAA;4BAAwBN,SAAAA,EAAU,yBAAA;4BAA0BO,gBAAAA,EAAgBJ,MAAAA;4BAAQK,WAAAA,EAAWJ,IAAAA;4BAAMK,YAAAA,EAAYnC,4BAAAA,CAAWpB,OAAAA,CAAQwD,WAAW,EAAE;AAAE5C,gCAAAA,MAAAA,EAAQA,OAAOW,KAAK;AAAEkC,gCAAAA,KAAAA,EAAOV,SAAS3C;AAAO,6BAAA,CAAA;AAC7LsD,4BAAAA,UAAAA,EAAYhC,CAAAA,KAAAA,GAAAA;gCAAW,IAAI,CAACrB,MAAAA,EAAQqB,KAAAA,CAAMC,cAAc,EAAA;AAAI,4BAAA,CAAA;AAAGgC,4BAAAA,MAAAA,EAAQjC,CAAAA,KAAAA,GAAAA;AAAW,gCAAA,IAAI,CAACrB,MAAAA,EAAQoB,IAAAA,CAAKC,KAAAA,EAAOd,OAAOD,EAAE,CAAA;AAAG,4BAAA,CAAA;;8CACvH8B,eAAA,CAACmB,QAAAA,EAAAA;oCAAOd,SAAAA,EAAU,yBAAA;;sDACdZ,cAAA,CAAC2B,QAAAA,EAAAA;4CAAOC,IAAAA,EAAK,QAAA;4CAAShB,SAAAA,EAAU,wBAAA;AAAyBiB,4CAAAA,eAAAA,EAAe,CAACd,MAAAA;AAAQM,4CAAAA,YAAAA,EAAYnC,6BAAW6B,MAAAA,GAASjD,OAAAA,CAAQgE,WAAW,GAAGhE,OAAAA,CAAQiE,aAAa,EAAE;AAAErD,gDAAAA,MAAAA,EAAQA,OAAOW;AAAM,6CAAA,CAAA;4CAAI2C,OAAAA,EAAS,IAAMrC,MAAAA,CAAOjB,MAAAA,CAAOD,EAAE,CAAA;AACpN,4CAAA,QAAA,gBAAAuB,cAAA,CAACiC,6BAAAA,EAAAA;AAAe/B,gDAAAA,IAAAA,EAAMa,SAAS,eAAA,GAAkB;;;sDAErDf,cAAA,CAACkC,IAAAA,EAAAA;AAAIxD,4CAAAA,QAAAA,EAAAA,MAAAA,CAAOW;;sDACZkB,eAAA,CAAC4B,MAAAA,EAAAA;4CAAKvB,SAAAA,EAAU,kBAAA;;AAAoBC,gDAAAA,QAAAA,CAAS3C,MAAM;gDAAEQ,MAAAA,CAAO0D,KAAK,GAAG,CAAA,GAAI,CAAC,GAAG,EAAE1D,MAAAA,CAAO0D,KAAK,CAAA,CAAE,GAAG;;;AAC9FpB,wCAAAA,IAAAA,kBAAQT,eAAA,CAAC4B,MAAAA,EAAAA;4CAAKvB,SAAAA,EAAU,iBAAA;4CAAkByB,WAAAA,EAAU,QAAA;;8DAASrC,cAAA,CAACiC,6BAAAA,EAAAA;oDAAe/B,IAAAA,EAAK;;gDAAWhB,4BAAAA,CAAWpB,OAAAA,CAAQwE,gBAAgB,EAAE;AAAEF,oDAAAA,KAAAA,EAAO1D,OAAO0D;AAAM,iDAAA;;;;;AAE5J,gCAAA,CAACrB,wBACER,eAAA,CAACgC,IAAAA,EAAAA;oCAAG3B,SAAAA,EAAU,wBAAA;;wCACTC,QAAAA,CAAS3C,MAAM,KAAK,CAAA,kBAAK8B,cAAA,CAACwC,IAAAA,EAAAA;4CAAG5B,SAAAA,EAAU,kBAAA;AAAoB9C,4CAAAA,QAAAA,EAAAA,OAAAA,CAAQ2E;;AACnE5B,wCAAAA,QAAAA,CAAStC,GAAG,CAACC,CAAAA,IAAAA,iBACV+B,eAAA,CAACiC,IAAAA,EAAAA;gDAAiB5B,SAAAA,EAAU,uBAAA;AAAwB8B,gDAAAA,SAAAA,EAAW,CAACvE,MAAAA;gDAAQwE,WAAAA,EAAa,IAAM9E,WAAAA,CAAYW,IAAAA,CAAKC,EAAE,CAAA;AAAGmE,gDAAAA,SAAAA,EAAW,IAAM/E,WAAAA,CAAY6B,SAAAA,CAAAA;;kEAC1IM,cAAA,CAAC6C,QAAAA,EAAAA;AAAQrE,wDAAAA,QAAAA,EAAAA,IAAAA,CAAKY;;oDACbZ,IAAAA,CAAKsE,QAAQ,kBAAIvC,eAAA,CAAC4B,MAAAA,EAAAA;wDAAKvB,SAAAA,EAAU,kBAAA;;0EAAmBZ,cAAA,CAACiC,6BAAAA,EAAAA;gEAAe/B,IAAAA,EAAK;;AAAS,4DAAA,GAAA;AAAE1B,4DAAAA,IAAAA,CAAKsE;;;AACzFtE,oDAAAA,IAAAA,CAAKuE,MAAM,CAACxE,GAAG,CAACyE,CAAAA,sBAASzC,eAAA,CAAC4B,MAAAA,EAAAA;4DAAuBvB,SAAAA,EAAU,wBAAA;;8EAAyBZ,cAAA,CAACmC,MAAAA,EAAAA;oEAAKvB,SAAAA,EAAU,kBAAA;AAAoBoC,oEAAAA,QAAAA,EAAAA,KAAAA,CAAM3D;;AAAa,gEAAA,GAAA;AAAE2D,gEAAAA,KAAAA,CAAMC;;AAA/GD,yDAAAA,EAAAA,KAAAA,CAAM3D,KAAK,CAAA,CAAA;AAC/Cb,oDAAAA,IAAAA,CAAK0E,MAAM,CAAChF,MAAM,GAAG,mBAAK8B,cAAA,CAACmC,MAAAA,EAAAA;wDAAKvB,SAAAA,EAAU,yBAAA;AAA2BpC,wDAAAA,QAAAA,EAAAA,IAAAA,CAAK0E,MAAM,CAAC3E,GAAG,CAAC4E,CAAAA,sBAASnD,cAAA,CAACmC,MAAAA,EAAAA;gEAAiBvB,SAAAA,EAAU,iBAAA;gEAAkByB,WAAAA,EAAU,SAAA;AAAWc,gEAAAA,QAAAA,EAAAA;AAAxDA,6DAAAA,EAAAA,KAAAA,CAAAA;;AACzG,oDAAA,CAAChF,wBACEoC,eAAA,CAAC6C,QAAAA,EAAAA;wDAAOxC,SAAAA,EAAU,uBAAA;wDAAwBS,YAAAA,EAAYnC,4BAAAA,CAAWpB,OAAAA,CAAQuF,aAAa,EAAE;AAAEjE,4DAAAA,KAAAA,EAAOZ,KAAKY;AAAM,yDAAA,CAAA;AAAI6D,wDAAAA,KAAAA,EAAOvE,OAAOD,EAAE;wDAAEa,QAAAA,EAAUE,CAAAA,QAASb,IAAAA,CAAKH,IAAAA,CAAKC,EAAE,EAAEe,KAAAA,CAAMT,MAAM,CAACkE,KAAK,CAAA;;0EACjLjD,cAAA,CAACsD,QAAAA,EAAAA;AAAOL,gEAAAA,KAAAA,EAAOvE,OAAOD,EAAE;gEAAE8E,QAAQ,EAAA,IAAA;AAAEzF,gEAAAA,QAAAA,EAAAA,OAAAA,CAAQ0F;;AAC3C7G,4DAAAA,OAAAA,CAAQ8G,MAAM,CAACC,CAAAA,KAAAA,GAASA,MAAMjF,EAAE,KAAKC,MAAAA,CAAOD,EAAE,CAAA,CAAEF,GAAG,CAACmF,CAAAA,sBAAS1D,cAAA,CAACsD,QAAAA,EAAAA;AAAsBL,oEAAAA,KAAAA,EAAOS,MAAMjF,EAAE;AAAGiF,oEAAAA,QAAAA,EAAAA,KAAAA,CAAMrE;AAAlCqE,iEAAAA,EAAAA,KAAAA,CAAMjF,EAAE,CAAA;;;;AARtFD,6CAAAA,EAAAA,IAAAA,CAAKC,EAAE,CAAA;;;;AAdlBC,yBAAAA,EAAAA,MAAAA,CAAOD,EAAE,CAAA;AA+B/B,oBAAA,CAAA;;;;;AAMxB;;"}

package/dist/cjs/foundation/NotificationsButton.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var FoundationIcon = require('./FoundationIcon.js');
+var formatting = require('./formatting.js');
+var foundationStrings = require('./foundationStrings.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The `notificationsButton` component: the bell of the topbar, with the unread count.
+ *
+ * `count` is the unread number - bind it to a query - and the button says it in words ("3 unread") as well as in the badge, which is hidden from
+ * assistive technology so it is not read twice. Pressing it runs the behaviors attached to the element, which open whatever the application shows its
+ * notifications in. Counts above 99 read "99+" in the badge and in full in the words.
+ */ function NotificationsButton({ element, interactions }) {
+    const strings = foundationStrings.readFoundationStrings(element);
+    const count = typeof element.properties.count === 'number' && element.properties.count > 0 ? Math.floor(element.properties.count) : 0;
+    const spoken = count > 0 ? foundationStrings.formatText(strings.notificationsCount, {
+        count: formatting.formatNumber(count, formatting.readLocale(element), formatting.NumberFormat.Number, undefined, 0)
+    }) : strings.notificationsNone;
+    return /*#__PURE__*/ jsxRuntime.jsxs("button", {
+        type: "button",
+        className: "foundation foundation-notifications",
+        "data-scene-id": element.id,
+        onClick: interactions?.onClick,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                name: "alert"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                className: "foundation-visually-hidden",
+                children: `${strings.notificationsLabel}: ${spoken}`
+            }),
+            count > 0 && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                className: "foundation-notifications-badge",
+                "aria-hidden": "true",
+                children: count > 99 ? '99+' : count
+            })
+        ]
+    });
+}
+
+exports.NotificationsButton = NotificationsButton;
+//# sourceMappingURL=NotificationsButton.js.map

package/dist/cjs/foundation/NotificationsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsButton.js","sources":["../../../foundation/NotificationsButton.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { FoundationIcon } from './FoundationIcon';\nimport { formatNumber, readLocale, NumberFormat } from './formatting';\nimport { formatText, readFoundationStrings } from './foundationStrings';\n\n/**\n * The `notificationsButton` component: the bell of the topbar, with the unread count.\n *\n * `count` is the unread number - bind it to a query - and the button says it in words (\"3 unread\") as well as in the badge, which is hidden from\n * assistive technology so it is not read twice. Pressing it runs the behaviors attached to the element, which open whatever the application shows its\n * notifications in. Counts above 99 read \"99+\" in the badge and in full in the words.\n */\nexport function NotificationsButton({ element, interactions }: RegisteredComponentProps) {\n    const strings = readFoundationStrings(element);\n    const count = typeof element.properties.count === 'number' && element.properties.count > 0 ? Math.floor(element.properties.count) : 0;\n    const spoken = count > 0 ? formatText(strings.notificationsCount, { count: formatNumber(count, readLocale(element), NumberFormat.Number, undefined, 0) }) : strings.notificationsNone;\n\n    return (\n        <button type='button' className='foundation foundation-notifications' data-scene-id={element.id} onClick={interactions?.onClick}>\n            <FoundationIcon name='alert' />\n            <span className='foundation-visually-hidden'>{`${strings.notificationsLabel}: ${spoken}`}</span>\n            {count > 0 && <span className='foundation-notifications-badge' aria-hidden='true'>{count > 99 ? '99+' : count}</span>}\n        </button>\n    );\n}\n"],"names":["NotificationsButton","element","interactions","strings","readFoundationStrings","count","properties","Math","floor","spoken","formatText","notificationsCount","formatNumber","readLocale","NumberFormat","Number","undefined","notificationsNone","_jsxs","button","type","className","data-scene-id","id","onClick","_jsx","FoundationIcon","name","span","notificationsLabel","aria-hidden"],"mappings":";;;;;;;AAAA;AACA;AAOA;;;;;;AAMC,IACM,SAASA,mBAAAA,CAAoB,EAAEC,OAAO,EAAEC,YAAY,EAA4B,EAAA;AACnF,IAAA,MAAMC,UAAUC,uCAAAA,CAAsBH,OAAAA,CAAAA;IACtC,MAAMI,KAAAA,GAAQ,OAAOJ,OAAAA,CAAQK,UAAU,CAACD,KAAK,KAAK,YAAYJ,OAAAA,CAAQK,UAAU,CAACD,KAAK,GAAG,IAAIE,IAAAA,CAAKC,KAAK,CAACP,OAAAA,CAAQK,UAAU,CAACD,KAAK,CAAA,GAAI,CAAA;AACpI,IAAA,MAAMI,SAASJ,KAAAA,GAAQ,CAAA,GAAIK,4BAAAA,CAAWP,OAAAA,CAAQQ,kBAAkB,EAAE;AAAEN,QAAAA,KAAAA,EAAOO,wBAAaP,KAAAA,EAAOQ,qBAAAA,CAAWZ,UAAUa,uBAAAA,CAAaC,MAAM,EAAEC,SAAAA,EAAW,CAAA;AAAG,KAAA,CAAA,GAAKb,QAAQc,iBAAiB;AAErL,IAAA,qBACIC,eAAA,CAACC,QAAAA,EAAAA;QAAOC,IAAAA,EAAK,QAAA;QAASC,SAAAA,EAAU,qCAAA;AAAsCC,QAAAA,eAAAA,EAAerB,QAAQsB,EAAE;AAAEC,QAAAA,OAAAA,EAAStB,YAAAA,EAAcsB,OAAAA;;0BACpHC,cAAA,CAACC,6BAAAA,EAAAA;gBAAeC,IAAAA,EAAK;;0BACrBF,cAAA,CAACG,MAAAA,EAAAA;gBAAKP,SAAAA,EAAU,4BAAA;AAA8B,gBAAA,QAAA,EAAA,CAAA,EAAGlB,OAAAA,CAAQ0B,kBAAkB,CAAC,EAAE,EAAEpB,MAAAA,CAAAA;;AAC/EJ,YAAAA,KAAAA,GAAQ,mBAAKoB,cAAA,CAACG,MAAAA,EAAAA;gBAAKP,SAAAA,EAAU,gCAAA;gBAAiCS,aAAAA,EAAY,MAAA;AAAQzB,gBAAAA,QAAAA,EAAAA,KAAAA,GAAQ,KAAK,KAAA,GAAQA;;;;AAGpH;;"}

package/dist/cjs/foundation/SubNavigation.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_react = require('@cratis/scene.react');
+var elementProperties = require('../shell/elementProperties.js');
+var tabModel = require('./tabModel.js');
+var ComponentState = require('./ComponentState.js');
+var foundationStrings = require('./foundationStrings.js');
+var StateFrame = require('./StateFrame.js');
+var urlState = require('./urlState.js');
+
+/**
+ * The `subNavigation` component: a module's own sections as a tab bar or a left rail.
+ *
+ * `items` name the sections (id, label, optional count badge), `orientation` is `horizontal` (tabs, default) or `vertical` (a left rail), and
+ * `urlKey` keeps the active section in the address so a deep link restores it. It is a navigation landmark, the current section carries
+ * `aria-current="page"`, and choosing a section only changes the section: the shell around it keeps its state, which is what makes it a
+ * sub-navigation rather than a page change. The id of the active section is the `value` output, which the module's content binds to.
+ */ function SubNavigation({ element, interactions, bindingOutputs }) {
+    const items = react.useMemo(()=>tabModel.readTabs(element.properties.items), [
+        element.properties.items
+    ]);
+    const [requested, setRequested] = urlState.useUrlState(elementProperties.readOptionalString(element, 'urlKey'), elementProperties.readOptionalString(element, 'activeItem'));
+    const active = tabModel.activeTab(items, requested);
+    const strings = foundationStrings.readFoundationStrings(element);
+    const state = ComponentState.readComponentState(element, items.length > 0);
+    scene_react.useValueOutput(bindingOutputs, active);
+    return /*#__PURE__*/ jsxRuntime.jsx(StateFrame.FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "sub-navigation",
+        state: state,
+        skeleton: [
+            50
+        ],
+        children: state !== ComponentState.ComponentState.Loading && /*#__PURE__*/ jsxRuntime.jsx("nav", {
+            "aria-label": elementProperties.readOptionalString(element, 'label') ?? strings.subNavLabel,
+            className: "foundation-subnav",
+            "data-orientation": element.properties.orientation === 'vertical' ? 'vertical' : 'horizontal',
+            children: /*#__PURE__*/ jsxRuntime.jsx("ul", {
+                children: items.map((item)=>/*#__PURE__*/ jsxRuntime.jsx("li", {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs("a", {
+                            href: `?${new URLSearchParams({
+                                [elementProperties.readOptionalString(element, 'urlKey') ?? 'section']: item.id
+                            }).toString()}`,
+                            "aria-current": item.id === active ? 'page' : undefined,
+                            "aria-disabled": item.disabled || undefined,
+                            className: "foundation-subnav-link",
+                            onClick: (event)=>{
+                                event.preventDefault();
+                                if (!item.disabled) {
+                                    setRequested(item.id);
+                                    interactions?.onSelect?.();
+                                }
+                            },
+                            children: [
+                                item.label,
+                                item.badge !== undefined && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "foundation-tab-badge",
+                                    children: item.badge
+                                })
+                            ]
+                        })
+                    }, item.id))
+            })
+        })
+    });
+}
+
+exports.SubNavigation = SubNavigation;
+//# sourceMappingURL=SubNavigation.js.map

package/dist/cjs/foundation/SubNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubNavigation.js","sources":["../../../foundation/SubNavigation.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { readOptionalString } from '../shell/elementProperties';\nimport { activeTab, readTabs } from './tabModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\nimport { useUrlState } from './urlState';\n\n/**\n * The `subNavigation` component: a module's own sections as a tab bar or a left rail.\n *\n * `items` name the sections (id, label, optional count badge), `orientation` is `horizontal` (tabs, default) or `vertical` (a left rail), and\n * `urlKey` keeps the active section in the address so a deep link restores it. It is a navigation landmark, the current section carries\n * `aria-current=\"page\"`, and choosing a section only changes the section: the shell around it keeps its state, which is what makes it a\n * sub-navigation rather than a page change. The id of the active section is the `value` output, which the module's content binds to.\n */\nexport function SubNavigation({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const items = useMemo(() => readTabs(element.properties.items), [element.properties.items]);\n    const [requested, setRequested] = useUrlState(readOptionalString(element, 'urlKey'), readOptionalString(element, 'activeItem'));\n    const active = activeTab(items, requested);\n    const strings = readFoundationStrings(element);\n    const state = readComponentState(element, items.length > 0);\n\n    useValueOutput(bindingOutputs, active);\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='sub-navigation' state={state} skeleton={[50]}>\n            {state !== ComponentState.Loading && (\n                <nav aria-label={readOptionalString(element, 'label') ?? strings.subNavLabel} className='foundation-subnav' data-orientation={element.properties.orientation === 'vertical' ? 'vertical' : 'horizontal'}>\n                    <ul>\n                        {items.map(item => (\n                            <li key={item.id}>\n                                <a href={`?${new URLSearchParams({ [readOptionalString(element, 'urlKey') ?? 'section']: item.id }).toString()}`} aria-current={item.id === active ? 'page' : undefined}\n                                    aria-disabled={item.disabled || undefined} className='foundation-subnav-link'\n                                    onClick={event => { event.preventDefault(); if (!item.disabled) { setRequested(item.id); interactions?.onSelect?.(); } }}>\n                                    {item.label}{item.badge !== undefined && <span className='foundation-tab-badge'>{item.badge}</span>}\n                                </a>\n                            </li>\n                        ))}\n                    </ul>\n                </nav>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["SubNavigation","element","interactions","bindingOutputs","items","useMemo","readTabs","properties","requested","setRequested","useUrlState","readOptionalString","active","activeTab","strings","readFoundationStrings","state","readComponentState","length","useValueOutput","_jsx","FoundationFrame","name","skeleton","ComponentState","Loading","nav","aria-label","subNavLabel","className","data-orientation","orientation","ul","map","item","li","_jsxs","a","href","URLSearchParams","id","toString","aria-current","undefined","aria-disabled","disabled","onClick","event","preventDefault","onSelect","label","badge","span"],"mappings":";;;;;;;;;;;;AAYA;;;;;;;IAQO,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAAEC,YAAY,EAAEC,cAAc,EAA4B,EAAA;IAC7F,MAAMC,KAAAA,GAAQC,cAAQ,IAAMC,iBAAAA,CAASL,QAAQM,UAAU,CAACH,KAAK,CAAA,EAAG;QAACH,OAAAA,CAAQM,UAAU,CAACH;AAAM,KAAA,CAAA;IAC1F,MAAM,CAACI,WAAWC,YAAAA,CAAa,GAAGC,qBAAYC,oCAAAA,CAAmBV,OAAAA,EAAS,QAAA,CAAA,EAAWU,oCAAAA,CAAmBV,OAAAA,EAAS,YAAA,CAAA,CAAA;IACjH,MAAMW,MAAAA,GAASC,mBAAUT,KAAAA,EAAOI,SAAAA,CAAAA;AAChC,IAAA,MAAMM,UAAUC,uCAAAA,CAAsBd,OAAAA,CAAAA;AACtC,IAAA,MAAMe,KAAAA,GAAQC,iCAAAA,CAAmBhB,OAAAA,EAASG,KAAAA,CAAMc,MAAM,GAAG,CAAA,CAAA;AAEzDC,IAAAA,0BAAAA,CAAehB,cAAAA,EAAgBS,MAAAA,CAAAA;AAE/B,IAAA,qBACIQ,cAAA,CAACC,0BAAAA,EAAAA;QAAgBpB,OAAAA,EAASA,OAAAA;QAASC,YAAAA,EAAcA,YAAAA;QAAcoB,IAAAA,EAAK,gBAAA;QAAiBN,KAAAA,EAAOA,KAAAA;QAAOO,QAAAA,EAAU;AAAC,YAAA;AAAG,SAAA;kBAC5GP,KAAAA,KAAUQ,6BAAAA,CAAeC,OAAO,kBAC7BL,cAAA,CAACM,KAAAA,EAAAA;AAAIC,YAAAA,YAAAA,EAAYhB,oCAAAA,CAAmBV,OAAAA,EAAS,OAAA,CAAA,IAAYa,OAAAA,CAAQc,WAAW;YAAEC,SAAAA,EAAU,mBAAA;AAAoBC,YAAAA,kBAAAA,EAAkB7B,QAAQM,UAAU,CAACwB,WAAW,KAAK,aAAa,UAAA,GAAa,YAAA;AACvL,YAAA,QAAA,gBAAAX,cAAA,CAACY,IAAAA,EAAAA;AACI5B,gBAAAA,QAAAA,EAAAA,KAAAA,CAAM6B,GAAG,CAACC,CAAAA,IAAAA,iBACPd,cAAA,CAACe,IAAAA,EAAAA;AACG,wBAAA,QAAA,gBAAAC,eAAA,CAACC,GAAAA,EAAAA;AAAEC,4BAAAA,IAAAA,EAAM,CAAC,CAAC,EAAE,IAAIC,eAAAA,CAAgB;AAAE,gCAAA,CAAC5B,qCAAmBV,OAAAA,EAAS,QAAA,CAAA,IAAa,SAAA,GAAYiC,KAAKM;AAAG,6BAAA,CAAA,CAAGC,QAAQ,EAAA,CAAA,CAAI;AAAEC,4BAAAA,cAAAA,EAAcR,IAAAA,CAAKM,EAAE,KAAK5B,MAAAA,GAAS,MAAA,GAAS+B,SAAAA;4BAC1JC,eAAAA,EAAeV,IAAAA,CAAKW,QAAQ,IAAIF,SAAAA;4BAAWd,SAAAA,EAAU,wBAAA;AACrDiB,4BAAAA,OAAAA,EAASC,CAAAA,KAAAA,GAAAA;AAAWA,gCAAAA,KAAAA,CAAMC,cAAc,EAAA;gCAAI,IAAI,CAACd,IAAAA,CAAKW,QAAQ,EAAE;AAAEpC,oCAAAA,YAAAA,CAAayB,KAAKM,EAAE,CAAA;oCAAGtC,YAAAA,EAAc+C,QAAAA,IAAAA;AAAc,gCAAA;AAAE,4BAAA,CAAA;;AACtHf,gCAAAA,IAAAA,CAAKgB,KAAK;gCAAEhB,IAAAA,CAAKiB,KAAK,KAAKR,SAAAA,kBAAavB,cAAA,CAACgC,MAAAA,EAAAA;oCAAKvB,SAAAA,EAAU,sBAAA;AAAwBK,oCAAAA,QAAAA,EAAAA,IAAAA,CAAKiB;;;;AAJrFjB,qBAAAA,EAAAA,IAAAA,CAAKM,EAAE,CAAA;;;;AAa5C;;"}

package/dist/cjs/foundation/TabSet.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_react = require('@cratis/scene.react');
+var elementProperties = require('../shell/elementProperties.js');
+var tabModel = require('./tabModel.js');
+var ComponentState = require('./ComponentState.js');
+var foundationStrings = require('./foundationStrings.js');
+var StateFrame = require('./StateFrame.js');
+var urlState = require('./urlState.js');
+
+/**
+ * The `tabSet` component: a set of tabs, each showing the content filed under its id in the element's slots.
+ *
+ * `tabs` name the tabs (id, label, optional count badge, disabled); the content of tab `overview` is the slot `overview`. It follows the
+ * ARIA tabs pattern - arrows, Home and End move and select, the active tab is the one tab stop, each panel is labelled by its tab - and the
+ * active tab is kept in the address under `urlKey` when one is given, so a deep link and a refresh restore it. The id of the active tab is the
+ * `value` output. The tabs a record page offers (Overview, Related, Files, History) are configurable by changing this property.
+ */ function TabSet({ element, interactions, slots, bindingOutputs }) {
+    const tabs = react.useMemo(()=>tabModel.readTabs(element.properties.tabs), [
+        element.properties.tabs
+    ]);
+    const [requested, setRequested] = urlState.useUrlState(elementProperties.readOptionalString(element, 'urlKey'), elementProperties.readOptionalString(element, 'activeTab'));
+    const active = tabModel.activeTab(tabs, requested);
+    const strings = foundationStrings.readFoundationStrings(element);
+    const state = ComponentState.readComponentState(element, tabs.length > 0);
+    const list = react.useRef(null);
+    scene_react.useValueOutput(bindingOutputs, active);
+    const choose = (id, focus = false)=>{
+        if (id === undefined) return;
+        setRequested(id);
+        interactions?.onSelect?.();
+        if (focus) requestAnimationFrame(()=>list.current?.querySelector(`[data-tab="${CSS.escape(id)}"]`)?.focus());
+    };
+    const move = (event)=>{
+        const direction = {
+            ArrowRight: 'next',
+            ArrowDown: 'next',
+            ArrowLeft: 'previous',
+            ArrowUp: 'previous',
+            Home: 'first',
+            End: 'last'
+        }[event.key];
+        if (direction === undefined) return;
+        event.preventDefault();
+        choose(tabModel.stepTab(tabs, active, direction), true);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(StateFrame.FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "tab-set",
+        state: state,
+        skeleton: [
+            60,
+            100
+        ],
+        children: state !== ComponentState.ComponentState.Loading && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    ref: list,
+                    role: "tablist",
+                    "aria-label": elementProperties.readOptionalString(element, 'label') ?? strings.tabsLabel,
+                    className: "foundation-tabs",
+                    onKeyDown: move,
+                    children: tabs.map((tab)=>/*#__PURE__*/ jsxRuntime.jsxs("button", {
+                            id: `${element.id}-tab-${tab.id}`,
+                            "data-tab": tab.id,
+                            type: "button",
+                            role: "tab",
+                            className: "foundation-tab",
+                            "aria-selected": tab.id === active,
+                            "aria-controls": `${element.id}-panel-${tab.id}`,
+                            tabIndex: tab.id === active ? 0 : -1,
+                            disabled: tab.disabled,
+                            onClick: ()=>choose(tab.id),
+                            children: [
+                                tab.label,
+                                tab.badge !== undefined && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "foundation-tab-badge",
+                                    children: tab.badge
+                                })
+                            ]
+                        }, tab.id))
+                }),
+                tabs.map((tab)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+                        id: `${element.id}-panel-${tab.id}`,
+                        role: "tabpanel",
+                        "aria-labelledby": `${element.id}-tab-${tab.id}`,
+                        hidden: tab.id !== active,
+                        tabIndex: 0,
+                        className: "foundation-tab-panel",
+                        children: tab.id === active ? slots?.[tab.id] : undefined
+                    }, tab.id))
+            ]
+        })
+    });
+}
+
+exports.TabSet = TabSet;
+//# sourceMappingURL=TabSet.js.map

package/dist/cjs/foundation/TabSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSet.js","sources":["../../../foundation/TabSet.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { KeyboardEvent, useMemo, useRef } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { readOptionalString } from '../shell/elementProperties';\nimport { activeTab, readTabs, stepTab } from './tabModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\nimport { useUrlState } from './urlState';\n\n/**\n * The `tabSet` component: a set of tabs, each showing the content filed under its id in the element's slots.\n *\n * `tabs` name the tabs (id, label, optional count badge, disabled); the content of tab `overview` is the slot `overview`. It follows the\n * ARIA tabs pattern - arrows, Home and End move and select, the active tab is the one tab stop, each panel is labelled by its tab - and the\n * active tab is kept in the address under `urlKey` when one is given, so a deep link and a refresh restore it. The id of the active tab is the\n * `value` output. The tabs a record page offers (Overview, Related, Files, History) are configurable by changing this property.\n */\nexport function TabSet({ element, interactions, slots, bindingOutputs }: RegisteredComponentProps) {\n    const tabs = useMemo(() => readTabs(element.properties.tabs), [element.properties.tabs]);\n    const [requested, setRequested] = useUrlState(readOptionalString(element, 'urlKey'), readOptionalString(element, 'activeTab'));\n    const active = activeTab(tabs, requested);\n    const strings = readFoundationStrings(element);\n    const state = readComponentState(element, tabs.length > 0);\n    const list = useRef<HTMLDivElement>(null);\n\n    useValueOutput(bindingOutputs, active);\n\n    const choose = (id: string | undefined, focus = false) => {\n        if (id === undefined) return;\n        setRequested(id);\n        interactions?.onSelect?.();\n        if (focus) requestAnimationFrame(() => list.current?.querySelector<HTMLElement>(`[data-tab=\"${CSS.escape(id)}\"]`)?.focus());\n    };\n    const move = (event: KeyboardEvent) => {\n        const direction = { ArrowRight: 'next', ArrowDown: 'next', ArrowLeft: 'previous', ArrowUp: 'previous', Home: 'first', End: 'last' }[event.key] as 'next' | 'previous' | 'first' | 'last' | undefined;\n        if (direction === undefined) return;\n        event.preventDefault();\n        choose(stepTab(tabs, active, direction), true);\n    };\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='tab-set' state={state} skeleton={[60, 100]}>\n            {state !== ComponentState.Loading && (\n                <>\n                    <div ref={list} role='tablist' aria-label={readOptionalString(element, 'label') ?? strings.tabsLabel} className='foundation-tabs' onKeyDown={move}>\n                        {tabs.map(tab => (\n                            <button key={tab.id} id={`${element.id}-tab-${tab.id}`} data-tab={tab.id} type='button' role='tab' className='foundation-tab' aria-selected={tab.id === active}\n                                aria-controls={`${element.id}-panel-${tab.id}`} tabIndex={tab.id === active ? 0 : -1} disabled={tab.disabled} onClick={() => choose(tab.id)}>\n                                {tab.label}{tab.badge !== undefined && <span className='foundation-tab-badge'>{tab.badge}</span>}\n                            </button>\n                        ))}\n                    </div>\n                    {tabs.map(tab => (\n                        <div key={tab.id} id={`${element.id}-panel-${tab.id}`} role='tabpanel' aria-labelledby={`${element.id}-tab-${tab.id}`} hidden={tab.id !== active} tabIndex={0} className='foundation-tab-panel'>\n                            {tab.id === active ? slots?.[tab.id] : undefined}\n                        </div>\n                    ))}\n                </>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["TabSet","element","interactions","slots","bindingOutputs","tabs","useMemo","readTabs","properties","requested","setRequested","useUrlState","readOptionalString","active","activeTab","strings","readFoundationStrings","state","readComponentState","length","list","useRef","useValueOutput","choose","id","focus","undefined","onSelect","requestAnimationFrame","current","querySelector","CSS","escape","move","event","direction","ArrowRight","ArrowDown","ArrowLeft","ArrowUp","Home","End","key","preventDefault","stepTab","_jsx","FoundationFrame","name","skeleton","ComponentState","Loading","_jsxs","_Fragment","div","ref","role","aria-label","tabsLabel","className","onKeyDown","map","tab","button","data-tab","type","aria-selected","aria-controls","tabIndex","disabled","onClick","label","badge","span","aria-labelledby","hidden"],"mappings":"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"}