@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/src/components/ModalButtons.tsx

@@ -9,18 +9,28 @@ type ModalButtonsProps = {
   onContinue?: () => void;
   sampleWidth?: boolean;
   customActions?: React.ReactNode;
+  id?: string;
 };
 
 export const ModalButtons = ({
   onClose,
   onContinue,
   customActions,
+  id,
 }: ModalButtonsProps) => {
   return (
-    <div className={clsx("border-t border-neutral-300 flex justify-end", layoutPaddding, layoutGroupGap)}>
+    <div
+      id={id}
+      className={clsx(
+        "border-t border-neutral-300 flex justify-end",
+        layoutPaddding,
+        layoutGroupGap,
+      )}
+    >
       {customActions ?? (
         <>
           <Button
+            id={id ? `${id}-close-button` : undefined}
             variant="secondary"
             leftIcon={<Icon name="close" size={24} />}
             onClick={onClose}
@@ -30,6 +40,7 @@ export const ModalButtons = ({
           </Button>
 
           <Button
+            id={id ? `${id}-continue-button` : undefined}
             variant="primary"
             leftIcon={<Icon name="check" size={24} />}
             className="max-sm:w-full"

package/src/components/ModalContent.tsx

@@ -3,14 +3,17 @@ import { layoutPaddding } from "../classNames";
 
 export interface ModalContentProps {
   fixedHeightScrolling?: boolean;
+  id?: string;
 }
 
 export function ModalContent({
   fixedHeightScrolling,
   children,
+  id,
 }: React.PropsWithChildren<ModalContentProps>) {
   return (
     <div
+      id={id}
       className={clsx(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,

package/src/components/ModalHeader.tsx

@@ -10,6 +10,7 @@ type ModalHeaderProps = {
   hideCloseIcon?: boolean;
   headerIcon?: React.ReactNode;
   onClose?: () => void;
+  id?: string;
 };
 
 export const ModalHeader = ({
@@ -17,20 +18,29 @@ export const ModalHeader = ({
   hideCloseIcon,
   headerIcon,
   onClose,
+  id,
 }: ModalHeaderProps) => {
   return (
-    <div className={clsx(
-      "flex justify-between items-center",
-      layoutPaddding,
-      layoutGroupGap
-    )}>
+    <div
+      id={id}
+      className={clsx(
+        "flex justify-between items-center",
+        layoutPaddding,
+        layoutGroupGap,
+      )}
+    >
       <div className={clsx("flex items-center", layoutGroupGap)}>
         {headerIcon}
-        {title && <Heading2 as="p">{title}</Heading2>}
+        {title && (
+          <Heading2 id={id ? `${id}-title` : undefined} as="p">
+            {title}
+          </Heading2>
+        )}
       </div>
 
       {!hideCloseIcon && (
         <Button
+          id={id ? `${id}-close-button` : undefined}
           iconOnly
           variant="tertiary"
           onClick={onClose}

package/src/components/ModalScrim.tsx

@@ -7,6 +7,7 @@ type ModalScrimProps = PropsWithChildren<{
   size?: "small" | "medium" | "large" | "x-large";
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   ref?: React.Ref<HTMLDivElement>;
+  id?: string;
 }>;
 
 export const ModalScrim = ({
@@ -15,9 +16,11 @@ export const ModalScrim = ({
   children,
   onClick,
   ref,
+  id,
 }: ModalScrimProps) => {
   return (
     <div
+      id={id}
       className={clsx(
         "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",

package/src/components/NavigationTab.tsx

@@ -4,6 +4,7 @@ import { Icon } from "./Icon";
 import { CSSProperties } from "react";
 
 export type NavigationTabProps = {
+  id?: string;
   label?: string;
   onClick?: () => void;
   selected?: boolean;
@@ -14,6 +15,7 @@ export type NavigationTabProps = {
 };
 
 export const NavigationTab = ({
+  id,
   label,
   onClick,
   selected = false,
@@ -56,12 +58,13 @@ export const NavigationTab = ({
   );
 
   const tokenOverrides: CSSProperties = {
-    '--color-text-on-action-primary-hover': 'var(--color-brand-500)',
-    '--color-text-on-action-primary-active': 'var(--color-brand-300)'
-  }
+    "--color-text-on-action-primary-hover": "var(--color-brand-500)",
+    "--color-text-on-action-primary-active": "var(--color-brand-300)",
+  };
 
   return (
     <Button
+      id={id}
       variant="tertiary-critical"
       colorClassName={textClassName}
       className={clsx(

package/src/components/NavigationTabs.tsx

@@ -5,19 +5,21 @@ import { NavigationTab } from "./NavigationTab";
 import { componentGap } from "../classNames";
 
 type Tab = {
-  id: string;
+  id?: string;
   label: string;
   href?: string;
   content?: ReactNode;
 };
 
 export type NavigationTabsProps = {
+  id?: string;
   tabs: Tab[];
   onTabChange?: (tabId: string) => void;
   colorPrimitives?: "dmsi" | "agility";
 };
 
 export const NavigationTabs = ({
+  id,
   tabs,
   onTabChange,
   colorPrimitives = "dmsi",
@@ -33,7 +35,7 @@ export const NavigationTabs = ({
   const selectedTabHasHref = tabs.find((tab) => tab.id === selectedTab)?.href;
 
   return (
-    <div>
+    <div id={id}>
       <div>
         <div
           className={clsx(
@@ -44,6 +46,7 @@ export const NavigationTabs = ({
           {tabs.map((tab) => (
             <NavigationTab
               key={tab.id}
+              id={id ? `${id}-tab-${tab.id}` : undefined}
               label={tab.label}
               selected={selectedTab === tab.id}
               onClick={() => handleTabClick(tab.id)}

package/src/components/Notification.tsx

@@ -11,6 +11,7 @@ import { Icon } from "./Icon";
 import { Stack } from "./Stack";
 
 export interface NotificationProps {
+  id?: string;
   variant?: "success" | "warning" | "error" | "info";
   title?: string;
   message?: string;
@@ -59,6 +60,7 @@ const variants = {
 };
 
 export const Notification = ({
+  id,
   variant = "success",
   title,
   message,
@@ -79,6 +81,7 @@ export const Notification = ({
 
   return (
     <div
+      id={id}
       className={clsx(
         "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
         className,
@@ -108,6 +111,7 @@ export const Notification = ({
       </Stack>
 
       <Button
+        id={id ? `${id}-close-button` : undefined}
         iconOnly
         variant="tertiary"
         onClick={() => setVisible(false)}

package/src/components/OptionPill.tsx

@@ -12,6 +12,7 @@ import { Label } from "./Label";
 import { Icon } from "./Icon";
 
 type OptionPillProps = {
+  id?: string;
   selected?: boolean;
   onClick?: () => void;
   onRemove?: () => void;
@@ -20,6 +21,7 @@ type OptionPillProps = {
 };
 
 export const OptionPill = ({
+  id,
   selected = false,
   onClick,
   onRemove,
@@ -60,6 +62,7 @@ export const OptionPill = ({
 
   return (
     <div
+      id={id}
       onClick={handleOnClick}
       {...props}
       {...additionalAttributes}
@@ -74,12 +77,17 @@ export const OptionPill = ({
         textColor,
       )}
     >
-      <Label padded className={componentPaddingYUsingComponentGap}>
+      <Label
+        id={id ? `${id}-label` : undefined}
+        padded
+        className={componentPaddingYUsingComponentGap}
+      >
         {children}
       </Label>
 
       {removable && (
         <Button
+          id={id ? `${id}-remove-button` : undefined}
           onClick={handleOnRemove}
           disabled={disabled}
           className={clsx(

package/src/components/Paragraph.tsx

@@ -6,6 +6,7 @@ type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
 
 type ParagraphProps = {
   as?: Tags;
+  id?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -19,12 +20,14 @@ export const Paragraph = ({
   addOverflow,
   children,
   as = "p",
+  id,
   ...props
 }: ParagraphProps) => {
   const Element = as;
 
   return (
     <Element
+      id={id}
       {...props}
       className={clsx(
         typography.paragraph,

package/src/components/Password.tsx

@@ -5,28 +5,33 @@ import { InputBase, InputBaseProps } from "./Input";
 import { Icon } from "./Icon";
 
 export const Password = ({
+  id,
   ...props
-}: Omit<ComponentProps<"input">, "type" | "children"> & InputBaseProps) => {
+}: Omit<ComponentProps<"input">, "type" | "children" | "id"> &
+  InputBaseProps) => {
   const [show, setShow] = useState(false);
 
   return (
     <InputBase
+      id={id}
       {...props}
       type={show ? "text" : "password"}
-      after={<WhichIcon show={show} setShow={setShow} />}
+      after={<WhichIcon id={id} show={show} setShow={setShow} />}
     />
   );
 };
 
 type WhichIconProps = {
+  id?: string;
   show: boolean;
   setShow: (value: boolean) => void;
 };
 
-const WhichIcon = ({ show, setShow }: WhichIconProps) => {
+const WhichIcon = ({ id, show, setShow }: WhichIconProps) => {
   if (show) {
     return (
       <Icon
+        id={id ? `${id}-toggle-visibility` : undefined}
         name="visibility_off"
         className="cursor-pointer"
         onClick={() => setShow(false)}
@@ -36,6 +41,7 @@ const WhichIcon = ({ show, setShow }: WhichIconProps) => {
 
   return (
     <Icon
+      id={id ? `${id}-toggle-visibility` : undefined}
       name="visibility"
       className="cursor-pointer"
       onClick={() => setShow(true)}

package/src/components/ProjectBar.tsx

@@ -13,6 +13,7 @@ type ProjectBarProps = {
   right: ReactNode;
   mobileLeft: ReactNode;
   mobileRight: ReactNode;
+  id?: string;
 };
 
 export const ProjectBar = ({
@@ -20,6 +21,7 @@ export const ProjectBar = ({
   right,
   mobileLeft,
   mobileRight,
+  id,
 }: ComponentProps<"div"> & ProjectBarProps) => {
   const isMobile = useMatchesMobile();
 
@@ -47,6 +49,7 @@ export const ProjectBar = ({
 
   return (
     <div
+      id={id}
       style={{ ...tokenOverrides } as React.CSSProperties}
       className={clsx(
         "flex items-center justify-between",

package/src/components/Radio.tsx

@@ -23,9 +23,10 @@ export const Radio = ({
   disabled,
   checked,
   readOnly,
+  id,
   ...props
 }: RadioProps) => {
-  const radioId = props.id;
+  const radioId = id;
 
   const paragraphColor: TextColorTokens = disabled
     ? "text-primary-disabled"
@@ -104,7 +105,7 @@ export const Radio = ({
       </div>
 
       {label && (
-        <Paragraph padded color={paragraphColor}>
+        <Paragraph id={`${radioId}-label`} padded color={paragraphColor}>
           {label}
         </Paragraph>
       )}

package/src/components/Search.tsx

@@ -10,7 +10,9 @@ import {
 import { Input, InputBaseProps } from "./Input";
 
 export interface SearchProps {
+  id?: string;
   renderMenu?: (props: {
+    id?: string;
     positionTo: RefObject<HTMLElement | null> | undefined;
     show: boolean;
     setShow: (value: boolean) => void;
@@ -22,17 +24,17 @@ export interface SearchProps {
 }
 
 export const Search = ({
+  id,
   label,
   error,
   children,
   readOnly,
   renderMenu,
   onClick,
-  className,
   wrapperClassName,
   removeRoundness,
   ...props
-}: Omit<InputBaseProps, "after"> & SearchProps) => {
+}: Omit<InputBaseProps, "after" | "id"> & SearchProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const inputContainerRef = useRef(null);
   const preventFocusOnInitialRender = useRef(true);
@@ -53,57 +55,69 @@ export const Search = ({
   return (
     <>
       <Input
+        id={id}
         variant="search"
         inputContainerRef={inputContainerRef}
         ref={inputRef}
         label={label}
         wrapperClassName={wrapperClassName}
         onClick={(e) => {
-            if (props.disabled || readOnly) {
-                return;
-            }
+          if (props.disabled || readOnly) {
+            return;
+          }
 
-            if (clearing) {
-                setClearing(false);
-                return;
-            }
+          if (clearing) {
+            setClearing(false);
+            return;
+          }
 
-            onClick?.(e);
-            setShow(!show)
+          onClick?.(e);
+          setShow(!show);
         }}
         onClear={() => {
-            setClearing(true);
+          setClearing(true);
         }}
         onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-            setShow(true);
-
-            if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-                e.preventDefault();
-
-                const menu = document.querySelector<HTMLElement>(`[data-menu="${searchMenuName}"]`);
-                const selectedMenuOption = menu?.querySelector<HTMLElement>('[data-selected]');
-
-                if (selectedMenuOption) {
-                    const allMenuOptions = Array.from(menu?.querySelectorAll<HTMLElement>('[role="menuitem"]') || []);
-                    const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
-
-                    let targetOption: HTMLElement | undefined;
-
-                    if (e.key === 'ArrowDown') {
-                        targetOption = allMenuOptions[currentIndex + 1] || allMenuOptions[0]; // Wrap to first
-                    } else {
-                        targetOption = allMenuOptions[currentIndex - 1] || allMenuOptions[allMenuOptions.length - 1]; // Wrap to last
-                    }
-
-                    targetOption?.focus();
-                } else {
-                    const toFocusMenuOption = e.key === 'ArrowDown'
-                        ? menu?.querySelector<HTMLElement>('[role="menuitem"]')
-                        : menu?.querySelector<HTMLElement>('[role="menuitem"]:last-child');
-
-                    toFocusMenuOption?.focus();
-                }
+          setShow(true);
+
+          if (["ArrowUp", "ArrowDown"].includes(e.key)) {
+            e.preventDefault();
+
+            const menu = document.querySelector<HTMLElement>(
+              `[data-menu="${searchMenuName}"]`,
+            );
+            const selectedMenuOption =
+              menu?.querySelector<HTMLElement>("[data-selected]");
+
+            if (selectedMenuOption) {
+              const allMenuOptions = Array.from(
+                menu?.querySelectorAll<HTMLElement>('[role="menuitem"]') || [],
+              );
+              const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
+
+              let targetOption: HTMLElement | undefined;
+
+              if (e.key === "ArrowDown") {
+                targetOption =
+                  allMenuOptions[currentIndex + 1] || allMenuOptions[0]; // Wrap to first
+              } else {
+                targetOption =
+                  allMenuOptions[currentIndex - 1] ||
+                  allMenuOptions[allMenuOptions.length - 1]; // Wrap to last
+              }
+
+              targetOption?.focus();
+            } else {
+              const toFocusMenuOption =
+                e.key === "ArrowDown"
+                  ? menu?.querySelector<HTMLElement>('[role="menuitem"]')
+                  : menu?.querySelector<HTMLElement>(
+                      '[role="menuitem"]:last-child',
+                    );
+
+              toFocusMenuOption?.focus();
             }
+          }
         }}
         error={error}
         readOnly={readOnly}
@@ -114,12 +128,13 @@ export const Search = ({
 
       {renderMenu
         ? renderMenu({
+            id: `${id}-menu`,
             positionTo: inputContainerRef,
             show,
             setShow,
             topOffset: props.caption ? -16 : null,
             autoFocusOff: true,
-            menuName: searchMenuName
+            menuName: searchMenuName,
           })
         : children}
     </>

package/src/components/Select.tsx

@@ -5,7 +5,9 @@ import { Icon } from "./Icon";
 import clsx from "clsx";
 
 export interface SelectProps {
+  id?: string;
   renderMenu?: (props: {
+    id?: string;
     positionTo: RefObject<HTMLElement | null> | undefined;
     show: boolean;
     setShow: (value: boolean) => void;
@@ -15,6 +17,7 @@ export interface SelectProps {
 }
 
 export const Select = ({
+  id,
   label,
   error,
   children,
@@ -27,7 +30,7 @@ export const Select = ({
   displayValue,
   value,
   ...props
-}: Omit<InputBaseProps, "after"> & SelectProps) => {
+}: Omit<InputBaseProps, "after" | "id"> & SelectProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const inputContainerRef = useRef(null);
   const preventFocusOnInitialRender = useRef(true);
@@ -45,6 +48,7 @@ export const Select = ({
   return (
     <>
       <InputBase
+        id={id}
         inputContainerRef={inputContainerRef}
         ref={inputRef}
         label={label}
@@ -91,6 +95,7 @@ export const Select = ({
 
       {renderMenu
         ? renderMenu({
+            id: `${id}-menu`,
             positionTo: inputContainerRef,
             show,
             setShow,

package/src/components/SideMenu.tsx

@@ -3,11 +3,17 @@ import clsx from "clsx";
 
 type SideMenuProps = PropsWithChildren<{
   cardStyle?: boolean;
+  id?: string;
 }>;
 
-export const SideMenu = ({ children, cardStyle = false }: SideMenuProps) => {
+export const SideMenu = ({
+  children,
+  cardStyle = false,
+  id,
+}: SideMenuProps) => {
   return (
     <div
+      id={id}
       className={clsx(
         "flex flex-col",
         cardStyle &&

package/src/components/SideMenuGroup.tsx

@@ -8,6 +8,7 @@ import { Stack } from "./Stack";
 import { Icon } from "./Icon";
 
 export type SideMenuGroupProps = PropsWithChildren<{
+  id?: string;
   label?: string;
   groupIndentLevel?: 1 | 2 | 3 | 4;
   collapsed?: boolean;
@@ -15,6 +16,7 @@ export type SideMenuGroupProps = PropsWithChildren<{
 }>;
 
 export const SideMenuGroup = ({
+  id,
   label,
   groupIndentLevel = 1,
   collapsed = false,
@@ -42,6 +44,7 @@ export const SideMenuGroup = ({
   return (
     <>
       <div
+        id={id}
         className={clsx(
           "group/sm-group flex rounded cursor-pointer",
           "bg-transparent",
@@ -53,7 +56,13 @@ export const SideMenuGroup = ({
         onClick={toggleCollapse}
         {...additionalAttr}
       >
-        <Stack horizontal items="center" sizing="component" padding>
+        <Stack
+          id={id ? `${id}-stack` : undefined}
+          horizontal
+          items="center"
+          sizing="component"
+          padding
+        >
           {groupIndentLevel === 2 && <div className="pl-6" />}
           {groupIndentLevel === 3 && <div className="pl-13" />}
           {groupIndentLevel === 4 && <div className="pl-20" />}
@@ -70,7 +79,9 @@ export const SideMenuGroup = ({
             size={24}
           />
 
-          <Label padded>{label}</Label>
+          <Label id={id ? `${id}-label` : undefined} padded>
+            {label}
+          </Label>
         </Stack>
       </div>
       {!internalCollapsed && children}