mautourco-components 0.2.98 → 0.2.100

package/dist/components/atoms/Inputs/Input/Input.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import Icon from '../../Icon/Icon';
 var Input = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Input text' : _c, value = _a.value, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, icon = _a.icon, _f = _a.iconPosition, iconPosition = _f === void 0 ? 'trailing' : _f, _g = _a.type, type = _g === void 0 ? 'text' : _g, id = _a.id;
+    var inputRef = useRef(null);
     var baseClasses = 'input-field';
     var variantClasses = {
         default: 'input-field--default',
@@ -11,6 +13,12 @@ var Input = function (_a) {
         disabled: 'input-field--disabled',
     };
     var inputClasses = "".concat(baseClasses, " ").concat(variantClasses[variant], " ").concat(icon ? "input-field--with-icon input-field--icon-".concat(iconPosition) : '', " ").concat(className).trim();
-    return (_jsxs("div", { className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim(), children: [icon && iconPosition === 'leading' && (_jsx("span", { className: "input-icon input-icon--leading", children: _jsx(Icon, { name: icon, size: "sm" }) })), _jsx("input", { id: id, type: type, className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onInput: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", { className: "input-icon input-icon--trailing", children: _jsx(Icon, { name: icon, size: "sm" }) }))] }));
+    useEffect(function () {
+        setTimeout(function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    }, [value]);
+    return (_jsxs("div", { className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim(), children: [icon && iconPosition === 'leading' && (_jsx("span", { className: "input-icon input-icon--leading", children: _jsx(Icon, { name: icon, size: "sm" }) })), _jsx("input", { ref: inputRef, id: id, type: type, className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onInput: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", { className: "input-icon input-icon--trailing", children: _jsx(Icon, { name: icon, size: "sm" }) }))] }));
 };
 export default Input;

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.js

@@ -40,5 +40,5 @@ export function DialogDeleteConfirmMultiple(props) {
     useEffect(function () {
         setIsSelectAll(selectedQuotes.length === quotes.length);
     }, [selectedQuotes, quotes]);
-    return (_jsx(DialogDeleteConfirm.Wrapper, { onCancel: onCancel, onOk: handleDeleteQuotes, children: _jsxs("div", { className: "confirm-multiple", children: [_jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll, onChange: handleSelectAllQuotes, labelPosition: "leading", className: "confirm-multiple__all" }), _jsx("ul", { className: "mb-1", children: quotes.map(function (quote) { return (_jsx("li", { children: _jsx(Checkbox, { label: quote.name, checked: selectedQuotes.includes(quote.id), onChange: function () { return handleSelectQuote(quote); }, labelPosition: "leading" }) }, quote.id)); }) }), isSelectAll && (_jsx(Toast, { text: "Caution: This would delete all quotations created.", type: "warning", showIcon: false }))] }) }));
+    return (_jsx(DialogDeleteConfirm.Wrapper, { onCancel: onCancel, onOk: handleDeleteQuotes, okDisabled: selectedQuotes.length === 0, children: _jsxs("div", { className: "confirm-multiple", children: [_jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll, onChange: handleSelectAllQuotes, labelPosition: "leading", className: "confirm-multiple__all" }), _jsx("ul", { className: "mb-1", children: quotes.map(function (quote) { return (_jsx("li", { children: _jsx(Checkbox, { label: quote.name, checked: selectedQuotes.includes(quote.id), onChange: function () { return handleSelectQuote(quote); }, labelPosition: "leading" }) }, quote.id)); }) }), isSelectAll && (_jsx(Toast, { text: "Caution: This would delete all quotations created.", type: "warning", showIcon: false }))] }) }));
 }

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.d.ts

@@ -6,5 +6,6 @@ export interface DialogDeleteConfirmWrapperProps {
     onOk?: () => void;
     okText?: string;
     children: React.ReactNode;
+    okDisabled?: boolean;
 }
 export declare function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Button from '../../atoms/Button/Button';
 export function DialogDeleteConfirmWrapper(props) {
-    var onCancel = props.onCancel, _a = props.cancelText, cancelText = _a === void 0 ? 'Cancel' : _a, _b = props.okVariant, okVariant = _b === void 0 ? 'destructive' : _b, onOk = props.onOk, _c = props.okText, okText = _c === void 0 ? 'Delete' : _c, children = props.children;
-    return (_jsxs("div", { className: "space-y-9", children: [children, _jsxs("div", { className: "grid grid-cols-2 gap-x-4", children: [_jsx(Button, { variant: "outline-secondary", onClick: onCancel, size: "sm", children: cancelText }), _jsx(Button, { variant: okVariant, onClick: onOk, size: "sm", children: okText })] })] }));
+    var onCancel = props.onCancel, _a = props.cancelText, cancelText = _a === void 0 ? 'Cancel' : _a, _b = props.okVariant, okVariant = _b === void 0 ? 'destructive' : _b, onOk = props.onOk, _c = props.okText, okText = _c === void 0 ? 'Delete' : _c, children = props.children, okDisabled = props.okDisabled;
+    return (_jsxs("div", { className: "space-y-9", children: [children, _jsxs("div", { className: "grid grid-cols-2 gap-x-4", children: [_jsx(Button, { variant: "outline-secondary", onClick: onCancel, size: "sm", children: cancelText }), _jsx(Button, { variant: okVariant, onClick: onOk, size: "sm", disabled: okDisabled, children: okText })] })] }));
 }

package/dist/components/organisms/DialogQuoteRename/DialogQuoteRename.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Input from '../../atoms/Inputs/Input/Input';
 import { Text } from '../../atoms/Typography/Typography';
@@ -10,5 +10,8 @@ export function DialogQuoteRename(props) {
     var handleQuoteNameChange = function (e) {
         setValue(e.target.value);
     };
-    return (_jsx(DialogBookingConfirm, { open: open, setOpen: setOpen, title: "Rename Quotation", className: "!max-w-[500px]", children: _jsxs("div", { className: "space-y-9", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "quote-name", children: _jsx(Text, { as: "span", size: "sm", children: "Quotation name" }) }), _jsx(Input, { id: "quote-name", value: value, onChange: handleQuoteNameChange })] }), _jsxs("div", { className: "grid grid-cols-2 gap-x-4 pb-2", children: [_jsx(Button, { variant: "outline-secondary", onClick: function () { return setOpen(false); }, size: "sm", children: "Cancel" }), _jsx(Button, { variant: "secondary", onClick: function () { return onSubmit(value); }, size: "sm", children: "Save changes" })] })] }) }));
+    useEffect(function () {
+        setValue(quoteName);
+    }, [quoteName]);
+    return (_jsx(DialogBookingConfirm, { open: open, setOpen: setOpen, title: "Rename Quotation", className: "!max-w-[500px]", children: _jsxs("div", { className: "space-y-9", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "quote-name", children: _jsx(Text, { as: "span", size: "sm", children: "Quotation name" }) }), _jsx(Input, { id: "quote-name", value: value, onChange: handleQuoteNameChange, placeholder: "Enter your quote name" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-x-4 pb-2", children: [_jsx(Button, { variant: "outline-secondary", onClick: function () { return setOpen(false); }, size: "sm", children: "Cancel" }), _jsx(Button, { variant: "secondary", onClick: function () { return onSubmit(value); }, size: "sm", children: "Save changes" })] })] }) }));
 }

package/dist/components/organisms/TopNavigation/DesktopNav.js

@@ -20,5 +20,5 @@ export var DesktopNav = function (_a) {
                                         if (!isDisabled)
                                             onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(it);
                                     }, children: it.label })) }, it.label));
-                        }) }), _jsx("div", { className: "header-nav__user-section ".concat(user ? 'header-nav__user-connected-section' : ''), children: user ? (_jsx("div", { className: "header-nav__user-container", children: _jsx(UserCard, { user: user, agencies: agencies || [], selectedAgency: selectedAgency, onSelectAgency: onAgencyChange }) })) : (_jsx(Button, { size: "sm", variant: "secondary", onClick: onLogin, children: "Login" })) })] })] }));
+                        }) }), _jsx("div", { className: "header-nav__user-section ".concat(user ? 'header-nav__user-connected-section' : ''), children: user ? (_jsxs("div", { className: "header-nav__user-container", children: [_jsx(UserCard, { user: user, agencies: agencies || [], selectedAgency: selectedAgency, onSelectAgency: onAgencyChange }), _jsx(Button, { size: "sm", variant: "secondary", onClick: onLogout, className: "header-nav__logout-button", children: "Logout" })] })) : (_jsx(Button, { size: "sm", variant: "secondary", onClick: onLogin, children: "Login" })) })] })] }));
 };

package/dist/styles/components/organism/topnavigation.css

@@ -174,6 +174,11 @@
   display: flex;
   height: 100%;
   align-items: center;
+  gap: 0.75rem;
+}
+
+.header-nav__logout-button {
+  flex-shrink: 0;
 }
 
 /* ===== Mobile Nav Classes ===== */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.98",
+  "version": "0.2.100",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute } from 'react';
+import React, { HTMLInputTypeAttribute, useEffect, useRef } from 'react';
 import Icon, { IconName } from '../../Icon/Icon';
 
 export interface InputProps {
@@ -30,6 +30,8 @@ const Input: React.FC<InputProps> = ({
   type = 'text',
   id,
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const baseClasses = 'input-field';
   const variantClasses = {
     default: 'input-field--default',
@@ -42,6 +44,12 @@ const Input: React.FC<InputProps> = ({
   const inputClasses =
     `${baseClasses} ${variantClasses[variant]} ${icon ? `input-field--with-icon input-field--icon-${iconPosition}` : ''} ${className}`.trim();
 
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, [value]);
+
   return (
     <div className={`input-wrapper ${icon ? 'input-wrapper--with-icon' : ''}`.trim()}>
       {icon && iconPosition === 'leading' && (
@@ -50,6 +58,7 @@ const Input: React.FC<InputProps> = ({
         </span>
       )}
       <input
+        ref={inputRef}
         id={id}
         type={type}
         className={inputClasses}

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.tsx

@@ -48,7 +48,10 @@ export function DialogDeleteConfirmMultiple(props: DialogDeleteConfirmMultiplePr
   }, [selectedQuotes, quotes]);
 
   return (
-    <DialogDeleteConfirm.Wrapper onCancel={onCancel} onOk={handleDeleteQuotes}>
+    <DialogDeleteConfirm.Wrapper
+      onCancel={onCancel}
+      onOk={handleDeleteQuotes}
+      okDisabled={selectedQuotes.length === 0}>
       <div className="confirm-multiple">
         <Checkbox
           label="Select all quotations"

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.tsx

@@ -7,6 +7,7 @@ export interface DialogDeleteConfirmWrapperProps {
   onOk?: () => void;
   okText?: string;
   children: React.ReactNode;
+  okDisabled?: boolean;
 }
 
 export function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProps) {
@@ -17,6 +18,7 @@ export function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProp
     onOk,
     okText = 'Delete',
     children,
+    okDisabled,
   } = props;
   return (
     <div className="space-y-9">
@@ -25,7 +27,7 @@ export function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProp
         <Button variant="outline-secondary" onClick={onCancel} size="sm">
           {cancelText}
         </Button>
-        <Button variant={okVariant} onClick={onOk} size="sm">
+        <Button variant={okVariant} onClick={onOk} size="sm" disabled={okDisabled}>
           {okText}
         </Button>
       </div>

package/src/components/organisms/DialogQuoteRename/DialogQuoteRename.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Input from '../../atoms/Inputs/Input/Input';
 import { Text } from '../../atoms/Typography/Typography';
@@ -19,6 +19,10 @@ export function DialogQuoteRename(props: DialogQuoteRenameProps) {
     setValue(e.target.value);
   };
 
+  useEffect(() => {
+    setValue(quoteName);
+  }, [quoteName]);
+
   return (
     <DialogBookingConfirm
       open={open}
@@ -32,7 +36,12 @@ export function DialogQuoteRename(props: DialogQuoteRenameProps) {
               Quotation name
             </Text>
           </label>
-          <Input id="quote-name" value={value} onChange={handleQuoteNameChange} />
+          <Input
+            id="quote-name"
+            value={value}
+            onChange={handleQuoteNameChange}
+            placeholder="Enter your quote name"
+          />
         </div>
         <div className="grid grid-cols-2 gap-x-4 pb-2">
           <Button variant="outline-secondary" onClick={() => setOpen(false)} size="sm">

package/src/components/organisms/TopNavigation/DesktopNav.tsx

@@ -121,6 +121,13 @@ export const DesktopNav: React.FC<DesktopNavProps> = ({
                 selectedAgency={selectedAgency}
                 onSelectAgency={onAgencyChange}
               />
+              <Button
+                size="sm"
+                variant="secondary"
+                onClick={onLogout}
+                className="header-nav__logout-button">
+                Logout
+              </Button>
             </div>
           ) : (
             <Button size="sm" variant="secondary" onClick={onLogin}>

package/src/styles/components/organism/topnavigation.css

@@ -72,7 +72,11 @@
 }
 
 .header-nav__user-container {
-  @apply flex items-center h-full;
+  @apply flex items-center h-full gap-3;
+}
+
+.header-nav__logout-button {
+  @apply shrink-0;
 }
 
 /* ===== Mobile Nav Classes ===== */