@lumx/core 4.3.2-alpha.20 → 4.3.2-alpha.22

package/js/components/Flag/index.d.ts

@@ -19,11 +19,11 @@ export declare const COMPONENT_NAME = "Flag";
 export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 export declare const DEFAULT_PROPS: Partial<FlagProps>;
 export declare const block: {
-    (additionalClasses: string[]): string;
-    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
 }, element: {
-    (elem: string, additionalClasses: string[]): string;
-    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
 };
 /**
  * Flag component.

package/js/components/FlexBox/index.d.ts

@@ -34,8 +34,8 @@ export declare const COMPONENT_NAME = "FlexBox";
  */
 export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 export declare const block: {
-    (additionalClasses: string[]): string;
-    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
 };
 /**
  * Get FlexBox component props (className computation).

package/js/components/GridColumn/GridColumn.d.ts

@@ -0,0 +1,48 @@
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+import { Size } from '../../constants';
+export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+export interface GridColumnProps extends HasClassName {
+    /** Customize the root element. */
+    as?: any;
+    /** Children elements. */
+    children?: JSXElement;
+    /** Space between columns and rows. */
+    gap?: GridColumnGapSize;
+    /** Ideal number of columns. */
+    maxColumns?: number;
+    /** Minimum width for each item, reduce the number of column if there is not enough space. */
+    itemMinWidth?: number;
+    /** Custom styles. */
+    style?: any;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "GridColumn";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<GridColumnProps>;
+/**
+ * The GridColumn is a layout component that can display children in a grid
+ * with custom display properties. It also comes with a responsive design,
+ * with a number of column that reduce when there is not enough space for each item.
+ *
+ * @param props Component props.
+ * @return JSX element.
+ */
+export declare const GridColumn: {
+    (props: GridColumnProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-grid-column";
+    defaultProps: Partial<GridColumnProps>;
+};

package/js/components/GridColumn/GridColumnStories.d.ts

@@ -0,0 +1,47 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component, render, }: SetupStoriesOptions<{
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            nbItems: {
+                control: string;
+            };
+            gap: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: (import("./GridColumn").GridColumnGapSize | undefined)[];
+                mapping: Record<string, import("./GridColumn").GridColumnGapSize | undefined> | undefined;
+            };
+            itemMinWidth: {
+                control: string;
+            };
+            maxColumns: {
+                control: string;
+            };
+        };
+        args: {
+            nbItems: number;
+            as?: any;
+            children?: import("react").ReactNode;
+            gap?: import("./GridColumn").GridColumnGapSize | undefined;
+            maxColumns?: number | undefined;
+            itemMinWidth?: number | undefined;
+            style?: any;
+            ref?: import("../../types").CommonRef;
+            className?: string | undefined;
+        };
+    };
+    /** Default grid column displaying a single column */
+    Default: {};
+    /** Grid column with max 4 columns (responsive) */
+    Columns: {
+        args: {
+            maxColumns: number;
+            itemMinWidth: number;
+        };
+    };
+};

package/js/components/GridColumn/GridColumnTests.d.ts

@@ -0,0 +1,12 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    gridColumn: HTMLElement;
+    div: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Message/index.d.ts

@@ -35,11 +35,11 @@ export declare const COMPONENT_NAME = "Message";
  */
 export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 export declare const block: {
-    (additionalClasses: string[]): string;
-    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
 }, element: {
-    (elem: string, additionalClasses: string[]): string;
-    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
 };
 /**
  * Associative map from message kind to color and icon.

package/js/components/Text/index.d.ts

@@ -56,8 +56,8 @@ export declare const COMPONENT_NAME = "Text";
  */
 export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 export declare const block: {
-    (additionalClasses: string[]): string;
-    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
 };
 /**
  * Component default props.

package/js/components/Thumbnail/index.d.ts

@@ -63,11 +63,11 @@ export declare const COMPONENT_NAME = "Thumbnail";
  */
 export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 export declare const block: {
-    (additionalClasses: string[]): string;
-    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
 }, element: {
-    (elem: string, additionalClasses: string[]): string;
-    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: string[]): string;
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
 };
 /**
  * Component default props.

package/js/components/Toolbar/Stories.d.ts

@@ -0,0 +1,46 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component, render, overrides, }: SetupStoriesOptions<{
+    overrides: 'WithBefore' | 'WithAfter' | 'WithAll';
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            label: {
+                control: string;
+            };
+            before: {
+                control: boolean;
+            };
+            after: {
+                control: boolean;
+            };
+        };
+        args: {
+            after?: import("react").ReactNode;
+            before?: import("react").ReactNode;
+            label?: import("react").ReactNode;
+            ref?: import("../../types").CommonRef;
+            className?: string | undefined;
+        };
+    };
+    /** Default toolbar with label */
+    Default: {
+        args: {
+            label: string;
+        };
+    };
+    /** Toolbar with before content */
+    WithBefore: {
+        [x: string]: any;
+    };
+    /** Toolbar with after content */
+    WithAfter: {
+        [x: string]: any;
+    };
+    /** Toolbar with all content areas */
+    WithAll: {
+        [x: string]: any;
+    };
+};

package/js/components/Toolbar/Tests.d.ts

@@ -0,0 +1,12 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    toolbar: HTMLElement;
+    div: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Toolbar/index.d.ts

@@ -0,0 +1,33 @@
+import type { JSXElement, LumxClassName, HasClassName, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface ToolbarProps extends HasClassName {
+    /** After content (placed after the label). */
+    after?: JSXElement;
+    /** Before content (placed before the label). */
+    before?: JSXElement;
+    /** Label content. */
+    label?: JSXElement;
+    /** Component ref. */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const TOOLBAR_NAME = "Toolbar";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof TOOLBAR_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ToolbarProps>;
+/**
+ * Toolbar component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Toolbar: (props: ToolbarProps) => import("react").JSX.Element;

package/js/constants/enums/index.d.ts

@@ -198,3 +198,12 @@ export declare const ColorVariant: {
 export type ColorVariant = ValueOf<typeof ColorVariant>;
 /** ColorPalette with all possible color variant combination */
 export type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
+export declare const REAL_SIZE_FOR_LUMX_SIZE: {
+    xxs: number;
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};

package/js/constants/enums/index.js

@@ -151,5 +151,14 @@ const ColorVariant = {
     L6: 'L6',
     N: 'N',
 };
+const REAL_SIZE_FOR_LUMX_SIZE = {
+    [Size.xxs]: 14,
+    [Size.xs]: 20,
+    [Size.s]: 24,
+    [Size.m]: 36,
+    [Size.l]: 64,
+    [Size.xl]: 128,
+    [Size.xxl]: 256,
+};
 
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };

package/js/constants/index.js

@@ -1,4 +1,4 @@
 export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from './keycodes/index.js';
 export { DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION, SLIDESHOW_TRANSITION_DURATION, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from './components/index.js';
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
 export { VISUALLY_HIDDEN } from './className/index.js';

package/js/types/PartialBy.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Same as `Partial` but for one property only.
+ *
+ * @example PartialBy<Foo, 'bar'> => produces a type almost identical to `Foo` but with the `bar` property as optional.
+ */
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Same as `Partial` but for all except some properties only.
+ *
+ * @example PartialExcept<Foo, 'bar'> => produces a type almost identical to `Foo` but with the `bar` property as it is on the original type.
+ */
+export type PartialExcept<T, K extends keyof T> = Pick<T, K> & Partial<Omit<T, K>>;

package/js/types/index.d.ts

@@ -25,3 +25,4 @@ export type { HasChecked } from './HasChecked';
 export type { HasDisabled } from './HasDisabled';
 export type { AriaAttributes } from './AriaAttributes';
 export type { Selector } from './Selector';
+export type { PartialBy, PartialExcept } from './PartialBy';

package/js/utils/classNames/bem/block.d.ts

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import { type Modifier } from './modifier';
 /**
  * Generates a BEM block + modifier class name string.
@@ -11,5 +12,5 @@ import { type Modifier } from './modifier';
  * block('button'); // 'button'
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
-export declare function block(baseName: string, additionalClasses: string[]): string;
-export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+export declare function block(baseName: string, additionalClasses: ClassValue[]): string;
+export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;

package/js/utils/classNames/bem/element.d.ts

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import type { Modifier } from './modifier';
 /**
  * Creates a BEM element class generator function for the given base class.
@@ -12,5 +13,5 @@ import type { Modifier } from './modifier';
  * element('my-button', 'icon'); // 'my-button__icon'
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
-export declare function element(baseClass: string, elem: string, additionalClasses: string[]): string;
-export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+export declare function element(baseClass: string, elem: string, additionalClasses: ClassValue[]): string;
+export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;

package/js/utils/classNames/bem/index.d.ts

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import { block } from './block';
 import { element } from './element';
 import { type Modifier } from './modifier';
@@ -6,12 +7,12 @@ import { type Modifier } from './modifier';
  */
 export declare function bem(baseName: string): {
     block: {
-        (additionalClasses: string[]): string;
-        (modifiers?: Modifier, additionalClasses?: string[]): string;
+        (additionalClasses: ClassValue[]): string;
+        (modifiers?: Modifier, additionalClasses?: ClassValue[]): string;
     };
     element: {
-        (elem: string, additionalClasses: string[]): string;
-        (elem: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+        (elem: string, additionalClasses: ClassValue[]): string;
+        (elem: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;
     };
     modifier: (modifiers: Modifier) => string;
 };

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.3.2-alpha.20",
+        "@lumx/icons": "^4.3.2-alpha.22",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -24,29 +24,32 @@
     "name": "@lumx/core",
     "exports": {
         "./js/constants": {
-            "default": "./js/constants/index.js",
-            "types": "./js/constants/index.d.ts"
+            "types": "./js/constants/index.d.ts",
+            "default": "./js/constants/index.js"
         },
         "./js/types": {
-            "default": "./js/types/index.js",
-            "types": "./js/types/index.d.ts"
+            "types": "./js/types/index.d.ts",
+            "default": "./js/types/index.js"
         },
         "./js/utils/classNames": {
-            "default": "./js/utils/classNames/index.js",
-            "types": "./js/utils/classNames/index.d.ts"
+            "types": "./js/utils/classNames/index.d.ts",
+            "default": "./js/utils/classNames/index.js"
         },
         "./js/utils/disabledState": {
-            "default": "./js/utils/disabledState/index.js",
-            "types": "./js/utils/disabledState/index.d.ts"
+            "types": "./js/utils/disabledState/index.d.ts",
+            "default": "./js/utils/disabledState/index.js"
         },
         "./js/utils/selectors": {
-            "default": "./js/utils/selectors/index.js",
-            "types": "./js/utils/selectors/index.d.ts"
+            "types": "./js/utils/selectors/index.d.ts",
+            "default": "./js/utils/selectors/index.js"
         },
         "./js/utils": {
-            "default": "./js/utils/index.js",
-            "types": "./js/utils/index.d.ts"
-        }
+            "types": "./js/utils/index.d.ts",
+            "default": "./js/utils/index.js"
+        },
+        "./lumx.css": "./lumx.css",
+        "./css/*": "./css/*",
+        "./scss/*": "./scss/*"
     },
     "publishConfig": {
         "directory": "dist"
@@ -63,7 +66,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.3.2-alpha.20",
+    "version": "4.3.2-alpha.22",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",