@veeqo/ui 15.14.1 → 15.15.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.
- package/dist/components/DataTable/components/DataTable.module.scss.cjs +2 -2
- package/dist/components/DataTable/components/DataTable.module.scss.cjs.map +1 -1
- package/dist/components/DataTable/components/DataTable.module.scss.js +2 -2
- package/dist/components/DataTable/components/DataTable.module.scss.js.map +1 -1
- package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs +2 -2
- package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs.map +1 -1
- package/dist/components/ViewsContainer/ViewsContainer.module.scss.js +2 -2
- package/dist/components/ViewsContainer/ViewsContainer.module.scss.js.map +1 -1
- package/dist/components/ViewsContainer/constants.cjs +16 -0
- package/dist/components/ViewsContainer/constants.cjs.map +1 -0
- package/dist/components/ViewsContainer/constants.d.ts +8 -0
- package/dist/components/ViewsContainer/constants.js +11 -0
- package/dist/components/ViewsContainer/constants.js.map +1 -0
- package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs +8 -8
- package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs.map +1 -1
- package/dist/components/ViewsContainer/hooks/useSetScrollPosition.js +8 -8
- package/dist/components/ViewsContainer/hooks/useSetScrollPosition.js.map +1 -1
- package/dist/components/ViewsContainer/utils.cjs +15 -17
- package/dist/components/ViewsContainer/utils.cjs.map +1 -1
- package/dist/components/ViewsContainer/utils.d.ts +5 -7
- package/dist/components/ViewsContainer/utils.js +15 -17
- package/dist/components/ViewsContainer/utils.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n.
|
|
6
|
-
var styles = {"scrollContainer":"
|
|
5
|
+
___$insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n._scrollContainer_uiqwq_3 {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n._noWrap_uiqwq_11 {\n white-space: nowrap;\n}\n\n/* Truncate */\n._truncate_uiqwq_16 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n._loadingCellContent_uiqwq_23 {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(to right, var(--colors-neutral-grey-base) 0%, var(--colors-neutral-grey-dark) 20%, var(--colors-neutral-grey-base) 40%, var(--colors-neutral-grey-base) 100%);\n background-repeat: no-repeat;\n background-size: 800px 104px;\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: _placeholderShimmer_uiqwq_1;\n animation-timing-function: linear;\n}\n\n@keyframes _placeholderShimmer_uiqwq_1 {\n 0% {\n background-position: -468px 0;\n }\n 100% {\n background-position: 468px 0;\n }\n}\n/* EmptyBodyContent */\n._emptyBodyContent_uiqwq_47 {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1/span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n._emptyBodyGlyphWrapper_uiqwq_58 {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n._cell_uiqwq_65 {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n grid-column-end: span var(--cell-span, 1);\n}\ntfoot ._cell_uiqwq_65 {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n/* Header */\n._header_uiqwq_89 {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n._row_uiqwq_104 {\n display: contents;\n}\n\n/* Selected rows must beat two higher-specificity rules that also paint the\n cell background:\n - striping: [data-table-id] tr:nth-child(odd) > td (0,2,2), injected per table by generateTableCss\n - hover: .tableGrid.tableGrid tr:hover td (0,3,2), defined below\n Doubling the class selectors lifts this rule to (0,4,2) so selection always\n wins, regardless of source order. Mirrors the pre-CSS-Modules `&&&& > td` (0,4,1). */\n._tableGrid_uiqwq_111._tableGrid_uiqwq_111 tr._rowSelected_uiqwq_114._rowSelected_uiqwq_114 > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n._rowAccentColor_uiqwq_118 > *:first-child {\n position: relative;\n}\n\n._rowAccentColor_uiqwq_118 > *:first-child::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n._wrapper_uiqwq_133 {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n}\n._wrapper_uiqwq_133, ._wrapper_uiqwq_133 * {\n box-sizing: border-box;\n}\n._wrapper_uiqwq_133 .hideHeaderDetails th > * {\n opacity: 0.1;\n}\n._wrapper_uiqwq_133 .hideHeaderDetails th .th-divider {\n opacity: 1;\n}\n\n._borderFull_uiqwq_149 {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n._borderVertical_uiqwq_154 {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n._borderNone_uiqwq_160 {\n border-width: 0;\n}\n\n/* TableGrid */\n._tableGrid_uiqwq_111 {\n min-width: 100%;\n width: max-content;\n display: grid;\n --density: var(--sizes-base);\n}\n._tableGrid_uiqwq_111 thead, ._tableGrid_uiqwq_111 tbody, ._tableGrid_uiqwq_111 tfoot {\n display: contents;\n}\n\n._tableGrid_uiqwq_111._tableGrid_uiqwq_111 tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n._sortIndicator_uiqwq_181 {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n._headerContent_uiqwq_191 {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n._clickableHeaderContent_uiqwq_205 {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n}\n._clickableHeaderContent_uiqwq_205:not(:disabled):hover {\n cursor: pointer;\n}\n._clickableHeaderContent_uiqwq_205:hover ._sortIndicator_uiqwq_181 {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n}\n._clickableHeaderContent_uiqwq_205:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n}\n\n/* ColumnDivider ResizerBar */\n._resizerBar_uiqwq_236 {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n}\n._resizerBar_uiqwq_236::before {\n content: \"\";\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n}\n\n/* ActionBar */\n._actionBarContainer_uiqwq_258 {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n._actionBarContent_uiqwq_271 {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._actionBarContent_uiqwq_271 > * {\n flex: 1;\n}");
|
|
6
|
+
var styles = {"scrollContainer":"_scrollContainer_uiqwq_3","noWrap":"_noWrap_uiqwq_11","truncate":"_truncate_uiqwq_16","loadingCellContent":"_loadingCellContent_uiqwq_23","emptyBodyContent":"_emptyBodyContent_uiqwq_47","emptyBodyGlyphWrapper":"_emptyBodyGlyphWrapper_uiqwq_58","cell":"_cell_uiqwq_65","header":"_header_uiqwq_89","row":"_row_uiqwq_104","tableGrid":"_tableGrid_uiqwq_111","rowSelected":"_rowSelected_uiqwq_114","rowAccentColor":"_rowAccentColor_uiqwq_118","wrapper":"_wrapper_uiqwq_133","borderFull":"_borderFull_uiqwq_149","borderVertical":"_borderVertical_uiqwq_154","borderNone":"_borderNone_uiqwq_160","sortIndicator":"_sortIndicator_uiqwq_181","headerContent":"_headerContent_uiqwq_191","clickableHeaderContent":"_clickableHeaderContent_uiqwq_205","resizerBar":"_resizerBar_uiqwq_236","actionBarContainer":"_actionBarContainer_uiqwq_258","actionBarContent":"_actionBarContent_uiqwq_271"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=DataTable.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.module.scss.cjs","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(\n to right,\n var(--colors-neutral-grey-base) 0%,\n var(--colors-neutral-grey-dark) 20%,\n var(--colors-neutral-grey-base) 40%,\n var(--colors-neutral-grey-base) 100%\n );\n background-repeat: no-repeat;\n background-size: 800px 104px;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholderShimmer;\n animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1 / span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n grid-column-end: span var(--cell-span, 1);\n\n tfoot & {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n/* Header */\n.header {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n display: contents;\n}\n\n.rowSelected > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n &,\n & * {\n box-sizing: border-box;\n }\n\n :global(.hideHeaderDetails) th {\n > * {\n opacity: 0.1;\n }\n\n :global(.th-divider) {\n opacity: 1;\n }\n }\n}\n\n.borderFull {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n.borderVertical {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n.borderNone {\n border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n min-width: 100%;\n width: max-content;\n display: grid;\n\n & thead,\n & tbody,\n & tfoot {\n display: contents;\n }\n\n --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover .sortIndicator {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n}\n\n/* ActionBar */\n.actionBarContainer {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n.actionBarContent {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n & > * {\n flex: 1;\n }\n}\n"],"names":[],"mappings":";;;;AAEA,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"DataTable.module.scss.cjs","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(\n to right,\n var(--colors-neutral-grey-base) 0%,\n var(--colors-neutral-grey-dark) 20%,\n var(--colors-neutral-grey-base) 40%,\n var(--colors-neutral-grey-base) 100%\n );\n background-repeat: no-repeat;\n background-size: 800px 104px;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholderShimmer;\n animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1 / span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n grid-column-end: span var(--cell-span, 1);\n\n tfoot & {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n/* Header */\n.header {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n display: contents;\n}\n\n/* Selected rows must beat two higher-specificity rules that also paint the\n cell background:\n - striping: [data-table-id] tr:nth-child(odd) > td (0,2,2), injected per table by generateTableCss\n - hover: .tableGrid.tableGrid tr:hover td (0,3,2), defined below\n Doubling the class selectors lifts this rule to (0,4,2) so selection always\n wins, regardless of source order. Mirrors the pre-CSS-Modules `&&&& > td` (0,4,1). */\n.tableGrid.tableGrid tr.rowSelected.rowSelected > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n &,\n & * {\n box-sizing: border-box;\n }\n\n :global(.hideHeaderDetails) th {\n > * {\n opacity: 0.1;\n }\n\n :global(.th-divider) {\n opacity: 1;\n }\n }\n}\n\n.borderFull {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n.borderVertical {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n.borderNone {\n border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n min-width: 100%;\n width: max-content;\n display: grid;\n\n & thead,\n & tbody,\n & tfoot {\n display: contents;\n }\n\n --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover .sortIndicator {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n}\n\n/* ActionBar */\n.actionBarContainer {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n.actionBarContent {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n & > * {\n flex: 1;\n }\n}\n"],"names":[],"mappings":";;;;AAEA,eAAA,CAAA,iyOAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,6BAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n.
|
|
4
|
-
var styles = {"scrollContainer":"
|
|
3
|
+
insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n._scrollContainer_uiqwq_3 {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n._noWrap_uiqwq_11 {\n white-space: nowrap;\n}\n\n/* Truncate */\n._truncate_uiqwq_16 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n._loadingCellContent_uiqwq_23 {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(to right, var(--colors-neutral-grey-base) 0%, var(--colors-neutral-grey-dark) 20%, var(--colors-neutral-grey-base) 40%, var(--colors-neutral-grey-base) 100%);\n background-repeat: no-repeat;\n background-size: 800px 104px;\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: _placeholderShimmer_uiqwq_1;\n animation-timing-function: linear;\n}\n\n@keyframes _placeholderShimmer_uiqwq_1 {\n 0% {\n background-position: -468px 0;\n }\n 100% {\n background-position: 468px 0;\n }\n}\n/* EmptyBodyContent */\n._emptyBodyContent_uiqwq_47 {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1/span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n._emptyBodyGlyphWrapper_uiqwq_58 {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n._cell_uiqwq_65 {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n grid-column-end: span var(--cell-span, 1);\n}\ntfoot ._cell_uiqwq_65 {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n/* Header */\n._header_uiqwq_89 {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n._row_uiqwq_104 {\n display: contents;\n}\n\n/* Selected rows must beat two higher-specificity rules that also paint the\n cell background:\n - striping: [data-table-id] tr:nth-child(odd) > td (0,2,2), injected per table by generateTableCss\n - hover: .tableGrid.tableGrid tr:hover td (0,3,2), defined below\n Doubling the class selectors lifts this rule to (0,4,2) so selection always\n wins, regardless of source order. Mirrors the pre-CSS-Modules `&&&& > td` (0,4,1). */\n._tableGrid_uiqwq_111._tableGrid_uiqwq_111 tr._rowSelected_uiqwq_114._rowSelected_uiqwq_114 > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n._rowAccentColor_uiqwq_118 > *:first-child {\n position: relative;\n}\n\n._rowAccentColor_uiqwq_118 > *:first-child::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n._wrapper_uiqwq_133 {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n}\n._wrapper_uiqwq_133, ._wrapper_uiqwq_133 * {\n box-sizing: border-box;\n}\n._wrapper_uiqwq_133 .hideHeaderDetails th > * {\n opacity: 0.1;\n}\n._wrapper_uiqwq_133 .hideHeaderDetails th .th-divider {\n opacity: 1;\n}\n\n._borderFull_uiqwq_149 {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n._borderVertical_uiqwq_154 {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n._borderNone_uiqwq_160 {\n border-width: 0;\n}\n\n/* TableGrid */\n._tableGrid_uiqwq_111 {\n min-width: 100%;\n width: max-content;\n display: grid;\n --density: var(--sizes-base);\n}\n._tableGrid_uiqwq_111 thead, ._tableGrid_uiqwq_111 tbody, ._tableGrid_uiqwq_111 tfoot {\n display: contents;\n}\n\n._tableGrid_uiqwq_111._tableGrid_uiqwq_111 tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n._sortIndicator_uiqwq_181 {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n._headerContent_uiqwq_191 {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n._clickableHeaderContent_uiqwq_205 {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n}\n._clickableHeaderContent_uiqwq_205:not(:disabled):hover {\n cursor: pointer;\n}\n._clickableHeaderContent_uiqwq_205:hover ._sortIndicator_uiqwq_181 {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n}\n._clickableHeaderContent_uiqwq_205:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n}\n\n/* ColumnDivider ResizerBar */\n._resizerBar_uiqwq_236 {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n}\n._resizerBar_uiqwq_236::before {\n content: \"\";\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n}\n\n/* ActionBar */\n._actionBarContainer_uiqwq_258 {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n._actionBarContent_uiqwq_271 {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._actionBarContent_uiqwq_271 > * {\n flex: 1;\n}");
|
|
4
|
+
var styles = {"scrollContainer":"_scrollContainer_uiqwq_3","noWrap":"_noWrap_uiqwq_11","truncate":"_truncate_uiqwq_16","loadingCellContent":"_loadingCellContent_uiqwq_23","emptyBodyContent":"_emptyBodyContent_uiqwq_47","emptyBodyGlyphWrapper":"_emptyBodyGlyphWrapper_uiqwq_58","cell":"_cell_uiqwq_65","header":"_header_uiqwq_89","row":"_row_uiqwq_104","tableGrid":"_tableGrid_uiqwq_111","rowSelected":"_rowSelected_uiqwq_114","rowAccentColor":"_rowAccentColor_uiqwq_118","wrapper":"_wrapper_uiqwq_133","borderFull":"_borderFull_uiqwq_149","borderVertical":"_borderVertical_uiqwq_154","borderNone":"_borderNone_uiqwq_160","sortIndicator":"_sortIndicator_uiqwq_181","headerContent":"_headerContent_uiqwq_191","clickableHeaderContent":"_clickableHeaderContent_uiqwq_205","resizerBar":"_resizerBar_uiqwq_236","actionBarContainer":"_actionBarContainer_uiqwq_258","actionBarContent":"_actionBarContent_uiqwq_271"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=DataTable.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.module.scss.js","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(\n to right,\n var(--colors-neutral-grey-base) 0%,\n var(--colors-neutral-grey-dark) 20%,\n var(--colors-neutral-grey-base) 40%,\n var(--colors-neutral-grey-base) 100%\n );\n background-repeat: no-repeat;\n background-size: 800px 104px;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholderShimmer;\n animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1 / span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n grid-column-end: span var(--cell-span, 1);\n\n tfoot & {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n/* Header */\n.header {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n display: contents;\n}\n\n.rowSelected > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n &,\n & * {\n box-sizing: border-box;\n }\n\n :global(.hideHeaderDetails) th {\n > * {\n opacity: 0.1;\n }\n\n :global(.th-divider) {\n opacity: 1;\n }\n }\n}\n\n.borderFull {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n.borderVertical {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n.borderNone {\n border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n min-width: 100%;\n width: max-content;\n display: grid;\n\n & thead,\n & tbody,\n & tfoot {\n display: contents;\n }\n\n --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover .sortIndicator {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n}\n\n/* ActionBar */\n.actionBarContainer {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n.actionBarContent {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n & > * {\n flex: 1;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEAA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"DataTable.module.scss.js","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(\n to right,\n var(--colors-neutral-grey-base) 0%,\n var(--colors-neutral-grey-dark) 20%,\n var(--colors-neutral-grey-base) 40%,\n var(--colors-neutral-grey-base) 100%\n );\n background-repeat: no-repeat;\n background-size: 800px 104px;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholderShimmer;\n animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1 / span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n grid-column-end: span var(--cell-span, 1);\n\n tfoot & {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n/* Header */\n.header {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n display: contents;\n}\n\n/* Selected rows must beat two higher-specificity rules that also paint the\n cell background:\n - striping: [data-table-id] tr:nth-child(odd) > td (0,2,2), injected per table by generateTableCss\n - hover: .tableGrid.tableGrid tr:hover td (0,3,2), defined below\n Doubling the class selectors lifts this rule to (0,4,2) so selection always\n wins, regardless of source order. Mirrors the pre-CSS-Modules `&&&& > td` (0,4,1). */\n.tableGrid.tableGrid tr.rowSelected.rowSelected > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n &,\n & * {\n box-sizing: border-box;\n }\n\n :global(.hideHeaderDetails) th {\n > * {\n opacity: 0.1;\n }\n\n :global(.th-divider) {\n opacity: 1;\n }\n }\n}\n\n.borderFull {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n.borderVertical {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n.borderNone {\n border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n min-width: 100%;\n width: max-content;\n display: grid;\n\n & thead,\n & tbody,\n & tfoot {\n display: contents;\n }\n\n --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover .sortIndicator {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n}\n\n/* ActionBar */\n.actionBarContainer {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n.actionBarContent {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n & > * {\n flex: 1;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEAA,WAAA,CAAA,iyOAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,6BAAA;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"viewsWrapper":"
|
|
5
|
+
___$insertStyle("._viewsWrapper_1bexx_1 {\n position: relative; /* Required for offset positioning of scroll position */\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm);\n margin-left: -6px;\n}\n._viewsWrapper_1bexx_1 ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1bexx_1._compact_1bexx_13 {\n padding: var(--sizes-xs);\n}\n\n._appearance-primary_1bexx_17 {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1bexx_21 {\n background-color: white !important;\n border-radius: var(--sizes-sm);\n}\n._menuButton_1bexx_21:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1bexx_29 {\n background-color: white !important;\n}\n._scrollButton_1bexx_29:disabled {\n background-color: white !important;\n}\n._scrollButton_1bexx_29:disabled svg {\n color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1bexx_29:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1bexx_42 {\n padding-right: var(--sizes-sm);\n}");
|
|
6
|
+
var styles = {"viewsWrapper":"_viewsWrapper_1bexx_1","compact":"_compact_1bexx_13","appearance-primary":"_appearance-primary_1bexx_17","menuButton":"_menuButton_1bexx_21","scrollButton":"_scrollButton_1bexx_29","buttonGroup":"_buttonGroup_1bexx_42"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=ViewsContainer.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewsContainer.module.scss.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n\n ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm)
|
|
1
|
+
{"version":3,"file":"ViewsContainer.module.scss.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n position: relative; /* Required for offset positioning of scroll position */\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n\n ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm);\n margin-left: -6px;\n\n &.compact {\n padding: var(--sizes-xs);\n }\n}\n\n.appearance-primary {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n background-color: white !important;\n border-radius: var(--sizes-sm);\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n background-color: white !important;\n\n &:disabled {\n background-color: white !important;\n & svg {\n color: var(--colors-neutral-ink-lightest);\n }\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n.buttonGroup {\n padding-right: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+qCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"viewsWrapper":"
|
|
3
|
+
insertStyle("._viewsWrapper_1bexx_1 {\n position: relative; /* Required for offset positioning of scroll position */\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm);\n margin-left: -6px;\n}\n._viewsWrapper_1bexx_1 ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1bexx_1._compact_1bexx_13 {\n padding: var(--sizes-xs);\n}\n\n._appearance-primary_1bexx_17 {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1bexx_21 {\n background-color: white !important;\n border-radius: var(--sizes-sm);\n}\n._menuButton_1bexx_21:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1bexx_29 {\n background-color: white !important;\n}\n._scrollButton_1bexx_29:disabled {\n background-color: white !important;\n}\n._scrollButton_1bexx_29:disabled svg {\n color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1bexx_29:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1bexx_42 {\n padding-right: var(--sizes-sm);\n}");
|
|
4
|
+
var styles = {"viewsWrapper":"_viewsWrapper_1bexx_1","compact":"_compact_1bexx_13","appearance-primary":"_appearance-primary_1bexx_17","menuButton":"_menuButton_1bexx_21","scrollButton":"_scrollButton_1bexx_29","buttonGroup":"_buttonGroup_1bexx_42"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=ViewsContainer.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewsContainer.module.scss.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n\n ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm)
|
|
1
|
+
{"version":3,"file":"ViewsContainer.module.scss.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n position: relative; /* Required for offset positioning of scroll position */\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n\n ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm);\n margin-left: -6px;\n\n &.compact {\n padding: var(--sizes-xs);\n }\n}\n\n.appearance-primary {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n background-color: white !important;\n border-radius: var(--sizes-sm);\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n background-color: white !important;\n\n &:disabled {\n background-color: white !important;\n & svg {\n color: var(--colors-neutral-ink-lightest);\n }\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n.buttonGroup {\n padding-right: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+qCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/** Number of tabs the arrow buttons advance by per click. */
|
|
4
|
+
const TABS_PER_SCROLL_STEP = 3;
|
|
5
|
+
/** Left offset applied to scroll targets so tabs don't butt up against the container edge. */
|
|
6
|
+
const TAB_SCROLL_LEFT_OFFSET_PX = 20;
|
|
7
|
+
/** Floating-point tolerance for detecting the end of the scroll range. */
|
|
8
|
+
const SCROLL_END_TOLERANCE_PX = 10;
|
|
9
|
+
/** Tolerance for the resize handler deciding whether the strip still overflows. */
|
|
10
|
+
const RESIZE_OVERFLOW_TOLERANCE_PX = 5;
|
|
11
|
+
|
|
12
|
+
exports.RESIZE_OVERFLOW_TOLERANCE_PX = RESIZE_OVERFLOW_TOLERANCE_PX;
|
|
13
|
+
exports.SCROLL_END_TOLERANCE_PX = SCROLL_END_TOLERANCE_PX;
|
|
14
|
+
exports.TABS_PER_SCROLL_STEP = TABS_PER_SCROLL_STEP;
|
|
15
|
+
exports.TAB_SCROLL_LEFT_OFFSET_PX = TAB_SCROLL_LEFT_OFFSET_PX;
|
|
16
|
+
//# sourceMappingURL=constants.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.cjs","sources":["../../../src/components/ViewsContainer/constants.ts"],"sourcesContent":["/** Number of tabs the arrow buttons advance by per click. */\nexport const TABS_PER_SCROLL_STEP = 3;\n\n/** Left offset applied to scroll targets so tabs don't butt up against the container edge. */\nexport const TAB_SCROLL_LEFT_OFFSET_PX = 20;\n\n/** Floating-point tolerance for detecting the end of the scroll range. */\nexport const SCROLL_END_TOLERANCE_PX = 10;\n\n/** Tolerance for the resize handler deciding whether the strip still overflows. */\nexport const RESIZE_OVERFLOW_TOLERANCE_PX = 5;\n"],"names":[],"mappings":";;AAAA;AACO,MAAM,oBAAoB,GAAG;AAEpC;AACO,MAAM,yBAAyB,GAAG;AAEzC;AACO,MAAM,uBAAuB,GAAG;AAEvC;AACO,MAAM,4BAA4B,GAAG;;;;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/** Number of tabs the arrow buttons advance by per click. */
|
|
2
|
+
export declare const TABS_PER_SCROLL_STEP = 3;
|
|
3
|
+
/** Left offset applied to scroll targets so tabs don't butt up against the container edge. */
|
|
4
|
+
export declare const TAB_SCROLL_LEFT_OFFSET_PX = 20;
|
|
5
|
+
/** Floating-point tolerance for detecting the end of the scroll range. */
|
|
6
|
+
export declare const SCROLL_END_TOLERANCE_PX = 10;
|
|
7
|
+
/** Tolerance for the resize handler deciding whether the strip still overflows. */
|
|
8
|
+
export declare const RESIZE_OVERFLOW_TOLERANCE_PX = 5;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/** Number of tabs the arrow buttons advance by per click. */
|
|
2
|
+
const TABS_PER_SCROLL_STEP = 3;
|
|
3
|
+
/** Left offset applied to scroll targets so tabs don't butt up against the container edge. */
|
|
4
|
+
const TAB_SCROLL_LEFT_OFFSET_PX = 20;
|
|
5
|
+
/** Floating-point tolerance for detecting the end of the scroll range. */
|
|
6
|
+
const SCROLL_END_TOLERANCE_PX = 10;
|
|
7
|
+
/** Tolerance for the resize handler deciding whether the strip still overflows. */
|
|
8
|
+
const RESIZE_OVERFLOW_TOLERANCE_PX = 5;
|
|
9
|
+
|
|
10
|
+
export { RESIZE_OVERFLOW_TOLERANCE_PX, SCROLL_END_TOLERANCE_PX, TABS_PER_SCROLL_STEP, TAB_SCROLL_LEFT_OFFSET_PX };
|
|
11
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../src/components/ViewsContainer/constants.ts"],"sourcesContent":["/** Number of tabs the arrow buttons advance by per click. */\nexport const TABS_PER_SCROLL_STEP = 3;\n\n/** Left offset applied to scroll targets so tabs don't butt up against the container edge. */\nexport const TAB_SCROLL_LEFT_OFFSET_PX = 20;\n\n/** Floating-point tolerance for detecting the end of the scroll range. */\nexport const SCROLL_END_TOLERANCE_PX = 10;\n\n/** Tolerance for the resize handler deciding whether the strip still overflows. */\nexport const RESIZE_OVERFLOW_TOLERANCE_PX = 5;\n"],"names":[],"mappings":"AAAA;AACO,MAAM,oBAAoB,GAAG;AAEpC;AACO,MAAM,yBAAyB,GAAG;AAEzC;AACO,MAAM,uBAAuB,GAAG;AAEvC;AACO,MAAM,4BAA4B,GAAG;;;;"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var utils = require('../utils.cjs');
|
|
5
|
+
var constants = require('../constants.cjs');
|
|
5
6
|
|
|
6
7
|
function usePrevious(value) {
|
|
7
8
|
const ref = React.useRef(undefined);
|
|
@@ -31,8 +32,8 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
|
|
|
31
32
|
const maxScrollWidth = (_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.scrollWidth) !== null && _d !== void 0 ? _d : 0;
|
|
32
33
|
const maxClientWidth = (_f = (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 0;
|
|
33
34
|
const maxScrollLeft = maxScrollWidth - maxClientWidth;
|
|
34
|
-
//
|
|
35
|
-
if (((_g = containerRef.current) === null || _g === void 0 ? void 0 : _g.scrollLeft) >= maxScrollLeft -
|
|
35
|
+
// Tolerance prevents javascript assertion errors on floating points
|
|
36
|
+
if (((_g = containerRef.current) === null || _g === void 0 ? void 0 : _g.scrollLeft) >= maxScrollLeft - constants.SCROLL_END_TOLERANCE_PX) {
|
|
36
37
|
if (document.getElementById('right-arrow') === document.activeElement) {
|
|
37
38
|
(_h = document.getElementById('left-arrow')) === null || _h === void 0 ? void 0 : _h.focus();
|
|
38
39
|
}
|
|
@@ -50,7 +51,8 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
|
|
|
50
51
|
const handleResize = React.useCallback(() => {
|
|
51
52
|
if (!containerRef.current)
|
|
52
53
|
return;
|
|
53
|
-
if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width <
|
|
54
|
+
if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width <
|
|
55
|
+
constants.RESIZE_OVERFLOW_TOLERANCE_PX) {
|
|
54
56
|
setRightDisabled(true);
|
|
55
57
|
}
|
|
56
58
|
else {
|
|
@@ -82,7 +84,7 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
|
|
|
82
84
|
}, [containerRef, viewStartPositions.length]);
|
|
83
85
|
// Handle new item addition - scroll to end and update positions
|
|
84
86
|
React.useEffect(() => {
|
|
85
|
-
var _a, _b
|
|
87
|
+
var _a, _b;
|
|
86
88
|
if (!((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length))
|
|
87
89
|
return;
|
|
88
90
|
const childrenCount = containerRef.current.children.length;
|
|
@@ -96,10 +98,8 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
|
|
|
96
98
|
top: 0,
|
|
97
99
|
behavior: 'smooth',
|
|
98
100
|
});
|
|
99
|
-
//
|
|
100
|
-
|
|
101
|
-
const newPosition = viewStartPositions[positionsCount - 1] + ((_d = lastChildRect === null || lastChildRect === void 0 ? void 0 : lastChildRect.x) !== null && _d !== void 0 ? _d : 0) - 20;
|
|
102
|
-
setViewStartPositions([...viewStartPositions, newPosition]);
|
|
101
|
+
// Recompute positions from container-relative offsets (VQCL-8250).
|
|
102
|
+
setViewStartPositions(utils.createViewPositionArray(containerRef.current));
|
|
103
103
|
}, [containerRef, children, viewStartPositions]);
|
|
104
104
|
// Handle active tab changes - scroll to active tab
|
|
105
105
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSetScrollPosition.cjs","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import {\n MutableRefObject,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n Children,\n} from 'react';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\n\nfunction usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T | undefined>(undefined);\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n}\n\ntype UseSetScrollPositionProps = {\n containerRef: MutableRefObject<HTMLDivElement>;\n children: ReactNode;\n hasMoreViews?: boolean;\n onFetchMoreViews?: () => void;\n isLoadingMoreViews?: boolean;\n};\n\nexport const useSetScrollPosition = ({\n containerRef,\n children,\n hasMoreViews = false,\n onFetchMoreViews,\n isLoadingMoreViews = false,\n}: UseSetScrollPositionProps) => {\n const [leftDisabled, setLeftDisabled] = useState(true);\n const [rightDisabled, setRightDisabled] = useState(false);\n const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n const prevActiveTab = usePrevious(activeTab);\n\n const handleScroll = useCallback(() => {\n if (containerRef.current?.scrollLeft > 0) {\n setLeftDisabled(false);\n } else {\n if (document.getElementById('left-arrow') === document.activeElement) {\n document.getElementById('right-arrow')?.focus();\n }\n setLeftDisabled(true);\n }\n\n const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n // -10 to prevent javascript assertion errors on floating points\n if (containerRef.current?.scrollLeft >= maxScrollLeft - 10) {\n if (document.getElementById('right-arrow') === document.activeElement) {\n document.getElementById('left-arrow')?.focus();\n }\n setRightDisabled(true);\n\n // Check if we've reached the end and should fetch more data\n // Only fetches more when not already loading more views and has more views to load\n if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {\n onFetchMoreViews();\n }\n } else {\n setRightDisabled(false);\n }\n }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);\n\n const handleResize = useCallback(() => {\n if (!containerRef.current) return;\n if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {\n setRightDisabled(true);\n } else {\n setRightDisabled(false);\n }\n }, [containerRef]);\n\n const toNextScrollPosition = useCallback(() => {\n const newPosition = getNextViewPosition(\n viewStartPositions,\n containerRef.current.scrollLeft,\n containerRef.current.clientWidth,\n );\n\n containerRef.current.scrollTo({\n left: newPosition,\n top: 0,\n behavior: 'smooth',\n });\n }, [containerRef, viewStartPositions]);\n\n const toPrevScrollPosition = useCallback(() => {\n const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n containerRef.current.scrollTo({\n left: newPosition,\n top: 0,\n behavior: 'smooth',\n });\n }, [containerRef, viewStartPositions]);\n\n // Initialize view positions when container first has children\n useEffect(() => {\n if (!containerRef?.current?.children?.length || viewStartPositions.length > 0) return;\n\n setViewStartPositions(createViewPositionArray(containerRef.current));\n }, [containerRef, viewStartPositions.length]);\n\n // Handle new item addition - scroll to end and update positions\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n\n const childrenCount = containerRef.current.children.length;\n const positionsCount = viewStartPositions.length;\n const totalChildren = Children.count(children);\n\n const shouldScrollToNewItem =\n childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;\n\n if (!shouldScrollToNewItem) return;\n\n containerRef.current.scrollTo({\n left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n top: 0,\n behavior: 'smooth',\n });\n\n // Compute the x position of the new item\n const lastChildRect =\n containerRef.current.children[positionsCount - 1]?.getBoundingClientRect();\n const newPosition = viewStartPositions[positionsCount - 1] + (lastChildRect?.x ?? 0) - 20;\n\n setViewStartPositions([...viewStartPositions, newPosition]);\n }, [containerRef, children, viewStartPositions]);\n\n // Handle active tab changes - scroll to active tab\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n if (activeTab === prevActiveTab || activeTab === null) return;\n if (containerRef.current.children.length !== viewStartPositions.length) return;\n\n const index = Array.from(containerRef.current.children).indexOf(activeTab);\n if (index === -1) return;\n\n containerRef.current.scrollTo({\n left: viewStartPositions[index],\n top: 0,\n behavior: 'smooth',\n });\n }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);\n\n // Handle fetching more views - recompute positions\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n if (viewStartPositions.length >= containerRef.current.children.length) return;\n\n const currentScrollLeft = containerRef.current.scrollLeft;\n\n // Temporarily reset scroll to 0 to get accurate positions\n containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });\n\n // Recompute positions from scroll position 0\n setViewStartPositions(createViewPositionArray(containerRef.current));\n\n // Restore the user's scroll position\n containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });\n }, [containerRef, viewStartPositions.length]);\n\n // Handle window resize and scroll event listeners\n useEffect(() => {\n if (!containerRef?.current) return;\n\n const container = containerRef.current;\n\n handleResize();\n window.addEventListener('resize', handleResize);\n container.addEventListener('scroll', handleScroll);\n\n // eslint-disable-next-line consistent-return\n return () => {\n window.removeEventListener('resize', handleResize);\n container.removeEventListener('scroll', handleScroll);\n };\n }, [containerRef, handleResize, handleScroll]);\n\n return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":["useRef","useEffect","useState","useCallback","getNextViewPosition","getPrevViewPosition","createViewPositionArray","Children"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSetScrollPosition.cjs","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import {\n MutableRefObject,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n Children,\n} from 'react';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\nimport { RESIZE_OVERFLOW_TOLERANCE_PX, SCROLL_END_TOLERANCE_PX } from '../constants';\n\nfunction usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T | undefined>(undefined);\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n}\n\ntype UseSetScrollPositionProps = {\n containerRef: MutableRefObject<HTMLDivElement>;\n children: ReactNode;\n hasMoreViews?: boolean;\n onFetchMoreViews?: () => void;\n isLoadingMoreViews?: boolean;\n};\n\nexport const useSetScrollPosition = ({\n containerRef,\n children,\n hasMoreViews = false,\n onFetchMoreViews,\n isLoadingMoreViews = false,\n}: UseSetScrollPositionProps) => {\n const [leftDisabled, setLeftDisabled] = useState(true);\n const [rightDisabled, setRightDisabled] = useState(false);\n const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n const prevActiveTab = usePrevious(activeTab);\n\n const handleScroll = useCallback(() => {\n if (containerRef.current?.scrollLeft > 0) {\n setLeftDisabled(false);\n } else {\n if (document.getElementById('left-arrow') === document.activeElement) {\n document.getElementById('right-arrow')?.focus();\n }\n setLeftDisabled(true);\n }\n\n const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n // Tolerance prevents javascript assertion errors on floating points\n if (containerRef.current?.scrollLeft >= maxScrollLeft - SCROLL_END_TOLERANCE_PX) {\n if (document.getElementById('right-arrow') === document.activeElement) {\n document.getElementById('left-arrow')?.focus();\n }\n setRightDisabled(true);\n\n // Check if we've reached the end and should fetch more data\n // Only fetches more when not already loading more views and has more views to load\n if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {\n onFetchMoreViews();\n }\n } else {\n setRightDisabled(false);\n }\n }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);\n\n const handleResize = useCallback(() => {\n if (!containerRef.current) return;\n if (\n containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width <\n RESIZE_OVERFLOW_TOLERANCE_PX\n ) {\n setRightDisabled(true);\n } else {\n setRightDisabled(false);\n }\n }, [containerRef]);\n\n const toNextScrollPosition = useCallback(() => {\n const newPosition = getNextViewPosition(\n viewStartPositions,\n containerRef.current.scrollLeft,\n containerRef.current.clientWidth,\n );\n\n containerRef.current.scrollTo({\n left: newPosition,\n top: 0,\n behavior: 'smooth',\n });\n }, [containerRef, viewStartPositions]);\n\n const toPrevScrollPosition = useCallback(() => {\n const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n containerRef.current.scrollTo({\n left: newPosition,\n top: 0,\n behavior: 'smooth',\n });\n }, [containerRef, viewStartPositions]);\n\n // Initialize view positions when container first has children\n useEffect(() => {\n if (!containerRef?.current?.children?.length || viewStartPositions.length > 0) return;\n\n setViewStartPositions(createViewPositionArray(containerRef.current));\n }, [containerRef, viewStartPositions.length]);\n\n // Handle new item addition - scroll to end and update positions\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n\n const childrenCount = containerRef.current.children.length;\n const positionsCount = viewStartPositions.length;\n const totalChildren = Children.count(children);\n\n const shouldScrollToNewItem =\n childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;\n\n if (!shouldScrollToNewItem) return;\n\n containerRef.current.scrollTo({\n left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n top: 0,\n behavior: 'smooth',\n });\n\n // Recompute positions from container-relative offsets (VQCL-8250).\n setViewStartPositions(createViewPositionArray(containerRef.current));\n }, [containerRef, children, viewStartPositions]);\n\n // Handle active tab changes - scroll to active tab\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n if (activeTab === prevActiveTab || activeTab === null) return;\n if (containerRef.current.children.length !== viewStartPositions.length) return;\n\n const index = Array.from(containerRef.current.children).indexOf(activeTab);\n if (index === -1) return;\n\n containerRef.current.scrollTo({\n left: viewStartPositions[index],\n top: 0,\n behavior: 'smooth',\n });\n }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);\n\n // Handle fetching more views - recompute positions\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n if (viewStartPositions.length >= containerRef.current.children.length) return;\n\n const currentScrollLeft = containerRef.current.scrollLeft;\n\n // Temporarily reset scroll to 0 to get accurate positions\n containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });\n\n // Recompute positions from scroll position 0\n setViewStartPositions(createViewPositionArray(containerRef.current));\n\n // Restore the user's scroll position\n containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });\n }, [containerRef, viewStartPositions.length]);\n\n // Handle window resize and scroll event listeners\n useEffect(() => {\n if (!containerRef?.current) return;\n\n const container = containerRef.current;\n\n handleResize();\n window.addEventListener('resize', handleResize);\n container.addEventListener('scroll', handleScroll);\n\n // eslint-disable-next-line consistent-return\n return () => {\n window.removeEventListener('resize', handleResize);\n container.removeEventListener('scroll', handleScroll);\n };\n }, [containerRef, handleResize, handleScroll]);\n\n return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":["useRef","useEffect","useState","useCallback","SCROLL_END_TOLERANCE_PX","RESIZE_OVERFLOW_TOLERANCE_PX","getNextViewPosition","getPrevViewPosition","createViewPositionArray","Children"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useState, useCallback, useEffect, Children, useRef } from 'react';
|
|
2
2
|
import { getNextViewPosition, getPrevViewPosition, createViewPositionArray } from '../utils.js';
|
|
3
|
+
import { SCROLL_END_TOLERANCE_PX, RESIZE_OVERFLOW_TOLERANCE_PX } from '../constants.js';
|
|
3
4
|
|
|
4
5
|
function usePrevious(value) {
|
|
5
6
|
const ref = useRef(undefined);
|
|
@@ -29,8 +30,8 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
|
|
|
29
30
|
const maxScrollWidth = (_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.scrollWidth) !== null && _d !== void 0 ? _d : 0;
|
|
30
31
|
const maxClientWidth = (_f = (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 0;
|
|
31
32
|
const maxScrollLeft = maxScrollWidth - maxClientWidth;
|
|
32
|
-
//
|
|
33
|
-
if (((_g = containerRef.current) === null || _g === void 0 ? void 0 : _g.scrollLeft) >= maxScrollLeft -
|
|
33
|
+
// Tolerance prevents javascript assertion errors on floating points
|
|
34
|
+
if (((_g = containerRef.current) === null || _g === void 0 ? void 0 : _g.scrollLeft) >= maxScrollLeft - SCROLL_END_TOLERANCE_PX) {
|
|
34
35
|
if (document.getElementById('right-arrow') === document.activeElement) {
|
|
35
36
|
(_h = document.getElementById('left-arrow')) === null || _h === void 0 ? void 0 : _h.focus();
|
|
36
37
|
}
|
|
@@ -48,7 +49,8 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
|
|
|
48
49
|
const handleResize = useCallback(() => {
|
|
49
50
|
if (!containerRef.current)
|
|
50
51
|
return;
|
|
51
|
-
if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width <
|
|
52
|
+
if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width <
|
|
53
|
+
RESIZE_OVERFLOW_TOLERANCE_PX) {
|
|
52
54
|
setRightDisabled(true);
|
|
53
55
|
}
|
|
54
56
|
else {
|
|
@@ -80,7 +82,7 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
|
|
|
80
82
|
}, [containerRef, viewStartPositions.length]);
|
|
81
83
|
// Handle new item addition - scroll to end and update positions
|
|
82
84
|
useEffect(() => {
|
|
83
|
-
var _a, _b
|
|
85
|
+
var _a, _b;
|
|
84
86
|
if (!((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length))
|
|
85
87
|
return;
|
|
86
88
|
const childrenCount = containerRef.current.children.length;
|
|
@@ -94,10 +96,8 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
|
|
|
94
96
|
top: 0,
|
|
95
97
|
behavior: 'smooth',
|
|
96
98
|
});
|
|
97
|
-
//
|
|
98
|
-
|
|
99
|
-
const newPosition = viewStartPositions[positionsCount - 1] + ((_d = lastChildRect === null || lastChildRect === void 0 ? void 0 : lastChildRect.x) !== null && _d !== void 0 ? _d : 0) - 20;
|
|
100
|
-
setViewStartPositions([...viewStartPositions, newPosition]);
|
|
99
|
+
// Recompute positions from container-relative offsets (VQCL-8250).
|
|
100
|
+
setViewStartPositions(createViewPositionArray(containerRef.current));
|
|
101
101
|
}, [containerRef, children, viewStartPositions]);
|
|
102
102
|
// Handle active tab changes - scroll to active tab
|
|
103
103
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSetScrollPosition.js","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import {\n MutableRefObject,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n Children,\n} from 'react';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\n\nfunction usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T | undefined>(undefined);\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n}\n\ntype UseSetScrollPositionProps = {\n containerRef: MutableRefObject<HTMLDivElement>;\n children: ReactNode;\n hasMoreViews?: boolean;\n onFetchMoreViews?: () => void;\n isLoadingMoreViews?: boolean;\n};\n\nexport const useSetScrollPosition = ({\n containerRef,\n children,\n hasMoreViews = false,\n onFetchMoreViews,\n isLoadingMoreViews = false,\n}: UseSetScrollPositionProps) => {\n const [leftDisabled, setLeftDisabled] = useState(true);\n const [rightDisabled, setRightDisabled] = useState(false);\n const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n const prevActiveTab = usePrevious(activeTab);\n\n const handleScroll = useCallback(() => {\n if (containerRef.current?.scrollLeft > 0) {\n setLeftDisabled(false);\n } else {\n if (document.getElementById('left-arrow') === document.activeElement) {\n document.getElementById('right-arrow')?.focus();\n }\n setLeftDisabled(true);\n }\n\n const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n // -10 to prevent javascript assertion errors on floating points\n if (containerRef.current?.scrollLeft >= maxScrollLeft - 10) {\n if (document.getElementById('right-arrow') === document.activeElement) {\n document.getElementById('left-arrow')?.focus();\n }\n setRightDisabled(true);\n\n // Check if we've reached the end and should fetch more data\n // Only fetches more when not already loading more views and has more views to load\n if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {\n onFetchMoreViews();\n }\n } else {\n setRightDisabled(false);\n }\n }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);\n\n const handleResize = useCallback(() => {\n if (!containerRef.current) return;\n if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {\n setRightDisabled(true);\n } else {\n setRightDisabled(false);\n }\n }, [containerRef]);\n\n const toNextScrollPosition = useCallback(() => {\n const newPosition = getNextViewPosition(\n viewStartPositions,\n containerRef.current.scrollLeft,\n containerRef.current.clientWidth,\n );\n\n containerRef.current.scrollTo({\n left: newPosition,\n top: 0,\n behavior: 'smooth',\n });\n }, [containerRef, viewStartPositions]);\n\n const toPrevScrollPosition = useCallback(() => {\n const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n containerRef.current.scrollTo({\n left: newPosition,\n top: 0,\n behavior: 'smooth',\n });\n }, [containerRef, viewStartPositions]);\n\n // Initialize view positions when container first has children\n useEffect(() => {\n if (!containerRef?.current?.children?.length || viewStartPositions.length > 0) return;\n\n setViewStartPositions(createViewPositionArray(containerRef.current));\n }, [containerRef, viewStartPositions.length]);\n\n // Handle new item addition - scroll to end and update positions\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n\n const childrenCount = containerRef.current.children.length;\n const positionsCount = viewStartPositions.length;\n const totalChildren = Children.count(children);\n\n const shouldScrollToNewItem =\n childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;\n\n if (!shouldScrollToNewItem) return;\n\n containerRef.current.scrollTo({\n left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n top: 0,\n behavior: 'smooth',\n });\n\n // Compute the x position of the new item\n const lastChildRect =\n containerRef.current.children[positionsCount - 1]?.getBoundingClientRect();\n const newPosition = viewStartPositions[positionsCount - 1] + (lastChildRect?.x ?? 0) - 20;\n\n setViewStartPositions([...viewStartPositions, newPosition]);\n }, [containerRef, children, viewStartPositions]);\n\n // Handle active tab changes - scroll to active tab\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n if (activeTab === prevActiveTab || activeTab === null) return;\n if (containerRef.current.children.length !== viewStartPositions.length) return;\n\n const index = Array.from(containerRef.current.children).indexOf(activeTab);\n if (index === -1) return;\n\n containerRef.current.scrollTo({\n left: viewStartPositions[index],\n top: 0,\n behavior: 'smooth',\n });\n }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);\n\n // Handle fetching more views - recompute positions\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n if (viewStartPositions.length >= containerRef.current.children.length) return;\n\n const currentScrollLeft = containerRef.current.scrollLeft;\n\n // Temporarily reset scroll to 0 to get accurate positions\n containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });\n\n // Recompute positions from scroll position 0\n setViewStartPositions(createViewPositionArray(containerRef.current));\n\n // Restore the user's scroll position\n containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });\n }, [containerRef, viewStartPositions.length]);\n\n // Handle window resize and scroll event listeners\n useEffect(() => {\n if (!containerRef?.current) return;\n\n const container = containerRef.current;\n\n handleResize();\n window.addEventListener('resize', handleResize);\n container.addEventListener('scroll', handleScroll);\n\n // eslint-disable-next-line consistent-return\n return () => {\n window.removeEventListener('resize', handleResize);\n container.removeEventListener('scroll', handleScroll);\n };\n }, [containerRef, handleResize, handleScroll]);\n\n return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSetScrollPosition.js","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import {\n MutableRefObject,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n Children,\n} from 'react';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\nimport { RESIZE_OVERFLOW_TOLERANCE_PX, SCROLL_END_TOLERANCE_PX } from '../constants';\n\nfunction usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T | undefined>(undefined);\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n}\n\ntype UseSetScrollPositionProps = {\n containerRef: MutableRefObject<HTMLDivElement>;\n children: ReactNode;\n hasMoreViews?: boolean;\n onFetchMoreViews?: () => void;\n isLoadingMoreViews?: boolean;\n};\n\nexport const useSetScrollPosition = ({\n containerRef,\n children,\n hasMoreViews = false,\n onFetchMoreViews,\n isLoadingMoreViews = false,\n}: UseSetScrollPositionProps) => {\n const [leftDisabled, setLeftDisabled] = useState(true);\n const [rightDisabled, setRightDisabled] = useState(false);\n const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n const prevActiveTab = usePrevious(activeTab);\n\n const handleScroll = useCallback(() => {\n if (containerRef.current?.scrollLeft > 0) {\n setLeftDisabled(false);\n } else {\n if (document.getElementById('left-arrow') === document.activeElement) {\n document.getElementById('right-arrow')?.focus();\n }\n setLeftDisabled(true);\n }\n\n const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n // Tolerance prevents javascript assertion errors on floating points\n if (containerRef.current?.scrollLeft >= maxScrollLeft - SCROLL_END_TOLERANCE_PX) {\n if (document.getElementById('right-arrow') === document.activeElement) {\n document.getElementById('left-arrow')?.focus();\n }\n setRightDisabled(true);\n\n // Check if we've reached the end and should fetch more data\n // Only fetches more when not already loading more views and has more views to load\n if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {\n onFetchMoreViews();\n }\n } else {\n setRightDisabled(false);\n }\n }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);\n\n const handleResize = useCallback(() => {\n if (!containerRef.current) return;\n if (\n containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width <\n RESIZE_OVERFLOW_TOLERANCE_PX\n ) {\n setRightDisabled(true);\n } else {\n setRightDisabled(false);\n }\n }, [containerRef]);\n\n const toNextScrollPosition = useCallback(() => {\n const newPosition = getNextViewPosition(\n viewStartPositions,\n containerRef.current.scrollLeft,\n containerRef.current.clientWidth,\n );\n\n containerRef.current.scrollTo({\n left: newPosition,\n top: 0,\n behavior: 'smooth',\n });\n }, [containerRef, viewStartPositions]);\n\n const toPrevScrollPosition = useCallback(() => {\n const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n containerRef.current.scrollTo({\n left: newPosition,\n top: 0,\n behavior: 'smooth',\n });\n }, [containerRef, viewStartPositions]);\n\n // Initialize view positions when container first has children\n useEffect(() => {\n if (!containerRef?.current?.children?.length || viewStartPositions.length > 0) return;\n\n setViewStartPositions(createViewPositionArray(containerRef.current));\n }, [containerRef, viewStartPositions.length]);\n\n // Handle new item addition - scroll to end and update positions\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n\n const childrenCount = containerRef.current.children.length;\n const positionsCount = viewStartPositions.length;\n const totalChildren = Children.count(children);\n\n const shouldScrollToNewItem =\n childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;\n\n if (!shouldScrollToNewItem) return;\n\n containerRef.current.scrollTo({\n left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n top: 0,\n behavior: 'smooth',\n });\n\n // Recompute positions from container-relative offsets (VQCL-8250).\n setViewStartPositions(createViewPositionArray(containerRef.current));\n }, [containerRef, children, viewStartPositions]);\n\n // Handle active tab changes - scroll to active tab\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n if (activeTab === prevActiveTab || activeTab === null) return;\n if (containerRef.current.children.length !== viewStartPositions.length) return;\n\n const index = Array.from(containerRef.current.children).indexOf(activeTab);\n if (index === -1) return;\n\n containerRef.current.scrollTo({\n left: viewStartPositions[index],\n top: 0,\n behavior: 'smooth',\n });\n }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);\n\n // Handle fetching more views - recompute positions\n useEffect(() => {\n if (!containerRef?.current?.children?.length) return;\n if (viewStartPositions.length >= containerRef.current.children.length) return;\n\n const currentScrollLeft = containerRef.current.scrollLeft;\n\n // Temporarily reset scroll to 0 to get accurate positions\n containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });\n\n // Recompute positions from scroll position 0\n setViewStartPositions(createViewPositionArray(containerRef.current));\n\n // Restore the user's scroll position\n containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });\n }, [containerRef, viewStartPositions.length]);\n\n // Handle window resize and scroll event listeners\n useEffect(() => {\n if (!containerRef?.current) return;\n\n const container = containerRef.current;\n\n handleResize();\n window.addEventListener('resize', handleResize);\n container.addEventListener('scroll', handleScroll);\n\n // eslint-disable-next-line consistent-return\n return () => {\n window.removeEventListener('resize', handleResize);\n container.removeEventListener('scroll', handleScroll);\n };\n }, [containerRef, handleResize, handleScroll]);\n\n return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,45 +1,43 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
*/
|
|
3
|
+
var constants = require('./constants.cjs');
|
|
4
|
+
|
|
5
|
+
/** Next scroll value `TABS_PER_SCROLL_STEP` tabs forward of the current position. */
|
|
6
6
|
const getNextViewPosition = (viewPositionsArray, currentScroll, containerWidth) => {
|
|
7
7
|
// eslint-disable-next-line no-plusplus
|
|
8
8
|
for (let i = 0; i < viewPositionsArray.length; i++) {
|
|
9
|
-
if (viewPositionsArray[i +
|
|
9
|
+
if (viewPositionsArray[i + constants.TABS_PER_SCROLL_STEP] === undefined) {
|
|
10
10
|
return currentScroll - containerWidth;
|
|
11
11
|
}
|
|
12
12
|
if (viewPositionsArray[i] >= currentScroll) {
|
|
13
|
-
return viewPositionsArray[i +
|
|
13
|
+
return viewPositionsArray[i + constants.TABS_PER_SCROLL_STEP];
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
return currentScroll - containerWidth;
|
|
16
|
+
return currentScroll - containerWidth;
|
|
17
17
|
};
|
|
18
|
-
/**
|
|
19
|
-
* A function to get the 3rd previous scoll value using an array of start positions
|
|
20
|
-
*/
|
|
18
|
+
/** Previous scroll value `TABS_PER_SCROLL_STEP` tabs back from the current position. */
|
|
21
19
|
const getPrevViewPosition = (viewPositionsArray, currentScroll) => {
|
|
22
20
|
const reverseArray = viewPositionsArray.slice().reverse();
|
|
23
21
|
// eslint-disable-next-line no-plusplus
|
|
24
22
|
for (let i = 0; i < viewPositionsArray.length; i++) {
|
|
25
|
-
if (reverseArray[i +
|
|
23
|
+
if (reverseArray[i + constants.TABS_PER_SCROLL_STEP] === undefined) {
|
|
26
24
|
return 0;
|
|
27
25
|
}
|
|
28
26
|
if (reverseArray[i] < currentScroll) {
|
|
29
|
-
return reverseArray[i +
|
|
27
|
+
return reverseArray[i + constants.TABS_PER_SCROLL_STEP];
|
|
30
28
|
}
|
|
31
29
|
}
|
|
32
|
-
return 0;
|
|
30
|
+
return 0;
|
|
33
31
|
};
|
|
34
32
|
/**
|
|
35
|
-
*
|
|
33
|
+
* Produces an array of x positions of child elements relative to the scroll
|
|
34
|
+
* container, valid as `scrollLeft` targets. Requires `.viewsWrapper` to be
|
|
35
|
+
* `position: relative` so it acts as the children's offsetParent (VQCL-8250).
|
|
36
36
|
*/
|
|
37
37
|
const createViewPositionArray = (containerRef) => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return el.getBoundingClientRect().x - 20;
|
|
38
|
+
return Object.values(containerRef.children).map((el) => {
|
|
39
|
+
return Math.max(0, el.offsetLeft - constants.TAB_SCROLL_LEFT_OFFSET_PX);
|
|
41
40
|
});
|
|
42
|
-
return viewPositions;
|
|
43
41
|
};
|
|
44
42
|
|
|
45
43
|
exports.createViewPositionArray = createViewPositionArray;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../../src/components/ViewsContainer/utils.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../src/components/ViewsContainer/utils.ts"],"sourcesContent":["import { TABS_PER_SCROLL_STEP, TAB_SCROLL_LEFT_OFFSET_PX } from './constants';\n\n/** Next scroll value `TABS_PER_SCROLL_STEP` tabs forward of the current position. */\nexport const getNextViewPosition = (\n viewPositionsArray: number[],\n currentScroll: number,\n containerWidth: number,\n) => {\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < viewPositionsArray.length; i++) {\n if (viewPositionsArray[i + TABS_PER_SCROLL_STEP] === undefined) {\n return currentScroll - containerWidth;\n }\n if (viewPositionsArray[i] >= currentScroll) {\n return viewPositionsArray[i + TABS_PER_SCROLL_STEP];\n }\n }\n return currentScroll - containerWidth;\n};\n\n/** Previous scroll value `TABS_PER_SCROLL_STEP` tabs back from the current position. */\nexport const getPrevViewPosition = (viewPositionsArray: any[], currentScroll: number) => {\n const reverseArray = viewPositionsArray.slice().reverse();\n\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < viewPositionsArray.length; i++) {\n if (reverseArray[i + TABS_PER_SCROLL_STEP] === undefined) {\n return 0;\n }\n if (reverseArray[i] < currentScroll) {\n return reverseArray[i + TABS_PER_SCROLL_STEP];\n }\n }\n return 0;\n};\n\n/**\n * Produces an array of x positions of child elements relative to the scroll\n * container, valid as `scrollLeft` targets. Requires `.viewsWrapper` to be\n * `position: relative` so it acts as the children's offsetParent (VQCL-8250).\n */\nexport const createViewPositionArray = (containerRef: HTMLDivElement) => {\n return Object.values(containerRef.children).map((el) => {\n return Math.max(0, (el as HTMLElement).offsetLeft - TAB_SCROLL_LEFT_OFFSET_PX);\n });\n};\n"],"names":["TABS_PER_SCROLL_STEP","TAB_SCROLL_LEFT_OFFSET_PX"],"mappings":";;;;AAEA;AACO,MAAM,mBAAmB,GAAG,CACjC,kBAA4B,EAC5B,aAAqB,EACrB,cAAsB,KACpB;;AAEF,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAClD,IAAI,kBAAkB,CAAC,CAAC,GAAGA,8BAAoB,CAAC,KAAK,SAAS,EAAE;YAC9D,OAAO,aAAa,GAAG,cAAc;AACtC,QAAA;AACD,QAAA,IAAI,kBAAkB,CAAC,CAAC,CAAC,IAAI,aAAa,EAAE;AAC1C,YAAA,OAAO,kBAAkB,CAAC,CAAC,GAAGA,8BAAoB,CAAC;AACpD,QAAA;AACF,IAAA;IACD,OAAO,aAAa,GAAG,cAAc;AACvC;AAEA;MACa,mBAAmB,GAAG,CAAC,kBAAyB,EAAE,aAAqB,KAAI;IACtF,MAAM,YAAY,GAAG,kBAAkB,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE;;AAGzD,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAClD,IAAI,YAAY,CAAC,CAAC,GAAGA,8BAAoB,CAAC,KAAK,SAAS,EAAE;AACxD,YAAA,OAAO,CAAC;AACT,QAAA;AACD,QAAA,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE;AACnC,YAAA,OAAO,YAAY,CAAC,CAAC,GAAGA,8BAAoB,CAAC;AAC9C,QAAA;AACF,IAAA;AACD,IAAA,OAAO,CAAC;AACV;AAEA;;;;AAIG;AACI,MAAM,uBAAuB,GAAG,CAAC,YAA4B,KAAI;AACtE,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAI;AACrD,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,EAAkB,CAAC,UAAU,GAAGC,mCAAyB,CAAC;AAChF,IAAA,CAAC,CAAC;AACJ;;;;;;"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A function to get the 3rd next scroll value using an array of start positions
|
|
3
|
-
*/
|
|
1
|
+
/** Next scroll value `TABS_PER_SCROLL_STEP` tabs forward of the current position. */
|
|
4
2
|
export declare const getNextViewPosition: (viewPositionsArray: number[], currentScroll: number, containerWidth: number) => number;
|
|
5
|
-
/**
|
|
6
|
-
* A function to get the 3rd previous scoll value using an array of start positions
|
|
7
|
-
*/
|
|
3
|
+
/** Previous scroll value `TABS_PER_SCROLL_STEP` tabs back from the current position. */
|
|
8
4
|
export declare const getPrevViewPosition: (viewPositionsArray: any[], currentScroll: number) => any;
|
|
9
5
|
/**
|
|
10
|
-
*
|
|
6
|
+
* Produces an array of x positions of child elements relative to the scroll
|
|
7
|
+
* container, valid as `scrollLeft` targets. Requires `.viewsWrapper` to be
|
|
8
|
+
* `position: relative` so it acts as the children's offsetParent (VQCL-8250).
|
|
11
9
|
*/
|
|
12
10
|
export declare const createViewPositionArray: (containerRef: HTMLDivElement) => number[];
|
|
@@ -1,43 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*/
|
|
1
|
+
import { TABS_PER_SCROLL_STEP, TAB_SCROLL_LEFT_OFFSET_PX } from './constants.js';
|
|
2
|
+
|
|
3
|
+
/** Next scroll value `TABS_PER_SCROLL_STEP` tabs forward of the current position. */
|
|
4
4
|
const getNextViewPosition = (viewPositionsArray, currentScroll, containerWidth) => {
|
|
5
5
|
// eslint-disable-next-line no-plusplus
|
|
6
6
|
for (let i = 0; i < viewPositionsArray.length; i++) {
|
|
7
|
-
if (viewPositionsArray[i +
|
|
7
|
+
if (viewPositionsArray[i + TABS_PER_SCROLL_STEP] === undefined) {
|
|
8
8
|
return currentScroll - containerWidth;
|
|
9
9
|
}
|
|
10
10
|
if (viewPositionsArray[i] >= currentScroll) {
|
|
11
|
-
return viewPositionsArray[i +
|
|
11
|
+
return viewPositionsArray[i + TABS_PER_SCROLL_STEP];
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
-
return currentScroll - containerWidth;
|
|
14
|
+
return currentScroll - containerWidth;
|
|
15
15
|
};
|
|
16
|
-
/**
|
|
17
|
-
* A function to get the 3rd previous scoll value using an array of start positions
|
|
18
|
-
*/
|
|
16
|
+
/** Previous scroll value `TABS_PER_SCROLL_STEP` tabs back from the current position. */
|
|
19
17
|
const getPrevViewPosition = (viewPositionsArray, currentScroll) => {
|
|
20
18
|
const reverseArray = viewPositionsArray.slice().reverse();
|
|
21
19
|
// eslint-disable-next-line no-plusplus
|
|
22
20
|
for (let i = 0; i < viewPositionsArray.length; i++) {
|
|
23
|
-
if (reverseArray[i +
|
|
21
|
+
if (reverseArray[i + TABS_PER_SCROLL_STEP] === undefined) {
|
|
24
22
|
return 0;
|
|
25
23
|
}
|
|
26
24
|
if (reverseArray[i] < currentScroll) {
|
|
27
|
-
return reverseArray[i +
|
|
25
|
+
return reverseArray[i + TABS_PER_SCROLL_STEP];
|
|
28
26
|
}
|
|
29
27
|
}
|
|
30
|
-
return 0;
|
|
28
|
+
return 0;
|
|
31
29
|
};
|
|
32
30
|
/**
|
|
33
|
-
*
|
|
31
|
+
* Produces an array of x positions of child elements relative to the scroll
|
|
32
|
+
* container, valid as `scrollLeft` targets. Requires `.viewsWrapper` to be
|
|
33
|
+
* `position: relative` so it acts as the children's offsetParent (VQCL-8250).
|
|
34
34
|
*/
|
|
35
35
|
const createViewPositionArray = (containerRef) => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return el.getBoundingClientRect().x - 20;
|
|
36
|
+
return Object.values(containerRef.children).map((el) => {
|
|
37
|
+
return Math.max(0, el.offsetLeft - TAB_SCROLL_LEFT_OFFSET_PX);
|
|
39
38
|
});
|
|
40
|
-
return viewPositions;
|
|
41
39
|
};
|
|
42
40
|
|
|
43
41
|
export { createViewPositionArray, getNextViewPosition, getPrevViewPosition };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/components/ViewsContainer/utils.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/components/ViewsContainer/utils.ts"],"sourcesContent":["import { TABS_PER_SCROLL_STEP, TAB_SCROLL_LEFT_OFFSET_PX } from './constants';\n\n/** Next scroll value `TABS_PER_SCROLL_STEP` tabs forward of the current position. */\nexport const getNextViewPosition = (\n viewPositionsArray: number[],\n currentScroll: number,\n containerWidth: number,\n) => {\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < viewPositionsArray.length; i++) {\n if (viewPositionsArray[i + TABS_PER_SCROLL_STEP] === undefined) {\n return currentScroll - containerWidth;\n }\n if (viewPositionsArray[i] >= currentScroll) {\n return viewPositionsArray[i + TABS_PER_SCROLL_STEP];\n }\n }\n return currentScroll - containerWidth;\n};\n\n/** Previous scroll value `TABS_PER_SCROLL_STEP` tabs back from the current position. */\nexport const getPrevViewPosition = (viewPositionsArray: any[], currentScroll: number) => {\n const reverseArray = viewPositionsArray.slice().reverse();\n\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < viewPositionsArray.length; i++) {\n if (reverseArray[i + TABS_PER_SCROLL_STEP] === undefined) {\n return 0;\n }\n if (reverseArray[i] < currentScroll) {\n return reverseArray[i + TABS_PER_SCROLL_STEP];\n }\n }\n return 0;\n};\n\n/**\n * Produces an array of x positions of child elements relative to the scroll\n * container, valid as `scrollLeft` targets. Requires `.viewsWrapper` to be\n * `position: relative` so it acts as the children's offsetParent (VQCL-8250).\n */\nexport const createViewPositionArray = (containerRef: HTMLDivElement) => {\n return Object.values(containerRef.children).map((el) => {\n return Math.max(0, (el as HTMLElement).offsetLeft - TAB_SCROLL_LEFT_OFFSET_PX);\n });\n};\n"],"names":[],"mappings":";;AAEA;AACO,MAAM,mBAAmB,GAAG,CACjC,kBAA4B,EAC5B,aAAqB,EACrB,cAAsB,KACpB;;AAEF,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAClD,IAAI,kBAAkB,CAAC,CAAC,GAAG,oBAAoB,CAAC,KAAK,SAAS,EAAE;YAC9D,OAAO,aAAa,GAAG,cAAc;AACtC,QAAA;AACD,QAAA,IAAI,kBAAkB,CAAC,CAAC,CAAC,IAAI,aAAa,EAAE;AAC1C,YAAA,OAAO,kBAAkB,CAAC,CAAC,GAAG,oBAAoB,CAAC;AACpD,QAAA;AACF,IAAA;IACD,OAAO,aAAa,GAAG,cAAc;AACvC;AAEA;MACa,mBAAmB,GAAG,CAAC,kBAAyB,EAAE,aAAqB,KAAI;IACtF,MAAM,YAAY,GAAG,kBAAkB,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE;;AAGzD,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAClD,IAAI,YAAY,CAAC,CAAC,GAAG,oBAAoB,CAAC,KAAK,SAAS,EAAE;AACxD,YAAA,OAAO,CAAC;AACT,QAAA;AACD,QAAA,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE;AACnC,YAAA,OAAO,YAAY,CAAC,CAAC,GAAG,oBAAoB,CAAC;AAC9C,QAAA;AACF,IAAA;AACD,IAAA,OAAO,CAAC;AACV;AAEA;;;;AAIG;AACI,MAAM,uBAAuB,GAAG,CAAC,YAA4B,KAAI;AACtE,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAI;AACrD,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,EAAkB,CAAC,UAAU,GAAG,yBAAyB,CAAC;AAChF,IAAA,CAAC,CAAC;AACJ;;;;"}
|