@oliasoft-open-source/react-ui-library 4.7.4 → 4.7.6

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEvent } from 'react';
+import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { DependencyList } from 'react';
@@ -866,6 +867,8 @@ export declare interface INativeSelectProps {
     maxTooltipWidth?: TStringOrNumber;
 }
 
+export declare const initializeContext: (context: Context<UnitContextType | null>) => void;
+
 export declare const Input: default_2.ForwardRefExoticComponent<IInputProps & default_2.RefAttributes<HTMLInputElement>>;
 
 export declare const InputGroup: ({ children, small, width, }: IInputGroupProps) => ReactElement;
@@ -1852,6 +1855,8 @@ export declare type TTriggerType = 'Text' | 'Button' | 'DropDownButton' | 'Compo
 
 declare type TUnitTableCellShape = TCellShape | IUnitTableStaticCell | IUnitTableInputCell | IUnitTableNumberInputCell;
 
+declare type UnitContextType = any;
+
 export declare const UnitInput: ({ name, placeholder, disabled, disabledUnit, error, left, small, width, value, unitkey, initUnit, noConversion, onChange, onClick, onFocus, onSwitchUnit, unitTemplate, doNotConvertValue, testId, warning, predefinedOptions, initialPredefinedOption, shouldLinkAutomaticly, selectedPredefinedOptionKey, validationCallback, disabledValidation, allowEmpty, autoValue, }: IUnitInputProps) => JSX_2.Element;
 
 export declare const UnitTable: ({ table, unitConfig, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, }: IUnitTableProps) => JSX_2.Element;

package/dist/index.js

@@ -6649,7 +6649,8 @@ const Dialog = ({ dialog: dialog2 }) => {
               basic: true,
               small: true,
               colored: "muted",
-              onClick: onClose
+              onClick: onClose,
+              testId: testId && `${testId}-dismiss`
             }
           ) }) : null
         ] }),
@@ -19214,7 +19215,12 @@ var MessageToggle = /* @__PURE__ */ ((MessageToggle2) => {
   MessageToggle2["TOGGLE_DETAILS"] = "TOGGLE_DETAILS";
   return MessageToggle2;
 })(MessageToggle || {});
-const Dismiss = ({ type, onClose, isInToast }) => {
+const Dismiss = ({
+  type,
+  onClose,
+  isInToast,
+  testId
+}) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -19223,7 +19229,7 @@ const Dismiss = ({ type, onClose, isInToast }) => {
         isInToast ? styles$s.absolute : "",
         type === MessageType.INFO ? styles$s.info : type === MessageType.SUCCESS ? styles$s.success : type === MessageType.WARNING ? styles$s.warning : type === MessageType.ERROR ? styles$s.error : null
       ),
-      children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CLOSE, onClick: onClose })
+      children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CLOSE, onClick: onClose, testId })
     }
   );
 };
@@ -20710,7 +20716,8 @@ const styles$m = {
 const MultiSelectedOptions = ({
   selectedOptions,
   small: small2,
-  width: width2
+  width: width2,
+  testId
 }) => {
   const isFontLoaded = useFontsReady();
   const [displayedOptions, setDisplayedOptions] = useState([]);
@@ -20732,27 +20739,34 @@ const MultiSelectedOptions = ({
     setDisplayedOptions(displayed);
     setOverflowOptions(overflow);
   }, [selectedOptions, isFontLoaded, width2]);
-  return /* @__PURE__ */ jsxs("div", { className: styles$m.multiOptions, children: [
-    displayedOptions.filter((option2) => option2 && option2.label).map((option2, index2) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: styles$m.multiOption,
-        onClick: (evt) => {
-          evt.stopPropagation();
-        },
-        children: option2.label
-      },
-      index2
-    )),
-    overflowOptions.length > 0 && /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        text: overflowOptions.map((option2, index2) => /* @__PURE__ */ jsx("div", { children: option2.label }, index2)),
-        display: "inline-flex",
-        children: /* @__PURE__ */ jsx("span", { className: styles$m.multiOption, children: displayedOptions.length ? `+${overflowOptions.length}` : `${overflowOptions.length} items` })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles$m.multiOptions,
+      "data-testid": testId && `${testId}-value`,
+      children: [
+        displayedOptions.filter((option2) => option2 && option2.label).map((option2, index2) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: styles$m.multiOption,
+            onClick: (evt) => {
+              evt.stopPropagation();
+            },
+            children: option2.label
+          },
+          index2
+        )),
+        overflowOptions.length > 0 && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            text: overflowOptions.map((option2, index2) => /* @__PURE__ */ jsx("div", { children: option2.label }, index2)),
+            display: "inline-flex",
+            children: /* @__PURE__ */ jsx("span", { className: styles$m.multiOption, children: displayedOptions.length ? `+${overflowOptions.length}` : `${overflowOptions.length} items` })
+          }
+        )
+      ]
+    }
+  );
 };
 const Input = ({
   selectedOptions,
@@ -20763,7 +20777,8 @@ const Input = ({
   inputRef,
   error: error2,
   placeholder: placeholder3 = "Select...",
-  small: small2
+  small: small2,
+  testId
 }) => {
   const containerRef = useRef(null);
   const isMulti2 = Array.isArray(selectedOptions);
@@ -20781,9 +20796,17 @@ const Input = ({
       {
         selectedOptions,
         small: small2,
-        width: getMultiOptionsWidth()
+        width: getMultiOptionsWidth(),
+        testId
       }
-    ) : /* @__PURE__ */ jsx("span", { className: styles$m.selectedSingleValue, children: !(searchValue == null ? void 0 : searchValue.length) ? selectedOptions == null ? void 0 : selectedOptions.label : "" }),
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles$m.selectedSingleValue,
+        "data-testid": testId && `${testId}-value`,
+        children: !(searchValue == null ? void 0 : searchValue.length) ? selectedOptions == null ? void 0 : selectedOptions.label : ""
+      }
+    ),
     searchable ? /* @__PURE__ */ jsx(
       "input",
       {
@@ -20792,7 +20815,8 @@ const Input = ({
         size: inputSize,
         className: cx$2(styles$m.input, error2 ? styles$m.error : ""),
         value: searchValue,
-        onChange: (evt) => onChange(evt.target.value)
+        onChange: (evt) => onChange(evt.target.value),
+        "data-testid": testId && `${testId}-input`
       }
     ) : null
   ] });
@@ -20888,7 +20912,8 @@ const Trigger = ({
               inputRef,
               onChange: onChangeSearch,
               error: error2,
-              small: small2
+              small: small2,
+              testId
             }
           ),
           /* @__PURE__ */ jsx("span", { className: styles$m.icons, children: canClear ? /* @__PURE__ */ jsx(
@@ -20904,6 +20929,7 @@ const Trigger = ({
                   onClickClear(evt);
                 }
               },
+              "data-testid": testId && `${testId}-clear`,
               children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CLOSE })
             }
           ) : /* @__PURE__ */ jsx("span", { className: cx$2(styles$m.iconOpen), children: /* @__PURE__ */ jsx(Icon, { icon: "chevron down" }) }) })
@@ -57704,7 +57730,15 @@ const toast = ({
   const { type = MessageType.INFO } = message2 ?? {};
   const CloseButton2 = ({
     closeToast
-  }) => /* @__PURE__ */ jsx(Dismiss, { type, onClose: closeToast, isInToast: true });
+  }) => /* @__PURE__ */ jsx(
+    Dismiss,
+    {
+      type,
+      onClose: closeToast,
+      isInToast: true,
+      testId: id2 !== void 0 ? id2.toString() + "-dismiss" : void 0
+    }
+  );
   const content2 = /* @__PURE__ */ jsx(
     Message,
     {
@@ -70016,7 +70050,7 @@ const getPreferredUnit = (unitkey, unitTemplate) => {
   const preferredUnit = unitTemplate == null ? void 0 : unitTemplate[unitkey];
   if (!preferredUnit) {
     console.log(
-      `Warning: 'unitTemplate' does not define a preferred unit for '${unitkey}'. Defaulting to standard unit.`
+      `Warning: 'unitTemplate' missing for '${unitkey}'. Using initial unit, preferred unit or value unit.`
     );
     return unitFromQuantity(unitkey) ?? "";
   }
@@ -70114,6 +70148,17 @@ const isKnownUnit = (valueWithUnit, defaultUnit) => {
   const unitFromValue = getUnit(valueWithUnit || "");
   return isUnitKnown(defaultUnit) && isUnitKnown(unitFromValue);
 };
+let UnitContext = createContext(null);
+const useUnitContext = () => {
+  return useContext(UnitContext);
+};
+let isInitialized = false;
+const initializeContext = (context2) => {
+  if (!isInitialized) {
+    isInitialized = true;
+    UnitContext = context2;
+  }
+};
 const predefinedMenuActive = "_predefinedMenuActive_1yvt4_1";
 const styles = {
   predefinedMenuActive
@@ -70152,18 +70197,19 @@ const UnitInput = ({
   allowEmpty = false,
   autoValue
 }) => {
+  const context2 = useUnitContext();
+  const runAfterUpdate = useRunAfterUpdate();
   if (typeof value === "number") {
     value = `${value}`;
   }
-  const runAfterUpdate = useRunAfterUpdate();
   const [propValue = "", propUnit = ""] = value !== void 0 ? split$1(value) : [];
   const propAutoUnit = autoValue ? getUnit(autoValue) : "";
-  const defaultUnit = useMemo$1(
-    () => getPreferredUnit(unitkey, unitTemplate),
-    [unitkey, unitTemplate]
+  const preferredUnit = useMemo$1(
+    () => getPreferredUnit(unitkey, unitTemplate || (context2 == null ? void 0 : context2.unitTemplate)),
+    [unitkey, unitTemplate, context2 == null ? void 0 : context2.unitTemplate]
   );
-  const knownUnit = isKnownUnit(value, defaultUnit);
-  const initDisplayUnit = initUnit || defaultUnit || propUnit;
+  const knownUnit = isKnownUnit(value, preferredUnit);
+  const initDisplayUnit = initUnit || preferredUnit || propUnit;
   const previousInitUnit = usePrevious(initDisplayUnit);
   const convertedValue = safeConvertValue(
     value,
@@ -70832,6 +70878,7 @@ export {
   UnitInput,
   UnitTable,
   dismissToast,
+  initializeContext,
   readFile,
   toast,
   useFocus,