xmlui 0.9.15 → 0.9.17

package/dist/scripts/src/components-core/theming/layout-resolver.js

@@ -25,7 +25,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
     }
     // --- Dimensions
     collectCss("width");
-    const horizontalStarSize = getHorizontalStartSize(result.cssProps.width, layoutContext);
+    const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
     if (horizontalStarSize !== null) {
         // --- We use "flex" when width is in start-size and allow shrinking
         result.cssProps.flex = horizontalStarSize;
@@ -34,7 +34,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
     collectCss("minWidth");
     collectCss("maxWidth");
     collectCss("height");
-    const verticalStarSize = getVerticalStartSize(result.cssProps.height, layoutContext);
+    const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
     if (verticalStarSize !== null) {
         // --- We use "flex" when width is in start-size and allow shrinking
         result.cssProps.flex = verticalStarSize;
@@ -236,7 +236,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
         }
     }
     // --- Checks if the specified size is a star size and the orientation is horizontal
-    function getHorizontalStartSize(size, layoutContext) {
+    function getHorizontalStarSize(size, layoutContext) {
         if (!size)
             return null;
         const orientation = getOrientation(layoutContext);
@@ -245,7 +245,7 @@ function resolveLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, layoutContex
             : null;
     }
     // --- Checks if the specified size is a star size and the orientation is vertical
-    function getVerticalStartSize(size, layoutContext) {
+    function getVerticalStarSize(size, layoutContext) {
         if (!size)
             return null;
         const orientation = getOrientation(layoutContext);

package/dist/scripts/src/components-core/utils/extractParam.js

@@ -188,6 +188,13 @@ function resolveAndCleanProps(props, extractValue, layoutCss = {}, resourceExtra
     delete resultProps.radiusTopRight;
     delete resultProps.radiusBottomLeft;
     delete resultProps.radiusBottomRight;
+    // --- Delete pseudo CSS properties
+    delete resultProps.paddingHorizontal;
+    delete resultProps.paddingVertical;
+    delete resultProps.marginHorizontal;
+    delete resultProps.marginVertical;
+    delete resultProps.borderHorizontal;
+    delete resultProps.borderVertical;
     return result;
 }
 /**

package/dist/style.css

@@ -1617,7 +1617,7 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_qcc08_13 {
+._wrapper_1c9ty_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -1627,138 +1627,191 @@ See this source for details: https://css-tricks.com/line-clampin/
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._contentWrapper_1c9ty_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._navPanelWrapper_1c9ty_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._PagesWrapper_1c9ty_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._footerWrapper_1c9ty_41 {
   position: static;
 }
-._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._contentWrapper_1c9ty_27 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._PagesWrapper_1c9ty_37 {
   min-height: initial;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._footerWrapper_1c9ty_41 {
   position: static;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 {
   scroll-padding-top: var(--header-height);
   min-height: 100%;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._navPanelWrapper_1c9ty_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._navPanelWrapper_1c9ty_33 {
   width: var(--xmlui-width-navPanel-App);
   position: sticky;
   height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
   top: var(--header-height);
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapper_1c9ty_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 {
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._footerWrapper_1c9ty_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 {
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 {
+  min-height: 100%;
+  height: 100%;
+  overflow: auto;
+  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._header_1c9ty_108 {
+  max-width: var(--xmlui-maxWidth-App);
+  margin: auto;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._navPanelWrapper_1c9ty_33 {
+  width: var(--xmlui-width-navPanel-App);
+  position: sticky;
+  height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
+  top: var(--header-height);
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapper_1c9ty_37 {
+  overflow: initial;
+  min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 {
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
+  position: sticky;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 > div {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 > div {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._content_qcc08_27 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._content_1c9ty_27 {
+  margin-inline: calc(-1 * var(--scrollbar-width));
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._contentWrapper_1c9ty_27 {
+  padding-inline: var(--scrollbar-width);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 {
+  scroll-padding-top: var(--header-height);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._content_1c9ty_27 {
+  width: var(--xmlui-maxWidth-App);
+  margin-inline: calc(-1 * var(--scrollbar-width));
+  margin: auto;
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._contentWrapper_1c9ty_27 {
+  padding-inline: var(--scrollbar-width);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._headerWrapper_1c9ty_138 > div {
+  width: var(--xmlui-maxWidth-App);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) {
   overflow: hidden;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._content_qcc08_27 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._content_1c9ty_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._contentWrapper_1c9ty_27 {
   overflow: initial;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapper_1c9ty_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapperInner_qcc08_90 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapperInner_1c9ty_90 {
   min-height: 100%;
   height: 0;
 }
-._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 {
+._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 {
   scrollbar-gutter: auto;
 }
-._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 ._PagesWrapper_1c9ty_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_qcc08_105 {
+._headerWrapper_1c9ty_138 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -1767,17 +1820,17 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-header-App);
   background-color: var(--xmlui-backgroundColor-AppHeader);
 }
-._headerWrapper_qcc08_105._sticky_qcc08_44 {
+._headerWrapper_1c9ty_138._sticky_1c9ty_44 {
   position: sticky;
 }
 
-._content_qcc08_27 {
+._content_1c9ty_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
 }
 
-._contentWrapper_qcc08_27 {
+._contentWrapper_1c9ty_27 {
   position: relative;
   min-width: 0;
   flex: 1;
@@ -1788,21 +1841,21 @@ See this source for details: https://css-tricks.com/line-clampin/
   border-left: var(--xmlui-borderLeft-content-App);
 }
 
-._navPanelWrapper_qcc08_33 {
+._navPanelWrapper_1c9ty_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_qcc08_33:empty {
+._navPanelWrapper_1c9ty_33:empty {
   display: none;
 }
 
-._PagesWrapper_qcc08_37 {
+._PagesWrapper_1c9ty_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_qcc08_90 {
+._PagesWrapperInner_1c9ty_90 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -1820,7 +1873,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
+._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
   padding-top: var(--page-padding-top-override, var(--page-padding-top));
   padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
   padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -1832,7 +1885,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_qcc08_41 {
+._footerWrapper_1c9ty_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.

package/dist/xmlui-metadata.mjs

@@ -3090,7 +3090,7 @@ const ThemeMd = createMetadata({
   },
   opaque: true
 });
-const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
+const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "maxWidth-App": "var(--xmlui-maxWidth-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
 const styles$L = {
   themeVars: themeVars$I
 };
@@ -3359,6 +3359,7 @@ function getAppLayoutOrientation(appLayout) {
     case "vertical":
     case "vertical-sticky":
     case "vertical-full-header":
+    case "vertical-constrained-width":
       return "vertical";
     default:
       return "horizontal";
@@ -5224,7 +5225,7 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
     result.cssProps.flexShrink = 0;
   }
   collectCss("width");
-  const horizontalStarSize = getHorizontalStartSize(result.cssProps.width, layoutContext);
+  const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
   if (horizontalStarSize !== null) {
     result.cssProps.flex = horizontalStarSize;
     result.cssProps.flexShrink = 1;
@@ -5232,7 +5233,7 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
   collectCss("minWidth");
   collectCss("maxWidth");
   collectCss("height");
-  const verticalStarSize = getVerticalStartSize(result.cssProps.height, layoutContext);
+  const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
   if (verticalStarSize !== null) {
     result.cssProps.flex = verticalStarSize;
     result.cssProps.flexShrink = 1;
@@ -5416,12 +5417,12 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
       result.cssProps[propCssName || prop] = value;
     }
   }
-  function getHorizontalStartSize(size, layoutContext2) {
+  function getHorizontalStarSize(size, layoutContext2) {
     if (!size) return null;
     const orientation = getOrientation(layoutContext2);
     return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
   }
-  function getVerticalStartSize(size, layoutContext2) {
+  function getVerticalStarSize(size, layoutContext2) {
     if (!size) return null;
     const orientation = getOrientation(layoutContext2);
     return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
@@ -12680,7 +12681,7 @@ const ComboboxOption = forwardRef(function Combobox(option, forwardedRef) {
       },
       "data-state": selected2 ? "checked" : void 0,
       keywords,
-      children: /* @__PURE__ */ jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: /* @__PURE__ */ jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
         optionLabelRenderer ? optionLabelRenderer({ label: label2, value }) : label2,
         selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
       ] }) })
@@ -12708,7 +12709,7 @@ const SelectOption = React__default.forwardRef(
   (option, ref) => {
     const { value, label: label2, enabled: enabled2 = true } = option;
     const { onOptionRemove, onOptionAdd } = useOption();
-    const { optionLabelRenderer, optionRenderer } = useSelect();
+    const { optionLabelRenderer, optionRenderer, value: selectedValue } = useSelect();
     useLayoutEffect(() => {
       onOptionAdd(option);
       return () => onOptionRemove(option);
@@ -12717,7 +12718,7 @@ const SelectOption = React__default.forwardRef(
       label: label2,
       value,
       enabled: enabled2
-    }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ItemText, { className: styles$o.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label: label2 }) : label2 }),
       /* @__PURE__ */ jsx("span", { className: styles$o.selectItemIndicator, children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) }) })
     ] }) }) });
@@ -18297,6 +18298,10 @@ const DataSourceMd = createMetadata({
     },
     nextPageSelector: {
       description: `When using \`${COMP$a}\` with paging, the response may contain information about the previous and next page. This property defines the selector that extracts the next page information from the response deserialized to an object.`
+    },
+    structuralSharing: {
+      description: "This property allows structural sharing. When turned on, `DataSource` will keep the original reference if nothing has changed in the data. If a subset has changed, `DataSource` will keep the unchanged parts and only replace the changed parts. If you do not need this behavior, set this property to `false`.",
+      defaultValue: "true"
     }
   },
   events: {
@@ -18306,7 +18311,9 @@ const DataSourceMd = createMetadata({
     error: d(`This event fires when a request results in an error.`)
   },
   apis: {
-    value: d("This property retrieves the data queried from the source after optional transformations."),
+    value: d(
+      "This property retrieves the data queried from the source after optional transformations."
+    ),
     inProgress: d("This property indicates if the data is being fetched."),
     isRefetching: d("This property indicates if the data is being re-fetched."),
     loaded: d("This property indicates if the data has been loaded."),

package/dist/xmlui-metadata.umd.js

@@ -3087,7 +3087,7 @@
     },
     opaque: true
   });
-  const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
+  const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "maxWidth-App": "var(--xmlui-maxWidth-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
   const styles$L = {
     themeVars: themeVars$I
   };
@@ -3356,6 +3356,7 @@
       case "vertical":
       case "vertical-sticky":
       case "vertical-full-header":
+      case "vertical-constrained-width":
         return "vertical";
       default:
         return "horizontal";
@@ -5221,7 +5222,7 @@
       result.cssProps.flexShrink = 0;
     }
     collectCss("width");
-    const horizontalStarSize = getHorizontalStartSize(result.cssProps.width, layoutContext);
+    const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
     if (horizontalStarSize !== null) {
       result.cssProps.flex = horizontalStarSize;
       result.cssProps.flexShrink = 1;
@@ -5229,7 +5230,7 @@
     collectCss("minWidth");
     collectCss("maxWidth");
     collectCss("height");
-    const verticalStarSize = getVerticalStartSize(result.cssProps.height, layoutContext);
+    const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
     if (verticalStarSize !== null) {
       result.cssProps.flex = verticalStarSize;
       result.cssProps.flexShrink = 1;
@@ -5413,12 +5414,12 @@
         result.cssProps[propCssName || prop] = value;
       }
     }
-    function getHorizontalStartSize(size, layoutContext2) {
+    function getHorizontalStarSize(size, layoutContext2) {
       if (!size) return null;
       const orientation = getOrientation(layoutContext2);
       return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
     }
-    function getVerticalStartSize(size, layoutContext2) {
+    function getVerticalStarSize(size, layoutContext2) {
       if (!size) return null;
       const orientation = getOrientation(layoutContext2);
       return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
@@ -12677,7 +12678,7 @@
         },
         "data-state": selected2 ? "checked" : void 0,
         keywords,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           optionLabelRenderer ? optionLabelRenderer({ label: label2, value }) : label2,
           selected2 && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "checkmark" })
         ] }) })
@@ -12705,7 +12706,7 @@
     (option, ref) => {
       const { value, label: label2, enabled: enabled2 = true } = option;
       const { onOptionRemove, onOptionAdd } = useOption();
-      const { optionLabelRenderer, optionRenderer } = useSelect();
+      const { optionLabelRenderer, optionRenderer, value: selectedValue } = useSelect();
       React.useLayoutEffect(() => {
         onOptionAdd(option);
         return () => onOptionRemove(option);
@@ -12714,7 +12715,7 @@
         label: label2,
         value,
         enabled: enabled2
-      }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      }, selectedValue, false) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactSelect.ItemText, { className: styles$o.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label: label2 }) : label2 }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$o.selectItemIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(reactSelect.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "checkmark" }) }) })
       ] }) }) });
@@ -18294,6 +18295,10 @@
       },
       nextPageSelector: {
         description: `When using \`${COMP$a}\` with paging, the response may contain information about the previous and next page. This property defines the selector that extracts the next page information from the response deserialized to an object.`
+      },
+      structuralSharing: {
+        description: "This property allows structural sharing. When turned on, `DataSource` will keep the original reference if nothing has changed in the data. If a subset has changed, `DataSource` will keep the unchanged parts and only replace the changed parts. If you do not need this behavior, set this property to `false`.",
+        defaultValue: "true"
       }
     },
     events: {
@@ -18303,7 +18308,9 @@
       error: d(`This event fires when a request results in an error.`)
     },
     apis: {
-      value: d("This property retrieves the data queried from the source after optional transformations."),
+      value: d(
+        "This property retrieves the data queried from the source after optional transformations."
+      ),
       inProgress: d("This property indicates if the data is being fetched."),
       isRefetching: d("This property indicates if the data is being re-fetched."),
       loaded: d("This property indicates if the data has been loaded."),