allaw-ui 0.1.21 → 0.1.22

package/dist/components/atoms/selects/Select.css

@@ -4,7 +4,6 @@
 
 .select {
   display: flex;
-  width: 100%;
   padding: 8px 16px;
   justify-content: space-between;
   align-items: center;
@@ -37,9 +36,8 @@
 }
 
 .select-list {
-  display: none; /* Masquer par défaut */
+  display: none;
   flex-direction: column;
-  width: 480px;
   background: var(--secondary-light-grey, #f4f7fb);
   border-radius: 8px;
   margin-top: 8px;

package/dist/components/atoms/selects/Select.d.ts

@@ -12,6 +12,7 @@ export interface SelectProps<T extends string | string[]> {
     multiple?: boolean;
     isRequired?: boolean;
     showError?: boolean;
+    width?: number;
     onChange?: (selected: T) => void;
     onError?: (error: string) => void;
 }

package/dist/components/atoms/selects/Select.js

@@ -13,10 +13,10 @@ import "../../../styles/global.css";
 import TinyInfo from "../typography/TinyInfo";
 function Select(_a, ref) {
     var _b;
-    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, onChange = _a.onChange, onError = _a.onError;
-    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _h[0], setSelected = _h[1];
-    var _j = useState(""), error = _j[0], setError = _j[1];
+    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, onChange = _a.onChange, onError = _a.onError;
+    var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _j[0], setSelected = _j[1];
+    var _k = useState(""), error = _k[0], setError = _k[1];
     var selectRef = useRef(null);
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
@@ -63,8 +63,8 @@ function Select(_a, ref) {
     useImperativeHandle(ref, function () { return ({
         validate: function () { return validateSelect(selected); },
     }); });
-    return (React.createElement("div", { ref: selectRef, className: "select-container ".concat(isOpen ? "select-pressed" : "") },
-        React.createElement("button", { className: "select ".concat(isOpen ? "select-pressed" : "select-default"), onClick: toggleOpen },
+    return (React.createElement("div", { ref: selectRef, className: "select-container ".concat(isOpen ? "select-pressed" : ""), style: { width: "".concat(width, "%") } },
+        React.createElement("button", { className: "select ".concat(isOpen ? "select-pressed" : "select-default"), onClick: toggleOpen, style: { width: "100%" } },
             React.createElement("span", { className: "select-text" }, Array.isArray(selected) && selected.length > 0
                 ? selected
                     .map(function (val) { var _a; return (_a = items.find(function (item) { return item.value === val; })) === null || _a === void 0 ? void 0 : _a.label; })
@@ -73,7 +73,7 @@ function Select(_a, ref) {
                     ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
                     : placeholder),
             React.createElement("span", { className: "select-icon ".concat(isOpen ? "allaw-icon-chevron-up" : "allaw-icon-chevron-down") })),
-        isOpen && (React.createElement("div", { className: "select-list" }, items.map(function (item) { return (React.createElement("div", { key: item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
+        isOpen && (React.createElement("div", { className: "select-list", style: { width: "100%" } }, items.map(function (item) { return (React.createElement("div", { key: item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
                 ? "selected"
                 : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
             multiple && (React.createElement("span", { className: "select-item-icon allaw-icon-check" })),

package/dist/components/molecules/selectForm/SelectForm.css

@@ -0,0 +1,9 @@
+.select-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.select-form-required {
+  color: #e15151;
+}

package/dist/components/molecules/selectForm/SelectForm.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./SelectForm.css";
+import "../../../styles/global.css";
+import { SelectItem } from "../../atoms/selects/Select";
+export interface SelectFormProps {
+    label: string;
+    isRequired: boolean;
+    options: SelectItem[];
+    isMultiple: boolean;
+    width?: number;
+    selectedItem?: string | string[];
+    onChange?: (selected: string | string[]) => void;
+}
+declare const SelectForm: React.FC<SelectFormProps>;
+export default SelectForm;

package/dist/components/molecules/selectForm/SelectForm.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./SelectForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import Select from "../../atoms/selects/Select";
+var SelectForm = function (_a) {
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.width, width = _b === void 0 ? 100 : _b, selectedItem = _a.selectedItem, onChange = _a.onChange;
+    return (React.createElement("div", { className: "select-form" },
+        React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
+                label,
+                " ",
+                isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),
+        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, selectedItem: selectedItem, onChange: onChange })));
+};
+export default SelectForm;

package/dist/components/molecules/selectForm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectForm } from "./SelectForm";
+export type { SelectFormProps } from "./SelectForm";

package/dist/components/molecules/selectForm/index.js

@@ -0,0 +1 @@
+export { default as SelectForm } from "./SelectForm";

package/dist/index.d.ts

@@ -39,5 +39,6 @@ export { default as Stepper } from "./components/molecules/stepper/Stepper";
 export type { StepperProps } from "./components/molecules/stepper/Stepper";
 export { default as CheckboxForm } from "./components/molecules/checkboxForm/CheckboxForm";
 export { default as RadioForm } from "./components/molecules/radioForm/RadioForm";
+export { default as SelectForm } from "./components/molecules/selectForm/SelectForm";
 export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcrumb";
 export { default as ProCard } from "./components/molecules/proCard/ProCard";

package/dist/index.js

@@ -56,6 +56,8 @@ export { default as Stepper } from "./components/molecules/stepper/Stepper";
 export { default as CheckboxForm } from "./components/molecules/checkboxForm/CheckboxForm";
 // RadioForm
 export { default as RadioForm } from "./components/molecules/radioForm/RadioForm";
+// SelectForm
+export { default as SelectForm } from "./components/molecules/selectForm/SelectForm";
 // Breadcrumb
 export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcrumb";
 // ProCard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",