@digital-ai/dot-components 4.23.0 → 4.25.0

package/index.esm.js

@@ -1386,6 +1386,7 @@ const rootClassName$1p = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
+const additionalLabelContentClassName = 'dot-additional-label-content';
 const errorClassName = 'dot-error';
 const warningClassName = 'dot-warning';
 const successClassName = 'dot-success';
@@ -1400,12 +1401,33 @@ const StyledAdornment = styled(InputAdornment)`
     ${adornmentIconStyles()};
   }
 `;
+const StyledInputLabelWrapper = styled.div`
+  ${({
+  theme
+}) => css`
+    &.${wrapperClassName$2} {
+      display: flex;
+      align-items: flex-end;
+      gap: ${theme.spacing(0.5)};
+      margin-bottom: ${theme.spacing(0.5)};
+
+      .${warningClassName} {
+        padding-bottom: 2px;
+      }
+
+      .${additionalLabelContentClassName} {
+        margin-left: auto;
+        padding-left: ${theme.spacing(2)};
+      }
+    }
+  `}
+`;
 const StyledInputLabel = styled(InputLabel)`
   ${({
   theme
 }) => css`
     &.${labelClassName} {
-      margin-bottom: ${theme.spacing(0.5)};
+      margin-bottom: 0;
       transform: none;
 
       &.Mui-disabled .dot-typography {
@@ -4818,6 +4840,7 @@ const DotCopyButton = ({
 };
 
 const DotInputLabel = ({
+  additionalLabelContent,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4826,14 +4849,9 @@ const DotInputLabel = ({
   label,
   required
 }) => {
-  const wrapperStyles = {
-    display: 'flex',
-    gap: '4px'
-  };
-  return jsxs("div", {
+  return jsxs(StyledInputLabelWrapper, {
     className: wrapperClassName$2,
-    style: wrapperStyles,
-    children: [jsx(StyledInputLabel, {
+    children: [label && jsx(StyledInputLabel, {
       "data-testid": dataTestId,
       classes: {
         root: labelClassName
@@ -4854,6 +4872,9 @@ const DotInputLabel = ({
       iconId: "circle-info-outline",
       tooltip: informationToolTip,
       fontSize: "small"
+    }), additionalLabelContent && jsx("div", {
+      className: additionalLabelContentClassName,
+      children: renderNodeOrTypography(additionalLabelContent)
     })]
   });
 };
@@ -4891,6 +4912,7 @@ const getInitialState = (value, defaultValue) => ({
 });
 const DotInputText = ({
   ai = false,
+  additionalLabelContent,
   autoComplete = 'off',
   autoFocus,
   className,
@@ -5024,11 +5046,12 @@ const DotInputText = ({
   const inputClassName = useStylesWithRootClass('dot-input', readOnly && readOnlyClassName$1);
   return jsxs(StyledTextFieldContainer, {
     className: wrapperClassName,
-    children: [persistentLabel && jsx(DotInputLabel, {
+    children: [(persistentLabel || additionalLabelContent) && jsx(DotInputLabel, {
+      additionalLabelContent,
       disabled,
       error,
       id,
-      label,
+      label: persistentLabel ? label : undefined,
       required,
       informationToolTip
     }), jsx(StyledTextField, {
@@ -7050,6 +7073,7 @@ function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
 const DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
 const DotAutoComplete = ({
   ListboxComponent,
+  additionalLabelContent,
   actionItem,
   ai = false,
   aiAction,
@@ -7243,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 => {
@@ -7293,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, {
@@ -7336,7 +7362,7 @@ const DotAutoComplete = ({
   };
   const getEndAdornment = params => {
     if (ai) {
-      return renderAISendAdornment(params);
+      return renderAISendAdornment;
     }
     if (!readOnly) {
       return renderEndAdornment(params.InputProps.endAdornment);
@@ -7402,12 +7428,13 @@ const DotAutoComplete = ({
         // functionality be added to DotInputText we will have to make a
         // decision about if/how to expose it here.
         jsxs(Fragment, {
-          children: [persistentLabel && jsx(DotInputLabel, {
+          children: [(persistentLabel || additionalLabelContent) && jsx(DotInputLabel, {
             "data-testid": dataTestId && `${dataTestId}-persistent-label`,
             id: inputId,
+            additionalLabelContent,
             disabled,
             error,
-            label,
+            label: persistentLabel ? label : undefined,
             required,
             informationToolTip
           }), jsx(StyledTextField, Object.assign({}, params, {
@@ -7423,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
@@ -7444,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,
@@ -11653,6 +11682,7 @@ function DashboardCategoriesAutoComplete(_a) {
 
 const DotInputSelect = ({
   ariaLabel,
+  additionalLabelContent,
   autoFocus,
   className,
   'data-pendoid': dataPendoId = rootSelectClassName,
@@ -11703,11 +11733,12 @@ const DotInputSelect = ({
   };
   return jsxs("div", {
     className: className,
-    children: [persistentLabel && jsx(DotInputLabel, {
+    children: [(persistentLabel || additionalLabelContent) && jsx(DotInputLabel, {
+      additionalLabelContent,
       disabled,
       error,
       id,
-      label,
+      label: persistentLabel ? label : undefined,
       required
     }), jsx(StyledTextField, {
       InputProps: {

package/package.json

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

package/src/lib/components/analytics/dashboard-actions/DashboardPublishConfirm.styles.d.ts

@@ -2,5 +2,5 @@ export declare const dashboardCategoriesContainerClassName = "dashboard-categori
 export declare const InlineMessage: import("styled-components").StyledComponent<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledPublishConfirmDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;
+export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, additionalLabelContent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;
 export declare const StyledAppSelectAutoCompleteOption: import("styled-components").StyledComponent<"li", any, {}, never>;

package/src/lib/components/auto-complete/AutoComplete.d.ts

@@ -13,6 +13,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     ListboxComponent?: JSXElementConstructor<HTMLAttributes<HTMLElement>>;
     /** Action button as the last element on the menu **/
     actionItem?: ActionItem;
+    /** Additional content on the top right of the autocomplete field. **/
+    additionalLabelContent?: ReactNode;
     /** If true, applies a gradient color to the border */
     ai?: boolean;
     /** Event callback */
@@ -75,7 +77,7 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     open?: boolean;
     /** pre-defined options available to the user */
     options?: Array<T>;
-    /** If true, the label will be persistently displayed outside of the field */
+    /** If true, the label will be persistently displayed outside the field. */
     persistentLabel?: boolean;
     /** Placeholder text always displayed inside the input field */
     placeholder?: string;
@@ -106,4 +108,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, additionalLabelContent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/input-form-fields/InputFormFields.styles.d.ts

@@ -3,6 +3,7 @@ export declare const rootClassName = "dot-text-field";
 export declare const rootSelectClassName = "dot-select-field";
 export declare const wrapperClassName = "dot-label-wrapper";
 export declare const labelClassName = "dot-input-label";
+export declare const additionalLabelContentClassName = "dot-additional-label-content";
 export declare const errorClassName = "dot-error";
 export declare const warningClassName = "dot-warning";
 export declare const successClassName = "dot-success";
@@ -17,6 +18,7 @@ interface StyledTextFieldProps {
     $minRows?: number;
 }
 export declare const StyledAdornment: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").InputAdornmentTypeMap<{}, "div">>, any, {}, never>;
+export declare const StyledInputLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledInputLabel: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").InputLabelTypeMap<{}, "label">>, any, {}, never>;
 export declare const StyledTextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTextField: import("styled-components").StyledComponent<typeof TextField, any, StyledTextFieldProps, never>;

package/src/lib/components/input-form-fields/InputLabel.d.ts

@@ -1,12 +1,15 @@
+import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface InputLabelProps extends CommonProps {
+    /** Additional content shown on the far right side of label element. */
+    additionalLabelContent?: ReactNode;
     /** If true, the input will be disabled. */
     disabled?: boolean;
     /** If true, the label will be displayed in an error state. */
     error?: boolean;
     /**
-     * id to identify the element, also used to create label "for" and helper text id attribute
-     * values while it's optional, it is considered required for accessiblity best practice.
+     * id to identify the element, also used to create label "for" and helper text id attribute.
+     * While it's optional, it is considered required for accessibility best practice.
      */
     id: string;
     /** Additional information for persistent labels */
@@ -16,4 +19,4 @@ export interface InputLabelProps extends CommonProps {
     /** If true, the label is displayed as required and the input element` will be required. */
     required?: boolean;
 }
-export declare const DotInputLabel: ({ "data-testid": dataTestId, disabled, error, id, informationToolTip, label, required, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputLabel: ({ additionalLabelContent, "data-testid": dataTestId, disabled, error, id, informationToolTip, label, required, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/input-form-fields/InputSelect.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { InputProps } from './InputFormFields.propTypes';
 export type OptionType = string | InputSelectOption;
 export interface InputSelectOption {
@@ -7,9 +8,11 @@ export interface InputSelectOption {
     value?: string;
 }
 export interface InputSelectProps extends InputProps {
+    /** Additional content on the top right of the input select field. **/
+    additionalLabelContent?: ReactNode;
     /** default value of select field */
     defaultValue?: string;
     /** options of select dropdown */
     options: Array<OptionType>;
 }
-export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputSelect: ({ ariaLabel, additionalLabelContent, autoFocus, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/input-form-fields/InputText.d.ts

@@ -3,6 +3,8 @@ import { InputProps } from './InputFormFields.propTypes';
 export declare const DELAY_MS = 300;
 export type endAdornmentIconType = 'warning' | 'error' | 'check';
 export interface InputTextProps extends InputProps {
+    /** Additional content on the top right of the input text field. **/
+    additionalLabelContent?: ReactNode;
     /** If true, applies no border  */
     ai?: boolean;
     /** The HTML autocomplete property to pass along to the input tag. Used for
@@ -42,4 +44,4 @@ export interface EndIconProps {
     success?: boolean;
     warning?: boolean;
 }
-export declare const DotInputText: ({ ai, autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputText: ({ ai, additionalLabelContent, autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/search/Search.styles.d.ts

@@ -1,2 +1,2 @@
 export declare const rootClassName = "dot-search";
-export declare const StyledSearch: import("styled-components").StyledComponent<({ ai, autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: import("../input-form-fields/InputText").InputTextProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledSearch: import("styled-components").StyledComponent<({ ai, additionalLabelContent, autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: import("../input-form-fields/InputText").InputTextProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;