@oliasoft-open-source/react-ui-library 4.20.10-beta-1 → 4.20.11-beta-1

package/README.md

@@ -142,6 +142,7 @@ To quickly start a new project using the React UI Library with Vite, you can use
 - [Tree](#tree)
 - [NumberInput](#numberinput)
 - [UnitInput](#unitinput)
+- [UnitTable](#unittable)
 
 ## Storybook
 
@@ -2062,6 +2063,60 @@ The `Table` component renders tabular data with various customization options.
 
 <hr style="border: none; border-right: 2px solid black; width: 100%; height: 1px;">
 
+## UnitTable Component <a id="unittable"></a>
+
+The `UnitTable` component is a wrapper around `Table`, with local state and additional logic to handle displaying tables in preferred units, and converting return values when cells are edited.
+
+### Props
+
+| Prop                     | Description                                                                                                            | Default Value |
+|--------------------------|------------------------------------------------------------------------------------------------------------------------|---------------|
+| `table`                  | An object containing table configuration, similar to `ITableTableProps`.                                               |          |
+| `unitConfig`             | Array of unit configuration objects, each with `unitKey`, `storageUnit`, optional `preferredUnit`, and `onChange` callback. See [unitConfig item structure](#unitconfig-item-structure). |          |
+| `convertBackToStorageUnit` | Whether values should be converted back to the storage unit when edited.                                                | `true`        |
+| `enableCosmeticRounding` | Enables cosmetic rounding of displayed values (Excel-style) to reduce visual precision noise.                          | `true`        |
+| `enableDisplayRounding`  | Enables rounding of displayed values in number inputs until the cell is focused.                                        | `true`        |
+| `onListReorder`          | Function called when rows are reordered via drag-and-drop. Receives `{ from: number; to: number }` as an argument.     | `() => {}`    |
+| `canListReorder`         | Function to determine whether a row can be reordered. Receives `{ from: number; to: number }` as an argument and returns `boolean`. | `() => true`  |
+
+---
+
+### `unitConfig` Item Structure
+
+Each object in the `unitConfig` array should have the following shape:
+
+| Key              | Type                                  | Description                                                                                                           |
+|------------------|---------------------------------------|------------------------------------------------------------------------------------------------------------------------|
+| `unitKey`        | `string`                              | Key representing the type of unit (e.g., `length`, `temperature`, `density`).                                         |
+| `storageUnit`    | `string`                              | The unit in which data is stored internally (e.g., `m`, `ft`, `C`, `sg`).                                             |
+| `preferredUnit`  | `string` _(optional)_                  | The user's preferred display unit (e.g., `ft`, `F`, `ppg`).                                                           |
+| `onChange`       | `(params: { oldUnit: string; newUnit: string; unitKey: string }) => void` _(optional)_ | Callback when the display unit is changed by the user.                                                               |
+
+---
+
+### Usage Example
+
+```jsx
+<UnitTable
+  table={{
+    draggable: true,
+    headers: [...],
+    rows: [...],
+  }}
+  unitConfig={[
+    {
+      unitKey: 'length',
+      storageUnit: 'm',
+      preferredUnit: 'ft',
+      onChange: ({ oldUnit, newUnit, unitKey }) =>
+        console.log(`Unit changed for ${unitKey} from ${oldUnit} to ${newUnit}`),
+    },
+  ]}
+  onListReorder={({ from, to }) => console.log(`Moved row from ${from} to ${to}`)}
+  canListReorder={({ from, to }) => from !== to}
+/>
+```
+
 ## Tabs Component <a id="tabs"></a>
 
 The `Tabs` component creates a tabbed interface for organizing content.

package/dist/global.css

@@ -996,80 +996,80 @@ a {
 ._contentWrapper_1cgsf_16 {
   border-radius: inherit;
 }
-._inputInTable_1m45a_1 {
+._inputInTable_1vpoe_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1m45a_1:not(:hover):not([data-error]):not([data-warning]) {
+._inputInTable_1vpoe_1:not(:hover):not([data-error]):not([data-warning]) {
   border-color: transparent;
 }
-._inputInTable_1m45a_1:not(:focus) {
+._inputInTable_1vpoe_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1m45a_13 {
+._inputHover_1vpoe_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1m45a_18 {
+._inputFocus_1vpoe_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1m45a_25,
-._inputWarning_1m45a_26 {
+._inputError_1vpoe_25,
+._inputWarning_1vpoe_26 {
   position: relative;
 }
-._inputError_1m45a_25 {
+._inputError_1vpoe_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._inputError_1m45a_25:hover {
+._inputError_1vpoe_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1m45a_25:focus {
+._inputError_1vpoe_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1m45a_26 {
+._inputWarning_1vpoe_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._inputWarning_1m45a_26:hover {
+._inputWarning_1vpoe_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1m45a_26:focus {
+._inputWarning_1vpoe_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1m45a_61 {
+._inputDisabled_1vpoe_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1m45a_67 {
+._hideScrollbars_1vpoe_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1m45a_67::-webkit-scrollbar {
+._hideScrollbars_1vpoe_67::-webkit-scrollbar {
   display: none;
 }
 :root {
@@ -1095,7 +1095,7 @@ html[data-theme='dark'] {
   --color-background-button-default-hover: var(--color-neutral-750);
   --color-background-button-default-active: var(--color-neutral-700);
 }
-._button_1m45a_100 {
+._button_1vpoe_100 {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -1120,233 +1120,232 @@ html[data-theme='dark'] {
   box-shadow: var(--shadow-button);
   font-weight: bold;
 }
-._button_1m45a_100:hover {
+._button_1vpoe_100:hover {
   background: var(--color-background-button-default-hover);
 }
-._button_1m45a_100:focus {
+._button_1vpoe_100:focus {
   box-shadow: var(--shadow-focus) !important;
 }
-._button_1m45a_100:active {
+._button_1vpoe_100:active {
   background: var(--color-background-button-default-active);
   box-shadow: none;
 }
-._button_1m45a_100._active_1m45a_135:not(._green_1m45a_135):not(._red_1m45a_135):not(._orange_1m45a_135) {
+._button_1vpoe_100._active_1vpoe_135:not(._green_1vpoe_135):not(._red_1vpoe_135):not(._orange_1vpoe_135) {
   border-color: var(--color-border-button-default-active);
   color: var(--color-text-button-default-active);
   position: relative;
   z-index: 2;
 }
-._button_1m45a_100:hover,
-._button_1m45a_100:focus,
-._button_1m45a_100:active {
+._button_1vpoe_100:hover,
+._button_1vpoe_100:focus,
+._button_1vpoe_100:active {
   position: relative;
   z-index: 1;
 }
-._button_1m45a_100 ._icon_1m45a_147 {
+._button_1vpoe_100 ._icon_1vpoe_147 {
   margin: -2px;
   margin-right: var(--padding-xxs);
   font-size: var(--size-xs);
   display: flex;
 }
-._iconOnly_1m45a_153 {
+._iconOnly_1vpoe_153 {
   width: var(--size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-._iconOnly_1m45a_153 ._icon_1m45a_147 {
+._iconOnly_1vpoe_153 ._icon_1vpoe_147 {
   margin: 0;
   line-height: 0;
 }
-._basic_1m45a_163 {
+._basic_1vpoe_163 {
   color: var(--color-text-primary);
   background: transparent;
   box-shadow: none !important;
   border: none !important;
 }
-._basic_1m45a_163._muted_1m45a_169 {
+._basic_1vpoe_163._muted_1vpoe_169 {
   color: var(--color-text-muted);
 }
-._basic_1m45a_163:hover {
+._basic_1vpoe_163:hover {
   color: var(--color-text-primary-hover);
   background: rgba(0, 0, 0, 0.05);
 }
-[data-theme='dark'] ._basic_1m45a_163:hover {
+[data-theme='dark'] ._basic_1vpoe_163:hover {
   background: rgba(255, 255, 255, 0.1);
 }
-._basic_1m45a_163:active,
-._basic_1m45a_163._active_1m45a_135 {
+._basic_1vpoe_163:active,
+._basic_1vpoe_163._active_1vpoe_135 {
   color: var(--color-text-primary-active);
   background: rgba(0, 0, 0, 0.1);
 }
-[data-theme='dark'] ._basic_1m45a_163:active,
-[data-theme='dark'] ._basic_1m45a_163._active_1m45a_135 {
+[data-theme='dark'] ._basic_1vpoe_163:active,
+[data-theme='dark'] ._basic_1vpoe_163._active_1vpoe_135 {
   background: rgba(255, 255, 255, 0.2);
 }
-._disabled_1m45a_188 {
+._disabled_1vpoe_188 {
   cursor: default;
-  pointer-events: none !important;
   color: var(--color-text-faint) !important;
   box-shadow: none !important;
 }
-._disabled_1m45a_188:not(._active_1m45a_135):not(._basic_1m45a_163) {
+._disabled_1vpoe_188:not(._active_1vpoe_135):not(._basic_1vpoe_163) {
   background: var(--color-background-disabled) !important;
   border: 1px solid var(--color-border) !important;
 }
-._small_1m45a_198 {
+._small_1vpoe_197 {
   font-size: var(--font-size-sm);
   min-height: var(--size-sm);
   padding: var(--padding-input-sm);
 }
-._pill_1m45a_203,
-._round_1m45a_204 {
+._pill_1vpoe_202,
+._round_1vpoe_203 {
   border-radius: 19px;
   display: inline-flex;
   align-items: center;
 }
-._round_1m45a_204 {
+._round_1vpoe_203 {
   padding: 0;
   width: var(--size);
   line-height: 1;
 }
-._round_1m45a_204._small_1m45a_198 {
+._round_1vpoe_203._small_1vpoe_197 {
   width: var(--size-sm);
 }
-._orange_1m45a_135:not(._basic_1m45a_163) {
+._orange_1vpoe_135:not(._basic_1vpoe_163) {
   background-color: var(--color-background-button-primary);
 }
-._orange_1m45a_135:not(._basic_1m45a_163):hover {
+._orange_1vpoe_135:not(._basic_1vpoe_163):hover {
   background-color: var(--color-background-button-primary-hover);
 }
-._orange_1m45a_135:not(._basic_1m45a_163):active,
-._orange_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135 {
+._orange_1vpoe_135:not(._basic_1vpoe_163):active,
+._orange_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135 {
   background-color: var(--color-background-button-primary-active);
 }
-._red_1m45a_135:not(._basic_1m45a_163) {
+._red_1vpoe_135:not(._basic_1vpoe_163) {
   background-color: var(--color-background-button-error);
 }
-._red_1m45a_135:not(._basic_1m45a_163):hover {
+._red_1vpoe_135:not(._basic_1vpoe_163):hover {
   background-color: var(--color-background-button-error-hover);
 }
-._red_1m45a_135:not(._basic_1m45a_163):active,
-._red_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135 {
+._red_1vpoe_135:not(._basic_1vpoe_163):active,
+._red_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135 {
   background-color: var(--color-background-button-error-active);
 }
-._red_1m45a_135._basic_1m45a_163 {
+._red_1vpoe_135._basic_1vpoe_163 {
   color: var(--color-text-error);
 }
-._green_1m45a_135:not(._basic_1m45a_163) {
+._green_1vpoe_135:not(._basic_1vpoe_163) {
   background-color: var(--color-background-button-success);
 }
-._green_1m45a_135:not(._basic_1m45a_163):hover {
+._green_1vpoe_135:not(._basic_1vpoe_163):hover {
   background-color: var(--color-background-button-success-hover);
 }
-._green_1m45a_135:not(._basic_1m45a_163):active,
-._green_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135 {
+._green_1vpoe_135:not(._basic_1vpoe_163):active,
+._green_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135 {
   background-color: var(--color-background-button-success-active);
 }
-._green_1m45a_135._basic_1m45a_163 {
+._green_1vpoe_135._basic_1vpoe_163 {
   color: var(--color-text-success);
 }
-._orange_1m45a_135,
-._red_1m45a_135,
-._green_1m45a_135 {
+._orange_1vpoe_135,
+._red_1vpoe_135,
+._green_1vpoe_135 {
   border-color: var(--color-border-button);
 }
-._orange_1m45a_135:not(._basic_1m45a_163),
-._red_1m45a_135:not(._basic_1m45a_163),
-._green_1m45a_135:not(._basic_1m45a_163) {
+._orange_1vpoe_135:not(._basic_1vpoe_163),
+._red_1vpoe_135:not(._basic_1vpoe_163),
+._green_1vpoe_135:not(._basic_1vpoe_163) {
   color: #fff;
 }
-._orange_1m45a_135:not(._basic_1m45a_163):hover,
-._red_1m45a_135:not(._basic_1m45a_163):hover,
-._green_1m45a_135:not(._basic_1m45a_163):hover {
+._orange_1vpoe_135:not(._basic_1vpoe_163):hover,
+._red_1vpoe_135:not(._basic_1vpoe_163):hover,
+._green_1vpoe_135:not(._basic_1vpoe_163):hover {
   color: #fff;
 }
-._orange_1m45a_135:not(._basic_1m45a_163):active,
-._red_1m45a_135:not(._basic_1m45a_163):active,
-._green_1m45a_135:not(._basic_1m45a_163):active,
-._orange_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135,
-._red_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135,
-._green_1m45a_135:not(._basic_1m45a_163)._active_1m45a_135 {
+._orange_1vpoe_135:not(._basic_1vpoe_163):active,
+._red_1vpoe_135:not(._basic_1vpoe_163):active,
+._green_1vpoe_135:not(._basic_1vpoe_163):active,
+._orange_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135,
+._red_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135,
+._green_1vpoe_135:not(._basic_1vpoe_163)._active_1vpoe_135 {
   color: #fff;
 }
-._button_1m45a_100[data-warning] {
+._button_1vpoe_100[data-warning] {
   position: relative;
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._button_1m45a_100[data-warning]:hover {
+._button_1vpoe_100[data-warning]:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._button_1m45a_100[data-warning]:focus {
+._button_1vpoe_100[data-warning]:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._button_1m45a_100[data-error] {
+._button_1vpoe_100[data-error] {
   position: relative;
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._button_1m45a_100[data-error]:hover {
+._button_1vpoe_100[data-error]:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._button_1m45a_100[data-error]:focus {
+._button_1vpoe_100[data-error]:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inverted_1m45a_310 {
+._inverted_1vpoe_309 {
   background-color: transparent;
   border-color: var(--color-text);
   box-shadow: none;
 }
-._inverted_1m45a_310:hover,
-._inverted_1m45a_310:active {
+._inverted_1vpoe_309:hover,
+._inverted_1vpoe_309:active {
   box-shadow: none;
 }
-._inverted_1m45a_310._orange_1m45a_135 {
+._inverted_1vpoe_309._orange_1vpoe_135 {
   color: var(--color-background-button-primary);
   border-color: var(--color-background-button-primary);
 }
-._inverted_1m45a_310._red_1m45a_135 {
+._inverted_1vpoe_309._red_1vpoe_135 {
   color: var(--color-background-button-error);
   border-color: var(--color-background-button-error);
 }
-._inverted_1m45a_310._green_1m45a_135 {
+._inverted_1vpoe_309._green_1vpoe_135 {
   color: var(--color-background-button-success);
   border-color: var(--color-background-button-success);
 }
-._inverted_1m45a_310._orange_1m45a_135:hover,
-._inverted_1m45a_310._red_1m45a_135:hover,
-._inverted_1m45a_310._green_1m45a_135:hover,
-._inverted_1m45a_310._orange_1m45a_135:active,
-._inverted_1m45a_310._red_1m45a_135:active,
-._inverted_1m45a_310._green_1m45a_135:active {
+._inverted_1vpoe_309._orange_1vpoe_135:hover,
+._inverted_1vpoe_309._red_1vpoe_135:hover,
+._inverted_1vpoe_309._green_1vpoe_135:hover,
+._inverted_1vpoe_309._orange_1vpoe_135:active,
+._inverted_1vpoe_309._red_1vpoe_135:active,
+._inverted_1vpoe_309._green_1vpoe_135:active {
   color: white;
   box-shadow: none;
 }
-._groupOrderFirst_1m45a_340,
-._groupOrderMiddle_1m45a_341,
-._groupOrderLast_1m45a_342 {
+._groupOrderFirst_1vpoe_339,
+._groupOrderMiddle_1vpoe_340,
+._groupOrderLast_1vpoe_341 {
   margin-right: 0;
 }
-._groupOrderFirst_1m45a_340,
-._groupOrderMiddle_1m45a_341 {
+._groupOrderFirst_1vpoe_339,
+._groupOrderMiddle_1vpoe_340 {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
-._groupOrderLast_1m45a_342,
-._groupOrderMiddle_1m45a_341 {
+._groupOrderLast_1vpoe_341,
+._groupOrderMiddle_1vpoe_340 {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }

package/dist/index.d.ts

@@ -746,6 +746,7 @@ export declare interface IMenuProps {
         testId?: string;
         fullHeightTrigger?: boolean;
     };
+    active?: boolean;
     contextMenu?: boolean;
     width?: TStringOrNumber;
     disabled?: boolean;