@cloudscape-design/components 3.0.107 → 3.0.109

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.
Files changed (33) hide show
  1. package/date-range-picker/calendar/header/header-button.d.ts +9 -0
  2. package/date-range-picker/calendar/header/header-button.d.ts.map +1 -0
  3. package/date-range-picker/calendar/header/header-button.js +15 -0
  4. package/date-range-picker/calendar/header/header-button.js.map +1 -0
  5. package/date-range-picker/calendar/header/index.d.ts +1 -1
  6. package/date-range-picker/calendar/header/index.d.ts.map +1 -1
  7. package/date-range-picker/calendar/header/index.js +3 -3
  8. package/date-range-picker/calendar/header/index.js.map +1 -1
  9. package/date-range-picker/calendar/index.d.ts +2 -4
  10. package/date-range-picker/calendar/index.d.ts.map +1 -1
  11. package/date-range-picker/calendar/index.js +53 -70
  12. package/date-range-picker/calendar/index.js.map +1 -1
  13. package/date-range-picker/calendar/use-date-time.d.ts +9 -0
  14. package/date-range-picker/calendar/use-date-time.d.ts.map +1 -0
  15. package/date-range-picker/calendar/use-date-time.js +16 -0
  16. package/date-range-picker/calendar/use-date-time.js.map +1 -0
  17. package/date-range-picker/dropdown.d.ts.map +1 -1
  18. package/date-range-picker/dropdown.js +4 -9
  19. package/date-range-picker/dropdown.js.map +1 -1
  20. package/date-range-picker/mode-switcher.d.ts +3 -4
  21. package/date-range-picker/mode-switcher.d.ts.map +1 -1
  22. package/date-range-picker/mode-switcher.js +6 -23
  23. package/date-range-picker/mode-switcher.js.map +1 -1
  24. package/date-range-picker/relative-range/index.d.ts +2 -4
  25. package/date-range-picker/relative-range/index.d.ts.map +1 -1
  26. package/date-range-picker/relative-range/index.js +3 -13
  27. package/date-range-picker/relative-range/index.js.map +1 -1
  28. package/internal/environment.js +1 -1
  29. package/package.json +1 -1
  30. package/date-range-picker/calendar/header/button/index.d.ts +0 -8
  31. package/date-range-picker/calendar/header/button/index.d.ts.map +0 -1
  32. package/date-range-picker/calendar/header/button/index.js +0 -17
  33. package/date-range-picker/calendar/header/button/index.js.map +0 -1
@@ -0,0 +1,9 @@
1
+ interface HeaderButtonProps {
2
+ ariaLabel: string;
3
+ baseDate: Date;
4
+ onChangeMonth: (date: Date) => void;
5
+ }
6
+ export declare function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps): JSX.Element;
7
+ export declare function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps): JSX.Element;
8
+ export {};
9
+ //# sourceMappingURL=header-button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,iBAAiB,eAWxF;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,iBAAiB,eAWxF"}
@@ -0,0 +1,15 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import { addMonths } from 'date-fns';
4
+ import React from 'react';
5
+ import { InternalButton } from '../../../button/internal';
6
+ import styles from '../../styles.css.js';
7
+ export function PrevMonthButton(_a) {
8
+ var ariaLabel = _a.ariaLabel, baseDate = _a.baseDate, onChangeMonth = _a.onChangeMonth;
9
+ return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: 'icon', onClick: function () { return onChangeMonth(addMonths(baseDate, -1)); }, formAction: "none", className: styles['calendar-prev-month-btn'] }));
10
+ }
11
+ export function NextMonthButton(_a) {
12
+ var ariaLabel = _a.ariaLabel, baseDate = _a.baseDate, onChangeMonth = _a.onChangeMonth;
13
+ return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: 'icon', onClick: function () { return onChangeMonth(addMonths(baseDate, 1)); }, formAction: "none", className: styles['calendar-next-month-btn'] }));
14
+ }
15
+ //# sourceMappingURL=header-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"header-button.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAQzC,MAAM,UAAU,eAAe,CAAC,EAAyD;QAAvD,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,aAAa,mBAAA;IAClE,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAtC,CAAsC,EACrD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,GAC5C,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAyD;QAAvD,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,aAAa,mBAAA;IAClE,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAArC,CAAqC,EACpD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,GAC5C,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { addMonths } from 'date-fns';\nimport React from 'react';\nimport { InternalButton } from '../../../button/internal';\nimport styles from '../../styles.css.js';\n\ninterface HeaderButtonProps {\n ariaLabel: string;\n baseDate: Date;\n onChangeMonth: (date: Date) => void;\n}\n\nexport function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n return (\n <InternalButton\n iconName=\"angle-left\"\n ariaLabel={ariaLabel}\n variant={'icon'}\n onClick={() => onChangeMonth(addMonths(baseDate, -1))}\n formAction=\"none\"\n className={styles['calendar-prev-month-btn']}\n />\n );\n}\n\nexport function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n return (\n <InternalButton\n iconName=\"angle-right\"\n ariaLabel={ariaLabel}\n variant={'icon'}\n onClick={() => onChangeMonth(addMonths(baseDate, 1))}\n formAction=\"none\"\n className={styles['calendar-next-month-btn']}\n />\n );\n}\n"]}
@@ -1,7 +1,7 @@
1
1
  interface CalendarHeaderProps {
2
2
  baseDate: Date;
3
3
  locale: string;
4
- onChangeMonth: (prev?: boolean) => void;
4
+ onChangeMonth: (date: Date) => void;
5
5
  previousMonthLabel: string;
6
6
  nextMonthLabel: string;
7
7
  isSingleGrid: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AASA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,eAAe,GAChB,EAAE,mBAAmB,eAuBrB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AASA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,eAAe,GAChB,EAAE,mBAAmB,eAuBrB"}
@@ -4,7 +4,7 @@ import { add } from 'date-fns';
4
4
  import React from 'react';
5
5
  import styles from '../../styles.css.js';
6
6
  import { renderMonthAndYear } from '../../../calendar/utils/intl';
7
- import HeaderButton from './button';
7
+ import { PrevMonthButton, NextMonthButton } from './header-button';
8
8
  import LiveRegion from '../../../internal/components/live-region';
9
9
  export default function CalendarHeader(_a) {
10
10
  var baseDate = _a.baseDate, locale = _a.locale, onChangeMonth = _a.onChangeMonth, previousMonthLabel = _a.previousMonthLabel, nextMonthLabel = _a.nextMonthLabel, isSingleGrid = _a.isSingleGrid, headingIdPrefix = _a.headingIdPrefix;
@@ -12,11 +12,11 @@ export default function CalendarHeader(_a) {
12
12
  var currentMonthLabel = renderMonthAndYear(locale, baseDate);
13
13
  return (React.createElement(React.Fragment, null,
14
14
  React.createElement("div", { className: styles['calendar-header'] },
15
- React.createElement(HeaderButton, { ariaLabel: previousMonthLabel, isPrevious: true, onChangeMonth: onChangeMonth }),
15
+ React.createElement(PrevMonthButton, { ariaLabel: previousMonthLabel, baseDate: baseDate, onChangeMonth: onChangeMonth }),
16
16
  React.createElement("h2", { className: styles['calendar-header-months-wrapper'] },
17
17
  !isSingleGrid && (React.createElement("span", { className: styles['calendar-header-month'], id: "".concat(headingIdPrefix, "-prevmonth") }, prevMonthLabel)),
18
18
  React.createElement("span", { className: styles['calendar-header-month'], id: "".concat(headingIdPrefix, "-currentmonth") }, currentMonthLabel)),
19
- React.createElement(HeaderButton, { ariaLabel: nextMonthLabel, isPrevious: false, onChangeMonth: onChangeMonth })),
19
+ React.createElement(NextMonthButton, { ariaLabel: nextMonthLabel, baseDate: baseDate, onChangeMonth: onChangeMonth })),
20
20
  React.createElement(LiveRegion, null, isSingleGrid ? currentMonthLabel : "".concat(prevMonthLabel, ", ").concat(currentMonthLabel))));
21
21
  }
22
22
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,YAAY,MAAM,UAAU,CAAC;AACpC,OAAO,UAAU,MAAM,0CAA0C,CAAC;AAYlE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAQjB;QAPpB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,kBAAkB,wBAAA,EAClB,cAAc,oBAAA,EACd,YAAY,kBAAA,EACZ,eAAe,qBAAA;IAEf,IAAM,cAAc,GAAG,kBAAkB,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjF,IAAM,iBAAiB,GAAG,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAE/D,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,YAAY,IAAC,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,GAAI;YAC/F,4BAAI,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC;gBACpD,CAAC,YAAY,IAAI,CAChB,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,UAAG,eAAe,eAAY,IACjF,cAAc,CACV,CACR;gBACD,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,UAAG,eAAe,kBAAe,IACpF,iBAAiB,CACb,CACJ;YACL,oBAAC,YAAY,IAAC,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CACxF;QACN,oBAAC,UAAU,QAAE,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAG,cAAc,eAAK,iBAAiB,CAAE,CAAc,CACtG,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { add } from 'date-fns';\nimport React from 'react';\nimport styles from '../../styles.css.js';\nimport { renderMonthAndYear } from '../../../calendar/utils/intl';\nimport HeaderButton from './button';\nimport LiveRegion from '../../../internal/components/live-region';\n\ninterface CalendarHeaderProps {\n baseDate: Date;\n locale: string;\n onChangeMonth: (prev?: boolean) => void;\n previousMonthLabel: string;\n nextMonthLabel: string;\n isSingleGrid: boolean;\n headingIdPrefix: string;\n}\n\nexport default function CalendarHeader({\n baseDate,\n locale,\n onChangeMonth,\n previousMonthLabel,\n nextMonthLabel,\n isSingleGrid,\n headingIdPrefix,\n}: CalendarHeaderProps) {\n const prevMonthLabel = renderMonthAndYear(locale, add(baseDate, { months: -1 }));\n const currentMonthLabel = renderMonthAndYear(locale, baseDate);\n\n return (\n <>\n <div className={styles['calendar-header']}>\n <HeaderButton ariaLabel={previousMonthLabel} isPrevious={true} onChangeMonth={onChangeMonth} />\n <h2 className={styles['calendar-header-months-wrapper']}>\n {!isSingleGrid && (\n <span className={styles['calendar-header-month']} id={`${headingIdPrefix}-prevmonth`}>\n {prevMonthLabel}\n </span>\n )}\n <span className={styles['calendar-header-month']} id={`${headingIdPrefix}-currentmonth`}>\n {currentMonthLabel}\n </span>\n </h2>\n <HeaderButton ariaLabel={nextMonthLabel} isPrevious={false} onChangeMonth={onChangeMonth} />\n </div>\n <LiveRegion>{isSingleGrid ? currentMonthLabel : `${prevMonthLabel}, ${currentMonthLabel}`}</LiveRegion>\n </>\n );\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,UAAU,MAAM,0CAA0C,CAAC;AAYlE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAQjB;QAPpB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,kBAAkB,wBAAA,EAClB,cAAc,oBAAA,EACd,YAAY,kBAAA,EACZ,eAAe,qBAAA;IAEf,IAAM,cAAc,GAAG,kBAAkB,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjF,IAAM,iBAAiB,GAAG,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAE/D,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,eAAe,IAAC,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,GAAI;YACpG,4BAAI,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC;gBACpD,CAAC,YAAY,IAAI,CAChB,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,UAAG,eAAe,eAAY,IACjF,cAAc,CACV,CACR;gBACD,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,UAAG,eAAe,kBAAe,IACpF,iBAAiB,CACb,CACJ;YACL,oBAAC,eAAe,IAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,GAAI,CAC5F;QACN,oBAAC,UAAU,QAAE,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAG,cAAc,eAAK,iBAAiB,CAAE,CAAc,CACtG,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { add } from 'date-fns';\nimport React from 'react';\nimport styles from '../../styles.css.js';\nimport { renderMonthAndYear } from '../../../calendar/utils/intl';\nimport { PrevMonthButton, NextMonthButton } from './header-button';\nimport LiveRegion from '../../../internal/components/live-region';\n\ninterface CalendarHeaderProps {\n baseDate: Date;\n locale: string;\n onChangeMonth: (date: Date) => void;\n previousMonthLabel: string;\n nextMonthLabel: string;\n isSingleGrid: boolean;\n headingIdPrefix: string;\n}\n\nexport default function CalendarHeader({\n baseDate,\n locale,\n onChangeMonth,\n previousMonthLabel,\n nextMonthLabel,\n isSingleGrid,\n headingIdPrefix,\n}: CalendarHeaderProps) {\n const prevMonthLabel = renderMonthAndYear(locale, add(baseDate, { months: -1 }));\n const currentMonthLabel = renderMonthAndYear(locale, baseDate);\n\n return (\n <>\n <div className={styles['calendar-header']}>\n <PrevMonthButton ariaLabel={previousMonthLabel} baseDate={baseDate} onChangeMonth={onChangeMonth} />\n <h2 className={styles['calendar-header-months-wrapper']}>\n {!isSingleGrid && (\n <span className={styles['calendar-header-month']} id={`${headingIdPrefix}-prevmonth`}>\n {prevMonthLabel}\n </span>\n )}\n <span className={styles['calendar-header-month']} id={`${headingIdPrefix}-currentmonth`}>\n {currentMonthLabel}\n </span>\n </h2>\n <NextMonthButton ariaLabel={nextMonthLabel} baseDate={baseDate} onChangeMonth={onChangeMonth} />\n </div>\n <LiveRegion>{isSingleGrid ? currentMonthLabel : `${prevMonthLabel}, ${currentMonthLabel}`}</LiveRegion>\n </>\n );\n}\n"]}
@@ -1,6 +1,5 @@
1
- import React from 'react';
2
1
  import { BaseComponentProps } from '../../internal/base-component';
3
- import { Focusable, RangeCalendarI18nStrings, RangeCalendarValue } from '../interfaces';
2
+ import { RangeCalendarI18nStrings, RangeCalendarValue } from '../interfaces';
4
3
  import { TimeInputProps } from '../../time-input/interfaces';
5
4
  export interface DateRangePickerCalendarProps extends BaseComponentProps {
6
5
  value: null | RangeCalendarValue;
@@ -12,6 +11,5 @@ export interface DateRangePickerCalendarProps extends BaseComponentProps {
12
11
  dateOnly?: boolean;
13
12
  timeInputFormat?: TimeInputProps.Format;
14
13
  }
15
- declare const _default: React.ForwardRefExoticComponent<DateRangePickerCalendarProps & React.RefAttributes<Focusable>>;
16
- export default _default;
14
+ export default function DateRangePickerCalendar({ value, onChange, locale, startOfWeek, isDateEnabled, i18nStrings, dateOnly, timeInputFormat, }: DateRangePickerCalendarProps): JSX.Element;
17
15
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAG5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAW7D,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,KAAK,EAAE,IAAI,GAAG,kBAAkB,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,WAAW,EAAE,wBAAwB,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;CACzC;;AAED,wBAAmD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAY7D,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,KAAK,EAAE,IAAI,GAAG,kBAAkB,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,WAAW,EAAE,wBAAwB,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,KAAK,EACL,QAAQ,EACR,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,WAAW,EACX,QAAgB,EAChB,eAA4B,GAC7B,EAAE,4BAA4B,eA4O9B"}
@@ -1,6 +1,6 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
3
+ import React, { useEffect, useState } from 'react';
4
4
  import { addMonths, endOfDay, isBefore, startOfDay, startOfMonth, isAfter, isSameMonth } from 'date-fns';
5
5
  import styles from '../styles.css.js';
6
6
  import CalendarHeader from './header';
@@ -10,70 +10,63 @@ import { useUniqueId } from '../../internal/hooks/use-unique-id';
10
10
  import { getDateLabel, renderTimeLabel } from '../../calendar/utils/intl';
11
11
  import LiveRegion from '../../internal/components/live-region';
12
12
  import { normalizeLocale, normalizeStartOfWeek } from '../../internal/utils/locale';
13
- import { formatDate, formatTime, joinDateTime, parseDate } from '../../internal/utils/date-time';
13
+ import { joinDateTime, parseDate } from '../../internal/utils/date-time';
14
14
  import { getBaseDate } from '../../calendar/utils/navigation';
15
15
  import { useMobile } from '../../internal/hooks/use-mobile/index.js';
16
16
  import RangeInputs from './range-inputs.js';
17
- export default forwardRef(DateRangePickerCalendar);
18
- function DateRangePickerCalendar(_a, ref) {
17
+ import { useDateTime } from './use-date-time.js';
18
+ export default function DateRangePickerCalendar(_a) {
19
19
  var _b, _c;
20
20
  var _d, _e;
21
21
  var value = _a.value, onChange = _a.onChange, _f = _a.locale, locale = _f === void 0 ? '' : _f, startOfWeek = _a.startOfWeek, _g = _a.isDateEnabled, isDateEnabled = _g === void 0 ? function () { return true; } : _g, i18nStrings = _a.i18nStrings, _h = _a.dateOnly, dateOnly = _h === void 0 ? false : _h, _j = _a.timeInputFormat, timeInputFormat = _j === void 0 ? 'hh:mm:ss' : _j;
22
- var elementRef = useRef(null);
23
22
  var isSingleGrid = useMobile();
24
23
  var normalizedLocale = normalizeLocale('DateRangePicker', locale);
25
24
  var normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);
26
- useImperativeHandle(ref, function () { return ({
27
- focus: function () {
28
- if (elementRef.current) {
29
- var prevButton = elementRef.current.getElementsByClassName(styles['calendar-prev-month-btn'])[0];
30
- prevButton === null || prevButton === void 0 ? void 0 : prevButton.focus();
31
- }
32
- }
33
- }); });
34
25
  var initialStartDate = (_d = value === null || value === void 0 ? void 0 : value.startDate) !== null && _d !== void 0 ? _d : '';
26
+ var rangeStart = useDateTime(initialStartDate);
35
27
  var initialEndDate = (_e = value === null || value === void 0 ? void 0 : value.endDate) !== null && _e !== void 0 ? _e : '';
36
- var _k = initialStartDate.split('T'), _l = _k[0], initialStartDateString = _l === void 0 ? '' : _l, _m = _k[1], initialStartTimeString = _m === void 0 ? '' : _m;
37
- var _o = initialEndDate.split('T'), _p = _o[0], initialEndDateString = _p === void 0 ? '' : _p, _q = _o[1], initialEndTimeString = _q === void 0 ? '' : _q;
38
- var _r = useState(initialStartDateString), startDateString = _r[0], setStartDateString = _r[1];
39
- var _s = useState(initialStartTimeString), startTimeString = _s[0], setStartTimeString = _s[1];
40
- var _t = useState(initialEndDateString), endDateString = _t[0], setEndDateString = _t[1];
41
- var _u = useState(initialEndTimeString), endTimeString = _u[0], setEndTimeString = _u[1];
42
- var selectedStartDate = parseDate(startDateString, true);
43
- var selectedEndDate = parseDate(endDateString, true);
44
- var _v = useState(''), announcement = _v[0], setAnnouncement = _v[1];
45
- var _w = useState(function () {
46
- if (startDateString) {
47
- var startDate = parseDate(startDateString);
28
+ var rangeEnd = useDateTime(initialEndDate);
29
+ var _k = useState(''), announcement = _k[0], setAnnouncement = _k[1];
30
+ var _l = useState(function () {
31
+ if (rangeStart.dateString) {
32
+ var startDate = parseDate(rangeStart.dateString);
48
33
  if (isSingleGrid) {
49
34
  return startOfMonth(startDate);
50
35
  }
51
36
  return startOfMonth(addMonths(startDate, 1));
52
37
  }
53
- if (endDateString) {
54
- return startOfMonth(parseDate(endDateString));
38
+ if (rangeEnd.dateString) {
39
+ return startOfMonth(parseDate(rangeEnd.dateString));
55
40
  }
56
41
  return startOfMonth(Date.now());
57
- }), currentMonth = _w[0], setCurrentMonth = _w[1];
58
- var _x = useState(function () {
59
- if (selectedStartDate) {
60
- if (isSameMonth(selectedStartDate, currentMonth)) {
61
- return selectedStartDate;
42
+ }), currentMonth = _l[0], setCurrentMonth = _l[1];
43
+ var _m = useState(function () {
44
+ if (rangeStart.date) {
45
+ if (isSameMonth(rangeStart.date, currentMonth)) {
46
+ return rangeStart.date;
62
47
  }
63
- if (!isSingleGrid && isSameMonth(selectedStartDate, addMonths(currentMonth, -1))) {
64
- return selectedStartDate;
48
+ if (!isSingleGrid && isSameMonth(rangeStart.date, addMonths(currentMonth, -1))) {
49
+ return rangeStart.date;
65
50
  }
66
51
  }
67
- return selectFocusedDate(selectedStartDate, currentMonth, isDateEnabled);
68
- }), focusedDate = _x[0], setFocusedDate = _x[1];
52
+ return selectFocusedDate(rangeStart.date, currentMonth, isDateEnabled);
53
+ }), focusedDate = _m[0], setFocusedDate = _m[1];
69
54
  // This effect "synchronizes" the local state update back up to the parent component.
70
55
  useEffect(function () {
71
- var startDate = joinDateTime(startDateString, startTimeString);
72
- var endDate = joinDateTime(endDateString, endTimeString);
56
+ var startDate = joinDateTime(rangeStart.dateString, rangeStart.timeString);
57
+ var endDate = joinDateTime(rangeEnd.dateString, rangeEnd.timeString);
73
58
  if (startDate !== initialStartDate || endDate !== initialEndDate) {
74
59
  onChange({ startDate: startDate, endDate: endDate });
75
60
  }
76
- }, [startDateString, startTimeString, endDateString, endTimeString, onChange, initialStartDate, initialEndDate]);
61
+ }, [
62
+ rangeStart.dateString,
63
+ rangeStart.timeString,
64
+ rangeEnd.dateString,
65
+ rangeEnd.timeString,
66
+ initialStartDate,
67
+ initialEndDate,
68
+ onChange,
69
+ ]);
77
70
  var onSelectDateHandler = function (selectedDate) {
78
71
  // recommended to include the start/end time announced with the selection
79
72
  // because the user is not aware of the fact that a start/end time is also set as soon as they select a date
@@ -104,95 +97,85 @@ function DateRangePickerCalendar(_a, ref) {
104
97
  return i18nStrings.renderSelectedAbsoluteRangeAriaLive(getDateLabel(normalizedLocale, startDate), getDateLabel(normalizedLocale, endDate));
105
98
  };
106
99
  // If both fields are empty, we set the start date
107
- if (!startDateString && !endDateString) {
100
+ if (!rangeStart.dateString && !rangeEnd.dateString) {
108
101
  var startDate = startOfDay(selectedDate);
109
- setStartDateString(formatDate(startDate));
110
- setStartTimeString(formatTime(startDate));
102
+ rangeStart.setDate(startDate);
111
103
  setAnnouncement(announceStart(startDate));
112
104
  return;
113
105
  }
114
106
  // If both fields are set, we start new
115
- if (startDateString && endDateString) {
107
+ if (rangeStart.dateString && rangeEnd.dateString) {
116
108
  var startDate = startOfDay(selectedDate);
117
- setStartDateString(formatDate(startDate));
118
- setStartTimeString(formatTime(startDate));
119
- setEndDateString('');
120
- setEndTimeString('');
109
+ rangeStart.setDate(startDate);
110
+ rangeEnd.setDate(null);
121
111
  setAnnouncement(announceStart(startDate));
122
112
  return;
123
113
  }
124
114
  // If only the END date is empty, we fill it (and swap dates if needed)
125
- if (startDateString && !endDateString) {
126
- var parsedStartDate = parseDate(startDateString);
115
+ if (rangeStart.dateString && !rangeEnd.dateString) {
116
+ var parsedStartDate = parseDate(rangeStart.dateString);
127
117
  if (isBefore(selectedDate, parsedStartDate)) {
128
118
  // The user has selected the range backwards, so we swap start and end
129
119
  var startDate = startOfDay(selectedDate);
130
120
  var endDate = endOfDay(parsedStartDate);
131
- setStartDateString(formatDate(startDate));
132
- setStartTimeString(formatTime(startDate));
133
- setEndDateString(formatDate(endDate));
134
- setEndTimeString(formatTime(endDate));
121
+ rangeStart.setDate(startDate);
122
+ rangeEnd.setDate(endDate);
135
123
  setAnnouncement(announceStart(startDate) + announceRange(startDate, endDate));
136
124
  }
137
125
  else {
138
126
  var endDate = endOfDay(selectedDate);
139
- setEndDateString(formatDate(endDate));
140
- setEndTimeString(formatTime(endDate));
127
+ rangeEnd.setDate(endDate);
141
128
  setAnnouncement(announceEnd(endDate) + announceRange(parsedStartDate, endDate));
142
129
  }
143
130
  return;
144
131
  }
145
132
  // If only the START date is empty, we fill it (and swap dates if needed)
146
- if (!startDateString && endDateString) {
147
- var existingEndDate = parseDate(endDateString);
133
+ if (!rangeStart.dateString && rangeEnd.dateString) {
134
+ var existingEndDate = parseDate(rangeEnd.dateString);
148
135
  if (isAfter(selectedDate, existingEndDate)) {
149
136
  // The user has selected the range backwards, so we swap start and end
150
137
  var startDate = startOfDay(existingEndDate);
151
138
  var endDate = endOfDay(selectedDate);
152
- setStartDateString(formatDate(startDate));
153
- setStartTimeString(formatTime(startDate));
154
- setEndDateString(formatDate(endDate));
155
- setEndTimeString(formatTime(endDate));
139
+ rangeStart.setDate(startDate);
140
+ rangeEnd.setDate(endDate);
156
141
  setAnnouncement(announceEnd(endDate) + announceRange(startDate, endDate));
157
142
  }
158
143
  else {
159
144
  var startDate = startOfDay(selectedDate);
160
- setStartDateString(formatDate(startDate));
161
- setStartTimeString(formatTime(startDate));
145
+ rangeStart.setDate(startDate);
162
146
  setAnnouncement(announceStart(startDate) + announceRange(startDate, existingEndDate));
163
147
  }
164
148
  return;
165
149
  }
166
150
  // All possible conditions are covered above
167
151
  };
168
- var onHeaderChangeMonthHandler = function (isPrevious) {
169
- var newCurrentMonth = addMonths(currentMonth, isPrevious ? -1 : 1);
152
+ var onHeaderChangeMonthHandler = function (newCurrentMonth) {
170
153
  setCurrentMonth(newCurrentMonth);
171
154
  var newBaseDateMonth = isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, -1);
172
155
  var newBaseDate = getBaseDate(newBaseDateMonth, isDateEnabled);
173
156
  setFocusedDate(newBaseDate);
174
157
  };
175
158
  var onChangeStartDate = function (value) {
176
- setStartDateString(value);
159
+ rangeStart.setDateString(value);
177
160
  if (value.length >= 8) {
178
161
  var newCurrentMonth = startOfMonth(parseDate(value));
179
162
  setCurrentMonth(isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, 1));
180
163
  }
181
164
  };
182
165
  var onChangeEndDate = function (value) {
183
- setEndDateString(value);
166
+ rangeEnd.setDateString(value);
184
167
  };
185
168
  var headingIdPrefix = useUniqueId('date-range-picker-calendar-heading');
186
169
  return (React.createElement(React.Fragment, null,
187
170
  React.createElement("div", { className: clsx(styles['calendar-container'], (_b = {},
188
171
  _b[styles['one-grid']] = isSingleGrid,
189
172
  _b)) },
190
- React.createElement("div", { ref: elementRef, className: clsx(styles.calendar, (_c = {},
173
+ React.createElement("div", { className: clsx(styles.calendar, (_c = {},
191
174
  _c[styles['one-grid']] = isSingleGrid,
192
175
  _c)) },
193
176
  React.createElement(CalendarHeader, { baseDate: currentMonth, locale: normalizedLocale, onChangeMonth: onHeaderChangeMonthHandler, previousMonthLabel: i18nStrings.previousMonthAriaLabel, nextMonthLabel: i18nStrings.nextMonthAriaLabel, isSingleGrid: isSingleGrid, headingIdPrefix: headingIdPrefix }),
194
- React.createElement(Grids, { isSingleGrid: isSingleGrid, locale: normalizedLocale, baseDate: currentMonth, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, isDateEnabled: isDateEnabled, onSelectDate: onSelectDateHandler, onChangeMonth: setCurrentMonth, startOfWeek: normalizedStartOfWeek, todayAriaLabel: i18nStrings.todayAriaLabel, selectedStartDate: selectedStartDate, selectedEndDate: selectedEndDate, headingIdPrefix: headingIdPrefix })),
195
- React.createElement(RangeInputs, { startDate: startDateString, onChangeStartDate: onChangeStartDate, startTime: startTimeString, onChangeStartTime: setStartTimeString, endDate: endDateString, onChangeEndDate: onChangeEndDate, endTime: endTimeString, onChangeEndTime: setEndTimeString, i18nStrings: i18nStrings, dateOnly: dateOnly, timeInputFormat: timeInputFormat })),
177
+ React.createElement(Grids, { isSingleGrid: isSingleGrid, locale: normalizedLocale, baseDate: currentMonth, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, isDateEnabled: isDateEnabled, onSelectDate: onSelectDateHandler, onChangeMonth: setCurrentMonth, startOfWeek: normalizedStartOfWeek, todayAriaLabel: i18nStrings.todayAriaLabel, selectedStartDate: rangeStart.date, selectedEndDate: rangeEnd.date, headingIdPrefix: headingIdPrefix })),
178
+ React.createElement(RangeInputs, { startDate: rangeStart.dateString, onChangeStartDate: onChangeStartDate, startTime: rangeStart.timeString, onChangeStartTime: rangeStart.setTimeString, endDate: rangeEnd.dateString, onChangeEndDate: onChangeEndDate, endTime: rangeEnd.timeString, onChangeEndTime: rangeEnd.setTimeString, i18nStrings: i18nStrings, dateOnly: dateOnly, timeInputFormat: timeInputFormat })),
196
179
  React.createElement(LiveRegion, { className: styles['calendar-aria-live'] }, announcement)));
197
180
  }
198
181
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { addMonths, endOfDay, isBefore, startOfDay, startOfMonth, isAfter, isSameMonth } from 'date-fns';\nimport styles from '../styles.css.js';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport { Focusable, RangeCalendarI18nStrings, RangeCalendarValue } from '../interfaces';\nimport CalendarHeader from './header';\nimport { Grids, selectFocusedDate } from './grids';\nimport { TimeInputProps } from '../../time-input/interfaces';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { getDateLabel, renderTimeLabel } from '../../calendar/utils/intl';\nimport LiveRegion from '../../internal/components/live-region';\nimport { normalizeLocale, normalizeStartOfWeek } from '../../internal/utils/locale';\nimport { formatDate, formatTime, joinDateTime, parseDate } from '../../internal/utils/date-time';\nimport { getBaseDate } from '../../calendar/utils/navigation';\nimport { useMobile } from '../../internal/hooks/use-mobile/index.js';\nimport RangeInputs from './range-inputs.js';\n\nexport interface DateRangePickerCalendarProps extends BaseComponentProps {\n value: null | RangeCalendarValue;\n onChange: (value: RangeCalendarValue) => void;\n locale?: string;\n startOfWeek?: number;\n isDateEnabled?: (date: Date) => boolean;\n i18nStrings: RangeCalendarI18nStrings;\n dateOnly?: boolean;\n timeInputFormat?: TimeInputProps.Format;\n}\n\nexport default forwardRef(DateRangePickerCalendar);\n\nfunction DateRangePickerCalendar(\n {\n value,\n onChange,\n locale = '',\n startOfWeek,\n isDateEnabled = () => true,\n i18nStrings,\n dateOnly = false,\n timeInputFormat = 'hh:mm:ss',\n }: DateRangePickerCalendarProps,\n ref: React.Ref<Focusable>\n) {\n const elementRef = useRef<HTMLDivElement>(null);\n const isSingleGrid = useMobile();\n\n const normalizedLocale = normalizeLocale('DateRangePicker', locale);\n const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);\n\n useImperativeHandle(ref, () => ({\n focus() {\n if (elementRef.current) {\n const prevButton = elementRef.current.getElementsByClassName(styles['calendar-prev-month-btn'])[0];\n (prevButton as undefined | HTMLButtonElement)?.focus();\n }\n },\n }));\n\n const initialStartDate = value?.startDate ?? '';\n const initialEndDate = value?.endDate ?? '';\n const [initialStartDateString = '', initialStartTimeString = ''] = initialStartDate.split('T');\n const [initialEndDateString = '', initialEndTimeString = ''] = initialEndDate.split('T');\n\n const [startDateString, setStartDateString] = useState(initialStartDateString);\n const [startTimeString, setStartTimeString] = useState(initialStartTimeString);\n\n const [endDateString, setEndDateString] = useState(initialEndDateString);\n const [endTimeString, setEndTimeString] = useState(initialEndTimeString);\n\n const selectedStartDate = parseDate(startDateString, true);\n const selectedEndDate = parseDate(endDateString, true);\n\n const [announcement, setAnnouncement] = useState('');\n\n const [currentMonth, setCurrentMonth] = useState(() => {\n if (startDateString) {\n const startDate = parseDate(startDateString);\n if (isSingleGrid) {\n return startOfMonth(startDate);\n }\n return startOfMonth(addMonths(startDate, 1));\n }\n if (endDateString) {\n return startOfMonth(parseDate(endDateString));\n }\n return startOfMonth(Date.now());\n });\n\n const [focusedDate, setFocusedDate] = useState<Date | null>(() => {\n if (selectedStartDate) {\n if (isSameMonth(selectedStartDate, currentMonth)) {\n return selectedStartDate;\n }\n if (!isSingleGrid && isSameMonth(selectedStartDate, addMonths(currentMonth, -1))) {\n return selectedStartDate;\n }\n }\n return selectFocusedDate(selectedStartDate, currentMonth, isDateEnabled);\n });\n\n // This effect \"synchronizes\" the local state update back up to the parent component.\n useEffect(() => {\n const startDate = joinDateTime(startDateString, startTimeString);\n const endDate = joinDateTime(endDateString, endTimeString);\n\n if (startDate !== initialStartDate || endDate !== initialEndDate) {\n onChange({ startDate, endDate });\n }\n }, [startDateString, startTimeString, endDateString, endTimeString, onChange, initialStartDate, initialEndDate]);\n\n const onSelectDateHandler = (selectedDate: Date) => {\n // recommended to include the start/end time announced with the selection\n // because the user is not aware of the fact that a start/end time is also set as soon as they select a date\n const announceStart = (startDate: Date) => {\n return (\n i18nStrings.startDateLabel +\n ', ' +\n getDateLabel(normalizedLocale, startDate) +\n ', ' +\n i18nStrings.startTimeLabel +\n ', ' +\n renderTimeLabel(normalizedLocale, startDate, timeInputFormat) +\n '. '\n );\n };\n\n const announceEnd = (endDate: Date) => {\n return (\n i18nStrings.endDateLabel +\n ', ' +\n getDateLabel(normalizedLocale, endDate) +\n ', ' +\n i18nStrings.endTimeLabel +\n ', ' +\n renderTimeLabel(normalizedLocale, endDate, timeInputFormat) +\n '. '\n );\n };\n\n const announceRange = (startDate: Date, endDate: Date) => {\n if (!i18nStrings.renderSelectedAbsoluteRangeAriaLive) {\n return `${getDateLabel(normalizedLocale, startDate)} – ${getDateLabel(normalizedLocale, endDate)}`;\n }\n return i18nStrings.renderSelectedAbsoluteRangeAriaLive(\n getDateLabel(normalizedLocale, startDate),\n getDateLabel(normalizedLocale, endDate)\n );\n };\n\n // If both fields are empty, we set the start date\n if (!startDateString && !endDateString) {\n const startDate = startOfDay(selectedDate);\n setStartDateString(formatDate(startDate));\n setStartTimeString(formatTime(startDate));\n setAnnouncement(announceStart(startDate));\n return;\n }\n\n // If both fields are set, we start new\n if (startDateString && endDateString) {\n const startDate = startOfDay(selectedDate);\n setStartDateString(formatDate(startDate));\n setStartTimeString(formatTime(startDate));\n\n setEndDateString('');\n setEndTimeString('');\n setAnnouncement(announceStart(startDate));\n return;\n }\n\n // If only the END date is empty, we fill it (and swap dates if needed)\n if (startDateString && !endDateString) {\n const parsedStartDate = parseDate(startDateString);\n\n if (isBefore(selectedDate, parsedStartDate)) {\n // The user has selected the range backwards, so we swap start and end\n\n const startDate = startOfDay(selectedDate);\n const endDate = endOfDay(parsedStartDate);\n\n setStartDateString(formatDate(startDate));\n setStartTimeString(formatTime(startDate));\n\n setEndDateString(formatDate(endDate));\n setEndTimeString(formatTime(endDate));\n setAnnouncement(announceStart(startDate) + announceRange(startDate, endDate));\n } else {\n const endDate = endOfDay(selectedDate);\n setEndDateString(formatDate(endDate));\n setEndTimeString(formatTime(endDate));\n setAnnouncement(announceEnd(endDate) + announceRange(parsedStartDate, endDate));\n }\n return;\n }\n\n // If only the START date is empty, we fill it (and swap dates if needed)\n if (!startDateString && endDateString) {\n const existingEndDate = parseDate(endDateString);\n\n if (isAfter(selectedDate, existingEndDate)) {\n // The user has selected the range backwards, so we swap start and end\n\n const startDate = startOfDay(existingEndDate);\n const endDate = endOfDay(selectedDate);\n\n setStartDateString(formatDate(startDate));\n setStartTimeString(formatTime(startDate));\n\n setEndDateString(formatDate(endDate));\n setEndTimeString(formatTime(endDate));\n setAnnouncement(announceEnd(endDate) + announceRange(startDate, endDate));\n } else {\n const startDate = startOfDay(selectedDate);\n setStartDateString(formatDate(startDate));\n setStartTimeString(formatTime(startDate));\n setAnnouncement(announceStart(startDate) + announceRange(startDate, existingEndDate));\n }\n return;\n }\n // All possible conditions are covered above\n };\n\n const onHeaderChangeMonthHandler = (isPrevious?: boolean) => {\n const newCurrentMonth = addMonths(currentMonth, isPrevious ? -1 : 1);\n setCurrentMonth(newCurrentMonth);\n\n const newBaseDateMonth = isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, -1);\n const newBaseDate = getBaseDate(newBaseDateMonth, isDateEnabled);\n setFocusedDate(newBaseDate);\n };\n\n const onChangeStartDate = (value: string) => {\n setStartDateString(value);\n\n if (value.length >= 8) {\n const newCurrentMonth = startOfMonth(parseDate(value));\n setCurrentMonth(isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, 1));\n }\n };\n\n const onChangeEndDate = (value: string) => {\n setEndDateString(value);\n };\n\n const headingIdPrefix = useUniqueId('date-range-picker-calendar-heading');\n return (\n <>\n <div\n className={clsx(styles['calendar-container'], {\n [styles['one-grid']]: isSingleGrid,\n })}\n >\n <div\n ref={elementRef}\n className={clsx(styles.calendar, {\n [styles['one-grid']]: isSingleGrid,\n })}\n >\n <CalendarHeader\n baseDate={currentMonth}\n locale={normalizedLocale}\n onChangeMonth={onHeaderChangeMonthHandler}\n previousMonthLabel={i18nStrings.previousMonthAriaLabel}\n nextMonthLabel={i18nStrings.nextMonthAriaLabel}\n isSingleGrid={isSingleGrid}\n headingIdPrefix={headingIdPrefix}\n />\n\n <Grids\n isSingleGrid={isSingleGrid}\n locale={normalizedLocale}\n baseDate={currentMonth}\n focusedDate={focusedDate}\n onFocusedDateChange={setFocusedDate}\n isDateEnabled={isDateEnabled}\n onSelectDate={onSelectDateHandler}\n onChangeMonth={setCurrentMonth}\n startOfWeek={normalizedStartOfWeek}\n todayAriaLabel={i18nStrings.todayAriaLabel}\n selectedStartDate={selectedStartDate}\n selectedEndDate={selectedEndDate}\n headingIdPrefix={headingIdPrefix}\n />\n </div>\n\n <RangeInputs\n startDate={startDateString}\n onChangeStartDate={onChangeStartDate}\n startTime={startTimeString}\n onChangeStartTime={setStartTimeString}\n endDate={endDateString}\n onChangeEndDate={onChangeEndDate}\n endTime={endTimeString}\n onChangeEndTime={setEndTimeString}\n i18nStrings={i18nStrings}\n dateOnly={dateOnly}\n timeInputFormat={timeInputFormat}\n />\n </div>\n <LiveRegion className={styles['calendar-aria-live']}>{announcement}</LiveRegion>\n </>\n );\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useState } from 'react';\nimport { addMonths, endOfDay, isBefore, startOfDay, startOfMonth, isAfter, isSameMonth } from 'date-fns';\nimport styles from '../styles.css.js';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport { RangeCalendarI18nStrings, RangeCalendarValue } from '../interfaces';\nimport CalendarHeader from './header';\nimport { Grids, selectFocusedDate } from './grids';\nimport { TimeInputProps } from '../../time-input/interfaces';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { getDateLabel, renderTimeLabel } from '../../calendar/utils/intl';\nimport LiveRegion from '../../internal/components/live-region';\nimport { normalizeLocale, normalizeStartOfWeek } from '../../internal/utils/locale';\nimport { joinDateTime, parseDate } from '../../internal/utils/date-time';\nimport { getBaseDate } from '../../calendar/utils/navigation';\nimport { useMobile } from '../../internal/hooks/use-mobile/index.js';\nimport RangeInputs from './range-inputs.js';\nimport { useDateTime } from './use-date-time.js';\n\nexport interface DateRangePickerCalendarProps extends BaseComponentProps {\n value: null | RangeCalendarValue;\n onChange: (value: RangeCalendarValue) => void;\n locale?: string;\n startOfWeek?: number;\n isDateEnabled?: (date: Date) => boolean;\n i18nStrings: RangeCalendarI18nStrings;\n dateOnly?: boolean;\n timeInputFormat?: TimeInputProps.Format;\n}\n\nexport default function DateRangePickerCalendar({\n value,\n onChange,\n locale = '',\n startOfWeek,\n isDateEnabled = () => true,\n i18nStrings,\n dateOnly = false,\n timeInputFormat = 'hh:mm:ss',\n}: DateRangePickerCalendarProps) {\n const isSingleGrid = useMobile();\n\n const normalizedLocale = normalizeLocale('DateRangePicker', locale);\n const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);\n\n const initialStartDate = value?.startDate ?? '';\n const rangeStart = useDateTime(initialStartDate);\n\n const initialEndDate = value?.endDate ?? '';\n const rangeEnd = useDateTime(initialEndDate);\n\n const [announcement, setAnnouncement] = useState('');\n\n const [currentMonth, setCurrentMonth] = useState(() => {\n if (rangeStart.dateString) {\n const startDate = parseDate(rangeStart.dateString);\n if (isSingleGrid) {\n return startOfMonth(startDate);\n }\n return startOfMonth(addMonths(startDate, 1));\n }\n if (rangeEnd.dateString) {\n return startOfMonth(parseDate(rangeEnd.dateString));\n }\n return startOfMonth(Date.now());\n });\n\n const [focusedDate, setFocusedDate] = useState<Date | null>(() => {\n if (rangeStart.date) {\n if (isSameMonth(rangeStart.date, currentMonth)) {\n return rangeStart.date;\n }\n if (!isSingleGrid && isSameMonth(rangeStart.date, addMonths(currentMonth, -1))) {\n return rangeStart.date;\n }\n }\n return selectFocusedDate(rangeStart.date, currentMonth, isDateEnabled);\n });\n\n // This effect \"synchronizes\" the local state update back up to the parent component.\n useEffect(() => {\n const startDate = joinDateTime(rangeStart.dateString, rangeStart.timeString);\n const endDate = joinDateTime(rangeEnd.dateString, rangeEnd.timeString);\n\n if (startDate !== initialStartDate || endDate !== initialEndDate) {\n onChange({ startDate, endDate });\n }\n }, [\n rangeStart.dateString,\n rangeStart.timeString,\n rangeEnd.dateString,\n rangeEnd.timeString,\n initialStartDate,\n initialEndDate,\n onChange,\n ]);\n\n const onSelectDateHandler = (selectedDate: Date) => {\n // recommended to include the start/end time announced with the selection\n // because the user is not aware of the fact that a start/end time is also set as soon as they select a date\n const announceStart = (startDate: Date) => {\n return (\n i18nStrings.startDateLabel +\n ', ' +\n getDateLabel(normalizedLocale, startDate) +\n ', ' +\n i18nStrings.startTimeLabel +\n ', ' +\n renderTimeLabel(normalizedLocale, startDate, timeInputFormat) +\n '. '\n );\n };\n\n const announceEnd = (endDate: Date) => {\n return (\n i18nStrings.endDateLabel +\n ', ' +\n getDateLabel(normalizedLocale, endDate) +\n ', ' +\n i18nStrings.endTimeLabel +\n ', ' +\n renderTimeLabel(normalizedLocale, endDate, timeInputFormat) +\n '. '\n );\n };\n\n const announceRange = (startDate: Date, endDate: Date) => {\n if (!i18nStrings.renderSelectedAbsoluteRangeAriaLive) {\n return `${getDateLabel(normalizedLocale, startDate)} – ${getDateLabel(normalizedLocale, endDate)}`;\n }\n return i18nStrings.renderSelectedAbsoluteRangeAriaLive(\n getDateLabel(normalizedLocale, startDate),\n getDateLabel(normalizedLocale, endDate)\n );\n };\n\n // If both fields are empty, we set the start date\n if (!rangeStart.dateString && !rangeEnd.dateString) {\n const startDate = startOfDay(selectedDate);\n rangeStart.setDate(startDate);\n setAnnouncement(announceStart(startDate));\n return;\n }\n\n // If both fields are set, we start new\n if (rangeStart.dateString && rangeEnd.dateString) {\n const startDate = startOfDay(selectedDate);\n rangeStart.setDate(startDate);\n rangeEnd.setDate(null);\n setAnnouncement(announceStart(startDate));\n return;\n }\n\n // If only the END date is empty, we fill it (and swap dates if needed)\n if (rangeStart.dateString && !rangeEnd.dateString) {\n const parsedStartDate = parseDate(rangeStart.dateString);\n\n if (isBefore(selectedDate, parsedStartDate)) {\n // The user has selected the range backwards, so we swap start and end\n\n const startDate = startOfDay(selectedDate);\n const endDate = endOfDay(parsedStartDate);\n\n rangeStart.setDate(startDate);\n rangeEnd.setDate(endDate);\n setAnnouncement(announceStart(startDate) + announceRange(startDate, endDate));\n } else {\n const endDate = endOfDay(selectedDate);\n rangeEnd.setDate(endDate);\n setAnnouncement(announceEnd(endDate) + announceRange(parsedStartDate, endDate));\n }\n return;\n }\n\n // If only the START date is empty, we fill it (and swap dates if needed)\n if (!rangeStart.dateString && rangeEnd.dateString) {\n const existingEndDate = parseDate(rangeEnd.dateString);\n\n if (isAfter(selectedDate, existingEndDate)) {\n // The user has selected the range backwards, so we swap start and end\n\n const startDate = startOfDay(existingEndDate);\n const endDate = endOfDay(selectedDate);\n\n rangeStart.setDate(startDate);\n rangeEnd.setDate(endDate);\n setAnnouncement(announceEnd(endDate) + announceRange(startDate, endDate));\n } else {\n const startDate = startOfDay(selectedDate);\n rangeStart.setDate(startDate);\n setAnnouncement(announceStart(startDate) + announceRange(startDate, existingEndDate));\n }\n return;\n }\n // All possible conditions are covered above\n };\n\n const onHeaderChangeMonthHandler = (newCurrentMonth: Date) => {\n setCurrentMonth(newCurrentMonth);\n\n const newBaseDateMonth = isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, -1);\n const newBaseDate = getBaseDate(newBaseDateMonth, isDateEnabled);\n setFocusedDate(newBaseDate);\n };\n\n const onChangeStartDate = (value: string) => {\n rangeStart.setDateString(value);\n\n if (value.length >= 8) {\n const newCurrentMonth = startOfMonth(parseDate(value));\n setCurrentMonth(isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, 1));\n }\n };\n\n const onChangeEndDate = (value: string) => {\n rangeEnd.setDateString(value);\n };\n\n const headingIdPrefix = useUniqueId('date-range-picker-calendar-heading');\n return (\n <>\n <div\n className={clsx(styles['calendar-container'], {\n [styles['one-grid']]: isSingleGrid,\n })}\n >\n <div\n className={clsx(styles.calendar, {\n [styles['one-grid']]: isSingleGrid,\n })}\n >\n <CalendarHeader\n baseDate={currentMonth}\n locale={normalizedLocale}\n onChangeMonth={onHeaderChangeMonthHandler}\n previousMonthLabel={i18nStrings.previousMonthAriaLabel}\n nextMonthLabel={i18nStrings.nextMonthAriaLabel}\n isSingleGrid={isSingleGrid}\n headingIdPrefix={headingIdPrefix}\n />\n\n <Grids\n isSingleGrid={isSingleGrid}\n locale={normalizedLocale}\n baseDate={currentMonth}\n focusedDate={focusedDate}\n onFocusedDateChange={setFocusedDate}\n isDateEnabled={isDateEnabled}\n onSelectDate={onSelectDateHandler}\n onChangeMonth={setCurrentMonth}\n startOfWeek={normalizedStartOfWeek}\n todayAriaLabel={i18nStrings.todayAriaLabel}\n selectedStartDate={rangeStart.date}\n selectedEndDate={rangeEnd.date}\n headingIdPrefix={headingIdPrefix}\n />\n </div>\n\n <RangeInputs\n startDate={rangeStart.dateString}\n onChangeStartDate={onChangeStartDate}\n startTime={rangeStart.timeString}\n onChangeStartTime={rangeStart.setTimeString}\n endDate={rangeEnd.dateString}\n onChangeEndDate={onChangeEndDate}\n endTime={rangeEnd.timeString}\n onChangeEndTime={rangeEnd.setTimeString}\n i18nStrings={i18nStrings}\n dateOnly={dateOnly}\n timeInputFormat={timeInputFormat}\n />\n </div>\n <LiveRegion className={styles['calendar-aria-live']}>{announcement}</LiveRegion>\n </>\n );\n}\n"]}
@@ -0,0 +1,9 @@
1
+ export declare function useDateTime(initialDateTimeString: string): {
2
+ dateString: string;
3
+ timeString: string;
4
+ setDateString: import("react").Dispatch<import("react").SetStateAction<string>>;
5
+ setTimeString: import("react").Dispatch<import("react").SetStateAction<string>>;
6
+ date: Date | null;
7
+ setDate: (date: null | Date) => void;
8
+ };
9
+ //# sourceMappingURL=use-date-time.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-date-time.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/use-date-time.ts"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,CAAC,qBAAqB,EAAE,MAAM;;;;;;oBAOhC,IAAI,GAAG,IAAI;EAMnC"}
@@ -0,0 +1,16 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import { useMemo, useState } from 'react';
4
+ import { formatDate, formatTime, parseDate } from '../../internal/utils/date-time';
5
+ export function useDateTime(initialDateTimeString) {
6
+ var _a = initialDateTimeString.split('T'), _b = _a[0], initialDateString = _b === void 0 ? '' : _b, _c = _a[1], initialTimeString = _c === void 0 ? '' : _c;
7
+ var _d = useState(initialDateString), dateString = _d[0], setDateString = _d[1];
8
+ var _e = useState(initialTimeString), timeString = _e[0], setTimeString = _e[1];
9
+ var date = useMemo(function () { return parseDate(dateString, true); }, [dateString]);
10
+ var setDate = function (date) {
11
+ setDateString(date ? formatDate(date) : '');
12
+ setTimeString(date ? formatTime(date) : '');
13
+ };
14
+ return { dateString: dateString, timeString: timeString, setDateString: setDateString, setTimeString: setTimeString, date: date, setDate: setDate };
15
+ }
16
+ //# sourceMappingURL=use-date-time.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-date-time.js","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/use-date-time.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEnF,MAAM,UAAU,WAAW,CAAC,qBAA6B;IACjD,IAAA,KAAmD,qBAAqB,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlF,UAAsB,EAAtB,iBAAiB,mBAAG,EAAE,KAAA,EAAE,UAAsB,EAAtB,iBAAiB,mBAAG,EAAE,KAAoC,CAAC;IACpF,IAAA,KAA8B,QAAQ,CAAC,iBAAiB,CAAC,EAAxD,UAAU,QAAA,EAAE,aAAa,QAA+B,CAAC;IAC1D,IAAA,KAA8B,QAAQ,CAAC,iBAAiB,CAAC,EAAxD,UAAU,QAAA,EAAE,aAAa,QAA+B,CAAC;IAEhE,IAAM,IAAI,GAAG,OAAO,CAAC,cAAM,OAAA,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,EAA3B,CAA2B,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEtE,IAAM,OAAO,GAAG,UAAC,IAAiB;QAChC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC5C,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,OAAO,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,aAAa,eAAA,EAAE,aAAa,eAAA,EAAE,IAAI,MAAA,EAAE,OAAO,SAAA,EAAE,CAAC;AACjF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useMemo, useState } from 'react';\nimport { formatDate, formatTime, parseDate } from '../../internal/utils/date-time';\n\nexport function useDateTime(initialDateTimeString: string) {\n const [initialDateString = '', initialTimeString = ''] = initialDateTimeString.split('T');\n const [dateString, setDateString] = useState(initialDateString);\n const [timeString, setTimeString] = useState(initialTimeString);\n\n const date = useMemo(() => parseDate(dateString, true), [dateString]);\n\n const setDate = (date: null | Date) => {\n setDateString(date ? formatDate(date) : '');\n setTimeString(date ? formatTime(date) : '');\n };\n\n return { dateString, timeString, setDateString, setTimeString, date, setDate };\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAa,MAAM,cAAc,CAAC;AAiB/D,eAAO,MAAM,WAAW,EAAE,oBAAoB,CAAC,gBAAkC,CAAC;AAElF,MAAM,WAAW,4BACf,SAAQ,IAAI,CACV,QAAQ,CAAC,oBAAoB,CAAC,EAC5B,QAAQ,GACR,eAAe,GACf,cAAc,GACd,OAAO,GACP,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,GACb,UAAU,GACV,iBAAiB,GACjB,mBAAmB,CACtB;IACD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,oBAAoB,CAAC,KAAK,KAAK,oBAAoB,CAAC,gBAAgB,CAAC;IAC7F,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,EACZ,KAAK,EACL,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,UAAU,EACnB,eAAe,EACf,eAAe,EACf,eAAe,EACf,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,EAAE,4BAA4B,eAiM9B"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/dropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAiBpD,eAAO,MAAM,WAAW,EAAE,oBAAoB,CAAC,gBAAkC,CAAC;AAElF,MAAM,WAAW,4BACf,SAAQ,IAAI,CACV,QAAQ,CAAC,oBAAoB,CAAC,EAC5B,QAAQ,GACR,eAAe,GACf,cAAc,GACd,OAAO,GACP,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,GACb,UAAU,GACV,iBAAiB,GACjB,mBAAmB,CACtB;IACD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,oBAAoB,CAAC,KAAK,KAAK,oBAAoB,CAAC,gBAAgB,CAAC;IAC7F,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,EACZ,KAAK,EACL,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,UAAU,EACnB,eAAe,EACf,eAAe,EACf,eAAe,EACf,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,EAAE,4BAA4B,eAwL9B"}
@@ -1,6 +1,6 @@
1
- import { __assign } from "tslib";
2
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
2
  // SPDX-License-Identifier: Apache-2.0
3
+ import { __assign } from "tslib";
4
4
  import React, { useEffect, useRef, useState } from 'react';
5
5
  import Calendar from './calendar';
6
6
  import { InternalButton } from '../button/internal';
@@ -61,11 +61,6 @@ export function DateRangePickerDropdown(_a) {
61
61
  selectedAbsoluteRange,
62
62
  setValidationResult,
63
63
  ]);
64
- var focusRefs = {
65
- "default": useRef(null),
66
- 'absolute-only': useRef(null),
67
- 'relative-only': useRef(null)
68
- };
69
64
  useEffect(function () { var _a; return (_a = scrollableContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, [scrollableContainerRef]);
70
65
  return (React.createElement(React.Fragment, null,
71
66
  React.createElement(FocusLock, { className: styles['focus-lock'], autoFocus: true },
@@ -76,13 +71,13 @@ export function DateRangePickerDropdown(_a) {
76
71
  React.createElement(SpaceBetween, { size: "l" },
77
72
  React.createElement(InternalBox, { padding: { top: 'm', horizontal: 'l' } },
78
73
  React.createElement(SpaceBetween, { direction: "vertical", size: "s" },
79
- rangeSelectorMode === 'default' && (React.createElement(ModeSwitcher, { ref: focusRefs["default"], mode: rangeSelectionMode, onChange: function (mode) {
74
+ rangeSelectorMode === 'default' && (React.createElement(ModeSwitcher, { mode: rangeSelectionMode, onChange: function (mode) {
80
75
  setRangeSelectionMode(mode);
81
76
  setApplyClicked(false);
82
77
  setValidationResult(VALID_RANGE);
83
78
  }, i18nStrings: i18nStrings })),
84
- rangeSelectionMode === 'absolute' && (React.createElement(Calendar, { ref: focusRefs['absolute-only'], value: selectedAbsoluteRange ? __assign({}, selectedAbsoluteRange) : null, onChange: function (value) { return setSelectedAbsoluteRange(__assign({ type: 'absolute' }, value)); }, locale: locale, startOfWeek: startOfWeek, isDateEnabled: isDateEnabled, i18nStrings: i18nStrings, dateOnly: dateOnly, timeInputFormat: timeInputFormat })),
85
- rangeSelectionMode === 'relative' && (React.createElement(RelativeRangePicker, { ref: focusRefs['relative-only'], isSingleGrid: isSingleGrid, options: relativeOptions, dateOnly: dateOnly, initialSelection: selectedRelativeRange, onChange: function (range) { return setSelectedRelativeRange(range); }, i18nStrings: i18nStrings }))),
79
+ rangeSelectionMode === 'absolute' && (React.createElement(Calendar, { value: selectedAbsoluteRange ? __assign({}, selectedAbsoluteRange) : null, onChange: function (value) { return setSelectedAbsoluteRange(__assign({ type: 'absolute' }, value)); }, locale: locale, startOfWeek: startOfWeek, isDateEnabled: isDateEnabled, i18nStrings: i18nStrings, dateOnly: dateOnly, timeInputFormat: timeInputFormat })),
80
+ rangeSelectionMode === 'relative' && (React.createElement(RelativeRangePicker, { isSingleGrid: isSingleGrid, options: relativeOptions, dateOnly: dateOnly, initialSelection: selectedRelativeRange, onChange: function (range) { return setSelectedRelativeRange(range); }, i18nStrings: i18nStrings }))),
86
81
  React.createElement(InternalBox, { className: styles['validation-section'], margin: !validationResult.valid ? { top: 's' } : undefined }, !validationResult.valid && (React.createElement(React.Fragment, null,
87
82
  React.createElement(InternalAlert, { type: "error", statusIconAriaLabel: i18nStrings.errorIconAriaLabel },
88
83
  React.createElement("span", { className: styles['validation-error'] }, validationResult.errorMessage)),
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/date-range-picker/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { DateRangePickerProps, Focusable } from './interfaces';\nimport Calendar from './calendar';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport FocusLock from '../internal/components/focus-lock';\nimport InternalBox from '../box/internal';\nimport SpaceBetween from '../space-between/index.js';\n\nimport styles from './styles.css.js';\nimport RelativeRangePicker from './relative-range';\nimport ModeSwitcher from './mode-switcher';\nimport clsx from 'clsx';\nimport InternalAlert from '../alert/internal';\nimport LiveRegion from '../internal/components/live-region';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { fillMissingTime, getDefaultMode } from './utils';\n\nexport const VALID_RANGE: DateRangePickerProps.ValidRangeResult = { valid: true };\n\nexport interface DateRangePickerDropdownProps\n extends Pick<\n Required<DateRangePickerProps>,\n | 'locale'\n | 'isDateEnabled'\n | 'isValidRange'\n | 'value'\n | 'relativeOptions'\n | 'showClearButton'\n | 'i18nStrings'\n | 'dateOnly'\n | 'timeInputFormat'\n | 'rangeSelectorMode'\n > {\n onClear: () => void;\n onApply: (value: null | DateRangePickerProps.Value) => DateRangePickerProps.ValidationResult;\n startOfWeek: number | undefined;\n onDropdownClose: () => void;\n isSingleGrid: boolean;\n\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\n\nexport function DateRangePickerDropdown({\n locale = '',\n startOfWeek,\n isDateEnabled,\n isValidRange,\n value,\n onClear: clearValue,\n onApply: applyValue,\n onDropdownClose,\n relativeOptions,\n showClearButton,\n isSingleGrid,\n i18nStrings,\n dateOnly,\n timeInputFormat,\n rangeSelectorMode,\n ariaLabelledby,\n ariaDescribedby,\n}: DateRangePickerDropdownProps) {\n const [rangeSelectionMode, setRangeSelectionMode] = useState<'absolute' | 'relative'>(\n getDefaultMode(value, relativeOptions, rangeSelectorMode)\n );\n\n const [selectedAbsoluteRange, setSelectedAbsoluteRange] = useState<DateRangePickerProps.AbsoluteValue | null>(\n value?.type === 'absolute' ? value : null\n );\n\n const [selectedRelativeRange, setSelectedRelativeRange] = useState<DateRangePickerProps.RelativeValue | null>(\n value?.type === 'relative' ? value : null\n );\n\n const focusVisible = useFocusVisible();\n const scrollableContainerRef = useRef<HTMLDivElement | null>(null);\n const applyButtonRef = useRef<ButtonProps.Ref>(null);\n\n const [applyClicked, setApplyClicked] = useState<boolean>(false);\n\n const [validationResult, setValidationResult] = useState<\n DateRangePickerProps.ValidRangeResult | DateRangePickerProps.InvalidRangeResult\n >(VALID_RANGE);\n\n const closeDropdown = () => {\n setApplyClicked(false);\n onDropdownClose();\n };\n\n const onClear = () => {\n closeDropdown();\n clearValue();\n };\n\n const onApply = () => {\n const newValue = rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n const newValidationResult = applyValue(newValue);\n if (newValidationResult.valid === false) {\n setApplyClicked(true);\n setValidationResult(newValidationResult);\n } else {\n setApplyClicked(false);\n closeDropdown();\n }\n };\n\n useEffect(() => {\n if (applyClicked) {\n const visibleRange =\n rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n\n const newValidationResult = isValidRange(visibleRange);\n setValidationResult(newValidationResult || VALID_RANGE);\n }\n }, [\n applyClicked,\n isValidRange,\n rangeSelectionMode,\n selectedRelativeRange,\n selectedAbsoluteRange,\n setValidationResult,\n ]);\n\n const focusRefs = {\n default: useRef<Focusable>(null),\n 'absolute-only': useRef<Focusable>(null),\n 'relative-only': useRef<Focusable>(null),\n };\n\n useEffect(() => scrollableContainerRef.current?.focus(), [scrollableContainerRef]);\n\n return (\n <>\n <FocusLock className={styles['focus-lock']} autoFocus={true}>\n <div\n {...focusVisible}\n ref={scrollableContainerRef}\n className={styles.dropdown}\n tabIndex={0}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={i18nStrings.ariaLabel}\n aria-labelledby={ariaLabelledby ?? i18nStrings.ariaLabelledby}\n aria-describedby={ariaDescribedby ?? i18nStrings.ariaDescribedby}\n >\n <div\n className={clsx(styles['dropdown-content'], {\n [styles['one-grid']]: isSingleGrid,\n })}\n >\n <SpaceBetween size=\"l\">\n <InternalBox padding={{ top: 'm', horizontal: 'l' }}>\n <SpaceBetween direction=\"vertical\" size=\"s\">\n {rangeSelectorMode === 'default' && (\n <ModeSwitcher\n ref={focusRefs.default}\n mode={rangeSelectionMode}\n onChange={(mode: 'absolute' | 'relative') => {\n setRangeSelectionMode(mode);\n setApplyClicked(false);\n setValidationResult(VALID_RANGE);\n }}\n i18nStrings={i18nStrings}\n />\n )}\n\n {rangeSelectionMode === 'absolute' && (\n <Calendar\n ref={focusRefs['absolute-only']}\n value={selectedAbsoluteRange ? { ...selectedAbsoluteRange } : null}\n onChange={value => setSelectedAbsoluteRange({ type: 'absolute', ...value })}\n locale={locale}\n startOfWeek={startOfWeek}\n isDateEnabled={isDateEnabled}\n i18nStrings={i18nStrings}\n dateOnly={dateOnly}\n timeInputFormat={timeInputFormat}\n />\n )}\n\n {rangeSelectionMode === 'relative' && (\n <RelativeRangePicker\n ref={focusRefs['relative-only']}\n isSingleGrid={isSingleGrid}\n options={relativeOptions}\n dateOnly={dateOnly}\n initialSelection={selectedRelativeRange}\n onChange={range => setSelectedRelativeRange(range)}\n i18nStrings={i18nStrings}\n />\n )}\n </SpaceBetween>\n\n <InternalBox\n className={styles['validation-section']}\n margin={!validationResult.valid ? { top: 's' } : undefined}\n >\n {!validationResult.valid && (\n <>\n <InternalAlert type=\"error\" statusIconAriaLabel={i18nStrings.errorIconAriaLabel}>\n <span className={styles['validation-error']}>{validationResult.errorMessage}</span>\n </InternalAlert>\n <LiveRegion>{validationResult.errorMessage}</LiveRegion>\n </>\n )}\n </InternalBox>\n </InternalBox>\n\n <div\n className={clsx(styles.footer, {\n [styles['one-grid']]: isSingleGrid,\n [styles['has-clear-button']]: showClearButton,\n })}\n >\n {showClearButton && (\n <div className={styles['footer-button-wrapper']}>\n <InternalButton\n onClick={onClear}\n className={styles['clear-button']}\n variant=\"link\"\n formAction=\"none\"\n >\n {i18nStrings.clearButtonLabel}\n </InternalButton>\n </div>\n )}\n <div className={styles['footer-button-wrapper']}>\n <SpaceBetween size=\"xs\" direction=\"horizontal\">\n <InternalButton\n onClick={closeDropdown}\n className={styles['cancel-button']}\n variant=\"link\"\n formAction=\"none\"\n >\n {i18nStrings.cancelButtonLabel}\n </InternalButton>\n\n <InternalButton\n onClick={onApply}\n className={styles['apply-button']}\n ref={applyButtonRef}\n formAction=\"none\"\n >\n {i18nStrings.applyButtonLabel}\n </InternalButton>\n </SpaceBetween>\n </div>\n </div>\n </SpaceBetween>\n </div>\n </div>\n </FocusLock>\n </>\n );\n}\n"]}
1
+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/date-range-picker/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { DateRangePickerProps } from './interfaces';\nimport Calendar from './calendar';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport FocusLock from '../internal/components/focus-lock';\nimport InternalBox from '../box/internal';\nimport SpaceBetween from '../space-between/index.js';\n\nimport styles from './styles.css.js';\nimport RelativeRangePicker from './relative-range';\nimport ModeSwitcher from './mode-switcher';\nimport clsx from 'clsx';\nimport InternalAlert from '../alert/internal';\nimport LiveRegion from '../internal/components/live-region';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { fillMissingTime, getDefaultMode } from './utils';\n\nexport const VALID_RANGE: DateRangePickerProps.ValidRangeResult = { valid: true };\n\nexport interface DateRangePickerDropdownProps\n extends Pick<\n Required<DateRangePickerProps>,\n | 'locale'\n | 'isDateEnabled'\n | 'isValidRange'\n | 'value'\n | 'relativeOptions'\n | 'showClearButton'\n | 'i18nStrings'\n | 'dateOnly'\n | 'timeInputFormat'\n | 'rangeSelectorMode'\n > {\n onClear: () => void;\n onApply: (value: null | DateRangePickerProps.Value) => DateRangePickerProps.ValidationResult;\n startOfWeek: number | undefined;\n onDropdownClose: () => void;\n isSingleGrid: boolean;\n\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\n\nexport function DateRangePickerDropdown({\n locale = '',\n startOfWeek,\n isDateEnabled,\n isValidRange,\n value,\n onClear: clearValue,\n onApply: applyValue,\n onDropdownClose,\n relativeOptions,\n showClearButton,\n isSingleGrid,\n i18nStrings,\n dateOnly,\n timeInputFormat,\n rangeSelectorMode,\n ariaLabelledby,\n ariaDescribedby,\n}: DateRangePickerDropdownProps) {\n const [rangeSelectionMode, setRangeSelectionMode] = useState<'absolute' | 'relative'>(\n getDefaultMode(value, relativeOptions, rangeSelectorMode)\n );\n\n const [selectedAbsoluteRange, setSelectedAbsoluteRange] = useState<DateRangePickerProps.AbsoluteValue | null>(\n value?.type === 'absolute' ? value : null\n );\n\n const [selectedRelativeRange, setSelectedRelativeRange] = useState<DateRangePickerProps.RelativeValue | null>(\n value?.type === 'relative' ? value : null\n );\n\n const focusVisible = useFocusVisible();\n const scrollableContainerRef = useRef<HTMLDivElement | null>(null);\n const applyButtonRef = useRef<ButtonProps.Ref>(null);\n\n const [applyClicked, setApplyClicked] = useState<boolean>(false);\n\n const [validationResult, setValidationResult] = useState<\n DateRangePickerProps.ValidRangeResult | DateRangePickerProps.InvalidRangeResult\n >(VALID_RANGE);\n\n const closeDropdown = () => {\n setApplyClicked(false);\n onDropdownClose();\n };\n\n const onClear = () => {\n closeDropdown();\n clearValue();\n };\n\n const onApply = () => {\n const newValue = rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n const newValidationResult = applyValue(newValue);\n if (newValidationResult.valid === false) {\n setApplyClicked(true);\n setValidationResult(newValidationResult);\n } else {\n setApplyClicked(false);\n closeDropdown();\n }\n };\n\n useEffect(() => {\n if (applyClicked) {\n const visibleRange =\n rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n\n const newValidationResult = isValidRange(visibleRange);\n setValidationResult(newValidationResult || VALID_RANGE);\n }\n }, [\n applyClicked,\n isValidRange,\n rangeSelectionMode,\n selectedRelativeRange,\n selectedAbsoluteRange,\n setValidationResult,\n ]);\n\n useEffect(() => scrollableContainerRef.current?.focus(), [scrollableContainerRef]);\n\n return (\n <>\n <FocusLock className={styles['focus-lock']} autoFocus={true}>\n <div\n {...focusVisible}\n ref={scrollableContainerRef}\n className={styles.dropdown}\n tabIndex={0}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={i18nStrings.ariaLabel}\n aria-labelledby={ariaLabelledby ?? i18nStrings.ariaLabelledby}\n aria-describedby={ariaDescribedby ?? i18nStrings.ariaDescribedby}\n >\n <div\n className={clsx(styles['dropdown-content'], {\n [styles['one-grid']]: isSingleGrid,\n })}\n >\n <SpaceBetween size=\"l\">\n <InternalBox padding={{ top: 'm', horizontal: 'l' }}>\n <SpaceBetween direction=\"vertical\" size=\"s\">\n {rangeSelectorMode === 'default' && (\n <ModeSwitcher\n mode={rangeSelectionMode}\n onChange={(mode: 'absolute' | 'relative') => {\n setRangeSelectionMode(mode);\n setApplyClicked(false);\n setValidationResult(VALID_RANGE);\n }}\n i18nStrings={i18nStrings}\n />\n )}\n\n {rangeSelectionMode === 'absolute' && (\n <Calendar\n value={selectedAbsoluteRange ? { ...selectedAbsoluteRange } : null}\n onChange={value => setSelectedAbsoluteRange({ type: 'absolute', ...value })}\n locale={locale}\n startOfWeek={startOfWeek}\n isDateEnabled={isDateEnabled}\n i18nStrings={i18nStrings}\n dateOnly={dateOnly}\n timeInputFormat={timeInputFormat}\n />\n )}\n\n {rangeSelectionMode === 'relative' && (\n <RelativeRangePicker\n isSingleGrid={isSingleGrid}\n options={relativeOptions}\n dateOnly={dateOnly}\n initialSelection={selectedRelativeRange}\n onChange={range => setSelectedRelativeRange(range)}\n i18nStrings={i18nStrings}\n />\n )}\n </SpaceBetween>\n\n <InternalBox\n className={styles['validation-section']}\n margin={!validationResult.valid ? { top: 's' } : undefined}\n >\n {!validationResult.valid && (\n <>\n <InternalAlert type=\"error\" statusIconAriaLabel={i18nStrings.errorIconAriaLabel}>\n <span className={styles['validation-error']}>{validationResult.errorMessage}</span>\n </InternalAlert>\n <LiveRegion>{validationResult.errorMessage}</LiveRegion>\n </>\n )}\n </InternalBox>\n </InternalBox>\n\n <div\n className={clsx(styles.footer, {\n [styles['one-grid']]: isSingleGrid,\n [styles['has-clear-button']]: showClearButton,\n })}\n >\n {showClearButton && (\n <div className={styles['footer-button-wrapper']}>\n <InternalButton\n onClick={onClear}\n className={styles['clear-button']}\n variant=\"link\"\n formAction=\"none\"\n >\n {i18nStrings.clearButtonLabel}\n </InternalButton>\n </div>\n )}\n <div className={styles['footer-button-wrapper']}>\n <SpaceBetween size=\"xs\" direction=\"horizontal\">\n <InternalButton\n onClick={closeDropdown}\n className={styles['cancel-button']}\n variant=\"link\"\n formAction=\"none\"\n >\n {i18nStrings.cancelButtonLabel}\n </InternalButton>\n\n <InternalButton\n onClick={onApply}\n className={styles['apply-button']}\n ref={applyButtonRef}\n formAction=\"none\"\n >\n {i18nStrings.applyButtonLabel}\n </InternalButton>\n </SpaceBetween>\n </div>\n </div>\n </SpaceBetween>\n </div>\n </div>\n </FocusLock>\n </>\n );\n}\n"]}
@@ -1,9 +1,8 @@
1
- import React from 'react';
2
- import { DateRangePickerProps, Focusable } from './interfaces';
1
+ import { DateRangePickerProps } from './interfaces';
3
2
  interface ModeSwitcherProps extends Pick<Required<DateRangePickerProps>, 'i18nStrings'> {
4
3
  mode: 'absolute' | 'relative';
5
4
  onChange: (mode: 'absolute' | 'relative') => void;
6
5
  }
7
- declare const _default: React.ForwardRefExoticComponent<ModeSwitcherProps & React.RefAttributes<Focusable>>;
8
- export default _default;
6
+ export default function ModeSwitcher({ i18nStrings, mode, onChange }: ModeSwitcherProps): JSX.Element;
7
+ export {};
9
8
  //# sourceMappingURL=mode-switcher.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"mode-switcher.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAO/D,UAAU,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrF,IAAI,EAAE,UAAU,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;CACnD;;AAED,wBAAwC"}
1
+ {"version":3,"file":"mode-switcher.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/mode-switcher.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,UAAU,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrF,IAAI,EAAE,UAAU,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAYtF"}
@@ -1,30 +1,13 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- import React, { forwardRef, useImperativeHandle, useRef } from 'react';
3
+ import React from 'react';
4
4
  import InternalSegmentedControl from '../segmented-control/internal';
5
- import segmentedControlStyles from '../segmented-control/styles.css.js';
6
- import buttonTriggerStyles from '../internal/components/button-trigger/styles.css.js';
7
5
  import styles from './styles.css.js';
8
- export default forwardRef(ModeSwitcher);
9
- function ModeSwitcher(_a, ref) {
6
+ export default function ModeSwitcher(_a) {
10
7
  var i18nStrings = _a.i18nStrings, mode = _a.mode, onChange = _a.onChange;
11
- var elementRef = useRef(null);
12
- useImperativeHandle(ref, function () { return ({
13
- focus: function () {
14
- if (elementRef.current) {
15
- elementRef.current.getElementsByClassName(segmentedControlStyles.selected)[0].focus();
16
- var select = elementRef.current.getElementsByClassName(buttonTriggerStyles['button-trigger']);
17
- for (var _i = 0, _a = Array.prototype.slice.call(select); _i < _a.length; _i++) {
18
- var button = _a[_i];
19
- button.focus();
20
- }
21
- }
22
- }
23
- }); });
24
- return (React.createElement("div", { ref: elementRef },
25
- React.createElement(InternalSegmentedControl, { className: styles['mode-switch'], selectedId: mode, options: [
26
- { id: 'relative', text: i18nStrings.relativeModeTitle },
27
- { id: 'absolute', text: i18nStrings.absoluteModeTitle },
28
- ], onChange: function (e) { return onChange(e.detail.selectedId); } })));
8
+ return (React.createElement(InternalSegmentedControl, { className: styles['mode-switch'], selectedId: mode, options: [
9
+ { id: 'relative', text: i18nStrings.relativeModeTitle },
10
+ { id: 'absolute', text: i18nStrings.absoluteModeTitle },
11
+ ], onChange: function (e) { return onChange(e.detail.selectedId); } }));
29
12
  }
30
13
  //# sourceMappingURL=mode-switcher.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"mode-switcher.js","sourceRoot":"","sources":["../../../src/date-range-picker/mode-switcher.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,OAAO,sBAAsB,MAAM,oCAAoC,CAAC;AACxE,OAAO,mBAAmB,MAAM,qDAAqD,CAAC;AACtF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,eAAe,UAAU,CAAC,YAAY,CAAC,CAAC;AAExC,SAAS,YAAY,CAAC,EAAkD,EAAE,GAAyB;QAA3E,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA;IACjD,IAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CAAC,GAAG,EAAE,cAAM,OAAA,CAAC;QAC9B,KAAK,EAAL;YACE,IAAI,UAAU,CAAC,OAAO,EAAE;gBACrB,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAuB,CAAC,KAAK,EAAE,CAAC;gBAE7G,IAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC;gBAEhG,KAAqB,UAAkC,EAAlC,KAAA,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAlC,cAAkC,EAAlC,IAAkC,EAAE;oBAApD,IAAM,MAAM,SAAA;oBACf,MAAM,CAAC,KAAK,EAAE,CAAC;iBAChB;aACF;QACH,CAAC;KACF,CAAC,EAZ6B,CAY7B,CAAC,CAAC;IAEJ,OAAO,CACL,6BAAK,GAAG,EAAE,UAAU;QAClB,oBAAC,wBAAwB,IACvB,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE;gBACP,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,CAAC,iBAAiB,EAAE;gBACvD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,CAAC,iBAAiB,EAAE;aACxD,EACD,QAAQ,EAAE,UAAA,CAAC,IAAI,OAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAqC,CAAC,EAAxD,CAAwD,GACvE,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { DateRangePickerProps, Focusable } from './interfaces';\nimport InternalSegmentedControl from '../segmented-control/internal';\n\nimport segmentedControlStyles from '../segmented-control/styles.css.js';\nimport buttonTriggerStyles from '../internal/components/button-trigger/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface ModeSwitcherProps extends Pick<Required<DateRangePickerProps>, 'i18nStrings'> {\n mode: 'absolute' | 'relative';\n onChange: (mode: 'absolute' | 'relative') => void;\n}\n\nexport default forwardRef(ModeSwitcher);\n\nfunction ModeSwitcher({ i18nStrings, mode, onChange }: ModeSwitcherProps, ref: React.Ref<Focusable>) {\n const elementRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({\n focus() {\n if (elementRef.current) {\n (elementRef.current.getElementsByClassName(segmentedControlStyles.selected)[0] as HTMLButtonElement).focus();\n\n const select = elementRef.current.getElementsByClassName(buttonTriggerStyles['button-trigger']);\n\n for (const button of Array.prototype.slice.call(select)) {\n button.focus();\n }\n }\n },\n }));\n\n return (\n <div ref={elementRef}>\n <InternalSegmentedControl\n className={styles['mode-switch']}\n selectedId={mode}\n options={[\n { id: 'relative', text: i18nStrings.relativeModeTitle },\n { id: 'absolute', text: i18nStrings.absoluteModeTitle },\n ]}\n onChange={e => onChange(e.detail.selectedId as 'absolute' | 'relative')}\n />\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"mode-switcher.js","sourceRoot":"","sources":["../../../src/date-range-picker/mode-switcher.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAkD;QAAhD,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA;IAChE,OAAO,CACL,oBAAC,wBAAwB,IACvB,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE;YACP,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,CAAC,iBAAiB,EAAE;YACvD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,CAAC,iBAAiB,EAAE;SACxD,EACD,QAAQ,EAAE,UAAA,CAAC,IAAI,OAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAqC,CAAC,EAAxD,CAAwD,GACvE,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { DateRangePickerProps } from './interfaces';\nimport InternalSegmentedControl from '../segmented-control/internal';\n\nimport styles from './styles.css.js';\n\ninterface ModeSwitcherProps extends Pick<Required<DateRangePickerProps>, 'i18nStrings'> {\n mode: 'absolute' | 'relative';\n onChange: (mode: 'absolute' | 'relative') => void;\n}\n\nexport default function ModeSwitcher({ i18nStrings, mode, onChange }: ModeSwitcherProps) {\n return (\n <InternalSegmentedControl\n className={styles['mode-switch']}\n selectedId={mode}\n options={[\n { id: 'relative', text: i18nStrings.relativeModeTitle },\n { id: 'absolute', text: i18nStrings.absoluteModeTitle },\n ]}\n onChange={e => onChange(e.detail.selectedId as 'absolute' | 'relative')}\n />\n );\n}\n"]}
@@ -1,5 +1,4 @@
1
- import React from 'react';
2
- import { DateRangePickerProps, Focusable } from '../interfaces';
1
+ import { DateRangePickerProps } from '../interfaces';
3
2
  export interface RelativeRangePickerProps {
4
3
  dateOnly: boolean;
5
4
  options: ReadonlyArray<DateRangePickerProps.RelativeOption>;
@@ -8,6 +7,5 @@ export interface RelativeRangePickerProps {
8
7
  i18nStrings: DateRangePickerProps.I18nStrings;
9
8
  isSingleGrid: boolean;
10
9
  }
11
- declare const _default: React.ForwardRefExoticComponent<RelativeRangePickerProps & React.RefAttributes<Focusable>>;
12
- export default _default;
10
+ export default function RelativeRangePicker({ dateOnly, options: clientOptions, initialSelection: initialRange, onChange: onChangeRangeSize, i18nStrings, isSingleGrid, }: RelativeRangePickerProps): JSX.Element;
13
11
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAUhE,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAC5D,gBAAgB,EAAE,oBAAoB,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9D,WAAW,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC9C,YAAY,EAAE,OAAO,CAAC;CACvB;;AAYD,wBAA+C"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAUrD,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAC5D,gBAAgB,EAAE,oBAAoB,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9D,WAAW,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC9C,YAAY,EAAE,OAAO,CAAC;CACvB;AAYD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,OAAO,EAAE,aAAkB,EAC3B,gBAAgB,EAAE,YAAY,EAC9B,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EACX,YAAY,GACb,EAAE,wBAAwB,eAkI1B"}
@@ -2,7 +2,7 @@ import { __spreadArray } from "tslib";
2
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  import clsx from 'clsx';
5
- import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
5
+ import React, { useState } from 'react';
6
6
  import InternalBox from '../../box/internal';
7
7
  import InternalFormField from '../../form-field/internal';
8
8
  import InternalInput from '../../input/internal';
@@ -13,8 +13,7 @@ import styles from './styles.css.js';
13
13
  var dayUnits = ['day', 'week', 'month', 'year'];
14
14
  var units = __spreadArray(['second', 'minute', 'hour'], dayUnits, true);
15
15
  var CUSTOM_OPTION_SELECT_KEY = 'awsui-internal-custom-duration-key';
16
- export default forwardRef(RelativeRangePicker);
17
- function RelativeRangePicker(_a, ref) {
16
+ export default function RelativeRangePicker(_a) {
18
17
  var _b, _c;
19
18
  var _d;
20
19
  var dateOnly = _a.dateOnly, _e = _a.options, clientOptions = _e === void 0 ? [] : _e, initialRange = _a.initialSelection, onChangeRangeSize = _a.onChange, i18nStrings = _a.i18nStrings, isSingleGrid = _a.isSingleGrid;
@@ -45,16 +44,7 @@ function RelativeRangePicker(_a, ref) {
45
44
  var _h = useState((_d = initialRange === null || initialRange === void 0 ? void 0 : initialRange.unit) !== null && _d !== void 0 ? _d : initialCustomTimeUnit), customUnitOfTime = _h[0], setCustomUnitOfTime = _h[1];
46
45
  var showRadioControl = clientOptions.length > 0;
47
46
  var showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;
48
- var elementRef = useRef(null);
49
- useImperativeHandle(ref, function () { return ({
50
- focus: function () {
51
- var _a;
52
- if (elementRef.current) {
53
- (_a = elementRef.current.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
54
- }
55
- }
56
- }); });
57
- return (React.createElement("div", { ref: elementRef },
47
+ return (React.createElement("div", null,
58
48
  React.createElement(InternalSpaceBetween, { size: "xs", direction: "vertical" },
59
49
  showRadioControl && (React.createElement(InternalFormField, { label: i18nStrings.relativeRangeSelectionHeading },
60
50
  React.createElement(InternalRadioGroup, { className: styles['relative-range-radio-group'], onChange: function (_a) {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport { DateRangePickerProps, Focusable } from '../interfaces';\nimport InternalBox from '../../box/internal';\nimport InternalFormField from '../../form-field/internal';\nimport InternalInput from '../../input/internal';\nimport { RadioGroupProps } from '../../radio-group/interfaces';\nimport InternalRadioGroup from '../../radio-group/internal';\nimport InternalSelect from '../../select/internal';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport styles from './styles.css.js';\n\nexport interface RelativeRangePickerProps {\n dateOnly: boolean;\n options: ReadonlyArray<DateRangePickerProps.RelativeOption>;\n initialSelection: DateRangePickerProps.RelativeValue | null;\n onChange: (range: DateRangePickerProps.RelativeValue) => void;\n i18nStrings: DateRangePickerProps.I18nStrings;\n isSingleGrid: boolean;\n}\n\ninterface UnitSelectOption {\n value: DateRangePickerProps.TimeUnit;\n label: string;\n}\n\nconst dayUnits: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['day', 'week', 'month', 'year'];\nconst units: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['second', 'minute', 'hour', ...dayUnits];\n\nconst CUSTOM_OPTION_SELECT_KEY = 'awsui-internal-custom-duration-key';\n\nexport default forwardRef(RelativeRangePicker);\n\nfunction RelativeRangePicker(\n {\n dateOnly,\n options: clientOptions = [],\n initialSelection: initialRange,\n onChange: onChangeRangeSize,\n i18nStrings,\n isSingleGrid,\n }: RelativeRangePickerProps,\n ref: React.Ref<Focusable>\n) {\n const radioOptions: RadioGroupProps.RadioButtonDefinition[] = clientOptions.map(option => ({\n value: option.key,\n label: i18nStrings.formatRelativeRange(option),\n }));\n radioOptions.push({\n value: CUSTOM_OPTION_SELECT_KEY,\n label: i18nStrings.customRelativeRangeOptionLabel,\n description: i18nStrings.customRelativeRangeOptionDescription,\n });\n\n const [selectedRadio, setSelectedRadio] = useState(() => {\n if (initialRange && !initialRange.key) {\n return CUSTOM_OPTION_SELECT_KEY;\n }\n return initialRange?.key ?? null;\n });\n\n const [customDuration, setCustomDuration] = useState(() => {\n if (initialRange) {\n return initialRange.amount;\n }\n // NaN represents an empty duration\n return NaN;\n });\n\n const initialCustomTimeUnit = dateOnly ? 'day' : 'minute';\n const [customUnitOfTime, setCustomUnitOfTime] = useState<DateRangePickerProps.TimeUnit>(\n initialRange?.unit ?? initialCustomTimeUnit\n );\n\n const showRadioControl = clientOptions.length > 0;\n const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;\n\n const elementRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({\n focus() {\n if (elementRef.current) {\n elementRef.current.querySelector('input')?.focus();\n }\n },\n }));\n\n return (\n <div ref={elementRef}>\n <InternalSpaceBetween size=\"xs\" direction=\"vertical\">\n {showRadioControl && (\n <InternalFormField label={i18nStrings.relativeRangeSelectionHeading}>\n <InternalRadioGroup\n className={styles['relative-range-radio-group']}\n onChange={({ detail }) => {\n setSelectedRadio(detail.value);\n\n if (detail.value === CUSTOM_OPTION_SELECT_KEY) {\n setCustomDuration(NaN);\n setCustomUnitOfTime(initialCustomTimeUnit);\n onChangeRangeSize({\n amount: NaN,\n unit: initialCustomTimeUnit,\n type: 'relative',\n });\n } else {\n const option = clientOptions.filter(o => o.key === detail.value)[0];\n onChangeRangeSize(option);\n }\n }}\n value={selectedRadio}\n items={radioOptions}\n />\n </InternalFormField>\n )}\n\n {showCustomControls && (\n <InternalSpaceBetween direction=\"vertical\" size=\"xs\">\n {!showRadioControl && (\n <InternalBox fontSize=\"body-m\" color=\"text-body-secondary\">\n {i18nStrings.customRelativeRangeOptionDescription}\n </InternalBox>\n )}\n\n <div\n className={clsx(styles['custom-range'], {\n [styles['custom-range--no-padding']]: !showRadioControl,\n })}\n >\n <div\n className={clsx(styles['custom-range-form-controls'], {\n [styles.vertical]: isSingleGrid,\n })}\n >\n <div className={styles['custom-range-duration']}>\n <InternalFormField label={i18nStrings.customRelativeRangeDurationLabel}>\n <InternalInput\n type=\"number\"\n className={styles['custom-range-duration-input']}\n value={isNaN(customDuration) || customDuration === 0 ? '' : customDuration?.toString()}\n onChange={e => {\n const amount = Number(e.detail.value);\n\n setCustomDuration(amount);\n onChangeRangeSize({ amount, unit: customUnitOfTime, type: 'relative' });\n }}\n placeholder={i18nStrings.customRelativeRangeDurationPlaceholder}\n __inheritFormFieldProps={true}\n />\n </InternalFormField>\n </div>\n\n <div className={styles['custom-range-unit']}>\n <InternalFormField label={i18nStrings.customRelativeRangeUnitLabel}>\n <InternalSelect\n className={styles['custom-range-unit-select']}\n selectedOption={\n {\n value: customUnitOfTime,\n label: i18nStrings.formatUnit(customUnitOfTime, customDuration),\n } as UnitSelectOption\n }\n onChange={e => {\n const { value: unit } = e.detail.selectedOption as UnitSelectOption;\n\n setCustomUnitOfTime(unit);\n onChangeRangeSize({ amount: customDuration, unit, type: 'relative' });\n }}\n options={(dateOnly ? dayUnits : units).map(unit => ({\n value: unit,\n label: i18nStrings.formatUnit(unit, customDuration),\n }))}\n renderHighlightedAriaLive={option => option.label || option.value || ''}\n />\n </InternalFormField>\n </div>\n </div>\n </div>\n </InternalSpaceBetween>\n )}\n </InternalSpaceBetween>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useState } from 'react';\nimport { DateRangePickerProps } from '../interfaces';\nimport InternalBox from '../../box/internal';\nimport InternalFormField from '../../form-field/internal';\nimport InternalInput from '../../input/internal';\nimport { RadioGroupProps } from '../../radio-group/interfaces';\nimport InternalRadioGroup from '../../radio-group/internal';\nimport InternalSelect from '../../select/internal';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport styles from './styles.css.js';\n\nexport interface RelativeRangePickerProps {\n dateOnly: boolean;\n options: ReadonlyArray<DateRangePickerProps.RelativeOption>;\n initialSelection: DateRangePickerProps.RelativeValue | null;\n onChange: (range: DateRangePickerProps.RelativeValue) => void;\n i18nStrings: DateRangePickerProps.I18nStrings;\n isSingleGrid: boolean;\n}\n\ninterface UnitSelectOption {\n value: DateRangePickerProps.TimeUnit;\n label: string;\n}\n\nconst dayUnits: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['day', 'week', 'month', 'year'];\nconst units: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['second', 'minute', 'hour', ...dayUnits];\n\nconst CUSTOM_OPTION_SELECT_KEY = 'awsui-internal-custom-duration-key';\n\nexport default function RelativeRangePicker({\n dateOnly,\n options: clientOptions = [],\n initialSelection: initialRange,\n onChange: onChangeRangeSize,\n i18nStrings,\n isSingleGrid,\n}: RelativeRangePickerProps) {\n const radioOptions: RadioGroupProps.RadioButtonDefinition[] = clientOptions.map(option => ({\n value: option.key,\n label: i18nStrings.formatRelativeRange(option),\n }));\n radioOptions.push({\n value: CUSTOM_OPTION_SELECT_KEY,\n label: i18nStrings.customRelativeRangeOptionLabel,\n description: i18nStrings.customRelativeRangeOptionDescription,\n });\n\n const [selectedRadio, setSelectedRadio] = useState(() => {\n if (initialRange && !initialRange.key) {\n return CUSTOM_OPTION_SELECT_KEY;\n }\n return initialRange?.key ?? null;\n });\n\n const [customDuration, setCustomDuration] = useState(() => {\n if (initialRange) {\n return initialRange.amount;\n }\n // NaN represents an empty duration\n return NaN;\n });\n\n const initialCustomTimeUnit = dateOnly ? 'day' : 'minute';\n const [customUnitOfTime, setCustomUnitOfTime] = useState<DateRangePickerProps.TimeUnit>(\n initialRange?.unit ?? initialCustomTimeUnit\n );\n\n const showRadioControl = clientOptions.length > 0;\n const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;\n\n return (\n <div>\n <InternalSpaceBetween size=\"xs\" direction=\"vertical\">\n {showRadioControl && (\n <InternalFormField label={i18nStrings.relativeRangeSelectionHeading}>\n <InternalRadioGroup\n className={styles['relative-range-radio-group']}\n onChange={({ detail }) => {\n setSelectedRadio(detail.value);\n\n if (detail.value === CUSTOM_OPTION_SELECT_KEY) {\n setCustomDuration(NaN);\n setCustomUnitOfTime(initialCustomTimeUnit);\n onChangeRangeSize({\n amount: NaN,\n unit: initialCustomTimeUnit,\n type: 'relative',\n });\n } else {\n const option = clientOptions.filter(o => o.key === detail.value)[0];\n onChangeRangeSize(option);\n }\n }}\n value={selectedRadio}\n items={radioOptions}\n />\n </InternalFormField>\n )}\n\n {showCustomControls && (\n <InternalSpaceBetween direction=\"vertical\" size=\"xs\">\n {!showRadioControl && (\n <InternalBox fontSize=\"body-m\" color=\"text-body-secondary\">\n {i18nStrings.customRelativeRangeOptionDescription}\n </InternalBox>\n )}\n\n <div\n className={clsx(styles['custom-range'], {\n [styles['custom-range--no-padding']]: !showRadioControl,\n })}\n >\n <div\n className={clsx(styles['custom-range-form-controls'], {\n [styles.vertical]: isSingleGrid,\n })}\n >\n <div className={styles['custom-range-duration']}>\n <InternalFormField label={i18nStrings.customRelativeRangeDurationLabel}>\n <InternalInput\n type=\"number\"\n className={styles['custom-range-duration-input']}\n value={isNaN(customDuration) || customDuration === 0 ? '' : customDuration?.toString()}\n onChange={e => {\n const amount = Number(e.detail.value);\n\n setCustomDuration(amount);\n onChangeRangeSize({ amount, unit: customUnitOfTime, type: 'relative' });\n }}\n placeholder={i18nStrings.customRelativeRangeDurationPlaceholder}\n __inheritFormFieldProps={true}\n />\n </InternalFormField>\n </div>\n\n <div className={styles['custom-range-unit']}>\n <InternalFormField label={i18nStrings.customRelativeRangeUnitLabel}>\n <InternalSelect\n className={styles['custom-range-unit-select']}\n selectedOption={\n {\n value: customUnitOfTime,\n label: i18nStrings.formatUnit(customUnitOfTime, customDuration),\n } as UnitSelectOption\n }\n onChange={e => {\n const { value: unit } = e.detail.selectedOption as UnitSelectOption;\n\n setCustomUnitOfTime(unit);\n onChangeRangeSize({ amount: customDuration, unit, type: 'relative' });\n }}\n options={(dateOnly ? dayUnits : units).map(unit => ({\n value: unit,\n label: i18nStrings.formatUnit(unit, customDuration),\n }))}\n renderHighlightedAriaLive={option => option.label || option.value || ''}\n />\n </InternalFormField>\n </div>\n </div>\n </div>\n </InternalSpaceBetween>\n )}\n </InternalSpaceBetween>\n </div>\n );\n}\n"]}
@@ -1,5 +1,5 @@
1
1
 
2
- export var PACKAGE_VERSION = '3.0.0 (c375f82)';
2
+ export var PACKAGE_VERSION = '3.0.0 (cff1447)';
3
3
  export var THEME = 'open-source-visual-refresh';
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
5
5
 
package/package.json CHANGED
@@ -112,6 +112,6 @@
112
112
  "./internal/base-component/index.js",
113
113
  "./internal/base-component/styles.css.js"
114
114
  ],
115
- "version": "3.0.107",
115
+ "version": "3.0.109",
116
116
  "license": "Apache-2.0"
117
117
  }
@@ -1,8 +0,0 @@
1
- interface HeaderButtonProps {
2
- ariaLabel: string;
3
- isPrevious: boolean;
4
- onChangeMonth: (isPrevious: boolean) => void;
5
- }
6
- declare const HeaderButton: ({ ariaLabel, isPrevious, onChangeMonth }: HeaderButtonProps) => JSX.Element;
7
- export default HeaderButton;
8
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/date-range-picker/calendar/header/button/index.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,YAAY,6CAA8C,iBAAiB,gBAkBhF,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1,17 +0,0 @@
1
- import { __assign } from "tslib";
2
- // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
- // SPDX-License-Identifier: Apache-2.0
4
- import React from 'react';
5
- import { InternalButton } from '../../../../button/internal';
6
- import styles from '../../../styles.css.js';
7
- var HeaderButton = function (_a) {
8
- var ariaLabel = _a.ariaLabel, isPrevious = _a.isPrevious, onChangeMonth = _a.onChangeMonth;
9
- var iconName = isPrevious ? 'angle-left' : 'angle-right';
10
- var additionalAttributes = {
11
- className: isPrevious ? styles['calendar-prev-month-btn'] : styles['calendar-next-month-btn']
12
- };
13
- var onClick = function () { return onChangeMonth(isPrevious); };
14
- return (React.createElement(InternalButton, __assign({}, additionalAttributes, { iconName: iconName, ariaLabel: ariaLabel, variant: 'icon', onClick: onClick, formAction: "none" })));
15
- };
16
- export default HeaderButton;
17
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/date-range-picker/calendar/header/button/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,IAAM,YAAY,GAAG,UAAC,EAA2D;QAAzD,SAAS,eAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAA;IAC1D,IAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC;IAC3D,IAAM,oBAAoB,GAA4C;QACpE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC;KAC9F,CAAC;IAEF,IAAM,OAAO,GAAG,cAAM,OAAA,aAAa,CAAC,UAAU,CAAC,EAAzB,CAAyB,CAAC;IAEhD,OAAO,CACL,oBAAC,cAAc,eACT,oBAAoB,IACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,EAChB,UAAU,EAAC,MAAM,IACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { InternalButton } from '../../../../button/internal';\nimport styles from '../../../styles.css.js';\n\ninterface HeaderButtonProps {\n ariaLabel: string;\n isPrevious: boolean;\n onChangeMonth: (isPrevious: boolean) => void;\n}\n\nconst HeaderButton = ({ ariaLabel, isPrevious, onChangeMonth }: HeaderButtonProps) => {\n const iconName = isPrevious ? 'angle-left' : 'angle-right';\n const additionalAttributes: React.HTMLAttributes<HTMLButtonElement> = {\n className: isPrevious ? styles['calendar-prev-month-btn'] : styles['calendar-next-month-btn'],\n };\n\n const onClick = () => onChangeMonth(isPrevious);\n\n return (\n <InternalButton\n {...additionalAttributes}\n iconName={iconName}\n ariaLabel={ariaLabel}\n variant={'icon'}\n onClick={onClick}\n formAction=\"none\"\n />\n );\n};\n\nexport default HeaderButton;\n"]}