@servicetitan/anvil2 1.46.3 → 1.46.5

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 (50) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/{Calendar-Cn0fOgog.js → Calendar-BqOvsaby.js} +148 -148
  3. package/dist/{Calendar-Cn0fOgog.js.map → Calendar-BqOvsaby.js.map} +1 -1
  4. package/dist/Calendar.js +1 -1
  5. package/dist/{DateField-qHdgwSlB.js → DateField-DLqKbCcm.js} +2 -2
  6. package/dist/{DateField-qHdgwSlB.js.map → DateField-DLqKbCcm.js.map} +1 -1
  7. package/dist/DateField.js +1 -1
  8. package/dist/{DateFieldRange-GNpWV70g.js → DateFieldRange-DI-iF-sd.js} +3 -3
  9. package/dist/{DateFieldRange-GNpWV70g.js.map → DateFieldRange-DI-iF-sd.js.map} +1 -1
  10. package/dist/DateFieldRange.js +1 -1
  11. package/dist/{DateFieldSingle-B9caNibj.js → DateFieldSingle-BXakaSIE.js} +3 -3
  12. package/dist/{DateFieldSingle-B9caNibj.js.map → DateFieldSingle-BXakaSIE.js.map} +1 -1
  13. package/dist/DateFieldSingle.js +1 -1
  14. package/dist/{Dialog-BHFLnFNQ.js → Dialog-xsgqM6e1.js} +10 -17
  15. package/dist/Dialog-xsgqM6e1.js.map +1 -0
  16. package/dist/Dialog.js +1 -1
  17. package/dist/DndSort.js +46 -6
  18. package/dist/DndSort.js.map +1 -1
  19. package/dist/{Drawer-BDA7Sjj9.js → Drawer-DpN7wUNy.js} +11 -18
  20. package/dist/Drawer-DpN7wUNy.js.map +1 -0
  21. package/dist/Drawer.js +1 -1
  22. package/dist/{Page-BfH2mGSt.js → Page-CRuqAlNu.js} +2 -2
  23. package/dist/{Page-BfH2mGSt.js.map → Page-CRuqAlNu.js.map} +1 -1
  24. package/dist/Page.js +1 -1
  25. package/dist/{Toolbar-BXGTrR6o.js → Toolbar-B1FUI3bF.js} +81 -35
  26. package/dist/Toolbar-B1FUI3bF.js.map +1 -0
  27. package/dist/Toolbar.js +1 -1
  28. package/dist/beta.js +1 -1
  29. package/dist/components/Checkbox/Checkbox.d.ts +1 -1
  30. package/dist/components/Dialog/internal/useInitialFocus.d.ts +15 -0
  31. package/dist/components/DndSort/internal/DndSortOverlay.d.ts +1 -1
  32. package/dist/components/NumberField/NumberField.d.ts +2 -2
  33. package/dist/components/Radio/Radio.d.ts +1 -1
  34. package/dist/index.js +86 -38
  35. package/dist/index.js.map +1 -1
  36. package/dist/internal/components/index.d.ts +1 -0
  37. package/dist/internal/hooks/index.d.ts +2 -2
  38. package/dist/internal/hooks/usePlatform/index.d.ts +1 -1
  39. package/dist/internal/index.d.ts +5 -0
  40. package/dist/internal/types/argTypes.d.ts +154 -0
  41. package/dist/internal/types/index.d.ts +1 -0
  42. package/dist/{useKeyboardFocusables-ek2mYel-.js → useInitialFocus-CAFMgbJG.js} +27 -2
  43. package/dist/useInitialFocus-CAFMgbJG.js.map +1 -0
  44. package/dist/{utils-CnKBdBNm.js → utils-Dh3aegV3.js} +2 -2
  45. package/dist/{utils-CnKBdBNm.js.map → utils-Dh3aegV3.js.map} +1 -1
  46. package/package.json +1 -1
  47. package/dist/Dialog-BHFLnFNQ.js.map +0 -1
  48. package/dist/Drawer-BDA7Sjj9.js.map +0 -1
  49. package/dist/Toolbar-BXGTrR6o.js.map +0 -1
  50. package/dist/useKeyboardFocusables-ek2mYel-.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @servicetitan/anvil2
2
2
 
3
+ ## 1.46.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1560](https://github.com/servicetitan/hammer/pull/1560) [`7b5cebb`](https://github.com/servicetitan/hammer/commit/7b5cebb9a5b55c51cff17d4f7015b539bc462e17) Thanks [@ericag1985](https://github.com/ericag1985)! - [Toolbar] Improve toolbar select keyboard interactions
8
+
9
+ - [#1560](https://github.com/servicetitan/hammer/pull/1560) [`7b5cebb`](https://github.com/servicetitan/hammer/commit/7b5cebb9a5b55c51cff17d4f7015b539bc462e17) Thanks [@ericag1985](https://github.com/ericag1985)! - [Toolbar] Fixing select not closing when option chosen
10
+
11
+ - [#1568](https://github.com/servicetitan/hammer/pull/1568) [`0304b60`](https://github.com/servicetitan/hammer/commit/0304b60d6662d17efc400aa00e67d55fe0c2e94a) Thanks [@ericag1985](https://github.com/ericag1985)! - [Toolbar] Pass `ref` to `Toolbar.Button`
12
+
13
+ ## 1.46.4
14
+
15
+ ### Patch Changes
16
+
17
+ - [#1561](https://github.com/servicetitan/hammer/pull/1561) [`17194e1`](https://github.com/servicetitan/hammer/commit/17194e14b7635e61ddc497a5a05d1857b3843e16) Thanks [@rgdelato](https://github.com/rgdelato)! - [DnDSort] Fix `DnDSort` overlay position inside of `Dialog`/`Drawer`
18
+
19
+ - [#1564](https://github.com/servicetitan/hammer/pull/1564) [`9292fe3`](https://github.com/servicetitan/hammer/commit/9292fe31762595bb16651b522e3bba04d4367b09) Thanks [@AdamLantz](https://github.com/AdamLantz)! - [Drawer, Dialog] Fix initial focus logic running after later DOM changes
20
+
21
+ - [#1564](https://github.com/servicetitan/hammer/pull/1564) [`9292fe3`](https://github.com/servicetitan/hammer/commit/9292fe31762595bb16651b522e3bba04d4367b09) Thanks [@AdamLantz](https://github.com/AdamLantz)! - [Dialog] Fix incorrect initial focus target
22
+
3
23
  ## 1.46.3
4
24
 
5
25
  ### Patch Changes
@@ -9103,153 +9103,6 @@ const CalendarMonth = forwardRef(
9103
9103
  );
9104
9104
  CalendarMonth.displayName = "CalendarMonth";
9105
9105
 
9106
- const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref) => {
9107
- const { defaultTimeZone, maxDate, minDate, selectedMonth, selectedYear } = useCalendar();
9108
- const monthSelectionRef = useRef(null);
9109
- const combinedRef = useMergeRefs([ref, monthSelectionRef]);
9110
- const currentDate = useMemo(
9111
- () => DateTime.fromObject({ year: selectedYear, month: selectedMonth }).setZone(defaultTimeZone).startOf("day"),
9112
- [defaultTimeZone, selectedYear, selectedMonth]
9113
- );
9114
- const dates = useMemo(
9115
- () => Array.from({ length: 12 }, (_, i) => {
9116
- const date = DateTime.fromObject({
9117
- year: selectedYear,
9118
- month: 1
9119
- }).plus({
9120
- month: i
9121
- });
9122
- const disabled = minDate && date < minDate && !date.hasSame(minDate, "month") || maxDate && date > maxDate && !date.hasSame(maxDate, "month");
9123
- return {
9124
- month: date.month,
9125
- disabled: disabled ?? false
9126
- };
9127
- }),
9128
- [maxDate, minDate, selectedYear]
9129
- );
9130
- const classes = cx(styles$1["month-selection"], props.className);
9131
- const [focusedIndex, setFocusedIndex] = useState(selectedMonth - 1);
9132
- useEffect(() => {
9133
- if (minDate || maxDate) {
9134
- let index = dates.findIndex(({ month }) => month === selectedMonth);
9135
- while (dates[index].disabled && index < 11) {
9136
- index++;
9137
- }
9138
- setFocusedIndex(index);
9139
- } else {
9140
- setFocusedIndex(selectedMonth - 1);
9141
- }
9142
- }, [selectedMonth, minDate, maxDate, dates]);
9143
- const handleKeyDown = useCallback(
9144
- (e) => {
9145
- const target = e.target;
9146
- const cards = monthSelectionRef.current?.querySelectorAll(
9147
- "input[type='checkbox']"
9148
- );
9149
- if (!cards || cards.length === 0) {
9150
- return;
9151
- }
9152
- const cardArray = Array.from(cards);
9153
- const currentIndex = cardArray.indexOf(target);
9154
- if (currentIndex === -1) return;
9155
- const updateFocusedIndex = (index) => {
9156
- e.preventDefault();
9157
- cardArray[index].focus();
9158
- setFocusedIndex(index);
9159
- };
9160
- let newIndex;
9161
- switch (e.key) {
9162
- case "ArrowLeft":
9163
- newIndex = currentIndex > 0 ? currentIndex - 1 : 11;
9164
- while (dates[newIndex].disabled) {
9165
- newIndex = newIndex > 0 ? newIndex - 1 : 11;
9166
- }
9167
- updateFocusedIndex(newIndex);
9168
- break;
9169
- case "ArrowRight":
9170
- newIndex = currentIndex < 11 ? currentIndex + 1 : 0;
9171
- while (dates[newIndex].disabled) {
9172
- newIndex = newIndex < 11 ? newIndex + 1 : 0;
9173
- }
9174
- updateFocusedIndex(newIndex);
9175
- break;
9176
- case "ArrowUp":
9177
- if (currentIndex < 3) {
9178
- newIndex = currentIndex + 9;
9179
- } else {
9180
- newIndex = currentIndex - 3;
9181
- }
9182
- while (dates[newIndex].disabled) {
9183
- if (newIndex > 2) {
9184
- newIndex -= 3;
9185
- } else {
9186
- newIndex += 9;
9187
- }
9188
- }
9189
- updateFocusedIndex(newIndex);
9190
- break;
9191
- case "ArrowDown":
9192
- if (currentIndex > 8) {
9193
- newIndex = currentIndex - 9;
9194
- } else {
9195
- newIndex = currentIndex + 3;
9196
- }
9197
- while (dates[newIndex].disabled) {
9198
- if (newIndex < 9) {
9199
- newIndex += 3;
9200
- } else {
9201
- newIndex -= 9;
9202
- }
9203
- }
9204
- updateFocusedIndex(newIndex);
9205
- break;
9206
- case "Enter":
9207
- case " ":
9208
- e.preventDefault();
9209
- if (!dates[currentIndex].disabled) {
9210
- onMonthSelection(dates[currentIndex].month);
9211
- }
9212
- break;
9213
- }
9214
- },
9215
- [dates, onMonthSelection]
9216
- );
9217
- return /* @__PURE__ */ jsx(
9218
- "div",
9219
- {
9220
- ref: combinedRef,
9221
- "data-anv": "calendar-month-selection",
9222
- className: classes,
9223
- ...props,
9224
- children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Calendar month selection", children: /* @__PURE__ */ jsx(
9225
- Grid,
9226
- {
9227
- templateColumns: "repeat(3, minmax(0, 1fr))",
9228
- gap: 3,
9229
- onKeyDown: handleKeyDown,
9230
- role: "row",
9231
- children: dates.map(({ month, disabled }, index) => /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
9232
- SelectCard,
9233
- {
9234
- id: month.toString(),
9235
- disabled,
9236
- onChange: () => onMonthSelection(month),
9237
- checked: selectedMonth === month && selectedYear === currentDate.year,
9238
- checkboxProps: {
9239
- className: styles$1["selection-checkbox"],
9240
- tabIndex: focusedIndex === index ? 0 : -1
9241
- },
9242
- className: styles$1["selection-card"],
9243
- children: DateTime.fromObject({ month }).toFormat("MMMM")
9244
- }
9245
- ) }, month.toString()))
9246
- }
9247
- ) })
9248
- }
9249
- );
9250
- });
9251
- CalendarMonthSelection.displayName = "CalendarMonthSelection";
9252
-
9253
9106
  function memo(getDeps, fn, opts) {
9254
9107
  let deps = opts.initialDeps ?? [];
9255
9108
  let result;
@@ -10365,6 +10218,153 @@ const YearSelector = forwardRef(
10365
10218
  );
10366
10219
  YearSelector.displayName = "YearSelector";
10367
10220
 
10221
+ const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref) => {
10222
+ const { defaultTimeZone, maxDate, minDate, selectedMonth, selectedYear } = useCalendar();
10223
+ const monthSelectionRef = useRef(null);
10224
+ const combinedRef = useMergeRefs([ref, monthSelectionRef]);
10225
+ const currentDate = useMemo(
10226
+ () => DateTime.fromObject({ year: selectedYear, month: selectedMonth }).setZone(defaultTimeZone).startOf("day"),
10227
+ [defaultTimeZone, selectedYear, selectedMonth]
10228
+ );
10229
+ const dates = useMemo(
10230
+ () => Array.from({ length: 12 }, (_, i) => {
10231
+ const date = DateTime.fromObject({
10232
+ year: selectedYear,
10233
+ month: 1
10234
+ }).plus({
10235
+ month: i
10236
+ });
10237
+ const disabled = minDate && date < minDate && !date.hasSame(minDate, "month") || maxDate && date > maxDate && !date.hasSame(maxDate, "month");
10238
+ return {
10239
+ month: date.month,
10240
+ disabled: disabled ?? false
10241
+ };
10242
+ }),
10243
+ [maxDate, minDate, selectedYear]
10244
+ );
10245
+ const classes = cx(styles$1["month-selection"], props.className);
10246
+ const [focusedIndex, setFocusedIndex] = useState(selectedMonth - 1);
10247
+ useEffect(() => {
10248
+ if (minDate || maxDate) {
10249
+ let index = dates.findIndex(({ month }) => month === selectedMonth);
10250
+ while (dates[index].disabled && index < 11) {
10251
+ index++;
10252
+ }
10253
+ setFocusedIndex(index);
10254
+ } else {
10255
+ setFocusedIndex(selectedMonth - 1);
10256
+ }
10257
+ }, [selectedMonth, minDate, maxDate, dates]);
10258
+ const handleKeyDown = useCallback(
10259
+ (e) => {
10260
+ const target = e.target;
10261
+ const cards = monthSelectionRef.current?.querySelectorAll(
10262
+ "input[type='checkbox']"
10263
+ );
10264
+ if (!cards || cards.length === 0) {
10265
+ return;
10266
+ }
10267
+ const cardArray = Array.from(cards);
10268
+ const currentIndex = cardArray.indexOf(target);
10269
+ if (currentIndex === -1) return;
10270
+ const updateFocusedIndex = (index) => {
10271
+ e.preventDefault();
10272
+ cardArray[index].focus();
10273
+ setFocusedIndex(index);
10274
+ };
10275
+ let newIndex;
10276
+ switch (e.key) {
10277
+ case "ArrowLeft":
10278
+ newIndex = currentIndex > 0 ? currentIndex - 1 : 11;
10279
+ while (dates[newIndex].disabled) {
10280
+ newIndex = newIndex > 0 ? newIndex - 1 : 11;
10281
+ }
10282
+ updateFocusedIndex(newIndex);
10283
+ break;
10284
+ case "ArrowRight":
10285
+ newIndex = currentIndex < 11 ? currentIndex + 1 : 0;
10286
+ while (dates[newIndex].disabled) {
10287
+ newIndex = newIndex < 11 ? newIndex + 1 : 0;
10288
+ }
10289
+ updateFocusedIndex(newIndex);
10290
+ break;
10291
+ case "ArrowUp":
10292
+ if (currentIndex < 3) {
10293
+ newIndex = currentIndex + 9;
10294
+ } else {
10295
+ newIndex = currentIndex - 3;
10296
+ }
10297
+ while (dates[newIndex].disabled) {
10298
+ if (newIndex > 2) {
10299
+ newIndex -= 3;
10300
+ } else {
10301
+ newIndex += 9;
10302
+ }
10303
+ }
10304
+ updateFocusedIndex(newIndex);
10305
+ break;
10306
+ case "ArrowDown":
10307
+ if (currentIndex > 8) {
10308
+ newIndex = currentIndex - 9;
10309
+ } else {
10310
+ newIndex = currentIndex + 3;
10311
+ }
10312
+ while (dates[newIndex].disabled) {
10313
+ if (newIndex < 9) {
10314
+ newIndex += 3;
10315
+ } else {
10316
+ newIndex -= 9;
10317
+ }
10318
+ }
10319
+ updateFocusedIndex(newIndex);
10320
+ break;
10321
+ case "Enter":
10322
+ case " ":
10323
+ e.preventDefault();
10324
+ if (!dates[currentIndex].disabled) {
10325
+ onMonthSelection(dates[currentIndex].month);
10326
+ }
10327
+ break;
10328
+ }
10329
+ },
10330
+ [dates, onMonthSelection]
10331
+ );
10332
+ return /* @__PURE__ */ jsx(
10333
+ "div",
10334
+ {
10335
+ ref: combinedRef,
10336
+ "data-anv": "calendar-month-selection",
10337
+ className: classes,
10338
+ ...props,
10339
+ children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Calendar month selection", children: /* @__PURE__ */ jsx(
10340
+ Grid,
10341
+ {
10342
+ templateColumns: "repeat(3, minmax(0, 1fr))",
10343
+ gap: 3,
10344
+ onKeyDown: handleKeyDown,
10345
+ role: "row",
10346
+ children: dates.map(({ month, disabled }, index) => /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
10347
+ SelectCard,
10348
+ {
10349
+ id: month.toString(),
10350
+ disabled,
10351
+ onChange: () => onMonthSelection(month),
10352
+ checked: selectedMonth === month && selectedYear === currentDate.year,
10353
+ checkboxProps: {
10354
+ className: styles$1["selection-checkbox"],
10355
+ tabIndex: focusedIndex === index ? 0 : -1
10356
+ },
10357
+ className: styles$1["selection-card"],
10358
+ children: DateTime.fromObject({ month }).toFormat("MMMM")
10359
+ }
10360
+ ) }, month.toString()))
10361
+ }
10362
+ ) })
10363
+ }
10364
+ );
10365
+ });
10366
+ CalendarMonthSelection.displayName = "CalendarMonthSelection";
10367
+
10368
10368
  const toolbarFocusStates = ["month", "year", "next", "prev", "now"];
10369
10369
  const CalendarElement = forwardRef(
10370
10370
  (props, ref) => {
@@ -10832,4 +10832,4 @@ const Calendar = Object.assign(CalendarElement, {
10832
10832
  });
10833
10833
 
10834
10834
  export { Calendar as C, DateTime as D, CalendarNow as a, CalendarYearButton as b, CalendarPrev as c, CalendarNext as d, CalendarMonthButton as e, CalendarMonth as f, isValidDate as i, toDateString as t };
10835
- //# sourceMappingURL=Calendar-Cn0fOgog.js.map
10835
+ //# sourceMappingURL=Calendar-BqOvsaby.js.map