@lumx/core 4.9.0-next.13 → 4.9.0-next.14

package/components-and-utils.css

@@ -5008,7 +5008,17 @@ table {
 /* ==========================================================================
    Combobox
    ========================================================================== */
+.lumx-combobox-input .lumx-text-field__chips {
+  width: -moz-min-content;
+  width: min-content;
+  min-width: 0;
+}
+
 .lumx-combobox-popover {
+  max-height: 50vh;
+  color: var(--lumx-color-dark-N);
+}
+.lumx-combobox-popover__scroll {
   overflow-y: auto;
 }
 
@@ -5031,7 +5041,11 @@ table {
 .lumx-combobox-option-skeleton:nth-child(3n+2) .lumx-skeleton-typography {
   width: min(55%, 170px);
 }
-
+.lumx-combobox-option .lumx-list-item__content {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+}
 .lumx-combobox-option-more-info__popover {
   max-width: 256px;
   padding: 16px;

package/js/components/Combobox/ComboboxOptionSkeleton.d.ts

@@ -13,6 +13,12 @@ export interface ComboboxOptionSkeletonProps extends HasClassName {
     children?: JSXElement;
     /** ref to the root <li> element. */
     ref?: CommonRef;
+    /**
+     * Number of skeleton `<li>` elements to render.
+     * Each is an independent element with `:nth-child` width cycling applied by SCSS.
+     * @default 1
+     */
+    count?: number;
 }
 /**
  * Props that React/Vue wrappers need to re-declare with framework-specific types.

package/js/components/Combobox/ComboboxPopover.d.ts

@@ -35,6 +35,8 @@ export interface ComboboxPopoverProps extends HasClassName {
 export interface ComboboxPopoverComponents {
     /** Popover component (framework-specific). */
     Popover: any;
+    /** FlexBox component (framework-specific). */
+    FlexBox: any;
 }
 /**
  * ComboboxPopover core template.
@@ -47,4 +49,4 @@ export interface ComboboxPopoverComponents {
  * @param components Injected framework-specific components.
  * @return JSX element.
  */
-export declare const ComboboxPopover: (props: ComboboxPopoverProps, { Popover }: ComboboxPopoverComponents) => import("react").JSX.Element;
+export declare const ComboboxPopover: (props: ComboboxPopoverProps, { Popover, FlexBox }: ComboboxPopoverComponents) => import("react").JSX.Element;

package/lumx.css

@@ -5689,7 +5689,17 @@ table {
 /* ==========================================================================
    Combobox
    ========================================================================== */
+.lumx-combobox-input .lumx-text-field__chips {
+  width: -moz-min-content;
+  width: min-content;
+  min-width: 0;
+}
+
 .lumx-combobox-popover {
+  max-height: 50vh;
+  color: var(--lumx-color-dark-N);
+}
+.lumx-combobox-popover__scroll {
   overflow-y: auto;
 }
 
@@ -5712,7 +5722,11 @@ table {
 .lumx-combobox-option-skeleton:nth-child(3n+2) .lumx-skeleton-typography {
   width: min(55%, 170px);
 }
-
+.lumx-combobox-option .lumx-list-item__content {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+}
 .lumx-combobox-option-more-info__popover {
   max-width: 256px;
   padding: 16px;

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.9.0-next.13",
+        "@lumx/icons": "^4.9.0-next.14",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -69,7 +69,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.9.0-next.13",
+    "version": "4.9.0-next.14",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

package/scss/components/combobox/_index.scss

@@ -2,8 +2,23 @@
    Combobox
    ========================================================================== */
 
+// ---- Input -----------------------
+.#{$lumx-base-prefix}-combobox-input {
+    .#{$lumx-base-prefix}-text-field__chips {
+        width: min-content;
+        min-width: 0;
+    }
+}
+
+// ---- Popover -----------------------
+
 .#{$lumx-base-prefix}-combobox-popover {
-    overflow-y: auto;
+    max-height: 50vh;
+    color: var(--lumx-color-dark-N);
+
+    &__scroll {
+        overflow-y: auto;
+    }
 }
 
 // Hide popover and list when there is no option, no state, and no skeleton
@@ -17,28 +32,42 @@
     }
 }
 
+// ---- State -----------------------
+
 .#{$lumx-base-prefix}-combobox-state {
     text-align: center;
 }
 
-// Skeleton option placeholders — width variation via :nth-child cycling
-.#{$lumx-base-prefix}-combobox-option-skeleton {
-    .#{$lumx-base-prefix}-skeleton-typography {
-        width: min(65%, 200px);
-    }
+// ---- Option -----------------------
+
+.#{$lumx-base-prefix}-combobox-option {
+    // Skeleton option placeholders — width variation via :nth-child cycling
+    &-skeleton {
+        .#{$lumx-base-prefix}-skeleton-typography {
+            width: min(65%, 200px);
+        }
 
-    &:nth-child(3n + 1) .#{$lumx-base-prefix}-skeleton-typography {
-        width: min(70%, 230px);
+        &:nth-child(3n + 1) .#{$lumx-base-prefix}-skeleton-typography {
+            width: min(70%, 230px);
+        }
+
+        &:nth-child(3n + 2) .#{$lumx-base-prefix}-skeleton-typography {
+            width: min(55%, 170px);
+        }
     }
 
-    &:nth-child(3n + 2) .#{$lumx-base-prefix}-skeleton-typography {
-        width: min(55%, 170px);
+    // Center option content
+    .#{$lumx-base-prefix}-list-item__content {
+        display: flex;
+        flex-direction: column;
+        justify-items: center;
     }
-}
 
-.#{$lumx-base-prefix}-combobox-option-more-info {
-    &__popover {
-        max-width: $lumx-size-xxl;
-        padding: $lumx-spacing-unit-big;
+    // Option more info popover sizing
+    &-more-info {
+        &__popover {
+            max-width: $lumx-size-xxl;
+            padding: $lumx-spacing-unit-big;
+        }
     }
 }