@axa-fr/design-system-slash-react 2.0.6-alpha.1 → 2.0.6-alpha.11

package/dist/Form/Select/SelectDefault.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useState } from "react";
 import { SelectBase } from "./SelectBase";
-const SelectDefault = forwardRef(({ onChange, forceDisplayPlaceholder = false, value, placeholder = "- Select -", id, children, ...otherProps }, inputRef) => {
+const SelectDefault = forwardRef(({ onChange, forceDisplayPlaceholder = false, value, defaultValue, required, placeholder = "- Select -", id, children, ...otherProps }, inputRef) => {
     const [hasHandleChangeOnce, setHasHandleChangeOnce] = useState(false);
     const generatedId = useId();
     const inputId = id ?? generatedId;
-    const childrenWithDefault = (_jsxs(_Fragment, { children: [!(hasHandleChangeOnce || otherProps.defaultValue !== undefined) && (_jsx("option", { value: "", children: placeholder })), children] }));
-    return (_jsx(SelectBase, { ...otherProps, id: inputId, value: value, onChange: (e) => {
+    const childrenWithDefault = (_jsxs(_Fragment, { children: [(!required || !(hasHandleChangeOnce || defaultValue || value)) && (_jsx("option", { value: "", children: placeholder })), children] }));
+    return (_jsx(SelectBase, { ...otherProps, id: inputId, value: value, defaultValue: defaultValue, required: required, onChange: (e) => {
             if (onChange) {
                 onChange(e);
             }

package/dist/Form/Select/SelectDefaultWithOptions.js

@@ -15,14 +15,21 @@ import { SelectBase } from "./SelectBase";
  * ```
  * It allows you to use the `optgroup` tag for example.
  */
-export const SelectDefaultWithOptions = forwardRef(({ onChange, forceDisplayPlaceholder = false, value, placeholder = "- Select -", options, id, ...otherProps }, inputRef) => {
+export const SelectDefaultWithOptions = forwardRef(({ onChange, forceDisplayPlaceholder = false, value, defaultValue, required, placeholder = "- Select -", options, id, ...otherProps }, inputRef) => {
     const [hasHandleChangeOnce, setHasHandleChangeOnce] = useState(false);
     const generatedId = useId();
     const inputId = id ?? generatedId;
-    const newOptions = useMemo(() => hasHandleChangeOnce || otherProps.defaultValue !== undefined
+    const newOptions = useMemo(() => (hasHandleChangeOnce || defaultValue || value) && required
         ? options
-        : [{ value: "", label: placeholder }, ...options], [hasHandleChangeOnce, options, otherProps.defaultValue, placeholder]);
-    return (_jsx(SelectBase, { ...otherProps, id: inputId, value: value, options: newOptions, onChange: (e) => {
+        : [{ value: "", label: placeholder }, ...options], [
+        hasHandleChangeOnce,
+        options,
+        defaultValue,
+        value,
+        required,
+        placeholder,
+    ]);
+    return (_jsx(SelectBase, { ...otherProps, id: inputId, value: value, defaultValue: defaultValue, options: newOptions, onChange: (e) => {
             if (onChange) {
                 onChange(e);
             }

package/dist/Form/core/Field.js

@@ -36,6 +36,7 @@ export const Field = ({ classNameContainerInput = "col-md-10", classNameContaine
                             errorId,
                             disabled,
                             ariaInvalid: isInvalid,
+                            required,
                             ...otherProps,
                         }) }), forceDisplayMessage ? (_jsx(FieldError, { message: message, messageType: messageType, errorId: errorId })) : (_jsx(HelpMessage, { message: helpMessage, id: errorId })), appendChildren] })] }));
 };

package/dist/utilities/helpers/getClassName.d.ts

@@ -0,0 +1,20 @@
+type getClassNameParams = {
+    baseClassName: string;
+    modifiers?: Array<string | boolean | undefined>;
+    className?: string;
+};
+/**
+ * Generates a CSS class string from a base class name, optional modifiers, and an additional class name.
+ *
+ * @param {string} params.baseClassName - The base class name (required).
+ * @param {Array<string|boolean|undefined>} [params.modifiers] - List of modifiers to append as `${baseClassName}--{modifier}`. Falsy values are ignored.
+ * @param {string} [params.className] - Additional class name(s) to append to the final string.
+ * @returns {string} The concatenated CSS class string, separated by spaces.
+ *
+ * @example
+ * const isLarge = false;
+ * getClassName({ baseClassName: 'af-button', modifiers: ['primary', isLarge && 'large'], className: 'custom-class' })
+ * // Returns: 'af-button af-button--primary custom-class'
+ */
+export declare const getClassName: ({ baseClassName, modifiers, className, }: getClassNameParams) => string;
+export {};

package/dist/utilities/helpers/getClassName.js

@@ -0,0 +1,24 @@
+/**
+ * Generates a CSS class string from a base class name, optional modifiers, and an additional class name.
+ *
+ * @param {string} params.baseClassName - The base class name (required).
+ * @param {Array<string|boolean|undefined>} [params.modifiers] - List of modifiers to append as `${baseClassName}--{modifier}`. Falsy values are ignored.
+ * @param {string} [params.className] - Additional class name(s) to append to the final string.
+ * @returns {string} The concatenated CSS class string, separated by spaces.
+ *
+ * @example
+ * const isLarge = false;
+ * getClassName({ baseClassName: 'af-button', modifiers: ['primary', isLarge && 'large'], className: 'custom-class' })
+ * // Returns: 'af-button af-button--primary custom-class'
+ */
+export const getClassName = ({ baseClassName, modifiers = [], className = "", }) => {
+    const parsedModifiers = modifiers
+        .filter(Boolean)
+        .map((modifier) => `${baseClassName}--${modifier}`);
+    const classList = [
+        baseClassName,
+        ...parsedModifiers,
+        ...className.split(" "),
+    ].filter(Boolean);
+    return Array.from(new Set(classList)).join(" ");
+};

package/dist/utilities/helpers/getComponentClassName.d.ts

@@ -1,4 +1,5 @@
 /**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
  * Generates a component class name string based on provided class names and modifiers.
  *
  * @param {string} [className] - The base class name.
@@ -12,5 +13,8 @@ type getComponentClassNameWithUserClassnameParams = {
     classModifier?: string;
     componentClassName: string;
 };
+/**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
+ */
 export declare const getComponentClassNameWithUserClassname: ({ componentClassName, userClassName, classModifier, }: getComponentClassNameWithUserClassnameParams) => string;
 export {};

package/dist/utilities/helpers/getComponentClassName.js

@@ -12,6 +12,7 @@ const listClassModifier = (classModifier) => {
     return classModifier.split(" ");
 };
 /**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
  * Generates a component class name string based on provided class names and modifiers.
  *
  * @param {string} [className] - The base class name.
@@ -34,6 +35,9 @@ export const getComponentClassName = (className, classModifier, defaultClassName
     });
     return classNames(classNameToUse, modifiersObject);
 };
+/**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
+ */
 export const getComponentClassNameWithUserClassname = ({ componentClassName, userClassName, classModifier, }) => {
     // Fail fast, when no className or componentClassName we don't want to loop on modifier
     if (!componentClassName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "2.0.6-alpha.1",
+  "version": "2.0.6-alpha.11",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "2.0.6-alpha.1",
+    "@axa-fr/design-system-slash-css": "2.0.6-alpha.11",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"