@axa-fr/design-system-apollo-react 1.0.3-alpha.153 → 1.0.3-alpha.154

package/dist/Form/TextInput/TextInputApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/TextInput/TextInputApollo.scss";
+import type { ComponentProps } from "react";
+import { TextInput as TextInputCommon } from "./TextInputCommon";
+export declare const TextInput: (props: Omit<ComponentProps<typeof TextInputCommon>, "ItemLabelComponent" | "ItemMessageComponent">) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/TextInput/TextInputApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/TextInput/TextInputApollo.scss";
+import { ItemLabel } from "../ItemLabel/ItemLabelApollo";
+import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
+import { TextInput as TextInputCommon } from "./TextInputCommon";
+export const TextInput = (props) => (_jsx(TextInputCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage }));

package/dist/Form/TextInput/TextInputCommon.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps, type ComponentPropsWithRef, type ComponentType } from "react";
+import { ItemLabel } from "../ItemLabel/ItemLabelCommon";
+import { ItemMessage } from "../ItemMessage/ItemMessageCommon";
+type TextInputProps = ComponentPropsWithRef<"input"> & {
+    unit?: React.ReactNode;
+    classModifier?: string;
+    helper?: string;
+    error?: string;
+    success?: string;
+    label: ComponentProps<typeof ItemLabel>["label"];
+    ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabel>, "ButtonComponent">>;
+    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+} & Partial<ComponentPropsWithRef<typeof ItemLabel>>;
+declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { TextInput };

package/dist/Form/TextInput/TextInputCommon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { getComponentClassName } from "../../utilities/getComponentClassName";
+const TextInput = forwardRef(({ unit, className, classModifier = "", helper, error, success, label, description, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, "aria-errormessage": ariaErrormessage, ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName("af-form__input-text", className, classModifier + (error || ariaErrormessage ? " error" : ""));
+    let inputId = useId();
+    inputId = otherProps.id || inputId;
+    const idMessage = useId();
+    const idHelp = useId();
+    const idLabel = useId();
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId, idLabel: idLabel }), _jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: "text", ref: inputRef, "aria-labelledby": idLabel, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": idHelp, ...otherProps }), unit] }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), _jsx(ItemMessageComponent, { id: idMessage, message: error || success, messageType: error ? "error" : "success" })] }));
+});
+TextInput.displayName = "TextInput";
+export { TextInput };

package/dist/Form/TextInput/TextInputLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/TextInput/TextInputLF.scss";
+import type { ComponentProps } from "react";
+import { TextInput as TextInputCommon } from "./TextInputCommon";
+export declare const TextInput: (props: Omit<ComponentProps<typeof TextInputCommon>, "ItemLabelComponent" | "ItemMessageComponent">) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/TextInput/TextInputLF.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/TextInput/TextInputLF.scss";
+import { ItemLabel } from "../ItemLabel/ItemLabelLF";
+import { ItemMessage } from "../ItemMessage/ItemMessageLF";
+import { TextInput as TextInputCommon } from "./TextInputCommon";
+export const TextInput = (props) => (_jsx(TextInputCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage }));

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export { Spinner, spinnerVariants, type SpinnerVariants, } from "./Spinner/Spinn
 export { DebugGrid } from "./Grid/DebugGrid";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageApollo";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelApollo";
+export { TextInput } from "./Form/TextInput/TextInputApollo";

package/dist/index.js

@@ -8,3 +8,4 @@ export { Spinner, spinnerVariants, } from "./Spinner/SpinnerApollo";
 export { DebugGrid } from "./Grid/DebugGrid";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageApollo";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelApollo";
+export { TextInput } from "./Form/TextInput/TextInputApollo";

package/dist/indexLF.d.ts

@@ -7,3 +7,4 @@ export { Spinner, spinnerVariants, type SpinnerVariants, } from "./Spinner/Spinn
 export { DebugGrid } from "./Grid/DebugGrid";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageLF";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelLF";
+export { TextInput } from "./Form/TextInput/TextInputLF";

package/dist/indexLF.js

@@ -7,3 +7,4 @@ export { Spinner, spinnerVariants, } from "./Spinner/SpinnerLF";
 export { DebugGrid } from "./Grid/DebugGrid";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageLF";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelLF";
+export { TextInput } from "./Form/TextInput/TextInputLF";

package/dist/utilities/getComponentClassName.d.ts

@@ -0,0 +1 @@
+export declare const getComponentClassName: (defaultClassName: string, className?: string, classModifier?: string) => string;

package/dist/utilities/getComponentClassName.js

@@ -0,0 +1,26 @@
+import classNames from "classnames";
+const getLastClassName = (defaultClassName) => {
+    if (!defaultClassName) {
+        return null;
+    }
+    return defaultClassName.split(" ").filter(Boolean).at(-1);
+};
+const listClassModifier = (classModifier) => {
+    if (!classModifier) {
+        return [];
+    }
+    return classModifier.split(" ");
+};
+export const getComponentClassName = (defaultClassName, className, classModifier) => {
+    if (!defaultClassName) {
+        return "";
+    }
+    const classWithoutModifier = getLastClassName(defaultClassName);
+    const modifiers = listClassModifier(classModifier);
+    const modifiersObject = modifiers
+        .filter((it) => /\S/.test(it))
+        .map((it) => {
+        return `${classWithoutModifier}--${it}`;
+    });
+    return classNames(defaultClassName, className, modifiersObject);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.3-alpha.153",
+  "version": "1.0.3-alpha.154",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "1.0.3-alpha.153",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.3-alpha.153",
+    "@axa-fr/design-system-apollo-css": "1.0.3-alpha.154",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.3-alpha.154",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },