@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/Search.tsx

@@ -1,152 +0,0 @@
-"use client";
-import {
-  ReactNode,
-  RefObject,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from "react";
-import { Input, InputBaseProps } from "./Input";
-
-export interface SearchProps {
-  id?: string;
-  testid?: string;
-  renderMenu?: (props: {
-    id?: string;
-    testid?: string;
-    positionTo: RefObject<HTMLElement | null> | undefined;
-    show: boolean;
-    setShow: (value: boolean) => void;
-    topOffset?: number | null;
-    autoFocusOff?: boolean;
-    menuName?: string;
-  }) => ReactNode;
-  value?: string;
-  autocompletePadding?: boolean;
-}
-
-export const Search = ({
-  id,
-  testid,
-  label,
-  error,
-  children,
-  readOnly,
-  renderMenu,
-  onClick,
-  wrapperClassName,
-  removeRoundness,
-  autocompletePadding = false,
-  ...props
-}: Omit<InputBaseProps, "after" | "id"> & SearchProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputContainerRef = useRef(null);
-  const preventFocusOnInitialRender = useRef(true);
-  const [show, setShow] = useState(false);
-  const [clearing, setClearing] = useState(false);
-  const uniqueId = useId();
-  const searchMenuName = `search-menu-${uniqueId}`;
-
-  useEffect(() => {
-    if (preventFocusOnInitialRender.current) {
-      preventFocusOnInitialRender.current = false;
-      return;
-    }
-
-    inputRef.current?.focus();
-  }, [props.value]);
-
-  return (
-    <>
-      <Input
-        id={id}
-        testid={testid}
-        variant="search"
-        inputContainerRef={inputContainerRef}
-        ref={inputRef}
-        label={label}
-        wrapperClassName={wrapperClassName}
-        autocompletePadding={autocompletePadding}
-        onClick={(e) => {
-          if (props.disabled || readOnly) {
-            return;
-          }
-
-          if (clearing) {
-            setClearing(false);
-            return;
-          }
-
-          onClick?.(e);
-          setShow(!show);
-        }}
-        onClear={() => {
-          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();
-            }
-          }
-        }}
-        error={error}
-        readOnly={readOnly}
-        removeRoundness={removeRoundness}
-        focus={renderMenu && show}
-        {...props}
-      />
-
-      {renderMenu
-        ? renderMenu({
-            id: id ? `${id}-menu` : undefined,
-            testid: testid ? `${testid}-menu` : undefined,
-            positionTo: inputContainerRef,
-            show,
-            setShow,
-            topOffset: props.caption ? -16 : null,
-            autoFocusOff: true,
-            menuName: searchMenuName,
-          })
-        : children}
-    </>
-  );
-};
-
-Search.displayName = "Search";

package/src/components/SearchResultImage/index.tsx

@@ -1,39 +0,0 @@
-import { useState } from "react";
-import { ImagePlaceholder } from "../ImagePlaceholder";
-
-export type SearchResultImageProps = {
-  width?: number;
-  height?: number;
-  src?: string | null;
-  alt: string;
-  className?: string;
-};
-
-export function SearchResultImage({
-  width = 20,
-  height = 20,
-  src,
-  alt,
-}: SearchResultImageProps) {
-  const [imageError, setImageError] = useState(false);
-
-  const showPlaceholder = imageError || !src;
-
-  return (
-    <>
-      {showPlaceholder ? (
-        <ImagePlaceholder width={width} height={height} />
-      ) : (
-        <img
-          src={src}
-          alt={alt}
-          width={width}
-          height={height}
-          draggable={false}
-          loading="lazy"
-          onError={() => setImageError(true)}
-        />
-      )}
-    </>
-  );
-}

package/src/components/Select.tsx

@@ -1,114 +0,0 @@
-"use client";
-import { ReactNode, RefObject, useEffect, useRef, useState } from "react";
-import { InputBase, InputBaseProps } from "./Input";
-import { Icon } from "./Icon";
-import clsx from "clsx";
-
-export interface SelectProps {
-  id?: string;
-  testid?: string;
-  renderMenu?: (props: {
-    id?: string;
-    testid?: string;
-    positionTo: RefObject<HTMLElement | null> | undefined;
-    show: boolean;
-    setShow: (value: boolean) => void;
-    topOffset?: number | null;
-  }) => ReactNode;
-  displayValue?: string;
-}
-
-export const Select = ({
-  id,
-  testid,
-  label,
-  error,
-  children,
-  readOnly,
-  renderMenu,
-  onClick,
-  className,
-  wrapperClassName,
-  removeRoundness,
-  displayValue,
-  value,
-  ...props
-}: Omit<InputBaseProps, "after" | "id"> & SelectProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputContainerRef = useRef(null);
-  const preventFocusOnInitialRender = useRef(true);
-  const [show, setShow] = useState(false);
-
-  useEffect(() => {
-    if (preventFocusOnInitialRender.current) {
-      preventFocusOnInitialRender.current = false;
-      return;
-    }
-
-    inputRef.current?.focus();
-  }, [value]);
-
-  return (
-    <>
-      <InputBase
-        id={id}
-        testid={testid}
-        inputContainerRef={inputContainerRef}
-        ref={inputRef}
-        label={label}
-        after={
-          !readOnly && (
-            <span
-              className={clsx(
-                props.disabled
-                  ? "text-icon-action-primary-disabled"
-                  : "text-icon-action-primary-normal",
-                "contents",
-              )}
-            >
-              <Icon name="keyboard_arrow_down" />
-            </span>
-          )
-        }
-        maxLength={0}
-        className={clsx("!caret-transparent !cursor-default", className)}
-        wrapperClassName={wrapperClassName}
-        onKeyDown={(e) => {
-          const openKeys = ["Enter", "Space", " "];
-
-          if (openKeys.includes(e.key)) {
-            e.preventDefault();
-            (e.target as HTMLElement).click();
-          }
-        }}
-        onClick={(e) => {
-          if (props.disabled || readOnly) {
-            return;
-          }
-
-          setShow(!show);
-          onClick?.(e);
-        }}
-        error={error}
-        readOnly={readOnly}
-        removeRoundness={removeRoundness}
-        focus={show}
-        onChange={(e) => props.onChange?.(e)}
-        {...props}
-        value={displayValue ?? value ?? (props.onChange ? "" : undefined)}
-      />
-
-      {renderMenu
-        ? renderMenu({
-            id: id ? `${id}-menu` : undefined,
-            positionTo: inputContainerRef,
-            show,
-            setShow,
-            topOffset: props.caption ? -16 : null,
-          })
-        : children}
-    </>
-  );
-};
-
-Select.displayName = "Select";

package/src/components/SideMenu.tsx

@@ -1,30 +0,0 @@
-import { PropsWithChildren } from "react";
-import clsx from "clsx";
-
-type SideMenuProps = PropsWithChildren<{
-  cardStyle?: boolean;
-  id?: string;
-  testid?: string;
-}>;
-
-export const SideMenu = ({
-  children,
-  cardStyle = false,
-  id,
-  testid,
-}: SideMenuProps) => {
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "flex flex-col",
-        cardStyle &&
-          "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal",
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-SideMenu.displayName = "SideMenu";

package/src/components/SideMenuGroup.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { PropsWithChildren, useEffect, useState } from "react";
-import { Label } from "./Label";
-import { baseTransition } from "../classNames";
-import { Stack } from "./Stack";
-import { Icon } from "./Icon";
-
-export type SideMenuGroupProps = PropsWithChildren<{
-  id?: string;
-  testid?: string;
-  label?: string;
-  groupIndentLevel?: 1 | 2 | 3 | 4;
-  collapsed?: boolean;
-  disabled?: boolean;
-}>;
-
-export const SideMenuGroup = ({
-  id,
-  testid,
-  label,
-  groupIndentLevel = 1,
-  collapsed = false,
-  disabled = false,
-  children,
-}: SideMenuGroupProps) => {
-  const [internalCollapsed, setInternalCollapsed] = useState(collapsed);
-
-  useEffect(() => {
-    setInternalCollapsed(collapsed);
-  }, [collapsed]);
-
-  const toggleCollapse = () => {
-    if (!disabled) setInternalCollapsed((prev) => !prev);
-  };
-
-  const enabledDisabledStyles = disabled
-    ? clsx("text-text-action-disabled pointer-events-none")
-    : clsx("text-text-primary-normal");
-
-  const additionalAttr = {
-    "data-disabled": disabled || null,
-  };
-
-  return (
-    <>
-      <div
-        id={id}
-        data-testid={testid}
-        className={clsx(
-          "group/sm-group flex rounded cursor-pointer",
-          "bg-transparent",
-          "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-          "active:bg-background-action-secondary-active active:text-text-action-active",
-          baseTransition,
-          enabledDisabledStyles,
-        )}
-        onClick={toggleCollapse}
-        {...additionalAttr}
-      >
-        <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" />}
-
-          <Icon
-            name="keyboard_arrow_down"
-            className={clsx(
-              "transition duration-100 ease-in-out",
-              "pointer-events-none",
-              {
-                "rotate-180": !internalCollapsed,
-              },
-            )}
-            size={24}
-          />
-
-          <Label id={id ? `${id}-label` : undefined} testid={testid ? `${testid}-label` : undefined} padded>
-            {label}
-          </Label>
-        </Stack>
-      </div>
-      {!internalCollapsed && children}
-    </>
-  );
-};
-
-SideMenuGroup.displayName = "SideMenuGroup";

package/src/components/SideMenuItem.tsx

@@ -1,109 +0,0 @@
-import clsx from "clsx";
-import { baseTransition, componentPaddingMinus2pxBorder } from "../classNames";
-import { Stack } from "./Stack";
-import { Paragraph } from "./Paragraph";
-
-export type SideMenuItemProps = {
-  id?: string;
-  as?: React.ElementType;
-  testid?: string;
-  label?: string;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  href?: string;
-  groupIndentLevel?: 1 | 2 | 3 | 4 | 5;
-  selected?: boolean;
-  disabled?: boolean;
-  onClick?: () => void;
-};
-
-export const SideMenuItem = ({
-  id,
-  as = "a",
-  testid,
-  label,
-  leftIcon,
-  rightIcon,
-  href,
-  groupIndentLevel,
-  selected = false,
-  disabled = false,
-  onClick,
-}: SideMenuItemProps) => {
-  const unselectedStateStyles =
-    !selected && !disabled && clsx("border-transparent");
-
-  const unselectedDisabledStateStyles =
-    !selected && disabled && clsx("bg-transparent border-transparent");
-
-  const selectedStateStyles =
-    selected &&
-    !disabled &&
-    clsx(
-      "bg-background-action-secondary-hover border-border-action-normal",
-      "hover:border-border-action-hover",
-      "active:border-border-action-active",
-    );
-
-  const selectedDisabledStateStyles =
-    selected &&
-    disabled &&
-    clsx(
-      "bg-background-action-secondary-disabled border-border-action-disabled",
-    );
-
-  const enabledDisabledStyles = disabled
-    ? clsx("text-text-action-disabled pointer-events-none")
-    : clsx("text-text-primary-normal");
-  const Element = as;
-  return (
-    <Element
-      id={id}
-      data-testid={testid}
-      href={href}
-      className={clsx(
-        "group flex w-full rounded border-2 cursor-pointer",
-        "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-        "active:bg-background-action-secondary-active active:text-text-action-active",
-        baseTransition,
-        componentPaddingMinus2pxBorder,
-        unselectedStateStyles,
-        unselectedDisabledStateStyles,
-        selectedStateStyles,
-        selectedDisabledStateStyles,
-        enabledDisabledStyles,
-      )}
-      onClick={onClick}
-    >
-      <Stack
-        id={id ? `${id}-stack` : undefined}
-        horizontal
-        items="center"
-        sizing="component"
-      >
-        {groupIndentLevel === 2 && <div className="pl-6" />}
-        {groupIndentLevel === 3 && <div className="pl-13" />}
-        {groupIndentLevel === 4 && <div className="pl-20" />}
-        {groupIndentLevel === 5 && <div className="pl-27" />}
-
-        {leftIcon && leftIcon}
-
-        {!leftIcon && groupIndentLevel && <div className="w-6 h-6" />}
-
-        <Paragraph
-          id={id ? `${id}-label` : undefined}
-          testid={testid ? `${testid}-label` : undefined}
-          as="span"
-          padded
-          className="mr-auto !leading-6"
-        >
-          {label}
-        </Paragraph>
-
-        {rightIcon && rightIcon}
-      </Stack>
-    </Element>
-  );
-};
-
-SideMenuItem.displayName = "SideMenuItem";

package/src/components/SimpleTable.tsx

@@ -1,77 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { ReactNode } from "react";
-import { Subheader } from "./Subheader";
-import clsx from "clsx";
-import { Stack } from "./Stack";
-
-type SimpleTableProps<T> = {
-  columns: ColumnDef<T>[];
-  data: T[];
-  /** Optional additional rows appended after the main data (e.g. totals) */
-  additionalRows?: T[] | null;
-};
-
-export function SimpleTable<T extends Record<string, unknown>>({
-  columns,
-  data,
-  additionalRows,
-}: SimpleTableProps<T>) {
-  const allRows =
-    additionalRows && additionalRows.length > 0
-      ? [...data, ...additionalRows]
-      : data;
-
-  return (
-    <Stack elevation={4} rounded overflowX="hidden" overflowY="hidden">
-      <table className="w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal">
-        <thead>
-          <tr className="bg-background-primary-normal divide-x divide-border-primary-normal">
-            {columns.map((column, index) => (
-              <th
-                key={index}
-                scope="col"
-                className={clsx(
-                  "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
-                  column.meta?.headerWidth ? column.meta.headerWidth : "w-2/3",
-                )}
-              >
-                <Subheader>{column.header?.toString()}</Subheader>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {allRows.map((row, rowIndex) => (
-            <tr
-              key={rowIndex}
-              className="border-t border-border-primary-normal divide-x divide-border-primary-normal"
-            >
-              {columns.map((column, colIndex) => {
-                const rawValue = column.id
-                  ? (row as Record<string, unknown>)[column.id]
-                  : null;
-                const cellValue: ReactNode = (rawValue as ReactNode) ?? null;
-                return (
-                  <td
-                    key={colIndex}
-                    className={clsx(
-                      "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
-                      column.meta?.headerWidth,
-                    )}
-                  >
-                    {cellValue !== null && cellValue !== undefined
-                      ? typeof cellValue === "string" ||
-                        typeof cellValue === "number"
-                        ? cellValue.toString()
-                        : cellValue
-                      : ""}
-                  </td>
-                );
-              })}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </Stack>
-  );
-}

package/src/components/SkeletonParagraph.tsx

@@ -1,31 +0,0 @@
-interface SkeletonParagraphProps {
-  /** Optional custom class names to further style/size the skeleton */
-  className?: string;
-  /** Height of the skeleton (tailwind height utility), defaults to h-6 */
-  heightClassName?: string;
-  /** Size of the skeleton, affects widthClassName */
-  size?: "small" | "medium" | "large";
-}
-
-/**
- * A shimmering paragraph skeleton placeholder.
- * Provides an animated left-to-right shimmer to indicate loading text content.
- */
-export function SkeletonParagraph({
-  className = "",
-  heightClassName = "h-6",
-  size = "large",
-}: SkeletonParagraphProps) {
-  const sizeClassMap: Record<string, string> = {
-    small: "min-w-10 w-1/4",
-    medium: "min-w-20 w-1/2",
-    large: "min-w-32 w-full",
-  };
-  return (
-    <div
-      aria-label="Loading content"
-      role="status"
-      className={`skeleton-paragraph ${heightClassName} ${sizeClassMap[size]} rounded-xs ${className}`}
-    />
-  );
-}

package/src/components/Spinner.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-
-type SpinnerProps = {
-  size?: "small" | "large";
-  testid?: string;
-};
-
-export const Spinner: React.FC<SpinnerProps> = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return (
-    <svg
-      data-testid={testid}
-      width={dimension}
-      height={dimension}
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#1D1E1E"
-      className="spinner"
-      aria-label="Loading"
-    >
-      <circle cx="12" cy="4" r="2" opacity="1" />
-      <circle cx="17.666" cy="6.334" r="2" opacity="0.125" />
-      <circle cx="20" cy="12" r="2" opacity="0.25" />
-      <circle cx="17.666" cy="17.666" r="2" opacity="0.375" />
-      <circle cx="12" cy="20" r="2" opacity="0.5" />
-      <circle cx="6.334" cy="17.666" r="2" opacity="0.625" />
-      <circle cx="4" cy="12" r="2" opacity="0.75" />
-      <circle cx="6.334" cy="6.334" r="2" opacity="0.875" />
-    </svg>
-  );
-};
-Spinner.displayName = "Spinner";