@digital-ai/dot-components 4.24.0 → 4.25.1

package/index.esm.js

@@ -7267,10 +7267,14 @@ const DotAutoComplete = ({
     }
   });
   // Create handler only if 'onInputChange' or 'actionItem' prop is defined
-  const handleInputChange = (onInputChange || isActionItemDefined) && ((event, currentInputValue, reason) => {
-    isActionItemDefined && setInputText(currentInputValue);
+  // Custom input change handler for AI mode
+  const handleInputChange = (event, currentInputValue, reason) => {
+    if (isActionItemDefined || ai) {
+      setInputText(currentInputValue); // fallback for action item
+    }
+
     onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
-  }) || undefined;
+  };
   // Create callback when action item click event handler is defined,
   // free-solo mode is NOT set and 'Enter' key has been pressed
   const handleKeyDown = allowActionButtonClick && (event => {
@@ -7317,29 +7321,27 @@ const DotAutoComplete = ({
       }), getInputAdornment(), nativeEndAdornment]
     });
   };
-  const renderAISendAdornment = params => {
-    const {
-      inputProps
-    } = params;
-    return jsxs(Fragment, {
-      children: [jsx(DotIconButton, {
-        iconId: "send-airplane",
-        tooltip: "Send",
-        "data-testid": dataTestId && `${dataTestId}-send-airplane-icon`,
-        shape: "square",
-        color: "ai",
-        disabled: !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.value),
-        onClick: () => {
-          if (inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) {
-            handleAiAction(inputProps.value.toString());
-          }
+  const renderAISendAdornment = useMemo(() => {
+    return jsx(DotIconButton, {
+      iconId: "send-airplane",
+      tooltip: "Send",
+      "data-testid": dataTestId && `${dataTestId}-send-airplane-icon`,
+      shape: "square",
+      color: "ai",
+      disabled: !inputText,
+      onClick: () => {
+        if (inputText) {
+          handleAiAction(inputText);
+          setInputText('');
+          onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange({
+            target: {
+              value: ''
+            }
+          }, '', 'clear');
         }
-      }), jsx("span", {
-        className: "ai-text-clear-icon",
-        children: params.InputProps.endAdornment
-      })]
+      }
     });
-  };
+  }, [inputText]);
   const renderTrimmedLongOptions = (props, option) => {
     const key = 'id' in option ? option.id : option.title;
     return jsx(DotTooltip, {
@@ -7360,7 +7362,7 @@ const DotAutoComplete = ({
   };
   const getEndAdornment = params => {
     if (ai) {
-      return renderAISendAdornment(params);
+      return renderAISendAdornment;
     }
     if (!readOnly) {
       return renderEndAdornment(params.InputProps.endAdornment);
@@ -7448,7 +7450,8 @@ const DotAutoComplete = ({
               'data-testid': dataTestId && `${dataTestId}-input`,
               id: inputId,
               className: useStylesWithRootClass(inputProps.className, 'dot-input'),
-              readOnly
+              readOnly,
+              value: ai ? inputText : inputProps.value
             }),
             InputLabelProps: {
               htmlFor: inputId
@@ -7469,8 +7472,9 @@ const DotAutoComplete = ({
               if (event.key === 'Enter' && ai) {
                 event.stopPropagation();
                 event.preventDefault();
-                const text = event.target.value;
-                handleAiAction(text);
+                handleAiAction(inputText);
+                setInputText(''); // Clear input after enter
+                onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, '', 'clear');
               }
             },
             placeholder: showPlaceholder ? placeholder : undefined,
@@ -13836,7 +13840,9 @@ const StyledDatePicker = styled(DatePicker)`
       }
 
       .dot-icon-btn .dot-i {
-        margin-top: -5px;
+        color: ${theme.palette.figma.typography.black};
+        margin-top: -6px;
+        margin-right: 6px;
       }
 
       .MuiFormLabel-root {
@@ -13947,7 +13953,9 @@ const StyledTimePicker = styled(TimePicker)`
       }
 
       .dot-icon-btn .dot-i {
-        margin-top: -5px;
+        margin-top: -6px;
+        margin-right: 6px;
+        color: ${theme.palette.figma.typography.black};
       }
 
       .MuiFormLabel-root {
@@ -52595,7 +52603,8 @@ const DotDatePicker = ({
             children: [error && jsx(DotIcon, {
               className: "dot-error-icon",
               "data-testid": "dot-error-icon",
-              iconId: "error-solid"
+              iconId: "error-solid",
+              fontSize: "large"
             }), jsx(DotIconButton, {
               ariaLabel: "Open date picker",
               "data-pendoid": "date-picker-open-btn",
@@ -53002,7 +53011,8 @@ const DotTimePicker = ({
                 children: [error && jsx(DotIcon, {
                   className: "dot-error-icon",
                   "data-testid": dataTestId && `${dataTestId}-input-error-icon`,
-                  iconId: "error-solid"
+                  iconId: "error-solid",
+                  fontSize: "large"
                 }), !disableOpenPicker && !isComponentReadOnly && !disabled && jsx(DotIconButton, {
                   ariaLabel: "Open time picker",
                   "data-pendoid": dataPendoId && `${dataPendoId}-open-btn`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "4.24.0",
+  "version": "4.25.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/date-picker/DatePicker.d.ts

@@ -80,6 +80,6 @@ export interface DatePickerProps extends CommonProps {
      */
     showDaysOutsideCurrentMonth?: boolean;
     /** The selected value. Used when the component is controlled. Date in ISO 8601 format, ie: YYYY-MM-DD  */
-    value?: string;
+    value?: string | null;
 }
 export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, informationToolTip, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/time-picker/TimePicker.d.ts

@@ -55,7 +55,7 @@ export interface TimePickerProps extends CommonProps {
     /** If true, the label is displayed as required and the input element will be required. */
     required?: boolean;
     /** The selected value. Used when the component is controlled.  Time in ISO 8601 format, ie: HH:mm */
-    value?: string;
+    value?: string | null;
 }
 export declare const DEFAULT_PICKER_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME_FORMAT = "HH:mm";