@oliasoft-open-source/react-ui-library 4.19.0-beta-1 → 4.19.0-beta-3

package/README.md

@@ -1094,8 +1094,10 @@ 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`                  |
 
 ### Usage Example
 

package/dist/global.css

@@ -2442,131 +2442,131 @@ html[data-theme='dark'] {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
-._inputInTable_4cdnv_1 {
+._inputInTable_1wss1_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_1wss1_1:not(:hover):not([data-error]):not([data-warning]) {
   border-color: transparent;
 }
-._inputInTable_4cdnv_1:not(:focus) {
+._inputInTable_1wss1_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_4cdnv_13 {
+._inputHover_1wss1_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_4cdnv_18 {
+._inputFocus_1wss1_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_1wss1_25,
+._inputWarning_1wss1_26 {
   position: relative;
 }
-._inputError_4cdnv_25 {
+._inputError_1wss1_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_1wss1_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_4cdnv_25:focus {
+._inputError_1wss1_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_1wss1_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_1wss1_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_4cdnv_26:focus {
+._inputWarning_1wss1_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_1wss1_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_4cdnv_67 {
+._hideScrollbars_1wss1_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_4cdnv_67::-webkit-scrollbar {
+._hideScrollbars_1wss1_67::-webkit-scrollbar {
   display: none;
 }
-._list_4cdnv_77 {
+._list_1wss1_77 {
   display: flex;
   flex-direction: column;
   max-height: 100%;
   overflow: hidden;
 }
-._bordered_4cdnv_83 {
+._bordered_1wss1_83 {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
 }
-._bordered_4cdnv_83 ._virtualRow_4cdnv_87:last-child ._item_4cdnv_87 {
+._bordered_1wss1_83 ._virtualRow_1wss1_87:last-child ._item_1wss1_87 {
   border-bottom: none;
 }
-._header_4cdnv_90 ._headerTitle_4cdnv_90,
-._heading_4cdnv_91 ._itemHeader_4cdnv_91 {
+._header_1wss1_90 ._headerTitle_1wss1_90,
+._heading_1wss1_91 ._itemHeader_1wss1_91 {
   transition: opacity 0.3s;
 }
-._narrow_4cdnv_94 ._header_4cdnv_90 ._headerTitle_4cdnv_90,
-._narrow_4cdnv_94 ._heading_4cdnv_91 ._itemHeader_4cdnv_91 {
+._narrow_1wss1_94 ._header_1wss1_90 ._headerTitle_1wss1_90,
+._narrow_1wss1_94 ._heading_1wss1_91 ._itemHeader_1wss1_91 {
   opacity: 0;
 }
-._stickyHeader_4cdnv_98 {
+._stickyHeader_1wss1_98 {
   position: sticky;
   top: 0;
   background-color: var(--color-background);
   z-index: 10;
 }
-._itemHeader_4cdnv_91 {
+._itemHeader_1wss1_91 {
   padding: var(--padding-xs) var(--padding);
   display: flex;
   align-items: flex-start;
 }
-._itemHeader_4cdnv_91 ._title_4cdnv_109 {
+._itemHeader_1wss1_91 ._title_1wss1_109 {
   margin: 0;
   padding: 0;
   flex-grow: 1;
   min-width: 0;
 }
-._itemHeader_4cdnv_91 ._name_4cdnv_115 {
+._itemHeader_1wss1_91 ._name_1wss1_115 {
   font-weight: 400;
   display: block;
 }
-._itemHeader_4cdnv_91 ._iconTooltipMargin_4cdnv_119 {
+._itemHeader_1wss1_91 ._iconTooltipMargin_1wss1_119 {
   margin-left: var(--padding-xs);
 }
-._itemHeader_4cdnv_91 ._bold_4cdnv_122 {
+._itemHeader_1wss1_91 ._bold_1wss1_122 {
   font-weight: bold;
 }
-._header_4cdnv_90 {
+._header_1wss1_90 {
   padding: var(--padding);
   display: flex;
   align-items: center;
@@ -2574,7 +2574,7 @@ html[data-theme='dark'] {
   position: sticky;
   top: 0;
 }
-._toggleNarrow_4cdnv_133 {
+._toggleNarrow_1wss1_133 {
   margin-right: 16px;
   margin-left: -5px;
   color: #c8c8c8;
@@ -2583,16 +2583,16 @@ html[data-theme='dark'] {
   width: 22px;
   justify-content: center;
 }
-._toggleNarrow_4cdnv_133:hover {
+._toggleNarrow_1wss1_133:hover {
   color: var(--color-text-primary-hover);
 }
-._toggleNarrow_4cdnv_133:active {
+._toggleNarrow_1wss1_133:active {
   color: var(--color-text-primary-active);
 }
-._narrow_4cdnv_94 ._toggleNarrow_4cdnv_133 {
+._narrow_1wss1_94 ._toggleNarrow_1wss1_133 {
   transform: scaleX(-1);
 }
-._drag_4cdnv_151 {
+._drag_1wss1_151 {
   color: var(--color-text-faint);
   display: flex;
   align-items: center;
@@ -2606,24 +2606,22 @@ html[data-theme='dark'] {
   width: var(--size-sm);
   flex-shrink: 0;
 }
-._drag_4cdnv_151:hover {
+._drag_1wss1_151:hover {
   color: var(--color-text-primary-hover);
 }
-._drag_4cdnv_151:active {
+._drag_1wss1_151:active {
   cursor: grabbing;
   color: var(--color-text-primary-active);
 }
-._dragOverlay_4cdnv_172 {
+._dragOverlay_1wss1_172 {
   box-shadow: var(--shadow-layer);
   border-radius: var(--border-radius);
   overflow: hidden;
 }
-._listContent_4cdnv_177 {
-  flex: 1;
-  overflow-y: auto;
+._listContent_1wss1_177 {
   background: var(--color-background);
 }
-._item_4cdnv_87 {
+._item_1wss1_87 {
   color: inherit;
   display: block;
   transition: background-color 0.2s;
@@ -2634,7 +2632,7 @@ html[data-theme='dark'] {
   overflow-wrap: break-word;
   hyphens: auto;
 }
-._item_4cdnv_87:not(._heading_4cdnv_91):after {
+._item_1wss1_87:not(._heading_1wss1_91):after {
   content: '';
   position: absolute;
   left: 0;
@@ -2645,41 +2643,41 @@ html[data-theme='dark'] {
   border-bottom-left-radius: inherit;
   transition: background 0.3s, width 0.3s;
 }
-._item_4cdnv_87._action_4cdnv_204 {
+._item_1wss1_87._action_1wss1_202 {
   cursor: pointer;
 }
-._item_4cdnv_87._action_4cdnv_204:not(._active_4cdnv_207):hover {
+._item_1wss1_87._action_1wss1_202:not(._active_1wss1_205):hover {
   background: var(--color-background-listitem-hover);
 }
-._item_4cdnv_87._action_4cdnv_204:not(._active_4cdnv_207):hover:after {
+._item_1wss1_87._action_1wss1_202:not(._active_1wss1_205):hover:after {
   width: 5px;
   background: rgba(0, 0, 0, 0.1);
 }
-._item_4cdnv_87._indented_4cdnv_214:after {
+._item_1wss1_87._indented_1wss1_212:after {
   width: 3px;
   background: rgba(0, 0, 0, 0.1);
 }
-._item_4cdnv_87._active_4cdnv_207 {
+._item_1wss1_87._active_1wss1_205 {
   cursor: default;
   position: relative;
   z-index: 1;
   background: var(--color-background-listitem-active);
 }
-._item_4cdnv_87._active_4cdnv_207:after {
+._item_1wss1_87._active_1wss1_205:after {
   background: var(--color-background-primary) !important;
 }
-._item_4cdnv_87._disabled_4cdnv_227 {
+._item_1wss1_87._disabled_1wss1_225 {
   color: var(--color-text-faint);
   pointer-events: none;
 }
-._item_4cdnv_87._heading_4cdnv_91 {
+._item_1wss1_87._heading_1wss1_91 {
   color: var(--color-text-muted);
   background-color: var(--color-background-cardheader);
 }
-._item_4cdnv_87._heading_4cdnv_91._action_4cdnv_204:hover {
+._item_1wss1_87._heading_1wss1_91._action_1wss1_202:hover {
   color: var(--color-text-primary-hover);
 }
-._item_4cdnv_87 ._label_4cdnv_238 {
+._item_1wss1_87 ._label_1wss1_236 {
   margin-right: var(--padding-xs);
   flex-shrink: 0;
   width: var(--size-sm);
@@ -2690,38 +2688,38 @@ html[data-theme='dark'] {
   align-items: center;
   justify-content: center;
 }
-._item_4cdnv_87 ._details_4cdnv_249,
-._item_4cdnv_87 ._metadata_4cdnv_250 {
+._item_1wss1_87 ._details_1wss1_247,
+._item_1wss1_87 ._metadata_1wss1_248 {
   display: block;
   width: 100%;
   font-weight: normal;
 }
-._item_4cdnv_87 ._metadata_4cdnv_250 {
+._item_1wss1_87 ._metadata_1wss1_248 {
   color: var(--color-text-muted);
 }
-._item_4cdnv_87 ._itemContent_4cdnv_258 {
+._item_1wss1_87 ._itemContent_1wss1_256 {
   padding: 0 var(--padding) var(--padding-sm);
   cursor: auto;
 }
-._item_4cdnv_87 ._itemContent_4cdnv_258:empty {
+._item_1wss1_87 ._itemContent_1wss1_256:empty {
   padding: inherit;
 }
-._indentIcon_4cdnv_265 {
+._indentIcon_1wss1_263 {
   color: var(--color-text-faint);
   flex-shrink: 0;
   margin-right: var(--padding-xxs);
 }
-._expandIcon_4cdnv_270 {
+._expandIcon_1wss1_268 {
   flex-shrink: 0;
   position: relative;
   display: flex;
   height: var(--line-height);
   margin-right: var(--padding-xs);
 }
-._expandIcon_4cdnv_270._expanded_4cdnv_277 svg {
+._expandIcon_1wss1_268._expanded_1wss1_275 svg {
   transform: rotate(90deg);
 }
-._right_4cdnv_280 {
+._right_1wss1_278 {
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -2729,29 +2727,33 @@ html[data-theme='dark'] {
   margin-bottom: calc((var(--line-height) - var(--size-sm)) / 2);
   min-height: var(--size-sm);
 }
-._actions_4cdnv_288 {
+._actions_1wss1_286 {
   margin-left: var(--padding-xs);
   display: flex;
   align-items: center;
 }
-._hideScrollbar_4cdnv_67 {
+._scrollableList_1wss1_291 {
+  height: 100%;
+  overflow-y: auto;
+}
+._hideScrollbar_1wss1_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbar_4cdnv_67::-webkit-scrollbar {
+._hideScrollbar_1wss1_67::-webkit-scrollbar {
   display: none;
 }
-._noPointerEvents_4cdnv_303 {
+._noPointerEvents_1wss1_305 {
   pointer-events: none;
 }
-._virtualRows_4cdnv_306 {
+._virtualRows_1wss1_308 {
   width: 100%;
   position: relative;
 }
-._virtualRow_4cdnv_87 {
+._virtualRow_1wss1_87 {
   position: absolute;
   top: 0;
   left: 0;

package/dist/index.d.ts

@@ -1130,6 +1130,7 @@ export declare interface IRowProps {
 }
 
 declare interface IScrollDetails {
+    scrollable?: boolean;
     hideScrollbar?: boolean;
     triggerScrollToActiveItem?: boolean;
     infiniteScroll?: boolean;

package/dist/index.js

@@ -9501,47 +9501,48 @@ const InputGroupAddon = ({
   })();
   return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
 };
-const inputInTable$8 = "_inputInTable_4cdnv_1";
-const inputHover$8 = "_inputHover_4cdnv_13";
-const inputFocus$8 = "_inputFocus_4cdnv_18";
-const inputError$8 = "_inputError_4cdnv_25";
-const inputWarning$8 = "_inputWarning_4cdnv_26";
-const inputDisabled$8 = "_inputDisabled_4cdnv_61";
-const hideScrollbars$8 = "_hideScrollbars_4cdnv_67";
-const list$1 = "_list_4cdnv_77";
-const bordered$1 = "_bordered_4cdnv_83";
-const virtualRow = "_virtualRow_4cdnv_87";
-const item$4 = "_item_4cdnv_87";
-const header$1 = "_header_4cdnv_90";
-const headerTitle = "_headerTitle_4cdnv_90";
-const heading$3 = "_heading_4cdnv_91";
-const itemHeader = "_itemHeader_4cdnv_91";
-const narrow = "_narrow_4cdnv_94";
-const stickyHeader = "_stickyHeader_4cdnv_98";
-const title$3 = "_title_4cdnv_109";
-const name = "_name_4cdnv_115";
-const iconTooltipMargin = "_iconTooltipMargin_4cdnv_119";
-const bold = "_bold_4cdnv_122";
-const toggleNarrow = "_toggleNarrow_4cdnv_133";
-const drag$1 = "_drag_4cdnv_151";
-const dragOverlay$1 = "_dragOverlay_4cdnv_172";
-const listContent = "_listContent_4cdnv_177";
-const action = "_action_4cdnv_204";
-const active$3 = "_active_4cdnv_207";
-const indented = "_indented_4cdnv_214";
-const disabled$5 = "_disabled_4cdnv_227";
-const label$6 = "_label_4cdnv_238";
-const details$2 = "_details_4cdnv_249";
-const metadata = "_metadata_4cdnv_250";
-const itemContent = "_itemContent_4cdnv_258";
-const indentIcon = "_indentIcon_4cdnv_265";
-const expandIcon = "_expandIcon_4cdnv_270";
-const expanded = "_expanded_4cdnv_277";
-const right$4 = "_right_4cdnv_280";
-const actions = "_actions_4cdnv_288";
-const hideScrollbar = "_hideScrollbar_4cdnv_67";
-const noPointerEvents = "_noPointerEvents_4cdnv_303";
-const virtualRows = "_virtualRows_4cdnv_306";
+const inputInTable$8 = "_inputInTable_1wss1_1";
+const inputHover$8 = "_inputHover_1wss1_13";
+const inputFocus$8 = "_inputFocus_1wss1_18";
+const inputError$8 = "_inputError_1wss1_25";
+const inputWarning$8 = "_inputWarning_1wss1_26";
+const inputDisabled$8 = "_inputDisabled_1wss1_61";
+const hideScrollbars$8 = "_hideScrollbars_1wss1_67";
+const list$1 = "_list_1wss1_77";
+const bordered$1 = "_bordered_1wss1_83";
+const virtualRow = "_virtualRow_1wss1_87";
+const item$4 = "_item_1wss1_87";
+const header$1 = "_header_1wss1_90";
+const headerTitle = "_headerTitle_1wss1_90";
+const heading$3 = "_heading_1wss1_91";
+const itemHeader = "_itemHeader_1wss1_91";
+const narrow = "_narrow_1wss1_94";
+const stickyHeader = "_stickyHeader_1wss1_98";
+const title$3 = "_title_1wss1_109";
+const name = "_name_1wss1_115";
+const iconTooltipMargin = "_iconTooltipMargin_1wss1_119";
+const bold = "_bold_1wss1_122";
+const toggleNarrow = "_toggleNarrow_1wss1_133";
+const drag$1 = "_drag_1wss1_151";
+const dragOverlay$1 = "_dragOverlay_1wss1_172";
+const listContent = "_listContent_1wss1_177";
+const action = "_action_1wss1_202";
+const active$3 = "_active_1wss1_205";
+const indented = "_indented_1wss1_212";
+const disabled$5 = "_disabled_1wss1_225";
+const label$6 = "_label_1wss1_236";
+const details$2 = "_details_1wss1_247";
+const metadata = "_metadata_1wss1_248";
+const itemContent = "_itemContent_1wss1_256";
+const indentIcon = "_indentIcon_1wss1_263";
+const expandIcon = "_expandIcon_1wss1_268";
+const expanded = "_expanded_1wss1_275";
+const right$4 = "_right_1wss1_278";
+const actions = "_actions_1wss1_286";
+const scrollableList = "_scrollableList_1wss1_291";
+const hideScrollbar = "_hideScrollbar_1wss1_67";
+const noPointerEvents = "_noPointerEvents_1wss1_305";
+const virtualRows = "_virtualRows_1wss1_308";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -9581,6 +9582,7 @@ const listStyles = {
   expanded,
   right: right$4,
   actions,
+  scrollableList,
   hideScrollbar,
   noPointerEvents,
   virtualRows
@@ -13884,7 +13886,7 @@ const ListDragWrapper = ({
     const { active: active2, over } = event;
     const from3 = active2 == null ? void 0 : active2.id;
     const to2 = over == null ? void 0 : over.id;
-    if (from3 !== to2) {
+    if (to2 !== void 0 && from3 !== to2) {
       onListReorder({
         from: Number(from3),
         to: Number(to2)
@@ -14679,13 +14681,19 @@ const ListScrollWrapper = ({
   scrollDetails,
   children
 }) => {
-  const { hideScrollbar: hideScrollbar2, triggerScrollToActiveItem, infiniteScroll } = scrollDetails;
+  const {
+    scrollable,
+    hideScrollbar: hideScrollbar2,
+    triggerScrollToActiveItem,
+    infiniteScroll
+  } = scrollDetails;
   if (!infiniteScroll) {
     return /* @__PURE__ */ jsx(
       "div",
       {
         className: cx$2(
           listStyles.listContent,
+          scrollable ? listStyles.scrollableList : "",
           hideScrollbar2 ? listStyles.hideScrollbar : ""
         ),
         children: /* @__PURE__ */ jsx("div", { children: children({}) })
@@ -14694,11 +14702,14 @@ const ListScrollWrapper = ({
   }
   const listContainerRef = useRef(null);
   const estimateItemHeight = () => {
-    let height2 = 37;
+    const LINE_HEIGHT = 20;
+    const PADDING2 = 8;
+    const BORDER_WIDTH = 1;
+    let height2 = LINE_HEIGHT + PADDING2 * 2 + BORDER_WIDTH;
     if (items.length > 0) {
       const item2 = items[items.length - 1];
-      if (item2.details) height2 += 20;
-      if (item2.metadata) height2 += 20;
+      if (item2.details) height2 += LINE_HEIGHT;
+      if (item2.metadata) height2 += LINE_HEIGHT;
     }
     return height2;
   };
@@ -14728,6 +14739,7 @@ const ListScrollWrapper = ({
     {
       className: cx$2(
         listStyles.listContent,
+        listStyles.scrollableList,
         hideScrollbar2 ? listStyles.hideScrollbar : ""
       ),
       ref: listContainerRef,
@@ -14760,8 +14772,10 @@ const List = ({
   height: height2,
   testId,
   scrollDetails = {
+    scrollable: false,
     hideScrollbar: false,
-    triggerScrollToActiveItem: false
+    triggerScrollToActiveItem: false,
+    infiniteScroll: false
   }
 }) => {
   return /* @__PURE__ */ jsxs(
@@ -67003,7 +67017,7 @@ const SettingField = ({
     { label: "Admin only", value: "superusers_admin" }
   ];
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", wrap: false, children: [
       children,
       !noPermission && /* @__PURE__ */ jsx(
         Select,