@cratis/scene.blueprint.default 4.31.0 → 4.33.0

package/dist/esm/foundation/ColumnChooser.js

@@ -0,0 +1,154 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useId, useRef, useEffect } from 'react';
+import { useValueOutput } from '@cratis/scene.react';
+import { readColumns, visibleColumnIds, toggleColumn, moveColumn } from './columnModel.js';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { FoundationIcon } from './FoundationIcon.js';
+import { readFoundationStrings, formatText } from './foundationStrings.js';
+import { FoundationFrame } from './StateFrame.js';
+
+/**
+ * The `columnChooser` component: which columns a table shows, and in what order.
+ *
+ * `columns` lists what could be shown (id, label, whether it starts visible, and whether it is locked - the identifying column is). The
+ * chooser is a button that discloses a list of checkboxes; each row also has move up and move down buttons, so ordering needs no
+ * drag-and-drop. Its `value` output is the ordered list of visible ids, which the table binds its columns to. Escape closes the list and
+ * returns focus to the button.
+ */ function ColumnChooser({ element, interactions, bindingOutputs }) {
+    const supplied = useMemo(()=>readColumns(element.properties.columns), [
+        element.properties.columns
+    ]);
+    const suppliedKey = JSON.stringify(supplied);
+    const [columns, setColumns] = useState(supplied);
+    const [open, setOpen] = useState(false);
+    const strings = readFoundationStrings(element);
+    const state = readComponentState(element, supplied.length > 0);
+    const panelId = useId();
+    const button = useRef(null);
+    useEffect(()=>setColumns(supplied), [
+        suppliedKey
+    ]);
+    useValueOutput(bindingOutputs, visibleColumnIds(columns));
+    const apply = (next)=>{
+        setColumns(next);
+        interactions?.onChange?.();
+    };
+    const close = (event)=>{
+        if (event.key !== 'Escape' || !open) return;
+        setOpen(false);
+        button.current?.focus();
+    };
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "column-chooser",
+        state: state,
+        skeleton: [
+            50
+        ],
+        children: state !== ComponentState.Loading && /*#__PURE__*/ jsxs("div", {
+            className: "foundation-popover-host",
+            onKeyDown: close,
+            children: [
+                /*#__PURE__*/ jsxs("button", {
+                    ref: button,
+                    type: "button",
+                    className: "foundation-button",
+                    "data-emphasis": "secondary",
+                    "aria-expanded": open,
+                    "aria-controls": panelId,
+                    onClick: ()=>setOpen(!open),
+                    children: [
+                        /*#__PURE__*/ jsx(FoundationIcon, {
+                            name: "columns"
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: strings.columnsChoose
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: "foundation-count",
+                            children: formatText(strings.columnsShown, {
+                                shown: visibleColumnIds(columns).length,
+                                total: columns.length
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    id: panelId,
+                    className: "foundation-popover",
+                    hidden: !open,
+                    children: [
+                        /*#__PURE__*/ jsx("ul", {
+                            className: "foundation-list",
+                            "aria-label": strings.columnsChoose,
+                            children: columns.map((column, index)=>/*#__PURE__*/ jsxs("li", {
+                                    className: "foundation-list-row",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("label", {
+                                            className: "foundation-check",
+                                            children: [
+                                                /*#__PURE__*/ jsx("input", {
+                                                    type: "checkbox",
+                                                    checked: column.visible,
+                                                    disabled: column.locked,
+                                                    onChange: ()=>apply(toggleColumn(columns, index))
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    children: column.label
+                                                }),
+                                                column.locked && /*#__PURE__*/ jsxs("span", {
+                                                    className: "foundation-count",
+                                                    children: [
+                                                        "(",
+                                                        strings.columnsLocked,
+                                                        ")"
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            className: "foundation-icon-button",
+                                            disabled: index === 0,
+                                            "aria-label": formatText(strings.columnsMoveUp, {
+                                                name: column.label
+                                            }),
+                                            onClick: ()=>apply(moveColumn(columns, index, -1)),
+                                            children: /*#__PURE__*/ jsx(FoundationIcon, {
+                                                name: "arrow-up"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            className: "foundation-icon-button",
+                                            disabled: index === columns.length - 1,
+                                            "aria-label": formatText(strings.columnsMoveDown, {
+                                                name: column.label
+                                            }),
+                                            onClick: ()=>apply(moveColumn(columns, index, 1)),
+                                            children: /*#__PURE__*/ jsx(FoundationIcon, {
+                                                name: "arrow-down"
+                                            })
+                                        })
+                                    ]
+                                }, column.id))
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "foundation-link",
+                            onClick: ()=>apply(columns.map((column)=>({
+                                        ...column,
+                                        visible: true
+                                    }))),
+                            children: strings.columnsReset
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+export { ColumnChooser };
+//# sourceMappingURL=ColumnChooser.js.map

package/dist/esm/foundation/ColumnChooser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnChooser.js","sources":["../../../foundation/ColumnChooser.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, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { ChooserColumn, moveColumn, readColumns, toggleColumn, visibleColumnIds } from './columnModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationIcon } from './FoundationIcon';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\n\n/**\n * The `columnChooser` component: which columns a table shows, and in what order.\n *\n * `columns` lists what could be shown (id, label, whether it starts visible, and whether it is locked - the identifying column is). The\n * chooser is a button that discloses a list of checkboxes; each row also has move up and move down buttons, so ordering needs no\n * drag-and-drop. Its `value` output is the ordered list of visible ids, which the table binds its columns to. Escape closes the list and\n * returns focus to the button.\n */\nexport function ColumnChooser({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const supplied = useMemo(() => readColumns(element.properties.columns), [element.properties.columns]);\n    const suppliedKey = JSON.stringify(supplied);\n    const [columns, setColumns] = useState<ChooserColumn[]>(supplied);\n    const [open, setOpen] = useState(false);\n    const strings = readFoundationStrings(element);\n    const state = readComponentState(element, supplied.length > 0);\n    const panelId = useId();\n    const button = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => setColumns(supplied), [suppliedKey]);\n    useValueOutput(bindingOutputs, visibleColumnIds(columns));\n\n    const apply = (next: ChooserColumn[]) => { setColumns(next); interactions?.onChange?.(); };\n    const close = (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || !open) return;\n        setOpen(false);\n        button.current?.focus();\n    };\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='column-chooser' state={state} skeleton={[50]}>\n            {state !== ComponentState.Loading && (\n                <div className='foundation-popover-host' onKeyDown={close}>\n                    <button ref={button} type='button' className='foundation-button' data-emphasis='secondary' aria-expanded={open} aria-controls={panelId} onClick={() => setOpen(!open)}>\n                        <FoundationIcon name='columns' />\n                        <span>{strings.columnsChoose}</span>\n                        <span className='foundation-count'>{formatText(strings.columnsShown, { shown: visibleColumnIds(columns).length, total: columns.length })}</span>\n                    </button>\n                    <div id={panelId} className='foundation-popover' hidden={!open}>\n                        <ul className='foundation-list' aria-label={strings.columnsChoose}>\n                            {columns.map((column, index) => (\n                                <li key={column.id} className='foundation-list-row'>\n                                    <label className='foundation-check'>\n                                        <input type='checkbox' checked={column.visible} disabled={column.locked} onChange={() => apply(toggleColumn(columns, index))} />\n                                        <span>{column.label}</span>\n                                        {column.locked && <span className='foundation-count'>({strings.columnsLocked})</span>}\n                                    </label>\n                                    <button type='button' className='foundation-icon-button' disabled={index === 0} aria-label={formatText(strings.columnsMoveUp, { name: column.label })} onClick={() => apply(moveColumn(columns, index, -1))}>\n                                        <FoundationIcon name='arrow-up' />\n                                    </button>\n                                    <button type='button' className='foundation-icon-button' disabled={index === columns.length - 1} aria-label={formatText(strings.columnsMoveDown, { name: column.label })} onClick={() => apply(moveColumn(columns, index, 1))}>\n                                        <FoundationIcon name='arrow-down' />\n                                    </button>\n                                </li>\n                            ))}\n                        </ul>\n                        <button type='button' className='foundation-link' onClick={() => apply(columns.map(column => ({ ...column, visible: true })))}>{strings.columnsReset}</button>\n                    </div>\n                </div>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["ColumnChooser","element","interactions","bindingOutputs","supplied","useMemo","readColumns","properties","columns","suppliedKey","JSON","stringify","setColumns","useState","open","setOpen","strings","readFoundationStrings","state","readComponentState","length","panelId","useId","button","useRef","useEffect","useValueOutput","visibleColumnIds","apply","next","onChange","close","event","key","current","focus","_jsx","FoundationFrame","name","skeleton","ComponentState","Loading","_jsxs","div","className","onKeyDown","ref","type","data-emphasis","aria-expanded","aria-controls","onClick","FoundationIcon","span","columnsChoose","formatText","columnsShown","shown","total","id","hidden","ul","aria-label","map","column","index","li","label","input","checked","visible","disabled","locked","toggleColumn","columnsLocked","columnsMoveUp","moveColumn","columnsMoveDown","columnsReset"],"mappings":"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"}

package/dist/esm/foundation/ComponentState.d.ts

@@ -0,0 +1,12 @@
+import { ExternalComponent } from '@cratis/scene.model';
+export declare enum ComponentState {
+    Ready = "ready",
+    Loading = "loading",
+    Empty = "empty",
+    Error = "error",
+    NoPermission = "noPermission",
+    Partial = "partial"
+}
+export declare const componentStates: readonly ComponentState[];
+export declare function readComponentState(element: ExternalComponent, hasData: boolean): ComponentState;
+//# sourceMappingURL=ComponentState.d.ts.map

package/dist/esm/foundation/ComponentState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentState.d.ts","sourceRoot":"","sources":["../../../foundation/ComponentState.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAQxD,oBAAY,cAAc;IAEtB,KAAK,UAAU;IAGf,OAAO,YAAY;IAGnB,KAAK,UAAU;IAGf,KAAK,UAAU;IAGf,YAAY,iBAAiB;IAG7B,OAAO,YAAY;CACtB;AAGD,eAAO,MAAM,eAAe,EAAE,SAAS,cAAc,EAAkC,CAAC;AAYxF,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,GAAG,cAAc,CAQ/F"}

package/dist/esm/foundation/ComponentState.js

@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The visual states every data-showing foundation component defines (spec Part B 1.4).
+ *
+ * A template is only worth choosing if it looks right in all of them: an application spends real time loading, empty, failing
+ * and not allowed, and a component that only draws its populated self has not been finished.
+ */ var ComponentState = /*#__PURE__*/ function(ComponentState) {
+    /** The data is there and drawn. */ ComponentState["Ready"] = "ready";
+    /** The data has not answered yet: a skeleton in the shape of the content, never a spinner alone. */ ComponentState["Loading"] = "loading";
+    /** The data answered with nothing: an explanation and the primary action. */ ComponentState["Empty"] = "empty";
+    /** The data could not be loaded: a message and a retry. */ ComponentState["Error"] = "error";
+    /** The user may not see the data: what is missing, and nothing of the data. */ ComponentState["NoPermission"] = "noPermission";
+    /** Some regions loaded and some failed: what loaded, plus which parts did not. */ ComponentState["Partial"] = "partial";
+    return ComponentState;
+}({});
+/** Every state, in the order a preview or a story lists them. */ const componentStates = Object.values(ComponentState);
+/**
+ * Reads the state a component is in from its properties.
+ *
+ * An explicit `state` property wins, which is how a preview forces a state. Otherwise the state follows the properties a bound
+ * query already publishes - the same `loading` and `error` the preview states use for tables - plus `forbidden` and
+ * `failedRegions`, and falls to Empty when the component has nothing to show.
+ *
+ * @param element The element being rendered.
+ * @param hasData Whether the component has anything to draw when it is ready.
+ */ function readComponentState(element, hasData) {
+    const { state, forbidden, error, loading, failedRegions } = element.properties;
+    if (typeof state === 'string' && componentStates.includes(state)) return state;
+    if (forbidden === true) return "noPermission";
+    if (typeof error === 'string' && error.length > 0) return "error";
+    if (loading === true) return "loading";
+    if (Array.isArray(failedRegions) && failedRegions.length > 0) return "partial";
+    return hasData ? "ready" : "empty";
+}
+
+export { ComponentState, componentStates, readComponentState };
+//# sourceMappingURL=ComponentState.js.map

package/dist/esm/foundation/ComponentState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentState.js","sources":["../../../foundation/ComponentState.ts"],"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 { ExternalComponent } from '@cratis/scene.model';\n\n/**\n * The visual states every data-showing foundation component defines (spec Part B 1.4).\n *\n * A template is only worth choosing if it looks right in all of them: an application spends real time loading, empty, failing\n * and not allowed, and a component that only draws its populated self has not been finished.\n */\nexport enum ComponentState {\n    /** The data is there and drawn. */\n    Ready = 'ready',\n\n    /** The data has not answered yet: a skeleton in the shape of the content, never a spinner alone. */\n    Loading = 'loading',\n\n    /** The data answered with nothing: an explanation and the primary action. */\n    Empty = 'empty',\n\n    /** The data could not be loaded: a message and a retry. */\n    Error = 'error',\n\n    /** The user may not see the data: what is missing, and nothing of the data. */\n    NoPermission = 'noPermission',\n\n    /** Some regions loaded and some failed: what loaded, plus which parts did not. */\n    Partial = 'partial',\n}\n\n/** Every state, in the order a preview or a story lists them. */\nexport const componentStates: readonly ComponentState[] = Object.values(ComponentState);\n\n/**\n * Reads the state a component is in from its properties.\n *\n * An explicit `state` property wins, which is how a preview forces a state. Otherwise the state follows the properties a bound\n * query already publishes - the same `loading` and `error` the preview states use for tables - plus `forbidden` and\n * `failedRegions`, and falls to Empty when the component has nothing to show.\n *\n * @param element The element being rendered.\n * @param hasData Whether the component has anything to draw when it is ready.\n */\nexport function readComponentState(element: ExternalComponent, hasData: boolean): ComponentState {\n    const { state, forbidden, error, loading, failedRegions } = element.properties;\n    if (typeof state === 'string' && (componentStates as readonly string[]).includes(state)) return state as ComponentState;\n    if (forbidden === true) return ComponentState.NoPermission;\n    if (typeof error === 'string' && error.length > 0) return ComponentState.Error;\n    if (loading === true) return ComponentState.Loading;\n    if (Array.isArray(failedRegions) && failedRegions.length > 0) return ComponentState.Partial;\n    return hasData ? ComponentState.Ready : ComponentState.Empty;\n}\n"],"names":["ComponentState","componentStates","Object","values","readComponentState","element","hasData","state","forbidden","error","loading","failedRegions","properties","includes","length","Array","isArray"],"mappings":"AAAA;AACA;AAIA;;;;;IAMO,IAAKA,cAAAA,iBAAAA,SAAAA,cAAAA,EAAAA;wCACyB,cAAA,CAAA,OAAA,CAAA,GAAA,OAAA;yGAGiE,cAAA,CAAA,SAAA,CAAA,GAAA,SAAA;kFAGvB,cAAA,CAAA,OAAA,CAAA,GAAA,OAAA;gEAGlB,cAAA,CAAA,OAAA,CAAA,GAAA,OAAA;oFAGoB,cAAA,CAAA,cAAA,CAAA,GAAA,cAAA;uFAGG,cAAA,CAAA,SAAA,CAAA,GAAA,SAAA;AAhBxEA,IAAAA,OAAAA,cAAAA;AAkBX,CAAA,CAAA,EAAA;AAED,kEACO,MAAMC,kBAA6CC,MAAAA,CAAOC,MAAM,CAACH,cAAAA;AAExE;;;;;;;;;AASC,IACM,SAASI,kBAAAA,CAAmBC,OAA0B,EAAEC,OAAgB,EAAA;AAC3E,IAAA,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGN,QAAQO,UAAU;IAC9E,IAAI,OAAOL,UAAU,QAAA,IAAaN,gBAAsCY,QAAQ,CAACN,QAAQ,OAAOA,KAAAA;AAChG,IAAA,IAAIC,cAAc,IAAA,EAAM,OAAA,cAAA;AACxB,IAAA,IAAI,OAAOC,KAAAA,KAAU,QAAA,IAAYA,KAAAA,CAAMK,MAAM,GAAG,CAAA,EAAG,OAAA,OAAA;AACnD,IAAA,IAAIJ,YAAY,IAAA,EAAM,OAAA,SAAA;AACtB,IAAA,IAAIK,MAAMC,OAAO,CAACL,kBAAkBA,aAAAA,CAAcG,MAAM,GAAG,CAAA,EAAG,OAAA,SAAA;IAC9D,OAAOR,OAAAA,GAAAA,OAAAA,GAAAA,OAAAA;AACX;;"}

package/dist/esm/foundation/EmptyState.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function EmptyState({ element, interactions }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/esm/foundation/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../foundation/EmptyState.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAY/D,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,wBAAwB,+BAM7E"}

package/dist/esm/foundation/EmptyState.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { EmptyStateView } from './StateFrame.js';
+import { readFoundationStrings } from './foundationStrings.js';
+import { readLocale } from './formatting.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The empty state as a component of its own: an icon, a headline, a hint and one primary action, embeddable in any region.
+ *
+ * Every other foundation component shows this same view when it has no data, so a screen reads the same wherever nothing is
+ * found. Placed on its own it is what a template puts in a region that has nothing to say yet. The action starts whatever the
+ * element's behaviors say, and honours the `actionPermission` rule, so an empty list never offers a creation the user may not do.
+ */ function EmptyState({ element, interactions }) {
+    return /*#__PURE__*/ jsx("section", {
+        className: "foundation foundation-empty-state",
+        "data-scene-id": element.id,
+        "data-state": "empty",
+        lang: readLocale(element),
+        children: /*#__PURE__*/ jsx(EmptyStateView, {
+            element: element,
+            interactions: interactions,
+            strings: readFoundationStrings(element)
+        })
+    });
+}
+
+export { EmptyState };
+//# sourceMappingURL=EmptyState.js.map

package/dist/esm/foundation/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../../foundation/EmptyState.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 { EmptyStateView } from './StateFrame';\nimport { readFoundationStrings } from './foundationStrings';\nimport { readLocale } from './formatting';\n\n/**\n * The empty state as a component of its own: an icon, a headline, a hint and one primary action, embeddable in any region.\n *\n * Every other foundation component shows this same view when it has no data, so a screen reads the same wherever nothing is\n * found. Placed on its own it is what a template puts in a region that has nothing to say yet. The action starts whatever the\n * element's behaviors say, and honours the `actionPermission` rule, so an empty list never offers a creation the user may not do.\n */\nexport function EmptyState({ element, interactions }: RegisteredComponentProps) {\n    return (\n        <section className='foundation foundation-empty-state' data-scene-id={element.id} data-state='empty' lang={readLocale(element)}>\n            <EmptyStateView element={element} interactions={interactions} strings={readFoundationStrings(element)} />\n        </section>\n    );\n}\n"],"names":["EmptyState","element","interactions","_jsx","section","className","data-scene-id","id","data-state","lang","readLocale","EmptyStateView","strings","readFoundationStrings"],"mappings":";;;;;AAAA;AACA;AAOA;;;;;;AAMC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,YAAY,EAA4B,EAAA;AAC1E,IAAA,qBACIC,GAAA,CAACC,SAAAA,EAAAA;QAAQC,SAAAA,EAAU,mCAAA;AAAoCC,QAAAA,eAAAA,EAAeL,QAAQM,EAAE;QAAEC,YAAAA,EAAW,OAAA;AAAQC,QAAAA,IAAAA,EAAMC,UAAAA,CAAWT,OAAAA,CAAAA;AAClH,QAAA,QAAA,gBAAAE,GAAA,CAACQ,cAAAA,EAAAA;YAAeV,OAAAA,EAASA,OAAAA;YAASC,YAAAA,EAAcA,YAAAA;AAAcU,YAAAA,OAAAA,EAASC,qBAAAA,CAAsBZ,OAAAA;;;AAGzG;;"}

package/dist/esm/foundation/FilterBuilder.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function FilterBuilder({ element, interactions, bindingOutputs }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=FilterBuilder.d.ts.map

package/dist/esm/foundation/FilterBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilder.d.ts","sourceRoot":"","sources":["../../../foundation/FilterBuilder.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAkB,MAAM,qBAAqB,CAAC;AA2G/E,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,wBAAwB,+BAgChG"}

package/dist/esm/foundation/FilterBuilder.js

@@ -0,0 +1,305 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect } from 'react';
+import { useValueOutput } from '@cratis/scene.react';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { ActionButton } from './ActionButton.js';
+import { readFilterFields, normalizeFilter, countActiveConditions, emptyFilter, filterOperators, FilterFieldType, newCondition, maximumFilterDepth, updateGroupAt, valuelessOperators } from './filterModel.js';
+import { readFoundationStrings, formatText } from './foundationStrings.js';
+import { FoundationFrame } from './StateFrame.js';
+import { readPermissionRule } from './PermissionRule.js';
+
+const operatorText = (strings, operator)=>{
+    const names = {
+        contains: strings.opContains,
+        equals: strings.opEquals,
+        notEquals: strings.opNotEquals,
+        startsWith: strings.opStartsWith,
+        isEmpty: strings.opIsEmpty,
+        greater: strings.opGreater,
+        greaterOrEqual: strings.opGreaterOrEqual,
+        less: strings.opLess,
+        lessOrEqual: strings.opLessOrEqual,
+        before: strings.opBefore,
+        after: strings.opAfter,
+        on: strings.opOn,
+        is: strings.opIs,
+        isNot: strings.opIsNot,
+        true: strings.opTrue,
+        false: strings.opFalse
+    };
+    return names[operator] ?? operator;
+};
+function ValueInput({ field, condition, strings, label, disabled, onChange }) {
+    if (valuelessOperators.includes(condition.operator)) return undefined;
+    if (field?.type === FilterFieldType.Select) {
+        return /*#__PURE__*/ jsxs("select", {
+            "aria-label": `${strings.filterValue}, ${label}`,
+            value: condition.value,
+            disabled: disabled,
+            onChange: (event)=>onChange(event.target.value),
+            children: [
+                /*#__PURE__*/ jsx("option", {
+                    value: "",
+                    children: "—"
+                }),
+                field.options.map((option)=>/*#__PURE__*/ jsx("option", {
+                        value: option,
+                        children: option
+                    }, option))
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsx("input", {
+        "aria-label": `${strings.filterValue}, ${label}`,
+        type: field?.type === FilterFieldType.Number ? 'number' : field?.type === FilterFieldType.Date ? 'date' : 'text',
+        value: condition.value,
+        disabled: disabled,
+        onChange: (event)=>onChange(event.target.value)
+    });
+}
+function GroupEditor({ group, path, fields, strings, locked, change }) {
+    const label = path.length === 0 ? strings.filterMatchAll.replace(/ \(.*\)$/, '') : formatText(strings.filterGroup, {
+        n: path.join('.')
+    });
+    const depth = path.length + 1;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "foundation-filter-group",
+        role: "group",
+        "aria-label": path.length === 0 ? formatText(countActiveConditions(group) === 1 ? strings.filterSummaryOne : strings.filterSummary, {
+            count: countActiveConditions(group)
+        }) : label,
+        "data-depth": depth,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "foundation-filter-match",
+                children: [
+                    /*#__PURE__*/ jsxs("select", {
+                        "aria-label": strings.filterMatchAll,
+                        value: group.operator,
+                        disabled: locked,
+                        onChange: (event)=>change(path, (current)=>({
+                                    ...current,
+                                    operator: event.target.value === 'or' ? 'or' : 'and'
+                                })),
+                        children: [
+                            /*#__PURE__*/ jsx("option", {
+                                value: "and",
+                                children: strings.filterMatchAll
+                            }),
+                            /*#__PURE__*/ jsx("option", {
+                                value: "or",
+                                children: strings.filterMatchAny
+                            })
+                        ]
+                    }),
+                    path.length > 0 && !locked && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "foundation-link",
+                        onClick: ()=>change(path.slice(0, -1), (parent)=>({
+                                    ...parent,
+                                    groups: parent.groups.filter((_, index)=>index !== path[path.length - 1])
+                                })),
+                        children: strings.filterRemoveGroup
+                    })
+                ]
+            }),
+            group.conditions.map((condition, index)=>{
+                const field = fields.find((candidate)=>candidate.name === condition.field);
+                const conditionLabel = formatText(strings.filterCondition, {
+                    n: index + 1
+                });
+                return /*#__PURE__*/ jsxs("div", {
+                    className: "foundation-filter-row",
+                    role: "group",
+                    "aria-label": conditionLabel,
+                    children: [
+                        /*#__PURE__*/ jsx("select", {
+                            "aria-label": `${strings.filterField}, ${conditionLabel}`,
+                            value: condition.field,
+                            disabled: locked,
+                            onChange: (event)=>{
+                                const next = fields.find((candidate)=>candidate.name === event.target.value);
+                                change(path, (current)=>({
+                                        ...current,
+                                        conditions: current.conditions.map((existing, position)=>position === index ? {
+                                                field: event.target.value,
+                                                operator: next ? filterOperators[next.type][0] : existing.operator,
+                                                value: ''
+                                            } : existing)
+                                    }));
+                            },
+                            children: fields.map((candidate)=>/*#__PURE__*/ jsx("option", {
+                                    value: candidate.name,
+                                    children: candidate.label
+                                }, candidate.name))
+                        }),
+                        /*#__PURE__*/ jsx("select", {
+                            "aria-label": `${strings.filterOperator}, ${conditionLabel}`,
+                            value: condition.operator,
+                            disabled: locked,
+                            onChange: (event)=>change(path, (current)=>({
+                                        ...current,
+                                        conditions: current.conditions.map((existing, position)=>position === index ? {
+                                                ...existing,
+                                                operator: event.target.value
+                                            } : existing)
+                                    })),
+                            children: filterOperators[field?.type ?? FilterFieldType.Text].map((operator)=>/*#__PURE__*/ jsx("option", {
+                                    value: operator,
+                                    children: operatorText(strings, operator)
+                                }, operator))
+                        }),
+                        /*#__PURE__*/ jsx(ValueInput, {
+                            field: field,
+                            condition: condition,
+                            strings: strings,
+                            label: conditionLabel,
+                            disabled: locked,
+                            onChange: (value)=>change(path, (current)=>({
+                                        ...current,
+                                        conditions: current.conditions.map((existing, position)=>position === index ? {
+                                                ...existing,
+                                                value
+                                            } : existing)
+                                    }))
+                        }),
+                        !locked && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "foundation-icon-button",
+                            "aria-label": `${strings.filterRemove}, ${conditionLabel}`,
+                            onClick: ()=>change(path, (current)=>({
+                                        ...current,
+                                        conditions: current.conditions.filter((_, position)=>position !== index)
+                                    })),
+                            children: "×"
+                        })
+                    ]
+                }, index);
+            }),
+            group.groups.map((nested, index)=>/*#__PURE__*/ jsx(GroupEditor, {
+                    group: nested,
+                    path: [
+                        ...path,
+                        index
+                    ],
+                    fields: fields,
+                    strings: strings,
+                    locked: locked,
+                    change: change
+                }, index)),
+            !locked && /*#__PURE__*/ jsxs("div", {
+                className: "foundation-filter-actions",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "foundation-link",
+                        onClick: ()=>change(path, (current)=>({
+                                    ...current,
+                                    conditions: [
+                                        ...current.conditions,
+                                        newCondition(fields)
+                                    ]
+                                })),
+                        children: strings.filterAdd
+                    }),
+                    depth < maximumFilterDepth && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "foundation-link",
+                        onClick: ()=>change(path, (current)=>({
+                                    ...current,
+                                    groups: [
+                                        ...current.groups,
+                                        {
+                                            operator: 'and',
+                                            conditions: [
+                                                newCondition(fields)
+                                            ],
+                                            groups: []
+                                        }
+                                    ]
+                                })),
+                        children: strings.filterAddGroup
+                    })
+                ]
+            })
+        ]
+    });
+}
+/**
+ * The `filterBuilder` component: field, operator and value conditions joined by AND or OR, in groups that nest up to three deep.
+ *
+ * The filter is the component's `value` output - `{ operator, conditions, groups }` - which a list screen binds its query to; the
+ * component itself filters nothing. `fields` describe what can be filtered (name, label, type, and options for a select), and
+ * the operators on offer follow each field's type. A filter bound in through `value` is read back as the user left it: conditions on
+ * fields that no longer exist are dropped rather than shown broken. The component is the filter panel of a list on a desktop and
+ * the body of the filter dialog on a phone.
+ */ function FilterBuilder({ element, interactions, bindingOutputs }) {
+    const fields = useMemo(()=>readFilterFields(element.properties.fields), [
+        element.properties.fields
+    ]);
+    const supplied = useMemo(()=>normalizeFilter(element.properties.filter, fields), [
+        element.properties.filter,
+        fields
+    ]);
+    const [filter, setFilter] = useState(supplied);
+    const strings = readFoundationStrings(element);
+    const suppliedKey = JSON.stringify(supplied);
+    const state = readComponentState(element, fields.length > 0);
+    const locked = readPermissionRule(element, 'editPermission') !== 'enabled';
+    useEffect(()=>setFilter(supplied), [
+        suppliedKey
+    ]);
+    useValueOutput(bindingOutputs, filter);
+    const change = (path, apply)=>{
+        const next = updateGroupAt(filter, path, apply);
+        setFilter(next);
+        interactions?.onChange?.();
+    };
+    const active = countActiveConditions(filter);
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "filter-builder",
+        state: state,
+        skeleton: [
+            100,
+            100
+        ],
+        children: state !== ComponentState.Loading && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(GroupEditor, {
+                    group: filter,
+                    path: [],
+                    fields: fields,
+                    strings: strings,
+                    locked: locked,
+                    change: change
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "foundation-filter-footer",
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            className: "foundation-filter-summary",
+                            "aria-live": "polite",
+                            children: active === 1 ? strings.filterSummaryOne : formatText(strings.filterSummary, {
+                                count: active
+                            })
+                        }),
+                        active > 0 && !locked && /*#__PURE__*/ jsx(ActionButton, {
+                            emphasis: "quiet",
+                            disabledReason: strings.disabledNoPermission,
+                            onClick: ()=>{
+                                setFilter(emptyFilter());
+                                interactions?.onChange?.();
+                            },
+                            children: strings.filterClear
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+export { FilterBuilder };
+//# sourceMappingURL=FilterBuilder.js.map