@oliasoft-open-source/react-ui-library 4.18.0-beta-12 → 4.18.0

package/README.md

@@ -1094,8 +1094,12 @@ The `List` component renders a list of data items with various customization opt
 
 | Prop                        | Description                                                                                                     | Default Value            |
 |-----------------------------|-----------------------------------------------------------------------------------------------------------------|--------------------------|
+| `scrollable`                | Determines whether the list is scrollable.                                                                      | `false`                  |
 | `hideScrollbar`             | Determines whether to hide the scrollbar when scrolling.                                                        | `false`                  |
 | `triggerScrollToActiveItem` | Specifies whether scrolling should be triggered to display the active item.                                      | `false`                  |
+| `infiniteScroll`            | Specifies whether to enable infinite scroll functionality.                                                       | `false`                  |
+| `limit`                     | The limit of items to load per page when using infinite scroll.                                                  | `10`                     |
+| `infiniteScrollTarget`      | The target element for infinite scroll (e.g., the list container).                                               | -              |
 
 ### Usage Example
 
@@ -1110,8 +1114,12 @@ The `List` component renders a list of data items with various customization opt
   height={300}
   testId="my-list"
   scrollDetails={{
+    scrollable: true,
     hideScrollbar: true,
     triggerScrollToActiveItem: true,
+    infiniteScroll: true,
+    limit: 10,
+    infiniteScrollTarget: document.getElementById('list-container'),
   }}
 />
 ```

package/dist/global.css

@@ -2442,139 +2442,123 @@ html[data-theme='dark'] {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
-._inputInTable_4cdnv_1 {
+._inputInTable_7sjlf_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_4cdnv_1:not(:hover):not([data-error]):not([data-warning]) {
+._inputInTable_7sjlf_1:not(:hover):not([data-error]):not([data-warning]) {
   border-color: transparent;
 }
-._inputInTable_4cdnv_1:not(:focus) {
+._inputInTable_7sjlf_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_4cdnv_13 {
+._inputHover_7sjlf_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_4cdnv_18 {
+._inputFocus_7sjlf_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_4cdnv_25,
-._inputWarning_4cdnv_26 {
+._inputError_7sjlf_25,
+._inputWarning_7sjlf_26 {
   position: relative;
 }
-._inputError_4cdnv_25 {
+._inputError_7sjlf_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._inputError_4cdnv_25:hover {
+._inputError_7sjlf_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_4cdnv_25:focus {
+._inputError_7sjlf_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_4cdnv_26 {
+._inputWarning_7sjlf_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._inputWarning_4cdnv_26:hover {
+._inputWarning_7sjlf_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_4cdnv_26:focus {
+._inputWarning_7sjlf_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_4cdnv_61 {
+._inputDisabled_7sjlf_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_4cdnv_67 {
+._hideScrollbars_7sjlf_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_4cdnv_67::-webkit-scrollbar {
+._hideScrollbars_7sjlf_67::-webkit-scrollbar {
   display: none;
 }
-._list_4cdnv_77 {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  overflow: hidden;
-}
-._bordered_4cdnv_83 {
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-}
-._bordered_4cdnv_83 ._virtualRow_4cdnv_87:last-child ._item_4cdnv_87 {
-  border-bottom: none;
-}
-._header_4cdnv_90 ._headerTitle_4cdnv_90,
-._heading_4cdnv_91 ._itemHeader_4cdnv_91 {
+._header_7sjlf_77 ._headerTitle_7sjlf_77,
+._heading_7sjlf_78 ._itemHeader_7sjlf_78 {
   transition: opacity 0.3s;
 }
-._narrow_4cdnv_94 ._header_4cdnv_90 ._headerTitle_4cdnv_90,
-._narrow_4cdnv_94 ._heading_4cdnv_91 ._itemHeader_4cdnv_91 {
+._narrow_7sjlf_81 ._header_7sjlf_77 ._headerTitle_7sjlf_77,
+._narrow_7sjlf_81 ._heading_7sjlf_78 ._itemHeader_7sjlf_78 {
   opacity: 0;
 }
-._stickyHeader_4cdnv_98 {
+._stickyHeader_7sjlf_85 {
   position: sticky;
   top: 0;
   background-color: var(--color-background);
   z-index: 10;
 }
-._itemHeader_4cdnv_91 {
+._itemHeader_7sjlf_78 {
   padding: var(--padding-xs) var(--padding);
   display: flex;
   align-items: flex-start;
 }
-._itemHeader_4cdnv_91 ._title_4cdnv_109 {
+._itemHeader_7sjlf_78 ._title_7sjlf_96 {
   margin: 0;
   padding: 0;
   flex-grow: 1;
   min-width: 0;
 }
-._itemHeader_4cdnv_91 ._name_4cdnv_115 {
+._itemHeader_7sjlf_78 ._name_7sjlf_102 {
   font-weight: 400;
-  display: block;
 }
-._itemHeader_4cdnv_91 ._iconTooltipMargin_4cdnv_119 {
+._itemHeader_7sjlf_78 ._iconTooltipMargin_7sjlf_105 {
   margin-left: var(--padding-xs);
 }
-._itemHeader_4cdnv_91 ._bold_4cdnv_122 {
+._itemHeader_7sjlf_78 ._bold_7sjlf_108 {
   font-weight: bold;
 }
-._header_4cdnv_90 {
+._header_7sjlf_77 {
   padding: var(--padding);
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
-  position: sticky;
-  top: 0;
 }
-._toggleNarrow_4cdnv_133 {
+._toggleNarrow_7sjlf_117 {
   margin-right: 16px;
   margin-left: -5px;
   color: #c8c8c8;
@@ -2583,16 +2567,16 @@ html[data-theme='dark'] {
   width: 22px;
   justify-content: center;
 }
-._toggleNarrow_4cdnv_133:hover {
+._toggleNarrow_7sjlf_117:hover {
   color: var(--color-text-primary-hover);
 }
-._toggleNarrow_4cdnv_133:active {
+._toggleNarrow_7sjlf_117:active {
   color: var(--color-text-primary-active);
 }
-._narrow_4cdnv_94 ._toggleNarrow_4cdnv_133 {
+._narrow_7sjlf_81 ._toggleNarrow_7sjlf_117 {
   transform: scaleX(-1);
 }
-._drag_4cdnv_151 {
+._drag_7sjlf_135 {
   color: var(--color-text-faint);
   display: flex;
   align-items: center;
@@ -2606,24 +2590,34 @@ html[data-theme='dark'] {
   width: var(--size-sm);
   flex-shrink: 0;
 }
-._drag_4cdnv_151:hover {
+._drag_7sjlf_135:hover {
   color: var(--color-text-primary-hover);
 }
-._drag_4cdnv_151:active {
+._drag_7sjlf_135:active {
   cursor: grabbing;
   color: var(--color-text-primary-active);
 }
-._dragOverlay_4cdnv_172 {
+._dragOverlay_7sjlf_156 {
   box-shadow: var(--shadow-layer);
   border-radius: var(--border-radius);
   overflow: hidden;
 }
-._listContent_4cdnv_177 {
-  flex: 1;
-  overflow-y: auto;
+._list_7sjlf_161 {
+  flex-shrink: 0;
   background: var(--color-background);
 }
-._item_4cdnv_87 {
+._list_7sjlf_161._bordered_7sjlf_165:first-child,
+._list_7sjlf_161._bordered_7sjlf_165:first-child > :first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+._list_7sjlf_161._bordered_7sjlf_165:last-child,
+._list_7sjlf_161._bordered_7sjlf_165:last-child > :last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  border-bottom: 0;
+}
+._item_7sjlf_78 {
   color: inherit;
   display: block;
   transition: background-color 0.2s;
@@ -2634,7 +2628,7 @@ html[data-theme='dark'] {
   overflow-wrap: break-word;
   hyphens: auto;
 }
-._item_4cdnv_87:not(._heading_4cdnv_91):after {
+._item_7sjlf_78:not(._heading_7sjlf_78):after {
   content: '';
   position: absolute;
   left: 0;
@@ -2645,41 +2639,41 @@ html[data-theme='dark'] {
   border-bottom-left-radius: inherit;
   transition: background 0.3s, width 0.3s;
 }
-._item_4cdnv_87._action_4cdnv_204 {
+._item_7sjlf_78._action_7sjlf_198 {
   cursor: pointer;
 }
-._item_4cdnv_87._action_4cdnv_204:not(._active_4cdnv_207):hover {
+._item_7sjlf_78._action_7sjlf_198:not(._active_7sjlf_201):hover {
   background: var(--color-background-listitem-hover);
 }
-._item_4cdnv_87._action_4cdnv_204:not(._active_4cdnv_207):hover:after {
+._item_7sjlf_78._action_7sjlf_198:not(._active_7sjlf_201):hover:after {
   width: 5px;
   background: rgba(0, 0, 0, 0.1);
 }
-._item_4cdnv_87._indented_4cdnv_214:after {
+._item_7sjlf_78._indented_7sjlf_208:after {
   width: 3px;
   background: rgba(0, 0, 0, 0.1);
 }
-._item_4cdnv_87._active_4cdnv_207 {
+._item_7sjlf_78._active_7sjlf_201 {
   cursor: default;
   position: relative;
   z-index: 1;
   background: var(--color-background-listitem-active);
 }
-._item_4cdnv_87._active_4cdnv_207:after {
+._item_7sjlf_78._active_7sjlf_201:after {
   background: var(--color-background-primary) !important;
 }
-._item_4cdnv_87._disabled_4cdnv_227 {
+._item_7sjlf_78._disabled_7sjlf_221 {
   color: var(--color-text-faint);
   pointer-events: none;
 }
-._item_4cdnv_87._heading_4cdnv_91 {
+._item_7sjlf_78._heading_7sjlf_78 {
   color: var(--color-text-muted);
   background-color: var(--color-background-cardheader);
 }
-._item_4cdnv_87._heading_4cdnv_91._action_4cdnv_204:hover {
+._item_7sjlf_78._heading_7sjlf_78._action_7sjlf_198:hover {
   color: var(--color-text-primary-hover);
 }
-._item_4cdnv_87 ._label_4cdnv_238 {
+._item_7sjlf_78 ._label_7sjlf_232 {
   margin-right: var(--padding-xs);
   flex-shrink: 0;
   width: var(--size-sm);
@@ -2690,38 +2684,38 @@ html[data-theme='dark'] {
   align-items: center;
   justify-content: center;
 }
-._item_4cdnv_87 ._details_4cdnv_249,
-._item_4cdnv_87 ._metadata_4cdnv_250 {
+._item_7sjlf_78 ._details_7sjlf_243,
+._item_7sjlf_78 ._metadata_7sjlf_244 {
   display: block;
   width: 100%;
   font-weight: normal;
 }
-._item_4cdnv_87 ._metadata_4cdnv_250 {
+._item_7sjlf_78 ._metadata_7sjlf_244 {
   color: var(--color-text-muted);
 }
-._item_4cdnv_87 ._itemContent_4cdnv_258 {
+._item_7sjlf_78 ._itemContent_7sjlf_252 {
   padding: 0 var(--padding) var(--padding-sm);
   cursor: auto;
 }
-._item_4cdnv_87 ._itemContent_4cdnv_258:empty {
+._item_7sjlf_78 ._itemContent_7sjlf_252:empty {
   padding: inherit;
 }
-._indentIcon_4cdnv_265 {
+._indentIcon_7sjlf_259 {
   color: var(--color-text-faint);
   flex-shrink: 0;
   margin-right: var(--padding-xxs);
 }
-._expandIcon_4cdnv_270 {
+._expandIcon_7sjlf_264 {
   flex-shrink: 0;
   position: relative;
   display: flex;
   height: var(--line-height);
   margin-right: var(--padding-xs);
 }
-._expandIcon_4cdnv_270._expanded_4cdnv_277 svg {
+._expandIcon_7sjlf_264._expanded_7sjlf_271 svg {
   transform: rotate(90deg);
 }
-._right_4cdnv_280 {
+._right_7sjlf_274 {
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -2729,33 +2723,35 @@ html[data-theme='dark'] {
   margin-bottom: calc((var(--line-height) - var(--size-sm)) / 2);
   min-height: var(--size-sm);
 }
-._actions_4cdnv_288 {
+._actions_7sjlf_282 {
   margin-left: var(--padding-xs);
   display: flex;
   align-items: center;
 }
-._hideScrollbar_4cdnv_67 {
+._scrollableList_7sjlf_287 {
+  height: 100%;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+._infiniteScrollContainer_7sjlf_292 {
+  overflow: hidden !important;
+}
+._hideScrollbar_7sjlf_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbar_4cdnv_67::-webkit-scrollbar {
+._hideScrollbar_7sjlf_67::-webkit-scrollbar {
   display: none;
 }
-._noPointerEvents_4cdnv_303 {
-  pointer-events: none;
-}
-._virtualRows_4cdnv_306 {
-  width: 100%;
-  position: relative;
+._bordered_7sjlf_165 {
+  box-shadow: inset 0px 0px 0px 2px var(--color-background-primary);
+  background: var(--color-background-listitem-active);
 }
-._virtualRow_4cdnv_87 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+._noPointerEvents_7sjlf_309 {
+  pointer-events: none;
 }
 ._loader_477i5_1 {
   width: 100%;
@@ -9141,80 +9137,80 @@ button:active .remirror-menu-pane-shortcut,
   width: 8px;
   height: 14px;
 }
-._inputInTable_xkoxm_1 {
+._inputInTable_xzacf_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_xkoxm_1:not(:hover):not([data-error]):not([data-warning]) {
+._inputInTable_xzacf_1:not(:hover):not([data-error]):not([data-warning]) {
   border-color: transparent;
 }
-._inputInTable_xkoxm_1:not(:focus) {
+._inputInTable_xzacf_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_xkoxm_13 {
+._inputHover_xzacf_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_xkoxm_18 {
+._inputFocus_xzacf_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_xkoxm_25,
-._inputWarning_xkoxm_26 {
+._inputError_xzacf_25,
+._inputWarning_xzacf_26 {
   position: relative;
 }
-._inputError_xkoxm_25 {
+._inputError_xzacf_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._inputError_xkoxm_25:hover {
+._inputError_xzacf_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_xkoxm_25:focus {
+._inputError_xzacf_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_xkoxm_26 {
+._inputWarning_xzacf_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._inputWarning_xkoxm_26:hover {
+._inputWarning_xzacf_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_xkoxm_26:focus {
+._inputWarning_xzacf_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_xkoxm_61 {
+._inputDisabled_xzacf_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_xkoxm_67 {
+._hideScrollbars_xzacf_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_xkoxm_67::-webkit-scrollbar {
+._hideScrollbars_xzacf_67::-webkit-scrollbar {
   display: none;
 }
 :root {
@@ -9225,7 +9221,7 @@ html[data-theme='dark'] {
   --color-background-table-header: var(--color-neutral-800);
   --color-background-table-row-tinted: var(--color-neutral-800);
 }
-._wrapper_xkoxm_85 {
+._wrapper_xzacf_85 {
   border-radius: inherit;
   max-height: 100%;
   max-width: 100%;
@@ -9233,23 +9229,23 @@ html[data-theme='dark'] {
   flex-direction: column;
   overflow: hidden;
 }
-._wrapper_xkoxm_85._bordered_xkoxm_93 {
+._wrapper_xzacf_85._bordered_xzacf_93 {
   border-radius: var(--border-radius);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-card);
 }
-._scroll_xkoxm_98 {
-  background: var(--color-background);
+._scroll_xzacf_98 {
   overflow-y: auto;
   border-radius: inherit;
   flex: 1;
   min-height: 0;
 }
-._scroll_xkoxm_98:not(:first-child) {
+._scroll_xzacf_98:not(:first-child) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._table_xkoxm_109 {
+._table_xzacf_108 {
+  background: var(--color-background-raised);
   color: var(--color-text);
   border-collapse: separate;
   border-spacing: 0;
@@ -9257,39 +9253,38 @@ html[data-theme='dark'] {
   width: 100%;
   font-variant-numeric: tabular-nums;
 }
-._table_xkoxm_109 > :first-child {
+._table_xzacf_108 > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-._table_xkoxm_109 > :first-child > :first-child {
+._table_xzacf_108 > :first-child > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-._table_xkoxm_109 > :first-child > :first-child > :first-child {
+._table_xzacf_108 > :first-child > :first-child > :first-child {
   border-top-left-radius: inherit;
 }
-._table_xkoxm_109 > :first-child > :first-child > :last-child {
+._table_xzacf_108 > :first-child > :first-child > :last-child {
   border-top-right-radius: inherit;
 }
-._table_xkoxm_109 > :last-child {
+._table_xzacf_108 > :last-child {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
-._table_xkoxm_109 > :last-child > :last-child {
+._table_xzacf_108 > :last-child > :last-child {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
-._table_xkoxm_109 > :last-child > :last-child > :first-child {
+._table_xzacf_108 > :last-child > :last-child > :first-child {
   border-bottom-left-radius: inherit;
 }
-._table_xkoxm_109 > :last-child > :last-child > :last-child {
+._table_xzacf_108 > :last-child > :last-child > :last-child {
   border-bottom-right-radius: inherit;
 }
-._dragOverlay_xkoxm_145 {
+._dragOverlay_xzacf_145 {
   box-shadow: var(--shadow-layer);
   border-radius: var(--border-radius);
   overflow: hidden;
-  position: fixed;
 }
 th,
 td {
@@ -9304,10 +9299,10 @@ th:not(:first-child),
 td:not(:first-child) {
   border-left-width: 1px;
 }
-._table_xkoxm_109 > *:not(:last-child) > tr th,
-._table_xkoxm_109 > *:not(:last-child) > tr td,
-._table_xkoxm_109 > *:last-child > tr:not(:last-child) th,
-._table_xkoxm_109 > *:last-child > tr:not(:last-child) td {
+._table_xzacf_108 > *:not(:last-child) > tr th,
+._table_xzacf_108 > *:not(:last-child) > tr td,
+._table_xzacf_108 > *:last-child > tr:not(:last-child) th,
+._table_xzacf_108 > *:last-child > tr:not(:last-child) td {
   border-bottom-width: 1px;
 }
 @-moz-document url-prefix() {
@@ -9330,23 +9325,14 @@ thead tr {
 }
 tbody {
   overflow: hidden;
+  background-color: var(--color-background);
 }
 tbody tr {
   background-color: var(--color-background-raised);
 }
-._striped_xkoxm_194 tbody [data-even='true'] {
+._striped_xzacf_194 tbody tr:nth-child(even) {
   background-color: var(--color-background-table-row-tinted);
 }
-tbody:before {
-  display: block;
-  padding-top: var(--virtualPaddingTop);
-  content: '';
-}
-tbody:after {
-  display: block;
-  padding-bottom: var(--virtualPaddingBottom);
-  content: '';
-}
 ._title_zn5s7_1 {
   background-color: var(--color-background-cardheader);
   border-bottom: 1px solid var(--color-border);