@transferwise/components 0.0.0-experimental-15273df → 0.0.0-experimental-d6d5b6e

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 (155) hide show
  1. package/build/Calendar/Calendar.js +94 -16
  2. package/build/Calendar/Calendar.js.map +1 -1
  3. package/build/Calendar/Calendar.messages.js +12 -0
  4. package/build/Calendar/Calendar.messages.js.map +1 -1
  5. package/build/Calendar/Calendar.messages.mjs +12 -0
  6. package/build/Calendar/Calendar.messages.mjs.map +1 -1
  7. package/build/Calendar/Calendar.mjs +95 -17
  8. package/build/Calendar/Calendar.mjs.map +1 -1
  9. package/build/Calendar/DateHeader/DateHeader.js +5 -1
  10. package/build/Calendar/DateHeader/DateHeader.js.map +1 -1
  11. package/build/Calendar/DateHeader/DateHeader.mjs +5 -1
  12. package/build/Calendar/DateHeader/DateHeader.mjs.map +1 -1
  13. package/build/Calendar/DayCalendar/DayCalendar.js +14 -0
  14. package/build/Calendar/DayCalendar/DayCalendar.js.map +1 -1
  15. package/build/Calendar/DayCalendar/DayCalendar.mjs +14 -0
  16. package/build/Calendar/DayCalendar/DayCalendar.mjs.map +1 -1
  17. package/build/Calendar/DayCalendar/Table/DayCalendarTable.js +53 -19
  18. package/build/Calendar/DayCalendar/Table/DayCalendarTable.js.map +1 -1
  19. package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs +53 -19
  20. package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs.map +1 -1
  21. package/build/Calendar/MonthCalendar/MonthCalendar.js +6 -0
  22. package/build/Calendar/MonthCalendar/MonthCalendar.js.map +1 -1
  23. package/build/Calendar/MonthCalendar/MonthCalendar.mjs +6 -0
  24. package/build/Calendar/MonthCalendar/MonthCalendar.mjs.map +1 -1
  25. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js +8 -3
  26. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js.map +1 -1
  27. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs +8 -3
  28. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs.map +1 -1
  29. package/build/Calendar/{tableLink → TableLink}/TableLink.js +26 -11
  30. package/build/Calendar/TableLink/TableLink.js.map +1 -0
  31. package/build/Calendar/{tableLink → TableLink}/TableLink.mjs +26 -11
  32. package/build/Calendar/TableLink/TableLink.mjs.map +1 -0
  33. package/build/Calendar/YearCalendar/Table/YearCalendarTable.js +8 -3
  34. package/build/Calendar/YearCalendar/Table/YearCalendarTable.js.map +1 -1
  35. package/build/Calendar/YearCalendar/Table/YearCalendarTable.mjs +8 -3
  36. package/build/Calendar/YearCalendar/Table/YearCalendarTable.mjs.map +1 -1
  37. package/build/Calendar/YearCalendar/YearCalendar.js +7 -0
  38. package/build/Calendar/YearCalendar/YearCalendar.js.map +1 -1
  39. package/build/Calendar/YearCalendar/YearCalendar.mjs +7 -0
  40. package/build/Calendar/YearCalendar/YearCalendar.mjs.map +1 -1
  41. package/build/DateLookup/DateLookup.js +19 -9
  42. package/build/DateLookup/DateLookup.js.map +1 -1
  43. package/build/DateLookup/DateLookup.mjs +19 -9
  44. package/build/DateLookup/DateLookup.mjs.map +1 -1
  45. package/build/Sticky/Sticky.js +0 -1
  46. package/build/Sticky/Sticky.js.map +1 -1
  47. package/build/Sticky/Sticky.mjs +0 -1
  48. package/build/Sticky/Sticky.mjs.map +1 -1
  49. package/build/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.js +33 -0
  50. package/build/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.js.map +1 -0
  51. package/build/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.mjs +31 -0
  52. package/build/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.mjs.map +1 -0
  53. package/build/common/DateUtils/isDateDisabled/isDateDisabled.js +40 -0
  54. package/build/common/DateUtils/isDateDisabled/isDateDisabled.js.map +1 -0
  55. package/build/common/DateUtils/isDateDisabled/isDateDisabled.mjs +38 -0
  56. package/build/common/DateUtils/isDateDisabled/isDateDisabled.mjs.map +1 -0
  57. package/build/i18n/en.json +4 -0
  58. package/build/i18n/en.json.js +4 -0
  59. package/build/i18n/en.json.js.map +1 -1
  60. package/build/i18n/en.json.mjs +4 -0
  61. package/build/i18n/en.json.mjs.map +1 -1
  62. package/build/index.js +2 -2
  63. package/build/index.mjs +1 -1
  64. package/build/main.css +123 -48
  65. package/build/styles/Calendar/Calendar.css +112 -37
  66. package/build/styles/Calendar/TableLink/TableLink.css +115 -0
  67. package/build/styles/main.css +123 -48
  68. package/build/types/Calendar/Calendar.d.ts +16 -3
  69. package/build/types/Calendar/Calendar.d.ts.map +1 -1
  70. package/build/types/Calendar/Calendar.messages.d.ts +20 -0
  71. package/build/types/Calendar/Calendar.messages.d.ts.map +1 -1
  72. package/build/types/Calendar/Calendar.types.d.ts +32 -0
  73. package/build/types/Calendar/Calendar.types.d.ts.map +1 -0
  74. package/build/types/Calendar/DateHeader/DateHeader.d.ts +2 -0
  75. package/build/types/Calendar/DateHeader/DateHeader.d.ts.map +1 -1
  76. package/build/types/Calendar/DayCalendar/DayCalendar.d.ts +5 -1
  77. package/build/types/Calendar/DayCalendar/DayCalendar.d.ts.map +1 -1
  78. package/build/types/Calendar/DayCalendar/Table/DayCalendarTable.d.ts +4 -0
  79. package/build/types/Calendar/DayCalendar/Table/DayCalendarTable.d.ts.map +1 -1
  80. package/build/types/Calendar/MonthCalendar/MonthCalendar.d.ts +1 -0
  81. package/build/types/Calendar/MonthCalendar/MonthCalendar.d.ts.map +1 -1
  82. package/build/types/Calendar/MonthCalendar/Table/MonthCalendarTable.d.ts +2 -1
  83. package/build/types/Calendar/MonthCalendar/Table/MonthCalendarTable.d.ts.map +1 -1
  84. package/build/types/Calendar/{tableLink → TableLink}/TableLink.d.ts +3 -1
  85. package/build/types/Calendar/TableLink/TableLink.d.ts.map +1 -0
  86. package/build/types/Calendar/TableLink/index.d.ts.map +1 -0
  87. package/build/types/Calendar/YearCalendar/Table/YearCalendarTable.d.ts +2 -1
  88. package/build/types/Calendar/YearCalendar/Table/YearCalendarTable.d.ts.map +1 -1
  89. package/build/types/Calendar/YearCalendar/YearCalendar.d.ts +1 -0
  90. package/build/types/Calendar/YearCalendar/YearCalendar.d.ts.map +1 -1
  91. package/build/types/Calendar/index.d.ts +1 -0
  92. package/build/types/Calendar/index.d.ts.map +1 -1
  93. package/build/types/DateLookup/DateLookup.d.ts +23 -4
  94. package/build/types/DateLookup/DateLookup.d.ts.map +1 -1
  95. package/build/types/DateLookup/index.d.ts +1 -0
  96. package/build/types/DateLookup/index.d.ts.map +1 -1
  97. package/build/types/Sticky/Sticky.d.ts.map +1 -1
  98. package/build/types/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.d.ts +3 -0
  99. package/build/types/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.d.ts.map +1 -0
  100. package/build/types/common/DateUtils/index.d.ts +2 -0
  101. package/build/types/common/DateUtils/index.d.ts.map +1 -1
  102. package/build/types/common/DateUtils/isDateDisabled/isDateDisabled.d.ts +3 -0
  103. package/build/types/common/DateUtils/isDateDisabled/isDateDisabled.d.ts.map +1 -0
  104. package/build/types/index.d.ts +3 -2
  105. package/build/types/index.d.ts.map +1 -1
  106. package/build/types/test-utils/index.d.ts +8 -0
  107. package/build/types/test-utils/index.d.ts.map +1 -1
  108. package/package.json +1 -1
  109. package/src/Calendar/Calendar.css +112 -37
  110. package/src/Calendar/Calendar.disabledDates.test.tsx +518 -0
  111. package/src/Calendar/Calendar.less +5 -35
  112. package/src/Calendar/Calendar.messages.ts +21 -0
  113. package/src/Calendar/Calendar.test.tsx +217 -28
  114. package/src/Calendar/Calendar.tsx +136 -19
  115. package/src/Calendar/Calendar.types.ts +35 -0
  116. package/src/Calendar/DateHeader/DateHeader.tsx +6 -0
  117. package/src/Calendar/DayCalendar/DayCalendar.tsx +33 -1
  118. package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +62 -28
  119. package/src/Calendar/MonthCalendar/MonthCalendar.tsx +8 -0
  120. package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +15 -3
  121. package/src/Calendar/TableLink/TableLink.css +115 -0
  122. package/src/Calendar/TableLink/TableLink.less +68 -0
  123. package/src/Calendar/{tableLink → TableLink}/TableLink.tsx +29 -14
  124. package/src/Calendar/YearCalendar/Table/YearCalendarTable.tsx +15 -3
  125. package/src/Calendar/YearCalendar/YearCalendar.tsx +9 -0
  126. package/src/Calendar/_stories/Calendar.accessibility.docs.mdx +118 -0
  127. package/src/Calendar/_stories/Calendar.story.tsx +138 -4
  128. package/src/Calendar/index.ts +7 -0
  129. package/src/DateLookup/DateLookup.disabledDates.test.tsx +293 -0
  130. package/src/DateLookup/DateLookup.test.tsx +34 -37
  131. package/src/DateLookup/DateLookup.tsx +36 -13
  132. package/src/DateLookup/_stories/DateLookup.accessibility.docs.mdx +108 -0
  133. package/src/DateLookup/_stories/DateLookup.story.tsx +124 -2
  134. package/src/DateLookup/index.ts +6 -0
  135. package/src/Sticky/Sticky.test.tsx +0 -1
  136. package/src/Sticky/Sticky.tsx +0 -1
  137. package/src/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.test.ts +98 -0
  138. package/src/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.ts +45 -0
  139. package/src/common/DateUtils/index.ts +2 -0
  140. package/src/common/DateUtils/isDateDisabled/isDateDisabled.test.ts +159 -0
  141. package/src/common/DateUtils/isDateDisabled/isDateDisabled.ts +59 -0
  142. package/src/i18n/en.json +4 -0
  143. package/src/index.ts +3 -2
  144. package/src/main.css +123 -48
  145. package/src/main.less +0 -1
  146. package/build/Calendar/tableLink/TableLink.js.map +0 -1
  147. package/build/Calendar/tableLink/TableLink.mjs.map +0 -1
  148. package/build/styles/Sticky/Sticky.css +0 -4
  149. package/build/types/Calendar/tableLink/TableLink.d.ts.map +0 -1
  150. package/build/types/Calendar/tableLink/index.d.ts.map +0 -1
  151. package/src/Sticky/Sticky.css +0 -4
  152. package/src/Sticky/Sticky.less +0 -6
  153. package/src/Sticky/_stories/Sticky.test.story.tsx +0 -177
  154. /package/build/types/Calendar/{tableLink → TableLink}/index.d.ts +0 -0
  155. /package/src/Calendar/{tableLink → TableLink}/index.ts +0 -0
@@ -0,0 +1,159 @@
1
+ import { isDateDisabled } from './isDateDisabled';
2
+ import type { DisabledRules } from '../../../Calendar/Calendar.types';
3
+
4
+ describe('isDateDisabled', () => {
5
+ describe('when no rules provided', () => {
6
+ it('returns false when disabledRules is undefined', () => {
7
+ expect(isDateDisabled(new Date('2024-07-15'), undefined)).toBe(false);
8
+ });
9
+
10
+ it('returns false when disabledRules has only reason', () => {
11
+ const rules: DisabledRules = { reason: 'some reason' };
12
+ expect(isDateDisabled(new Date('2024-07-15'), rules)).toBe(false);
13
+ });
14
+ });
15
+
16
+ describe('weekdays', () => {
17
+ const rules: DisabledRules = {
18
+ weekdays: ['sat', 'sun'],
19
+ reason: 'Closed on weekends',
20
+ };
21
+
22
+ it('returns true for a Saturday', () => {
23
+ // 2024-07-13 is a Saturday
24
+ expect(isDateDisabled(new Date(2024, 6, 13), rules)).toBe(true);
25
+ });
26
+
27
+ it('returns true for a Sunday', () => {
28
+ // 2024-07-14 is a Sunday
29
+ expect(isDateDisabled(new Date(2024, 6, 14), rules)).toBe(true);
30
+ });
31
+
32
+ it('returns false for a Monday', () => {
33
+ // 2024-07-15 is a Monday
34
+ expect(isDateDisabled(new Date(2024, 6, 15), rules)).toBe(false);
35
+ });
36
+
37
+ it('returns false for a Friday', () => {
38
+ // 2024-07-12 is a Friday
39
+ expect(isDateDisabled(new Date(2024, 6, 12), rules)).toBe(false);
40
+ });
41
+
42
+ it('handles single weekday rule', () => {
43
+ const singleDay: DisabledRules = { weekdays: ['wed'], reason: 'Closed' };
44
+ // 2024-07-17 is a Wednesday
45
+ expect(isDateDisabled(new Date(2024, 6, 17), singleDay)).toBe(true);
46
+ // 2024-07-18 is a Thursday
47
+ expect(isDateDisabled(new Date(2024, 6, 18), singleDay)).toBe(false);
48
+ });
49
+ });
50
+
51
+ describe('specific dates', () => {
52
+ const rules: DisabledRules = {
53
+ dates: [new Date(2024, 6, 11), new Date(2025, 1, 12), new Date(2025, 4, 1)],
54
+ reason: 'Bank holidays',
55
+ };
56
+
57
+ it('returns true for a disabled date', () => {
58
+ expect(isDateDisabled(new Date(2024, 6, 11), rules)).toBe(true);
59
+ });
60
+
61
+ it('returns false for a non-disabled date', () => {
62
+ expect(isDateDisabled(new Date(2024, 6, 12), rules)).toBe(false);
63
+ });
64
+
65
+ it('compares date-only, ignoring time', () => {
66
+ const dateWithTime = new Date(2024, 6, 11, 14, 30, 0);
67
+ expect(isDateDisabled(dateWithTime, rules)).toBe(true);
68
+ });
69
+
70
+ it('handles disabled dates that have non-zero time components', () => {
71
+ const rulesWithTime: DisabledRules = {
72
+ dates: [new Date(2024, 6, 11, 23, 59, 59)],
73
+ reason: 'Holiday',
74
+ };
75
+ expect(isDateDisabled(new Date(2024, 6, 11), rulesWithTime)).toBe(true);
76
+ });
77
+ });
78
+
79
+ describe('ranges', () => {
80
+ const rules: DisabledRules = {
81
+ ranges: [
82
+ { start: new Date(2024, 2, 29), end: new Date(2024, 3, 3) },
83
+ { start: new Date(2024, 11, 24), end: new Date(2024, 11, 26) },
84
+ ],
85
+ reason: 'Scheduled maintenance',
86
+ };
87
+
88
+ it('returns true for start of range (inclusive)', () => {
89
+ expect(isDateDisabled(new Date(2024, 2, 29), rules)).toBe(true);
90
+ });
91
+
92
+ it('returns true for end of range (inclusive)', () => {
93
+ expect(isDateDisabled(new Date(2024, 3, 3), rules)).toBe(true);
94
+ });
95
+
96
+ it('returns true for date within range', () => {
97
+ expect(isDateDisabled(new Date(2024, 2, 31), rules)).toBe(true);
98
+ });
99
+
100
+ it('returns false for date before range', () => {
101
+ expect(isDateDisabled(new Date(2024, 2, 28), rules)).toBe(false);
102
+ });
103
+
104
+ it('returns false for date after range', () => {
105
+ expect(isDateDisabled(new Date(2024, 3, 4), rules)).toBe(false);
106
+ });
107
+
108
+ it('handles second range', () => {
109
+ expect(isDateDisabled(new Date(2024, 11, 25), rules)).toBe(true);
110
+ expect(isDateDisabled(new Date(2024, 11, 27), rules)).toBe(false);
111
+ });
112
+ });
113
+
114
+ describe('combined rules (additive)', () => {
115
+ const rules: DisabledRules = {
116
+ weekdays: ['sat', 'sun'],
117
+ dates: [new Date(2024, 6, 15)], // Monday
118
+ ranges: [{ start: new Date(2024, 6, 22), end: new Date(2024, 6, 24) }],
119
+ reason: 'Multiple rules',
120
+ };
121
+
122
+ it('disables by weekday', () => {
123
+ // 2024-07-13 is Saturday
124
+ expect(isDateDisabled(new Date(2024, 6, 13), rules)).toBe(true);
125
+ });
126
+
127
+ it('disables by specific date', () => {
128
+ // 2024-07-15 is Monday but explicitly disabled
129
+ expect(isDateDisabled(new Date(2024, 6, 15), rules)).toBe(true);
130
+ });
131
+
132
+ it('disables by range', () => {
133
+ // 2024-07-23 is Tuesday but in range
134
+ expect(isDateDisabled(new Date(2024, 6, 23), rules)).toBe(true);
135
+ });
136
+
137
+ it('allows date not matching any rule', () => {
138
+ // 2024-07-16 is Tuesday, not in dates or ranges
139
+ expect(isDateDisabled(new Date(2024, 6, 16), rules)).toBe(false);
140
+ });
141
+ });
142
+
143
+ describe('edge cases', () => {
144
+ it('handles empty weekdays array', () => {
145
+ const rules: DisabledRules = { weekdays: [], reason: 'Empty' };
146
+ expect(isDateDisabled(new Date(2024, 6, 13), rules)).toBe(false);
147
+ });
148
+
149
+ it('handles empty dates array', () => {
150
+ const rules: DisabledRules = { dates: [], reason: 'Empty' };
151
+ expect(isDateDisabled(new Date(2024, 6, 13), rules)).toBe(false);
152
+ });
153
+
154
+ it('handles empty ranges array', () => {
155
+ const rules: DisabledRules = { ranges: [], reason: 'Empty' };
156
+ expect(isDateDisabled(new Date(2024, 6, 13), rules)).toBe(false);
157
+ });
158
+ });
159
+ });
@@ -0,0 +1,59 @@
1
+ import type { DisabledRules, WeekDayType } from '../../../Calendar/Calendar.types';
2
+
3
+ const DAY_INDEX_TO_WEEKDAY: Record<number, WeekDayType> = {
4
+ 0: 'sun',
5
+ 1: 'mon',
6
+ 2: 'tue',
7
+ 3: 'wed',
8
+ 4: 'thu',
9
+ 5: 'fri',
10
+ 6: 'sat',
11
+ };
12
+
13
+ export function isDateDisabled(date: Date, disabledRules?: DisabledRules): boolean {
14
+ if (!disabledRules) return false;
15
+
16
+ if (disabledRules.weekdays?.length) {
17
+ const weekday = DAY_INDEX_TO_WEEKDAY[date.getDay()];
18
+ if (disabledRules.weekdays.includes(weekday)) return true;
19
+ }
20
+
21
+ if (disabledRules.dates?.length) {
22
+ const year = date.getFullYear();
23
+ const month = date.getMonth();
24
+ const day = date.getDate();
25
+ if (
26
+ disabledRules.dates.some(
27
+ (disabledDate) =>
28
+ disabledDate.getFullYear() === year &&
29
+ disabledDate.getMonth() === month &&
30
+ disabledDate.getDate() === day,
31
+ )
32
+ ) {
33
+ return true;
34
+ }
35
+ }
36
+
37
+ if (disabledRules.ranges?.length) {
38
+ const dateStart = date.getTime();
39
+ if (
40
+ disabledRules.ranges.some((range) => {
41
+ const rangeStart = new Date(
42
+ range.start.getFullYear(),
43
+ range.start.getMonth(),
44
+ range.start.getDate(),
45
+ ).getTime();
46
+ const rangeEnd = new Date(
47
+ range.end.getFullYear(),
48
+ range.end.getMonth(),
49
+ range.end.getDate(),
50
+ ).getTime();
51
+ return dateStart >= rangeStart && dateStart <= rangeEnd;
52
+ })
53
+ ) {
54
+ return true;
55
+ }
56
+ }
57
+
58
+ return false;
59
+ }
package/src/i18n/en.json CHANGED
@@ -12,6 +12,10 @@
12
12
  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
13
13
  "neptune.DateLookup.month": "month",
14
14
  "neptune.DateLookup.next": "next",
15
+ "neptune.DateLookup.notAvailable": "not available",
16
+ "neptune.DateLookup.outOfRangeAfter": "Please select a date on or after {min}.",
17
+ "neptune.DateLookup.outOfRangeBefore": "Please select a date on or before {max}.",
18
+ "neptune.DateLookup.outOfRangeBetween": "Please select a date between {min} and {max}.",
15
19
  "neptune.DateLookup.previous": "previous",
16
20
  "neptune.DateLookup.selected": "selected",
17
21
  "neptune.DateLookup.twentyYears": "20 years",
package/src/index.ts CHANGED
@@ -25,6 +25,8 @@ export type {
25
25
  ButtonProps as LegacyButtonProps,
26
26
  AnchorElementProps,
27
27
  } from './Button';
28
+ export type { CalendarProps } from './Calendar';
29
+ export type { DisabledRules, WeekDayType, DisabledDateRange } from './Calendar';
28
30
  export type { CardProps } from './_deprecated/Card';
29
31
  export type {
30
32
  CarouselProps,
@@ -55,7 +57,6 @@ export type {
55
57
  export type { BottomSheetProps } from './common/BottomSheet';
56
58
  export type { DateInputProps } from './DateInput';
57
59
  export type { DateLookupProps } from './DateLookup';
58
- export type { CalendarProps } from './Calendar';
59
60
  export type { DecisionProps } from './Decision';
60
61
  export type {
61
62
  DefinitionListProps,
@@ -201,6 +202,7 @@ export { default as Badge, BadgeAssets } from './_deprecated/Badge';
201
202
  export { default as Body } from './Body';
202
203
  export { default as Button } from './Button';
203
204
  export { default as IconButton } from './IconButton';
205
+ export { default as Calendar } from './Calendar';
204
206
  export { default as Carousel } from './Carousel';
205
207
  export { default as Card } from './_deprecated/Card';
206
208
  export { default as Checkbox } from './Checkbox';
@@ -216,7 +218,6 @@ export { default as BaseCard } from './common/BaseCard';
216
218
  export { default as CriticalCommsBanner } from './_deprecated/CriticalBanner';
217
219
  export { default as DateInput } from './DateInput';
218
220
  export { default as DateLookup } from './DateLookup';
219
- export { default as Calendar } from './Calendar';
220
221
  export { default as Decision } from './Decision';
221
222
  export { default as DefinitionList } from './DefinitionList';
222
223
  export { default as Dimmer } from './Dimmer';
package/src/main.css CHANGED
@@ -27269,46 +27269,12 @@ a[data-toggle="tooltip"] {
27269
27269
  pointer-events: auto;
27270
27270
  }
27271
27271
 
27272
- .tw-date-lookup-calendar {
27273
- min-width: 300px;
27274
- text-align: center;
27275
- table-layout: fixed;
27276
- border: none;
27277
- background-color: inherit;
27278
- }
27279
-
27280
- .tw-date-lookup-calendar thead {
27281
- background-color: transparent;
27282
- background-color: initial;
27283
- }
27284
-
27285
- .tw-date-lookup-calendar > tbody > tr > td.weekend button {
27286
- color: #5d7079;
27287
- color: var(--color-content-secondary);
27288
- }
27289
-
27290
- .tw-date-lookup-calendar > tbody > tr > td {
27291
- border: none;
27292
- padding: 4px;
27293
- padding: var(--size-4);
27294
- }
27295
-
27296
- @media (max-width: 320px) {
27297
- .tw-date-lookup-calendar > tbody > tr > td {
27298
- padding: 0;
27299
- }
27300
- }
27301
-
27302
- .tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
27303
- padding: 1px;
27304
- }
27305
-
27306
- .tw-date-lookup-calendar > tbody > tr > td button {
27272
+ .wds-Calendar__option--day,
27273
+ .wds-Calendar__option--month,
27274
+ .wds-Calendar__option--year {
27307
27275
  width: 100%;
27308
27276
  padding: 4px 0;
27309
27277
  padding: var(--size-4) 0;
27310
- color: #0097c7;
27311
- color: var(--color-content-accent);
27312
27278
  border: transparent;
27313
27279
  border-radius: 10px;
27314
27280
  border-radius: var(--radius-small);
@@ -27320,12 +27286,92 @@ a[data-toggle="tooltip"] {
27320
27286
  }
27321
27287
 
27322
27288
  @media (max-width: 320px) {
27323
- .tw-date-lookup-calendar > tbody > tr > td button {
27289
+ .wds-Calendar__option--day,
27290
+ .wds-Calendar__option--month,
27291
+ .wds-Calendar__option--year {
27324
27292
  padding: 0;
27325
27293
  }
27326
27294
  }
27327
27295
 
27328
- .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
27296
+ .wds-Calendar__option--day:focus,
27297
+ .wds-Calendar__option--month:focus,
27298
+ .wds-Calendar__option--year:focus {
27299
+ background-color: var(--color-background-screen-hover);
27300
+ }
27301
+
27302
+ .wds-Calendar__option--day.disabled,
27303
+ .wds-Calendar__option--month.disabled,
27304
+ .wds-Calendar__option--year.disabled,
27305
+ .wds-Calendar__option--day[aria-disabled="true"],
27306
+ .wds-Calendar__option--month[aria-disabled="true"],
27307
+ .wds-Calendar__option--year[aria-disabled="true"] {
27308
+ --ring-outline-color: var(--color-sentiment-content-primary);
27309
+ color: #768e9c;
27310
+ color: var(--color-content-tertiary);
27311
+ cursor: not-allowed;
27312
+ }
27313
+
27314
+ .wds-Calendar__option--day.disabled:hover,
27315
+ .wds-Calendar__option--month.disabled:hover,
27316
+ .wds-Calendar__option--year.disabled:hover,
27317
+ .wds-Calendar__option--day[aria-disabled="true"]:hover,
27318
+ .wds-Calendar__option--month[aria-disabled="true"]:hover,
27319
+ .wds-Calendar__option--year[aria-disabled="true"]:hover,
27320
+ .wds-Calendar__option--day.disabled:focus,
27321
+ .wds-Calendar__option--month.disabled:focus,
27322
+ .wds-Calendar__option--year.disabled:focus,
27323
+ .wds-Calendar__option--day[aria-disabled="true"]:focus,
27324
+ .wds-Calendar__option--month[aria-disabled="true"]:focus,
27325
+ .wds-Calendar__option--year[aria-disabled="true"]:focus {
27326
+ filter: initial;
27327
+ opacity: 1;
27328
+ opacity: initial;
27329
+ background-color: var(--color-sentiment-background-surface);
27330
+ color: var(--color-sentiment-content-primary);
27331
+ }
27332
+
27333
+ .wds-Calendar__option--day.disabled.active,
27334
+ .wds-Calendar__option--month.disabled.active,
27335
+ .wds-Calendar__option--year.disabled.active,
27336
+ .wds-Calendar__option--day[aria-disabled="true"].active,
27337
+ .wds-Calendar__option--month[aria-disabled="true"].active,
27338
+ .wds-Calendar__option--year[aria-disabled="true"].active,
27339
+ .wds-Calendar__option--day.disabled.active:hover,
27340
+ .wds-Calendar__option--month.disabled.active:hover,
27341
+ .wds-Calendar__option--year.disabled.active:hover,
27342
+ .wds-Calendar__option--day[aria-disabled="true"].active:hover,
27343
+ .wds-Calendar__option--month[aria-disabled="true"].active:hover,
27344
+ .wds-Calendar__option--year[aria-disabled="true"].active:hover,
27345
+ .wds-Calendar__option--day.disabled.active:active,
27346
+ .wds-Calendar__option--month.disabled.active:active,
27347
+ .wds-Calendar__option--year.disabled.active:active,
27348
+ .wds-Calendar__option--day[aria-disabled="true"].active:active,
27349
+ .wds-Calendar__option--month[aria-disabled="true"].active:active,
27350
+ .wds-Calendar__option--year[aria-disabled="true"].active:active,
27351
+ .wds-Calendar__option--day.disabled.active:focus,
27352
+ .wds-Calendar__option--month.disabled.active:focus,
27353
+ .wds-Calendar__option--year.disabled.active:focus,
27354
+ .wds-Calendar__option--day[aria-disabled="true"].active:focus,
27355
+ .wds-Calendar__option--month[aria-disabled="true"].active:focus,
27356
+ .wds-Calendar__option--year[aria-disabled="true"].active:focus {
27357
+ filter: initial;
27358
+ opacity: 1;
27359
+ opacity: initial;
27360
+ background-color: var(--color-sentiment-interactive-primary);
27361
+ color: var(--color-sentiment-interactive-secondary);
27362
+ }
27363
+
27364
+ .wds-Calendar__option--day.disabled.today,
27365
+ .wds-Calendar__option--month.disabled.today,
27366
+ .wds-Calendar__option--year.disabled.today,
27367
+ .wds-Calendar__option--day[aria-disabled="true"].today,
27368
+ .wds-Calendar__option--month[aria-disabled="true"].today,
27369
+ .wds-Calendar__option--year[aria-disabled="true"].today {
27370
+ text-decoration-color: #768e9c;
27371
+ text-decoration-color: var(--color-content-tertiary);
27372
+ }
27373
+
27374
+ .wds-Calendar__option--day {
27329
27375
  height: 40px;
27330
27376
  height: var(--size-40);
27331
27377
  border-radius: 9999px;
@@ -27340,19 +27386,53 @@ a[data-toggle="tooltip"] {
27340
27386
  justify-content: center;
27341
27387
  }
27342
27388
 
27343
- .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
27389
+ .wds-Calendar__option--day.today {
27344
27390
  -webkit-text-decoration: underline;
27345
27391
  text-decoration: underline;
27346
27392
  text-decoration-thickness: 2px;
27347
27393
  text-underline-offset: 4px;
27348
27394
  }
27349
27395
 
27350
- .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
27351
- .tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
27396
+ .tw-date-lookup-calendar {
27397
+ min-width: 300px;
27398
+ text-align: center;
27399
+ table-layout: fixed;
27400
+ border: none;
27401
+ background-color: inherit;
27402
+ }
27403
+
27404
+ .tw-date-lookup-calendar thead {
27405
+ background-color: transparent;
27406
+ background-color: initial;
27407
+ }
27408
+
27409
+ .tw-date-lookup-calendar > tbody > tr > td.weekend button {
27410
+ color: #5d7079;
27411
+ color: var(--color-content-secondary);
27412
+ }
27413
+
27414
+ .tw-date-lookup-calendar > tbody > tr > td {
27415
+ border: none;
27416
+ padding: 4px;
27417
+ padding: var(--size-4);
27418
+ }
27419
+
27420
+ @media (max-width: 320px) {
27421
+ .tw-date-lookup-calendar > tbody > tr > td {
27422
+ padding: 0;
27423
+ }
27424
+ }
27425
+
27426
+ .tw-date-lookup-calendar > tbody > tr > td:has(.wds-Calendar__option--day) {
27427
+ padding: 1px;
27428
+ }
27429
+
27430
+ .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus:not(.disabled):not([aria-disabled="true"]),
27431
+ .tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled):not([aria-disabled="true"]) {
27352
27432
  background-color: var(--color-background-screen-hover);
27353
27433
  }
27354
27434
 
27355
- .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
27435
+ .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active:not([aria-disabled="true"]) {
27356
27436
  background-color: var(--color-interactive-primary);
27357
27437
  color: var(--color-interactive-contrast);
27358
27438
  }
@@ -32682,11 +32762,6 @@ html:not([dir="rtl"]) .np-navigation-option {
32682
32762
  will-change: width;
32683
32763
  }
32684
32764
 
32685
- .np-sticky.sliding-panel--open-bottom {
32686
- padding-bottom: env(safe-area-inset-bottom, 0px);
32687
- padding-bottom: var(--np-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
32688
- }
32689
-
32690
32765
  .np-select .np-dropdown-toggle {
32691
32766
  background-color: #ffffff;
32692
32767
  background-color: var(--color-background-screen);
package/src/main.less CHANGED
@@ -78,7 +78,6 @@
78
78
  @import "./Snackbar/Snackbar.less";
79
79
  @import "./StatusIcon/StatusIcon.less";
80
80
  @import "./Stepper/Stepper.less";
81
- @import "./Sticky/Sticky.less";
82
81
  @import "./_deprecated/Select/Select.less";
83
82
  @import "./SegmentedControl/SegmentedControl.less";
84
83
  @import "./_deprecated/Summary/Summary.less";
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableLink.js","sources":["../../../src/Calendar/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\n\ninterface TableLinkProps {\n item: number;\n type: 'day' | 'month' | 'year';\n title?: string;\n longTitle?: string;\n active: boolean;\n disabled: boolean;\n today: boolean;\n autofocus?: boolean;\n onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n item,\n type,\n title,\n longTitle,\n active,\n disabled,\n today,\n autofocus,\n onClick,\n}: TableLinkProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n\n useEffect(() => {\n if (autofocus) {\n setTimeout(() => {\n buttonRef.current?.focus();\n }, 0);\n }\n }, [autofocus]);\n\n const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n if (!disabled) {\n onClick(item);\n }\n };\n\n const calculateAriaLabel = () => {\n if (active) {\n return `${longTitle || title || ''}, ${intl.formatMessage(\n messages.selected,\n )} ${intl.formatMessage(messages[type])}`;\n }\n return longTitle || title;\n };\n\n return (\n <button\n ref={buttonRef}\n type=\"button\"\n className={clsx(\n `tw-date-lookup-${type}-option np-text-body-default-bold`,\n { active: !!active },\n { today: !!today },\n )}\n disabled={disabled}\n tabIndex={autofocus ? 0 : -1}\n aria-label={calculateAriaLabel()}\n aria-pressed={active}\n onClick={onCalendarClick}\n >\n {title || item}\n </button>\n );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,yBAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,yBAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,SAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableLink.mjs","sources":["../../../src/Calendar/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\n\ninterface TableLinkProps {\n item: number;\n type: 'day' | 'month' | 'year';\n title?: string;\n longTitle?: string;\n active: boolean;\n disabled: boolean;\n today: boolean;\n autofocus?: boolean;\n onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n item,\n type,\n title,\n longTitle,\n active,\n disabled,\n today,\n autofocus,\n onClick,\n}: TableLinkProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n\n useEffect(() => {\n if (autofocus) {\n setTimeout(() => {\n buttonRef.current?.focus();\n }, 0);\n }\n }, [autofocus]);\n\n const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n if (!disabled) {\n onClick(item);\n }\n };\n\n const calculateAriaLabel = () => {\n if (active) {\n return `${longTitle || title || ''}, ${intl.formatMessage(\n messages.selected,\n )} ${intl.formatMessage(messages[type])}`;\n }\n return longTitle || title;\n };\n\n return (\n <button\n ref={buttonRef}\n type=\"button\"\n className={clsx(\n `tw-date-lookup-${type}-option np-text-body-default-bold`,\n { active: !!active },\n { today: !!today },\n )}\n disabled={disabled}\n tabIndex={autofocus ? 0 : -1}\n aria-label={calculateAriaLabel()}\n aria-pressed={active}\n onClick={onCalendarClick}\n >\n {title || item}\n </button>\n );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,QAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,QAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,IAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}
@@ -1,4 +0,0 @@
1
- .np-sticky.sliding-panel--open-bottom {
2
- padding-bottom: env(safe-area-inset-bottom, 0px);
3
- padding-bottom: var(--np-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
4
- }
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/Calendar/tableLink/TableLink.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,SAAS,GAAI,gFAUhB,cAAc,gCA8ChB,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Calendar/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
@@ -1,4 +0,0 @@
1
- .np-sticky.sliding-panel--open-bottom {
2
- padding-bottom: env(safe-area-inset-bottom, 0px);
3
- padding-bottom: var(--np-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
4
- }
@@ -1,6 +0,0 @@
1
- .np-sticky.sliding-panel--open-bottom {
2
- padding-bottom: var(
3
- --np-sticky-safe-area-inset-bottom,
4
- env(safe-area-inset-bottom, 0px)
5
- );
6
- }