@gravity-ui/querieskit 1.3.2 → 1.5.0

package/build/cjs/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/cjs/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/cjs/components/LazyList/LazyList.js

@@ -22,6 +22,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var block = (0, _bemCnLite.default)('qp-lazy-list');
 var SENTINEL_ROW_HEIGHT = 1;
+var LOADING_ROW_HEIGHT = 40;
 var isSentinelRow = function isSentinelRow(row) {
   return Boolean(row) && (0, _typeof2.default)(row) === 'object' && '__sentinel' in row;
 };
@@ -40,15 +41,37 @@ var LazyList = exports.LazyList = function LazyList(_ref) {
     emptyContent = _ref.emptyContent,
     isEmpty = _ref.isEmpty,
     className = _ref.className;
-  var sentinelRef = (0, _useLoadMoreSentinel.useLoadMoreSentinel)(hasMore, onLoadMore);
+  var listRef = (0, _react.useRef)(null);
+  var previousListStateRef = (0, _react.useRef)({
+    itemsLength: items.length,
+    loading: loading,
+    hasMore: hasMore
+  });
+  var sentinelRef = (0, _useLoadMoreSentinel.useLoadMoreSentinel)(hasMore, onLoadMore, loading, items.length);
   var rows = (0, _react.useMemo)(function () {
-    return hasMore ? [].concat((0, _toConsumableArray2.default)(items), [{
+    return hasMore || loading ? [].concat((0, _toConsumableArray2.default)(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);
   };
+  (0, _react.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__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
       children: error
@@ -66,6 +89,7 @@ var LazyList = exports.LazyList = function LazyList(_ref) {
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.List, {
+    ref: listRef,
     className: block(null, className),
     filterable: filterable,
     items: rows,
@@ -78,7 +102,16 @@ var LazyList = exports.LazyList = function LazyList(_ref) {
     renderItem: function renderItem(row, isActive, index) {
       return isSentinelRow(row) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: sentinelRef,
-        className: block('sentinel')
+        className: block('sentinel', {
+          loading: Boolean(loading)
+        }),
+        children: loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Flex, {
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Loader, {})
+        })
       }) : _renderItem(row, isActive, index);
     },
     selectedItemIndex: selectedItemIndex,

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_uikit","_bemCnLite","_interopRequireDefault","_useLoadMoreSentinel","_ListSpinner","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","block","cn","SENTINEL_ROW_HEIGHT","isSentinelRow","row","Boolean","_typeof","LazyList","exports","_ref","items","itemHeight","renderItem","hasMore","onLoadMore","onItemClick","selectedItemIndex","_ref$filterable","filterable","loading","error","emptyContent","isEmpty","className","sentinelRef","useLoadMoreSentinel","rows","useMemo","concat","_toConsumableArray","__sentinel","getRowHeight","_jsx","React","Fragment","children","empty","length","ListSpinner","List","itemsHeight","listRows","reduce","total","isActive","index","ref","_renderItem","_onItemClick"],"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","_interopRequireWildcard","require","_uikit","_bemCnLite","_interopRequireDefault","_useLoadMoreSentinel","_ListSpinner","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","block","cn","SENTINEL_ROW_HEIGHT","LOADING_ROW_HEIGHT","isSentinelRow","row","Boolean","_typeof","LazyList","exports","_ref","items","itemHeight","renderItem","hasMore","onLoadMore","onItemClick","selectedItemIndex","_ref$filterable","filterable","loading","error","emptyContent","isEmpty","className","listRef","useRef","previousListStateRef","itemsLength","length","sentinelRef","useLoadMoreSentinel","rows","useMemo","concat","_toConsumableArray","__sentinel","getRowHeight","useLayoutEffect","previousListState","current","listStateChanged","_listRef$current","refContainer","resetAfterIndex","Math","min","_jsx","React","Fragment","children","empty","ListSpinner","List","ref","itemsHeight","listRows","reduce","total","isActive","index","Flex","alignItems","justifyContent","width","height","Loader","_renderItem","_onItemClick"],"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":"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","ignoreList":[]}

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

@@ -48,6 +48,13 @@ var AllStatuses = exports.AllStatuses = {
         status: "aborted",
         startTime: fiveMinutesAgo,
         endTime: now
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDuration.QueryDuration, {
+        status: "completed",
+        startTime: now - (27 * 60 + 15) * 60 * 1000,
+        endTime: now
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDuration.QueryDuration, {
+        status: "completed",
+        startTime: fiveMinutesAgo
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDuration.QueryDuration, {
         status: "running",
         startTime: fiveMinutesAgo

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_QueryDuration","_jsxRuntime","e","__esModule","default","now","Date","fiveMinutesAgo","oneHourAgo","meta","title","component","QueryDuration","tags","_default","exports","Default","args","status","startTime","AllStatuses","render","_jsxs","style","display","gap","flexWrap","alignItems","children","_jsx","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAA8C,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9C,IAAMG,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,EAAEC,4BAAa;EACxBC,IAAI,EAAE,CAAC,UAAU;AACrB,CAAC;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAX,OAAA,GAEcK,IAAI;AAGnB;AACO,IAAMO,OAAc,GAAAD,OAAA,CAAAC,OAAA,GAAG;EAC1BC,IAAI,EAAE;IACFC,MAAM,EAAE,SAAS;IACjBC,SAAS,EAAEZ;EACf;AACJ,CAAC;;AAED;AACO,IAAMa,WAAkB,GAAAL,OAAA,CAAAK,WAAA,GAAG;EAC9BC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACF,IAAAC,gBAAA;MAAKC,KAAK,EAAE;QAACC,OAAO,EAAE,MAAM;QAAEC,GAAG,EAAE,CAAC;QAAEC,QAAQ,EAAE,MAAM;QAAEC,UAAU,EAAE;MAAQ,CAAE;MAAAC,QAAA,gBAE1E,IAAAC,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,WAAW;QAACC,SAAS,EAAEZ,cAAe;QAACuB,OAAO,EAAEzB;MAAI,CAAE,CAAC,eAC7E,IAAAwB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,QAAQ;QAACC,SAAS,EAAEX,UAAW;QAACsB,OAAO,EAAEzB;MAAI,CAAE,CAAC,eACtE,IAAAwB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,SAAS;QAACC,SAAS,EAAEZ,cAAe;QAACuB,OAAO,EAAEzB;MAAI,CAAE,CAAC,eAE3E,IAAAwB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,SAAS;QAACC,SAAS,EAAEZ;MAAe,CAAE,CAAC,eAE7D,IAAAsB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,OAAO;QAACC,SAAS,EAAEd;MAAI,CAAE,CAAC;IAAA,CAC/C,CAAC;EAAA;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_QueryDuration","_jsxRuntime","e","__esModule","default","now","Date","fiveMinutesAgo","oneHourAgo","meta","title","component","QueryDuration","tags","_default","exports","Default","args","status","startTime","AllStatuses","render","_jsxs","style","display","gap","flexWrap","alignItems","children","_jsx","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAA8C,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9C,IAAMG,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,EAAEC,4BAAa;EACxBC,IAAI,EAAE,CAAC,UAAU;AACrB,CAAC;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAX,OAAA,GAEcK,IAAI;AAGnB;AACO,IAAMO,OAAc,GAAAD,OAAA,CAAAC,OAAA,GAAG;EAC1BC,IAAI,EAAE;IACFC,MAAM,EAAE,SAAS;IACjBC,SAAS,EAAEZ;EACf;AACJ,CAAC;;AAED;AACO,IAAMa,WAAkB,GAAAL,OAAA,CAAAK,WAAA,GAAG;EAC9BC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACF,IAAAC,gBAAA;MAAKC,KAAK,EAAE;QAACC,OAAO,EAAE,MAAM;QAAEC,GAAG,EAAE,CAAC;QAAEC,QAAQ,EAAE,MAAM;QAAEC,UAAU,EAAE;MAAQ,CAAE;MAAAC,QAAA,gBAE1E,IAAAC,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,WAAW;QAACC,SAAS,EAAEZ,cAAe;QAACuB,OAAO,EAAEzB;MAAI,CAAE,CAAC,eAC7E,IAAAwB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,QAAQ;QAACC,SAAS,EAAEX,UAAW;QAACsB,OAAO,EAAEzB;MAAI,CAAE,CAAC,eACtE,IAAAwB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,SAAS;QAACC,SAAS,EAAEZ,cAAe;QAACuB,OAAO,EAAEzB;MAAI,CAAE,CAAC,eAC3E,IAAAwB,eAAA,EAACjB,4BAAa;QACVM,MAAM,EAAC,WAAW;QAClBC,SAAS,EAAEd,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAK;QAC5CyB,OAAO,EAAEzB;MAAI,CAChB,CAAC,eACF,IAAAwB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,WAAW;QAACC,SAAS,EAAEZ;MAAe,CAAE,CAAC,eAE/D,IAAAsB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,SAAS;QAACC,SAAS,EAAEZ;MAAe,CAAE,CAAC,eAE7D,IAAAsB,eAAA,EAACjB,4BAAa;QAACM,MAAM,EAAC,OAAO;QAACC,SAAS,EAAEd;MAAI,CAAE,CAAC;IAAA,CAC/C,CAAC;EAAA;AAEd,CAAC","ignoreList":[]}

package/build/cjs/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/cjs/components/QueryDuration/useQueryDuration.js

@@ -6,35 +6,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.useQueryDuration = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.date.now.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/web.timers.js");
 var _react = require("react");
 var _query = require("../../constants/query");
 var _time = require("../../helpers/time");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var calculateDuration = function calculateDuration(state, startTime, endTime) {
+  if (state === 'draft' || startTime === undefined) {
+    return '--:--';
+  }
+  if (_query.CompletedQueryStates.includes(state)) {
+    return endTime === undefined ? '--:--' : (0, _time.durationDates)(startTime, endTime);
+  }
+  return (0, _time.durationDates)(startTime, endTime !== null && endTime !== void 0 ? endTime : Date.now());
+};
 var useQueryDuration = exports.useQueryDuration = function useQueryDuration(state, startTime, endTime) {
-  var _useState = (0, _react.useState)((0, _time.durationDates)(startTime, endTime)),
+  var _useState = (0, _react.useState)(function () {
+      return calculateDuration(state, startTime, endTime);
+    }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     duration = _useState2[0],
     setDuration = _useState2[1];
   (0, _react.useEffect)(function () {
-    if (state === 'draft' || !startTime) {
-      setDuration('--:--');
-      return;
-    }
-    if (_query.CompletedQueryStates.includes(state)) {
-      setDuration(endTime ? (0, _time.durationDates)(startTime, endTime) : '--:--');
-      return;
-    }
-    setDuration((0, _time.durationDates)(startTime, endTime));
-    if (endTime) {
-      return;
+    setDuration(calculateDuration(state, startTime, endTime));
+    var timer;
+    if (!(state === 'draft' || startTime === undefined || _query.CompletedQueryStates.includes(state) || endTime !== undefined)) {
+      timer = setInterval(function () {
+        return setDuration((0, _time.durationDates)(startTime, Date.now()));
+      }, 1000);
     }
-    var timer = setInterval(function () {
-      return setDuration((0, _time.durationDates)(startTime, endTime));
-    }, 1000);
     return function () {
-      clearInterval(timer);
+      if (timer !== undefined) {
+        clearInterval(timer);
+      }
     };
   }, [state, startTime, endTime]);
   return duration;

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_query","_time","_interopRequireDefault","e","__esModule","default","useQueryDuration","exports","state","startTime","endTime","_useState","useState","durationDates","_useState2","_slicedToArray","duration","setDuration","useEffect","CompletedQueryStates","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,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAqB,SAAAG,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEd,IAAMG,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CACzBE,KAAkB,EAClBC,SAA2B,EAC3BC,OAAyB,EACxB;EACD,IAAAC,SAAA,GAAgC,IAAAC,eAAQ,EAAC,IAAAC,mBAAa,EAACJ,SAAS,EAAEC,OAAO,CAAC,CAAC;IAAAI,UAAA,OAAAC,uBAAA,EAAAJ,SAAA;IAApEK,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAE5B,IAAAI,gBAAS,EAAC,YAAM;IACZ,IAAIV,KAAK,KAAK,OAAO,IAAI,CAACC,SAAS,EAAE;MACjCQ,WAAW,CAAC,OAAO,CAAC;MACpB;IACJ;IACA,IAAIE,2BAAoB,CAACC,QAAQ,CAACZ,KAAK,CAAC,EAAE;MACtCS,WAAW,CAACP,OAAO,GAAG,IAAAG,mBAAa,EAACJ,SAAS,EAAEC,OAAO,CAAC,GAAG,OAAO,CAAC;MAClE;IACJ;IACAO,WAAW,CAAC,IAAAJ,mBAAa,EAACJ,SAAS,EAAEC,OAAO,CAAC,CAAC;IAC9C,IAAIA,OAAO,EAAE;MACT;IACJ;IACA,IAAMW,KAAK,GAAGC,WAAW,CAAC;MAAA,OAAML,WAAW,CAAC,IAAAJ,mBAAa,EAACJ,SAAS,EAAEC,OAAO,CAAC,CAAC;IAAA,GAAE,IAAI,CAAC;IAErF,OAAO,YAAM;MACTa,aAAa,CAACF,KAAK,CAAC;IACxB,CAAC;EACL,CAAC,EAAE,CAACb,KAAK,EAAEC,SAAS,EAAEC,OAAO,CAAC,CAAC;EAE/B,OAAOM,QAAQ;AACnB,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","require","_query","_time","_interopRequireDefault","e","__esModule","default","calculateDuration","state","startTime","endTime","undefined","CompletedQueryStates","includes","durationDates","Date","now","useQueryDuration","exports","_useState","useState","_useState2","_slicedToArray","duration","setDuration","useEffect","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,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAqB,SAAAG,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAErB,IAAMG,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,IAAIC,2BAAoB,CAACC,QAAQ,CAACL,KAAK,CAAC,EAAE;IACtC,OAAOE,OAAO,KAAKC,SAAS,GAAG,OAAO,GAAG,IAAAG,mBAAa,EAACL,SAAS,EAAEC,OAAO,CAAC;EAC9E;EAEA,OAAO,IAAAI,mBAAa,EAACL,SAAS,EAAEC,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIK,IAAI,CAACC,GAAG,CAAC,CAAC,CAAC;AAC1D,CAAC;AAEM,IAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CACzBT,KAAkB,EAClBC,SAA2B,EAC3BC,OAAyB,EACxB;EACD,IAAAS,SAAA,GAAgC,IAAAC,eAAQ,EAAC;MAAA,OAAMb,iBAAiB,CAACC,KAAK,EAAEC,SAAS,EAAEC,OAAO,CAAC;IAAA,EAAC;IAAAW,UAAA,OAAAC,uBAAA,EAAAH,SAAA;IAArFI,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAE5B,IAAAI,gBAAS,EAAC,YAAM;IACZD,WAAW,CAACjB,iBAAiB,CAACC,KAAK,EAAEC,SAAS,EAAEC,OAAO,CAAC,CAAC;IAEzD,IAAIgB,KAAiD;IAErD,IAAI,EACAlB,KAAK,KAAK,OAAO,IACjBC,SAAS,KAAKE,SAAS,IACvBC,2BAAoB,CAACC,QAAQ,CAACL,KAAK,CAAC,IACpCE,OAAO,KAAKC,SAAS,CACxB,EAAE;MACCe,KAAK,GAAGC,WAAW,CAAC;QAAA,OAAMH,WAAW,CAAC,IAAAV,mBAAa,EAACL,SAAS,EAAEM,IAAI,CAACC,GAAG,CAAC,CAAC,CAAC,CAAC;MAAA,GAAE,IAAI,CAAC;IACtF;IAEA,OAAO,YAAM;MACT,IAAIU,KAAK,KAAKf,SAAS,EAAE;QACrBiB,aAAa,CAACF,KAAK,CAAC;MACxB;IACJ,CAAC;EACL,CAAC,EAAE,CAAClB,KAAK,EAAEC,SAAS,EAAEC,OAAO,CAAC,CAAC;EAE/B,OAAOa,QAAQ;AACnB,CAAC","ignoreList":[]}

package/build/cjs/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/cjs/components/RowLink/RowLink.js

@@ -4,23 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RowLink = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
 require("./RowLink.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _excluded = ["href", "disabled", "renderLink", "className", "children"];
 var block = (0, _bemCnLite.default)('qp-row-link');
 var RowLink = exports.RowLink = function RowLink(_ref) {
   var href = _ref.href,
     disabled = _ref.disabled,
+    renderLink = _ref.renderLink,
     className = _ref.className,
-    children = _ref.children;
+    children = _ref.children,
+    linkProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isLink = Boolean(href) && !disabled;
-  var Wrap = isLink ? 'a' : 'div';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrap, {
-    href: isLink ? href : undefined,
+  if (!isLink) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: block(null, className),
+      children: children
+    });
+  }
+  var props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, linkProps), {}, {
+    href: href,
     className: block(null, className),
     children: children
   });
+  return renderLink ? renderLink(props) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", (0, _objectSpread2.default)({}, props));
 };
 // #sourceMappingURL=RowLink.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_bemCnLite","_jsxRuntime","e","__esModule","default","block","cn","RowLink","exports","_ref","href","disabled","className","children","isLink","Boolean","Wrap","_jsx","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACAA,OAAA;AAAwB,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAExB,IAAMG,KAAK,GAAG,IAAAC,kBAAE,EAAC,aAAa,CAAC;AASxB,IAAMC,OAAyB,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAA5BA,OAAyBA,CAAAE,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,oBACI,IAAAG,eAAA,EAACD,IAAI;IAACN,IAAI,EAAEI,MAAM,GAAGJ,IAAI,GAAGQ,SAAU;IAACN,SAAS,EAAEP,KAAK,CAAC,IAAI,EAAEO,SAAS,CAAE;IAAAC,QAAA,EACpEA;EAAQ,CACP,CAAC;AAEf,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_bemCnLite","_jsxRuntime","e","__esModule","default","block","cn","RowLink","exports","_ref","href","disabled","renderLink","className","children","linkProps","_objectWithoutProperties","_excluded","isLink","Boolean","_jsx","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEAA,OAAA;AAAwB,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;;AAExB,IAAMG,KAAK,GAAG,IAAAC,kBAAE,EAAC,aAAa,CAAC;AAQxB,IAAMC,OAAyB,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAA5BA,OAAyBA,CAAAE,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,OAAAC,iCAAA,EAAAP,IAAA,EAAAQ,SAAA;EAEZ,IAAMC,MAAM,GAAGC,OAAO,CAACT,IAAI,CAAC,IAAI,CAACC,QAAQ;EAEzC,IAAI,CAACO,MAAM,EAAE;IACT,oBAAO,IAAAE,eAAA;MAAKP,SAAS,EAAER,KAAK,CAAC,IAAI,EAAEQ,SAAS,CAAE;MAAAC,QAAA,EAAEA;IAAQ,CAAM,CAAC;EACnE;EAEA,IAAMO,KAA0C,OAAAC,sBAAA,MAAAA,sBAAA,MACzCP,SAAS;IACZL,IAAI,EAAJA,IAAI;IACJG,SAAS,EAAER,KAAK,CAAC,IAAI,EAAEQ,SAAS,CAAC;IACjCC,QAAQ,EAARA;EAAQ,EACX;EAED,OAAOF,UAAU,GAAGA,UAAU,CAACS,KAAK,CAAC,gBAAG,IAAAD,eAAA,WAAAE,sBAAA,MAAOD,KAAK,CAAG,CAAC;AAC5D,CAAC","ignoreList":[]}

package/build/cjs/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/cjs/components/SearchRowLayout/SearchRowLayout.js

@@ -21,10 +21,12 @@ var SearchRowLayout = exports.SearchRowLayout = function SearchRowLayout(_ref) {
     language = _ref.language,
     href = _ref.href,
     disabled = _ref.disabled,
+    renderLink = _ref.renderLink,
     className = _ref.className;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowLink.RowLink, {
     href: href,
     disabled: disabled,
+    renderLink: renderLink,
     className: block(null, className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
       direction: "column",

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_uikit","_bemCnLite","_MonacoEditor","_RowLink","_fitQueryToVisibleLines","_monacoConfig","_jsxRuntime","e","__esModule","default","block","cn","SearchRowLayout","exports","_ref","header","query","language","href","disabled","className","_jsx","RowLink","children","_jsxs","Flex","direction","gap","alignItems","MonacoEditor","value","fitQueryToVisibleLines","readOnly","monacoConfig","MONACO_CONFIG"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,uBAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AACAA,OAAA;AAAgC,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAD,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,IAAMG,KAAK,GAAG,IAAAC,kBAAE,EAAC,sBAAsB,CAAC;AAWjC,IAAMC,eAAyC,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAA5CA,eAAyCA,CAAAE,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,oBACI,IAAAC,eAAA,EAACC,gBAAO;IAACJ,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACC,SAAS,EAAEV,KAAK,CAAC,IAAI,EAAEU,SAAS,CAAE;IAAAG,QAAA,eACvE,IAAAC,gBAAA,EAACC,WAAI;MAACC,SAAS,EAAC,QAAQ;MAACC,GAAG,EAAE,CAAE;MAACP,SAAS,EAAEV,KAAK,CAAC,SAAS,CAAE;MAAAa,QAAA,gBACzD,IAAAF,eAAA,EAACI,WAAI;QAACE,GAAG,EAAE,CAAE;QAACC,UAAU,EAAC,QAAQ;QAAAL,QAAA,EAC5BR;MAAM,CACL,CAAC,eACP,IAAAM,eAAA,EAACQ,0BAAY;QACTC,KAAK,EAAE,IAAAC,8CAAsB,EAACf,KAAK,CAAE;QACrCC,QAAQ,EAAEA,QAAS;QACnBe,QAAQ;QACRC,YAAY,EAAEC,2BAAc;QAC5Bd,SAAS,EAAEV,KAAK,CAAC,QAAQ;MAAE,CAC9B,CAAC;IAAA,CACA;EAAC,CACF,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_uikit","_bemCnLite","_MonacoEditor","_RowLink","_fitQueryToVisibleLines","_monacoConfig","_jsxRuntime","e","__esModule","default","block","cn","SearchRowLayout","exports","_ref","header","query","language","href","disabled","renderLink","className","_jsx","RowLink","children","_jsxs","Flex","direction","gap","alignItems","MonacoEditor","value","fitQueryToVisibleLines","readOnly","monacoConfig","MONACO_CONFIG"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAEA,IAAAK,uBAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AACAA,OAAA;AAAgC,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAD,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,IAAMG,KAAK,GAAG,IAAAC,kBAAE,EAAC,sBAAsB,CAAC;AAYjC,IAAMC,eAAyC,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAA5CA,eAAyCA,CAAAE,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,oBACI,IAAAC,eAAA,EAACC,gBAAO;IACJL,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAEX,KAAK,CAAC,IAAI,EAAEW,SAAS,CAAE;IAAAG,QAAA,eAElC,IAAAC,gBAAA,EAACC,WAAI;MAACC,SAAS,EAAC,QAAQ;MAACC,GAAG,EAAE,CAAE;MAACP,SAAS,EAAEX,KAAK,CAAC,SAAS,CAAE;MAAAc,QAAA,gBACzD,IAAAF,eAAA,EAACI,WAAI;QAACE,GAAG,EAAE,CAAE;QAACC,UAAU,EAAC,QAAQ;QAAAL,QAAA,EAC5BT;MAAM,CACL,CAAC,eACP,IAAAO,eAAA,EAACQ,0BAAY;QACTC,KAAK,EAAE,IAAAC,8CAAsB,EAAChB,KAAK,CAAE;QACrCC,QAAQ,EAAEA,QAAS;QACnBgB,QAAQ;QACRC,YAAY,EAAEC,2BAAc;QAC5Bd,SAAS,EAAEX,KAAK,CAAC,QAAQ;MAAE,CAC9B,CAAC;IAAA,CACA;EAAC,CACF,CAAC;AAElB,CAAC","ignoreList":[]}

package/build/cjs/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/cjs/helpers/getListKey.js

@@ -3,17 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getListKey = void 0;
+exports.getListKey = exports.getListItemKey = void 0;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.join.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.iterator.constructor.js");
 require("core-js/modules/es.iterator.map.js");
 require("core-js/modules/es.object.to-string.js");
+var getListItemKey = exports.getListItemKey = function getListItemKey(item) {
+  return 'header' in item ? "h:".concat(item.header) : "r:".concat(item.id);
+};
 var getListKey = exports.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/cjs/helpers/getListKey.js.map

@@ -1 +1 @@
-{"version":3,"names":["getListKey","exports","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":";;;;;;;;;;;;AAEO,IAAMA,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CACnBE,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","exports","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":";;;;;;;;;;;;AAEO,IAAMA,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA,CAA4BE,IAAsB;EAAA,OACzE,QAAQ,IAAIA,IAAI,QAAAC,MAAA,CAAQD,IAAI,CAACE,MAAM,SAAAD,MAAA,CAAUD,IAAI,CAACG,EAAE,CAAE;AAAA;AAEnD,IAAMC,UAAU,GAAAL,OAAA,CAAAK,UAAA,GAAG,SAAbA,UAAUA,CACnBC,KAAyB,EACzBC,OAA4B,EACnB;EACT,IAAMC,QAAQ,GAAGF,KAAK,CAACG,GAAG,CAACV,cAAc,CAAC,CAACW,IAAI,CAAC,GAAG,CAAC;EAEpD,UAAAR,MAAA,CAAUK,OAAO,OAAAL,MAAA,CAAIM,QAAQ;AACjC,CAAC","ignoreList":[]}

package/build/cjs/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/cjs/helpers/time.js

@@ -4,29 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTimestampFromDate = exports.formatTimeCanonical = exports.formatTime = exports.formatDateCanonical = exports.durationDates = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.string.pad-start.js");
 var _dateUtils = require("@gravity-ui/date-utils");
 var formatTime = exports.formatTime = function formatTime(date) {
   var _dateTimeParse;
   return (_dateTimeParse = (0, _dateUtils.dateTimeParse)(date)) === null || _dateTimeParse === void 0 ? void 0 : _dateTimeParse.format('HH:mm');
 };
 var durationDates = exports.durationDates = function durationDates(date1, date2) {
-  var _dateTimeParse2;
-  if (!date1 && !date2) return '--:--';
-  var start = (0, _dateUtils.dateTimeParse)(date1) || (0, _dateUtils.dateTime)();
-  var end = (0, _dateUtils.dateTimeParse)(date2) || (0, _dateUtils.dateTime)();
-  var diff = end === null || end === void 0 ? void 0 : end.diff(start);
-  return (_dateTimeParse2 = (0, _dateUtils.dateTimeParse)(diff)) === null || _dateTimeParse2 === void 0 ? void 0 : _dateTimeParse2.format('HH:mm');
+  if (date1 === undefined || date2 === undefined) return '--:--';
+  var start = (0, _dateUtils.dateTimeParse)(date1);
+  var end = (0, _dateUtils.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'));
 };
 var formatTimeCanonical = exports.formatTimeCanonical = function formatTimeCanonical(ts) {
-  var _dateTimeParse3;
-  return (_dateTimeParse3 = (0, _dateUtils.dateTimeParse)(ts)) === null || _dateTimeParse3 === void 0 ? void 0 : _dateTimeParse3.format('DD.MM.YYYY, HH:mm');
+  var _dateTimeParse2;
+  return (_dateTimeParse2 = (0, _dateUtils.dateTimeParse)(ts)) === null || _dateTimeParse2 === void 0 ? void 0 : _dateTimeParse2.format('DD.MM.YYYY, HH:mm');
 };
 var formatDateCanonical = exports.formatDateCanonical = function formatDateCanonical(ts) {
-  var _dateTimeParse4;
-  return (_dateTimeParse4 = (0, _dateUtils.dateTimeParse)(ts)) === null || _dateTimeParse4 === void 0 ? void 0 : _dateTimeParse4.format('DD.MM.YYYY');
+  var _dateTimeParse3;
+  return (_dateTimeParse3 = (0, _dateUtils.dateTimeParse)(ts)) === null || _dateTimeParse3 === void 0 ? void 0 : _dateTimeParse3.format('DD.MM.YYYY');
 };
 var getTimestampFromDate = exports.getTimestampFromDate = function getTimestampFromDate(date) {
-  var _dateTimeParse5;
-  return (_dateTimeParse5 = (0, _dateUtils.dateTimeParse)(date)) === null || _dateTimeParse5 === void 0 ? void 0 : _dateTimeParse5.valueOf();
+  var _dateTimeParse4;
+  return (_dateTimeParse4 = (0, _dateUtils.dateTimeParse)(date)) === null || _dateTimeParse4 === void 0 ? void 0 : _dateTimeParse4.valueOf();
 };
 // #sourceMappingURL=time.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_dateUtils","require","formatTime","exports","date","_dateTimeParse","dateTimeParse","format","durationDates","date1","date2","_dateTimeParse2","start","dateTime","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,IAAAA,UAAA,GAAAC,OAAA;AAIO,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAIE,IAAU,EAAK;EAAA,IAAAC,cAAA;EACtC,QAAAA,cAAA,GAAO,IAAAC,wBAAa,EAACF,IAAI,CAAC,cAAAC,cAAA,uBAAnBA,cAAA,CAAqBE,MAAM,CAAC,OAAO,CAAC;AAC/C,CAAC;AAEM,IAAMC,aAAa,GAAAL,OAAA,CAAAK,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,GAAG,IAAAN,wBAAa,EAACG,KAAK,CAAC,IAAI,IAAAI,mBAAQ,EAAC,CAAC;EAChD,IAAMC,GAAG,GAAG,IAAAR,wBAAa,EAACI,KAAK,CAAC,IAAI,IAAAG,mBAAQ,EAAC,CAAC;EAC9C,IAAME,IAAI,GAAGD,GAAG,aAAHA,GAAG,uBAAHA,GAAG,CAAEC,IAAI,CAACH,KAAK,CAAC;EAE7B,QAAAD,eAAA,GAAO,IAAAL,wBAAa,EAACS,IAAI,CAAC,cAAAJ,eAAA,uBAAnBA,eAAA,CAAqBJ,MAAM,CAAC,OAAO,CAAC;AAC/C,CAAC;AAEM,IAAMS,mBAAmB,GAAAb,OAAA,CAAAa,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAIC,EAAQ,EAAK;EAAA,IAAAC,eAAA;EAC7C,QAAAA,eAAA,GAAO,IAAAZ,wBAAa,EAACW,EAAE,CAAC,cAAAC,eAAA,uBAAjBA,eAAA,CAAmBX,MAAM,CAAC,mBAAmB,CAAC;AACzD,CAAC;AAEM,IAAMY,mBAAmB,GAAAhB,OAAA,CAAAgB,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAIF,EAAQ,EAAK;EAAA,IAAAG,eAAA;EAC7C,QAAAA,eAAA,GAAO,IAAAd,wBAAa,EAACW,EAAE,CAAC,cAAAG,eAAA,uBAAjBA,eAAA,CAAmBb,MAAM,CAAC,YAAY,CAAC;AAClD,CAAC;AAEM,IAAMc,oBAAoB,GAAAlB,OAAA,CAAAkB,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAIjB,IAAU,EAAK;EAAA,IAAAkB,eAAA;EAChD,QAAAA,eAAA,GAAO,IAAAhB,wBAAa,EAACF,IAAI,CAAC,cAAAkB,eAAA,uBAAnBA,eAAA,CAAqBC,OAAO,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}
+{"version":3,"names":["_dateUtils","require","formatTime","exports","date","_dateTimeParse","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,IAAAA,UAAA,GAAAC,OAAA;AAIO,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAIE,IAAU,EAAK;EAAA,IAAAC,cAAA;EACtC,QAAAA,cAAA,GAAO,IAAAC,wBAAa,EAACF,IAAI,CAAC,cAAAC,cAAA,uBAAnBA,cAAA,CAAqBE,MAAM,CAAC,OAAO,CAAC;AAC/C,CAAC;AAEM,IAAMC,aAAa,GAAAL,OAAA,CAAAK,aAAA,GAAG,SAAhBA,aAAaA,CAAIC,KAAW,EAAEC,KAAW,EAAK;EACvD,IAAID,KAAK,KAAKE,SAAS,IAAID,KAAK,KAAKC,SAAS,EAAE,OAAO,OAAO;EAE9D,IAAMC,KAAK,GAAG,IAAAN,wBAAa,EAACG,KAAK,CAAC;EAClC,IAAMI,GAAG,GAAG,IAAAP,wBAAa,EAACI,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;AAEM,IAAMC,mBAAmB,GAAAtB,OAAA,CAAAsB,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAIC,EAAQ,EAAK;EAAA,IAAAC,eAAA;EAC7C,QAAAA,eAAA,GAAO,IAAArB,wBAAa,EAACoB,EAAE,CAAC,cAAAC,eAAA,uBAAjBA,eAAA,CAAmBpB,MAAM,CAAC,mBAAmB,CAAC;AACzD,CAAC;AAEM,IAAMqB,mBAAmB,GAAAzB,OAAA,CAAAyB,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAIF,EAAQ,EAAK;EAAA,IAAAG,eAAA;EAC7C,QAAAA,eAAA,GAAO,IAAAvB,wBAAa,EAACoB,EAAE,CAAC,cAAAG,eAAA,uBAAjBA,eAAA,CAAmBtB,MAAM,CAAC,YAAY,CAAC;AAClD,CAAC;AAEM,IAAMuB,oBAAoB,GAAA3B,OAAA,CAAA2B,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAI1B,IAAU,EAAK;EAAA,IAAA2B,eAAA;EAChD,QAAAA,eAAA,GAAO,IAAAzB,wBAAa,EAACF,IAAI,CAAC,cAAA2B,eAAA,uBAAnBA,eAAA,CAAqBd,OAAO,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}

package/build/cjs/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/cjs/helpers/useListKey.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListKey = void 0;
+require("core-js/modules/es.array.every.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.every.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+var _react = require("react");
+var _getListKey = require("./getListKey");
+var useListKey = exports.useListKey = function useListKey(items, rowVariant, paginationEnabled) {
+  var itemKeys = items.map(_getListKey.getListItemKey);
+  var currentKey = (0, _getListKey.getListKey)(items, rowVariant);
+  var stateRef = (0, _react.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/cjs/helpers/useListKey.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_getListKey","useListKey","exports","items","rowVariant","paginationEnabled","itemKeys","map","getListItemKey","currentKey","getListKey","stateRef","useRef","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAUO,IAAME,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CACnBE,KAAyB,EACzBC,UAA+B,EAC/BC,iBAA0B,EACzB;EACD,IAAMC,QAAQ,GAAGH,KAAK,CAACI,GAAG,CAACC,0BAAc,CAAC;EAC1C,IAAMC,UAAU,GAAG,IAAAC,sBAAU,EAACP,KAAK,EAAEC,UAAU,CAAC;EAChD,IAAMO,QAAQ,GAAG,IAAAC,aAAM,EAA2BC,SAAS,CAAC;EAC5D,IAAMC,aAAa,GAAGH,QAAQ,CAACI,OAAO;EACtC,IAAMC,QAAQ,GACV,CAAAF,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAET,iBAAiB,KAChCS,aAAa,CAACV,UAAU,KAAKA,UAAU,IACvCU,aAAa,CAACR,QAAQ,CAACW,MAAM,IAAIX,QAAQ,CAACW,MAAM,IAChDH,aAAa,CAACR,QAAQ,CAACY,KAAK,CAAC,UAACC,GAAG,EAAEC,KAAK;IAAA,OAAKD,GAAG,KAAKb,QAAQ,CAACc,KAAK,CAAC;EAAA,EAAC;EACzE,IAAMD,GAAG,GAAGd,iBAAiB,IAAIW,QAAQ,GAAGF,aAAa,CAACK,GAAG,GAAGV,UAAU;EAE1EE,QAAQ,CAACI,OAAO,GAAG;IAACI,GAAG,EAAHA,GAAG;IAAEb,QAAQ,EAARA,QAAQ;IAAEF,UAAU,EAAVA,UAAU;IAAEC,iBAAiB,EAAjBA;EAAiB,CAAC;EAEjE,OAAOc,GAAG;AACd,CAAC","ignoreList":[]}

package/build/cjs/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/cjs/helpers/useLoadMoreSentinel.js

@@ -9,18 +9,26 @@ require("core-js/modules/es.iterator.constructor.js");
 require("core-js/modules/es.iterator.some.js");
 require("core-js/modules/es.object.to-string.js");
 var _react = require("react");
-function useLoadMoreSentinel(hasMore, onLoadMore) {
+function useLoadMoreSentinel(hasMore, onLoadMore, loading, itemsCount) {
   var observerRef = (0, _react.useRef)(null);
+  var loadRequestedRef = (0, _react.useRef)(false);
   var hasMoreRef = (0, _react.useRef)(hasMore);
   hasMoreRef.current = hasMore;
   var onLoadMoreRef = (0, _react.useRef)(onLoadMore);
   onLoadMoreRef.current = onLoadMore;
+  var preventRepeatedLoad = loading !== undefined;
   (0, _react.useEffect)(function () {
     return function () {
       var _observerRef$current;
       (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    if (!loading) {
+      // Cached pages can add items without changing the loading state.
+      loadRequestedRef.current = false;
+    }
+  }, [loading, itemsCount]);
   return (0, _react.useCallback)(function (node) {
     var _observerRef$current2;
     (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 || _observerRef$current2.disconnect();
@@ -30,12 +38,13 @@ 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