@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/src/components/Input.tsx

@@ -41,6 +41,7 @@ export type InputFormatting = {
 };
 
 export type InputBaseProps = {
+  id?: string;
   after?: ReactNode;
   before?: ReactNode;
   label?: string;
@@ -55,9 +56,10 @@ export type InputBaseProps = {
   wrapperClassName?: string;
   focus?: boolean;
 } & InputFormatting &
-  Omit<ComponentProps<"input">, "align">;
+  Omit<ComponentProps<"input">, "align" | "id">;
 
 export const InputBase = ({
+  id,
   before,
   after,
   type,
@@ -80,6 +82,7 @@ export const InputBase = ({
     "data-focus": focus || null,
   };
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputId = `${id}-input`;
 
   useEffect(() => {
     const input = inputRef.current;
@@ -126,6 +129,8 @@ export const InputBase = ({
 
   return (
     <label
+      id={id}
+      htmlFor={inputId}
       ref={inputContainerRef}
       className={clsx(
         "w-full flex flex-col",
@@ -140,6 +145,7 @@ export const InputBase = ({
       {label && (
         <div className={clsx("flex items-center", componentGap)}>
           <Label
+            id={id ? `${id}-label` : undefined}
             className={clsx(
               props.disabled || props.readOnly
                 ? "cursor-default"
@@ -179,7 +185,7 @@ export const InputBase = ({
           required={required}
           {...props}
           {...attributes}
-          id={props.id}
+          id={inputId}
           className={clsx(
             "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
             "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -196,7 +202,7 @@ export const InputBase = ({
         {after}
       </div>
 
-      {caption}
+      {caption && <div id={id ? `${id}-caption` : undefined}>{caption}</div>}
     </label>
   );
 };
@@ -210,6 +216,7 @@ export const Input = ({
   onChange,
   onBlur,
   onClear,
+  id,
   ...props
 }: Omit<ComponentProps<"input">, "value" | "onChange" | "align" | "children"> &
   InputBaseProps & {
@@ -250,8 +257,9 @@ export const Input = ({
   const getInputProps = () => {
     const baseProps = {
       ...props,
+      id,
       ...getDecimalPlaceholder(decimals),
-      value: propValue
+      value: propValue,
     };
 
     switch (variant) {
@@ -318,6 +326,7 @@ export const Input = ({
         const hasValue = displayValue.length > 0;
         return hasValue && !props.readOnly ? (
           <Icon
+            id={id ? `${id}-clear-button` : undefined}
             name="close"
             onClick={handleSearchReset}
             className="cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -330,9 +339,9 @@ export const Input = ({
 
       case "uom":
         return uom ? (
-            <span className="text-text-secondary-normal uppercase">
+          <span className="text-text-secondary-normal uppercase">
             {uom.slice(0, 4)}
-            </span>
+          </span>
         ) : null;
 
       case "percentage":
@@ -460,12 +469,12 @@ Input.displayName = "Input";
 
 // Legacy component exports for backward compatibility
 export const Finder = (
-  props: Omit<ComponentProps<"input">, "value" | "align" | "children"> &
+  props: Omit<ComponentProps<"input">, "value" | "align" | "children" | "id"> &
     InputBaseProps & { value?: string | number },
 ) => <Input {...props} variant="finder" />;
 
 export const UOM = (
-  props: Omit<ComponentProps<"input">, "value" | "align" | "children"> &
+  props: Omit<ComponentProps<"input">, "value" | "align" | "children" | "id"> &
     InputBaseProps & {
       uom: string;
       value?: string | number;
@@ -475,7 +484,7 @@ export const UOM = (
 export const Currency = (
   props: Omit<
     ComponentProps<"input">,
-    "value" | "onChange" | "align" | "children"
+    "value" | "onChange" | "align" | "children" | "id"
   > &
     InputBaseProps & {
       value?: number;
@@ -498,7 +507,7 @@ export const Currency = (
 };
 
 export const Percentage = (
-  props: Omit<ComponentProps<"input">, "value" | "align" | "children"> &
+  props: Omit<ComponentProps<"input">, "value" | "align" | "children" | "id"> &
     InputBaseProps & {
       value?: string | number;
     },

package/src/components/InputGroup.tsx

@@ -6,6 +6,7 @@ import { useId } from "react";
 import { componentGap, layoutGap } from "../classNames";
 
 type InputGroupProps = {
+  id?: string;
   label: string;
   orientation?: "vertical" | "horizontal";
   error?: boolean;
@@ -13,6 +14,7 @@ type InputGroupProps = {
 };
 
 export const InputGroup = ({
+  id,
   label,
   orientation = "horizontal",
   error = false,
@@ -20,14 +22,16 @@ export const InputGroup = ({
   caption,
   ...props
 }: ComponentProps<"div"> & InputGroupProps) => {
-  const id = useId();
+  const internalId = useId();
+  const labelId = `${id}-label`;
 
   return (
-    <div {...props} className={clsx("flex flex-col", componentGap)}>
+    <div id={id} {...props} className={clsx("flex flex-col", componentGap)}>
       <Label
+        id={labelId}
         as="label"
         className={clsx({ "!text-text-primary-error": error })}
-        htmlFor={id}
+        htmlFor={internalId}
       >
         {label}
       </Label>
@@ -43,7 +47,7 @@ export const InputGroup = ({
         {children}
       </div>
 
-      {caption}
+      {caption && <div id={id ? `${id}-caption` : undefined}>{caption}</div>}
     </div>
   );
 };

package/src/components/Label.tsx

@@ -5,6 +5,7 @@ export type Tags = "span" | "label" | "p" | "a";
 
 type LabelProps = {
   as?: Tags;
+  id?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -15,11 +16,13 @@ export const Label = ({
   className,
   color,
   align,
+  id,
   ...props
 }: LabelProps) => {
   const Element = as;
   return (
     <Element
+      id={id}
       className={clsx(
         typography.label,
         align === "left" && "text-left",

package/src/components/Link.tsx

@@ -13,6 +13,7 @@ export type LinkProps = AsProps &
     paddedY?: boolean;
     onClick?: (event: MouseEvent<HTMLElement>) => void;
     underline?: boolean;
+    id?: string;
   };
 
 export const Link = ({

package/src/components/List.tsx

@@ -1,10 +1,16 @@
 export function List({
   children,
   ordered,
+  id,
 }: {
   children: React.ReactNode;
   ordered?: boolean;
+  id?: string;
 }) {
   const Element = ordered ? "ol" : "ul";
-  return <Element className="list-disc list-inside">{children}</Element>;
+  return (
+    <Element id={id} className="list-disc list-inside">
+      {children}
+    </Element>
+  );
 }

package/src/components/LogoAgilityTopBar.tsx

@@ -1,9 +1,10 @@
-export function LogoAgilityTopBar() {
+export function LogoAgilityTopBar(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="148"
       height="24"
+      {...props}
       viewBox="0 0 148 24"
       fill="none"
     >

package/src/components/LogoDMSiTopBar.tsx

@@ -1,9 +1,10 @@
-export function LogoDMSiTopBar() {
+export function LogoDMSiTopBar(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       width="106"
       height="24"
       viewBox="0 0 106 24"
+      {...props}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >

package/src/components/LogoMillworkTopBar.tsx

@@ -1,4 +1,4 @@
-export function LogoMillworkTopBar() {
+export function LogoMillworkTopBar(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -6,6 +6,7 @@ export function LogoMillworkTopBar() {
       height="25"
       viewBox="0 0 94 25"
       fill="none"
+      {...props}
     >
       <mask
         id="mask0_4555_1132"

package/src/components/MainBar.tsx

@@ -9,6 +9,7 @@ import {
 } from "../classNames";
 
 type MainBarProps = {
+  id?: string;
   leftContent?: ReactNode;
   rightContent?: ReactNode;
   mobileLeftContent?: ReactNode;
@@ -19,6 +20,7 @@ type MainBarProps = {
 };
 
 export const MainBar = ({
+  id,
   leftContent: left,
   rightContent: right,
   mobileLeftContent: mobileLeft,
@@ -32,6 +34,7 @@ export const MainBar = ({
 
   return (
     <div
+      id={id}
       className={clsx(
         "min-h-mobile-container-padding",
         "bg-background-brand-normal items-center justify-between",

package/src/components/Menu.tsx

@@ -17,6 +17,7 @@ import { useMatchesMobile } from "./useMatchesMedia";
 export type MenuPosition = "right" | "bottom" | "bottom-right";
 
 type MenuProps = {
+  id?: string;
   positionTo?: RefObject<HTMLElement | null>;
   mobilePositionTo?: RefObject<HTMLElement | null>;
   show?: boolean;
@@ -32,6 +33,7 @@ type MenuProps = {
 };
 
 export const Menu = ({
+  id,
   children,
   className,
   ref,
@@ -125,6 +127,7 @@ export const Menu = ({
     show &&
     createPortal(
       <div
+        id={id}
         ref={setRefs}
         className={clsx(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",

package/src/components/MenuOption.tsx

@@ -11,6 +11,7 @@ import { MenuPosition } from "./Menu";
 import { useMatchesMobile } from "./useMatchesMedia";
 
 type BaseProps = PropsWithChildren<{
+  id?: string;
   disabled?: boolean;
   value?: string;
   before?: ReactNode;
@@ -20,45 +21,47 @@ type BaseProps = PropsWithChildren<{
   mobilePositionTo?: RefObject<HTMLElement | null>;
   selected?: boolean;
   currentSubMenuLevel?: number | null;
-}> & (
-  | {
-      subMenu: (props: {
-        menuId: string,
-        positionTo?: RefObject<HTMLDivElement>,
-        mobilePositionTo?: RefObject<HTMLElement | null>,
-        position?: MenuPosition,
-        subMenuLevel: number,
-        mobileBackMenuOption?: () => ReactNode;
-        mobileHide?: boolean;
-      }) => ReactNode;
-      subMenuLevel?: number;
-      onSubMenuHover: (menuId: string, level: number) => void;
-      onSubMenuLeave: (level: number) => void;
-      onSubMenuEnter: () => void;
-      toggleMenu: (id: string, level: number) => void;
-      activeMenu: string;
-      closeSubMenuLevel: (level: number) => void;
-    }
-  | {
-      subMenu?: undefined;
-      subMenuLevel?: number;
-      onSubMenuHover?: (menuId: string, level: number) => void;
-      onSubMenuLeave?: (level: number) => void;
-      onSubMenuEnter?: () => void;
-      toggleMenu?: (id: string, level: number) => void;
-      closeSubMenuLevel?: (level: number) => void;
-      activeMenu?: string;
-    }
-) & (
-  | {
-    highlightMatchingText: true;
-    menuValue: string;
-  }
-  | {
-    highlightMatchingText?: false | undefined;
-    menuValue?: string;
-  }
-);
+}> &
+  (
+    | {
+        subMenu: (props: {
+          menuId: string;
+          positionTo?: RefObject<HTMLDivElement>;
+          mobilePositionTo?: RefObject<HTMLElement | null>;
+          position?: MenuPosition;
+          subMenuLevel: number;
+          mobileBackMenuOption?: () => ReactNode;
+          mobileHide?: boolean;
+        }) => ReactNode;
+        subMenuLevel?: number;
+        onSubMenuHover: (menuId: string, level: number) => void;
+        onSubMenuLeave: (level: number) => void;
+        onSubMenuEnter: () => void;
+        toggleMenu: (id: string, level: number) => void;
+        activeMenu: string;
+        closeSubMenuLevel: (level: number) => void;
+      }
+    | {
+        subMenu?: undefined;
+        subMenuLevel?: number;
+        onSubMenuHover?: (menuId: string, level: number) => void;
+        onSubMenuLeave?: (level: number) => void;
+        onSubMenuEnter?: () => void;
+        toggleMenu?: (id: string, level: number) => void;
+        closeSubMenuLevel?: (level: number) => void;
+        activeMenu?: string;
+      }
+  ) &
+  (
+    | {
+        highlightMatchingText: true;
+        menuValue: string;
+      }
+    | {
+        highlightMatchingText?: false | undefined;
+        menuValue?: string;
+      }
+  );
 
 type ActionProps = BaseProps & {
   variant: "action";
@@ -71,6 +74,7 @@ type NormalProps = BaseProps & {
 type MenuOptionProps = ActionProps | NormalProps;
 
 export const MenuOption = ({
+  id,
   children,
   disabled = false,
   variant = "normal",
@@ -91,7 +95,7 @@ export const MenuOption = ({
   activeMenu,
   mobilePositionTo,
   highlightMatchingText = false,
-  menuValue
+  menuValue,
 }: MenuOptionProps) => {
   const uniqueId = useId();
   const internalRef = useRef(null);
@@ -158,14 +162,15 @@ export const MenuOption = ({
   const disabledStyles =
     disabled && clsx("bg-transparent cursor-default pointer-events-none");
 
-  const renderChildren = typeof children === 'string' && highlightMatchingText
-    ? (
-      highlightMatch(children, menuValue)
-    ) : children
+  const renderChildren =
+    typeof children === "string" && highlightMatchingText
+      ? highlightMatch(children, menuValue)
+      : children;
 
   return (
     <>
       <div
+        id={id}
         ref={actualRef}
         className={clsx(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -183,7 +188,7 @@ export const MenuOption = ({
         onClick={() => {
           onClick?.(menuId.current, (value || children) as string);
           if (subMenu) {
-            toggleMenu(menuId.current, subMenuLevel)
+            toggleMenu(menuId.current, subMenuLevel);
           }
         }}
         onMouseEnter={handleMouseEnter}
@@ -193,10 +198,7 @@ export const MenuOption = ({
         role="menuitem"
         aria-haspopup={subMenu ? "menu" : undefined}
       >
-
-        {before && (
-          <div className="shrink-0 flex items-center">{before}</div>
-        )}
+        {before && <div className="shrink-0 flex items-center">{before}</div>}
 
         {variant === "action" ? (
           <Label padded className={textLabelStyles}>
@@ -212,13 +214,21 @@ export const MenuOption = ({
       </div>
 
       {subMenu && (
-        <div 
-          onMouseEnter={handleSubMenuEnter} 
+        <div
+          onMouseEnter={handleSubMenuEnter}
           onMouseLeave={handleMouseLeave}
           data-submenu-parent={menuId.current}
           data-menu-level={subMenuLevel + 1}
         >
-          {subMenu({ menuId: menuId.current, positionTo: actualRef, mobilePositionTo, position: "right", subMenuLevel, mobileBackMenuOption, mobileHide: isMobile && activeMenu !== menuId.current })}
+          {subMenu({
+            menuId: menuId.current,
+            positionTo: actualRef,
+            mobilePositionTo,
+            position: "right",
+            subMenuLevel,
+            mobileBackMenuOption,
+            mobileHide: isMobile && activeMenu !== menuId.current,
+          })}
         </div>
       )}
     </>
@@ -230,7 +240,7 @@ export const MenuOption = ({
     }
 
     if (subMenu && after !== null) {
-      return <Icon name="chevron_right" />
+      return <Icon name="chevron_right" />;
     }
   }
 
@@ -241,15 +251,16 @@ export const MenuOption = ({
 
     return (
       <MenuOption
+        id={id ? `${id}-back` : undefined}
         onClick={() => {
-          closeSubMenuLevel?.(currentSubMenuLevel ?? 0)
+          closeSubMenuLevel?.(currentSubMenuLevel ?? 0);
         }}
         variant="action"
         before={<Icon name="chevron_left" />}
       >
         Back
       </MenuOption>
-    )
+    );
   }
 };
 
@@ -260,7 +271,10 @@ function highlightMatch(text: string, searchValue?: string): React.ReactNode {
     return text;
   }
 
-  const regex = new RegExp(`(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+  const regex = new RegExp(
+    `(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi",
+  );
   const parts = text.split(regex);
 
   return parts.map((part, index) =>
@@ -270,6 +284,6 @@ function highlightMatch(text: string, searchValue?: string): React.ReactNode {
       </span>
     ) : (
       part
-    )
+    ),
   );
-}
+}

package/src/components/MobileDataGrid.tsx

@@ -24,6 +24,7 @@ export function MobileDataGrid<T extends RowData>({
   getId,
   renderLink,
   renderChevron,
+  id,
 }: {
   columns: MobileColumnDef<T>[];
   data: T[];
@@ -31,9 +32,11 @@ export function MobileDataGrid<T extends RowData>({
   getId: (data: T) => string | number | undefined;
   renderLink?: (data: T) => React.ReactNode;
   renderChevron?: (data: T) => React.ReactNode;
+  id?: string;
 } & ComponentProps<"div">) {
   return (
     <div
+      id={id}
       className={clsx(
         "rounded",
         "overflow-hidden",
@@ -42,9 +45,13 @@ export function MobileDataGrid<T extends RowData>({
         "overflow-y-scroll scrollbar-thin",
       )}
     >
-      <MobileDataGridHeader header={header} />
+      <MobileDataGridHeader
+        id={id ? `${id}-header` : undefined}
+        header={header}
+      />
       {data.map((item) => (
         <MobileDataGridCard
+          id={id ? `${id}-card-${getId(item)}` : undefined}
           data={item}
           key={getId(item)}
           columns={columns}
@@ -56,9 +63,9 @@ export function MobileDataGrid<T extends RowData>({
   );
 }
 
-function MobileDataGridHeader({ header }: { header: string }) {
+function MobileDataGridHeader({ header, id }: { header: string; id?: string }) {
   return (
-    <div className="sticky top-0">
+    <div id={id} className="sticky top-0">
       <Theme theme="brand">
         <Stack
           horizontal
@@ -82,25 +89,29 @@ function MobileDataGridCard<T extends RowData>({
   columns,
   renderLink,
   renderChevron,
+  id,
 }: {
   data: T;
   columns: MobileColumnDef<T>[];
   renderLink?: (data: T) => React.ReactNode;
   renderChevron?: (data: T) => React.ReactNode;
+  id?: string;
 }) {
   return (
-    <div>
+    <div id={id}>
       <Stack sizing="component" padding>
         <Stack horizontal horizontalMobile items="center" justify="between">
           {renderLink && renderLink(data)}
           <Stack horizontal horizontalMobile items="center" justify="end">
             <Button
+              id={id ? `${id}-docs-button` : undefined}
               iconOnly
               variant="tertiary"
               onClick={() => console.log("Edit", data.id)}
               leftIcon={<Icon name="docs" />}
             ></Button>
             <Button
+              id={id ? `${id}-swap-button` : undefined}
               iconOnly
               variant="tertiary"
               onClick={() => console.log("Edit", data.id)}

package/src/components/Modal.tsx

@@ -13,6 +13,7 @@ import { useMatchesMobile } from "./useMatchesMedia";
 import { useMounted } from "./useMounted";
 
 type ModalProps = PropsWithChildren<{
+  id?: string;
   title?: string;
   open?: boolean;
   size?: "small" | "medium" | "large" | "x-large";
@@ -102,6 +103,7 @@ const sizes = {
 };
 
 export const Modal = ({
+  id,
   title,
   open = false,
   size = "small",
@@ -228,12 +230,14 @@ export const Modal = ({
 
   return createPortal(
     <ModalScrim
+      id={id ? `${id}-scrim` : undefined}
       size={size}
       ref={bgRef}
       show={open}
       onClick={backgroundClickHandler}
     >
       <div
+        id={id}
         ref={modalRef}
         className={clsx(
           "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -245,18 +249,23 @@ export const Modal = ({
         onClick={(e) => e.stopPropagation()}
       >
         <ModalHeader
+          id={id ? `${id}-header` : undefined}
           title={title}
           onClose={handleClose}
           hideCloseIcon={hideCloseIcon}
           headerIcon={headerIcon}
         />
         {children && (
-          <ModalContent fixedHeightScrolling={computedFixedHeightScrolling}>
+          <ModalContent
+            id={id ? `${id}-content` : undefined}
+            fixedHeightScrolling={computedFixedHeightScrolling}
+          >
             {children}
           </ModalContent>
         )}
         {showButtons && (
           <ModalButtons
+            id={id ? `${id}-buttons` : undefined}
             onClose={handleClose}
             onContinue={onContinue}
             customActions={customActions}