npm - @gravity-ui/querieskit - Versions diffs - 1.4.0 → 1.5.1 - Mend

@gravity-ui/querieskit 1.4.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/build/cjs/components/AttachmentList/AttachmentList.js CHANGED Viewed

@@ -58,6 +58,7 @@ var AttachmentList = exports.AttachmentList = function AttachmentList(_ref) {
     className: className,
     width: "100%",
     height: "100%",
+    overflow: "auto",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.List, (0, _objectSpread2.default)({
       filterable: false,
       virtualized: false,

package/build/cjs/components/AttachmentList/AttachmentList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireWildcard","require","_uikit","_AttachmentItem","_isInteractiveTarget","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","AttachmentList","exports","_ref","attachments","onEdit","onDelete","onRevert","wasAddedIds","wasEditedIds","editingIds","renderEditForm","className","isDeleted","onItemClick","listProps","_objectWithoutProperties","_excluded","addedIdsSet","useMemo","Set","editedIdsSet","editingIdsSet","handleItemClick","item","index","fromKeyboard","event","id","isInteractiveTarget","target","_jsx","Flex","width","height","children","List","_objectSpread","filterable","virtualized","items","renderItem","attachment","AttachmentItem","wasAdded","wasEdited"],"sources":["AttachmentList.tsx"],"sourcesContent":["import React, {ReactNode, useMemo} from 'react';\nimport {Flex, List, ListProps} from '@gravity-ui/uikit';\nimport {AttachmentItem, AttachmentItemProps} from './internal/AttachmentItem/AttachmentItem';\nimport {isInteractiveTarget} from './helpers/isInteractiveTarget';\nimport './AttachmentList.scss';\n\nexport type AttachmentListProps<\n T extends AttachmentItemProps['attachment'] = AttachmentItemProps['attachment'],\n> = Omit<ListProps<T>, 'items' \| 'selectedItemIndex' \| 'virtualized'> & {\n attachments: AttachmentItemProps['attachment'][];\n className?: string;\n onDelete?: (attachment: AttachmentItemProps['attachment']) => void;\n onEdit?: (attachment: AttachmentItemProps['attachment']) => void;\n onRevert?: (attachment: AttachmentItemProps['attachment']) => void;\n\n renderEditForm?: (attachment: AttachmentItemProps['attachment']) => ReactNode;\n\n wasAddedIds?: string[];\n wasEditedIds?: string[];\n\n editingIds?: string[];\n\n isDeleted?: boolean;\n};\n\nexport const AttachmentList = ({\n attachments,\n onEdit,\n onDelete,\n onRevert,\n wasAddedIds,\n wasEditedIds,\n editingIds,\n renderEditForm,\n className,\n isDeleted,\n onItemClick,\n ...listProps\n}: AttachmentListProps) => {\n const addedIdsSet = useMemo(() => new Set(wasAddedIds), [wasAddedIds]);\n const editedIdsSet = useMemo(() => new Set(wasEditedIds), [wasEditedIds]);\n const editingIdsSet = useMemo(() => new Set(editingIds), [editingIds]);\n\n const handleItemClick: AttachmentListProps['onItemClick'] = (\n item,\n index,\n fromKeyboard,\n event,\n ) => {\n if (editingIdsSet.has(item.id)) return;\n if (isInteractiveTarget(event?.target)) return;\n onItemClick?.(item, index, fromKeyboard, event);\n };\n\n return (\n <Flex className={className} width=\"100%\" height=\"100%\">\n <List<AttachmentListProps['attachments'][number]>\n filterable={false}\n virtualized={false}\n items={attachments}\n onItemClick={handleItemClick}\n renderItem={(attachment) => {\n if (editingIdsSet.has(attachment.id)) {\n return renderEditForm?.(attachment);\n }\n\n return (\n <AttachmentItem\n attachment={attachment}\n wasAdded={addedIdsSet.has(attachment.id)}\n wasEdited={editedIdsSet.has(attachment.id)}\n onEdit={onEdit}\n onRevert={onRevert}\n onDelete={onDelete}\n isDeleted={isDeleted}\n />\n );\n }}\n {...listProps}\n />\n </Flex>\n );\n};\n"],"mappings":"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~~eAClD~~,~~IAAAJ~~,eAAA,~~EAACK~~,WAAI,MAAAC,sBAAA;MACDC,UAAU,EAAE,KAAM;MAClBC,WAAW,EAAE,KAAM;MACnBC,KAAK,~~EAAEpC~~,WAAY;MACnBU,WAAW,EAAES,eAAgB;~~MAC7BkB~~,UAAU,EAAE,SAAZA,UAAUA,CAAGC,UAAU,EAAK;QACxB,~~IAAIpB~~,aAAa,CAAC9B,GAAG,~~CAACkD~~,UAAU,~~CAACd~~,EAAE,CAAC,EAAE;UAClC,OAAOjB,cAAc,aAAdA,cAAc,uBAAdA,cAAc,~~CAAG+B~~,UAAU,CAAC;QACvC;QAEA,oBACI,~~IAAAX~~,eAAA,~~EAACY~~,8BAAc;UACXD,UAAU,EAAEA,UAAW;UACvBE,QAAQ,~~EAAE1B~~,WAAW,CAAC1B,GAAG,~~CAACkD~~,UAAU,~~CAACd~~,EAAE,CAAE;~~UACzCiB~~,SAAS,~~EAAExB~~,YAAY,CAAC7B,GAAG,~~CAACkD~~,UAAU,~~CAACd~~,EAAE,CAAE;UAC3CvB,MAAM,EAAEA,MAAO;UACfE,QAAQ,EAAEA,QAAS;UACnBD,QAAQ,EAAEA,QAAS;UACnBO,SAAS,EAAEA;QAAU,CACxB,CAAC;MAEV;IAAE,GACEE,SAAS,CAChB;EAAC,CACA,CAAC;AAEf,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_react","_interopRequireWildcard","require","_uikit","_AttachmentItem","_isInteractiveTarget","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","AttachmentList","exports","_ref","attachments","onEdit","onDelete","onRevert","wasAddedIds","wasEditedIds","editingIds","renderEditForm","className","isDeleted","onItemClick","listProps","_objectWithoutProperties","_excluded","addedIdsSet","useMemo","Set","editedIdsSet","editingIdsSet","handleItemClick","item","index","fromKeyboard","event","id","isInteractiveTarget","target","_jsx","Flex","width","height","overflow","children","List","_objectSpread","filterable","virtualized","items","renderItem","attachment","AttachmentItem","wasAdded","wasEdited"],"sources":["AttachmentList.tsx"],"sourcesContent":["import React, {ReactNode, useMemo} from 'react';\nimport {Flex, List, ListProps} from '@gravity-ui/uikit';\nimport {AttachmentItem, AttachmentItemProps} from './internal/AttachmentItem/AttachmentItem';\nimport {isInteractiveTarget} from './helpers/isInteractiveTarget';\nimport './AttachmentList.scss';\n\nexport type AttachmentListProps<\n T extends AttachmentItemProps['attachment'] = AttachmentItemProps['attachment'],\n> = Omit<ListProps<T>, 'items' \| 'selectedItemIndex' \| 'virtualized'> & {\n attachments: AttachmentItemProps['attachment'][];\n className?: string;\n onDelete?: (attachment: AttachmentItemProps['attachment']) => void;\n onEdit?: (attachment: AttachmentItemProps['attachment']) => void;\n onRevert?: (attachment: AttachmentItemProps['attachment']) => void;\n\n renderEditForm?: (attachment: AttachmentItemProps['attachment']) => ReactNode;\n\n wasAddedIds?: string[];\n wasEditedIds?: string[];\n\n editingIds?: string[];\n\n isDeleted?: boolean;\n};\n\nexport const AttachmentList = ({\n attachments,\n onEdit,\n onDelete,\n onRevert,\n wasAddedIds,\n wasEditedIds,\n editingIds,\n renderEditForm,\n className,\n isDeleted,\n onItemClick,\n ...listProps\n}: AttachmentListProps) => {\n const addedIdsSet = useMemo(() => new Set(wasAddedIds), [wasAddedIds]);\n const editedIdsSet = useMemo(() => new Set(wasEditedIds), [wasEditedIds]);\n const editingIdsSet = useMemo(() => new Set(editingIds), [editingIds]);\n\n const handleItemClick: AttachmentListProps['onItemClick'] = (\n item,\n index,\n fromKeyboard,\n event,\n ) => {\n if (editingIdsSet.has(item.id)) return;\n if (isInteractiveTarget(event?.target)) return;\n onItemClick?.(item, index, fromKeyboard, event);\n };\n\n return (\n <Flex className={className} width=\"100%\" height=\"100%\" overflow=\"auto\">\n <List<AttachmentListProps['attachments'][number]>\n filterable={false}\n virtualized={false}\n items={attachments}\n onItemClick={handleItemClick}\n renderItem={(attachment) => {\n if (editingIdsSet.has(attachment.id)) {\n return renderEditForm?.(attachment);\n }\n\n return (\n <AttachmentItem\n attachment={attachment}\n wasAdded={addedIdsSet.has(attachment.id)}\n wasEdited={editedIdsSet.has(attachment.id)}\n onEdit={onEdit}\n onRevert={onRevert}\n onDelete={onDelete}\n isDeleted={isDeleted}\n />\n );\n }}\n {...listProps}\n />\n </Flex>\n );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/LazyList/LazyList.css CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
1	+ {"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 CHANGED Viewed

@@ -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;
 };
@@ -41,24 +42,36 @@ var LazyList = exports.LazyList = function LazyList(_ref) {
     isEmpty = _ref.isEmpty,
     className = _ref.className;
   var listRef = (0, _react.useRef)(null);
-  var previousItemsLengthRef = (0, _react.useRef)(items.length);
+  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 previousItemsLength = previousItemsLengthRef.current;
-    if (previousItemsLength !== items.length) {
+    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(previousItemsLength, items.length), true);
-      previousItemsLengthRef.current = items.length;
+      (_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
+      };
     }
-  }, [items.length]);
+  }, [hasMore, items.length, loading]);
   if (error) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
       children: error
@@ -89,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 CHANGED Viewed

	@@ -1 +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","listRef","useRef","previousItemsLengthRef","length","sentinelRef","useLoadMoreSentinel","rows","useMemo","concat","_toConsumableArray","__sentinel","getRowHeight","useLayoutEffect","previousItemsLength","current","_listRef$current","refContainer","resetAfterIndex","Math","min","_jsx","React","Fragment","children","empty","ListSpinner","List","ref","itemsHeight","listRows","reduce","total","isActive","index","_renderItem","_onItemClick"],"sources":["LazyList.tsx"],"sourcesContent":["import React, {useLayoutEffect, useMemo, useRef} 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 listRef = useRef<List<LazyListRow<T>>>(null);\n const previousItemsLengthRef = useRef(items.length);\n const sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore, loading, items.length);\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 useLayoutEffect(() => {\n const previousItemsLength = previousItemsLengthRef.current;\n\n if (previousItemsLength !== items.length) {\n listRef.current?.refContainer.current?.resetAfterIndex(\n Math.min(previousItemsLength, items.length),\n true,\n );\n previousItemsLengthRef.current = items.length;\n }\n }, [items.length]);\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 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":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AACAA,OAAA;AAAyB,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAD,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAQ,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAL,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAEzB,IAAMmB,KAAK,GAAG,IAAAC,kBAAE,EAAC,cAAc,CAAC;AAEhC,IAAMC,mBAAmB,GAAG,CAAC;AAK7B,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAQC,GAAmB;EAAA,OAC1CC,OAAO,CAACD,GAAG,CAAC,IAAI,IAAAE,gBAAA,EAAOF,GAAG,MAAK,QAAQ,IAAI,YAAY,IAAKA,GAAc;AAAA;AAkBvE,IAAMG,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,SAAXA,QAAQA,CAAAE,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,GAAG,IAAAC,aAAM,EAAuB,IAAI,CAAC;EAClD,IAAMC,sBAAsB,GAAG,IAAAD,aAAM,EAACf,KAAK,CAACiB,MAAM,CAAC;EACnD,IAAMC,WAAW,GAAG,IAAAC,wCAAmB,EAAChB,OAAO,EAAEC,UAAU,EAAEK,OAAO,EAAET,KAAK,CAACiB,MAAM,CAAC;EAEnF,IAAMG,IAAsB,GAAG,IAAAC,cAAO,EAClC;IAAA,OAAOlB,OAAO,MAAAmB,MAAA,KAAAC,2BAAA,EAAOvB,KAAK,IAAE;MAACwB,UAAU,EAAE;IAAI,CAAC,KAAIxB,KAAK;EAAA,CAAC,EACxD,CAACA,KAAK,EAAEG,OAAO,CACnB,CAAC;EAED,IAAMsB,YAAY,GAAG,SAAfA,YAAYA,CAAI/B,GAAmB;IAAA,OACrCD,aAAa,CAACC,GAAG,CAAC,GAAGF,mBAAmB,GAAGS,UAAU,CAACP,GAAG,CAAC;EAAA;EAE9D,IAAAgC,sBAAe,EAAC,YAAM;IAClB,IAAMC,mBAAmB,GAAGX,sBAAsB,CAACY,OAAO;IAE1D,IAAID,mBAAmB,KAAK3B,KAAK,CAACiB,MAAM,EAAE;MAAA,IAAAY,gBAAA;MACtC,CAAAA,gBAAA,GAAAf,OAAO,CAACc,OAAO,cAAAC,gBAAA,gBAAAA,gBAAA,GAAfA,gBAAA,CAAiBC,YAAY,CAACF,OAAO,cAAAC,gBAAA,eAArCA,gBAAA,CAAuCE,eAAe,CAClDC,IAAI,CAACC,GAAG,CAACN,mBAAmB,EAAE3B,KAAK,CAACiB,MAAM,CAAC,EAC3C,IACJ,CAAC;MACDD,sBAAsB,CAACY,OAAO,GAAG5B,KAAK,CAACiB,MAAM;IACjD;EACJ,CAAC,EAAE,CAACjB,KAAK,CAACiB,MAAM,CAAC,CAAC;EAElB,IAAIP,KAAK,EAAE;IACP,oBAAO,IAAAwB,eAAA,EAACC,cAAK,CAACC,QAAQ;MAAAC,QAAA,EAAE3B;IAAK,CAAiB,CAAC;EACnD;EAEA,IAAM4B,KAAK,GAAG1B,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,CAACZ,KAAK,CAACiB,MAAM;EAEtC,IAAIR,OAAO,IAAI6B,KAAK,EAAE;IAClB,oBAAO,IAAAJ,eAAA,EAACK,wBAAW;MAAC1B,SAAS,EAAEvB,KAAK,CAAC,SAAS,EAAEuB,SAAS;IAAE,CAAE,CAAC;EAClE;EAEA,IAAIyB,KAAK,EAAE;IACP,oBAAO,IAAAJ,eAAA,EAACC,cAAK,CAACC,QAAQ;MAAAC,QAAA,EAAE1B;IAAY,CAAiB,CAAC;EAC1D;EAEA,oBACI,IAAAuB,eAAA,EAACM,WAAI;IACDC,GAAG,EAAE3B,OAAQ;IACbD,SAAS,EAAEvB,KAAK,CAAC,IAAI,EAAEuB,SAAS,CAAE;IAClCL,UAAU,EAAEA,UAAW;IACvBR,KAAK,EAAEoB,IAAK;IACZnB,UAAU,EAAEwB,YAAa;IACzBiB,WAAW,EAAE,SAAbA,WAAWA,CAAGC,QAAQ;MAAA,OAClBA,QAAQ,CAACC,MAAM,CAAC,UAACC,KAAK,EAAEnD,GAAG;QAAA,OAAKmD,KAAK,GAAGpB,YAAY,CAAC/B,GAAG,CAAC;MAAA,GAAE,CAAC,CAAC;IAAA,CAChE;IACDQ,UAAU,EAAE,SAAZA,UAAUA,CAAGR,GAAG,EAAEoD,QAAQ,EAAEC,KAAK;MAAA,OAC7BtD,aAAa,CAACC,GAAG,CAAC,gBACd,IAAAwC,eAAA;QAAKO,GAAG,EAAEvB,WAAY;QAACL,SAAS,EAAEvB,KAAK,CAAC,UAAU;MAAE,CAAE,CAAC,GAEvD0D,WAAU,CAACtD,GAAG,EAAEoD,QAAQ,EAAEC,KAAK,CAClC;IAAA,CACJ;IACDzC,iBAAiB,EAAEA,iBAA2B;IAC9CD,WAAW,EAAE,SAAbA,WAAWA,CAAGX,GAAG,EAAEqD,KAAK,EAAK;MACzB,IAAI,CAACtD,aAAa,CAACC,GAAG,CAAC,EAAE;QACrBuD,YAAW,aAAXA,YAAW,eAAXA,YAAW,CAAGvD,GAAG,EAAEqD,KAAK,CAAC;MAC7B;IACJ;EAAE,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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 <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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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/helpers/time.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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/modules/Attachments/Attachments.css CHANGED Viewed

@@ -1,5 +1,12 @@
+.qp-attachments {
+  display: flex;
+  flex-direction: column;
+}
 .qp-attachments__panel {
-  flex: 1;
+  flex: 1 1 0;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
 }
 .qp-attachments__tab .g-tab__title {
   display: flex;
@@ -8,5 +15,10 @@
 .qp-attachments__tab-list {
   padding-left: var(--g-spacing-4);
   padding-right: var(--g-spacing-4);
+  flex-shrink: 0;
+}
+.qp-attachments__list {
+  min-height: 0;
+  overflow-y: auto;
 }
 /*# sourceMappingURL=Attachments.css.map */

package/build/cjs/modules/Attachments/Attachments.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Attachments.scss"],"names":[],"mappings":"AACI;EACI,~~OAAA~~;~~AAAR~~;~~AAGI~~;EACI,aAAA;EACA,uBAAA;~~AADR~~;~~AAII~~;EACI,gCAAA;EACA,iCAAA;AAFR","file":"Attachments.css","sourcesContent":[".qp-attachments {\n &__panel {\n flex: 1;\n }\n\n &__tab .g-tab__title {\n display: flex;\n gap: var(--g-spacing-2)\n }\n\n &__tab-list {\n padding-left: var(--g-spacing-4);\n padding-right: var(--g-spacing-4);\n }\n}"],"sourceRoot":""}
1	+ {"version":3,"sources":["Attachments.scss"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,sBAAA;AACJ;AACI;EACI,WAAA;EACA,aAAA;EACA,gBAAA;EACA,gBAAA;AACR;AAEI;EACI,aAAA;EACA,uBAAA;AAAR;AAGI;EACI,gCAAA;EACA,iCAAA;EACA,cAAA;AADR;AAII;EACI,aAAA;EACA,gBAAA;AAFR","file":"Attachments.css","sourcesContent":[".qp-attachments {\n display: flex;\n flex-direction: column;\n \n &__panel {\n flex: 1 1 0;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n }\n\n &__tab .g-tab__title {\n display: flex;\n gap: var(--g-spacing-2)\n }\n\n &__tab-list {\n padding-left: var(--g-spacing-4);\n padding-right: var(--g-spacing-4);\n flex-shrink: 0;\n }\n\n &__list {\n min-height: 0;\n overflow-y: auto;\n }\n}"],"sourceRoot":""}

package/build/cjs/modules/Attachments/Attachments.js CHANGED Viewed

@@ -253,11 +253,10 @@ var Attachments = exports.Attachments = function Attachments(_ref) {
       deletedAttachments: patchDeletedAttachList
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Flex, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Box, {
     className: block(),
-    direction: "column",
-    width: "100%",
     height: "100%",
+    overflow: "hidden",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.TabProvider, {
       value: currentTab,
       onUpdate: function onUpdate(tab) {
@@ -293,11 +292,12 @@ var Attachments = exports.Attachments = function Attachments(_ref) {
         value: "Current",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
           spacing: {
-            pt: 3
+            py: 3
           },
           direction: "column",
           width: "100%",
           height: "100%",
+          gap: 3,
           children: [attachList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AttachmentList, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attachmentListProps), {}, {
             attachments: attachList,
             wasAddedIds: wasAddedIds,