@dmsi/wedgekit-react 0.0.498 → 0.0.500

package/src/components/Input.tsx

@@ -25,6 +25,7 @@ import {
   formatCurrencyDisplay,
 } from "../utils/formatting";
 import { TextAlign } from "../types";
+import { Paragraph } from "./Paragraph";
 
 export type InputVariant =
   | "default"
@@ -46,6 +47,7 @@ export type InputBaseProps = {
   testid?: string;
   after?: ReactNode;
   before?: ReactNode;
+  rightAdornment?: ReactNode;
   label?: string;
   error?: boolean;
   align?: TextAlign;
@@ -69,6 +71,7 @@ export const InputBase = ({
   testid,
   before,
   after,
+  rightAdornment,
   type,
   label,
   error,
@@ -226,6 +229,7 @@ export const InputBase = ({
         ) : (
           after
         )}
+        {rightAdornment}
       </div>
 
       {caption && (
@@ -251,6 +255,7 @@ export const Input = ({
   onClear,
   id,
   testid,
+  rightAdornment,
   ...props
 }: Omit<ComponentProps<"input">, "onChange" | "align" | "children"> &
   InputBaseProps & {
@@ -281,7 +286,7 @@ export const Input = ({
 
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, []);
+  }, [variant, propValue, decimals]);
 
   const getInputProps = () => {
     const baseProps = {
@@ -369,9 +374,9 @@ export const Input = ({
 
       case "uom":
         return uom ? (
-          <span className="text-text-secondary-normal uppercase">
-            {uom.slice(0, 4)}
-          </span>
+          <Paragraph color="text-secondary-normal">
+            {uom.toUpperCase()}
+          </Paragraph>
         ) : null;
 
       case "percentage":
@@ -487,6 +492,7 @@ export const Input = ({
       onChange={handleChange}
       onBlur={handleBlur}
       testid={testid}
+      rightAdornment={rightAdornment}
     />
   );
 };

package/src/components/Modal.tsx

@@ -32,6 +32,7 @@ type ModalProps = PropsWithChildren<{
   backgroundColor?: string; // full twcss color with bg- prefix
   noWrapper?: boolean;
   customFooter?: boolean;
+  titleAs?: React.ComponentType<{ children: React.ReactNode }>;
 }>;
 
 const fadeInScale = (element: HTMLElement, duration = 300) =>
@@ -131,6 +132,7 @@ export const Modal = ({
   headerClassname,
   customFooter,
   noWrapper,
+  titleAs: TitleComponent,
 }: ModalProps) => {
   const mounted = useMounted();
 
@@ -275,6 +277,7 @@ export const Modal = ({
           headerIcon={headerIcon}
           headerIconAlign={headerIconAlign}
           headerClassname={headerClassname}
+          titleAs={TitleComponent}
         />
         {children && (size !== "screen" || noWrapper) ? (
           <ModalContent

package/src/components/ModalHeader.tsx

@@ -14,6 +14,7 @@ type ModalHeaderProps = {
   id?: string;
   testid?: string;
   headerClassname?: string;
+  titleAs?: React.ComponentType<{ children: React.ReactNode }>;
 };
 
 export const ModalHeader = ({
@@ -25,7 +26,10 @@ export const ModalHeader = ({
   id,
   testid,
   headerClassname,
+  titleAs: TitleComponent,
 }: ModalHeaderProps) => {
+  const Title = TitleComponent || Heading2;
+
   return (
     <div
       id={id}
@@ -43,13 +47,13 @@ export const ModalHeader = ({
       <div className={clsx("flex items-center flex-1", layoutGroupGap)}>
         {headerIcon}
         {title && (
-          <Heading2
+          <Title
             id={id ? `${id}-title` : undefined}
             testid={testid ? `${testid}-title` : undefined}
             as="p"
           >
             {title}
-          </Heading2>
+          </Title>
         )}
       </div>