@jobber/components 8.0.2 → 8.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -79,7 +79,6 @@
79
79
  [ProgressBar](./ProgressBar/ProgressBar.md)
80
80
  [Radii](./Radii/Radii.md)
81
81
  [RadioGroup](./RadioGroup/RadioGroup.md)
82
- [RecurringSelect](./RecurringSelect/RecurringSelect.md)
83
82
  [ResponsiveBreakpoint](./ResponsiveBreakpoint/ResponsiveBreakpoint.md)
84
83
  [ResponsiveSwitcher](./ResponsiveSwitcher/ResponsiveSwitcher.md)
85
84
  [scaffolding](./scaffolding/scaffolding.md)
@@ -20,11 +20,10 @@ deprecated.
20
20
 
21
21
  ## Deprecated components — do not use
22
22
 
23
- | Deprecated | Replacement | Notes |
24
- | --------------------- | ----------------------------------------------------- | -------------------------------------------------- |
25
- | `MultiSelect` | `Autocomplete` v2 with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported. |
26
- | `RecurringSelect` | None (will be removed) | Deprecated, will be removed in next major version. |
27
- | `Chips` (dismissible) | `Autocomplete` v2 with `multiple` prop | Dismissible Chips variant is deprecated. |
23
+ | Deprecated | Replacement | Notes |
24
+ | --------------------- | ----------------------------------------------------- | ---------------------------------------- |
25
+ | `MultiSelect` | `Autocomplete` v2 with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported. |
26
+ | `Chips` (dismissible) | `Autocomplete` v2 with `multiple` prop | Dismissible Chips variant is deprecated. |
28
27
 
29
28
  ### Deprecated props on still-supported components
30
29
 
package/dist/index.cjs CHANGED
@@ -76,8 +76,6 @@ var Page = require('./Page-cjs.js');
76
76
  var Popover = require('./Popover-cjs.js');
77
77
  var ProgressBar = require('./ProgressBar-cjs.js');
78
78
  var RadioGroup = require('./RadioGroup-cjs.js');
79
- var RecurringSelect = require('./RecurringSelect-cjs.js');
80
- var DayOfMonthSelect = require('./DayOfMonthSelect-cjs.js');
81
79
  var ResponsiveSwitcher = require('./ResponsiveSwitcher-cjs.js');
82
80
  var Select = require('./Select-cjs.js');
83
81
  var SegmentedControl = require('./SegmentedControl-cjs.js');
@@ -325,15 +323,6 @@ exports.usePopoverStyles = Popover.usePopoverStyles;
325
323
  exports.ProgressBar = ProgressBar.ProgressBar;
326
324
  exports.RadioGroup = RadioGroup.RadioGroup;
327
325
  exports.RadioOption = RadioGroup.RadioOption;
328
- exports.RecurringSelect = RecurringSelect.RecurringSelect;
329
- Object.defineProperty(exports, "DurationPeriod", {
330
- enumerable: true,
331
- get: function () { return DayOfMonthSelect.DurationPeriod; }
332
- });
333
- Object.defineProperty(exports, "WeekDay", {
334
- enumerable: true,
335
- get: function () { return DayOfMonthSelect.WeekDay; }
336
- });
337
326
  exports.ResponsiveSwitcher = ResponsiveSwitcher.ResponsiveSwitcher;
338
327
  exports.Option = Select.SelectOption;
339
328
  exports.Select = Select.Select;
package/dist/index.d.mts CHANGED
@@ -65,7 +65,6 @@ export * from "./Page";
65
65
  export * from "./Popover";
66
66
  export * from "./ProgressBar";
67
67
  export * from "./RadioGroup";
68
- export * from "./RecurringSelect";
69
68
  export * from "./ResponsiveSwitcher";
70
69
  export * from "./Select";
71
70
  export * from "./SegmentedControl";
package/dist/index.d.ts CHANGED
@@ -65,7 +65,6 @@ export * from "./Page";
65
65
  export * from "./Popover";
66
66
  export * from "./ProgressBar";
67
67
  export * from "./RadioGroup";
68
- export * from "./RecurringSelect";
69
68
  export * from "./ResponsiveSwitcher";
70
69
  export * from "./Select";
71
70
  export * from "./SegmentedControl";
package/dist/index.mjs CHANGED
@@ -74,8 +74,6 @@ export { P as Page } from './Page-es.js';
74
74
  export { P as Popover, u as usePopoverContext, a as usePopoverStyles } from './Popover-es.js';
75
75
  export { P as ProgressBar } from './ProgressBar-es.js';
76
76
  export { R as RadioGroup, a as RadioOption } from './RadioGroup-es.js';
77
- export { R as RecurringSelect } from './RecurringSelect-es.js';
78
- export { D as DurationPeriod, W as WeekDay } from './DayOfMonthSelect-es.js';
79
77
  export { R as ResponsiveSwitcher } from './ResponsiveSwitcher-es.js';
80
78
  export { S as Option, a as Select } from './Select-es.js';
81
79
  export { S as SegmentedControl, a as SegmentedControlContext, b as SegmentedControlProvider, u as useSegmentedControl } from './SegmentedControl-es.js';
package/dist/styles.css CHANGED
@@ -11472,240 +11472,6 @@ input.oOrjwubmsVA- {
11472
11472
  color: var(--color-disabled);
11473
11473
  }
11474
11474
 
11475
- .-R-TvZ9aU9g- {
11476
- display: grid;
11477
- width: 100%;
11478
- padding: 4px;
11479
- padding: var(--space-smaller);
11480
- border: 1px solid hsl(200, 13%, 87%);
11481
- border: var(--border-base) solid var(--color-border);
11482
- border-radius: 16px;
11483
- border-radius: var(--radius-large);
11484
- grid-template-columns: repeat(7, 1fr);
11485
- row-gap: 4px;
11486
- grid-row-gap: 4px;
11487
- grid-row-gap: var(--space-smaller);
11488
- row-gap: var(--space-smaller);
11489
- -webkit-column-gap: 4px;
11490
- -webkit-column-gap: var(--space-smaller);
11491
- -moz-column-gap: 4px;
11492
- -moz-column-gap: var(--space-smaller);
11493
- column-gap: 4px;
11494
- grid-column-gap: 4px;
11495
- grid-column-gap: var(--space-smaller);
11496
- column-gap: var(--space-smaller);
11497
- }
11498
-
11499
- .HgFD6w2VXzo- {
11500
- position: relative;
11501
- }
11502
-
11503
- /* kept present but hidden for accessibility */
11504
-
11505
- .XGjk9DHJAmw- {
11506
- clip: rect(1px, 1px, 1px, 1px);
11507
- clip-path: inset(50%);
11508
- position: absolute;
11509
- width: 1px;
11510
- height: 1px;
11511
- margin: -1px;
11512
- padding: 0;
11513
- overflow: hidden;
11514
- }
11515
-
11516
- .zulupkPyEs8- {
11517
- display: -ms-flexbox;
11518
- display: flex;
11519
- -ms-flex-pack: center;
11520
- justify-content: center;
11521
- -ms-flex-align: center;
11522
- align-items: center;
11523
- padding: 4px;
11524
- padding: var(--space-smaller);
11525
- border-radius: 16px;
11526
- border-radius: var(--radius-large);
11527
- text-align: center;
11528
- -webkit-user-select: none;
11529
- -ms-user-select: none;
11530
- user-select: none;
11531
- background: rgba(255, 255, 255, 1);
11532
- background: var(--color-surface);
11533
- transition: 200ms;
11534
- transition: var(--timing-base);
11535
- }
11536
-
11537
- @supports (aspect-ratio: 1/1) {
11538
- .zulupkPyEs8- {
11539
- /*
11540
- * disabling property-no-unknown here as this is a real property
11541
- * that stylelint just doesn't know about. We may be able to remove
11542
- * this when we update our stylelint to not care about IE11.
11543
- */
11544
- /* stylelint-disable-next-line property-no-unknown */
11545
- aspect-ratio: 1/1;
11546
- }
11547
- }
11548
-
11549
- .zulupkPyEs8-:hover {
11550
- background: hsl(43, 18%, 92%);
11551
- background: var(--color-surface--hover);
11552
- }
11553
-
11554
- .XGjk9DHJAmw-:focus + .zulupkPyEs8- {
11555
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
11556
- box-shadow: var(--shadow-focus);
11557
- background: hsl(43, 18%, 92%);
11558
- background: var(--color-surface--hover);
11559
- }
11560
-
11561
- .XGjk9DHJAmw-:checked + .zulupkPyEs8- {
11562
- color: rgba(255, 255, 255, 1);
11563
- color: var(--color-text--reverse);
11564
- background: hsl(107, 58%, 33%);
11565
- background: var(--color-interactive);
11566
- }
11567
-
11568
- .XGjk9DHJAmw-:disabled + .zulupkPyEs8- {
11569
- color: hsl(0, 0%, 58%);
11570
- color: var(--color-disabled);
11571
- background: hsl(0, 0%, 93%);
11572
- background: var(--color-disabled--secondary);
11573
- cursor: default;
11574
- }
11575
-
11576
- .XGjk9DHJAmw-:enabled + .zulupkPyEs8- {
11577
- cursor: pointer;
11578
- }
11579
-
11580
- .XGjk9DHJAmw-:checked:focus + .zulupkPyEs8- {
11581
- background: hsl(107, 65%, 24%);
11582
- background: var(--color-interactive--hover);
11583
- }
11584
-
11585
- .XGjk9DHJAmw-:checked + .zulupkPyEs8-:hover {
11586
- background: hsl(107, 65%, 24%);
11587
- background: var(--color-interactive--hover);
11588
- }
11589
-
11590
- .XGjk9DHJAmw-:disabled:checked + .zulupkPyEs8- {
11591
- color: hsl(0, 0%, 93%);
11592
- color: var(--color-disabled--secondary);
11593
- background: hsl(0, 0%, 58%);
11594
- background: var(--color-disabled);
11595
- }
11596
-
11597
- .cr0irYOHA5k- div[role="radiogroup"] {
11598
- -ms-flex-direction: row;
11599
- flex-direction: row;
11600
- }
11601
-
11602
- .cr0irYOHA5k- label {
11603
- margin-right: 16px;
11604
- margin-right: var(--space-base);
11605
- }
11606
-
11607
- .Qup9qglgfQ8- {
11608
- display: grid;
11609
- grid-template-columns: 48px 1fr;
11610
- grid-template-columns: var(--space-largest) 1fr;
11611
- -ms-flex-align: center;
11612
- align-items: center;
11613
- gap: 8px;
11614
- grid-gap: 8px;
11615
- grid-gap: var(--space-small);
11616
- gap: var(--space-small);
11617
- margin-bottom: calc(-1 * 1px);
11618
- margin-bottom: calc(-1 * var(--border-base));
11619
- }
11620
-
11621
- .FxW4kmZLd44- div:nth-of-type(1) :last-child {
11622
- border-top-right-radius: 16px;
11623
- border-top-right-radius: var(--radius-large);
11624
- border-bottom-right-radius: 0;
11625
- border-bottom-left-radius: 0;
11626
- border-top-left-radius: 16px;
11627
- border-top-left-radius: var(--radius-large);
11628
- }
11629
-
11630
- .FxW4kmZLd44- div:nth-of-type(2) :last-child {
11631
- border-radius: 0;
11632
- }
11633
-
11634
- .FxW4kmZLd44- div:nth-of-type(3) :last-child {
11635
- border-radius: 0;
11636
- }
11637
-
11638
- .FxW4kmZLd44- div:nth-of-type(4) :last-child {
11639
- border-top-right-radius: 0;
11640
- border-bottom-right-radius: 16px;
11641
- border-bottom-right-radius: var(--radius-large);
11642
- border-bottom-left-radius: 16px;
11643
- border-bottom-left-radius: var(--radius-large);
11644
- border-top-left-radius: 0;
11645
- }
11646
-
11647
- ._4d0IFF7M5S0- {
11648
- display: grid;
11649
- width: 100%;
11650
- padding: 4px;
11651
- padding: var(--space-smaller);
11652
- border: 1px solid hsl(200, 13%, 87%);
11653
- border: var(--border-base) solid var(--color-border);
11654
- border-radius: 16px;
11655
- border-radius: var(--radius-large);
11656
- grid-template-areas:
11657
- ". . . . . . ."
11658
- ". . . . . . ."
11659
- ". . . . . . ."
11660
- ". . . . . . ."
11661
- ". . . lastday lastday lastday lastday";
11662
- row-gap: 4px;
11663
- grid-row-gap: 4px;
11664
- grid-row-gap: var(--space-smaller);
11665
- row-gap: var(--space-smaller);
11666
- -webkit-column-gap: 4px;
11667
- -webkit-column-gap: var(--space-smaller);
11668
- -moz-column-gap: 4px;
11669
- -moz-column-gap: var(--space-smaller);
11670
- column-gap: 4px;
11671
- grid-column-gap: 4px;
11672
- grid-column-gap: var(--space-smaller);
11673
- column-gap: var(--space-smaller);
11674
- }
11675
-
11676
- ._4d0IFF7M5S0- :last-child {
11677
- grid-area: lastday;
11678
- }
11679
-
11680
- ._4d0IFF7M5S0- div:nth-child(n + 1):nth-last-child(-n + 1) label {
11681
- height: 100%;
11682
- }
11683
-
11684
- @supports (aspect-ratio: unset) {
11685
- ._4d0IFF7M5S0- div:nth-child(n + 1):nth-last-child(-n + 1) label {
11686
- /*
11687
- * disabling property-no-unknown here as this is a real property
11688
- * that stylelint just doesn't know about. We may be able to remove
11689
- * this when we update our stylelint to not care about IE11.
11690
- */
11691
- /* stylelint-disable-next-line property-no-unknown */
11692
- aspect-ratio: unset;
11693
- }
11694
- }
11695
-
11696
- .v2xMxsPFwcM- {
11697
- display: -ms-flexbox;
11698
- display: flex;
11699
- -ms-flex-align: center;
11700
- align-items: center;
11701
- gap: 16px;
11702
- gap: var(--space-base);
11703
- }
11704
-
11705
- .cfDwOgEkPHQ- {
11706
- width: 100%;
11707
- }
11708
-
11709
11475
  .BQqkfvwFjbQ- {
11710
11476
  display: -ms-flexbox;
11711
11477
  display: flex;
@@ -196,7 +196,6 @@
196
196
  "ProgressBar",
197
197
  "RadioGroup",
198
198
  "RadioOption",
199
- "RecurringSelect",
200
199
  "ResponsiveSwitcher",
201
200
  "Row",
202
201
  "SegmentedControl",
@@ -230,4 +229,4 @@
230
229
  "Tooltip",
231
230
  "Typography"
232
231
  ]
233
- }
232
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "8.0.2",
3
+ "version": "8.1.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -360,11 +360,6 @@
360
360
  "import": "./dist/RadioGroup/index.mjs",
361
361
  "require": "./dist/RadioGroup/index.cjs"
362
362
  },
363
- "./RecurringSelect": {
364
- "types": "./dist/RecurringSelect/index.d.ts",
365
- "import": "./dist/RecurringSelect/index.mjs",
366
- "require": "./dist/RecurringSelect/index.cjs"
367
- },
368
363
  "./ResponsiveSwitcher": {
369
364
  "types": "./dist/ResponsiveSwitcher/index.d.ts",
370
365
  "import": "./dist/ResponsiveSwitcher/index.mjs",
@@ -573,5 +568,5 @@
573
568
  "> 1%",
574
569
  "IE 10"
575
570
  ],
576
- "gitHead": "d861abf72e283ac42c0f2af8d8be6becad4c957c"
571
+ "gitHead": "619a06389b92bcc8d2d8b5768b67604b0b29fbc7"
577
572
  }
@@ -1 +0,0 @@
1
- export * from "./dist/RecurringSelect";
@@ -1,17 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true,
5
- });
6
-
7
- var RecurringSelect = require("./dist/RecurringSelect");
8
-
9
- Object.keys(RecurringSelect).forEach(function(key) {
10
- if (key === "default" || key === "__esModule") return;
11
- Object.defineProperty(exports, key, {
12
- enumerable: true,
13
- get: function get() {
14
- return RecurringSelect[key];
15
- },
16
- });
17
- });
@@ -1,143 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var RadioGroup = require('./RadioGroup-cjs.js');
5
- var Text = require('./Text-cjs.js');
6
-
7
- var styles$3 = {"container":"-R-TvZ9aU9g-","spinning":"SYARPwvkeO0-"};
8
-
9
- var checkboxStyles = {"checkboxWrapper":"HgFD6w2VXzo-","dayCheckboxInput":"XGjk9DHJAmw-","dayCheckbox":"zulupkPyEs8-","spinning":"jjJFVaCX4Zk-"};
10
-
11
- /**
12
- * @deprecated RecurringSelect will be removed in the next major version
13
- */
14
- exports.WeekDay = void 0;
15
- (function (WeekDay) {
16
- WeekDay[WeekDay["Sunday"] = 0] = "Sunday";
17
- WeekDay[WeekDay["Monday"] = 1] = "Monday";
18
- WeekDay[WeekDay["Tuesday"] = 2] = "Tuesday";
19
- WeekDay[WeekDay["Wednesday"] = 3] = "Wednesday";
20
- WeekDay[WeekDay["Thursday"] = 4] = "Thursday";
21
- WeekDay[WeekDay["Friday"] = 5] = "Friday";
22
- WeekDay[WeekDay["Saturday"] = 6] = "Saturday";
23
- })(exports.WeekDay || (exports.WeekDay = {}));
24
- /**
25
- * @deprecated RecurringSelect will be removed in the next major version
26
- */
27
- exports.DurationPeriod = void 0;
28
- (function (DurationPeriod) {
29
- DurationPeriod["Day"] = "Day";
30
- DurationPeriod["Week"] = "Week";
31
- DurationPeriod["DayOfMonth"] = "DayOfMonth";
32
- DurationPeriod["WeekDayOfMonth"] = "WeekDayOfMonth";
33
- DurationPeriod["Year"] = "Year";
34
- DurationPeriod["Visit"] = "Visit";
35
- })(exports.DurationPeriod || (exports.DurationPeriod = {}));
36
- const typeInitialStateMap = {
37
- [exports.DurationPeriod.Day]: {
38
- type: exports.DurationPeriod.Day,
39
- },
40
- [exports.DurationPeriod.Week]: {
41
- type: exports.DurationPeriod.Week,
42
- weekDays: new Set(),
43
- },
44
- [exports.DurationPeriod.DayOfMonth]: {
45
- type: exports.DurationPeriod.DayOfMonth,
46
- date: new Set(),
47
- },
48
- [exports.DurationPeriod.WeekDayOfMonth]: {
49
- type: exports.DurationPeriod.WeekDayOfMonth,
50
- dayOfWeek: [
51
- new Set(),
52
- new Set(),
53
- new Set(),
54
- new Set(),
55
- ],
56
- },
57
- [exports.DurationPeriod.Year]: {
58
- type: exports.DurationPeriod.Year,
59
- },
60
- };
61
- const isMonthly = (rule) => rule.type === exports.DurationPeriod.WeekDayOfMonth ||
62
- rule.type === exports.DurationPeriod.DayOfMonth;
63
-
64
- const weekDays = [0, 1, 2, 3, 4, 5, 6];
65
- function WeeklySelect({ onChange, selectedDays, disabled, }) {
66
- const onChangeWeekDays = (event) => {
67
- const day = Number(event.currentTarget.value);
68
- const next = new Set(Array.from(selectedDays));
69
- if (selectedDays.has(day)) {
70
- next.delete(day);
71
- }
72
- else {
73
- next.add(day);
74
- }
75
- onChange(next);
76
- };
77
- return (React.createElement("div", { className: styles$3.container }, weekDays.map(weekDay => {
78
- const isSelected = selectedDays.has(weekDay);
79
- const inputId = React.useId();
80
- return (React.createElement("div", { key: `${weekDay}`, className: checkboxStyles.checkboxWrapper },
81
- React.createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", onChange: onChangeWeekDays, id: `weekly-select-${weekDay}${inputId}`, "aria-checked": isSelected, checked: isSelected, value: weekDay }),
82
- React.createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `weekly-select-${weekDay}${inputId}` }, `${exports.WeekDay[weekDay].substr(0, 1).toUpperCase()}`)));
83
- })));
84
- }
85
-
86
- var styles$2 = {"radioContainer":"cr0irYOHA5k-","spinning":"CAeHbpYJvRk-"};
87
-
88
- function MonthlySelect({ disabled, onChange, selectedMonthOption, }) {
89
- return (React.createElement("div", { className: styles$2.radioContainer },
90
- React.createElement(RadioGroup.RadioGroup, { ariaLabel: "Monthly Frequency Selector", onChange: onChange, value: selectedMonthOption },
91
- React.createElement(RadioGroup.RadioOption, { disabled: disabled, value: exports.DurationPeriod.DayOfMonth, label: "Day of month" }),
92
- React.createElement(RadioGroup.RadioOption, { disabled: disabled, value: exports.DurationPeriod.WeekDayOfMonth, label: "Day of week" }))));
93
- }
94
-
95
- var styles$1 = {"container":"Qup9qglgfQ8-","parentContainer":"FxW4kmZLd44-","spinning":"_3B10vRc7B6c-"};
96
-
97
- function MonthlyDayOfWeekSelect({ disabled, selectedWeeks, onChange, }) {
98
- const orderString = ["1st", "2nd", "3rd", "4th"];
99
- return (React.createElement("div", { className: styles$1.parentContainer }, selectedWeeks.map((week, index) => {
100
- const onChangeWeek = (weekDay) => {
101
- const next = [...selectedWeeks];
102
- next.splice(index, 1, weekDay);
103
- onChange(next);
104
- };
105
- return (React.createElement("div", { className: styles$1.container, key: `${index}${week}` },
106
- React.createElement(Text.Text, null, `${orderString[index]}`),
107
- React.createElement("div", null,
108
- React.createElement(WeeklySelect, { disabled: disabled, selectedDays: week, onChange: onChangeWeek }))));
109
- })));
110
- }
111
-
112
- var styles = {"container":"_4d0IFF7M5S0-","spinning":"TEqEHU-NbhU-"};
113
-
114
- const daysInMonth = [...Array.from({ length: 31 }, (_, i) => i + 1), "LAST"];
115
- function DayOfMonthSelect({ selectedDays, disabled, onChange, }) {
116
- return (React.createElement("div", { className: styles.container }, daysInMonth.map(day => {
117
- const isSelected = selectedDays.has(day);
118
- const inputId = React.useId();
119
- return (React.createElement("div", { key: `${day}`, className: checkboxStyles.checkboxWrapper },
120
- React.createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", id: `${day}-${inputId}`, onChange: handleChangeDayOfMonth, "aria-checked": isSelected, checked: isSelected, value: day }),
121
- React.createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `${day}-${inputId}` }, `${day === "LAST" ? "Last day" : day}`)));
122
- })));
123
- function handleChangeDayOfMonth(event) {
124
- const day = event.currentTarget.value === "LAST"
125
- ? event.currentTarget.value
126
- : +event.currentTarget.value;
127
- const next = new Set(selectedDays);
128
- if (selectedDays.has(day)) {
129
- next.delete(day);
130
- }
131
- else {
132
- next.add(day);
133
- }
134
- onChange(next);
135
- }
136
- }
137
-
138
- exports.DayOfMonthSelect = DayOfMonthSelect;
139
- exports.MonthlyDayOfWeekSelect = MonthlyDayOfWeekSelect;
140
- exports.MonthlySelect = MonthlySelect;
141
- exports.WeeklySelect = WeeklySelect;
142
- exports.isMonthly = isMonthly;
143
- exports.typeInitialStateMap = typeInitialStateMap;
@@ -1,136 +0,0 @@
1
- import React__default, { useId } from 'react';
2
- import { R as RadioGroup, a as RadioOption } from './RadioGroup-es.js';
3
- import { T as Text } from './Text-es.js';
4
-
5
- var styles$3 = {"container":"-R-TvZ9aU9g-","spinning":"SYARPwvkeO0-"};
6
-
7
- var checkboxStyles = {"checkboxWrapper":"HgFD6w2VXzo-","dayCheckboxInput":"XGjk9DHJAmw-","dayCheckbox":"zulupkPyEs8-","spinning":"jjJFVaCX4Zk-"};
8
-
9
- /**
10
- * @deprecated RecurringSelect will be removed in the next major version
11
- */
12
- var WeekDay;
13
- (function (WeekDay) {
14
- WeekDay[WeekDay["Sunday"] = 0] = "Sunday";
15
- WeekDay[WeekDay["Monday"] = 1] = "Monday";
16
- WeekDay[WeekDay["Tuesday"] = 2] = "Tuesday";
17
- WeekDay[WeekDay["Wednesday"] = 3] = "Wednesday";
18
- WeekDay[WeekDay["Thursday"] = 4] = "Thursday";
19
- WeekDay[WeekDay["Friday"] = 5] = "Friday";
20
- WeekDay[WeekDay["Saturday"] = 6] = "Saturday";
21
- })(WeekDay || (WeekDay = {}));
22
- /**
23
- * @deprecated RecurringSelect will be removed in the next major version
24
- */
25
- var DurationPeriod;
26
- (function (DurationPeriod) {
27
- DurationPeriod["Day"] = "Day";
28
- DurationPeriod["Week"] = "Week";
29
- DurationPeriod["DayOfMonth"] = "DayOfMonth";
30
- DurationPeriod["WeekDayOfMonth"] = "WeekDayOfMonth";
31
- DurationPeriod["Year"] = "Year";
32
- DurationPeriod["Visit"] = "Visit";
33
- })(DurationPeriod || (DurationPeriod = {}));
34
- const typeInitialStateMap = {
35
- [DurationPeriod.Day]: {
36
- type: DurationPeriod.Day,
37
- },
38
- [DurationPeriod.Week]: {
39
- type: DurationPeriod.Week,
40
- weekDays: new Set(),
41
- },
42
- [DurationPeriod.DayOfMonth]: {
43
- type: DurationPeriod.DayOfMonth,
44
- date: new Set(),
45
- },
46
- [DurationPeriod.WeekDayOfMonth]: {
47
- type: DurationPeriod.WeekDayOfMonth,
48
- dayOfWeek: [
49
- new Set(),
50
- new Set(),
51
- new Set(),
52
- new Set(),
53
- ],
54
- },
55
- [DurationPeriod.Year]: {
56
- type: DurationPeriod.Year,
57
- },
58
- };
59
- const isMonthly = (rule) => rule.type === DurationPeriod.WeekDayOfMonth ||
60
- rule.type === DurationPeriod.DayOfMonth;
61
-
62
- const weekDays = [0, 1, 2, 3, 4, 5, 6];
63
- function WeeklySelect({ onChange, selectedDays, disabled, }) {
64
- const onChangeWeekDays = (event) => {
65
- const day = Number(event.currentTarget.value);
66
- const next = new Set(Array.from(selectedDays));
67
- if (selectedDays.has(day)) {
68
- next.delete(day);
69
- }
70
- else {
71
- next.add(day);
72
- }
73
- onChange(next);
74
- };
75
- return (React__default.createElement("div", { className: styles$3.container }, weekDays.map(weekDay => {
76
- const isSelected = selectedDays.has(weekDay);
77
- const inputId = useId();
78
- return (React__default.createElement("div", { key: `${weekDay}`, className: checkboxStyles.checkboxWrapper },
79
- React__default.createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", onChange: onChangeWeekDays, id: `weekly-select-${weekDay}${inputId}`, "aria-checked": isSelected, checked: isSelected, value: weekDay }),
80
- React__default.createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `weekly-select-${weekDay}${inputId}` }, `${WeekDay[weekDay].substr(0, 1).toUpperCase()}`)));
81
- })));
82
- }
83
-
84
- var styles$2 = {"radioContainer":"cr0irYOHA5k-","spinning":"CAeHbpYJvRk-"};
85
-
86
- function MonthlySelect({ disabled, onChange, selectedMonthOption, }) {
87
- return (React__default.createElement("div", { className: styles$2.radioContainer },
88
- React__default.createElement(RadioGroup, { ariaLabel: "Monthly Frequency Selector", onChange: onChange, value: selectedMonthOption },
89
- React__default.createElement(RadioOption, { disabled: disabled, value: DurationPeriod.DayOfMonth, label: "Day of month" }),
90
- React__default.createElement(RadioOption, { disabled: disabled, value: DurationPeriod.WeekDayOfMonth, label: "Day of week" }))));
91
- }
92
-
93
- var styles$1 = {"container":"Qup9qglgfQ8-","parentContainer":"FxW4kmZLd44-","spinning":"_3B10vRc7B6c-"};
94
-
95
- function MonthlyDayOfWeekSelect({ disabled, selectedWeeks, onChange, }) {
96
- const orderString = ["1st", "2nd", "3rd", "4th"];
97
- return (React__default.createElement("div", { className: styles$1.parentContainer }, selectedWeeks.map((week, index) => {
98
- const onChangeWeek = (weekDay) => {
99
- const next = [...selectedWeeks];
100
- next.splice(index, 1, weekDay);
101
- onChange(next);
102
- };
103
- return (React__default.createElement("div", { className: styles$1.container, key: `${index}${week}` },
104
- React__default.createElement(Text, null, `${orderString[index]}`),
105
- React__default.createElement("div", null,
106
- React__default.createElement(WeeklySelect, { disabled: disabled, selectedDays: week, onChange: onChangeWeek }))));
107
- })));
108
- }
109
-
110
- var styles = {"container":"_4d0IFF7M5S0-","spinning":"TEqEHU-NbhU-"};
111
-
112
- const daysInMonth = [...Array.from({ length: 31 }, (_, i) => i + 1), "LAST"];
113
- function DayOfMonthSelect({ selectedDays, disabled, onChange, }) {
114
- return (React__default.createElement("div", { className: styles.container }, daysInMonth.map(day => {
115
- const isSelected = selectedDays.has(day);
116
- const inputId = useId();
117
- return (React__default.createElement("div", { key: `${day}`, className: checkboxStyles.checkboxWrapper },
118
- React__default.createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", id: `${day}-${inputId}`, onChange: handleChangeDayOfMonth, "aria-checked": isSelected, checked: isSelected, value: day }),
119
- React__default.createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `${day}-${inputId}` }, `${day === "LAST" ? "Last day" : day}`)));
120
- })));
121
- function handleChangeDayOfMonth(event) {
122
- const day = event.currentTarget.value === "LAST"
123
- ? event.currentTarget.value
124
- : +event.currentTarget.value;
125
- const next = new Set(selectedDays);
126
- if (selectedDays.has(day)) {
127
- next.delete(day);
128
- }
129
- else {
130
- next.add(day);
131
- }
132
- onChange(next);
133
- }
134
- }
135
-
136
- export { DurationPeriod as D, MonthlySelect as M, WeekDay as W, WeeklySelect as a, MonthlyDayOfWeekSelect as b, DayOfMonthSelect as c, isMonthly as i, typeInitialStateMap as t };
@@ -1,9 +0,0 @@
1
- import React from "react";
2
- import type { RecurrenceRule } from "./types";
3
- interface RecurringSelectProps {
4
- readonly disabled?: boolean;
5
- readonly recurrenceRule: RecurrenceRule;
6
- onChange(newRecurrence: RecurrenceRule): void;
7
- }
8
- export declare function CurrentRecurrenceComponent({ recurrenceRule, disabled, onChange, }: RecurringSelectProps): React.JSX.Element;
9
- export {};
@@ -1,12 +0,0 @@
1
- import React from "react";
2
- import type { RecurrenceRule } from "./types";
3
- interface RecurringSelectProps {
4
- readonly disabled?: boolean;
5
- readonly value: RecurrenceRule;
6
- onChange(value: RecurrenceRule): void;
7
- }
8
- /**
9
- * @deprecated RecurringSelect will be removed in the next major version
10
- */
11
- export declare function RecurringSelect({ value, disabled, onChange, }: RecurringSelectProps): React.JSX.Element;
12
- export {};
@@ -1,9 +0,0 @@
1
- import React from "react";
2
- import type { DayOfMonth } from "../types";
3
- interface DayOfMonthSelectProps {
4
- readonly selectedDays: Set<DayOfMonth>;
5
- readonly disabled: boolean;
6
- onChange(selectedDays: Set<DayOfMonth>): void;
7
- }
8
- export declare function DayOfMonthSelect({ selectedDays, disabled, onChange, }: DayOfMonthSelectProps): React.JSX.Element;
9
- export {};
@@ -1,9 +0,0 @@
1
- import React from "react";
2
- import type { WeekDay } from "../types";
3
- interface MonthlyDayOfWeekSelectProps {
4
- readonly disabled: boolean;
5
- readonly selectedWeeks: Set<WeekDay>[];
6
- onChange(nextSelectedWeeks: Set<WeekDay>[]): void;
7
- }
8
- export declare function MonthlyDayOfWeekSelect({ disabled, selectedWeeks, onChange, }: MonthlyDayOfWeekSelectProps): React.JSX.Element;
9
- export {};
@@ -1,9 +0,0 @@
1
- import React from "react";
2
- import { DurationPeriod } from "../types";
3
- interface MonthlySelectProps {
4
- readonly disabled: boolean;
5
- readonly selectedMonthOption: DurationPeriod.DayOfMonth | DurationPeriod.WeekDayOfMonth;
6
- onChange(type: DurationPeriod.DayOfMonth | DurationPeriod.WeekDayOfMonth): void;
7
- }
8
- export declare function MonthlySelect({ disabled, onChange, selectedMonthOption, }: MonthlySelectProps): React.JSX.Element;
9
- export {};
@@ -1,9 +0,0 @@
1
- import React from "react";
2
- import { WeekDay } from "../types";
3
- interface WeeklySelectProps {
4
- readonly disabled: boolean;
5
- readonly selectedDays: Set<WeekDay>;
6
- onChange(selectedDays: Set<WeekDay>): void;
7
- }
8
- export declare function WeeklySelect({ onChange, selectedDays, disabled, }: WeeklySelectProps): React.JSX.Element;
9
- export {};
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- var DayOfMonthSelect = require('../../DayOfMonthSelect-cjs.js');
4
- require('react');
5
- require('../../RadioGroup-cjs.js');
6
- require('classnames');
7
- require('../../Text-cjs.js');
8
- require('../../Typography-cjs.js');
9
-
10
-
11
-
12
- exports.DayOfMonthSelect = DayOfMonthSelect.DayOfMonthSelect;
13
- exports.MonthlyDayOfWeekSelect = DayOfMonthSelect.MonthlyDayOfWeekSelect;
14
- exports.MonthlySelect = DayOfMonthSelect.MonthlySelect;
15
- exports.WeeklySelect = DayOfMonthSelect.WeeklySelect;
@@ -1,4 +0,0 @@
1
- export { WeeklySelect } from "./WeeklySelect";
2
- export { MonthlySelect } from "./MonthlySelect";
3
- export { MonthlyDayOfWeekSelect } from "./MonthlyDayOfWeekSelect";
4
- export { DayOfMonthSelect } from "./DayOfMonthSelect";
@@ -1,6 +0,0 @@
1
- export { c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, M as MonthlySelect, a as WeeklySelect } from '../../DayOfMonthSelect-es.js';
2
- import 'react';
3
- import '../../RadioGroup-es.js';
4
- import 'classnames';
5
- import '../../Text-es.js';
6
- import '../../Typography-es.js';
@@ -1,43 +0,0 @@
1
- 'use strict';
2
-
3
- var RecurringSelect = require('../RecurringSelect-cjs.js');
4
- var DayOfMonthSelect = require('../DayOfMonthSelect-cjs.js');
5
- require('react');
6
- require('../Text-cjs.js');
7
- require('../Typography-cjs.js');
8
- require('classnames');
9
- require('../Select-cjs.js');
10
- require('../FormFieldWrapper-cjs.js');
11
- require('@jobber/hooks');
12
- require('framer-motion');
13
- require('@jobber/design');
14
- require('../Button-cjs.js');
15
- require('../tslib.es6-cjs.js');
16
- require('react-router-dom');
17
- require('../Icon-cjs.js');
18
- require('../useFormFieldFocus-cjs.js');
19
- require('../InputValidation-cjs.js');
20
- require('../FormFieldPostFix-cjs.js');
21
- require('../Spinner-cjs.js');
22
- require('../useAtlantisFormFieldName-cjs.js');
23
- require('react-hook-form');
24
- require('../mergeRefs-cjs.js');
25
- require('../filterDataAttributes-cjs.js');
26
- require('../InputNumber/index.cjs');
27
- require('../clsx-cjs.js');
28
- require('../FormField-cjs.js');
29
- require('../InputGroup-cjs.js');
30
- require('../Content-cjs.js');
31
- require('../RadioGroup-cjs.js');
32
-
33
-
34
-
35
- exports.RecurringSelect = RecurringSelect.RecurringSelect;
36
- Object.defineProperty(exports, "DurationPeriod", {
37
- enumerable: true,
38
- get: function () { return DayOfMonthSelect.DurationPeriod; }
39
- });
40
- Object.defineProperty(exports, "WeekDay", {
41
- enumerable: true,
42
- get: function () { return DayOfMonthSelect.WeekDay; }
43
- });
@@ -1,3 +0,0 @@
1
- export { RecurringSelect } from "./RecurringSelect";
2
- export type { DayOfMonth, RecurrenceRule } from "./types";
3
- export { DurationPeriod, WeekDay } from "./types";
@@ -1,29 +0,0 @@
1
- export { R as RecurringSelect } from '../RecurringSelect-es.js';
2
- export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-es.js';
3
- import 'react';
4
- import '../Text-es.js';
5
- import '../Typography-es.js';
6
- import 'classnames';
7
- import '../Select-es.js';
8
- import '../FormFieldWrapper-es.js';
9
- import '@jobber/hooks';
10
- import 'framer-motion';
11
- import '@jobber/design';
12
- import '../Button-es.js';
13
- import '../tslib.es6-es.js';
14
- import 'react-router-dom';
15
- import '../Icon-es.js';
16
- import '../useFormFieldFocus-es.js';
17
- import '../InputValidation-es.js';
18
- import '../FormFieldPostFix-es.js';
19
- import '../Spinner-es.js';
20
- import '../useAtlantisFormFieldName-es.js';
21
- import 'react-hook-form';
22
- import '../mergeRefs-es.js';
23
- import '../filterDataAttributes-es.js';
24
- import '../InputNumber/index.mjs';
25
- import '../clsx-es.js';
26
- import '../FormField-es.js';
27
- import '../InputGroup-es.js';
28
- import '../Content-es.js';
29
- import '../RadioGroup-es.js';
@@ -1,75 +0,0 @@
1
- /**
2
- * @deprecated RecurringSelect will be removed in the next major version
3
- */
4
- export declare enum WeekDay {
5
- Sunday = 0,
6
- Monday = 1,
7
- Tuesday = 2,
8
- Wednesday = 3,
9
- Thursday = 4,
10
- Friday = 5,
11
- Saturday = 6
12
- }
13
- /**
14
- * @deprecated RecurringSelect will be removed in the next major version
15
- */
16
- export type DayOfMonth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | "LAST";
17
- /**
18
- * @deprecated RecurringSelect will be removed in the next major version
19
- */
20
- export declare enum DurationPeriod {
21
- Day = "Day",
22
- Week = "Week",
23
- DayOfMonth = "DayOfMonth",
24
- WeekDayOfMonth = "WeekDayOfMonth",
25
- Year = "Year",
26
- Visit = "Visit"
27
- }
28
- export interface RecurrenceRuleDay {
29
- type: DurationPeriod.Day;
30
- }
31
- export interface RecurrenceRuleWeek {
32
- type: DurationPeriod.Week;
33
- weekDays: Set<WeekDay>;
34
- }
35
- export interface RecurrenceRuleYear {
36
- type: DurationPeriod.Year;
37
- }
38
- export interface RecurrenceRuleDayOfMonth {
39
- type: DurationPeriod.DayOfMonth;
40
- date: Set<DayOfMonth>;
41
- }
42
- export interface RecurrenceRuleWeekDayOfMonth {
43
- type: DurationPeriod.WeekDayOfMonth;
44
- dayOfWeek: [Set<WeekDay>, Set<WeekDay>, Set<WeekDay>, Set<WeekDay>];
45
- }
46
- /**
47
- * @deprecated RecurringSelect will be removed in the next major version
48
- */
49
- export type RecurrenceRule = {
50
- interval: number;
51
- } & (RecurrenceRuleDay | RecurrenceRuleWeek | RecurrenceRuleYear | RecurrenceRuleDayOfMonth | RecurrenceRuleWeekDayOfMonth);
52
- export interface InitialStateMap {
53
- [DurationPeriod.Day]: {
54
- type: DurationPeriod.Day;
55
- };
56
- [DurationPeriod.Week]: {
57
- type: DurationPeriod.Week;
58
- weekDays: Set<WeekDay>;
59
- };
60
- [DurationPeriod.DayOfMonth]: {
61
- type: DurationPeriod.DayOfMonth;
62
- date: Set<DayOfMonth>;
63
- };
64
- [DurationPeriod.WeekDayOfMonth]: {
65
- type: DurationPeriod.WeekDayOfMonth;
66
- dayOfWeek: [Set<WeekDay>, Set<WeekDay>, Set<WeekDay>, Set<WeekDay>];
67
- };
68
- [DurationPeriod.Year]: {
69
- type: DurationPeriod.Year;
70
- };
71
- }
72
- export declare const typeInitialStateMap: InitialStateMap;
73
- export declare const isMonthly: (rule: RecurrenceRule) => rule is Extract<RecurrenceRule, {
74
- type: DurationPeriod.WeekDayOfMonth | DurationPeriod.DayOfMonth;
75
- }>;
@@ -1,74 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var DayOfMonthSelect = require('./DayOfMonthSelect-cjs.js');
5
- var Text = require('./Text-cjs.js');
6
- require('classnames');
7
- var Select = require('./Select-cjs.js');
8
- var InputNumber_index = require('./InputNumber/index.cjs');
9
- var InputGroup = require('./InputGroup-cjs.js');
10
- var Content = require('./Content-cjs.js');
11
-
12
- function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange, }) {
13
- switch (recurrenceRule.type) {
14
- case DayOfMonthSelect.DurationPeriod.Week: {
15
- const onChangeWeekDays = (next) => {
16
- onChange(Object.assign(Object.assign({}, recurrenceRule), { weekDays: next }));
17
- };
18
- return (React.createElement(DayOfMonthSelect.WeeklySelect, { disabled: disabled, selectedDays: recurrenceRule.weekDays, onChange: onChangeWeekDays }));
19
- }
20
- case DayOfMonthSelect.DurationPeriod.WeekDayOfMonth: {
21
- const onChangeWeekDayOfMonth = (next) => {
22
- onChange(Object.assign(Object.assign({}, recurrenceRule), { dayOfWeek: next }));
23
- };
24
- return (React.createElement(DayOfMonthSelect.MonthlyDayOfWeekSelect, { disabled: disabled, onChange: onChangeWeekDayOfMonth, selectedWeeks: recurrenceRule.dayOfWeek }));
25
- }
26
- case DayOfMonthSelect.DurationPeriod.DayOfMonth: {
27
- const onChangeDayOfMonth = (next) => {
28
- onChange(Object.assign(Object.assign({}, recurrenceRule), { date: next }));
29
- };
30
- return (React.createElement(DayOfMonthSelect.DayOfMonthSelect, { disabled: disabled, selectedDays: recurrenceRule.date, onChange: onChangeDayOfMonth }));
31
- }
32
- default:
33
- return React.createElement(React.Fragment, null);
34
- }
35
- }
36
-
37
- var styles = {"container":"v2xMxsPFwcM-","fullWidthWrapper":"cfDwOgEkPHQ-","spinning":"s4XnDjTR4Uw-"};
38
-
39
- /**
40
- * @deprecated RecurringSelect will be removed in the next major version
41
- */
42
- function RecurringSelect({ value, disabled = false, onChange, }) {
43
- const disabledTextVariation = disabled ? "disabled" : undefined;
44
- // we must dynamically populate the select option based on which is selected
45
- // because there is no single "month" option, it must always be one of these two
46
- const monthlySelectOptionValue = value.type === DayOfMonthSelect.DurationPeriod.WeekDayOfMonth
47
- ? DayOfMonthSelect.DurationPeriod.WeekDayOfMonth
48
- : DayOfMonthSelect.DurationPeriod.DayOfMonth;
49
- const hasExtraFrequencyDescriptor = value.type === DayOfMonthSelect.DurationPeriod.WeekDayOfMonth ||
50
- value.type === DayOfMonthSelect.DurationPeriod.DayOfMonth ||
51
- value.type === DayOfMonthSelect.DurationPeriod.Week;
52
- return (React.createElement(Content.Content, null,
53
- React.createElement("div", { className: styles.container },
54
- React.createElement(Text.Text, { variation: disabledTextVariation }, "Every"),
55
- React.createElement("div", { className: styles.fullWidthWrapper },
56
- React.createElement(InputGroup.InputGroup, { flowDirection: "horizontal" },
57
- React.createElement(InputNumber_index.InputNumber, { disabled: disabled, name: "schedule-recurrence-interval", value: value.interval, min: 1, maxLength: 3, onChange: onChangeInterval }),
58
- React.createElement(Select.Select, { disabled: disabled, value: value.type, onChange: onChangeType, name: "schedule-recurrence-type" },
59
- React.createElement(Select.SelectOption, { value: DayOfMonthSelect.DurationPeriod.Day }, "Day(s)"),
60
- React.createElement(Select.SelectOption, { value: DayOfMonthSelect.DurationPeriod.Week }, "Week(s)"),
61
- React.createElement(Select.SelectOption, { value: monthlySelectOptionValue }, "Month(s)"),
62
- React.createElement(Select.SelectOption, { value: DayOfMonthSelect.DurationPeriod.Year }, "Year(s)")))),
63
- hasExtraFrequencyDescriptor && (React.createElement(Text.Text, { variation: disabledTextVariation }, "on"))),
64
- DayOfMonthSelect.isMonthly(value) && (React.createElement(DayOfMonthSelect.MonthlySelect, { disabled: disabled, onChange: onChangeType, selectedMonthOption: value.type })),
65
- React.createElement(CurrentRecurrenceComponent, { disabled: disabled, recurrenceRule: value, onChange: onChange })));
66
- function onChangeInterval(interval) {
67
- onChange(Object.assign(Object.assign({}, value), { interval }));
68
- }
69
- function onChangeType(type) {
70
- onChange(Object.assign({ interval: value.interval }, DayOfMonthSelect.typeInitialStateMap[type]));
71
- }
72
- }
73
-
74
- exports.RecurringSelect = RecurringSelect;
@@ -1,72 +0,0 @@
1
- import React__default from 'react';
2
- import { D as DurationPeriod, c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, a as WeeklySelect, i as isMonthly, M as MonthlySelect, t as typeInitialStateMap } from './DayOfMonthSelect-es.js';
3
- import { T as Text } from './Text-es.js';
4
- import 'classnames';
5
- import { a as Select, S as SelectOption } from './Select-es.js';
6
- import { InputNumber } from './InputNumber/index.mjs';
7
- import { I as InputGroup } from './InputGroup-es.js';
8
- import { C as Content } from './Content-es.js';
9
-
10
- function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange, }) {
11
- switch (recurrenceRule.type) {
12
- case DurationPeriod.Week: {
13
- const onChangeWeekDays = (next) => {
14
- onChange(Object.assign(Object.assign({}, recurrenceRule), { weekDays: next }));
15
- };
16
- return (React__default.createElement(WeeklySelect, { disabled: disabled, selectedDays: recurrenceRule.weekDays, onChange: onChangeWeekDays }));
17
- }
18
- case DurationPeriod.WeekDayOfMonth: {
19
- const onChangeWeekDayOfMonth = (next) => {
20
- onChange(Object.assign(Object.assign({}, recurrenceRule), { dayOfWeek: next }));
21
- };
22
- return (React__default.createElement(MonthlyDayOfWeekSelect, { disabled: disabled, onChange: onChangeWeekDayOfMonth, selectedWeeks: recurrenceRule.dayOfWeek }));
23
- }
24
- case DurationPeriod.DayOfMonth: {
25
- const onChangeDayOfMonth = (next) => {
26
- onChange(Object.assign(Object.assign({}, recurrenceRule), { date: next }));
27
- };
28
- return (React__default.createElement(DayOfMonthSelect, { disabled: disabled, selectedDays: recurrenceRule.date, onChange: onChangeDayOfMonth }));
29
- }
30
- default:
31
- return React__default.createElement(React__default.Fragment, null);
32
- }
33
- }
34
-
35
- var styles = {"container":"v2xMxsPFwcM-","fullWidthWrapper":"cfDwOgEkPHQ-","spinning":"s4XnDjTR4Uw-"};
36
-
37
- /**
38
- * @deprecated RecurringSelect will be removed in the next major version
39
- */
40
- function RecurringSelect({ value, disabled = false, onChange, }) {
41
- const disabledTextVariation = disabled ? "disabled" : undefined;
42
- // we must dynamically populate the select option based on which is selected
43
- // because there is no single "month" option, it must always be one of these two
44
- const monthlySelectOptionValue = value.type === DurationPeriod.WeekDayOfMonth
45
- ? DurationPeriod.WeekDayOfMonth
46
- : DurationPeriod.DayOfMonth;
47
- const hasExtraFrequencyDescriptor = value.type === DurationPeriod.WeekDayOfMonth ||
48
- value.type === DurationPeriod.DayOfMonth ||
49
- value.type === DurationPeriod.Week;
50
- return (React__default.createElement(Content, null,
51
- React__default.createElement("div", { className: styles.container },
52
- React__default.createElement(Text, { variation: disabledTextVariation }, "Every"),
53
- React__default.createElement("div", { className: styles.fullWidthWrapper },
54
- React__default.createElement(InputGroup, { flowDirection: "horizontal" },
55
- React__default.createElement(InputNumber, { disabled: disabled, name: "schedule-recurrence-interval", value: value.interval, min: 1, maxLength: 3, onChange: onChangeInterval }),
56
- React__default.createElement(Select, { disabled: disabled, value: value.type, onChange: onChangeType, name: "schedule-recurrence-type" },
57
- React__default.createElement(SelectOption, { value: DurationPeriod.Day }, "Day(s)"),
58
- React__default.createElement(SelectOption, { value: DurationPeriod.Week }, "Week(s)"),
59
- React__default.createElement(SelectOption, { value: monthlySelectOptionValue }, "Month(s)"),
60
- React__default.createElement(SelectOption, { value: DurationPeriod.Year }, "Year(s)")))),
61
- hasExtraFrequencyDescriptor && (React__default.createElement(Text, { variation: disabledTextVariation }, "on"))),
62
- isMonthly(value) && (React__default.createElement(MonthlySelect, { disabled: disabled, onChange: onChangeType, selectedMonthOption: value.type })),
63
- React__default.createElement(CurrentRecurrenceComponent, { disabled: disabled, recurrenceRule: value, onChange: onChange })));
64
- function onChangeInterval(interval) {
65
- onChange(Object.assign(Object.assign({}, value), { interval }));
66
- }
67
- function onChangeType(type) {
68
- onChange(Object.assign({ interval: value.interval }, typeInitialStateMap[type]));
69
- }
70
- }
71
-
72
- export { RecurringSelect as R };
@@ -1,59 +0,0 @@
1
- # RecurringSelect
2
-
3
- > **WARNING:** This component has been deprecated from the design system. If needed, an
4
- > equivalent component still exists in the shared component directory of our
5
- > frontend project.
6
-
7
- A RecurringSelect is used to provide an intuitive, accessible pre-built UI
8
- allowing a user to build a custom schedule using a handful of different time
9
- intervals.
10
-
11
- While it can be used in isolation, most often makes sense to include it as part
12
- of a more complex scheduling component that can use the returned data as part of
13
- a complete schedule.
14
-
15
- ## Design & usage guidelines
16
-
17
- The RecurringSelect is a complex tool, so ensure the user will require the full
18
- suite of recurrence options before reaching for it. For instance where you may
19
- only require a simple recurrence option, such as "Every `n` weeks", you are
20
- likely better served using basic form inputs such as InputNumber or Select to
21
- give the user fewer options.
22
-
23
- The visual calendar selections in the RecurringSelect will scale up or down to
24
- adapt to the width of the RecurringSelect's container, allowing this pattern to
25
- be more prominent when used as a primary interface, or work in a smaller
26
- column-based or mobile interface. Consider this as you design solutions that may
27
- require RecurringSelect.
28
-
29
- ### Disabled state
30
-
31
- When the RecurringSelect is set to `disabled`, all child components become
32
- disabled. As with any design, your first goal should be **to avoid creating a
33
- flow where the user encounters a disabled state**, so only use this approach if
34
- a disabled state cannot be avoided.
35
-
36
- ## Accessibility
37
-
38
- The RecurringSelect component is entirely usable by the keyboard.
39
-
40
- All selections can be done and undone with tabs and the space bar. The "visual"
41
- calendar-style selectors are all built using radio or checkbox elements where
42
- necessary, ensuring that users of assistive tech have appropriate context as to
43
- the type of selection they are making.
44
-
45
- ## Related components
46
-
47
- To allow the user to select specific dates, use
48
- [Datepicker](../Datepicker/Datepicker.md) or [InputDate](../InputDate/InputDate.md).
49
-
50
-
51
- ## Props
52
-
53
- ### Web
54
-
55
- | Prop | Type | Required | Default | Description |
56
- |------|------|----------|---------|-------------|
57
- | `onChange` | `(value: RecurrenceRule) => void` | Yes | — | |
58
- | `value` | `RecurrenceRule` | Yes | — | |
59
- | `disabled` | `boolean` | No | `false` | |