@reportportal/ui-kit 0.0.1-alpha.135 → 0.0.1-alpha.137

package/dist/adaptiveTagList.js

@@ -0,0 +1,189 @@
+import { jsx as l, jsxs as g, Fragment as M } from "react/jsx-runtime";
+import { useRef as Z, useState as v, useCallback as m, useMemo as h, useEffect as S } from "react";
+import { c as A } from "./bind-06a7ff84.js";
+import { B as P } from "./button-97d9e587.js";
+import { S as V } from "./close-4d480ef7.js";
+import { i as tt } from "./isEmpty-ccacb5ff.js";
+const et = 3, st = 22, nt = 8, it = 0, at = 100, ot = 20, lt = {
+  "tag-list-wrapper": "_tag-list-wrapper_1yg21_16",
+  "tag-list-wrapper--show-all-view": "_tag-list-wrapper--show-all-view_1yg21_19",
+  "tag-list": "_tag-list_1yg21_16",
+  "tag-list--full-width": "_tag-list--full-width_1yg21_31",
+  "tag-list--show-all-view": "_tag-list--show-all-view_1yg21_34",
+  "tag-list--expanded": "_tag-list--expanded_1yg21_40",
+  "tag-list--no-tags": "_tag-list--no-tags_1yg21_45",
+  "tag-list__item": "_tag-list__item_1yg21_49",
+  "tag-list__item-title": "_tag-list__item-title_1yg21_78",
+  "tag-list__item--is-editable": "_tag-list__item--is-editable_1yg21_93",
+  "tag-list__item-remove": "_tag-list__item-remove_1yg21_99",
+  "tag-list__item--count": "_tag-list__item--count_1yg21_123",
+  "tag-list__item--button-show-all-view": "_tag-list__item--button-show-all-view_1yg21_137",
+  "tag-list__item--button-wrapper": "_tag-list__item--button-wrapper_1yg21_141",
+  "no-tags-message": "_no-tags-message_1yg21_158"
+}, a = A.bind(lt), pt = ({
+  tags: C,
+  isShowAllView: e = !1,
+  defaultVisibleLines: s = et,
+  onRemoveTag: c,
+  noTagsMessage: R = "No tags added",
+  showAllText: I = "Show all",
+  hideAllText: H = "Hide all",
+  showLessText: O = "Show less"
+}) => {
+  const d = Z(null), [E, b] = v(0), [o, $] = v(!1), [j, w] = v(/* @__PURE__ */ new Set()), [B, Y] = v(!1), U = m(
+    (t, n) => {
+      t.stopPropagation(), c == null || c(n);
+    },
+    [c]
+  ), k = m(() => {
+    const t = d.current, n = /* @__PURE__ */ new Set();
+    if (!t)
+      return;
+    const i = [...t.children].filter(
+      (r) => !r.classList.contains("tag-list__item--button")
+    );
+    if (i.length === 0)
+      return;
+    const p = i[0].offsetTop, x = t.getBoundingClientRect().right;
+    let u = 0;
+    i.forEach((r, f) => {
+      const T = r.getBoundingClientRect(), Q = r.offsetTop !== p, X = T.right > x;
+      (Q || X) && (n.add(f), u += 1);
+    }), w(n), b(u);
+  }, []), D = m(() => {
+    const t = d.current, n = /* @__PURE__ */ new Set();
+    if (!t || !s)
+      return;
+    const i = [...t.children].filter(
+      (f) => !f.classList.contains("tag-list__item--button")
+    );
+    if (i.length === 0)
+      return;
+    const p = i[0].offsetTop, _ = i[0].offsetHeight, x = p + _ * (s - 1);
+    let u = 0, r = !1;
+    i.forEach((f, T) => {
+      f.offsetTop > x + ot && (n.add(T), u += 1, r = !0);
+    }), w(n), b(u), Y(r);
+  }, [s]), q = h(() => e && s && !o ? {
+    maxHeight: `${st * s + nt * (s - 1)}px`,
+    overflow: "hidden"
+  } : {}, [e, s, o]);
+  S(() => {
+    if (!d.current)
+      return;
+    const i = setTimeout(() => {
+      e && s ? D() : k();
+    }, e && s ? it : at);
+    return () => clearTimeout(i);
+  }, [
+    d,
+    e,
+    s,
+    k,
+    D,
+    E
+  ]);
+  const N = m(() => {
+    $((t) => !t);
+  }, []), z = (t) => {
+    t.stopPropagation(), N();
+  }, y = m(
+    (t) => {
+      t.stopPropagation(), N();
+    },
+    [N]
+  ), J = h(() => E > 0 && !o, [E, o]), F = h(
+    () => e && s && B && !o,
+    [e, s, B, o]
+  ), G = h(() => /* @__PURE__ */ l("div", { className: a("tag-list__item--button-wrapper"), children: /* @__PURE__ */ l(
+    P,
+    {
+      className: a("tag-list__item--button", "tag-list__item--button-show-all-view"),
+      onClick: y,
+      variant: "text",
+      children: I
+    }
+  ) }), [y, I]), W = h(() => /* @__PURE__ */ l("div", { className: a({ "tag-list__item--button-wrapper": e }), children: /* @__PURE__ */ l(
+    P,
+    {
+      className: a("tag-list__item--button", {
+        "tag-list__item--button-show-all-view": e && s
+      }),
+      onClick: y,
+      variant: "text",
+      children: e && s ? H : O
+    }
+  ) }), [y, e, s, H, O]), K = m((t, n) => {
+    t && (t.scrollWidth > t.clientWidth ? t.setAttribute("title", n) : t.removeAttribute("title"));
+  }, []);
+  return tt(C) ? /* @__PURE__ */ l("div", { className: a("tag-list-wrapper"), children: /* @__PURE__ */ l("div", { className: a("tag-list", "tag-list--no-tags", "tag-list--full-width"), children: /* @__PURE__ */ l("div", { className: a("no-tags-message"), children: R }) }) }) : /* @__PURE__ */ g("div", { className: a("tag-list-wrapper", { "tag-list-wrapper--show-all-view": e }), children: [
+    /* @__PURE__ */ g(
+      "div",
+      {
+        className: a("tag-list", "tag-list--full-width", {
+          "tag-list--expanded": o,
+          "tag-list--show-all-view": e && !o
+        }),
+        style: q,
+        ref: d,
+        children: [
+          C.map((t, n) => {
+            const i = !o && j.has(n), p = !e && i;
+            return /* @__PURE__ */ g(
+              "div",
+              {
+                className: a("tag-list__item", { "tag-list__item--is-editable": !!c }),
+                style: {
+                  display: p ? "none" : "flex"
+                },
+                children: [
+                  /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: a("tag-list__item-title"),
+                      ref: (_) => K(_, t),
+                      children: t
+                    }
+                  ),
+                  c && /* @__PURE__ */ l(
+                    "button",
+                    {
+                      type: "button",
+                      className: a("tag-list__item-remove"),
+                      onClick: (_) => U(_, t),
+                      children: /* @__PURE__ */ l(V, {})
+                    }
+                  )
+                ]
+              },
+              `${n}-${t}`
+            );
+          }),
+          !e && /* @__PURE__ */ g(M, { children: [
+            o && W,
+            F && G
+          ] })
+        ]
+      }
+    ),
+    e && /* @__PURE__ */ g(M, { children: [
+      o && W,
+      F && G
+    ] }),
+    J && !e ? /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        className: a("tag-list__item", "tag-list__item--count"),
+        onClick: z,
+        children: [
+          "+",
+          E
+        ]
+      }
+    ) : null
+  ] });
+};
+export {
+  pt as AdaptiveTagList
+};

package/dist/common/constants/sortable.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_SORTABLE_TYPE = "SORTABLE_ITEM";

package/dist/common/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useOnClickOutside } from './useOnClickOutside';
+export { useSortable } from './useSortable';
 export { useWindowResize } from './useWindowResize';

package/dist/common/hooks/useSortable.d.ts

@@ -0,0 +1,3 @@
+import { UseSortableOptions, UseSortableReturn } from '../types';
+
+export declare const useSortable: ({ id, index, type, isDisabled, onDrop, hideDefaultPreview, }: UseSortableOptions) => UseSortableReturn;

package/dist/common/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './commonTypes';
+export * from './sortableTypes';

package/dist/common/types/sortableTypes.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode, Ref } from 'react';
+import { XYCoord, ConnectDragSource, ConnectDropTarget, ConnectDragPreview } from 'react-dnd';
+
+export interface SortableItemData {
+    id: string | number;
+    index: number;
+}
+export interface DragItem extends SortableItemData {
+    type: string;
+}
+export interface UseSortableOptions {
+    id: string | number;
+    index: number;
+    type?: string;
+    isDisabled?: boolean;
+    onDrop?: (fromIndex: number, toIndex: number) => void;
+    hideDefaultPreview?: boolean;
+}
+export interface UseSortableReturn {
+    isDragging: boolean;
+    isOver: boolean;
+    draggedItemIndex: number | null;
+    dropPosition: 'top' | 'bottom' | null;
+    dragRef: ConnectDragSource;
+    dropRef: ConnectDropTarget;
+    previewRef: ConnectDragPreview;
+}
+export interface SortableItemRenderProps {
+    isDragging: boolean;
+    isOver: boolean;
+    dragRef: Ref<HTMLElement>;
+}
+export interface SortableItemProps {
+    id: string | number;
+    index: number;
+    type?: string;
+    isDisabled?: boolean;
+    className?: string;
+    draggingClassName?: string;
+    dropTargetClassName?: string;
+    onDrop?: (fromIndex: number, toIndex: number) => void;
+    hideDefaultPreview?: boolean;
+    children: ReactNode | ((props: SortableItemRenderProps) => ReactNode);
+}
+export interface SortableListProps<T extends {
+    id: string | number;
+}> {
+    items: T[];
+    type?: string;
+    isDisabled?: boolean;
+    className?: string;
+    itemClassName?: string;
+    onReorder: (reorderedItems: T[]) => void;
+    renderItem: (item: T, index: number, dragRef: Ref<HTMLElement>, isDragging: boolean) => ReactNode;
+    keyExtractor?: (item: T) => string | number;
+}
+export interface DragLayerProps {
+    type: string;
+    renderPreview: (item: DragItem) => ReactNode;
+    className?: string;
+    previewClassName?: string;
+    portalTarget?: Element | null;
+}
+export interface DragLayerCollectedProps {
+    item: DragItem | null;
+    itemType: string | symbol | null;
+    clientOffset: XYCoord | null;
+    isDragging: boolean;
+}

package/dist/common/utils/testUtils.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+
+export declare const renderWithDnd: (ui: ReactElement) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/dist/components/adaptiveTagList/adaptiveTagList.d.ts

@@ -0,0 +1,11 @@
+export interface AdaptiveTagListProps {
+    tags: string[];
+    isShowAllView?: boolean;
+    defaultVisibleLines?: number;
+    onRemoveTag?: (tag: string) => void;
+    noTagsMessage?: string;
+    showAllText?: string;
+    hideAllText?: string;
+    showLessText?: string;
+}
+export declare const AdaptiveTagList: ({ tags, isShowAllView, defaultVisibleLines, onRemoveTag, noTagsMessage, showAllText, hideAllText, showLessText, }: AdaptiveTagListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/adaptiveTagList/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_VISIBLE_LINES = 3;
+export declare const TAG_LINE_HEIGHT = 22;
+export declare const TAG_GAP_HEIGHT = 8;
+export declare const IMMEDIATE_DELAY = 0;
+export declare const FONT_LOADING_DELAY = 100;
+export declare const OFFSET_TOLERANCE = 20;

package/dist/components/adaptiveTagList/index.d.ts

@@ -0,0 +1,2 @@
+export { AdaptiveTagList } from './adaptiveTagList';
+export type { AdaptiveTagListProps } from './adaptiveTagList';

package/dist/components/autocompletes/multipleAutocomplete/selectedItems/selectedItems.d.ts

@@ -37,5 +37,5 @@ type SelectedItemsProps<T> = Omit<SelectedItemProps<T>, 'item' | 'editItem'> & {
     selectedItemClassName?: string;
     selectedItemTextClassName?: string;
 };
-export declare const SelectedItems: <T>({ items, parseValueToString, getItemValidationErrorType, storedItemsMap, highlightUnStoredItem, renderCustomSelectedItem, selectedItemSingleLine, selectedItemClassName, selectedItemTextClassName, ...props }: SelectedItemsProps<T>) => (string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined)[];
+export declare const SelectedItems: <T>({ items, parseValueToString, getItemValidationErrorType, storedItemsMap, highlightUnStoredItem, renderCustomSelectedItem, selectedItemSingleLine, selectedItemClassName, selectedItemTextClassName, ...props }: SelectedItemsProps<T>) => (string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined)[];
 export {};

package/dist/components/dropdown/constants.d.ts

@@ -8,3 +8,4 @@ export declare enum EventName {
 }
 export declare const SCROLLBARS_AUTO_HEIGHT_MAX = 216;
 export declare const DROPDOWN_PORTAL_MENU_ATTR = "data-dropdown-portal-menu";
+export declare const DEFAULT_VISIBLE_TAG_LINES = 10;

package/dist/components/dropdown/dropdown.d.ts

@@ -51,5 +51,7 @@ export interface DropdownProps {
      * @example menuPortalRoot={document.body}
      */
     menuPortalRoot?: Element;
+    /** Whether to render selected values as tags using AdaptiveTagList (only for multiSelect mode) */
+    isMultiSelectWithTags?: boolean;
 }
 export declare const Dropdown: FC<DropdownProps>;

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export { AdaptiveTagList } from './adaptiveTagList';
 export { AttachedFile } from './attachedFile';
 export { BaseIconButton } from './baseIconButton';
 export { Breadcrumbs } from './breadcrumbs';
@@ -22,6 +23,7 @@ export { SpinLoader } from './spinLoader';
 export { SystemAlert } from './systemAlert';
 export { SystemMessage } from './systemMessage';
 export { SingleAutocomplete } from './autocompletes/singleAutocomplete';
+export { SortableItem, SortableList, DragLayer } from './sortable';
 export { Table } from './table';
 export { ThemeProvider } from './themeProvider';
 export { Toggle } from './toggle';

package/dist/components/sortable/dragLayer/dragLayer.d.ts

@@ -0,0 +1,3 @@
+import { DragLayerProps } from '../../../common/types';
+
+export declare const DragLayer: ({ type, renderPreview, className, previewClassName, portalTarget, }: DragLayerProps) => import('react').ReactPortal | null;

package/dist/components/sortable/dragLayer/index.d.ts

@@ -0,0 +1 @@
+export { DragLayer } from './dragLayer';

package/dist/components/sortable/helpers.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { XYCoord } from 'react-dnd';
+
+export declare const getPreviewStyles: (clientOffset: XYCoord | null) => CSSProperties;

package/dist/components/sortable/index.d.ts

@@ -0,0 +1,3 @@
+export { SortableItem } from './sortableItem';
+export { SortableList } from './sortableList';
+export { DragLayer } from './dragLayer';

package/dist/components/sortable/sortableItem/index.d.ts

@@ -0,0 +1 @@
+export { SortableItem } from './sortableItem';

package/dist/components/sortable/sortableItem/sortableItem.d.ts

@@ -0,0 +1,3 @@
+import { SortableItemProps } from '../../../common/types';
+
+export declare const SortableItem: ({ id, index, type, isDisabled, className, draggingClassName, dropTargetClassName, onDrop, hideDefaultPreview, children, }: SortableItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/sortable/sortableList/index.d.ts

@@ -0,0 +1 @@
+export { SortableList } from './sortableList';

package/dist/components/sortable/sortableList/sortableList.d.ts

@@ -0,0 +1,5 @@
+import { SortableListProps } from '../../../common/types';
+
+export declare const SortableList: <T extends {
+    id: string | number;
+}>({ items, type, isDisabled, className, itemClassName, onReorder, renderItem, keyExtractor, }: SortableListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/{datePicker-926c9cae.js → datePicker-341db7a5.js}

@@ -3,7 +3,7 @@ import B from "react-datepicker/dist/es/index.js";
 import { c as R } from "./bind-06a7ff84.js";
 import { useMemo as P, useRef as D } from "react";
 import { F as I } from "./fieldText-1749da7a.js";
-import { D as E } from "./dropdown-360803d5.js";
+import { D as E } from "./dropdown-0a043606.js";
 import { S as T } from "./calendarArrow-44c7e60e.js";
 import { registerLocale as j } from "react-datepicker";
 const ie = (n, s) => {

package/dist/datePicker.js

@@ -1,5 +1,5 @@
-import { D as t } from "./datePicker-926c9cae.js";
-import { r as z } from "./datePicker-926c9cae.js";
+import { D as t } from "./datePicker-341db7a5.js";
+import { r as E } from "./datePicker-341db7a5.js";
 import "react/jsx-runtime";
 import "react-datepicker/dist/es/index.js";
 import "./bind-06a7ff84.js";
@@ -11,7 +11,7 @@ import "./baseIconButton-251479f7.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./fieldLabel.js";
-import "./dropdown-360803d5.js";
+import "./dropdown-0a043606.js";
 import "react-dom";
 import "@floating-ui/react-dom";
 import "downshift";
@@ -21,11 +21,15 @@ import "./dropdown-0260bb66.js";
 import "./tooltip.js";
 import "@floating-ui/react";
 import "./floatingUi-41f8c7b5.js";
+import "./adaptiveTagList.js";
+import "./button-97d9e587.js";
+import "./close-4d480ef7.js";
+import "./isEmpty-ccacb5ff.js";
 import "./checkbox-ed6cc375.js";
 import "./calendarArrow-44c7e60e.js";
 import "react-datepicker";
 export {
   t as DatePicker,
   t as default,
-  z as registerDatePickerLocale
+  E as registerDatePickerLocale
 };