@lumx/core 4.0.1-alpha.7 → 4.0.1-alpha.8

package/js/types/JSXElement.d.ts

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

package/js/utils/classNames/spacing/index.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classnames from 'classnames';
 
 /**
  * Returns a lumx classname for the given type, direction and size. For example, for
@@ -31,7 +31,7 @@ function spacing(type, direction, size) {
  * @param spacingConfigs - Array of spacing configurations with direction and size
  * @returns string
  */
-const spacings = (spacingConfigs) => classNames(spacingConfigs.map((spa) => spacing(spa.type, spa.direction, spa.size)));
+const spacings = (spacingConfigs) => classnames(spacingConfigs.map((spa) => spacing(spa.type, spa.direction, spa.size)));
 /**
  * Returns a lumx margin classname for the given direction and size. For example, for
  * arguments direction='right', size='regular' it returns lumx-spacing-margin-right-regular

package/js/utils/events/keyboard.d.ts

@@ -1,24 +1,26 @@
-import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
-type KeyboardEventHandler<E extends KeyboardEvent | ReactKeyboardEvent> = (event: E) => void;
+type KeyboardEvent = {
+    key: string;
+};
+type KeyboardEventHandler<E extends KeyboardEvent> = (event: E) => void;
 /**
  * Make sure the pressed key is the enter key before calling the callback.
  *
  * @param  handler The handler to call on enter/return press.
  * @return The decorated function.
  */
-export declare function onEnterPressed<E extends KeyboardEvent | ReactKeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
+export declare function onEnterPressed<E extends KeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
 /**
  * Make sure the pressed key is the escape key before calling the callback.
  *
  * @param  handler The handler to call on enter/return press.
  * @return The decorated function.
  */
-export declare function onEscapePressed<E extends KeyboardEvent | ReactKeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
+export declare function onEscapePressed<E extends KeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
 /**
  * Handle button key pressed (Enter + Space).
  *
  * @param  handler The handler to call.
  * @return The decorated function.
  */
-export declare function onButtonPressed<E extends KeyboardEvent | ReactKeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
+export declare function onButtonPressed<E extends KeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
 export {};

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.0.1-alpha.7",
+        "@lumx/icons": "^4.0.1-alpha.8",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
@@ -36,12 +36,12 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.0.1-alpha.7",
+    "version": "4.0.1-alpha.8",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.6.3",
-        "@types/react": "^17.0.2",
+        "@types/react": "^18.3.24",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "jsdom": "^27.2.0",

package/_internal/2_dvYIIO.js

@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import isBoolean from 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
-import { getBasicClass } from './CWVyFRGV.js';
-
-/**
- * Enhance isEmpty method to also works with numbers.
- *
- * @param  value The value to check.
- * @return Whether the input value is empty or != 0.
- */
-const _isEmpty = (value) => {
-    if (typeof value === 'number') {
-        return value === 0;
-    }
-    return isEmpty(value);
-};
-/**
- * Return all basic LumX CSS classes which are available for every components.
- *
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  props  All the other props you want to generate a class.
- *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
- *                be used in the classname to represent the value of the given prop.
- * @return All LumX basic CSS classes.
- */
-function handleBasicClasses({ prefix, ...props }) {
-    const otherClasses = {};
-    if (!isEmpty(props)) {
-        Object.keys(props).forEach((prop) => {
-            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])
-                ? props[prop]
-                : !_isEmpty(props[prop]);
-        });
-    }
-    return classNames(prefix, otherClasses);
-}
-
-export { handleBasicClasses };

package/_internal/CWVyFRGV.js

@@ -1,27 +0,0 @@
-import isBoolean from 'lodash/isBoolean';
-import kebabCase from 'lodash/kebabCase';
-
-/**
- * Get the basic CSS class for the given type.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
- * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
- * @return The basic CSS class.
- */
-function getBasicClass({ prefix, type, value, }) {
-    if (isBoolean(value)) {
-        if (!value) {
-            // False value should not return a class.
-            return '';
-        }
-        const booleanPrefixes = ['has', 'is'];
-        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${kebabCase(type)}`;
-        }
-        return `${prefix}--is-${kebabCase(type)}`;
-    }
-    return `${prefix}--${kebabCase(type)}-${value}`;
-}
-
-export { getBasicClass };

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

@@ -1,36 +0,0 @@
-import type { GenericProps, HasTheme } from '../../types';
-import { ColorVariant, ColorWithVariants, Size } from '../../constants';
-export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-/**
- * Defines the props of the component.
- */
-export interface IconProps extends GenericProps, HasTheme {
-    /** Color variant. */
-    color?: ColorWithVariants;
-    /** Lightened or darkened variant of the selected icon color. */
-    colorVariant?: ColorVariant;
-    /** Whether the icon has a shape. */
-    hasShape?: boolean;
-    /**
-     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
-     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
-     */
-    icon: string;
-    /** Size variant. */
-    size?: IconSizes;
-    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
-    alt?: string;
-}
-/**
- * Icon component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export declare const Icon: {
-    (props: IconProps): JSX.Element;
-    displayName: string;
-    className: "lumx-icon";
-    defaultProps: Partial<IconProps>;
-};

package/js/components/Icon/index.js

@@ -1,71 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { mdiAlertCircle } from '@lumx/icons';
-import { handleBasicClasses } from '../../../_internal/2_dvYIIO.js';
-import 'lodash/isBoolean';
-import 'lodash/kebabCase';
-import { resolveColorWithVariants } from '../../../_internal/DPnPEC08.js';
-import classNames from 'classnames';
-import { ColorPalette, Theme, Size } from '../../constants/enums/index.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Icon';
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = 'lumx-icon';
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-/**
- * Icon component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Icon = (props) => {
-    const { className, color: propColor, colorVariant: propColorVariant, hasShape, icon, size, ref, theme, alt, ...forwardedProps } = props;
-    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-    // Color
-    let iconColor = color;
-    if (!iconColor && (hasShape || theme)) {
-        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-    }
-    // Color variant
-    let iconColorVariant = colorVariant;
-    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
-        iconColorVariant = 'L2';
-    }
-    // Size
-    let iconSize = size;
-    if (size && hasShape) {
-        if (size === Size.xxs || size === Size.xs) {
-            iconSize = Size.s;
-        }
-        else if (size === Size.xxl) {
-            iconSize = Size.xl;
-        }
-    }
-    else if (hasShape) {
-        iconSize = Size.m;
-    }
-    return (jsx("i", { ref: ref, ...forwardedProps, className: classNames(className, handleBasicClasses({
-            color: iconColor,
-            colorVariant: iconColorVariant,
-            hasShape,
-            prefix: CLASSNAME,
-            theme,
-            size: iconSize,
-        }), !hasShape && `${CLASSNAME}--no-shape`, !hasShape &&
-            iconColor === ColorPalette.yellow &&
-            icon === mdiAlertCircle &&
-            `${CLASSNAME}--has-dark-layer`, `${CLASSNAME}--path`), children: jsx("svg", { "aria-hidden": alt ? undefined : 'true', role: alt ? 'img' : undefined, "aria-label": alt, height: "1em", preserveAspectRatio: "xMidYMid meet", style: { verticalAlign: '-0.125em' }, viewBox: "0 0 24 24", width: "1em", children: jsx("path", { d: icon, fill: "currentColor" }) }) }));
-};
-Icon.displayName = COMPONENT_NAME;
-Icon.className = CLASSNAME;
-Icon.defaultProps = DEFAULT_PROPS;
-
-export { Icon };

package/js/components/InputHelper/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const INPUT_HELPER_CONFIGURATION: Record<string, {
-    color: string;
-}>;

package/js/components/InputHelper/constants.js

@@ -1,9 +0,0 @@
-import { Kind } from '../../constants/enums/index.js';
-
-const INPUT_HELPER_CONFIGURATION = {
-    [Kind.error]: { color: 'red' },
-    [Kind.success]: { color: 'green' },
-    [Kind.warning]: { color: 'yellow' },
-};
-
-export { INPUT_HELPER_CONFIGURATION };

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

@@ -1,24 +0,0 @@
-import type { GenericProps, HasTheme, JSXElement } from '../../types';
-import { Kind } from '../../constants';
-/**
- * Defines the props of the component.
- */
-export interface InputHelperProps extends GenericProps, HasTheme {
-    /** Helper content. */
-    children: JSXElement;
-    /** Helper variant. */
-    kind?: Kind;
-}
-/**
- * InputHelper component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export declare const InputHelper: {
-    (props: InputHelperProps): JSX.Element;
-    displayName: string;
-    className: "lumx-input-helper";
-    defaultProps: Partial<InputHelperProps>;
-};

package/js/components/InputHelper/index.js

@@ -1,39 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { handleBasicClasses } from '../../../_internal/2_dvYIIO.js';
-import 'lodash/isBoolean';
-import 'lodash/kebabCase';
-import classNames from 'classnames';
-import { Kind } from '../../constants/enums/index.js';
-import { INPUT_HELPER_CONFIGURATION } from './constants.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InputHelper';
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = 'lumx-input-helper';
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-    kind: Kind.info,
-};
-/**
- * InputHelper component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InputHelper = (props) => {
-    const { children, className, kind = DEFAULT_PROPS.kind, theme, ref, ...forwardedProps } = props;
-    const { color } = INPUT_HELPER_CONFIGURATION[kind] || {};
-    return (jsx("p", { ref: ref, ...forwardedProps, className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, theme })), children: children }));
-};
-InputHelper.displayName = COMPONENT_NAME;
-InputHelper.className = CLASSNAME;
-InputHelper.defaultProps = DEFAULT_PROPS;
-
-export { InputHelper };

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

@@ -1,18 +0,0 @@
-import { GenericProps, HasTheme, JSXElement } from '../../types';
-import { Typography } from '../../constants';
-export interface InputLabelProps extends GenericProps, HasTheme {
-    /** Typography variant. */
-    typography?: Typography;
-    /** Label content. */
-    children: JSXElement;
-    /** Native htmlFor property. */
-    htmlFor: string;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-}
-export declare const InputLabel: {
-    (props: InputLabelProps): JSX.Element;
-    displayName: string;
-    className: "lumx-input-label";
-    defaultProps: Partial<InputLabelProps>;
-};

package/js/components/InputLabel/index.js

@@ -1,25 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { handleBasicClasses } from '../../../_internal/2_dvYIIO.js';
-import 'lodash/isBoolean';
-import 'lodash/kebabCase';
-import classNames from 'classnames';
-import '../../constants/enums/index.js';
-import { typography } from '../../utils/classNames/typography/index.js';
-
-const COMPONENT_NAME = 'InputLabel';
-const CLASSNAME = 'lumx-input-label';
-const DEFAULT_PROPS = {};
-const InputLabel = (props) => {
-    const { children, className, htmlFor, isRequired, theme, typography: typography$1, ref, ...forwardedProps } = props;
-    return (jsx("label", { ref: ref, ...forwardedProps, htmlFor: htmlFor, className: classNames(className, handleBasicClasses({
-            prefix: CLASSNAME,
-            isRequired,
-            theme,
-            hasCustomTypography: Boolean(typography$1),
-        }), typography$1 && typography(typography$1)), children: children }));
-};
-InputLabel.displayName = COMPONENT_NAME;
-InputLabel.className = CLASSNAME;
-InputLabel.defaultProps = DEFAULT_PROPS;
-
-export { InputLabel };