@devtron-labs/devtron-fe-common-lib 0.0.54-beta-1 → 0.0.55-beta-1

package/dist/Common/CustomTagSelector/TagLabelValueSelector.js

@@ -0,0 +1,121 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as g, useEffect as A } from "react";
+import m from "../PopupMenu.js";
+import { S as O } from "../../ic-cross-0e71861d.js";
+import { S as P } from "../../ic-info-outlined-8fa45e87.js";
+import { KEY_VALUE as t } from "../Constants.js";
+import { b as K } from "../../Helper-e1262739.js";
+import { ResizableTagTextArea as W } from "./ResizableTagTextArea.js";
+import { T as j } from "../../tippy-react.esm-d5c56a0a.js";
+import { ValidationRules as F } from "./ValidationRules.js";
+const q = ({
+  selectedTagIndex: s,
+  tagData: o,
+  setTagData: p,
+  tagOptions: u,
+  isRequired: f,
+  tagInputType: l,
+  placeholder: V,
+  tabIndex: N = null,
+  refVar: $,
+  dependentRef: k,
+  noBackDrop: E
+}) => {
+  const [i, h] = g(""), [y, d] = g(""), c = new F();
+  A(() => {
+    h(o?.[l] || "");
+  }, [s, o, l]);
+  const S = (a) => {
+    setTimeout(() => {
+      d(`tag-${l}-${s}`);
+    }, 300);
+  }, w = (a) => {
+    if (!a.relatedTarget || !a.relatedTarget.classList.value || !a.relatedTarget.classList.value.includes(`tag-${s}-class`)) {
+      d("");
+      const e = { ...o };
+      e[l] = i, l === t.KEY ? e.isInvalidKey = i || e.propagate ? !c.propagateTagKey(i).isValid : e.value !== "" : i || f || e.propagate ? (e.isInvalidValue = !c.propagateTagValue(i, e.key).isValid, e.isInvalidKey = !e.key || e.isInvalidKey) : (e.isInvalidValue = !1, e.isInvalidKey = e.key ? e.isInvalidKey : !1), p(s, e);
+    }
+  }, C = (a) => {
+    h(a.target.value);
+  }, Y = (a) => {
+    K(a);
+    const e = { ...o };
+    e[l] = a.currentTarget.dataset.key, e.propagate = a.currentTarget.dataset.propagate === "true", p(s, e), d("");
+  }, B = () => {
+    let a = { isValid: !0, messages: [] };
+    return l === t.KEY ? (i || o.value) && (a = c.propagateTagKey(i)) : (f || i || o.propagate) && (a = c.propagateTagValue(i, o.key)), a.isValid ? null : /* @__PURE__ */ n("div", { className: "p-4", onClick: K, "data-testid": "tag-label-cross-stop-propagation", children: [
+      a.messages.map((e) => /* @__PURE__ */ n("div", { className: "flexbox pr-4 pl-4", children: [
+        /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(O, { className: "icon-dim-14 scr-5 mt-3 mr-4" }) }),
+        /* @__PURE__ */ r("span", { children: e })
+      ] }, e)),
+      l === t.KEY && /* @__PURE__ */ n("div", { className: "flexbox pr-4 pl-4", children: [
+        /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(P, { className: "icon-dim-14 mt-3 mr-4" }) }),
+        /* @__PURE__ */ r("span", { className: "dc__italic-font-style", children: "Key format: prefix/name or name" })
+      ] })
+    ] });
+  }, v = (a, e) => /* @__PURE__ */ r(
+    "div",
+    {
+      "data-key": a.label,
+      "data-propagate": a.propagate,
+      className: "dc__hover-n50 dc__ellipsis-right lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor",
+      onClick: Y,
+      "data-testid": `tag-label-value-${e}`,
+      children: a.label
+    },
+    `${a.value}-${e}`
+  ), x = (a, e) => /* @__PURE__ */ r(
+    j,
+    {
+      className: "default-tt",
+      arrow: !1,
+      placement: "right",
+      content: /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ r("div", { className: "mb-10 fs-12 fw-6 cn-0 dc__break-word", children: a.label }),
+        /* @__PURE__ */ r("div", { className: "fs-12 fw-4 cn-0 dc__break-word", children: a.description })
+      ] }),
+      children: v(a, e)
+    }
+  ), L = () => {
+    if (u?.length) {
+      const a = u.filter((e) => e.label.indexOf(i) >= 0);
+      if (a.length)
+        return /* @__PURE__ */ r("div", { children: a.map(
+          (e, b) => e.description ? x(e, b) : v(e, b)
+        ) });
+    }
+    return B();
+  }, _ = y === `tag-${l}-${s}` ? L() : null;
+  return /* @__PURE__ */ n(m, { autoClose: !0, autoPosition: !0, children: [
+    /* @__PURE__ */ r(m.Button, { rootClassName: "dc__bg-n50 flex top dc__no-border-imp", children: /* @__PURE__ */ r(
+      W,
+      {
+        minHeight: 30,
+        maxHeight: 80,
+        className: `form__input tag-input pt-4-imp pb-4-imp fs-13 ${l === t.KEY ? "dc__no-right-radius" : "dc__no-border-radius dc__no-right-border dc__no-left-border"} ${o[l === t.KEY ? "isInvalidKey" : "isInvalidValue"] ? "form__input--error" : ""}`,
+        value: i,
+        onChange: C,
+        onBlur: w,
+        onFocus: S,
+        placeholder: V,
+        tabIndex: N,
+        refVar: $,
+        dependentRef: k,
+        dataTestId: `tag-${l === t.KEY ? "key" : "value"}-${s}`
+      }
+    ) }),
+    _ && /* @__PURE__ */ r(
+      m.Body,
+      {
+        rootClassName: `mxh-210 dc__overflow-auto tag-${s}-class`,
+        autoWidth: !0,
+        preventWheelDisable: !0,
+        noBackDrop: E,
+        children: _
+      }
+    )
+  ] });
+};
+export {
+  q as TagLabelValueSelector
+};

package/dist/Common/CustomTagSelector/TagSelector.utils.d.ts

@@ -1,12 +1,12 @@
-export declare const baseSelectStyles: {
-    control: (base: any, state: any) => any;
-    singleValue: (base: any, state: any) => any;
-    placeholder: (base: any, state: any) => any;
-    option: (base: any, state: any) => any;
-    dropdownIndicator: (styles: any) => any;
-    valueContainer: (base: any, state: any) => any;
-    indicatorsContainer: (base: any, state: any) => any;
-    menu: (base: any, state: any) => any;
-};
-export declare const validateKubernetesKey: (key: string) => void;
-export declare const validateKubernetesValue: (value: string) => void;
+export declare const baseSelectStyles: {
+    control: (base: any, state: any) => any;
+    singleValue: (base: any, state: any) => any;
+    placeholder: (base: any, state: any) => any;
+    option: (base: any, state: any) => any;
+    dropdownIndicator: (styles: any) => any;
+    valueContainer: (base: any, state: any) => any;
+    indicatorsContainer: (base: any, state: any) => any;
+    menu: (base: any, state: any) => any;
+};
+export declare const validateKubernetesKey: (key: string) => void;
+export declare const validateKubernetesValue: (value: string) => void;

package/dist/Common/CustomTagSelector/TagSelector.utils.js

@@ -0,0 +1,61 @@
+const a = {
+  control: (e, t) => ({
+    ...e,
+    border: "1px solid var(--N200)",
+    boxShadow: "none",
+    minHeight: "auto",
+    borderRadius: "none",
+    height: "32px",
+    fontSize: "12px",
+    borderRight: "0",
+    cursor: t.isDisabled ? "not-allowed" : "normal"
+  }),
+  singleValue: (e, t) => ({
+    ...e,
+    fontWeight: "500"
+  }),
+  placeholder: (e, t) => ({
+    ...e,
+    fontWeight: "500"
+  }),
+  option: (e, t) => ({
+    ...e,
+    fontWeight: "500",
+    color: "var(--N900)",
+    fontSize: "12px",
+    padding: "5px 10px"
+  }),
+  dropdownIndicator: (e) => ({ ...e, padding: 0 }),
+  valueContainer: (e, t) => ({
+    ...e,
+    color: "var(--N900)",
+    background: t.isDisabled ? "var(--N100) !important" : "var(--N50) !important",
+    padding: "0px 10px",
+    display: "flex",
+    height: "30px",
+    fontSize: "12px",
+    cursor: t.isDisabled ? "not-allowed" : "normal",
+    pointerEvents: "all",
+    width: "100px",
+    whiteSpace: "nowrap"
+  }),
+  indicatorsContainer: (e, t) => ({
+    ...e,
+    background: t.isDisabled ? "var(--N100) !important" : "var(--N50) !important"
+  }),
+  menu: (e, t) => ({
+    ...e,
+    marginTop: "0"
+  })
+}, n = (e) => {
+  if (!(!e || e.split("/"))) {
+    const t = new RegExp("/", "g"), o = e.match(t).length;
+    o > 1 || o === 1 && e.split("/");
+  }
+}, i = (e) => {
+};
+export {
+  a as baseSelectStyles,
+  n as validateKubernetesKey,
+  i as validateKubernetesValue
+};

package/dist/Common/CustomTagSelector/Types.d.ts

@@ -1,68 +1,68 @@
-/// <reference types="react" />
-import { KEY_VALUE } from '../Constants';
-import { OptionType } from '../Types';
-export interface SuggestedTagOptionType extends OptionType {
-    description: string;
-    propagate: boolean;
-}
-export interface TagType {
-    id?: number;
-    key: string;
-    value?: string;
-    description?: string;
-    propagate: boolean;
-    mandatoryProjectIdsCsv?: string;
-    isInvalidKey?: boolean;
-    isInvalidValue?: boolean;
-    isSuggested?: boolean;
-    isPropagateDisabled?: boolean;
-}
-export interface TagErrorType {
-    isValid: boolean;
-    messages: string[];
-}
-export interface TagLabelSelectType {
-    isCreateApp?: boolean;
-    labelTags: TagType[];
-    setLabelTags: (tagList: TagType[]) => void;
-    tabIndex?: number;
-    selectedProjectId?: number;
-    suggestedTagsOptions?: SuggestedTagOptionType[];
-    reloadProjectTags?: boolean;
-}
-export interface TagDetailType {
-    index: number;
-    tagData: TagType;
-    setTagData: (index: number, tagData: TagType) => void;
-    removeTag?: (index: number) => void;
-    tabIndex?: number;
-    suggestedTagsOptions?: SuggestedTagOptionType[];
-}
-export interface TagLabelValueSelectorType {
-    selectedTagIndex: number;
-    tagData: TagType;
-    setTagData: (index: number, tagData: TagType) => void;
-    tagOptions?: SuggestedTagOptionType[];
-    isRequired?: boolean;
-    tagInputType?: KEY_VALUE;
-    placeholder?: string;
-    tabIndex?: number;
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
-    noBackDrop?: boolean;
-}
-export interface ResizableTagTextAreaProps {
-    className?: string;
-    minHeight?: number;
-    maxHeight?: number;
-    value?: string;
-    onChange?: (e: any) => void;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    placeholder?: string;
-    tabIndex?: number;
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
-    dataTestId?: string;
-    handleKeyDown?: any;
-}
+/// <reference types="react" />
+import { KEY_VALUE } from '../Constants';
+import { OptionType } from '../Types';
+export interface SuggestedTagOptionType extends OptionType {
+    description: string;
+    propagate: boolean;
+}
+export interface TagType {
+    id?: number;
+    key: string;
+    value?: string;
+    description?: string;
+    propagate: boolean;
+    mandatoryProjectIdsCsv?: string;
+    isInvalidKey?: boolean;
+    isInvalidValue?: boolean;
+    isSuggested?: boolean;
+    isPropagateDisabled?: boolean;
+}
+export interface TagErrorType {
+    isValid: boolean;
+    messages: string[];
+}
+export interface TagLabelSelectType {
+    isCreateApp?: boolean;
+    labelTags: TagType[];
+    setLabelTags: (tagList: TagType[]) => void;
+    tabIndex?: number;
+    selectedProjectId?: number;
+    suggestedTagsOptions?: SuggestedTagOptionType[];
+    reloadProjectTags?: boolean;
+}
+export interface TagDetailType {
+    index: number;
+    tagData: TagType;
+    setTagData: (index: number, tagData: TagType) => void;
+    removeTag?: (index: number) => void;
+    tabIndex?: number;
+    suggestedTagsOptions?: SuggestedTagOptionType[];
+}
+export interface TagLabelValueSelectorType {
+    selectedTagIndex: number;
+    tagData: TagType;
+    setTagData: (index: number, tagData: TagType) => void;
+    tagOptions?: SuggestedTagOptionType[];
+    isRequired?: boolean;
+    tagInputType?: KEY_VALUE;
+    placeholder?: string;
+    tabIndex?: number;
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
+    noBackDrop?: boolean;
+}
+export interface ResizableTagTextAreaProps {
+    className?: string;
+    minHeight?: number;
+    maxHeight?: number;
+    value?: string;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    placeholder?: string;
+    tabIndex?: number;
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
+    dataTestId?: string;
+    handleKeyDown?: any;
+}

package/dist/Common/CustomTagSelector/Types.js

@@ -0,0 +1 @@
+

package/dist/Common/CustomTagSelector/ValidationRules.d.ts

@@ -1,10 +1,10 @@
-export declare class ValidationRules {
-    propagateTagKey: (key: string) => {
-        isValid: boolean;
-        messages: string[];
-    };
-    propagateTagValue: (value: string, key: string) => {
-        isValid: boolean;
-        messages: string[];
-    };
-}
+export declare class ValidationRules {
+    propagateTagKey: (key: string) => {
+        isValid: boolean;
+        messages: string[];
+    };
+    propagateTagValue: (value: string, key: string) => {
+        isValid: boolean;
+        messages: string[];
+    };
+}

package/dist/Common/CustomTagSelector/ValidationRules.js

@@ -0,0 +1,35 @@
+var u = Object.defineProperty;
+var c = (s, e, a) => e in s ? u(s, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[e] = a;
+var r = (s, e, a) => (c(s, typeof e != "symbol" ? e + "" : e, a), a);
+import { PATTERNS as l } from "../Constants.js";
+const n = (s) => {
+  const e = [];
+  return s.length > 63 && e.push("Can be max 63 characters"), l.START_END_ALPHANUMERIC.test(s) || e.push("Must start and end with an alphanumeric character"), l.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(s) || e.push("Can only contain alphanumeric chars and (-), (_), (.)"), e;
+};
+class g {
+  constructor() {
+    r(this, "propagateTagKey", (e) => {
+      const a = [];
+      if (!e)
+        a.push("Key is required");
+      else if (!e.startsWith("devtron.ai/")) {
+        const t = new RegExp("/", "g"), h = e.match(t)?.length;
+        if (h > 1)
+          a.push("Key: Max 1 ( / ) allowed");
+        else if (h === 1) {
+          const [i, o] = e.split("/");
+          a.push(...n(o).map((p) => `Name: ${p}`)), i.length > 253 && a.push("Prefix: Can be max 253 characters"), l.KUBERNETES_KEY_PREFIX.test(i) || a.push("Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)");
+        } else
+          a.push(...n(e).map((i) => `Name: ${i}`));
+      }
+      return { isValid: a.length === 0, messages: a };
+    });
+    r(this, "propagateTagValue", (e, a) => {
+      const t = [];
+      return e ? a.startsWith("devtron.ai/") || t.push(...n(e)) : t.push("Value is required"), { isValid: t.length === 0, messages: t };
+    });
+  }
+}
+export {
+  g as ValidationRules
+};

package/dist/Common/CustomTagSelector/index.d.ts

@@ -1,6 +1,6 @@
-export { default as PropagateTagInfo } from './PropagateTagInfo';
-export * from './TagDetails';
-export * from './TagLabelSelect';
-export * from './TagLabelValueSelector';
-export * from './ResizableTagTextArea';
-export * from './Types';
+export { default as PropagateTagInfo } from './PropagateTagInfo';
+export * from './TagDetails';
+export * from './TagLabelSelect';
+export * from './TagLabelValueSelector';
+export * from './ResizableTagTextArea';
+export * from './Types';

package/dist/Common/CustomTagSelector/index.js

@@ -0,0 +1,12 @@
+import { default as o } from "./PropagateTagInfo.js";
+import { TagDetails as t } from "./TagDetails.js";
+import { TagLabelSelect as f } from "./TagLabelSelect.js";
+import { TagLabelValueSelector as p } from "./TagLabelValueSelector.js";
+import { ResizableTagTextArea as T } from "./ResizableTagTextArea.js";
+export {
+  o as PropagateTagInfo,
+  T as ResizableTagTextArea,
+  t as TagDetails,
+  f as TagLabelSelect,
+  p as TagLabelValueSelector
+};

package/dist/Common/DebouncedSearch/DebouncedSearch.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { DebouncedSearchProps } from './Types';
-/**
- * @deprecated Use `SearchBar` component instead.
- *
- * @param onSearch - Callback function to be called on search
- * @param Icon - (Optional) Icon to be shown before the input
- * @param iconClass - (Optional) Class for the icon
- * @param children - (Optional) In case we want to add another button or any other element
- * @param placeholder - (Optional) Placeholder for the input
- * @param containerClass - (Optional) Class for the container
- * @param inputClass - (Optional) Class for the input field
- * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
- * @param clearSearch - (Optional) To clear the search text
- * @param showClearIcon - (Optional) To show the clear icon default value is true
- */
-export default function DebouncedSearch({ onSearch, Icon, children, placeholder, containerClass, iconClass, inputClass, debounceTimeout, clearSearch, showClearIcon, autoFocus, }: DebouncedSearchProps): JSX.Element;
+/// <reference types="react" />
+import { DebouncedSearchProps } from './Types';
+/**
+ * @deprecated Use `SearchBar` component instead.
+ *
+ * @param onSearch - Callback function to be called on search
+ * @param Icon - (Optional) Icon to be shown before the input
+ * @param iconClass - (Optional) Class for the icon
+ * @param children - (Optional) In case we want to add another button or any other element
+ * @param placeholder - (Optional) Placeholder for the input
+ * @param containerClass - (Optional) Class for the container
+ * @param inputClass - (Optional) Class for the input field
+ * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
+ * @param clearSearch - (Optional) To clear the search text
+ * @param showClearIcon - (Optional) To show the clear icon default value is true
+ */
+export default function DebouncedSearch({ onSearch, Icon, children, placeholder, containerClass, iconClass, inputClass, debounceTimeout, clearSearch, showClearIcon, autoFocus, }: DebouncedSearchProps): JSX.Element;

package/dist/Common/DebouncedSearch/DebouncedSearch.js

@@ -0,0 +1,56 @@
+import { jsxs as S, jsx as t } from "react/jsx-runtime";
+import { useState as b, useEffect as C } from "react";
+import { useDebouncedEffect as N } from "./Utils.js";
+import { S as g } from "../../ic-error-cross-2760059a.js";
+function j({
+  onSearch: c,
+  Icon: r,
+  children: s,
+  placeholder: o,
+  containerClass: n = "",
+  iconClass: d = "",
+  inputClass: l = "",
+  debounceTimeout: i = 500,
+  clearSearch: u,
+  showClearIcon: h = !0,
+  autoFocus: m = !0
+}) {
+  const [e, a] = b("");
+  C(() => {
+    a("");
+  }, [u]);
+  const f = (x) => {
+    a(x.target.value);
+  }, p = () => {
+    a("");
+  };
+  return N(() => c(e), i, [e]), /* @__PURE__ */ S("div", { className: n, children: [
+    r && /* @__PURE__ */ t(r, { className: d }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        type: "text",
+        className: l,
+        placeholder: o ?? "Search",
+        value: e,
+        onChange: f,
+        autoFocus: m,
+        "data-testid": "debounced-search"
+      }
+    ),
+    h && !!e && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: "dc__outline-none-imp dc__no-border p-0 bc-n50 flex",
+        onClick: p,
+        "data-testid": "clear-search",
+        children: /* @__PURE__ */ t(g, { className: "icon-dim-20 icon-n6" })
+      }
+    ),
+    s
+  ] });
+}
+export {
+  j as default
+};

package/dist/Common/DebouncedSearch/Types.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-export interface DebouncedSearchProps {
-    onSearch: (query: string) => void;
-    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-    placeholder?: string;
-    inputClass?: string;
-    containerClass?: string;
-    iconClass?: string;
-    children?: React.ReactNode;
-    debounceTimeout?: number;
-    clearSearch?: boolean;
-    showClearIcon?: boolean;
-    autoFocus?: boolean;
-}
+/// <reference types="react" />
+export interface DebouncedSearchProps {
+    onSearch: (query: string) => void;
+    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    placeholder?: string;
+    inputClass?: string;
+    containerClass?: string;
+    iconClass?: string;
+    children?: React.ReactNode;
+    debounceTimeout?: number;
+    clearSearch?: boolean;
+    showClearIcon?: boolean;
+    autoFocus?: boolean;
+}

package/dist/Common/DebouncedSearch/Types.js

@@ -0,0 +1 @@
+

package/dist/Common/DebouncedSearch/Utils.d.ts

@@ -1 +1 @@
-export declare function useDebouncedEffect(callback: any, delay: any, deps?: unknown[]): void;
+export declare function useDebouncedEffect(callback: any, delay: any, deps?: unknown[]): void;

package/dist/Common/DebouncedSearch/Utils.js

@@ -0,0 +1,19 @@
+import { useRef as n, useEffect as c } from "react";
+function s(r, e, u = []) {
+  const t = n(!0);
+  c(() => {
+    if (t.current) {
+      t.current = !1;
+      return;
+    }
+    const f = setTimeout(() => {
+      r();
+    }, e);
+    return () => {
+      clearTimeout(f);
+    };
+  }, [e, ...u]);
+}
+export {
+  s as useDebouncedEffect
+};

package/dist/Common/DebouncedSearch/__tests__/DebouncedSearch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Common/DebouncedSearch/__tests__/DebouncedSearch.test.js

@@ -0,0 +1,34 @@
+import { jsx as t } from "react/jsx-runtime";
+import { r as o, s as c, f as r } from "../../../react.esm-5465a283.js";
+import { S as s } from "../../../ic-error-cross-2760059a.js";
+import n from "../DebouncedSearch.js";
+jest.mock("../../helpers/Helpers", () => ({
+  useDebouncedEffect: jest.fn().mockImplementation((e) => e())
+}));
+describe("When DebouncedSearch mounts", () => {
+  it("should have a input field", () => {
+    o(/* @__PURE__ */ t(n, { onSearch: jest.fn() })), expect(c.getByRole("textbox")).toBeTruthy();
+  }), it("should have a clear icon when clearSearch is true and user has typed something", () => {
+    const { getByTestId: e } = o(/* @__PURE__ */ t(n, { onSearch: jest.fn(), clearSearch: !0, debounceTimeout: 0 }));
+    r.change(c.getByRole("textbox"), { target: { value: "test" } }), expect(e("clear-search")).toBeTruthy();
+  }), it("should call onSearch when input value changes", () => {
+    const e = jest.fn();
+    o(/* @__PURE__ */ t(n, { onSearch: e, debounceTimeout: 0 })), r.change(c.getByRole("textbox"), { target: { value: "test" } }), expect(e).toHaveBeenCalled();
+  }), it("should clear input value when clear icon is clicked", () => {
+    const { container: e } = o(/* @__PURE__ */ t(n, { onSearch: jest.fn(), clearSearch: !0, debounceTimeout: 0 }));
+    r.change(c.getByRole("textbox"), { target: { value: "test" } });
+    const a = e.querySelector("input");
+    expect(a.value).toBe("test"), r.click(c.getByRole("button")), expect(a.value).toBe("");
+  }), it("should have a placeholder", () => {
+    o(/* @__PURE__ */ t(n, { onSearch: jest.fn(), placeholder: "test" })), expect(c.getByPlaceholderText("test")).toBeTruthy();
+  }), it("should not show clear icon when showClearIcon is false", () => {
+    o(/* @__PURE__ */ t(n, { onSearch: jest.fn(), showClearIcon: !1 })), expect(c.queryByRole("button")).toBeNull();
+  }), it("should have a custom Icon", () => {
+    const { container: e } = o(/* @__PURE__ */ t(n, { onSearch: jest.fn(), Icon: s, iconClass: "icon-class" }));
+    expect(e.querySelector(".icon-class")).toBeTruthy();
+  }), it("should support children", () => {
+    o(
+      /* @__PURE__ */ t(n, { onSearch: jest.fn(), children: /* @__PURE__ */ t("div", { children: "test" }) })
+    ), expect(c.getByText("test")).toBeTruthy();
+  });
+});

package/dist/Common/DeleteComponentModal/DeleteComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { DeleteComponentProps } from './types';
-declare function DeleteComponent({ setDeleting, toggleConfirmation, deleteComponent, title, component, payload, confirmationDialogDescription, redirectTo, url, reload, configuration, closeCustomComponent, }: DeleteComponentProps): JSX.Element;
-export default DeleteComponent;
+/// <reference types="react" />
+import { DeleteComponentProps } from './types';
+declare function DeleteComponent({ setDeleting, toggleConfirmation, deleteComponent, title, component, payload, confirmationDialogDescription, redirectTo, url, reload, configuration, closeCustomComponent, }: DeleteComponentProps): JSX.Element;
+export default DeleteComponent;