@axa-fr/design-system-slash-react 1.0.1 → 1.0.2-RC.2

package/dist/Accordion/Accordion.d.ts

@@ -1,11 +1,8 @@
 import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.scss";
 import React from "react";
 import { CollapseProps } from "./CollapseCard";
-declare const defaultProps: {
-    onlyOne: boolean;
-    className: string;
-};
-export type EnhancedProps = Partial<typeof defaultProps> & {
+import { TDefaultProps } from "./types";
+export type EnhancedProps = Partial<TDefaultProps> & {
     onlyOne?: boolean;
     className?: string;
     classModifier?: string;

package/dist/Accordion/Accordion.js

@@ -5,10 +5,6 @@ import { useId } from "react";
 import { getComponentClassName } from "../utilities";
 import { CollapseCard } from "./CollapseCard";
 const defaultClassName = "af-accordion";
-const defaultProps = {
-    onlyOne: false,
-    className: defaultClassName,
-};
 const Accordion = ({ className, classModifier, children, onlyOne = false, }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
     const id = useId();

package/dist/Accordion/CollapseCard.d.ts

@@ -6,5 +6,7 @@ export type CollapseProps = {
     open?: boolean;
     name?: string;
     onToggle?: React.DetailsHTMLAttributes<HTMLDetailsElement>["onToggle"];
+    className?: string;
+    classModifier?: string;
 };
-export declare const CollapseCard: ({ children, name, title, id, open, onToggle, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CollapseCard: ({ children, name, title, id, open, onToggle, className, classModifier, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/CollapseCard.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Body } from "./Body";
 import { Header } from "./Header";
-export const CollapseCard = ({ children, name, title, id, open, onToggle, }) => {
+import { getComponentClassName } from "../utilities";
+export const CollapseCard = ({ children, name, title, id, open, onToggle, className, classModifier = "", }) => {
     const headerId = id;
-    return (_jsxs("details", { open: open, name: name, className: "af-accordion__details", onToggle: onToggle, children: [_jsx(Header, { id: headerId, children: title }), _jsx(Body, { children: children })] }));
+    let newClassModifier = open ? "open" : "";
+    newClassModifier += ` ${classModifier}`;
+    const componentClassName = getComponentClassName(className, newClassModifier.trim(), "af-accordion__details");
+    return (_jsxs("details", { open: open, name: name, className: componentClassName, onToggle: onToggle, children: [_jsx(Header, { id: headerId, children: title }), _jsx(Body, { children: children })] }));
 };

package/dist/Alert/Alert.d.ts

@@ -8,9 +8,9 @@ export declare enum TypeIcons {
 }
 export type AlertCoreComponentProps = {
     title: string;
-    iconClassName?: string;
+    icon?: string;
     onClose?: MouseEventHandler<HTMLButtonElement>;
     className?: string;
     classModifier?: "error" | "danger" | "info" | "success";
 };
-export declare const Alert: ({ className, onClose, iconClassName, title, children, classModifier, }: PropsWithChildren<AlertCoreComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ className, onClose, icon, title, children, classModifier, }: PropsWithChildren<AlertCoreComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/Alert.js

@@ -8,8 +8,7 @@ export var TypeIcons;
     TypeIcons["info"] = "glyphicon glyphicon-info-sign";
     TypeIcons["success"] = "glyphicon glyphicon-ok";
 })(TypeIcons || (TypeIcons = {}));
-export const Alert = ({ className, onClose, iconClassName, title, children, classModifier = "error", }) => {
+export const Alert = ({ className, onClose, icon, title, children, classModifier = "error", }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-alert");
-    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsxs("div", { className: "af-alert__title", children: [_jsx("div", { className: "af-alert__title-icon", children: _jsx("i", { className: iconClassName ||
-                                TypeIcons[classModifier] }) }), _jsx("div", { className: "af-alert__title-text", children: title }), onClose && (_jsx("button", { type: "button", className: "af-alert__title-icon-close", onClick: onClose, "aria-label": "close", children: _jsx("i", { className: "glyphicon glyphicon-close" }) }))] }), children && (_jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__content-left" }), _jsx("div", { className: "af-alert__content-right", children: children })] }))] }));
+    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsxs("div", { className: "af-alert__title", children: [_jsx("div", { className: "af-alert__title-icon", children: _jsx("i", { className: icon || TypeIcons[classModifier] }) }), _jsx("div", { className: "af-alert__title-text", children: title }), onClose && (_jsx("button", { type: "button", className: "af-alert__title-icon-close", onClick: onClose, "aria-label": "close", children: _jsx("i", { className: "glyphicon glyphicon-close" }) }))] }), children && (_jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__content-left" }), _jsx("div", { className: "af-alert__content-right", children: children })] }))] }));
 };

package/dist/Form/Pass/index.d.ts

@@ -0,0 +1,2 @@
+export { PassInput } from "./PassInput";
+export { Pass } from "./Pass";

package/dist/Form/Pass/index.js

@@ -0,0 +1,2 @@
+export { PassInput } from "./PassInput";
+export { Pass } from "./Pass";

package/dist/Form/Radio/RadioInput.d.ts

@@ -1,7 +1,7 @@
 import { RadioModes } from "./Radio";
 declare const RadioInput: import("react").ForwardRefExoticComponent<Omit<{
     message?: string;
-    messageType: import("../core").MessageTypes;
+    messageType?: import("../core").MessageTypes;
 } & {
     className?: string;
     classModifier?: string;
@@ -17,7 +17,7 @@ declare const RadioInput: import("react").ForwardRefExoticComponent<Omit<{
         hasChange: boolean;
         memory: {
             message?: string;
-            messageType: import("../core").MessageTypes;
+            messageType?: import("../core").MessageTypes;
         };
     };
 }, "children"> & {

package/dist/Form/Radio/RadioInput.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Field, getFirstId, useInputClassModifier, useOptionsWithId, } from "../core";
 import { Radio, RadioModes } from "./Radio";
-const RadioInput = forwardRef(({ mode, messageType, message, className, classModifier = "", isVisible, options, classNameContainerLabel, classNameContainerInput, label, forceDisplayMessage, children, required, disabled = false, ...radioProps }, inputRef) => {
+const RadioInput = forwardRef(({ mode, messageType, message, className, classModifier = "", isVisible, options, classNameContainerLabel, classNameContainerInput, label, forceDisplayMessage, children, required, disabled = false, ariaLabelContainer, ...radioProps }, inputRef) => {
     const rowModifier = `${classModifier ?? ""}${mode === RadioModes.classic ? " label-top " : ""}`;
     const newOptions = useOptionsWithId(options);
     const firstId = getFirstId(newOptions);
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    return (_jsxs(Field, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier + inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: inputClassModifier, ref: inputRef, disabled: disabled, required: required, ...radioProps }), children] }));
+    return (_jsxs(Field, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier + inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, roleContainer: "radiogroup", ariaLabelContainer: ariaLabelContainer ?? label?.toString(), isLabelContainerLinkedToInput: false, children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: inputClassModifier, ref: inputRef, disabled: disabled, required: required, ...radioProps }), children] }));
 });
 RadioInput.displayName = "RadioInput";
 export { RadioInput };

package/dist/Form/core/FieldForm.d.ts

@@ -1,9 +1,9 @@
-import { BaseSyntheticEvent, ReactElement, ReactNode } from "react";
+import { BaseSyntheticEvent, Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
 import { FormClassManager } from "./FormClassManager";
 import { MessageTypes } from "./MessageTypes";
 type TMessage = {
     message?: string;
-    messageType: MessageTypes;
+    messageType?: MessageTypes;
 };
 declare const INITIAL_STATE: {
     hasLostFocusOnce: boolean;
@@ -12,9 +12,9 @@ declare const INITIAL_STATE: {
     memory: TMessage;
 };
 type EventFunction = {
-    onChange?: Function;
-    onBlur?: Function;
-    onFocus?: Function;
+    onChange?: (event: BaseSyntheticEvent) => void;
+    onBlur?: (event: BaseSyntheticEvent) => void;
+    onFocus?: (event: BaseSyntheticEvent) => void;
 };
 type FieldFormProps = TMessage & {
     className?: string;
@@ -30,7 +30,12 @@ type FieldFormProps = TMessage & {
 type SetState = (prevState: typeof INITIAL_STATE) => typeof INITIAL_STATE;
 export declare const setStateMemory: ({ message, messageType }: TMessage) => SetState;
 export declare const setStateHasChange: () => SetState;
-export declare const onChangeByState: (setState: Function, stateHasChange: boolean, setStateHasChangeFn?: () => SetState) => any;
+export declare const onChangeByState: (setState: Dispatch<SetStateAction<{
+    hasLostFocusOnce: boolean;
+    hasFocus: boolean;
+    hasChange: boolean;
+    memory: TMessage;
+}>>, stateHasChange: boolean, setStateHasChangeFn?: () => SetState) => false | void;
 export declare const setStateOnBlur: () => SetState;
 export declare const setStateOnFocus: ({ message, messageType }: TMessage) => SetState;
 type GetMessageInfoProps = typeof INITIAL_STATE & Required<Pick<FieldFormProps, "message" | "messageType" | "forceDisplayMessage">>;
@@ -48,9 +53,43 @@ type AddPropsClone = Omit<RenderChildrenProps, "children"> & {
     classModifier: string;
     name: string;
     getMessageClassModifierFn?: typeof FormClassManager.getMessageClassModifier;
-    eventWrapperFn?: Function;
+    eventWrapperFn?: ({ wrapper, props }: EventWrapperProps) => {
+        onChange: (ev: BaseSyntheticEvent) => void;
+        onBlur: (ev: BaseSyntheticEvent) => void;
+        onFocus: (ev: BaseSyntheticEvent) => void;
+    };
+};
+export declare const addPropsClone: ({ message, messageType, classModifier, wrapper, child, name, getMessageClassModifierFn, eventWrapperFn, ...rest }: AddPropsClone) => {
+    isVisible: boolean;
+    message?: undefined;
+    classModifier?: undefined;
+} | {
+    message: string | undefined;
+    isVisible?: undefined;
+    classModifier?: undefined;
+} | {
+    classModifier: string;
+    isVisible?: undefined;
+    message?: undefined;
+} | {
+    classModifier: string;
+    onChange: (ev: BaseSyntheticEvent) => void;
+    onBlur: (ev: BaseSyntheticEvent) => void;
+    onFocus: (ev: BaseSyntheticEvent) => void;
+    isVisible?: undefined;
+    message?: undefined;
+} | {
+    onChange: (ev: BaseSyntheticEvent) => void;
+    onBlur: (ev: BaseSyntheticEvent) => void;
+    onFocus: (ev: BaseSyntheticEvent) => void;
+    isVisible?: undefined;
+    message?: undefined;
+    classModifier?: undefined;
+} | {
+    isVisible?: undefined;
+    message?: undefined;
+    classModifier?: undefined;
 };
-export declare const addPropsClone: ({ message, messageType, classModifier, wrapper, child, name, getMessageClassModifierFn, eventWrapperFn, ...rest }: AddPropsClone) => any;
 type RenderChildrenProps = {
     wrapper: EventFunction;
 } & Partial<Pick<FieldFormProps, "children">> & ReturnType<typeof getMessageInfo>;

package/dist/Form/core/FormClassManager.d.ts

@@ -2,6 +2,6 @@ import { ReactNode } from "react";
 export declare const FormClassManager: {
     getFieldInputClassModifier: (modifier: string, disabled: boolean) => string;
     getInputClassModifier: (modifier: string, children: ReactNode) => string;
-    getModifier: (messageType: string) => string;
-    getMessageClassModifier: (messageType: "error" | "success" | "warning", message?: string | null, modifier?: string) => string;
+    getModifier: (messageType: string | undefined) => string;
+    getMessageClassModifier: (messageType?: "error" | "success" | "warning", message?: string | null, modifier?: string) => string;
 };

package/dist/Layout/Header/HeaderTitle/HeaderTitle.helpers.js

@@ -1,8 +1,6 @@
 export const getClassModifier = (classModifier, isSticky) => {
     if (isSticky) {
-        return classModifier !== undefined
-            ? "sticky"
-            : `${classModifier} sticky`.trim();
+        return !classModifier ? "sticky" : `${classModifier} sticky`.trim();
     }
     return classModifier;
 };

package/dist/Summary/index.js

@@ -5,5 +5,5 @@ export const Summary = ({ messages = [], isVisible = true, title = "Invalid form
     if (!messages || !isVisible || messagesNotBlank.length === 0) {
         return null;
     }
-    return (_jsx(Alert, { iconClassName: "glyphicon glyphicon-warning-sign", title: title, classModifier: classModifier, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${message}`))) }) }));
+    return (_jsx(Alert, { icon: "glyphicon glyphicon-warning-sign", title: title, classModifier: classModifier, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${message}`))) }) }));
 };

package/dist/Table/index.d.ts

@@ -1,5 +1,6 @@
 export { Pager } from "./Pagination/Pager";
 export { Paging } from "./Pagination/Paging";
+export { Items } from "./Pagination/Items";
 export { TBody } from "./TBody";
 export { THead } from "./THead";
 export { Table } from "./Table";

package/dist/Table/index.js

@@ -1,5 +1,6 @@
 export { Pager } from "./Pagination/Pager";
 export { Paging } from "./Pagination/Paging";
+export { Items } from "./Pagination/Items";
 export { TBody } from "./TBody";
 export { THead } from "./THead";
 export { Table } from "./Table";

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { Date, DateInput } from "./Form/Date";
 export { File, FileInput, FileTable } from "./Form/File";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
 export { Number, NumberInput } from "./Form/Number";
+export { Pass, PassInput } from "./Form/Pass";
 export { Radio, RadioInput, RadioItem, RadioModes } from "./Form/Radio";
 export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";

package/dist/index.js

@@ -11,6 +11,7 @@ export { Date, DateInput } from "./Form/Date";
 export { File, FileInput, FileTable } from "./Form/File";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
 export { Number, NumberInput } from "./Form/Number";
+export { Pass, PassInput } from "./Form/Pass";
 export { Radio, RadioInput, RadioItem, RadioModes } from "./Form/Radio";
 export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.0.1",
+  "version": "1.0.2-RC.2",
   "description": "",
   "exports": {
     ".": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.0.1+1",
+    "@axa-fr/design-system-slash-css": "1.0.2-RC.2+1",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -87,8 +87,8 @@
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.2",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.1.2",