xmlui 0.9.21 → 0.9.25

package/dist/scripts/src/components/NestedApp/Tooltip.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RadixTooltip = __importStar(require("@radix-ui/react-tooltip"));
+const Tooltip_module_scss_1 = __importDefault(require("./Tooltip.module.scss"));
+const Tooltip = ({ trigger, label }) => {
+    return ((0, jsx_runtime_1.jsx)(RadixTooltip.Provider, { children: (0, jsx_runtime_1.jsxs)(RadixTooltip.Root, { children: [(0, jsx_runtime_1.jsx)(RadixTooltip.Trigger, { asChild: true, children: trigger }), (0, jsx_runtime_1.jsx)(RadixTooltip.Portal, { children: (0, jsx_runtime_1.jsx)(RadixTooltip.Content, { side: "bottom", align: "start", className: Tooltip_module_scss_1.default.TooltipContent, children: label }) })] }) }));
+};
+exports.Tooltip = Tooltip;

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

@@ -33,6 +33,9 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
+        gap: {
+            description: "This property defines the gap between the adornments and the input area.",
+        },
         hasSpinBox: {
             description: `This boolean prop shows (\`true\`) or hides (\`false\`) the spinner buttons for the input field.`,
             valueType: "boolean",
@@ -73,5 +76,5 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(NumberBox_module_scss_1.default.themeVars),
 });
 exports.numberBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NumberBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalString(node.props.initialValue), step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalString(node.props.initialValue), step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), gap: extractValue.asOptionalString(node.props.gap), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
 });

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -48,7 +48,7 @@ const IconNative_1 = require("../Icon/IconNative");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
+exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
     var _a;
     // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
     min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);
@@ -288,7 +288,7 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, init
             }), tabIndex: -1, onFocus: () => {
                 var _a;
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }) }));
+            }, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }) }));
 });
 function applyStep(valueStrRep, step, min, max, integersOnly) {
     const currentValue = (0, numberbox_abstractions_1.toUsableNumber)(valueStrRep, integersOnly);

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const metadata_helpers_1 = require("../metadata-helpers");
-const OptionTypeProvider_1 = require("../Option/OptionTypeProvider");
+const OptionTypeProvider_1 = require("./OptionTypeProvider");
 const container_helpers_1 = require("../container-helpers");
 const COMP = "Option";
 exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
@@ -21,6 +21,7 @@ exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
         enabled: (0, metadata_helpers_1.dEnabled)(),
         optionTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom option template"),
     },
+    childrenAsTemplate: "optionTemplate",
 });
 const OptionNative = (0, react_1.memo)((props) => {
     const OptionType = (0, OptionTypeProvider_1.useOptionType)();
@@ -34,5 +35,5 @@ exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     const optionTemplate = node.props.optionTemplate;
     return ((0, jsx_runtime_1.jsx)(OptionNative, { optionRenderer: optionTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: optionTemplate, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext }))
-            : undefined, value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || renderChild(node.children), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
+            : undefined, value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || extractValue(node.props.value), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
 });

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

@@ -83,7 +83,9 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: extractValue.asOptionalBoolean(node.props.multiSelect), style: layoutCss, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), updateState: updateState, searchable: extractValue.asOptionalBoolean(node.props.searchable), initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), optionLabelRenderer: node.props.optionLabelTemplate
+    const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
+    const searchable = extractValue.asOptionalBoolean(node.props.searchable);
+    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, style: layoutCss, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), optionLabelRenderer: node.props.optionLabelTemplate
             ? (item) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionLabelTemplate, item: item, renderChild: renderChild }));
             }
@@ -91,8 +93,8 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
             ? (item, val, inTrigger) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, contextVars: {
                         $selectedValue: val,
-                        $inTrigger: inTrigger
-                    }, renderChild: (...args) => ((0, jsx_runtime_1.jsx)(react_select_1.SelectItemText, { children: renderChild(...args) })) }));
+                        $inTrigger: inTrigger,
+                    }, renderChild: (...args) => multiSelect || searchable ? (renderChild(...args)) : ((0, jsx_runtime_1.jsx)(react_select_1.SelectItemText, { children: renderChild(...args) })) }));
             }
             : undefined, valueRenderer: node.props.valueTemplate
             ? (item, removeItem) => {

package/dist/scripts/src/components/Select/SelectNative.js

@@ -56,22 +56,28 @@ const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvid
 const OptionContext_1 = require("./OptionContext");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
+    var _a;
     const { root } = (0, ThemeContext_1.useTheme)();
-    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, children, value, height, style, placeholder, id, triggerRef, onFocus, options, } = props;
+    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, value, height, style, placeholder, id, triggerRef, onFocus, options, children, readOnly, } = props;
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
-    const stringValue = value != undefined ? value + "" : null;
+    const stringValue = (0, react_1.useMemo)(() => {
+        return value != undefined ? value + "" : undefined;
+    }, [value]);
     const onValChange = (0, react_1.useCallback)((val) => {
         var _a;
-        const valueWithMatchingType = (_a = Array.from(options.values()).find((o) => o.value + "" === val)) === null || _a === void 0 ? void 0 : _a.value;
-        onValueChange(valueWithMatchingType);
+        if (readOnly) {
+            return;
+        }
+        const match = Array.from(options).find((o) => `${o.value}` === val);
+        onValueChange((_a = match === null || match === void 0 ? void 0 : match.value) !== null && _a !== void 0 ? _a : val);
     }, [onValueChange, options]);
-    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption, children: (0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
-                        [Select_module_scss_1.default.error]: validationStatus === "error",
-                        [Select_module_scss_1.default.warning]: validationStatus === "warning",
-                        [Select_module_scss_1.default.valid]: validationStatus === "valid",
-                    }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: (0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.Viewport, { className: (0, classnames_1.default)(Select_module_scss_1.default.selectViewport), children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
+                    [Select_module_scss_1.default.error]: validationStatus === "error",
+                    [Select_module_scss_1.default.warning]: validationStatus === "warning",
+                    [Select_module_scss_1.default.valid]: validationStatus === "valid",
+                }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: readOnly ? (((_a = Array.from(options).find((o) => `${o.value}` === stringValue)) === null || _a === void 0 ? void 0 : _a.label) || (0, jsx_runtime_1.jsx)("span", { children: placeholder })) : ((0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder })) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
 });
-exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, optionRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, inProgress = false, inProgressNotificationMessage = "Loading...", }, ref) {
+exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, optionRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak = false, required = false, inProgress = false, inProgressNotificationMessage = "Loading...", readOnly = false, }, ref) {
     var _a;
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -79,6 +85,8 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     const observer = (0, react_1.useRef)();
     const { root } = (0, ThemeContext_1.useTheme)();
     const [options, setOptions] = (0, react_1.useState)(new Set());
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
     // Set initial state based on the initialValue prop
     (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
@@ -112,7 +120,9 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                 : selectedValue;
         updateState({ value: newSelectedValue });
         onDidChange(newSelectedValue);
-        setOpen(false);
+        if (!multiSelect) {
+            setOpen(false);
+        }
     }, [multiSelect, value, updateState, onDidChange]);
     // Clear selected value
     const clearValue = (0, react_1.useCallback)(() => {
@@ -165,68 +175,71 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
         optionLabelRenderer,
         optionRenderer,
         onChange: toggleOption,
+        setOpen,
     }), [multiSelect, toggleOption, value, optionLabelRenderer, optionRenderer]);
-    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption, children: [children, (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { id: id, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
-                                            [Select_module_scss_1.default.disabled]: !enabled,
-                                            [Select_module_scss_1.default.multi]: multiSelect,
-                                        }), placeholder: placeholder, autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
-                                                        var _a;
-                                                        return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === v), () => {
-                                                            toggleOption(v);
-                                                        })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === v)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
-                                                                        event.stopPropagation();
-                                                                        toggleOption(v);
-                                                                    } })] }, v));
-                                                    }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            clearValue();
-                                                        } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }) }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
+    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { id: inputId, "aria-haspopup": "listbox", style: style, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
+                                        [Select_module_scss_1.default.disabled]: !enabled,
+                                        [Select_module_scss_1.default.multi]: multiSelect,
+                                    }), placeholder: placeholder, autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
+                                                    var _a;
+                                                    return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === `${v}`), () => {
+                                                        toggleOption(v);
+                                                    })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === `${v}`)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    toggleOption(v);
+                                                                } })] }, v));
+                                                }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        clearValue();
+                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
                                                     const extendedValue = value + " " + keywords.join(" ");
                                                     if (extendedValue.toLowerCase().includes(search.toLowerCase()))
                                                         return 1;
                                                     return 0;
                                                 }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                     // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] }) })] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { ref: ref, value: value, options: options, onValueChange: toggleOption, id: id, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: children || emptyListNode })) }) }));
+                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: options.size > 0
+                                ? Array.from(options).map((option) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, option.value)))
+                                : emptyListNode })) }), children] }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();
-    const { label, value, enabled = true, keywords } = option;
-    const { value: selectedValue, onChange, multiSelect, optionLabelRenderer, optionRenderer, } = (0, SelectContext_1.useSelect)();
+    const { label, value, enabled = true, keywords, readOnly } = option;
+    const { value: selectedValue, onChange, multiSelect, optionLabelRenderer, optionRenderer, setOpen, } = (0, SelectContext_1.useSelect)();
     const selected = (0, react_1.useMemo)(() => {
         return Array.isArray(selectedValue) && multiSelect
             ? selectedValue.includes(value)
             : selectedValue === value;
     }, [selectedValue, value, multiSelect]);
-    return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: `${value}`, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
+    return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: value, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
+            if (readOnly) {
+                setOpen(false);
+                return;
+            }
             onChange(value);
         }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
 });
 function HiddenOption(option) {
+    const { optionRenderer, label } = option;
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
     const [node, setNode] = (0, react_1.useState)(null);
     const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
-        return Object.assign(Object.assign({}, option), { labelText: (_a = node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
+        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
     }, [option, node]);
     (0, react_1.useEffect)(() => {
         onOptionAdd(opt);
         return () => onOptionRemove(opt);
     }, [opt, onOptionAdd, onOptionRemove]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.label }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: optionRenderer === null || optionRenderer === void 0 ? void 0 : optionRenderer({}) }));
 }
 const SelectOption = react_1.default.forwardRef((option, ref) => {
     const { value, label, enabled = true } = option;
-    const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
-    const { optionLabelRenderer, optionRenderer, value: selectedValue, multiSelect } = (0, SelectContext_1.useSelect)();
-    (0, react_1.useLayoutEffect)(() => {
-        onOptionAdd(option);
-        return () => onOptionRemove(option);
-    }, [option, onOptionAdd, onOptionRemove]);
-    return ((0, jsx_runtime_1.jsx)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", disabled: !enabled, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, children: optionRenderer ? (optionRenderer({
+    const { optionLabelRenderer, optionRenderer, value: selectedValue } = (0, SelectContext_1.useSelect)();
+    return ((0, jsx_runtime_1.jsx)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", disabled: !enabled, "data-state": selectedValue === value && "checked", children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, children: optionRenderer ? (optionRenderer({
                 label,
                 value,
                 enabled,
-            }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), (0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) })] })) }) }));
+            }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), selectedValue === value && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) }))] })) }) }));
 });
 SelectOption.displayName = "SelectOption";

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

@@ -7,7 +7,7 @@ const renderers_1 = require("../../components-core/renderers");
 const SelectionStoreNative_1 = require("./SelectionStoreNative");
 const COMP = "SelectionStore";
 exports.SelectionStoreMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
+    status: "deprecated",
     description: `The \`${COMP}\` is a non-visual component that may wrap components (items) and manage ` +
         `their selection state to accommodate the usage of other actions.`,
     props: {

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

@@ -25,7 +25,6 @@ exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: false,
         },
-        themeColor: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Spinner_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -62,6 +62,7 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         [`border-width-${COMP}`]: "0",
         [`borderColor-${COMP}`]: "transparent",
         [`border-style-${COMP}`]: "solid",
+        [`paddingLeft-${COMP}Item`]: "$space-1",
         [`textTransform-${COMP}Item`]: "none",
         [`verticalAlign-${COMP}Item`]: "baseline",
         [`letterSpacing-${COMP}Item`]: "0",

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

@@ -66,7 +66,12 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-code`]: "$fontSize-small",
         [`borderWidth-${COMP}-code`]: "1px",
+        [`borderStyle-${COMP}-code`]: "solid",
+        [`borderRadius-${COMP}-code`]: "4px",
         [`paddingHorizontal-${COMP}-code`]: "$space-1",
+        [`marginLeft-${COMP}-code`]: "$space-1",
+        [`marginRight-${COMP}-code`]: "$space-1",
+        [`paddingBottom-${COMP}-code`]: "2px",
         [`textDecorationLine-${COMP}-deleted`]: "line-through",
         [`textDecorationLine-${COMP}-inserted`]: "underline",
         [`fontFamily-${COMP}-keyboard`]: "$fontFamily-monospace",
@@ -100,16 +105,22 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`marginBottom-${COMP}-tableheading`]: "$space-4",
         [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
+        [`marginTop-${COMP}-markdown`]: "$space-3",
+        [`marginBottom-${COMP}-markdown`]: "$space-6",
+        [`fontSize-${COMP}-markdown`]: "$fontSize-normal",
         [`backgroundColor-${COMP}-code`]: "$color-surface-100",
         [`borderColor-${COMP}-code`]: "$color-surface-200",
         [`backgroundColor-${COMP}-keyboard`]: "$color-surface-200",
         [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
         [`backgroundColor-${COMP}-marked`]: "yellow",
         [`color-${COMP}-placeholder`]: "$color-surface-500",
-        [`backgroundColor-${COMP}-codefence`]: "$color-primary-100",
+        [`backgroundColor-${COMP}-codefence`]: "#f2f7fc",
         [`color-${COMP}-codefence`]: "$color-surface-900",
         [`color-${COMP}-subheading`]: "$textColor-secondary",
         [`color-${COMP}-secondary`]: "$textColor-secondary",
+        dark: {
+            [`backgroundColor-${COMP}-codefence`]: "#112033",
+        }
     },
 });
 exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {

package/dist/scripts/src/components/Text/TextNative.js

@@ -26,12 +26,16 @@ exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
     var { uid, variant, maxLines = 0, style, children, preserveLinebreaks, ellipses = true } = _a, variantSpecificProps = __rest(_a, ["uid", "variant", "maxLines", "style", "children", "preserveLinebreaks", "ellipses"]);
     const innerRef = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(innerRef, forwardedRef) : innerRef;
+    // NOTE: This is to accept syntax highlight classes coming from shiki
+    // classes need not to be added to the rendered html element, so we remove them from props
+    const { syntaxHighlightClasses } = variantSpecificProps, restVariantSpecificProps = __rest(variantSpecificProps, ["syntaxHighlightClasses"]);
     const Element = (0, react_1.useMemo)(() => {
         if (!variant || !abstractions_1.TextVariantElement[variant])
             return "div"; //todo illesg, could be a span?
         return abstractions_1.TextVariantElement[variant];
     }, [variant]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Element, Object.assign({}, variantSpecificProps, { ref: ref, className: (0, classnames_1.default)([
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Element, Object.assign({}, restVariantSpecificProps, { ref: ref, className: (0, classnames_1.default)([
+                syntaxHighlightClasses,
                 Text_module_scss_1.default.text,
                 Text_module_scss_1.default[variant || "default"],
                 {

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

@@ -32,6 +32,9 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
+        gap: {
+            description: "This property defines the gap between the adornments and the input area.",
+        },
     },
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
@@ -52,6 +55,7 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         "borderWidth-Input": "1px",
         "minHeight-Input": "39px",
         "padding-Input": "$space-2",
+        "gap-adornment-Input": "$space-2",
         "borderStyle-Input": "solid",
         "borderColor-Input--disabled": "$borderColor--disabled",
         "textColor-Input--disabled": "$textColor--disabled",
@@ -73,7 +77,8 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 function renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, type = "text") {
-    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, style: layoutCss, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    delete layoutCss.gap;
+    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, style: layoutCss, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
 }
 exports.textBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
     return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi);

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -46,7 +46,7 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
+exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
     id = id || (0, react_1.useId)();
     const inputRef = (0, react_2.useRef)(null);
     (0, react_2.useEffect)(() => {
@@ -103,5 +103,5 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text",
                 [TextBox_module_scss_1.default.error]: validationStatus === "error",
                 [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
                 [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-            }), tabIndex: -1, onFocus: focus, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
+            }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
 });

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -31,7 +31,7 @@ function calculateHash(str) {
     }
     return hash;
 }
-function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 5000, themeVars = constants_1.EMPTY_OBJECT, layoutContext, children }) {
+function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 5000, themeVars = constants_1.EMPTY_OBJECT, layoutContext, children, }) {
     const generatedId = (0, react_1.useId)();
     const { themes, resources, resourceMap, activeThemeId, setRoot, root } = (0, ThemeContext_1.useThemes)();
     const { activeTheme, activeThemeTone } = (0, ThemeContext_1.useTheme)();
@@ -123,11 +123,15 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
     }, [devToolsEnabled, devToolsSide, devToolsSize]);
     if (isRoot) {
         const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `.${className}  {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
+        return (
+        // <ThemeContext.Provider value={currentThemeContextValue}>
+        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", "data-theme-root": true, children: `.${className}  {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
                         if (el) {
                             setRoot(el);
                         }
-                    }, children: [(0, jsx_runtime_1.jsxs)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: [renderChild(node.children), children] }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] })] }));
+                    }, children: [(0, jsx_runtime_1.jsxs)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: [renderChild(node.children), children] }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] })] })
+        // </ThemeContext.Provider>
+        );
     }
     return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${rangeClassName} {${css}}` }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.from, fromClass) }), renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.to, toClass) }), root &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {

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

@@ -15,9 +15,7 @@ exports.ToneChangerButtonMd = (0, ComponentDefs_1.createMetadata)({
 });
 function ToneChangerButton() {
     const { activeThemeTone, setActiveThemeTone } = (0, ThemeContext_1.useThemes)();
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "stars" : "sun" }), onClick: () => {
-            activeThemeTone === "light" ? setActiveThemeTone("dark") : setActiveThemeTone("light");
-        } }));
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", style: { flexShrink: 0 }, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "lightToDark" : "darkToLight" }), onClick: () => activeThemeTone === "light" ? setActiveThemeTone("dark") : setActiveThemeTone("light") }));
 }
 /**
  * Define the renderer for the Button component

package/dist/scripts/src/components-core/RestApiProxy.js

@@ -294,7 +294,8 @@ class RestApiProxy {
                 if (!response.clone().ok) {
                     throw yield this.raiseError(response);
                 }
-                return yield parseResponse(response.clone());
+                const parsedResponse = yield parseResponse(response.clone());
+                return parsedResponse;
             }
         });
         this.tryParseResponse = (response) => __awaiter(this, void 0, void 0, function* () {
@@ -330,12 +331,14 @@ class RestApiProxy {
         const conf = (appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) || { apiUrl: "" };
         const { apiUrl, errorResponseTransform } = conf;
         this.appContext = appContext;
-        const xsrfToken = (0, misc_1.readCookie)("XSRF-TOKEN");
-        const xsrfHeaders = xsrfToken
-            ? {
-                "X-XSRF-TOKEN": (0, misc_1.readCookie)("XSRF-TOKEN"),
-            }
-            : {};
+        // const xsrfToken = readCookie("XSRF-TOKEN");
+        const xsrfHeaders = 
+        // xsrfToken
+        // ? {
+        //     "X-XSRF-TOKEN": readCookie("XSRF-TOKEN"),
+        //   }
+        // :
+        {};
         this.config = {
             apiUrl,
             errorResponseTransform,

package/dist/scripts/src/components-core/TableOfContentsContext.js

@@ -115,7 +115,7 @@ function TableOfContentsProvider({ children }) {
     }, [headings]);
     //the content could take time to load, this way we try to force the scroll to anchor mechanism to kick in
     const hasHeadings = sortedHeadings.length > 0;
-    (0, react_1.useEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (hasHeadings) {
             forceRefreshAnchorScroll();
         }

package/dist/scripts/src/components-core/appContext/date-functions.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateFunctions = void 0;
+const date_utils_1 = require("../utils/date-utils");
+const date_fns_1 = require("date-fns");
+exports.dateFunctions = {
+    isoDateString: date_utils_1.isoDateString,
+    formatDate: date_utils_1.formatDate,
+    formatDateTime: date_utils_1.formatDateTime,
+    formatTime: date_utils_1.formatTime,
+    formatTimeWithoutSeconds: date_utils_1.formatTimeWithoutSeconds,
+    formatDateWithoutYear: date_utils_1.formatDateWithoutYear,
+    getDate: date_utils_1.getDate,
+    getDateUntilNow: date_utils_1.getDateUntilNow,
+    smartFormatDateTime: date_utils_1.smartFormatDateTime,
+    smartFormatDate: date_utils_1.smartFormatDate,
+    isToday: date_utils_1.isDateToday,
+    isYesterday: date_utils_1.isDateYesterday,
+    isTomorrow: date_utils_1.isDateTomorrow,
+    differenceInMinutes: date_fns_1.differenceInMinutes,
+    isSameDay: date_fns_1.isSameDay,
+    isThisYear: date_fns_1.isThisYear,
+};