xmlui 0.7.25 → 0.7.26

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

@@ -50,13 +50,13 @@ const constants_1 = require("../../components-core/constants");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const misc_1 = require("../../components-core/utils/misc");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-const SelectContext_1 = require("../Select/SelectContext");
+const SelectContext_1 = require("./SelectContext");
 const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
-const OptionContext_1 = require("../Select/OptionContext");
+const OptionContext_1 = require("./OptionContext");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
     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, children, value, height, style, placeholder, id, triggerRef, onFocus, options } = props;
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
     const stringValue = value + "";
     const onValChange = (0, react_1.useCallback)((val) => {
@@ -67,10 +67,10 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
     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",
+                        [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" }) })] }) })] }) }));
 });
-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, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, }, 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, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false }, ref) {
     var _a;
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -129,7 +129,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
-            setValue,
+            setValue
         });
     }, [focus, registerComponentApi, setValue]);
     // Render the "empty list" message
@@ -146,17 +146,17 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     }, []);
     const optionContextValue = (0, react_1.useMemo)(() => ({
         onOptionAdd,
-        onOptionRemove,
+        onOptionRemove
     }), [onOptionAdd, onOptionRemove]);
     const selectContextValue = (0, react_1.useMemo)(() => ({
         multiSelect,
         value,
         optionLabelRenderer,
-        onChange: toggleOption,
+        onChange: toggleOption
     }), [multiSelect, toggleOption, value, optionLabelRenderer]);
     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,
+                                            [Select_module_scss_1.default.multi]: multiSelect
                                         }), 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), () => {
@@ -168,14 +168,14 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                     }) }) })) : ((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" })] })] }) }), (0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, 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: [Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), (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)(IconNative_1.default, { name: "chevrondown" })] })] }) }), open && ((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: [Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), (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 })) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();

package/dist/scripts/src/components/StickyBox/StickyBoxNative.js

@@ -5,11 +5,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StickyBox = StickyBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
+const react_sticky_el_1 = __importDefault(require("react-sticky-el"));
 const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
+const hooks_1 = require("../../components-core/utils/hooks");
 function StickyBox({ children, uid, layout, to = "top" }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(StickyBox_module_scss_1.default.wrapper, {
-            [StickyBox_module_scss_1.default.top]: to === "top",
-            [StickyBox_module_scss_1.default.bottom]: to === "bottom",
-        }), style: layout, children: children }));
+    const sentinelRef = (0, react_1.useRef)(null);
+    const [wrapper, setWrapper] = (0, react_1.useState)(null);
+    const [stuck, setStuck] = (0, react_1.useState)(false);
+    const scrollParent = (0, hooks_1.useScrollParent)(sentinelRef.current);
+    const realBackground = (0, hooks_1.useRealBackground)(scrollParent);
+    (0, react_1.useEffect)(() => {
+        if (wrapper) {
+            console.log(wrapper.innerHeight);
+            document.documentElement.style.setProperty("--xmlui-scroll-margin-top", wrapper.clientHeight + "px");
+            // scrollParent.setAttribute("data-xmlui-scroll-padding", true);
+        }
+    }, [scrollParent, wrapper]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [scrollParent && ((0, jsx_runtime_1.jsx)(react_sticky_el_1.default, { scrollElement: scrollParent, wrapperClassName: (0, classnames_1.default)(StickyBox_module_scss_1.default.wrapper), mode: to, onFixedToggle: setStuck, stickyStyle: Object.assign({ backgroundColor: realBackground }, layout), children: (0, jsx_runtime_1.jsx)("div", { ref: setWrapper, children: children }) })), (0, jsx_runtime_1.jsx)("div", { style: { display: "none" }, ref: sentinelRef, className: to === "top" ? StickyBox_module_scss_1.default.sentinel : "" })] }));
 }

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

@@ -80,16 +80,12 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Table_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`padding-horizontal-heading-${COMP}`]: "$space-2",
-        [`padding-vertical-heading-${COMP}`]: "$space-2",
-        [`padding-heading-${COMP}`]: `$padding-vertical-heading-${COMP} $padding-horizontal-heading-${COMP}`,
+        [`padding-heading-${COMP}`]: `$space-2`,
         [`padding-horizontal-cell-${COMP}`]: "$space-2",
         [`padding-horizontal-cell-first-${COMP}`]: "$space-5",
         [`padding-horizontal-cell-last-${COMP}`]: "$space-5",
         [`padding-vertical-cell-${COMP}`]: "$space-2",
-        [`thickness-border-cell-${COMP}`]: "1px",
-        [`style-border-cell-${COMP}`]: "solid",
-        [`border-cell-${COMP}`]: `$thickness-border-cell-${COMP} $style-border-cell-${COMP} $color-border-cell-${COMP}`,
+        [`border-cell-${COMP}`]: "1px solid $color-border",
         [`thickness-outline-heading-${COMP}--focus`]: "$thickness-outline--focus",
         [`style-outline-heading-${COMP}--focus`]: "$style-outline--focus",
         [`offset-outline-heading-${COMP}--focus`]: "$offset-outline--focus",
@@ -99,7 +95,6 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         [`font-size-row-${COMP}`]: "$font-size-small",
         [`color-bg-${COMP}`]: "$color-bg",
         [`color-bg-row-${COMP}`]: "inherit",
-        [`color-border-cell-${COMP}`]: "$color-border",
         [`color-bg-selected-${COMP}--hover`]: `$color-bg-row-${COMP}--hover`,
         [`color-bg-pagination-${COMP}`]: `$color-bg-${COMP}`,
         [`color-outline-heading-${COMP}--focus`]: "$color-outline--focus",

package/dist/scripts/src/components/Table/TableNative.js

@@ -444,7 +444,7 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
                                         return ((0, jsx_runtime_1.jsx)("td", { className: Table_module_scss_1.default.cell, style: Object.assign({ 
                                                 // width: size,
                                                 width: size }, getCommonPinningStyles(cell.column)), children: cellRenderer
-                                                ? cellRenderer(cell.row.original)
+                                                ? cellRenderer(cell.row.original, rowIndex, i, cell === null || cell === void 0 ? void 0 : cell.getValue())
                                                 : (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, `${cell.id}-${i}`));
                                     }) }, `${row.id}-${rowIndex}`));
                             }), paddingBottom > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { style: { height: `${paddingBottom}px` } }) }))] })] }), loading && !hasData && ((0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !hideNoDataView &&

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

@@ -12,10 +12,12 @@ const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
+const react_router_dom_1 = require("react-router-dom");
 exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling, maxHeadingLevel = 6 }, forwardedRef) {
     const tocRef = (0, react_1.useRef)(null);
     const { headings, setObserveIntersection, activeAnchorId, setActiveAnchorId } = (0, TableOfContentsContext_1.useTableOfContents)();
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(tocRef, forwardedRef) : tocRef;
+    const navigate = (0, react_router_dom_1.useNavigate)();
     (0, react_1.useEffect)(() => {
         setObserveIntersection(true);
     }, [setObserveIntersection]);
@@ -44,16 +46,23 @@ exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ sty
                                 [TableOfContents_module_scss_1.default.head_4]: value.level === 4,
                                 [TableOfContents_module_scss_1.default.head_5]: value.level === 5,
                                 [TableOfContents_module_scss_1.default.head_6]: value.level === 6,
-                            }), to: `#${value.id}`, onClick: () => {
-                                if (smoothScrolling) {
-                                    (0, scroll_into_view_if_needed_1.default)(value.anchor, {
-                                        block: "start",
-                                        inline: "start",
-                                        behavior: "smooth",
-                                        scrollMode: "if-needed",
-                                    });
-                                }
+                            }), to: `#${value.id}`, onClick: (event) => {
+                                event.preventDefault();
+                                value.anchor.scrollIntoView({
+                                    block: "start",
+                                    inline: "start",
+                                    behavior: smoothScrolling ? "smooth" : "auto",
+                                });
                                 setActiveAnchorId(value.id);
+                                requestAnimationFrame(() => {
+                                    navigate({
+                                        hash: `#${value.id}`,
+                                    }, {
+                                        state: {
+                                            preventHashScroll: true
+                                        },
+                                    });
+                                });
                             }, id: value.id, children: value.text }) }, value.id));
                 }
                 return null;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.defaultButtonType = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
+exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
 exports.LinkTargetNames = ["_self", "_blank", "_parent", "_top", "_unfencedTop"];
 exports.LinkTargetMd = [
     {
@@ -71,7 +71,6 @@ exports.buttonTypesMd = [
         description: "Resets all the controls to their initial values. Using it is ill advised for UX reasons.",
     },
 ];
-exports.defaultButtonType = "button";
 // --- Available button variants
 const buttonVariantValues = ["solid", "outlined", "ghost"];
 exports.buttonVariantNames = [...buttonVariantValues];

package/dist/scripts/src/components/metadata-helpers.js

@@ -235,11 +235,12 @@ function dTriggerTemplate(comp) {
         valueType: "ComponentDef",
     };
 }
-function dOrientation(defaultValue) {
+function dOrientation(defaultValue, isRequired = false) {
     return {
         description: `This property sets the main axis along which the nested components are rendered.`,
         availableValues: abstractions_1.orientationOptionMd,
         valueType: "string",
         defaultValue,
+        isRequired,
     };
 }

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

@@ -1,14 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableOfContentsContext = void 0;
 exports.TableOfContentsProvider = TableOfContentsProvider;
 exports.useTableOfContents = useTableOfContents;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const scroll_into_view_if_needed_1 = __importDefault(require("scroll-into-view-if-needed"));
+const hooks_1 = require("./utils/hooks");
+const react_2 = require("@remix-run/react");
 /**
  * Several components work together to represent the hierarchy of a particular
  * app page as a TOC. This React component provides a context for storing this
@@ -19,17 +17,29 @@ exports.TableOfContentsContext = (0, react_1.createContext)(null);
  * This provider component injects the specified children into the TOC context.
  */
 function TableOfContentsProvider({ children }) {
+    var _a, _b;
     const [headings, setHeadings] = (0, react_1.useState)({});
     const [observeIntersection, setObserveIntersection] = (0, react_1.useState)(false);
     const [activeId, setActiveId] = (0, react_1.useState)(null);
     const observer = (0, react_1.useRef)(null);
     const initialHeading = (0, react_1.useRef)(null);
+    const thisRef = (0, react_1.useRef)({
+        suspendPositionBasedSetActiveId: false,
+    });
+    const scrollParent = (0, hooks_1.useScrollParent)((_b = (_a = Object.values(headings)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.anchor);
+    (0, hooks_1.useScrollEventHandler)(scrollParent, {
+        onScrollEnd: (0, react_1.useCallback)(() => {
+            thisRef.current.suspendPositionBasedSetActiveId = false;
+        }, []),
+    });
     (0, react_1.useEffect)(() => {
         if (observeIntersection) {
             const handleObserver = (entries) => {
                 entries.forEach((entry) => {
                     if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
-                        setActiveId(entry.target.id);
+                        if (!thisRef.current.suspendPositionBasedSetActiveId) {
+                            setActiveId(entry.target.id);
+                        }
                     }
                 });
             };
@@ -55,6 +65,7 @@ function TableOfContentsProvider({ children }) {
     }, []);
     const setActiveAnchorId = (0, react_1.useCallback)((id) => {
         if (headings[id]) {
+            thisRef.current.suspendPositionBasedSetActiveId = true;
             setActiveId(id);
         }
     }, [headings]);
@@ -69,26 +80,26 @@ function TableOfContentsProvider({ children }) {
             return -1;
         });
     }, [headings]);
+    const location = (0, react_2.useLocation)();
     (0, react_1.useEffect)(() => {
         var _a;
-        const hash = window.location.hash;
+        const hash = location.hash;
         if (hash) {
-            if (initialHeading === null || initialHeading === void 0 ? void 0 : initialHeading.current) {
+            if (initialHeading.current) {
                 return;
             }
             else {
                 initialHeading.current = (_a = sortedHeadings.find((value) => `#${value.id}` === hash)) === null || _a === void 0 ? void 0 : _a.anchor;
                 if (initialHeading.current) {
-                    (0, scroll_into_view_if_needed_1.default)(initialHeading.current, {
+                    initialHeading.current.scrollIntoView({
                         block: "start",
                         inline: "start",
                         behavior: "instant",
-                        scrollMode: "always",
                     });
                 }
             }
         }
-    }, [sortedHeadings]);
+    }, [location.hash, sortedHeadings]);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             registerHeading,

package/dist/scripts/src/components-core/loader/DataLoader.js

@@ -152,6 +152,10 @@ exports.DataLoaderMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.dataLoaderRenderer = (0, renderers_1.createLoaderRenderer)("DataLoader", ({ loader, state, loaderLoaded, loaderInProgressChanged, loaderError, registerComponentApi, lookupAction, lookupSyncCallback, }) => {
-    var _a, _b;
-    return ((0, jsx_runtime_1.jsx)(DataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, registerComponentApi: registerComponentApi, transformResult: lookupSyncCallback(loader.props.transformResult), onLoaded: lookupAction((_a = loader.events) === null || _a === void 0 ? void 0 : _a.loaded, { eventName: "loaded" }), onError: lookupAction((_b = loader.events) === null || _b === void 0 ? void 0 : _b.error, { eventName: "error" }) }));
+    var _a, _b, _c;
+    // --- Check for reuqired properties
+    if (!((_a = loader.props) === null || _a === void 0 ? void 0 : _a.url) || !loader.props.url.trim()) {
+        throw new Error("You must specify a non-empty (not whitespace-only) 'url' property for DataSource");
+    }
+    return ((0, jsx_runtime_1.jsx)(DataLoader, { loader: loader, state: state, loaderInProgressChanged: loaderInProgressChanged, loaderLoaded: loaderLoaded, loaderError: loaderError, registerComponentApi: registerComponentApi, transformResult: lookupSyncCallback(loader.props.transformResult), onLoaded: lookupAction((_b = loader.events) === null || _b === void 0 ? void 0 : _b.loaded, { eventName: "loaded" }), onError: lookupAction((_c = loader.events) === null || _c === void 0 ? void 0 : _c.error, { eventName: "error" }) }));
 }, exports.DataLoaderMd);

package/dist/scripts/src/components-core/rendering/valueExtractor.js

@@ -117,9 +117,12 @@ function createValueExtractor(state, appContext, referenceTrackedApi, memoedVars
         return (_b = (_a = extractor(expression)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "";
     };
     // --- Extract an optional string value
-    extractor.asOptionalString = (expression) => {
+    extractor.asOptionalString = (expression, defValue) => {
         var _a;
-        return (_a = extractor(expression)) === null || _a === void 0 ? void 0 : _a.toString();
+        const value = (_a = extractor(expression)) === null || _a === void 0 ? void 0 : _a.toString();
+        if (value === undefined || value === null)
+            return defValue;
+        return value;
     };
     extractor.asDisplayText = (expression) => {
         var _a;

package/dist/scripts/src/components-core/theming/ThemeProvider.js

@@ -115,7 +115,7 @@ function useCompiledTheme(activeTheme, activeTone, themes = constants_1.EMPTY_AR
             mergedThemeVars = Object.assign(Object.assign(Object.assign(Object.assign({}, mergedThemeVars), theme.themeVars), (_a = theme.themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = theme.tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars);
         });
         //we put the generated theme vars before the last item in the chain
-        return [
+        const resultedTheme = [
             ...themeDefChain
                 .map((themeDef) => {
                 var _a, _b, _c;
@@ -125,10 +125,13 @@ function useCompiledTheme(activeTheme, activeTone, themes = constants_1.EMPTY_AR
             Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, transformThemeVars_1.generateBaseSpacings)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseFontSizes)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseTones)(mergedThemeVars)), (0, transformThemeVars_1.generatePaddingSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateBorderSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateButtonTones)(mergedThemeVars)),
             Object.assign(Object.assign(Object.assign({}, themeDefChain[themeDefChain.length - 1].themeVars), (_a = themeDefChain[themeDefChain.length - 1].themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDefChain[themeDefChain.length - 1].tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars),
         ];
+        return resultedTheme;
     }, [activeTone, themeDefChain]);
     const allThemeVarsWithResolvedHierarchicalVars = (0, react_1.useMemo)(() => {
         let mergedThemeVars = {};
         themeDefChainVars === null || themeDefChainVars === void 0 ? void 0 : themeDefChainVars.forEach((theme) => {
+            theme = (0, transformThemeVars_1.generatePaddingSegments)(theme);
+            theme = (0, transformThemeVars_1.generateBorderSegments)(theme);
             mergedThemeVars = Object.assign(Object.assign({}, mergedThemeVars), theme);
         });
         const resolvedThemeVarsFromChains = {};

package/dist/scripts/src/components-core/theming/transformThemeVars.js

@@ -238,16 +238,33 @@ function generateBorderSegments(theme) {
         return {};
     }
     const result = Object.assign({}, theme);
-    let hasCard = false;
     // --- Iterate through theme variables and split border values
     Object.entries(theme).forEach(([key, value]) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
-        var _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
+        var _a, _b;
+        var _c, _d;
+        // --- Check "border-" theme variables
+        let match = borderRegEx.exec(key);
+        if (match) {
+            const remainder = match[1];
+            // --- Flow down the border value
+            result[`border-left-${remainder}`] = value;
+            result[`border-right-${remainder}`] = value;
+            result[`border-top-${remainder}`] = value;
+            result[`border-bottom-${remainder}`] = value;
+            // --- We have a border value to segment
+            const border = getBorderSegments(value);
+            result[`thickness-border-${remainder}`] = border.thickness;
+            (_a = result[_c = `style-border-${remainder}`]) !== null && _a !== void 0 ? _a : (result[_c] = border.style);
+            (_b = result[_d = `color-border-${remainder}`]) !== null && _b !== void 0 ? _b : (result[_d] = border.color);
+        }
         // --- Check "border-horizontal" theme variables
-        let match = borderHorizontalRegEx.exec(key);
+        match = borderHorizontalRegEx.exec(key);
         if (match) {
             // --- We have a border-horizontal value to segment
             const remainder = match[2];
+            // --- Flow down the border value
+            result[`border-left-${remainder}`] = value;
+            result[`border-right-${remainder}`] = value;
             const border = getBorderSegments(value);
             if (border.thickness) {
                 result[`thickness-border-left-${remainder}`] = border.thickness;
@@ -267,6 +284,9 @@ function generateBorderSegments(theme) {
         if (match) {
             // --- We have a border-vertical value to segment
             const remainder = match[2];
+            // --- Flow down the border value
+            result[`border-top-${remainder}`] = value;
+            result[`border-bottom-${remainder}`] = value;
             const border = getBorderSegments(value);
             if (border.thickness) {
                 result[`thickness-border-top-${remainder}`] = border.thickness;
@@ -287,13 +307,13 @@ function generateBorderSegments(theme) {
             // --- We have a border-left value to segment
             const remainder = match[2];
             const border = getBorderSegments(value);
-            if (border.thickness) {
+            if (border.thickness && !theme[`thickness-border-left-${remainder}`]) {
                 result[`thickness-border-left-${remainder}`] = border.thickness;
             }
-            if (border.style) {
+            if (border.style && !theme[`style-border-left-${remainder}`]) {
                 result[`style-border-left-${remainder}`] = border.style;
             }
-            if (border.color) {
+            if (border.color && !theme[`color-border-left-${remainder}`]) {
                 result[`color-border-left-${remainder}`] = border.color;
             }
         }
@@ -345,107 +365,83 @@ function generateBorderSegments(theme) {
                 result[`color-border-bottom-${remainder}`] = border.color;
             }
         }
-        // --- Check "border-" theme variables
-        match = borderRegEx.exec(key);
-        if (match) {
-            // --- We have a border value to segment
-            const remainder = match[1];
-            const border = getBorderSegments(value);
-            if (border.thickness) {
-                (_a = result[_7 = `thickness-border-${remainder}`]) !== null && _a !== void 0 ? _a : (result[_7] = border.thickness);
-            }
-            if (border.style) {
-                (_b = result[_8 = `style-border-${remainder}`]) !== null && _b !== void 0 ? _b : (result[_8] = border.style);
-            }
-            if (border.color) {
-                (_c = result[_9 = `color-border-${remainder}`]) !== null && _c !== void 0 ? _c : (result[_9] = border.color);
-            }
-        }
         // --- Check "thickness-border-" theme variables
         match = thicknessBorderRegEx.exec(key);
         if (match) {
             // --- We have a thickness-border value to flow down
             const remainder = match[1];
-            (_d = result[_10 = `thickness-border-left-${remainder}`]) !== null && _d !== void 0 ? _d : (result[_10] = value);
-            (_e = result[_11 = `thickness-border-right-${remainder}`]) !== null && _e !== void 0 ? _e : (result[_11] = value);
-            (_f = result[_12 = `thickness-border-top-${remainder}`]) !== null && _f !== void 0 ? _f : (result[_12] = value);
-            (_g = result[_13 = `thickness-border-bottom-${remainder}`]) !== null && _g !== void 0 ? _g : (result[_13] = value);
+            result[`thickness-border-left-${remainder}`] = value;
+            result[`thickness-border-right-${remainder}`] = value;
+            result[`thickness-border-top-${remainder}`] = value;
+            result[`thickness-border-bottom-${remainder}`] = value;
         }
         // --- Check "thickness-border-horizontal" theme variables
         match = thicknessBorderHorizontalRegEx.exec(key);
         if (match) {
             // --- We have a thickness-border-horizontal value to flow down
             const remainder = match[2];
-            (_h = result[_14 = `thickness-border-left-${remainder}`]) !== null && _h !== void 0 ? _h : (result[_14] = value);
-            (_j = result[_15 = `thickness-border-right-${remainder}`]) !== null && _j !== void 0 ? _j : (result[_15] = value);
+            result[`thickness-border-left-${remainder}`] = value;
+            result[`thickness-border-right-${remainder}`] = value;
         }
         // --- Check "thickness-border-vertical" theme variables
         match = thicknessBorderVerticalRegEx.exec(key);
         if (match) {
             // --- We have a thickness-border-vertical value to flow down
             const remainder = match[2];
-            (_k = result[_16 = `thickness-border-top-${remainder}`]) !== null && _k !== void 0 ? _k : (result[_16] = value);
-            (_l = result[_17 = `thickness-border-bottom-${remainder}`]) !== null && _l !== void 0 ? _l : (result[_17] = value);
-        }
-        if (match) {
-            // --- We have a thickness-border value to flow down
-            const remainder = match[1];
-            (_m = result[_18 = `thickness-border-left-${remainder}`]) !== null && _m !== void 0 ? _m : (result[_18] = value);
-            (_o = result[_19 = `thickness-border-right-${remainder}`]) !== null && _o !== void 0 ? _o : (result[_19] = value);
-            (_p = result[_20 = `thickness-border-top-${remainder}`]) !== null && _p !== void 0 ? _p : (result[_20] = value);
-            (_q = result[_21 = `thickness-border-bottom-${remainder}`]) !== null && _q !== void 0 ? _q : (result[_21] = value);
+            result[`thickness-border-top-${remainder}`] = value;
+            result[`thickness-border-bottom-${remainder}`] = value;
         }
         // --- Check "style-border-" theme variables
         match = styleBorderRegEx.exec(key);
         if (match) {
             // --- We have a style-border value to flow down
             const remainder = match[1];
-            (_r = result[_22 = `style-border-left-${remainder}`]) !== null && _r !== void 0 ? _r : (result[_22] = value);
-            (_s = result[_23 = `style-border-right-${remainder}`]) !== null && _s !== void 0 ? _s : (result[_23] = value);
-            (_t = result[_24 = `style-border-top-${remainder}`]) !== null && _t !== void 0 ? _t : (result[_24] = value);
-            (_u = result[_25 = `style-border-bottom-${remainder}`]) !== null && _u !== void 0 ? _u : (result[_25] = value);
+            result[`style-border-left-${remainder}`] = value;
+            result[`style-border-right-${remainder}`] = value;
+            result[`style-border-top-${remainder}`] = value;
+            result[`style-border-bottom-${remainder}`] = value;
         }
         // --- Check "style-border-horizontal" theme variables
         match = styleBorderHorizontalRegEx.exec(key);
         if (match) {
             // --- We have a style-border-horizontal value to flow down
-            const remainder = match[1];
-            (_v = result[_26 = `style-border-left-${remainder}`]) !== null && _v !== void 0 ? _v : (result[_26] = value);
-            (_w = result[_27 = `style-border-right-${remainder}`]) !== null && _w !== void 0 ? _w : (result[_27] = value);
+            const remainder = match[2];
+            result[`style-border-left-${remainder}`] = value;
+            result[`style-border-right-${remainder}`] = value;
         }
         // --- Check "style-border-vertical" theme variables
         match = styleBorderVerticalRegEx.exec(key);
         if (match) {
             // --- We have a style-border-vertical value to flow down
-            const remainder = match[1];
-            (_x = result[_28 = `style-border-top-${remainder}`]) !== null && _x !== void 0 ? _x : (result[_28] = value);
-            (_y = result[_29 = `style-border-bottom-${remainder}`]) !== null && _y !== void 0 ? _y : (result[_29] = value);
+            const remainder = match[2];
+            result[`style-border-top-${remainder}`] = value;
+            result[`style-border-bottom-${remainder}`] = value;
         }
         // --- Check "color-border-" theme variables
         match = colorBorderRegEx.exec(key);
         if (match) {
             // --- We have a color-border value to flow down
             const remainder = match[1];
-            (_z = result[_30 = `color-border-left-${remainder}`]) !== null && _z !== void 0 ? _z : (result[_30] = value);
-            (_0 = result[_31 = `color-border-right-${remainder}`]) !== null && _0 !== void 0 ? _0 : (result[_31] = value);
-            (_1 = result[_32 = `color-border-top-${remainder}`]) !== null && _1 !== void 0 ? _1 : (result[_32] = value);
-            (_2 = result[_33 = `color-border-bottom-${remainder}`]) !== null && _2 !== void 0 ? _2 : (result[_33] = value);
+            result[`color-border-left-${remainder}`] = value;
+            result[`color-border-right-${remainder}`] = value;
+            result[`color-border-top-${remainder}`] = value;
+            result[`color-border-bottom-${remainder}`] = value;
         }
         // --- Check "color-border-horizontal" theme variables
         match = colorBorderHorizontalRegEx.exec(key);
         if (match) {
             // --- We have a color-border-horizontal value to flow down
-            const remainder = match[1];
-            (_3 = result[_34 = `color-border-left-${remainder}`]) !== null && _3 !== void 0 ? _3 : (result[_34] = value);
-            (_4 = result[_35 = `color-border-right-${remainder}`]) !== null && _4 !== void 0 ? _4 : (result[_35] = value);
+            const remainder = match[2];
+            result[`color-border-left-${remainder}`] = value;
+            result[`color-border-right-${remainder}`] = value;
         }
         // --- Check "color-border-vertical" theme variables
         match = colorBorderVerticalRegEx.exec(key);
         if (match) {
             // --- We have a color-border-vertical value to flow down
-            const remainder = match[1];
-            (_5 = result[_36 = `color-border-top-${remainder}`]) !== null && _5 !== void 0 ? _5 : (result[_36] = value);
-            (_6 = result[_37 = `color-border-bottom-${remainder}`]) !== null && _6 !== void 0 ? _6 : (result[_37] = value);
+            const remainder = match[2];
+            result[`color-border-top-${remainder}`] = value;
+            result[`color-border-bottom-${remainder}`] = value;
         }
     });
     // --- Done