@arbor-education/design-system.components 4.3.0 → 4.5.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/.storybook/preview.ts +10 -0
- package/CHANGELOG.md +16 -0
- package/dist/components/datePicker/DatePicker.stories.d.ts +5 -0
- package/dist/components/datePicker/DatePicker.stories.d.ts.map +1 -1
- package/dist/components/datePicker/DatePicker.stories.js +211 -2
- package/dist/components/datePicker/DatePicker.stories.js.map +1 -1
- package/dist/components/datePicker/DatePickerPopover.d.ts +11 -0
- package/dist/components/datePicker/DatePickerPopover.d.ts.map +1 -0
- package/dist/components/datePicker/DatePickerPopover.js +33 -0
- package/dist/components/datePicker/DatePickerPopover.js.map +1 -0
- package/dist/components/datePicker/DatePickerPopover.test.d.ts +2 -0
- package/dist/components/datePicker/DatePickerPopover.test.d.ts.map +1 -0
- package/dist/components/datePicker/DatePickerPopover.test.js +101 -0
- package/dist/components/datePicker/DatePickerPopover.test.js.map +1 -0
- package/dist/components/slideover/Slideover.d.ts +7 -2
- package/dist/components/slideover/Slideover.d.ts.map +1 -1
- package/dist/components/slideover/Slideover.js +31 -4
- package/dist/components/slideover/Slideover.js.map +1 -1
- package/dist/components/slideover/Slideover.test.js +116 -2
- package/dist/components/slideover/Slideover.test.js.map +1 -1
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts +3 -0
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts.map +1 -1
- package/dist/components/slideoverManager/SlideoverManager.stories.js +74 -4
- package/dist/components/slideoverManager/SlideoverManager.stories.js.map +1 -1
- package/dist/index.css +6 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/SlideoverUtils.d.ts +3 -1
- package/dist/utils/SlideoverUtils.d.ts.map +1 -1
- package/dist/utils/SlideoverUtils.js.map +1 -1
- package/package.json +1 -1
- package/src/components/datePicker/DatePicker.stories.tsx +293 -0
- package/src/components/datePicker/DatePickerPopover.test.tsx +144 -0
- package/src/components/datePicker/DatePickerPopover.tsx +72 -0
- package/src/components/slideover/Slideover.test.tsx +152 -2
- package/src/components/slideover/Slideover.tsx +56 -9
- package/src/components/slideover/slideover.scss +8 -1
- package/src/components/slideoverManager/SlideoverManager.stories.tsx +147 -3
- package/src/docs/Contributing.mdx +2 -0
- package/src/index.ts +1 -0
- package/src/utils/SlideoverUtils.ts +4 -1
package/.storybook/preview.ts
CHANGED
|
@@ -39,7 +39,17 @@ const preview: Preview = {
|
|
|
39
39
|
// 'todo' - show a11y violations in the test UI only
|
|
40
40
|
// 'error' - fail CI on a11y violations
|
|
41
41
|
// 'off' - skip a11y checks entirely
|
|
42
|
+
// Deliberately 'todo' (warn) until a11y violations are fixed. Flip to 'error' in MIS-75900.
|
|
42
43
|
test: 'todo',
|
|
44
|
+
options: {
|
|
45
|
+
runOnly: {
|
|
46
|
+
type: 'tag',
|
|
47
|
+
values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'],
|
|
48
|
+
},
|
|
49
|
+
rules: {
|
|
50
|
+
'label-content-name-mismatch': { enabled: true },
|
|
51
|
+
},
|
|
52
|
+
},
|
|
43
53
|
},
|
|
44
54
|
docs: {
|
|
45
55
|
page: DocsTemplate,
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 4.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#287](https://github.com/arbor-education/design-system.components/pull/287) [`99a6a3c`](https://github.com/arbor-education/design-system.components/commit/99a6a3c2188aac8f5f6755871710c1b93b947ec3) Thanks [@angusmglfraser](https://github.com/angusmglfraser)! - MIS-75978 ✨ standalone Date Picker Popover component
|
|
8
|
+
|
|
9
|
+
## 4.4.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#285](https://github.com/arbor-education/design-system.components/pull/285) [`7f8a61d`](https://github.com/arbor-education/design-system.components/commit/7f8a61db6270c99b2dd18d2da1590fd55c3dff88) Thanks [@rickbairstow](https://github.com/rickbairstow)! - MIS-73686 ✨ Add Slideover back hook, header actions and close transition
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#286](https://github.com/arbor-education/design-system.components/pull/286) [`6269d2f`](https://github.com/arbor-education/design-system.components/commit/6269d2f6ba2ed584344ed65bde3bc663a914878f) Thanks [@rickbairstow](https://github.com/rickbairstow)! - MIS-75775 Configure Storybook axe-core accessibility checks to WCAG 2.2 A/AA and enable the label-content-name-mismatch rule. Checks run at warn level and do not fail the build.
|
|
18
|
+
|
|
3
19
|
## 4.3.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import { DatePicker } from './DatePicker.js';
|
|
3
|
+
import { DatePickerPopover } from './DatePickerPopover.js';
|
|
3
4
|
declare function DatePickerDocsPage(): import("react").JSX.Element;
|
|
4
5
|
declare const meta: {
|
|
5
6
|
title: string;
|
|
@@ -146,4 +147,8 @@ export declare const ControlledWithDisplay: Story;
|
|
|
146
147
|
export declare const ControlledWithValidation: Story;
|
|
147
148
|
export declare const WithFormField: Story;
|
|
148
149
|
export declare const WithFormFieldAndError: Story;
|
|
150
|
+
type PopoverStory = StoryObj<typeof DatePickerPopover>;
|
|
151
|
+
export declare const PopoverWithTextTrigger: PopoverStory;
|
|
152
|
+
export declare const PopoverWithIconTrigger: PopoverStory;
|
|
153
|
+
export declare const PopoverCalendarHeaderJumpToDay: PopoverStory;
|
|
149
154
|
//# sourceMappingURL=DatePicker.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAgB5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAgJ3D,iBAAS,kBAAkB,gCAsB1B;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAqJzC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6C9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAuDxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KA2CnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA2DtC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsC3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAmDnC,CAAC;AAMF,KAAK,YAAY,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AA2GvD,eAAO,MAAM,sBAAsB,EAAE,YAqCpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,YAyCpC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,YAmD5C,CAAC"}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
3
|
+
import { ArgTypes, Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
4
|
+
import { fn } from 'storybook/test';
|
|
5
|
+
import { format } from 'date-fns';
|
|
6
|
+
import { Button } from '../button/Button.js';
|
|
4
7
|
import { FormField } from '../formField/FormField.js';
|
|
8
|
+
import { Icon } from '../icon/Icon.js';
|
|
5
9
|
import { DatePicker } from './DatePicker.js';
|
|
10
|
+
import { DatePickerPopover } from './DatePickerPopover.js';
|
|
6
11
|
// ---------------------------------------------------------------------------
|
|
7
12
|
// Docs page content
|
|
8
13
|
// ---------------------------------------------------------------------------
|
|
@@ -91,6 +96,43 @@ const DEVELOPER_NOTES = [
|
|
|
91
96
|
'|---|---|',
|
|
92
97
|
'| `DatePicker.Props` | Full props interface |',
|
|
93
98
|
].join('\n');
|
|
99
|
+
const POPOVER_NOTES = [
|
|
100
|
+
'`DatePickerPopover` is the calendar on its own: no date input, no icon button. You supply the',
|
|
101
|
+
'trigger (usually a `Button`) and the component opens the same calendar popover as `DatePicker`.',
|
|
102
|
+
'Use it when the date is shown elsewhere in your UI and you only need a way to pick or jump to a day,',
|
|
103
|
+
'for example a "jump to day" icon in a calendar header. For a form field where the user types or',
|
|
104
|
+
'sees the chosen date, use `DatePicker` instead.',
|
|
105
|
+
'',
|
|
106
|
+
'```tsx',
|
|
107
|
+
"import { Button, DatePickerPopover, Icon } from '@arbor-education/design-system.components';",
|
|
108
|
+
'',
|
|
109
|
+
'<DatePickerPopover',
|
|
110
|
+
' value={date}',
|
|
111
|
+
' onChange={setDate}',
|
|
112
|
+
' trigger={(',
|
|
113
|
+
' <Button variant="tertiary">',
|
|
114
|
+
' <Icon name="date" screenReaderText="Jump to day" />',
|
|
115
|
+
' </Button>',
|
|
116
|
+
' )}',
|
|
117
|
+
'/>',
|
|
118
|
+
'```',
|
|
119
|
+
'',
|
|
120
|
+
'**Give the trigger an accessible name.** `DatePickerPopover` does not add one for you. A text',
|
|
121
|
+
'button is named by its text. An icon-only button needs `screenReaderText` on the `Icon` (or an',
|
|
122
|
+
'`aria-label` on the `Button`), otherwise screen reader users hear an unlabelled button.',
|
|
123
|
+
'',
|
|
124
|
+
'**The trigger must forward its ref and spread props onto a DOM node.** The design system `Button`',
|
|
125
|
+
'does. A custom component that does not will break popover anchoring and focus return to the trigger.',
|
|
126
|
+
'',
|
|
127
|
+
'**You own the value.** `onChange` receives a `Date`; store it and pass it back as `value`. If you',
|
|
128
|
+
'omit `value`, the calendar opens on the current month.',
|
|
129
|
+
'',
|
|
130
|
+
'**Time of day is kept.** Picking a day keeps the hours and minutes of the `value` you passed in.',
|
|
131
|
+
'Picking **Today** does the same.',
|
|
132
|
+
'',
|
|
133
|
+
'**Keyboard and focus.** Focus moves into the calendar when it opens. Selecting a day, choosing',
|
|
134
|
+
'**Today**, or pressing **Escape** closes the calendar and returns focus to your trigger.',
|
|
135
|
+
].join('\n');
|
|
94
136
|
const RELATED_COMPONENTS = [
|
|
95
137
|
'## Related components',
|
|
96
138
|
'',
|
|
@@ -101,7 +143,7 @@ const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tw
|
|
|
101
143
|
// Docs page component
|
|
102
144
|
// ---------------------------------------------------------------------------
|
|
103
145
|
function DatePickerDocsPage() {
|
|
104
|
-
return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
146
|
+
return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "DatePickerPopover" }), _jsx(Markdown, { children: POPOVER_NOTES }), _jsx(ArgTypes, { of: DatePickerPopover }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
105
147
|
}
|
|
106
148
|
// ---------------------------------------------------------------------------
|
|
107
149
|
// Meta
|
|
@@ -619,4 +661,171 @@ export default ParentEveningForm;
|
|
|
619
661
|
'`errorText` on `<FormField>` renders the message in the correct accessible layout below the input,',
|
|
620
662
|
'linked via `aria-describedby` automatically. Once a date is chosen, the error clears.',
|
|
621
663
|
].join(' '));
|
|
664
|
+
const withPopoverDescription = (story, description) => ({
|
|
665
|
+
...story,
|
|
666
|
+
parameters: {
|
|
667
|
+
...story.parameters,
|
|
668
|
+
docs: {
|
|
669
|
+
...story.parameters?.docs,
|
|
670
|
+
description: {
|
|
671
|
+
story: description,
|
|
672
|
+
},
|
|
673
|
+
},
|
|
674
|
+
},
|
|
675
|
+
});
|
|
676
|
+
// Fixed date so the play functions are deterministic (15 June 2025, 14:30)
|
|
677
|
+
const POPOVER_INITIAL_DATE = new Date(2025, 5, 15, 14, 30);
|
|
678
|
+
const formatLongDate = (date) => date.toLocaleDateString('en-GB', {
|
|
679
|
+
weekday: 'long',
|
|
680
|
+
day: 'numeric',
|
|
681
|
+
month: 'long',
|
|
682
|
+
year: 'numeric',
|
|
683
|
+
});
|
|
684
|
+
const PopoverTextTriggerTemplate = ({ onChange }) => {
|
|
685
|
+
const [date, setDate] = useState(POPOVER_INITIAL_DATE);
|
|
686
|
+
const handleChange = (newDate) => {
|
|
687
|
+
setDate(newDate);
|
|
688
|
+
onChange?.(newDate);
|
|
689
|
+
};
|
|
690
|
+
return (_jsxs("div", { children: [_jsx(DatePickerPopover, { value: date, onChange: handleChange, trigger: _jsx(Button, { variant: "secondary", children: "Choose date" }) }), _jsxs("p", { className: "ds-text", children: ["Selected:", ' ', _jsx("code", { children: `${date.toLocaleDateString('en-GB')} ${format(date, 'HH:mm')}` })] })] }));
|
|
691
|
+
};
|
|
692
|
+
const PopoverIconTriggerTemplate = ({ onChange }) => {
|
|
693
|
+
const [date, setDate] = useState(POPOVER_INITIAL_DATE);
|
|
694
|
+
const handleChange = (newDate) => {
|
|
695
|
+
setDate(newDate);
|
|
696
|
+
onChange?.(newDate);
|
|
697
|
+
};
|
|
698
|
+
return (_jsxs("div", { children: [_jsx(DatePickerPopover, { value: date, onChange: handleChange, trigger: (_jsx(Button, { variant: "tertiary", children: _jsx(Icon, { name: "date", screenReaderText: "Choose date" }) })) }), _jsxs("p", { className: "ds-text", children: ["Selected:", ' ', _jsx("code", { children: date.toLocaleDateString('en-GB') })] })] }));
|
|
699
|
+
};
|
|
700
|
+
const PopoverCalendarHeaderTemplate = ({ onChange }) => {
|
|
701
|
+
const [viewedDate, setViewedDate] = useState(POPOVER_INITIAL_DATE);
|
|
702
|
+
const handleChange = (newDate) => {
|
|
703
|
+
setViewedDate(newDate);
|
|
704
|
+
onChange?.(newDate);
|
|
705
|
+
};
|
|
706
|
+
return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--spacing-small)' }, children: [_jsx(DatePickerPopover, { value: viewedDate, onChange: handleChange, trigger: (_jsx(Button, { variant: "tertiary", borderless: true, children: _jsx(Icon, { name: "date", screenReaderText: "Jump to day" }) })) }), _jsx("p", { className: "ds-text", children: _jsx("time", { dateTime: format(viewedDate, 'yyyy-MM-dd'), children: formatLongDate(viewedDate) }) })] }));
|
|
707
|
+
};
|
|
708
|
+
export const PopoverWithTextTrigger = withPopoverDescription({
|
|
709
|
+
args: { onChange: fn() },
|
|
710
|
+
render: args => _jsx(PopoverTextTriggerTemplate, { onChange: args.onChange }),
|
|
711
|
+
parameters: {
|
|
712
|
+
controls: { disable: true },
|
|
713
|
+
docs: {
|
|
714
|
+
source: {
|
|
715
|
+
language: 'tsx',
|
|
716
|
+
code: `
|
|
717
|
+
import { useState } from 'react';
|
|
718
|
+
import { Button, DatePickerPopover } from '@arbor-education/design-system.components';
|
|
719
|
+
|
|
720
|
+
function ChooseDateButton() {
|
|
721
|
+
const [date, setDate] = useState(new Date(2025, 5, 15, 14, 30));
|
|
722
|
+
|
|
723
|
+
return (
|
|
724
|
+
<DatePickerPopover
|
|
725
|
+
value={date}
|
|
726
|
+
onChange={setDate}
|
|
727
|
+
// A text button is named by its text content
|
|
728
|
+
trigger={<Button variant="secondary">Choose date</Button>}
|
|
729
|
+
/>
|
|
730
|
+
);
|
|
731
|
+
}
|
|
732
|
+
export default ChooseDateButton;
|
|
733
|
+
`.trim(),
|
|
734
|
+
},
|
|
735
|
+
},
|
|
736
|
+
},
|
|
737
|
+
}, [
|
|
738
|
+
'The simplest setup: a text `Button` as the trigger, with the date held in your own state.',
|
|
739
|
+
'The calendar opens on the month of `value`. Selecting a day (or **Today**) calls `onChange` with a',
|
|
740
|
+
'`Date`, keeps the time of day from `value`, closes the calendar and returns focus to the button.',
|
|
741
|
+
'The button is named by its text, so no extra accessibility props are needed.',
|
|
742
|
+
].join(' '));
|
|
743
|
+
export const PopoverWithIconTrigger = withPopoverDescription({
|
|
744
|
+
args: { onChange: fn() },
|
|
745
|
+
render: args => _jsx(PopoverIconTriggerTemplate, { onChange: args.onChange }),
|
|
746
|
+
parameters: {
|
|
747
|
+
controls: { disable: true },
|
|
748
|
+
docs: {
|
|
749
|
+
source: {
|
|
750
|
+
language: 'tsx',
|
|
751
|
+
code: `
|
|
752
|
+
import { useState } from 'react';
|
|
753
|
+
import { Button, DatePickerPopover, Icon } from '@arbor-education/design-system.components';
|
|
754
|
+
|
|
755
|
+
function ChooseDateIconButton() {
|
|
756
|
+
const [date, setDate] = useState(new Date(2025, 5, 15, 14, 30));
|
|
757
|
+
|
|
758
|
+
return (
|
|
759
|
+
<DatePickerPopover
|
|
760
|
+
value={date}
|
|
761
|
+
onChange={setDate}
|
|
762
|
+
trigger={(
|
|
763
|
+
<Button variant="tertiary">
|
|
764
|
+
{/* screenReaderText is the button's accessible name */}
|
|
765
|
+
<Icon name="date" screenReaderText="Choose date" />
|
|
766
|
+
</Button>
|
|
767
|
+
)}
|
|
768
|
+
/>
|
|
769
|
+
);
|
|
770
|
+
}
|
|
771
|
+
export default ChooseDateIconButton;
|
|
772
|
+
`.trim(),
|
|
773
|
+
},
|
|
774
|
+
},
|
|
775
|
+
},
|
|
776
|
+
}, [
|
|
777
|
+
'An icon-only trigger. The `Icon` is hidden from assistive technology, so **you must give the button',
|
|
778
|
+
'an accessible name**: use `screenReaderText` on the `Icon` (shown here) or `aria-label` on the `Button`.',
|
|
779
|
+
'Keyboard users can open the calendar with Enter or Space, move between days with the arrow keys,',
|
|
780
|
+
'and press **Escape** to close it without choosing a date. Focus returns to the icon button.',
|
|
781
|
+
].join(' '));
|
|
782
|
+
export const PopoverCalendarHeaderJumpToDay = withPopoverDescription({
|
|
783
|
+
args: { onChange: fn() },
|
|
784
|
+
render: args => _jsx(PopoverCalendarHeaderTemplate, { onChange: args.onChange }),
|
|
785
|
+
parameters: {
|
|
786
|
+
controls: { disable: true },
|
|
787
|
+
docs: {
|
|
788
|
+
source: {
|
|
789
|
+
language: 'tsx',
|
|
790
|
+
code: `
|
|
791
|
+
import { useState } from 'react';
|
|
792
|
+
import { format } from 'date-fns';
|
|
793
|
+
import { Button, DatePickerPopover, Icon } from '@arbor-education/design-system.components';
|
|
794
|
+
|
|
795
|
+
function CalendarHeader() {
|
|
796
|
+
const [viewedDate, setViewedDate] = useState(new Date(2025, 5, 15, 14, 30));
|
|
797
|
+
|
|
798
|
+
return (
|
|
799
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-small)' }}>
|
|
800
|
+
<DatePickerPopover
|
|
801
|
+
value={viewedDate}
|
|
802
|
+
onChange={setViewedDate}
|
|
803
|
+
trigger={(
|
|
804
|
+
<Button variant="tertiary" borderless>
|
|
805
|
+
<Icon name="date" screenReaderText="Jump to day" />
|
|
806
|
+
</Button>
|
|
807
|
+
)}
|
|
808
|
+
/>
|
|
809
|
+
<time dateTime={format(viewedDate, 'yyyy-MM-dd')}>
|
|
810
|
+
{viewedDate.toLocaleDateString('en-GB', {
|
|
811
|
+
weekday: 'long',
|
|
812
|
+
day: 'numeric',
|
|
813
|
+
month: 'long',
|
|
814
|
+
year: 'numeric',
|
|
815
|
+
})}
|
|
816
|
+
</time>
|
|
817
|
+
</div>
|
|
818
|
+
);
|
|
819
|
+
}
|
|
820
|
+
export default CalendarHeader;
|
|
821
|
+
`.trim(),
|
|
822
|
+
},
|
|
823
|
+
},
|
|
824
|
+
},
|
|
825
|
+
}, [
|
|
826
|
+
'The motivating use case: a "jump to day" icon button in a calendar header, with the currently viewed',
|
|
827
|
+
'date shown beside it. The date lives in your state, so the heading updates as soon as a day is picked',
|
|
828
|
+
'and the same value is passed back in as `value` the next time the calendar opens.',
|
|
829
|
+
'There is no date input, so the header stays compact and the selection is communicated by the text next to the button.',
|
|
830
|
+
].join(' '));
|
|
622
831
|
//# sourceMappingURL=DatePicker.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ReactElement } from 'react';
|
|
2
|
+
export type DatePickerPopoverProps = {
|
|
3
|
+
trigger: ReactElement;
|
|
4
|
+
value?: Date;
|
|
5
|
+
onChange?: (newDate: Date) => void;
|
|
6
|
+
};
|
|
7
|
+
export declare const DatePickerPopover: (props: DatePickerPopoverProps) => import("react").JSX.Element;
|
|
8
|
+
export declare namespace DatePickerPopover {
|
|
9
|
+
type Props = DatePickerPopoverProps;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=DatePickerPopover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerPopover.d.ts","sourceRoot":"","sources":["../../../src/components/datePicker/DatePickerPopover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAQhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,gCAoD9D,CAAC;AAEF,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,KAAK,GAAG,sBAAsB,CAAC;CAC5C"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Popover } from 'radix-ui';
|
|
3
|
+
import { useContext, useState } from 'react';
|
|
4
|
+
import { PopupParentContext } from '../../utils/popupParent/PopupParentContext.js';
|
|
5
|
+
import { formatTimeInputValue, mergeDateAndTime } from './dateInputUtils.js';
|
|
6
|
+
import { DatePickerCalendar } from './DatePickerCalendar.js';
|
|
7
|
+
import { DatePickerCalendarHeader } from './DatePickerCalendarHeader.js';
|
|
8
|
+
const TIME_PRESERVATION_GRANULARITY = 'minute';
|
|
9
|
+
export const DatePickerPopover = (props) => {
|
|
10
|
+
const { trigger, value, onChange } = props;
|
|
11
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
12
|
+
const [month, setMonth] = useState(value ?? new Date());
|
|
13
|
+
const popupParentRef = useContext(PopupParentContext);
|
|
14
|
+
const handleOpenChange = (open) => {
|
|
15
|
+
if (open) {
|
|
16
|
+
setMonth(value ?? new Date());
|
|
17
|
+
}
|
|
18
|
+
setIsOpen(open);
|
|
19
|
+
};
|
|
20
|
+
const selectDay = (day) => {
|
|
21
|
+
const timeSource = value ?? day;
|
|
22
|
+
onChange?.(mergeDateAndTime(day, formatTimeInputValue(timeSource, TIME_PRESERVATION_GRANULARITY), TIME_PRESERVATION_GRANULARITY));
|
|
23
|
+
setIsOpen(false);
|
|
24
|
+
};
|
|
25
|
+
const onDayPickerSelect = (day) => {
|
|
26
|
+
const selectedDay = day ?? value;
|
|
27
|
+
if (selectedDay) {
|
|
28
|
+
selectDay(selectedDay);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
return (_jsxs(Popover.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [_jsx(Popover.Trigger, { asChild: true, children: trigger }), _jsx(Popover.Portal, { container: popupParentRef.current, children: _jsx(Popover.Content, { align: "end", sideOffset: 5, onOpenAutoFocus: e => e.preventDefault(), children: _jsxs("div", { className: "ds-date-picker__popup", children: [_jsx(DatePickerCalendarHeader, { month: month, onMonthChange: setMonth }), _jsx(DatePickerCalendar, { month: month, setMonth: setMonth, selectedDate: value, onDayPickerSelect: onDayPickerSelect, handleTodayClick: () => selectDay(new Date()) })] }) }) })] }));
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=DatePickerPopover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerPopover.js","sourceRoot":"","sources":["../../../src/components/datePicker/DatePickerPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEzE,MAAM,6BAA6B,GAAG,QAAiB,CAAC;AAQxD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEtD,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAE,EAAE;QACzC,IAAI,IAAI,EAAE,CAAC;YACT,QAAQ,CAAC,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;QAChC,CAAC;QACD,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,GAAS,EAAE,EAAE;QAC9B,MAAM,UAAU,GAAG,KAAK,IAAI,GAAG,CAAC;QAChC,QAAQ,EAAE,CACR,gBAAgB,CACd,GAAG,EACH,oBAAoB,CAAC,UAAU,EAAE,6BAA6B,CAAC,EAC/D,6BAA6B,CAC9B,CACF,CAAC;QACF,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,GAAU,EAAE,EAAE;QACvC,MAAM,WAAW,GAAG,GAAG,IAAI,KAAK,CAAC;QACjC,IAAI,WAAW,EAAE,CAAC;YAChB,SAAS,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,aACxD,KAAC,OAAO,CAAC,OAAO,IAAC,OAAO,kBAAE,OAAO,GAAmB,EACpD,KAAC,OAAO,CAAC,MAAM,IAAC,SAAS,EAAE,cAAc,CAAC,OAAO,YAC/C,KAAC,OAAO,CAAC,OAAO,IAAC,KAAK,EAAC,KAAK,EAAC,UAAU,EAAE,CAAC,EAAE,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,YAClF,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,wBAAwB,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAI,EACnE,KAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,KAAK,EACnB,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC,GAC7C,IACE,GACU,GACH,IACJ,CAChB,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerPopover.test.d.ts","sourceRoot":"","sources":["../../../src/components/datePicker/DatePickerPopover.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, test, vi } from 'vitest';
|
|
3
|
+
import { render, screen, within } from '@testing-library/react';
|
|
4
|
+
import userEvent from '@testing-library/user-event';
|
|
5
|
+
import '@testing-library/jest-dom/vitest';
|
|
6
|
+
import { Button } from '../button/Button.js';
|
|
7
|
+
import { DatePickerPopover } from './DatePickerPopover.js';
|
|
8
|
+
const renderPopover = (props = {}) => render(_jsx(DatePickerPopover, { trigger: _jsx(Button, { children: "Jump to date" }), value: new Date(2025, 5, 15, 14, 30), ...props }));
|
|
9
|
+
const openCalendar = () => userEvent.click(screen.getByRole('button', { name: 'Jump to date' }));
|
|
10
|
+
describe('DatePickerPopover', () => {
|
|
11
|
+
test('renders the consumer trigger and no date input', () => {
|
|
12
|
+
const { container } = renderPopover();
|
|
13
|
+
expect(screen.getByRole('button', { name: 'Jump to date' })).toBeInTheDocument();
|
|
14
|
+
expect(container.querySelector('input')).not.toBeInTheDocument();
|
|
15
|
+
});
|
|
16
|
+
test('calendar is hidden until the trigger is activated', async () => {
|
|
17
|
+
renderPopover();
|
|
18
|
+
expect(screen.queryByRole('application')).not.toBeInTheDocument();
|
|
19
|
+
await openCalendar();
|
|
20
|
+
expect(screen.getByRole('application')).toBeInTheDocument();
|
|
21
|
+
});
|
|
22
|
+
test('opens on the month of the supplied value', async () => {
|
|
23
|
+
renderPopover();
|
|
24
|
+
await openCalendar();
|
|
25
|
+
expect(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ })).toBeInTheDocument();
|
|
26
|
+
});
|
|
27
|
+
test('selecting a day calls onChange with a Date and closes the calendar', async () => {
|
|
28
|
+
const onChange = vi.fn();
|
|
29
|
+
renderPopover({ onChange });
|
|
30
|
+
await openCalendar();
|
|
31
|
+
await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
|
|
32
|
+
expect(onChange).toHaveBeenCalledTimes(1);
|
|
33
|
+
const selected = onChange.mock.lastCall?.[0];
|
|
34
|
+
expect(selected).toBeInstanceOf(Date);
|
|
35
|
+
expect([selected.getFullYear(), selected.getMonth(), selected.getDate()]).toEqual([2025, 5, 20]);
|
|
36
|
+
expect(screen.queryByRole('application')).not.toBeInTheDocument();
|
|
37
|
+
});
|
|
38
|
+
test('selecting a day preserves the time of the supplied value', async () => {
|
|
39
|
+
const onChange = vi.fn();
|
|
40
|
+
renderPopover({ onChange });
|
|
41
|
+
await openCalendar();
|
|
42
|
+
await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
|
|
43
|
+
const selected = onChange.mock.lastCall?.[0];
|
|
44
|
+
expect([selected.getHours(), selected.getMinutes()]).toEqual([14, 30]);
|
|
45
|
+
});
|
|
46
|
+
test('clicking the already selected day still calls onChange and closes the calendar', async () => {
|
|
47
|
+
const onChange = vi.fn();
|
|
48
|
+
renderPopover({ onChange });
|
|
49
|
+
await openCalendar();
|
|
50
|
+
await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 15/ }));
|
|
51
|
+
expect(onChange).toHaveBeenCalledTimes(1);
|
|
52
|
+
expect(onChange.mock.lastCall?.[0]).toBeInstanceOf(Date);
|
|
53
|
+
expect(screen.queryByRole('application')).not.toBeInTheDocument();
|
|
54
|
+
});
|
|
55
|
+
test('clicking Today calls onChange with today and closes the calendar', async () => {
|
|
56
|
+
const onChange = vi.fn();
|
|
57
|
+
renderPopover({ onChange });
|
|
58
|
+
await openCalendar();
|
|
59
|
+
await userEvent.click(screen.getByRole('button', { name: 'Today' }));
|
|
60
|
+
const today = new Date();
|
|
61
|
+
const selected = onChange.mock.lastCall?.[0];
|
|
62
|
+
expect([selected.getFullYear(), selected.getMonth(), selected.getDate()])
|
|
63
|
+
.toEqual([today.getFullYear(), today.getMonth(), today.getDate()]);
|
|
64
|
+
expect(screen.queryByRole('application')).not.toBeInTheDocument();
|
|
65
|
+
});
|
|
66
|
+
test('works without a value, opening on the current month', async () => {
|
|
67
|
+
const onChange = vi.fn();
|
|
68
|
+
renderPopover({ value: undefined, onChange });
|
|
69
|
+
await openCalendar();
|
|
70
|
+
await userEvent.click(screen.getByRole('button', { name: 'Today' }));
|
|
71
|
+
expect(onChange).toHaveBeenCalledWith(expect.any(Date));
|
|
72
|
+
});
|
|
73
|
+
test('focus moves into the calendar on open', async () => {
|
|
74
|
+
renderPopover();
|
|
75
|
+
await openCalendar();
|
|
76
|
+
expect(screen.getByRole('application')).toContainElement(document.activeElement);
|
|
77
|
+
});
|
|
78
|
+
test('Escape closes the calendar and returns focus to the trigger', async () => {
|
|
79
|
+
renderPopover();
|
|
80
|
+
await openCalendar();
|
|
81
|
+
await userEvent.keyboard('{Escape}');
|
|
82
|
+
expect(screen.queryByRole('application')).not.toBeInTheDocument();
|
|
83
|
+
expect(screen.getByRole('button', { name: 'Jump to date' })).toHaveFocus();
|
|
84
|
+
});
|
|
85
|
+
test('selecting a day returns focus to the trigger', async () => {
|
|
86
|
+
renderPopover();
|
|
87
|
+
await openCalendar();
|
|
88
|
+
await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
|
|
89
|
+
expect(screen.getByRole('button', { name: 'Jump to date' })).toHaveFocus();
|
|
90
|
+
});
|
|
91
|
+
test('reopening shows the month of the latest value after the user browsed away', async () => {
|
|
92
|
+
const { rerender } = renderPopover();
|
|
93
|
+
await openCalendar();
|
|
94
|
+
await userEvent.click(screen.getByRole('button', { name: 'Go to the Next Month' }));
|
|
95
|
+
await userEvent.keyboard('{Escape}');
|
|
96
|
+
rerender(_jsx(DatePickerPopover, { trigger: _jsx(Button, { children: "Jump to date" }), value: new Date(2025, 8, 3) }));
|
|
97
|
+
await openCalendar();
|
|
98
|
+
expect(within(screen.getByRole('application')).getByRole('button', { name: /September 10/ })).toBeInTheDocument();
|
|
99
|
+
});
|
|
100
|
+
});
|
|
101
|
+
//# sourceMappingURL=DatePickerPopover.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerPopover.test.js","sourceRoot":"","sources":["../../../src/components/datePicker/DatePickerPopover.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import type { IconName } from '../icon/allowedIcons.js';
|
|
2
|
-
import { type ReactNode } from 'react';
|
|
2
|
+
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
3
3
|
export type SlideoverProps = {
|
|
4
4
|
title?: string;
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
footerContents?: ReactNode;
|
|
7
7
|
headerIcon?: IconName;
|
|
8
|
+
headerActions?: ReactNode;
|
|
8
9
|
centerHeaderText?: boolean;
|
|
9
10
|
hideBackButton?: boolean;
|
|
10
|
-
|
|
11
|
+
backButtonText?: string;
|
|
12
|
+
onBack?: () => void;
|
|
13
|
+
isClosing?: boolean;
|
|
14
|
+
onCloseTransitionEnd?: () => void;
|
|
15
|
+
} & Omit<HTMLAttributes<HTMLElement>, 'title' | 'children' | 'className' | 'onTransitionEnd'>;
|
|
11
16
|
export declare const Slideover: (props: SlideoverProps) => import("react").JSX.Element;
|
|
12
17
|
export declare namespace Slideover {
|
|
13
18
|
type Props = SlideoverProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slideover.d.ts","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,
|
|
1
|
+
{"version":3,"file":"Slideover.d.ts","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAA+B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAO/G,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,iBAAiB,CAAC,CAAC;AAE9F,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAkF9C,CAAC;AAEF,yBAAiB,SAAS,CAAC;IACzB,KAAY,KAAK,GAAG,cAAc,CAAC;CACpC"}
|
|
@@ -3,17 +3,44 @@ import classNames from 'classnames';
|
|
|
3
3
|
import { Button } from '../button/Button.js';
|
|
4
4
|
import { Heading } from '../heading/Heading.js';
|
|
5
5
|
import { Icon } from '../icon/Icon.js';
|
|
6
|
-
import { useState } from 'react';
|
|
6
|
+
import { useEffect, useRef, useState } from 'react';
|
|
7
7
|
import { useComponentDidMount } from '../../utils/hooks/useComponentDidMount.js';
|
|
8
8
|
import { SlideoverUtils } from '../../utils/SlideoverUtils.js';
|
|
9
|
+
// just over the 300ms transition in slideover.scss
|
|
10
|
+
const CLOSE_TRANSITION_FALLBACK_MS = 400;
|
|
9
11
|
export const Slideover = (props) => {
|
|
10
|
-
const { title, children, footerContents, headerIcon, centerHeaderText = true, hideBackButton, } = props;
|
|
12
|
+
const { title, children, footerContents, headerIcon, headerActions, centerHeaderText = true, hideBackButton, backButtonText = 'Back', onBack = SlideoverUtils.removeSlideover, isClosing = false, onCloseTransitionEnd, ...rest } = props;
|
|
11
13
|
const [isFirstRender, setIsFirstRender] = useState(true);
|
|
12
14
|
useComponentDidMount(() => {
|
|
13
15
|
setIsFirstRender(false);
|
|
14
16
|
});
|
|
15
|
-
|
|
17
|
+
const hasFinishedClosingRef = useRef(false);
|
|
18
|
+
const onCloseTransitionEndRef = useRef(onCloseTransitionEnd);
|
|
19
|
+
onCloseTransitionEndRef.current = onCloseTransitionEnd;
|
|
20
|
+
const finishClosing = () => {
|
|
21
|
+
if (hasFinishedClosingRef.current) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
hasFinishedClosingRef.current = true;
|
|
25
|
+
onCloseTransitionEndRef.current?.();
|
|
26
|
+
};
|
|
27
|
+
// transitionend does not fire if the slide-out never runs, so also finish on a timer
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (!isClosing) {
|
|
30
|
+
hasFinishedClosingRef.current = false;
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
const timeout = setTimeout(finishClosing, CLOSE_TRANSITION_FALLBACK_MS);
|
|
34
|
+
return () => clearTimeout(timeout);
|
|
35
|
+
}, [isClosing]);
|
|
36
|
+
const handleTransitionEnd = (event) => {
|
|
37
|
+
if (isClosing && event.target === event.currentTarget && event.propertyName === 'right') {
|
|
38
|
+
finishClosing();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
return (_jsxs("aside", { ...rest, className: classNames('ds-slideover', {
|
|
16
42
|
'ds-slideover--initial': isFirstRender,
|
|
17
|
-
|
|
43
|
+
'ds-slideover--closing': isClosing,
|
|
44
|
+
}), onTransitionEnd: handleTransitionEnd, children: [_jsxs("div", { className: classNames('ds-slideover__header', { 'ds-slideover__header--center': centerHeaderText }), children: [!hideBackButton && (_jsxs(Button, { variant: "tertiary", onClick: () => onBack(), children: [_jsx(Icon, { name: "chevrons-left" }), backButtonText] })), _jsxs(Heading, { level: 2, children: [title, headerIcon && _jsx(Icon, { name: headerIcon })] }), headerActions && _jsx("div", { className: "ds-slideover__header-actions", children: headerActions })] }), _jsx("div", { className: "ds-slideover__contents", children: children }), footerContents && _jsx("div", { className: "ds-slideover__footer", children: footerContents })] }));
|
|
18
45
|
};
|
|
19
46
|
//# sourceMappingURL=Slideover.js.map
|