MockProcessor-498b60c5.js
1 year ago
MockProcessor-498b60c5.js.map
1 year ago
add-query-args-0e2a8393.js
1 year ago
add-query-args-0e2a8393.js.map
1 year ago
address-b892540d.js
1 year ago
address-b892540d.js.map
1 year ago
animation-registry-12eed2e3.js
1 year ago
animation-registry-12eed2e3.js.map
1 year ago
app-globals-707edcd4.js
1 year ago
app-globals-707edcd4.js.map
1 year ago
consumer-e06b16d3.js
1 year ago
consumer-e06b16d3.js.map
1 year ago
countries-c2f41f03.js
1 year ago
countries-c2f41f03.js.map
1 year ago
currency-a0c9bff4.js
1 year ago
currency-a0c9bff4.js.map
1 year ago
error-12ea55b3.js
1 year ago
error-12ea55b3.js.map
1 year ago
fetch-e3c5d1b9.js
1 year ago
fetch-e3c5d1b9.js.map
1 year ago
form-data-76641f16.js
1 year ago
form-data-76641f16.js.map
1 year ago
functions-2a4a4ba3.js
1 year ago
functions-2a4a4ba3.js.map
1 year ago
getters-09dda855.js
1 year ago
getters-09dda855.js.map
1 year ago
getters-1a55b8a4.js
1 year ago
getters-1a55b8a4.js.map
1 year ago
getters-26526b7c.js
1 year ago
getters-26526b7c.js.map
1 year ago
getters-a7eec27c.js
1 year ago
getters-a7eec27c.js.map
1 year ago
getters-b1d93841.js
1 year ago
getters-b1d93841.js.map
1 year ago
google-a86aa761.js
1 year ago
google-a86aa761.js.map
1 year ago
google-dd89f242.js
1 year ago
google-dd89f242.js.map
1 year ago
index-06061d4e.js
1 year ago
index-06061d4e.js.map
1 year ago
index-675be13e.js
1 year ago
index-675be13e.js.map
1 year ago
index-745b6bec.js
1 year ago
index-745b6bec.js.map
1 year ago
index-822e5799.js
1 year ago
index-822e5799.js.map
1 year ago
index-871d88b8.js
1 year ago
index-871d88b8.js.map
1 year ago
index-c5a96d53.js
2 years ago
index-c5a96d53.js.map
2 years ago
index.js
1 year ago
index.js.map
2 years ago
inline-c012a0f9.js
1 year ago
inline-c012a0f9.js.map
1 year ago
lazy-deb42890.js
1 year ago
lazy-deb42890.js.map
1 year ago
library-e110eea6.js
1 year ago
library-e110eea6.js.map
1 year ago
loader.js
1 year ago
loader.js.map
1 year ago
media-d21119a3.js
1 year ago
media-d21119a3.js.map
1 year ago
mutations-066b82f0.js
1 year ago
mutations-066b82f0.js.map
1 year ago
mutations-7ba12644.js
1 year ago
mutations-7ba12644.js.map
1 year ago
mutations-e77bd122.js
1 year ago
mutations-e77bd122.js.map
1 year ago
mutations-ed6d0770.js
1 year ago
mutations-ed6d0770.js.map
1 year ago
mutations-f11a19f9.js
1 year ago
mutations-f11a19f9.js.map
1 year ago
page-align-0cdacf32.js
1 year ago
page-align-0cdacf32.js.map
1 year ago
price-d5770168.js
1 year ago
price-d5770168.js.map
1 year ago
pure-963214cb.js
1 year ago
pure-963214cb.js.map
1 year ago
quantity-1f39f750.js
1 year ago
quantity-1f39f750.js.map
1 year ago
remove-query-args-938c53ea.js
1 year ago
remove-query-args-938c53ea.js.map
1 year ago
sc-address_3.entry.js
1 year ago
sc-address_3.entry.js.map
1 year ago
sc-alert_13.entry.js
1 year ago
sc-alert_13.entry.js.map
1 year ago
sc-avatar.entry.js
1 year ago
sc-avatar.entry.js.map
1 year ago
sc-badge-notice.entry.js
1 year ago
sc-badge-notice.entry.js.map
1 year ago
sc-breadcrumb.entry.js
1 year ago
sc-breadcrumb.entry.js.map
1 year ago
sc-breadcrumbs.entry.js
1 year ago
sc-breadcrumbs.entry.js.map
1 year ago
sc-button-group.entry.js
1 year ago
sc-button-group.entry.js.map
1 year ago
sc-cancel-dialog_2.entry.js
1 year ago
sc-cancel-dialog_2.entry.js.map
1 year ago
sc-cancel-discount_4.entry.js
1 year ago
sc-cancel-discount_4.entry.js.map
1 year ago
sc-card.entry.js
1 year ago
sc-card.entry.js.map
1 year ago
sc-cart-button.entry.js
1 year ago
sc-cart-button.entry.js.map
1 year ago
sc-cart-form-submit.entry.js
1 year ago
sc-cart-form-submit.entry.js.map
1 year ago
sc-cart-form.entry.js
1 year ago
sc-cart-form.entry.js.map
1 year ago
sc-cart-header.entry.js
1 year ago
sc-cart-header.entry.js.map
1 year ago
sc-cart-icon.entry.js
1 year ago
sc-cart-icon.entry.js.map
1 year ago
sc-cart-loader.entry.js
1 year ago
sc-cart-loader.entry.js.map
1 year ago
sc-cart-session-provider_3.entry.js
1 year ago
sc-cart-session-provider_3.entry.js.map
1 year ago
sc-cart-submit.entry.js
1 year ago
sc-cart-submit.entry.js.map
1 year ago
sc-cart.entry.js
1 year ago
sc-cart.entry.js.map
1 year ago
sc-cc-logo_2.entry.js
1 year ago
sc-cc-logo_2.entry.js.map
1 year ago
sc-charges-list.entry.js
1 year ago
sc-charges-list.entry.js.map
1 year ago
sc-checkout-form-errors.entry.js
1 year ago
sc-checkout-form-errors.entry.js.map
1 year ago
sc-checkout-mollie-payment_2.entry.js
1 year ago
sc-checkout-mollie-payment_2.entry.js.map
1 year ago
sc-checkout-product-price-variant-selector.entry.js
1 year ago
sc-checkout-product-price-variant-selector.entry.js.map
1 year ago
sc-checkout-stock-alert_8.entry.js
1 year ago
sc-checkout-stock-alert_8.entry.js.map
1 year ago
sc-checkout.entry.js
1 year ago
sc-checkout.entry.js.map
1 year ago
sc-choice-container.entry.js
1 year ago
sc-choice-container.entry.js.map
1 year ago
sc-choice.entry.js
1 year ago
sc-choice.entry.js.map
1 year ago
sc-choices.entry.js
1 year ago
sc-choices.entry.js.map
1 year ago
sc-column_2.entry.js
1 year ago
sc-column_2.entry.js.map
1 year ago
sc-compact-address_11.entry.js
1 year ago
sc-compact-address_11.entry.js.map
1 year ago
sc-conditional-form.entry.js
1 year ago
sc-conditional-form.entry.js.map
1 year ago
sc-consumer.entry.js
1 year ago
sc-consumer.entry.js.map
1 year ago
sc-coupon-form.entry.js
1 year ago
sc-coupon-form.entry.js.map
1 year ago
sc-custom-order-price-input.entry.js
1 year ago
sc-custom-order-price-input.entry.js.map
1 year ago
sc-customer-details.entry.js
1 year ago
sc-customer-details.entry.js.map
1 year ago
sc-customer-edit.entry.js
1 year ago
sc-customer-edit.entry.js.map
1 year ago
sc-customer-email.entry.js
1 year ago
sc-customer-email.entry.js.map
1 year ago
sc-customer-firstname.entry.js
1 year ago
sc-customer-firstname.entry.js.map
1 year ago
sc-customer-lastname.entry.js
1 year ago
sc-customer-lastname.entry.js.map
1 year ago
sc-customer-name.entry.js
1 year ago
sc-customer-name.entry.js.map
1 year ago
sc-customer-phone.entry.js
1 year ago
sc-customer-phone.entry.js.map
1 year ago
sc-dashboard-customer-details.entry.js
1 year ago
sc-dashboard-customer-details.entry.js.map
1 year ago
sc-dashboard-downloads-list.entry.js
1 year ago
sc-dashboard-downloads-list.entry.js.map
1 year ago
sc-divider.entry.js
1 year ago
sc-divider.entry.js.map
1 year ago
sc-donation-choices.entry.js
1 year ago
sc-donation-choices.entry.js.map
1 year ago
sc-downloads-list.entry.js
1 year ago
sc-downloads-list.entry.js.map
1 year ago
sc-dropdown_3.entry.js
1 year ago
sc-dropdown_3.entry.js.map
1 year ago
sc-empty.entry.js
1 year ago
sc-empty.entry.js.map
1 year ago
sc-express-payment.entry.js
1 year ago
sc-express-payment.entry.js.map
1 year ago
sc-feature-demo-banner.entry.js
1 year ago
sc-feature-demo-banner.entry.js.map
1 year ago
sc-form-control_2.entry.js
1 year ago
sc-form-control_2.entry.js.map
1 year ago
sc-form-row.entry.js
1 year ago
sc-form-row.entry.js.map
1 year ago
sc-form.entry.js
1 year ago
sc-form.entry.js.map
1 year ago
sc-format-bytes.entry.js
1 year ago
sc-format-bytes.entry.js.map
1 year ago
sc-format-interval.entry.js
1 year ago
sc-format-interval.entry.js.map
1 year ago
sc-fulfillment-shipping-status-badge.entry.js
1 year ago
sc-fulfillment-shipping-status-badge.entry.js.map
1 year ago
sc-fulfillments.entry.js
1 year ago
sc-fulfillments.entry.js.map
1 year ago
sc-heading_2.entry.js
1 year ago
sc-heading_2.entry.js.map
1 year ago
sc-image-slider.entry.js
1 year ago
sc-image-slider.entry.js.map
1 year ago
sc-invoices-list.entry.js
1 year ago
sc-invoices-list.entry.js.map
1 year ago
sc-license.entry.js
1 year ago
sc-license.entry.js.map
1 year ago
sc-licenses-list.entry.js
1 year ago
sc-licenses-list.entry.js.map
1 year ago
sc-line-item-bump.entry.js
1 year ago
sc-line-item-bump.entry.js.map
1 year ago
sc-line-item-total.entry.js
1 year ago
sc-line-item-total.entry.js.map
1 year ago
sc-line-item.entry.js
1 year ago
sc-line-item.entry.js.map
1 year ago
sc-line-items-provider.entry.js
1 year ago
sc-line-items-provider.entry.js.map
1 year ago
sc-line-items.entry.js
1 year ago
sc-line-items.entry.js.map
1 year ago
sc-login-form.entry.js
1 year ago
sc-login-form.entry.js.map
1 year ago
sc-manual-payment-method_3.entry.js
1 year ago
sc-manual-payment-method_3.entry.js.map
1 year ago
sc-menu-divider.entry.js
1 year ago
sc-menu-divider.entry.js.map
1 year ago
sc-menu-label_2.entry.js
1 year ago
sc-menu-label_2.entry.js.map
1 year ago
sc-mollie-add-method.entry.js
1 year ago
sc-mollie-add-method.entry.js.map
1 year ago
sc-order-confirmation-customer.entry.js
1 year ago
sc-order-confirmation-customer.entry.js.map
1 year ago
sc-order-confirmation-details.entry.js
1 year ago
sc-order-confirmation-details.entry.js.map
1 year ago
sc-order-confirmation-line-items_2.entry.js
1 year ago
sc-order-confirmation-line-items_2.entry.js.map
1 year ago
sc-order-confirmation.entry.js
1 year ago
sc-order-confirmation.entry.js.map
1 year ago
sc-order-coupon-form.entry.js
1 year ago
sc-order-coupon-form.entry.js.map
1 year ago
sc-order-detail.entry.js
1 year ago
sc-order-detail.entry.js.map
1 year ago
sc-order-fulfillment-badge.entry.js
1 year ago
sc-order-fulfillment-badge.entry.js.map
1 year ago
sc-order-manual-instructions.entry.js
1 year ago
sc-order-manual-instructions.entry.js.map
1 year ago
sc-order-password.entry.js
1 year ago
sc-order-password.entry.js.map
1 year ago
sc-order-return-badge.entry.js
1 year ago
sc-order-return-badge.entry.js.map
1 year ago
sc-order-shipment-badge.entry.js
1 year ago
sc-order-shipment-badge.entry.js.map
1 year ago
sc-order-status-badge.entry.js
1 year ago
sc-order-status-badge.entry.js.map
1 year ago
sc-order-submit.entry.js
1 year ago
sc-order-submit.entry.js.map
1 year ago
sc-order-summary.entry.js
1 year ago
sc-order-summary.entry.js.map
1 year ago
sc-order.entry.js
1 year ago
sc-order.entry.js.map
1 year ago
sc-orders-list.entry.js
1 year ago
sc-orders-list.entry.js.map
1 year ago
sc-pagination.entry.js
1 year ago
sc-pagination.entry.js.map
1 year ago
sc-password-nag.entry.js
1 year ago
sc-password-nag.entry.js.map
1 year ago
sc-password.entry.js
1 year ago
sc-password.entry.js.map
1 year ago
sc-payment-method-choice_2.entry.js
1 year ago
sc-payment-method-choice_2.entry.js.map
1 year ago
sc-payment-method-details.entry.js
1 year ago
sc-payment-method-details.entry.js.map
1 year ago
sc-payment-methods-list.entry.js
1 year ago
sc-payment-methods-list.entry.js.map
1 year ago
sc-payment.entry.js
1 year ago
sc-payment.entry.js.map
1 year ago
sc-paypal-add-method.entry.js
1 year ago
sc-paypal-add-method.entry.js.map
1 year ago
sc-paypal-buttons_2.entry.js
1 year ago
sc-paypal-buttons_2.entry.js.map
1 year ago
sc-paystack-add-method.entry.js
1 year ago
sc-paystack-add-method.entry.js.map
1 year ago
sc-phone-input.entry.js
1 year ago
sc-phone-input.entry.js.map
1 year ago
sc-pill-option.entry.js
1 year ago
sc-pill-option.entry.js.map
1 year ago
sc-premium-tag.entry.js
1 year ago
sc-premium-tag.entry.js.map
1 year ago
sc-price-choice-container.entry.js
1 year ago
sc-price-choice-container.entry.js.map
1 year ago
sc-price-choice.entry.js
1 year ago
sc-price-choice.entry.js.map
1 year ago
sc-price-choices.entry.js
1 year ago
sc-price-choices.entry.js.map
1 year ago
sc-price-input.entry.js
1 year ago
sc-price-input.entry.js.map
1 year ago
sc-price-range.entry.js
1 year ago
sc-price-range.entry.js.map
1 year ago
sc-price.entry.js
1 year ago
sc-price.entry.js.map
1 year ago
sc-product-buy-button.entry.js
1 year ago
sc-product-buy-button.entry.js.map
1 year ago
sc-product-donation-amount-choice.entry.js
1 year ago
sc-product-donation-amount-choice.entry.js.map
1 year ago
sc-product-donation-choices.entry.js
1 year ago
sc-product-donation-choices.entry.js.map
1 year ago
sc-product-donation-custom-amount.entry.js
1 year ago
sc-product-donation-custom-amount.entry.js.map
1 year ago
sc-product-item-image_3.entry.js
1 year ago
sc-product-item-image_3.entry.js.map
1 year ago
sc-product-item-list.entry.js
1 year ago
sc-product-item-list.entry.js.map
1 year ago
sc-product-item.entry.js
1 year ago
sc-product-item.entry.js.map
1 year ago
sc-product-line-item_2.entry.js
1 year ago
sc-product-line-item_2.entry.js.map
1 year ago
sc-product-pills-variant-option.entry.js
1 year ago
sc-product-pills-variant-option.entry.js.map
1 year ago
sc-product-price-choices.entry.js
1 year ago
sc-product-price-choices.entry.js.map
1 year ago
sc-product-price-modal.entry.js
1 year ago
sc-product-price-modal.entry.js.map
1 year ago
sc-product-price.entry.js
1 year ago
sc-product-price.entry.js.map
1 year ago
sc-product-quantity.entry.js
1 year ago
sc-product-quantity.entry.js.map
1 year ago
sc-product-selected-price.entry.js
1 year ago
sc-product-selected-price.entry.js.map
1 year ago
sc-product-text.entry.js
1 year ago
sc-product-text.entry.js.map
1 year ago
sc-provider.entry.js
1 year ago
sc-provider.entry.js.map
1 year ago
sc-provisional-banner.entry.js
1 year ago
sc-provisional-banner.entry.js.map
1 year ago
sc-purchase-downloads-list.entry.js
1 year ago
sc-purchase-downloads-list.entry.js.map
1 year ago
sc-recurring-price-choice-container.entry.js
1 year ago
sc-recurring-price-choice-container.entry.js.map
1 year ago
sc-rich-text.entry.js
1 year ago
sc-rich-text.entry.js.map
1 year ago
sc-spacing.entry.js
1 year ago
sc-spacing.entry.js.map
1 year ago
sc-stacked-list_2.entry.js
1 year ago
sc-stacked-list_2.entry.js.map
1 year ago
sc-stripe-add-method.entry.js
1 year ago
sc-stripe-add-method.entry.js.map
1 year ago
sc-stripe-element.entry.js
1 year ago
sc-stripe-element.entry.js.map
1 year ago
sc-stripe-payment-element.entry.js
1 year ago
sc-stripe-payment-element.entry.js.map
1 year ago
sc-stripe-payment-request.entry.js
1 year ago
sc-stripe-payment-request.entry.js.map
1 year ago
sc-subscription-ad-hoc-confirm.entry.js
1 year ago
sc-subscription-ad-hoc-confirm.entry.js.map
1 year ago
sc-subscription-details_2.entry.js
1 year ago
sc-subscription-details_2.entry.js.map
1 year ago
sc-subscription-payment-method.entry.js
1 year ago
sc-subscription-payment-method.entry.js.map
1 year ago
sc-subscription-payment.entry.js
1 year ago
sc-subscription-payment.entry.js.map
1 year ago
sc-subscription-switch.entry.js
1 year ago
sc-subscription-switch.entry.js.map
1 year ago
sc-subscription-variation-confirm.entry.js
1 year ago
sc-subscription-variation-confirm.entry.js.map
1 year ago
sc-subscription.entry.js
1 year ago
sc-subscription.entry.js.map
1 year ago
sc-subscriptions-list.entry.js
1 year ago
sc-subscriptions-list.entry.js.map
1 year ago
sc-summary.entry.js
1 year ago
sc-summary.entry.js.map
1 year ago
sc-switch.entry.js
1 year ago
sc-switch.entry.js.map
1 year ago
sc-tab-group.entry.js
1 year ago
sc-tab-group.entry.js.map
1 year ago
sc-tab-panel.entry.js
1 year ago
sc-tab-panel.entry.js.map
1 year ago
sc-tab.entry.js
1 year ago
sc-tab.entry.js.map
1 year ago
sc-table-head.entry.js
1 year ago
sc-table-head.entry.js.map
1 year ago
sc-table_3.entry.js
1 year ago
sc-table_3.entry.js.map
1 year ago
sc-tag.entry.js
1 year ago
sc-tag.entry.js.map
1 year ago
sc-toggle.entry.js
1 year ago
sc-toggle.entry.js.map
1 year ago
sc-toggles.entry.js
1 year ago
sc-toggles.entry.js.map
1 year ago
sc-total.entry.js
1 year ago
sc-total.entry.js.map
1 year ago
sc-upcoming-invoice.entry.js
1 year ago
sc-upcoming-invoice.entry.js.map
1 year ago
sc-upgrade-required.entry.js
1 year ago
sc-upgrade-required.entry.js.map
1 year ago
sc-upsell-countdown-timer.entry.js
1 year ago
sc-upsell-countdown-timer.entry.js.map
1 year ago
sc-upsell-no-thanks-button.entry.js
1 year ago
sc-upsell-no-thanks-button.entry.js.map
1 year ago
sc-upsell-submit-button.entry.js
1 year ago
sc-upsell-submit-button.entry.js.map
1 year ago
sc-upsell-totals.entry.js
1 year ago
sc-upsell-totals.entry.js.map
1 year ago
sc-upsell.entry.js
1 year ago
sc-upsell.entry.js.map
1 year ago
sc-visually-hidden.entry.js
1 year ago
sc-visually-hidden.entry.js.map
1 year ago
sc-wordpress-password-edit.entry.js
1 year ago
sc-wordpress-password-edit.entry.js.map
1 year ago
sc-wordpress-user-edit.entry.js
1 year ago
sc-wordpress-user-edit.entry.js.map
1 year ago
sc-wordpress-user.entry.js
1 year ago
sc-wordpress-user.entry.js.map
1 year ago
store-093f0f6a.js
1 year ago
store-093f0f6a.js.map
1 year ago
store-a8bae355.js
1 year ago
store-a8bae355.js.map
1 year ago
store-dcefd119.js
1 year ago
store-dcefd119.js.map
1 year ago
surecart.js
1 year ago
surecart.js.map
1 year ago
tax-d4911dbc.js
1 year ago
tax-d4911dbc.js.map
1 year ago
universe-5a73abb7.js
1 year ago
universe-5a73abb7.js.map
1 year ago
util-50af2a83.js
1 year ago
util-50af2a83.js.map
1 year ago
utils-e9ee502a.js
1 year ago
utils-e9ee502a.js.map
1 year ago
watchers-38693c1f.js
1 year ago
watchers-38693c1f.js.map
1 year ago
watchers-4d2edfb0.js
1 year ago
watchers-4d2edfb0.js.map
1 year ago
watchers-4e5b728a.js
1 year ago
watchers-4e5b728a.js.map
1 year ago
watchers-67501779.js
1 year ago
watchers-67501779.js.map
1 year ago
watchers-a697b0c8.js
1 year ago
watchers-a697b0c8.js.map
1 year ago
sc-dropdown_3.entry.js
1613 lines
| 1 | import { r as registerInstance, c as createEvent, h, a as getElement } from './index-745b6bec.js'; |
| 2 | import { s as speak } from './index-c5a96d53.js'; |
| 3 | import { i as isRtl } from './page-align-0cdacf32.js'; |
| 4 | |
| 5 | function getSide(placement) { |
| 6 | return placement.split('-')[0]; |
| 7 | } |
| 8 | |
| 9 | function getAlignment(placement) { |
| 10 | return placement.split('-')[1]; |
| 11 | } |
| 12 | |
| 13 | function getMainAxisFromPlacement(placement) { |
| 14 | return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y'; |
| 15 | } |
| 16 | |
| 17 | function getLengthFromAxis(axis) { |
| 18 | return axis === 'y' ? 'height' : 'width'; |
| 19 | } |
| 20 | |
| 21 | function computeCoordsFromPlacement(_ref, placement, rtl) { |
| 22 | let { |
| 23 | reference, |
| 24 | floating |
| 25 | } = _ref; |
| 26 | const commonX = reference.x + reference.width / 2 - floating.width / 2; |
| 27 | const commonY = reference.y + reference.height / 2 - floating.height / 2; |
| 28 | const mainAxis = getMainAxisFromPlacement(placement); |
| 29 | const length = getLengthFromAxis(mainAxis); |
| 30 | const commonAlign = reference[length] / 2 - floating[length] / 2; |
| 31 | const side = getSide(placement); |
| 32 | const isVertical = mainAxis === 'x'; |
| 33 | let coords; |
| 34 | |
| 35 | switch (side) { |
| 36 | case 'top': |
| 37 | coords = { |
| 38 | x: commonX, |
| 39 | y: reference.y - floating.height |
| 40 | }; |
| 41 | break; |
| 42 | |
| 43 | case 'bottom': |
| 44 | coords = { |
| 45 | x: commonX, |
| 46 | y: reference.y + reference.height |
| 47 | }; |
| 48 | break; |
| 49 | |
| 50 | case 'right': |
| 51 | coords = { |
| 52 | x: reference.x + reference.width, |
| 53 | y: commonY |
| 54 | }; |
| 55 | break; |
| 56 | |
| 57 | case 'left': |
| 58 | coords = { |
| 59 | x: reference.x - floating.width, |
| 60 | y: commonY |
| 61 | }; |
| 62 | break; |
| 63 | |
| 64 | default: |
| 65 | coords = { |
| 66 | x: reference.x, |
| 67 | y: reference.y |
| 68 | }; |
| 69 | } |
| 70 | |
| 71 | switch (getAlignment(placement)) { |
| 72 | case 'start': |
| 73 | coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1); |
| 74 | break; |
| 75 | |
| 76 | case 'end': |
| 77 | coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1); |
| 78 | break; |
| 79 | } |
| 80 | |
| 81 | return coords; |
| 82 | } |
| 83 | |
| 84 | /** |
| 85 | * Computes the `x` and `y` coordinates that will place the floating element |
| 86 | * next to a reference element when it is given a certain positioning strategy. |
| 87 | * |
| 88 | * This export does not have any `platform` interface logic. You will need to |
| 89 | * write one for the platform you are using Floating UI with. |
| 90 | */ |
| 91 | |
| 92 | const computePosition$1 = async (reference, floating, config) => { |
| 93 | const { |
| 94 | placement = 'bottom', |
| 95 | strategy = 'absolute', |
| 96 | middleware = [], |
| 97 | platform |
| 98 | } = config; |
| 99 | const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating)); |
| 100 | |
| 101 | let rects = await platform.getElementRects({ |
| 102 | reference, |
| 103 | floating, |
| 104 | strategy |
| 105 | }); |
| 106 | let { |
| 107 | x, |
| 108 | y |
| 109 | } = computeCoordsFromPlacement(rects, placement, rtl); |
| 110 | let statefulPlacement = placement; |
| 111 | let middlewareData = {}; |
| 112 | let resetCount = 0; |
| 113 | |
| 114 | for (let i = 0; i < middleware.length; i++) { |
| 115 | const { |
| 116 | name, |
| 117 | fn |
| 118 | } = middleware[i]; |
| 119 | const { |
| 120 | x: nextX, |
| 121 | y: nextY, |
| 122 | data, |
| 123 | reset |
| 124 | } = await fn({ |
| 125 | x, |
| 126 | y, |
| 127 | initialPlacement: placement, |
| 128 | placement: statefulPlacement, |
| 129 | strategy, |
| 130 | middlewareData, |
| 131 | rects, |
| 132 | platform, |
| 133 | elements: { |
| 134 | reference, |
| 135 | floating |
| 136 | } |
| 137 | }); |
| 138 | x = nextX != null ? nextX : x; |
| 139 | y = nextY != null ? nextY : y; |
| 140 | middlewareData = { ...middlewareData, |
| 141 | [name]: { ...middlewareData[name], |
| 142 | ...data |
| 143 | } |
| 144 | }; |
| 145 | |
| 146 | if (reset && resetCount <= 50) { |
| 147 | resetCount++; |
| 148 | |
| 149 | if (typeof reset === 'object') { |
| 150 | if (reset.placement) { |
| 151 | statefulPlacement = reset.placement; |
| 152 | } |
| 153 | |
| 154 | if (reset.rects) { |
| 155 | rects = reset.rects === true ? await platform.getElementRects({ |
| 156 | reference, |
| 157 | floating, |
| 158 | strategy |
| 159 | }) : reset.rects; |
| 160 | } |
| 161 | |
| 162 | ({ |
| 163 | x, |
| 164 | y |
| 165 | } = computeCoordsFromPlacement(rects, statefulPlacement, rtl)); |
| 166 | } |
| 167 | |
| 168 | i = -1; |
| 169 | continue; |
| 170 | } |
| 171 | } |
| 172 | |
| 173 | return { |
| 174 | x, |
| 175 | y, |
| 176 | placement: statefulPlacement, |
| 177 | strategy, |
| 178 | middlewareData |
| 179 | }; |
| 180 | }; |
| 181 | |
| 182 | function expandPaddingObject(padding) { |
| 183 | return { |
| 184 | top: 0, |
| 185 | right: 0, |
| 186 | bottom: 0, |
| 187 | left: 0, |
| 188 | ...padding |
| 189 | }; |
| 190 | } |
| 191 | |
| 192 | function getSideObjectFromPadding(padding) { |
| 193 | return typeof padding !== 'number' ? expandPaddingObject(padding) : { |
| 194 | top: padding, |
| 195 | right: padding, |
| 196 | bottom: padding, |
| 197 | left: padding |
| 198 | }; |
| 199 | } |
| 200 | |
| 201 | function rectToClientRect(rect) { |
| 202 | return { ...rect, |
| 203 | top: rect.y, |
| 204 | left: rect.x, |
| 205 | right: rect.x + rect.width, |
| 206 | bottom: rect.y + rect.height |
| 207 | }; |
| 208 | } |
| 209 | |
| 210 | /** |
| 211 | * Resolves with an object of overflow side offsets that determine how much the |
| 212 | * element is overflowing a given clipping boundary. |
| 213 | * - positive = overflowing the boundary by that number of pixels |
| 214 | * - negative = how many pixels left before it will overflow |
| 215 | * - 0 = lies flush with the boundary |
| 216 | * @see https://floating-ui.com/docs/detectOverflow |
| 217 | */ |
| 218 | async function detectOverflow(middlewareArguments, options) { |
| 219 | var _await$platform$isEle; |
| 220 | |
| 221 | if (options === void 0) { |
| 222 | options = {}; |
| 223 | } |
| 224 | |
| 225 | const { |
| 226 | x, |
| 227 | y, |
| 228 | platform, |
| 229 | rects, |
| 230 | elements, |
| 231 | strategy |
| 232 | } = middlewareArguments; |
| 233 | const { |
| 234 | boundary = 'clippingAncestors', |
| 235 | rootBoundary = 'viewport', |
| 236 | elementContext = 'floating', |
| 237 | altBoundary = false, |
| 238 | padding = 0 |
| 239 | } = options; |
| 240 | const paddingObject = getSideObjectFromPadding(padding); |
| 241 | const altContext = elementContext === 'floating' ? 'reference' : 'floating'; |
| 242 | const element = elements[altBoundary ? altContext : elementContext]; |
| 243 | const clippingClientRect = rectToClientRect(await platform.getClippingRect({ |
| 244 | element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))), |
| 245 | boundary, |
| 246 | rootBoundary, |
| 247 | strategy |
| 248 | })); |
| 249 | const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({ |
| 250 | rect: elementContext === 'floating' ? { ...rects.floating, |
| 251 | x, |
| 252 | y |
| 253 | } : rects.reference, |
| 254 | offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)), |
| 255 | strategy |
| 256 | }) : rects[elementContext]); |
| 257 | return { |
| 258 | top: clippingClientRect.top - elementClientRect.top + paddingObject.top, |
| 259 | bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, |
| 260 | left: clippingClientRect.left - elementClientRect.left + paddingObject.left, |
| 261 | right: elementClientRect.right - clippingClientRect.right + paddingObject.right |
| 262 | }; |
| 263 | } |
| 264 | |
| 265 | const min$1 = Math.min; |
| 266 | const max$1 = Math.max; |
| 267 | |
| 268 | function within(min$1$1, value, max$1$1) { |
| 269 | return max$1(min$1$1, min$1(value, max$1$1)); |
| 270 | } |
| 271 | |
| 272 | const hash$1 = { |
| 273 | left: 'right', |
| 274 | right: 'left', |
| 275 | bottom: 'top', |
| 276 | top: 'bottom' |
| 277 | }; |
| 278 | function getOppositePlacement(placement) { |
| 279 | return placement.replace(/left|right|bottom|top/g, matched => hash$1[matched]); |
| 280 | } |
| 281 | |
| 282 | function getAlignmentSides(placement, rects, rtl) { |
| 283 | if (rtl === void 0) { |
| 284 | rtl = false; |
| 285 | } |
| 286 | |
| 287 | const alignment = getAlignment(placement); |
| 288 | const mainAxis = getMainAxisFromPlacement(placement); |
| 289 | const length = getLengthFromAxis(mainAxis); |
| 290 | let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top'; |
| 291 | |
| 292 | if (rects.reference[length] > rects.floating[length]) { |
| 293 | mainAlignmentSide = getOppositePlacement(mainAlignmentSide); |
| 294 | } |
| 295 | |
| 296 | return { |
| 297 | main: mainAlignmentSide, |
| 298 | cross: getOppositePlacement(mainAlignmentSide) |
| 299 | }; |
| 300 | } |
| 301 | |
| 302 | const hash = { |
| 303 | start: 'end', |
| 304 | end: 'start' |
| 305 | }; |
| 306 | function getOppositeAlignmentPlacement(placement) { |
| 307 | return placement.replace(/start|end/g, matched => hash[matched]); |
| 308 | } |
| 309 | |
| 310 | function getExpandedPlacements(placement) { |
| 311 | const oppositePlacement = getOppositePlacement(placement); |
| 312 | return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)]; |
| 313 | } |
| 314 | |
| 315 | /** |
| 316 | * Changes the placement of the floating element to one that will fit if the |
| 317 | * initially specified `placement` does not. |
| 318 | * @see https://floating-ui.com/docs/flip |
| 319 | */ |
| 320 | const flip = function (options) { |
| 321 | if (options === void 0) { |
| 322 | options = {}; |
| 323 | } |
| 324 | |
| 325 | return { |
| 326 | name: 'flip', |
| 327 | options, |
| 328 | |
| 329 | async fn(middlewareArguments) { |
| 330 | var _middlewareData$flip; |
| 331 | |
| 332 | const { |
| 333 | placement, |
| 334 | middlewareData, |
| 335 | rects, |
| 336 | initialPlacement, |
| 337 | platform, |
| 338 | elements |
| 339 | } = middlewareArguments; |
| 340 | const { |
| 341 | mainAxis: checkMainAxis = true, |
| 342 | crossAxis: checkCrossAxis = true, |
| 343 | fallbackPlacements: specifiedFallbackPlacements, |
| 344 | fallbackStrategy = 'bestFit', |
| 345 | flipAlignment = true, |
| 346 | ...detectOverflowOptions |
| 347 | } = options; |
| 348 | const side = getSide(placement); |
| 349 | const isBasePlacement = side === initialPlacement; |
| 350 | const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement)); |
| 351 | const placements = [initialPlacement, ...fallbackPlacements]; |
| 352 | const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions); |
| 353 | const overflows = []; |
| 354 | let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || []; |
| 355 | |
| 356 | if (checkMainAxis) { |
| 357 | overflows.push(overflow[side]); |
| 358 | } |
| 359 | |
| 360 | if (checkCrossAxis) { |
| 361 | const { |
| 362 | main, |
| 363 | cross |
| 364 | } = getAlignmentSides(placement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))); |
| 365 | overflows.push(overflow[main], overflow[cross]); |
| 366 | } |
| 367 | |
| 368 | overflowsData = [...overflowsData, { |
| 369 | placement, |
| 370 | overflows |
| 371 | }]; // One or more sides is overflowing |
| 372 | |
| 373 | if (!overflows.every(side => side <= 0)) { |
| 374 | var _middlewareData$flip$, _middlewareData$flip2; |
| 375 | |
| 376 | const nextIndex = ((_middlewareData$flip$ = (_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) != null ? _middlewareData$flip$ : 0) + 1; |
| 377 | const nextPlacement = placements[nextIndex]; |
| 378 | |
| 379 | if (nextPlacement) { |
| 380 | // Try next placement and re-run the lifecycle |
| 381 | return { |
| 382 | data: { |
| 383 | index: nextIndex, |
| 384 | overflows: overflowsData |
| 385 | }, |
| 386 | reset: { |
| 387 | placement: nextPlacement |
| 388 | } |
| 389 | }; |
| 390 | } |
| 391 | |
| 392 | let resetPlacement = 'bottom'; |
| 393 | |
| 394 | switch (fallbackStrategy) { |
| 395 | case 'bestFit': |
| 396 | { |
| 397 | var _overflowsData$map$so; |
| 398 | |
| 399 | const placement = (_overflowsData$map$so = overflowsData.map(d => [d, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0].placement; |
| 400 | |
| 401 | if (placement) { |
| 402 | resetPlacement = placement; |
| 403 | } |
| 404 | |
| 405 | break; |
| 406 | } |
| 407 | |
| 408 | case 'initialPlacement': |
| 409 | resetPlacement = initialPlacement; |
| 410 | break; |
| 411 | } |
| 412 | |
| 413 | if (placement !== resetPlacement) { |
| 414 | return { |
| 415 | reset: { |
| 416 | placement: resetPlacement |
| 417 | } |
| 418 | }; |
| 419 | } |
| 420 | } |
| 421 | |
| 422 | return {}; |
| 423 | } |
| 424 | |
| 425 | }; |
| 426 | }; |
| 427 | |
| 428 | async function convertValueToCoords(middlewareArguments, value) { |
| 429 | const { |
| 430 | placement, |
| 431 | platform, |
| 432 | elements |
| 433 | } = middlewareArguments; |
| 434 | const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); |
| 435 | const side = getSide(placement); |
| 436 | const alignment = getAlignment(placement); |
| 437 | const isVertical = getMainAxisFromPlacement(placement) === 'x'; |
| 438 | const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1; |
| 439 | const crossAxisMulti = rtl && isVertical ? -1 : 1; |
| 440 | const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const |
| 441 | |
| 442 | let { |
| 443 | mainAxis, |
| 444 | crossAxis, |
| 445 | alignmentAxis |
| 446 | } = typeof rawValue === 'number' ? { |
| 447 | mainAxis: rawValue, |
| 448 | crossAxis: 0, |
| 449 | alignmentAxis: null |
| 450 | } : { |
| 451 | mainAxis: 0, |
| 452 | crossAxis: 0, |
| 453 | alignmentAxis: null, |
| 454 | ...rawValue |
| 455 | }; |
| 456 | |
| 457 | if (alignment && typeof alignmentAxis === 'number') { |
| 458 | crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis; |
| 459 | } |
| 460 | |
| 461 | return isVertical ? { |
| 462 | x: crossAxis * crossAxisMulti, |
| 463 | y: mainAxis * mainAxisMulti |
| 464 | } : { |
| 465 | x: mainAxis * mainAxisMulti, |
| 466 | y: crossAxis * crossAxisMulti |
| 467 | }; |
| 468 | } |
| 469 | /** |
| 470 | * Displaces the floating element from its reference element. |
| 471 | * @see https://floating-ui.com/docs/offset |
| 472 | */ |
| 473 | |
| 474 | const offset = function (value) { |
| 475 | if (value === void 0) { |
| 476 | value = 0; |
| 477 | } |
| 478 | |
| 479 | return { |
| 480 | name: 'offset', |
| 481 | options: value, |
| 482 | |
| 483 | async fn(middlewareArguments) { |
| 484 | const { |
| 485 | x, |
| 486 | y |
| 487 | } = middlewareArguments; |
| 488 | const diffCoords = await convertValueToCoords(middlewareArguments, value); |
| 489 | return { |
| 490 | x: x + diffCoords.x, |
| 491 | y: y + diffCoords.y, |
| 492 | data: diffCoords |
| 493 | }; |
| 494 | } |
| 495 | |
| 496 | }; |
| 497 | }; |
| 498 | |
| 499 | function getCrossAxis(axis) { |
| 500 | return axis === 'x' ? 'y' : 'x'; |
| 501 | } |
| 502 | |
| 503 | /** |
| 504 | * Shifts the floating element in order to keep it in view when it will overflow |
| 505 | * a clipping boundary. |
| 506 | * @see https://floating-ui.com/docs/shift |
| 507 | */ |
| 508 | const shift = function (options) { |
| 509 | if (options === void 0) { |
| 510 | options = {}; |
| 511 | } |
| 512 | |
| 513 | return { |
| 514 | name: 'shift', |
| 515 | options, |
| 516 | |
| 517 | async fn(middlewareArguments) { |
| 518 | const { |
| 519 | x, |
| 520 | y, |
| 521 | placement |
| 522 | } = middlewareArguments; |
| 523 | const { |
| 524 | mainAxis: checkMainAxis = true, |
| 525 | crossAxis: checkCrossAxis = false, |
| 526 | limiter = { |
| 527 | fn: _ref => { |
| 528 | let { |
| 529 | x, |
| 530 | y |
| 531 | } = _ref; |
| 532 | return { |
| 533 | x, |
| 534 | y |
| 535 | }; |
| 536 | } |
| 537 | }, |
| 538 | ...detectOverflowOptions |
| 539 | } = options; |
| 540 | const coords = { |
| 541 | x, |
| 542 | y |
| 543 | }; |
| 544 | const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions); |
| 545 | const mainAxis = getMainAxisFromPlacement(getSide(placement)); |
| 546 | const crossAxis = getCrossAxis(mainAxis); |
| 547 | let mainAxisCoord = coords[mainAxis]; |
| 548 | let crossAxisCoord = coords[crossAxis]; |
| 549 | |
| 550 | if (checkMainAxis) { |
| 551 | const minSide = mainAxis === 'y' ? 'top' : 'left'; |
| 552 | const maxSide = mainAxis === 'y' ? 'bottom' : 'right'; |
| 553 | const min = mainAxisCoord + overflow[minSide]; |
| 554 | const max = mainAxisCoord - overflow[maxSide]; |
| 555 | mainAxisCoord = within(min, mainAxisCoord, max); |
| 556 | } |
| 557 | |
| 558 | if (checkCrossAxis) { |
| 559 | const minSide = crossAxis === 'y' ? 'top' : 'left'; |
| 560 | const maxSide = crossAxis === 'y' ? 'bottom' : 'right'; |
| 561 | const min = crossAxisCoord + overflow[minSide]; |
| 562 | const max = crossAxisCoord - overflow[maxSide]; |
| 563 | crossAxisCoord = within(min, crossAxisCoord, max); |
| 564 | } |
| 565 | |
| 566 | const limitedCoords = limiter.fn({ ...middlewareArguments, |
| 567 | [mainAxis]: mainAxisCoord, |
| 568 | [crossAxis]: crossAxisCoord |
| 569 | }); |
| 570 | return { ...limitedCoords, |
| 571 | data: { |
| 572 | x: limitedCoords.x - x, |
| 573 | y: limitedCoords.y - y |
| 574 | } |
| 575 | }; |
| 576 | } |
| 577 | |
| 578 | }; |
| 579 | }; |
| 580 | |
| 581 | /** |
| 582 | * Provides data to change the size of the floating element. For instance, |
| 583 | * prevent it from overflowing its clipping boundary or match the width of the |
| 584 | * reference element. |
| 585 | * @see https://floating-ui.com/docs/size |
| 586 | */ |
| 587 | const size = function (options) { |
| 588 | if (options === void 0) { |
| 589 | options = {}; |
| 590 | } |
| 591 | |
| 592 | return { |
| 593 | name: 'size', |
| 594 | options, |
| 595 | |
| 596 | async fn(middlewareArguments) { |
| 597 | const { |
| 598 | placement, |
| 599 | rects, |
| 600 | platform, |
| 601 | elements |
| 602 | } = middlewareArguments; |
| 603 | const { |
| 604 | apply, |
| 605 | ...detectOverflowOptions |
| 606 | } = options; |
| 607 | const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions); |
| 608 | const side = getSide(placement); |
| 609 | const alignment = getAlignment(placement); |
| 610 | let heightSide; |
| 611 | let widthSide; |
| 612 | |
| 613 | if (side === 'top' || side === 'bottom') { |
| 614 | heightSide = side; |
| 615 | widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right'; |
| 616 | } else { |
| 617 | widthSide = side; |
| 618 | heightSide = alignment === 'end' ? 'top' : 'bottom'; |
| 619 | } |
| 620 | |
| 621 | const xMin = max$1(overflow.left, 0); |
| 622 | const xMax = max$1(overflow.right, 0); |
| 623 | const yMin = max$1(overflow.top, 0); |
| 624 | const yMax = max$1(overflow.bottom, 0); |
| 625 | const dimensions = { |
| 626 | availableHeight: rects.floating.height - (['left', 'right'].includes(placement) ? 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max$1(overflow.top, overflow.bottom)) : overflow[heightSide]), |
| 627 | availableWidth: rects.floating.width - (['top', 'bottom'].includes(placement) ? 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right)) : overflow[widthSide]) |
| 628 | }; |
| 629 | const prevDimensions = await platform.getDimensions(elements.floating); |
| 630 | apply == null ? void 0 : apply({ ...middlewareArguments, |
| 631 | ...dimensions |
| 632 | }); |
| 633 | const nextDimensions = await platform.getDimensions(elements.floating); |
| 634 | |
| 635 | if (prevDimensions.width !== nextDimensions.width || prevDimensions.height !== nextDimensions.height) { |
| 636 | return { |
| 637 | reset: { |
| 638 | rects: true |
| 639 | } |
| 640 | }; |
| 641 | } |
| 642 | |
| 643 | return {}; |
| 644 | } |
| 645 | |
| 646 | }; |
| 647 | }; |
| 648 | |
| 649 | function isWindow(value) { |
| 650 | return value && value.document && value.location && value.alert && value.setInterval; |
| 651 | } |
| 652 | function getWindow(node) { |
| 653 | if (node == null) { |
| 654 | return window; |
| 655 | } |
| 656 | |
| 657 | if (!isWindow(node)) { |
| 658 | const ownerDocument = node.ownerDocument; |
| 659 | return ownerDocument ? ownerDocument.defaultView || window : window; |
| 660 | } |
| 661 | |
| 662 | return node; |
| 663 | } |
| 664 | |
| 665 | function getComputedStyle$1(element) { |
| 666 | return getWindow(element).getComputedStyle(element); |
| 667 | } |
| 668 | |
| 669 | function getNodeName(node) { |
| 670 | return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : ''; |
| 671 | } |
| 672 | |
| 673 | function getUAString() { |
| 674 | const uaData = navigator.userAgentData; |
| 675 | |
| 676 | if (uaData != null && uaData.brands) { |
| 677 | return uaData.brands.map(item => item.brand + "/" + item.version).join(' '); |
| 678 | } |
| 679 | |
| 680 | return navigator.userAgent; |
| 681 | } |
| 682 | |
| 683 | function isHTMLElement(value) { |
| 684 | return value instanceof getWindow(value).HTMLElement; |
| 685 | } |
| 686 | function isElement(value) { |
| 687 | return value instanceof getWindow(value).Element; |
| 688 | } |
| 689 | function isNode(value) { |
| 690 | return value instanceof getWindow(value).Node; |
| 691 | } |
| 692 | function isShadowRoot(node) { |
| 693 | // Browsers without `ShadowRoot` support |
| 694 | if (typeof ShadowRoot === 'undefined') { |
| 695 | return false; |
| 696 | } |
| 697 | |
| 698 | const OwnElement = getWindow(node).ShadowRoot; |
| 699 | return node instanceof OwnElement || node instanceof ShadowRoot; |
| 700 | } |
| 701 | function isOverflowElement(element) { |
| 702 | // Firefox wants us to check `-x` and `-y` variations as well |
| 703 | const { |
| 704 | overflow, |
| 705 | overflowX, |
| 706 | overflowY |
| 707 | } = getComputedStyle$1(element); |
| 708 | return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); |
| 709 | } |
| 710 | function isTableElement(element) { |
| 711 | return ['table', 'td', 'th'].includes(getNodeName(element)); |
| 712 | } |
| 713 | function isContainingBlock(element) { |
| 714 | // TODO: Try and use feature detection here instead |
| 715 | const isFirefox = /firefox/i.test(getUAString()); |
| 716 | const css = getComputedStyle$1(element); // This is non-exhaustive but covers the most common CSS properties that |
| 717 | // create a containing block. |
| 718 | // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block |
| 719 | |
| 720 | return css.transform !== 'none' || css.perspective !== 'none' || // @ts-ignore (TS 4.1 compat) |
| 721 | css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false); |
| 722 | } |
| 723 | function isLayoutViewport() { |
| 724 | // Not Safari |
| 725 | return !/^((?!chrome|android).)*safari/i.test(getUAString()); // Feature detection for this fails in various ways |
| 726 | // • Always-visible scrollbar or not |
| 727 | // • Width of <html>, etc. |
| 728 | // const vV = win.visualViewport; |
| 729 | // return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true; |
| 730 | } |
| 731 | |
| 732 | const min = Math.min; |
| 733 | const max = Math.max; |
| 734 | const round = Math.round; |
| 735 | |
| 736 | function getBoundingClientRect(element, includeScale, isFixedStrategy) { |
| 737 | var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2; |
| 738 | |
| 739 | if (includeScale === void 0) { |
| 740 | includeScale = false; |
| 741 | } |
| 742 | |
| 743 | if (isFixedStrategy === void 0) { |
| 744 | isFixedStrategy = false; |
| 745 | } |
| 746 | |
| 747 | const clientRect = element.getBoundingClientRect(); |
| 748 | let scaleX = 1; |
| 749 | let scaleY = 1; |
| 750 | |
| 751 | if (includeScale && isHTMLElement(element)) { |
| 752 | scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1; |
| 753 | scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1; |
| 754 | } |
| 755 | |
| 756 | const win = isElement(element) ? getWindow(element) : window; |
| 757 | const addVisualOffsets = !isLayoutViewport() && isFixedStrategy; |
| 758 | const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scaleX; |
| 759 | const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scaleY; |
| 760 | const width = clientRect.width / scaleX; |
| 761 | const height = clientRect.height / scaleY; |
| 762 | return { |
| 763 | width, |
| 764 | height, |
| 765 | top: y, |
| 766 | right: x + width, |
| 767 | bottom: y + height, |
| 768 | left: x, |
| 769 | x, |
| 770 | y |
| 771 | }; |
| 772 | } |
| 773 | |
| 774 | function getDocumentElement(node) { |
| 775 | return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement; |
| 776 | } |
| 777 | |
| 778 | function getNodeScroll(element) { |
| 779 | if (isElement(element)) { |
| 780 | return { |
| 781 | scrollLeft: element.scrollLeft, |
| 782 | scrollTop: element.scrollTop |
| 783 | }; |
| 784 | } |
| 785 | |
| 786 | return { |
| 787 | scrollLeft: element.pageXOffset, |
| 788 | scrollTop: element.pageYOffset |
| 789 | }; |
| 790 | } |
| 791 | |
| 792 | function getWindowScrollBarX(element) { |
| 793 | // If <html> has a CSS width greater than the viewport, then this will be |
| 794 | // incorrect for RTL. |
| 795 | return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft; |
| 796 | } |
| 797 | |
| 798 | function isScaled(element) { |
| 799 | const rect = getBoundingClientRect(element); |
| 800 | return round(rect.width) !== element.offsetWidth || round(rect.height) !== element.offsetHeight; |
| 801 | } |
| 802 | |
| 803 | function getRectRelativeToOffsetParent(element, offsetParent, strategy) { |
| 804 | const isOffsetParentAnElement = isHTMLElement(offsetParent); |
| 805 | const documentElement = getDocumentElement(offsetParent); |
| 806 | const rect = getBoundingClientRect(element, // @ts-ignore - checked above (TS 4.1 compat) |
| 807 | isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed'); |
| 808 | let scroll = { |
| 809 | scrollLeft: 0, |
| 810 | scrollTop: 0 |
| 811 | }; |
| 812 | const offsets = { |
| 813 | x: 0, |
| 814 | y: 0 |
| 815 | }; |
| 816 | |
| 817 | if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') { |
| 818 | if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { |
| 819 | scroll = getNodeScroll(offsetParent); |
| 820 | } |
| 821 | |
| 822 | if (isHTMLElement(offsetParent)) { |
| 823 | const offsetRect = getBoundingClientRect(offsetParent, true); |
| 824 | offsets.x = offsetRect.x + offsetParent.clientLeft; |
| 825 | offsets.y = offsetRect.y + offsetParent.clientTop; |
| 826 | } else if (documentElement) { |
| 827 | offsets.x = getWindowScrollBarX(documentElement); |
| 828 | } |
| 829 | } |
| 830 | |
| 831 | return { |
| 832 | x: rect.left + scroll.scrollLeft - offsets.x, |
| 833 | y: rect.top + scroll.scrollTop - offsets.y, |
| 834 | width: rect.width, |
| 835 | height: rect.height |
| 836 | }; |
| 837 | } |
| 838 | |
| 839 | function getParentNode(node) { |
| 840 | if (getNodeName(node) === 'html') { |
| 841 | return node; |
| 842 | } |
| 843 | |
| 844 | return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle |
| 845 | // @ts-ignore |
| 846 | node.assignedSlot || // step into the shadow DOM of the parent of a slotted node |
| 847 | node.parentNode || ( // DOM Element detected |
| 848 | isShadowRoot(node) ? node.host : null) || // ShadowRoot detected |
| 849 | getDocumentElement(node) // fallback |
| 850 | |
| 851 | ); |
| 852 | } |
| 853 | |
| 854 | function getTrueOffsetParent(element) { |
| 855 | if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { |
| 856 | return null; |
| 857 | } |
| 858 | |
| 859 | return element.offsetParent; |
| 860 | } |
| 861 | |
| 862 | function getContainingBlock(element) { |
| 863 | let currentNode = getParentNode(element); |
| 864 | |
| 865 | if (isShadowRoot(currentNode)) { |
| 866 | currentNode = currentNode.host; |
| 867 | } |
| 868 | |
| 869 | while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) { |
| 870 | if (isContainingBlock(currentNode)) { |
| 871 | return currentNode; |
| 872 | } else { |
| 873 | currentNode = currentNode.parentNode; |
| 874 | } |
| 875 | } |
| 876 | |
| 877 | return null; |
| 878 | } // Gets the closest ancestor positioned element. Handles some edge cases, |
| 879 | // such as table ancestors and cross browser bugs. |
| 880 | |
| 881 | |
| 882 | function getOffsetParent(element) { |
| 883 | const window = getWindow(element); |
| 884 | let offsetParent = getTrueOffsetParent(element); |
| 885 | |
| 886 | while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') { |
| 887 | offsetParent = getTrueOffsetParent(offsetParent); |
| 888 | } |
| 889 | |
| 890 | if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) { |
| 891 | return window; |
| 892 | } |
| 893 | |
| 894 | return offsetParent || getContainingBlock(element) || window; |
| 895 | } |
| 896 | |
| 897 | function getDimensions(element) { |
| 898 | if (isHTMLElement(element)) { |
| 899 | return { |
| 900 | width: element.offsetWidth, |
| 901 | height: element.offsetHeight |
| 902 | }; |
| 903 | } |
| 904 | |
| 905 | const rect = getBoundingClientRect(element); |
| 906 | return { |
| 907 | width: rect.width, |
| 908 | height: rect.height |
| 909 | }; |
| 910 | } |
| 911 | |
| 912 | function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) { |
| 913 | let { |
| 914 | rect, |
| 915 | offsetParent, |
| 916 | strategy |
| 917 | } = _ref; |
| 918 | const isOffsetParentAnElement = isHTMLElement(offsetParent); |
| 919 | const documentElement = getDocumentElement(offsetParent); |
| 920 | |
| 921 | if (offsetParent === documentElement) { |
| 922 | return rect; |
| 923 | } |
| 924 | |
| 925 | let scroll = { |
| 926 | scrollLeft: 0, |
| 927 | scrollTop: 0 |
| 928 | }; |
| 929 | const offsets = { |
| 930 | x: 0, |
| 931 | y: 0 |
| 932 | }; |
| 933 | |
| 934 | if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') { |
| 935 | if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { |
| 936 | scroll = getNodeScroll(offsetParent); |
| 937 | } |
| 938 | |
| 939 | if (isHTMLElement(offsetParent)) { |
| 940 | const offsetRect = getBoundingClientRect(offsetParent, true); |
| 941 | offsets.x = offsetRect.x + offsetParent.clientLeft; |
| 942 | offsets.y = offsetRect.y + offsetParent.clientTop; |
| 943 | } // This doesn't appear to be need to be negated. |
| 944 | // else if (documentElement) { |
| 945 | // offsets.x = getWindowScrollBarX(documentElement); |
| 946 | // } |
| 947 | |
| 948 | } |
| 949 | |
| 950 | return { ...rect, |
| 951 | x: rect.x - scroll.scrollLeft + offsets.x, |
| 952 | y: rect.y - scroll.scrollTop + offsets.y |
| 953 | }; |
| 954 | } |
| 955 | |
| 956 | function getViewportRect(element, strategy) { |
| 957 | const win = getWindow(element); |
| 958 | const html = getDocumentElement(element); |
| 959 | const visualViewport = win.visualViewport; |
| 960 | let width = html.clientWidth; |
| 961 | let height = html.clientHeight; |
| 962 | let x = 0; |
| 963 | let y = 0; |
| 964 | |
| 965 | if (visualViewport) { |
| 966 | width = visualViewport.width; |
| 967 | height = visualViewport.height; |
| 968 | const layoutViewport = isLayoutViewport(); |
| 969 | |
| 970 | if (layoutViewport || !layoutViewport && strategy === 'fixed') { |
| 971 | x = visualViewport.offsetLeft; |
| 972 | y = visualViewport.offsetTop; |
| 973 | } |
| 974 | } |
| 975 | |
| 976 | return { |
| 977 | width, |
| 978 | height, |
| 979 | x, |
| 980 | y |
| 981 | }; |
| 982 | } |
| 983 | |
| 984 | // of the `<html>` and `<body>` rect bounds if horizontally scrollable |
| 985 | |
| 986 | function getDocumentRect(element) { |
| 987 | var _element$ownerDocumen; |
| 988 | |
| 989 | const html = getDocumentElement(element); |
| 990 | const scroll = getNodeScroll(element); |
| 991 | const body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; |
| 992 | const width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); |
| 993 | const height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); |
| 994 | let x = -scroll.scrollLeft + getWindowScrollBarX(element); |
| 995 | const y = -scroll.scrollTop; |
| 996 | |
| 997 | if (getComputedStyle$1(body || html).direction === 'rtl') { |
| 998 | x += max(html.clientWidth, body ? body.clientWidth : 0) - width; |
| 999 | } |
| 1000 | |
| 1001 | return { |
| 1002 | width, |
| 1003 | height, |
| 1004 | x, |
| 1005 | y |
| 1006 | }; |
| 1007 | } |
| 1008 | |
| 1009 | function getNearestOverflowAncestor(node) { |
| 1010 | const parentNode = getParentNode(node); |
| 1011 | |
| 1012 | if (['html', 'body', '#document'].includes(getNodeName(parentNode))) { |
| 1013 | // @ts-ignore assume body is always available |
| 1014 | return node.ownerDocument.body; |
| 1015 | } |
| 1016 | |
| 1017 | if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) { |
| 1018 | return parentNode; |
| 1019 | } |
| 1020 | |
| 1021 | return getNearestOverflowAncestor(parentNode); |
| 1022 | } |
| 1023 | |
| 1024 | function getOverflowAncestors(node, list) { |
| 1025 | var _node$ownerDocument; |
| 1026 | |
| 1027 | if (list === void 0) { |
| 1028 | list = []; |
| 1029 | } |
| 1030 | |
| 1031 | const scrollableAncestor = getNearestOverflowAncestor(node); |
| 1032 | const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body); |
| 1033 | const win = getWindow(scrollableAncestor); |
| 1034 | const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor; |
| 1035 | const updatedList = list.concat(target); |
| 1036 | return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here |
| 1037 | updatedList.concat(getOverflowAncestors(target)); |
| 1038 | } |
| 1039 | |
| 1040 | function contains(parent, child) { |
| 1041 | const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method |
| 1042 | |
| 1043 | if (parent.contains(child)) { |
| 1044 | return true; |
| 1045 | } // then fallback to custom implementation with Shadow DOM support |
| 1046 | else if (rootNode && isShadowRoot(rootNode)) { |
| 1047 | let next = child; |
| 1048 | |
| 1049 | do { |
| 1050 | // use `===` replace node.isSameNode() |
| 1051 | if (next && parent === next) { |
| 1052 | return true; |
| 1053 | } // @ts-ignore: need a better way to handle this... |
| 1054 | |
| 1055 | |
| 1056 | next = next.parentNode || next.host; |
| 1057 | } while (next); |
| 1058 | } |
| 1059 | |
| 1060 | return false; |
| 1061 | } |
| 1062 | |
| 1063 | function getInnerBoundingClientRect(element, strategy) { |
| 1064 | const clientRect = getBoundingClientRect(element, false, strategy === 'fixed'); |
| 1065 | const top = clientRect.top + element.clientTop; |
| 1066 | const left = clientRect.left + element.clientLeft; |
| 1067 | return { |
| 1068 | top, |
| 1069 | left, |
| 1070 | x: left, |
| 1071 | y: top, |
| 1072 | right: left + element.clientWidth, |
| 1073 | bottom: top + element.clientHeight, |
| 1074 | width: element.clientWidth, |
| 1075 | height: element.clientHeight |
| 1076 | }; |
| 1077 | } |
| 1078 | |
| 1079 | function getClientRectFromClippingAncestor(element, clippingParent, strategy) { |
| 1080 | if (clippingParent === 'viewport') { |
| 1081 | return rectToClientRect(getViewportRect(element, strategy)); |
| 1082 | } |
| 1083 | |
| 1084 | if (isElement(clippingParent)) { |
| 1085 | return getInnerBoundingClientRect(clippingParent, strategy); |
| 1086 | } |
| 1087 | |
| 1088 | return rectToClientRect(getDocumentRect(getDocumentElement(element))); |
| 1089 | } // A "clipping ancestor" is an overflowable container with the characteristic of |
| 1090 | // clipping (or hiding) overflowing elements with a position different from |
| 1091 | // `initial` |
| 1092 | |
| 1093 | |
| 1094 | function getClippingAncestors(element) { |
| 1095 | const clippingAncestors = getOverflowAncestors(element); |
| 1096 | const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position); |
| 1097 | const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; |
| 1098 | |
| 1099 | if (!isElement(clipperElement)) { |
| 1100 | return []; |
| 1101 | } // @ts-ignore isElement check ensures we return Array<Element> |
| 1102 | |
| 1103 | |
| 1104 | return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body'); |
| 1105 | } // Gets the maximum area that the element is visible in due to any number of |
| 1106 | // clipping ancestors |
| 1107 | |
| 1108 | |
| 1109 | function getClippingRect(_ref) { |
| 1110 | let { |
| 1111 | element, |
| 1112 | boundary, |
| 1113 | rootBoundary, |
| 1114 | strategy |
| 1115 | } = _ref; |
| 1116 | const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary); |
| 1117 | const clippingAncestors = [...mainClippingAncestors, rootBoundary]; |
| 1118 | const firstClippingAncestor = clippingAncestors[0]; |
| 1119 | const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => { |
| 1120 | const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy); |
| 1121 | accRect.top = max(rect.top, accRect.top); |
| 1122 | accRect.right = min(rect.right, accRect.right); |
| 1123 | accRect.bottom = min(rect.bottom, accRect.bottom); |
| 1124 | accRect.left = max(rect.left, accRect.left); |
| 1125 | return accRect; |
| 1126 | }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy)); |
| 1127 | return { |
| 1128 | width: clippingRect.right - clippingRect.left, |
| 1129 | height: clippingRect.bottom - clippingRect.top, |
| 1130 | x: clippingRect.left, |
| 1131 | y: clippingRect.top |
| 1132 | }; |
| 1133 | } |
| 1134 | |
| 1135 | const platform = { |
| 1136 | getClippingRect, |
| 1137 | convertOffsetParentRelativeRectToViewportRelativeRect, |
| 1138 | isElement, |
| 1139 | getDimensions, |
| 1140 | getOffsetParent, |
| 1141 | getDocumentElement, |
| 1142 | getElementRects: _ref => { |
| 1143 | let { |
| 1144 | reference, |
| 1145 | floating, |
| 1146 | strategy |
| 1147 | } = _ref; |
| 1148 | return { |
| 1149 | reference: getRectRelativeToOffsetParent(reference, getOffsetParent(floating), strategy), |
| 1150 | floating: { ...getDimensions(floating), |
| 1151 | x: 0, |
| 1152 | y: 0 |
| 1153 | } |
| 1154 | }; |
| 1155 | }, |
| 1156 | getClientRects: element => Array.from(element.getClientRects()), |
| 1157 | isRTL: element => getComputedStyle$1(element).direction === 'rtl' |
| 1158 | }; |
| 1159 | |
| 1160 | /** |
| 1161 | * Automatically updates the position of the floating element when necessary. |
| 1162 | * @see https://floating-ui.com/docs/autoUpdate |
| 1163 | */ |
| 1164 | function autoUpdate(reference, floating, update, options) { |
| 1165 | if (options === void 0) { |
| 1166 | options = {}; |
| 1167 | } |
| 1168 | |
| 1169 | const { |
| 1170 | ancestorScroll: _ancestorScroll = true, |
| 1171 | ancestorResize: _ancestorResize = true, |
| 1172 | elementResize = true, |
| 1173 | animationFrame = false |
| 1174 | } = options; |
| 1175 | const ancestorScroll = _ancestorScroll && !animationFrame; |
| 1176 | const ancestorResize = _ancestorResize && !animationFrame; |
| 1177 | const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : []; |
| 1178 | ancestors.forEach(ancestor => { |
| 1179 | ancestorScroll && ancestor.addEventListener('scroll', update, { |
| 1180 | passive: true |
| 1181 | }); |
| 1182 | ancestorResize && ancestor.addEventListener('resize', update); |
| 1183 | }); |
| 1184 | let observer = null; |
| 1185 | |
| 1186 | if (elementResize) { |
| 1187 | let initialUpdate = true; |
| 1188 | observer = new ResizeObserver(() => { |
| 1189 | if (!initialUpdate) { |
| 1190 | update(); |
| 1191 | } |
| 1192 | |
| 1193 | initialUpdate = false; |
| 1194 | }); |
| 1195 | isElement(reference) && !animationFrame && observer.observe(reference); |
| 1196 | observer.observe(floating); |
| 1197 | } |
| 1198 | |
| 1199 | let frameId; |
| 1200 | let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null; |
| 1201 | |
| 1202 | if (animationFrame) { |
| 1203 | frameLoop(); |
| 1204 | } |
| 1205 | |
| 1206 | function frameLoop() { |
| 1207 | const nextRefRect = getBoundingClientRect(reference); |
| 1208 | |
| 1209 | if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) { |
| 1210 | update(); |
| 1211 | } |
| 1212 | |
| 1213 | prevRefRect = nextRefRect; |
| 1214 | frameId = requestAnimationFrame(frameLoop); |
| 1215 | } |
| 1216 | |
| 1217 | update(); |
| 1218 | return () => { |
| 1219 | var _observer; |
| 1220 | |
| 1221 | ancestors.forEach(ancestor => { |
| 1222 | ancestorScroll && ancestor.removeEventListener('scroll', update); |
| 1223 | ancestorResize && ancestor.removeEventListener('resize', update); |
| 1224 | }); |
| 1225 | (_observer = observer) == null ? void 0 : _observer.disconnect(); |
| 1226 | observer = null; |
| 1227 | |
| 1228 | if (animationFrame) { |
| 1229 | cancelAnimationFrame(frameId); |
| 1230 | } |
| 1231 | }; |
| 1232 | } |
| 1233 | |
| 1234 | /** |
| 1235 | * Computes the `x` and `y` coordinates that will place the floating element |
| 1236 | * next to a reference element when it is given a certain CSS positioning |
| 1237 | * strategy. |
| 1238 | */ |
| 1239 | |
| 1240 | const computePosition = (reference, floating, options) => computePosition$1(reference, floating, { |
| 1241 | platform, |
| 1242 | ...options |
| 1243 | }); |
| 1244 | |
| 1245 | const dropdownCss = ":host{display:inline-block;--panel-height:75vh;--panel-width:11rem}.dropdown{position:relative}.dropdown.dropdown--open .dropdown__positioner{visibility:visible;opacity:1;transform:scale(1)}.dropdown__trigger{display:block;cursor:pointer;border-width:0;outline:none;background-color:unset}.dropdown--disabled,.dropdown--disabled .dropdown__trigger{cursor:not-allowed}.dropdown__positioner{position:absolute;right:0;width:100%;z-index:var(--sc-z-index-dropdown);opacity:0;visibility:hidden;transform:scale(0.9);min-width:var(--panel-width)}.dropdown__panel{transform-origin:top left;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:var(--panel-height);font-family:var(--sc-font-sans);font-size:var(--sc-font-size-medium);font-weight:var(--sc-font-weight-normal);color:var(--color);background-color:var(--sc-panel-background-color);border:solid 1px var(--sc-panel-border-color);border-radius:var(--sc-border-radius-medium);box-shadow:var(--sc-shadow-large);overflow:auto;overscroll-behavior:none;transition:var(--sc-transition-fast) opacity, var(--sc-transition-fast) transform;z-index:5}"; |
| 1246 | const ScDropdownStyle0 = dropdownCss; |
| 1247 | |
| 1248 | let itemIndex = 0; |
| 1249 | let arrowFlag = ''; |
| 1250 | const ScDropdown = class { |
| 1251 | constructor(hostRef) { |
| 1252 | registerInstance(this, hostRef); |
| 1253 | this.scShow = createEvent(this, "scShow", 7); |
| 1254 | this.scHide = createEvent(this, "scHide", 7); |
| 1255 | this.clickEl = undefined; |
| 1256 | this.disabled = undefined; |
| 1257 | this.open = false; |
| 1258 | this.position = undefined; |
| 1259 | this.placement = 'bottom-start'; |
| 1260 | this.distance = 10; |
| 1261 | this.skidding = 0; |
| 1262 | this.hoist = false; |
| 1263 | this.closeOnSelect = true; |
| 1264 | this.isVisible = undefined; |
| 1265 | } |
| 1266 | handleOpenChange() { |
| 1267 | this.open ? this.show() : this.hide(); |
| 1268 | } |
| 1269 | handleOutsideClick(evt) { |
| 1270 | const path = evt.composedPath(); |
| 1271 | if (!path.some(item => { |
| 1272 | return item === this.el; |
| 1273 | })) { |
| 1274 | this.open = false; |
| 1275 | } |
| 1276 | } |
| 1277 | startPositioner() { |
| 1278 | this.stopPositioner(); |
| 1279 | this.updatePositioner(); |
| 1280 | this.positionerCleanup = autoUpdate(this.trigger, this.positioner, this.updatePositioner.bind(this)); |
| 1281 | } |
| 1282 | updatePositioner() { |
| 1283 | if (!this.open || !this.trigger || !this.positioner) { |
| 1284 | return; |
| 1285 | } |
| 1286 | computePosition(this.trigger, this.positioner, { |
| 1287 | placement: this.placement, |
| 1288 | middleware: [ |
| 1289 | offset({ mainAxis: this.distance, crossAxis: this.skidding }), |
| 1290 | flip(), |
| 1291 | shift(), |
| 1292 | size({ |
| 1293 | apply: ({ availableWidth: width, availableHeight: height }) => { |
| 1294 | // Ensure the panel stays within the viewport when we have lots of menu items |
| 1295 | Object.assign(this.panel.style, { |
| 1296 | maxWidth: `${width}px`, |
| 1297 | maxHeight: `${height}px`, |
| 1298 | }); |
| 1299 | }, |
| 1300 | padding: 8, |
| 1301 | }), |
| 1302 | ], |
| 1303 | strategy: this.hoist ? 'fixed' : 'absolute', |
| 1304 | }).then(({ x, y, placement }) => { |
| 1305 | this.positioner.setAttribute('data-placement', placement); |
| 1306 | Object.assign(this.positioner.style, { |
| 1307 | position: this.hoist ? 'fixed' : 'absolute', |
| 1308 | left: `${x}px`, |
| 1309 | top: `${y}px`, |
| 1310 | right: 'auto', |
| 1311 | }); |
| 1312 | }); |
| 1313 | } |
| 1314 | stopPositioner() { |
| 1315 | if (this.positionerCleanup) { |
| 1316 | this.positionerCleanup(); |
| 1317 | this.positionerCleanup = undefined; |
| 1318 | this.positioner.removeAttribute('data-placement'); |
| 1319 | } |
| 1320 | } |
| 1321 | show() { |
| 1322 | speak(wp.i18n.__('Menu Selection Dropdown opened. Press Up/Down arrow to toggle between menu items.', 'surecart'), 'assertive'); |
| 1323 | this.scShow.emit(); |
| 1324 | // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher |
| 1325 | if (this.isVisible) { |
| 1326 | return; |
| 1327 | } |
| 1328 | this.isVisible = true; |
| 1329 | this.open = true; |
| 1330 | this.startPositioner(); |
| 1331 | this.panel.focus(); |
| 1332 | } |
| 1333 | hide() { |
| 1334 | speak(wp.i18n.__('Menu Selection Dropdown closed.', 'surecart'), 'assertive'); |
| 1335 | this.scHide.emit(); |
| 1336 | // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher |
| 1337 | if (!this.isVisible) { |
| 1338 | return; |
| 1339 | } |
| 1340 | this.stopPositioner(); |
| 1341 | this.isVisible = false; |
| 1342 | this.open = false; |
| 1343 | const slotted = this.el.shadowRoot.querySelector('slot[name="trigger"]'); |
| 1344 | const trigger = slotted.assignedElements({ flatten: true })[0]; |
| 1345 | trigger.focus(); |
| 1346 | } |
| 1347 | handleClick(e) { |
| 1348 | if (this.closeOnSelect) { |
| 1349 | const path = e.composedPath(); |
| 1350 | if (path.some(item => { |
| 1351 | return item.classList && item.classList.contains('menu-item'); |
| 1352 | })) { |
| 1353 | this.open = false; |
| 1354 | } |
| 1355 | } |
| 1356 | } |
| 1357 | componentWillLoad() { |
| 1358 | document.addEventListener('mousedown', evt => this.handleOutsideClick(evt)); |
| 1359 | } |
| 1360 | /* Get the slotted menu */ |
| 1361 | getMenu() { |
| 1362 | let slotted = this.el.shadowRoot.querySelector('slot'); |
| 1363 | return slotted.assignedNodes().find(node => { |
| 1364 | return node.nodeName === 'sc-menu'; |
| 1365 | }); |
| 1366 | } |
| 1367 | getItems() { |
| 1368 | return [...this.el.querySelectorAll('sc-menu-item')]; |
| 1369 | } |
| 1370 | handleHide() { |
| 1371 | this.open = false; |
| 1372 | itemIndex = 0; |
| 1373 | this.trigger.focus(); |
| 1374 | } |
| 1375 | handleKeyDown(event) { |
| 1376 | const items = this.getItems(); |
| 1377 | // Tabbing out of the control closes it |
| 1378 | if (event.key === 'Tab') { |
| 1379 | if (this.open) { |
| 1380 | this.handleHide(); |
| 1381 | } |
| 1382 | return; |
| 1383 | } |
| 1384 | // Up/down opens the menu |
| 1385 | if (['ArrowDown', 'ArrowUp'].includes(event.key)) { |
| 1386 | event.preventDefault(); |
| 1387 | event.stopImmediatePropagation(); |
| 1388 | // Show the menu if it's not already open |
| 1389 | if (!this.open) { |
| 1390 | this.open = true; |
| 1391 | } |
| 1392 | // Focus on a menu item |
| 1393 | // Focus on a menu item |
| 1394 | if (event.key === 'ArrowDown') { |
| 1395 | if (arrowFlag == 'up') { |
| 1396 | itemIndex = itemIndex + 2; |
| 1397 | } |
| 1398 | if (itemIndex > items.length - 1) { |
| 1399 | itemIndex = 0; |
| 1400 | } |
| 1401 | items[itemIndex].setFocus(); |
| 1402 | arrowFlag = 'down'; |
| 1403 | itemIndex++; |
| 1404 | return; |
| 1405 | } |
| 1406 | if (event.key === 'ArrowUp') { |
| 1407 | if (arrowFlag == 'down') { |
| 1408 | itemIndex = itemIndex - 2; |
| 1409 | } |
| 1410 | if (itemIndex < 0) { |
| 1411 | itemIndex = items.length - 1; |
| 1412 | } |
| 1413 | items[itemIndex].setFocus(); |
| 1414 | arrowFlag = 'up'; |
| 1415 | itemIndex--; |
| 1416 | return; |
| 1417 | } |
| 1418 | } |
| 1419 | // Close select dropdown on Esc/Escape key |
| 1420 | if (event.key === 'Escape') { |
| 1421 | if (this.open) { |
| 1422 | this.handleHide(); |
| 1423 | } |
| 1424 | return; |
| 1425 | } |
| 1426 | // Open select dropdown with Enter |
| 1427 | if (event.key === 'Enter') { |
| 1428 | if (this.open) { |
| 1429 | this.handleHide(); |
| 1430 | } |
| 1431 | else { |
| 1432 | event.stopImmediatePropagation(); |
| 1433 | event.preventDefault(); |
| 1434 | this.open = true; |
| 1435 | } |
| 1436 | } |
| 1437 | // don't open the menu when a CTRL/Command key is pressed |
| 1438 | if (event.ctrlKey || event.metaKey) { |
| 1439 | return; |
| 1440 | } |
| 1441 | } |
| 1442 | render() { |
| 1443 | return (h("div", { key: '1e7aca1ce79cc4a4c8971986cad5c6b8e01d0ed2', part: "base", class: { |
| 1444 | 'dropdown': true, |
| 1445 | 'dropdown--open': this.open, |
| 1446 | 'dropdown--disabled': this.disabled, |
| 1447 | } }, h("span", { key: 'a26f613ce09b4a7f8a6359000ec612b7bf44325e', part: "trigger", class: "dropdown__trigger", ref: el => (this.trigger = el), onClick: () => { |
| 1448 | if (this.disabled) |
| 1449 | return; |
| 1450 | if (this.open) { |
| 1451 | this.hide(); |
| 1452 | } |
| 1453 | else { |
| 1454 | setTimeout(() => { |
| 1455 | this.show(); |
| 1456 | }, 0); |
| 1457 | } |
| 1458 | }, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "true" }, h("slot", { key: '84ef48e1c9c8b85ff0ec205e5d8ed8689906dafc', name: "trigger" })), h("div", { key: '42301b117bbaaefb50acc37fb6b2e636db65833d', class: "dropdown__positioner", ref: el => (this.positioner = el) }, h("div", { key: 'e25303b88a027f9c8624550c71bca32535da9e73', part: "panel", class: { |
| 1459 | 'dropdown__panel': true, |
| 1460 | 'position--top-left': this.position === 'top-left', |
| 1461 | 'position--top-right': this.position === 'top-right', |
| 1462 | 'position--bottom-left': this.position === 'bottom-left', |
| 1463 | 'position--bottom-right': this.position === 'bottom-right', |
| 1464 | }, "aria-orientation": "vertical", tabindex: "-1", onClick: e => this.handleClick(e), ref: el => (this.panel = el) }, h("slot", { key: '105ea2bf6ed0dff40f12938997b1241076da8de0' }))))); |
| 1465 | } |
| 1466 | get el() { return getElement(this); } |
| 1467 | static get watchers() { return { |
| 1468 | "open": ["handleOpenChange"] |
| 1469 | }; } |
| 1470 | }; |
| 1471 | ScDropdown.style = ScDropdownStyle0; |
| 1472 | |
| 1473 | const scMenuCss = ":host{display:block}.menu{padding:var(--sc-spacing-x-small) 0}.menu:focus{outline:none}::slotted(sc-input){margin-top:-var(--sc-spacing-x-small)}::slotted(sc-divider){--spacing:var(--sc-spacing-x-small)}"; |
| 1474 | const ScMenuStyle0 = scMenuCss; |
| 1475 | |
| 1476 | const ScMenu = class { |
| 1477 | constructor(hostRef) { |
| 1478 | registerInstance(this, hostRef); |
| 1479 | this.scSelect = createEvent(this, "scSelect", 7); |
| 1480 | this.items = []; |
| 1481 | this.ariaLabel = undefined; |
| 1482 | } |
| 1483 | /** TODO: Click test */ |
| 1484 | handleClick(event) { |
| 1485 | const target = event.target; |
| 1486 | const item = target.closest('sc-menu-item'); |
| 1487 | if (item && !item.disabled) { |
| 1488 | this.scSelect.emit({ item }); |
| 1489 | } |
| 1490 | } |
| 1491 | /** TODO: Keydown Test */ |
| 1492 | handleKeyDown(event) { |
| 1493 | // Make a selection when pressing enter |
| 1494 | if (event.key === 'Enter') { |
| 1495 | const item = this.getCurrentItem(); |
| 1496 | event.preventDefault(); |
| 1497 | if (item) { |
| 1498 | this.scSelect.emit({ item }); |
| 1499 | } |
| 1500 | speak(wp.i18n.sprintf(wp.i18n.__('Menu %s selected', 'surecart'), item.textContent), 'assertive'); |
| 1501 | } |
| 1502 | // Prevent scrolling when space is pressed |
| 1503 | if (event.key === ' ') { |
| 1504 | event.preventDefault(); |
| 1505 | } |
| 1506 | // Move the selection when pressing down or up |
| 1507 | if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) { |
| 1508 | const selectedItem = this.getCurrentItem(); |
| 1509 | let index = selectedItem ? this.items.indexOf(selectedItem) : 0; |
| 1510 | if (this.items.length) { |
| 1511 | event.preventDefault(); |
| 1512 | if (event.key === 'ArrowDown') { |
| 1513 | index++; |
| 1514 | } |
| 1515 | else if (event.key === 'ArrowUp') { |
| 1516 | index--; |
| 1517 | } |
| 1518 | else if (event.key === 'Home') { |
| 1519 | index = 0; |
| 1520 | } |
| 1521 | else if (event.key === 'End') { |
| 1522 | index = this.items.length - 1; |
| 1523 | } |
| 1524 | if (index < 0) |
| 1525 | index = 0; |
| 1526 | if (index > this.items.length - 1) |
| 1527 | index = this.items.length - 1; |
| 1528 | this.setCurrentItem(this.items[index]); |
| 1529 | return; |
| 1530 | } |
| 1531 | } |
| 1532 | } |
| 1533 | /** Get the active item */ |
| 1534 | getCurrentItem() { |
| 1535 | return this.items.find(i => i.getAttribute('tabindex') === '0'); |
| 1536 | } |
| 1537 | /** |
| 1538 | * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and |
| 1539 | * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item. |
| 1540 | */ |
| 1541 | async setCurrentItem(item) { |
| 1542 | const activeItem = item.disabled ? this.items[0] : item; |
| 1543 | // Update tab indexes |
| 1544 | this.items.forEach(i => { |
| 1545 | i.setAttribute('tabindex', i === activeItem ? '0' : '-1'); |
| 1546 | }); |
| 1547 | } |
| 1548 | /** Sync slotted items with internal state */ |
| 1549 | syncItems() { |
| 1550 | const slottedElements = this.el.shadowRoot.querySelector('slot').assignedElements({ flatten: true }); |
| 1551 | this.items = slottedElements.filter(node => { |
| 1552 | return node.nodeName === 'sc-menu-item'; |
| 1553 | }); |
| 1554 | } |
| 1555 | /** Handle items change in slot */ |
| 1556 | handleSlotChange() { |
| 1557 | this.syncItems(); |
| 1558 | } |
| 1559 | render() { |
| 1560 | return (h("div", { key: '9ba9577b109f76589a4c3ce1212718278898a60d', part: "base", class: "menu", tabindex: "0", onKeyDown: e => this.handleKeyDown(e) }, h("slot", { key: 'c763698156f7f37b11b94863a28f0c389e21379d', onSlotchange: () => this.handleSlotChange() }))); |
| 1561 | } |
| 1562 | get el() { return getElement(this); } |
| 1563 | }; |
| 1564 | ScMenu.style = ScMenuStyle0; |
| 1565 | |
| 1566 | const scMenuItemCss = ":host{display:block}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--sc-font-sans);font-size:var(--sc-font-size-medium);font-weight:var(--sc-font-weight-normal);line-height:var(--sc-menu-item-line-height, var(--sc-line-height-normal));letter-spacing:var(--sc-letter-spacing-normal);text-align:left;color:var(--sc-menu-item-color, var(--sc-color-gray-700));padding:var(--sc-spacing-xx-small) var(--sc-spacing-x-large);transition:var(--sc-input-transition, var(--sc-transition-medium)) fill, var(--sc-input-transition, var(--sc-transition-medium)) background-color;user-select:none;white-space:var(--sc-menu-item-white-space, nowrap);cursor:pointer;text-decoration:none}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--sc-menu-item-background-focused, var(--sc-color-primary-500));color:var(--sc-color-white)}.menu-item.menu-item--disabled{outline:none;color:var(--sc-color-gray-400);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(*){display:inline-flex;margin-right:var(--sc-spacing-small)}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(*){margin-left:var(--sc-spacing-x-small);text-align:right}.menu-item .menu-item__check{display:flex;position:absolute;left:0.5em;top:0.6em;visibility:hidden;align-items:center;font-size:inherit}.menu-item--checked .menu-item__check{visibility:visible}.menu-item--is-rtl.menu-item{text-align:right}.menu-item--is-rtl.menu-item .menu-item__check{left:auto;right:0.5em}"; |
| 1567 | const ScMenuItemStyle0 = scMenuItemCss; |
| 1568 | |
| 1569 | const ScMenuItem = class { |
| 1570 | constructor(hostRef) { |
| 1571 | registerInstance(this, hostRef); |
| 1572 | this.hasFocus = false; |
| 1573 | this.href = undefined; |
| 1574 | this.target = undefined; |
| 1575 | this.checked = false; |
| 1576 | this.value = ''; |
| 1577 | this.disabled = false; |
| 1578 | } |
| 1579 | /** Sets focus on the button. */ |
| 1580 | async setFocus(options) { |
| 1581 | this.menuItem.focus(options); |
| 1582 | } |
| 1583 | /** Removes focus from the button. */ |
| 1584 | async setBlur() { |
| 1585 | this.menuItem.blur(); |
| 1586 | } |
| 1587 | handleBlur() { |
| 1588 | this.hasFocus = false; |
| 1589 | } |
| 1590 | handleFocus() { |
| 1591 | this.hasFocus = true; |
| 1592 | } |
| 1593 | render() { |
| 1594 | const Tag = this.href ? 'a' : 'div'; |
| 1595 | return (h(Tag, { key: '20ea51e8e6f0da05e485dc65299b34768a75acca', ref: el => (this.menuItem = el), part: "base", class: { |
| 1596 | 'menu-item': true, |
| 1597 | 'menu-item--checked': this.checked, |
| 1598 | 'menu-item--disabled': this.disabled, |
| 1599 | 'menu-item--focused': this.hasFocus, |
| 1600 | 'menu-item--is-rtl': isRtl(), |
| 1601 | }, href: this.href, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabindex: !this.disabled ? '0' : undefined, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), onMouseEnter: () => this.handleFocus(), onMouseLeave: () => this.handleBlur(), onKeyDown: e => { |
| 1602 | if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') { |
| 1603 | this.menuItem.click(); |
| 1604 | } |
| 1605 | }, "aria-label": this.el.innerText, target: this.target }, h("span", { key: 'd4e58e4c3e018c2ac486eef83483a49cd1ea6be8', part: "checked-icon", class: "menu-item__check" }, h("svg", { key: 'f85b93260e2844121bfe69153ac11a431a3e292d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-check", viewBox: "0 0 16 16" }, h("path", { key: 'c38a1e85048add5011eb1988217b33615d93d58a', d: "M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" }))), h("span", { key: '331a165555ba8ea443ed16080e68e51003a1b417', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '2ee600e67959428bf202e37160de05e7ea6d321c', name: "prefix" })), h("span", { key: '9c28f05fca86a36020e583ade87d8bd33b6ccd86', part: "label", class: "menu-item__label" }, h("slot", { key: '1c7366ac2ec2a6a7846d7346447215001d1dc506' })), h("span", { key: '3bad55c0f24bb042901e7c648ca6cc572e0ab219', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '76faea3a3d36f0b8f4df949d6eb33d0936468b6c', name: "suffix" })))); |
| 1606 | } |
| 1607 | get el() { return getElement(this); } |
| 1608 | }; |
| 1609 | ScMenuItem.style = ScMenuItemStyle0; |
| 1610 | |
| 1611 | export { ScDropdown as sc_dropdown, ScMenu as sc_menu, ScMenuItem as sc_menu_item }; |
| 1612 | |
| 1613 | //# sourceMappingURL=sc-dropdown_3.entry.js.map |