xmlui 0.7.25 → 0.7.27

package/dist/scripts/src/components/Heading/HeadingNative.js

@@ -24,7 +24,7 @@ const css_utils_1 = require("../../components-core/utils/css-utils");
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
 const HeadingLevelKeys = ["h1", "h2", "h3", "h4", "h5", "h6"];
 exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
-    var { uid, level = "h1", children, sx, style, title, maxLines = 0, preserveLinebreaks, ellipses = true, className } = _a, furtherProps = __rest(_a, ["uid", "level", "children", "sx", "style", "title", "maxLines", "preserveLinebreaks", "ellipses", "className"]);
+    var { uid, level = "h1", children, sx, style, title, maxLines = 0, preserveLinebreaks, ellipses = true, className, omitFromToc } = _a, furtherProps = __rest(_a, ["uid", "level", "children", "sx", "style", "title", "maxLines", "preserveLinebreaks", "ellipses", "className", "omitFromToc"]);
     const Element = level === null || level === void 0 ? void 0 : level.toLowerCase();
     const elementRef = (0, react_1.useRef)(null);
     const [anchorId, setAnchorId] = (0, react_1.useState)(null);
@@ -41,7 +41,7 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
         }
     }, [observeIntersection]);
     (0, react_1.useEffect)(() => {
-        if (observeIntersection && elementRef.current && anchorId) {
+        if (observeIntersection && elementRef.current && anchorId && !omitFromToc) {
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
                 id: anchorId,
                 level: parseInt(level.replace("h", "")),
@@ -49,10 +49,10 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
                 anchor: anchorRef.current,
             });
         }
-    }, [anchorId, observeIntersection, registerHeading, level]);
+    }, [anchorId, observeIntersection, registerHeading, level, omitFromToc]);
     return ((0, jsx_runtime_1.jsxs)(Element, Object.assign({ ref: ref, id: uid, title: title, style: Object.assign(Object.assign(Object.assign({}, sx), style), (0, css_utils_1.getMaxLinesStyle)(maxLines)), className: (0, classnames_1.default)(Heading_module_scss_1.default.heading, Heading_module_scss_1.default[Element], className || "", {
             [Heading_module_scss_1.default.truncateOverflow]: maxLines > 0,
             [Heading_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
             [Heading_module_scss_1.default.noEllipsis]: !ellipses,
-        }) }, furtherProps, { children: [anchorId && observeIntersection && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, style: { width: 0, height: 0 } })), children] })));
+        }) }, furtherProps, { children: [anchorId && observeIntersection && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, style: { width: 0, height: 0 }, "data-anchor": true })), children] })));
 });

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

@@ -1041,7 +1041,7 @@ exports.HtmlTdMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsTd),
     defaultThemeVars: {
         "padding-HtmlTd": "$space-2",
-        "border-HtmlTd": "1px solid $color-border",
+        "border-bottom-HtmlTd": "1px solid $color-border",
     }
 });
 exports.htmlTdTagRenderer = (0, renderers_1.createComponentRenderer)("td", exports.HtmlTdMd, ({ node, renderChild, extractValue, layoutCss }) => {

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

@@ -27,6 +27,7 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Link_module_scss_1.default.themeVars),
     defaultThemeVars: {
+        [`border-${COMP}`]: '0px solid $color-border',
         [`color-text-${COMP}--hover--active`]: `$color-text-${COMP}--active`,
         [`color-text-decoration-${COMP}--hover`]: "$color-surface-400A80",
         [`color-text-decoration-${COMP}--active`]: "$color-surface200",

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

@@ -36,6 +36,7 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavLink_module_scss_1.default.themeVars),
     defaultThemeVars: {
+        [`border-NavLink`]: '0px solid $color-border',
         "radius-NavLink": "$radius",
         "color-bg-NavLink": "transparent",
         "padding-horizontal-NavLink": "$space-4",

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

@@ -9,7 +9,6 @@ const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss")
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
-const base_utils_1 = require("../../components-core/theming/themes/base-utils");
 const metadata_helpers_1 = require("../metadata-helpers");
 const NavPanelNative_1 = require("./NavPanelNative");
 const COMP = "NavPanel";
@@ -20,11 +19,20 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
             `\`vertical\` and \`vertical-sticky\` layout.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign({ [`color-bg-${COMP}`]: "transparent" }, (0, base_utils_1.borderSubject)(COMP, {})), { [`padding-horizontal-${COMP}`]: "$space-4", [`padding-vertical-logo-${COMP}`]: "$space-4", [`padding-horizontal-logo-${COMP}`]: "$space-4", [`margin-bottom-logo-${COMP}`]: "$space-4", light: {
+    defaultThemeVars: {
+        [`color-bg-${COMP}`]: "transparent",
+        [`border-${COMP}`]: '0px solid $color-border',
+        [`padding-horizontal-${COMP}`]: "$space-4",
+        [`padding-vertical-logo-${COMP}`]: "$space-4",
+        [`padding-horizontal-logo-${COMP}`]: "$space-4",
+        [`margin-bottom-logo-${COMP}`]: "$space-4",
+        light: {
             [`shadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
-        }, dark: {
+        },
+        dark: {
             [`shadow-${COMP}-vertical`]: "4px 0 6px 0 rgba(0, 0, 0, 0.2)",
-        } }),
+        },
+    },
 });
 exports.navPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext }) => {
     return ((0, jsx_runtime_1.jsx)(NavPanelNative_1.NavPanel, { style: layoutCss, logoContent: renderChild(node.props.logoTemplate), className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, inDrawer: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.inDrawer, renderChild: renderChild, children: renderChild(node.children) }));

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

@@ -22,6 +22,7 @@ exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NoResult_module_scss_1.default.themeVars),
     defaultThemeVars: {
+        [`border-${COMP}`]: '0px solid $color-border',
         [`padding-vertical-${COMP}`]: "$space-2",
         [`gap-icon-${COMP}`]: "$space-2",
         [`size-icon-${COMP}`]: "$space-8",

package/dist/scripts/src/components/Pages/PagesNative.js

@@ -24,7 +24,7 @@ const constants_1 = require("../../components-core/constants");
 const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
 // --- We need this component to make sure all the child routes are wrapped in a
 // --- container and  this way they can access the routeParams
-function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid }) {
+function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid, }) {
     const params = (0, react_2.useParams)();
     //we need to wrap the child route in a container to make sure the route params are available.
     // we do this wrapping by providing an empty object to vars.

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,30 @@ 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 = 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) {
+            document.documentElement.style.setProperty("--xmlui-scroll-margin-top", wrapper.clientHeight + "px");
+            // scrollParent.setAttribute("data-xmlui-scroll-padding", true);
+        }
+    }, [scrollParent, wrapper]);
+    const wrapperClassName = (0, classnames_1.default)(StickyBox_module_scss_1.default.wrapper);
+    const stickyStyles = Object.assign({ backgroundColor: realBackground }, layout);
+    const stickyClassName = "";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!scrollParent && ((0, jsx_runtime_1.jsx)(react_sticky_el_1.RenderPropSticky, { mode: to, onFixedToggle: setStuck, 
+                // hideOnBoundaryHit={hideOnBoundaryHit}
+                // offsetTransforms={offsetTransforms}
+                // disabled={disabled}
+                // boundaryElement={boundaryElement}
+                scrollElement: scrollParent, children: ({ isFixed, wrapperStyles, wrapperRef, holderStyles, holderRef }) => ((0, jsx_runtime_1.jsx)("div", { ref: holderRef, style: holderStyles, children: (0, jsx_runtime_1.jsx)("div", { className: `${wrapperClassName} ${isFixed ? stickyClassName : ''}`, style: isFixed ? Object.assign(Object.assign({}, wrapperStyles), stickyStyles) : wrapperStyles, ref: wrapperRef, 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/Switch/Switch.js

@@ -17,18 +17,18 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         `on and off. It consists of a small rectangular or circular button that can be moved left or right to ` +
         `change its state.`,
     props: {
-        indeterminate: (0, metadata_helpers_1.dIndeterminate)(),
+        indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("end"),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         required: (0, metadata_helpers_1.dRequired)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(false),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(Toggle_1.defaultProps.initialValue),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        description: (0, ComponentDefs_1.d)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(Toggle_1.defaultProps.validationStatus),
+        description: (0, metadata_helpers_1.dInternal)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
             `of the ${COMP} besides its label.`),
     },
     events: {
@@ -67,6 +67,6 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)("Switch", exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue) || false, value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), 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), variant: "switch", registerComponentApi: registerComponentApi }));
+exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), 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), variant: "switch", registerComponentApi: registerComponentApi }));
 });

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/Toggle/Toggle.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
+exports.Toggle = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
@@ -46,7 +46,14 @@ const Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = false, value = false, enabled = true, style, readOnly, validationStatus = "none", updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = false, className, label, labelPosition = "start", labelWidth, labelBreak, required, registerComponentApi, inputRenderer, }, forwardedRef) {
+exports.defaultProps = {
+    initialValue: false,
+    value: false,
+    enabled: true,
+    validationStatus: "none",
+    indeterminate: false,
+};
+exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = exports.defaultProps.initialValue, value = exports.defaultProps.value, enabled = exports.defaultProps.enabled, style, readOnly, validationStatus = exports.defaultProps.validationStatus, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = exports.defaultProps.indeterminate, className, label, labelPosition = "end", labelWidth, labelBreak, required, registerComponentApi, inputRenderer, }, forwardedRef) {
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     const innerRef = react_3.default.useRef(null);
@@ -98,6 +105,7 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = fa
             [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
             [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
         }) })), [
+        inputId,
         className,
         enabled,
         handleOnBlur,

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

@@ -62,22 +62,24 @@ function dDidChange(comp) {
         description: `This event is triggered when value of ${comp} has changed.`,
     };
 }
-function dIndeterminate() {
+function dIndeterminate(defaultValue) {
     return {
         description: `The \`true\` value of this property signals that the component is in an ` +
             `_intedeterminate state_.`,
+        defaultValue,
     };
 }
 function dLabel() {
     return {
         description: `This property sets the label of the component.`,
+        valueType: "string",
     };
 }
 function dLabelPosition(def) {
     return {
         description: `Places the label at the given position of the component.`,
         availableValues: abstractions_1.labelPositionMd,
-        defaultValue: def,
+        defaultValue: def !== null && def !== void 0 ? def : "top",
     };
 }
 function dLabelWidth(comp) {
@@ -100,22 +102,24 @@ function dAutoFocus() {
         defaultValue: false,
     };
 }
-function dInitialValue(def) {
+function dInitialValue(value) {
     return {
         description: `This property sets the component's initial value.`,
-        defaultValue: def,
+        defaultValue: value,
     };
 }
-function dReadonly() {
+function dReadonly(readOnly) {
     return {
         description: `Set this property to \`true\` to disallow changing the component value.`,
+        valueType: "boolean",
+        defaultValue: readOnly !== null && readOnly !== void 0 ? readOnly : false,
     };
 }
-function dEnabled() {
+function dEnabled(isEnabled) {
     return {
         description: `This boolean property value indicates whether the component responds to user events (\`true\`) or not (\`false\`).`,
         valueType: "boolean",
-        defaultValue: true,
+        defaultValue: isEnabled !== null && isEnabled !== void 0 ? isEnabled : true,
     };
 }
 function dMulti() {
@@ -125,10 +129,11 @@ function dMulti() {
         defaultValue: false,
     };
 }
-function dValidationStatus() {
+function dValidationStatus(value) {
     return {
         description: `This property allows you to set the validation status of the input component.`,
         availableValues: abstractions_1.validationStatusMd,
+        defaultValue: value !== null && value !== void 0 ? value : "none",
     };
 }
 function dValueApi() {
@@ -152,41 +157,48 @@ function dComponent(description) {
 function dPlaceholder() {
     return {
         description: `A placeholder text that is visible in the input field when its empty.`,
+        valueType: "string",
     };
 }
 function dMaxLength() {
     return {
         description: `This property sets the maximum length of the input it accepts.`,
+        valueType: "number",
     };
 }
 function dRequired() {
     return {
         description: `Set this property to \`true\` to indicate it must have a value ` +
             `before submitting the containing form.`,
+        valueType: "boolean",
     };
 }
 function dStartText() {
     return {
         description: `This property sets a text to appear at the start (left side when the ` +
             `left-to-right direction is set) of the input.`,
+        valueType: "string",
     };
 }
 function dStartIcon() {
     return {
         description: `This property sets an icon to appear at the start (left side when the ` +
             `left-to-right direction is set) of the input.`,
+        valueType: "string",
     };
 }
 function dEndText() {
     return {
         description: `This property sets a text to appear on the end (right side when the ` +
             `left-to-right direction is set) of the input.`,
+        valueType: "string",
     };
 }
 function dEndIcon() {
     return {
         description: `This property sets an icon to appear on the end (right side when the ` +
             `left-to-right direction is set) of the input.`,
+        valueType: "string",
     };
 }
 function dExpanded(comp) {
@@ -235,11 +247,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,
     };
 }