@oliasoft-open-source/react-ui-library 4.14.1-beta-1 → 4.14.1-beta-2

package/dist/global.css

@@ -2442,123 +2442,135 @@ html[data-theme='dark'] {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
-._inputInTable_1llou_1 {
+._inputInTable_7fzf8_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1llou_1:not(:hover):not([data-error]):not([data-warning]) {
+._inputInTable_7fzf8_1:not(:hover):not([data-error]):not([data-warning]) {
   border-color: transparent;
 }
-._inputInTable_1llou_1:not(:focus) {
+._inputInTable_7fzf8_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1llou_13 {
+._inputHover_7fzf8_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1llou_18 {
+._inputFocus_7fzf8_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1llou_25,
-._inputWarning_1llou_26 {
+._inputError_7fzf8_25,
+._inputWarning_7fzf8_26 {
   position: relative;
 }
-._inputError_1llou_25 {
+._inputError_7fzf8_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._inputError_1llou_25:hover {
+._inputError_7fzf8_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1llou_25:focus {
+._inputError_7fzf8_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1llou_26 {
+._inputWarning_7fzf8_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._inputWarning_1llou_26:hover {
+._inputWarning_7fzf8_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1llou_26:focus {
+._inputWarning_7fzf8_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1llou_61 {
+._inputDisabled_7fzf8_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1llou_67 {
+._hideScrollbars_7fzf8_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1llou_67::-webkit-scrollbar {
+._hideScrollbars_7fzf8_67::-webkit-scrollbar {
   display: none;
 }
-._header_1llou_77 ._headerTitle_1llou_77,
-._heading_1llou_78 ._itemHeader_1llou_78 {
+._listWrapper_7fzf8_77 {
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+._listWrapperBordered_7fzf8_82 {
+  background: var(--color-background-raised);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-card);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+._header_7fzf8_89 ._headerTitle_7fzf8_89,
+._heading_7fzf8_90 ._itemHeader_7fzf8_90 {
   transition: opacity 0.3s;
 }
-._narrow_1llou_81 ._header_1llou_77 ._headerTitle_1llou_77,
-._narrow_1llou_81 ._heading_1llou_78 ._itemHeader_1llou_78 {
+._narrow_7fzf8_93 ._header_7fzf8_89 ._headerTitle_7fzf8_89,
+._narrow_7fzf8_93 ._heading_7fzf8_90 ._itemHeader_7fzf8_90 {
   opacity: 0;
 }
-._stickyHeader_1llou_85 {
+._stickyHeader_7fzf8_97 {
   position: sticky;
   top: 0;
   background-color: var(--color-background);
   z-index: 10;
 }
-._itemHeader_1llou_78 {
+._itemHeader_7fzf8_90 {
   padding: var(--padding-xs) var(--padding);
   display: flex;
   align-items: flex-start;
 }
-._itemHeader_1llou_78 ._title_1llou_96 {
+._itemHeader_7fzf8_90 ._title_7fzf8_108 {
   margin: 0;
   padding: 0;
   flex-grow: 1;
   min-width: 0;
 }
-._itemHeader_1llou_78 ._name_1llou_102 {
+._itemHeader_7fzf8_90 ._name_7fzf8_114 {
   font-weight: 400;
 }
-._itemHeader_1llou_78 ._iconTooltipMargin_1llou_105 {
+._itemHeader_7fzf8_90 ._iconTooltipMargin_7fzf8_117 {
   margin-left: var(--padding-xs);
 }
-._itemHeader_1llou_78 ._bold_1llou_108 {
+._itemHeader_7fzf8_90 ._bold_7fzf8_120 {
   font-weight: bold;
 }
-._header_1llou_77 {
+._header_7fzf8_89 {
   padding: var(--padding);
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
 }
-._toggleNarrow_1llou_117 {
+._toggleNarrow_7fzf8_129 {
   margin-right: 16px;
   margin-left: -5px;
   color: #c8c8c8;
@@ -2567,16 +2579,16 @@ html[data-theme='dark'] {
   width: 22px;
   justify-content: center;
 }
-._toggleNarrow_1llou_117:hover {
+._toggleNarrow_7fzf8_129:hover {
   color: var(--color-text-primary-hover);
 }
-._toggleNarrow_1llou_117:active {
+._toggleNarrow_7fzf8_129:active {
   color: var(--color-text-primary-active);
 }
-._narrow_1llou_81 ._toggleNarrow_1llou_117 {
+._narrow_7fzf8_93 ._toggleNarrow_7fzf8_129 {
   transform: scaleX(-1);
 }
-._drag_1llou_135 {
+._drag_7fzf8_147 {
   color: var(--color-text-faint);
   display: flex;
   align-items: center;
@@ -2590,28 +2602,29 @@ html[data-theme='dark'] {
   width: var(--size-sm);
   flex-shrink: 0;
 }
-._drag_1llou_135:hover {
+._drag_7fzf8_147:hover {
   color: var(--color-text-primary-hover);
 }
-._drag_1llou_135:active {
+._drag_7fzf8_147:active {
   color: var(--color-text-primary-active);
 }
-._list_1llou_155 {
+._list_7fzf8_77 {
   flex-shrink: 0;
   background: var(--color-background);
+  position: relative;
 }
-._list_1llou_155._bordered_1llou_159:first-child,
-._list_1llou_155._bordered_1llou_159:first-child > :first-child {
+._list_7fzf8_77._bordered_7fzf8_172:first-child,
+._list_7fzf8_77._bordered_7fzf8_172:first-child > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-._list_1llou_155._bordered_1llou_159:last-child,
-._list_1llou_155._bordered_1llou_159:last-child > :last-child {
+._list_7fzf8_77._bordered_7fzf8_172:last-child,
+._list_7fzf8_77._bordered_7fzf8_172:last-child > :last-child {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
   border-bottom: 0;
 }
-._item_1llou_78 {
+._item_7fzf8_90 {
   color: inherit;
   display: block;
   transition: background-color 0.2s;
@@ -2622,7 +2635,7 @@ html[data-theme='dark'] {
   overflow-wrap: break-word;
   hyphens: auto;
 }
-._item_1llou_78:not(._heading_1llou_78):after {
+._item_7fzf8_90:not(._heading_7fzf8_90):after {
   content: '';
   position: absolute;
   left: 0;
@@ -2633,41 +2646,41 @@ html[data-theme='dark'] {
   border-bottom-left-radius: inherit;
   transition: background 0.3s, width 0.3s;
 }
-._item_1llou_78._action_1llou_192 {
+._item_7fzf8_90._action_7fzf8_205 {
   cursor: pointer;
 }
-._item_1llou_78._action_1llou_192:not(._active_1llou_195):hover {
+._item_7fzf8_90._action_7fzf8_205:not(._active_7fzf8_208):hover {
   background: var(--color-background-listitem-hover);
 }
-._item_1llou_78._action_1llou_192:not(._active_1llou_195):hover:after {
+._item_7fzf8_90._action_7fzf8_205:not(._active_7fzf8_208):hover:after {
   width: 5px;
   background: rgba(0, 0, 0, 0.1);
 }
-._item_1llou_78._indented_1llou_202:after {
+._item_7fzf8_90._indented_7fzf8_215:after {
   width: 3px;
   background: rgba(0, 0, 0, 0.1);
 }
-._item_1llou_78._active_1llou_195 {
+._item_7fzf8_90._active_7fzf8_208 {
   cursor: default;
   position: relative;
   z-index: 1;
   background: var(--color-background-listitem-active);
 }
-._item_1llou_78._active_1llou_195:after {
+._item_7fzf8_90._active_7fzf8_208:after {
   background: var(--color-background-primary) !important;
 }
-._item_1llou_78._disabled_1llou_215 {
+._item_7fzf8_90._disabled_7fzf8_228 {
   color: var(--color-text-faint);
   pointer-events: none;
 }
-._item_1llou_78._heading_1llou_78 {
+._item_7fzf8_90._heading_7fzf8_90 {
   color: var(--color-text-muted);
   background-color: var(--color-background-cardheader);
 }
-._item_1llou_78._heading_1llou_78._action_1llou_192:hover {
+._item_7fzf8_90._heading_7fzf8_90._action_7fzf8_205:hover {
   color: var(--color-text-primary-hover);
 }
-._item_1llou_78 ._label_1llou_226 {
+._item_7fzf8_90 ._label_7fzf8_239 {
   margin-right: var(--padding-xs);
   flex-shrink: 0;
   width: var(--size-sm);
@@ -2678,38 +2691,38 @@ html[data-theme='dark'] {
   align-items: center;
   justify-content: center;
 }
-._item_1llou_78 ._details_1llou_237,
-._item_1llou_78 ._metadata_1llou_238 {
+._item_7fzf8_90 ._details_7fzf8_250,
+._item_7fzf8_90 ._metadata_7fzf8_251 {
   display: block;
   width: 100%;
   font-weight: normal;
 }
-._item_1llou_78 ._metadata_1llou_238 {
+._item_7fzf8_90 ._metadata_7fzf8_251 {
   color: var(--color-text-muted);
 }
-._item_1llou_78 ._itemContent_1llou_246 {
+._item_7fzf8_90 ._itemContent_7fzf8_259 {
   padding: 0 var(--padding) var(--padding-sm);
   cursor: auto;
 }
-._item_1llou_78 ._itemContent_1llou_246:empty {
+._item_7fzf8_90 ._itemContent_7fzf8_259:empty {
   padding: inherit;
 }
-._indentIcon_1llou_253 {
+._indentIcon_7fzf8_266 {
   color: var(--color-text-faint);
   flex-shrink: 0;
   margin-right: var(--padding-xxs);
 }
-._expandIcon_1llou_258 {
+._expandIcon_7fzf8_271 {
   flex-shrink: 0;
   position: relative;
   display: flex;
   height: var(--line-height);
   margin-right: var(--padding-xs);
 }
-._expandIcon_1llou_258._expanded_1llou_265 svg {
+._expandIcon_7fzf8_271._expanded_7fzf8_278 svg {
   transform: rotate(90deg);
 }
-._right_1llou_268 {
+._right_7fzf8_281 {
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -2717,34 +2730,32 @@ html[data-theme='dark'] {
   margin-bottom: calc((var(--line-height) - var(--size-sm)) / 2);
   min-height: var(--size-sm);
 }
-._actions_1llou_276 {
+._actions_7fzf8_289 {
   margin-left: var(--padding-xs);
   display: flex;
   align-items: center;
 }
-._scrollableList_1llou_281 {
+._scrollableList_7fzf8_294 {
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
   scroll-behavior: smooth;
 }
-._infiniteScrollContainer_1llou_286 {
-  overflow: hidden !important;
-}
-._hideScrollbar_1llou_67 {
+._hideScrollbar_7fzf8_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbar_1llou_67::-webkit-scrollbar {
+._hideScrollbar_7fzf8_67::-webkit-scrollbar {
   display: none;
 }
-._bordered_1llou_159 {
+._bordered_7fzf8_172 {
   box-shadow: inset 0px 0px 0px 2px var(--color-background-primary);
   background: var(--color-background-listitem-active);
 }
-._noPointerEvents_1llou_303 {
+._noPointerEvents_7fzf8_314 {
   pointer-events: none;
 }
 ._loader_477i5_1 {

package/dist/index.js

@@ -19089,45 +19089,46 @@ function useVirtualizer(options) {
     ...options
   });
 }
-const inputInTable$8 = "_inputInTable_1llou_1";
-const inputHover$8 = "_inputHover_1llou_13";
-const inputFocus$8 = "_inputFocus_1llou_18";
-const inputError$8 = "_inputError_1llou_25";
-const inputWarning$8 = "_inputWarning_1llou_26";
-const inputDisabled$8 = "_inputDisabled_1llou_61";
-const hideScrollbars$8 = "_hideScrollbars_1llou_67";
-const header$1 = "_header_1llou_77";
-const headerTitle = "_headerTitle_1llou_77";
-const heading$3 = "_heading_1llou_78";
-const itemHeader = "_itemHeader_1llou_78";
-const narrow = "_narrow_1llou_81";
-const stickyHeader = "_stickyHeader_1llou_85";
-const title$3 = "_title_1llou_96";
-const name = "_name_1llou_102";
-const iconTooltipMargin = "_iconTooltipMargin_1llou_105";
-const bold = "_bold_1llou_108";
-const toggleNarrow = "_toggleNarrow_1llou_117";
-const drag$1 = "_drag_1llou_135";
-const list$1 = "_list_1llou_155";
-const bordered$1 = "_bordered_1llou_159";
-const item$4 = "_item_1llou_78";
-const action = "_action_1llou_192";
-const active$3 = "_active_1llou_195";
-const indented = "_indented_1llou_202";
-const disabled$5 = "_disabled_1llou_215";
-const label$6 = "_label_1llou_226";
-const details$2 = "_details_1llou_237";
-const metadata = "_metadata_1llou_238";
-const itemContent = "_itemContent_1llou_246";
-const indentIcon = "_indentIcon_1llou_253";
-const expandIcon = "_expandIcon_1llou_258";
-const expanded = "_expanded_1llou_265";
-const right$4 = "_right_1llou_268";
-const actions = "_actions_1llou_276";
-const scrollableList = "_scrollableList_1llou_281";
-const infiniteScrollContainer = "_infiniteScrollContainer_1llou_286";
-const hideScrollbar = "_hideScrollbar_1llou_67";
-const noPointerEvents = "_noPointerEvents_1llou_303";
+const inputInTable$8 = "_inputInTable_7fzf8_1";
+const inputHover$8 = "_inputHover_7fzf8_13";
+const inputFocus$8 = "_inputFocus_7fzf8_18";
+const inputError$8 = "_inputError_7fzf8_25";
+const inputWarning$8 = "_inputWarning_7fzf8_26";
+const inputDisabled$8 = "_inputDisabled_7fzf8_61";
+const hideScrollbars$8 = "_hideScrollbars_7fzf8_67";
+const listWrapper = "_listWrapper_7fzf8_77";
+const listWrapperBordered = "_listWrapperBordered_7fzf8_82";
+const header$1 = "_header_7fzf8_89";
+const headerTitle = "_headerTitle_7fzf8_89";
+const heading$3 = "_heading_7fzf8_90";
+const itemHeader = "_itemHeader_7fzf8_90";
+const narrow = "_narrow_7fzf8_93";
+const stickyHeader = "_stickyHeader_7fzf8_97";
+const title$3 = "_title_7fzf8_108";
+const name = "_name_7fzf8_114";
+const iconTooltipMargin = "_iconTooltipMargin_7fzf8_117";
+const bold = "_bold_7fzf8_120";
+const toggleNarrow = "_toggleNarrow_7fzf8_129";
+const drag$1 = "_drag_7fzf8_147";
+const list$1 = "_list_7fzf8_77";
+const bordered$1 = "_bordered_7fzf8_172";
+const item$4 = "_item_7fzf8_90";
+const action = "_action_7fzf8_205";
+const active$3 = "_active_7fzf8_208";
+const indented = "_indented_7fzf8_215";
+const disabled$5 = "_disabled_7fzf8_228";
+const label$6 = "_label_7fzf8_239";
+const details$2 = "_details_7fzf8_250";
+const metadata = "_metadata_7fzf8_251";
+const itemContent = "_itemContent_7fzf8_259";
+const indentIcon = "_indentIcon_7fzf8_266";
+const expandIcon = "_expandIcon_7fzf8_271";
+const expanded = "_expanded_7fzf8_278";
+const right$4 = "_right_7fzf8_281";
+const actions = "_actions_7fzf8_289";
+const scrollableList = "_scrollableList_7fzf8_294";
+const hideScrollbar = "_hideScrollbar_7fzf8_67";
+const noPointerEvents = "_noPointerEvents_7fzf8_314";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -19136,6 +19137,8 @@ const listStyles = {
   inputWarning: inputWarning$8,
   inputDisabled: inputDisabled$8,
   hideScrollbars: hideScrollbars$8,
+  listWrapper,
+  listWrapperBordered,
   header: header$1,
   headerTitle,
   heading: heading$3,
@@ -19165,7 +19168,6 @@ const listStyles = {
   right: right$4,
   actions,
   scrollableList,
-  infiniteScrollContainer,
   hideScrollbar,
   noPointerEvents
 };
@@ -19446,7 +19448,7 @@ const List = ({
   const virtualizer = useVirtualizer({
     count: list2.items.length,
     getScrollElement: () => listContainerRef.current,
-    estimateSize: () => 36,
+    estimateSize: () => 37,
     overscan: 5
   });
   useEffect(() => {
@@ -19490,66 +19492,73 @@ const List = ({
       }
     );
   };
-  return /* @__PURE__ */ jsx(Card, { bordered: bordered2, padding: false, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx$2(
-        listStyles.scrollableList,
-        narrow2 ? listStyles.narrow : "",
-        hideScrollbar2 ? listStyles.hideScrollbar : ""
+        listStyles.listWrapper,
+        bordered2 ? listStyles.listWrapperBordered : ""
       ),
-      "data-testid": testId,
-      style: { height: height2, marginBottom },
-      ref: listContainerRef,
-      children: [
-        !noHeader && /* @__PURE__ */ jsx(
-          ListHeading,
-          {
-            name: list2.name,
-            actions: list2.actions,
-            toggleNarrow: toggleNarrow2,
-            onToggleNarrow,
-            stickyHeader: stickyHeader2
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ListDroppableWrapper,
-          {
-            onListReorder,
-            list: list2,
-            draggable: draggable2,
-            expanding,
-            children: (provided, snapshot) => {
-              return /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cx$2(listStyles.list, bordered2 ? listStyles.bordered : ""),
-                  style: {
-                    height: `${virtualizer.getTotalSize()}px`,
-                    width: "100%",
-                    position: "relative"
-                  },
-                  ref: provided == null ? void 0 : provided.innerRef,
-                  ...provided == null ? void 0 : provided.droppableProps,
-                  children: virtualizer.getVirtualItems().map(
-                    (virtualRow) => draggable2 ? /* @__PURE__ */ jsx(
-                      PublicDraggable,
-                      {
-                        draggableId: virtualRow.index.toString(),
-                        index: virtualRow.index,
-                        children: (dragProvided, dragSnapshot) => renderItem(virtualRow, dragProvided)
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx$2(
+            listStyles.scrollableList,
+            narrow2 ? listStyles.narrow : "",
+            hideScrollbar2 ? listStyles.hideScrollbar : ""
+          ),
+          "data-testid": testId,
+          style: { height: height2, marginBottom },
+          ref: listContainerRef,
+          children: [
+            !noHeader && /* @__PURE__ */ jsx(
+              ListHeading,
+              {
+                name: list2.name,
+                actions: list2.actions,
+                toggleNarrow: toggleNarrow2,
+                onToggleNarrow,
+                stickyHeader: stickyHeader2
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ListDroppableWrapper,
+              {
+                onListReorder,
+                list: list2,
+                draggable: draggable2,
+                expanding,
+                children: (provided, snapshot) => {
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cx$2(listStyles.list, bordered2 ? listStyles.bordered : ""),
+                      style: {
+                        height: `${virtualizer.getTotalSize()}px`
                       },
-                      virtualRow.index
-                    ) : /* @__PURE__ */ jsx(Fragment$2, { children: renderItem(virtualRow) }, virtualRow.index)
-                  )
+                      ref: provided == null ? void 0 : provided.innerRef,
+                      ...provided == null ? void 0 : provided.droppableProps,
+                      children: virtualizer.getVirtualItems().map(
+                        (virtualRow) => draggable2 ? /* @__PURE__ */ jsx(
+                          PublicDraggable,
+                          {
+                            draggableId: virtualRow.index.toString(),
+                            index: virtualRow.index,
+                            children: (dragProvided, dragSnapshot) => renderItem(virtualRow, dragProvided)
+                          },
+                          virtualRow.index
+                        ) : /* @__PURE__ */ jsx(Fragment$2, { children: renderItem(virtualRow) }, virtualRow.index)
+                      )
+                    }
+                  );
                 }
-              );
-            }
-          }
-        )
-      ]
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 const loader = "_loader_477i5_1";
 const fullViewPortSize = "_fullViewPortSize_477i5_7";