@gravity-ui/querieskit 1.3.2 → 1.5.0

package/build/esm/components/LazyList/LazyList.css

@@ -3,6 +3,10 @@
 }
 .qp-lazy-list__sentinel {
   height: 1px;
+  width: 100%;
+}
+.qp-lazy-list__sentinel_loading {
+  height: 40px;
 }
 .qp-lazy-list__spinner {
   height: 100%;

package/build/esm/components/LazyList/LazyList.css.map

@@ -1 +1 @@
-{"version":3,"sources":["LazyList.scss"],"names":[],"mappings":"AACE;EACE,qDAAA;AAAJ;AAGE;EACE,WAAA;AADJ;AAIE;EACE,YAAA;AAFJ","file":"LazyList.css","sourcesContent":[".qp-lazy-list {\n  .g-list__item_selected:hover {\n    background-color: var(--g-color-base-selection-hover);\n  }\n\n  &__sentinel {\n    height: 1px;\n  }\n\n  &__spinner {\n    height: 100%;\n  }\n}\n"],"sourceRoot":""}
+{"version":3,"sources":["LazyList.scss"],"names":[],"mappings":"AACE;EACE,qDAAA;AAAJ;AAGE;EACE,WAAA;EACA,WAAA;AADJ;AAGI;EACE,YAAA;AADN;AAKE;EACE,YAAA;AAHJ","file":"LazyList.css","sourcesContent":[".qp-lazy-list {\n  .g-list__item_selected:hover {\n    background-color: var(--g-color-base-selection-hover);\n  }\n\n  &__sentinel {\n    height: 1px;\n    width: 100%;\n\n    &_loading {\n      height: 40px;\n    }\n  }\n\n  &__spinner {\n    height: 100%;\n  }\n}\n"],"sourceRoot":""}

package/build/esm/components/LazyList/LazyList.js

@@ -5,8 +5,8 @@ import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.iterator.constructor.js";
 import "core-js/modules/es.iterator.reduce.js";
 import "core-js/modules/es.object.to-string.js";
-import React, { useMemo } from 'react';
-import { List } from '@gravity-ui/uikit';
+import React, { useLayoutEffect, useMemo, useRef } from 'react';
+import { Flex, List, Loader } from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 import { useLoadMoreSentinel } from "../../helpers/useLoadMoreSentinel";
 import { ListSpinner } from "../ListSpinner";
@@ -14,6 +14,7 @@ import "./LazyList.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 var block = cn('qp-lazy-list');
 var SENTINEL_ROW_HEIGHT = 1;
+var LOADING_ROW_HEIGHT = 40;
 var isSentinelRow = function isSentinelRow(row) {
   return Boolean(row) && _typeof(row) === 'object' && '__sentinel' in row;
 };
@@ -32,15 +33,37 @@ export var LazyList = function LazyList(_ref) {
     emptyContent = _ref.emptyContent,
     isEmpty = _ref.isEmpty,
     className = _ref.className;
-  var sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore);
+  var listRef = useRef(null);
+  var previousListStateRef = useRef({
+    itemsLength: items.length,
+    loading: loading,
+    hasMore: hasMore
+  });
+  var sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore, loading, items.length);
   var rows = useMemo(function () {
-    return hasMore ? [].concat(_toConsumableArray(items), [{
+    return hasMore || loading ? [].concat(_toConsumableArray(items), [{
       __sentinel: true
     }]) : items;
-  }, [items, hasMore]);
+  }, [items, hasMore, loading]);
   var getRowHeight = function getRowHeight(row) {
-    return isSentinelRow(row) ? SENTINEL_ROW_HEIGHT : itemHeight(row);
+    if (isSentinelRow(row)) {
+      return loading ? LOADING_ROW_HEIGHT : SENTINEL_ROW_HEIGHT;
+    }
+    return itemHeight(row);
   };
+  useLayoutEffect(function () {
+    var previousListState = previousListStateRef.current;
+    var listStateChanged = previousListState.itemsLength !== items.length || previousListState.loading !== loading || previousListState.hasMore !== hasMore;
+    if (listStateChanged) {
+      var _listRef$current;
+      (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current = _listRef$current.refContainer.current) === null || _listRef$current === void 0 || _listRef$current.resetAfterIndex(Math.min(previousListState.itemsLength, items.length), true);
+      previousListStateRef.current = {
+        itemsLength: items.length,
+        loading: loading,
+        hasMore: hasMore
+      };
+    }
+  }, [hasMore, items.length, loading]);
   if (error) {
     return /*#__PURE__*/_jsx(React.Fragment, {
       children: error
@@ -58,6 +81,7 @@ export var LazyList = function LazyList(_ref) {
     });
   }
   return /*#__PURE__*/_jsx(List, {
+    ref: listRef,
     className: block(null, className),
     filterable: filterable,
     items: rows,
@@ -70,7 +94,16 @@ export var LazyList = function LazyList(_ref) {
     renderItem: function renderItem(row, isActive, index) {
       return isSentinelRow(row) ? /*#__PURE__*/_jsx("div", {
         ref: sentinelRef,
-        className: block('sentinel')
+        className: block('sentinel', {
+          loading: Boolean(loading)
+        }),
+        children: loading && /*#__PURE__*/_jsx(Flex, {
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+          children: /*#__PURE__*/_jsx(Loader, {})
+        })
       }) : _renderItem(row, isActive, index);
     },
     selectedItemIndex: selectedItemIndex,

package/build/esm/components/LazyList/LazyList.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","List","cn","useLoadMoreSentinel","ListSpinner","jsx","_jsx","block","SENTINEL_ROW_HEIGHT","isSentinelRow","row","Boolean","_typeof","LazyList","_ref","items","itemHeight","renderItem","hasMore","onLoadMore","onItemClick","selectedItemIndex","_ref$filterable","filterable","loading","error","emptyContent","isEmpty","className","sentinelRef","rows","concat","_toConsumableArray","__sentinel","getRowHeight","Fragment","children","empty","length","itemsHeight","listRows","reduce","total","isActive","index","ref"],"sources":["LazyList.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport {List} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {useLoadMoreSentinel} from '../../helpers/useLoadMoreSentinel';\nimport {ListSpinner} from '../ListSpinner';\nimport './LazyList.scss';\n\nconst block = cn('qp-lazy-list');\n\nconst SENTINEL_ROW_HEIGHT = 1;\n\ntype SentinelRow = {__sentinel: true};\ntype LazyListRow<T> = T | SentinelRow;\n\nconst isSentinelRow = <T,>(row: LazyListRow<T>): row is SentinelRow =>\n    Boolean(row) && typeof row === 'object' && '__sentinel' in (row as object);\n\nexport type LazyListProps<T extends object> = {\n    items: T[];\n    itemHeight: (item: T) => number;\n    renderItem: (item: T, isActive: boolean, index: number) => React.ReactNode;\n    hasMore?: boolean;\n    onLoadMore?: () => void;\n    onItemClick?: (item: T, index: number) => void;\n    selectedItemIndex?: T[keyof T] | number;\n    filterable?: boolean;\n    loading?: boolean;\n    error?: React.ReactNode;\n    emptyContent?: React.ReactNode;\n    isEmpty?: boolean;\n    className?: string;\n};\n\nexport const LazyList = <T extends object>({\n    items,\n    itemHeight,\n    renderItem,\n    hasMore,\n    onLoadMore,\n    onItemClick,\n    selectedItemIndex,\n    filterable = false,\n    loading,\n    error,\n    emptyContent,\n    isEmpty,\n    className,\n}: LazyListProps<T>) => {\n    const sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore);\n\n    const rows: LazyListRow<T>[] = useMemo(\n        () => (hasMore ? [...items, {__sentinel: true}] : items),\n        [items, hasMore],\n    );\n\n    const getRowHeight = (row: LazyListRow<T>) =>\n        isSentinelRow(row) ? SENTINEL_ROW_HEIGHT : itemHeight(row);\n\n    if (error) {\n        return <React.Fragment>{error}</React.Fragment>;\n    }\n\n    const empty = isEmpty ?? !items.length;\n\n    if (loading && empty) {\n        return <ListSpinner className={block('spinner', className)} />;\n    }\n\n    if (empty) {\n        return <React.Fragment>{emptyContent}</React.Fragment>;\n    }\n\n    return (\n        <List<LazyListRow<T>>\n            className={block(null, className)}\n            filterable={filterable}\n            items={rows}\n            itemHeight={getRowHeight}\n            itemsHeight={(listRows) =>\n                listRows.reduce((total, row) => total + getRowHeight(row), 0)\n            }\n            renderItem={(row, isActive, index) =>\n                isSentinelRow(row) ? (\n                    <div ref={sentinelRef} className={block('sentinel')} />\n                ) : (\n                    renderItem(row, isActive, index)\n                )\n            }\n            selectedItemIndex={selectedItemIndex as never}\n            onItemClick={(row, index) => {\n                if (!isSentinelRow(row)) {\n                    onItemClick?.(row, index);\n                }\n            }}\n        />\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useLayoutEffect","useMemo","useRef","Flex","List","Loader","cn","useLoadMoreSentinel","ListSpinner","jsx","_jsx","block","SENTINEL_ROW_HEIGHT","LOADING_ROW_HEIGHT","isSentinelRow","row","Boolean","_typeof","LazyList","_ref","items","itemHeight","renderItem","hasMore","onLoadMore","onItemClick","selectedItemIndex","_ref$filterable","filterable","loading","error","emptyContent","isEmpty","className","listRef","previousListStateRef","itemsLength","length","sentinelRef","rows","concat","_toConsumableArray","__sentinel","getRowHeight","previousListState","current","listStateChanged","_listRef$current","refContainer","resetAfterIndex","Math","min","Fragment","children","empty","ref","itemsHeight","listRows","reduce","total","isActive","index","alignItems","justifyContent","width","height"],"sources":["LazyList.tsx"],"sourcesContent":["import React, {useLayoutEffect, useMemo, useRef} from 'react';\nimport {Flex, List, Loader} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {useLoadMoreSentinel} from '../../helpers/useLoadMoreSentinel';\nimport {ListSpinner} from '../ListSpinner';\nimport './LazyList.scss';\n\nconst block = cn('qp-lazy-list');\n\nconst SENTINEL_ROW_HEIGHT = 1;\nconst LOADING_ROW_HEIGHT = 40;\n\ntype SentinelRow = {__sentinel: true};\ntype LazyListRow<T> = T | SentinelRow;\n\nconst isSentinelRow = <T,>(row: LazyListRow<T>): row is SentinelRow =>\n    Boolean(row) && typeof row === 'object' && '__sentinel' in (row as object);\n\nexport type LazyListProps<T extends object> = {\n    items: T[];\n    itemHeight: (item: T) => number;\n    renderItem: (item: T, isActive: boolean, index: number) => React.ReactNode;\n    hasMore?: boolean;\n    onLoadMore?: () => void;\n    onItemClick?: (item: T, index: number) => void;\n    selectedItemIndex?: T[keyof T] | number;\n    filterable?: boolean;\n    loading?: boolean;\n    error?: React.ReactNode;\n    emptyContent?: React.ReactNode;\n    isEmpty?: boolean;\n    className?: string;\n};\n\nexport const LazyList = <T extends object>({\n    items,\n    itemHeight,\n    renderItem,\n    hasMore,\n    onLoadMore,\n    onItemClick,\n    selectedItemIndex,\n    filterable = false,\n    loading,\n    error,\n    emptyContent,\n    isEmpty,\n    className,\n}: LazyListProps<T>) => {\n    const listRef = useRef<List<LazyListRow<T>>>(null);\n    const previousListStateRef = useRef({itemsLength: items.length, loading, hasMore});\n    const sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore, loading, items.length);\n\n    const rows: LazyListRow<T>[] = useMemo(\n        () => (hasMore || loading ? [...items, {__sentinel: true}] : items),\n        [items, hasMore, loading],\n    );\n\n    const getRowHeight = (row: LazyListRow<T>) => {\n        if (isSentinelRow(row)) {\n            return loading ? LOADING_ROW_HEIGHT : SENTINEL_ROW_HEIGHT;\n        }\n\n        return itemHeight(row);\n    };\n\n    useLayoutEffect(() => {\n        const previousListState = previousListStateRef.current;\n        const listStateChanged =\n            previousListState.itemsLength !== items.length ||\n            previousListState.loading !== loading ||\n            previousListState.hasMore !== hasMore;\n\n        if (listStateChanged) {\n            listRef.current?.refContainer.current?.resetAfterIndex(\n                Math.min(previousListState.itemsLength, items.length),\n                true,\n            );\n            previousListStateRef.current = {itemsLength: items.length, loading, hasMore};\n        }\n    }, [hasMore, items.length, loading]);\n\n    if (error) {\n        return <React.Fragment>{error}</React.Fragment>;\n    }\n\n    const empty = isEmpty ?? !items.length;\n\n    if (loading && empty) {\n        return <ListSpinner className={block('spinner', className)} />;\n    }\n\n    if (empty) {\n        return <React.Fragment>{emptyContent}</React.Fragment>;\n    }\n\n    return (\n        <List<LazyListRow<T>>\n            ref={listRef}\n            className={block(null, className)}\n            filterable={filterable}\n            items={rows}\n            itemHeight={getRowHeight}\n            itemsHeight={(listRows) =>\n                listRows.reduce((total, row) => total + getRowHeight(row), 0)\n            }\n            renderItem={(row, isActive, index) =>\n                isSentinelRow(row) ? (\n                    <div\n                        ref={sentinelRef}\n                        className={block('sentinel', {loading: Boolean(loading)})}\n                    >\n                        {loading && (\n                            <Flex\n                                alignItems=\"center\"\n                                justifyContent=\"center\"\n                                width=\"100%\"\n                                height=\"100%\"\n                            >\n                                <Loader />\n                            </Flex>\n                        )}\n                    </div>\n                ) : (\n                    renderItem(row, isActive, index)\n                )\n            }\n            selectedItemIndex={selectedItemIndex as never}\n            onItemClick={(row, index) => {\n                if (!isSentinelRow(row)) {\n                    onItemClick?.(row, index);\n                }\n            }}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,IAAGC,eAAe,EAAEC,OAAO,EAAEC,MAAM,QAAO,OAAO;AAC7D,SAAQC,IAAI,EAAEC,IAAI,EAAEC,MAAM,QAAO,mBAAmB;AACpD,OAAOC,EAAE,MAAM,aAAa;AAC5B,SAAQC,mBAAmB;AAC3B,SAAQC,WAAW;AACnB;AAAyB,SAAAC,GAAA,IAAAC,IAAA;AAEzB,IAAMC,KAAK,GAAGL,EAAE,CAAC,cAAc,CAAC;AAEhC,IAAMM,mBAAmB,GAAG,CAAC;AAC7B,IAAMC,kBAAkB,GAAG,EAAE;AAK7B,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAQC,GAAmB;EAAA,OAC1CC,OAAO,CAACD,GAAG,CAAC,IAAIE,OAAA,CAAOF,GAAG,MAAK,QAAQ,IAAI,YAAY,IAAKA,GAAc;AAAA;AAkB9E,OAAO,IAAMG,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAcG;EAAA,IAbpBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IACVC,WAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,UAAU,GAAAL,IAAA,CAAVK,UAAU;IACVC,YAAW,GAAAN,IAAA,CAAXM,WAAW;IACXC,iBAAiB,GAAAP,IAAA,CAAjBO,iBAAiB;IAAAC,eAAA,GAAAR,IAAA,CACjBS,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;IAClBE,OAAO,GAAAV,IAAA,CAAPU,OAAO;IACPC,KAAK,GAAAX,IAAA,CAALW,KAAK;IACLC,YAAY,GAAAZ,IAAA,CAAZY,YAAY;IACZC,OAAO,GAAAb,IAAA,CAAPa,OAAO;IACPC,SAAS,GAAAd,IAAA,CAATc,SAAS;EAET,IAAMC,OAAO,GAAGhC,MAAM,CAAuB,IAAI,CAAC;EAClD,IAAMiC,oBAAoB,GAAGjC,MAAM,CAAC;IAACkC,WAAW,EAAEhB,KAAK,CAACiB,MAAM;IAAER,OAAO,EAAPA,OAAO;IAAEN,OAAO,EAAPA;EAAO,CAAC,CAAC;EAClF,IAAMe,WAAW,GAAG/B,mBAAmB,CAACgB,OAAO,EAAEC,UAAU,EAAEK,OAAO,EAAET,KAAK,CAACiB,MAAM,CAAC;EAEnF,IAAME,IAAsB,GAAGtC,OAAO,CAClC;IAAA,OAAOsB,OAAO,IAAIM,OAAO,MAAAW,MAAA,CAAAC,kBAAA,CAAOrB,KAAK,IAAE;MAACsB,UAAU,EAAE;IAAI,CAAC,KAAItB,KAAK;EAAA,CAAC,EACnE,CAACA,KAAK,EAAEG,OAAO,EAAEM,OAAO,CAC5B,CAAC;EAED,IAAMc,YAAY,GAAG,SAAfA,YAAYA,CAAI5B,GAAmB,EAAK;IAC1C,IAAID,aAAa,CAACC,GAAG,CAAC,EAAE;MACpB,OAAOc,OAAO,GAAGhB,kBAAkB,GAAGD,mBAAmB;IAC7D;IAEA,OAAOS,UAAU,CAACN,GAAG,CAAC;EAC1B,CAAC;EAEDf,eAAe,CAAC,YAAM;IAClB,IAAM4C,iBAAiB,GAAGT,oBAAoB,CAACU,OAAO;IACtD,IAAMC,gBAAgB,GAClBF,iBAAiB,CAACR,WAAW,KAAKhB,KAAK,CAACiB,MAAM,IAC9CO,iBAAiB,CAACf,OAAO,KAAKA,OAAO,IACrCe,iBAAiB,CAACrB,OAAO,KAAKA,OAAO;IAEzC,IAAIuB,gBAAgB,EAAE;MAAA,IAAAC,gBAAA;MAClB,CAAAA,gBAAA,GAAAb,OAAO,CAACW,OAAO,cAAAE,gBAAA,gBAAAA,gBAAA,GAAfA,gBAAA,CAAiBC,YAAY,CAACH,OAAO,cAAAE,gBAAA,eAArCA,gBAAA,CAAuCE,eAAe,CAClDC,IAAI,CAACC,GAAG,CAACP,iBAAiB,CAACR,WAAW,EAAEhB,KAAK,CAACiB,MAAM,CAAC,EACrD,IACJ,CAAC;MACDF,oBAAoB,CAACU,OAAO,GAAG;QAACT,WAAW,EAAEhB,KAAK,CAACiB,MAAM;QAAER,OAAO,EAAPA,OAAO;QAAEN,OAAO,EAAPA;MAAO,CAAC;IAChF;EACJ,CAAC,EAAE,CAACA,OAAO,EAAEH,KAAK,CAACiB,MAAM,EAAER,OAAO,CAAC,CAAC;EAEpC,IAAIC,KAAK,EAAE;IACP,oBAAOpB,IAAA,CAACX,KAAK,CAACqD,QAAQ;MAAAC,QAAA,EAAEvB;IAAK,CAAiB,CAAC;EACnD;EAEA,IAAMwB,KAAK,GAAGtB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,CAACZ,KAAK,CAACiB,MAAM;EAEtC,IAAIR,OAAO,IAAIyB,KAAK,EAAE;IAClB,oBAAO5C,IAAA,CAACF,WAAW;MAACyB,SAAS,EAAEtB,KAAK,CAAC,SAAS,EAAEsB,SAAS;IAAE,CAAE,CAAC;EAClE;EAEA,IAAIqB,KAAK,EAAE;IACP,oBAAO5C,IAAA,CAACX,KAAK,CAACqD,QAAQ;MAAAC,QAAA,EAAEtB;IAAY,CAAiB,CAAC;EAC1D;EAEA,oBACIrB,IAAA,CAACN,IAAI;IACDmD,GAAG,EAAErB,OAAQ;IACbD,SAAS,EAAEtB,KAAK,CAAC,IAAI,EAAEsB,SAAS,CAAE;IAClCL,UAAU,EAAEA,UAAW;IACvBR,KAAK,EAAEmB,IAAK;IACZlB,UAAU,EAAEsB,YAAa;IACzBa,WAAW,EAAE,SAAbA,WAAWA,CAAGC,QAAQ;MAAA,OAClBA,QAAQ,CAACC,MAAM,CAAC,UAACC,KAAK,EAAE5C,GAAG;QAAA,OAAK4C,KAAK,GAAGhB,YAAY,CAAC5B,GAAG,CAAC;MAAA,GAAE,CAAC,CAAC;IAAA,CAChE;IACDO,UAAU,EAAE,SAAZA,UAAUA,CAAGP,GAAG,EAAE6C,QAAQ,EAAEC,KAAK;MAAA,OAC7B/C,aAAa,CAACC,GAAG,CAAC,gBACdL,IAAA;QACI6C,GAAG,EAAEjB,WAAY;QACjBL,SAAS,EAAEtB,KAAK,CAAC,UAAU,EAAE;UAACkB,OAAO,EAAEb,OAAO,CAACa,OAAO;QAAC,CAAC,CAAE;QAAAwB,QAAA,EAEzDxB,OAAO,iBACJnB,IAAA,CAACP,IAAI;UACD2D,UAAU,EAAC,QAAQ;UACnBC,cAAc,EAAC,QAAQ;UACvBC,KAAK,EAAC,MAAM;UACZC,MAAM,EAAC,MAAM;UAAAZ,QAAA,eAEb3C,IAAA,CAACL,MAAM,IAAE;QAAC,CACR;MACT,CACA,CAAC,GAENiB,WAAU,CAACP,GAAG,EAAE6C,QAAQ,EAAEC,KAAK,CAClC;IAAA,CACJ;IACDnC,iBAAiB,EAAEA,iBAA2B;IAC9CD,WAAW,EAAE,SAAbA,WAAWA,CAAGV,GAAG,EAAE8C,KAAK,EAAK;MACzB,IAAI,CAAC/C,aAAa,CAACC,GAAG,CAAC,EAAE;QACrBU,YAAW,aAAXA,YAAW,eAAXA,YAAW,CAAGV,GAAG,EAAE8C,KAAK,CAAC;MAC7B;IACJ;EAAE,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/build/esm/components/LazyList/LazyList.scss

@@ -5,6 +5,11 @@
 
   &__sentinel {
     height: 1px;
+    width: 100%;
+
+    &_loading {
+      height: 40px;
+    }
   }
 
   &__spinner {

package/build/esm/components/QueryDuration/QueryDuration.stories.js

@@ -41,6 +41,13 @@ export var AllStatuses = {
         status: "aborted",
         startTime: fiveMinutesAgo,
         endTime: now
+      }), /*#__PURE__*/_jsx(QueryDuration, {
+        status: "completed",
+        startTime: now - (27 * 60 + 15) * 60 * 1000,
+        endTime: now
+      }), /*#__PURE__*/_jsx(QueryDuration, {
+        status: "completed",
+        startTime: fiveMinutesAgo
       }), /*#__PURE__*/_jsx(QueryDuration, {
         status: "running",
         startTime: fiveMinutesAgo

package/build/esm/components/QueryDuration/QueryDuration.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","QueryDuration","jsx","_jsx","jsxs","_jsxs","now","Date","fiveMinutesAgo","oneHourAgo","meta","title","component","tags","Default","args","status","startTime","AllStatuses","render","style","display","gap","flexWrap","alignItems","children","endTime"],"sources":["QueryDuration.stories.tsx"],"sourcesContent":["import React from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {QueryDuration} from './QueryDuration';\n\nconst now = Date.now();\nconst fiveMinutesAgo = now - 5 * 60 * 1000;\nconst oneHourAgo = now - 60 * 60 * 1000;\n\nconst meta: Meta<typeof QueryDuration> = {\n    title: 'Components/QueryDuration',\n    component: QueryDuration,\n    tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof QueryDuration>;\n\n/** Live timer: endTime not provided — counter ticks every second */\nexport const Default: Story = {\n    args: {\n        status: 'running',\n        startTime: fiveMinutesAgo,\n    },\n};\n\n/** All variants side by side: Running updates in real time, Draft is static */\nexport const AllStatuses: Story = {\n    render: () => (\n        <div style={{display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center'}}>\n            {/* Static */}\n            <QueryDuration status=\"completed\" startTime={fiveMinutesAgo} endTime={now} />\n            <QueryDuration status=\"failed\" startTime={oneHourAgo} endTime={now} />\n            <QueryDuration status=\"aborted\" startTime={fiveMinutesAgo} endTime={now} />\n            {/* Live timer */}\n            <QueryDuration status=\"running\" startTime={fiveMinutesAgo} />\n            {/* Always --:-- */}\n            <QueryDuration status=\"draft\" startTime={now} />\n        </div>\n    ),\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,aAAa;AAAyB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9C,IAAMC,GAAG,GAAGC,IAAI,CAACD,GAAG,CAAC,CAAC;AACtB,IAAME,cAAc,GAAGF,GAAG,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI;AAC1C,IAAMG,UAAU,GAAGH,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;AAEvC,IAAMI,IAAgC,GAAG;EACrCC,KAAK,EAAE,0BAA0B;EACjCC,SAAS,EAAEX,aAAa;EACxBY,IAAI,EAAE,CAAC,UAAU;AACrB,CAAC;AAED,eAAeH,IAAI;AAGnB;AACA,OAAO,IAAMI,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,MAAM,EAAE,SAAS;IACjBC,SAAS,EAAET;EACf;AACJ,CAAC;;AAED;AACA,OAAO,IAAMU,WAAkB,GAAG;EAC9BC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACFd,KAAA;MAAKe,KAAK,EAAE;QAACC,OAAO,EAAE,MAAM;QAAEC,GAAG,EAAE,CAAC;QAAEC,QAAQ,EAAE,MAAM;QAAEC,UAAU,EAAE;MAAQ,CAAE;MAAAC,QAAA,gBAE1EtB,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,WAAW;QAACC,SAAS,EAAET,cAAe;QAACkB,OAAO,EAAEpB;MAAI,CAAE,CAAC,eAC7EH,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,QAAQ;QAACC,SAAS,EAAER,UAAW;QAACiB,OAAO,EAAEpB;MAAI,CAAE,CAAC,eACtEH,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,SAAS;QAACC,SAAS,EAAET,cAAe;QAACkB,OAAO,EAAEpB;MAAI,CAAE,CAAC,eAE3EH,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,SAAS;QAACC,SAAS,EAAET;MAAe,CAAE,CAAC,eAE7DL,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,OAAO;QAACC,SAAS,EAAEX;MAAI,CAAE,CAAC;IAAA,CAC/C,CAAC;EAAA;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","QueryDuration","jsx","_jsx","jsxs","_jsxs","now","Date","fiveMinutesAgo","oneHourAgo","meta","title","component","tags","Default","args","status","startTime","AllStatuses","render","style","display","gap","flexWrap","alignItems","children","endTime"],"sources":["QueryDuration.stories.tsx"],"sourcesContent":["import React from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {QueryDuration} from './QueryDuration';\n\nconst now = Date.now();\nconst fiveMinutesAgo = now - 5 * 60 * 1000;\nconst oneHourAgo = now - 60 * 60 * 1000;\n\nconst meta: Meta<typeof QueryDuration> = {\n    title: 'Components/QueryDuration',\n    component: QueryDuration,\n    tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof QueryDuration>;\n\n/** Live timer: endTime not provided — counter ticks every second */\nexport const Default: Story = {\n    args: {\n        status: 'running',\n        startTime: fiveMinutesAgo,\n    },\n};\n\n/** All variants side by side: Running updates in real time, Draft is static */\nexport const AllStatuses: Story = {\n    render: () => (\n        <div style={{display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center'}}>\n            {/* Static */}\n            <QueryDuration status=\"completed\" startTime={fiveMinutesAgo} endTime={now} />\n            <QueryDuration status=\"failed\" startTime={oneHourAgo} endTime={now} />\n            <QueryDuration status=\"aborted\" startTime={fiveMinutesAgo} endTime={now} />\n            <QueryDuration\n                status=\"completed\"\n                startTime={now - (27 * 60 + 15) * 60 * 1000}\n                endTime={now}\n            />\n            <QueryDuration status=\"completed\" startTime={fiveMinutesAgo} />\n            {/* Live timer */}\n            <QueryDuration status=\"running\" startTime={fiveMinutesAgo} />\n            {/* Always --:-- */}\n            <QueryDuration status=\"draft\" startTime={now} />\n        </div>\n    ),\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,aAAa;AAAyB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9C,IAAMC,GAAG,GAAGC,IAAI,CAACD,GAAG,CAAC,CAAC;AACtB,IAAME,cAAc,GAAGF,GAAG,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI;AAC1C,IAAMG,UAAU,GAAGH,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;AAEvC,IAAMI,IAAgC,GAAG;EACrCC,KAAK,EAAE,0BAA0B;EACjCC,SAAS,EAAEX,aAAa;EACxBY,IAAI,EAAE,CAAC,UAAU;AACrB,CAAC;AAED,eAAeH,IAAI;AAGnB;AACA,OAAO,IAAMI,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,MAAM,EAAE,SAAS;IACjBC,SAAS,EAAET;EACf;AACJ,CAAC;;AAED;AACA,OAAO,IAAMU,WAAkB,GAAG;EAC9BC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACFd,KAAA;MAAKe,KAAK,EAAE;QAACC,OAAO,EAAE,MAAM;QAAEC,GAAG,EAAE,CAAC;QAAEC,QAAQ,EAAE,MAAM;QAAEC,UAAU,EAAE;MAAQ,CAAE;MAAAC,QAAA,gBAE1EtB,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,WAAW;QAACC,SAAS,EAAET,cAAe;QAACkB,OAAO,EAAEpB;MAAI,CAAE,CAAC,eAC7EH,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,QAAQ;QAACC,SAAS,EAAER,UAAW;QAACiB,OAAO,EAAEpB;MAAI,CAAE,CAAC,eACtEH,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,SAAS;QAACC,SAAS,EAAET,cAAe;QAACkB,OAAO,EAAEpB;MAAI,CAAE,CAAC,eAC3EH,IAAA,CAACF,aAAa;QACVe,MAAM,EAAC,WAAW;QAClBC,SAAS,EAAEX,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAK;QAC5CoB,OAAO,EAAEpB;MAAI,CAChB,CAAC,eACFH,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,WAAW;QAACC,SAAS,EAAET;MAAe,CAAE,CAAC,eAE/DL,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,SAAS;QAACC,SAAS,EAAET;MAAe,CAAE,CAAC,eAE7DL,IAAA,CAACF,aAAa;QAACe,MAAM,EAAC,OAAO;QAACC,SAAS,EAAEX;MAAI,CAAE,CAAC;IAAA,CAC/C,CAAC;EAAA;AAEd,CAAC","ignoreList":[]}

package/build/esm/components/QueryDuration/useQueryDuration.d.ts

@@ -1,2 +1,2 @@
 import { QueryStatus } from '../../types/history';
-export declare const useQueryDuration: (state: QueryStatus, startTime?: string | number, endTime?: string | number) => string | undefined;
+export declare const useQueryDuration: (state: QueryStatus, startTime?: string | number, endTime?: string | number) => string;

package/build/esm/components/QueryDuration/useQueryDuration.js

@@ -1,33 +1,39 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.date.now.js";
 import "core-js/modules/es.string.includes.js";
 import "core-js/modules/web.timers.js";
 import { useEffect, useState } from 'react';
 import { CompletedQueryStates } from "../../constants/query";
 import { durationDates } from "../../helpers/time";
+var calculateDuration = function calculateDuration(state, startTime, endTime) {
+  if (state === 'draft' || startTime === undefined) {
+    return '--:--';
+  }
+  if (CompletedQueryStates.includes(state)) {
+    return endTime === undefined ? '--:--' : durationDates(startTime, endTime);
+  }
+  return durationDates(startTime, endTime !== null && endTime !== void 0 ? endTime : Date.now());
+};
 export var useQueryDuration = function useQueryDuration(state, startTime, endTime) {
-  var _useState = useState(durationDates(startTime, endTime)),
+  var _useState = useState(function () {
+      return calculateDuration(state, startTime, endTime);
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     duration = _useState2[0],
     setDuration = _useState2[1];
   useEffect(function () {
-    if (state === 'draft' || !startTime) {
-      setDuration('--:--');
-      return;
-    }
-    if (CompletedQueryStates.includes(state)) {
-      setDuration(endTime ? durationDates(startTime, endTime) : '--:--');
-      return;
-    }
-    setDuration(durationDates(startTime, endTime));
-    if (endTime) {
-      return;
+    setDuration(calculateDuration(state, startTime, endTime));
+    var timer;
+    if (!(state === 'draft' || startTime === undefined || CompletedQueryStates.includes(state) || endTime !== undefined)) {
+      timer = setInterval(function () {
+        return setDuration(durationDates(startTime, Date.now()));
+      }, 1000);
     }
-    var timer = setInterval(function () {
-      return setDuration(durationDates(startTime, endTime));
-    }, 1000);
     return function () {
-      clearInterval(timer);
+      if (timer !== undefined) {
+        clearInterval(timer);
+      }
     };
   }, [state, startTime, endTime]);
   return duration;

package/build/esm/components/QueryDuration/useQueryDuration.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useState","CompletedQueryStates","durationDates","useQueryDuration","state","startTime","endTime","_useState","_useState2","_slicedToArray","duration","setDuration","includes","timer","setInterval","clearInterval"],"sources":["useQueryDuration.ts"],"sourcesContent":["import {useEffect, useState} from 'react';\nimport {QueryStatus} from '../../types/history';\nimport {CompletedQueryStates} from '../../constants/query';\nimport {durationDates} from '../../helpers/time';\n\nexport const useQueryDuration = (\n    state: QueryStatus,\n    startTime?: string | number,\n    endTime?: string | number,\n) => {\n    const [duration, setDuration] = useState(durationDates(startTime, endTime));\n\n    useEffect(() => {\n        if (state === 'draft' || !startTime) {\n            setDuration('--:--');\n            return;\n        }\n        if (CompletedQueryStates.includes(state)) {\n            setDuration(endTime ? durationDates(startTime, endTime) : '--:--');\n            return;\n        }\n        setDuration(durationDates(startTime, endTime));\n        if (endTime) {\n            return;\n        }\n        const timer = setInterval(() => setDuration(durationDates(startTime, endTime)), 1000);\n\n        return () => {\n            clearInterval(timer);\n        };\n    }, [state, startTime, endTime]);\n\n    return duration;\n};\n"],"mappings":";;;;AAAA,SAAQA,SAAS,EAAEC,QAAQ,QAAO,OAAO;AAEzC,SAAQC,oBAAoB;AAC5B,SAAQC,aAAa;AAErB,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CACzBC,KAAkB,EAClBC,SAA2B,EAC3BC,OAAyB,EACxB;EACD,IAAAC,SAAA,GAAgCP,QAAQ,CAACE,aAAa,CAACG,SAAS,EAAEC,OAAO,CAAC,CAAC;IAAAE,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAApEG,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAE5BT,SAAS,CAAC,YAAM;IACZ,IAAIK,KAAK,KAAK,OAAO,IAAI,CAACC,SAAS,EAAE;MACjCM,WAAW,CAAC,OAAO,CAAC;MACpB;IACJ;IACA,IAAIV,oBAAoB,CAACW,QAAQ,CAACR,KAAK,CAAC,EAAE;MACtCO,WAAW,CAACL,OAAO,GAAGJ,aAAa,CAACG,SAAS,EAAEC,OAAO,CAAC,GAAG,OAAO,CAAC;MAClE;IACJ;IACAK,WAAW,CAACT,aAAa,CAACG,SAAS,EAAEC,OAAO,CAAC,CAAC;IAC9C,IAAIA,OAAO,EAAE;MACT;IACJ;IACA,IAAMO,KAAK,GAAGC,WAAW,CAAC;MAAA,OAAMH,WAAW,CAACT,aAAa,CAACG,SAAS,EAAEC,OAAO,CAAC,CAAC;IAAA,GAAE,IAAI,CAAC;IAErF,OAAO,YAAM;MACTS,aAAa,CAACF,KAAK,CAAC;IACxB,CAAC;EACL,CAAC,EAAE,CAACT,KAAK,EAAEC,SAAS,EAAEC,OAAO,CAAC,CAAC;EAE/B,OAAOI,QAAQ;AACnB,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useState","CompletedQueryStates","durationDates","calculateDuration","state","startTime","endTime","undefined","includes","Date","now","useQueryDuration","_useState","_useState2","_slicedToArray","duration","setDuration","timer","setInterval","clearInterval"],"sources":["useQueryDuration.ts"],"sourcesContent":["import {useEffect, useState} from 'react';\nimport {QueryStatus} from '../../types/history';\nimport {CompletedQueryStates} from '../../constants/query';\nimport {durationDates} from '../../helpers/time';\n\nconst calculateDuration = (\n    state: QueryStatus,\n    startTime?: string | number,\n    endTime?: string | number,\n) => {\n    if (state === 'draft' || startTime === undefined) {\n        return '--:--';\n    }\n\n    if (CompletedQueryStates.includes(state)) {\n        return endTime === undefined ? '--:--' : durationDates(startTime, endTime);\n    }\n\n    return durationDates(startTime, endTime ?? Date.now());\n};\n\nexport const useQueryDuration = (\n    state: QueryStatus,\n    startTime?: string | number,\n    endTime?: string | number,\n) => {\n    const [duration, setDuration] = useState(() => calculateDuration(state, startTime, endTime));\n\n    useEffect(() => {\n        setDuration(calculateDuration(state, startTime, endTime));\n\n        let timer: ReturnType<typeof setInterval> | undefined;\n\n        if (!(\n            state === 'draft' ||\n            startTime === undefined ||\n            CompletedQueryStates.includes(state) ||\n            endTime !== undefined\n        )) {\n            timer = setInterval(() => setDuration(durationDates(startTime, Date.now())), 1000);\n        }\n\n        return () => {\n            if (timer !== undefined) {\n                clearInterval(timer);\n            }\n        };\n    }, [state, startTime, endTime]);\n\n    return duration;\n};\n"],"mappings":";;;;;AAAA,SAAQA,SAAS,EAAEC,QAAQ,QAAO,OAAO;AAEzC,SAAQC,oBAAoB;AAC5B,SAAQC,aAAa;AAErB,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CACnBC,KAAkB,EAClBC,SAA2B,EAC3BC,OAAyB,EACxB;EACD,IAAIF,KAAK,KAAK,OAAO,IAAIC,SAAS,KAAKE,SAAS,EAAE;IAC9C,OAAO,OAAO;EAClB;EAEA,IAAIN,oBAAoB,CAACO,QAAQ,CAACJ,KAAK,CAAC,EAAE;IACtC,OAAOE,OAAO,KAAKC,SAAS,GAAG,OAAO,GAAGL,aAAa,CAACG,SAAS,EAAEC,OAAO,CAAC;EAC9E;EAEA,OAAOJ,aAAa,CAACG,SAAS,EAAEC,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIG,IAAI,CAACC,GAAG,CAAC,CAAC,CAAC;AAC1D,CAAC;AAED,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CACzBP,KAAkB,EAClBC,SAA2B,EAC3BC,OAAyB,EACxB;EACD,IAAAM,SAAA,GAAgCZ,QAAQ,CAAC;MAAA,OAAMG,iBAAiB,CAACC,KAAK,EAAEC,SAAS,EAAEC,OAAO,CAAC;IAAA,EAAC;IAAAO,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAArFG,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAE5Bd,SAAS,CAAC,YAAM;IACZiB,WAAW,CAACb,iBAAiB,CAACC,KAAK,EAAEC,SAAS,EAAEC,OAAO,CAAC,CAAC;IAEzD,IAAIW,KAAiD;IAErD,IAAI,EACAb,KAAK,KAAK,OAAO,IACjBC,SAAS,KAAKE,SAAS,IACvBN,oBAAoB,CAACO,QAAQ,CAACJ,KAAK,CAAC,IACpCE,OAAO,KAAKC,SAAS,CACxB,EAAE;MACCU,KAAK,GAAGC,WAAW,CAAC;QAAA,OAAMF,WAAW,CAACd,aAAa,CAACG,SAAS,EAAEI,IAAI,CAACC,GAAG,CAAC,CAAC,CAAC,CAAC;MAAA,GAAE,IAAI,CAAC;IACtF;IAEA,OAAO,YAAM;MACT,IAAIO,KAAK,KAAKV,SAAS,EAAE;QACrBY,aAAa,CAACF,KAAK,CAAC;MACxB;IACJ,CAAC;EACL,CAAC,EAAE,CAACb,KAAK,EAAEC,SAAS,EAAEC,OAAO,CAAC,CAAC;EAE/B,OAAOS,QAAQ;AACnB,CAAC","ignoreList":[]}

package/build/esm/components/RowLink/RowLink.d.ts

@@ -1,9 +1,9 @@
-import { FC, ReactNode } from 'react';
+import React, { FC } from 'react';
+import { QueryListLinkRenderer } from '../../types/queryList';
 import './RowLink.scss';
-export type RowLinkProps = {
+export type RowLinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> & {
     href?: string;
     disabled?: boolean;
-    className?: string;
-    children: ReactNode;
+    renderLink?: QueryListLinkRenderer;
 };
 export declare const RowLink: FC<RowLinkProps>;

package/build/esm/components/RowLink/RowLink.js

@@ -1,3 +1,6 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "disabled", "renderLink", "className", "children"];
 import React from 'react';
 import cn from 'bem-cn-lite';
 import "./RowLink.css";
@@ -6,14 +9,22 @@ var block = cn('qp-row-link');
 export var RowLink = function RowLink(_ref) {
   var href = _ref.href,
     disabled = _ref.disabled,
+    renderLink = _ref.renderLink,
     className = _ref.className,
-    children = _ref.children;
+    children = _ref.children,
+    linkProps = _objectWithoutProperties(_ref, _excluded);
   var isLink = Boolean(href) && !disabled;
-  var Wrap = isLink ? 'a' : 'div';
-  return /*#__PURE__*/_jsx(Wrap, {
-    href: isLink ? href : undefined,
+  if (!isLink) {
+    return /*#__PURE__*/_jsx("div", {
+      className: block(null, className),
+      children: children
+    });
+  }
+  var props = _objectSpread(_objectSpread({}, linkProps), {}, {
+    href: href,
     className: block(null, className),
     children: children
   });
+  return renderLink ? renderLink(props) : /*#__PURE__*/_jsx("a", _objectSpread({}, props));
 };
 // #sourceMappingURL=RowLink.js.map

package/build/esm/components/RowLink/RowLink.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","jsx","_jsx","block","RowLink","_ref","href","disabled","className","children","isLink","Boolean","Wrap","undefined"],"sources":["RowLink.tsx"],"sourcesContent":["import React, {FC, ReactNode} from 'react';\nimport cn from 'bem-cn-lite';\nimport './RowLink.scss';\n\nconst block = cn('qp-row-link');\n\nexport type RowLinkProps = {\n    href?: string;\n    disabled?: boolean;\n    className?: string;\n    children: ReactNode;\n};\n\nexport const RowLink: FC<RowLinkProps> = ({href, disabled, className, children}) => {\n    const isLink = Boolean(href) && !disabled;\n    const Wrap = isLink ? 'a' : 'div';\n\n    return (\n        <Wrap href={isLink ? href : undefined} className={block(null, className)}>\n            {children}\n        </Wrap>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuB,OAAO;AAC1C,OAAOC,EAAE,MAAM,aAAa;AAC5B;AAAwB,SAAAC,GAAA,IAAAC,IAAA;AAExB,IAAMC,KAAK,GAAGH,EAAE,CAAC,aAAa,CAAC;AAS/B,OAAO,IAAMI,OAAyB,GAAG,SAA5BA,OAAyBA,CAAAC,IAAA,EAA8C;EAAA,IAAzCC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;EAC1E,IAAMC,MAAM,GAAGC,OAAO,CAACL,IAAI,CAAC,IAAI,CAACC,QAAQ;EACzC,IAAMK,IAAI,GAAGF,MAAM,GAAG,GAAG,GAAG,KAAK;EAEjC,oBACIR,IAAA,CAACU,IAAI;IAACN,IAAI,EAAEI,MAAM,GAAGJ,IAAI,GAAGO,SAAU;IAACL,SAAS,EAAEL,KAAK,CAAC,IAAI,EAAEK,SAAS,CAAE;IAAAC,QAAA,EACpEA;EAAQ,CACP,CAAC;AAEf,CAAC","ignoreList":[]}
+{"version":3,"names":["React","cn","jsx","_jsx","block","RowLink","_ref","href","disabled","renderLink","className","children","linkProps","_objectWithoutProperties","_excluded","isLink","Boolean","props","_objectSpread"],"sources":["RowLink.tsx"],"sourcesContent":["import React, {FC} from 'react';\nimport cn from 'bem-cn-lite';\nimport {QueryListLinkRenderer} from '../../types/queryList';\nimport './RowLink.scss';\n\nconst block = cn('qp-row-link');\n\nexport type RowLinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> & {\n    href?: string;\n    disabled?: boolean;\n    renderLink?: QueryListLinkRenderer;\n};\n\nexport const RowLink: FC<RowLinkProps> = ({\n    href,\n    disabled,\n    renderLink,\n    className,\n    children,\n    ...linkProps\n}) => {\n    const isLink = Boolean(href) && !disabled;\n\n    if (!isLink) {\n        return <div className={block(null, className)}>{children}</div>;\n    }\n\n    const props: React.ComponentPropsWithoutRef<'a'> = {\n        ...linkProps,\n        href,\n        className: block(null, className),\n        children,\n    };\n\n    return renderLink ? renderLink(props) : <a {...props} />;\n};\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAY,OAAO;AAC/B,OAAOC,EAAE,MAAM,aAAa;AAE5B;AAAwB,SAAAC,GAAA,IAAAC,IAAA;AAExB,IAAMC,KAAK,GAAGH,EAAE,CAAC,aAAa,CAAC;AAQ/B,OAAO,IAAMI,OAAyB,GAAG,SAA5BA,OAAyBA,CAAAC,IAAA,EAOhC;EAAA,IANFC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACLC,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEZ,IAAMC,MAAM,GAAGC,OAAO,CAACT,IAAI,CAAC,IAAI,CAACC,QAAQ;EAEzC,IAAI,CAACO,MAAM,EAAE;IACT,oBAAOZ,IAAA;MAAKO,SAAS,EAAEN,KAAK,CAAC,IAAI,EAAEM,SAAS,CAAE;MAAAC,QAAA,EAAEA;IAAQ,CAAM,CAAC;EACnE;EAEA,IAAMM,KAA0C,GAAAC,aAAA,CAAAA,aAAA,KACzCN,SAAS;IACZL,IAAI,EAAJA,IAAI;IACJG,SAAS,EAAEN,KAAK,CAAC,IAAI,EAAEM,SAAS,CAAC;IACjCC,QAAQ,EAARA;EAAQ,EACX;EAED,OAAOF,UAAU,GAAGA,UAAU,CAACQ,KAAK,CAAC,gBAAGd,IAAA,MAAAe,aAAA,KAAOD,KAAK,CAAG,CAAC;AAC5D,CAAC","ignoreList":[]}

package/build/esm/components/SearchRowLayout/SearchRowLayout.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { QueryListLinkRenderer } from '../../types/queryList';
 import './SearchRowLayout.scss';
 export type SearchRowLayoutProps = {
     header: ReactNode;
@@ -6,6 +7,7 @@ export type SearchRowLayoutProps = {
     language: string;
     href?: string;
     disabled?: boolean;
+    renderLink?: QueryListLinkRenderer;
     className?: string;
 };
 export declare const SearchRowLayout: FC<SearchRowLayoutProps>;

package/build/esm/components/SearchRowLayout/SearchRowLayout.js

@@ -14,10 +14,12 @@ export var SearchRowLayout = function SearchRowLayout(_ref) {
     language = _ref.language,
     href = _ref.href,
     disabled = _ref.disabled,
+    renderLink = _ref.renderLink,
     className = _ref.className;
   return /*#__PURE__*/_jsx(RowLink, {
     href: href,
     disabled: disabled,
+    renderLink: renderLink,
     className: block(null, className),
     children: /*#__PURE__*/_jsxs(Flex, {
       direction: "column",

package/build/esm/components/SearchRowLayout/SearchRowLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Flex","cn","MonacoEditor","RowLink","fitQueryToVisibleLines","MONACO_CONFIG","jsx","_jsx","jsxs","_jsxs","block","SearchRowLayout","_ref","header","query","language","href","disabled","className","children","direction","gap","alignItems","value","readOnly","monacoConfig"],"sources":["SearchRowLayout.tsx"],"sourcesContent":["import React, {FC, ReactNode} from 'react';\nimport {Flex} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {MonacoEditor} from '../MonacoEditor';\nimport {RowLink} from '../RowLink';\nimport {fitQueryToVisibleLines} from './helpers/fitQueryToVisibleLines';\nimport {MONACO_CONFIG} from './helpers/monacoConfig';\nimport './SearchRowLayout.scss';\n\nconst block = cn('qp-search-row-layout');\n\nexport type SearchRowLayoutProps = {\n    header: ReactNode;\n    query?: string;\n    language: string;\n    href?: string;\n    disabled?: boolean;\n    className?: string;\n};\n\nexport const SearchRowLayout: FC<SearchRowLayoutProps> = ({\n    header,\n    query,\n    language,\n    href,\n    disabled,\n    className,\n}) => {\n    return (\n        <RowLink href={href} disabled={disabled} className={block(null, className)}>\n            <Flex direction=\"column\" gap={2} className={block('content')}>\n                <Flex gap={2} alignItems=\"center\">\n                    {header}\n                </Flex>\n                <MonacoEditor\n                    value={fitQueryToVisibleLines(query)}\n                    language={language}\n                    readOnly\n                    monacoConfig={MONACO_CONFIG}\n                    className={block('monaco')}\n                />\n            </Flex>\n        </RowLink>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuB,OAAO;AAC1C,SAAQC,IAAI,QAAO,mBAAmB;AACtC,OAAOC,EAAE,MAAM,aAAa;AAC5B,SAAQC,YAAY;AACpB,SAAQC,OAAO;AACf,SAAQC,sBAAsB;AAC9B,SAAQC,aAAa;AACrB;AAAgC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhC,IAAMC,KAAK,GAAGT,EAAE,CAAC,sBAAsB,CAAC;AAWxC,OAAO,IAAMU,eAAyC,GAAG,SAA5CA,eAAyCA,CAAAC,IAAA,EAOhD;EAAA,IANFC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,SAAS,GAAAN,IAAA,CAATM,SAAS;EAET,oBACIX,IAAA,CAACJ,OAAO;IAACa,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACC,SAAS,EAAER,KAAK,CAAC,IAAI,EAAEQ,SAAS,CAAE;IAAAC,QAAA,eACvEV,KAAA,CAACT,IAAI;MAACoB,SAAS,EAAC,QAAQ;MAACC,GAAG,EAAE,CAAE;MAACH,SAAS,EAAER,KAAK,CAAC,SAAS,CAAE;MAAAS,QAAA,gBACzDZ,IAAA,CAACP,IAAI;QAACqB,GAAG,EAAE,CAAE;QAACC,UAAU,EAAC,QAAQ;QAAAH,QAAA,EAC5BN;MAAM,CACL,CAAC,eACPN,IAAA,CAACL,YAAY;QACTqB,KAAK,EAAEnB,sBAAsB,CAACU,KAAK,CAAE;QACrCC,QAAQ,EAAEA,QAAS;QACnBS,QAAQ;QACRC,YAAY,EAAEpB,aAAc;QAC5Ba,SAAS,EAAER,KAAK,CAAC,QAAQ;MAAE,CAC9B,CAAC;IAAA,CACA;EAAC,CACF,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Flex","cn","MonacoEditor","RowLink","fitQueryToVisibleLines","MONACO_CONFIG","jsx","_jsx","jsxs","_jsxs","block","SearchRowLayout","_ref","header","query","language","href","disabled","renderLink","className","children","direction","gap","alignItems","value","readOnly","monacoConfig"],"sources":["SearchRowLayout.tsx"],"sourcesContent":["import React, {FC, ReactNode} from 'react';\nimport {Flex} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {MonacoEditor} from '../MonacoEditor';\nimport {RowLink} from '../RowLink';\nimport {QueryListLinkRenderer} from '../../types/queryList';\nimport {fitQueryToVisibleLines} from './helpers/fitQueryToVisibleLines';\nimport {MONACO_CONFIG} from './helpers/monacoConfig';\nimport './SearchRowLayout.scss';\n\nconst block = cn('qp-search-row-layout');\n\nexport type SearchRowLayoutProps = {\n    header: ReactNode;\n    query?: string;\n    language: string;\n    href?: string;\n    disabled?: boolean;\n    renderLink?: QueryListLinkRenderer;\n    className?: string;\n};\n\nexport const SearchRowLayout: FC<SearchRowLayoutProps> = ({\n    header,\n    query,\n    language,\n    href,\n    disabled,\n    renderLink,\n    className,\n}) => {\n    return (\n        <RowLink\n            href={href}\n            disabled={disabled}\n            renderLink={renderLink}\n            className={block(null, className)}\n        >\n            <Flex direction=\"column\" gap={2} className={block('content')}>\n                <Flex gap={2} alignItems=\"center\">\n                    {header}\n                </Flex>\n                <MonacoEditor\n                    value={fitQueryToVisibleLines(query)}\n                    language={language}\n                    readOnly\n                    monacoConfig={MONACO_CONFIG}\n                    className={block('monaco')}\n                />\n            </Flex>\n        </RowLink>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuB,OAAO;AAC1C,SAAQC,IAAI,QAAO,mBAAmB;AACtC,OAAOC,EAAE,MAAM,aAAa;AAC5B,SAAQC,YAAY;AACpB,SAAQC,OAAO;AAEf,SAAQC,sBAAsB;AAC9B,SAAQC,aAAa;AACrB;AAAgC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhC,IAAMC,KAAK,GAAGT,EAAE,CAAC,sBAAsB,CAAC;AAYxC,OAAO,IAAMU,eAAyC,GAAG,SAA5CA,eAAyCA,CAAAC,IAAA,EAQhD;EAAA,IAPFC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,SAAS,GAAAP,IAAA,CAATO,SAAS;EAET,oBACIZ,IAAA,CAACJ,OAAO;IACJa,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAET,KAAK,CAAC,IAAI,EAAES,SAAS,CAAE;IAAAC,QAAA,eAElCX,KAAA,CAACT,IAAI;MAACqB,SAAS,EAAC,QAAQ;MAACC,GAAG,EAAE,CAAE;MAACH,SAAS,EAAET,KAAK,CAAC,SAAS,CAAE;MAAAU,QAAA,gBACzDb,IAAA,CAACP,IAAI;QAACsB,GAAG,EAAE,CAAE;QAACC,UAAU,EAAC,QAAQ;QAAAH,QAAA,EAC5BP;MAAM,CACL,CAAC,eACPN,IAAA,CAACL,YAAY;QACTsB,KAAK,EAAEpB,sBAAsB,CAACU,KAAK,CAAE;QACrCC,QAAQ,EAAEA,QAAS;QACnBU,QAAQ;QACRC,YAAY,EAAErB,aAAc;QAC5Bc,SAAS,EAAET,KAAK,CAAC,QAAQ;MAAE,CAC9B,CAAC;IAAA,CACA;EAAC,CACF,CAAC;AAElB,CAAC","ignoreList":[]}

package/build/esm/helpers/getListKey.d.ts

@@ -1,2 +1,3 @@
 import { QueryListItem, QueryListRow, QueryListRowVariant } from '../types/queryList';
+export declare const getListItemKey: <T extends QueryListRow>(item: QueryListItem<T>) => string;
 export declare const getListKey: <T extends QueryListRow>(items: QueryListItem<T>[], variant: QueryListRowVariant) => string;

package/build/esm/helpers/getListKey.js

@@ -4,10 +4,11 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.iterator.constructor.js";
 import "core-js/modules/es.iterator.map.js";
 import "core-js/modules/es.object.to-string.js";
+export var getListItemKey = function getListItemKey(item) {
+  return 'header' in item ? "h:".concat(item.header) : "r:".concat(item.id);
+};
 export var getListKey = function getListKey(items, variant) {
-  var itemsKey = items.map(function (item) {
-    return 'header' in item ? "h:".concat(item.header) : "r:".concat(item.id);
-  }).join(',');
+  var itemsKey = items.map(getListItemKey).join(',');
   return "".concat(variant, ":").concat(itemsKey);
 };
 // #sourceMappingURL=getListKey.js.map

package/build/esm/helpers/getListKey.js.map

@@ -1 +1 @@
-{"version":3,"names":["getListKey","items","variant","itemsKey","map","item","concat","header","id","join"],"sources":["getListKey.ts"],"sourcesContent":["import {QueryListItem, QueryListRow, QueryListRowVariant} from '../types/queryList';\n\nexport const getListKey = <T extends QueryListRow>(\n    items: QueryListItem<T>[],\n    variant: QueryListRowVariant,\n): string => {\n    const itemsKey = items\n        .map((item) => ('header' in item ? `h:${item.header}` : `r:${item.id}`))\n        .join(',');\n\n    return `${variant}:${itemsKey}`;\n};\n"],"mappings":";;;;;;AAEA,OAAO,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CACnBC,KAAyB,EACzBC,OAA4B,EACnB;EACT,IAAMC,QAAQ,GAAGF,KAAK,CACjBG,GAAG,CAAC,UAACC,IAAI;IAAA,OAAM,QAAQ,IAAIA,IAAI,QAAAC,MAAA,CAAQD,IAAI,CAACE,MAAM,SAAAD,MAAA,CAAUD,IAAI,CAACG,EAAE,CAAE;EAAA,CAAC,CAAC,CACvEC,IAAI,CAAC,GAAG,CAAC;EAEd,UAAAH,MAAA,CAAUJ,OAAO,OAAAI,MAAA,CAAIH,QAAQ;AACjC,CAAC","ignoreList":[]}
+{"version":3,"names":["getListItemKey","item","concat","header","id","getListKey","items","variant","itemsKey","map","join"],"sources":["getListKey.ts"],"sourcesContent":["import {QueryListItem, QueryListRow, QueryListRowVariant} from '../types/queryList';\n\nexport const getListItemKey = <T extends QueryListRow>(item: QueryListItem<T>): string =>\n    'header' in item ? `h:${item.header}` : `r:${item.id}`;\n\nexport const getListKey = <T extends QueryListRow>(\n    items: QueryListItem<T>[],\n    variant: QueryListRowVariant,\n): string => {\n    const itemsKey = items.map(getListItemKey).join(',');\n\n    return `${variant}:${itemsKey}`;\n};\n"],"mappings":";;;;;;AAEA,OAAO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CAA4BC,IAAsB;EAAA,OACzE,QAAQ,IAAIA,IAAI,QAAAC,MAAA,CAAQD,IAAI,CAACE,MAAM,SAAAD,MAAA,CAAUD,IAAI,CAACG,EAAE,CAAE;AAAA;AAE1D,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CACnBC,KAAyB,EACzBC,OAA4B,EACnB;EACT,IAAMC,QAAQ,GAAGF,KAAK,CAACG,GAAG,CAACT,cAAc,CAAC,CAACU,IAAI,CAAC,GAAG,CAAC;EAEpD,UAAAR,MAAA,CAAUK,OAAO,OAAAL,MAAA,CAAIM,QAAQ;AACjC,CAAC","ignoreList":[]}

package/build/esm/helpers/time.d.ts

@@ -1,7 +1,7 @@
 import { DateTime } from '@gravity-ui/date-utils';
 type Date = DateTime | string | number | undefined;
 export declare const formatTime: (date: Date) => string | undefined;
-export declare const durationDates: (date1: Date, date2: Date) => string | undefined;
+export declare const durationDates: (date1: Date, date2: Date) => string;
 export declare const formatTimeCanonical: (ts: Date) => string | undefined;
 export declare const formatDateCanonical: (ts: Date) => string | undefined;
 export declare const getTimestampFromDate: (date: Date) => number | undefined;

package/build/esm/helpers/time.js

@@ -1,26 +1,31 @@
-import { dateTime, dateTimeParse } from '@gravity-ui/date-utils';
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.string.pad-start.js";
+import { dateTimeParse } from '@gravity-ui/date-utils';
 export var formatTime = function formatTime(date) {
   var _dateTimeParse;
   return (_dateTimeParse = dateTimeParse(date)) === null || _dateTimeParse === void 0 ? void 0 : _dateTimeParse.format('HH:mm');
 };
 export var durationDates = function durationDates(date1, date2) {
-  var _dateTimeParse2;
-  if (!date1 && !date2) return '--:--';
-  var start = dateTimeParse(date1) || dateTime();
-  var end = dateTimeParse(date2) || dateTime();
-  var diff = end === null || end === void 0 ? void 0 : end.diff(start);
-  return (_dateTimeParse2 = dateTimeParse(diff)) === null || _dateTimeParse2 === void 0 ? void 0 : _dateTimeParse2.format('HH:mm');
+  if (date1 === undefined || date2 === undefined) return '--:--';
+  var start = dateTimeParse(date1);
+  var end = dateTimeParse(date2);
+  if (!start || !end) return '--:--';
+  var diffMs = Math.max(0, end.valueOf() - start.valueOf());
+  var totalMinutes = Math.floor(diffMs / 60000);
+  var hours = Math.floor(totalMinutes / 60);
+  var minutes = totalMinutes % 60;
+  return "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
 };
 export var formatTimeCanonical = function formatTimeCanonical(ts) {
-  var _dateTimeParse3;
-  return (_dateTimeParse3 = dateTimeParse(ts)) === null || _dateTimeParse3 === void 0 ? void 0 : _dateTimeParse3.format('DD.MM.YYYY, HH:mm');
+  var _dateTimeParse2;
+  return (_dateTimeParse2 = dateTimeParse(ts)) === null || _dateTimeParse2 === void 0 ? void 0 : _dateTimeParse2.format('DD.MM.YYYY, HH:mm');
 };
 export var formatDateCanonical = function formatDateCanonical(ts) {
-  var _dateTimeParse4;
-  return (_dateTimeParse4 = dateTimeParse(ts)) === null || _dateTimeParse4 === void 0 ? void 0 : _dateTimeParse4.format('DD.MM.YYYY');
+  var _dateTimeParse3;
+  return (_dateTimeParse3 = dateTimeParse(ts)) === null || _dateTimeParse3 === void 0 ? void 0 : _dateTimeParse3.format('DD.MM.YYYY');
 };
 export var getTimestampFromDate = function getTimestampFromDate(date) {
-  var _dateTimeParse5;
-  return (_dateTimeParse5 = dateTimeParse(date)) === null || _dateTimeParse5 === void 0 ? void 0 : _dateTimeParse5.valueOf();
+  var _dateTimeParse4;
+  return (_dateTimeParse4 = dateTimeParse(date)) === null || _dateTimeParse4 === void 0 ? void 0 : _dateTimeParse4.valueOf();
 };
 // #sourceMappingURL=time.js.map

package/build/esm/helpers/time.js.map

@@ -1 +1 @@
-{"version":3,"names":["dateTime","dateTimeParse","formatTime","date","_dateTimeParse","format","durationDates","date1","date2","_dateTimeParse2","start","end","diff","formatTimeCanonical","ts","_dateTimeParse3","formatDateCanonical","_dateTimeParse4","getTimestampFromDate","_dateTimeParse5","valueOf"],"sources":["time.ts"],"sourcesContent":["import {DateTime, dateTime, dateTimeParse} from '@gravity-ui/date-utils';\n\ntype Date = DateTime | string | number | undefined;\n\nexport const formatTime = (date: Date) => {\n    return dateTimeParse(date)?.format('HH:mm');\n};\n\nexport const durationDates = (date1: Date, date2: Date) => {\n    if (!date1 && !date2) return '--:--';\n\n    const start = dateTimeParse(date1) || dateTime();\n    const end = dateTimeParse(date2) || dateTime();\n    const diff = end?.diff(start);\n\n    return dateTimeParse(diff)?.format('HH:mm');\n};\n\nexport const formatTimeCanonical = (ts: Date) => {\n    return dateTimeParse(ts)?.format('DD.MM.YYYY, HH:mm');\n};\n\nexport const formatDateCanonical = (ts: Date) => {\n    return dateTimeParse(ts)?.format('DD.MM.YYYY');\n};\n\nexport const getTimestampFromDate = (date: Date) => {\n    return dateTimeParse(date)?.valueOf();\n};\n"],"mappings":"AAAA,SAAkBA,QAAQ,EAAEC,aAAa,QAAO,wBAAwB;AAIxE,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIC,IAAU,EAAK;EAAA,IAAAC,cAAA;EACtC,QAAAA,cAAA,GAAOH,aAAa,CAACE,IAAI,CAAC,cAAAC,cAAA,uBAAnBA,cAAA,CAAqBC,MAAM,CAAC,OAAO,CAAC;AAC/C,CAAC;AAED,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAW,EAAEC,KAAW,EAAK;EAAA,IAAAC,eAAA;EACvD,IAAI,CAACF,KAAK,IAAI,CAACC,KAAK,EAAE,OAAO,OAAO;EAEpC,IAAME,KAAK,GAAGT,aAAa,CAACM,KAAK,CAAC,IAAIP,QAAQ,CAAC,CAAC;EAChD,IAAMW,GAAG,GAAGV,aAAa,CAACO,KAAK,CAAC,IAAIR,QAAQ,CAAC,CAAC;EAC9C,IAAMY,IAAI,GAAGD,GAAG,aAAHA,GAAG,uBAAHA,GAAG,CAAEC,IAAI,CAACF,KAAK,CAAC;EAE7B,QAAAD,eAAA,GAAOR,aAAa,CAACW,IAAI,CAAC,cAAAH,eAAA,uBAAnBA,eAAA,CAAqBJ,MAAM,CAAC,OAAO,CAAC;AAC/C,CAAC;AAED,OAAO,IAAMQ,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,EAAQ,EAAK;EAAA,IAAAC,eAAA;EAC7C,QAAAA,eAAA,GAAOd,aAAa,CAACa,EAAE,CAAC,cAAAC,eAAA,uBAAjBA,eAAA,CAAmBV,MAAM,CAAC,mBAAmB,CAAC;AACzD,CAAC;AAED,OAAO,IAAMW,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIF,EAAQ,EAAK;EAAA,IAAAG,eAAA;EAC7C,QAAAA,eAAA,GAAOhB,aAAa,CAACa,EAAE,CAAC,cAAAG,eAAA,uBAAjBA,eAAA,CAAmBZ,MAAM,CAAC,YAAY,CAAC;AAClD,CAAC;AAED,OAAO,IAAMa,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIf,IAAU,EAAK;EAAA,IAAAgB,eAAA;EAChD,QAAAA,eAAA,GAAOlB,aAAa,CAACE,IAAI,CAAC,cAAAgB,eAAA,uBAAnBA,eAAA,CAAqBC,OAAO,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}
+{"version":3,"names":["dateTimeParse","formatTime","date","_dateTimeParse","format","durationDates","date1","date2","undefined","start","end","diffMs","Math","max","valueOf","totalMinutes","floor","hours","minutes","concat","String","padStart","formatTimeCanonical","ts","_dateTimeParse2","formatDateCanonical","_dateTimeParse3","getTimestampFromDate","_dateTimeParse4"],"sources":["time.ts"],"sourcesContent":["import {DateTime, dateTimeParse} from '@gravity-ui/date-utils';\n\ntype Date = DateTime | string | number | undefined;\n\nexport const formatTime = (date: Date) => {\n    return dateTimeParse(date)?.format('HH:mm');\n};\n\nexport const durationDates = (date1: Date, date2: Date) => {\n    if (date1 === undefined || date2 === undefined) return '--:--';\n\n    const start = dateTimeParse(date1);\n    const end = dateTimeParse(date2);\n\n    if (!start || !end) return '--:--';\n\n    const diffMs = Math.max(0, end.valueOf() - start.valueOf());\n    const totalMinutes = Math.floor(diffMs / 60_000);\n    const hours = Math.floor(totalMinutes / 60);\n    const minutes = totalMinutes % 60;\n\n    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;\n};\n\nexport const formatTimeCanonical = (ts: Date) => {\n    return dateTimeParse(ts)?.format('DD.MM.YYYY, HH:mm');\n};\n\nexport const formatDateCanonical = (ts: Date) => {\n    return dateTimeParse(ts)?.format('DD.MM.YYYY');\n};\n\nexport const getTimestampFromDate = (date: Date) => {\n    return dateTimeParse(date)?.valueOf();\n};\n"],"mappings":";;AAAA,SAAkBA,aAAa,QAAO,wBAAwB;AAI9D,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIC,IAAU,EAAK;EAAA,IAAAC,cAAA;EACtC,QAAAA,cAAA,GAAOH,aAAa,CAACE,IAAI,CAAC,cAAAC,cAAA,uBAAnBA,cAAA,CAAqBC,MAAM,CAAC,OAAO,CAAC;AAC/C,CAAC;AAED,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAW,EAAEC,KAAW,EAAK;EACvD,IAAID,KAAK,KAAKE,SAAS,IAAID,KAAK,KAAKC,SAAS,EAAE,OAAO,OAAO;EAE9D,IAAMC,KAAK,GAAGT,aAAa,CAACM,KAAK,CAAC;EAClC,IAAMI,GAAG,GAAGV,aAAa,CAACO,KAAK,CAAC;EAEhC,IAAI,CAACE,KAAK,IAAI,CAACC,GAAG,EAAE,OAAO,OAAO;EAElC,IAAMC,MAAM,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,GAAG,CAACI,OAAO,CAAC,CAAC,GAAGL,KAAK,CAACK,OAAO,CAAC,CAAC,CAAC;EAC3D,IAAMC,YAAY,GAAGH,IAAI,CAACI,KAAK,CAACL,MAAM,GAAG,KAAM,CAAC;EAChD,IAAMM,KAAK,GAAGL,IAAI,CAACI,KAAK,CAACD,YAAY,GAAG,EAAE,CAAC;EAC3C,IAAMG,OAAO,GAAGH,YAAY,GAAG,EAAE;EAEjC,UAAAI,MAAA,CAAUC,MAAM,CAACH,KAAK,CAAC,CAACI,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,OAAAF,MAAA,CAAIC,MAAM,CAACF,OAAO,CAAC,CAACG,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AAChF,CAAC;AAED,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,EAAQ,EAAK;EAAA,IAAAC,eAAA;EAC7C,QAAAA,eAAA,GAAOxB,aAAa,CAACuB,EAAE,CAAC,cAAAC,eAAA,uBAAjBA,eAAA,CAAmBpB,MAAM,CAAC,mBAAmB,CAAC;AACzD,CAAC;AAED,OAAO,IAAMqB,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIF,EAAQ,EAAK;EAAA,IAAAG,eAAA;EAC7C,QAAAA,eAAA,GAAO1B,aAAa,CAACuB,EAAE,CAAC,cAAAG,eAAA,uBAAjBA,eAAA,CAAmBtB,MAAM,CAAC,YAAY,CAAC;AAClD,CAAC;AAED,OAAO,IAAMuB,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIzB,IAAU,EAAK;EAAA,IAAA0B,eAAA;EAChD,QAAAA,eAAA,GAAO5B,aAAa,CAACE,IAAI,CAAC,cAAA0B,eAAA,uBAAnBA,eAAA,CAAqBd,OAAO,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}

package/build/esm/helpers/useListKey.d.ts

@@ -0,0 +1,2 @@
+import { QueryListItem, QueryListRow, QueryListRowVariant } from '../types/queryList';
+export declare const useListKey: <T extends QueryListRow>(items: QueryListItem<T>[], rowVariant: QueryListRowVariant, paginationEnabled: boolean) => string;

package/build/esm/helpers/useListKey.js

@@ -0,0 +1,26 @@
+import "core-js/modules/es.array.every.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.every.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import { useRef } from 'react';
+import { getListItemKey, getListKey } from "./getListKey";
+export var useListKey = function useListKey(items, rowVariant, paginationEnabled) {
+  var itemKeys = items.map(getListItemKey);
+  var currentKey = getListKey(items, rowVariant);
+  var stateRef = useRef(undefined);
+  var previousState = stateRef.current;
+  var isAppend = (previousState === null || previousState === void 0 ? void 0 : previousState.paginationEnabled) && previousState.rowVariant === rowVariant && previousState.itemKeys.length <= itemKeys.length && previousState.itemKeys.every(function (key, index) {
+    return key === itemKeys[index];
+  });
+  var key = paginationEnabled && isAppend ? previousState.key : currentKey;
+  stateRef.current = {
+    key: key,
+    itemKeys: itemKeys,
+    rowVariant: rowVariant,
+    paginationEnabled: paginationEnabled
+  };
+  return key;
+};
+// #sourceMappingURL=useListKey.js.map

package/build/esm/helpers/useListKey.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useRef","getListItemKey","getListKey","useListKey","items","rowVariant","paginationEnabled","itemKeys","map","currentKey","stateRef","undefined","previousState","current","isAppend","length","every","key","index"],"sources":["useListKey.ts"],"sourcesContent":["import {useRef} from 'react';\nimport {getListItemKey, getListKey} from './getListKey';\nimport {QueryListItem, QueryListRow, QueryListRowVariant} from '../types/queryList';\n\ntype ListKeyState = {\n    key: string;\n    itemKeys: string[];\n    rowVariant: QueryListRowVariant;\n    paginationEnabled: boolean;\n};\n\nexport const useListKey = <T extends QueryListRow>(\n    items: QueryListItem<T>[],\n    rowVariant: QueryListRowVariant,\n    paginationEnabled: boolean,\n) => {\n    const itemKeys = items.map(getListItemKey);\n    const currentKey = getListKey(items, rowVariant);\n    const stateRef = useRef<ListKeyState | undefined>(undefined);\n    const previousState = stateRef.current;\n    const isAppend =\n        previousState?.paginationEnabled &&\n        previousState.rowVariant === rowVariant &&\n        previousState.itemKeys.length <= itemKeys.length &&\n        previousState.itemKeys.every((key, index) => key === itemKeys[index]);\n    const key = paginationEnabled && isAppend ? previousState.key : currentKey;\n\n    stateRef.current = {key, itemKeys, rowVariant, paginationEnabled};\n\n    return key;\n};\n"],"mappings":";;;;;;AAAA,SAAQA,MAAM,QAAO,OAAO;AAC5B,SAAQC,cAAc,EAAEC,UAAU;AAUlC,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CACnBC,KAAyB,EACzBC,UAA+B,EAC/BC,iBAA0B,EACzB;EACD,IAAMC,QAAQ,GAAGH,KAAK,CAACI,GAAG,CAACP,cAAc,CAAC;EAC1C,IAAMQ,UAAU,GAAGP,UAAU,CAACE,KAAK,EAAEC,UAAU,CAAC;EAChD,IAAMK,QAAQ,GAAGV,MAAM,CAA2BW,SAAS,CAAC;EAC5D,IAAMC,aAAa,GAAGF,QAAQ,CAACG,OAAO;EACtC,IAAMC,QAAQ,GACV,CAAAF,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEN,iBAAiB,KAChCM,aAAa,CAACP,UAAU,KAAKA,UAAU,IACvCO,aAAa,CAACL,QAAQ,CAACQ,MAAM,IAAIR,QAAQ,CAACQ,MAAM,IAChDH,aAAa,CAACL,QAAQ,CAACS,KAAK,CAAC,UAACC,GAAG,EAAEC,KAAK;IAAA,OAAKD,GAAG,KAAKV,QAAQ,CAACW,KAAK,CAAC;EAAA,EAAC;EACzE,IAAMD,GAAG,GAAGX,iBAAiB,IAAIQ,QAAQ,GAAGF,aAAa,CAACK,GAAG,GAAGR,UAAU;EAE1EC,QAAQ,CAACG,OAAO,GAAG;IAACI,GAAG,EAAHA,GAAG;IAAEV,QAAQ,EAARA,QAAQ;IAAEF,UAAU,EAAVA,UAAU;IAAEC,iBAAiB,EAAjBA;EAAiB,CAAC;EAEjE,OAAOW,GAAG;AACd,CAAC","ignoreList":[]}

package/build/esm/helpers/useLoadMoreSentinel.d.ts

@@ -1 +1 @@
-export declare function useLoadMoreSentinel(hasMore: boolean | undefined, onLoadMore?: () => void): (node: HTMLElement | null) => void;
+export declare function useLoadMoreSentinel(hasMore: boolean | undefined, onLoadMore?: () => void, loading?: boolean, itemsCount?: number): (node: HTMLElement | null) => void;

package/build/esm/helpers/useLoadMoreSentinel.js

@@ -3,18 +3,26 @@ import "core-js/modules/es.iterator.constructor.js";
 import "core-js/modules/es.iterator.some.js";
 import "core-js/modules/es.object.to-string.js";
 import { useCallback, useEffect, useRef } from 'react';
-export function useLoadMoreSentinel(hasMore, onLoadMore) {
+export function useLoadMoreSentinel(hasMore, onLoadMore, loading, itemsCount) {
   var observerRef = useRef(null);
+  var loadRequestedRef = useRef(false);
   var hasMoreRef = useRef(hasMore);
   hasMoreRef.current = hasMore;
   var onLoadMoreRef = useRef(onLoadMore);
   onLoadMoreRef.current = onLoadMore;
+  var preventRepeatedLoad = loading !== undefined;
   useEffect(function () {
     return function () {
       var _observerRef$current;
       (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
     };
   }, []);
+  useEffect(function () {
+    if (!loading) {
+      // Cached pages can add items without changing the loading state.
+      loadRequestedRef.current = false;
+    }
+  }, [loading, itemsCount]);
   return useCallback(function (node) {
     var _observerRef$current2;
     (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 || _observerRef$current2.disconnect();
@@ -24,12 +32,13 @@ export function useLoadMoreSentinel(hasMore, onLoadMore) {
     observerRef.current = new IntersectionObserver(function (entries) {
       if (entries.some(function (entry) {
         return entry.isIntersecting;
-      }) && hasMoreRef.current) {
+      }) && hasMoreRef.current && !loading && (!preventRepeatedLoad || !loadRequestedRef.current) && onLoadMoreRef.current) {
         var _onLoadMoreRef$curren;
+        loadRequestedRef.current = preventRepeatedLoad;
         (_onLoadMoreRef$curren = onLoadMoreRef.current) === null || _onLoadMoreRef$curren === void 0 || _onLoadMoreRef$curren.call(onLoadMoreRef);
       }
     });
     observerRef.current.observe(node);
-  }, []);
+  }, [loading, preventRepeatedLoad]);
 }
 // #sourceMappingURL=useLoadMoreSentinel.js.map