xmlui 0.9.20 → 0.9.21

package/dist/xmlui.d.ts

@@ -434,7 +434,7 @@ export declare const Button: default_2.ForwardRefExoticComponent<{
     accessibilityProps?: any;
     autoFocus?: boolean;
     contextualLabel?: string;
-} & Pick<default_2.HTMLAttributes<HTMLButtonElement>, "className" | "onClick" | "aria-disabled" | "aria-label" | "aria-controls" | "aria-expanded" | "onFocus" | "onBlur" | "tabIndex" | "onMouseEnter" | "onMouseLeave"> & default_2.RefAttributes<HTMLButtonElement>>;
+} & Pick<default_2.HTMLAttributes<HTMLButtonElement>, "className" | "aria-disabled" | "aria-label" | "aria-controls" | "aria-expanded" | "onClick" | "onFocus" | "onBlur" | "tabIndex" | "onMouseEnter" | "onMouseLeave"> & default_2.RefAttributes<HTMLButtonElement>>;
 
 declare type ButtonThemeColor = (typeof buttonThemeValues)[number];
 

package/dist/xmlui.mjs

@@ -1,4 +1,4 @@
-import { A, B, E, I, i, h, S, b, k, l, c, e, f, j, p, s, t, n, q, v, u } from "./index-CbU44pSb.mjs";
+import { A, B, E, I, i, h, S, b, k, l, c, e, f, j, p, s, t, n, q, v, u } from "./index-B3CWFAxa.mjs";
 export {
   A as AppRoot,
   B as Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmlui",
-  "version": "0.9.20",
+  "version": "0.9.21",
   "sideEffects": false,
   "scripts": {
     "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -79,7 +79,7 @@
     "react-dropzone": "14.2.3",
     "react-helmet-async": "1.3.0",
     "react-hot-toast": "2.4.1",
-    "react-icons": "4.8.0",
+    "react-icons": "4.12.0",
     "react-imask": "7.1.3",
     "react-markdown": "^9.0.1",
     "react-measure": "2.5.2",

package/dist/scripts/src/components/Alert/Alert.js

@@ -1,61 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.alertComponentRenderer = exports.AlertMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Alert_module_scss_1 = __importDefault(require("./Alert.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const abstractions_1 = require("../../components/abstractions");
-const AlertNative_1 = require("./AlertNative");
-const COMP = "Alert";
-// See reference implementation here: https://getbootstrap.com/docs/5.3/components/alerts/
-exports.AlertMd = (0, ComponentDefs_1.createMetadata)({
-    status: "in progress",
-    description: `(**NOT IMPLEMENTED YET**) The \`${COMP}\` component is a panel used to display important ` +
-        `notifications or feedback to users. It helps convey different statuses or levels of urgency, ` +
-        `such as success, warning, error, and others.`,
-    props: {
-        statusColor: {
-            description: `The value of this optional property sets the string to provide a color scheme for the ${COMP}.`,
-            availableValues: abstractions_1.statusColorMd,
-            valueType: "string",
-            defaultValue: "primary",
-        },
-        dismissable: {
-            description: `This property's \`true\` value indicates if this alert is dismissable by the user. When the ` +
-                `user closes the ${COMP}, it gets hidden.`,
-            valueType: "boolean",
-            defaultValue: true,
-        },
-        autoDismissInMs: {
-            description: "Timeout for the alert to be dismissed",
-            valueType: "number",
-        },
-        showIcon: {
-            description: "Indicates if the alert should display an icon",
-            valueType: "boolean",
-            defaultValue: true,
-        },
-        icon: {
-            description: "Icon to be displayed in the alert",
-            valueType: "string",
-        },
-    },
-    events: {},
-    apis: {
-        dismiss: (0, ComponentDefs_1.d)(`This method dismisses the ${COMP}. It triggers the \`didDismiss\` event with the argument set ` +
-            `to \`false\`.`),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Alert_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        light: {},
-        dark: {},
-    },
-});
-exports.alertComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AlertMd, ({ layoutCss }) => {
-    return (0, jsx_runtime_1.jsx)(AlertNative_1.Alert, {});
-});

package/dist/scripts/src/components/Alert/AlertNative.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.Alert = (0, react_1.forwardRef)(function Alert({ style }, forwardedRef) {
-    return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, style: Object.assign({ backgroundColor: "orange", color: "white", padding: 2 }, style), children: "Alert component is not implemented yet" }));
-});

package/dist/scripts/src/components/ButtonGroup/ButtonGroup.js

@@ -1,55 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonGroupComponentRenderer = exports.ButtonGroupMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ButtonGroup_module_scss_1 = __importDefault(require("./ButtonGroup.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const abstractions_1 = require("../abstractions");
-const metadata_helpers_1 = require("../metadata-helpers");
-const ButtonGroupNative_1 = require("./ButtonGroupNative");
-const COMP = "ButtonGroup";
-// See reference implementation here: https://getbootstrap.com/docs/5.3/components/button-group/
-// Use the same techinque for borders and radius as the Accordion component.
-exports.ButtonGroupMd = (0, ComponentDefs_1.createMetadata)({
-    status: "in progress",
-    description: `(**NOT IMPLEMENTED YET**) The \`${COMP}\` component is a container that embeds buttons used ` +
-        `together for a particular reason. It provides a view that emphasizes this coherency.`,
-    props: {
-        themeColor: {
-            description: `This optional property specifies the default theme color for the buttons in the group. ` +
-                `Individual buttons may override this setting with their \`themeColor\` property.`,
-            availableValues: abstractions_1.buttonThemeMd,
-            valueType: "string",
-            defaultValue: "primary",
-        },
-        variant: {
-            description: `This optional property specifies the default variant for the buttons in the group. ` +
-                `Individual buttons may override this setting with their \`variant\` property.`,
-            availableValues: abstractions_1.buttonVariantMd,
-            valueType: "string",
-            defaultValue: "solid",
-        },
-        orientation: (0, metadata_helpers_1.dOrientation)("horizontal"),
-        buttonWidth: {
-            description: `When this optional property is set, all buttons within the group will have the ` +
-                `specified width. If it is empty, each button's width accommodates its content.`,
-        },
-        gap: {
-            description: `When this optional property is set, adjacent buttons will have the specified gap ` +
-                `between them. If this property is not set, the buttons will be merged into one group.`,
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(ButtonGroup_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        light: {},
-        dark: {},
-    },
-});
-exports.buttonGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ButtonGroupMd, ({}) => {
-    return (0, jsx_runtime_1.jsx)(ButtonGroupNative_1.ButtonGroup, {});
-});

package/dist/scripts/src/components/ButtonGroup/ButtonGroupNative.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.ButtonGroup = (0, react_1.forwardRef)(function ButtonGroup({}, forwardedRef) {
-    return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, style: { backgroundColor: "orangered", color: "white", padding: 2 }, children: "ButtonGroup component is not implemented yet" }));
-});

package/dist/scripts/src/components/OffCanvas/OffCanvas.js

@@ -1,57 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.offCanvasComponentRenderer = exports.OffCanvasMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const OffCanvas_module_scss_1 = __importDefault(require("./OffCanvas.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const abstractions_1 = require("../abstractions");
-const metadata_helpers_1 = require("../metadata-helpers");
-const OffCanvasNative_1 = require("./OffCanvasNative");
-const COMP = "OffCanvas";
-// See reference implementation here: https://getbootstrap.com/docs/5.3/components/alerts/
-exports.OffCanvasMd = (0, ComponentDefs_1.createMetadata)({
-    status: "in progress",
-    description: `(**NOT IMPLEMENTED YET**) The \`OffCanvas\` component is a hidden panel that slides into view ` +
-        `from the side of the screen. It helps display additional content or navigation without disrupting ` +
-        `the main interface.`,
-    props: {
-        title: (0, ComponentDefs_1.d)("This property sets the title of the component.", null, "string"),
-        isInitiallyOpen: (0, ComponentDefs_1.d)("This property indicates if the component is initially open.", null, "boolean", false),
-        enableBackdrop: (0, ComponentDefs_1.d)(`This property indicates if the backdrop is enabled when the component is displayed. When the ` +
-            `backdrop is not enabled, clicking outside \`OffCanvas\` will not close it.`, null, "boolean", true),
-        enableBodyScroll: (0, ComponentDefs_1.d)(`This property indicates if the body scroll is enabled when the component is displayed.`, null, "boolean", false),
-        noCloseOnBackdropClick: (0, ComponentDefs_1.d)(`When this property is set to \`true\`, the ${COMP} does not close when the user clicks on its backdrop.`, null, "boolean", false),
-        placement: (0, ComponentDefs_1.d)(`This property indicates the position where the ${COMP} should be docked to.`, abstractions_1.placementMd),
-        autoCloseInMs: (0, ComponentDefs_1.d)(`This property sets a timeout. When the timeout expires, the component gets hidden.`),
-    },
-    events: {
-        didOpen: (0, metadata_helpers_1.dDidOpen)(COMP),
-        didClose: (0, metadata_helpers_1.dDidClose)(COMP),
-    },
-    apis: {
-        open: (0, ComponentDefs_1.d)(`This method opens the component. It triggers the \`didOpen\` event  with the argument ` +
-            `set to \`false\`.`),
-        close: (0, ComponentDefs_1.d)(`This method closes the component. It triggers the \`didClose\` event with the argument ` +
-            `set to \`false\`.`),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(OffCanvas_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        "width-OffCanvas": "600px",
-        "padding-OffCanvas": "$padding-tight",
-        "paddingVertical-OffCanvas": "$padding-tight",
-        "paddingHorizontal-OffCanvas": "$padding-normal",
-        "backgroundColor-OffCanvas": "$backgroundColor",
-        "boxShadow-horizontal-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
-        "boxShadow-vertical-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
-        light: {},
-        dark: {},
-    },
-});
-exports.offCanvasComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OffCanvasMd, ({ node, extractValue, lookupEventHandler, renderChild, layoutCss }) => {
-    return ((0, jsx_runtime_1.jsx)(OffCanvasNative_1.OffCanvas, { style: layoutCss, title: extractValue(node.props.title), isInitiallyOpen: extractValue.asOptionalBoolean(node.props.isInitiallyOpen, false), placement: extractValue(node.props.placement), children: renderChild(node.children) }));
-});

package/dist/scripts/src/components/OffCanvas/OffCanvasNative.js

@@ -1,48 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OffCanvas = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const OffCanvas_module_scss_1 = __importDefault(require("./OffCanvas.module.scss"));
-const OffCanvas = ({ title, isInitiallyOpen, onClose, placement = "right", showCloseButton = true, children, allowScroll = true, showBackdrop = false, style, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(isInitiallyOpen);
-    const [place, setPlace] = (0, react_1.useState)(placement);
-    // Control body scrolling
-    (0, react_1.useEffect)(() => {
-        if (isOpen && !allowScroll) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "";
-        }
-        // Cleanup when unmounted or isOpen changes
-        return () => {
-            document.body.style.overflow = "";
-        };
-    }, [isOpen, allowScroll]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showBackdrop && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(OffCanvas_module_scss_1.default.overlay, {
-                    [OffCanvas_module_scss_1.default.overlayVisible]: isOpen,
-                }), onClick: onClose })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(OffCanvas_module_scss_1.default.offCanvas, {
-                    [OffCanvas_module_scss_1.default.open]: isOpen,
-                    [OffCanvas_module_scss_1.default.left]: place === "left",
-                    [OffCanvas_module_scss_1.default.right]: place === "right",
-                    [OffCanvas_module_scss_1.default.top]: place === "top",
-                    [OffCanvas_module_scss_1.default.bottom]: place === "bottom",
-                }), style: style, children: [(0, jsx_runtime_1.jsxs)("header", { className: OffCanvas_module_scss_1.default.offCanvasHeader, children: [!!title && (0, jsx_runtime_1.jsx)("span", { className: OffCanvas_module_scss_1.default.offCanvasTitle, children: title }), (0, jsx_runtime_1.jsx)("div", { className: OffCanvas_module_scss_1.default.spacer }), showCloseButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [place !== "left" && ((0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
-                                            setPlace("left");
-                                        }, children: "\u2190" })), place !== "right" && ((0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
-                                            setPlace("right");
-                                        }, children: "\u2192" })), place !== "top" && ((0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
-                                            setPlace("top");
-                                        }, children: "\u2191" })), place !== "bottom" && ((0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
-                                            setPlace("bottom");
-                                        }, children: "\u2193" })), (0, jsx_runtime_1.jsx)("div", { className: OffCanvas_module_scss_1.default.offCanvasButtonSpace }), (0, jsx_runtime_1.jsx)("button", { className: OffCanvas_module_scss_1.default.button, onClick: () => {
-                                            setIsOpen(false);
-                                            onClose === null || onClose === void 0 ? void 0 : onClose();
-                                        }, children: "\u00D7" })] }))] }), children] })] }));
-};
-exports.OffCanvas = OffCanvas;

package/dist/scripts/src/components/StateViewer/StateViewerNative.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StateViewer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const StateViewer_module_scss_1 = __importDefault(require("./StateViewer.module.scss"));
-const StateViewer = ({ children, state, showBoundary = true, blink = true }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(StateViewer_module_scss_1.default.stateViewerContainer), style: { width: "inherit", height: "inherit" }, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(StateViewer_module_scss_1.default.overlay, {
-                    [StateViewer_module_scss_1.default.showBoundary]: showBoundary,
-                }), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(StateViewer_module_scss_1.default.marker, {
-                        [StateViewer_module_scss_1.default.blink]: blink,
-                    }), onClick: () => {
-                        console.log(state);
-                    } }) })] }));
-};
-exports.StateViewer = StateViewer;

package/dist/scripts/src/components/SubNavPanel/SubNavPanel.js

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.subNavPanelRenderer = exports.NavPanelMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const SubNavPanel_module_scss_1 = __importDefault(require("./SubNavPanel.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const SubNavPanelNative_1 = require("./SubNavPanelNative");
-const COMP = "SubNavPanel";
-exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    props: {},
-    themeVars: (0, themeVars_1.parseScssVar)(SubNavPanel_module_scss_1.default.themeVars),
-    defaultThemeVars: {},
-});
-exports.subNavPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext }) => {
-    return ((0, jsx_runtime_1.jsx)(SubNavPanelNative_1.SubNavPanel, { children: renderChild(node.children) }));
-});

package/dist/scripts/src/components/SubNavPanel/SubNavPanelNative.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubNavPanel = SubNavPanel;
-const react_dom_1 = require("react-dom");
-const AppLayoutContext_1 = require("../App/AppLayoutContext");
-function SubNavPanel(props) {
-    const { subNavPanelSlot } = (0, AppLayoutContext_1.useAppLayoutContext)();
-    return subNavPanelSlot ? (0, react_dom_1.createPortal)(props.children, subNavPanelSlot) : null;
-}