@oliasoft-open-source/react-ui-library 3.1.0 → 3.1.2

package/dist/global.css

@@ -17600,78 +17600,78 @@ html[data-theme='dark'] {
 /*
   Z-INDEX
 */
-._inputInTable_47zhf_326 {
+._inputInTable_1qv7j_326 {
   background-color: transparent;
   border-radius: inherit !important;
   height: 38px;
   min-height: 100%;
 }
-._inputInTable_47zhf_326:hover,
-._inputInTable_47zhf_326:focus {
+._inputInTable_1qv7j_326:hover,
+._inputInTable_1qv7j_326:focus {
   position: relative;
 }
-._inputInTable_47zhf_326:hover {
+._inputInTable_1qv7j_326:hover {
   z-index: 2;
 }
-._inputInTable_47zhf_326:focus {
+._inputInTable_1qv7j_326:focus {
   z-index: 3;
 }
-._inputFocus_47zhf_342 {
+._inputFocus_1qv7j_342 {
   outline: none !important;
   border: 1px solid var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
 }
-._inputError_47zhf_347,
-._inputWarning_47zhf_348 {
+._inputError_1qv7j_347,
+._inputWarning_1qv7j_348 {
   position: relative;
 }
-._inputError_47zhf_347 {
+._inputError_1qv7j_347 {
   z-index: 2;
   border-color: var(--color-border-error) !important;
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
 }
-._inputError_47zhf_347:hover {
+._inputError_1qv7j_347:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_47zhf_347:focus {
+._inputError_1qv7j_347:focus {
   outline: none !important;
   border: 1px solid var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
 }
-._inputWarning_47zhf_348 {
+._inputWarning_1qv7j_348 {
   z-index: 1;
   border-color: var(--color-border-warning) !important;
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);
 }
-._inputWarning_47zhf_348:hover {
+._inputWarning_1qv7j_348:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_47zhf_348:focus {
+._inputWarning_1qv7j_348:focus {
   outline: none !important;
   border: 1px solid var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
 }
-._inputDisabled_47zhf_379 {
+._inputDisabled_1qv7j_379 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
 }
-._hideScrollbars_47zhf_384 {
+._hideScrollbars_1qv7j_384 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_47zhf_384::-webkit-scrollbar {
+._hideScrollbars_1qv7j_384::-webkit-scrollbar {
   display: none;
 }
-._cellWrapperPadding_47zhf_394 {
+._cellWrapperPadding_1qv7j_394 {
   padding: 9.5px 14px !important;
 }
-._flexBlock_47zhf_397 {
+._flexBlock_1qv7j_397 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -17684,20 +17684,20 @@ html[data-theme='dark'] {
   --color-background-table-header: var(--color-neutral-750);
   --color-background-table-row-tinted: var(--color-neutral-850);
 }
-._scrollWrapper_47zhf_410._bordered_47zhf_410 {
+._scrollWrapper_1qv7j_410._bordered_1qv7j_410 {
   border: 1px solid var(--color-border);
   border-radius: 0.28571429rem;
 }
-._scrollWrapper_47zhf_410._maxHeight_47zhf_414 {
+._scrollWrapper_1qv7j_410._maxHeight_1qv7j_414 {
   display: block;
   overflow-y: auto;
   overflow-x: hidden;
 }
-._scrollWrapper_47zhf_410._maxHeight_47zhf_414 tfoot td {
+._scrollWrapper_1qv7j_410._maxHeight_1qv7j_414 tfoot td {
   position: sticky;
   bottom: 0;
 }
-._table_47zhf_423 {
+._table_1qv7j_423 {
   width: 100%;
   background: var(--color-background-raised);
   box-shadow: none;
@@ -17707,32 +17707,32 @@ html[data-theme='dark'] {
   border-spacing: 0;
   border-radius: inherit;
 }
-._table_47zhf_423 > :first-child {
+._table_1qv7j_423 > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-._table_47zhf_423 > :first-child > :first-child {
+._table_1qv7j_423 > :first-child > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-._table_47zhf_423 > :first-child > :first-child > :first-child {
+._table_1qv7j_423 > :first-child > :first-child > :first-child {
   border-top-left-radius: inherit;
 }
-._table_47zhf_423 > :first-child > :first-child > :last-child {
+._table_1qv7j_423 > :first-child > :first-child > :last-child {
   border-top-right-radius: inherit;
 }
-._table_47zhf_423 > :last-child {
+._table_1qv7j_423 > :last-child {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
-._table_47zhf_423 > :last-child > :last-child {
+._table_1qv7j_423 > :last-child > :last-child {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
-._table_47zhf_423 > :last-child > :last-child > :first-child {
+._table_1qv7j_423 > :last-child > :last-child > :first-child {
   border-bottom-left-radius: inherit;
 }
-._table_47zhf_423 > :last-child > :last-child > :last-child {
+._table_1qv7j_423 > :last-child > :last-child > :last-child {
   border-bottom-right-radius: inherit;
 }
 th,
@@ -17749,7 +17749,8 @@ td:first-child {
   tr {
     height: 36px;
   }
-  td {
+  td,
+  th {
     height: 100%;
   }
 }
@@ -17775,16 +17776,16 @@ td {
 tr:first-child td {
   border-top: none;
 }
-._cellWrapper_47zhf_394 {
+._cellWrapper_1qv7j_394 {
   padding: 9.5px 14px !important;
 }
-._title_47zhf_504,
-._footer_47zhf_505 {
+._title_1qv7j_505,
+._footer_1qv7j_506 {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-._striped_47zhf_510 tbody tr:nth-child(even) {
+._striped_1qv7j_511 tbody tr:nth-child(even) {
   background-color: var(--color-background-table-row-tinted);
 }
 tfoot td {

package/dist/index.js

@@ -24777,7 +24777,8 @@ const Label$1 = ({
 };
 const Name = ({
   name: name2,
-  icon: icon2
+  icon: icon2,
+  testId
 }) => {
   const newIcon = icon2 && /* @__PURE__ */ jsx(Icon, {
     icon: icon2.icon,
@@ -24786,6 +24787,7 @@ const Name = ({
   });
   return /* @__PURE__ */ jsxs("span", {
     className: cx(listStyles.name, listStyles.bold),
+    "data-testid": testId,
     children: [name2, icon2 && icon2.tooltip && icon2.tooltip.text ? /* @__PURE__ */ jsx("span", {
       className: listStyles.iconTooltipMargin,
       children: /* @__PURE__ */ jsx(Tooltip$2, {
@@ -24807,10 +24809,12 @@ Name.propTypes = {
     tooltip: propTypes$1.exports.shape({
       text: propTypes$1.exports.oneOfType([propTypes$1.exports.node, propTypes$1.exports.string])
     })
-  })
+  }),
+  testId: propTypes$1.exports.string
 };
 Name.defaultProps = {
-  icon: null
+  icon: null,
+  testId: void 0
 };
 const MetaContent = ({
   item: item2
@@ -24820,26 +24824,32 @@ const MetaContent = ({
     icon: icon2,
     details: details2,
     metadata: metadata2,
-    invalid
+    invalid,
+    testId
   } = item2;
-  return /* @__PURE__ */ jsxs("span", {
-    className: listStyles.title,
-    children: [invalid ? /* @__PURE__ */ jsx(Badge, {
+  let renderedName = /* @__PURE__ */ jsx(Name, {
+    name: name2,
+    icon: icon2,
+    testId: testId && `${testId}-name`
+  });
+  if (invalid) {
+    renderedName = /* @__PURE__ */ jsx(Badge, {
       small: true,
       margin: "-2px",
       title: "!",
-      children: /* @__PURE__ */ jsx(Name, {
-        name: name2,
-        icon: icon2
-      })
-    }) : /* @__PURE__ */ jsx(Name, {
-      name: name2,
-      icon: icon2
-    }), details2 && /* @__PURE__ */ jsx("span", {
+      children: renderedName
+    });
+  }
+  return /* @__PURE__ */ jsxs("span", {
+    className: listStyles.title,
+    "data-testid": testId,
+    children: [renderedName, details2 && /* @__PURE__ */ jsx("span", {
       className: listStyles.details,
+      "data-testid": testId && `${testId}-details`,
       children: details2
     }), metadata2 && /* @__PURE__ */ jsx("span", {
       className: listStyles.metadata,
+      "data-testid": testId && `${testId}-metadata`,
       children: metadata2
     })]
   });
@@ -25272,7 +25282,8 @@ const Loader = ({
   fullViewPortSize: fullViewPortSize2,
   cover: cover2,
   children,
-  theme
+  theme,
+  testId
 }) => {
   const color = theme === "dark" ? "white" : "inherit";
   const background = theme === "white" ? "var(--color-background-raised)" : theme === "light" ? "var(--color-background)" : "black";
@@ -25284,6 +25295,7 @@ const Loader = ({
       width,
       height
     },
+    "data-testid": testId,
     children: /* @__PURE__ */ jsx("div", {
       className: styles$q.dimmer,
       style: {
@@ -25292,11 +25304,14 @@ const Loader = ({
       },
       children: /* @__PURE__ */ jsxs("div", {
         className: styles$q.content,
+        "data-testid": testId && `${testId}-content`,
         children: [children, text2 !== "" && /* @__PURE__ */ jsx("div", {
           className: styles$q.text,
+          "data-testid": testId && `${testId}-text`,
           children: text2
         }), details2 !== "" && /* @__PURE__ */ jsx("div", {
           className: styles$q.details,
+          "data-testid": testId && `${testId}-details`,
           children: details2
         })]
       })
@@ -25311,6 +25326,7 @@ Loader.defaultProps = {
   text: "",
   details: "",
   children: null,
+  testId: null,
   theme: "dark"
 };
 Loader.propTypes = {
@@ -25321,6 +25337,7 @@ Loader.propTypes = {
   text: propTypes$1.exports.string,
   details: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.node]),
   children: propTypes$1.exports.node,
+  testId: propTypes$1.exports.string,
   theme: propTypes$1.exports.string
 };
 const inputInTable$6 = "_inputInTable_1eo2f_326";
@@ -34752,22 +34769,22 @@ Spacer.propTypes = {
   width: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.number]),
   flex: propTypes$1.exports.bool
 };
-const inputInTable$2 = "_inputInTable_47zhf_326";
-const inputFocus$2 = "_inputFocus_47zhf_342";
-const inputError$2 = "_inputError_47zhf_347";
-const inputWarning$2 = "_inputWarning_47zhf_348";
-const inputDisabled$2 = "_inputDisabled_47zhf_379";
-const hideScrollbars$2 = "_hideScrollbars_47zhf_384";
-const cellWrapperPadding$3 = "_cellWrapperPadding_47zhf_394";
-const flexBlock$3 = "_flexBlock_47zhf_397";
-const scrollWrapper = "_scrollWrapper_47zhf_410";
-const bordered = "_bordered_47zhf_410";
-const maxHeight = "_maxHeight_47zhf_414";
-const table = "_table_47zhf_423";
-const cellWrapper$3 = "_cellWrapper_47zhf_394";
-const title$2 = "_title_47zhf_504";
-const footer$1 = "_footer_47zhf_505";
-const striped = "_striped_47zhf_510";
+const inputInTable$2 = "_inputInTable_1qv7j_326";
+const inputFocus$2 = "_inputFocus_1qv7j_342";
+const inputError$2 = "_inputError_1qv7j_347";
+const inputWarning$2 = "_inputWarning_1qv7j_348";
+const inputDisabled$2 = "_inputDisabled_1qv7j_379";
+const hideScrollbars$2 = "_hideScrollbars_1qv7j_384";
+const cellWrapperPadding$3 = "_cellWrapperPadding_1qv7j_394";
+const flexBlock$3 = "_flexBlock_1qv7j_397";
+const scrollWrapper = "_scrollWrapper_1qv7j_410";
+const bordered = "_bordered_1qv7j_410";
+const maxHeight = "_maxHeight_1qv7j_414";
+const table = "_table_1qv7j_423";
+const cellWrapper$3 = "_cellWrapper_1qv7j_394";
+const title$2 = "_title_1qv7j_505";
+const footer$1 = "_footer_1qv7j_506";
+const striped = "_striped_1qv7j_511";
 const styles$a = {
   inputInTable: inputInTable$2,
   inputFocus: inputFocus$2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Reusable UI components for React projects",
   "module": "./dist/index.js",
   "main": "./dist/index.js",