@arc-ui/components 11.7.0 → 11.9.0
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/Alert/Alert.cjs.d.ts +1 -1
- package/dist/Alert/Alert.cjs.js +10 -89
- package/dist/Alert/Alert.esm.d.ts +1 -1
- package/dist/Alert/Alert.esm.js +3 -82
- package/dist/Badge/Badge.cjs.d.ts +4 -0
- package/dist/Badge/Badge.cjs.js +4 -4
- package/dist/Badge/Badge.esm.d.ts +4 -0
- package/dist/Badge/Badge.esm.js +5 -5
- package/dist/Box/Box.cjs.d.ts +40 -1
- package/dist/Box/Box.cjs.js +25 -6
- package/dist/Box/Box.esm.d.ts +40 -1
- package/dist/Box/Box.esm.js +24 -5
- package/dist/Breadcrumbs/Breadcrumbs.cjs.d.ts +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.cjs.js +2 -2
- package/dist/Breadcrumbs/Breadcrumbs.esm.d.ts +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.esm.js +2 -2
- package/dist/Button/Button.cjs.d.ts +1 -1
- package/dist/Button/Button.cjs.js +1 -1
- package/dist/Button/Button.esm.d.ts +1 -1
- package/dist/Button/Button.esm.js +1 -1
- package/dist/Card/Card.cjs.d.ts +1 -1
- package/dist/Card/Card.cjs.js +2 -2
- package/dist/Card/Card.esm.d.ts +1 -1
- package/dist/Card/Card.esm.js +2 -2
- package/dist/Checkbox/Checkbox.cjs.d.ts +1 -1
- package/dist/Checkbox/Checkbox.cjs.js +4 -4
- package/dist/Checkbox/Checkbox.esm.d.ts +1 -1
- package/dist/Checkbox/Checkbox.esm.js +4 -4
- package/dist/Columns/Columns.cjs.d.ts +1 -1
- package/dist/Columns/Columns.esm.d.ts +1 -1
- package/dist/Curve/Curve.cjs.d.ts +1 -1
- package/dist/Curve/Curve.cjs.js +1 -1
- package/dist/Curve/Curve.esm.d.ts +1 -1
- package/dist/Curve/Curve.esm.js +1 -1
- package/dist/Disclosure/Disclosure.cjs.d.ts +1 -1
- package/dist/Disclosure/Disclosure.cjs.js +1 -1
- package/dist/Disclosure/Disclosure.esm.d.ts +1 -1
- package/dist/Disclosure/Disclosure.esm.js +1 -1
- package/dist/DisclosureMini/DisclosureMini.cjs.d.ts +1 -1
- package/dist/DisclosureMini/DisclosureMini.cjs.js +2 -2
- package/dist/DisclosureMini/DisclosureMini.esm.d.ts +1 -1
- package/dist/DisclosureMini/DisclosureMini.esm.js +2 -2
- package/dist/FormControl/FormControl.cjs.d.ts +1 -1
- package/dist/FormControl/FormControl.cjs.js +3 -3
- package/dist/FormControl/FormControl.esm.d.ts +1 -1
- package/dist/FormControl/FormControl.esm.js +3 -3
- package/dist/Heading/Heading.cjs.d.ts +1 -1
- package/dist/Heading/Heading.cjs.js +1 -1
- package/dist/Heading/Heading.esm.d.ts +1 -1
- package/dist/Heading/Heading.esm.js +1 -1
- package/dist/Modal/Modal.cjs.d.ts +31 -9
- package/dist/Modal/Modal.cjs.js +450 -161
- package/dist/Modal/Modal.esm.d.ts +31 -9
- package/dist/Modal/Modal.esm.js +423 -134
- package/dist/Pagination/Pagination.cjs.js +4 -4
- package/dist/Pagination/Pagination.esm.js +4 -4
- package/dist/PaginationSimple/PaginationSimple.cjs.js +4 -4
- package/dist/PaginationSimple/PaginationSimple.esm.js +4 -4
- package/dist/ProgressBar/ProgressBar.cjs.js +5 -5
- package/dist/ProgressBar/ProgressBar.esm.js +6 -6
- package/dist/ProgressStepper/ProgressStepper.cjs.d.ts +1 -89
- package/dist/ProgressStepper/ProgressStepper.cjs.js +10 -144
- package/dist/ProgressStepper/ProgressStepper.esm.d.ts +1 -89
- package/dist/ProgressStepper/ProgressStepper.esm.js +9 -143
- package/dist/RadioGroup/RadioGroup.cjs.d.ts +1 -1
- package/dist/RadioGroup/RadioGroup.cjs.js +4 -4
- package/dist/RadioGroup/RadioGroup.esm.d.ts +1 -1
- package/dist/RadioGroup/RadioGroup.esm.js +4 -4
- package/dist/Select/Select.cjs.d.ts +1 -1
- package/dist/Select/Select.cjs.js +995 -60
- package/dist/Select/Select.esm.d.ts +1 -1
- package/dist/Select/Select.esm.js +948 -32
- package/dist/SiteFooter/SiteFooter.cjs.d.ts +1 -1
- package/dist/SiteFooter/SiteFooter.cjs.js +2 -2
- package/dist/SiteFooter/SiteFooter.esm.d.ts +1 -1
- package/dist/SiteFooter/SiteFooter.esm.js +3 -3
- package/dist/SiteHeader/SiteHeader.cjs.d.ts +1 -1
- package/dist/SiteHeader/SiteHeader.cjs.js +3 -3
- package/dist/SiteHeader/SiteHeader.esm.d.ts +1 -1
- package/dist/SiteHeader/SiteHeader.esm.js +3 -3
- package/dist/Switch/Switch.cjs.d.ts +1 -1
- package/dist/Switch/Switch.cjs.js +241 -18
- package/dist/Switch/Switch.esm.d.ts +1 -1
- package/dist/Switch/Switch.esm.js +234 -11
- package/dist/Tabs/Tabs.cjs.d.ts +1 -0
- package/dist/Tabs/Tabs.cjs.js +20 -0
- package/dist/Tabs/Tabs.esm.d.ts +1 -0
- package/dist/Tabs/Tabs.esm.js +12 -0
- package/dist/Tabs/package.json +7 -0
- package/dist/Text/Text.cjs.d.ts +1 -1
- package/dist/Text/Text.cjs.js +1 -1
- package/dist/Text/Text.esm.d.ts +1 -1
- package/dist/Text/Text.esm.js +1 -1
- package/dist/TextArea/TextArea.cjs.d.ts +4 -1
- package/dist/TextArea/TextArea.cjs.js +30 -17
- package/dist/TextArea/TextArea.esm.d.ts +4 -1
- package/dist/TextArea/TextArea.esm.js +30 -17
- package/dist/TextInput/TextInput.cjs.d.ts +1 -1
- package/dist/TextInput/TextInput.cjs.js +4 -4
- package/dist/TextInput/TextInput.esm.d.ts +1 -1
- package/dist/TextInput/TextInput.esm.js +4 -4
- package/dist/Toast/Toast.cjs.d.ts +1 -0
- package/dist/Toast/Toast.cjs.js +23 -0
- package/dist/Toast/Toast.esm.d.ts +1 -0
- package/dist/Toast/Toast.esm.js +15 -0
- package/dist/Toast/package.json +7 -0
- package/dist/Truncate/Truncate.cjs.js +3 -2
- package/dist/Truncate/Truncate.esm.js +3 -2
- package/dist/_shared/cjs/{Breadcrumbs-9f580f69.js → Breadcrumbs-0906dd10.js} +9 -9
- package/dist/_shared/cjs/BtIconTick-42fcc5ec.js +91 -0
- package/dist/_shared/{esm/Button-9c3b0b11.d.ts → cjs/Button-5aaa6776.d.ts} +4 -0
- package/dist/_shared/cjs/{Button-b4d6ccc8.js → Button-5aaa6776.js} +2 -2
- package/dist/_shared/cjs/{Card-f1108bfe.js → Card-fd189ba8.js} +1 -1
- package/dist/_shared/cjs/{Checkbox-c927b62f.js → Checkbox-02c546ca.js} +1 -1
- package/dist/_shared/cjs/Columns-e90798f8.d.ts +1 -1
- package/dist/_shared/cjs/{Curve-b05589d8.d.ts → Curve-781ef633.d.ts} +5 -2
- package/dist/_shared/cjs/{Curve-b05589d8.js → Curve-781ef633.js} +5 -2
- package/dist/_shared/cjs/{DisclosureMini-2a10006e.js → DisclosureMini-52706ee6.js} +1 -1
- package/dist/_shared/cjs/{FormControl-78b007b7.js → FormControl-1e1bf2bf.js} +1 -1
- package/dist/_shared/cjs/{Heading-ed1cb455.d.ts → Heading-e3332dcf.d.ts} +4 -0
- package/dist/_shared/cjs/{Heading-ed1cb455.js → Heading-e3332dcf.js} +2 -2
- package/dist/{MediaCard/MediaCard.cjs.d.ts → _shared/cjs/MediaCard-9483ad5f.d.ts} +3 -4
- package/dist/_shared/cjs/ProgressStepper-f740d7bb.d.ts +89 -0
- package/dist/_shared/cjs/ProgressStepper-f740d7bb.js +149 -0
- package/dist/_shared/{esm/RadioGroup-65b8c8bf.d.ts → cjs/RadioGroup-d7664b0c.d.ts} +1 -1
- package/dist/_shared/cjs/{RadioGroup-8e17de70.js → RadioGroup-d7664b0c.js} +1 -1
- package/dist/_shared/cjs/{SiteFooter-9f7f9c2d.js → SiteFooter-5da774e1.js} +1 -1
- package/dist/_shared/cjs/SiteHeader-c25ee36e.d.ts +2 -2
- package/dist/_shared/cjs/{SiteHeader.rehydrator-ccbebde6.js → SiteHeader.rehydrator-acc9d8c4.js} +2 -2
- package/dist/_shared/cjs/Tabs-fda49692.d.ts +75 -0
- package/dist/_shared/cjs/Tabs-fda49692.js +510 -0
- package/dist/_shared/{esm/Text-14deb70e.d.ts → cjs/Text-fa447e2d.d.ts} +4 -0
- package/dist/_shared/cjs/{Text-555a29a4.js → Text-fa447e2d.js} +2 -2
- package/dist/_shared/cjs/{TextInput-7ed03a48.d.ts → TextInput-13050538.d.ts} +3 -1
- package/dist/_shared/{esm/TextInput-62bb7dee.d.ts → cjs/TextInput-f4549637.d.ts} +1 -1
- package/dist/_shared/cjs/{TextInput-b768e346.js → TextInput-f4549637.js} +1 -1
- package/dist/_shared/cjs/Toast-0cb23cae.d.ts +52 -0
- package/dist/_shared/cjs/Toast-0cb23cae.js +739 -0
- package/dist/_shared/cjs/extends-bb8ffacd.js +21 -0
- package/dist/_shared/cjs/index-27b53d49.js +174 -0
- package/dist/_shared/cjs/index-699086a7.d.ts +1 -1
- package/dist/_shared/cjs/index-74488a9f.d.ts +1 -1
- package/dist/_shared/cjs/{index.module-9b87a34d.js → index-952918c9.js} +141 -33
- package/dist/_shared/cjs/index-96c4d581.js +289 -0
- package/dist/_shared/cjs/index-c81c9401.d.ts +3 -3
- package/dist/_shared/cjs/index-e340924e.d.ts +1 -1
- package/dist/_shared/cjs/index-e6d20018.d.ts +1 -1
- package/dist/_shared/cjs/index-eb06f640.d.ts +1 -1
- package/dist/_shared/cjs/{index-31fbb076.js → index-ec260f5e.js} +0 -547
- package/dist/_shared/cjs/index-f419cf04.d.ts +1 -1
- package/dist/_shared/cjs/index-fb4b8fda.js +47 -0
- package/dist/_shared/cjs/index.module-bbcc4e18.js +126 -0
- package/dist/_shared/esm/{Breadcrumbs-5dc0afa7.js → Breadcrumbs-dafa8dde.js} +9 -9
- package/dist/_shared/esm/BtIconTick-5fe50cc7.js +83 -0
- package/dist/_shared/{cjs/Button-b4d6ccc8.d.ts → esm/Button-d1dbcf79.d.ts} +4 -0
- package/dist/_shared/esm/{Button-9c3b0b11.js → Button-d1dbcf79.js} +2 -2
- package/dist/_shared/esm/{Card-79b6eae0.js → Card-e62c3ff6.js} +1 -1
- package/dist/_shared/esm/{Checkbox-2d144384.js → Checkbox-d8891198.js} +1 -1
- package/dist/_shared/esm/Columns-8704515b.d.ts +1 -1
- package/dist/_shared/esm/{Curve-3e87b1bc.d.ts → Curve-bbc5589c.d.ts} +5 -2
- package/dist/_shared/esm/{Curve-3e87b1bc.js → Curve-bbc5589c.js} +5 -2
- package/dist/_shared/esm/{DisclosureMini-78a8f392.js → DisclosureMini-9b819941.js} +1 -1
- package/dist/_shared/esm/{FormControl-2fa7aae5.js → FormControl-f18e2f59.js} +1 -1
- package/dist/_shared/esm/{Heading-ee6bec51.d.ts → Heading-0f629151.d.ts} +4 -0
- package/dist/_shared/esm/{Heading-ee6bec51.js → Heading-0f629151.js} +2 -2
- package/dist/{MediaCard/MediaCard.esm.d.ts → _shared/esm/MediaCard-9483ad5f.d.ts} +3 -4
- package/dist/_shared/esm/ProgressStepper-7ab88f4c.d.ts +89 -0
- package/dist/_shared/esm/ProgressStepper-7ab88f4c.js +143 -0
- package/dist/_shared/{cjs/RadioGroup-8e17de70.d.ts → esm/RadioGroup-be16d5d3.d.ts} +1 -1
- package/dist/_shared/esm/{RadioGroup-65b8c8bf.js → RadioGroup-be16d5d3.js} +1 -1
- package/dist/_shared/esm/{SiteFooter-51bdc7df.js → SiteFooter-a182cb18.js} +1 -1
- package/dist/_shared/esm/SiteHeader-c25ee36e.d.ts +2 -2
- package/dist/_shared/esm/{SiteHeader.rehydrator-382d1c03.js → SiteHeader.rehydrator-023b7b76.js} +2 -2
- package/dist/_shared/esm/Tabs-5af0b940.d.ts +75 -0
- package/dist/_shared/esm/Tabs-5af0b940.js +504 -0
- package/dist/_shared/{cjs/Text-555a29a4.d.ts → esm/Text-40457811.d.ts} +4 -0
- package/dist/_shared/esm/{Text-14deb70e.js → Text-40457811.js} +2 -2
- package/dist/_shared/esm/{TextInput-7ed03a48.d.ts → TextInput-13050538.d.ts} +3 -1
- package/dist/_shared/{cjs/TextInput-b768e346.d.ts → esm/TextInput-4424c195.d.ts} +3 -3
- package/dist/_shared/esm/{TextInput-62bb7dee.js → TextInput-4424c195.js} +1 -1
- package/dist/_shared/esm/Toast-43795e91.d.ts +52 -0
- package/dist/_shared/esm/Toast-43795e91.js +733 -0
- package/dist/_shared/esm/extends-4575346e.js +19 -0
- package/dist/_shared/esm/{index.module-216016b5.js → index-22aad354.js} +138 -29
- package/dist/_shared/esm/{index-4fa635bd.js → index-369dce7f.js} +2 -541
- package/dist/_shared/esm/index-699086a7.d.ts +1 -1
- package/dist/_shared/esm/index-74488a9f.d.ts +1 -1
- package/dist/_shared/esm/index-8000d9e3.js +168 -0
- package/dist/_shared/esm/index-94ecc5f8.js +280 -0
- package/dist/_shared/esm/index-bed18a88.js +26 -0
- package/dist/_shared/esm/index-c81c9401.d.ts +3 -3
- package/dist/_shared/esm/index-e340924e.d.ts +1 -1
- package/dist/_shared/esm/index-e6d20018.d.ts +1 -1
- package/dist/_shared/esm/index-eb06f640.d.ts +1 -1
- package/dist/_shared/esm/index-f419cf04.d.ts +1 -1
- package/dist/_shared/esm/index.module-5ed90b21.js +122 -0
- package/dist/index.es.js +5036 -1358
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +5358 -1668
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/components/Badge/Badge.d.ts +4 -0
- package/dist/types/components/Button/Button.d.ts +4 -0
- package/dist/types/components/Columns/Columns.d.ts +1 -1
- package/dist/types/components/Columns/index.d.ts +1 -1
- package/dist/types/components/Curve/Curve.d.ts +5 -2
- package/dist/types/components/Heading/Heading.d.ts +4 -0
- package/dist/types/components/Modal/Modal.d.ts +31 -9
- package/dist/types/components/Tabs/Tab/Tab.d.ts +22 -0
- package/dist/types/components/Tabs/Tab/index.d.ts +1 -0
- package/dist/types/components/Tabs/TabContent/TabContent.d.ts +12 -0
- package/dist/types/components/Tabs/TabContent/index.d.ts +1 -0
- package/dist/types/components/Tabs/Tabs.d.ts +27 -0
- package/dist/types/components/Tabs/TabsList/TabsList.d.ts +20 -0
- package/dist/types/components/Tabs/TabsList/index.d.ts +1 -0
- package/dist/types/components/Tabs/index.d.ts +1 -0
- package/dist/types/components/Text/Text.d.ts +4 -0
- package/dist/types/components/TextArea/TextArea.d.ts +3 -0
- package/dist/types/components/TextInput/TextInput.d.ts +2 -0
- package/dist/types/components/Toast/Toast.d.ts +14 -0
- package/dist/types/components/Toast/ToastNotification.d.ts +39 -0
- package/dist/types/components/Toast/index.d.ts +1 -0
- package/dist/types/components/index.d.ts +18 -6
- package/dist/types/styles.d.ts +3 -2
- package/package.json +8 -6
- package/dist/MediaCard/MediaCard.cjs.js +0 -31
- package/dist/MediaCard/MediaCard.esm.js +0 -23
- package/dist/MediaCard/package.json +0 -7
- package/dist/_shared/cjs/Box-ebe2b7be.d.ts +0 -39
- package/dist/_shared/cjs/Box-ebe2b7be.js +0 -30
- package/dist/_shared/cjs/index.module-5ea728f4.js +0 -23
- package/dist/_shared/esm/Box-06d99d8a.d.ts +0 -39
- package/dist/_shared/esm/Box-06d99d8a.js +0 -24
- package/dist/_shared/esm/index.module-88179159.js +0 -21
- package/dist/types/components/Modal/Modal.stories-wip.d.ts +0 -9
- /package/dist/_shared/cjs/{Breadcrumbs-9f580f69.d.ts → Breadcrumbs-0906dd10.d.ts} +0 -0
- /package/dist/_shared/cjs/{Card-f1108bfe.d.ts → Card-fd189ba8.d.ts} +0 -0
- /package/dist/_shared/cjs/{Checkbox-c927b62f.d.ts → Checkbox-02c546ca.d.ts} +0 -0
- /package/dist/_shared/cjs/{DisclosureMini-2a10006e.d.ts → DisclosureMini-52706ee6.d.ts} +0 -0
- /package/dist/_shared/cjs/{FormControl-78b007b7.d.ts → FormControl-1e1bf2bf.d.ts} +0 -0
- /package/dist/_shared/cjs/{SiteFooter-9f7f9c2d.d.ts → SiteFooter-5da774e1.d.ts} +0 -0
- /package/dist/_shared/cjs/{SiteHeader.rehydrator-ccbebde6.d.ts → SiteHeader.rehydrator-acc9d8c4.d.ts} +0 -0
- /package/dist/_shared/esm/{Breadcrumbs-5dc0afa7.d.ts → Breadcrumbs-dafa8dde.d.ts} +0 -0
- /package/dist/_shared/esm/{Card-79b6eae0.d.ts → Card-e62c3ff6.d.ts} +0 -0
- /package/dist/_shared/esm/{Checkbox-2d144384.d.ts → Checkbox-d8891198.d.ts} +0 -0
- /package/dist/_shared/esm/{DisclosureMini-78a8f392.d.ts → DisclosureMini-9b819941.d.ts} +0 -0
- /package/dist/_shared/esm/{FormControl-2fa7aae5.d.ts → FormControl-f18e2f59.d.ts} +0 -0
- /package/dist/_shared/esm/{SiteFooter-51bdc7df.d.ts → SiteFooter-a182cb18.d.ts} +0 -0
- /package/dist/_shared/esm/{SiteHeader.rehydrator-382d1c03.d.ts → SiteHeader.rehydrator-023b7b76.d.ts} +0 -0
|
@@ -26,6 +26,10 @@ interface ButtonElementProps {
|
|
|
26
26
|
* be inferred. Type 'reset' deliberately excluded.
|
|
27
27
|
*/
|
|
28
28
|
type?: "button" | "submit";
|
|
29
|
+
/**
|
|
30
|
+
* Refers to the id of a form so it can be submitted if the button exists outside of it.
|
|
31
|
+
*/
|
|
32
|
+
form?: string;
|
|
29
33
|
}
|
|
30
34
|
interface LinkElementProps {
|
|
31
35
|
/**
|
|
@@ -6,7 +6,7 @@ export declare const Columns: FC<ColumnsProps> & {
|
|
|
6
6
|
Col: typeof Col;
|
|
7
7
|
};
|
|
8
8
|
export declare const Col: FC<ColProps>;
|
|
9
|
-
declare type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
9
|
+
export declare type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
10
10
|
declare type Offset = "0" | "24" | "48" | "72" | "96" | "120" | "144" | "168" | "192" | "216" | "240" | "264" | "288" | "312" | "336" | "360" | "384";
|
|
11
11
|
export interface ColProps {
|
|
12
12
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Columns } from "./Columns";
|
|
1
|
+
export { Columns, Span } from "./Columns";
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { FC } from "react";
|
|
2
2
|
import { backgroundsBT } from "../Surface";
|
|
3
3
|
/**
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
#### Deprecation Notice
|
|
5
|
+
|
|
6
|
+
The `Curve` component is an outdated brand feature and is being deprecated from Arc as a standalone component or sub-component within other components. Do not use Curve for any new work, and prepare to update any design that features it to remove it.
|
|
7
|
+
|
|
8
|
+
`Curve` will be removed from Arc in a subsequent release
|
|
6
9
|
*/
|
|
7
10
|
export declare const Curve: FC<CurveProps>;
|
|
8
11
|
export declare const sizes: readonly ["s", "m", "l"];
|
|
@@ -1,28 +1,50 @@
|
|
|
1
1
|
import React, { FC } from "react";
|
|
2
|
+
import { ButtonProps } from "../Button/Button";
|
|
3
|
+
/** Use `Modal` to focus a user's attention to an urgent or required prompt for interaction or input. */
|
|
2
4
|
export declare const Modal: FC<ModalProps>;
|
|
3
5
|
export interface ModalProps {
|
|
4
6
|
/**
|
|
5
|
-
*
|
|
7
|
+
* Title for the modal. This will be announced by screen readers when the modal opens.
|
|
6
8
|
*/
|
|
7
9
|
title: string;
|
|
8
10
|
/**
|
|
9
|
-
*
|
|
11
|
+
* Role for the modal. use alertdialog if explicit user input is required e.g deleting an account. role alertdialog will remove the ability to close the modal by either the esc key being pressed, clicking the cross icon or clicking outside.
|
|
10
12
|
*/
|
|
11
|
-
|
|
13
|
+
role?: "dialog" | "alertdialog";
|
|
12
14
|
/**
|
|
13
|
-
*
|
|
15
|
+
* Whether to return focus to the element that was focused before the modal opened. True by default.
|
|
14
16
|
*/
|
|
15
|
-
|
|
17
|
+
shouldReturnFocus?: boolean;
|
|
16
18
|
/**
|
|
17
|
-
*
|
|
19
|
+
* Description for the modal. This will be announced by screen readers when the modal opens.
|
|
18
20
|
*/
|
|
19
|
-
|
|
21
|
+
description?: string;
|
|
20
22
|
/**
|
|
21
|
-
*
|
|
23
|
+
* ID for the element description to be announced by screenreaders in addition to the title.
|
|
24
|
+
*/
|
|
25
|
+
ariaDescribedBy?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Configurable actions for the modal.
|
|
28
|
+
*/
|
|
29
|
+
actions?: Pick<ButtonProps, "form" | "type" | "fill" | "icon" | "iconPosition" | "href" | "id" | "label" | "onClick" | "isDisabled" | "ariaLabel" | "rel">[];
|
|
30
|
+
/**
|
|
31
|
+
* Function to be called when the modal has been requested to close by either the esc key being pressed, outside the dialog being clicked or the close button being clicked. The callback must set the open state of the modal to false. This function is ignored if the `role` prop is set to `alertdialog`. You can prevent this behavior with the `dialog` role by ommitting this prop.
|
|
32
|
+
*/
|
|
33
|
+
onRequestClose?: () => void;
|
|
34
|
+
/**
|
|
35
|
+
* Size of the modal dialog.
|
|
36
|
+
*/
|
|
37
|
+
size?: "s" | "m" | "l";
|
|
38
|
+
/**
|
|
39
|
+
* Set modal open or closed.
|
|
22
40
|
*/
|
|
23
41
|
isOpen?: boolean;
|
|
24
42
|
/**
|
|
25
|
-
* content
|
|
43
|
+
* Enables the dialog content to be scrolled internally.
|
|
44
|
+
*/
|
|
45
|
+
isContentScrollable?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Custom content for `Modal`.
|
|
26
48
|
*/
|
|
27
49
|
children?: React.ReactNode;
|
|
28
50
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { ArcIcon } from "../../../types/arc-icon";
|
|
3
|
+
export declare const Tab: FC<TabProps>;
|
|
4
|
+
interface TabProps {
|
|
5
|
+
/**
|
|
6
|
+
* Label to display on the Tab
|
|
7
|
+
*/
|
|
8
|
+
label: string;
|
|
9
|
+
/**
|
|
10
|
+
* Value to link `Tab` to `TabContent`
|
|
11
|
+
*/
|
|
12
|
+
value: string;
|
|
13
|
+
/**
|
|
14
|
+
* Determine what icon to display within the Tab.
|
|
15
|
+
*/
|
|
16
|
+
icon?: ArcIcon;
|
|
17
|
+
/**
|
|
18
|
+
* Determine what to display when `Tab` is active
|
|
19
|
+
*/
|
|
20
|
+
iconActive?: ArcIcon;
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Tab } from "./Tab";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC, ReactNode } from "react";
|
|
2
|
+
export declare const TabContent: FC<TabContentProps>;
|
|
3
|
+
export interface TabContentProps {
|
|
4
|
+
/**
|
|
5
|
+
* Content to display
|
|
6
|
+
*/
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* This value links the `TabContent` with `Tab`
|
|
10
|
+
*/
|
|
11
|
+
value: string;
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TabContent } from "./TabContent";
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { FC, ReactNode } from "react";
|
|
2
|
+
import { Tab } from "./Tab/Tab";
|
|
3
|
+
import { TabContent } from "./TabContent";
|
|
4
|
+
import { TabsList } from "./TabsList";
|
|
5
|
+
export declare const Tabs: FC<TabsProps> & {
|
|
6
|
+
Tab: typeof Tab;
|
|
7
|
+
Content: typeof TabContent;
|
|
8
|
+
List: typeof TabsList;
|
|
9
|
+
};
|
|
10
|
+
export interface TabsProps {
|
|
11
|
+
/**
|
|
12
|
+
* Render children
|
|
13
|
+
*/
|
|
14
|
+
children: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Default to an inital value of a tab. If this is left blank it is possible for there to be no active tabs
|
|
17
|
+
*/
|
|
18
|
+
defaultValue?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Event handler called when the value changes.
|
|
21
|
+
*/
|
|
22
|
+
onValueChange?: (value: string) => void;
|
|
23
|
+
/**
|
|
24
|
+
* When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
|
|
25
|
+
*/
|
|
26
|
+
activationMode?: "automatic" | "manual";
|
|
27
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { FC, ReactNode } from "react";
|
|
2
|
+
export declare const TabsList: FC<TabsListProps>;
|
|
3
|
+
export interface TabsListProps {
|
|
4
|
+
/**
|
|
5
|
+
* Contents of the `Tabs` Should contain `Tab`
|
|
6
|
+
*/
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Determine if `Tabs` should be justified
|
|
10
|
+
*/
|
|
11
|
+
isJustified?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Determine the type of `Tabs`. Default is standard
|
|
14
|
+
*/
|
|
15
|
+
type?: "standard" | "contained";
|
|
16
|
+
/**
|
|
17
|
+
* Determine a accessible label for `Tabs`
|
|
18
|
+
*/
|
|
19
|
+
ariaLabel?: string;
|
|
20
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TabsList } from "./TabsList";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Tabs } from "./Tabs";
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { FormControlProps } from "../FormControl/FormControl";
|
|
3
3
|
declare type EventType = React.ChangeEvent<HTMLTextAreaElement>;
|
|
4
|
+
/** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
|
|
4
5
|
export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
5
6
|
export interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
|
|
6
7
|
/**
|
|
7
8
|
* Uncontrolled default value of the TextArea. If the TextArea is controlled
|
|
8
9
|
* via `value`/`onChange`, `defaultValue` will be ignored.
|
|
10
|
+
*
|
|
11
|
+
* `defaultValue` is not to be used instead of helper text.
|
|
9
12
|
*/
|
|
10
13
|
defaultValue?: string;
|
|
11
14
|
/**
|
|
@@ -9,6 +9,8 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
|
|
|
9
9
|
/**
|
|
10
10
|
* Uncontrolled default value of the TextInput. If the TextInput is controlled
|
|
11
11
|
* via `value`/`onChange`, `defaultValue` will be ignored.
|
|
12
|
+
*
|
|
13
|
+
* `defaultValue` is not to be used instead of helper text.
|
|
12
14
|
*/
|
|
13
15
|
defaultValue?: string;
|
|
14
16
|
/**
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { FC } from "react";
|
|
2
|
+
import { ToastNotification } from "./ToastNotification";
|
|
3
|
+
/** Use `Toast` to display temporary messages at the bottom of the viewport. */
|
|
4
|
+
export declare const Toast: FC<ToastProps> & {
|
|
5
|
+
Notification: typeof ToastNotification;
|
|
6
|
+
};
|
|
7
|
+
interface ToastProps {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Colour scheme for `Toast` - Use 'default' in almost all cases.
|
|
11
|
+
*/
|
|
12
|
+
colorScheme?: "default" | "alternative";
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
export declare const ToastNotification: FC<ToastNotificationProps>;
|
|
3
|
+
declare type ToastStatus = "general" | "error" | "warning" | "success";
|
|
4
|
+
export interface ToastNotificationProps {
|
|
5
|
+
/**
|
|
6
|
+
* Title for `<Toast />`
|
|
7
|
+
*/
|
|
8
|
+
title: string;
|
|
9
|
+
/**
|
|
10
|
+
* Set open state for `<Toast />`
|
|
11
|
+
*/
|
|
12
|
+
isOpen: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Function to call when the open state of `<Toast />` changes. This needs to be supplied in order for the auto dismiss and the close button to work.
|
|
15
|
+
*/
|
|
16
|
+
onOpenChange: (isOpen: boolean) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Set whether close button shows
|
|
19
|
+
*/
|
|
20
|
+
isCloseButtonVisible?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Set whether to include a status icon
|
|
23
|
+
*/
|
|
24
|
+
isStatusIconVisible?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Link for `<Toast />`
|
|
27
|
+
*/
|
|
28
|
+
link?: {
|
|
29
|
+
text: string;
|
|
30
|
+
ariaLabel?: string;
|
|
31
|
+
href?: string;
|
|
32
|
+
onClick?: () => void;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Status of `<Toast />`
|
|
36
|
+
*/
|
|
37
|
+
status?: ToastStatus;
|
|
38
|
+
}
|
|
39
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Toast } from "./Toast";
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
export { Align } from "./Align";
|
|
2
|
+
export { Alert } from "./Alert";
|
|
3
|
+
export { Badge } from "./Badge";
|
|
2
4
|
export { Base } from "./Base";
|
|
3
|
-
export {
|
|
4
|
-
export { BrandLogo } from "./BrandLogo
|
|
5
|
+
export { Box } from "./Box";
|
|
6
|
+
export { BrandLogo } from "./BrandLogo";
|
|
7
|
+
export { Breadcrumbs } from "./Breadcrumbs";
|
|
5
8
|
export { Button } from "./Button";
|
|
6
9
|
export { Card } from "./Card";
|
|
7
10
|
export { Checkbox } from "./Checkbox";
|
|
@@ -9,29 +12,38 @@ export { Clock, ClockRehydrator } from "./Clock";
|
|
|
9
12
|
export { Columns } from "./Columns";
|
|
10
13
|
export { Curve } from "./Curve";
|
|
11
14
|
export { Disclosure } from "./Disclosure";
|
|
15
|
+
export { DisclosureMini } from "./DisclosureMini";
|
|
12
16
|
export { Elevation } from "./Elevation";
|
|
13
|
-
export { FormControl } from "./FormControl";
|
|
14
17
|
export { Filter } from "./Filter";
|
|
18
|
+
export { FormControl } from "./FormControl";
|
|
15
19
|
export { Group } from "./Group";
|
|
16
20
|
export { Heading } from "./Heading";
|
|
17
21
|
export { Icon } from "./Icon";
|
|
18
22
|
export { Image } from "./Image";
|
|
19
23
|
export { Markup } from "./Markup";
|
|
20
|
-
export {
|
|
24
|
+
export { MediaCard } from "./MediaCard";
|
|
25
|
+
export { Modal } from "./Modal";
|
|
26
|
+
export { Pagination } from "./Pagination";
|
|
27
|
+
export { PaginationSimple } from "./PaginationSimple";
|
|
21
28
|
export { Poster } from "./Poster";
|
|
29
|
+
export { ProgressBar } from "./ProgressBar";
|
|
30
|
+
export { ProgressStepper } from "./ProgressStepper";
|
|
22
31
|
export { RadioGroup } from "./RadioGroup";
|
|
23
32
|
export { Rule } from "./Rule";
|
|
33
|
+
export { ScrollToTop } from "./ScrollToTop";
|
|
24
34
|
export { Section } from "./Section";
|
|
25
35
|
export { Select } from "./Select";
|
|
26
36
|
export { SiteFooter, SiteFooterRehydrator } from "./SiteFooter";
|
|
27
37
|
export { SiteHeader, SiteHeaderRehydrator } from "./SiteHeader";
|
|
28
38
|
export { Surface, SurfaceContext } from "./Surface";
|
|
29
39
|
export { Switch } from "./Switch";
|
|
30
|
-
export {
|
|
40
|
+
export { Tabs } from "./Tabs";
|
|
31
41
|
export { Tag } from "./Tag";
|
|
32
42
|
export { Text } from "./Text";
|
|
33
|
-
export { TextInput } from "./TextInput";
|
|
34
43
|
export { TextArea } from "./TextArea";
|
|
44
|
+
export { TextInput } from "./TextInput";
|
|
45
|
+
export { Toast } from "./Toast";
|
|
35
46
|
export { Truncate } from "./Truncate";
|
|
47
|
+
export { UniversalHeader } from "./UniversalHeader";
|
|
36
48
|
export { VerticalSpace } from "./VerticalSpace";
|
|
37
49
|
export { VisuallyHidden } from "./VisuallyHidden";
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ import "./components/Select/Select.css";
|
|
|
35
35
|
import "./components/SiteFooter/SiteFooter.css";
|
|
36
36
|
import "./components/SiteHeader/SiteHeader.css";
|
|
37
37
|
import "./components/Surface/Surface.css";
|
|
38
|
+
import "./components/Tabs/Tabs.css";
|
|
38
39
|
import "./components/Tag/Tag.css";
|
|
39
40
|
import "./components/Text/Text.css";
|
|
40
41
|
import "./components/TextArea/TextArea.css";
|
|
@@ -65,10 +66,10 @@ import "./components/Select/Select.bt.css";
|
|
|
65
66
|
import "./components/SiteFooter/SiteFooter.bt.css";
|
|
66
67
|
import "./components/SiteHeader/SiteHeader.bt.css";
|
|
67
68
|
import "./components/Surface/Surface.bt.css";
|
|
69
|
+
import "./components/Tabs/Tabs.css";
|
|
68
70
|
import "./components/Text/Text.bt.css";
|
|
69
71
|
import "./components/TextInput/TextInput.bt.css";
|
|
70
72
|
import "./components/UniversalHeader/UniversalHeader.bt.css";
|
|
71
73
|
import "./components/Switch/Switch.bt.css";
|
|
72
|
-
import "./components/
|
|
73
|
-
import "./components/ProgressBar/ProgressBar.css";
|
|
74
|
+
import "./components/Toast/Toast.css";
|
|
74
75
|
import "./components/ProgressStepper/ProgressStepper.css";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arc-ui/components",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.9.0",
|
|
4
4
|
"homepage": "https://ui.digital-ent-int.bt.com",
|
|
5
5
|
"author": "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -26,15 +26,17 @@
|
|
|
26
26
|
"react": "^18.0.0"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@radix-ui/react-dialog": "1.0.
|
|
29
|
+
"@radix-ui/react-dialog": "1.0.4",
|
|
30
30
|
"@radix-ui/react-label": "2.0.0",
|
|
31
31
|
"@radix-ui/react-select": "1.1.2",
|
|
32
|
-
"@radix-ui/react-switch": "
|
|
32
|
+
"@radix-ui/react-switch": "1.0.1",
|
|
33
|
+
"@radix-ui/react-tabs": "1.0.4",
|
|
34
|
+
"@radix-ui/react-toast": "1.1.4"
|
|
33
35
|
},
|
|
34
36
|
"devDependencies": {
|
|
35
|
-
"@arc-ui/fonts": "^11.
|
|
36
|
-
"@arc-ui/icons": "^11.
|
|
37
|
-
"@arc-ui/tokens": "^11.
|
|
37
|
+
"@arc-ui/fonts": "^11.9.0",
|
|
38
|
+
"@arc-ui/icons": "^11.9.0",
|
|
39
|
+
"@arc-ui/tokens": "^11.9.0",
|
|
38
40
|
"@babel/core": "^7.14.3",
|
|
39
41
|
"@babel/helper-define-map": "^7.14.3",
|
|
40
42
|
"@storybook/addon-essentials": "^6.3.6",
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
|
|
6
|
-
var Image = require('../_shared/cjs/Image-0e393cbf.js');
|
|
7
|
-
var React = require('react');
|
|
8
|
-
var Box = require('../_shared/cjs/Box-ebe2b7be.js');
|
|
9
|
-
require('../_shared/cjs/index-45bfb67b.js');
|
|
10
|
-
require('../_shared/cjs/suffix-modifier-1ee2da04.js');
|
|
11
|
-
require('../_shared/cjs/Surface-b7c51b2b.js');
|
|
12
|
-
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
16
|
-
|
|
17
|
-
// Update tests for box surface
|
|
18
|
-
/**
|
|
19
|
-
* Use `MediaCard` to contain content and an image about a single subject.
|
|
20
|
-
*/
|
|
21
|
-
var MediaCard = function (_a) {
|
|
22
|
-
var isBorderRadius = _a.isBorderRadius, isFullHeight = _a.isFullHeight, cardFooter = _a.cardFooter, borderWidth = _a.borderWidth, surface = _a.surface, elevationLevel = _a.elevationLevel, imageSrc = _a.imageSrc, imageAlt = _a.imageAlt, imageLoading = _a.imageLoading, imageSizes = _a.imageSizes, imageSrcSet = _a.imageSrcSet, children = _a.children, props = filterDataAttrs.__rest(_a, ["isBorderRadius", "isFullHeight", "cardFooter", "borderWidth", "surface", "elevationLevel", "imageSrc", "imageAlt", "imageLoading", "imageSizes", "imageSrcSet", "children"]);
|
|
23
|
-
return (React__default["default"].createElement(Box.Box, filterDataAttrs.__assign({ isFullHeight: isFullHeight, surface: surface, elevationLevel: elevationLevel, isBorderRadius: isBorderRadius, borderWidth: borderWidth }, filterDataAttrs.filterDataAttrs(props)),
|
|
24
|
-
React__default["default"].createElement("div", { className: "arc-MediaCard-wrapper" },
|
|
25
|
-
React__default["default"].createElement("div", { className: "arc-MediaCard-imageContainer" },
|
|
26
|
-
React__default["default"].createElement(Image.Image, { alt: imageAlt, loading: imageLoading, sizes: imageSizes, src: imageSrc, srcSet: imageSrcSet })),
|
|
27
|
-
React__default["default"].createElement("div", { className: "arc-MediaCard-section" }, children),
|
|
28
|
-
cardFooter && (React__default["default"].createElement("div", { className: "arc-MediaCard-section" }, cardFooter)))));
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
exports.MediaCard = MediaCard;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
|
|
2
|
-
import { I as Image } from '../_shared/esm/Image-3ed3863c.js';
|
|
3
|
-
import React__default from 'react';
|
|
4
|
-
import { B as Box } from '../_shared/esm/Box-06d99d8a.js';
|
|
5
|
-
import '../_shared/esm/index-2ae58626.js';
|
|
6
|
-
import '../_shared/esm/suffix-modifier-7e640670.js';
|
|
7
|
-
import '../_shared/esm/Surface-dde51789.js';
|
|
8
|
-
|
|
9
|
-
// Update tests for box surface
|
|
10
|
-
/**
|
|
11
|
-
* Use `MediaCard` to contain content and an image about a single subject.
|
|
12
|
-
*/
|
|
13
|
-
var MediaCard = function (_a) {
|
|
14
|
-
var isBorderRadius = _a.isBorderRadius, isFullHeight = _a.isFullHeight, cardFooter = _a.cardFooter, borderWidth = _a.borderWidth, surface = _a.surface, elevationLevel = _a.elevationLevel, imageSrc = _a.imageSrc, imageAlt = _a.imageAlt, imageLoading = _a.imageLoading, imageSizes = _a.imageSizes, imageSrcSet = _a.imageSrcSet, children = _a.children, props = __rest(_a, ["isBorderRadius", "isFullHeight", "cardFooter", "borderWidth", "surface", "elevationLevel", "imageSrc", "imageAlt", "imageLoading", "imageSizes", "imageSrcSet", "children"]);
|
|
15
|
-
return (React__default.createElement(Box, __assign({ isFullHeight: isFullHeight, surface: surface, elevationLevel: elevationLevel, isBorderRadius: isBorderRadius, borderWidth: borderWidth }, filterDataAttrs(props)),
|
|
16
|
-
React__default.createElement("div", { className: "arc-MediaCard-wrapper" },
|
|
17
|
-
React__default.createElement("div", { className: "arc-MediaCard-imageContainer" },
|
|
18
|
-
React__default.createElement(Image, { alt: imageAlt, loading: imageLoading, sizes: imageSizes, src: imageSrc, srcSet: imageSrcSet })),
|
|
19
|
-
React__default.createElement("div", { className: "arc-MediaCard-section" }, children),
|
|
20
|
-
cardFooter && (React__default.createElement("div", { className: "arc-MediaCard-section" }, cardFooter)))));
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export { MediaCard };
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { FC } from "react";
|
|
4
|
-
import { SurfaceBackgroundColor, SurfacePadding } from "./Surface-b7c51b2b";
|
|
5
|
-
/**
|
|
6
|
-
* Use `Box` as a simple way to group bespoke content and interactive elements together.
|
|
7
|
-
*/
|
|
8
|
-
declare const Box: FC<BoxProps>;
|
|
9
|
-
interface BoxProps {
|
|
10
|
-
/**
|
|
11
|
-
* Contents of the Box.
|
|
12
|
-
*/
|
|
13
|
-
children: React.ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Set Box to fill parent element.
|
|
16
|
-
*/
|
|
17
|
-
isFullHeight?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Add rounded corners to the box.
|
|
20
|
-
*/
|
|
21
|
-
isBorderRadius?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* The border width of the box.
|
|
24
|
-
*/
|
|
25
|
-
borderWidth?: "thin" | "medium";
|
|
26
|
-
/**
|
|
27
|
-
* Box shadow for the box.
|
|
28
|
-
*/
|
|
29
|
-
elevationLevel?: "1" | "2";
|
|
30
|
-
/**
|
|
31
|
-
* Padding for the box.
|
|
32
|
-
*/
|
|
33
|
-
padding?: SurfacePadding;
|
|
34
|
-
/**
|
|
35
|
-
* Background color for the box.
|
|
36
|
-
*/
|
|
37
|
-
surface?: SurfaceBackgroundColor;
|
|
38
|
-
}
|
|
39
|
-
export { Box, BoxProps };
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var index = require('./index-45bfb67b.js');
|
|
6
|
-
var Surface = require('./Surface-b7c51b2b.js');
|
|
7
|
-
|
|
8
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
-
|
|
10
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
-
|
|
12
|
-
// Do equal height boxes story
|
|
13
|
-
/**
|
|
14
|
-
* Use `Box` as a simple way to group bespoke content and interactive elements together.
|
|
15
|
-
*/
|
|
16
|
-
var Box = function (_a) {
|
|
17
|
-
var _b;
|
|
18
|
-
var children = _a.children, borderWidth = _a.borderWidth, elevationLevel = _a.elevationLevel, padding = _a.padding, _c = _a.isFullHeight, isFullHeight = _c === void 0 ? false : _c, _d = _a.isBorderRadius, isBorderRadius = _d === void 0 ? false : _d, _e = _a.surface, surface = _e === void 0 ? "white" : _e, props = filterDataAttrs.__rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface"]);
|
|
19
|
-
return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-Box", (_b = {},
|
|
20
|
-
_b["arc-Box--fullHeight"] = isFullHeight,
|
|
21
|
-
_b["arc-Box--borderRadius"] = isBorderRadius,
|
|
22
|
-
_b["arc-Box--borderThin"] = borderWidth === "thin",
|
|
23
|
-
_b["arc-Box--borderMedium"] = borderWidth === "medium",
|
|
24
|
-
_b["arc-Box--elevation1"] = elevationLevel === "1",
|
|
25
|
-
_b["arc-Box--elevation2"] = elevationLevel === "2",
|
|
26
|
-
_b)) }, filterDataAttrs.filterDataAttrs(props)),
|
|
27
|
-
React__default["default"].createElement(Surface.Surface, { padding: padding, background: surface }, children)));
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
exports.Box = Box;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
|
|
5
|
-
function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
|
|
6
|
-
const ref = React.useRef({
|
|
7
|
-
value: value,
|
|
8
|
-
previous: value
|
|
9
|
-
}); // We compare values before making an update to ensure that
|
|
10
|
-
// a change has been made. This ensures the previous value is
|
|
11
|
-
// persisted correctly between renders.
|
|
12
|
-
return React.useMemo(()=>{
|
|
13
|
-
if (ref.current.value !== value) {
|
|
14
|
-
ref.current.previous = ref.current.value;
|
|
15
|
-
ref.current.value = value;
|
|
16
|
-
}
|
|
17
|
-
return ref.current.previous;
|
|
18
|
-
}, [
|
|
19
|
-
value
|
|
20
|
-
]);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
exports.$010c2913dbd2fe3d$export$5cae361ad82dce8b = $010c2913dbd2fe3d$export$5cae361ad82dce8b;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { FC } from "react";
|
|
4
|
-
import { SurfaceBackgroundColor, SurfacePadding } from "./Surface-dde51789";
|
|
5
|
-
/**
|
|
6
|
-
* Use `Box` as a simple way to group bespoke content and interactive elements together.
|
|
7
|
-
*/
|
|
8
|
-
declare const Box: FC<BoxProps>;
|
|
9
|
-
interface BoxProps {
|
|
10
|
-
/**
|
|
11
|
-
* Contents of the Box.
|
|
12
|
-
*/
|
|
13
|
-
children: React.ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Set Box to fill parent element.
|
|
16
|
-
*/
|
|
17
|
-
isFullHeight?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Add rounded corners to the box.
|
|
20
|
-
*/
|
|
21
|
-
isBorderRadius?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* The border width of the box.
|
|
24
|
-
*/
|
|
25
|
-
borderWidth?: "thin" | "medium";
|
|
26
|
-
/**
|
|
27
|
-
* Box shadow for the box.
|
|
28
|
-
*/
|
|
29
|
-
elevationLevel?: "1" | "2";
|
|
30
|
-
/**
|
|
31
|
-
* Padding for the box.
|
|
32
|
-
*/
|
|
33
|
-
padding?: SurfacePadding;
|
|
34
|
-
/**
|
|
35
|
-
* Background color for the box.
|
|
36
|
-
*/
|
|
37
|
-
surface?: SurfaceBackgroundColor;
|
|
38
|
-
}
|
|
39
|
-
export { Box, BoxProps };
|