@oliasoft-open-source/react-ui-library 4.16.2-beta-1 → 4.16.2-beta-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1094,12 +1094,8 @@ The `List` component renders a list of data items with various customization opt
1094
1094
 
1095
1095
  | Prop | Description | Default Value |
1096
1096
  |-----------------------------|-----------------------------------------------------------------------------------------------------------------|--------------------------|
1097
- | `scrollable` | Determines whether the list is scrollable. | `false` |
1098
1097
  | `hideScrollbar` | Determines whether to hide the scrollbar when scrolling. | `false` |
1099
1098
  | `triggerScrollToActiveItem` | Specifies whether scrolling should be triggered to display the active item. | `false` |
1100
- | `infiniteScroll` | Specifies whether to enable infinite scroll functionality. | `false` |
1101
- | `limit` | The limit of items to load per page when using infinite scroll. | `10` |
1102
- | `infiniteScrollTarget` | The target element for infinite scroll (e.g., the list container). | - |
1103
1099
 
1104
1100
  ### Usage Example
1105
1101
 
@@ -1114,12 +1110,8 @@ The `List` component renders a list of data items with various customization opt
1114
1110
  height={300}
1115
1111
  testId="my-list"
1116
1112
  scrollDetails={{
1117
- scrollable: true,
1118
1113
  hideScrollbar: true,
1119
1114
  triggerScrollToActiveItem: true,
1120
- infiniteScroll: true,
1121
- limit: 10,
1122
- infiniteScrollTarget: document.getElementById('list-container'),
1123
1115
  }}
1124
1116
  />
1125
1117
  ```
package/dist/global.css CHANGED
@@ -2442,127 +2442,130 @@ html[data-theme='dark'] {
2442
2442
  border-top-left-radius: 0 !important;
2443
2443
  border-bottom-left-radius: 0 !important;
2444
2444
  }
2445
- ._inputInTable_nnoig_1 {
2445
+ ._inputInTable_snjei_1 {
2446
2446
  background-color: transparent;
2447
2447
  border-radius: inherit !important;
2448
2448
  height: var(--size);
2449
2449
  min-height: 100%;
2450
2450
  }
2451
- ._inputInTable_nnoig_1:not(:hover):not([data-error]):not([data-warning]) {
2451
+ ._inputInTable_snjei_1:not(:hover):not([data-error]):not([data-warning]) {
2452
2452
  border-color: transparent;
2453
2453
  }
2454
- ._inputInTable_nnoig_1:not(:focus) {
2454
+ ._inputInTable_snjei_1:not(:focus) {
2455
2455
  box-shadow: none;
2456
2456
  }
2457
- ._inputHover_nnoig_13 {
2457
+ ._inputHover_snjei_13 {
2458
2458
  position: relative;
2459
2459
  border-color: var(--color-border-hover);
2460
2460
  z-index: 2;
2461
2461
  }
2462
- ._inputFocus_nnoig_18 {
2462
+ ._inputFocus_snjei_18 {
2463
2463
  position: relative;
2464
2464
  outline: none !important;
2465
2465
  border-color: var(--color-border-focus) !important;
2466
2466
  box-shadow: var(--shadow-focus);
2467
2467
  z-index: 3;
2468
2468
  }
2469
- ._inputError_nnoig_25,
2470
- ._inputWarning_nnoig_26 {
2469
+ ._inputError_snjei_25,
2470
+ ._inputWarning_snjei_26 {
2471
2471
  position: relative;
2472
2472
  }
2473
- ._inputError_nnoig_25 {
2473
+ ._inputError_snjei_25 {
2474
2474
  z-index: 2;
2475
2475
  border-color: var(--color-border-error);
2476
2476
  color: var(--color-text-error) !important;
2477
2477
  background-color: var(--color-background-error-muted);
2478
2478
  }
2479
- ._inputError_nnoig_25:hover {
2479
+ ._inputError_snjei_25:hover {
2480
2480
  border-color: var(--color-border-error-hover) !important;
2481
2481
  }
2482
- ._inputError_nnoig_25:focus {
2482
+ ._inputError_snjei_25:focus {
2483
2483
  position: relative;
2484
2484
  outline: none !important;
2485
2485
  border-color: var(--color-border-focus) !important;
2486
2486
  box-shadow: var(--shadow-focus);
2487
2487
  z-index: 3;
2488
2488
  }
2489
- ._inputWarning_nnoig_26 {
2489
+ ._inputWarning_snjei_26 {
2490
2490
  z-index: 1;
2491
2491
  border-color: var(--color-border-warning);
2492
2492
  color: var(--color-text-warning) !important;
2493
2493
  background-color: var(--color-background-warning-muted);
2494
2494
  }
2495
- ._inputWarning_nnoig_26:hover {
2495
+ ._inputWarning_snjei_26:hover {
2496
2496
  border-color: var(--color-border-warning-hover) !important;
2497
2497
  }
2498
- ._inputWarning_nnoig_26:focus {
2498
+ ._inputWarning_snjei_26:focus {
2499
2499
  position: relative;
2500
2500
  outline: none !important;
2501
2501
  border-color: var(--color-border-focus) !important;
2502
2502
  box-shadow: var(--shadow-focus);
2503
2503
  z-index: 3;
2504
2504
  }
2505
- ._inputDisabled_nnoig_61 {
2505
+ ._inputDisabled_snjei_61 {
2506
2506
  pointer-events: none;
2507
2507
  background-color: var(--color-background-disabled);
2508
2508
  color: var(--color-text-muted);
2509
2509
  box-shadow: none;
2510
2510
  }
2511
- ._hideScrollbars_nnoig_67 {
2511
+ ._hideScrollbars_snjei_67 {
2512
2512
  /* Firefox */
2513
2513
  scrollbar-width: none;
2514
2514
  /* IE 10+ */
2515
2515
  -ms-overflow-style: none;
2516
2516
  /* Chrome, Safari and Opera */
2517
2517
  }
2518
- ._hideScrollbars_nnoig_67::-webkit-scrollbar {
2518
+ ._hideScrollbars_snjei_67::-webkit-scrollbar {
2519
2519
  display: none;
2520
2520
  }
2521
- ._list_nnoig_77 {
2521
+ ._list_snjei_77 {
2522
2522
  display: flex;
2523
2523
  flex-direction: column;
2524
2524
  max-height: 100%;
2525
2525
  overflow: hidden;
2526
2526
  }
2527
- ._bordered_nnoig_83 {
2527
+ ._bordered_snjei_83 {
2528
2528
  border: 1px solid var(--color-border);
2529
2529
  border-radius: var(--border-radius);
2530
2530
  }
2531
- ._header_nnoig_87 ._headerTitle_nnoig_87,
2532
- ._heading_nnoig_88 ._itemHeader_nnoig_88 {
2531
+ ._bordered_snjei_83 ._virtualRow_snjei_87:last-child ._item_snjei_87 {
2532
+ border-bottom: none;
2533
+ }
2534
+ ._header_snjei_90 ._headerTitle_snjei_90,
2535
+ ._heading_snjei_91 ._itemHeader_snjei_91 {
2533
2536
  transition: opacity 0.3s;
2534
2537
  }
2535
- ._narrow_nnoig_91 ._header_nnoig_87 ._headerTitle_nnoig_87,
2536
- ._narrow_nnoig_91 ._heading_nnoig_88 ._itemHeader_nnoig_88 {
2538
+ ._narrow_snjei_94 ._header_snjei_90 ._headerTitle_snjei_90,
2539
+ ._narrow_snjei_94 ._heading_snjei_91 ._itemHeader_snjei_91 {
2537
2540
  opacity: 0;
2538
2541
  }
2539
- ._stickyHeader_nnoig_95 {
2542
+ ._stickyHeader_snjei_98 {
2540
2543
  position: sticky;
2541
2544
  top: 0;
2542
2545
  background-color: var(--color-background);
2543
2546
  z-index: 10;
2544
2547
  }
2545
- ._itemHeader_nnoig_88 {
2548
+ ._itemHeader_snjei_91 {
2546
2549
  padding: var(--padding-xs) var(--padding);
2547
2550
  display: flex;
2548
2551
  align-items: flex-start;
2549
2552
  }
2550
- ._itemHeader_nnoig_88 ._title_nnoig_106 {
2553
+ ._itemHeader_snjei_91 ._title_snjei_109 {
2551
2554
  margin: 0;
2552
2555
  padding: 0;
2553
2556
  flex-grow: 1;
2554
2557
  min-width: 0;
2555
2558
  }
2556
- ._itemHeader_nnoig_88 ._name_nnoig_112 {
2559
+ ._itemHeader_snjei_91 ._name_snjei_115 {
2557
2560
  font-weight: 400;
2558
2561
  }
2559
- ._itemHeader_nnoig_88 ._iconTooltipMargin_nnoig_115 {
2562
+ ._itemHeader_snjei_91 ._iconTooltipMargin_snjei_118 {
2560
2563
  margin-left: var(--padding-xs);
2561
2564
  }
2562
- ._itemHeader_nnoig_88 ._bold_nnoig_118 {
2565
+ ._itemHeader_snjei_91 ._bold_snjei_121 {
2563
2566
  font-weight: bold;
2564
2567
  }
2565
- ._header_nnoig_87 {
2568
+ ._header_snjei_90 {
2566
2569
  padding: var(--padding);
2567
2570
  display: flex;
2568
2571
  align-items: center;
@@ -2570,7 +2573,7 @@ html[data-theme='dark'] {
2570
2573
  position: sticky;
2571
2574
  top: 0;
2572
2575
  }
2573
- ._toggleNarrow_nnoig_129 {
2576
+ ._toggleNarrow_snjei_132 {
2574
2577
  margin-right: 16px;
2575
2578
  margin-left: -5px;
2576
2579
  color: #c8c8c8;
@@ -2579,16 +2582,16 @@ html[data-theme='dark'] {
2579
2582
  width: 22px;
2580
2583
  justify-content: center;
2581
2584
  }
2582
- ._toggleNarrow_nnoig_129:hover {
2585
+ ._toggleNarrow_snjei_132:hover {
2583
2586
  color: var(--color-text-primary-hover);
2584
2587
  }
2585
- ._toggleNarrow_nnoig_129:active {
2588
+ ._toggleNarrow_snjei_132:active {
2586
2589
  color: var(--color-text-primary-active);
2587
2590
  }
2588
- ._narrow_nnoig_91 ._toggleNarrow_nnoig_129 {
2591
+ ._narrow_snjei_94 ._toggleNarrow_snjei_132 {
2589
2592
  transform: scaleX(-1);
2590
2593
  }
2591
- ._drag_nnoig_147 {
2594
+ ._drag_snjei_150 {
2592
2595
  color: var(--color-text-faint);
2593
2596
  display: flex;
2594
2597
  align-items: center;
@@ -2602,24 +2605,24 @@ html[data-theme='dark'] {
2602
2605
  width: var(--size-sm);
2603
2606
  flex-shrink: 0;
2604
2607
  }
2605
- ._drag_nnoig_147:hover {
2608
+ ._drag_snjei_150:hover {
2606
2609
  color: var(--color-text-primary-hover);
2607
2610
  }
2608
- ._drag_nnoig_147:active {
2611
+ ._drag_snjei_150:active {
2609
2612
  cursor: grabbing;
2610
2613
  color: var(--color-text-primary-active);
2611
2614
  }
2612
- ._dragOverlay_nnoig_168 {
2615
+ ._dragOverlay_snjei_171 {
2613
2616
  box-shadow: var(--shadow-layer);
2614
2617
  border-radius: var(--border-radius);
2615
2618
  overflow: hidden;
2616
2619
  }
2617
- ._listContent_nnoig_173 {
2620
+ ._listContent_snjei_176 {
2618
2621
  flex: 1;
2619
2622
  overflow-y: auto;
2620
2623
  background: var(--color-background);
2621
2624
  }
2622
- ._item_nnoig_88 {
2625
+ ._item_snjei_87 {
2623
2626
  color: inherit;
2624
2627
  display: block;
2625
2628
  transition: background-color 0.2s;
@@ -2630,7 +2633,7 @@ html[data-theme='dark'] {
2630
2633
  overflow-wrap: break-word;
2631
2634
  hyphens: auto;
2632
2635
  }
2633
- ._item_nnoig_88:not(._heading_nnoig_88):after {
2636
+ ._item_snjei_87:not(._heading_snjei_91):after {
2634
2637
  content: '';
2635
2638
  position: absolute;
2636
2639
  left: 0;
@@ -2641,41 +2644,41 @@ html[data-theme='dark'] {
2641
2644
  border-bottom-left-radius: inherit;
2642
2645
  transition: background 0.3s, width 0.3s;
2643
2646
  }
2644
- ._item_nnoig_88._action_nnoig_200 {
2647
+ ._item_snjei_87._action_snjei_203 {
2645
2648
  cursor: pointer;
2646
2649
  }
2647
- ._item_nnoig_88._action_nnoig_200:not(._active_nnoig_203):hover {
2650
+ ._item_snjei_87._action_snjei_203:not(._active_snjei_206):hover {
2648
2651
  background: var(--color-background-listitem-hover);
2649
2652
  }
2650
- ._item_nnoig_88._action_nnoig_200:not(._active_nnoig_203):hover:after {
2653
+ ._item_snjei_87._action_snjei_203:not(._active_snjei_206):hover:after {
2651
2654
  width: 5px;
2652
2655
  background: rgba(0, 0, 0, 0.1);
2653
2656
  }
2654
- ._item_nnoig_88._indented_nnoig_210:after {
2657
+ ._item_snjei_87._indented_snjei_213:after {
2655
2658
  width: 3px;
2656
2659
  background: rgba(0, 0, 0, 0.1);
2657
2660
  }
2658
- ._item_nnoig_88._active_nnoig_203 {
2661
+ ._item_snjei_87._active_snjei_206 {
2659
2662
  cursor: default;
2660
2663
  position: relative;
2661
2664
  z-index: 1;
2662
2665
  background: var(--color-background-listitem-active);
2663
2666
  }
2664
- ._item_nnoig_88._active_nnoig_203:after {
2667
+ ._item_snjei_87._active_snjei_206:after {
2665
2668
  background: var(--color-background-primary) !important;
2666
2669
  }
2667
- ._item_nnoig_88._disabled_nnoig_223 {
2670
+ ._item_snjei_87._disabled_snjei_226 {
2668
2671
  color: var(--color-text-faint);
2669
2672
  pointer-events: none;
2670
2673
  }
2671
- ._item_nnoig_88._heading_nnoig_88 {
2674
+ ._item_snjei_87._heading_snjei_91 {
2672
2675
  color: var(--color-text-muted);
2673
2676
  background-color: var(--color-background-cardheader);
2674
2677
  }
2675
- ._item_nnoig_88._heading_nnoig_88._action_nnoig_200:hover {
2678
+ ._item_snjei_87._heading_snjei_91._action_snjei_203:hover {
2676
2679
  color: var(--color-text-primary-hover);
2677
2680
  }
2678
- ._item_nnoig_88 ._label_nnoig_234 {
2681
+ ._item_snjei_87 ._label_snjei_237 {
2679
2682
  margin-right: var(--padding-xs);
2680
2683
  flex-shrink: 0;
2681
2684
  width: var(--size-sm);
@@ -2686,38 +2689,38 @@ html[data-theme='dark'] {
2686
2689
  align-items: center;
2687
2690
  justify-content: center;
2688
2691
  }
2689
- ._item_nnoig_88 ._details_nnoig_245,
2690
- ._item_nnoig_88 ._metadata_nnoig_246 {
2692
+ ._item_snjei_87 ._details_snjei_248,
2693
+ ._item_snjei_87 ._metadata_snjei_249 {
2691
2694
  display: block;
2692
2695
  width: 100%;
2693
2696
  font-weight: normal;
2694
2697
  }
2695
- ._item_nnoig_88 ._metadata_nnoig_246 {
2698
+ ._item_snjei_87 ._metadata_snjei_249 {
2696
2699
  color: var(--color-text-muted);
2697
2700
  }
2698
- ._item_nnoig_88 ._itemContent_nnoig_254 {
2701
+ ._item_snjei_87 ._itemContent_snjei_257 {
2699
2702
  padding: 0 var(--padding) var(--padding-sm);
2700
2703
  cursor: auto;
2701
2704
  }
2702
- ._item_nnoig_88 ._itemContent_nnoig_254:empty {
2705
+ ._item_snjei_87 ._itemContent_snjei_257:empty {
2703
2706
  padding: inherit;
2704
2707
  }
2705
- ._indentIcon_nnoig_261 {
2708
+ ._indentIcon_snjei_264 {
2706
2709
  color: var(--color-text-faint);
2707
2710
  flex-shrink: 0;
2708
2711
  margin-right: var(--padding-xxs);
2709
2712
  }
2710
- ._expandIcon_nnoig_266 {
2713
+ ._expandIcon_snjei_269 {
2711
2714
  flex-shrink: 0;
2712
2715
  position: relative;
2713
2716
  display: flex;
2714
2717
  height: var(--line-height);
2715
2718
  margin-right: var(--padding-xs);
2716
2719
  }
2717
- ._expandIcon_nnoig_266._expanded_nnoig_273 svg {
2720
+ ._expandIcon_snjei_269._expanded_snjei_276 svg {
2718
2721
  transform: rotate(90deg);
2719
2722
  }
2720
- ._right_nnoig_276 {
2723
+ ._right_snjei_279 {
2721
2724
  margin-left: auto;
2722
2725
  display: flex;
2723
2726
  align-items: center;
@@ -2725,37 +2728,29 @@ html[data-theme='dark'] {
2725
2728
  margin-bottom: calc((var(--line-height) - var(--size-sm)) / 2);
2726
2729
  min-height: var(--size-sm);
2727
2730
  }
2728
- ._actions_nnoig_284 {
2731
+ ._actions_snjei_287 {
2729
2732
  margin-left: var(--padding-xs);
2730
2733
  display: flex;
2731
2734
  align-items: center;
2732
2735
  }
2733
- ._scrollableList_nnoig_289 {
2734
- height: 100%;
2735
- overflow-y: auto;
2736
- scroll-behavior: smooth;
2737
- }
2738
- ._infiniteScrollContainer_nnoig_294 {
2739
- overflow: hidden !important;
2740
- }
2741
- ._hideScrollbar_nnoig_67 {
2736
+ ._hideScrollbar_snjei_67 {
2742
2737
  /* Firefox */
2743
2738
  scrollbar-width: none;
2744
2739
  /* IE 10+ */
2745
2740
  -ms-overflow-style: none;
2746
2741
  /* Chrome, Safari and Opera */
2747
2742
  }
2748
- ._hideScrollbar_nnoig_67::-webkit-scrollbar {
2743
+ ._hideScrollbar_snjei_67::-webkit-scrollbar {
2749
2744
  display: none;
2750
2745
  }
2751
- ._noPointerEvents_nnoig_307 {
2746
+ ._noPointerEvents_snjei_302 {
2752
2747
  pointer-events: none;
2753
2748
  }
2754
- ._virtualRows_nnoig_310 {
2749
+ ._virtualRows_snjei_305 {
2755
2750
  width: 100%;
2756
2751
  position: relative;
2757
2752
  }
2758
- ._virtualRow_nnoig_310 {
2753
+ ._virtualRow_snjei_87 {
2759
2754
  position: absolute;
2760
2755
  top: 0;
2761
2756
  left: 0;
package/dist/index.d.ts CHANGED
@@ -1128,12 +1128,8 @@ export declare interface IRowProps {
1128
1128
  }
1129
1129
 
1130
1130
  declare interface IScrollDetails {
1131
- scrollable?: boolean;
1132
1131
  hideScrollbar?: boolean;
1133
1132
  triggerScrollToActiveItem?: boolean;
1134
- infiniteScroll?: boolean;
1135
- infiniteScrollTarget?: string;
1136
- limit?: number;
1137
1133
  }
1138
1134
 
1139
1135
  declare interface ISelectCell extends TCommonCell {
@@ -1337,28 +1333,30 @@ export declare interface ITableProps {
1337
1333
  from: number;
1338
1334
  to: number;
1339
1335
  }) => void;
1340
- table: {
1341
- name?: TStringOrNumber | ReactNode;
1342
- actionsRight?: boolean;
1343
- fixedWidth?: TStringOrNumber;
1344
- maxHeight?: TStringOrNumber;
1345
- columnWidths?: string[];
1346
- className?: string;
1347
- columnHeaderAlignments?: Array<TAlign | string>;
1348
- columnAlignment?: Array<TAlign | string>;
1349
- infiniteScroll?: boolean;
1350
- headers?: any[];
1351
- rows?: TRowsType;
1352
- footer?: IFooterProps;
1353
- draggable?: boolean;
1354
- bordered?: boolean;
1355
- striped?: boolean;
1356
- testId?: string;
1357
- onAddRow?: any;
1358
- defaultEmptyRow?: any;
1359
- stickyHeaders?: string | boolean;
1360
- actions?: any;
1361
- };
1336
+ table: ITableTableProps;
1337
+ }
1338
+
1339
+ declare interface ITableTableProps {
1340
+ name?: TStringOrNumber | ReactNode;
1341
+ actionsRight?: boolean;
1342
+ fixedWidth?: TStringOrNumber;
1343
+ maxHeight?: TStringOrNumber;
1344
+ columnWidths?: string[];
1345
+ className?: string;
1346
+ columnHeaderAlignments?: Array<TAlign | string>;
1347
+ columnAlignment?: Array<TAlign | string>;
1348
+ infiniteScroll?: boolean;
1349
+ headers?: any[];
1350
+ rows?: TRowsType;
1351
+ footer?: IFooterProps;
1352
+ draggable?: boolean;
1353
+ bordered?: boolean;
1354
+ striped?: boolean;
1355
+ testId?: string;
1356
+ onAddRow?: any;
1357
+ defaultEmptyRow?: any;
1358
+ stickyHeaders?: string | boolean;
1359
+ actions?: any;
1362
1360
  }
1363
1361
 
1364
1362
  declare interface ITabOption {