@cloudscape-design/components 3.0.877 → 3.0.879
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calendar/grid/use-calendar-grid-rows.d.ts +1 -1
- package/calendar/grid/use-calendar-grid-rows.d.ts.map +1 -1
- package/calendar/grid/use-calendar-grid-rows.js +11 -12
- package/calendar/grid/use-calendar-grid-rows.js.map +1 -1
- package/date-range-picker/calendar/grids/index.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/index.js +2 -2
- package/date-range-picker/calendar/grids/index.js.map +1 -1
- package/date-range-picker/calendar/grids/monthly-grid.d.ts +2 -1
- package/date-range-picker/calendar/grids/monthly-grid.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/monthly-grid.js +28 -34
- package/date-range-picker/calendar/grids/monthly-grid.js.map +1 -1
- package/date-range-picker/calendar/grids/styles.css.js +24 -28
- package/date-range-picker/calendar/grids/styles.scoped.css +42 -51
- package/date-range-picker/calendar/grids/styles.selectors.js +24 -28
- package/date-range-picker/test-classes/styles.css.js +7 -0
- package/date-range-picker/test-classes/styles.scoped.css +8 -0
- package/date-range-picker/test-classes/styles.selectors.js +8 -0
- package/expandable-section/expandable-section-container.d.ts.map +1 -1
- package/expandable-section/expandable-section-container.js +3 -1
- package/expandable-section/expandable-section-container.js.map +1 -1
- package/expandable-section/internal.js +1 -1
- package/expandable-section/internal.js.map +1 -1
- package/internal/components/tooltip/index.d.ts.map +1 -1
- package/internal/components/tooltip/index.js +2 -3
- package/internal/components/tooltip/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/internal/utils/date-time/calendar.d.ts +34 -0
- package/internal/utils/date-time/calendar.d.ts.map +1 -0
- package/internal/utils/date-time/calendar.js +114 -0
- package/internal/utils/date-time/calendar.js.map +1 -0
- package/internal/utils/locale/index.d.ts +1 -1
- package/internal/utils/locale/index.d.ts.map +1 -1
- package/internal/utils/locale/index.js.map +1 -1
- package/internal/utils/locale/normalize-start-of-week.d.ts +1 -2
- package/internal/utils/locale/normalize-start-of-week.d.ts.map +1 -1
- package/internal/utils/locale/normalize-start-of-week.js.map +1 -1
- package/package.json +1 -1
- package/popover/container.d.ts +2 -1
- package/popover/container.d.ts.map +1 -1
- package/popover/container.js +2 -2
- package/popover/container.js.map +1 -1
- package/popover/interfaces.d.ts +2 -3
- package/popover/interfaces.d.ts.map +1 -1
- package/popover/interfaces.js.map +1 -1
- package/popover/internal.js +2 -2
- package/popover/internal.js.map +1 -1
- package/popover/styles.css.js +53 -54
- package/popover/styles.scoped.css +70 -96
- package/popover/styles.selectors.js +53 -54
- package/test-utils/dom/date-range-picker/index.js +2 -1
- package/test-utils/dom/date-range-picker/index.js.map +1 -1
- package/test-utils/selectors/date-range-picker/index.js +2 -1
- package/test-utils/selectors/date-range-picker/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import addMonths from 'date-fns/addMonths';
|
|
4
|
+
import isAfter from 'date-fns/isAfter';
|
|
5
|
+
import isBefore from 'date-fns/isBefore';
|
|
6
|
+
import isSameDay from 'date-fns/isSameDay';
|
|
7
|
+
import isSameMonth from 'date-fns/isSameMonth';
|
|
8
|
+
import subMonths from 'date-fns/subMonths';
|
|
9
|
+
import { getCalendarMonth } from 'mnth';
|
|
10
|
+
// Returns a 3-by-4 matrix with dates corresponding to the initial date-time of each month of the year for a given date.
|
|
11
|
+
export function getCalendarYear(date) {
|
|
12
|
+
const year = date.getFullYear();
|
|
13
|
+
return new Array(4)
|
|
14
|
+
.fill(0)
|
|
15
|
+
.map((_, i) => new Array(3).fill(0).map((_, j) => new Date(year, i * 3 + j)));
|
|
16
|
+
}
|
|
17
|
+
export class MonthCalendar {
|
|
18
|
+
constructor({ padDates, baseDate, startOfWeek, selection, }) {
|
|
19
|
+
this.padDates = padDates;
|
|
20
|
+
this.weeks = [];
|
|
21
|
+
this.range = [baseDate, baseDate];
|
|
22
|
+
const allCalendarDates = getCalendarMonthWithSixRows(baseDate, { startOfWeek, padDates });
|
|
23
|
+
this.weekdays = allCalendarDates[0].map(date => date.getDay());
|
|
24
|
+
const isDateVisible = (weekIndex, dayIndex) => {
|
|
25
|
+
const week = allCalendarDates[weekIndex];
|
|
26
|
+
const date = week === null || week === void 0 ? void 0 : week[dayIndex];
|
|
27
|
+
if (!date) {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
switch (padDates) {
|
|
31
|
+
case 'before':
|
|
32
|
+
return isSameMonth(date, baseDate) || isBefore(date, baseDate);
|
|
33
|
+
case 'after':
|
|
34
|
+
return isSameMonth(date, baseDate) || isAfter(date, baseDate);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
const isDateInRange = (weekIndex, dayIndex) => {
|
|
38
|
+
const week = allCalendarDates[weekIndex];
|
|
39
|
+
const date = week === null || week === void 0 ? void 0 : week[dayIndex];
|
|
40
|
+
return !!(date && selection && checkIsInRange(date, selection[0], selection[1]));
|
|
41
|
+
};
|
|
42
|
+
// The test index is only set for weeks that have at least one day that belongs to the current month.
|
|
43
|
+
// It starts from the first such week and counts from 1.
|
|
44
|
+
const getWeekTestIndex = (weekIndex) => {
|
|
45
|
+
var _a;
|
|
46
|
+
const week = allCalendarDates[weekIndex];
|
|
47
|
+
if (!week) {
|
|
48
|
+
return undefined;
|
|
49
|
+
}
|
|
50
|
+
if (!isSameMonth(week[0], baseDate) && !isSameMonth(week[week.length - 1], baseDate)) {
|
|
51
|
+
return undefined;
|
|
52
|
+
}
|
|
53
|
+
return ((_a = getWeekTestIndex(weekIndex - 1)) !== null && _a !== void 0 ? _a : 0) + 1;
|
|
54
|
+
};
|
|
55
|
+
for (let weekIndex = 0; weekIndex < allCalendarDates.length; weekIndex++) {
|
|
56
|
+
const daysOfWeek = allCalendarDates[weekIndex];
|
|
57
|
+
const week = { days: [], testIndex: getWeekTestIndex(weekIndex) };
|
|
58
|
+
for (let dayIndex = 0; dayIndex < daysOfWeek.length; dayIndex++) {
|
|
59
|
+
const date = daysOfWeek[dayIndex];
|
|
60
|
+
const isVisible = isDateVisible(weekIndex, dayIndex);
|
|
61
|
+
const isSelected = !!(selection && (isSameDay(date, selection[0]) || isSameDay(date, selection[1])));
|
|
62
|
+
const isInRange = isDateInRange(weekIndex, dayIndex);
|
|
63
|
+
const isTop = isVisible && !isDateVisible(weekIndex - 1, dayIndex);
|
|
64
|
+
const isBottom = isVisible && !isDateVisible(weekIndex + 1, dayIndex);
|
|
65
|
+
const isLeft = isVisible && !isDateVisible(weekIndex, dayIndex - 1);
|
|
66
|
+
const isRight = isVisible && !isDateVisible(weekIndex, dayIndex + 1);
|
|
67
|
+
const isRangeTop = isInRange && !isDateInRange(weekIndex - 1, dayIndex);
|
|
68
|
+
const isRangeBottom = isInRange && !isDateInRange(weekIndex + 1, dayIndex);
|
|
69
|
+
const isRangeLeft = isInRange && !isDateInRange(weekIndex, dayIndex - 1);
|
|
70
|
+
const isRangeRight = isInRange && !isDateInRange(weekIndex, dayIndex + 1);
|
|
71
|
+
week.days.push({
|
|
72
|
+
date,
|
|
73
|
+
isVisible,
|
|
74
|
+
isSelected,
|
|
75
|
+
isInRange,
|
|
76
|
+
isSelectionTop: isTop || isRangeTop,
|
|
77
|
+
isSelectionBottom: isBottom || isRangeBottom,
|
|
78
|
+
isSelectionLeft: isLeft || isRangeLeft,
|
|
79
|
+
isSelectionRight: isRight || isRangeRight,
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
this.weeks.push(week);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
export function getCalendarMonthWithSixRows(date, { startOfWeek, padDates }) {
|
|
87
|
+
switch (padDates) {
|
|
88
|
+
case 'before':
|
|
89
|
+
return [...getPrevMonthRows(date, startOfWeek), ...getCurrentMonthRows(date, startOfWeek)].slice(-6);
|
|
90
|
+
case 'after':
|
|
91
|
+
return [...getCurrentMonthRows(date, startOfWeek), ...getNextMonthRows(date, startOfWeek)].slice(0, 6);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
function checkIsInRange(date, dateOne, dateTwo) {
|
|
95
|
+
if (!dateOne || !dateTwo || isSameDay(dateOne, dateTwo)) {
|
|
96
|
+
return false;
|
|
97
|
+
}
|
|
98
|
+
const inRange = (isAfter(date, dateOne) && isBefore(date, dateTwo)) || (isAfter(date, dateTwo) && isBefore(date, dateOne));
|
|
99
|
+
return inRange || isSameDay(date, dateOne) || isSameDay(date, dateTwo);
|
|
100
|
+
}
|
|
101
|
+
function getCurrentMonthRows(date, firstDayOfWeek) {
|
|
102
|
+
return getCalendarMonth(date, { firstDayOfWeek });
|
|
103
|
+
}
|
|
104
|
+
function getPrevMonthRows(date, firstDayOfWeek) {
|
|
105
|
+
const rows = getCalendarMonth(subMonths(date, 1), { firstDayOfWeek });
|
|
106
|
+
const lastDay = rows[rows.length - 1][rows[rows.length - 1].length - 1];
|
|
107
|
+
return !isSameMonth(date, lastDay) ? rows : rows.slice(0, -1);
|
|
108
|
+
}
|
|
109
|
+
function getNextMonthRows(date, firstDayOfWeek) {
|
|
110
|
+
const rows = getCalendarMonth(addMonths(date, 1), { firstDayOfWeek });
|
|
111
|
+
const firstDay = rows[0][0];
|
|
112
|
+
return !isSameMonth(date, firstDay) ? rows : rows.slice(1);
|
|
113
|
+
}
|
|
114
|
+
//# sourceMappingURL=calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../../../../src/internal/utils/date-time/calendar.ts"],"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 addMonths from 'date-fns/addMonths';\nimport isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\nimport isSameDay from 'date-fns/isSameDay';\nimport isSameMonth from 'date-fns/isSameMonth';\nimport subMonths from 'date-fns/subMonths';\nimport { getCalendarMonth } from 'mnth';\n\nimport { DayIndex } from '../locale';\n\n// Returns a 3-by-4 matrix with dates corresponding to the initial date-time of each month of the year for a given date.\nexport function getCalendarYear(date: Date): Date[][] {\n const year = date.getFullYear();\n return new Array(4)\n .fill(0)\n .map((_, i: number) => new Array(3).fill(0).map((_, j: number) => new Date(year, i * 3 + j)));\n}\n\ninterface CalendarWeek {\n days: CalendarDate[];\n testIndex?: number;\n}\n\ninterface CalendarDate {\n date: Date;\n isVisible: boolean;\n isSelected: boolean;\n isInRange: boolean;\n isSelectionTop: boolean;\n isSelectionBottom: boolean;\n isSelectionLeft: boolean;\n isSelectionRight: boolean;\n}\n\nexport class MonthCalendar {\n padDates: 'before' | 'after';\n weekdays: number[];\n weeks: CalendarWeek[];\n range: [Date, Date];\n\n constructor({\n padDates,\n baseDate,\n startOfWeek,\n selection,\n }: {\n padDates: 'before' | 'after';\n baseDate: Date;\n startOfWeek: DayIndex;\n selection: null | [Date, Date];\n }) {\n this.padDates = padDates;\n this.weeks = [];\n this.range = [baseDate, baseDate];\n\n const allCalendarDates = getCalendarMonthWithSixRows(baseDate, { startOfWeek, padDates });\n this.weekdays = allCalendarDates[0].map(date => date.getDay());\n\n const isDateVisible = (weekIndex: number, dayIndex: number) => {\n const week = allCalendarDates[weekIndex];\n const date = week?.[dayIndex];\n if (!date) {\n return false;\n }\n switch (padDates) {\n case 'before':\n return isSameMonth(date, baseDate) || isBefore(date, baseDate);\n case 'after':\n return isSameMonth(date, baseDate) || isAfter(date, baseDate);\n }\n };\n\n const isDateInRange = (weekIndex: number, dayIndex: number) => {\n const week = allCalendarDates[weekIndex];\n const date = week?.[dayIndex];\n return !!(date && selection && checkIsInRange(date, selection[0], selection[1]));\n };\n\n // The test index is only set for weeks that have at least one day that belongs to the current month.\n // It starts from the first such week and counts from 1.\n const getWeekTestIndex = (weekIndex: number): undefined | number => {\n const week = allCalendarDates[weekIndex];\n if (!week) {\n return undefined;\n }\n if (!isSameMonth(week[0], baseDate) && !isSameMonth(week[week.length - 1], baseDate)) {\n return undefined;\n }\n return (getWeekTestIndex(weekIndex - 1) ?? 0) + 1;\n };\n\n for (let weekIndex = 0; weekIndex < allCalendarDates.length; weekIndex++) {\n const daysOfWeek = allCalendarDates[weekIndex];\n const week: CalendarWeek = { days: [], testIndex: getWeekTestIndex(weekIndex) };\n\n for (let dayIndex = 0; dayIndex < daysOfWeek.length; dayIndex++) {\n const date = daysOfWeek[dayIndex];\n const isVisible = isDateVisible(weekIndex, dayIndex);\n const isSelected = !!(selection && (isSameDay(date, selection[0]) || isSameDay(date, selection[1])));\n const isInRange = isDateInRange(weekIndex, dayIndex);\n const isTop = isVisible && !isDateVisible(weekIndex - 1, dayIndex);\n const isBottom = isVisible && !isDateVisible(weekIndex + 1, dayIndex);\n const isLeft = isVisible && !isDateVisible(weekIndex, dayIndex - 1);\n const isRight = isVisible && !isDateVisible(weekIndex, dayIndex + 1);\n const isRangeTop = isInRange && !isDateInRange(weekIndex - 1, dayIndex);\n const isRangeBottom = isInRange && !isDateInRange(weekIndex + 1, dayIndex);\n const isRangeLeft = isInRange && !isDateInRange(weekIndex, dayIndex - 1);\n const isRangeRight = isInRange && !isDateInRange(weekIndex, dayIndex + 1);\n week.days.push({\n date,\n isVisible,\n isSelected,\n isInRange,\n isSelectionTop: isTop || isRangeTop,\n isSelectionBottom: isBottom || isRangeBottom,\n isSelectionLeft: isLeft || isRangeLeft,\n isSelectionRight: isRight || isRangeRight,\n });\n }\n this.weeks.push(week);\n }\n }\n}\n\nexport function getCalendarMonthWithSixRows(\n date: Date,\n { startOfWeek, padDates }: { startOfWeek: DayIndex; padDates: 'before' | 'after' }\n) {\n switch (padDates) {\n case 'before':\n return [...getPrevMonthRows(date, startOfWeek), ...getCurrentMonthRows(date, startOfWeek)].slice(-6);\n case 'after':\n return [...getCurrentMonthRows(date, startOfWeek), ...getNextMonthRows(date, startOfWeek)].slice(0, 6);\n }\n}\n\nfunction checkIsInRange(date: Date, dateOne: Date | null, dateTwo: Date | null) {\n if (!dateOne || !dateTwo || isSameDay(dateOne, dateTwo)) {\n return false;\n }\n\n const inRange =\n (isAfter(date, dateOne) && isBefore(date, dateTwo)) || (isAfter(date, dateTwo) && isBefore(date, dateOne));\n\n return inRange || isSameDay(date, dateOne) || isSameDay(date, dateTwo);\n}\n\nfunction getCurrentMonthRows(date: Date, firstDayOfWeek: DayIndex) {\n return getCalendarMonth(date, { firstDayOfWeek });\n}\n\nfunction getPrevMonthRows(date: Date, firstDayOfWeek: DayIndex) {\n const rows = getCalendarMonth(subMonths(date, 1), { firstDayOfWeek });\n const lastDay = rows[rows.length - 1][rows[rows.length - 1].length - 1];\n return !isSameMonth(date, lastDay) ? rows : rows.slice(0, -1);\n}\n\nfunction getNextMonthRows(date: Date, firstDayOfWeek: DayIndex) {\n const rows = getCalendarMonth(addMonths(date, 1), { firstDayOfWeek });\n const firstDay = rows[0][0];\n return !isSameMonth(date, firstDay) ? rows : rows.slice(1);\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { mergeLocales } from './merge-locales';
|
|
2
2
|
export { normalizeLocale } from './normalize-locale';
|
|
3
|
-
export { normalizeStartOfWeek } from './normalize-start-of-week';
|
|
3
|
+
export { normalizeStartOfWeek, DayIndex } from './normalize-start-of-week';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/utils/locale/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/utils/locale/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/utils/locale/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/utils/locale/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAY,MAAM,2BAA2B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport { mergeLocales } from './merge-locales';\nexport { normalizeLocale } from './normalize-locale';\nexport { normalizeStartOfWeek, DayIndex } from './normalize-start-of-week';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"normalize-start-of-week.d.ts","sourceRoot":"","sources":["../../../../../src/internal/utils/locale/normalize-start-of-week.ts"],"names":[],"mappings":"AAKA,
|
|
1
|
+
{"version":3,"file":"normalize-start-of-week.d.ts","sourceRoot":"","sources":["../../../../../src/internal/utils/locale/normalize-start-of-week.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,YAEnF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"normalize-start-of-week.js","sourceRoot":"","sources":["../../../../../src/internal/utils/locale/normalize-start-of-week.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAIjD,MAAM,UAAU,oBAAoB,CAAC,WAA+B,EAAE,MAAc;IAClF,OAAO,CAAC,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAa,CAAC;AACxG,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getWeekStartByLocale } from 'weekstart';\n\
|
|
1
|
+
{"version":3,"file":"normalize-start-of-week.js","sourceRoot":"","sources":["../../../../../src/internal/utils/locale/normalize-start-of-week.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAIjD,MAAM,UAAU,oBAAoB,CAAC,WAA+B,EAAE,MAAc;IAClF,OAAO,CAAC,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAa,CAAC;AACxG,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getWeekStartByLocale } from 'weekstart';\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport function normalizeStartOfWeek(startOfWeek: number | undefined, locale: string) {\n return (typeof startOfWeek === 'number' ? startOfWeek % 7 : getWeekStartByLocale(locale)) as DayIndex;\n}\n"]}
|
package/package.json
CHANGED
package/popover/container.d.ts
CHANGED
|
@@ -25,7 +25,8 @@ interface PopoverContainerProps {
|
|
|
25
25
|
allowScrollToFit?: boolean;
|
|
26
26
|
allowVerticalOverflow?: boolean;
|
|
27
27
|
hideOnOverscroll?: boolean;
|
|
28
|
+
className?: string;
|
|
28
29
|
}
|
|
29
|
-
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, }: PopoverContainerProps): JSX.Element | null;
|
|
30
|
+
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, className, }: PopoverContainerProps): JSX.Element | null;
|
|
30
31
|
export {};
|
|
31
32
|
//# sourceMappingURL=container.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK9D,UAAU,qBAAqB;IAC7B,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK9D,UAAU,qBAAqB;IAC7B,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,sBAiGvB"}
|
package/popover/container.js
CHANGED
|
@@ -7,7 +7,7 @@ import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal
|
|
|
7
7
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
8
8
|
import usePopoverPosition from './use-popover-position.js';
|
|
9
9
|
import styles from './styles.css.js';
|
|
10
|
-
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, }) {
|
|
10
|
+
export default function PopoverContainer({ position, trackRef, trackKey, arrow, children, zIndex, renderWithPortal, size, fixedWidth, variant, keepPosition, allowScrollToFit, allowVerticalOverflow, hideOnOverscroll, className, }) {
|
|
11
11
|
const bodyRef = useRef(null);
|
|
12
12
|
const contentRef = useRef(null);
|
|
13
13
|
const popoverRef = useRef(null);
|
|
@@ -66,7 +66,7 @@ export default function PopoverContainer({ position, trackRef, trackKey, arrow,
|
|
|
66
66
|
controller.abort();
|
|
67
67
|
};
|
|
68
68
|
}, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
|
|
69
|
-
return isOverscrolling ? null : (React.createElement("div", { ref: popoverRef, style: Object.assign(Object.assign({}, popoverStyle), { zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
|
|
69
|
+
return isOverscrolling ? null : (React.createElement("div", { ref: popoverRef, style: Object.assign(Object.assign({}, popoverStyle), { zIndex }), className: clsx(styles.container, isRefresh && styles.refresh, className) },
|
|
70
70
|
React.createElement("div", { ref: arrowRef, className: clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`]), "aria-hidden": true }, arrow(internalPosition)),
|
|
71
71
|
React.createElement("div", { ref: bodyRef, className: clsx(styles['container-body'], styles[`container-body-size-${size}`], {
|
|
72
72
|
[styles['fixed-width']]: fixedWidth,
|
package/popover/container.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,kBAAkB,MAAM,2BAA2B,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,kBAAkB,MAAM,2BAA2B,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAkCrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,GACa;IACtB,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAErD,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,gCAAgC;IAChC,MAAM,EAAE,qBAAqB,EAAE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAClG,kBAAkB,CAAC;QACjB,UAAU;QACV,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,UAAU;QACV,gBAAgB;QAChB,qBAAqB;QACrB,iBAAiB,EAAE,QAAQ;QAC3B,gBAAgB;QAChB,YAAY;QACZ,gBAAgB;KACjB,CAAC,CAAC;IAEL,+CAA+C;IAC/C,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,kDAAkD;IAClD,iBAAiB,CAAC,UAAU,EAAE,GAAG,EAAE;QACjC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,sCAAsC;IACtC,eAAe,CAAC,GAAG,EAAE;QACnB;;;;;UAKE;QAEF,MAAM,OAAO,GAAG,CAAC,KAA8B,EAAE,EAAE;YACjD;YACE,kDAAkD;YAClD,YAAY;gBACZ,mFAAmF;gBACnF,yDAAyD;gBACzD,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C;gBACA,OAAO;aACR;YAED,qBAAqB,CAAC,GAAG,EAAE;gBACzB,qBAAqB,EAAE,CAAC;YAC1B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAC1F,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC,CAAC;QACxF,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACzE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAsB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACzF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QAEjG,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,kBAAkB,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE1F,OAAO,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,6BACE,GAAG,EAAE,UAAU,EACf,KAAK,kCAAO,YAAY,KAAE,MAAM,KAChC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;QAEzE,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,4BAA4B,gBAAgB,EAAE,CAAC,CAAC,iBACrF,IAAI,IAEhB,KAAK,CAAC,gBAAgB,CAAC,CACpB;QAEN,6BACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,uBAAuB,IAAI,EAAE,CAAC,EAAE;gBAC/E,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;gBACnC,CAAC,MAAM,CAAC,0BAA0B,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO;aACvD,CAAC;YAEF,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CAClC,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\n\nimport styles from './styles.css.js';\n\ninterface PopoverContainerProps {\n /** References the element the container is positioned against. */\n trackRef: React.RefObject<HTMLElement | SVGElement>;\n /**\n Used to update the container position in case track or track position changes:\n \n const trackRef = useRef<Element>(null)\n return (<>\n <Track style={getPosition(selectedItemId)} ref={trackRef} />\n <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n </>)\n */\n trackKey?: string | number;\n position: PopoverProps.Position;\n zIndex?: React.CSSProperties['zIndex'];\n arrow: (position: InternalPosition | null) => React.ReactNode;\n children: React.ReactNode;\n renderWithPortal?: boolean;\n size: PopoverProps.Size | 'content';\n fixedWidth: boolean;\n variant?: 'annotation';\n // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n keepPosition?: boolean;\n // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n // Whether the popover should be hidden when the trigger is scrolled away.\n hideOnOverscroll?: boolean;\n className?: string;\n}\n\nexport default function PopoverContainer({\n position,\n trackRef,\n trackKey,\n arrow,\n children,\n zIndex,\n renderWithPortal,\n size,\n fixedWidth,\n variant,\n keepPosition,\n allowScrollToFit,\n allowVerticalOverflow,\n hideOnOverscroll,\n className,\n}: PopoverContainerProps) {\n const bodyRef = useRef<HTMLDivElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const isRefresh = useVisualRefresh();\n\n // Updates the position handler.\n const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =\n usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition: position,\n renderWithPortal,\n keepPosition,\n hideOnOverscroll,\n });\n\n // Recalculate position when properties change.\n useLayoutEffect(() => {\n updatePositionHandler();\n }, [updatePositionHandler, trackKey]);\n\n // Recalculate position when content size changes.\n useResizeObserver(contentRef, () => {\n updatePositionHandler(true);\n });\n\n // Recalculate position on DOM events.\n useLayoutEffect(() => {\n /*\n This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n and by tracking the click event we can adapt the popover's position to the new layout.\n\n TODO: extend this to Enter and Spacebar?\n */\n\n const onClick = (event: UIEvent | KeyboardEvent) => {\n if (\n // Do not update position if keepPosition is true.\n keepPosition ||\n // If the click was on the trigger, this will make the popover appear or disappear,\n // so no need to update its position either in this case.\n nodeContains(trackRef.current, event.target)\n ) {\n return;\n }\n\n requestAnimationFrame(() => {\n updatePositionHandler();\n });\n };\n\n const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());\n const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n const controller = new AbortController();\n\n window.addEventListener('click', onClick, { signal: controller.signal });\n window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });\n window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });\n\n return () => {\n controller.abort();\n };\n }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n return isOverscrolling ? null : (\n <div\n ref={popoverRef}\n style={{ ...popoverStyle, zIndex }}\n className={clsx(styles.container, isRefresh && styles.refresh, className)}\n >\n <div\n ref={arrowRef}\n className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n aria-hidden={true}\n >\n {arrow(internalPosition)}\n </div>\n\n <div\n ref={bodyRef}\n className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n [styles['fixed-width']]: fixedWidth,\n [styles[`container-body-variant-${variant}`]]: variant,\n })}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n </div>\n );\n}\n"]}
|
package/popover/interfaces.d.ts
CHANGED
|
@@ -18,8 +18,7 @@ export interface PopoverProps extends BaseComponentProps {
|
|
|
18
18
|
fixedWidth?: boolean;
|
|
19
19
|
/**
|
|
20
20
|
* Specifies the type of content inside the trigger region. The following types are available:
|
|
21
|
-
* - `text` - Use for
|
|
22
|
-
* - `text-inline` - Use for triggers containing plain text only.
|
|
21
|
+
* - `text` - Use for inline text triggers.
|
|
23
22
|
* - `custom` - Use for the [button](/components/button/) component.
|
|
24
23
|
*/
|
|
25
24
|
triggerType?: PopoverProps.TriggerType;
|
|
@@ -86,7 +85,7 @@ export type Rect = BoundingBox & {
|
|
|
86
85
|
export declare namespace PopoverProps {
|
|
87
86
|
type Position = 'top' | 'right' | 'bottom' | 'left';
|
|
88
87
|
type Size = 'small' | 'medium' | 'large';
|
|
89
|
-
type TriggerType = 'text' | '
|
|
88
|
+
type TriggerType = 'text' | 'custom';
|
|
90
89
|
interface Ref {
|
|
91
90
|
/**
|
|
92
91
|
* Sets focus on the popover's trigger.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/popover/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC;IAEjC;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/popover/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC;IAEjC;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC;IAEvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,cAAc,GACd,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,aAAa,CAAC;AAElB,MAAM,WAAW,MAAM;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,IAAI,GAAG,WAAW,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,yBAAiB,YAAY,CAAC;IAC5B,KAAY,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3D,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,KAAY,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;IAE5C,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/popover/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface PopoverProps extends BaseComponentProps {\n /**\n * Determines where the popover is displayed when opened, relative to the trigger.\n * If the popover doesn't have enough space to open in this direction, it\n * automatically chooses a better direction based on available space.\n */\n position?: PopoverProps.Position;\n\n /**\n * Determines the maximum width for the popover.\n */\n size?: PopoverProps.Size;\n\n /**\n * Expands the popover body to its maximum width regardless of content.\n * For example, use it when you need to place a column layout in the popover content.\n */\n fixedWidth?: boolean;\n\n /**\n * Specifies the type of content inside the trigger region. The following types are available:\n * - `text` - Use for
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/popover/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface PopoverProps extends BaseComponentProps {\n /**\n * Determines where the popover is displayed when opened, relative to the trigger.\n * If the popover doesn't have enough space to open in this direction, it\n * automatically chooses a better direction based on available space.\n */\n position?: PopoverProps.Position;\n\n /**\n * Determines the maximum width for the popover.\n */\n size?: PopoverProps.Size;\n\n /**\n * Expands the popover body to its maximum width regardless of content.\n * For example, use it when you need to place a column layout in the popover content.\n */\n fixedWidth?: boolean;\n\n /**\n * Specifies the type of content inside the trigger region. The following types are available:\n * - `text` - Use for inline text triggers.\n * - `custom` - Use for the [button](/components/button/) component.\n */\n triggerType?: PopoverProps.TriggerType;\n\n /**\n * Adds `aria-label` to the text trigger button. Use this to provide an accessible name for triggers\n * that don't have visible text, and to distinguish between multiple triggers with identical visible text.\n */\n triggerAriaLabel?: string;\n\n /**\n * Specifies if the text trigger content should wrap. If you set it to false, it prevents the text from\n * wrapping and truncates it with an ellipsis.\n */\n wrapTriggerText?: boolean;\n\n /**\n * Element that triggers the popover when selected by the user.\n * @displayname trigger\n */\n children?: React.ReactNode;\n\n /**\n * Specifies optional header text for the popover.\n */\n header?: string;\n\n /**\n * Content of the popover.\n */\n content?: React.ReactNode;\n\n /**\n * Determines whether the dismiss button is shown in the popover body.\n */\n dismissButton?: boolean;\n\n /**\n * Adds an `aria-label` to the dismiss button for accessibility.\n * @i18n\n */\n dismissAriaLabel?: string;\n\n /**\n * By default, the popover is constrained to fit inside its parent\n * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n * Enabling this property will allow the popover to be rendered in the root stack context using\n * [React Portals](https://reactjs.org/docs/portals.html).\n * Enable this setting if you need the popover to ignore its parent stacking context, such as in side navigation.\n *\n * Note: Using popover rendered with portal within a Modal is not supported.\n */\n renderWithPortal?: boolean;\n}\n\n/**\n * The position the popover is actually in, given space constraints.\n */\nexport type InternalPosition =\n | 'right-top'\n | 'right-bottom'\n | 'left-top'\n | 'left-bottom'\n | 'top-center'\n | 'top-right'\n | 'top-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'bottom-left';\n\nexport interface Offset {\n insetInlineStart: number;\n insetBlockStart: number;\n}\n\nexport interface Dimensions {\n inlineSize: number;\n blockSize: number;\n}\n\nexport type BoundingBox = Dimensions & Offset;\n\nexport type Rect = BoundingBox & {\n insetBlockEnd: number;\n insetInlineEnd: number;\n};\n\nexport namespace PopoverProps {\n export type Position = 'top' | 'right' | 'bottom' | 'left';\n export type Size = 'small' | 'medium' | 'large';\n export type TriggerType = 'text' | 'custom';\n\n export interface Ref {\n /**\n * Sets focus on the popover's trigger.\n */\n focus(): void;\n }\n}\n"]}
|
package/popover/internal.js
CHANGED
|
@@ -31,7 +31,7 @@ function InternalPopover(_a, ref) {
|
|
|
31
31
|
const [visible, setVisible] = useState(false);
|
|
32
32
|
const focusTrigger = useCallback(() => {
|
|
33
33
|
var _a, _b;
|
|
34
|
-
if (
|
|
34
|
+
if (triggerType === 'text') {
|
|
35
35
|
(_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
36
36
|
}
|
|
37
37
|
else {
|
|
@@ -101,7 +101,7 @@ function InternalPopover(_a, ref) {
|
|
|
101
101
|
clickFrameId.current = null;
|
|
102
102
|
});
|
|
103
103
|
} }),
|
|
104
|
-
|
|
104
|
+
triggerType === 'text' ? (React.createElement("button", Object.assign({}, triggerProps, { className: clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis']), tabIndex: triggerTabIndex, type: "button", "aria-haspopup": "dialog", id: referrerId, "aria-label": triggerAriaLabel }), children)) : (React.createElement("span", Object.assign({}, triggerProps, { id: referrerId }), children)),
|
|
105
105
|
visible && (React.createElement(ResetContextsForModal, null, renderWithPortal ? React.createElement(Portal, null, popoverContent) : popoverContent))));
|
|
106
106
|
}
|
|
107
107
|
//# sourceMappingURL=internal.js.map
|
package/popover/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/internal.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, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport Portal from '../internal/components/portal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport Arrow from './arrow';\nimport PopoverBody from './body';\nimport PopoverContainer from './container';\nimport { PopoverProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' | 'size'>, InternalBaseComponentProps {\n __onOpen?: NonCancelableEventHandler<null>;\n triggerType?: PopoverProps.TriggerType | 'filtering-token';\n size: PopoverProps.Size | 'content';\n __closeAnalyticsAction?: string;\n isInline?: boolean;\n}\n\nexport interface InternalPopoverRef {\n dismissPopover: () => void;\n focus: HTMLElement['focus'];\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n\n children,\n header,\n content,\n triggerAriaLabel,\n\n wrapTriggerText = true,\n isInline = false,\n renderWithPortal = false,\n\n __onOpen,\n __internalRootRef = null,\n __closeAnalyticsAction,\n\n ...restProps\n }: InternalPopoverProps,\n ref: React.Ref<InternalPopoverRef>\n) {\n const baseProps = getBaseProps(restProps);\n const triggerRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const clickFrameId = useRef<number | null>(null);\n\n const i18n = useInternalI18n('popover');\n const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n const [visible, setVisible] = useState(false);\n\n const focusTrigger = useCallback(() => {\n if (['text', 'text-inline'].includes(triggerType)) {\n triggerRef.current?.focus();\n } else {\n triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();\n }\n }, [triggerType]);\n\n const onTriggerClick = useCallback(() => {\n fireNonCancelableEvent(__onOpen);\n setVisible(true);\n }, [__onOpen]);\n\n const onDismiss = useCallback(() => {\n setVisible(false);\n focusTrigger();\n }, [focusTrigger]);\n\n const onTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const isEscapeKey = event.keyCode === KeyCode.escape;\n const isTabKey = event.keyCode === KeyCode.tab;\n if (isEscapeKey && visible) {\n event.stopPropagation();\n }\n if (isTabKey || isEscapeKey) {\n setVisible(false);\n }\n },\n [visible]\n );\n\n useImperativeHandle(ref, () => ({\n dismissPopover: onDismiss,\n focus: () => {\n setVisible(false);\n focusTrigger();\n },\n }));\n\n useEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n const document = triggerRef.current.ownerDocument;\n\n const onDocumentClick = () => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n if (clickFrameId.current === null) {\n setVisible(false);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick);\n };\n }, []);\n\n const popoverClasses = usePortalModeClasses(triggerRef);\n\n const triggerProps = {\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: triggerRef as any,\n onClick: onTriggerClick,\n onKeyDown: onTriggerKeyDown,\n className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n };\n const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n const referrerId = useUniqueId();\n\n const popoverContent = (\n <div\n aria-live={dismissButton ? undefined : 'polite'}\n aria-atomic={dismissButton ? undefined : true}\n className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n data-awsui-referrer-id={referrerId}\n >\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={triggerRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={renderWithPortal}\n zIndex={renderWithPortal ? 7000 : undefined}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={header}\n onDismiss={onDismiss}\n overflowVisible=\"both\"\n closeAnalyticsAction={__closeAnalyticsAction}\n >\n {content}\n </PopoverBody>\n </LinkDefaultVariantContext.Provider>\n </PopoverContainer>\n </div>\n );\n\n const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n return (\n <span\n {...baseProps}\n className={clsx(\n styles.root,\n baseProps.className,\n triggerType === 'filtering-token' && styles['root-filtering-token'],\n isInline && styles['no-wrap']\n )}\n ref={mergedRef}\n onMouseDown={() => {\n // Indicate there was a click inside popover recently, including nested portals.\n clickFrameId.current = requestAnimationFrame(() => {\n clickFrameId.current = null;\n });\n }}\n >\n {['text', 'text-inline'].includes(triggerType) ? (\n <button\n {...triggerProps}\n className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}\n tabIndex={triggerTabIndex}\n type=\"button\"\n aria-haspopup=\"dialog\"\n id={referrerId}\n aria-label={triggerAriaLabel}\n >\n {children}\n </button>\n ) : (\n <span {...triggerProps} id={referrerId}>\n {children}\n </span>\n )}\n {visible && (\n <ResetContextsForModal>\n {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n </ResetContextsForModal>\n )}\n </span>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAC7F,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,0BAA0B,EAAE,MAAM,wDAAwD,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAA6B,MAAM,0BAA0B,CAAC;AAE7F,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,WAAW,MAAM,QAAQ,CAAC;AACjC,OAAO,gBAAgB,MAAM,aAAa,CAAC;AAG3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAerC,eAAe,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAEjD,SAAS,eAAe,CACtB,EAqBuB,EACvB,GAAkC;QAtBlC,EACE,QAAQ,GAAG,OAAO,EAClB,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,MAAM,EACpB,aAAa,GAAG,IAAI,EAEpB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,gBAAgB,EAEhB,eAAe,GAAG,IAAI,EACtB,QAAQ,GAAG,KAAK,EAChB,gBAAgB,GAAG,KAAK,EAExB,QAAQ,EACR,iBAAiB,GAAG,IAAI,EACxB,sBAAsB,OAGD,EADlB,SAAS,cApBd,qOAqBC,CADa;IAId,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAEjD,MAAM,IAAI,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE9E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;;QACpC,IAAI,WAAW,KAAK,MAAM,EAAE;YAC1B,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,UAAU,CAAC,OAAO,KAAI,MAAA,iBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAA,CAAC;SACtE;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;QACjC,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,YAAY,EAAE,CAAC;IACjB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,KAA0B,EAAE,EAAE;QAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,CAAC;QACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC;QAC/C,IAAI,WAAW,IAAI,OAAO,EAAE;YAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QACD,IAAI,QAAQ,IAAI,WAAW,EAAE;YAC3B,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,cAAc,EAAE,SAAS;QACzB,KAAK,EAAE,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,YAAY,EAAE,CAAC;QACjB,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACvB,OAAO;SACR;QACD,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC;QAElD,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,mFAAmF;YACnF,IAAI,YAAY,CAAC,OAAO,KAAK,IAAI,EAAE;gBACjC,UAAU,CAAC,KAAK,CAAC,CAAC;aACnB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QAExD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QAC7D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG;QACnB,uDAAuD;QACvD,8DAA8D;QAC9D,GAAG,EAAE,UAAiB;QACtB,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,gBAAgB;QAC3B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,gBAAgB,WAAW,EAAE,CAAC,CAAC;KACvE,CAAC;IACF,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,0BAA0B,CAAC,UAAU,CAAC,CAAC;IAE7E,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC;IAEjC,MAAM,cAAc,GAAG,CACrB,0CACa,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,iBAClC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7C,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,gBAAgB,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAAC,4BAC9D,UAAU;QAElC,oBAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,oBAAC,KAAK,IAAC,QAAQ,EAAE,QAAQ,GAAI,EAChD,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAE3C,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;gBACtE,oBAAC,WAAW,IACV,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,eAAe,EAAC,MAAM,EACtB,oBAAoB,EAAE,sBAAsB,IAE3C,OAAO,CACI,CACqB,CACpB,CACf,CACP,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;IAE9D,OAAO,CACL,8CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,SAAS,CAAC,SAAS,EACnB,WAAW,KAAK,iBAAiB,IAAI,MAAM,CAAC,sBAAsB,CAAC,EACnE,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,CAC9B,EACD,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,GAAG,EAAE;YAChB,gFAAgF;YAChF,YAAY,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,CAAC,CAAC,CAAC;QACL,CAAC;QAEA,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CACxB,gDACM,YAAY,IAChB,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,eAAe,KAAK,KAAK,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAAC,EACjG,QAAQ,EAAE,eAAe,EACzB,IAAI,EAAC,QAAQ,mBACC,QAAQ,EACtB,EAAE,EAAE,UAAU,gBACF,gBAAgB,KAE3B,QAAQ,CACF,CACV,CAAC,CAAC,CAAC,CACF,8CAAU,YAAY,IAAE,EAAE,EAAE,UAAU,KACnC,QAAQ,CACJ,CACR;QACA,OAAO,IAAI,CACV,oBAAC,qBAAqB,QACnB,gBAAgB,CAAC,CAAC,CAAC,oBAAC,MAAM,QAAE,cAAc,CAAU,CAAC,CAAC,CAAC,cAAc,CAChD,CACzB,CACI,CACR,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport Portal from '../internal/components/portal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport Arrow from './arrow';\nimport PopoverBody from './body';\nimport PopoverContainer from './container';\nimport { PopoverProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' | 'size'>, InternalBaseComponentProps {\n __onOpen?: NonCancelableEventHandler<null>;\n triggerType?: PopoverProps.TriggerType | 'filtering-token';\n size: PopoverProps.Size | 'content';\n __closeAnalyticsAction?: string;\n isInline?: boolean;\n}\n\nexport interface InternalPopoverRef {\n dismissPopover: () => void;\n focus: HTMLElement['focus'];\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n\n children,\n header,\n content,\n triggerAriaLabel,\n\n wrapTriggerText = true,\n isInline = false,\n renderWithPortal = false,\n\n __onOpen,\n __internalRootRef = null,\n __closeAnalyticsAction,\n\n ...restProps\n }: InternalPopoverProps,\n ref: React.Ref<InternalPopoverRef>\n) {\n const baseProps = getBaseProps(restProps);\n const triggerRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const clickFrameId = useRef<number | null>(null);\n\n const i18n = useInternalI18n('popover');\n const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n const [visible, setVisible] = useState(false);\n\n const focusTrigger = useCallback(() => {\n if (triggerType === 'text') {\n triggerRef.current?.focus();\n } else {\n triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();\n }\n }, [triggerType]);\n\n const onTriggerClick = useCallback(() => {\n fireNonCancelableEvent(__onOpen);\n setVisible(true);\n }, [__onOpen]);\n\n const onDismiss = useCallback(() => {\n setVisible(false);\n focusTrigger();\n }, [focusTrigger]);\n\n const onTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const isEscapeKey = event.keyCode === KeyCode.escape;\n const isTabKey = event.keyCode === KeyCode.tab;\n if (isEscapeKey && visible) {\n event.stopPropagation();\n }\n if (isTabKey || isEscapeKey) {\n setVisible(false);\n }\n },\n [visible]\n );\n\n useImperativeHandle(ref, () => ({\n dismissPopover: onDismiss,\n focus: () => {\n setVisible(false);\n focusTrigger();\n },\n }));\n\n useEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n const document = triggerRef.current.ownerDocument;\n\n const onDocumentClick = () => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n if (clickFrameId.current === null) {\n setVisible(false);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick);\n };\n }, []);\n\n const popoverClasses = usePortalModeClasses(triggerRef);\n\n const triggerProps = {\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: triggerRef as any,\n onClick: onTriggerClick,\n onKeyDown: onTriggerKeyDown,\n className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n };\n const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n const referrerId = useUniqueId();\n\n const popoverContent = (\n <div\n aria-live={dismissButton ? undefined : 'polite'}\n aria-atomic={dismissButton ? undefined : true}\n className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n data-awsui-referrer-id={referrerId}\n >\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={triggerRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={renderWithPortal}\n zIndex={renderWithPortal ? 7000 : undefined}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={header}\n onDismiss={onDismiss}\n overflowVisible=\"both\"\n closeAnalyticsAction={__closeAnalyticsAction}\n >\n {content}\n </PopoverBody>\n </LinkDefaultVariantContext.Provider>\n </PopoverContainer>\n </div>\n );\n\n const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n return (\n <span\n {...baseProps}\n className={clsx(\n styles.root,\n baseProps.className,\n triggerType === 'filtering-token' && styles['root-filtering-token'],\n isInline && styles['no-wrap']\n )}\n ref={mergedRef}\n onMouseDown={() => {\n // Indicate there was a click inside popover recently, including nested portals.\n clickFrameId.current = requestAnimationFrame(() => {\n clickFrameId.current = null;\n });\n }}\n >\n {triggerType === 'text' ? (\n <button\n {...triggerProps}\n className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}\n tabIndex={triggerTabIndex}\n type=\"button\"\n aria-haspopup=\"dialog\"\n id={referrerId}\n aria-label={triggerAriaLabel}\n >\n {children}\n </button>\n ) : (\n <span {...triggerProps} id={referrerId}>\n {children}\n </span>\n )}\n {visible && (\n <ResetContextsForModal>\n {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n </ResetContextsForModal>\n )}\n </span>\n );\n}\n"]}
|
package/popover/styles.css.js
CHANGED
|
@@ -1,59 +1,58 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"arrow": "
|
|
5
|
-
"arrow-outer": "awsui_arrow-
|
|
6
|
-
"arrow-inner": "awsui_arrow-
|
|
7
|
-
"arrow-position-right-top": "awsui_arrow-position-right-
|
|
8
|
-
"arrow-position-right-bottom": "awsui_arrow-position-right-
|
|
9
|
-
"arrow-position-left-top": "awsui_arrow-position-left-
|
|
10
|
-
"arrow-position-left-bottom": "awsui_arrow-position-left-
|
|
11
|
-
"arrow-position-top-center": "awsui_arrow-position-top-
|
|
12
|
-
"arrow-position-top-right": "awsui_arrow-position-top-
|
|
13
|
-
"arrow-position-top-left": "awsui_arrow-position-top-
|
|
14
|
-
"arrow-position-top-responsive": "awsui_arrow-position-top-
|
|
15
|
-
"arrow-position-bottom-center": "awsui_arrow-position-bottom-
|
|
16
|
-
"arrow-position-bottom-right": "awsui_arrow-position-bottom-
|
|
17
|
-
"arrow-position-bottom-left": "awsui_arrow-position-bottom-
|
|
18
|
-
"arrow-position-bottom-responsive": "awsui_arrow-position-bottom-
|
|
19
|
-
"body": "
|
|
20
|
-
"body-overflow-visible": "awsui_body-overflow-
|
|
21
|
-
"has-dismiss": "awsui_has-
|
|
22
|
-
"dismiss": "
|
|
23
|
-
"dismiss-control": "awsui_dismiss-
|
|
24
|
-
"header-row": "awsui_header-
|
|
25
|
-
"header": "
|
|
26
|
-
"content": "
|
|
27
|
-
"content-overflow-visible": "awsui_content-overflow-
|
|
28
|
-
"container": "
|
|
29
|
-
"container-body": "awsui_container-
|
|
30
|
-
"container-body-variant-annotation": "awsui_container-body-variant-
|
|
31
|
-
"container-body-size-small": "awsui_container-body-size-
|
|
32
|
-
"fixed-width": "awsui_fixed-
|
|
33
|
-
"container-body-size-medium": "awsui_container-body-size-
|
|
34
|
-
"container-body-size-large": "awsui_container-body-size-
|
|
35
|
-
"container-arrow": "awsui_container-
|
|
36
|
-
"container-arrow-position-right-top": "awsui_container-arrow-position-right-
|
|
37
|
-
"container-arrow-position-right-bottom": "awsui_container-arrow-position-right-
|
|
38
|
-
"container-arrow-position-left-top": "awsui_container-arrow-position-left-
|
|
39
|
-
"container-arrow-position-left-bottom": "awsui_container-arrow-position-left-
|
|
40
|
-
"container-arrow-position-top-center": "awsui_container-arrow-position-top-
|
|
41
|
-
"container-arrow-position-top-right": "awsui_container-arrow-position-top-
|
|
42
|
-
"container-arrow-position-top-left": "awsui_container-arrow-position-top-
|
|
43
|
-
"container-arrow-position-top-responsive": "awsui_container-arrow-position-top-
|
|
44
|
-
"container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-
|
|
45
|
-
"container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-
|
|
46
|
-
"container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-
|
|
47
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
48
|
-
"refresh": "
|
|
49
|
-
"root": "
|
|
50
|
-
"no-wrap": "awsui_no-
|
|
51
|
-
"root-filtering-token": "awsui_root-filtering-
|
|
52
|
-
"trigger": "
|
|
53
|
-
"overflow-ellipsis": "awsui_overflow-
|
|
54
|
-
"trigger-type-text
|
|
55
|
-
"trigger-type-
|
|
56
|
-
"
|
|
57
|
-
"popover-inline-content": "awsui_popover-inline-content_xjuzf_7fmsc_1183"
|
|
4
|
+
"arrow": "awsui_arrow_xjuzf_hg5hv_289",
|
|
5
|
+
"arrow-outer": "awsui_arrow-outer_xjuzf_hg5hv_293",
|
|
6
|
+
"arrow-inner": "awsui_arrow-inner_xjuzf_hg5hv_293",
|
|
7
|
+
"arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_hg5hv_335",
|
|
8
|
+
"arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_hg5hv_335",
|
|
9
|
+
"arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_hg5hv_338",
|
|
10
|
+
"arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_hg5hv_338",
|
|
11
|
+
"arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_hg5hv_341",
|
|
12
|
+
"arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_hg5hv_341",
|
|
13
|
+
"arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_hg5hv_341",
|
|
14
|
+
"arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_hg5hv_341",
|
|
15
|
+
"arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_hg5hv_344",
|
|
16
|
+
"arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_hg5hv_344",
|
|
17
|
+
"arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_hg5hv_344",
|
|
18
|
+
"arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_hg5hv_344",
|
|
19
|
+
"body": "awsui_body_xjuzf_hg5hv_492",
|
|
20
|
+
"body-overflow-visible": "awsui_body-overflow-visible_xjuzf_hg5hv_528",
|
|
21
|
+
"has-dismiss": "awsui_has-dismiss_xjuzf_hg5hv_532",
|
|
22
|
+
"dismiss": "awsui_dismiss_xjuzf_hg5hv_537",
|
|
23
|
+
"dismiss-control": "awsui_dismiss-control_xjuzf_hg5hv_545",
|
|
24
|
+
"header-row": "awsui_header-row_xjuzf_hg5hv_549",
|
|
25
|
+
"header": "awsui_header_xjuzf_hg5hv_549",
|
|
26
|
+
"content": "awsui_content_xjuzf_hg5hv_574",
|
|
27
|
+
"content-overflow-visible": "awsui_content-overflow-visible_xjuzf_hg5hv_582",
|
|
28
|
+
"container": "awsui_container_xjuzf_hg5hv_730",
|
|
29
|
+
"container-body": "awsui_container-body_xjuzf_hg5hv_738",
|
|
30
|
+
"container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_hg5hv_778",
|
|
31
|
+
"container-body-size-small": "awsui_container-body-size-small_xjuzf_hg5hv_783",
|
|
32
|
+
"fixed-width": "awsui_fixed-width_xjuzf_hg5hv_786",
|
|
33
|
+
"container-body-size-medium": "awsui_container-body-size-medium_xjuzf_hg5hv_790",
|
|
34
|
+
"container-body-size-large": "awsui_container-body-size-large_xjuzf_hg5hv_797",
|
|
35
|
+
"container-arrow": "awsui_container-arrow_xjuzf_hg5hv_809",
|
|
36
|
+
"container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_hg5hv_813",
|
|
37
|
+
"container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_hg5hv_813",
|
|
38
|
+
"container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_hg5hv_830",
|
|
39
|
+
"container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_hg5hv_830",
|
|
40
|
+
"container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_hg5hv_847",
|
|
41
|
+
"container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_hg5hv_847",
|
|
42
|
+
"container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_hg5hv_847",
|
|
43
|
+
"container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_hg5hv_847",
|
|
44
|
+
"container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_hg5hv_863",
|
|
45
|
+
"container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_hg5hv_867",
|
|
46
|
+
"container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_hg5hv_871",
|
|
47
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_hg5hv_1",
|
|
48
|
+
"refresh": "awsui_refresh_xjuzf_hg5hv_1041",
|
|
49
|
+
"root": "awsui_root_xjuzf_hg5hv_1063",
|
|
50
|
+
"no-wrap": "awsui_no-wrap_xjuzf_hg5hv_1095",
|
|
51
|
+
"root-filtering-token": "awsui_root-filtering-token_xjuzf_hg5hv_1099",
|
|
52
|
+
"trigger": "awsui_trigger_xjuzf_hg5hv_1103",
|
|
53
|
+
"overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_hg5hv_1110",
|
|
54
|
+
"trigger-type-text": "awsui_trigger-type-text_xjuzf_hg5hv_1118",
|
|
55
|
+
"trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_hg5hv_1154",
|
|
56
|
+
"popover-inline-content": "awsui_popover-inline-content_xjuzf_hg5hv_1158"
|
|
58
57
|
};
|
|
59
58
|
|