@oliasoft-open-source/react-ui-library 3.1.11 → 3.1.13

package/dist/global.css

@@ -18798,187 +18798,188 @@ html[data-theme='dark'] {
 /*
   Z-INDEX
 */
-._inputInTable_h7a1c_326 {
+._inputInTable_16twm_326 {
   background-color: transparent;
   border-radius: inherit !important;
   height: 38px;
   min-height: 100%;
 }
-._inputInTable_h7a1c_326:hover,
-._inputInTable_h7a1c_326:focus {
+._inputInTable_16twm_326:hover,
+._inputInTable_16twm_326:focus {
   position: relative;
 }
-._inputInTable_h7a1c_326:hover {
+._inputInTable_16twm_326:hover {
   z-index: 2;
 }
-._inputInTable_h7a1c_326:focus {
+._inputInTable_16twm_326:focus {
   z-index: 3;
 }
-._inputFocus_h7a1c_342 {
+._inputFocus_16twm_342 {
   outline: none !important;
   border: 1px solid var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
 }
-._inputError_h7a1c_347,
-._inputWarning_h7a1c_348 {
+._inputError_16twm_347,
+._inputWarning_16twm_348 {
   position: relative;
 }
-._inputError_h7a1c_347 {
+._inputError_16twm_347 {
   z-index: 2;
   border-color: var(--color-border-error) !important;
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
 }
-._inputError_h7a1c_347:hover {
+._inputError_16twm_347:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_h7a1c_347:focus {
+._inputError_16twm_347:focus {
   outline: none !important;
   border: 1px solid var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
 }
-._inputWarning_h7a1c_348 {
+._inputWarning_16twm_348 {
   z-index: 1;
   border-color: var(--color-border-warning) !important;
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);
 }
-._inputWarning_h7a1c_348:hover {
+._inputWarning_16twm_348:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_h7a1c_348:focus {
+._inputWarning_16twm_348:focus {
   outline: none !important;
   border: 1px solid var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
 }
-._inputDisabled_h7a1c_379 {
+._inputDisabled_16twm_379 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
 }
-._hideScrollbars_h7a1c_384 {
+._hideScrollbars_16twm_384 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_h7a1c_384::-webkit-scrollbar {
+._hideScrollbars_16twm_384::-webkit-scrollbar {
   display: none;
 }
-._cellWrapperPadding_h7a1c_394 {
+._cellWrapperPadding_16twm_394 {
   padding: 9.5px 14px !important;
 }
-._flexBlock_h7a1c_397 {
+._flexBlock_16twm_397 {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-._cellWrapper_h7a1c_394 {
+._cellWrapper_16twm_394 {
   padding: 9.5px 14px !important;
 }
-._cellWrapper_h7a1c_394 a {
+._cellWrapper_16twm_394 a {
+  cursor: pointer;
   color: var(--color-text-primary) !important;
 }
-._cellWrapper_h7a1c_394 a:hover {
+._cellWrapper_16twm_394 a:hover {
   color: var(--color-text-primary-hover) !important;
 }
-._cellWrapper_h7a1c_394 a:active {
+._cellWrapper_16twm_394 a:active {
   color: var(--color-text-primary-active) !important;
 }
-._cellWrapper_h7a1c_394 a._disabledLink_h7a1c_414 {
+._cellWrapper_16twm_394 a._disabledLink_16twm_415 {
   color: var(--color-text-faint) !important;
   cursor: default !important;
 }
-._inputWrapper_h7a1c_418 {
+._inputWrapper_16twm_419 {
   margin: -1px;
   height: calc(100% + 2px);
   border-radius: inherit;
 }
-._inputWrapper_h7a1c_418 > span,
-._inputWrapper_h7a1c_418 > span > span,
-._inputWrapper_h7a1c_418 > span > span > div {
+._inputWrapper_16twm_419 > span,
+._inputWrapper_16twm_419 > span > span,
+._inputWrapper_16twm_419 > span > span > div {
   height: 100%;
   border-radius: inherit;
 }
-._inputWrapper_h7a1c_418 > div,
-._inputWrapper_h7a1c_418 > div > span {
+._inputWrapper_16twm_419 > div,
+._inputWrapper_16twm_419 > div > span {
   height: 100%;
   border-radius: inherit;
 }
-._breakWord_h7a1c_434 {
+._breakWord_16twm_435 {
   word-break: break-word;
 }
-._inputCell_h7a1c_437 {
+._inputCell_16twm_438 {
   padding: 0 !important;
 }
-._sliderCell_h7a1c_440 {
+._sliderCell_16twm_441 {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
-._staticCell_h7a1c_444 {
+._staticCell_16twm_445 {
   padding: 0 !important;
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447 {
+._staticCell_16twm_445 ._staticCellContent_16twm_448 {
   min-height: 100%;
   padding: 9.5px 14px !important;
   line-height: 17px;
   position: relative;
   border-radius: inherit;
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._error_h7a1c_454,
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._warning_h7a1c_455 {
+._staticCell_16twm_445 ._staticCellContent_16twm_448._error_16twm_455,
+._staticCell_16twm_445 ._staticCellContent_16twm_448._warning_16twm_456 {
   border: 1px solid transparent;
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._error_h7a1c_454 {
+._staticCell_16twm_445 ._staticCellContent_16twm_448._error_16twm_455 {
   position: relative;
   z-index: 2;
   border-color: var(--color-border-error) !important;
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._error_h7a1c_454:hover {
+._staticCell_16twm_445 ._staticCellContent_16twm_448._error_16twm_455:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._error_h7a1c_454:focus {
+._staticCell_16twm_445 ._staticCellContent_16twm_448._error_16twm_455:focus {
   outline: none !important;
   border: 1px solid var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._warning_h7a1c_455 {
+._staticCell_16twm_445 ._staticCellContent_16twm_448._warning_16twm_456 {
   position: relative;
   z-index: 1;
   border-color: var(--color-border-warning) !important;
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._warning_h7a1c_455:hover {
+._staticCell_16twm_445 ._staticCellContent_16twm_448._warning_16twm_456:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._warning_h7a1c_455:focus {
+._staticCell_16twm_445 ._staticCellContent_16twm_448._warning_16twm_456:focus {
   outline: none !important;
   border: 1px solid var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
 }
-._staticCell_h7a1c_444 ._staticCellContent_h7a1c_447._unit_h7a1c_488 {
+._staticCell_16twm_445 ._staticCellContent_16twm_448._unit_16twm_489 {
   font-weight: normal;
 }
-._sortingCell_h7a1c_491 ._staticCellContent_h7a1c_447 {
+._sortingCell_16twm_492 ._staticCellContent_16twm_448 {
   position: relative;
   padding-right: 45px !important;
   cursor: pointer !important;
 }
-._sortingCell_h7a1c_491 ._staticCellContent_h7a1c_447:hover {
+._sortingCell_16twm_492 ._staticCellContent_16twm_448:hover {
   background-color: rgba(0, 0, 0, 0.05) !important;
 }
-._sortingCell_h7a1c_491 ._sortingCellIcon_h7a1c_499 {
+._sortingCell_16twm_492 ._sortingCellIcon_16twm_500 {
   font-size: 20px;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
 }
-._icon_h7a1c_506 {
+._icon_16twm_507 {
   display: inline-block;
   margin-left: 8px;
   position: relative;
@@ -18986,43 +18987,43 @@ html[data-theme='dark'] {
   font-size: 13px;
   color: var(--color-text-faint);
 }
-._icon_h7a1c_506:hover {
+._icon_16twm_507:hover {
   color: var(--color-text-muted);
 }
-._icon_h7a1c_506._clickable_h7a1c_517:hover {
+._icon_16twm_507._clickable_16twm_518:hover {
   cursor: pointer;
   color: var(--color-text-primary-hover);
 }
-._checkBoxCell_h7a1c_521 {
+._checkBoxCell_16twm_522 {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
-._iconCell_h7a1c_525 {
+._iconCell_16twm_526 {
   width: 37px;
   text-align: center;
   padding: 0 !important;
 }
-._iconCell_h7a1c_525 ._iconWrapper_h7a1c_530 {
+._iconCell_16twm_526 ._iconWrapper_16twm_531 {
   display: flex;
   justify-content: center;
 }
-._actionsCell_h7a1c_534 {
+._actionsCell_16twm_535 {
   width: 24px;
   padding: 0 6px !important;
 }
-._rightAligned_h7a1c_538 {
+._rightAligned_16twm_539 {
   text-align: right !important;
 }
-._centerAligned_h7a1c_541 {
+._centerAligned_16twm_542 {
   text-align: center !important;
 }
-._leftAligned_h7a1c_544 {
+._leftAligned_16twm_545 {
   text-align: left !important;
 }
-._popover_h7a1c_547 {
+._popover_16twm_548 {
   padding: 9.5px 14px;
 }
-._disabledPointerEvents_h7a1c_550 {
+._disabledPointerEvents_16twm_551 {
   pointer-events: none;
 }
 /*

package/dist/index.js

@@ -9892,7 +9892,8 @@ const Layer$2 = ({
   tree: tree2,
   path,
   maxHeight: maxHeight2,
-  showAllButton
+  showAllButton,
+  testId
 }) => {
   var _a, _b;
   if (isValidElement(sections)) {
@@ -9932,6 +9933,7 @@ const Layer$2 = ({
       maxHeight: maxHeight2 || "auto",
       overflowY: maxHeight2 ? "auto" : "default"
     },
+    "data-testid": testId,
     children: /* @__PURE__ */ jsx("ul", {
       children: localSections.map((section, i) => /* @__PURE__ */ jsx("li", {
         children: /* @__PURE__ */ jsx(Section$1, {
@@ -10405,7 +10407,8 @@ const useContextMenu = (sections, width, placement, possiblePlacements, closeOnO
       tree: tree2,
       path,
       groupOrder,
-      maxHeight: maxHeight2
+      maxHeight: maxHeight2,
+      testId: testId && `${testId}-layer`
     })
   }));
   return [layer2, handleMouseEvent];
@@ -10553,7 +10556,8 @@ const DropDownMenu = ({
         path,
         groupOrder,
         maxHeight: maxHeight2,
-        showAllButton
+        showAllButton,
+        testId: testId && `${testId}-layer`
       })
     }))]
   });
@@ -26804,7 +26808,8 @@ const Layer = ({
   focusedOptionIndex,
   width,
   firstSelectedOptionIndex,
-  closeLayer
+  closeLayer,
+  testId
 }) => {
   useEffect(() => {
     if (firstSelectedOptionIndex !== null && listRef.current !== null) {
@@ -26813,6 +26818,7 @@ const Layer = ({
   }, []);
   const optionHeight = 38;
   return /* @__PURE__ */ jsx("div", {
+    "data-testid": testId,
     className: cx(styles$k.layer),
     children: !sections.length ? /* @__PURE__ */ jsx("ul", {
       children: /* @__PURE__ */ jsx("li", {
@@ -26842,7 +26848,8 @@ const Layer = ({
           focused: focusedOptionIndex === index2,
           onSelectOption: (evt) => {
             onSelectOption(evt, sections[index2]);
-          }
+          },
+          testId: testId && (sections[index2].description ? `${testId}-${sections[index2].description}` : `${testId}-${sections[index2].label}`)
         })
       })
     })
@@ -27511,7 +27518,8 @@ const CustomSelect = ({
         triggerRect: triggerBounds,
         width: `max(${layerWidth}, ${triggerBounds.width}px)`,
         focusedOptionIndex: state.layerFocus.current,
-        firstSelectedOptionIndex
+        firstSelectedOptionIndex,
+        testId: testId && `${testId}-layer`
       })
     }))]
   });
@@ -34947,38 +34955,38 @@ function CgSortAz(props) {
 function CgSortZa(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none" }, "child": [{ "tag": "path", "attr": { "d": "M6 16C6 16.5523 6.44772 17 7 17H17C17.5523 17 18 16.5523 18 16C18 15.4477 17.5523 15 17 15H7C6.44772 15 6 15.4477 6 16Z", "fill": "currentColor" } }, { "tag": "path", "attr": { "d": "M8 12C8 12.5523 8.44772 13 9 13H15C15.5523 13 16 12.5523 16 12C16 11.4477 15.5523 11 15 11H9C8.44772 11 8 11.4477 8 12Z", "fill": "currentColor" } }, { "tag": "path", "attr": { "d": "M11 9C10.4477 9 10 8.55229 10 8C10 7.44771 10.4477 7 11 7H13C13.5523 7 14 7.44771 14 8C14 8.55229 13.5523 9 13 9H11Z", "fill": "currentColor" } }] })(props);
 }
-const inputInTable$1 = "_inputInTable_h7a1c_326";
-const inputFocus$1 = "_inputFocus_h7a1c_342";
-const inputError$1 = "_inputError_h7a1c_347";
-const inputWarning$1 = "_inputWarning_h7a1c_348";
-const inputDisabled$1 = "_inputDisabled_h7a1c_379";
-const hideScrollbars$1 = "_hideScrollbars_h7a1c_384";
-const cellWrapperPadding = "_cellWrapperPadding_h7a1c_394";
-const flexBlock = "_flexBlock_h7a1c_397";
-const cellWrapper = "_cellWrapper_h7a1c_394";
-const disabledLink = "_disabledLink_h7a1c_414";
-const inputWrapper = "_inputWrapper_h7a1c_418";
-const breakWord = "_breakWord_h7a1c_434";
-const inputCell = "_inputCell_h7a1c_437";
-const sliderCell = "_sliderCell_h7a1c_440";
-const staticCell = "_staticCell_h7a1c_444";
-const staticCellContent = "_staticCellContent_h7a1c_447";
-const error$1 = "_error_h7a1c_454";
-const warning$1 = "_warning_h7a1c_455";
-const unit = "_unit_h7a1c_488";
-const sortingCell = "_sortingCell_h7a1c_491";
-const sortingCellIcon = "_sortingCellIcon_h7a1c_499";
-const icon = "_icon_h7a1c_506";
-const clickable = "_clickable_h7a1c_517";
-const checkBoxCell = "_checkBoxCell_h7a1c_521";
-const iconCell = "_iconCell_h7a1c_525";
-const iconWrapper = "_iconWrapper_h7a1c_530";
-const actionsCell = "_actionsCell_h7a1c_534";
-const rightAligned = "_rightAligned_h7a1c_538";
-const centerAligned = "_centerAligned_h7a1c_541";
-const leftAligned = "_leftAligned_h7a1c_544";
-const popover = "_popover_h7a1c_547";
-const disabledPointerEvents = "_disabledPointerEvents_h7a1c_550";
+const inputInTable$1 = "_inputInTable_16twm_326";
+const inputFocus$1 = "_inputFocus_16twm_342";
+const inputError$1 = "_inputError_16twm_347";
+const inputWarning$1 = "_inputWarning_16twm_348";
+const inputDisabled$1 = "_inputDisabled_16twm_379";
+const hideScrollbars$1 = "_hideScrollbars_16twm_384";
+const cellWrapperPadding = "_cellWrapperPadding_16twm_394";
+const flexBlock = "_flexBlock_16twm_397";
+const cellWrapper = "_cellWrapper_16twm_394";
+const disabledLink = "_disabledLink_16twm_415";
+const inputWrapper = "_inputWrapper_16twm_419";
+const breakWord = "_breakWord_16twm_435";
+const inputCell = "_inputCell_16twm_438";
+const sliderCell = "_sliderCell_16twm_441";
+const staticCell = "_staticCell_16twm_445";
+const staticCellContent = "_staticCellContent_16twm_448";
+const error$1 = "_error_16twm_455";
+const warning$1 = "_warning_16twm_456";
+const unit = "_unit_16twm_489";
+const sortingCell = "_sortingCell_16twm_492";
+const sortingCellIcon = "_sortingCellIcon_16twm_500";
+const icon = "_icon_16twm_507";
+const clickable = "_clickable_16twm_518";
+const checkBoxCell = "_checkBoxCell_16twm_522";
+const iconCell = "_iconCell_16twm_526";
+const iconWrapper = "_iconWrapper_16twm_531";
+const actionsCell = "_actionsCell_16twm_535";
+const rightAligned = "_rightAligned_16twm_539";
+const centerAligned = "_centerAligned_16twm_542";
+const leftAligned = "_leftAligned_16twm_545";
+const popover = "_popover_16twm_548";
+const disabledPointerEvents = "_disabledPointerEvents_16twm_551";
 const styles$7 = {
   inputInTable: inputInTable$1,
   inputFocus: inputFocus$1,
@@ -35616,7 +35624,8 @@ const Row = (props) => {
     provided,
     snapshot,
     draggableTable,
-    width
+    width,
+    testId
   } = props;
   const targetRef = useRef();
   const columnHeaderAlignment = getHeaderAlignment(columnHeaderAlignments, isHeader, rowIndex);
@@ -35652,7 +35661,7 @@ const Row = (props) => {
       columnHeaderAlignment: columnHeaderAlignment[i],
       width: columnWidths ? columnWidths[i] : void 0,
       snapshot,
-      testId: c.testId
+      testId: testId ? `${testId}-${i}` : c.testId
     }, key);
   });
   const rowActions = hasRowActions2 && /* @__PURE__ */ jsx(Cell, {
@@ -35755,7 +35764,8 @@ Row.defaultProps = {
   columnHeaderAlignments: [],
   draggableTable: false,
   snapshot: null,
-  provided: null
+  provided: null,
+  testId: void 0
 };
 Row.propTypes = {
   row: rowShape.isRequired,
@@ -35768,7 +35778,8 @@ Row.propTypes = {
   hasRowActions: propTypes$1.exports.bool.isRequired,
   draggableTable: propTypes$1.exports.bool,
   snapshot: propTypes$1.exports.object,
-  provided: propTypes$1.exports.object
+  provided: propTypes$1.exports.object,
+  testId: propTypes$1.exports.string
 };
 const getMaxCellCount = (rows) => {
   const count2 = Math.max(
@@ -35916,7 +35927,8 @@ const Table = (props) => {
                     columnHeaderAlignments,
                     rowsMetaData: stickyHeaders ? rowsMetaData : void 0,
                     setRowsMetaData: stickyHeaders ? setRowsMetaData : void 0,
-                    draggableTable: draggable2
+                    draggableTable: draggable2,
+                    testId: testId && `${testId}-${rowIndex}`
                   }, `0_${rowIndex}`);
                 })]
               }), /* @__PURE__ */ jsxs("tbody", {
@@ -35935,7 +35947,8 @@ const Table = (props) => {
                     provided: provided2,
                     snapshot,
                     draggableTable: draggable2,
-                    width: dimensions.width
+                    width: dimensions.width,
+                    testId: testId && `${testId}-${rowIndex + 1}`
                   }, `1_${rowIndex}`)
                 }, `index_${rowIndex}`)), provided.placeholder]
               }), footer2 && /* @__PURE__ */ jsx(Footer, {
@@ -35978,7 +35991,8 @@ const Table = (props) => {
             columnAlignment,
             columnHeaderAlignments,
             rowsMetaData: stickyHeaders ? rowsMetaData : void 0,
-            setRowsMetaData: stickyHeaders ? setRowsMetaData : void 0
+            setRowsMetaData: stickyHeaders ? setRowsMetaData : void 0,
+            testId: testId && `${testId}-${rowIndex}`
           }, `0_${rowIndex}`);
         })]
       }), /* @__PURE__ */ jsx("tbody", {
@@ -35989,7 +36003,8 @@ const Table = (props) => {
           columnWidths,
           colSpan,
           hasRowActions: rowActions,
-          columnAlignment
+          columnAlignment,
+          testId: testId && `${testId}-${rowIndex + 1}`
         }, `1_${rowIndex}`))
       }), footer2 && /* @__PURE__ */ jsx(Footer, {
         colSpan,

package/package.json

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