@cratis/scene.blueprint.default 4.35.0 → 4.37.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.js","sources":["../../../foundation/AvatarStack.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 } from '@cratis/scene.react';\nimport { initialsOf, readPeople, visiblePeople } from './avatarModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\n\n/**\n * The `avatarStack` component: overlapping avatars for the people on a record, with a \"+N\" chip for the rest.\n *\n * `people` are names with an optional picture; without one the avatar shows the person's initials. The stack is a labelled group (\"5 people\"),\n * each avatar is an image named after its person, and the overflow chip says how many more in words. `max` is how many are shown (4 by\n * default) and `size` is `small` or `medium`.\n */\nexport function AvatarStack({ element, interactions }: RegisteredComponentProps) {\n    const people = useMemo(() => readPeople(element.properties.people), [element.properties.people]);\n    const strings = readFoundationStrings(element);\n    const { shown, hidden } = visiblePeople(people, typeof element.properties.max === 'number' ? element.properties.max : 4);\n    const state = readComponentState(element, people.length > 0);\n    const size = element.properties.size === 'small' ? 'small' : 'medium';\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='avatar-stack' state={state} skeleton={[35]}>\n            {(state === ComponentState.Ready || state === ComponentState.Partial) && (\n                <ul className='foundation-avatars' role='group' aria-label={formatText(strings.avatarPeople, { count: people.length })} data-size={size}>\n                    {shown.map(person => (\n                        <li key={person.name} className='foundation-avatar' role='img' aria-label={person.name} title={person.name}>\n                            {person.imageUrl ? <img src={person.imageUrl} alt='' /> : <span aria-hidden='true'>{initialsOf(person.name)}</span>}\n                        </li>\n                    ))}\n                    {hidden > 0 && (\n                        <li className='foundation-avatar foundation-avatar-more' role='img' aria-label={formatText(strings.avatarOverflow, { count: hidden })}>\n                            <span aria-hidden='true'>+{hidden}</span>\n                        </li>\n                    )}\n                </ul>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["AvatarStack","element","interactions","people","useMemo","readPeople","properties","strings","readFoundationStrings","shown","hidden","visiblePeople","max","state","readComponentState","length","size","_jsx","FoundationFrame","name","skeleton","ComponentState","Ready","Partial","_jsxs","ul","className","role","aria-label","formatText","avatarPeople","count","data-size","map","person","li","title","imageUrl","img","src","alt","span","aria-hidden","initialsOf","avatarOverflow"],"mappings":";;;;;;;;;AAUA;;;;;;AAMC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,YAAY,EAA4B,EAAA;IAC3E,MAAMC,MAAAA,GAASC,cAAQ,IAAMC,sBAAAA,CAAWJ,QAAQK,UAAU,CAACH,MAAM,CAAA,EAAG;QAACF,OAAAA,CAAQK,UAAU,CAACH;AAAO,KAAA,CAAA;AAC/F,IAAA,MAAMI,UAAUC,uCAAAA,CAAsBP,OAAAA,CAAAA;AACtC,IAAA,MAAM,EAAEQ,KAAK,EAAEC,MAAM,EAAE,GAAGC,0BAAcR,MAAAA,EAAQ,OAAOF,QAAQK,UAAU,CAACM,GAAG,KAAK,QAAA,GAAWX,QAAQK,UAAU,CAACM,GAAG,GAAG,CAAA,CAAA;AACtH,IAAA,MAAMC,KAAAA,GAAQC,iCAAAA,CAAmBb,OAAAA,EAASE,MAAAA,CAAOY,MAAM,GAAG,CAAA,CAAA;AAC1D,IAAA,MAAMC,OAAOf,OAAAA,CAAQK,UAAU,CAACU,IAAI,KAAK,UAAU,OAAA,GAAU,QAAA;AAE7D,IAAA,qBACIC,cAAA,CAACC,0BAAAA,EAAAA;QAAgBjB,OAAAA,EAASA,OAAAA;QAASC,YAAAA,EAAcA,YAAAA;QAAciB,IAAAA,EAAK,cAAA;QAAeN,KAAAA,EAAOA,KAAAA;QAAOO,QAAAA,EAAU;AAAC,YAAA;AAAG,SAAA;kBAC1G,CAACP,KAAAA,KAAUQ,6BAAAA,CAAeC,KAAK,IAAIT,UAAUQ,6BAAAA,CAAeE,OAAO,mBAChEC,eAAA,CAACC,IAAAA,EAAAA;YAAGC,SAAAA,EAAU,oBAAA;YAAqBC,IAAAA,EAAK,OAAA;YAAQC,YAAAA,EAAYC,4BAAAA,CAAWtB,OAAAA,CAAQuB,YAAY,EAAE;AAAEC,gBAAAA,KAAAA,EAAO5B,OAAOY;AAAO,aAAA,CAAA;YAAIiB,WAAAA,EAAWhB,IAAAA;;AAC9HP,gBAAAA,KAAAA,CAAMwB,GAAG,CAACC,CAAAA,MAAAA,iBACPjB,cAAA,CAACkB,IAAAA,EAAAA;wBAAqBT,SAAAA,EAAU,mBAAA;wBAAoBC,IAAAA,EAAK,KAAA;AAAMC,wBAAAA,YAAAA,EAAYM,OAAOf,IAAI;AAAEiB,wBAAAA,KAAAA,EAAOF,OAAOf,IAAI;kCACrGe,MAAAA,CAAOG,QAAQ,iBAAGpB,cAAA,CAACqB,KAAAA,EAAAA;AAAIC,4BAAAA,GAAAA,EAAKL,OAAOG,QAAQ;4BAAEG,GAAAA,EAAI;2CAAQvB,cAAA,CAACwB,MAAAA,EAAAA;4BAAKC,aAAAA,EAAY,MAAA;AAAQC,4BAAAA,QAAAA,EAAAA,sBAAAA,CAAWT,OAAOf,IAAI;;AADrGe,qBAAAA,EAAAA,MAAAA,CAAOf,IAAI,CAAA,CAAA;AAIvBT,gBAAAA,MAAAA,GAAS,mBACNO,cAAA,CAACkB,IAAAA,EAAAA;oBAAGT,SAAAA,EAAU,0CAAA;oBAA2CC,IAAAA,EAAK,KAAA;oBAAMC,YAAAA,EAAYC,4BAAAA,CAAWtB,OAAAA,CAAQqC,cAAc,EAAE;wBAAEb,KAAAA,EAAOrB;AAAO,qBAAA,CAAA;AAC/H,oBAAA,QAAA,gBAAAc,eAAA,CAACiB,MAAAA,EAAAA;wBAAKC,aAAAA,EAAY,MAAA;;AAAO,4BAAA,GAAA;AAAEhC,4BAAAA;;;;;;;AAOvD;;"}

package/dist/cjs/foundation/ChecklistSection.js

@@ -0,0 +1,174 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_react = require('@cratis/scene.react');
+var checklistModel = require('./checklistModel.js');
+var ComponentState = require('./ComponentState.js');
+var FoundationIcon = require('./FoundationIcon.js');
+var formatting = require('./formatting.js');
+var foundationStrings = require('./foundationStrings.js');
+var PermissionRule = require('./PermissionRule.js');
+var StateFrame = require('./StateFrame.js');
+
+/**
+ * The `checklistSection` component: sections of tasks, each with its owner and due date, and a progress bar per section.
+ *
+ * `sections` give the structure (`title`, and `items` with `id`, `label`, `owner`, `due`, `done`). Ticking a task publishes the ids of all
+ * done tasks as the `value` output and runs the behaviors attached to the element. An open task past its due date says "Overdue" in
+ * words as well as in color. Progress is a labelled progress bar, so "2 of 5 complete" is read, not just seen. With `editPermission`
+ * not enabled the tasks are shown and cannot be changed.
+ */ function ChecklistSection({ element, interactions, bindingOutputs }) {
+    const supplied = react.useMemo(()=>checklistModel.readChecklist(element.properties.sections), [
+        element.properties.sections
+    ]);
+    const suppliedKey = JSON.stringify(supplied);
+    const [groups, setGroups] = react.useState(supplied);
+    const strings = foundationStrings.readFoundationStrings(element);
+    const locale = formatting.readLocale(element);
+    const state = ComponentState.readComponentState(element, supplied.some((group)=>group.items.length > 0));
+    const locked = PermissionRule.readPermissionRule(element, 'editPermission') !== 'enabled';
+    const now = react.useMemo(()=>typeof element.properties.today === 'string' ? new Date(element.properties.today) : new Date(), [
+        element.properties.today
+    ]);
+    react.useEffect(()=>setGroups(supplied), [
+        suppliedKey
+    ]);
+    scene_react.useValueOutput(bindingOutputs, checklistModel.doneTaskIds(groups));
+    return /*#__PURE__*/ jsxRuntime.jsx(StateFrame.FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "checklist",
+        state: state,
+        skeleton: [
+            40,
+            100,
+            90,
+            95
+        ],
+        children: (state === ComponentState.ComponentState.Ready || state === ComponentState.ComponentState.Partial) && groups.map((group, groupIndex)=>{
+            const done = checklistModel.completed(group);
+            const total = group.items.length;
+            return /*#__PURE__*/ jsxRuntime.jsxs("section", {
+                className: "foundation-checklist-group",
+                "aria-labelledby": `${element.id}-group-${groupIndex}`,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("header", {
+                        className: "foundation-checklist-header",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("h3", {
+                                id: `${element.id}-group-${groupIndex}`,
+                                children: group.title
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                className: "foundation-count",
+                                children: foundationStrings.formatText(strings.checklistProgress, {
+                                    done,
+                                    total
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "foundation-progress",
+                        role: "progressbar",
+                        "aria-label": foundationStrings.formatText(strings.checklistItemProgress, {
+                            title: group.title
+                        }),
+                        "aria-valuemin": 0,
+                        "aria-valuemax": total,
+                        "aria-valuenow": done,
+                        "aria-valuetext": foundationStrings.formatText(strings.checklistProgress, {
+                            done,
+                            total
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            className: "foundation-progress-bar",
+                            style: {
+                                inlineSize: total === 0 ? '0%' : `${done / total * 100}%`
+                            }
+                        })
+                    }),
+                    total === 0 ? /*#__PURE__*/ jsxRuntime.jsx("p", {
+                        className: "foundation-count",
+                        children: strings.checklistNone
+                    }) : /*#__PURE__*/ jsxRuntime.jsx("ul", {
+                        className: "foundation-checklist-items",
+                        children: group.items.map((item)=>{
+                            const overdue = checklistModel.isOverdue(item, now);
+                            return /*#__PURE__*/ jsxRuntime.jsxs("li", {
+                                className: "foundation-checklist-item",
+                                "data-done": item.done,
+                                "data-overdue": overdue,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsxs("label", {
+                                        className: "foundation-check",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("input", {
+                                                type: "checkbox",
+                                                checked: item.done,
+                                                disabled: locked,
+                                                onChange: ()=>{
+                                                    setGroups(checklistModel.toggleTask(groups, item.id));
+                                                    interactions?.onChange?.();
+                                                }
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                className: "foundation-checklist-label",
+                                                children: item.label
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                        className: "foundation-checklist-meta",
+                                        children: [
+                                            item.owner && /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                        className: "foundation-visually-hidden",
+                                                        children: `${strings.checklistOwner}: `
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                                                        name: "user"
+                                                    }),
+                                                    " ",
+                                                    item.owner
+                                                ]
+                                            }),
+                                            item.due && /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                        className: "foundation-visually-hidden",
+                                                        children: `${strings.checklistDue}: `
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx("time", {
+                                                        dateTime: item.due,
+                                                        children: formatting.formatDate(item.due, locale)
+                                                    }),
+                                                    overdue && /*#__PURE__*/ jsxRuntime.jsxs("strong", {
+                                                        className: "foundation-overdue",
+                                                        children: [
+                                                            " · ",
+                                                            /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                                                                name: "alert"
+                                                            }),
+                                                            " ",
+                                                            strings.checklistOverdue
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, item.id);
+                        })
+                    })
+                ]
+            }, group.title + groupIndex);
+        })
+    });
+}
+
+exports.ChecklistSection = ChecklistSection;
+//# sourceMappingURL=ChecklistSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChecklistSection.js","sources":["../../../foundation/ChecklistSection.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 { useEffect, useMemo, useState } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { ChecklistGroup, completed, doneTaskIds, isOverdue, readChecklist, toggleTask } from './checklistModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationIcon } from './FoundationIcon';\nimport { formatDate, readLocale } from './formatting';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { readPermissionRule } from './PermissionRule';\nimport { FoundationFrame } from './StateFrame';\n\n/**\n * The `checklistSection` component: sections of tasks, each with its owner and due date, and a progress bar per section.\n *\n * `sections` give the structure (`title`, and `items` with `id`, `label`, `owner`, `due`, `done`). Ticking a task publishes the ids of all\n * done tasks as the `value` output and runs the behaviors attached to the element. An open task past its due date says \"Overdue\" in\n * words as well as in color. Progress is a labelled progress bar, so \"2 of 5 complete\" is read, not just seen. With `editPermission`\n * not enabled the tasks are shown and cannot be changed.\n */\nexport function ChecklistSection({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const supplied = useMemo(() => readChecklist(element.properties.sections), [element.properties.sections]);\n    const suppliedKey = JSON.stringify(supplied);\n    const [groups, setGroups] = useState<ChecklistGroup[]>(supplied);\n    const strings = readFoundationStrings(element);\n    const locale = readLocale(element);\n    const state = readComponentState(element, supplied.some(group => group.items.length > 0));\n    const locked = readPermissionRule(element, 'editPermission') !== 'enabled';\n    const now = useMemo(() => (typeof element.properties.today === 'string' ? new Date(element.properties.today) : new Date()), [element.properties.today]);\n\n    useEffect(() => setGroups(supplied), [suppliedKey]);\n    useValueOutput(bindingOutputs, doneTaskIds(groups));\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='checklist' state={state} skeleton={[40, 100, 90, 95]}>\n            {(state === ComponentState.Ready || state === ComponentState.Partial) && groups.map((group, groupIndex) => {\n                const done = completed(group);\n                const total = group.items.length;\n                return (\n                    <section key={group.title + groupIndex} className='foundation-checklist-group' aria-labelledby={`${element.id}-group-${groupIndex}`}>\n                        <header className='foundation-checklist-header'>\n                            <h3 id={`${element.id}-group-${groupIndex}`}>{group.title}</h3>\n                            <span className='foundation-count'>{formatText(strings.checklistProgress, { done, total })}</span>\n                        </header>\n                        <div className='foundation-progress' role='progressbar' aria-label={formatText(strings.checklistItemProgress, { title: group.title })}\n                            aria-valuemin={0} aria-valuemax={total} aria-valuenow={done} aria-valuetext={formatText(strings.checklistProgress, { done, total })}>\n                            <span className='foundation-progress-bar' style={{ inlineSize: total === 0 ? '0%' : `${(done / total) * 100}%` }} />\n                        </div>\n                        {total === 0 ? <p className='foundation-count'>{strings.checklistNone}</p> : (\n                            <ul className='foundation-checklist-items'>\n                                {group.items.map(item => {\n                                    const overdue = isOverdue(item, now);\n                                    return (\n                                        <li key={item.id} className='foundation-checklist-item' data-done={item.done} data-overdue={overdue}>\n                                            <label className='foundation-check'>\n                                                <input type='checkbox' checked={item.done} disabled={locked} onChange={() => { setGroups(toggleTask(groups, item.id)); interactions?.onChange?.(); }} />\n                                                <span className='foundation-checklist-label'>{item.label}</span>\n                                            </label>\n                                            <span className='foundation-checklist-meta'>\n                                                {item.owner && <span><span className='foundation-visually-hidden'>{`${strings.checklistOwner}: `}</span><FoundationIcon name='user' /> {item.owner}</span>}\n                                                {item.due && (\n                                                    <span>\n                                                        <span className='foundation-visually-hidden'>{`${strings.checklistDue}: `}</span>\n                                                        <time dateTime={item.due}>{formatDate(item.due, locale)}</time>\n                                                        {overdue && <strong className='foundation-overdue'> · <FoundationIcon name='alert' /> {strings.checklistOverdue}</strong>}\n                                                    </span>\n                                                )}\n                                            </span>\n                                        </li>\n                                    );\n                                })}\n                            </ul>\n                        )}\n                    </section>\n                );\n            })}\n        </FoundationFrame>\n    );\n}\n"],"names":["ChecklistSection","element","interactions","bindingOutputs","supplied","useMemo","readChecklist","properties","sections","suppliedKey","JSON","stringify","groups","setGroups","useState","strings","readFoundationStrings","locale","readLocale","state","readComponentState","some","group","items","length","locked","readPermissionRule","now","today","Date","useEffect","useValueOutput","doneTaskIds","_jsx","FoundationFrame","name","skeleton","ComponentState","Ready","Partial","map","groupIndex","done","completed","total","_jsxs","section","className","aria-labelledby","id","header","h3","title","span","formatText","checklistProgress","div","role","aria-label","checklistItemProgress","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","style","inlineSize","p","checklistNone","ul","item","overdue","isOverdue","li","data-done","data-overdue","label","input","type","checked","disabled","onChange","toggleTask","owner","checklistOwner","FoundationIcon","due","checklistDue","time","dateTime","formatDate","strong","checklistOverdue"],"mappings":"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"}

package/dist/cjs/foundation/FileUploader.js

@@ -0,0 +1,218 @@
+'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 ActionButton = require('./ActionButton.js');
+var ComponentState = require('./ComponentState.js');
+var FileUploaderHandler = require('./FileUploaderHandler.js');
+var FoundationIcon = require('./FoundationIcon.js');
+var formatting = require('./formatting.js');
+var foundationStrings = require('./foundationStrings.js');
+var PermissionRule = require('./PermissionRule.js');
+var StateFrame = require('./StateFrame.js');
+var uploadModel = require('./uploadModel.js');
+
+/**
+ * The `fileUploader` component: a drop zone and a button to choose files, checked against type and size before anything is sent.
+ *
+ * `accept` is an `accept` list, `maxSizeMb` the largest file, and `multiple` whether more than one is allowed. The zone is a real file
+ * input behind a labelled button, so it works from the keyboard and with a screen reader; dropping onto it does the same as choosing.
+ * Refusals are announced with their reason. Accepted files are listed with a remove button and a status in words; the selection
+ * (name, size, type) is published as the `value` output. With a `FileUploaderHandlerProvider` in scope the files are sent through it and
+ * marked uploading, done or failed; without one the component only collects. `actionPermission` gates choosing files.
+ */ function FileUploader({ element, interactions, bindingOutputs }) {
+    const strings = foundationStrings.readFoundationStrings(element);
+    const locale = formatting.readLocale(element);
+    const handler = FileUploaderHandler.useFileUploaderHandler();
+    const [entries, setEntries] = react.useState([]);
+    const [problems, setProblems] = react.useState([]);
+    const [dragging, setDragging] = react.useState(false);
+    const input = react.useRef(null);
+    const accept = elementProperties.readOptionalString(element, 'accept') ?? '';
+    const maximumBytes = (typeof element.properties.maxSizeMb === 'number' ? element.properties.maxSizeMb : 0) * 1024 * 1024;
+    const multiple = element.properties.multiple !== false;
+    const rule = PermissionRule.readPermissionRule(element, 'actionPermission');
+    const state = ComponentState.readComponentState(element, true);
+    const serverUrl = elementProperties.readOptionalString(element, 'serverUrl');
+    scene_react.useValueOutput(bindingOutputs, entries.map((entry)=>({
+            name: entry.file.name,
+            size: entry.file.size,
+            type: entry.file.type,
+            status: entry.status
+        })));
+    const send = async (files)=>{
+        if (!handler) return;
+        const mark = (status)=>setEntries((current)=>current.map((entry)=>files.includes(entry.file) ? {
+                        ...entry,
+                        status
+                    } : entry));
+        mark(uploadModel.UploadStatus.Uploading);
+        try {
+            await handler(files, serverUrl);
+            mark(uploadModel.UploadStatus.Done);
+        } catch  {
+            mark(uploadModel.UploadStatus.Failed);
+        }
+    };
+    const take = (chosen)=>{
+        const { accepted, refused } = uploadModel.checkSelection(chosen, {
+            accept,
+            maximumBytes,
+            multiple
+        }, entries.length);
+        setProblems(refused.map(({ file, reason })=>reason === uploadModel.UploadRefusal.WrongType ? foundationStrings.formatText(strings.uploadWrongType, {
+                name: file.name
+            }) : reason === uploadModel.UploadRefusal.TooLarge ? foundationStrings.formatText(strings.uploadTooLarge, {
+                name: file.name,
+                limit: uploadModel.formatBytes(maximumBytes, locale)
+            }) : strings.uploadSingle));
+        if (accepted.length === 0) return;
+        setEntries((current)=>[
+                ...current,
+                ...accepted.map((file)=>({
+                        file,
+                        status: uploadModel.UploadStatus.Queued
+                    }))
+            ]);
+        interactions?.onChange?.();
+        void send(accepted);
+    };
+    const choose = (event)=>{
+        take(Array.from(event.target.files ?? []));
+        event.target.value = '';
+    };
+    const drop = (event)=>{
+        event.preventDefault();
+        setDragging(false);
+        if (rule === 'enabled') take(Array.from(event.dataTransfer.files));
+    };
+    const statusText = {
+        queued: strings.uploadQueued,
+        uploading: strings.uploadUploading,
+        done: strings.uploadDone,
+        failed: strings.uploadFailed
+    };
+    const limits = [
+        accept ? foundationStrings.formatText(strings.uploadAccepts, {
+            types: accept
+        }) : '',
+        maximumBytes > 0 ? foundationStrings.formatText(strings.uploadLimits, {
+            limit: uploadModel.formatBytes(maximumBytes, locale)
+        }) : ''
+    ].filter(Boolean).join(' · ');
+    return /*#__PURE__*/ jsxRuntime.jsx(StateFrame.FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "file-uploader",
+        state: state,
+        skeleton: [
+            100,
+            40
+        ],
+        children: state !== ComponentState.ComponentState.Loading && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "foundation-dropzone",
+                    "data-dragging": dragging,
+                    onDragOver: (event)=>{
+                        event.preventDefault();
+                        setDragging(true);
+                    },
+                    onDragLeave: ()=>setDragging(false),
+                    onDrop: drop,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                            name: "upload"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            children: strings.uploadDrop
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("input", {
+                            ref: input,
+                            className: "foundation-visually-hidden",
+                            type: "file",
+                            tabIndex: -1,
+                            accept: accept || undefined,
+                            multiple: multiple,
+                            disabled: rule !== 'enabled',
+                            onChange: choose,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(ActionButton.ActionButton, {
+                            rule: rule,
+                            emphasis: "secondary",
+                            disabledReason: strings.disabledNoPermission,
+                            onClick: ()=>input.current?.click(),
+                            children: strings.uploadBrowse
+                        }),
+                        limits && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            className: "foundation-count",
+                            children: limits
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    "aria-live": "polite",
+                    className: "foundation-upload-problems",
+                    children: problems.map((problem)=>/*#__PURE__*/ jsxRuntime.jsx("p", {
+                            className: "foundation-message-text",
+                            "data-tone": "danger",
+                            children: problem
+                        }, problem))
+                }),
+                entries.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("ul", {
+                    className: "foundation-upload-list",
+                    "aria-label": strings.uploadSelected,
+                    children: entries.map((entry, index)=>/*#__PURE__*/ jsxRuntime.jsxs("li", {
+                            className: "foundation-upload-item",
+                            "data-status": entry.status,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                                    name: "file"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "foundation-upload-name",
+                                    children: entry.file.name
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "foundation-count",
+                                    children: uploadModel.formatBytes(entry.file.size, locale)
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "foundation-upload-status",
+                                    children: statusText[entry.status]
+                                }),
+                                entry.status === uploadModel.UploadStatus.Failed && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                    type: "button",
+                                    className: "foundation-link",
+                                    onClick: ()=>void send([
+                                            entry.file
+                                        ]),
+                                    children: strings.retry
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                    type: "button",
+                                    className: "foundation-icon-button",
+                                    "aria-label": foundationStrings.formatText(strings.uploadRemove, {
+                                        name: entry.file.name
+                                    }),
+                                    onClick: ()=>{
+                                        setEntries((current)=>current.filter((existing)=>existing !== entry));
+                                        interactions?.onChange?.();
+                                    },
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(FoundationIcon.FoundationIcon, {
+                                        name: "close"
+                                    })
+                                })
+                            ]
+                        }, entry.file.name + index))
+                })
+            ]
+        })
+    });
+}
+
+exports.FileUploader = FileUploader;
+//# sourceMappingURL=FileUploader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.js","sources":["../../../foundation/FileUploader.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 { ChangeEvent, DragEvent, useRef, useState } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { readOptionalString } from '../shell/elementProperties';\nimport { ActionButton } from './ActionButton';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { useFileUploaderHandler } from './FileUploaderHandler';\nimport { FoundationIcon } from './FoundationIcon';\nimport { readLocale } from './formatting';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { readPermissionRule } from './PermissionRule';\nimport { FoundationFrame } from './StateFrame';\nimport { UploadRefusal, UploadStatus, checkSelection, formatBytes } from './uploadModel';\n\ninterface Entry {\n    file: File;\n    status: UploadStatus;\n}\n\n/**\n * The `fileUploader` component: a drop zone and a button to choose files, checked against type and size before anything is sent.\n *\n * `accept` is an `accept` list, `maxSizeMb` the largest file, and `multiple` whether more than one is allowed. The zone is a real file\n * input behind a labelled button, so it works from the keyboard and with a screen reader; dropping onto it does the same as choosing.\n * Refusals are announced with their reason. Accepted files are listed with a remove button and a status in words; the selection\n * (name, size, type) is published as the `value` output. With a `FileUploaderHandlerProvider` in scope the files are sent through it and\n * marked uploading, done or failed; without one the component only collects. `actionPermission` gates choosing files.\n */\nexport function FileUploader({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const strings = readFoundationStrings(element);\n    const locale = readLocale(element);\n    const handler = useFileUploaderHandler();\n    const [entries, setEntries] = useState<Entry[]>([]);\n    const [problems, setProblems] = useState<string[]>([]);\n    const [dragging, setDragging] = useState(false);\n    const input = useRef<HTMLInputElement>(null);\n    const accept = readOptionalString(element, 'accept') ?? '';\n    const maximumBytes = (typeof element.properties.maxSizeMb === 'number' ? element.properties.maxSizeMb : 0) * 1024 * 1024;\n    const multiple = element.properties.multiple !== false;\n    const rule = readPermissionRule(element, 'actionPermission');\n    const state = readComponentState(element, true);\n    const serverUrl = readOptionalString(element, 'serverUrl');\n\n    useValueOutput(bindingOutputs, entries.map(entry => ({ name: entry.file.name, size: entry.file.size, type: entry.file.type, status: entry.status })));\n\n    const send = async (files: File[]) => {\n        if (!handler) return;\n        const mark = (status: UploadStatus) => setEntries(current => current.map(entry => (files.includes(entry.file) ? { ...entry, status } : entry)));\n        mark(UploadStatus.Uploading);\n        try {\n            await handler(files, serverUrl);\n            mark(UploadStatus.Done);\n        } catch {\n            mark(UploadStatus.Failed);\n        }\n    };\n\n    const take = (chosen: File[]) => {\n        const { accepted, refused } = checkSelection(chosen, { accept, maximumBytes, multiple }, entries.length);\n        setProblems(refused.map(({ file, reason }) => reason === UploadRefusal.WrongType ? formatText(strings.uploadWrongType, { name: file.name })\n            : reason === UploadRefusal.TooLarge ? formatText(strings.uploadTooLarge, { name: file.name, limit: formatBytes(maximumBytes, locale) }) : strings.uploadSingle));\n        if (accepted.length === 0) return;\n\n        setEntries(current => [...current, ...accepted.map(file => ({ file, status: UploadStatus.Queued }))]);\n        interactions?.onChange?.();\n        void send(accepted);\n    };\n\n    const choose = (event: ChangeEvent<HTMLInputElement>) => {\n        take(Array.from(event.target.files ?? []));\n        event.target.value = '';\n    };\n    const drop = (event: DragEvent) => {\n        event.preventDefault();\n        setDragging(false);\n        if (rule === 'enabled') take(Array.from(event.dataTransfer.files));\n    };\n    const statusText: Record<UploadStatus, string> = {\n        queued: strings.uploadQueued, uploading: strings.uploadUploading, done: strings.uploadDone, failed: strings.uploadFailed,\n    };\n    const limits = [accept ? formatText(strings.uploadAccepts, { types: accept }) : '', maximumBytes > 0 ? formatText(strings.uploadLimits, { limit: formatBytes(maximumBytes, locale) }) : ''].filter(Boolean).join(' · ');\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='file-uploader' state={state} skeleton={[100, 40]}>\n            {state !== ComponentState.Loading && (\n                <>\n                    <div className='foundation-dropzone' data-dragging={dragging} onDragOver={event => { event.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={drop}>\n                        <FoundationIcon name='upload' />\n                        <span>{strings.uploadDrop}</span>\n                        <input ref={input} className='foundation-visually-hidden' type='file' tabIndex={-1} accept={accept || undefined} multiple={multiple} disabled={rule !== 'enabled'} onChange={choose} aria-hidden='true' />\n                        <ActionButton rule={rule} emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => input.current?.click()}>\n                            {strings.uploadBrowse}\n                        </ActionButton>\n                        {limits && <span className='foundation-count'>{limits}</span>}\n                    </div>\n                    <div aria-live='polite' className='foundation-upload-problems'>\n                        {problems.map(problem => <p key={problem} className='foundation-message-text' data-tone='danger'>{problem}</p>)}\n                    </div>\n                    {entries.length > 0 && (\n                        <ul className='foundation-upload-list' aria-label={strings.uploadSelected}>\n                            {entries.map((entry, index) => (\n                                <li key={entry.file.name + index} className='foundation-upload-item' data-status={entry.status}>\n                                    <FoundationIcon name='file' />\n                                    <span className='foundation-upload-name'>{entry.file.name}</span>\n                                    <span className='foundation-count'>{formatBytes(entry.file.size, locale)}</span>\n                                    <span className='foundation-upload-status'>{statusText[entry.status]}</span>\n                                    {entry.status === UploadStatus.Failed && <button type='button' className='foundation-link' onClick={() => void send([entry.file])}>{strings.retry}</button>}\n                                    <button type='button' className='foundation-icon-button' aria-label={formatText(strings.uploadRemove, { name: entry.file.name })}\n                                        onClick={() => { setEntries(current => current.filter(existing => existing !== entry)); interactions?.onChange?.(); }}>\n                                        <FoundationIcon name='close' />\n                                    </button>\n                                </li>\n                            ))}\n                        </ul>\n                    )}\n                </>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["FileUploader","element","interactions","bindingOutputs","strings","readFoundationStrings","locale","readLocale","handler","useFileUploaderHandler","entries","setEntries","useState","problems","setProblems","dragging","setDragging","input","useRef","accept","readOptionalString","maximumBytes","properties","maxSizeMb","multiple","rule","readPermissionRule","state","readComponentState","serverUrl","useValueOutput","map","entry","name","file","size","type","status","send","files","mark","current","includes","UploadStatus","Uploading","Done","Failed","take","chosen","accepted","refused","checkSelection","length","reason","UploadRefusal","WrongType","formatText","uploadWrongType","TooLarge","uploadTooLarge","limit","formatBytes","uploadSingle","Queued","onChange","choose","event","Array","from","target","value","drop","preventDefault","dataTransfer","statusText","queued","uploadQueued","uploading","uploadUploading","done","uploadDone","failed","uploadFailed","limits","uploadAccepts","types","uploadLimits","filter","Boolean","join","_jsx","FoundationFrame","skeleton","ComponentState","Loading","_jsxs","_Fragment","div","className","data-dragging","onDragOver","onDragLeave","onDrop","FoundationIcon","span","uploadDrop","ref","tabIndex","undefined","disabled","aria-hidden","ActionButton","emphasis","disabledReason","disabledNoPermission","onClick","click","uploadBrowse","aria-live","problem","p","data-tone","ul","aria-label","uploadSelected","index","li","data-status","button","retry","uploadRemove","existing"],"mappings":"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"}

package/dist/cjs/foundation/FileUploaderHandler.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Context = /*#__PURE__*/ react.createContext(undefined);
+/** Provides the upload handler to the file uploaders below it. */ function FileUploaderHandlerProvider({ handler, children }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(Context.Provider, {
+        value: handler,
+        children: children
+    });
+}
+/** The handler in scope, if any. */ const useFileUploaderHandler = ()=>react.useContext(Context);
+
+exports.FileUploaderHandlerProvider = FileUploaderHandlerProvider;
+exports.useFileUploaderHandler = useFileUploaderHandler;
+//# sourceMappingURL=FileUploaderHandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploaderHandler.js","sources":["../../../foundation/FileUploaderHandler.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 { ReactNode, createContext, useContext } from 'react';\n\n/**\n * What sends the accepted files somewhere: a host's server client, kept out of the portable package.\n *\n * The signature is the one `@cratis/scene.primereact` uses for its `fileUpload`, so a host hands the same function to both. A handler that\n * rejects marks the files as failed, with a retry; without a handler the uploader only collects and publishes the selection.\n */\nexport type FileUploaderHandler = (files: File[], serverUrl?: string) => Promise<void>;\n\nconst Context = createContext<FileUploaderHandler | undefined>(undefined);\n\n/** Provides the upload handler to the file uploaders below it. */\nexport function FileUploaderHandlerProvider({ handler, children }: { handler?: FileUploaderHandler; children: ReactNode }) {\n    return <Context.Provider value={handler}>{children}</Context.Provider>;\n}\n\n/** The handler in scope, if any. */\nexport const useFileUploaderHandler = (): FileUploaderHandler | undefined => useContext(Context);\n"],"names":["Context","createContext","undefined","FileUploaderHandlerProvider","handler","children","_jsx","Provider","value","useFileUploaderHandler","useContext"],"mappings":";;;;;AAaA,MAAMA,wBAAUC,mBAAAA,CAA+CC,SAAAA,CAAAA;AAE/D,mEACO,SAASC,2BAAAA,CAA4B,EAAEC,OAAO,EAAEC,QAAQ,EAA0D,EAAA;IACrH,qBAAOC,cAAA,CAACN,QAAQO,QAAQ,EAAA;QAACC,KAAAA,EAAOJ,OAAAA;AAAUC,QAAAA,QAAAA,EAAAA;;AAC9C;AAEA,qCACO,MAAMI,sBAAAA,GAAyB,IAAuCC,iBAAWV,OAAAA;;;"}