@lumx/core 4.1.0 → 4.1.1-alpha.1

package/js/types/AriaAttributes.d.ts

@@ -0,0 +1,2 @@
+import type { AriaAttributes } from 'react';
+export type { AriaAttributes };

package/js/types/Booleanish.d.ts

@@ -0,0 +1 @@
+export type Booleanish = boolean | 'true' | 'false';

package/js/types/CommonRef.d.ts

@@ -0,0 +1,4 @@
+export type CommonRef<T = HTMLElement> = {
+    readonly current?: T | null;
+    value?: T;
+};

package/js/types/HasAriaDisabled.d.ts

@@ -0,0 +1,5 @@
+import { Booleanish } from './Booleanish';
+export interface HasAriaDisabled {
+    /** Similar to `disabled` but does not block pointer events or focus */
+    'aria-disabled'?: Booleanish;
+}

package/js/types/HasPolymorphicAs.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import { ElementType } from './JSXElement';
+export type HasPolymorphicAs<E extends ElementType> = React.ComponentPropsWithoutRef<E> & {
+    /**
+     * Customize the rendered component.
+     */
+    as?: E;
+};

package/js/types/HasRequiredLinkHref.d.ts

@@ -0,0 +1,3 @@
+export type HasRequiredLinkHref<E> = E extends 'a' ? {
+    href: string;
+} : Record<string, unknown>;

package/js/types/JSXElement.d.ts

@@ -1,2 +1,3 @@
 import type React from 'react';
 export type JSXElement = boolean | number | string | React.JSX.Element | Iterable<JSXElement> | undefined | null;
+export type ElementType = React.ElementType;

package/js/types/index.d.ts

@@ -5,7 +5,7 @@ export type { HasClassName } from './HasClassName';
 export type { HasCloseMode } from './HasCloseMode';
 export type { HasTheme } from './HasTheme';
 export type { GenericProps } from './GenericProps';
-export type { JSXElement } from './JSXElement';
+export type { JSXElement, ElementType } from './JSXElement';
 export type { HeadingElement } from './HeadingElement';
 export type { Point } from './Point';
 export type { Predicate } from './Predicate';
@@ -16,3 +16,8 @@ export type { LumxClassName } from './LumxClassName';
 export type { Direction } from './Direction';
 export type { Spacing } from './Spacing';
 export type { ObjectValues } from './ObjectValues';
+export type { HasRequiredLinkHref } from './HasRequiredLinkHref';
+export type { HasPolymorphicAs } from './HasPolymorphicAs';
+export type { CommonRef } from './CommonRef';
+export type { HasAriaDisabled } from './HasAriaDisabled';
+export type { AriaAttributes } from './AriaAttributes';

package/lumx.css

@@ -12797,6 +12797,7 @@ table {
 .lumx-user-block {
   display: flex;
   align-items: center;
+  min-width: 0;
 }
 .lumx-user-block--orientation-vertical {
   flex-direction: column;
@@ -12819,13 +12820,12 @@ table {
 .lumx-user-block__wrapper {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 .lumx-user-block--orientation-vertical .lumx-user-block__wrapper {
   align-items: center;
 }
 .lumx-user-block__name {
-  width: -moz-fit-content;
-  width: fit-content;
   outline: none;
   font-size: 14px;
   font-weight: var(--lumx-typography-interface-subtitle1-font-weight);

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.1.0",
+        "@lumx/icons": "^4.1.1-alpha.1",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -36,11 +36,12 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.1.0",
+    "version": "4.1.1-alpha.1",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/user-event": "^14.6.1",
         "@types/react": "^18.3.24",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
@@ -58,5 +59,6 @@
         "vite": "^6.3.5",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^3.0.0"
-    }
+    },
+    "stableVersion": "4.1.0"
 }

package/scss/components/user-block/_index.scss

@@ -9,6 +9,7 @@
 
     display: flex;
     align-items: center;
+    min-width: 0;
 
     &--orientation-vertical {
         flex-direction: column;
@@ -42,6 +43,7 @@
     &__wrapper {
         display: flex;
         flex-direction: column;
+        min-width: 0;
 
         #{$self}--orientation-vertical & {
             align-items: center;
@@ -49,14 +51,12 @@
     }
 
     &__name {
-        width: fit-content;
         outline: none;
 
         #{$self}--size-xs & {
             @include lumx-typography("body1");
         }
 
-
         @include lumx-typography("subtitle1");
 
         #{$self}--orientation-vertical & {