@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/src/components/Textarea.tsx

@@ -6,8 +6,9 @@ import { baseTransition, componentGap, componentPaddingMinusBorder, typography }
 interface TextareaProps
   extends Omit<
     ComponentProps<"textarea">,
-    "children" | "dangerouslySetInnerHTML"
+    "children" | "dangerouslySetInnerHTML" | "id"
   > {
+  id?: string;
   label?: string;
   error?: boolean;
   caption?: ReactNode;
@@ -38,6 +39,7 @@ const textareaReadOnlyClass = clsx(
 );
 
 export const Textarea = ({
+  id,
   label,
   error,
   caption,
@@ -49,6 +51,7 @@ export const Textarea = ({
 
   return (
     <label
+      htmlFor={id}
       className={clsx(
         "flex flex-col w-full",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
@@ -76,7 +79,7 @@ export const Textarea = ({
       <textarea
         {...props}
         {...attributes}
-        id={props.id}
+        id={id}
         className={clsx(
           "disabled:text-text-primary-disabled",
           typography.paragraph,
@@ -88,7 +91,7 @@ export const Textarea = ({
         )}
       ></textarea>
 
-      {caption}
+      {caption && <div id={id ? `${id}-caption` : undefined}>{caption}</div>}
     </label>
   );
 };

package/src/components/Theme.tsx

@@ -1,12 +1,14 @@
 export function Theme({
   theme,
   children,
+  id,
 }: {
   theme: "auto" | "brand";
   children: React.ReactNode;
+  id?: string;
 }) {
   return (
-    <div className="contents" data-theme={theme}>
+    <div id={id} className="contents" data-theme={theme}>
       {children}
     </div>
   );

package/src/components/Time.tsx

@@ -13,11 +13,15 @@ type TimeProps = {
   readOnly?: boolean;
   caption?: ReactNode;
   format?: "12h" | "24h";
-} & Omit<ComponentProps<"input">, "type" | "children" | "dangerouslySetInnerHTML">;
+  id?: string;
+} & Omit<
+  ComponentProps<"input">,
+  "type" | "children" | "dangerouslySetInnerHTML" | "id"
+>;
 
 const timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
 
-export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
+export const Time = ({ onChange, format = "12h", id, ...props }: TimeProps) => {
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [hasInteracted, setHasInteracted] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -281,7 +285,13 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
         }
       }, 0);
     }
-  }, [showTimePicker, is12HourFormat, selectedRefs.hour, selectedRefs.minute, selectedRefs.meridiem]);
+  }, [
+    showTimePicker,
+    is12HourFormat,
+    selectedRefs.hour,
+    selectedRefs.minute,
+    selectedRefs.meridiem,
+  ]);
   const renderOptions = (
     items: string[],
     type: "hour" | "minute" | "meridiem",
@@ -295,6 +305,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
       return (
         <TimeCell
           key={val}
+          id={id ? `${id}-${type}-${val}` : undefined}
           selected={isSelected}
           ref={
             isSelected
@@ -315,6 +326,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
     <div className="relative max-w-38">
       <InputBase
         {...props}
+        id={id}
         ref={inputRef}
         inputContainerRef={inputContainerRef}
         value={inputValue}
@@ -333,6 +345,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
       {showTimePicker &&
         createPortal(
           <Stack
+            id={id ? `${id}-timepicker` : undefined}
             elevation={4}
             height={240}
             position="absolute"
@@ -350,7 +363,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
               <div className={clsx(timePickerScrollableStyle)}>
                 {renderOptions(
                   Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) =>
-                    (i + 1).toString().padStart(2, "0"),
+                    (i + (is12HourFormat ? 1 : 0)).toString().padStart(2, "0"),
                   ),
                   "hour",
                 )}
@@ -377,6 +390,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
 };
 
 type TimeCellProps = {
+  id?: string;
   selected?: boolean;
   children?: React.ReactNode;
   start?: boolean;
@@ -392,6 +406,7 @@ type TimeCellProps = {
 };
 
 function TimeCell({
+  id,
   selected = false,
   start = false,
   intermediate = false,
@@ -410,6 +425,7 @@ function TimeCell({
   const isToday = today && !selected && !start && !intermediate && !end;
   return (
     <button
+      id={id}
       onPointerOver={onHover}
       onClick={onClick}
       onKeyDown={onKeyDown}
@@ -435,4 +451,4 @@ function TimeCell({
       {children}
     </button>
   );
-}
+}

package/src/components/Toast.tsx

@@ -10,6 +10,7 @@ import { createRoot } from "react-dom/client";
 import { componentGap, componentPadding, layoutGroupGap } from "../classNames";
 
 export interface ToastProps {
+  id?: string;
   variant?: "success" | "warning" | "error" | "info";
   title?: string;
   message?: string;
@@ -114,6 +115,7 @@ function getToastRoot(): HTMLElement {
 }
 
 export const Toast = ({
+  id,
   variant = "success",
   title,
   message,
@@ -131,9 +133,7 @@ export const Toast = ({
   useEffect(() => {
     if (show && !showToast) {
       if (toastElementRef.current) {
-        const animation = slideInFromBottomAnimation(
-          toastElementRef.current
-        );
+        const animation = slideInFromBottomAnimation(toastElementRef.current);
         animationRef.current = animation;
 
         animation.onfinish = () => {
@@ -166,10 +166,13 @@ export const Toast = ({
     };
 
     if (animationRef.current) {
-      animationRef.current.addEventListener('finish', handleAnimationEnd);
+      animationRef.current.addEventListener("finish", handleAnimationEnd);
       return () => {
         if (animationRef.current) {
-          animationRef.current.removeEventListener('finish', handleAnimationEnd);
+          animationRef.current.removeEventListener(
+            "finish",
+            handleAnimationEnd,
+          );
         }
       };
     }
@@ -179,7 +182,7 @@ export const Toast = ({
   const handleMouseLeave = () => {
     setIsHovered(false);
     // Resume animation when mouse leaves
-    if (animationRef.current && animationRef.current.playState === 'paused') {
+    if (animationRef.current && animationRef.current.playState === "paused") {
       animationRef.current.play();
     }
   };
@@ -191,6 +194,7 @@ export const Toast = ({
 
   return (
     <div
+      id={id}
       ref={toastElementRef}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -206,12 +210,22 @@ export const Toast = ({
       {iconElement}
       <div className={clsx("flex items-center", layoutGroupGap)}>
         <div className={clsx("flex flex-col w-68", componentGap)}>
-          {title && <Heading3>{title}</Heading3>}
-          {message && <Paragraph>{message}</Paragraph>}
+          {title && (
+            <Heading3 id={id ? `${id}-title` : undefined}>{title}</Heading3>
+          )}
+          {message && (
+            <Paragraph id={id ? `${id}-message` : undefined}>
+              {message}
+            </Paragraph>
+          )}
         </div>
 
         {showViewButton && (
-          <Button variant="tertiary" href={viewButtonLink}>
+          <Button
+            id={id ? `${id}-view-button` : undefined}
+            variant="tertiary"
+            href={viewButtonLink}
+          >
             View
           </Button>
         )}
@@ -222,20 +236,21 @@ export const Toast = ({
 
 Toast.displayName = "Toast";
 
-export function createToast(config: ToastProps) {
+export function createToast(config: Omit<ToastProps, "id"> & { id?: string }) {
   const toastRoot = getToastRoot();
   const toastContainer = document.createElement("div");
   toastRoot.appendChild(toastContainer);
-  
+
   const root = createRoot(toastContainer);
-  
+
   const handleClose = () => {
     root.unmount();
     toastContainer.remove();
   };
-  
+
   root.render(
     <Toast
+      id={config.id}
       show={true}
       onClose={handleClose}
       variant={config.variant}
@@ -243,6 +258,6 @@ export function createToast(config: ToastProps) {
       message={config.message}
       showViewButton={config.showViewButton}
       viewButtonLink={config.viewButtonLink}
-    />
+    />,
   );
 }

package/src/components/Tooltip.tsx

@@ -1,11 +1,18 @@
 "use client";
 
 import clsx from "clsx";
-import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
+import {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { componentPadding, typography } from "../classNames";
 
 export type TooltipProps = PropsWithChildren<{
+  id?: string;
   message: string;
   position?: "top" | "bottom" | "left" | "right";
   children?: ReactNode;
@@ -14,6 +21,7 @@ export type TooltipProps = PropsWithChildren<{
 }>;
 
 export const Tooltip = ({
+  id,
   message,
   position = "top",
   children,
@@ -22,20 +30,21 @@ export const Tooltip = ({
 }: TooltipProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
-  const [isTruncated, setIsTruncated] = useState(false);
+  // Commented as state: "isTruncated" is not used
+  // const [isTruncated, setIsTruncated] = useState(false);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
   const [isVisible, setIsVisible] = useState(false);
   const [removeOpacity, setRemoveOpacity] = useState(false);
 
   const updatePosition = () => {
     if (!ref.current || !tooltipRef.current) return;
-    
+
     const rect = ref.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    
+
     let top = 0;
     let left = 0;
-    
+
     switch (position) {
       case "top":
         top = rect.top - tooltipRect.height - offset;
@@ -54,11 +63,11 @@ export const Tooltip = ({
         left = rect.right + offset;
         break;
     }
-    
+
     setTooltipPosition({ top, left });
     requestAnimationFrame(() => {
       setRemoveOpacity(true);
-    })
+    });
   };
 
   const handleMouseEnter = () => {
@@ -76,19 +85,20 @@ export const Tooltip = ({
     if (isVisible && tooltipRef.current) {
       requestAnimationFrame(() => {
         updatePosition();
-      })
+      });
     }
   }, [isVisible]);
 
   useEffect(() => {
     if (isVisible) {
-      window.addEventListener('resize', updatePosition);
-      return () => window.removeEventListener('resize', updatePosition);
+      window.addEventListener("resize", updatePosition);
+      return () => window.removeEventListener("resize", updatePosition);
     }
   }, [isVisible]);
 
   return (
     <div
+      id={id}
       ref={ref}
       className="relative inline-grid grid-cols-[auto_1fr] items-center"
       onMouseEnter={handleMouseEnter}
@@ -96,36 +106,40 @@ export const Tooltip = ({
     >
       {children}
 
-      {isVisible && typeof document !== 'undefined' && createPortal(
-        <div
-          ref={tooltipRef}
-          style={{
-            position: 'fixed',
-            top: `${tooltipPosition.top}px`,
-            left: `${tooltipPosition.left}px`,
-            zIndex: 9999,
-          }}
-          className={clsx(
-            typography.caption,
-            "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
-            componentPadding,
-            !removeOpacity && "opacity-0"
-          )}
-        >
-          {message}
-        </div>,
-        document.body
-      )}
+      {isVisible &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div
+            id={id ? `${id}-message` : undefined}
+            ref={tooltipRef}
+            style={{
+              position: "fixed",
+              top: `${tooltipPosition.top}px`,
+              left: `${tooltipPosition.left}px`,
+              zIndex: 9999,
+            }}
+            className={clsx(
+              typography.caption,
+              "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+              componentPadding,
+              !removeOpacity && "opacity-0",
+            )}
+          >
+            {message}
+          </div>,
+          document.body,
+        )}
     </div>
   );
 
   function checkForTextTruncation() {
     if (showOnTruncation && ref.current) {
-      const paragraph = ref.current.querySelector('p');
+      const paragraph = ref.current.querySelector("p");
 
       if (paragraph) {
         const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
-        setIsTruncated(isTruncated);
+        // Commented as state: "isTruncated" is not used
+        // setIsTruncated(isTruncated);
 
         return isTruncated;
       }

package/src/components/TopBar.tsx

@@ -25,12 +25,14 @@ export const TopBarBase = ({
   mobileLeft,
   mobileRight,
   brandLogo = <LogoDMSiTopBar />,
+  id,
   ...props
-}: TopBarProps) => {
+}: TopBarProps & { id?: string }) => {
   const defaultStyles = clsx("bg-background-primary-normal");
 
   return (
     <div
+      id={id}
       className={clsx(
         "flex items-center justify-between",
         containerPaddingX,
@@ -98,16 +100,18 @@ export const TopBarBase = ({
 export const TopBar = ({
   left,
   brandLogo = <LogoDMSiTopBar />,
-
+  id,
   ...props
-}: TopBarProps & { brandLogo?: ReactNode }) => {
+}: TopBarProps & { brandLogo?: ReactNode; id?: string }) => {
   return (
     <TopBarBase
       {...props}
+      id={id}
       brandLogo={brandLogo}
       left={
         <>
           <a
+            id={id ? `${id}-brand-logo-link` : undefined}
             href="/"
             className="grow max-w-[400px] h-auto max-h-10 *:max-h-[inherit]"
           >

package/dist/chunk-DBYSGYST.js

@@ -1,47 +0,0 @@
-import {
-  Button
-} from "./chunk-T6HZARR7.js";
-import {
-  Icon
-} from "./chunk-IGQVA7SC.js";
-import {
-  layoutGroupGap,
-  layoutPaddding
-} from "./chunk-RDLEIAQU.js";
-
-// src/components/ModalButtons.tsx
-import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ModalButtons = ({
-  onClose,
-  onContinue,
-  customActions
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx("border-t border-neutral-300 flex justify-end", layoutPaddding, layoutGroupGap), children: customActions != null ? customActions : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "secondary",
-        leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }),
-        onClick: onClose,
-        className: "max-sm:w-full",
-        children: "Close"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "primary",
-        leftIcon: /* @__PURE__ */ jsx(Icon, { name: "check", size: 24 }),
-        className: "max-sm:w-full",
-        onClick: onContinue,
-        children: "Continue"
-      }
-    )
-  ] }) });
-};
-ModalButtons.displayName = "ModalButtons";
-
-export {
-  ModalButtons
-};

package/dist/chunk-UK3WG7HQ.js

@@ -1,48 +0,0 @@
-import {
-  Heading2
-} from "./chunk-TJ44JJCB.js";
-import {
-  Button
-} from "./chunk-T6HZARR7.js";
-import {
-  Icon
-} from "./chunk-IGQVA7SC.js";
-import {
-  layoutGroupGap,
-  layoutPaddding
-} from "./chunk-RDLEIAQU.js";
-
-// src/components/ModalHeader.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ModalHeader = ({
-  title,
-  hideCloseIcon,
-  headerIcon,
-  onClose
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: clsx(
-    "flex justify-between items-center",
-    layoutPaddding,
-    layoutGroupGap
-  ), children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
-      headerIcon,
-      title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title })
-    ] }),
-    !hideCloseIcon && /* @__PURE__ */ jsx(
-      Button,
-      {
-        iconOnly: true,
-        variant: "tertiary",
-        onClick: onClose,
-        leftIcon: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }) })
-      }
-    )
-  ] });
-};
-ModalHeader.displayName = "ModalHeader";
-
-export {
-  ModalHeader
-};