@epam/ai-dial-ui-kit 0.4.0-rc.19 → 0.4.0-rc.20

package/dist/dial-ui-kit.es.js

@@ -6449,7 +6449,7 @@ const c1 = "flex justify-end gap-2 px-6 py-4", d1 = "text-secondary dial-small-1
       children: b()
     }
   );
-}, Yu = ({ selectedItems: e, listCssClass: t, listElementCssClass: s }) => !!e?.length && /* @__PURE__ */ w(
+}, Yu = ({ selectedItems: e, listCssClass: t, listElementCssClass: s, placeholder: o }) => e?.length ? /* @__PURE__ */ w(
   "ul",
   {
     className: q(
@@ -6457,15 +6457,15 @@ const c1 = "flex justify-end gap-2 px-6 py-4", d1 = "text-secondary dial-small-1
       "flex gap-x-2 gap-y-1",
       t
     ),
-    children: e?.map((o) => /* @__PURE__ */ w("li", { children: /* @__PURE__ */ w($s, { tooltip: o, children: /* @__PURE__ */ w(
+    children: e?.map((i) => /* @__PURE__ */ w("li", { children: /* @__PURE__ */ w($s, { tooltip: i, children: /* @__PURE__ */ w(
       Ja,
       {
-        tag: o,
+        tag: i,
         cssClass: q([s])
       }
-    ) }) }, o))
+    ) }) }, i))
   }
-), Rc = (e) => /* @__PURE__ */ ae.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ ae.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), g1 = ({
+) : o ? /* @__PURE__ */ w("span", { className: "text-secondary", children: o }) : null, Rc = (e) => /* @__PURE__ */ ae.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ ae.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), g1 = ({
   children: e,
   open: t,
   disabled: s = !1,
@@ -6475,11 +6475,13 @@ const c1 = "flex justify-end gap-2 px-6 py-4", d1 = "text-secondary dial-small-1
   onOpen: r,
   elementId: a,
   errorText: l,
-  emptyValueText: c
+  invalid: c,
+  emptyValueText: d,
+  placeholder: u
 }) => {
-  const d = Array.isArray(o) && o.length > 0, u = typeof o == "string" && !!o.trim(), h = d || u ? o : c, g = s ? void 0 : r;
+  const h = Array.isArray(o) && o.length > 0, g = typeof o == "string" && !!o.trim(), p = h || g ? o : u ? void 0 : d, f = s ? void 0 : r;
   return /* @__PURE__ */ $(It, { children: [
-    d ? /* @__PURE__ */ w("div", { className: "w-full", onClick: g, children: /* @__PURE__ */ $(
+    h ? /* @__PURE__ */ w("div", { className: "w-full", onClick: f, children: /* @__PURE__ */ $(
       "div",
       {
         className: q(
@@ -6487,7 +6489,13 @@ const c1 = "flex justify-end gap-2 px-6 py-4", d1 = "text-secondary dial-small-1
           s && "dial-input-disable"
         ),
         children: [
-          /* @__PURE__ */ w(Yu, { selectedItems: h }),
+          /* @__PURE__ */ w(
+            Yu,
+            {
+              placeholder: u,
+              selectedItems: p
+            }
+          ),
           !s && /* @__PURE__ */ w("div", { className: "ml-1", children: /* @__PURE__ */ w(
             De,
             {
@@ -6509,7 +6517,7 @@ const c1 = "flex justify-end gap-2 px-6 py-4", d1 = "text-secondary dial-small-1
         {
           type: "button",
           className: "w-full",
-          onClick: g,
+          onClick: f,
           "aria-label": "open-popup",
           id: a,
           children: /* @__PURE__ */ $(
@@ -6519,10 +6527,10 @@ const c1 = "flex justify-end gap-2 px-6 py-4", d1 = "text-secondary dial-small-1
                 "dial-input px-3 py-2 dial-input-field flex flex-row items-center w-full justify-between",
                 n,
                 s && "dial-input-disable",
-                l && "dial-input-error"
+                (l || c) && "dial-input-error"
               ),
               children: [
-                /* @__PURE__ */ w($s, { tooltip: String(h), children: /* @__PURE__ */ w("span", { className: i, children: h }) }),
+                /* @__PURE__ */ w($s, { tooltip: String(p), children: p || !u ? /* @__PURE__ */ w("span", { className: i, children: p }) : /* @__PURE__ */ w("span", { className: "text-secondary", children: u }) }),
                 !s && /* @__PURE__ */ w("div", { className: "flex-shrink-0", children: /* @__PURE__ */ w(
                   De,
                   {

package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 export interface DialAutocompleteInputValueProps {
+    placeholder?: string;
     selectedItems?: string[];
     listCssClass?: string;
     listElementCssClass?: string;
@@ -19,6 +20,7 @@ export interface DialAutocompleteInputValueProps {
  * />
  * ```
  *
+ * @param [placeholder] - Placeholder text to display when no items are selected.
  * @param [selectedItems] - An array of strings representing the selected items to display. If empty or undefined, the component renders nothing.
  * @param [listCssClass] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
  * @param [listElementCssClass] - Additional CSS classes applied to each `<li>` element representing an individual selected item.

package/dist/src/components/InputPopup/InputPopup.d.ts

@@ -7,9 +7,11 @@ export interface DialInputPopupProps {
     disabled?: boolean;
     valueCssClasses?: string;
     inputCssClasses?: string;
+    placeholder?: string;
     elementId?: string;
     errorText?: string;
-    emptyValueText: string;
+    invalid?: boolean;
+    emptyValueText?: string;
 }
 /**
  * An input field that opens a popup when clicked, displaying a selected value or a list of values.
@@ -35,6 +37,7 @@ export interface DialInputPopupProps {
  *
  * @param [open] - The current state of the modal, indicating whether it is opened or closed.
  * @param [selectedValue] - The currently selected value(s). Can be a string for a single value or an array of strings for multiple values.
+ * @param [placeholder] - Placeholder text displayed when no value is selected.
  * @param children - The content to render inside the modal when it is opened.
  * @param onOpen - A callback function triggered when the modal open button is clicked.
  * @param [disabled=false] - Whether the input is disabled, preventing user interaction.
@@ -42,6 +45,7 @@ export interface DialInputPopupProps {
  * @param [inputCssClasses] - Additional CSS classes applied to the input container.
  * @param [elementId] - A unique identifier for the input element, useful for accessibility and testing.
  * @param [errorText] - An optional error message displayed below the input when an error state is present.
- * @param emptyValueText - The text displayed when no value is selected.
+ * @param [invalid] - Whether the input is in an invalid state, affecting styling. Applyed automatically if errorText is provided.
+ * @param [emptyValueText] - The text displayed when no value is selected and placeholder is not provided.
  */
 export declare const DialInputPopup: FC<DialInputPopupProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.4.0-rc.19",
+  "version": "0.4.0-rc.20",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",