willba-component-library 0.1.76 → 0.1.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.esm.js +16 -65
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +16 -65
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +16 -65
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/components/calendar/Calendar.css +0 -1
- package/src/components/FilterBar/hooks/useFilterBar.tsx +11 -46
package/lib/index.js
CHANGED
|
@@ -4009,7 +4009,7 @@ var useFilterBar = function (_a) {
|
|
|
4009
4009
|
setSelectedFilter(id);
|
|
4010
4010
|
};
|
|
4011
4011
|
var handleSubmit = function () {
|
|
4012
|
-
var e_1, _a
|
|
4012
|
+
var e_1, _a;
|
|
4013
4013
|
var newParams = {
|
|
4014
4014
|
startDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
4015
4015
|
? format(calendarRange.from, 'yyyy-MM-dd')
|
|
@@ -4021,75 +4021,26 @@ var useFilterBar = function (_a) {
|
|
|
4021
4021
|
ageCategories: ageCategories,
|
|
4022
4022
|
}),
|
|
4023
4023
|
};
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
var
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
updatedParams.append(key, value);
|
|
4031
|
-
}
|
|
4032
|
-
}
|
|
4033
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
4034
|
-
finally {
|
|
4035
|
-
try {
|
|
4036
|
-
if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
|
|
4037
|
-
}
|
|
4038
|
-
finally { if (e_1) throw e_1.error; }
|
|
4039
|
-
}
|
|
4040
|
-
try {
|
|
4041
|
-
for (var _g = __values(Object.entries(newParams)), _h = _g.next(); !_h.done; _h = _g.next()) {
|
|
4042
|
-
var _j = __read(_h.value, 2), key = _j[0], value = _j[1];
|
|
4043
|
-
if (value) {
|
|
4044
|
-
updatedParams.set(key, value.toString());
|
|
4045
|
-
}
|
|
4046
|
-
else {
|
|
4047
|
-
updatedParams.delete(key);
|
|
4048
|
-
}
|
|
4049
|
-
}
|
|
4050
|
-
}
|
|
4051
|
-
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
4052
|
-
finally {
|
|
4053
|
-
try {
|
|
4054
|
-
if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
|
|
4024
|
+
var querySearchParams = new URLSearchParams();
|
|
4025
|
+
try {
|
|
4026
|
+
for (var _b = __values(Object.entries(newParams)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
4027
|
+
var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
|
|
4028
|
+
if (value) {
|
|
4029
|
+
querySearchParams.append(key, value.toString());
|
|
4055
4030
|
}
|
|
4056
|
-
finally { if (e_2) throw e_2.error; }
|
|
4057
4031
|
}
|
|
4058
|
-
var baseUrl = window.location.origin + window.location.pathname;
|
|
4059
|
-
var updatedUrl = "".concat(baseUrl, "?").concat(updatedParams.toString());
|
|
4060
|
-
handleSelectedFilter(false);
|
|
4061
|
-
if (onSubmit && selectedPath === Pages.ROOMS) {
|
|
4062
|
-
var updatedParamsObject_1 = {};
|
|
4063
|
-
updatedParams.forEach(function (value, key) {
|
|
4064
|
-
if (value)
|
|
4065
|
-
updatedParamsObject_1[key] = value;
|
|
4066
|
-
});
|
|
4067
|
-
return onSubmit(updatedParamsObject_1);
|
|
4068
|
-
}
|
|
4069
|
-
return (window.location.href = updatedUrl);
|
|
4070
4032
|
}
|
|
4071
|
-
|
|
4072
|
-
|
|
4033
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
4034
|
+
finally {
|
|
4073
4035
|
try {
|
|
4074
|
-
|
|
4075
|
-
var _m = __read(_l.value, 2), key = _m[0], value = _m[1];
|
|
4076
|
-
if (value) {
|
|
4077
|
-
querySearchParams.append(key, value.toString());
|
|
4078
|
-
}
|
|
4079
|
-
}
|
|
4080
|
-
}
|
|
4081
|
-
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
4082
|
-
finally {
|
|
4083
|
-
try {
|
|
4084
|
-
if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
|
|
4085
|
-
}
|
|
4086
|
-
finally { if (e_3) throw e_3.error; }
|
|
4036
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
4087
4037
|
}
|
|
4088
|
-
|
|
4089
|
-
return onSubmit && selectedPath === Pages.ROOMS
|
|
4090
|
-
? onSubmit(newParams)
|
|
4091
|
-
: (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
|
|
4038
|
+
finally { if (e_1) throw e_1.error; }
|
|
4092
4039
|
}
|
|
4040
|
+
handleSelectedFilter(false);
|
|
4041
|
+
return onSubmit && selectedPath === Pages.ROOMS
|
|
4042
|
+
? onSubmit(newParams)
|
|
4043
|
+
: (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
|
|
4093
4044
|
};
|
|
4094
4045
|
var handleResetFilters = function () {
|
|
4095
4046
|
setAgeCategoryCounts({});
|
|
@@ -11060,7 +11011,7 @@ var reactResponsiveExports = reactResponsive.exports;
|
|
|
11060
11011
|
var css_248z$4 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
|
|
11061
11012
|
styleInject(css_248z$4);
|
|
11062
11013
|
|
|
11063
|
-
var css_248z$3 = ".will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n text-align: left;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n
|
|
11014
|
+
var css_248z$3 = ".will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n text-align: left;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n.my-today:not(.rdp-day_selected) { \n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 10px;\n }\n \n .will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 10px;\n }\n}\n\n\n";
|
|
11064
11015
|
styleInject(css_248z$3);
|
|
11065
11016
|
|
|
11066
11017
|
var Calendar = React__default.forwardRef(function (_a, ref) {
|