@oliasoft-open-source/react-ui-library 4.0.0-beta-66 → 4.0.0-beta-67

package/dist/global.css

@@ -2414,123 +2414,123 @@ html[data-theme='dark'] {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
-._inputInTable_1jiqc_1 {
+._inputInTable_327v8_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1jiqc_1:not(:hover) {
+._inputInTable_327v8_1:not(:hover) {
   border-color: transparent;
 }
-._inputInTable_1jiqc_1:not(:focus) {
+._inputInTable_327v8_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1jiqc_13 {
+._inputHover_327v8_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1jiqc_18 {
+._inputFocus_327v8_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1jiqc_25,
-._inputWarning_1jiqc_26 {
+._inputError_327v8_25,
+._inputWarning_327v8_26 {
   position: relative;
 }
-._inputError_1jiqc_25 {
+._inputError_327v8_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._inputError_1jiqc_25:hover {
+._inputError_327v8_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1jiqc_25:focus {
+._inputError_327v8_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1jiqc_26 {
+._inputWarning_327v8_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._inputWarning_1jiqc_26:hover {
+._inputWarning_327v8_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1jiqc_26:focus {
+._inputWarning_327v8_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1jiqc_61 {
+._inputDisabled_327v8_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1jiqc_67 {
+._hideScrollbars_327v8_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1jiqc_67::-webkit-scrollbar {
+._hideScrollbars_327v8_67::-webkit-scrollbar {
   display: none;
 }
-._header_1jiqc_77 ._headerTitle_1jiqc_77,
-._heading_1jiqc_78 ._itemHeader_1jiqc_78 {
+._header_327v8_77 ._headerTitle_327v8_77,
+._heading_327v8_78 ._itemHeader_327v8_78 {
   transition: opacity 0.3s;
 }
-._narrow_1jiqc_81 ._header_1jiqc_77 ._headerTitle_1jiqc_77,
-._narrow_1jiqc_81 ._heading_1jiqc_78 ._itemHeader_1jiqc_78 {
+._narrow_327v8_81 ._header_327v8_77 ._headerTitle_327v8_77,
+._narrow_327v8_81 ._heading_327v8_78 ._itemHeader_327v8_78 {
   opacity: 0;
 }
-._stickyHeader_1jiqc_85 {
+._stickyHeader_327v8_85 {
   position: sticky;
   top: 0;
   background-color: var(--color-background);
   z-index: 10;
 }
-._itemHeader_1jiqc_78 {
+._itemHeader_327v8_78 {
   padding: var(--padding-xs) var(--padding);
   display: flex;
   align-items: flex-start;
 }
-._itemHeader_1jiqc_78 ._title_1jiqc_96 {
+._itemHeader_327v8_78 ._title_327v8_96 {
   margin: 0;
   padding: 0;
   flex-grow: 1;
   min-width: 0;
 }
-._itemHeader_1jiqc_78 ._name_1jiqc_102 {
+._itemHeader_327v8_78 ._name_327v8_102 {
   font-weight: 400;
 }
-._itemHeader_1jiqc_78 ._iconTooltipMargin_1jiqc_105 {
+._itemHeader_327v8_78 ._iconTooltipMargin_327v8_105 {
   margin-left: var(--padding-xs);
 }
-._itemHeader_1jiqc_78 ._bold_1jiqc_108 {
+._itemHeader_327v8_78 ._bold_327v8_108 {
   font-weight: bold;
 }
-._header_1jiqc_77 {
+._header_327v8_77 {
   padding: var(--padding);
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
 }
-._toggleNarrow_1jiqc_117 {
+._toggleNarrow_327v8_117 {
   margin-right: 16px;
   margin-left: -5px;
   color: #c8c8c8;
@@ -2539,16 +2539,16 @@ html[data-theme='dark'] {
   width: 22px;
   justify-content: center;
 }
-._toggleNarrow_1jiqc_117:hover {
+._toggleNarrow_327v8_117:hover {
   color: var(--color-text-primary-hover);
 }
-._toggleNarrow_1jiqc_117:active {
+._toggleNarrow_327v8_117:active {
   color: var(--color-text-primary-active);
 }
-._narrow_1jiqc_81 ._toggleNarrow_1jiqc_117 {
+._narrow_327v8_81 ._toggleNarrow_327v8_117 {
   transform: scaleX(-1);
 }
-._drag_1jiqc_135 {
+._drag_327v8_135 {
   color: var(--color-text-faint);
   display: flex;
   align-items: center;
@@ -2559,28 +2559,28 @@ html[data-theme='dark'] {
   height: 19px;
   width: 19px;
 }
-._drag_1jiqc_135:hover {
+._drag_327v8_135:hover {
   color: var(--color-text-primary-hover);
 }
-._drag_1jiqc_135:active {
+._drag_327v8_135:active {
   color: var(--color-text-primary-active);
 }
-._list_1jiqc_152 {
+._list_327v8_152 {
   flex-shrink: 0;
   background: var(--color-background);
 }
-._list_1jiqc_152._bordered_1jiqc_156:first-child,
-._list_1jiqc_152._bordered_1jiqc_156:first-child > :first-child {
+._list_327v8_152._bordered_327v8_156:first-child,
+._list_327v8_152._bordered_327v8_156:first-child > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-._list_1jiqc_152._bordered_1jiqc_156:last-child,
-._list_1jiqc_152._bordered_1jiqc_156:last-child > :last-child {
+._list_327v8_152._bordered_327v8_156:last-child,
+._list_327v8_152._bordered_327v8_156:last-child > :last-child {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
   border-bottom: 0;
 }
-._item_1jiqc_78 {
+._item_327v8_78 {
   color: inherit;
   display: block;
   transition: background-color 0.2s;
@@ -2591,7 +2591,7 @@ html[data-theme='dark'] {
   overflow-wrap: break-word;
   hyphens: auto;
 }
-._item_1jiqc_78:not(._heading_1jiqc_78):after {
+._item_327v8_78:not(._heading_327v8_78):after {
   content: '';
   position: absolute;
   left: 0;
@@ -2602,78 +2602,83 @@ html[data-theme='dark'] {
   border-bottom-left-radius: inherit;
   transition: background 0.3s, width 0.3s;
 }
-._item_1jiqc_78._action_1jiqc_189 {
+._item_327v8_78._action_327v8_189 {
   cursor: pointer;
 }
-._item_1jiqc_78._action_1jiqc_189:not(._active_1jiqc_192):hover {
+._item_327v8_78._action_327v8_189:not(._active_327v8_192):hover {
   background: var(--color-background-listitem-hover);
 }
-._item_1jiqc_78._action_1jiqc_189:not(._active_1jiqc_192):hover:after {
+._item_327v8_78._action_327v8_189:not(._active_327v8_192):hover:after {
   width: 5px;
   background: rgba(0, 0, 0, 0.1);
 }
-._item_1jiqc_78._indented_1jiqc_199:after {
+._item_327v8_78._indented_327v8_199:after {
   width: 3px;
   background: rgba(0, 0, 0, 0.1);
 }
-._item_1jiqc_78._active_1jiqc_192 {
+._item_327v8_78._active_327v8_192 {
   cursor: default;
   position: relative;
   z-index: 1;
   background: var(--color-background-listitem-active);
 }
-._item_1jiqc_78._active_1jiqc_192:after {
+._item_327v8_78._active_327v8_192:after {
   background: var(--color-background-primary) !important;
 }
-._item_1jiqc_78._disabled_1jiqc_212 {
+._item_327v8_78._disabled_327v8_212 {
   color: var(--color-text-faint);
   pointer-events: none;
 }
-._item_1jiqc_78._heading_1jiqc_78 {
+._item_327v8_78._heading_327v8_78 {
   color: var(--color-text-muted);
   background-color: var(--color-background-cardheader);
 }
-._item_1jiqc_78._heading_1jiqc_78._action_1jiqc_189:hover {
+._item_327v8_78._heading_327v8_78._action_327v8_189:hover {
   color: var(--color-text-primary-hover);
 }
-._item_1jiqc_78 ._label_1jiqc_223 {
-  display: flex;
-  align-items: center;
+._item_327v8_78 ._label_327v8_223 {
   margin-right: var(--padding-xs);
   flex-shrink: 0;
+  width: var(--size-sm);
+  height: var(--size-sm);
+  margin-top: calc(var(--line-height) / 2 - var(--size-sm) / 2);
+  margin-bottom: calc(var(--line-height) / 2 - var(--size-sm) / 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-._item_1jiqc_78 ._details_1jiqc_229,
-._item_1jiqc_78 ._metadata_1jiqc_230 {
+._item_327v8_78 ._details_327v8_234,
+._item_327v8_78 ._metadata_327v8_235 {
   display: block;
   width: 100%;
   font-weight: normal;
 }
-._item_1jiqc_78 ._metadata_1jiqc_230 {
+._item_327v8_78 ._metadata_327v8_235 {
   color: var(--color-text-muted);
 }
-._item_1jiqc_78 ._itemContent_1jiqc_238 {
+._item_327v8_78 ._itemContent_327v8_243 {
   padding: 0 var(--padding) var(--padding-sm);
   cursor: auto;
 }
-._item_1jiqc_78 ._itemContent_1jiqc_238:empty {
+._item_327v8_78 ._itemContent_327v8_243:empty {
   padding: inherit;
 }
-._indentIcon_1jiqc_245 {
+._indentIcon_327v8_250 {
   color: var(--color-text-faint);
   flex-shrink: 0;
   margin-right: var(--padding-xxs);
 }
-._expandIcon_1jiqc_250 {
+._expandIcon_327v8_255 {
   flex-shrink: 0;
   position: relative;
   display: flex;
   height: var(--line-height);
   margin-right: var(--padding-xs);
 }
-._expandIcon_1jiqc_250._expanded_1jiqc_257 svg {
+._expandIcon_327v8_255._expanded_327v8_262 svg {
   transform: rotate(90deg);
 }
-._right_1jiqc_260 {
+._right_327v8_265 {
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -2681,24 +2686,24 @@ html[data-theme='dark'] {
   margin-bottom: calc((var(--line-height) - var(--size-sm)) / 2);
   min-height: var(--size-sm);
 }
-._actions_1jiqc_268 {
+._actions_327v8_273 {
   margin-left: var(--padding-xs);
   display: flex;
   align-items: center;
 }
-._scrollableList_1jiqc_273 {
+._scrollableList_327v8_278 {
   height: 100%;
   overflow-y: auto;
   scroll-behavior: smooth;
 }
-._hideScrollbar_1jiqc_67 {
+._hideScrollbar_327v8_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbar_1jiqc_67::-webkit-scrollbar {
+._hideScrollbar_327v8_67::-webkit-scrollbar {
   display: none;
 }
 ._loader_477i5_1 {

package/dist/index.d.ts

@@ -158,7 +158,7 @@ export declare interface IActionProps {
 export declare interface IBadgeProps {
     children?: ReactNode;
     color?: string;
-    title?: TStringOrNumber | null;
+    title?: TStringOrNumber | ReactNode | null;
     dot?: boolean;
     margin?: TStringOrNumber | null;
     small?: boolean;
@@ -517,7 +517,8 @@ export declare interface IInputProps {
 
 declare interface ILabel {
     color: string;
-    value: string;
+    small?: boolean;
+    value: TStringOrNumber | ReactNode;
 }
 
 declare interface ILabelIcon {
@@ -732,7 +733,7 @@ export declare interface IMenuProps {
 
 declare interface IMenuSection {
     type: TMenuType | string;
-    label?: TStringNumberNull;
+    label?: ReactNode;
     icon?: string | ReactNode;
     onClick?: TFunction;
     testId?: string;
@@ -1454,6 +1455,10 @@ export declare interface ITreeProps {
     treeRef?: RefObject<any>;
     itemHasChild?: (node: NodeModel<any>) => boolean;
     onItemToggle?: (node: NodeModel<any>, isOpen: boolean) => void;
+    icons?: {
+        expand: React_2.ReactNode;
+        collapse: React_2.ReactNode;
+    };
 }
 
 export declare const Label: ({ label, width, helpText, helpTextMaxWidth, onClickHelp, lock, info, libraryIcon, labelLeft, }: ILabelProps) => JSX_2.Element;
@@ -1632,7 +1637,7 @@ export declare const Tooltip: ({ children, text, error, placement, possiblePlace
 
 export declare const TopBar: ({ title, appSwitcher, content, contentRight, warning, height, fixedPosition, }: ITopBarProps) => JSX_2.Element;
 
-export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, treeRef, itemHasChild, onItemToggle, }: ITreeProps) => JSX_2.Element;
+export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, treeRef, itemHasChild, onItemToggle, icons, }: ITreeProps) => JSX_2.Element;
 
 export declare enum TriggerType {
     TEXT = "Text",

package/dist/index.html

@@ -1 +1 @@
-<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-4b9fed02.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-c3bc1333.css"></head><body><div id="content"></div></body>
+<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-6c3715e0.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-22dccc68.css"></head><body><div id="content"></div></body>

package/dist/index.js

@@ -26105,43 +26105,43 @@ var InfiniteScroll = (
     return InfiniteScroll2;
   }(Component$1)
 );
-const inputInTable$8 = "_inputInTable_1jiqc_1";
-const inputHover$8 = "_inputHover_1jiqc_13";
-const inputFocus$8 = "_inputFocus_1jiqc_18";
-const inputError$8 = "_inputError_1jiqc_25";
-const inputWarning$8 = "_inputWarning_1jiqc_26";
-const inputDisabled$8 = "_inputDisabled_1jiqc_61";
-const hideScrollbars$8 = "_hideScrollbars_1jiqc_67";
-const header$1 = "_header_1jiqc_77";
-const headerTitle = "_headerTitle_1jiqc_77";
-const heading$3 = "_heading_1jiqc_78";
-const itemHeader = "_itemHeader_1jiqc_78";
-const narrow = "_narrow_1jiqc_81";
-const stickyHeader = "_stickyHeader_1jiqc_85";
-const title$3 = "_title_1jiqc_96";
-const name = "_name_1jiqc_102";
-const iconTooltipMargin = "_iconTooltipMargin_1jiqc_105";
-const bold = "_bold_1jiqc_108";
-const toggleNarrow = "_toggleNarrow_1jiqc_117";
-const drag$1 = "_drag_1jiqc_135";
-const list$1 = "_list_1jiqc_152";
-const bordered$1 = "_bordered_1jiqc_156";
-const item$4 = "_item_1jiqc_78";
-const action = "_action_1jiqc_189";
-const active$3 = "_active_1jiqc_192";
-const indented = "_indented_1jiqc_199";
-const disabled$5 = "_disabled_1jiqc_212";
-const label$6 = "_label_1jiqc_223";
-const details$2 = "_details_1jiqc_229";
-const metadata = "_metadata_1jiqc_230";
-const itemContent = "_itemContent_1jiqc_238";
-const indentIcon = "_indentIcon_1jiqc_245";
-const expandIcon = "_expandIcon_1jiqc_250";
-const expanded = "_expanded_1jiqc_257";
-const right$4 = "_right_1jiqc_260";
-const actions = "_actions_1jiqc_268";
-const scrollableList = "_scrollableList_1jiqc_273";
-const hideScrollbar = "_hideScrollbar_1jiqc_67";
+const inputInTable$8 = "_inputInTable_327v8_1";
+const inputHover$8 = "_inputHover_327v8_13";
+const inputFocus$8 = "_inputFocus_327v8_18";
+const inputError$8 = "_inputError_327v8_25";
+const inputWarning$8 = "_inputWarning_327v8_26";
+const inputDisabled$8 = "_inputDisabled_327v8_61";
+const hideScrollbars$8 = "_hideScrollbars_327v8_67";
+const header$1 = "_header_327v8_77";
+const headerTitle = "_headerTitle_327v8_77";
+const heading$3 = "_heading_327v8_78";
+const itemHeader = "_itemHeader_327v8_78";
+const narrow = "_narrow_327v8_81";
+const stickyHeader = "_stickyHeader_327v8_85";
+const title$3 = "_title_327v8_96";
+const name = "_name_327v8_102";
+const iconTooltipMargin = "_iconTooltipMargin_327v8_105";
+const bold = "_bold_327v8_108";
+const toggleNarrow = "_toggleNarrow_327v8_117";
+const drag$1 = "_drag_327v8_135";
+const list$1 = "_list_327v8_152";
+const bordered$1 = "_bordered_327v8_156";
+const item$4 = "_item_327v8_78";
+const action = "_action_327v8_189";
+const active$3 = "_active_327v8_192";
+const indented = "_indented_327v8_199";
+const disabled$5 = "_disabled_327v8_212";
+const label$6 = "_label_327v8_223";
+const details$2 = "_details_327v8_234";
+const metadata = "_metadata_327v8_235";
+const itemContent = "_itemContent_327v8_243";
+const indentIcon = "_indentIcon_327v8_250";
+const expandIcon = "_expandIcon_327v8_255";
+const expanded = "_expanded_327v8_262";
+const right$4 = "_right_327v8_265";
+const actions = "_actions_327v8_273";
+const scrollableList = "_scrollableList_327v8_278";
+const hideScrollbar = "_hideScrollbar_327v8_67";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -26217,7 +26217,7 @@ const ListHeading = forwardRef(
   }
 );
 const Label$1 = ({ label: label2 }) => {
-  return label2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: listStyles.label, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { color: label2.color, title: label2.value }) }) : null;
+  return label2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: listStyles.label, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { color: label2.color, title: label2.value, small: label2.small }) }) : null;
 };
 const Name = ({ name: name2, icon: icon2, testId }) => {
   const newIcon = icon2 && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2.icon, color: icon2.color || "#db2828" });
@@ -77286,7 +77286,8 @@ const TreeItem = ({
   isOpen: isOpen2,
   onToggle,
   hasChild,
-  draggable: draggable2
+  draggable: draggable2,
+  icons: icons2
 }) => {
   const { id: id2, data } = node2;
   const { active: active2, testId, onClick, actions: actions2 = [] } = data;
@@ -77324,7 +77325,7 @@ const TreeItem = ({
                 colored: isOpen2 ? true : Color.MUTED,
                 small: true,
                 round: true,
-                icon: isOpen2 ? IconType.COLLAPSE : IconType.EXPAND,
+                icon: isOpen2 ? (icons2 == null ? void 0 : icons2.collapse) || IconType.COLLAPSE : (icons2 == null ? void 0 : icons2.expand) || IconType.EXPAND,
                 onClick: handleToggle
               }
             ) }),
@@ -77347,7 +77348,8 @@ const Tree = ({
   isInitialOpen = false,
   treeRef,
   itemHasChild,
-  onItemToggle
+  onItemToggle,
+  icons: icons2
 }) => {
   var _a;
   const handleDrop = (newTree) => {
@@ -77410,7 +77412,8 @@ const Tree = ({
                     onItemToggle == null ? void 0 : onItemToggle(node2, !isOpen2);
                     onToggle();
                   },
-                  draggable: draggable2
+                  draggable: draggable2,
+                  icons: icons2
                 }
               );
             },