@oliasoft-open-source/react-ui-library 4.4.8-beta-1 → 4.4.9-beta-1

package/README.md

@@ -2416,19 +2416,20 @@ The `PopConfirm` component creates a popover with confirmation buttons, typicall
 
 ### Props
 
-| Prop                 | Description                                                                                   | Default Value          |
-|----------------------|-----------------------------------------------------------------------------------------------|------------------------|
-| `children`           | The content that triggers the popover when clicked.                                           | -            |
-| `placement`          | The placement of the popover relative to the trigger element.                                 | `'top-center'`         |
-| `closeOnOutsideClick`| If `true`, the popover closes when clicked outside of it.                                     | `true`                 |
-| `fullWidth`          | If `true`, the popover will take the full width of its container.                             | `false`                |
-| `title`              | The title displayed in the popover.                                                           | `''`                   |
-| `cancelText`         | The text for the cancel button.                                                               | `'Cancel'`             |
-| `onClickCancel`      | The function called when the cancel button is clicked.                                         | Closes the popover     |
-| `okText`             | The text for the OK button.                                                                   | `'Ok'`                 |
-| `onClickOk`          | The function called when the OK button is clicked.                                             | `() => {}`             |
-| `overflowContainer`  | If `true`, the popover will overflow its container if necessary.                               | `false`                |
-| `testId`             | Optional test id for testing purposes.                                                         | -            |
+| Prop                 | Description                                                       | Default Value      |
+|----------------------|-------------------------------------------------------------------|--------------------|
+| `children`           | The content that triggers the popover when clicked.               | -                  |
+| `placement`          | The placement of the popover relative to the trigger element.     | `'top-center'`     |
+| `closeOnOutsideClick`| If `true`, the popover closes when clicked outside of it.         | `true`             |
+| `fullWidth`          | If `true`, the popover will take the full width of its container. | `false`            |
+| `title`              | The title displayed in the popover.                               | `''`               |
+| `cancelText`         | The text for the cancel button.                                   | `'Cancel'`         |
+| `onClickCancel`      | The function called when the cancel button is clicked.            | Closes the popover |
+| `okText`             | The text for the OK button.                                       | `'Ok'`             |
+| `onClickOk`          | The function called when the OK button is clicked.                | `() => {}`         |
+| `disableConfirmButton`| If `true`, disable confirm button.                               | `false`            |
+| `overflowContainer`  | If `true`, the popover will overflow its container if necessary.  | `false`            |
+| `testId`             | Optional test id for testing purposes.                            | -                  |
 
 ### Usage Example
 

package/dist/assets/{index-dpmmAegk.css → index-AkeNwthw.css}

@@ -875,8 +875,7 @@ a {
 
 :root {
   color-scheme: initial;
-  --font-family: 'Noto Sans', sans-serif;
-  --font-family-heading: 'Roobert', 'Noto Sans', sans-serif;
+  --font-family: 'Roobert', 'Noto Sans', sans-serif;
   --font-size-xl: 17px;
   --font-size-lg: 15px;
   --font-size: 13px;
@@ -2108,7 +2107,7 @@ html[data-theme='dark'] {
 ._link_11ofj_25:active {
   color: var(--color-text-primary-active);
 }
-._heading_1fhsl_1 {
+._heading_yhdiy_1 {
   color: var(--color-text);
   line-height: var(--size-sm);
   font-weight: bold;
@@ -2117,21 +2116,20 @@ html[data-theme='dark'] {
   user-select: none;
   padding: 0;
 }
-._heading_1fhsl_1._top_1fhsl_10 {
+._heading_yhdiy_1._top_yhdiy_10 {
   font-size: var(--font-size-xl);
   margin-bottom: var(--padding-sm);
-  font-family: var(--font-family-heading);
 }
-._heading_1fhsl_1:not(._top_1fhsl_10) {
+._heading_yhdiy_1:not(._top_yhdiy_10) {
   font-size: var(--font-size);
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-wide);
 }
-._icons_1fhsl_21 {
+._icons_yhdiy_20 {
   display: inline-flex;
 }
-._icons_1fhsl_21 > * {
+._icons_yhdiy_20 > * {
   margin-left: var(--padding-xxs);
 }
 ._dialog_18g0k_1 {
@@ -9621,7 +9619,7 @@ tbody tr {
 ._striped_y9car_188 tbody tr:nth-child(even) {
   background-color: var(--color-background-table-row-tinted);
 }
-._title_11pbp_1 {
+._title_zn5s7_1 {
   background-color: var(--color-background-cardheader);
   border-bottom: 1px solid var(--color-border);
   padding: var(--padding-xxs) var(--padding-sm);
@@ -9632,6 +9630,7 @@ tbody tr {
   width: 100%;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
+  flex-shrink: 0;
 }
 ._footer_4sumy_1 {
   background-color: var(--color-background-table-header);
@@ -10944,7 +10943,7 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   --color-link-border-hover: var(--color-neutral-600);
   --border-topbar: 1px solid var(--color-border);
 }
-._topbar_1xxzq_11 {
+._topbar_gmfjn_11 {
   top: 0;
   left: 0;
   z-index: var(--zindex-topbar);
@@ -10954,15 +10953,15 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   background: var(--color-background-raised);
   display: flex;
 }
-._topbar_1xxzq_11._fixed_1xxzq_21 {
+._topbar_gmfjn_11._fixed_gmfjn_21 {
   position: fixed;
 }
 @media print {
-  ._topbar_1xxzq_11 {
+  ._topbar_gmfjn_11 {
     display: none !important;
   }
 }
-._appSwitcher_1xxzq_29 {
+._appSwitcher_gmfjn_29 {
   color: white;
   display: flex;
   align-items: center;
@@ -10974,26 +10973,26 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   font-size: var(--size);
   position: relative;
 }
-._appSwitcher_1xxzq_29:hover {
+._appSwitcher_gmfjn_29:hover {
   background-color: var(--color-neutral-750);
 }
-._appSwitcher_1xxzq_29:active {
+._appSwitcher_gmfjn_29:active {
   background-color: var(--color-neutral-800);
 }
-[data-theme='dark'] ._appSwitcher_1xxzq_29 {
+[data-theme='dark'] ._appSwitcher_gmfjn_29 {
   background-color: var(--color-neutral-900);
 }
-[data-theme='dark'] ._appSwitcher_1xxzq_29:hover {
+[data-theme='dark'] ._appSwitcher_gmfjn_29:hover {
   background-color: var(--color-neutral-950);
 }
-[data-theme='dark'] ._appSwitcher_1xxzq_29:active {
+[data-theme='dark'] ._appSwitcher_gmfjn_29:active {
   background-color: var(--color-neutral-1000);
 }
-._appSwitcher_1xxzq_29 > * {
+._appSwitcher_gmfjn_29 > * {
   position: relative;
   z-index: 1;
 }
-._appSwitcher_1xxzq_29:after {
+._appSwitcher_gmfjn_29:after {
   content: '';
   position: absolute;
   inset: 0;
@@ -11002,13 +11001,13 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   transition: opacity 0.2s;
   opacity: 0.75;
 }
-._appSwitcher_1xxzq_29:hover:after {
+._appSwitcher_gmfjn_29:hover:after {
   opacity: 0.75;
 }
-._appSwitcher_1xxzq_29:active:after {
+._appSwitcher_gmfjn_29:active:after {
   opacity: 0.5;
 }
-._title_1xxzq_75 {
+._title_gmfjn_75 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11016,55 +11015,55 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   padding: 0;
   position: relative;
 }
-._title_1xxzq_75 img,
-._title_1xxzq_75 svg {
+._title_gmfjn_75 img,
+._title_gmfjn_75 svg {
   max-height: var(--size-lg);
   max-width: 300px;
   height: auto;
   width: auto;
   color: var(--color-text);
 }
-._title_1xxzq_75 ._logo_1xxzq_91 {
+._title_gmfjn_75 ._logo_gmfjn_91 {
   display: flex;
 }
-._title_1xxzq_75 ._label_1xxzq_94 {
+._title_gmfjn_75 ._label_gmfjn_94 {
   color: var(--color-text);
   white-space: nowrap;
   font-weight: bold;
 }
-._brand_1xxzq_99 {
+._brand_gmfjn_99 {
   padding: 0;
   position: relative;
   flex-shrink: 0;
 }
-._version_1xxzq_104 {
+._version_gmfjn_104 {
   line-height: 1;
   position: absolute;
   right: 0;
   bottom: 100%;
   font-size: var(--font-size-xs);
 }
-._left_1xxzq_111,
-._right_1xxzq_112 {
+._left_gmfjn_111,
+._right_gmfjn_112 {
   display: flex;
   min-width: 0;
 }
-._left_1xxzq_111 {
+._left_gmfjn_111 {
   gap: var(--padding);
   padding-left: var(--padding);
 }
-._right_1xxzq_112 {
+._right_gmfjn_112 {
   margin-left: auto;
   flex-shrink: 0;
   padding-right: var(--padding-xs);
   gap: var(--padding-xs);
 }
-._item_1xxzq_126,
-._link_1xxzq_127 {
+._item_gmfjn_126,
+._link_gmfjn_127 {
   align-items: center;
   display: flex;
 }
-._item_1xxzq_126 {
+._item_gmfjn_126 {
   position: relative;
   transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
   user-select: none;
@@ -11072,44 +11071,43 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   min-width: 0;
   max-width: 50vw;
 }
-._item_1xxzq_126._button_1xxzq_139,
-._item_1xxzq_126._menu_1xxzq_140 {
+._item_gmfjn_126._button_gmfjn_139,
+._item_gmfjn_126._menu_gmfjn_140 {
   flex-shrink: 0;
 }
-._label_1xxzq_94 {
+._label_gmfjn_94 {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   max-width: 100%;
 }
-._link_1xxzq_127 {
+._link_gmfjn_127 {
   text-decoration: none;
   color: var(--color-text-primary);
   cursor: pointer;
   max-width: 100%;
   height: 100%;
   font-size: var(--font-size-lg);
-  font-family: var(--font-family-heading);
 }
-._link_1xxzq_127 svg {
+._link_gmfjn_127 svg {
   margin-right: var(--padding-xxs);
   flex-shrink: 0;
 }
-._link_1xxzq_127:hover {
+._link_gmfjn_127:hover {
   color: var(--color-text-primary-hover);
 }
-._link_1xxzq_127:active {
+._link_gmfjn_127:active {
   color: var(--color-text-primary-active);
 }
-._link_1xxzq_127._active_1xxzq_169 {
+._link_gmfjn_127._active_gmfjn_168 {
   color: var(--color-text);
 }
-._link_1xxzq_127:hover,
-._link_1xxzq_127._active_1xxzq_169 {
+._link_gmfjn_127:hover,
+._link_gmfjn_127._active_gmfjn_168 {
   background-color: transparent;
 }
-._link_1xxzq_127:after {
+._link_gmfjn_127:after {
   content: '';
   position: absolute;
   left: 0;
@@ -11117,17 +11115,17 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   bottom: 0;
   border-bottom: 1px solid transparent;
 }
-._link_1xxzq_127:hover:after {
+._link_gmfjn_127:hover:after {
   border-color: var(--color-link-border-hover);
 }
-._link_1xxzq_127._active_1xxzq_169:after {
+._link_gmfjn_127._active_gmfjn_168:after {
   border-color: var(--color-background-primary);
 }
-._link_1xxzq_127[disabled] {
+._link_gmfjn_127[disabled] {
   pointer-events: none;
   color: var(--color-text-faint);
 }
-._alert_1xxzq_194 {
+._alert_gmfjn_193 {
   background-color: var(--color-background-primary);
   color: white;
   text-align: center;

package/dist/assets/{index-EbNBJwhT.js → index-UlXF8M5L.js}

@@ -18318,8 +18318,10 @@ const Button$1 = ({
   warning: warning2,
   testId,
   tooltip: tooltip2,
-  inverted: inverted2 = false
+  inverted: inverted2 = false,
   // *Deprecated*
+  component: Component2 = "button",
+  url
 }) => {
   const disabledContext = reactExports.useContext(DisabledContext);
   const color2 = (() => {
@@ -18353,7 +18355,7 @@ const Button$1 = ({
     return "";
   })();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonTooltipWrapper, { tooltip: tooltip2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "button",
+    Component2,
     {
       type: type2 === ButtonType.SUBMIT ? ButtonType.SUBMIT : ButtonType.BUTTON,
       className: cx$2(
@@ -18377,6 +18379,7 @@ const Button$1 = ({
       ...title2 ? { title: title2 } : {},
       style: { width: width2 },
       "data-testid": testId,
+      to: url,
       children: [
         icon2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: buttonStyles.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }),
         loading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: buttonStyles.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -20533,9 +20536,9 @@ const Divider = ({
     children: typeof children === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { muted: true, children }) : children
   }
 );
-const heading$4 = "_heading_1fhsl_1";
-const top$1 = "_top_1fhsl_10";
-const icons$2 = "_icons_1fhsl_21";
+const heading$4 = "_heading_yhdiy_1";
+const top$1 = "_top_yhdiy_10";
+const icons$2 = "_icons_yhdiy_20";
 const styles$G = {
   heading: heading$4,
   top: top$1,
@@ -26147,10 +26150,12 @@ reactExports.forwardRef(
   ({ items: items2, expanding, invokeEditOnRowClick, provided, draggable }, listRowRefs) => {
     const disabledContext = reactExports.useContext(DisabledContext);
     const listElement = (index2, provided2, item2, indent, hasOnClick, edit2) => {
+      const Component2 = item2.component || "a";
       return /* @__PURE__ */ reactExports.createElement(
-        "a",
+        Component2,
         {
           href: item2.url,
+          to: item2.url,
           ref: provided2 == null ? void 0 : provided2.innerRef,
           ...provided2.draggableProps,
           style: getItemStyle(provided2.draggableProps, item2),
@@ -57183,7 +57188,7 @@ const styles$d = {
   table,
   striped
 };
-const title$2 = "_title_11pbp_1";
+const title$2 = "_title_zn5s7_1";
 const styles$c = {
   title: title$2
 };
@@ -68323,9 +68328,20 @@ const TextLink = ({
   href = void 0,
   target = void 0,
   testId,
-  onClick
+  onClick,
+  component: Component2 = "a"
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, target, onClick, "data-testid": testId, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { link: true, children }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Component2,
+    {
+      href,
+      to: href,
+      target,
+      onClick,
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { link: true, children })
+    }
+  );
 };
 const inputInTable = "_inputInTable_66zck_1";
 const inputHover = "_inputHover_66zck_13";
@@ -68642,22 +68658,22 @@ const styles$6 = {
   noMargin,
   helpIconEnabled
 };
-const topbar = "_topbar_1xxzq_11";
-const fixed = "_fixed_1xxzq_21";
-const appSwitcher = "_appSwitcher_1xxzq_29";
-const title = "_title_1xxzq_75";
-const logo = "_logo_1xxzq_91";
-const label = "_label_1xxzq_94";
-const brand = "_brand_1xxzq_99";
-const version = "_version_1xxzq_104";
-const left = "_left_1xxzq_111";
-const right = "_right_1xxzq_112";
-const item = "_item_1xxzq_126";
-const link$1 = "_link_1xxzq_127";
-const button = "_button_1xxzq_139";
-const menu = "_menu_1xxzq_140";
-const active = "_active_1xxzq_169";
-const alert = "_alert_1xxzq_194";
+const topbar = "_topbar_gmfjn_11";
+const fixed = "_fixed_gmfjn_21";
+const appSwitcher = "_appSwitcher_gmfjn_29";
+const title = "_title_gmfjn_75";
+const logo = "_logo_gmfjn_91";
+const label = "_label_gmfjn_94";
+const brand = "_brand_gmfjn_99";
+const version = "_version_gmfjn_104";
+const left = "_left_gmfjn_111";
+const right = "_right_gmfjn_112";
+const item = "_item_gmfjn_126";
+const link$1 = "_link_gmfjn_127";
+const button = "_button_gmfjn_139";
+const menu = "_menu_gmfjn_140";
+const active = "_active_gmfjn_168";
+const alert = "_alert_gmfjn_193";
 const styles$5 = {
   topbar,
   fixed,

package/dist/global.css

@@ -878,7 +878,7 @@ a {
   --font-family: 'Roobert', 'Noto Sans', sans-serif;
   --font-size-xl: 17px;
   --font-size-lg: 15px;
-  --font-size: 14px;
+  --font-size: 13px;
   --font-size-sm: 12px;
   --font-size-xs: 11px;
   --line-height: 20px;
@@ -9619,7 +9619,7 @@ tbody tr {
 ._striped_y9car_188 tbody tr:nth-child(even) {
   background-color: var(--color-background-table-row-tinted);
 }
-._title_11pbp_1 {
+._title_zn5s7_1 {
   background-color: var(--color-background-cardheader);
   border-bottom: 1px solid var(--color-border);
   padding: var(--padding-xxs) var(--padding-sm);
@@ -9630,6 +9630,7 @@ tbody tr {
   width: 100%;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
+  flex-shrink: 0;
 }
 ._footer_4sumy_1 {
   background-color: var(--color-background-table-header);

package/dist/index.d.ts

@@ -41,7 +41,7 @@ export declare enum BreadcrumbLinkType {
     CUSTOM = "custom"
 }
 
-export declare const Button: ({ active, basic, colored, disabled, groupOrder, icon, label, loading, name, pill, round, small, styles, width, title, type, onClick, error, warning, testId, tooltip, inverted, }: IButtonProps) => JSX_2.Element;
+export declare const Button: ({ active, basic, colored, disabled, groupOrder, icon, label, loading, name, pill, round, small, styles, width, title, type, onClick, error, warning, testId, tooltip, inverted, component: Component, url, }: IButtonProps) => JSX_2.Element;
 
 export declare const ButtonGroup: (props: IButtonGroupProps) => JSX_2.Element;
 
@@ -198,6 +198,7 @@ export declare interface IButtonGroupProps {
 }
 
 export declare interface IButtonProps {
+    href?: string;
     active?: boolean;
     basic?: boolean;
     colored?: boolean | string;
@@ -220,6 +221,8 @@ export declare interface IButtonProps {
     testId?: string;
     tooltip?: ReactNode | string;
     inverted?: boolean;
+    component?: React_2.ElementType;
+    url?: string;
 }
 
 export declare interface ICardProps {
@@ -658,6 +661,7 @@ declare interface IListItem {
     id?: TStringOrNumber;
     type?: string;
     metaCount?: number;
+    component?: React.ElementType;
 }
 
 export declare interface IListProps {
@@ -979,6 +983,7 @@ export declare interface IPopConfirmProps {
     title?: string;
     cancelText?: string;
     onClickCancel?: (close?: TEmpty) => void;
+    disableConfirmButton?: boolean;
     okText?: string;
     onClickOk?: (close?: TEmpty) => void;
     overflowContainer?: boolean;
@@ -1369,6 +1374,7 @@ export declare interface ITextLinkProps {
     testId?: string;
     onClick?: (e: React_2.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     children?: React_2.ReactNode;
+    component?: React_2.ElementType;
 }
 
 export declare interface ITextProps {
@@ -1577,7 +1583,7 @@ export declare const Page: ({ children, left, padding: paddingProp, scroll, top,
 
 export declare const Pagination: ({ pagination }: IPaginationProps) => JSX_2.Element;
 
-export declare const PopConfirm: ({ children, placement, closeOnOutsideClick, fullWidth, title, cancelText, onClickCancel, okText, onClickOk, overflowContainer, testId, }: IPopConfirmProps) => JSX_2.Element;
+export declare const PopConfirm: ({ children, placement, closeOnOutsideClick, fullWidth, title, cancelText, onClickCancel, okText, onClickOk, disableConfirmButton, overflowContainer, testId, }: IPopConfirmProps) => JSX_2.Element;
 
 export declare const Popover: ({ children, content, placement, closeOnOutsideClick, fullWidth, showCloseButton, testId, disabled, overflowContainer, }: IPopoverProps) => JSX_2.Element;
 
@@ -1658,7 +1664,7 @@ export { Text_2 as Text }
 
 export declare const TextArea: ({ name, value, placeholder, cols, rows, disabled, onChange, onKeyPress, onFocus, onBlur, tabIndex, error, warning, tooltip, maxTooltipWidth, resize, monospace, testId, }: ITextAreaProps) => JSX_2.Element;
 
-export declare const TextLink: ({ children, href, target, testId, onClick, }: ITextLinkProps) => JSX_2.Element;
+export declare const TextLink: ({ children, href, target, testId, onClick, component: Component, }: ITextLinkProps) => JSX_2.Element;
 
 declare type TFileReaderMethod = TInputReaderMethods | string;
 

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-EbNBJwhT.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-dpmmAegk.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-UlXF8M5L.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-AkeNwthw.css"></head><body><div id="content"></div></body>