@holmdigital/components 1.2.4 → 2.0.0

package/dist/chunk-VM3O36W4.mjs

@@ -0,0 +1,239 @@
+// src/MultiSelect/MultiSelect.tsx
+import { useState, useRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MultiSelect = ({
+  label,
+  description,
+  error,
+  options,
+  selected,
+  onChange,
+  placeholder = "Select items...",
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [activeTokenIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const id = useId();
+  const listboxId = `${id}-listbox`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const availableOptions = options.filter(
+    (option) => !selected.includes(option.value) && option.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+  const handleSelect = (value) => {
+    onChange([...selected, value]);
+    setInputValue("");
+    setIsOpen(false);
+    setFocusedIndex(-1);
+    inputRef.current?.focus();
+  };
+  const handleRemove = (value) => {
+    onChange(selected.filter((v) => v !== value));
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (activeTokenIndex !== -1) {
+      handleTokenNavigation(e);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex((prev) => prev < availableOptions.length - 1 ? prev + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex((prev) => prev > 0 ? prev - 1 : availableOptions.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          handleSelect(availableOptions[focusedIndex].value);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        break;
+      case "Backspace":
+        if (inputValue === "" && selected.length > 0) {
+          handleRemove(selected[selected.length - 1]);
+        }
+        break;
+      case "ArrowLeft":
+        if (inputValue === "" && selected.length > 0) {
+        }
+        break;
+    }
+  };
+  const handleTokenNavigation = (_e) => {
+  };
+  const styles = {
+    container: {
+      position: "relative",
+      marginBottom: "1rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    label: {
+      display: "block",
+      fontWeight: 600,
+      marginBottom: "0.25rem",
+      color: "#1e293b"
+    },
+    description: {
+      fontSize: "0.875rem",
+      color: "#64748b",
+      marginBottom: "0.5rem"
+    },
+    error: {
+      fontSize: "0.875rem",
+      color: "#dc2626",
+      marginTop: "0.25rem"
+    },
+    inputWrapper: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "0.5rem",
+      padding: "0.375rem",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      minHeight: "2.5rem"
+    },
+    input: {
+      flex: 1,
+      minWidth: "120px",
+      border: "none",
+      outline: "none",
+      padding: "0.25rem",
+      fontSize: "1rem"
+    },
+    token: {
+      display: "inline-flex",
+      alignItems: "center",
+      backgroundColor: "#e2e8f0",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.25rem",
+      padding: "0.125rem 0.5rem",
+      fontSize: "0.875rem",
+      color: "#0f172a"
+    },
+    removeButton: {
+      marginLeft: "0.25rem",
+      border: "none",
+      background: "none",
+      cursor: "pointer",
+      padding: "0 0.125rem",
+      fontSize: "1rem",
+      lineHeight: 1,
+      color: "#64748b"
+    },
+    listbox: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      maxHeight: "200px",
+      overflowY: "auto",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      zIndex: 10,
+      marginTop: "0.25rem",
+      padding: 0,
+      listStyle: "none",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    option: {
+      padding: "0.5rem 0.75rem",
+      cursor: "pointer"
+    },
+    activeOption: {
+      backgroundColor: "#e2e8f0",
+      color: "#0f172a"
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: styles.container, children: [
+    /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: id, style: styles.label, children: label }),
+    description && /* @__PURE__ */ jsx("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ jsxs("div", { style: styles.inputWrapper, children: [
+      selected.map((value) => {
+        const option = options.find((o) => o.value === value);
+        return /* @__PURE__ */ jsxs("span", { style: styles.token, children: [
+          option?.label || value,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.removeButton,
+              onClick: () => handleRemove(value),
+              "aria-label": `Remove ${option?.label || value}`,
+              children: "\xD7"
+            }
+          )
+        ] }, value);
+      }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id,
+          type: "text",
+          role: "combobox",
+          "aria-autocomplete": "list",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-controls": listboxId,
+          "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : void 0,
+          "aria-invalid": !!error,
+          value: inputValue,
+          onChange: (e) => {
+            setInputValue(e.target.value);
+            setIsOpen(true);
+            setFocusedIndex(-1);
+          },
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsOpen(true),
+          placeholder: selected.length === 0 ? placeholder : "",
+          style: styles.input
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { id: errorId, style: styles.error, role: "alert", children: error }),
+    isOpen && availableOptions.length > 0 && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": label,
+        style: styles.listbox,
+        children: availableOptions.map((option, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            id: `${id}-option-${index}`,
+            role: "option",
+            "aria-selected": false,
+            onClick: () => handleSelect(option.value),
+            onMouseEnter: () => setFocusedIndex(index),
+            style: {
+              ...styles.option,
+              ...focusedIndex === index ? styles.activeOption : {}
+            },
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    )
+  ] });
+};
+
+export {
+  MultiSelect
+};

package/dist/index.d.mts

@@ -13,6 +13,17 @@ export { Switch } from './Switch/Switch.mjs';
 export { Toast, ToastProvider, ToastType, useToast } from './Toast/Toast.mjs';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip/Tooltip.mjs';
 export { Heading, HeadingProps } from './Heading/Heading.mjs';
+export { AccessibilityStatement, AccessibilityStatementProps } from './AccessibilityStatement/AccessibilityStatement.mjs';
+export { ErrorSummary, ErrorSummaryProps } from './ErrorSummary/ErrorSummary.mjs';
+export { Combobox, ComboboxOption, ComboboxProps } from './Combobox/Combobox.mjs';
+export { DatePicker, DatePickerProps } from './DatePicker/DatePicker.mjs';
+export { MultiSelect, MultiSelectOption, MultiSelectProps } from './MultiSelect/MultiSelect.mjs';
+export { Column, DataTable, DataTableProps } from './DataTable/DataTable.mjs';
+export { Pagination, PaginationProps } from './Pagination/Pagination.mjs';
+export { Card, CardProps } from './Card/Card.mjs';
+export { TreeNode, TreeView, TreeViewProps } from './TreeView/TreeView.mjs';
+export { LiveRegion, LiveRegionProps } from './LiveRegion/LiveRegion.mjs';
+import '@holmdigital/standards';
 
 interface BreadcrumbsProps extends React__default.HTMLAttributes<HTMLElement> {
     separator?: ReactNode;
@@ -81,4 +92,34 @@ interface TabsContentProps {
 }
 declare const TabsContent: ({ value, children, className }: TabsContentProps) => react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, TabTrigger, type TabTriggerProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps };
+interface ProgressBarProps {
+    value: number;
+    min?: number;
+    max?: number;
+    label: string;
+    showValueLabel?: boolean;
+    valueText?: string;
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+    className?: string;
+}
+declare const ProgressBar: React__default.FC<ProgressBarProps>;
+
+interface SkeletonProps {
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string | number;
+    height?: string | number;
+    animation?: 'pulse' | 'wave' | 'none';
+    className?: string;
+}
+declare const Skeleton: React__default.FC<SkeletonProps>;
+
+interface HelpTextProps {
+    id: string;
+    children: React__default.ReactNode;
+    variant?: 'default' | 'error' | 'valid';
+    showIcon?: boolean;
+    className?: string;
+}
+declare const HelpText: React__default.FC<HelpTextProps>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, HelpText, type HelpTextProps, ProgressBar, type ProgressBarProps, Skeleton, type SkeletonProps, TabTrigger, type TabTriggerProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps };

package/dist/index.d.ts

@@ -13,6 +13,17 @@ export { Switch } from './Switch/Switch.js';
 export { Toast, ToastProvider, ToastType, useToast } from './Toast/Toast.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip/Tooltip.js';
 export { Heading, HeadingProps } from './Heading/Heading.js';
+export { AccessibilityStatement, AccessibilityStatementProps } from './AccessibilityStatement/AccessibilityStatement.js';
+export { ErrorSummary, ErrorSummaryProps } from './ErrorSummary/ErrorSummary.js';
+export { Combobox, ComboboxOption, ComboboxProps } from './Combobox/Combobox.js';
+export { DatePicker, DatePickerProps } from './DatePicker/DatePicker.js';
+export { MultiSelect, MultiSelectOption, MultiSelectProps } from './MultiSelect/MultiSelect.js';
+export { Column, DataTable, DataTableProps } from './DataTable/DataTable.js';
+export { Pagination, PaginationProps } from './Pagination/Pagination.js';
+export { Card, CardProps } from './Card/Card.js';
+export { TreeNode, TreeView, TreeViewProps } from './TreeView/TreeView.js';
+export { LiveRegion, LiveRegionProps } from './LiveRegion/LiveRegion.js';
+import '@holmdigital/standards';
 
 interface BreadcrumbsProps extends React__default.HTMLAttributes<HTMLElement> {
     separator?: ReactNode;
@@ -81,4 +92,34 @@ interface TabsContentProps {
 }
 declare const TabsContent: ({ value, children, className }: TabsContentProps) => react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, TabTrigger, type TabTriggerProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps };
+interface ProgressBarProps {
+    value: number;
+    min?: number;
+    max?: number;
+    label: string;
+    showValueLabel?: boolean;
+    valueText?: string;
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+    className?: string;
+}
+declare const ProgressBar: React__default.FC<ProgressBarProps>;
+
+interface SkeletonProps {
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string | number;
+    height?: string | number;
+    animation?: 'pulse' | 'wave' | 'none';
+    className?: string;
+}
+declare const Skeleton: React__default.FC<SkeletonProps>;
+
+interface HelpTextProps {
+    id: string;
+    children: React__default.ReactNode;
+    variant?: 'default' | 'error' | 'valid';
+    showIcon?: boolean;
+    className?: string;
+}
+declare const HelpText: React__default.FC<HelpTextProps>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, HelpText, type HelpTextProps, ProgressBar, type ProgressBarProps, Skeleton, type SkeletonProps, TabTrigger, type TabTriggerProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps };