@coopdigital/react 1.2.6 → 1.3.0

package/dist/components/Button/Button.js

@@ -6,7 +6,7 @@ import React, { useState, useCallback } from 'react';
 import { hasUserBg } from '../../utils/index.js';
 import { LoadingIcon } from '../icons/LoadingIcon.js';
 
-const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "solid", ...props }) => {
+const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size, variant = "solid", ...props }) => {
     const element = as !== null && as !== void 0 ? as : (href ? "a" : "button");
     const [isPending, setIsPending] = useState(false);
     const handleClick = useCallback(async (event) => {
@@ -24,7 +24,7 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         "aria-disabled": isDisabled ? true : undefined,
         className: clsx(variant == "text" ? "coop-link" : "coop-button", !hasUserBg(className) && variant === "solid" && "bg-teal", className),
         "data-loading": isLoading || isPending ? true : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         "data-variant": variant !== "text" ? variant : undefined,
         "data-width": isFullWidth ? "full" : undefined,
         href,

package/dist/components/Checkbox/Checkbox.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const Checkbox = ({ className, disabled, error = false, id, name, ref, size = "md", ...props }) => {
+const Checkbox = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
     const uid = useId(id);
     const componentProps = {
         className: clsx("coop-checkbox", "coop-field-element", className),
         "data-error": error || undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
         id: uid,
         name,

package/dist/components/DatePicker/DatePicker.js

@@ -40,7 +40,7 @@ const Calendar = ({ captionLayout = "label", className, disabled, endMonth, form
             ...formatters,
         }, navLayout: "around", showOutsideDays: showOutsideDays, startMonth: startMonth, weekStartsOn: 1, ...props }));
 };
-const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size = "md", startDate, ...props }) => {
+const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size, startDate, ...props }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const uid = useId(id);
     initialDate = getInitialDate(mode, initialDate);

package/dist/components/Fieldset/Fieldset.js

@@ -4,13 +4,13 @@ import { Error } from '../FieldMarkers/Error.js';
 import { Hint } from '../FieldMarkers/Hint.js';
 import { Legend } from '../FieldMarkers/Legend.js';
 
-const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size = "md", ...props }) => {
+const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size, ...props }) => {
     const componentProps = {
         "aria-disabled": disabled,
         className: clsx("coop-fieldset", className),
         "data-error": error || undefined,
         "data-hide-error": hideErrorBar || undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
         ...props,
     };

package/dist/components/Radio/Radio.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const Radio = ({ className, disabled, error = false, id, name, ref, size = "md", ...props }) => {
+const Radio = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
     const uid = useId(id);
     const componentProps = {
         className: clsx("coop-radio", "coop-field-element", className),
         "data-error": error || undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
         id: uid,
         name,

package/dist/components/Searchbox/Searchbox.js

@@ -20,7 +20,7 @@ const defaultButtonText = React.createElement(SearchIcon, {
     stroke: "currentColor",
     width: 24,
 });
-const Searchbox = ({ action, children, className, id, label, labelVisible = false, onSubmit, ref, size = "md", variant = "solid", ...props }) => {
+const Searchbox = ({ action, children, className, id, label, labelVisible = false, onSubmit, ref, size, variant = "solid", ...props }) => {
     const slots = { ...useSlots(componentSlots, children) };
     const [isPending, setIsPending] = useState(false);
     const uid = useId(id);
@@ -43,7 +43,7 @@ const Searchbox = ({ action, children, className, id, label, labelVisible = fals
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
         className: clsx("coop-searchbox", borderClass, className),
-        "data-size": size && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         "data-variant": variant.length && variant !== "solid" ? variant : undefined,
         id: uid + "-form",
         onSubmit: onSubmit ? handleSubmit : undefined,

package/dist/components/Select/Select.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const Select = ({ children, className, disabled, error, id, name, ref, size = "md", ...props }) => {
+const Select = ({ children, className, disabled, error, id, name, ref, size, ...props }) => {
     const uid = useId(id);
     const componentProps = {
         className: clsx("coop-select", "coop-field-element", className),
         "data-error": error !== null && error !== void 0 ? error : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
         id: uid,
         name,

package/dist/components/TextInput/TextInput.js

@@ -2,14 +2,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, prefixInline = false, ref, size = "md", suffix, suffixInline = false, type = "text", ...props }) => {
+const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
     var _a;
     const uid = useId(id);
     const componentProps = {
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
         className: clsx("coop-text-input", "coop-field-element", className),
         "data-error": error || undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": (size === null || size === void 0 ? void 0 : size.length) ? size : undefined,
         disabled,
         id: uid,
         name,

package/dist/components/Textarea/Textarea.js

@@ -10,7 +10,7 @@ const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
     return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, ref, rows = 4, size = "md", ...props }) => {
+const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, ref, rows = 4, size, ...props }) => {
     var _a;
     const uid = useId(id);
     const componentProps = {
@@ -18,7 +18,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
         className: clsx("coop-textarea", "coop-field-element", className),
         cols,
         "data-error": error !== null && error !== void 0 ? error : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": size !== null && size !== void 0 ? size : undefined,
         disabled,
         id: uid,
         maxLength: cutoff ? maxLength : undefined,

package/dist/components/ValidationSummary/ValidationSummary.d.ts

@@ -1,12 +1,20 @@
 import type { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 import React from "react";
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors. */
+    /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
+     *
+     * Default: true
+     */
     autoScroll?: boolean;
     /** **(Optional)** This should be a set of `ValidationSummary.Heading`, `ValidationSummary.Prompt` and `ValidationSummary.Errors` components. */
     children?: ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
+    /** **(Optional)** Specify if the summary should always render regardless of error state. Use this if you want to control the logic in your own code.
+     *
+     * Default: false
+     */
+    forceMount?: boolean;
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLDivElement>;
 }
@@ -41,7 +49,7 @@ interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
     errors?: Record<string, FieldError>;
 }
 export declare const ValidationSummary: {
-    ({ autoScroll, children, className, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
+    ({ autoScroll, children, className, forceMount, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
     Heading: {
         ({ as, children, className, }: ValidationSummaryHeadingProps): JSX.Element;
         config: {

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -12,7 +12,7 @@ const componentSlots = {
     ValidationSummaryHeading: null,
     ValidationSummaryPrompt: null,
 };
-const ValidationSummary = ({ autoScroll = true, children, className, ref, ...props }) => {
+const ValidationSummary = ({ autoScroll = true, children, className, forceMount = false, ref, ...props }) => {
     var _a;
     const slots = { ...useSlots(componentSlots, children) };
     const errors = React.isValidElement(slots.ValidationSummaryErrors) &&
@@ -28,7 +28,7 @@ const ValidationSummary = ({ autoScroll = true, children, className, ref, ...pro
             (_b = internalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [autoScroll, errors, hasErrors]);
-    if (!hasErrors) {
+    if (!hasErrors && !forceMount) {
         return null;
     }
     const componentProps = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -67,7 +67,7 @@
     "@storybook/react-vite": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -84,11 +84,11 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.2.1",
+    "@coopdigital/styles": "^1.3.0",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.0"
   },
-  "gitHead": "9be9996ac210f4c20f42dc23404930e62fea11b1"
+  "gitHead": "12de6a2c1f7249320ee5924bed3eddf7c6e9257e"
 }

package/src/components/Button/Button.tsx

@@ -51,7 +51,7 @@ export const Button = ({
   loadingText = "Loading",
   onClick,
   ref,
-  size = "md",
+  size,
   variant = "solid",
   ...props
 }: ButtonProps): JSX.Element => {
@@ -82,7 +82,7 @@ export const Button = ({
       className
     ),
     "data-loading": isLoading || isPending ? true : undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     "data-variant": variant !== "text" ? variant : undefined,
     "data-width": isFullWidth ? "full" : undefined,
     href,

package/src/components/Checkbox/Checkbox.tsx

@@ -32,14 +32,14 @@ export const Checkbox = ({
   id,
   name,
   ref,
-  size = "md",
+  size,
   ...props
 }: CheckboxProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     className: clsx("coop-checkbox", "coop-field-element", className),
     "data-error": error || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: uid,
     name,

package/src/components/DatePicker/DatePicker.tsx

@@ -179,7 +179,7 @@ export const DatePicker = ({
   onSelect,
   ref,
   required = false,
-  size = "md",
+  size,
   startDate,
   ...props
 }: DatePickerProps): JSX.Element => {

package/src/components/Fieldset/Fieldset.tsx

@@ -31,7 +31,7 @@ export const Fieldset = ({
   error = false,
   hideErrorBar = false,
   ref,
-  size = "md",
+  size,
   ...props
 }: FieldsetProps): JSX.Element => {
   const componentProps = {
@@ -39,7 +39,7 @@ export const Fieldset = ({
     className: clsx("coop-fieldset", className),
     "data-error": error || undefined,
     "data-hide-error": hideErrorBar || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     ...props,
   }

package/src/components/Radio/Radio.tsx

@@ -28,7 +28,7 @@ export const Radio = ({
   id,
   name,
   ref,
-  size = "md",
+  size,
   ...props
 }: RadioProps): JSX.Element => {
   const uid = useId(id)
@@ -36,7 +36,7 @@ export const Radio = ({
   const componentProps = {
     className: clsx("coop-radio", "coop-field-element", className),
     "data-error": error || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: uid,
     name,

package/src/components/Searchbox/Searchbox.tsx

@@ -61,7 +61,7 @@ export const Searchbox = ({
   labelVisible = false,
   onSubmit,
   ref,
-  size = "md",
+  size,
   variant = "solid",
   ...props
 }: SearchboxProps): JSX.Element => {
@@ -95,7 +95,7 @@ export const Searchbox = ({
   const formProps = {
     action: action ?? undefined,
     className: clsx("coop-searchbox", borderClass, className),
-    "data-size": size && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     "data-variant": variant.length && variant !== "solid" ? variant : undefined,
     id: uid + "-form",
     onSubmit: onSubmit ? handleSubmit : undefined,

package/src/components/Select/Select.tsx

@@ -55,14 +55,14 @@ export const Select = ({
   id,
   name,
   ref,
-  size = "md",
+  size,
   ...props
 }: SelectProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
     className: clsx("coop-select", "coop-field-element", className),
     "data-error": error ?? undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: uid,
     name,

package/src/components/TextInput/TextInput.tsx

@@ -60,7 +60,7 @@ export const TextInput = ({
   prefix,
   prefixInline = false,
   ref,
-  size = "md",
+  size,
   suffix,
   suffixInline = false,
   type = "text",
@@ -72,7 +72,7 @@ export const TextInput = ({
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-text-input", "coop-field-element", className),
     "data-error": error || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size?.length ? size : undefined,
     disabled,
     id: uid,
     name,

package/src/components/Textarea/Textarea.tsx

@@ -62,7 +62,7 @@ export const Textarea = ({
   placeholder,
   ref,
   rows = 4,
-  size = "md",
+  size,
   ...props
 }: TextareaProps): JSX.Element => {
   const uid = useId(id)
@@ -72,7 +72,7 @@ export const Textarea = ({
     className: clsx("coop-textarea", "coop-field-element", className),
     cols,
     "data-error": error ?? undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: uid,
     maxLength: cutoff ? maxLength : undefined,

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -11,12 +11,20 @@ import { useSlots } from "../../hooks/useSlots"
 import { getFieldElement, sanitizeFieldId } from "./validationsummary-utils"
 
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors. */
+  /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
+   *
+   * Default: true
+   */
   autoScroll?: boolean
   /** **(Optional)** This should be a set of `ValidationSummary.Heading`, `ValidationSummary.Prompt` and `ValidationSummary.Errors` components. */
   children?: ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify if the summary should always render regardless of error state. Use this if you want to control the logic in your own code.
+   *
+   * Default: false
+   */
+  forceMount?: boolean
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
@@ -66,6 +74,7 @@ export const ValidationSummary = ({
   autoScroll = true,
   children,
   className,
+  forceMount = false,
   ref,
   ...props
 }: ValidationSummaryProps): JSX.Element | null => {
@@ -87,7 +96,7 @@ export const ValidationSummary = ({
     }
   }, [autoScroll, errors, hasErrors])
 
-  if (!hasErrors) {
+  if (!hasErrors && !forceMount) {
     return null
   }