{settings.description}
);
diff --git a/src/build/alma-checkout-blocks.asset.php b/src/build/alma-checkout-blocks.asset.php
index 059af7db..2815e8cb 100644
--- a/src/build/alma-checkout-blocks.asset.php
+++ b/src/build/alma-checkout-blocks.asset.php
@@ -1 +1 @@
- array('react', 'react-dom', 'wp-data', 'wp-element'), 'version' => '13b1b261f42717270b07');
+ array('react', 'react-dom', 'wp-data', 'wp-element'), 'version' => '47624a2f8e34398a65fb');
diff --git a/src/build/alma-checkout-blocks.css b/src/build/alma-checkout-blocks.css
index ccb8e8f1..9e13c2de 100644
--- a/src/build/alma-checkout-blocks.css
+++ b/src/build/alma-checkout-blocks.css
@@ -1,4 +1,279 @@
-html{box-sizing:border-box}body{font-family:var(--font-family-venn),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--off-white);color:var(--off-black)}*,:after,:before{box-sizing:inherit;outline:none}*{-webkit-tap-highlight-color:transparent;outline:none;touch-action:manipulation}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{cursor:pointer}a{color:var(--off-black)}
-.buttonsContainer{margin-bottom:10px}.paymentMethodLabel span{align-items:center;display:flex;flex-direction:row;margin-bottom:0}.paymentMethodLabel span div{color:var(--off-black);font-weight:700}.toggleButtonFieldLabel{margin-bottom:17px}.payNowLabel{color:var(--off-black);margin-bottom:-17px}.toggleButtonField>div:nth-of-type(2){display:flex;gap:var(--spacing-2)}.toggleButtonField>div:nth-of-type(2)>button{font-size:var(--font-base);height:45px;width:45px}.payNow{display:none}
-.total{color:var(--off-black);font-family:var(--font-family-argent-cf),var(--font-family-sans-serif);font-size:var(--font-base);line-height:150%}.fees,.total{display:flex;flex-direction:row;font-weight:var(--weight-semi-bold);justify-content:space-between}.fees{font-family:var(--font-family-venn),var(--font-family-sans-serif);font-size:var(--font-xs);line-height:14px}.feesNumbers{display:flex;flex-direction:row;@mixin column-gap var(--spacing-1)}.discountedFees{color:#819098;text-decoration:line-through}@media screen and (--min-w-sm ){.total{font-size:var(--font-lg)}.fees{font-size:var(--font-sm)}}
-.bullet{background-color:var(--soft-orange);border-radius:50%;flex-shrink:0;height:10px;margin-right:6px;margin-top:6px;width:10px;z-index:1}.installmentContent{display:flex;flex-shrink:0}.alma-card-installments{margin-top:10px}.firstBullet{background-color:var(--alma-orange);z-index:1}.firstInstallmentContent{color:var(--off-black);font-weight:700}.separator{background-color:var(--off-white);height:calc(100% - 50px);left:11.65px;position:absolute;top:35px;width:2px}.installments{display:flex;flex-direction:column;margin-bottom:var(--spacing-4);@mixin row-gap var(--spacing-1)}.installment{display:flex;flex-direction:row;font-size:var(--font-sm);justify-content:space-between;line-height:22px;width:100%}.hasBreadcrumb{margin-left:calc(var(--spacing-4))}.firstInstallment{font-family:var(--font-family-venn),var(--font-family-sans-serif);font-size:var(--font-base);font-weight:var(--weight-semi-bold)}.errorMessage{display:flex;flex-direction:column;font-size:var(--font-sm);@mixin row-gap var(--spacing-4)}.errorMessage>button{margin-top:var(--spacing-4)}.logo{width:50px}.footer{background-color:var(--off-white)!important;border-radius:var(--radius-lg)!important;display:flex;flex-direction:column;margin:0!important;padding:var(--spacing-4)!important;width:auto;@mixin row-gap var(--spacing-1)}.footerCard{display:flex;flex-direction:column;@mixin row-gap var(--spacing-6)}@media screen and (--min-w-sm ){.errorMessage{font-size:var(--font-base)}.shortenHugePlan{max-height:120px;overflow-y:scroll;padding-right:var(--spacing-4)}.installments.shortenHugePlan{margin-bottom:0}.separator{left:35.5px;top:80px}}
+/*!*********************************************************************************************************************************************************************************************************!*\
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/@alma/react-components/dist/global.css ***!
+ \*********************************************************************************************************************************************************************************************************/
+html {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: var(--font-family-venn), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: var(--off-black);
+ background-color: var(--off-white);
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+ outline: none;
+}
+
+/* https://stackoverflow.com/a/42508425 (modified because buttons & checkboxes kept blueing) */
+* {
+ -webkit-tap-highlight-color: transparent;
+ outline: none;
+ touch-action: manipulation;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+button {
+ cursor: pointer;
+}
+
+
+a {
+ color: var(--off-black);
+}
+
+/*!*********************************************************************************************************************************************************************************************!*\
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/assets/css/alma-checkout-blocks.css ***!
+ \*********************************************************************************************************************************************************************************************/
+/**
+ * Checkout page.
+ *
+ * @package Alma_Gateway_For_Woocommerce
+ * @since v4.2.5
+ **/
+
+.buttonsContainer {
+ margin-bottom: 10px;
+}
+
+.paymentMethodLabel span {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 0;
+}
+
+.paymentMethodLabel span div {
+ font-weight: 700;
+ color: var(--off-black);
+}
+
+.toggleButtonFieldLabel {
+ margin-bottom: 17px;
+}
+
+.payNowLabel {
+ margin-bottom: -17px;
+ color: var(--off-black);
+}
+
+.toggleButtonField > div:nth-of-type(2) {
+ display: flex;
+ gap: var(--spacing-2);
+}
+
+.toggleButtonField > div:nth-of-type(2) > button {
+ width: 45px;
+ height: 45px;
+ font-size: var(--font-base);
+}
+
+.payNow {
+ display: none;
+}
+
+/*!***********************************************************************************************************************************************************************************************************************************!*\
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotal.css ***!
+ \***********************************************************************************************************************************************************************************************************************************/
+.total {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ font-family: var(--font-family-argent-cf), var(--font-family-sans-serif);
+ font-size: var(--font-base);
+ line-height: 150%;
+ font-weight: var(--weight-semi-bold);
+ color: var(--off-black);
+}
+
+.fees {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ font-family: var(--font-family-venn), var(--font-family-sans-serif);
+ font-weight: var(--weight-semi-bold);
+ font-size: var(--font-xs);
+ line-height: 14px;
+}
+
+.feesNumbers {
+ display: flex;
+ flex-direction: row;
+
+ @mixin column-gap var(--spacing-1);
+}
+
+.discountedFees {
+ text-decoration: line-through;
+ color: #819098;
+}
+
+@media screen and (--min-w-sm) {
+ .total {
+ font-size: var(--font-lg);
+ }
+
+ .fees {
+ font-size: var(--font-sm);
+ }
+}
+
+/*!************************************************************************************************************************************************************************************************************!*\
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/assets/js/components/Installments/Installments.css ***!
+ \************************************************************************************************************************************************************************************************************/
+.bullet {
+ margin-top: 6px;
+ margin-right: 6px;
+ width: 10px;
+ height: 10px;
+ background-color: var(--soft-orange);
+ border-radius: 50%;
+ flex-shrink: 0;
+ z-index: 1;
+}
+
+.installmentContent {
+ display: flex;
+ flex-shrink: 0;
+}
+
+.alma-card-installments {
+ margin-top: 10px;
+}
+
+.firstBullet {
+ background-color: var(--alma-orange);
+ z-index: 1;
+}
+
+.firstInstallmentContent {
+ font-weight: 700;
+ color: var(--off-black);
+}
+
+.separator {
+ position: absolute;
+ width: 2px;
+
+ /* Magic number for the top position to align as best as possible with the 1st bullet */
+ top: 35px;
+
+ /* half pixel is used because the separator should be centered with the bullet
+ * And the bullet's width is 4px, and the separator width is 2px. */
+ left: 11.65px;
+
+ /* We want the separator to be 100% long, minus +/- the height of the footer, so it does not exceed */
+ height: calc(100% - 50px);
+ background-color: var(--off-white);
+}
+
+.installments {
+ margin-bottom: var(--spacing-4);
+ display: flex;
+ flex-direction: column;
+
+ @mixin row-gap var(--spacing-1);
+}
+
+.installment {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ font-size: var(--font-sm);
+ line-height: 22px;
+ width: 100%;
+}
+
+.hasBreadcrumb {
+ margin-left: calc(var(--spacing-4));
+}
+
+.firstInstallment {
+ font-weight: var(--weight-semi-bold);
+ font-family: var(--font-family-venn), var(--font-family-sans-serif);
+ font-size: var(--font-base);
+}
+
+.errorMessage {
+ display: flex;
+ font-size: var(--font-sm);
+ flex-direction: column;
+
+ @mixin row-gap var(--spacing-4);
+}
+
+.errorMessage > button {
+ margin-top: var(--spacing-4);
+}
+
+.logo {
+ width: 50px;
+}
+
+.footer {
+ /* important needed for chrome 49 */
+ margin: 0 !important;
+ width: auto;
+ background-color: var(--off-white) !important;
+ padding: var(--spacing-4) !important;
+ border-radius: var(--radius-lg) !important;
+ display: flex;
+ flex-direction: column;
+
+ @mixin row-gap var(--spacing-1);
+}
+
+.footerCard {
+ display: flex;
+ flex-direction: column;
+
+ @mixin row-gap var(--spacing-6);
+}
+
+@media screen and (--min-w-sm) {
+ .errorMessage {
+ font-size: var(--font-base);
+ }
+
+ .shortenHugePlan {
+ max-height: 120px;
+ overflow-y: scroll;
+ padding-right: var(--spacing-4);
+ }
+
+ .installments.shortenHugePlan {
+ margin-bottom: 0;
+ }
+
+ .separator {
+ /* half pixel is used because the separator should be centered with the bullet
+ * And the bullet's width is 4px, and the separator width is 2px. */
+ left: 35.5px;
+
+ /* Magic number for the top position to align as best as possible with the 1st bullet */
+ top: 80px;
+ }
+}
+
+
+/*# sourceMappingURL=alma-checkout-blocks.css.map*/
\ No newline at end of file
diff --git a/src/build/alma-checkout-blocks.js b/src/build/alma-checkout-blocks.js
index 6a6cc967..42bfdd4e 100644
--- a/src/build/alma-checkout-blocks.js
+++ b/src/build/alma-checkout-blocks.js
@@ -1,4 +1,45629 @@
-(()=>{var e,t,n,r={9455:(e,t)=>{"use strict";t.A=function(e,t){if(e&&t){var n=Array.isArray(t)?t:t.split(",");if(0===n.length)return!0;var r=e.name||"",l=(e.type||"").toLowerCase(),i=l.replace(/\/.*$/,"");return n.some((function(e){var t=e.trim().toLowerCase();return"."===t.charAt(0)?r.toLowerCase().endsWith(t):t.endsWith("/*")?i===t.replace(/\/.*$/,""):l===t}))}return!0}},3572:(e,t,n)=>{"use strict";var r=n(1609),l=n.n(r);const i=window.wp.element,o=window.wp.data;var a=n(6942),d=n.n(a),c=n(5556),s=n.n(c);function C(e){return"object"==typeof e&&null!=e&&1===e.nodeType}function u(e,t){return(!t||"hidden"!==e)&&"visible"!==e&&"clip"!==e}function p(e,t){if(e.clientHeight
" + loading + "
");
+
+ // Create the payment id and order.
+ jQuery.post(ajax_object.ajax_url, data).done(function (response) {
+ var paymentId = response.data.payment_id;
+ var orderId = response.data.order_id;
+
+ // Start the payment.
+ inPage.startPayment({
+ paymentId: paymentId,
+ onUserCloseModal: () => {
+ cancel_order(orderId);
+ $('.alma-loader-wrapper').remove();
+ }
+ });
+ }).fail(function (response) {
+ $('.alma-loader-wrapper').remove();
+ location.reload();
+ });
+ }
+ };
+ function cancel_order(orderId) {
+ var data = {
+ 'action': 'alma_cancel_order_in_page',
+ 'order_id': orderId
+ };
+ jQuery.post(ajax_object.ajax_url, data);
+ }
+})(jQuery);
+
+/***/ }),
+
+/***/ "./src/assets/js/components/DisplayAlmaBlocks.js":
+/*!*******************************************************!*\
+ !*** ./src/assets/js/components/DisplayAlmaBlocks.js ***!
+ \*******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ DisplayAlmaBlocks: () => (/* binding */ DisplayAlmaBlocks)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _alma_blocks_component_tsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./alma-blocks-component.tsx */ "./src/assets/js/components/alma-blocks-component.tsx");
+
+
+
+
+const DisplayAlmaBlocks = props => {
+ var _eligibility$gateway$;
+ const {
+ eventRegistration,
+ emitResponse,
+ settings,
+ gateway,
+ store_key,
+ isPayNow
+ } = props;
+ const {
+ onPaymentSetup
+ } = eventRegistration;
+ const {
+ CART_STORE_KEY
+ } = window.wc.wcBlocksData;
+ const {
+ cartTotal
+ } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.useSelect)(select => ({
+ cartTotal: select(CART_STORE_KEY).getCartTotals()
+ }), []);
+ const {
+ eligibility,
+ isLoading
+ } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.useSelect)(select => ({
+ eligibility: select(store_key).getAlmaEligibility(),
+ isLoading: select(store_key).isLoading()
+ }), []);
+
+ // Init default plan
+ let default_plan = '';
+ if (Object.keys(eligibility[gateway]).length > 0) {
+ // default plan is the first plan
+ default_plan = Object.keys(eligibility[gateway])[0];
+ }
+ const [selectedFeePlan, setSelectedFeePlan] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useState)(default_plan);
+ let plan = (_eligibility$gateway$ = eligibility[gateway][selectedFeePlan]) !== null && _eligibility$gateway$ !== void 0 ? _eligibility$gateway$ : eligibility[gateway][default_plan];
+ (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {
+ const unsubscribe = onPaymentSetup(() => {
+ const nonceKey = `alma_checkout_nonce${settings.gateway_name}`;
+ const paymentMethodData = {
+ [nonceKey]: `${settings.nonce_value}`,
+ alma_fee_plan: plan.planKey,
+ payment_method: settings.gateway_name
+ };
+ return {
+ type: emitResponse.responseTypes.SUCCESS,
+ meta: {
+ paymentMethodData
+ }
+ };
+ });
+ // Unsubscribes when this component is unmounted.
+ return () => {
+ unsubscribe();
+ };
+ }, [eligibility, onPaymentSetup, selectedFeePlan]);
+ return isLoading ? (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null) : (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_alma_blocks_component_tsx__WEBPACK_IMPORTED_MODULE_3__.AlmaBlocks, {
+ hasInPage: settings.is_in_page,
+ isPayNow: isPayNow,
+ totalPrice: cartTotal.total_price,
+ settings: settings,
+ selectedFeePlan: plan.planKey,
+ setSelectedFeePlan: setSelectedFeePlan,
+ plans: eligibility[gateway]
+ });
+};
+
+/***/ }),
+
+/***/ "./src/assets/js/components/DisplayAlmaInPageBlocks.js":
+/*!*************************************************************!*\
+ !*** ./src/assets/js/components/DisplayAlmaInPageBlocks.js ***!
+ \*************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ DisplayAlmaInPageBlocks: () => (/* binding */ DisplayAlmaInPageBlocks)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _alma_blocks_component_tsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./alma-blocks-component.tsx */ "./src/assets/js/components/alma-blocks-component.tsx");
+
+
+
+
+const DisplayAlmaInPageBlocks = props => {
+ var _eligibility$gateway$;
+ const {
+ settings,
+ gateway,
+ store_key,
+ setInPage,
+ isPayNow
+ } = props;
+ const {
+ CART_STORE_KEY
+ } = window.wc.wcBlocksData;
+ const {
+ cartTotal
+ } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.useSelect)(select => ({
+ cartTotal: select(CART_STORE_KEY).getCartTotals()
+ }), []);
+ const {
+ eligibility,
+ isLoading
+ } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.useSelect)(select => ({
+ eligibility: select(store_key).getAlmaEligibility(),
+ isLoading: select(store_key).isLoading()
+ }), []);
+
+ // Init default plan
+ let default_plan = '';
+ if (Object.keys(eligibility[gateway]).length > 0) {
+ // default plan is the first plan
+ default_plan = Object.keys(eligibility[gateway])[0];
+ }
+ const [selectedFeePlan, setSelectedFeePlan] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useState)(default_plan);
+ (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {
+ // Transfer the selected fee plan to the alma redux store
+ (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.dispatch)(store_key).setSelectedFeePlan(selectedFeePlan);
+ }, [selectedFeePlan]);
+ let plan = (_eligibility$gateway$ = eligibility[gateway][selectedFeePlan]) !== null && _eligibility$gateway$ !== void 0 ? _eligibility$gateway$ : eligibility[gateway][default_plan];
+ let inPage = undefined;
+ function initializeInpage(settingsInPage, total_price) {
+ if (inPage !== undefined && document.getElementById('alma-embedded-iframe') !== null) {
+ inPage.unmount();
+ }
+ inPage = Alma.InPage.initialize({
+ merchantId: settingsInPage.merchant_id,
+ amountInCents: total_price,
+ installmentsCount: plan.installmentsCount,
+ selector: "#alma-inpage-alma_in_page",
+ deferredDays: plan.deferredDays,
+ deferredMonths: plan.deferredMonths,
+ environment: settingsInPage.environment,
+ locale: settingsInPage.locale
+ });
+ setInPage(inPage);
+ }
+ (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {
+ if (!isLoading) {
+ initializeInpage(settings, cartTotal.total_price);
+ }
+ }, [selectedFeePlan, cartTotal, isLoading]);
+ const displayInstallments = isPayNow ? 'none' : 'block';
+ return isLoading ? (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null) : (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_alma_blocks_component_tsx__WEBPACK_IMPORTED_MODULE_3__.AlmaBlocks, {
+ hasInPage: settings.is_in_page,
+ isPayNow: isPayNow,
+ totalPrice: cartTotal.total_price,
+ settings: settings,
+ selectedFeePlan: plan.planKey,
+ setSelectedFeePlan: setSelectedFeePlan,
+ plans: eligibility[gateway]
+ }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ id: "alma-inpage-alma_in_page",
+ style: {
+ display: displayInstallments
+ }
+ }));
+};
+
+/***/ }),
+
+/***/ "./src/assets/js/components/Installments/Installment.tsx":
+/*!***************************************************************!*\
+ !*** ./src/assets/js/components/Installments/Installment.tsx ***!
+ \***************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ Installment: () => (/* binding */ Installment)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/src/components/message.js");
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+
+
+
+
+const Installment = ({
+ installment: {
+ due_date,
+ localized_due_date
+ },
+ totalAmountInEuros
+}) => {
+ const date = new Date(due_date * 1000);
+ const isToday = localized_due_date === "today";
+ return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()("installmentContent", {
+ firstInstallmentContent: isToday
+ })
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()("bullet", {
+ firstBullet: isToday
+ })
+ }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "installment",
+ "data-testid": "installment"
+ }, isToday ? (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react_intl__WEBPACK_IMPORTED_MODULE_2__["default"], {
+ id: "installments.today",
+ defaultMessage: "Today"
+ }) : (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react_intl__WEBPACK_IMPORTED_MODULE_3__.FormattedDate, {
+ value: date,
+ day: "numeric",
+ month: "long",
+ year: "numeric"
+ }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react_intl__WEBPACK_IMPORTED_MODULE_3__.FormattedNumber, {
+ value: totalAmountInEuros,
+ style: "currency",
+ currency: "EUR"
+ }))));
+};
+
+/***/ }),
+
+/***/ "./src/assets/js/components/Installments/Installments.tsx":
+/*!****************************************************************!*\
+ !*** ./src/assets/js/components/Installments/Installments.tsx ***!
+ \****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ Installments: () => (/* binding */ Installments)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _alma_react_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @alma/react-components */ "./node_modules/@alma/react-components/dist/lib.es.js");
+/* harmony import */ var _InstallmentsContent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./InstallmentsContent */ "./src/assets/js/components/Installments/InstallmentsContent.tsx");
+
+
+
+
+const Installments = ({
+ feePlan,
+ amountInCents
+}) => {
+ return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_alma_react_components__WEBPACK_IMPORTED_MODULE_1__.CardTemplate, {
+ "data-testid": "cardInstallments",
+ padding: "sm",
+ header: null
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_InstallmentsContent__WEBPACK_IMPORTED_MODULE_2__.InstallmentsContent, {
+ feePlan: feePlan,
+ amountInCents: amountInCents
+ }));
+};
+
+/***/ }),
+
+/***/ "./src/assets/js/components/Installments/InstallmentsContent.tsx":
+/*!***********************************************************************!*\
+ !*** ./src/assets/js/components/Installments/InstallmentsContent.tsx ***!
+ \***********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ InstallmentsContent: () => (/* binding */ InstallmentsContent)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _Installment__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Installment */ "./src/assets/js/components/Installments/Installment.tsx");
+/* harmony import */ var _alma_react_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @alma/react-components */ "./node_modules/@alma/react-components/dist/lib.es.js");
+/* harmony import */ var _InstallmentsTotal_InstallmentsTotal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./InstallmentsTotal/InstallmentsTotal */ "./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotal.tsx");
+/* harmony import */ var _InstallmentsTotal_InstallmentsTotalFees__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./InstallmentsTotal/InstallmentsTotalFees */ "./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotalFees.tsx");
+/* harmony import */ var _Installments_Installments_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Installments/Installments.css */ "./src/assets/js/components/Installments/Installments.css");
+
+
+
+
+
+
+
+const InstallmentsContent = ({
+ feePlan,
+ amountInCents
+}) => {
+ if (!feePlan.paymentPlan) {
+ return null;
+ }
+ const customerFees = feePlan.paymentPlan[0].customer_fee;
+ const centsToEuros = cents => {
+ return cents / 100;
+ };
+ return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "separator"
+ }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "installments"
+ }, feePlan.paymentPlan.map((installment, index) => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_Installment__WEBPACK_IMPORTED_MODULE_1__.Installment, {
+ key: index,
+ installment: installment,
+ totalAmountInEuros: centsToEuros(installment.total_amount)
+ }))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "footerCard"
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_alma_react_components__WEBPACK_IMPORTED_MODULE_2__.CardFooter, {
+ className: "footer"
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_InstallmentsTotal_InstallmentsTotal__WEBPACK_IMPORTED_MODULE_3__.InstallmentsTotal, {
+ totalAmount: amountInCents,
+ customerFees: customerFees
+ }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_InstallmentsTotal_InstallmentsTotalFees__WEBPACK_IMPORTED_MODULE_4__.InstallmentsTotalFees, {
+ customerFees: customerFees
+ }))));
+};
+
+/***/ }),
+
+/***/ "./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotal.tsx":
+/*!***************************************************************************************!*\
+ !*** ./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotal.tsx ***!
+ \***************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ InstallmentsTotal: () => (/* binding */ InstallmentsTotal)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/src/components/message.js");
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/index.js");
+/* harmony import */ var _InstallmentsTotal_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./InstallmentsTotal.css */ "./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotal.css");
+
+
+
+
+const InstallmentsTotal = ({
+ totalAmount,
+ customerFees
+}) => {
+ const totalAmountIncludingFees = totalAmount / 100 + customerFees / 100;
+ return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "total"
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react_intl__WEBPACK_IMPORTED_MODULE_2__["default"], {
+ id: "installments.total",
+ defaultMessage: "Total TTC"
+ })), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react_intl__WEBPACK_IMPORTED_MODULE_3__.FormattedNumber, {
+ value: totalAmountIncludingFees,
+ style: "currency",
+ currency: "EUR"
+ })));
+};
+
+/***/ }),
+
+/***/ "./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotalFees.tsx":
+/*!*******************************************************************************************!*\
+ !*** ./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotalFees.tsx ***!
+ \*******************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ InstallmentsTotalFees: () => (/* binding */ InstallmentsTotalFees)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _InstallmentsTotal_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./InstallmentsTotal.css */ "./src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotal.css");
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/index.js");
+
+
+
+
+const InstallmentsTotalFees = ({
+ customerFees
+}) => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "fees"
+}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, "Payment costs"), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "feesNumbers"
+}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react_intl__WEBPACK_IMPORTED_MODULE_2__.FormattedNumber, {
+ value: customerFees / 100,
+ style: "currency",
+ currency: "EUR"
+})));
+
+/***/ }),
+
+/***/ "./src/assets/js/components/Label.js":
+/*!*******************************************!*\
+ !*** ./src/assets/js/components/Label.js ***!
+ \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ Label: () => (/* binding */ Label)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _alma_react_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @alma/react-components */ "./node_modules/@alma/react-components/dist/lib.es.js");
+
+
+const Label = props => {
+ const {
+ components,
+ title
+ } = props;
+ const {
+ PaymentMethodLabel
+ } = components;
+ const icon = (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_alma_react_components__WEBPACK_IMPORTED_MODULE_1__.Logo, {
+ style: {
+ width: 'auto',
+ height: '1em'
+ },
+ logo: "alma-orange"
+ });
+ const text = (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, title);
+ return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+ className: "paymentMethodLabel"
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(PaymentMethodLabel, {
+ text: text,
+ icon: icon
+ }));
+};
+
+/***/ }),
+
+/***/ "./src/assets/js/components/alma-blocks-component.tsx":
+/*!************************************************************!*\
+ !*** ./src/assets/js/components/alma-blocks-component.tsx ***!
+ \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ AlmaBlocks: () => (/* binding */ AlmaBlocks)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _alma_react_components_style_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @alma/react-components/style.css */ "./node_modules/@alma/react-components/dist/style.css");
+/* harmony import */ var _alma_react_components_global_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @alma/react-components/global.css */ "./node_modules/@alma/react-components/dist/global.css");
+/* harmony import */ var _css_alma_checkout_blocks_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../css/alma-checkout-blocks.css */ "./src/assets/css/alma-checkout-blocks.css");
+/* harmony import */ var _alma_react_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @alma/react-components */ "./node_modules/@alma/react-components/dist/lib.es.js");
+/* harmony import */ var _Installments_Installments__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Installments/Installments */ "./src/assets/js/components/Installments/Installments.tsx");
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/src/components/provider.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_6__);
+
+/**
+ * Checkout blocks component.
+ *
+ * @since 5.3.0
+ *
+ * @package Alma_Gateway_For_Woocommerce
+ * @subpackage Alma_Gateway_For_Woocommerce/assets
+ */
+
+
+
+
+
+
+
+
+
+const AlmaBlocks = ({
+ settings,
+ selectedFeePlan,
+ setSelectedFeePlan,
+ hasInPage,
+ isPayNow,
+ totalPrice,
+ plans
+}) => {
+ const labels = {};
+ let values = [];
+ Object.keys(plans).forEach(function (key, index) {
+ values.push(key);
+ if (settings.gateway_name === "alma_pay_later" || settings.gateway_name === "alma_in_page_pay_later") {
+ if (plans[key].deferredDays > 0) {
+ labels[key] = "D+" + plans[key].deferredDays;
+ } else if (plans[key].deferredMonths > 0) {
+ labels[key] = "M+" + plans[key].deferredMonths;
+ }
+ } else {
+ labels[key] = plans[key].installmentsCount + "x";
+ }
+ });
+ const handleClick = optionKey => {
+ setSelectedFeePlan(optionKey);
+ };
+ const label = (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "toggleButtonFieldLabel"
+ }, settings.description);
+ return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react_intl__WEBPACK_IMPORTED_MODULE_7__["default"], {
+ locale: "fr"
+ }, isPayNow && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "payNowLabel"
+ }, label), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "buttonsContainer"
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: classnames__WEBPACK_IMPORTED_MODULE_6___default()({
+ payNow: isPayNow
+ })
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_alma_react_components__WEBPACK_IMPORTED_MODULE_4__.ToggleButtonsField, {
+ className: "toggleButtonField",
+ options: values,
+ optionLabel: key => labels[key],
+ optionKey: key => key,
+ onChange: key => handleClick(key),
+ value: selectedFeePlan,
+ label: label,
+ wide: false,
+ size: "sm",
+ error: ""
+ }))), !hasInPage && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+ className: "alma-card-installments"
+ }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_Installments_Installments__WEBPACK_IMPORTED_MODULE_5__.Installments, {
+ feePlan: plans[selectedFeePlan],
+ amountInCents: totalPrice
+ })));
+};
+
+/***/ }),
+
+/***/ "./src/assets/js/hooks/fetchAlmaEligibility.js":
+/*!*****************************************************!*\
+ !*** ./src/assets/js/hooks/fetchAlmaEligibility.js ***!
+ \*****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ fetchAlmaEligibility: () => (/* binding */ fetchAlmaEligibility)
+/* harmony export */ });
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_0__);
+
+const fetchAlmaEligibility = async (storeKey, url) => {
+ (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_0__.dispatch)(storeKey).setLoading(true);
+ try {
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/x-www-form-urlencoded'
+ }
+ });
+ const data = await response.json();
+ if (data.success) {
+ (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_0__.dispatch)(storeKey).setAlmaEligibility(data.eligibility);
+ }
+ } catch (error) {
+ console.error('Erreur lors de l’appel API :', error);
+ } finally {
+ (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_0__.dispatch)(storeKey).setLoading(false);
+ }
+};
+
+/***/ }),
+
+/***/ "./node_modules/downshift/dist/downshift.esm.js":
+/*!******************************************************!*\
+ !*** ./node_modules/downshift/dist/downshift.esm.js ***!
+ \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ "default": () => (/* binding */ Downshift$1),
+/* harmony export */ resetIdCounter: () => (/* binding */ resetIdCounter),
+/* harmony export */ useCombobox: () => (/* binding */ useCombobox),
+/* harmony export */ useMultipleSelection: () => (/* binding */ useMultipleSelection),
+/* harmony export */ useSelect: () => (/* binding */ useSelect)
+/* harmony export */ });
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-is */ "./node_modules/react-is/index.js");
+/* harmony import */ var compute_scroll_into_view__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! compute-scroll-into-view */ "./node_modules/compute-scroll-into-view/dist/index.mjs");
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+
+
+
+
+
+
+let idCounter = 0;
+/**
+ * Accepts a parameter and returns it if it's a function
+ * or a noop function if it's not. This allows us to
+ * accept a callback, but not worry about it if it's not
+ * passed.
+ * @param {Function} cb the callback
+ * @return {Function} a function
+ */
+
+function cbToCb(cb) {
+ return typeof cb === 'function' ? cb : noop;
+}
+
+function noop() {}
+/**
+ * Scroll node into view if necessary
+ * @param {HTMLElement} node the element that should scroll into view
+ * @param {HTMLElement} menuNode the menu element of the component
+ */
+
+
+function scrollIntoView(node, menuNode) {
+ if (!node) {
+ return;
+ }
+
+ const actions = (0,compute_scroll_into_view__WEBPACK_IMPORTED_MODULE_2__["default"])(node, {
+ boundary: menuNode,
+ block: 'nearest',
+ scrollMode: 'if-needed'
+ });
+ actions.forEach(_ref => {
+ let {
+ el,
+ top,
+ left
+ } = _ref;
+ el.scrollTop = top;
+ el.scrollLeft = left;
+ });
+}
+/**
+ * @param {HTMLElement} parent the parent node
+ * @param {HTMLElement} child the child node
+ * @param {Window} environment The window context where downshift renders.
+ * @return {Boolean} whether the parent is the child or the child is in the parent
+ */
+
+
+function isOrContainsNode(parent, child, environment) {
+ const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
+ return result;
+}
+/**
+ * Simple debounce implementation. Will call the given
+ * function once after the time given has passed since
+ * it was last called.
+ * @param {Function} fn the function to call after the time
+ * @param {Number} time the time to wait
+ * @return {Function} the debounced function
+ */
+
+
+function debounce(fn, time) {
+ let timeoutId;
+
+ function cancel() {
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+ }
+
+ function wrapper() {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ cancel();
+ timeoutId = setTimeout(() => {
+ timeoutId = null;
+ fn(...args);
+ }, time);
+ }
+
+ wrapper.cancel = cancel;
+ return wrapper;
+}
+/**
+ * This is intended to be used to compose event handlers.
+ * They are executed in order until one of them sets
+ * `event.preventDownshiftDefault = true`.
+ * @param {...Function} fns the event handler functions
+ * @return {Function} the event handler to add to an element
+ */
+
+
+function callAllEventHandlers() {
+ for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ fns[_key2] = arguments[_key2];
+ }
+
+ return function (event) {
+ for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+ args[_key3 - 1] = arguments[_key3];
+ }
+
+ return fns.some(fn => {
+ if (fn) {
+ fn(event, ...args);
+ }
+
+ return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
+ });
+ };
+}
+
+function handleRefs() {
+ for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ refs[_key4] = arguments[_key4];
+ }
+
+ return node => {
+ refs.forEach(ref => {
+ if (typeof ref === 'function') {
+ ref(node);
+ } else if (ref) {
+ ref.current = node;
+ }
+ });
+ };
+}
+/**
+ * This generates a unique ID for an instance of Downshift
+ * @return {String} the unique ID
+ */
+
+
+function generateId() {
+ return String(idCounter++);
+}
+/**
+ * Resets idCounter to 0. Used for SSR.
+ */
+
+
+function resetIdCounter() {
+ idCounter = 0;
+}
+/**
+ * Default implementation for status message. Only added when menu is open.
+ * Will specify if there are results in the list, and if so, how many,
+ * and what keys are relevant.
+ *
+ * @param {Object} param the downshift state and other relevant properties
+ * @return {String} the a11y status message
+ */
+
+
+function getA11yStatusMessage$1(_ref2) {
+ let {
+ isOpen,
+ resultCount,
+ previousResultCount
+ } = _ref2;
+
+ if (!isOpen) {
+ return '';
+ }
+
+ if (!resultCount) {
+ return 'No results are available.';
+ }
+
+ if (resultCount !== previousResultCount) {
+ return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
+ }
+
+ return '';
+}
+/**
+ * Takes an argument and if it's an array, returns the first item in the array
+ * otherwise returns the argument
+ * @param {*} arg the maybe-array
+ * @param {*} defaultValue the value if arg is falsey not defined
+ * @return {*} the arg or it's first item
+ */
+
+
+function unwrapArray(arg, defaultValue) {
+ arg = Array.isArray(arg) ?
+ /* istanbul ignore next (preact) */
+ arg[0] : arg;
+
+ if (!arg && defaultValue) {
+ return defaultValue;
+ } else {
+ return arg;
+ }
+}
+/**
+ * @param {Object} element (P)react element
+ * @return {Boolean} whether it's a DOM element
+ */
+
+
+function isDOMElement(element) {
+
+
+ return typeof element.type === 'string';
+}
+/**
+ * @param {Object} element (P)react element
+ * @return {Object} the props
+ */
+
+
+function getElementProps(element) {
+
+ return element.props;
+}
+/**
+ * Throws a helpful error message for required properties. Useful
+ * to be used as a default in destructuring or object params.
+ * @param {String} fnName the function name
+ * @param {String} propName the prop name
+ */
+
+
+function requiredProp(fnName, propName) {
+ // eslint-disable-next-line no-console
+ console.error(`The property "${propName}" is required in "${fnName}"`);
+}
+
+const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
+/**
+ * @param {Object} state the state object
+ * @return {Object} state that is relevant to downshift
+ */
+
+function pickState(state) {
+ if (state === void 0) {
+ state = {};
+ }
+
+ const result = {};
+ stateKeys.forEach(k => {
+ if (state.hasOwnProperty(k)) {
+ result[k] = state[k];
+ }
+ });
+ return result;
+}
+/**
+ * This will perform a shallow merge of the given state object
+ * with the state coming from props
+ * (for the controlled component scenario)
+ * This is used in state updater functions so they're referencing
+ * the right state regardless of where it comes from.
+ *
+ * @param {Object} state The state of the component/hook.
+ * @param {Object} props The props that may contain controlled values.
+ * @returns {Object} The merged controlled state.
+ */
+
+
+function getState(state, props) {
+ return Object.keys(state).reduce((prevState, key) => {
+ prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
+ return prevState;
+ }, {});
+}
+/**
+ * This determines whether a prop is a "controlled prop" meaning it is
+ * state which is controlled by the outside of this component rather
+ * than within this component.
+ *
+ * @param {Object} props The props that may contain controlled values.
+ * @param {String} key the key to check
+ * @return {Boolean} whether it is a controlled controlled prop
+ */
+
+
+function isControlledProp(props, key) {
+ return props[key] !== undefined;
+}
+/**
+ * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
+ * @param {Object} event a keyboardEvent object
+ * @return {String} keyboard key
+ */
+
+
+function normalizeArrowKey(event) {
+ const {
+ key,
+ keyCode
+ } = event;
+ /* istanbul ignore next (ie) */
+
+ if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
+ return `Arrow${key}`;
+ }
+
+ return key;
+}
+/**
+ * Simple check if the value passed is object literal
+ * @param {*} obj any things
+ * @return {Boolean} whether it's object literal
+ */
+
+
+function isPlainObject(obj) {
+ return Object.prototype.toString.call(obj) === '[object Object]';
+}
+/**
+ * Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
+ * it will wrap to either 0 or itemCount - 1.
+ *
+ * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
+ * @param {number} baseIndex The initial position to move from.
+ * @param {number} itemCount The total number of items.
+ * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
+ * @param {boolean} circular Specify if navigation is circular. Default is true.
+ * @returns {number} The new index after the move.
+ */
+
+
+function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
+ if (circular === void 0) {
+ circular = true;
+ }
+
+ if (itemCount === 0) {
+ return -1;
+ }
+
+ const itemsLastIndex = itemCount - 1;
+
+ if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
+ baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
+ }
+
+ let newIndex = baseIndex + moveAmount;
+
+ if (newIndex < 0) {
+ newIndex = circular ? itemsLastIndex : 0;
+ } else if (newIndex > itemsLastIndex) {
+ newIndex = circular ? 0 : itemsLastIndex;
+ }
+
+ const nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
+
+ if (nonDisabledNewIndex === -1) {
+ return baseIndex >= itemCount ? -1 : baseIndex;
+ }
+
+ return nonDisabledNewIndex;
+}
+/**
+ * Returns the next index in the list of an item that is not disabled.
+ *
+ * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
+ * @param {number} baseIndex The initial position to move from.
+ * @param {number} itemCount The total number of items.
+ * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
+ * @param {boolean} circular Specify if navigation is circular. Default is true.
+ * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
+ */
+
+
+function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
+ const currentElementNode = getItemNodeFromIndex(baseIndex);
+
+ if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
+ return baseIndex;
+ }
+
+ if (moveAmount > 0) {
+ for (let index = baseIndex + 1; index < itemCount; index++) {
+ if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
+ return index;
+ }
+ }
+ } else {
+ for (let index = baseIndex - 1; index >= 0; index--) {
+ if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
+ return index;
+ }
+ }
+ }
+
+ if (circular) {
+ return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false);
+ }
+
+ return -1;
+}
+/**
+ * Checks if event target is within the downshift elements.
+ *
+ * @param {EventTarget} target Target to check.
+ * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
+ * @param {Window} environment The window context where downshift renders.
+ * @param {boolean} checkActiveElement Whether to also check activeElement.
+ *
+ * @returns {boolean} Whether or not the target is within downshift elements.
+ */
+
+
+function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
+ if (checkActiveElement === void 0) {
+ checkActiveElement = true;
+ }
+
+ return downshiftElements.some(contextNode => contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)));
+} // eslint-disable-next-line import/no-mutable-exports
+
+
+let validateControlledUnchanged = noop;
+/* istanbul ignore next */
+
+if (true) {
+ validateControlledUnchanged = (state, prevProps, nextProps) => {
+ const warningDescription = `This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props`;
+ Object.keys(state).forEach(propKey => {
+ if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
+ // eslint-disable-next-line no-console
+ console.error(`downshift: A component has changed the controlled prop "${propKey}" to be uncontrolled. ${warningDescription}`);
+ } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
+ // eslint-disable-next-line no-console
+ console.error(`downshift: A component has changed the uncontrolled prop "${propKey}" to be controlled. ${warningDescription}`);
+ }
+ });
+ };
+}
+
+const cleanupStatus = debounce(documentProp => {
+ getStatusDiv(documentProp).textContent = '';
+}, 500);
+/**
+ * @param {String} status the status message
+ * @param {Object} documentProp document passed by the user.
+ */
+
+function setStatus(status, documentProp) {
+ const div = getStatusDiv(documentProp);
+
+ if (!status) {
+ return;
+ }
+
+ div.textContent = status;
+ cleanupStatus(documentProp);
+}
+/**
+ * Get the status node or create it if it does not already exist.
+ * @param {Object} documentProp document passed by the user.
+ * @return {HTMLElement} the status node.
+ */
+
+
+function getStatusDiv(documentProp) {
+ if (documentProp === void 0) {
+ documentProp = document;
+ }
+
+ let statusDiv = documentProp.getElementById('a11y-status-message');
+
+ if (statusDiv) {
+ return statusDiv;
+ }
+
+ statusDiv = documentProp.createElement('div');
+ statusDiv.setAttribute('id', 'a11y-status-message');
+ statusDiv.setAttribute('role', 'status');
+ statusDiv.setAttribute('aria-live', 'polite');
+ statusDiv.setAttribute('aria-relevant', 'additions text');
+ Object.assign(statusDiv.style, {
+ border: '0',
+ clip: 'rect(0 0 0 0)',
+ height: '1px',
+ margin: '-1px',
+ overflow: 'hidden',
+ padding: '0',
+ position: 'absolute',
+ width: '1px'
+ });
+ documentProp.body.appendChild(statusDiv);
+ return statusDiv;
+}
+
+const unknown = true ? '__autocomplete_unknown__' : 0;
+const mouseUp = true ? '__autocomplete_mouseup__' : 0;
+const itemMouseEnter = true ? '__autocomplete_item_mouseenter__' : 0;
+const keyDownArrowUp = true ? '__autocomplete_keydown_arrow_up__' : 0;
+const keyDownArrowDown = true ? '__autocomplete_keydown_arrow_down__' : 0;
+const keyDownEscape = true ? '__autocomplete_keydown_escape__' : 0;
+const keyDownEnter = true ? '__autocomplete_keydown_enter__' : 0;
+const keyDownHome = true ? '__autocomplete_keydown_home__' : 0;
+const keyDownEnd = true ? '__autocomplete_keydown_end__' : 0;
+const clickItem = true ? '__autocomplete_click_item__' : 0;
+const blurInput = true ? '__autocomplete_blur_input__' : 0;
+const changeInput = true ? '__autocomplete_change_input__' : 0;
+const keyDownSpaceButton = true ? '__autocomplete_keydown_space_button__' : 0;
+const clickButton = true ? '__autocomplete_click_button__' : 0;
+const blurButton = true ? '__autocomplete_blur_button__' : 0;
+const controlledPropUpdatedSelectedItem = true ? '__autocomplete_controlled_prop_updated_selected_item__' : 0;
+const touchEnd = true ? '__autocomplete_touchend__' : 0;
+
+var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
+ __proto__: null,
+ unknown: unknown,
+ mouseUp: mouseUp,
+ itemMouseEnter: itemMouseEnter,
+ keyDownArrowUp: keyDownArrowUp,
+ keyDownArrowDown: keyDownArrowDown,
+ keyDownEscape: keyDownEscape,
+ keyDownEnter: keyDownEnter,
+ keyDownHome: keyDownHome,
+ keyDownEnd: keyDownEnd,
+ clickItem: clickItem,
+ blurInput: blurInput,
+ changeInput: changeInput,
+ keyDownSpaceButton: keyDownSpaceButton,
+ clickButton: clickButton,
+ blurButton: blurButton,
+ controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
+ touchEnd: touchEnd
+});
+
+/* eslint camelcase:0 */
+
+const Downshift = /*#__PURE__*/(() => {
+ class Downshift extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
+ constructor(_props) {
+ var _this;
+
+ super(_props);
+ _this = this;
+ this.id = this.props.id || `downshift-${generateId()}`;
+ this.menuId = this.props.menuId || `${this.id}-menu`;
+ this.labelId = this.props.labelId || `${this.id}-label`;
+ this.inputId = this.props.inputId || `${this.id}-input`;
+
+ this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
+
+ this.input = null;
+ this.items = [];
+ this.itemCount = null;
+ this.previousResultCount = 0;
+ this.timeoutIds = [];
+
+ this.internalSetTimeout = (fn, time) => {
+ const id = setTimeout(() => {
+ this.timeoutIds = this.timeoutIds.filter(i => i !== id);
+ fn();
+ }, time);
+ this.timeoutIds.push(id);
+ };
+
+ this.setItemCount = count => {
+ this.itemCount = count;
+ };
+
+ this.unsetItemCount = () => {
+ this.itemCount = null;
+ };
+
+ this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
+ if (highlightedIndex === void 0) {
+ highlightedIndex = _this.props.defaultHighlightedIndex;
+ }
+
+ if (otherStateToSet === void 0) {
+ otherStateToSet = {};
+ }
+
+ otherStateToSet = pickState(otherStateToSet);
+
+ _this.internalSetState({
+ highlightedIndex,
+ ...otherStateToSet
+ });
+ };
+
+ this.clearSelection = cb => {
+ this.internalSetState({
+ selectedItem: null,
+ inputValue: '',
+ highlightedIndex: this.props.defaultHighlightedIndex,
+ isOpen: this.props.defaultIsOpen
+ }, cb);
+ };
+
+ this.selectItem = (item, otherStateToSet, cb) => {
+ otherStateToSet = pickState(otherStateToSet);
+ this.internalSetState({
+ isOpen: this.props.defaultIsOpen,
+ highlightedIndex: this.props.defaultHighlightedIndex,
+ selectedItem: item,
+ inputValue: this.props.itemToString(item),
+ ...otherStateToSet
+ }, cb);
+ };
+
+ this.selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
+ const item = this.items[itemIndex];
+
+ if (item == null) {
+ return;
+ }
+
+ this.selectItem(item, otherStateToSet, cb);
+ };
+
+ this.selectHighlightedItem = (otherStateToSet, cb) => {
+ return this.selectItemAtIndex(this.getState().highlightedIndex, otherStateToSet, cb);
+ };
+
+ this.internalSetState = (stateToSet, cb) => {
+ let isItemSelected, onChangeArg;
+ const onStateChangeArg = {};
+ const isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
+ // so someone controlling the `inputValue` state gets notified of
+ // the input change as soon as possible. This avoids issues with
+ // preserving the cursor position.
+ // See https://github.com/downshift-js/downshift/issues/217 for more info.
+
+ if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
+ this.props.onInputValueChange(stateToSet.inputValue, { ...this.getStateAndHelpers(),
+ ...stateToSet
+ });
+ }
+
+ return this.setState(state => {
+ state = this.getState(state);
+ let newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
+
+ newStateToSet = this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
+ // what was selected before
+ // used to determine if onSelect and onChange callbacks should be called
+
+ isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
+
+ const nextState = {}; // this is just used to tell whether the state changed
+ // and we're trying to update that state. OR if the selection has changed and we're
+ // trying to update the selection
+
+ if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
+ onChangeArg = newStateToSet.selectedItem;
+ }
+
+ newStateToSet.type = newStateToSet.type || unknown;
+ Object.keys(newStateToSet).forEach(key => {
+ // onStateChangeArg should only have the state that is
+ // actually changing
+ if (state[key] !== newStateToSet[key]) {
+ onStateChangeArg[key] = newStateToSet[key];
+ } // the type is useful for the onStateChangeArg
+ // but we don't actually want to set it in internal state.
+ // this is an undocumented feature for now... Not all internalSetState
+ // calls support it and I'm not certain we want them to yet.
+ // But it enables users controlling the isOpen state to know when
+ // the isOpen state changes due to mouseup events which is quite handy.
+
+
+ if (key === 'type') {
+ return;
+ }
+
+ newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
+
+ if (!isControlledProp(this.props, key)) {
+ nextState[key] = newStateToSet[key];
+ }
+ }); // if stateToSet is a function, then we weren't able to call onInputValueChange
+ // earlier, so we'll call it now that we know what the inputValue state will be.
+
+ if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
+ this.props.onInputValueChange(newStateToSet.inputValue, { ...this.getStateAndHelpers(),
+ ...newStateToSet
+ });
+ }
+
+ return nextState;
+ }, () => {
+ // call the provided callback if it's a function
+ cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
+ // we have relevant information to pass them.
+
+ const hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
+
+ if (hasMoreStateThanType) {
+ this.props.onStateChange(onStateChangeArg, this.getStateAndHelpers());
+ }
+
+ if (isItemSelected) {
+ this.props.onSelect(stateToSet.selectedItem, this.getStateAndHelpers());
+ }
+
+ if (onChangeArg !== undefined) {
+ this.props.onChange(onChangeArg, this.getStateAndHelpers());
+ } // this is currently undocumented and therefore subject to change
+ // We'll try to not break it, but just be warned.
+
+
+ this.props.onUserAction(onStateChangeArg, this.getStateAndHelpers());
+ });
+ };
+
+ this.rootRef = node => this._rootNode = node;
+
+ this.getRootProps = function (_temp, _temp2) {
+ let {
+ refKey = 'ref',
+ ref,
+ ...rest
+ } = _temp === void 0 ? {} : _temp;
+ let {
+ suppressRefError = false
+ } = _temp2 === void 0 ? {} : _temp2;
+ // this is used in the render to know whether the user has called getRootProps.
+ // It uses that to know whether to apply the props automatically
+ _this.getRootProps.called = true;
+ _this.getRootProps.refKey = refKey;
+ _this.getRootProps.suppressRefError = suppressRefError;
+
+ const {
+ isOpen
+ } = _this.getState();
+
+ return {
+ [refKey]: handleRefs(ref, _this.rootRef),
+ role: 'combobox',
+ 'aria-expanded': isOpen,
+ 'aria-haspopup': 'listbox',
+ 'aria-owns': isOpen ? _this.menuId : null,
+ 'aria-labelledby': _this.labelId,
+ ...rest
+ };
+ };
+
+ this.keyDownHandlers = {
+ ArrowDown(event) {
+ event.preventDefault();
+
+ if (this.getState().isOpen) {
+ const amount = event.shiftKey ? 5 : 1;
+ this.moveHighlightedIndex(amount, {
+ type: keyDownArrowDown
+ });
+ } else {
+ this.internalSetState({
+ isOpen: true,
+ type: keyDownArrowDown
+ }, () => {
+ const itemCount = this.getItemCount();
+
+ if (itemCount > 0) {
+ const {
+ highlightedIndex
+ } = this.getState();
+ const nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
+ this.setHighlightedIndex(nextHighlightedIndex, {
+ type: keyDownArrowDown
+ });
+ }
+ });
+ }
+ },
+
+ ArrowUp(event) {
+ event.preventDefault();
+
+ if (this.getState().isOpen) {
+ const amount = event.shiftKey ? -5 : -1;
+ this.moveHighlightedIndex(amount, {
+ type: keyDownArrowUp
+ });
+ } else {
+ this.internalSetState({
+ isOpen: true,
+ type: keyDownArrowUp
+ }, () => {
+ const itemCount = this.getItemCount();
+
+ if (itemCount > 0) {
+ const {
+ highlightedIndex
+ } = this.getState();
+ const nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
+ this.setHighlightedIndex(nextHighlightedIndex, {
+ type: keyDownArrowUp
+ });
+ }
+ });
+ }
+ },
+
+ Enter(event) {
+ if (event.which === 229) {
+ return;
+ }
+
+ const {
+ isOpen,
+ highlightedIndex
+ } = this.getState();
+
+ if (isOpen && highlightedIndex != null) {
+ event.preventDefault();
+ const item = this.items[highlightedIndex];
+ const itemNode = this.getItemNodeFromIndex(highlightedIndex);
+
+ if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
+ return;
+ }
+
+ this.selectHighlightedItem({
+ type: keyDownEnter
+ });
+ }
+ },
+
+ Escape(event) {
+ event.preventDefault();
+ this.reset({
+ type: keyDownEscape,
+ ...(!this.state.isOpen && {
+ selectedItem: null,
+ inputValue: ''
+ })
+ });
+ }
+
+ };
+ this.buttonKeyDownHandlers = { ...this.keyDownHandlers,
+
+ ' '(event) {
+ event.preventDefault();
+ this.toggleMenu({
+ type: keyDownSpaceButton
+ });
+ }
+
+ };
+ this.inputKeyDownHandlers = { ...this.keyDownHandlers,
+
+ Home(event) {
+ const {
+ isOpen
+ } = this.getState();
+
+ if (!isOpen) {
+ return;
+ }
+
+ event.preventDefault();
+ const itemCount = this.getItemCount();
+
+ if (itemCount <= 0 || !isOpen) {
+ return;
+ } // get next non-disabled starting downwards from 0 if that's disabled.
+
+
+ const newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, index => this.getItemNodeFromIndex(index), false);
+ this.setHighlightedIndex(newHighlightedIndex, {
+ type: keyDownHome
+ });
+ },
+
+ End(event) {
+ const {
+ isOpen
+ } = this.getState();
+
+ if (!isOpen) {
+ return;
+ }
+
+ event.preventDefault();
+ const itemCount = this.getItemCount();
+
+ if (itemCount <= 0 || !isOpen) {
+ return;
+ } // get next non-disabled starting upwards from last index if that's disabled.
+
+
+ const newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, index => this.getItemNodeFromIndex(index), false);
+ this.setHighlightedIndex(newHighlightedIndex, {
+ type: keyDownEnd
+ });
+ }
+
+ };
+
+ this.getToggleButtonProps = function (_temp3) {
+ let {
+ onClick,
+ onPress,
+ onKeyDown,
+ onKeyUp,
+ onBlur,
+ ...rest
+ } = _temp3 === void 0 ? {} : _temp3;
+
+ const {
+ isOpen
+ } = _this.getState();
+
+ const enabledEventHandlers = {
+ onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
+ onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
+ onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
+ onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
+ };
+ const eventHandlers = rest.disabled ? {} : enabledEventHandlers;
+ return {
+ type: 'button',
+ role: 'button',
+ 'aria-label': isOpen ? 'close menu' : 'open menu',
+ 'aria-haspopup': true,
+ 'data-toggle': true,
+ ...eventHandlers,
+ ...rest
+ };
+ };
+
+ this.buttonHandleKeyUp = event => {
+ // Prevent click event from emitting in Firefox
+ event.preventDefault();
+ };
+
+ this.buttonHandleKeyDown = event => {
+ const key = normalizeArrowKey(event);
+
+ if (this.buttonKeyDownHandlers[key]) {
+ this.buttonKeyDownHandlers[key].call(this, event);
+ }
+ };
+
+ this.buttonHandleClick = event => {
+ event.preventDefault(); // handle odd case for Safari and Firefox which
+ // don't give the button the focus properly.
+
+ /* istanbul ignore if (can't reasonably test this) */
+
+ if (this.props.environment.document.activeElement === this.props.environment.document.body) {
+ event.target.focus();
+ } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
+ // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
+ // when building for production and should therefore have no impact on production code.
+
+
+ if (false) {} else {
+ // Ensure that toggle of menu occurs after the potential blur event in iOS
+ this.internalSetTimeout(() => this.toggleMenu({
+ type: clickButton
+ }));
+ }
+ };
+
+ this.buttonHandleBlur = event => {
+ const blurTarget = event.target; // Save blur target for comparison with activeElement later
+ // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
+
+ this.internalSetTimeout(() => {
+ if (!this.isMouseDown && (this.props.environment.document.activeElement == null || this.props.environment.document.activeElement.id !== this.inputId) && this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
+ ) {
+ this.reset({
+ type: blurButton
+ });
+ }
+ });
+ };
+
+ this.getLabelProps = props => {
+ return {
+ htmlFor: this.inputId,
+ id: this.labelId,
+ ...props
+ };
+ };
+
+ this.getInputProps = function (_temp4) {
+ let {
+ onKeyDown,
+ onBlur,
+ onChange,
+ onInput,
+ onChangeText,
+ ...rest
+ } = _temp4 === void 0 ? {} : _temp4;
+ let onChangeKey;
+ let eventHandlers = {};
+ /* istanbul ignore next (preact) */
+
+ {
+ onChangeKey = 'onChange';
+ }
+
+ const {
+ inputValue,
+ isOpen,
+ highlightedIndex
+ } = _this.getState();
+
+ if (!rest.disabled) {
+ eventHandlers = {
+ [onChangeKey]: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
+ onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
+ onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
+ };
+ }
+
+ return {
+ 'aria-autocomplete': 'list',
+ 'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
+ 'aria-controls': isOpen ? _this.menuId : null,
+ 'aria-labelledby': _this.labelId,
+ // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
+ // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
+ autoComplete: 'off',
+ value: inputValue,
+ id: _this.inputId,
+ ...eventHandlers,
+ ...rest
+ };
+ };
+
+ this.inputHandleKeyDown = event => {
+ const key = normalizeArrowKey(event);
+
+ if (key && this.inputKeyDownHandlers[key]) {
+ this.inputKeyDownHandlers[key].call(this, event);
+ }
+ };
+
+ this.inputHandleChange = event => {
+ this.internalSetState({
+ type: changeInput,
+ isOpen: true,
+ inputValue: event.target.value,
+ highlightedIndex: this.props.defaultHighlightedIndex
+ });
+ };
+
+ this.inputHandleBlur = () => {
+ // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
+ this.internalSetTimeout(() => {
+ const downshiftButtonIsActive = this.props.environment.document && !!this.props.environment.document.activeElement && !!this.props.environment.document.activeElement.dataset && this.props.environment.document.activeElement.dataset.toggle && this._rootNode && this._rootNode.contains(this.props.environment.document.activeElement);
+
+ if (!this.isMouseDown && !downshiftButtonIsActive) {
+ this.reset({
+ type: blurInput
+ });
+ }
+ });
+ };
+
+ this.menuRef = node => {
+ this._menuNode = node;
+ };
+
+ this.getMenuProps = function (_temp5, _temp6) {
+ let {
+ refKey = 'ref',
+ ref,
+ ...props
+ } = _temp5 === void 0 ? {} : _temp5;
+ let {
+ suppressRefError = false
+ } = _temp6 === void 0 ? {} : _temp6;
+ _this.getMenuProps.called = true;
+ _this.getMenuProps.refKey = refKey;
+ _this.getMenuProps.suppressRefError = suppressRefError;
+ return {
+ [refKey]: handleRefs(ref, _this.menuRef),
+ role: 'listbox',
+ 'aria-labelledby': props && props['aria-label'] ? null : _this.labelId,
+ id: _this.menuId,
+ ...props
+ };
+ };
+
+ this.getItemProps = function (_temp7) {
+ let {
+ onMouseMove,
+ onMouseDown,
+ onClick,
+ onPress,
+ index,
+ item = false ?
+ /* istanbul ignore next */
+ 0 : requiredProp('getItemProps', 'item'),
+ ...rest
+ } = _temp7 === void 0 ? {} : _temp7;
+
+ if (index === undefined) {
+ _this.items.push(item);
+
+ index = _this.items.indexOf(item);
+ } else {
+ _this.items[index] = item;
+ }
+
+ const onSelectKey = 'onClick';
+ const customClickHandler = onClick;
+ const enabledEventHandlers = {
+ // onMouseMove is used over onMouseEnter here. onMouseMove
+ // is only triggered on actual mouse movement while onMouseEnter
+ // can fire on DOM changes, interrupting keyboard navigation
+ onMouseMove: callAllEventHandlers(onMouseMove, () => {
+ if (index === _this.getState().highlightedIndex) {
+ return;
+ }
+
+ _this.setHighlightedIndex(index, {
+ type: itemMouseEnter
+ }); // We never want to manually scroll when changing state based
+ // on `onMouseMove` because we will be moving the element out
+ // from under the user which is currently scrolling/moving the
+ // cursor
+
+
+ _this.avoidScrolling = true;
+
+ _this.internalSetTimeout(() => _this.avoidScrolling = false, 250);
+ }),
+ onMouseDown: callAllEventHandlers(onMouseDown, event => {
+ // This prevents the activeElement from being changed
+ // to the item so it can remain with the current activeElement
+ // which is a more common use case.
+ event.preventDefault();
+ }),
+ [onSelectKey]: callAllEventHandlers(customClickHandler, () => {
+ _this.selectItemAtIndex(index, {
+ type: clickItem
+ });
+ })
+ }; // Passing down the onMouseDown handler to prevent redirect
+ // of the activeElement if clicking on disabled items
+
+ const eventHandlers = rest.disabled ? {
+ onMouseDown: enabledEventHandlers.onMouseDown
+ } : enabledEventHandlers;
+ return {
+ id: _this.getItemId(index),
+ role: 'option',
+ 'aria-selected': _this.getState().highlightedIndex === index,
+ ...eventHandlers,
+ ...rest
+ };
+ };
+
+ this.clearItems = () => {
+ this.items = [];
+ };
+
+ this.reset = function (otherStateToSet, cb) {
+ if (otherStateToSet === void 0) {
+ otherStateToSet = {};
+ }
+
+ otherStateToSet = pickState(otherStateToSet);
+
+ _this.internalSetState(_ref => {
+ let {
+ selectedItem
+ } = _ref;
+ return {
+ isOpen: _this.props.defaultIsOpen,
+ highlightedIndex: _this.props.defaultHighlightedIndex,
+ inputValue: _this.props.itemToString(selectedItem),
+ ...otherStateToSet
+ };
+ }, cb);
+ };
+
+ this.toggleMenu = function (otherStateToSet, cb) {
+ if (otherStateToSet === void 0) {
+ otherStateToSet = {};
+ }
+
+ otherStateToSet = pickState(otherStateToSet);
+
+ _this.internalSetState(_ref2 => {
+ let {
+ isOpen
+ } = _ref2;
+ return {
+ isOpen: !isOpen,
+ ...(isOpen && {
+ highlightedIndex: _this.props.defaultHighlightedIndex
+ }),
+ ...otherStateToSet
+ };
+ }, () => {
+ const {
+ isOpen,
+ highlightedIndex
+ } = _this.getState();
+
+ if (isOpen) {
+ if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
+ _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
+ }
+ }
+
+ cbToCb(cb)();
+ });
+ };
+
+ this.openMenu = cb => {
+ this.internalSetState({
+ isOpen: true
+ }, cb);
+ };
+
+ this.closeMenu = cb => {
+ this.internalSetState({
+ isOpen: false
+ }, cb);
+ };
+
+ this.updateStatus = debounce(() => {
+ const state = this.getState();
+ const item = this.items[state.highlightedIndex];
+ const resultCount = this.getItemCount();
+ const status = this.props.getA11yStatusMessage({
+ itemToString: this.props.itemToString,
+ previousResultCount: this.previousResultCount,
+ resultCount,
+ highlightedItem: item,
+ ...state
+ });
+ this.previousResultCount = resultCount;
+ setStatus(status, this.props.environment.document);
+ }, 200);
+ // fancy destructuring + defaults + aliases
+ // this basically says each value of state should either be set to
+ // the initial value or the default value if the initial value is not provided
+ const {
+ defaultHighlightedIndex,
+ initialHighlightedIndex: _highlightedIndex = defaultHighlightedIndex,
+ defaultIsOpen,
+ initialIsOpen: _isOpen = defaultIsOpen,
+ initialInputValue: _inputValue = '',
+ initialSelectedItem: _selectedItem = null
+ } = this.props;
+
+ const _state = this.getState({
+ highlightedIndex: _highlightedIndex,
+ isOpen: _isOpen,
+ inputValue: _inputValue,
+ selectedItem: _selectedItem
+ });
+
+ if (_state.selectedItem != null && this.props.initialInputValue === undefined) {
+ _state.inputValue = this.props.itemToString(_state.selectedItem);
+ }
+
+ this.state = _state;
+ }
+
+ /**
+ * Clear all running timeouts
+ */
+ internalClearTimeouts() {
+ this.timeoutIds.forEach(id => {
+ clearTimeout(id);
+ });
+ this.timeoutIds = [];
+ }
+ /**
+ * Gets the state based on internal state or props
+ * If a state value is passed via props, then that
+ * is the value given, otherwise it's retrieved from
+ * stateToMerge
+ *
+ * @param {Object} stateToMerge defaults to this.state
+ * @return {Object} the state
+ */
+
+
+ getState(stateToMerge) {
+ if (stateToMerge === void 0) {
+ stateToMerge = this.state;
+ }
+
+ return getState(stateToMerge, this.props);
+ }
+
+ getItemCount() {
+ // things read better this way. They're in priority order:
+ // 1. `this.itemCount`
+ // 2. `this.props.itemCount`
+ // 3. `this.items.length`
+ let itemCount = this.items.length;
+
+ if (this.itemCount != null) {
+ itemCount = this.itemCount;
+ } else if (this.props.itemCount !== undefined) {
+ itemCount = this.props.itemCount;
+ }
+
+ return itemCount;
+ }
+
+ getItemNodeFromIndex(index) {
+ return this.props.environment.document.getElementById(this.getItemId(index));
+ }
+
+ scrollHighlightedItemIntoView() {
+ /* istanbul ignore else (react-native) */
+ {
+ const node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
+ this.props.scrollIntoView(node, this._menuNode);
+ }
+ }
+
+ moveHighlightedIndex(amount, otherStateToSet) {
+ const itemCount = this.getItemCount();
+ const {
+ highlightedIndex
+ } = this.getState();
+
+ if (itemCount > 0) {
+ const nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
+ this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
+ }
+ }
+
+ getStateAndHelpers() {
+ const {
+ highlightedIndex,
+ inputValue,
+ selectedItem,
+ isOpen
+ } = this.getState();
+ const {
+ itemToString
+ } = this.props;
+ const {
+ id
+ } = this;
+ const {
+ getRootProps,
+ getToggleButtonProps,
+ getLabelProps,
+ getMenuProps,
+ getInputProps,
+ getItemProps,
+ openMenu,
+ closeMenu,
+ toggleMenu,
+ selectItem,
+ selectItemAtIndex,
+ selectHighlightedItem,
+ setHighlightedIndex,
+ clearSelection,
+ clearItems,
+ reset,
+ setItemCount,
+ unsetItemCount,
+ internalSetState: setState
+ } = this;
+ return {
+ // prop getters
+ getRootProps,
+ getToggleButtonProps,
+ getLabelProps,
+ getMenuProps,
+ getInputProps,
+ getItemProps,
+ // actions
+ reset,
+ openMenu,
+ closeMenu,
+ toggleMenu,
+ selectItem,
+ selectItemAtIndex,
+ selectHighlightedItem,
+ setHighlightedIndex,
+ clearSelection,
+ clearItems,
+ setItemCount,
+ unsetItemCount,
+ setState,
+ // props
+ itemToString,
+ // derived
+ id,
+ // state
+ highlightedIndex,
+ inputValue,
+ isOpen,
+ selectedItem
+ };
+ } //////////////////////////// ROOT
+
+
+ componentDidMount() {
+ /* istanbul ignore if (react-native) */
+ if ( true && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
+ validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
+ }
+ /* istanbul ignore if (react-native) */
+
+
+ {
+ // this.isMouseDown helps us track whether the mouse is currently held down.
+ // This is useful when the user clicks on an item in the list, but holds the mouse
+ // down long enough for the list to disappear (because the blur event fires on the input)
+ // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
+ // trigger hiding the menu.
+ const onMouseDown = () => {
+ this.isMouseDown = true;
+ };
+
+ const onMouseUp = event => {
+ this.isMouseDown = false; // if the target element or the activeElement is within a downshift node
+ // then we don't want to reset downshift
+
+ const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment);
+
+ if (!contextWithinDownshift && this.getState().isOpen) {
+ this.reset({
+ type: mouseUp
+ }, () => this.props.onOuterClick(this.getStateAndHelpers()));
+ }
+ }; // Touching an element in iOS gives focus and hover states, but touching out of
+ // the element will remove hover, and persist the focus state, resulting in the
+ // blur event not being triggered.
+ // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
+ // If the user taps outside of Downshift, the component should be reset,
+ // but not if the user is swiping
+
+
+ const onTouchStart = () => {
+ this.isTouchMove = false;
+ };
+
+ const onTouchMove = () => {
+ this.isTouchMove = true;
+ };
+
+ const onTouchEnd = event => {
+ const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment, false);
+
+ if (!this.isTouchMove && !contextWithinDownshift && this.getState().isOpen) {
+ this.reset({
+ type: touchEnd
+ }, () => this.props.onOuterClick(this.getStateAndHelpers()));
+ }
+ };
+
+ const {
+ environment
+ } = this.props;
+ environment.addEventListener('mousedown', onMouseDown);
+ environment.addEventListener('mouseup', onMouseUp);
+ environment.addEventListener('touchstart', onTouchStart);
+ environment.addEventListener('touchmove', onTouchMove);
+ environment.addEventListener('touchend', onTouchEnd);
+
+ this.cleanup = () => {
+ this.internalClearTimeouts();
+ this.updateStatus.cancel();
+ environment.removeEventListener('mousedown', onMouseDown);
+ environment.removeEventListener('mouseup', onMouseUp);
+ environment.removeEventListener('touchstart', onTouchStart);
+ environment.removeEventListener('touchmove', onTouchMove);
+ environment.removeEventListener('touchend', onTouchEnd);
+ };
+ }
+ }
+
+ shouldScroll(prevState, prevProps) {
+ const {
+ highlightedIndex: currentHighlightedIndex
+ } = this.props.highlightedIndex === undefined ? this.getState() : this.props;
+ const {
+ highlightedIndex: prevHighlightedIndex
+ } = prevProps.highlightedIndex === undefined ? prevState : prevProps;
+ const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
+ const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
+ return scrollWhenOpen || scrollWhenNavigating;
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (true) {
+ validateControlledUnchanged(this.state, prevProps, this.props);
+ /* istanbul ignore if (react-native) */
+
+ if (this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
+ validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
+ }
+ }
+
+ if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
+ this.internalSetState({
+ type: controlledPropUpdatedSelectedItem,
+ inputValue: this.props.itemToString(this.props.selectedItem)
+ });
+ }
+
+ if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
+ this.scrollHighlightedItemIntoView();
+ }
+ /* istanbul ignore else (react-native) */
+
+
+ {
+ this.updateStatus();
+ }
+ }
+
+ componentWillUnmount() {
+ this.cleanup(); // avoids memory leak
+ }
+
+ render() {
+ const children = unwrapArray(this.props.children, noop); // because the items are rerendered every time we call the children
+ // we clear this out each render and it will be populated again as
+ // getItemProps is called.
+
+ this.clearItems(); // we reset this so we know whether the user calls getRootProps during
+ // this render. If they do then we don't need to do anything,
+ // if they don't then we need to clone the element they return and
+ // apply the props for them.
+
+ this.getRootProps.called = false;
+ this.getRootProps.refKey = undefined;
+ this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps
+
+ this.getMenuProps.called = false;
+ this.getMenuProps.refKey = undefined;
+ this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps
+
+ this.getLabelProps.called = false; // and something similar for getInputProps
+
+ this.getInputProps.called = false;
+ const element = unwrapArray(children(this.getStateAndHelpers()));
+
+ if (!element) {
+ return null;
+ }
+
+ if (this.getRootProps.called || this.props.suppressRefError) {
+ if ( true && !this.getRootProps.suppressRefError && !this.props.suppressRefError) {
+ validateGetRootPropsCalledCorrectly(element, this.getRootProps);
+ }
+
+ return element;
+ } else if (isDOMElement(element)) {
+ // they didn't apply the root props, but we can clone
+ // this and apply the props ourselves
+ return /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(element, this.getRootProps(getElementProps(element)));
+ }
+ /* istanbul ignore else */
+
+
+ if (true) {
+ // they didn't apply the root props, but they need to
+ // otherwise we can't query around the autocomplete
+ throw new Error('downshift: If you return a non-DOM element, you must apply the getRootProps function');
+ }
+ /* istanbul ignore next */
+
+
+ return undefined;
+ }
+
+ }
+
+ Downshift.defaultProps = {
+ defaultHighlightedIndex: null,
+ defaultIsOpen: false,
+ getA11yStatusMessage: getA11yStatusMessage$1,
+ itemToString: i => {
+ if (i == null) {
+ return '';
+ }
+
+ if ( true && isPlainObject(i) && !i.hasOwnProperty('toString')) {
+ // eslint-disable-next-line no-console
+ console.warn('downshift: An object was passed to the default implementation of `itemToString`. You should probably provide your own `itemToString` implementation. Please refer to the `itemToString` API documentation.', 'The object that was passed:', i);
+ }
+
+ return String(i);
+ },
+ onStateChange: noop,
+ onInputValueChange: noop,
+ onUserAction: noop,
+ onChange: noop,
+ onSelect: noop,
+ onOuterClick: noop,
+ selectedItemChanged: (prevItem, item) => prevItem !== item,
+ environment:
+ /* istanbul ignore next (ssr) */
+ typeof window === 'undefined' ? {} : window,
+ stateReducer: (state, stateToSet) => stateToSet,
+ suppressRefError: false,
+ scrollIntoView
+ };
+ Downshift.stateChangeTypes = stateChangeTypes$3;
+ return Downshift;
+})();
+
+ true ? Downshift.propTypes = {
+ children: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ defaultHighlightedIndex: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().number),
+ defaultIsOpen: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),
+ initialHighlightedIndex: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().number),
+ initialSelectedItem: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().any),
+ initialInputValue: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
+ initialIsOpen: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),
+ getA11yStatusMessage: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ itemToString: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ onChange: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ onSelect: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ onStateChange: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ onInputValueChange: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ onUserAction: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ onOuterClick: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ selectedItemChanged: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ stateReducer: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ itemCount: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().number),
+ id: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
+ environment: prop_types__WEBPACK_IMPORTED_MODULE_3___default().shape({
+ addEventListener: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ removeEventListener: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ document: prop_types__WEBPACK_IMPORTED_MODULE_3___default().shape({
+ getElementById: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ activeElement: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().any),
+ body: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().any)
+ })
+ }),
+ suppressRefError: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),
+ scrollIntoView: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
+ // things we keep in state for uncontrolled components
+ // but can accept as props for controlled components
+
+ /* eslint-disable react/no-unused-prop-types */
+ selectedItem: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().any),
+ isOpen: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),
+ inputValue: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
+ highlightedIndex: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().number),
+ labelId: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
+ inputId: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
+ menuId: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
+ getItemId: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func)
+ /* eslint-enable react/no-unused-prop-types */
+
+} : 0;
+var Downshift$1 = Downshift;
+
+function validateGetMenuPropsCalledCorrectly(node, _ref3) {
+ let {
+ refKey
+ } = _ref3;
+
+ if (!node) {
+ // eslint-disable-next-line no-console
+ console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
+ }
+}
+
+function validateGetRootPropsCalledCorrectly(element, _ref4) {
+ let {
+ refKey
+ } = _ref4;
+ const refKeySpecified = refKey !== 'ref';
+ const isComposite = !isDOMElement(element);
+
+ if (isComposite && !refKeySpecified && !(0,react_is__WEBPACK_IMPORTED_MODULE_1__.isForwardRef)(element)) {
+ // eslint-disable-next-line no-console
+ console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
+ } else if (!isComposite && refKeySpecified) {
+ // eslint-disable-next-line no-console
+ console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
+ }
+
+ if (!(0,react_is__WEBPACK_IMPORTED_MODULE_1__.isForwardRef)(element) && !getElementProps(element)[refKey]) {
+ // eslint-disable-next-line no-console
+ console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
+ }
+}
+
+const dropdownDefaultStateValues = {
+ highlightedIndex: -1,
+ isOpen: false,
+ selectedItem: null,
+ inputValue: ''
+};
+
+function callOnChangeProps(action, state, newState) {
+ const {
+ props,
+ type
+ } = action;
+ const changes = {};
+ Object.keys(state).forEach(key => {
+ invokeOnChangeHandler(key, action, state, newState);
+
+ if (newState[key] !== state[key]) {
+ changes[key] = newState[key];
+ }
+ });
+
+ if (props.onStateChange && Object.keys(changes).length) {
+ props.onStateChange({
+ type,
+ ...changes
+ });
+ }
+}
+
+function invokeOnChangeHandler(key, action, state, newState) {
+ const {
+ props,
+ type
+ } = action;
+ const handler = `on${capitalizeString(key)}Change`;
+
+ if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
+ props[handler]({
+ type,
+ ...newState
+ });
+ }
+}
+/**
+ * Default state reducer that returns the changes.
+ *
+ * @param {Object} s state.
+ * @param {Object} a action with changes.
+ * @returns {Object} changes.
+ */
+
+
+function stateReducer(s, a) {
+ return a.changes;
+}
+/**
+ * Returns a message to be added to aria-live region when item is selected.
+ *
+ * @param {Object} selectionParameters Parameters required to build the message.
+ * @returns {string} The a11y message.
+ */
+
+
+function getA11ySelectionMessage(selectionParameters) {
+ const {
+ selectedItem,
+ itemToString: itemToStringLocal
+ } = selectionParameters;
+ return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
+}
+/**
+ * Debounced call for updating the a11y message.
+ */
+
+
+const updateA11yStatus = debounce((getA11yMessage, document) => {
+ setStatus(getA11yMessage(), document);
+}, 200); // istanbul ignore next
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect : react__WEBPACK_IMPORTED_MODULE_0__.useEffect;
+
+function useElementIds(_ref) {
+ let {
+ id = `downshift-${generateId()}`,
+ labelId,
+ menuId,
+ getItemId,
+ toggleButtonId,
+ inputId
+ } = _ref;
+ const elementIdsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({
+ labelId: labelId || `${id}-label`,
+ menuId: menuId || `${id}-menu`,
+ getItemId: getItemId || (index => `${id}-item-${index}`),
+ toggleButtonId: toggleButtonId || `${id}-toggle-button`,
+ inputId: inputId || `${id}-input`
+ });
+ return elementIdsRef.current;
+}
+
+function getItemIndex(index, item, items) {
+ if (index !== undefined) {
+ return index;
+ }
+
+ if (items.length === 0) {
+ return -1;
+ }
+
+ return items.indexOf(item);
+}
+
+function itemToString(item) {
+ return item ? String(item) : '';
+}
+
+function isAcceptedCharacterKey(key) {
+ return /^\S{1}$/.test(key);
+}
+
+function capitalizeString(string) {
+ return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
+}
+
+function useLatestRef(val) {
+ const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(val); // technically this is not "concurrent mode safe" because we're manipulating
+ // the value during render (so it's not idempotent). However, the places this
+ // hook is used is to support memoizing callbacks which will be called
+ // *during* render, so we need the latest values *during* render.
+ // If not for this, then we'd probably want to use useLayoutEffect instead.
+
+ ref.current = val;
+ return ref;
+}
+/**
+ * Computes the controlled state using a the previous state, props,
+ * two reducers, one from downshift and an optional one from the user.
+ * Also calls the onChange handlers for state values that have changed.
+ *
+ * @param {Function} reducer Reducer function from downshift.
+ * @param {Object} initialState Initial state of the hook.
+ * @param {Object} props The hook props.
+ * @returns {Array} An array with the state and an action dispatcher.
+ */
+
+
+function useEnhancedReducer(reducer, initialState, props) {
+ const prevStateRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+ const actionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+ const enhancedReducer = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((state, action) => {
+ actionRef.current = action;
+ state = getState(state, action.props);
+ const changes = reducer(state, action);
+ const newState = action.props.stateReducer(state, { ...action,
+ changes
+ });
+ return newState;
+ }, [reducer]);
+ const [state, dispatch] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)(enhancedReducer, initialState);
+ const propsRef = useLatestRef(props);
+ const dispatchWithProps = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(action => dispatch({
+ props: propsRef.current,
+ ...action
+ }), [propsRef]);
+ const action = actionRef.current;
+ (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+ if (action && prevStateRef.current && prevStateRef.current !== state) {
+ callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
+ }
+
+ prevStateRef.current = state;
+ }, [state, props, action]);
+ return [state, dispatchWithProps];
+}
+/**
+ * Wraps the useEnhancedReducer and applies the controlled prop values before
+ * returning the new state.
+ *
+ * @param {Function} reducer Reducer function from downshift.
+ * @param {Object} initialState Initial state of the hook.
+ * @param {Object} props The hook props.
+ * @returns {Array} An array with the state and an action dispatcher.
+ */
+
+
+function useControlledReducer$1(reducer, initialState, props) {
+ const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
+ return [getState(state, props), dispatch];
+}
+
+const defaultProps$3 = {
+ itemToString,
+ stateReducer,
+ getA11ySelectionMessage,
+ scrollIntoView,
+ circularNavigation: false,
+ environment:
+ /* istanbul ignore next (ssr) */
+ typeof window === 'undefined' ? {} : window
+};
+
+function getDefaultValue$1(props, propKey, defaultStateValues) {
+ if (defaultStateValues === void 0) {
+ defaultStateValues = dropdownDefaultStateValues;
+ }
+
+ const defaultValue = props[`default${capitalizeString(propKey)}`];
+
+ if (defaultValue !== undefined) {
+ return defaultValue;
+ }
+
+ return defaultStateValues[propKey];
+}
+
+function getInitialValue$1(props, propKey, defaultStateValues) {
+ if (defaultStateValues === void 0) {
+ defaultStateValues = dropdownDefaultStateValues;
+ }
+
+ const value = props[propKey];
+
+ if (value !== undefined) {
+ return value;
+ }
+
+ const initialValue = props[`initial${capitalizeString(propKey)}`];
+
+ if (initialValue !== undefined) {
+ return initialValue;
+ }
+
+ return getDefaultValue$1(props, propKey, defaultStateValues);
+}
+
+function getInitialState$2(props) {
+ const selectedItem = getInitialValue$1(props, 'selectedItem');
+ const isOpen = getInitialValue$1(props, 'isOpen');
+ const highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
+ const inputValue = getInitialValue$1(props, 'inputValue');
+ return {
+ highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
+ isOpen,
+ selectedItem,
+ inputValue
+ };
+}
+
+function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
+ const {
+ items,
+ initialHighlightedIndex,
+ defaultHighlightedIndex
+ } = props;
+ const {
+ selectedItem,
+ highlightedIndex
+ } = state;
+
+ if (items.length === 0) {
+ return -1;
+ } // initialHighlightedIndex will give value to highlightedIndex on initial state only.
+
+
+ if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
+ return initialHighlightedIndex;
+ }
+
+ if (defaultHighlightedIndex !== undefined) {
+ return defaultHighlightedIndex;
+ }
+
+ if (selectedItem) {
+ if (offset === 0) {
+ return items.indexOf(selectedItem);
+ }
+
+ return getNextWrappingIndex(offset, items.indexOf(selectedItem), items.length, getItemNodeFromIndex, false);
+ }
+
+ if (offset === 0) {
+ return -1;
+ }
+
+ return offset < 0 ? items.length - 1 : 0;
+}
+/**
+ * Reuse the movement tracking of mouse and touch events.
+ *
+ * @param {boolean} isOpen Whether the dropdown is open or not.
+ * @param {Array