@coopdigital/react 1.22.3 → 1.22.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AlertBanner/AlertBanner.d.ts +9 -7
- package/dist/components/Author/Author.d.ts +9 -7
- package/dist/components/Box/Box.d.ts +10 -7
- package/dist/components/Button/Button.d.ts +15 -12
- package/dist/components/Card/Card.d.ts +42 -32
- package/dist/components/Checkbox/Checkbox.d.ts +7 -7
- package/dist/components/DatePicker/DatePicker.d.ts +17 -17
- package/dist/components/Dialog/Dialog.d.ts +19 -19
- package/dist/components/Expandable/Expandable.d.ts +10 -8
- package/dist/components/Field/Field.d.ts +8 -8
- package/dist/components/FieldMarkers/Error.d.ts +4 -4
- package/dist/components/FieldMarkers/Hint.d.ts +4 -4
- package/dist/components/FieldMarkers/Label.d.ts +5 -5
- package/dist/components/FieldMarkers/Label.js +3 -2
- package/dist/components/FieldMarkers/Legend.d.ts +5 -5
- package/dist/components/Fieldset/Fieldset.d.ts +14 -14
- package/dist/components/Flourish/Flourish.d.ts +5 -5
- package/dist/components/Form/Form.d.ts +4 -4
- package/dist/components/Image/Image.d.ts +3 -7
- package/dist/components/Image/Image.js +2 -0
- package/dist/components/LoadingSpinner/LoadingSpinner.d.ts +2 -6
- package/dist/components/Logo/Logo.d.ts +6 -7
- package/dist/components/PasswordInput/PasswordInput.d.ts +3 -3
- package/dist/components/PasswordInput/PasswordInput.js +2 -2
- package/dist/components/Picture/Picture.d.ts +7 -5
- package/dist/components/Pill/Pill.d.ts +13 -8
- package/dist/components/Popover/Popover.d.ts +25 -22
- package/dist/components/Prose/Prose.d.ts +7 -7
- package/dist/components/Radio/Radio.d.ts +7 -7
- package/dist/components/Searchbox/Searchbox.d.ts +8 -16
- package/dist/components/Select/Select.d.ts +13 -13
- package/dist/components/Signpost/Signpost.d.ts +10 -7
- package/dist/components/SkipNav/SkipNav.d.ts +6 -5
- package/dist/components/Squircle/Squircle.d.ts +6 -4
- package/dist/components/Tag/Tag.d.ts +9 -6
- package/dist/components/TextInput/TextInput.d.ts +15 -15
- package/dist/components/TextInput/TextInput.js +1 -2
- package/dist/components/Textarea/Textarea.d.ts +22 -18
- package/dist/components/Textarea/Textarea.js +1 -2
- package/dist/components/ValidationSummary/ValidationSummary.d.ts +19 -14
- package/package.json +2 -2
- package/src/components/AlertBanner/AlertBanner.tsx +9 -7
- package/src/components/Author/Author.tsx +9 -7
- package/src/components/Box/Box.tsx +10 -7
- package/src/components/Button/Button.tsx +15 -12
- package/src/components/Card/Card.tsx +42 -37
- package/src/components/Checkbox/Checkbox.tsx +7 -7
- package/src/components/DatePicker/DatePicker.tsx +17 -18
- package/src/components/Dialog/Dialog.tsx +19 -19
- package/src/components/Expandable/Expandable.tsx +10 -8
- package/src/components/Field/Field.tsx +8 -8
- package/src/components/FieldMarkers/Error.tsx +4 -4
- package/src/components/FieldMarkers/Hint.tsx +4 -4
- package/src/components/FieldMarkers/Label.tsx +9 -6
- package/src/components/FieldMarkers/Legend.tsx +5 -5
- package/src/components/Fieldset/Fieldset.tsx +14 -14
- package/src/components/Flourish/Flourish.tsx +5 -5
- package/src/components/Form/Form.tsx +4 -4
- package/src/components/Image/Image.tsx +8 -9
- package/src/components/LoadingSpinner/LoadingSpinner.tsx +2 -6
- package/src/components/Logo/Logo.tsx +6 -7
- package/src/components/PasswordInput/PasswordInput.tsx +4 -3
- package/src/components/Picture/Picture.tsx +7 -5
- package/src/components/Pill/Pill.tsx +13 -8
- package/src/components/Popover/Popover.tsx +25 -22
- package/src/components/Prose/Prose.tsx +7 -7
- package/src/components/Radio/Radio.tsx +7 -7
- package/src/components/Searchbox/Searchbox.tsx +8 -14
- package/src/components/Select/Select.tsx +13 -13
- package/src/components/Signpost/Signpost.tsx +10 -7
- package/src/components/SkipNav/SkipNav.tsx +6 -5
- package/src/components/Squircle/Squircle.tsx +6 -4
- package/src/components/Tag/Tag.tsx +9 -6
- package/src/components/TextInput/TextInput.tsx +16 -16
- package/src/components/Textarea/Textarea.tsx +23 -19
- package/src/components/ValidationSummary/ValidationSummary.tsx +19 -14
|
@@ -5,21 +5,21 @@ import { LegendProps } from "../FieldMarkers/Legend.js";
|
|
|
5
5
|
import { FieldsetHTMLAttributes, HTMLAttributes, JSX, Ref } from "react";
|
|
6
6
|
//#region src/components/Fieldset/Fieldset.d.ts
|
|
7
7
|
export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
|
|
8
|
-
/**
|
|
8
|
+
/** Content inside the component.
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
children
|
|
12
|
-
/**
|
|
10
|
+
* This should be a set of `<Fieldset.Legend>`, `<Fieldset.Hint>`, `<Fieldset.Error>` and `<Fieldset.Fields>`. */
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
/** Specify additional CSS classes. */
|
|
13
13
|
className?: string;
|
|
14
|
-
/**
|
|
14
|
+
/** Specify the disabled state. Applies to all descendants. */
|
|
15
15
|
disabled?: boolean;
|
|
16
|
-
/**
|
|
16
|
+
/** Specify the component error state. */
|
|
17
17
|
error?: boolean;
|
|
18
|
-
/**
|
|
18
|
+
/** Specify whether the Fieldset should show the left-hand error bar if it is in an error state. */
|
|
19
19
|
hideErrorBar?: boolean;
|
|
20
|
-
/**
|
|
20
|
+
/** Specify a custom React ref for this component. */
|
|
21
21
|
ref?: Ref<HTMLFieldSetElement>;
|
|
22
|
-
/**
|
|
22
|
+
/** Specify the size of the component. Applies to all descendants. */
|
|
23
23
|
size?: StandardSizes;
|
|
24
24
|
}
|
|
25
25
|
declare const Fieldset: {
|
|
@@ -53,13 +53,13 @@ declare const Fieldset: {
|
|
|
53
53
|
};
|
|
54
54
|
};
|
|
55
55
|
interface FieldsetFieldsProps extends HTMLAttributes<HTMLDivElement> {
|
|
56
|
-
/**
|
|
56
|
+
/** Specify whether all descendant Fields should render inside a box. */
|
|
57
57
|
boxed?: boolean;
|
|
58
|
-
/**
|
|
59
|
-
children?:
|
|
60
|
-
/**
|
|
58
|
+
/** Content inside the component. */
|
|
59
|
+
children?: React.ReactNode;
|
|
60
|
+
/** Specify additional CSS classes. */
|
|
61
61
|
className?: string;
|
|
62
|
-
/**
|
|
62
|
+
/** Specify the component orientation. */
|
|
63
63
|
orientation?: "horizontal" | "vertical";
|
|
64
64
|
}
|
|
65
65
|
declare const FieldsetFields: {
|
|
@@ -2,13 +2,13 @@ import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "../../t
|
|
|
2
2
|
import { JSX, ReactNode, Ref, SVGProps } from "react";
|
|
3
3
|
//#region src/components/Flourish/Flourish.d.ts
|
|
4
4
|
export interface FlourishProps extends SVGProps<SVGSVGElement> {
|
|
5
|
-
/**
|
|
6
|
-
children
|
|
7
|
-
/**
|
|
5
|
+
/** Content inside the component. */
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/** Specify additional CSS classes. */
|
|
8
8
|
className?: string;
|
|
9
|
-
/**
|
|
9
|
+
/** Specify the Flourish color. */
|
|
10
10
|
fill?: Darks | Lights | Tints | OfferRed | BrandBlue | White | Black;
|
|
11
|
-
/**
|
|
11
|
+
/** Specify a custom React ref for this component. */
|
|
12
12
|
ref?: Ref<SVGSVGElement>;
|
|
13
13
|
}
|
|
14
14
|
declare const Flourish: {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { FormHTMLAttributes, JSX, ReactNode, Ref } from "react";
|
|
2
2
|
//#region src/components/Form/Form.d.ts
|
|
3
3
|
export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
|
|
4
|
-
/**
|
|
5
|
-
children?:
|
|
6
|
-
/**
|
|
4
|
+
/** Content inside the component. */
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
/** Specify additional CSS classes. */
|
|
7
7
|
className?: string;
|
|
8
|
-
/**
|
|
8
|
+
/** Specify a custom React ref for this component. */
|
|
9
9
|
ref?: Ref<HTMLFormElement>;
|
|
10
10
|
}
|
|
11
11
|
declare const Form: {
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
import { ImgHTMLAttributes, JSX, Ref } from "react";
|
|
2
2
|
//#region src/components/Image/Image.d.ts
|
|
3
3
|
export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
|
|
4
|
-
/** Specify text to describe the
|
|
4
|
+
/** Specify text to describe the Image. */
|
|
5
5
|
alt: string;
|
|
6
|
-
/**
|
|
7
|
-
height?: string;
|
|
8
|
-
/** **(Optional)** Specify a custom React ref for this component. */
|
|
6
|
+
/** Specify a custom React ref for this component. */
|
|
9
7
|
ref?: Ref<HTMLImageElement>;
|
|
10
|
-
/** Specify the
|
|
8
|
+
/** Specify the source URL. */
|
|
11
9
|
src: string;
|
|
12
|
-
/** **(Optional)** Specify the width of the image. */
|
|
13
|
-
width?: string;
|
|
14
10
|
}
|
|
15
11
|
declare const Image: {
|
|
16
12
|
({ alt, height, ref, src, width, ...props }: ImageProps): JSX.Element;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
//#region src/components/Image/Image.tsx
|
|
3
3
|
const getContentfulParams = ({ height, src, width }) => {
|
|
4
|
+
width = width.toString();
|
|
5
|
+
height = height ? height?.toString() : void 0;
|
|
4
6
|
const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src);
|
|
5
7
|
[
|
|
6
8
|
["fm", "webp"],
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
import { JSX, Ref, SVGProps } from "react";
|
|
2
2
|
//#region src/components/LoadingSpinner/LoadingSpinner.d.ts
|
|
3
3
|
export interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
|
|
4
|
-
/**
|
|
4
|
+
/** Specify additional CSS classes. */
|
|
5
5
|
className?: string;
|
|
6
|
-
/**
|
|
6
|
+
/** Specify a custom React ref for this component. */
|
|
7
7
|
ref?: Ref<SVGSVGElement>;
|
|
8
|
-
/** **(Optional)** Specify LoadingSpinner stroke. */
|
|
9
|
-
stroke?: string;
|
|
10
|
-
/** **(Optional)** Specify LoadingSpinner stroke width. */
|
|
11
|
-
strokeWidth?: string;
|
|
12
8
|
}
|
|
13
9
|
export declare const LoadingSpinner: ({ className, ref, stroke, strokeWidth, ...props }: LoadingSpinnerProps) => JSX.Element;
|
|
14
10
|
//#endregion
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import { JSX, SVGProps } from "react";
|
|
2
2
|
//#region src/components/Logo/Logo.d.ts
|
|
3
3
|
export interface LogoProps extends SVGProps<SVGSVGElement> {
|
|
4
|
-
/**
|
|
4
|
+
/** Specify alternative text for the Logo.
|
|
5
|
+
*
|
|
6
|
+
* Default: `Co-op`.
|
|
7
|
+
*/
|
|
5
8
|
alt?: string;
|
|
6
|
-
/**
|
|
9
|
+
/** Specify additional CSS classes. */
|
|
7
10
|
className?: string;
|
|
8
|
-
/**
|
|
11
|
+
/** Specify the fill color.
|
|
9
12
|
*
|
|
10
13
|
* Default: brand-blue. */
|
|
11
14
|
fill?: "white" | "black" | "brand-blue";
|
|
12
|
-
/** **(Optional)** Specify the Logo height. */
|
|
13
|
-
height?: number;
|
|
14
|
-
/** **(Optional)** Specify the Logo width. */
|
|
15
|
-
width?: number;
|
|
16
15
|
}
|
|
17
16
|
export declare const Logo: ({ alt, className, fill, height, id, ref, width, ...props }: LogoProps) => JSX.Element;
|
|
18
17
|
//#endregion
|
|
@@ -4,14 +4,14 @@ import { JSX } from "react";
|
|
|
4
4
|
//#region src/components/PasswordInput/PasswordInput.d.ts
|
|
5
5
|
export interface PasswordInputProps extends Omit<TextInputProps, "prefix" | "prefixInline" | "suffix" | "suffixInline" | "type"> {
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Specify if the show/hide toggle button should be shown.
|
|
8
8
|
*
|
|
9
|
-
* Default: false
|
|
9
|
+
* Default: `false`.
|
|
10
10
|
*/
|
|
11
11
|
showToggle?: boolean;
|
|
12
12
|
}
|
|
13
13
|
declare const PasswordInput: {
|
|
14
|
-
({ disabled, id, showToggle, size, ...props }: PasswordInputProps): JSX.Element;
|
|
14
|
+
({ disabled, id, ref, showToggle, size, ...props }: PasswordInputProps): JSX.Element;
|
|
15
15
|
slot: {
|
|
16
16
|
field: boolean;
|
|
17
17
|
name: string;
|
|
@@ -5,7 +5,7 @@ import { TextInput } from "../TextInput/TextInput.js";
|
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { useCallback, useState } from "react";
|
|
7
7
|
//#region src/components/PasswordInput/PasswordInput.tsx
|
|
8
|
-
const PasswordInput = ({ disabled, id, showToggle = false, size, ...props }) => {
|
|
8
|
+
const PasswordInput = ({ disabled, id, ref, showToggle = false, size, ...props }) => {
|
|
9
9
|
const [isVisible, setIsVisible] = useState(false);
|
|
10
10
|
const field = useField();
|
|
11
11
|
const inputId = id ?? field?.id;
|
|
@@ -18,7 +18,7 @@ const PasswordInput = ({ disabled, id, showToggle = false, size, ...props }) =>
|
|
|
18
18
|
autoCapitalize: "none",
|
|
19
19
|
disabled,
|
|
20
20
|
id: inputId,
|
|
21
|
-
ref
|
|
21
|
+
ref,
|
|
22
22
|
size,
|
|
23
23
|
spellCheck: "false",
|
|
24
24
|
type: isVisible ? "text" : "password"
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
|
|
2
2
|
//#region src/components/Picture/Picture.d.ts
|
|
3
3
|
export interface PictureProps extends HTMLAttributes<HTMLPictureElement> {
|
|
4
|
-
/**
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
/** Content inside the component.
|
|
5
|
+
*
|
|
6
|
+
* Usually this should be an `<Image>`. */
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
/** Specify additional CSS classes. */
|
|
7
9
|
className?: string;
|
|
8
|
-
/**
|
|
10
|
+
/** Specify the crop mode. */
|
|
9
11
|
crop?: "square" | "wide" | "thin" | "squircle" | "none";
|
|
10
|
-
/**
|
|
12
|
+
/** Specify a custom React ref for this component. */
|
|
11
13
|
ref?: Ref<HTMLPictureElement>;
|
|
12
14
|
}
|
|
13
15
|
export declare const Picture: ({ children, className, crop, ref, ...props }: PictureProps) => JSX.Element;
|
|
@@ -2,23 +2,28 @@ import { StandardSizes } from "../../types/index.js";
|
|
|
2
2
|
import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
|
|
3
3
|
//#region src/components/Pill/Pill.d.ts
|
|
4
4
|
export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
|
|
5
|
-
/**
|
|
5
|
+
/** Specify a custom element for the component.
|
|
6
|
+
*
|
|
7
|
+
* Default: `<span>` or `<a>`.
|
|
8
|
+
*/
|
|
6
9
|
as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
|
|
7
|
-
/**
|
|
10
|
+
/** Content inside the component.
|
|
11
|
+
*
|
|
12
|
+
* This can be any valid JSX including an optional `<Pill.Badge>`. */
|
|
8
13
|
children?: React.ReactNode;
|
|
9
|
-
/**
|
|
14
|
+
/** Specify additional CSS classes. */
|
|
10
15
|
className?: string;
|
|
11
|
-
/**
|
|
16
|
+
/** Specify the target URL. */
|
|
12
17
|
href?: string;
|
|
13
|
-
/**
|
|
18
|
+
/** Specify a custom React ref for this component. */
|
|
14
19
|
ref?: Ref<HTMLElement>;
|
|
15
|
-
/**
|
|
20
|
+
/** Specify the component size. */
|
|
16
21
|
size?: StandardSizes;
|
|
17
22
|
}
|
|
18
23
|
interface PillBadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
19
|
-
/**
|
|
24
|
+
/** Content inside the component. */
|
|
20
25
|
children?: React.ReactNode;
|
|
21
|
-
/**
|
|
26
|
+
/** Specify additional CSS classes. */
|
|
22
27
|
className?: string;
|
|
23
28
|
}
|
|
24
29
|
declare const Pill: {
|
|
@@ -2,55 +2,58 @@ import { JSX, ReactNode, Ref } from "react";
|
|
|
2
2
|
import { PopoverAnchorProps, PopoverCloseProps, PopoverContentProps, PopoverProps, PopoverTriggerProps } from "@radix-ui/react-popover";
|
|
3
3
|
//#region src/components/Popover/Popover.d.ts
|
|
4
4
|
interface PopoverProps$1 extends PopoverProps {
|
|
5
|
-
/** Content inside the
|
|
5
|
+
/** Content inside the component.
|
|
6
6
|
*
|
|
7
|
-
* This should be a
|
|
8
|
-
children
|
|
9
|
-
/**
|
|
7
|
+
* This should be a set of `<Popover.Trigger>` and `<Popover.Content>`. */
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
/** Callback to run when the Popover is opened or closed. */
|
|
10
10
|
onOpenChange?: PopoverProps["onOpenChange"];
|
|
11
|
-
/**
|
|
11
|
+
/** Force the Popover state. Must be used together with `onOpenChange`. */
|
|
12
12
|
open?: PopoverProps["open"];
|
|
13
13
|
}
|
|
14
14
|
interface PopoverTriggerProps$1 extends PopoverTriggerProps {
|
|
15
|
-
/**
|
|
15
|
+
/** When true, the element passed as a child becomes the root element. */
|
|
16
16
|
asChild?: PopoverTriggerProps["asChild"];
|
|
17
|
-
/**
|
|
17
|
+
/** Content inside the component. */
|
|
18
18
|
children?: React.ReactNode;
|
|
19
|
-
/**
|
|
19
|
+
/** Specify additional CSS classes. */
|
|
20
20
|
className?: string;
|
|
21
21
|
}
|
|
22
22
|
interface PopoverContentProps$1 extends PopoverContentProps {
|
|
23
|
-
/**
|
|
23
|
+
/** Specify horizontal alignment of the Popover against the trigger. May change when collisions occur. */
|
|
24
24
|
align?: PopoverContentProps["align"];
|
|
25
|
-
/**
|
|
25
|
+
/** Specify pixel offset from the "start" or "end" alignment. */
|
|
26
26
|
alignOffset?: PopoverContentProps["alignOffset"];
|
|
27
|
-
/**
|
|
27
|
+
/** Specify whether the Popover should reposition itself if it falls out of the viewport. */
|
|
28
28
|
avoidCollisions?: PopoverContentProps["avoidCollisions"];
|
|
29
|
-
/**
|
|
29
|
+
/** Content inside the component.
|
|
30
|
+
*
|
|
31
|
+
* This can be any valid JSX including an optional `<Popover.Close>`.
|
|
32
|
+
*/
|
|
30
33
|
children?: React.ReactNode;
|
|
31
|
-
/**
|
|
34
|
+
/** Specify additional CSS classes. */
|
|
32
35
|
className?: string;
|
|
33
|
-
/**
|
|
36
|
+
/** Specify pixel boundary for collision safe area. */
|
|
34
37
|
collisionPadding?: PopoverContentProps["collisionPadding"];
|
|
35
|
-
/**
|
|
38
|
+
/** Specify a custom React ref for this component. */
|
|
36
39
|
ref?: Ref<HTMLDivElement>;
|
|
37
|
-
/**
|
|
40
|
+
/** Specify placement of the Popover against the trigger. Will change when collisions occur. */
|
|
38
41
|
side?: PopoverContentProps["side"];
|
|
39
|
-
/**
|
|
42
|
+
/** Specify pixel offset from the trigger element. */
|
|
40
43
|
sideOffset?: PopoverContentProps["sideOffset"];
|
|
41
44
|
}
|
|
42
45
|
interface PopoverCloseProps$1 extends PopoverCloseProps {
|
|
43
|
-
/**
|
|
46
|
+
/** When true, the element passed as a child becomes the root element. */
|
|
44
47
|
asChild?: PopoverCloseProps["asChild"];
|
|
45
|
-
/**
|
|
48
|
+
/** Content inside the component. */
|
|
46
49
|
children?: React.ReactNode;
|
|
47
|
-
/**
|
|
50
|
+
/** Specify additional CSS classes. */
|
|
48
51
|
className?: string;
|
|
49
52
|
}
|
|
50
53
|
interface PopoverAnchorProps$1 extends PopoverAnchorProps {
|
|
51
|
-
/**
|
|
54
|
+
/** When true, the element passed as a child becomes the root element. */
|
|
52
55
|
asChild?: PopoverAnchorProps["asChild"];
|
|
53
|
-
/**
|
|
56
|
+
/** Content inside the component. */
|
|
54
57
|
children?: React.ReactNode;
|
|
55
58
|
}
|
|
56
59
|
declare const Popover: {
|
|
@@ -2,22 +2,22 @@ import { StandardSizes } from "../../types/index.js";
|
|
|
2
2
|
import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
|
|
3
3
|
//#region src/components/Prose/Prose.d.ts
|
|
4
4
|
export interface ProseProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
-
/**
|
|
6
|
-
children?:
|
|
7
|
-
/**
|
|
5
|
+
/** Content inside the component. */
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/** Specify additional CSS classes. */
|
|
8
8
|
className?: string;
|
|
9
|
-
/**
|
|
9
|
+
/** Specify if the container should stretch to 100% width.
|
|
10
10
|
*
|
|
11
11
|
* If this not set, the container will be 100% width up to a maximum of 864px / 54rem */
|
|
12
12
|
full?: boolean;
|
|
13
|
-
/**
|
|
13
|
+
/** Specify a custom React ref for this component. */
|
|
14
14
|
ref?: Ref<HTMLDivElement>;
|
|
15
|
-
/**
|
|
15
|
+
/** Specify font size behaviour. When set to `lg`, body copy will increase to 20px on larger screens.
|
|
16
16
|
*
|
|
17
17
|
* Default: `md`
|
|
18
18
|
*/
|
|
19
19
|
size?: "md" | "lg";
|
|
20
|
-
/**
|
|
20
|
+
/** Specify the spacing.
|
|
21
21
|
*
|
|
22
22
|
* Default: `md`
|
|
23
23
|
*/
|
|
@@ -2,19 +2,19 @@ import { StandardSizes } from "../../types/index.js";
|
|
|
2
2
|
import { InputHTMLAttributes, JSX, Ref } from "react";
|
|
3
3
|
//#region src/components/Radio/Radio.d.ts
|
|
4
4
|
export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
|
|
5
|
-
/**
|
|
5
|
+
/** Specify additional CSS classes. */
|
|
6
6
|
className?: string;
|
|
7
|
-
/**
|
|
7
|
+
/** Specify the disabled state. */
|
|
8
8
|
disabled?: boolean;
|
|
9
|
-
/**
|
|
9
|
+
/** Specify the component error state. */
|
|
10
10
|
error?: boolean;
|
|
11
|
-
/**
|
|
11
|
+
/** Specify the component id. Will be auto-generated if not set. */
|
|
12
12
|
id?: string;
|
|
13
|
-
/** Specify the
|
|
13
|
+
/** Specify the component name. */
|
|
14
14
|
name: string;
|
|
15
|
-
/**
|
|
15
|
+
/** Specify a custom React ref for this component. */
|
|
16
16
|
ref?: Ref<HTMLInputElement>;
|
|
17
|
-
/**
|
|
17
|
+
/** Specify the component size. */
|
|
18
18
|
size?: StandardSizes;
|
|
19
19
|
}
|
|
20
20
|
declare const Radio: {
|
|
@@ -6,31 +6,23 @@ import "../TextInput/index.js";
|
|
|
6
6
|
import React, { FormHTMLAttributes, JSX, RefObject } from "react";
|
|
7
7
|
//#region src/components/Searchbox/Searchbox.d.ts
|
|
8
8
|
export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
|
|
9
|
-
/**
|
|
9
|
+
/** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
|
|
10
10
|
action?: string;
|
|
11
|
-
/**
|
|
12
|
-
button?: Pick<ButtonProps, "className" | "loadingText"> & {
|
|
13
|
-
label?: React.ReactNode;
|
|
14
|
-
};
|
|
15
|
-
/** **(Optional)** Specify additional CSS classes to be applied to the component. */
|
|
11
|
+
/** Specify additional CSS classes. */
|
|
16
12
|
className?: string;
|
|
17
|
-
/**
|
|
13
|
+
/** Specify the component id. Will be auto-generated if not set. */
|
|
18
14
|
id?: string;
|
|
19
15
|
/** Specify the label displayed above the search field. Hidden by default, but visible to screen readers. */
|
|
20
16
|
label: string;
|
|
21
|
-
/**
|
|
17
|
+
/** Specify whether the label should be visible to humans or screenreaders. */
|
|
22
18
|
labelVisible?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
name?: string;
|
|
25
|
-
/** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
|
|
19
|
+
/** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
|
|
26
20
|
onSubmit?: React.SubmitEventHandler<HTMLElement> | undefined;
|
|
27
|
-
/**
|
|
28
|
-
placeholder?: string;
|
|
29
|
-
/** **(Optional)** Specify a custom React ref for this component. */
|
|
21
|
+
/** Specify a custom React ref for this component. */
|
|
30
22
|
ref?: RefObject<HTMLFormElement | null>;
|
|
31
|
-
/**
|
|
23
|
+
/** Specify the component size. */
|
|
32
24
|
size?: StandardSizes;
|
|
33
|
-
/**
|
|
25
|
+
/** Specify the component variant. */
|
|
34
26
|
variant?: "solid" | "ghost";
|
|
35
27
|
}
|
|
36
28
|
declare const Searchbox: {
|
|
@@ -2,41 +2,41 @@ import { StandardSizes } from "../../types/index.js";
|
|
|
2
2
|
import { JSX, OptgroupHTMLAttributes, OptionHTMLAttributes, ReactNode, Ref, SelectHTMLAttributes } from "react";
|
|
3
3
|
//#region src/components/Select/Select.d.ts
|
|
4
4
|
export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
|
|
5
|
-
/**
|
|
5
|
+
/** Content inside the component.
|
|
6
|
+
*
|
|
7
|
+
* This should be a set of `<Select.Option>` or `<Select.OptionGroup>`. */
|
|
6
8
|
children?: ReactNode;
|
|
7
|
-
/**
|
|
9
|
+
/** Specify additional CSS classes. */
|
|
8
10
|
className?: string;
|
|
9
|
-
/**
|
|
11
|
+
/** Specify whether the Select should be disabled. */
|
|
10
12
|
disabled?: boolean;
|
|
11
|
-
/**
|
|
13
|
+
/** Specify the Select error state. */
|
|
12
14
|
error?: boolean;
|
|
13
|
-
/**
|
|
15
|
+
/** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
|
|
14
16
|
*
|
|
15
17
|
* Default: false
|
|
16
18
|
*/
|
|
17
19
|
fit?: boolean;
|
|
18
|
-
/**
|
|
20
|
+
/** Specify the component id. Will be auto-generated if not set. */
|
|
19
21
|
id?: string;
|
|
20
22
|
/** Specify the Select name. */
|
|
21
23
|
name: string;
|
|
22
|
-
/**
|
|
24
|
+
/** Specify a custom React ref for this component. */
|
|
23
25
|
ref?: Ref<HTMLSelectElement>;
|
|
24
|
-
/**
|
|
26
|
+
/** Specify the component size. */
|
|
25
27
|
size?: StandardSizes;
|
|
26
28
|
}
|
|
27
29
|
interface SelectOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
|
|
28
|
-
/**
|
|
30
|
+
/** Content inside the component. */
|
|
29
31
|
children?: ReactNode;
|
|
30
32
|
/** Specify the Select option group label. */
|
|
31
33
|
label: string;
|
|
32
34
|
}
|
|
33
35
|
interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
|
|
34
|
-
/**
|
|
36
|
+
/** Content inside the component. */
|
|
35
37
|
children?: ReactNode;
|
|
36
|
-
/**
|
|
38
|
+
/** Specify additional CSS classes. */
|
|
37
39
|
className?: string;
|
|
38
|
-
/** Value of Select option. */
|
|
39
|
-
value: string;
|
|
40
40
|
}
|
|
41
41
|
declare const Select: {
|
|
42
42
|
({ children, className, disabled, error, fit, id, name, ref, size, ...props }: SelectProps): JSX.Element;
|
|
@@ -3,19 +3,22 @@ import "../Image/index.js";
|
|
|
3
3
|
import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
|
|
4
4
|
//#region src/components/Signpost/Signpost.d.ts
|
|
5
5
|
export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
|
-
/**
|
|
6
|
+
/** Specify a custom element for the component.
|
|
7
|
+
*
|
|
8
|
+
* Default: `<a>`.
|
|
9
|
+
*/
|
|
7
10
|
as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
|
|
8
|
-
/**
|
|
9
|
-
children
|
|
10
|
-
/**
|
|
11
|
+
/** Content inside the component. */
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
/** Specify additional CSS classes. */
|
|
11
14
|
className?: string;
|
|
12
|
-
/**
|
|
15
|
+
/** Specify the level of the Signpost heading. */
|
|
13
16
|
headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
|
|
14
17
|
/** Specify the URL that the Signpost component will link to when clicked. */
|
|
15
18
|
href?: string;
|
|
16
|
-
/**
|
|
19
|
+
/** Specify properties of the Signpost Image. */
|
|
17
20
|
image?: ImageProps;
|
|
18
|
-
/**
|
|
21
|
+
/** Specify a custom React ref for this component. */
|
|
19
22
|
ref?: Ref<HTMLDivElement>;
|
|
20
23
|
}
|
|
21
24
|
/**
|
|
@@ -5,14 +5,15 @@ interface SkipNavLink {
|
|
|
5
5
|
label: string;
|
|
6
6
|
}
|
|
7
7
|
export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
|
|
8
|
-
/**
|
|
8
|
+
/** Specify additional CSS classes. */
|
|
9
9
|
className?: string;
|
|
10
|
-
/**
|
|
10
|
+
/** Specify whether the component is visible immediately or only when tabbing. Useful for testing purposes only. */
|
|
11
11
|
isVisible?: boolean;
|
|
12
|
-
/**
|
|
13
|
-
*
|
|
12
|
+
/** Specify links to show in the component. Each item needs a `href` and `label`.
|
|
13
|
+
*
|
|
14
|
+
* Default: A single link anchored to `#main`. */
|
|
14
15
|
links?: SkipNavLink[];
|
|
15
|
-
/**
|
|
16
|
+
/** Specify a custom React ref for this component. */
|
|
16
17
|
ref?: Ref<HTMLDivElement>;
|
|
17
18
|
}
|
|
18
19
|
declare const SkipNav: {
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { HTMLAttributes, JSX, Ref, SVGAttributes } from "react";
|
|
2
2
|
//#region src/components/Squircle/Squircle.d.ts
|
|
3
3
|
export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
-
/**
|
|
4
|
+
/** Content inside the component.
|
|
5
|
+
*
|
|
6
|
+
* This should be a set of `<Squircle.Svg>` and `<Squircle.Text>`. */
|
|
5
7
|
children?: React.ReactNode;
|
|
6
|
-
/**
|
|
8
|
+
/** Specify additional CSS classes. */
|
|
7
9
|
className?: string;
|
|
8
|
-
/**
|
|
10
|
+
/** Specify a custom React ref for this component. */
|
|
9
11
|
ref?: Ref<HTMLDivElement>;
|
|
10
12
|
}
|
|
11
13
|
export interface SquircleSvgProps extends SVGAttributes<SVGElement> {
|
|
12
|
-
/**
|
|
14
|
+
/** Specify the component size. */
|
|
13
15
|
size?: string | number;
|
|
14
16
|
}
|
|
15
17
|
declare const Squircle: {
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
|
|
2
2
|
//#region src/components/Tag/Tag.d.ts
|
|
3
3
|
export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
|
|
4
|
-
/**
|
|
4
|
+
/** Specify a custom element for the component.
|
|
5
|
+
*
|
|
6
|
+
* Default: `<span>` or `<a>`.
|
|
7
|
+
*/
|
|
5
8
|
as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
|
|
6
|
-
/**
|
|
9
|
+
/** Content inside the component. */
|
|
7
10
|
children?: React.ReactNode;
|
|
8
|
-
/**
|
|
11
|
+
/** Specify additional CSS classes. */
|
|
9
12
|
className?: string;
|
|
10
|
-
/**
|
|
13
|
+
/** Specify the target URL. */
|
|
11
14
|
href?: string;
|
|
12
|
-
/**
|
|
15
|
+
/** Specify a custom React ref for this component. */
|
|
13
16
|
ref?: Ref<HTMLElement>;
|
|
14
|
-
/**
|
|
17
|
+
/** Specify the component size. */
|
|
15
18
|
size?: "sm" | "md";
|
|
16
19
|
}
|
|
17
20
|
declare const Tag: {
|