xmlui 0.9.51 → 0.9.52

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

@@ -22,32 +22,32 @@ const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
             description: `This optional booelan property indicates whether the \`${COMP}\` sections are layed out as ` +
                 `primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: SplitterNative_1.defaultProps.swapped,
         },
         splitterTemplate: (0, metadata_helpers_1.dComponent)(`The divider can be customized using XMLUI components via this property.`),
         initialPrimarySize: {
             description: `This optional number property sets the initial size of the primary section. The unit of ` +
                 `the size value is in pixels or percentages.`,
             valueType: "string",
-            defaultValue: "50%",
+            defaultValue: SplitterNative_1.defaultProps.initialPrimarySize,
         },
         minPrimarySize: {
             description: `This property sets the minimum size the primary section can have. The unit of the size ` +
                 `value is in pixels or percentages.`,
             valueType: "string",
-            defaultValue: "0%",
+            defaultValue: SplitterNative_1.defaultProps.minPrimarySize,
         },
         maxPrimarySize: {
             description: `This property sets the maximum size the primary section can have. The unit of the size ` +
                 `value is in pixels or percentages.`,
             valueType: "string",
-            defaultValue: "100%",
+            defaultValue: SplitterNative_1.defaultProps.maxPrimarySize,
         },
         floating: {
             description: `Toggles whether the resizer is visible (\`false\`) or not (\`true\`) when not hovered ` +
                 `or dragged. The default value is \`false\`, meaning the resizer is visible all the time.`,
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: SplitterNative_1.defaultProps.floating,
         },
         orientation: {
             description: `Sets whether the \`Splitter\` divides the container horizontally and lays out the ` +
@@ -55,7 +55,7 @@ const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
                 `next to each other (\`horizontal\`).`,
             valueType: "string",
             availableValues: ["horizontal", "vertical"],
-            defaultValue: "vertical",
+            defaultValue: SplitterNative_1.defaultProps.orientation,
         },
     },
     events: {

package/dist/scripts/src/components/Splitter/SplitterNative.js

@@ -36,14 +36,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Splitter = void 0;
+exports.Splitter = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const utils_1 = require("../Splitter/utils");
-const Splitter = ({ initialPrimarySize = "50%", minPrimarySize = "0%", maxPrimarySize = "100%", orientation = "vertical", children, style, swapped = false, floating = false, splitterTemplate, resize = constants_1.noop, }) => {
+exports.defaultProps = {
+    initialPrimarySize: "50%",
+    minPrimarySize: "0%",
+    maxPrimarySize: "100%",
+    orientation: "vertical",
+    swapped: false,
+    floating: false,
+};
+const Splitter = ({ initialPrimarySize = exports.defaultProps.initialPrimarySize, minPrimarySize = exports.defaultProps.minPrimarySize, maxPrimarySize = exports.defaultProps.maxPrimarySize, orientation = exports.defaultProps.orientation, children, style, swapped = exports.defaultProps.swapped, floating = exports.defaultProps.floating, splitterTemplate, resize = constants_1.noop, }) => {
     var _a;
     const [size, setSize] = (0, react_1.useState)(0);
     const [splitter, setSplitter] = (0, react_1.useState)(null);

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

@@ -38,7 +38,7 @@ const stackMd = (0, ComponentDefs_1.createMetadata)({
         reverse: {
             description: "Optional boolean property to reverse the order of child elements.",
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: StackNative_1.defaultProps.reverse,
         },
         wrapContent: {
             description: "Optional boolean which wraps the content if set to true and the available " +
@@ -51,12 +51,12 @@ const stackMd = (0, ComponentDefs_1.createMetadata)({
                 "the Stack lays out its children in a row or a column).",
             availableValues: ["horizontal", "vertical"],
             valueType: "string",
-            defaultValue: StackNative_1.DEFAULT_ORIENTATION,
+            defaultValue: StackNative_1.defaultProps.orientation,
         },
         horizontalAlignment: HORIZONTAL_ALIGNMENT,
         verticalAlignment: VERTICAL_ALIGNMENT,
-        hoverContainer: (0, metadata_helpers_1.dInternal)("Reserved for future use"),
-        visibleOnHover: (0, metadata_helpers_1.dInternal)("Reserved for future use"),
+        hoverContainer: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInternal)("Reserved for future use")), { defaultValue: StackNative_1.defaultProps.hoverContainer }),
+        visibleOnHover: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInternal)("Reserved for future use")), { defaultValue: StackNative_1.defaultProps.visibleOnHover }),
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),

package/dist/scripts/src/components/Stack/StackNative.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stack = exports.DEFAULT_ORIENTATION = void 0;
+exports.Stack = exports.defaultProps = exports.DEFAULT_ORIENTATION = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
@@ -22,10 +22,16 @@ const Stack_module_scss_1 = __importDefault(require("./Stack.module.scss"));
 const component_hooks_1 = require("../../components-core/component-hooks");
 const hooks_1 = require("../../components-core/utils/hooks");
 exports.DEFAULT_ORIENTATION = "vertical";
+exports.defaultProps = {
+    orientation: exports.DEFAULT_ORIENTATION,
+    reverse: false,
+    hoverContainer: false,
+    visibleOnHover: false,
+};
 // =====================================================================================================================
 // Stack React component
 exports.Stack = (0, react_1.forwardRef)(function Stack(_a, ref) {
-    var { uid, children, orientation = exports.DEFAULT_ORIENTATION, horizontalAlignment, verticalAlignment, style, reverse, hoverContainer, visibleOnHover, onClick, onMount } = _a, rest = __rest(_a, ["uid", "children", "orientation", "horizontalAlignment", "verticalAlignment", "style", "reverse", "hoverContainer", "visibleOnHover", "onClick", "onMount"]);
+    var { uid, children, orientation = exports.defaultProps.orientation, horizontalAlignment, verticalAlignment, style, reverse = exports.defaultProps.reverse, hoverContainer = exports.defaultProps.hoverContainer, visibleOnHover = exports.defaultProps.visibleOnHover, onClick, onMount } = _a, rest = __rest(_a, ["uid", "children", "orientation", "horizontalAlignment", "verticalAlignment", "style", "reverse", "hoverContainer", "visibleOnHover", "onClick", "onMount"]);
     (0, hooks_1.useOnMount)(onMount);
     const { horizontal, vertical } = (0, component_hooks_1.useContentAlignment)(orientation, horizontalAlignment, verticalAlignment);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { onClick: onClick, ref: ref, style: style, className: (0, classnames_1.default)(Stack_module_scss_1.default.base, {

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

@@ -21,7 +21,7 @@ exports.StickyBoxMd = (0, ComponentDefs_1.createMetadata)({
                 "the \`top\` or \`bottom\`.",
             availableValues: ["top", "bottom"],
             valueType: "string",
-            defaultValue: "top",
+            defaultValue: StickyBoxNative_1.defaultProps.to,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(StickyBox_module_scss_1.default.themeVars),

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.StickyBox = StickyBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -10,7 +11,12 @@ 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" }) {
+// =====================================================================================================================
+// React StickyBox component implementation
+exports.defaultProps = {
+    to: "top",
+};
+function StickyBox({ children, uid, layout, to = exports.defaultProps.to }) {
     const sentinelRef = (0, react_1.useRef)(null);
     const [wrapper, setWrapper] = (0, react_1.useState)(null);
     const [stuck, setStuck] = (0, react_1.useState)(false);

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

@@ -31,7 +31,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         isPaginated: {
             description: `This property adds pagination controls to the \`${COMP}\`.`,
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: TableNative_1.defaultProps.isPaginated,
         },
         loading: (0, ComponentDefs_1.d)(`This boolean property indicates if the component is fetching (or processing) data. This ` +
             `property is useful when data is loaded conditionally or receiving it takes some time.`),
@@ -45,22 +45,24 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
             `row should be disabled. The function retrieves the item to display and should return ` +
             `a Boolean-like value.`),
         noDataTemplate: (0, metadata_helpers_1.dComponent)(`A property to customize what to display if the table does not contain any data.`),
-        sortBy: (0, ComponentDefs_1.d)(`This property is used to determine which data attributes to sort by.`),
-        sortDirection: (0, ComponentDefs_1.d)(`This property determines the sort order to be \`ascending\` or \`descending\`. This ` +
-            `property only works if the [\`sortBy\`](#sortby) property is also set.`),
+        sortBy: (0, ComponentDefs_1.d)("This property is used to determine which data property to sort by. If not defined, " +
+            "the data is not sorted"),
+        sortDirection: (0, ComponentDefs_1.d)("This property determines the sort order to be \`ascending\` or \`descending\`. This " +
+            "property only works if the [\`sortBy\`](#sortby) property is also set. By default " +
+            "ascending order is used."),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         hideHeader: {
             description: "Set the header visibility using this property. Set it to \`true\` to hide the header.",
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: TableNative_1.defaultProps.hideHeader,
         },
-        iconNoSort: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is ` +
+        iconNoSort: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is ` +
             `enabled, but the column remains unsorted. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.nosort:Table" declaration in the app configuration file.`),
-        iconSortAsc: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is enabled, ` +
+        iconSortAsc: (0, ComponentDefs_1.d)(`Allows setting an alernate icon displayed in the ${COMP} column header when sorting is enabled, ` +
             `and the column is sorted in ascending order. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.sortasc:Table" declaration in the app configuration file.`),
-        iconSortDesc: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is enabled, ` +
+        iconSortDesc: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is enabled, ` +
             `and the column is sorted in descending order. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.sortdesc:Table" declaration in the app configuration file.`),
         enableMultiRowSelection: {
@@ -68,7 +70,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
                 `This property only has an effect when the rowsSelectable property is set. Setting it ` +
                 `to \`false\` limits selection to a single row.`,
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: TableNative_1.defaultProps.enableMultiRowSelection,
         },
         alwaysShowSelectionHeader: {
             description: "This property indicates when the row selection header is displayed. When the value is " +
@@ -82,7 +84,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
                 `\`true\`, the table does not have a bottom border. Otherwise, it has a bottom border.`,
             valueType: "boolean",
             defaultValue: false,
-        }
+        },
     },
     events: {
         sortingDidChange: (0, ComponentDefs_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +
@@ -106,11 +108,10 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Table_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`padding-heading-${COMP}`]: `$space-2`,
-        [`paddingHorizontal-cell-${COMP}`]: "$space-2",
+        [`padding-heading-${COMP}`]: `$space-2 $space-0 $space-2 $space-2`,
+        [`padding-cell-${COMP}`]: "$space-2 $space-0 $space-2 $space-2",
         [`paddingHorizontal-cell-first-${COMP}`]: "$space-5",
-        [`paddingHorizontal-cell-last-${COMP}`]: "$space-5",
-        [`paddingVertical-cell-${COMP}`]: "$space-2",
+        [`paddingHorizontal-cell-last-${COMP}`]: "$space-0",
         [`border-cell-${COMP}`]: "1px solid $borderColor",
         [`outlineWidth-heading-${COMP}--focus`]: "$outlineWidth--focus",
         [`outlineStyle-heading-${COMP}--focus`]: "$outlineStyle--focus",

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

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
+exports.defaultProps = exports.Table = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
@@ -73,7 +73,7 @@ const getCommonPinningStyles = (column) => {
     };
 };
 // eslint-disable-next-line react/display-name
-exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, columns = constants_1.EMPTY_ARRAY, isPaginated = false, loading = false, headerHeight, rowsSelectable = false, enableMultiRowSelection = true, pageSizes = DEFAULT_PAGE_SIZES, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = "ascending", iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, noDataRenderer, autoFocus = false, hideHeader = false, hideNoDataView = false, alwaysShowSelectionHeader = false, registerComponentApi, onSelectionDidChange, noBottomBorder = false,
+exports.Table = (0, react_1.forwardRef)(({ data = exports.defaultProps.data, columns = exports.defaultProps.columns, isPaginated = exports.defaultProps.isPaginated, loading = exports.defaultProps.loading, headerHeight, rowsSelectable = exports.defaultProps.rowsSelectable, enableMultiRowSelection = exports.defaultProps.enableMultiRowSelection, pageSizes = exports.defaultProps.pageSizes, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = exports.defaultProps.sortingDirection, iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, noDataRenderer, autoFocus = exports.defaultProps.autoFocus, hideHeader = exports.defaultProps.hideHeader, hideNoDataView = exports.defaultProps.hideNoDataView, alwaysShowSelectionHeader = exports.defaultProps.alwaysShowSelectionHeader, registerComponentApi, onSelectionDidChange, noBottomBorder = exports.defaultProps.noBottomBorder,
 // cols
  }, forwardedRef) => {
     var _a, _b, _c, _d;
@@ -162,7 +162,7 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
             const { width, starSizedWidth } = getColumnWidth(col.width, true, "width");
             const { width: minWidth } = getColumnWidth(col.minWidth, false, "minWidth");
             const { width: maxWidth } = getColumnWidth(col.maxWidth, false, "maxWidth");
-            const customColumn = Object.assign(Object.assign({}, col), { header: (_b = (_a = col.header) !== null && _a !== void 0 ? _a : col.accessorKey) !== null && _b !== void 0 ? _b : " ", id: "col_" + idx, size: width, minSize: minWidth, maxSize: maxWidth, enableResizing: col.canResize, enableSorting: col.canSort, enablePinning: col.pinTo !== undefined, meta: {
+            const customColumn = Object.assign(Object.assign({}, col), { header: (_b = (_a = col.header) !== null && _a !== void 0 ? _a : col.accessorKey) !== null && _b !== void 0 ? _b : " ", id: "col_" + idx, size: width, minSize: minWidth, maxSize: maxWidth, enableResizing: col.canResize, enableSorting: col.canSort && !!col.accessorKey, enablePinning: col.pinTo !== undefined, meta: {
                     starSizedWidth,
                     pinTo: col.pinTo,
                     style: col.style,
@@ -384,10 +384,11 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(Table_module_scss_1.default.wrapper, { [Table_module_scss_1.default.noScroll]: hasOutsideScroll }), tabIndex: -1, onKeyDown: onKeyDown, ref: ref, style: style, children: [(0, jsx_runtime_1.jsxs)("table", { className: Table_module_scss_1.default.table, ref: tableRef, style: { borderRight: "1px solid transparent" }, children: [!hideHeader && ((0, jsx_runtime_1.jsx)("thead", { style: { height: headerHeight }, className: Table_module_scss_1.default.headerWrapper, children: table.getHeaderGroups().map((headerGroup, headerGroupIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, classnames_1.default)(Table_module_scss_1.default.headerRow, {
                                 [Table_module_scss_1.default.allSelected]: table.getIsAllRowsSelected(),
                             }), children: headerGroup.headers.map((header, headerIndex) => {
-                                var _a, _b;
-                                const _c = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _c, style = __rest(_c, ["width"]);
+                                var _a, _b, _c;
+                                const _d = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _d, style = __rest(_d, ["width"]);
                                 const size = header.getSize();
-                                return ((0, jsx_runtime_1.jsxs)("th", { className: Table_module_scss_1.default.columnCell, colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting, updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: (0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey) === _sortBy
+                                return ((0, jsx_runtime_1.jsxs)("th", { className: Table_module_scss_1.default.columnCell, colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting &&
+                                                !!((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey), updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: (0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.accessorKey) === _sortBy
                                                                 ? _sortingDirection
                                                                 : undefined }) }))] }) }), header.column.getCanResize() && ((0, jsx_runtime_1.jsx)("div", { onDoubleClick: () => {
                                                 touchedSizesRef.current[header.column.id] = false;
@@ -437,9 +438,9 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
                                         const size = cell.column.getSize();
                                         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, 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}`));
+                                                width: size }, getCommonPinningStyles(cell.column)), children: (0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.cellContent, children: cellRenderer
+                                                    ? 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 &&
                 !loading &&
@@ -462,3 +463,18 @@ function ColumnOrderingIndicator({ direction, iconSortAsc = "sortasc:Table", ico
     }
     return iconNoSort !== "-" ? ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconNoSort, fallback: "nosort", size: "12" })) : ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconNoSort, size: "12" })); //nosort
 }
+exports.defaultProps = {
+    data: constants_1.EMPTY_ARRAY,
+    columns: constants_1.EMPTY_ARRAY,
+    isPaginated: false,
+    loading: false,
+    rowsSelectable: false,
+    enableMultiRowSelection: true,
+    pageSizes: [10],
+    sortingDirection: "ascending",
+    autoFocus: false,
+    hideHeader: false,
+    hideNoDataView: false,
+    alwaysShowSelectionHeader: false,
+    noBottomBorder: false,
+};

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

@@ -23,14 +23,14 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
             description: `This property indicates that smooth scrolling is used while scrolling the selected table ` +
                 `of contents items into view.`,
             valueType: "boolean",
-            defaultValue: "false",
+            defaultValue: TableOfContentsNative_1.defaultProps.smoothScrolling,
         },
         maxHeadingLevel: {
             description: "Defines the maximum heading level (1 to 6) to include in the table of contents. " +
                 "For example, if it is 2, then `H1` and `H2` are displayed, but lower levels " +
                 "(`H3` to `H6`) are not.",
             valueType: "number",
-            defaultValue: "6",
+            defaultValue: TableOfContentsNative_1.defaultProps.maxHeadingLevel,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(TableOfContents_module_scss_1.default.themeVars),
@@ -41,8 +41,17 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP_CHILD}`]: "$fontSize-small",
         [`wordWrap-${COMP_CHILD}`]: "break-word",
         [`paddingVertical-${COMP_CHILD}`]: "$space-1",
-        [`paddingHorizontal-${COMP_CHILD}`]: "$space-1",
+        [`paddingLeft-${COMP_CHILD}`]: "$space-1",
+        [`paddingLeft-${COMP_CHILD}-level-2`]: "$space-3",
+        [`paddingLeft-${COMP_CHILD}-level-3`]: "$space-5",
+        [`paddingLeft-${COMP_CHILD}-level-4`]: "$space-6",
+        [`paddingLeft-${COMP_CHILD}-level-5`]: "$space-6",
+        [`paddingLeft-${COMP_CHILD}-level-6`]: "$space-6",
         [`fontWeight-${COMP_CHILD}`]: "$fontWeight-bold",
+        [`fontWeight-${COMP_CHILD}-level-3`]: "normal",
+        [`fontWeight-${COMP_CHILD}-level-4`]: "normal",
+        [`fontWeight-${COMP_CHILD}-level-5`]: "normal",
+        [`fontWeight-${COMP_CHILD}-level-6`]: "normal",
         [`fontStyle-${COMP_CHILD}-level-6`]: "italic",
         [`color-${COMP_CHILD}--active`]: "$color-primary-500",
     },

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableOfContents = void 0;
+exports.TableOfContents = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@remix-run/react");
@@ -13,7 +13,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
 const hooks_1 = require("../../components-core/utils/hooks");
-exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling, maxHeadingLevel = 6 }, forwardedRef) {
+exports.defaultProps = {
+    smoothScrolling: false,
+    maxHeadingLevel: 6,
+};
+exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling = exports.defaultProps.smoothScrolling, maxHeadingLevel = exports.defaultProps.maxHeadingLevel }, forwardedRef) {
     const tocRef = (0, react_1.useRef)(null);
     const { headings, scrollToAnchor, subscribeToActiveAnchorChange, activeAnchorId: initialActiveAnchorId } = (0, TableOfContentsContext_1.useTableOfContents)();
     const [activeAnchorId, setActiveId] = (0, react_1.useState)(initialActiveAnchorId);

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

@@ -18,13 +18,13 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component provides a tabbed layout where each tab has a clickable label and content.`,
     props: {
         activeTab: (0, ComponentDefs_1.d)(`This property indicates the index of the active tab. The indexing starts from 0, ` +
-            `representing the starting (leftmost) tab.`),
+            `representing the starting (leftmost) tab. If not set, the first tab is selected by default.`),
         orientation: {
             description: `This property indicates the orientation of the component. In horizontal orientation, ` +
                 `the tab sections are laid out on the left side of the content panel, while in vertical ` +
                 `orientation, the buttons are at the top.`,
             availableValues: ["horizontal", "vertical"],
-            defaultValue: "vertical",
+            defaultValue: TabsNative_1.defaultProps.orientation,
             valueType: "string",
         },
         tabTemplate: (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`),

package/dist/scripts/src/components/Tabs/TabsNative.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.Tabs = void 0;
+exports.Tabs = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const RTabs = __importStar(require("@radix-ui/react-tabs"));
@@ -44,7 +44,12 @@ const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
 const misc_1 = require("../../components-core/utils/misc");
 const TabContext_1 = require("../Tabs/TabContext");
 const classnames_1 = __importDefault(require("classnames"));
-exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientation = "horizontal", tabRenderer, style, children, registerComponentApi, className, distributeEvenly = false, }, forwardedRef) {
+exports.defaultProps = {
+    activeTab: 0,
+    orientation: "horizontal",
+    distributeEvenly: false,
+};
+exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defaultProps.activeTab, orientation = exports.defaultProps.orientation, tabRenderer, style, children, registerComponentApi, className, distributeEvenly = exports.defaultProps.distributeEvenly, }, forwardedRef) {
     const { tabItems, tabContextValue } = (0, TabContext_1.useTabContextValue)();
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(activeTab);
     const currentTab = (0, react_1.useMemo)(() => {

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

@@ -37,17 +37,18 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         },
         maxLines: (0, ComponentDefs_1.d)("This property determines the maximum number of lines the component can wrap to. " +
             "If there is no space to display all the contents, the component displays up to as " +
-            "many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines."),
+            "many lines as specified in this property. When the value is not defined, there is " +
+            "no limit on the displayed lines."),
         preserveLinebreaks: {
             description: `This property indicates if linebreaks should be preserved when displaying text.`,
             valueType: "boolean",
-            defaultValue: "false",
+            defaultValue: TextNative_1.defaultProps.preserveLinebreaks,
         },
         ellipses: {
             description: "This property indicates whether ellipses should be displayed when the text is " +
                 "cropped (\`true\`) or not (\`false\`).",
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: TextNative_1.defaultProps.ellipses,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Text_module_scss_1.default.themeVars),
@@ -56,7 +57,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`borderStyle-${COMP}`]: "solid",
         [`fontSize-${COMP}`]: "$fontSize-small",
         [`borderWidth-${COMP}`]: "$space-0",
-        [`lineHeight-${COMP}-codefence`]: "1.4",
+        [`lineHeight-${COMP}-codefence`]: "1.5",
         [`fontWeight-${COMP}-abbr`]: "$fontWeight-bold",
         [`textTransform-${COMP}-abbr`]: "uppercase",
         [`fontSize-${COMP}-secondary`]: "$fontSize-small",
@@ -64,13 +65,13 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`textColor-${COMP}`]: "$textColor-primary",
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
-        [`fontSize-${COMP}-codefence`]: "$fontSize-small",
+        [`fontSize-${COMP}-codefence`]: "$fontSize-code",
         [`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",
+        [`paddingHorizontal-${COMP}-code`]: "$space-0_5",
         [`paddingBottom-${COMP}-code`]: "2px",
         [`textDecorationLine-${COMP}-deleted`]: "line-through",
         [`textDecorationLine-${COMP}-inserted`]: "underline",
@@ -93,7 +94,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP}-small`]: "$fontSize-small",
         [`lineHeight-${COMP}-small`]: "$lineHeight-tight",
         [`letterSpacing-${COMP}-caption`]: "0.05rem",
-        [`fontSize-${COMP}-placeholder`]: "$fontSize-small",
+        [`fontSize-${COMP}-placeholder`]: "$fontSize-smaller",
         [`fontFamily-${COMP}-codefence`]: "$fontFamily-monospace",
         [`paddingHorizontal-${COMP}-codefence`]: "$space-3",
         [`paddingVertical-${COMP}-codefence`]: "$space-2",
@@ -109,18 +110,18 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
         [`marginTop-${COMP}-markdown`]: "$space-3",
         [`marginBottom-${COMP}-markdown`]: "$space-6",
-        [`backgroundColor-${COMP}-code`]: "rgba($color-surface-100-rgb, .4)",
+        [`backgroundColor-${COMP}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
         [`borderColor-${COMP}-code`]: "$color-surface-100",
-        [`backgroundColor-${COMP}-keyboard`]: "rgba($color-surface-100-rgb, .4)",
+        [`backgroundColor-${COMP}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
         [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
-        [`backgroundColor-${COMP}-marked`]: "rgba($color-primary-200-rgb, .4)",
+        [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",
         [`color-${COMP}-placeholder`]: "$color-surface-500",
         [`color-${COMP}-codefence`]: "$color-surface-900",
         [`color-${COMP}-subheading`]: "$textColor-secondary",
         [`color-${COMP}-secondary`]: "$textColor-secondary",
         dark: {
-            [`backgroundColor-${COMP}-marked`]: "rgba($color-primary-400-rgb, .4)",
-        }
+            [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)",
+        },
     },
 });
 exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {
@@ -128,5 +129,5 @@ exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, e
     const variantSpecificProps = Object.fromEntries(Object.entries(variantSpecific)
         .filter(([key, _]) => abstractions_1.VariantPropsKeys.includes(key))
         .map(([key, value]) => [key, extractValue(value)]));
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ variant: extractValue(variant), maxLines: extractValue.asOptionalNumber(maxLines), style: layoutCss, preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true) }, variantSpecificProps, { children: extractValue.asDisplayText(value) || renderChild(node.children) })));
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ variant: extractValue(variant), maxLines: extractValue.asOptionalNumber(maxLines), style: layoutCss, preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, TextNative_1.defaultProps.preserveLinebreaks), ellipses: extractValue.asOptionalBoolean(ellipses, TextNative_1.defaultProps.ellipses) }, variantSpecificProps, { children: extractValue.asDisplayText(value) || renderChild(node.children) })));
 });

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
+exports.Text = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
@@ -22,8 +22,13 @@ const classnames_1 = __importDefault(require("classnames"));
 const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
 const css_utils_1 = require("../../components-core/utils/css-utils");
 const abstractions_1 = require("../abstractions");
+exports.defaultProps = {
+    maxLines: 0,
+    preserveLinebreaks: false,
+    ellipses: true,
+};
 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"]);
+    var { uid, variant, maxLines = exports.defaultProps.maxLines, style, children, preserveLinebreaks = exports.defaultProps.preserveLinebreaks, ellipses = exports.defaultProps.ellipses } = _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

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

@@ -26,7 +26,7 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
             description: "This optional boolean property indicates whether pressing the \`Enter\` key on the " +
                 "keyboard prompts the parent \`Form\` component to submit.",
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: TextAreaNative_1.defaultProps.enterSubmits,
         },
         escResets: {
             description: `This boolean property indicates whether the ${COMP} contents should be reset when pressing ` +
@@ -34,12 +34,14 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: false,
         },
-        maxRows: (0, ComponentDefs_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` can grow.`),
-        minRows: (0, ComponentDefs_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink.`),
+        maxRows: (0, ComponentDefs_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` ` +
+            "can grow. If not set, the number of rows is unlimited."),
+        minRows: (0, ComponentDefs_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink. ` +
+            `If not set, the minimum number of rows is 1.`),
         rows: {
             description: `Specifies the number of rows the component initially has.`,
             valueType: "number",
-            defaultValue: 2,
+            defaultValue: TextAreaNative_1.defaultProps.rows,
         },
         autoSize: {
             description: `If set to \`true\`, this boolean property enables the \`${COMP}\` to resize ` +
@@ -59,7 +61,8 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        resize: { description: `This optional property specifies in which dimensions can the \`TextArea\` ` +
+        resize: {
+            description: `This optional property specifies in which dimensions can the \`TextArea\` ` +
                 `be resized by the user.`,
             availableValues: exports.resizeOptionsMd,
         },

package/dist/scripts/src/components/TextArea/TextAreaNative.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.TextArea = exports.resizeOptionKeys = void 0;
+exports.TextArea = exports.defaultProps = exports.resizeOptionKeys = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
@@ -53,7 +53,24 @@ const resizeMap = {
     vertical: TextArea_module_scss_1.default.resizeVertical,
     both: TextArea_module_scss_1.default.resizeBoth,
 };
-exports.TextArea = (0, react_1.forwardRef)(function TextArea({ id, value = "", placeholder = "", required = false, readOnly = false, allowCopy = true, updateState = constants_1.noop, validationStatus, autoFocus = false, initialValue = "", resize, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, controlled = true, enterSubmits = true, escResets, style, registerComponentApi, autoSize, maxRows, minRows, maxLength, rows = 2, enabled = true, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
+exports.defaultProps = {
+    value: "",
+    placeholder: "",
+    required: false,
+    readOnly: false,
+    allowCopy: true,
+    updateState: constants_1.noop,
+    autoFocus: false,
+    initialValue: "",
+    onDidChange: constants_1.noop,
+    onFocus: constants_1.noop,
+    onBlur: constants_1.noop,
+    controlled: true,
+    enterSubmits: true,
+    rows: 2,
+    enabled: true
+};
+exports.TextArea = (0, react_1.forwardRef)(function TextArea({ id, value = exports.defaultProps.value, placeholder = exports.defaultProps.placeholder, required = exports.defaultProps.required, readOnly = exports.defaultProps.readOnly, allowCopy = exports.defaultProps.allowCopy, updateState = exports.defaultProps.updateState, validationStatus, autoFocus = exports.defaultProps.autoFocus, initialValue = exports.defaultProps.initialValue, resize, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, controlled = exports.defaultProps.controlled, enterSubmits = exports.defaultProps.enterSubmits, escResets, style, registerComponentApi, autoSize, maxRows, minRows, maxLength, rows = exports.defaultProps.rows, enabled = exports.defaultProps.enabled, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
     // --- The component is initially unfocused
     const inputRef = (0, react_1.useRef)(null);
     const [cursorPosition, setCursorPosition] = (0, react_1.useState)(null);