@devtron-labs/devtron-fe-common-lib 0.0.55-beta-2 → 0.0.55-beta-3

package/dist/Common/CustomTagSelector/TagLabelValueSelector.js

@@ -0,0 +1,121 @@
+import { j as a } from "../../jsx-runtime-0dcb030c.js";
+import { useState as x, useEffect as B } from "react";
+import d from "../PopupMenu.js";
+import { S as L } from "../../ic-cross-0e71861d.js";
+import { S as A } from "../../ic-info-outlined-8fa45e87.js";
+import { KEY_VALUE as t } from "../Constants.js";
+import { b } from "../../Helper-a0caa238.js";
+import { ResizableTagTextArea as O } from "./ResizableTagTextArea.js";
+import { T as P } from "../../tippy-react.esm-8dc66a75.js";
+import { ValidationRules as R } from "./ValidationRules.js";
+const Z = ({
+  selectedTagIndex: i,
+  tagData: o,
+  setTagData: m,
+  tagOptions: p,
+  isRequired: u,
+  tagInputType: r,
+  placeholder: g,
+  tabIndex: j = null,
+  refVar: K,
+  dependentRef: V,
+  noBackDrop: N
+}) => {
+  const [l, f] = x(""), [$, c] = x(""), n = new R();
+  B(() => {
+    f(o?.[r] || "");
+  }, [i, o, r]);
+  const E = (s) => {
+    setTimeout(() => {
+      c(`tag-${r}-${i}`);
+    }, 300);
+  }, k = (s) => {
+    if (!s.relatedTarget || !s.relatedTarget.classList.value || !s.relatedTarget.classList.value.includes(`tag-${i}-class`)) {
+      c("");
+      const e = { ...o };
+      e[r] = l, r === t.KEY ? e.isInvalidKey = l || e.propagate ? !n.propagateTagKey(l).isValid : e.value !== "" : l || u || e.propagate ? (e.isInvalidValue = !n.propagateTagValue(l, e.key).isValid, e.isInvalidKey = !e.key || e.isInvalidKey) : (e.isInvalidValue = !1, e.isInvalidKey = e.key ? e.isInvalidKey : !1), m(i, e);
+    }
+  }, y = (s) => {
+    f(s.target.value);
+  }, S = (s) => {
+    b(s);
+    const e = { ...o };
+    e[r] = s.currentTarget.dataset.key, e.propagate = s.currentTarget.dataset.propagate === "true", m(i, e), c("");
+  }, w = () => {
+    let s = { isValid: !0, messages: [] };
+    return r === t.KEY ? (l || o.value) && (s = n.propagateTagKey(l)) : (u || l || o.propagate) && (s = n.propagateTagValue(l, o.key)), s.isValid ? null : /* @__PURE__ */ a.jsxs("div", { className: "p-4", onClick: b, "data-testid": "tag-label-cross-stop-propagation", children: [
+      s.messages.map((e) => /* @__PURE__ */ a.jsxs("div", { className: "flexbox pr-4 pl-4", children: [
+        /* @__PURE__ */ a.jsx("span", { children: /* @__PURE__ */ a.jsx(L, { className: "icon-dim-14 scr-5 mt-3 mr-4" }) }),
+        /* @__PURE__ */ a.jsx("span", { children: e })
+      ] }, e)),
+      r === t.KEY && /* @__PURE__ */ a.jsxs("div", { className: "flexbox pr-4 pl-4", children: [
+        /* @__PURE__ */ a.jsx("span", { children: /* @__PURE__ */ a.jsx(A, { className: "icon-dim-14 mt-3 mr-4" }) }),
+        /* @__PURE__ */ a.jsx("span", { className: "dc__italic-font-style", children: "Key format: prefix/name or name" })
+      ] })
+    ] });
+  }, h = (s, e) => /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      "data-key": s.label,
+      "data-propagate": s.propagate,
+      className: "dc__hover-n50 dc__ellipsis-right lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor",
+      onClick: S,
+      "data-testid": `tag-label-value-${e}`,
+      children: s.label
+    },
+    `${s.value}-${e}`
+  ), C = (s, e) => /* @__PURE__ */ a.jsx(
+    P,
+    {
+      className: "default-tt",
+      arrow: !1,
+      placement: "right",
+      content: /* @__PURE__ */ a.jsxs("div", { children: [
+        /* @__PURE__ */ a.jsx("div", { className: "mb-10 fs-12 fw-6 cn-0 dc__break-word", children: s.label }),
+        /* @__PURE__ */ a.jsx("div", { className: "fs-12 fw-4 cn-0 dc__break-word", children: s.description })
+      ] }),
+      children: h(s, e)
+    }
+  ), Y = () => {
+    if (p?.length) {
+      const s = p.filter((e) => e.label.indexOf(l) >= 0);
+      if (s.length)
+        return /* @__PURE__ */ a.jsx("div", { children: s.map(
+          (e, _) => e.description ? C(e, _) : h(e, _)
+        ) });
+    }
+    return w();
+  }, v = $ === `tag-${r}-${i}` ? Y() : null;
+  return /* @__PURE__ */ a.jsxs(d, { autoClose: !0, autoPosition: !0, children: [
+    /* @__PURE__ */ a.jsx(d.Button, { rootClassName: "dc__bg-n50 flex top dc__no-border-imp", children: /* @__PURE__ */ a.jsx(
+      O,
+      {
+        minHeight: 30,
+        maxHeight: 80,
+        className: `form__input tag-input pt-4-imp pb-4-imp fs-13 ${r === t.KEY ? "dc__no-right-radius" : "dc__no-border-radius dc__no-right-border dc__no-left-border"} ${o[r === t.KEY ? "isInvalidKey" : "isInvalidValue"] ? "form__input--error" : ""}`,
+        value: l,
+        onChange: y,
+        onBlur: k,
+        onFocus: E,
+        placeholder: g,
+        tabIndex: j,
+        refVar: K,
+        dependentRef: V,
+        dataTestId: `tag-${r === t.KEY ? "key" : "value"}-${i}`
+      }
+    ) }),
+    v && /* @__PURE__ */ a.jsx(
+      d.Body,
+      {
+        rootClassName: `mxh-210 dc__overflow-auto tag-${i}-class`,
+        autoWidth: !0,
+        preventWheelDisable: !0,
+        noBackDrop: N,
+        children: v
+      }
+    )
+  ] });
+};
+export {
+  Z 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,15 +1,17 @@
-/// <reference types="react" />
-import { DebouncedSearchProps } from './Types';
-/**
- * @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 { j as e } from "../../jsx-runtime-0dcb030c.js";
+import { useState as S, useEffect as b } from "react";
+import { useDebouncedEffect as j } from "./Utils.js";
+import { S as C } from "../../ic-error-cross-2760059a.js";
+function _({
+  onSearch: r,
+  Icon: s,
+  children: c,
+  placeholder: o,
+  containerClass: n = "",
+  iconClass: d = "",
+  inputClass: l = "",
+  debounceTimeout: i = 500,
+  clearSearch: u,
+  showClearIcon: m = !0,
+  autoFocus: h = !0
+}) {
+  const [t, a] = S("");
+  b(() => {
+    a("");
+  }, [u]);
+  const x = (f) => {
+    a(f.target.value);
+  }, p = () => {
+    a("");
+  };
+  return j(() => r(t), i, [t]), /* @__PURE__ */ e.jsxs("div", { className: n, children: [
+    s && /* @__PURE__ */ e.jsx(s, { className: d }),
+    /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        type: "text",
+        className: l,
+        placeholder: o ?? "Search",
+        value: t,
+        onChange: x,
+        autoFocus: h,
+        "data-testid": "debounced-search"
+      }
+    ),
+    m && !!t && /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        type: "button",
+        className: "dc__outline-none-imp dc__no-border p-0 bc-n50 flex",
+        onClick: p,
+        "data-testid": "clear-search",
+        children: /* @__PURE__ */ e.jsx(C, { className: "icon-dim-20 icon-n6" })
+      }
+    ),
+    c
+  ] });
+}
+export {
+  _ 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 { j as t } from "../../../jsx-runtime-0dcb030c.js";
+import { r as o, s as c, f as n } from "../../../react.esm-2c92920f.js";
+import { S as a } from "../../../ic-error-cross-2760059a.js";
+import s 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.jsx(s, { 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.jsx(s, { onSearch: jest.fn(), clearSearch: !0, debounceTimeout: 0 }));
+    n.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.jsx(s, { onSearch: e, debounceTimeout: 0 })), n.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.jsx(s, { onSearch: jest.fn(), clearSearch: !0, debounceTimeout: 0 }));
+    n.change(c.getByRole("textbox"), { target: { value: "test" } });
+    const r = e.querySelector("input");
+    expect(r.value).toBe("test"), n.click(c.getByRole("button")), expect(r.value).toBe("");
+  }), it("should have a placeholder", () => {
+    o(/* @__PURE__ */ t.jsx(s, { onSearch: jest.fn(), placeholder: "test" })), expect(c.getByPlaceholderText("test")).toBeTruthy();
+  }), it("should not show clear icon when showClearIcon is false", () => {
+    o(/* @__PURE__ */ t.jsx(s, { onSearch: jest.fn(), showClearIcon: !1 })), expect(c.queryByRole("button")).toBeNull();
+  }), it("should have a custom Icon", () => {
+    const { container: e } = o(/* @__PURE__ */ t.jsx(s, { onSearch: jest.fn(), Icon: a, iconClass: "icon-class" }));
+    expect(e.querySelector(".icon-class")).toBeTruthy();
+  }), it("should support children", () => {
+    o(
+      /* @__PURE__ */ t.jsx(s, { onSearch: jest.fn(), children: /* @__PURE__ */ t.jsx("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;