react-hyper-modal
Advanced tools
Comparing version 1.2.6 to 1.2.7
@@ -1,4 +0,2 @@ | ||
| import { createElement as createElement$1, useState, forwardRef, useRef, Fragment, cloneElement, Children, useEffect, useCallback } from 'react'; | ||
| import { createPortal } from 'react-dom'; | ||
| import{createElement as e,useState as n,forwardRef as t,useRef as r,Fragment as o,cloneElement as i,Children as a,useEffect as l,useCallback as c}from"react";import{createPortal as s}from"react-dom"; | ||
| /*! ***************************************************************************** | ||
@@ -17,945 +15,3 @@ Copyright (c) Microsoft Corporation. All rights reserved. | ||
| and limitations under the License. | ||
| ***************************************************************************** */ | ||
| var __assign = function() { | ||
| __assign = Object.assign || function __assign(t) { | ||
| for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
| s = arguments[i]; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; | ||
| } | ||
| return t; | ||
| }; | ||
| return __assign.apply(this, arguments); | ||
| }; | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
| t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
| for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
| t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| var zeroRightClassName = 'right-scroll-bar-position'; | ||
| var fullWidthClassName = 'width-before-scroll-bar'; | ||
| var noScrollbarsClassName = 'with-scroll-bars-hidden'; | ||
| function ItoI(a) { | ||
| return a; | ||
| } | ||
| function innerCreateMedium(defaults, middleware) { | ||
| if (middleware === void 0) { middleware = ItoI; } | ||
| var buffer = []; | ||
| var assigned = false; | ||
| var medium = { | ||
| read: function () { | ||
| if (assigned) { | ||
| throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.'); | ||
| } | ||
| if (buffer.length) { | ||
| return buffer[buffer.length - 1]; | ||
| } | ||
| return defaults; | ||
| }, | ||
| useMedium: function (data) { | ||
| var item = middleware(data, assigned); | ||
| buffer.push(item); | ||
| return function () { | ||
| buffer = buffer.filter(function (x) { return x !== item; }); | ||
| }; | ||
| }, | ||
| assignSyncMedium: function (cb) { | ||
| assigned = true; | ||
| while (buffer.length) { | ||
| var cbs = buffer; | ||
| buffer = []; | ||
| cbs.forEach(cb); | ||
| } | ||
| buffer = { | ||
| push: function (x) { return cb(x); }, | ||
| filter: function () { return buffer; }, | ||
| }; | ||
| }, | ||
| assignMedium: function (cb) { | ||
| assigned = true; | ||
| var pendingQueue = []; | ||
| if (buffer.length) { | ||
| var cbs = buffer; | ||
| buffer = []; | ||
| cbs.forEach(cb); | ||
| pendingQueue = buffer; | ||
| } | ||
| var executeQueue = function () { | ||
| var cbs = pendingQueue; | ||
| pendingQueue = []; | ||
| cbs.forEach(cb); | ||
| }; | ||
| var cycle = function () { return Promise.resolve().then(executeQueue); }; | ||
| cycle(); | ||
| buffer = { | ||
| push: function (x) { | ||
| pendingQueue.push(x); | ||
| cycle(); | ||
| }, | ||
| filter: function (filter) { | ||
| pendingQueue = pendingQueue.filter(filter); | ||
| return buffer; | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| return medium; | ||
| } | ||
| function createSidecarMedium(options) { | ||
| if (options === void 0) { options = {}; } | ||
| var medium = innerCreateMedium(null); | ||
| medium.options = __assign({ async: true, ssr: false }, options); | ||
| return medium; | ||
| } | ||
| var SideCar = function (_a) { | ||
| var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]); | ||
| if (!sideCar) { | ||
| throw new Error('Sidecar: please provide `sideCar` property to import the right car'); | ||
| } | ||
| var Target = sideCar.read(); | ||
| if (!Target) { | ||
| throw new Error('Sidecar medium not found'); | ||
| } | ||
| return createElement$1(Target, __assign({}, rest)); | ||
| }; | ||
| SideCar.isSideCarExport = true; | ||
| function exportSidecar(medium, exported) { | ||
| medium.useMedium(exported); | ||
| return SideCar; | ||
| } | ||
| var effectCar = createSidecarMedium(); | ||
| function assignRef(ref, value) { | ||
| if (typeof ref === 'function') { | ||
| ref(value); | ||
| } | ||
| else if (ref) { | ||
| ref.current = value; | ||
| } | ||
| return ref; | ||
| } | ||
| function useCallbackRef(initialValue, callback) { | ||
| var ref = useState(function () { return ({ | ||
| // value | ||
| value: initialValue, | ||
| // last callback | ||
| callback: callback, | ||
| // "memoized" public interface | ||
| facade: { | ||
| get current() { | ||
| return ref.value; | ||
| }, | ||
| set current(value) { | ||
| var last = ref.value; | ||
| if (last !== value) { | ||
| ref.value = value; | ||
| ref.callback(value, last); | ||
| } | ||
| } | ||
| } | ||
| }); })[0]; | ||
| // update callback | ||
| ref.callback = callback; | ||
| return ref.facade; | ||
| } | ||
| function useMergeRefs(refs, defaultValue) { | ||
| return useCallbackRef(defaultValue, function (newValue) { | ||
| return refs.forEach(function (ref) { return assignRef(ref, newValue); }); | ||
| }); | ||
| } | ||
| var nothing = function () { | ||
| return; | ||
| }; | ||
| var RemoveScroll = forwardRef(function (props, parentRef) { | ||
| var ref = useRef(null); | ||
| var _a = useState({ | ||
| onScrollCapture: nothing, | ||
| onWheelCapture: nothing, | ||
| onTouchMoveCapture: nothing | ||
| }), callbacks = _a[0], setCallbacks = _a[1]; | ||
| var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]); | ||
| var SideCar = sideCar; | ||
| var containerProps = __assign({ ref: useMergeRefs([ | ||
| ref, | ||
| parentRef | ||
| ]) }, rest, callbacks); | ||
| return (createElement$1(Fragment, null, | ||
| enabled && (createElement$1(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })), | ||
| forwardProps ? (cloneElement(Children.only(children), containerProps)) : (createElement$1("div", __assign({}, containerProps, { className: className }), children)))); | ||
| }); | ||
| RemoveScroll.defaultProps = { | ||
| enabled: true, | ||
| removeScrollBar: true, | ||
| inert: false | ||
| }; | ||
| RemoveScroll.classNames = { | ||
| fullWidth: fullWidthClassName, | ||
| zeroRight: zeroRightClassName | ||
| }; | ||
| var getNonce = function () { | ||
| if (typeof __webpack_nonce__ !== 'undefined') { | ||
| return __webpack_nonce__; | ||
| } | ||
| return undefined; | ||
| }; | ||
| function makeStyleTag() { | ||
| if (!document) | ||
| return null; | ||
| var tag = document.createElement('style'); | ||
| tag.type = 'text/css'; | ||
| var nonce = getNonce(); | ||
| if (nonce) { | ||
| tag.setAttribute('nonce', nonce); | ||
| } | ||
| return tag; | ||
| } | ||
| function injectStyles(tag, css) { | ||
| if (tag.styleSheet) { | ||
| tag.styleSheet.cssText = css; | ||
| } | ||
| else { | ||
| tag.appendChild(document.createTextNode(css)); | ||
| } | ||
| } | ||
| function insertStyleTag(tag) { | ||
| var head = document.head || document.getElementsByTagName('head')[0]; | ||
| head.appendChild(tag); | ||
| } | ||
| var stylesheetSingleton = function () { | ||
| var counter = 0; | ||
| var stylesheet = null; | ||
| return { | ||
| add: function (style) { | ||
| if (counter == 0) { | ||
| if (stylesheet = makeStyleTag()) { | ||
| injectStyles(stylesheet, style); | ||
| insertStyleTag(stylesheet); | ||
| } | ||
| } | ||
| counter++; | ||
| }, | ||
| remove: function () { | ||
| counter--; | ||
| if (!counter && stylesheet) { | ||
| stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet); | ||
| stylesheet = null; | ||
| } | ||
| } | ||
| }; | ||
| }; | ||
| var styleHookSingleton = function () { | ||
| var sheet = stylesheetSingleton(); | ||
| return function (styles) { | ||
| useEffect(function () { | ||
| sheet.add(styles); | ||
| return function () { | ||
| sheet.remove(); | ||
| }; | ||
| }, []); | ||
| }; | ||
| }; | ||
| var styleSingleton = function () { | ||
| var useStyle = styleHookSingleton(); | ||
| var Sheet = function (_a) { | ||
| var styles = _a.styles; | ||
| useStyle(styles); | ||
| return null; | ||
| }; | ||
| return Sheet; | ||
| }; | ||
| var zeroGap = { | ||
| left: 0, | ||
| top: 0, | ||
| right: 0, | ||
| gap: 0, | ||
| }; | ||
| var parse = function (x) { return parseInt(x || '', 10) || 0; }; | ||
| var getOffset = function (gapMode) { | ||
| var cs = window.getComputedStyle(document.body); | ||
| var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft']; | ||
| var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop']; | ||
| var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight']; | ||
| return [ | ||
| parse(left), | ||
| parse(top), | ||
| parse(right), | ||
| ]; | ||
| }; | ||
| var getGapWidth = function (gapMode) { | ||
| if (gapMode === void 0) { gapMode = 'margin'; } | ||
| if (typeof window === 'undefined') { | ||
| return zeroGap; | ||
| } | ||
| var offsets = getOffset(gapMode); | ||
| var documentWidth = document.documentElement.clientWidth; | ||
| var windowWidth = window.innerWidth; | ||
| return { | ||
| left: offsets[0], | ||
| top: offsets[1], | ||
| right: offsets[2], | ||
| gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]), | ||
| }; | ||
| }; | ||
| var Style = styleSingleton(); | ||
| var getStyles = function (_a, allowRelative, gapMode, important) { | ||
| var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap; | ||
| if (gapMode === void 0) { gapMode = 'margin'; } | ||
| return "\n ." + noScrollbarsClassName + " {\n overflow: hidden " + important + ";\n padding-right: " + gap + "px " + important + ";\n }\n body {\n overflow: hidden " + important + ";\n " + [ | ||
| allowRelative && "position: relative " + important + ";", | ||
| gapMode === 'margin' && "\n padding-left: " + left + "px;\n padding-top: " + top + "px;\n padding-right: " + right + "px;\n margin-left:0;\n margin-top:0;\n margin-right: " + gap + "px " + important + ";\n ", | ||
| gapMode === 'padding' && "padding-right: " + gap + "px " + important + ";", | ||
| ].filter(Boolean).join('') + "\n }\n \n ." + zeroRightClassName + " {\n right: " + gap + "px " + important + ";\n }\n \n ." + fullWidthClassName + " {\n margin-right: " + gap + "px " + important + ";\n }\n \n ." + zeroRightClassName + " ." + zeroRightClassName + " {\n right: 0 " + important + ";\n }\n \n ." + fullWidthClassName + " ." + fullWidthClassName + " {\n margin-right: 0 " + important + ";\n }\n"; | ||
| }; | ||
| var RemoveScrollBar = function (props) { | ||
| var _a = useState(getGapWidth(props.gapMode)), gap = _a[0], setGap = _a[1]; | ||
| useEffect(function () { | ||
| setGap(getGapWidth(props.gapMode)); | ||
| }, [props.gapMode]); | ||
| var noRelative = props.noRelative, noImportant = props.noImportant, _b = props.gapMode, gapMode = _b === void 0 ? 'margin' : _b; | ||
| return createElement$1(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') }); | ||
| }; | ||
| var elementCouldBeVScrolled = function (node) { | ||
| var styles = window.getComputedStyle(node); | ||
| return (styles.overflowY !== 'hidden' && // not-not-scrollable | ||
| !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible') // scrollable | ||
| ); | ||
| }; | ||
| var elementCouldBeHScrolled = function (node) { | ||
| var styles = window.getComputedStyle(node); | ||
| return (styles.overflowX !== 'hidden' && // not-not-scrollable | ||
| !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable | ||
| ); | ||
| }; | ||
| var locationCouldBeScrolled = function (axis, node) { | ||
| var current = node; | ||
| do { | ||
| var isScrollable = elementCouldBeScrolled(axis, current); | ||
| if (isScrollable) { | ||
| var _a = getScrollVariables(axis, current), s = _a[1], d = _a[2]; | ||
| if (s > d) { | ||
| return true; | ||
| } | ||
| } | ||
| current = current.parentNode; | ||
| } while (current && current !== document.body); | ||
| return false; | ||
| }; | ||
| var getVScrollVariables = function (_a) { | ||
| var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight; | ||
| return [scrollTop, scrollHeight, clientHeight]; | ||
| }; | ||
| var getHScrollVariables = function (_a) { | ||
| var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth; | ||
| return [scrollLeft, scrollWidth, clientWidth]; | ||
| }; | ||
| var elementCouldBeScrolled = function (axis, node) { | ||
| return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node); | ||
| }; | ||
| var getScrollVariables = function (axis, node) { | ||
| return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node); | ||
| }; | ||
| var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) { | ||
| var delta = sourceDelta; | ||
| // find scrollable target | ||
| var target = event.target; | ||
| var targetInLock = endTarget.contains(target); | ||
| var shouldCancelScroll = false; | ||
| var isDeltaPositive = delta > 0; | ||
| var availableScroll = 0; | ||
| var availableScrollTop = 0; | ||
| do { | ||
| var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2]; | ||
| var elementScroll = scroll_1 - capacity - position; | ||
| if (position || elementScroll) { | ||
| if (elementCouldBeScrolled(axis, target)) { | ||
| availableScroll += elementScroll; | ||
| availableScrollTop += position; | ||
| } | ||
| } | ||
| target = target.parentNode; | ||
| } while ( | ||
| // portaled content | ||
| (!targetInLock && target !== document.body) || | ||
| // self content | ||
| (targetInLock && (endTarget.contains(target) || endTarget === target))); | ||
| if (isDeltaPositive && | ||
| ((noOverscroll && availableScroll === 0) || | ||
| (!noOverscroll && delta > availableScroll))) { | ||
| shouldCancelScroll = true; | ||
| } | ||
| else if (!isDeltaPositive && | ||
| ((noOverscroll && availableScrollTop === 0) || | ||
| (!noOverscroll && -delta > availableScrollTop))) { | ||
| shouldCancelScroll = true; | ||
| } | ||
| return shouldCancelScroll; | ||
| }; | ||
| var passiveSupported = false; | ||
| if (typeof window !== 'undefined') { | ||
| try { | ||
| var options = Object.defineProperty({}, 'passive', { | ||
| get: function () { | ||
| passiveSupported = true; | ||
| return true; | ||
| } | ||
| }); | ||
| window.addEventListener('test', options, options); | ||
| window.removeEventListener('test', options, options); | ||
| } | ||
| catch (err) { | ||
| passiveSupported = false; | ||
| } | ||
| } | ||
| var nonPassive = passiveSupported ? { passive: false } : false; | ||
| var getTouchXY = function (event) { | ||
| return 'changedTouches' in event | ||
| ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] | ||
| : [0, 0]; | ||
| }; | ||
| var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; }; | ||
| var extractRef = function (ref) { | ||
| return ref && 'current' in ref ? ref.current : ref; | ||
| }; | ||
| var deltaCompare = function (x, y) { | ||
| return x[0] === y[0] && x[1] === y[1]; | ||
| }; | ||
| var generateStyle = function (id) { return "\n .block-interactivity-" + id + " {pointer-events: none;}\n .allow-interactivity-" + id + " {pointer-events: all;}\n"; }; | ||
| var idCounter = 0; | ||
| var lockStack = []; | ||
| function RemoveScrollSideCar(props) { | ||
| var shouldPreventQueue = useRef([]); | ||
| var touchStartRef = useRef([0, 0]); | ||
| var activeAxis = useRef(); | ||
| var id = useState(idCounter++)[0]; | ||
| var Style = useState(function () { return styleSingleton(); })[0]; | ||
| var lastProps = useRef(props); | ||
| useEffect(function () { | ||
| lastProps.current = props; | ||
| }, [props]); | ||
| useEffect(function () { | ||
| if (props.inert) { | ||
| document.body.classList.add("block-interactivity-" + id); | ||
| var allow_1 = [ | ||
| props.lockRef.current | ||
| ].concat((props.shards || []).map(extractRef)).filter(Boolean); | ||
| allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-" + id); }); | ||
| return function () { | ||
| document.body.classList.remove("block-interactivity-" + id); | ||
| allow_1.forEach(function (el) { | ||
| return el.classList.remove("allow-interactivity-" + id); | ||
| }); | ||
| }; | ||
| } | ||
| return; | ||
| }, [props.inert, props.lockRef.current, props.shards]); | ||
| var shouldCancelEvent = useCallback(function (event, parent) { | ||
| if ('touches' in event && event.touches.length === 2) { | ||
| return !lastProps.current.allowPinchZoom; | ||
| } | ||
| var touch = getTouchXY(event); | ||
| var touchStart = touchStartRef.current; | ||
| var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0]; | ||
| var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1]; | ||
| var currentAxis; | ||
| var target = event.target; | ||
| var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v'; | ||
| var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target); | ||
| if (!canBeScrolledInMainDirection) { | ||
| return true; | ||
| } | ||
| if (canBeScrolledInMainDirection) { | ||
| currentAxis = moveDirection; | ||
| } | ||
| else { | ||
| currentAxis = moveDirection === 'v' ? 'h' : 'v'; | ||
| canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target); | ||
| // other axis might be not scrollable | ||
| } | ||
| if (!canBeScrolledInMainDirection) { | ||
| return false; | ||
| } | ||
| if (!activeAxis.current && | ||
| 'changedTouches' in event && | ||
| (deltaX || deltaY)) { | ||
| activeAxis.current = currentAxis; | ||
| } | ||
| if (!currentAxis) { | ||
| return true; | ||
| } | ||
| var cancelingAxis = activeAxis.current || currentAxis; | ||
| return handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true); | ||
| }, []); | ||
| var shouldPrevent = useCallback(function (_event) { | ||
| var event = _event; | ||
| if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) { | ||
| // not the last active | ||
| return; | ||
| } | ||
| var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event); | ||
| var sourceEvent = shouldPreventQueue.current.filter(function (e) { | ||
| return e.name === event.type && | ||
| e.target === event.target && | ||
| deltaCompare(e.delta, delta); | ||
| })[0]; | ||
| // self event, and should be canceled | ||
| if (sourceEvent && sourceEvent.should) { | ||
| event.preventDefault(); | ||
| return; | ||
| } | ||
| // outside or shard event | ||
| if (!sourceEvent) { | ||
| var shardNodes = (lastProps.current.shards || []) | ||
| .map(extractRef) | ||
| .filter(Boolean) | ||
| .filter(function (node) { return node.contains(event.target); }); | ||
| var shouldStop = shardNodes.length > 0 | ||
| ? shouldCancelEvent(event, shardNodes[0]) | ||
| : !lastProps.current.noIsolation; | ||
| if (shouldStop) { | ||
| event.preventDefault(); | ||
| } | ||
| } | ||
| }, []); | ||
| var shouldCancel = useCallback(function (name, delta, target, should) { | ||
| var event = { name: name, delta: delta, target: target, should: should }; | ||
| shouldPreventQueue.current.push(event); | ||
| setTimeout(function () { | ||
| shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; }); | ||
| }, 1); | ||
| }, []); | ||
| var scrollTouchStart = useCallback(function (event) { | ||
| touchStartRef.current = getTouchXY(event); | ||
| activeAxis.current = undefined; | ||
| }, []); | ||
| var scrollWheel = useCallback(function (event) { | ||
| shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current)); | ||
| }, []); | ||
| var scrollTouchMove = useCallback(function (event) { | ||
| shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current)); | ||
| }, []); | ||
| useEffect(function () { | ||
| lockStack.push(Style); | ||
| props.setCallbacks({ | ||
| onScrollCapture: scrollWheel, | ||
| onWheelCapture: scrollWheel, | ||
| onTouchMoveCapture: scrollTouchMove | ||
| }); | ||
| document.addEventListener('wheel', shouldPrevent, nonPassive); | ||
| document.addEventListener('touchmove', shouldPrevent, nonPassive); | ||
| document.addEventListener('touchstart', scrollTouchStart, nonPassive); | ||
| return function () { | ||
| lockStack = lockStack.filter(function (inst) { return inst !== Style; }); | ||
| document.removeEventListener('wheel', shouldPrevent, nonPassive); | ||
| document.removeEventListener('touchmove', shouldPrevent, nonPassive); | ||
| document.removeEventListener('touchstart', scrollTouchStart, nonPassive); | ||
| }; | ||
| }, []); | ||
| var removeScrollBar = props.removeScrollBar, inert = props.inert; | ||
| return (createElement$1(Fragment, null, | ||
| inert ? createElement$1(Style, { styles: generateStyle(id) }) : null, | ||
| removeScrollBar ? createElement$1(RemoveScrollBar, { gapMode: "margin" }) : null)); | ||
| } | ||
| var SideCar$1 = exportSidecar(effectCar, RemoveScrollSideCar); | ||
| var ReactRemoveScroll = forwardRef(function (props, ref) { return (createElement$1(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar$1 }))); }); | ||
| ReactRemoveScroll.classNames = RemoveScroll.classNames; | ||
| function styleInject(css, ref) { | ||
| if ( ref === void 0 ) ref = {}; | ||
| var insertAt = ref.insertAt; | ||
| if (!css || typeof document === 'undefined') { return; } | ||
| var head = document.head || document.getElementsByTagName('head')[0]; | ||
| var style = document.createElement('style'); | ||
| style.type = 'text/css'; | ||
| if (insertAt === 'top') { | ||
| if (head.firstChild) { | ||
| head.insertBefore(style, head.firstChild); | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| if (style.styleSheet) { | ||
| style.styleSheet.cssText = css; | ||
| } else { | ||
| style.appendChild(document.createTextNode(css)); | ||
| } | ||
| } | ||
| var css_248z = ".style__custom-button___3Ke9X {\n height: 60px;\n min-width: 200px;\n font-size: 1.2em;\n padding: 0 20px;\n border: 0;\n cursor: pointer;\n text-transform: uppercase;\n background-color: rgba(65, 70, 90, 0.5);\n box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.4);\n transition: all 0.2s ease; }\n .style__custom-button___3Ke9X:hover {\n background-color: #41465a;\n color: #e7e8ee;\n box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.6); }\n"; | ||
| var styles = {"custom-button":"style__custom-button___3Ke9X"}; | ||
| styleInject(css_248z); | ||
| var DefaultButton = function (_a) { | ||
| var onClick = _a.onClick; | ||
| return (createElement$1("button", { type: "button", className: styles.customButton, onClick: onClick }, "open modal")); | ||
| }; | ||
| var css_248z$1 = ".style__hyper-close-icon___3YbbD {\n display: block;\n background-image: url(\"https://api.iconify.design/iwwa:close.svg\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n width: 100%;\n height: 100%; }\n"; | ||
| var styles$1 = {"hyper-close-icon":"style__hyper-close-icon___3YbbD"}; | ||
| styleInject(css_248z$1); | ||
| var DefaultCloseIcon = function () { return (createElement$1("i", { className: styles$1.hyperCloseIcon })); }; | ||
| var css_248z$2 = ".style__hyper-modal-default-content___DJFCj {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n color: #282c34;\n overflow: auto; }\n .style__hyper-modal-default-content___DJFCj .style__title___R9lS5 {\n font-size: 30px;\n color: #282c34; }\n .style__hyper-modal-default-content___DJFCj .style__description___2Wy5W {\n font-size: 24px; }\n .style__hyper-modal-default-content___DJFCj button {\n width: 200px;\n height: 50px;\n font-size: 18px;\n font-weight: bold;\n background-color: white;\n color: #282c34;\n border: 1px solid #282c34;\n text-transform: uppercase;\n transition: all 0.2s ease;\n cursor: pointer; }\n .style__hyper-modal-default-content___DJFCj button:hover {\n background-color: #282c34;\n color: white; }\n"; | ||
| var styles$2 = {"hyper-modal-default-content":"style__hyper-modal-default-content___DJFCj","title":"style__title___R9lS5","description":"style__description___2Wy5W"}; | ||
| styleInject(css_248z$2); | ||
| var DefaultModalContent = function (props) { | ||
| var ariaEnabled = props.ariaEnabled, ariaProps = props.ariaProps, handleClose = props.handleClose; | ||
| var labelId = ariaEnabled && ariaProps | ||
| ? ariaProps['aria-labelledby'] | ||
| : undefined; | ||
| var descriptionId = ariaEnabled && ariaProps | ||
| ? ariaProps['aria-describedby'] | ||
| : undefined; | ||
| return (createElement$1("div", { className: styles$2.hyperModalDefaultContent }, | ||
| createElement$1("div", { className: styles$2.title, id: labelId }, "Hyper modal"), | ||
| createElement$1("div", { className: styles$2.description, id: descriptionId }, "Fully customizable and accessible modal"), | ||
| createElement$1("button", { type: "button", onClick: handleClose }, "Close modal"))); | ||
| }; | ||
| var defaultProps = { | ||
| ariaEnabled: true, | ||
| ariaProps: { | ||
| 'aria-describedby': 'hyper-modal-description', | ||
| 'aria-labelledby': 'hyper-modal-title', | ||
| role: 'dialog', | ||
| }, | ||
| disableScroll: true, | ||
| childrenMode: true, | ||
| closeDebounceTimeout: 0, | ||
| closeIconPosition: { | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }, | ||
| closeOnCloseIconClick: true, | ||
| closeOnDimmerClick: true, | ||
| closeOnEscClick: true, | ||
| dimmerEnabled: true, | ||
| isFullscreen: false, | ||
| portalMode: false, | ||
| position: { | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| stackable: false, | ||
| stackableIndex: 0, | ||
| stackContentSettings: { | ||
| widthRatio: 4, | ||
| topOffsetRatio: 2, | ||
| transition: 'all 0.3s ease', | ||
| opacityRatio: 0.2, | ||
| } | ||
| }; | ||
| var buildContentStyle = function (position) { | ||
| var defaultStyles = __assign({ display: 'flex' }, defaultProps.position); | ||
| if (position) { | ||
| return __assign(__assign({}, defaultStyles), position); | ||
| } | ||
| return defaultStyles; | ||
| }; | ||
| var convertObjectToString = function (classes) { | ||
| if (!classes) { | ||
| return ''; | ||
| } | ||
| return Object | ||
| .keys(classes) | ||
| .filter(function (key) { return !!classes[key]; }) | ||
| .reduce(function (classString, item) { return (classString | ||
| ? "" + classString + (item ? " " + item : '') | ||
| : "" + item); }, ''); | ||
| }; | ||
| var classnames = function () { | ||
| var classes = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| classes[_i] = arguments[_i]; | ||
| } | ||
| if (classes[0] && typeof classes[0] === 'string') { | ||
| return classes.join(' '); | ||
| } | ||
| return convertObjectToString(classes[0]); | ||
| }; | ||
| var createElement = function (className) { | ||
| var currentNode = document.getElementById('hyper-modal-portal-id'); | ||
| if (!currentNode) { | ||
| currentNode = document.createElement('div'); | ||
| currentNode.setAttribute('id', 'hyper-modal-portal-id'); | ||
| document.body.appendChild(currentNode); | ||
| } | ||
| if (className && !currentNode.classList.contains(className)) { | ||
| currentNode.classList.add(className); | ||
| } | ||
| return currentNode; | ||
| }; | ||
| var defferCall = function (func, timeout, args) { | ||
| if (timeout === void 0) { timeout = 500; } | ||
| if (args === void 0) { args = {}; } | ||
| return new Promise(function (resolve) { | ||
| setTimeout(function () { | ||
| func(args); | ||
| resolve(); | ||
| }, timeout); | ||
| }); | ||
| }; | ||
| var css_248z$3 = ".style__stack-wrapper___2WYMj {\n position: relative;\n width: 60%;\n height: 60%;\n display: flex;\n justify-content: center; }\n\n.style__hyper-modal-content-wrapper___gGCZb {\n position: absolute;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n z-index: 5;\n border-radius: 10px;\n overflow: auto; }\n .style__hyper-modal-content-wrapper___gGCZb.style__fullscreen___3hAeZ {\n width: 100%;\n height: 100%; }\n .style__hyper-modal-content-wrapper___gGCZb .style__hyper-close-icon-wrapper___1dQPm {\n position: absolute;\n display: block;\n cursor: pointer;\n width: 40px;\n height: 40px;\n top: 20px;\n right: 20px;\n transition: all 0.1s ease; }\n .style__hyper-modal-content-wrapper___gGCZb .style__hyper-close-icon-wrapper___1dQPm:hover {\n transform: rotate(90deg); }\n"; | ||
| var styles$3 = {"stack-wrapper":"style__stack-wrapper___2WYMj","hyper-modal-content-wrapper":"style__hyper-modal-content-wrapper___gGCZb","fullscreen":"style__fullscreen___3hAeZ","hyper-close-icon-wrapper":"style__hyper-close-icon-wrapper___1dQPm"}; | ||
| styleInject(css_248z$3); | ||
| var ModalStack = function (_a) { | ||
| var children = _a.children, classes = _a.classes, closeIcon = _a.closeIcon, getProps = _a.getProps, handleClose = _a.handleClose, isFullscreen = _a.isFullscreen, modalContentRef = _a.modalContentRef, _b = _a.stackableIndex, stackableIndex = _b === void 0 ? 0 : _b, props = __rest(_a, ["children", "classes", "closeIcon", "getProps", "handleClose", "isFullscreen", "modalContentRef", "stackableIndex"]); | ||
| return (createElement$1("div", __assign({}, props, { className: styles$3.stackWrapper }), Children.toArray(children).slice(0, stackableIndex + 1).map(function (child, index, array) { | ||
| var _a; | ||
| return (createElement$1("div", __assign({ key: "content-" + index, "data-type": "hyper-modal-content" }, getProps(index, child.props, array.length), { className: classnames((_a = {}, | ||
| _a[styles$3.hyperModalContentWrapper] = true, | ||
| _a.fullscreen = isFullscreen || false, | ||
| _a[(classes && classes.contentClassName) || ''] = true, | ||
| _a)), ref: modalContentRef }), | ||
| child, | ||
| closeIcon)); | ||
| }))); | ||
| }; | ||
| var css_248z$4 = ".style__hyper-modal-wrapper___3sRTj {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n visibility: hidden;\n opacity: 0;\n transition: all 0.3s ease; }\n .style__hyper-modal-wrapper___3sRTj.style__visible___uofxI {\n visibility: visible;\n opacity: 1; }\n .style__hyper-modal-wrapper___3sRTj .style__hyper-modal-content-wrapper___1-Dl8 {\n position: relative;\n background-color: #ffffff;\n width: 60%;\n height: 60%;\n z-index: 5;\n border-radius: 10px;\n overflow: auto; }\n .style__hyper-modal-wrapper___3sRTj .style__hyper-modal-content-wrapper___1-Dl8.style__fullscreen___wa9Kx {\n width: 100%;\n height: 100%; }\n\n.style__hyper-dimmer-wrapper___NdrSh {\n background-color: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1; }\n\n.style__hyper-close-icon-wrapper___3w-od {\n position: absolute;\n display: block;\n cursor: pointer;\n width: 40px;\n height: 40px;\n top: 20px;\n right: 20px;\n transition: all 0.1s ease; }\n .style__hyper-close-icon-wrapper___3w-od:hover {\n transform: rotate(90deg); }\n\n.style__body-noscroll___tl8SX {\n overflow: hidden; }\n"; | ||
| var styles$4 = {"hyper-modal-wrapper":"style__hyper-modal-wrapper___3sRTj","visible":"style__visible___uofxI","hyper-modal-content-wrapper":"style__hyper-modal-content-wrapper___1-Dl8","fullscreen":"style__fullscreen___wa9Kx","hyper-dimmer-wrapper":"style__hyper-dimmer-wrapper___NdrSh","hyper-close-icon-wrapper":"style__hyper-close-icon-wrapper___3w-od","body-noscroll":"style__body-noscroll___tl8SX"}; | ||
| styleInject(css_248z$4); | ||
| var renderButton = function (_a) { | ||
| var renderOpenButton = _a.renderOpenButton, open = _a.open; | ||
| if (renderOpenButton) { | ||
| if (typeof renderOpenButton === 'boolean') { | ||
| return (createElement$1(DefaultButton, { onClick: open })); | ||
| } | ||
| return renderOpenButton(open); | ||
| } | ||
| return (null); | ||
| }; | ||
| var renderCloseIcon = function (_a) { | ||
| var classes = _a.classes, renderCloseIconProp = _a.renderCloseIconProp, closeOnCloseIconClick = _a.closeOnCloseIconClick, closeIconPosition = _a.closeIconPosition, close = _a.close; | ||
| var iconClassNames = closeIconPosition | ||
| ? classnames(styles$4.hyperCloseIconWrapper, closeIconPosition.horizontal, closeIconPosition.vertical) | ||
| : styles$4.hyperCloseIconWrapper; | ||
| return (createElement$1("div", { "data-name": "close-icon", className: classnames(iconClassNames, classes && classes.closeIconClassName), onClick: closeOnCloseIconClick ? close : undefined }, renderCloseIconProp ? renderCloseIconProp() : (createElement$1(DefaultCloseIcon, null)))); | ||
| }; | ||
| var renderDimmer = function (_a) { | ||
| var classes = _a.classes, closeOnDimmerClick = _a.closeOnDimmerClick, close = _a.close; | ||
| return (createElement$1("div", { className: classnames(styles$4.hyperDimmerWrapper, classes && classes.dimmerClassName), onClick: closeOnDimmerClick ? close : undefined })); | ||
| }; | ||
| var ESC_KEY = 27; | ||
| var WRAPPER_COMPONENT_ID = 'hyper-modal-wrapper_component_id'; | ||
| var HyperModal = function (_a) { | ||
| var afterClose = _a.afterClose, _b = _a.ariaEnabled, ariaEnabled = _b === void 0 ? defaultProps.ariaEnabled : _b, _c = _a.ariaProps, ariaProps = _c === void 0 ? defaultProps.ariaProps : _c, beforeClose = _a.beforeClose, children = _a.children, _d = _a.childrenMode, childrenMode = _d === void 0 ? defaultProps.childrenMode : _d, classes = _a.classes, _e = _a.closeDebounceTimeout, closeDebounceTimeout = _e === void 0 ? defaultProps.closeDebounceTimeout : _e, _f = _a.closeIconPosition, closeIconPosition = _f === void 0 ? defaultProps.closeIconPosition : _f, _g = _a.closeOnCloseIconClick, closeOnCloseIconClick = _g === void 0 ? defaultProps.closeOnCloseIconClick : _g, _h = _a.closeOnDimmerClick, closeOnDimmerClick = _h === void 0 ? defaultProps.closeOnDimmerClick : _h, _j = _a.closeOnEscClick, closeOnEscClick = _j === void 0 ? defaultProps.closeOnEscClick : _j, _k = _a.dimmerEnabled, dimmerEnabled = _k === void 0 ? defaultProps.dimmerEnabled : _k, _l = _a.disableScroll, disableScroll = _l === void 0 ? defaultProps.disableScroll : _l, _m = _a.isFullscreen, isFullscreen = _m === void 0 ? defaultProps.isFullscreen : _m, isOpen = _a.isOpen, modalContentRef = _a.modalContentRef, modalWrapperRef = _a.modalWrapperRef, _o = _a.portalMode, portalMode = _o === void 0 ? defaultProps.portalMode : _o, portalNode = _a.portalNode, _p = _a.position, position = _p === void 0 ? defaultProps.position : _p, renderCloseIconProp = _a.renderCloseIcon, renderContent = _a.renderContent, renderOpenButton = _a.renderOpenButton, requestClose = _a.requestClose, _q = _a.stackable, stackable = _q === void 0 ? defaultProps.stackable : _q, _r = _a.stackableIndex, stackableIndex = _r === void 0 ? defaultProps.stackableIndex : _r, _s = _a.stackContentSettings, stackContentSettings = _s === void 0 ? defaultProps.stackContentSettings : _s, unmountOnClose = _a.unmountOnClose; | ||
| var _t = useState(isOpen || false), isInnerOpen = _t[0], setInnerOpen = _t[1]; | ||
| useEffect(function () { | ||
| if (typeof isOpen !== 'undefined') { | ||
| setInnerOpen(isOpen); | ||
| } | ||
| }, [isOpen]); | ||
| var openModal = useCallback(function () { | ||
| setInnerOpen(true); | ||
| }, []); | ||
| var closeModal = useCallback(function () { | ||
| setInnerOpen(false); | ||
| }, []); | ||
| var handleAfterClose = useCallback(function () { | ||
| if (afterClose) { | ||
| afterClose(); | ||
| } | ||
| }, [afterClose]); | ||
| var handleClose = useCallback(function () { | ||
| if (beforeClose) { | ||
| beforeClose(); | ||
| } | ||
| if (closeDebounceTimeout) { | ||
| return defferCall(function () { | ||
| closeModal(); | ||
| if (requestClose) { | ||
| requestClose(); | ||
| } | ||
| handleAfterClose(); | ||
| }, closeDebounceTimeout); | ||
| } | ||
| closeModal(); | ||
| if (requestClose) { | ||
| requestClose(); | ||
| } | ||
| handleAfterClose(); | ||
| return true; | ||
| }, [beforeClose, closeDebounceTimeout, closeModal, handleAfterClose, requestClose]); | ||
| var handleKeyDown = useCallback(function (event) { | ||
| if (closeOnEscClick && event.keyCode === ESC_KEY && isInnerOpen) { | ||
| event.stopPropagation(); | ||
| handleClose(); | ||
| } | ||
| }, [closeOnEscClick, handleClose, isInnerOpen]); | ||
| useEffect(function () { | ||
| document.addEventListener('keydown', handleKeyDown); | ||
| return function () { | ||
| document.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }, [handleKeyDown]); | ||
| var renderModalContent = useCallback(function () { | ||
| var _a; | ||
| var content = null; | ||
| if (childrenMode) { | ||
| content = children; | ||
| } | ||
| else if (renderContent) { | ||
| content = renderContent(); | ||
| } | ||
| return (createElement$1("div", { className: classnames((_a = {}, | ||
| _a[styles$4.hyperModalContentWrapper] = true, | ||
| _a.fullscreen = isFullscreen || false, | ||
| _a[(classes && classes.contentClassName) || ''] = true, | ||
| _a)), ref: modalContentRef }, | ||
| content || (createElement$1(DefaultModalContent, { ariaProps: ariaProps, ariaEnabled: ariaEnabled, handleClose: handleClose })), | ||
| renderCloseIcon({ | ||
| classes: classes, | ||
| closeOnCloseIconClick: closeOnCloseIconClick, | ||
| closeIconPosition: closeIconPosition, | ||
| close: handleClose, | ||
| renderCloseIconProp: renderCloseIconProp, | ||
| }))); | ||
| }, [ | ||
| ariaEnabled, | ||
| ariaProps, | ||
| children, | ||
| childrenMode, | ||
| classes, | ||
| closeIconPosition, | ||
| closeOnCloseIconClick, | ||
| handleClose, | ||
| isFullscreen, | ||
| modalContentRef, | ||
| renderCloseIconProp, | ||
| renderContent, | ||
| ]); | ||
| var getProps = useCallback(function (index, props, length) { | ||
| var _a = stackContentSettings.widthRatio, widthRatio = _a === void 0 ? defaultProps.stackContentSettings.widthRatio : _a, _b = stackContentSettings.topOffsetRatio, topOffsetRatio = _b === void 0 ? defaultProps.stackContentSettings.topOffsetRatio : _b, _c = stackContentSettings.transition, transition = _c === void 0 ? defaultProps.stackContentSettings.transition : _c, _d = stackContentSettings.opacityRatio, opacityRatio = _d === void 0 ? defaultProps.stackContentSettings.opacityRatio : _d; | ||
| return __assign(__assign({}, props), { style: { | ||
| transition: transition, | ||
| width: 100 - (length - index - 1) * widthRatio + "%", | ||
| top: 0 - (length - index - 1) * topOffsetRatio + "%", | ||
| opacity: 1 - (length - index - 1) * opacityRatio, | ||
| zIndex: 1000 - (length - index - 1) * 10, | ||
| } }); | ||
| }, []); | ||
| var renderStackModalWrapper = useCallback(function () { | ||
| if (children) { | ||
| var closeIcon = renderCloseIcon({ | ||
| classes: classes, | ||
| closeOnCloseIconClick: closeOnCloseIconClick, | ||
| closeIconPosition: closeIconPosition, | ||
| close: handleClose, | ||
| renderCloseIconProp: renderCloseIconProp, | ||
| }); | ||
| return children({ | ||
| classes: classes, | ||
| closeIcon: closeIcon, | ||
| getProps: getProps, | ||
| handleClose: handleClose, | ||
| isFullscreen: isFullscreen, | ||
| modalContentRef: modalContentRef, | ||
| stackableIndex: stackableIndex, | ||
| }); | ||
| } | ||
| return null; | ||
| }, [ | ||
| children, | ||
| classes, | ||
| closeIconPosition, | ||
| closeOnCloseIconClick, | ||
| getProps, | ||
| handleClose, | ||
| isFullscreen, | ||
| modalContentRef, | ||
| renderCloseIconProp, | ||
| stackableIndex, | ||
| ]); | ||
| var renderModalWrapper = useCallback(function () { | ||
| var _a; | ||
| return (createElement$1(ReactRemoveScroll, { forwardProps: true, enabled: disableScroll && isInnerOpen }, | ||
| createElement$1("div", { id: WRAPPER_COMPONENT_ID, className: classnames((_a = {}, | ||
| _a[styles$4.hyperModalWrapper] = true, | ||
| _a[styles$4.visible] = isInnerOpen, | ||
| _a[(classes && classes.wrapperClassName) || ''] = true, | ||
| _a)), ref: modalWrapperRef, style: buildContentStyle(position) }, | ||
| dimmerEnabled && renderDimmer({ | ||
| classes: classes, | ||
| closeOnDimmerClick: closeOnDimmerClick, | ||
| close: handleClose, | ||
| }), | ||
| stackable ? renderStackModalWrapper() : renderModalContent()))); | ||
| }, [ | ||
| disableScroll, | ||
| classes, | ||
| closeOnDimmerClick, | ||
| dimmerEnabled, | ||
| handleClose, | ||
| isInnerOpen, | ||
| modalWrapperRef, | ||
| position, | ||
| renderModalContent, | ||
| renderStackModalWrapper, | ||
| stackable, | ||
| ]); | ||
| var renderModal = useCallback(function () { | ||
| if (!isInnerOpen && unmountOnClose) { | ||
| return (null); | ||
| } | ||
| if (portalMode && createPortal) { | ||
| var node = portalNode || createElement(classes && classes.portalWrapperClassName); | ||
| return createPortal(renderModalWrapper(), node); | ||
| } | ||
| return renderModalWrapper(); | ||
| }, [ | ||
| classes, | ||
| isInnerOpen, | ||
| portalMode, | ||
| portalNode, | ||
| renderModalWrapper, | ||
| unmountOnClose, | ||
| ]); | ||
| return (createElement$1(Fragment, null, | ||
| renderButton({ renderOpenButton: renderOpenButton, open: openModal }), | ||
| renderModal())); | ||
| }; | ||
| export default HyperModal; | ||
| export { ModalStack }; | ||
| ***************************************************************************** */var d=function(){return(d=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e}).apply(this,arguments)};function u(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(t[r[o]]=e[r[o]])}return t}function p(e){return e}var f=function(n){var t=n.sideCar,r=u(n,["sideCar"]);if(!t)throw new Error("Sidecar: please provide `sideCar` property to import the right car");var o=t.read();if(!o)throw new Error("Sidecar medium not found");return e(o,d({},r))};f.isSideCarExport=!0;var h=function(e){void 0===e&&(e={});var n=function(e,n){void 0===n&&(n=p);var t=[],r=!1;return{read:function(){if(r)throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");return t.length?t[t.length-1]:e},useMedium:function(e){var o=n(e,r);return t.push(o),function(){t=t.filter((function(e){return e!==o}))}},assignSyncMedium:function(e){for(r=!0;t.length;){var n=t;t=[],n.forEach(e)}t={push:function(n){return e(n)},filter:function(){return t}}},assignMedium:function(e){r=!0;var n=[];if(t.length){var o=t;t=[],o.forEach(e),n=t}var i=function(){var t=n;n=[],t.forEach(e)},a=function(){return Promise.resolve().then(i)};a(),t={push:function(e){n.push(e),a()},filter:function(e){return n=n.filter(e),t}}}}}(null);return n.options=d({async:!0,ssr:!1},e),n}();function _(e,t){return r=t,o=function(n){return e.forEach((function(e){return function(e,n){return"function"==typeof e?e(n):e&&(e.current=n),e}(e,n)}))},(i=n((function(){return{value:r,callback:o,facade:{get current(){return i.value},set current(e){var n=i.value;n!==e&&(i.value=e,i.callback(e,n))}}}}))[0]).callback=o,i.facade;var r,o,i}var m=function(){},v=t((function(t,l){var c=r(null),s=n({onScrollCapture:m,onWheelCapture:m,onTouchMoveCapture:m}),p=s[0],f=s[1],v=t.forwardProps,y=t.children,g=t.className,b=t.removeScrollBar,w=t.enabled,C=t.shards,x=t.sideCar,k=t.noIsolation,I=t.inert,E=t.allowPinchZoom,S=u(t,["forwardProps","children","className","removeScrollBar","enabled","shards","sideCar","noIsolation","inert","allowPinchZoom"]),O=x,P=d({ref:_([c,l])},S,p);return e(o,null,w&&e(O,{sideCar:h,removeScrollBar:b,shards:C,noIsolation:k,inert:I,setCallbacks:f,allowPinchZoom:!!E,lockRef:c}),v?i(a.only(y),P):e("div",d({},P,{className:g}),y))}));v.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},v.classNames={fullWidth:"width-before-scroll-bar",zeroRight:"right-scroll-bar-position"};function y(){if(!document)return null;var e=document.createElement("style");e.type="text/css";var n=function(){if("undefined"!=typeof __webpack_nonce__)return __webpack_nonce__}();return n&&e.setAttribute("nonce",n),e}var g=function(){var e=0,n=null;return{add:function(t){var r,o;0==e&&(n=y())&&(o=t,(r=n).styleSheet?r.styleSheet.cssText=o:r.appendChild(document.createTextNode(o)),function(e){(document.head||document.getElementsByTagName("head")[0]).appendChild(e)}(n)),e++},remove:function(){!--e&&n&&(n.parentNode&&n.parentNode.removeChild(n),n=null)}}},b=function(){var e,n=(e=g(),function(n){l((function(){return e.add(n),function(){e.remove()}}),[])});return function(e){var t=e.styles;return n(t),null}},w={left:0,top:0,right:0,gap:0},C=function(e){return parseInt(e||"",10)||0},x=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return w;var n=function(e){var n=window.getComputedStyle(document.body),t=n["padding"===e?"paddingLeft":"marginLeft"],r=n["padding"===e?"paddingTop":"marginTop"],o=n["padding"===e?"paddingRight":"marginRight"];return[C(t),C(r),C(o)]}(e),t=document.documentElement.clientWidth,r=window.innerWidth;return{left:n[0],top:n[1],right:n[2],gap:Math.max(0,r-t+n[2]-n[0])}},k=b(),I=function(e,n,t,r){var o=e.left,i=e.top,a=e.right,l=e.gap;return void 0===t&&(t="margin"),"\n .with-scroll-bars-hidden {\n overflow: hidden "+r+";\n padding-right: "+l+"px "+r+";\n }\n body {\n overflow: hidden "+r+";\n "+[n&&"position: relative "+r+";","margin"===t&&"\n padding-left: "+o+"px;\n padding-top: "+i+"px;\n padding-right: "+a+"px;\n margin-left:0;\n margin-top:0;\n margin-right: "+l+"px "+r+";\n ","padding"===t&&"padding-right: "+l+"px "+r+";"].filter(Boolean).join("")+"\n }\n \n .right-scroll-bar-position {\n right: "+l+"px "+r+";\n }\n \n .width-before-scroll-bar {\n margin-right: "+l+"px "+r+";\n }\n \n .right-scroll-bar-position .right-scroll-bar-position {\n right: 0 "+r+";\n }\n \n .width-before-scroll-bar .width-before-scroll-bar {\n margin-right: 0 "+r+";\n }\n"},E=function(t){var r=n(x(t.gapMode)),o=r[0],i=r[1];l((function(){i(x(t.gapMode))}),[t.gapMode]);var a=t.noRelative,c=t.noImportant,s=t.gapMode;return e(k,{styles:I(o,!a,void 0===s?"margin":s,c?"":"!important")})},S=function(e,n){var t=n;do{if(O(e,t)){var r=P(e,t);if(r[1]>r[2])return!0}t=t.parentNode}while(t&&t!==document.body);return!1},O=function(e,n){return"v"===e?function(e){var n=window.getComputedStyle(e);return"hidden"!==n.overflowY&&!(n.overflowY===n.overflowX&&"visible"===n.overflowY)}(n):function(e){var n=window.getComputedStyle(e);return"hidden"!==n.overflowX&&!(n.overflowY===n.overflowX&&"visible"===n.overflowX)}(n)},P=function(e,n){return"v"===e?[(t=n).scrollTop,t.scrollHeight,t.clientHeight]:function(e){return[e.scrollLeft,e.scrollWidth,e.clientWidth]}(n);var t},N=!1;if("undefined"!=typeof window)try{var R=Object.defineProperty({},"passive",{get:function(){return N=!0,!0}});window.addEventListener("test",R,R),window.removeEventListener("test",R,R)}catch(e){N=!1}var M=!!N&&{passive:!1},j=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},T=function(e){return[e.deltaX,e.deltaY]},D=function(e){return e&&"current"in e?e.current:e},W=function(e){return"\n .block-interactivity-"+e+" {pointer-events: none;}\n .allow-interactivity-"+e+" {pointer-events: all;}\n"},L=0,B=[];var z,F=(z=function(t){var i=r([]),a=r([0,0]),s=r(),d=n(L++)[0],u=n((function(){return b()}))[0],p=r(t);l((function(){p.current=t}),[t]),l((function(){if(t.inert){document.body.classList.add("block-interactivity-"+d);var e=[t.lockRef.current].concat((t.shards||[]).map(D)).filter(Boolean);return e.forEach((function(e){return e.classList.add("allow-interactivity-"+d)})),function(){document.body.classList.remove("block-interactivity-"+d),e.forEach((function(e){return e.classList.remove("allow-interactivity-"+d)}))}}}),[t.inert,t.lockRef.current,t.shards]);var f=c((function(e,n){if("touches"in e&&2===e.touches.length)return!p.current.allowPinchZoom;var t,r=j(e),o=a.current,i="deltaX"in e?e.deltaX:o[0]-r[0],l="deltaY"in e?e.deltaY:o[1]-r[1],c=e.target,d=Math.abs(i)>Math.abs(l)?"h":"v",u=S(d,c);if(!u)return!0;if(u?t=d:(t="v"===d?"h":"v",u=S(d,c)),!u)return!1;if(!s.current&&"changedTouches"in e&&(i||l)&&(s.current=t),!t)return!0;var f=s.current||t;return function(e,n,t,r,o){var i=r,a=t.target,l=n.contains(a),c=!1,s=i>0,d=0,u=0;do{var p=P(e,a),f=p[0],h=p[1]-p[2]-f;(f||h)&&O(e,a)&&(d+=h,u+=f),a=a.parentNode}while(!l&&a!==document.body||l&&(n.contains(a)||n===a));return(s&&(o&&0===d||!o&&i>d)||!s&&(o&&0===u||!o&&-i>u))&&(c=!0),c}(f,n,e,"h"==f?i:l,!0)}),[]),h=c((function(e){var n=e;if(B.length&&B[B.length-1]===u){var t="deltaY"in n?T(n):j(n),r=i.current.filter((function(e){return e.name===n.type&&e.target===n.target&&(r=e.delta,o=t,r[0]===o[0]&&r[1]===o[1]);var r,o}))[0];if(r&&r.should)n.preventDefault();else if(!r){var o=(p.current.shards||[]).map(D).filter(Boolean).filter((function(e){return e.contains(n.target)}));(o.length>0?f(n,o[0]):!p.current.noIsolation)&&n.preventDefault()}}}),[]),_=c((function(e,n,t,r){var o={name:e,delta:n,target:t,should:r};i.current.push(o),setTimeout((function(){i.current=i.current.filter((function(e){return e!==o}))}),1)}),[]),m=c((function(e){a.current=j(e),s.current=void 0}),[]),v=c((function(e){_(e.type,T(e),e.target,f(e,t.lockRef.current))}),[]),y=c((function(e){_(e.type,j(e),e.target,f(e,t.lockRef.current))}),[]);l((function(){return B.push(u),t.setCallbacks({onScrollCapture:v,onWheelCapture:v,onTouchMoveCapture:y}),document.addEventListener("wheel",h,M),document.addEventListener("touchmove",h,M),document.addEventListener("touchstart",m,M),function(){B=B.filter((function(e){return e!==u})),document.removeEventListener("wheel",h,M),document.removeEventListener("touchmove",h,M),document.removeEventListener("touchstart",m,M)}}),[]);var g=t.removeScrollBar,w=t.inert;return e(o,null,w?e(u,{styles:W(d)}):null,g?e(E,{gapMode:"margin"}):null)},h.useMedium(z),f),X=t((function(n,t){return e(v,d({},n,{ref:t,sideCar:F}))}));function Y(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}X.classNames=v.classNames;var Z={"custom-button":"style__custom-button___3Ke9X"};Y(".style__custom-button___3Ke9X {\n height: 60px;\n min-width: 200px;\n font-size: 1.2em;\n padding: 0 20px;\n border: 0;\n cursor: pointer;\n text-transform: uppercase;\n background-color: rgba(65, 70, 90, 0.5);\n box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.4);\n transition: all 0.2s ease; }\n .style__custom-button___3Ke9X:hover {\n background-color: #41465a;\n color: #e7e8ee;\n box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.6); }\n");var A=function(n){var t=n.onClick;return e("button",{type:"button",className:Z.customButton,onClick:t},"open modal")},J={"hyper-close-icon":"style__hyper-close-icon___3YbbD"};Y('.style__hyper-close-icon___3YbbD {\n display: block;\n background-image: url("https://api.iconify.design/iwwa:close.svg");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n width: 100%;\n height: 100%; }\n');var G=function(){return e("i",{className:J.hyperCloseIcon})},K={"hyper-modal-default-content":"style__hyper-modal-default-content___DJFCj",title:"style__title___R9lS5",description:"style__description___2Wy5W"};Y(".style__hyper-modal-default-content___DJFCj {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n color: #282c34;\n overflow: auto; }\n .style__hyper-modal-default-content___DJFCj .style__title___R9lS5 {\n font-size: 30px;\n color: #282c34; }\n .style__hyper-modal-default-content___DJFCj .style__description___2Wy5W {\n font-size: 24px; }\n .style__hyper-modal-default-content___DJFCj button {\n width: 200px;\n height: 50px;\n font-size: 18px;\n font-weight: bold;\n background-color: white;\n color: #282c34;\n border: 1px solid #282c34;\n text-transform: uppercase;\n transition: all 0.2s ease;\n cursor: pointer; }\n .style__hyper-modal-default-content___DJFCj button:hover {\n background-color: #282c34;\n color: white; }\n");var H=function(n){var t=n.ariaEnabled,r=n.ariaProps,o=n.handleClose,i=t&&r?r["aria-labelledby"]:void 0,a=t&&r?r["aria-describedby"]:void 0;return e("div",{className:K.hyperModalDefaultContent},e("div",{className:K.title,id:i},"Hyper modal"),e("div",{className:K.description,id:a},"Fully customizable and accessible modal"),e("button",{type:"button",onClick:o},"Close modal"))},Q={ariaEnabled:!0,ariaProps:{"aria-describedby":"hyper-modal-description","aria-labelledby":"hyper-modal-title",role:"dialog"},disableScroll:!0,childrenMode:!0,closeDebounceTimeout:0,closeIconPosition:{vertical:"top",horizontal:"right"},closeOnCloseIconClick:!0,closeOnDimmerClick:!0,closeOnEscClick:!0,dimmerEnabled:!0,isFullscreen:!1,portalMode:!1,position:{alignItems:"center",justifyContent:"center"},stackable:!1,stackableIndex:0,stackContentSettings:{widthRatio:4,topOffsetRatio:2,transition:"all 0.3s ease",opacityRatio:.2}},q=function(e){var n=d({display:"flex"},Q.position);return e?d(d({},n),e):n},U=function(e){return e?Object.keys(e).filter((function(n){return!!e[n]})).reduce((function(e,n){return e?e+(n?" "+n:""):""+n}),""):""},V=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return e[0]&&"string"==typeof e[0]?e.join(" "):U(e[0])},$={"stack-wrapper":"style__stack-wrapper___2WYMj","hyper-modal-content-wrapper":"style__hyper-modal-content-wrapper___gGCZb",fullscreen:"style__fullscreen___3hAeZ","hyper-close-icon-wrapper":"style__hyper-close-icon-wrapper___1dQPm"};Y(".style__stack-wrapper___2WYMj {\n position: relative;\n width: 60%;\n height: 60%;\n display: flex;\n justify-content: center; }\n\n.style__hyper-modal-content-wrapper___gGCZb {\n position: absolute;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n z-index: 5;\n border-radius: 10px;\n overflow: auto; }\n .style__hyper-modal-content-wrapper___gGCZb.style__fullscreen___3hAeZ {\n width: 100%;\n height: 100%; }\n .style__hyper-modal-content-wrapper___gGCZb .style__hyper-close-icon-wrapper___1dQPm {\n position: absolute;\n display: block;\n cursor: pointer;\n width: 40px;\n height: 40px;\n top: 20px;\n right: 20px;\n transition: all 0.1s ease; }\n .style__hyper-modal-content-wrapper___gGCZb .style__hyper-close-icon-wrapper___1dQPm:hover {\n transform: rotate(90deg); }\n");var ee=function(n){var t=n.children,r=n.classes,o=n.closeIcon,i=n.getProps,l=(n.handleClose,n.isFullscreen),c=n.modalContentRef,s=n.stackableIndex,p=void 0===s?0:s,f=u(n,["children","classes","closeIcon","getProps","handleClose","isFullscreen","modalContentRef","stackableIndex"]);return e("div",d({},f,{className:$.stackWrapper}),a.toArray(t).slice(0,p+1).map((function(n,t,a){var s;return e("div",d({key:"content-"+t,"data-type":"hyper-modal-content"},i(t,n.props,a.length),{className:V((s={},s[$.hyperModalContentWrapper]=!0,s.fullscreen=l||!1,s[r&&r.contentClassName||""]=!0,s)),ref:c}),n,o)})))},ne={"hyper-modal-wrapper":"style__hyper-modal-wrapper___3sRTj",visible:"style__visible___uofxI","hyper-modal-content-wrapper":"style__hyper-modal-content-wrapper___1-Dl8",fullscreen:"style__fullscreen___wa9Kx","hyper-dimmer-wrapper":"style__hyper-dimmer-wrapper___NdrSh","hyper-close-icon-wrapper":"style__hyper-close-icon-wrapper___3w-od","body-noscroll":"style__body-noscroll___tl8SX"};Y(".style__hyper-modal-wrapper___3sRTj {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n visibility: hidden;\n opacity: 0;\n transition: all 0.3s ease; }\n .style__hyper-modal-wrapper___3sRTj.style__visible___uofxI {\n visibility: visible;\n opacity: 1; }\n .style__hyper-modal-wrapper___3sRTj .style__hyper-modal-content-wrapper___1-Dl8 {\n position: relative;\n background-color: #ffffff;\n width: 60%;\n height: 60%;\n z-index: 5;\n border-radius: 10px;\n overflow: auto; }\n .style__hyper-modal-wrapper___3sRTj .style__hyper-modal-content-wrapper___1-Dl8.style__fullscreen___wa9Kx {\n width: 100%;\n height: 100%; }\n\n.style__hyper-dimmer-wrapper___NdrSh {\n background-color: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1; }\n\n.style__hyper-close-icon-wrapper___3w-od {\n position: absolute;\n display: block;\n cursor: pointer;\n width: 40px;\n height: 40px;\n top: 20px;\n right: 20px;\n transition: all 0.1s ease; }\n .style__hyper-close-icon-wrapper___3w-od:hover {\n transform: rotate(90deg); }\n\n.style__body-noscroll___tl8SX {\n overflow: hidden; }\n");var te=function(n){var t=n.classes,r=n.renderCloseIconProp,o=n.closeOnCloseIconClick,i=n.closeIconPosition,a=n.close,l=i?V(ne.hyperCloseIconWrapper,i.horizontal,i.vertical):ne.hyperCloseIconWrapper;return e("div",{"data-name":"close-icon",className:V(l,t&&t.closeIconClassName),onClick:o?a:void 0},r?r():e(G,null))};export default function(t){var r=t.afterClose,i=t.ariaEnabled,a=void 0===i?Q.ariaEnabled:i,u=t.ariaProps,p=void 0===u?Q.ariaProps:u,f=t.beforeClose,h=t.children,_=t.childrenMode,m=void 0===_?Q.childrenMode:_,v=t.classes,y=t.closeDebounceTimeout,g=void 0===y?Q.closeDebounceTimeout:y,b=t.closeIconPosition,w=void 0===b?Q.closeIconPosition:b,C=t.closeOnCloseIconClick,x=void 0===C?Q.closeOnCloseIconClick:C,k=t.closeOnDimmerClick,I=void 0===k?Q.closeOnDimmerClick:k,E=t.closeOnEscClick,S=void 0===E?Q.closeOnEscClick:E,O=t.dimmerEnabled,P=void 0===O?Q.dimmerEnabled:O,N=t.disableScroll,R=void 0===N?Q.disableScroll:N,M=t.isFullscreen,j=void 0===M?Q.isFullscreen:M,T=t.isOpen,D=t.modalContentRef,W=t.modalWrapperRef,L=t.portalMode,B=void 0===L?Q.portalMode:L,z=t.portalNode,F=t.position,Y=void 0===F?Q.position:F,Z=t.renderCloseIcon,J=t.renderContent,G=t.renderOpenButton,K=t.requestClose,U=t.stackable,$=void 0===U?Q.stackable:U,ee=t.stackableIndex,re=void 0===ee?Q.stackableIndex:ee,oe=t.stackContentSettings,ie=void 0===oe?Q.stackContentSettings:oe,ae=t.unmountOnClose,le=n(T||!1),ce=le[0],se=le[1];l((function(){void 0!==T&&se(T)}),[T]);var de=c((function(){se(!0)}),[]),ue=c((function(){se(!1)}),[]),pe=c((function(){r&&r()}),[r]),fe=c((function(){return f&&f(),g?(e=function(){ue(),K&&K(),pe()},void 0===(n=g)&&(n=500),void 0===t&&(t={}),new Promise((function(r){setTimeout((function(){e(t),r()}),n)}))):(ue(),K&&K(),pe(),!0);var e,n,t}),[f,g,ue,pe,K]),he=c((function(e){S&&27===e.keyCode&&ce&&(e.stopPropagation(),fe())}),[S,fe,ce]);l((function(){return document.addEventListener("keydown",he),function(){document.removeEventListener("keydown",he)}}),[he]);var _e=c((function(){var n,t=null;return m?t=h:J&&(t=J()),e("div",{className:V((n={},n[ne.hyperModalContentWrapper]=!0,n.fullscreen=j||!1,n[v&&v.contentClassName||""]=!0,n)),ref:D},t||e(H,{ariaProps:p,ariaEnabled:a,handleClose:fe}),te({classes:v,closeOnCloseIconClick:x,closeIconPosition:w,close:fe,renderCloseIconProp:Z}))}),[a,p,h,m,v,w,x,fe,j,D,Z,J]),me=c((function(e,n,t){var r=ie.widthRatio,o=void 0===r?Q.stackContentSettings.widthRatio:r,i=ie.topOffsetRatio,a=void 0===i?Q.stackContentSettings.topOffsetRatio:i,l=ie.transition,c=void 0===l?Q.stackContentSettings.transition:l,s=ie.opacityRatio,u=void 0===s?Q.stackContentSettings.opacityRatio:s;return d(d({},n),{style:{transition:c,width:100-(t-e-1)*o+"%",top:0-(t-e-1)*a+"%",opacity:1-(t-e-1)*u,zIndex:1e3-10*(t-e-1)}})}),[]),ve=c((function(){if(h){var e=te({classes:v,closeOnCloseIconClick:x,closeIconPosition:w,close:fe,renderCloseIconProp:Z});return h({classes:v,closeIcon:e,getProps:me,handleClose:fe,isFullscreen:j,modalContentRef:D,stackableIndex:re})}return null}),[h,v,w,x,me,fe,j,D,Z,re]),ye=c((function(){var n;return e(X,{forwardProps:!0,enabled:R&&ce},e("div",{id:"hyper-modal-wrapper_component_id",className:V((n={},n[ne.hyperModalWrapper]=!0,n[ne.visible]=ce,n[v&&v.wrapperClassName||""]=!0,n)),ref:W,style:q(Y)},P&&function(n){var t=n.classes,r=n.closeOnDimmerClick,o=n.close;return e("div",{className:V(ne.hyperDimmerWrapper,t&&t.dimmerClassName),onClick:r?o:void 0})}({classes:v,closeOnDimmerClick:I,close:fe}),$?ve():_e()))}),[R,v,I,P,fe,ce,W,Y,_e,ve,$]),ge=c((function(){if(!ce&&ae)return null;if(B&&s){var e=z||(n=v&&v.portalWrapperClassName,(t=document.getElementById("hyper-modal-portal-id"))||((t=document.createElement("div")).setAttribute("id","hyper-modal-portal-id"),document.body.appendChild(t)),n&&!t.classList.contains(n)&&t.classList.add(n),t);return s(ye(),e)}var n,t;return ye()}),[v,ce,B,z,ye,ae]);return e(o,null,function(n){var t=n.renderOpenButton,r=n.open;return t?"boolean"==typeof t?e(A,{onClick:r}):t(r):null}({renderOpenButton:G,open:de}),ge())}export{ee as ModalStack}; | ||
| //# sourceMappingURL=index.es.js.map |
@@ -1,964 +0,2 @@ | ||
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var React = require('react'); | ||
| var ReactDOM = require('react-dom'); | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. All rights reserved. | ||
| Licensed under the Apache License, Version 2.0 (the "License"); you may not use | ||
| this file except in compliance with the License. You may obtain a copy of the | ||
| License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED | ||
| WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, | ||
| MERCHANTABLITY OR NON-INFRINGEMENT. | ||
| See the Apache Version 2.0 License for specific language governing permissions | ||
| and limitations under the License. | ||
| ***************************************************************************** */ | ||
| var __assign = function() { | ||
| __assign = Object.assign || function __assign(t) { | ||
| for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
| s = arguments[i]; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; | ||
| } | ||
| return t; | ||
| }; | ||
| return __assign.apply(this, arguments); | ||
| }; | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
| t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
| for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
| t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| var zeroRightClassName = 'right-scroll-bar-position'; | ||
| var fullWidthClassName = 'width-before-scroll-bar'; | ||
| var noScrollbarsClassName = 'with-scroll-bars-hidden'; | ||
| function ItoI(a) { | ||
| return a; | ||
| } | ||
| function innerCreateMedium(defaults, middleware) { | ||
| if (middleware === void 0) { middleware = ItoI; } | ||
| var buffer = []; | ||
| var assigned = false; | ||
| var medium = { | ||
| read: function () { | ||
| if (assigned) { | ||
| throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.'); | ||
| } | ||
| if (buffer.length) { | ||
| return buffer[buffer.length - 1]; | ||
| } | ||
| return defaults; | ||
| }, | ||
| useMedium: function (data) { | ||
| var item = middleware(data, assigned); | ||
| buffer.push(item); | ||
| return function () { | ||
| buffer = buffer.filter(function (x) { return x !== item; }); | ||
| }; | ||
| }, | ||
| assignSyncMedium: function (cb) { | ||
| assigned = true; | ||
| while (buffer.length) { | ||
| var cbs = buffer; | ||
| buffer = []; | ||
| cbs.forEach(cb); | ||
| } | ||
| buffer = { | ||
| push: function (x) { return cb(x); }, | ||
| filter: function () { return buffer; }, | ||
| }; | ||
| }, | ||
| assignMedium: function (cb) { | ||
| assigned = true; | ||
| var pendingQueue = []; | ||
| if (buffer.length) { | ||
| var cbs = buffer; | ||
| buffer = []; | ||
| cbs.forEach(cb); | ||
| pendingQueue = buffer; | ||
| } | ||
| var executeQueue = function () { | ||
| var cbs = pendingQueue; | ||
| pendingQueue = []; | ||
| cbs.forEach(cb); | ||
| }; | ||
| var cycle = function () { return Promise.resolve().then(executeQueue); }; | ||
| cycle(); | ||
| buffer = { | ||
| push: function (x) { | ||
| pendingQueue.push(x); | ||
| cycle(); | ||
| }, | ||
| filter: function (filter) { | ||
| pendingQueue = pendingQueue.filter(filter); | ||
| return buffer; | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| return medium; | ||
| } | ||
| function createSidecarMedium(options) { | ||
| if (options === void 0) { options = {}; } | ||
| var medium = innerCreateMedium(null); | ||
| medium.options = __assign({ async: true, ssr: false }, options); | ||
| return medium; | ||
| } | ||
| var SideCar = function (_a) { | ||
| var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]); | ||
| if (!sideCar) { | ||
| throw new Error('Sidecar: please provide `sideCar` property to import the right car'); | ||
| } | ||
| var Target = sideCar.read(); | ||
| if (!Target) { | ||
| throw new Error('Sidecar medium not found'); | ||
| } | ||
| return React.createElement(Target, __assign({}, rest)); | ||
| }; | ||
| SideCar.isSideCarExport = true; | ||
| function exportSidecar(medium, exported) { | ||
| medium.useMedium(exported); | ||
| return SideCar; | ||
| } | ||
| var effectCar = createSidecarMedium(); | ||
| function assignRef(ref, value) { | ||
| if (typeof ref === 'function') { | ||
| ref(value); | ||
| } | ||
| else if (ref) { | ||
| ref.current = value; | ||
| } | ||
| return ref; | ||
| } | ||
| function useCallbackRef(initialValue, callback) { | ||
| var ref = React.useState(function () { return ({ | ||
| // value | ||
| value: initialValue, | ||
| // last callback | ||
| callback: callback, | ||
| // "memoized" public interface | ||
| facade: { | ||
| get current() { | ||
| return ref.value; | ||
| }, | ||
| set current(value) { | ||
| var last = ref.value; | ||
| if (last !== value) { | ||
| ref.value = value; | ||
| ref.callback(value, last); | ||
| } | ||
| } | ||
| } | ||
| }); })[0]; | ||
| // update callback | ||
| ref.callback = callback; | ||
| return ref.facade; | ||
| } | ||
| function useMergeRefs(refs, defaultValue) { | ||
| return useCallbackRef(defaultValue, function (newValue) { | ||
| return refs.forEach(function (ref) { return assignRef(ref, newValue); }); | ||
| }); | ||
| } | ||
| var nothing = function () { | ||
| return; | ||
| }; | ||
| var RemoveScroll = React.forwardRef(function (props, parentRef) { | ||
| var ref = React.useRef(null); | ||
| var _a = React.useState({ | ||
| onScrollCapture: nothing, | ||
| onWheelCapture: nothing, | ||
| onTouchMoveCapture: nothing | ||
| }), callbacks = _a[0], setCallbacks = _a[1]; | ||
| var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]); | ||
| var SideCar = sideCar; | ||
| var containerProps = __assign({ ref: useMergeRefs([ | ||
| ref, | ||
| parentRef | ||
| ]) }, rest, callbacks); | ||
| return (React.createElement(React.Fragment, null, | ||
| enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })), | ||
| forwardProps ? (React.cloneElement(React.Children.only(children), containerProps)) : (React.createElement("div", __assign({}, containerProps, { className: className }), children)))); | ||
| }); | ||
| RemoveScroll.defaultProps = { | ||
| enabled: true, | ||
| removeScrollBar: true, | ||
| inert: false | ||
| }; | ||
| RemoveScroll.classNames = { | ||
| fullWidth: fullWidthClassName, | ||
| zeroRight: zeroRightClassName | ||
| }; | ||
| var getNonce = function () { | ||
| if (typeof __webpack_nonce__ !== 'undefined') { | ||
| return __webpack_nonce__; | ||
| } | ||
| return undefined; | ||
| }; | ||
| function makeStyleTag() { | ||
| if (!document) | ||
| return null; | ||
| var tag = document.createElement('style'); | ||
| tag.type = 'text/css'; | ||
| var nonce = getNonce(); | ||
| if (nonce) { | ||
| tag.setAttribute('nonce', nonce); | ||
| } | ||
| return tag; | ||
| } | ||
| function injectStyles(tag, css) { | ||
| if (tag.styleSheet) { | ||
| tag.styleSheet.cssText = css; | ||
| } | ||
| else { | ||
| tag.appendChild(document.createTextNode(css)); | ||
| } | ||
| } | ||
| function insertStyleTag(tag) { | ||
| var head = document.head || document.getElementsByTagName('head')[0]; | ||
| head.appendChild(tag); | ||
| } | ||
| var stylesheetSingleton = function () { | ||
| var counter = 0; | ||
| var stylesheet = null; | ||
| return { | ||
| add: function (style) { | ||
| if (counter == 0) { | ||
| if (stylesheet = makeStyleTag()) { | ||
| injectStyles(stylesheet, style); | ||
| insertStyleTag(stylesheet); | ||
| } | ||
| } | ||
| counter++; | ||
| }, | ||
| remove: function () { | ||
| counter--; | ||
| if (!counter && stylesheet) { | ||
| stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet); | ||
| stylesheet = null; | ||
| } | ||
| } | ||
| }; | ||
| }; | ||
| var styleHookSingleton = function () { | ||
| var sheet = stylesheetSingleton(); | ||
| return function (styles) { | ||
| React.useEffect(function () { | ||
| sheet.add(styles); | ||
| return function () { | ||
| sheet.remove(); | ||
| }; | ||
| }, []); | ||
| }; | ||
| }; | ||
| var styleSingleton = function () { | ||
| var useStyle = styleHookSingleton(); | ||
| var Sheet = function (_a) { | ||
| var styles = _a.styles; | ||
| useStyle(styles); | ||
| return null; | ||
| }; | ||
| return Sheet; | ||
| }; | ||
| var zeroGap = { | ||
| left: 0, | ||
| top: 0, | ||
| right: 0, | ||
| gap: 0, | ||
| }; | ||
| var parse = function (x) { return parseInt(x || '', 10) || 0; }; | ||
| var getOffset = function (gapMode) { | ||
| var cs = window.getComputedStyle(document.body); | ||
| var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft']; | ||
| var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop']; | ||
| var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight']; | ||
| return [ | ||
| parse(left), | ||
| parse(top), | ||
| parse(right), | ||
| ]; | ||
| }; | ||
| var getGapWidth = function (gapMode) { | ||
| if (gapMode === void 0) { gapMode = 'margin'; } | ||
| if (typeof window === 'undefined') { | ||
| return zeroGap; | ||
| } | ||
| var offsets = getOffset(gapMode); | ||
| var documentWidth = document.documentElement.clientWidth; | ||
| var windowWidth = window.innerWidth; | ||
| return { | ||
| left: offsets[0], | ||
| top: offsets[1], | ||
| right: offsets[2], | ||
| gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]), | ||
| }; | ||
| }; | ||
| var Style = styleSingleton(); | ||
| var getStyles = function (_a, allowRelative, gapMode, important) { | ||
| var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap; | ||
| if (gapMode === void 0) { gapMode = 'margin'; } | ||
| return "\n ." + noScrollbarsClassName + " {\n overflow: hidden " + important + ";\n padding-right: " + gap + "px " + important + ";\n }\n body {\n overflow: hidden " + important + ";\n " + [ | ||
| allowRelative && "position: relative " + important + ";", | ||
| gapMode === 'margin' && "\n padding-left: " + left + "px;\n padding-top: " + top + "px;\n padding-right: " + right + "px;\n margin-left:0;\n margin-top:0;\n margin-right: " + gap + "px " + important + ";\n ", | ||
| gapMode === 'padding' && "padding-right: " + gap + "px " + important + ";", | ||
| ].filter(Boolean).join('') + "\n }\n \n ." + zeroRightClassName + " {\n right: " + gap + "px " + important + ";\n }\n \n ." + fullWidthClassName + " {\n margin-right: " + gap + "px " + important + ";\n }\n \n ." + zeroRightClassName + " ." + zeroRightClassName + " {\n right: 0 " + important + ";\n }\n \n ." + fullWidthClassName + " ." + fullWidthClassName + " {\n margin-right: 0 " + important + ";\n }\n"; | ||
| }; | ||
| var RemoveScrollBar = function (props) { | ||
| var _a = React.useState(getGapWidth(props.gapMode)), gap = _a[0], setGap = _a[1]; | ||
| React.useEffect(function () { | ||
| setGap(getGapWidth(props.gapMode)); | ||
| }, [props.gapMode]); | ||
| var noRelative = props.noRelative, noImportant = props.noImportant, _b = props.gapMode, gapMode = _b === void 0 ? 'margin' : _b; | ||
| return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') }); | ||
| }; | ||
| var elementCouldBeVScrolled = function (node) { | ||
| var styles = window.getComputedStyle(node); | ||
| return (styles.overflowY !== 'hidden' && // not-not-scrollable | ||
| !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible') // scrollable | ||
| ); | ||
| }; | ||
| var elementCouldBeHScrolled = function (node) { | ||
| var styles = window.getComputedStyle(node); | ||
| return (styles.overflowX !== 'hidden' && // not-not-scrollable | ||
| !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable | ||
| ); | ||
| }; | ||
| var locationCouldBeScrolled = function (axis, node) { | ||
| var current = node; | ||
| do { | ||
| var isScrollable = elementCouldBeScrolled(axis, current); | ||
| if (isScrollable) { | ||
| var _a = getScrollVariables(axis, current), s = _a[1], d = _a[2]; | ||
| if (s > d) { | ||
| return true; | ||
| } | ||
| } | ||
| current = current.parentNode; | ||
| } while (current && current !== document.body); | ||
| return false; | ||
| }; | ||
| var getVScrollVariables = function (_a) { | ||
| var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight; | ||
| return [scrollTop, scrollHeight, clientHeight]; | ||
| }; | ||
| var getHScrollVariables = function (_a) { | ||
| var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth; | ||
| return [scrollLeft, scrollWidth, clientWidth]; | ||
| }; | ||
| var elementCouldBeScrolled = function (axis, node) { | ||
| return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node); | ||
| }; | ||
| var getScrollVariables = function (axis, node) { | ||
| return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node); | ||
| }; | ||
| var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) { | ||
| var delta = sourceDelta; | ||
| // find scrollable target | ||
| var target = event.target; | ||
| var targetInLock = endTarget.contains(target); | ||
| var shouldCancelScroll = false; | ||
| var isDeltaPositive = delta > 0; | ||
| var availableScroll = 0; | ||
| var availableScrollTop = 0; | ||
| do { | ||
| var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2]; | ||
| var elementScroll = scroll_1 - capacity - position; | ||
| if (position || elementScroll) { | ||
| if (elementCouldBeScrolled(axis, target)) { | ||
| availableScroll += elementScroll; | ||
| availableScrollTop += position; | ||
| } | ||
| } | ||
| target = target.parentNode; | ||
| } while ( | ||
| // portaled content | ||
| (!targetInLock && target !== document.body) || | ||
| // self content | ||
| (targetInLock && (endTarget.contains(target) || endTarget === target))); | ||
| if (isDeltaPositive && | ||
| ((noOverscroll && availableScroll === 0) || | ||
| (!noOverscroll && delta > availableScroll))) { | ||
| shouldCancelScroll = true; | ||
| } | ||
| else if (!isDeltaPositive && | ||
| ((noOverscroll && availableScrollTop === 0) || | ||
| (!noOverscroll && -delta > availableScrollTop))) { | ||
| shouldCancelScroll = true; | ||
| } | ||
| return shouldCancelScroll; | ||
| }; | ||
| var passiveSupported = false; | ||
| if (typeof window !== 'undefined') { | ||
| try { | ||
| var options = Object.defineProperty({}, 'passive', { | ||
| get: function () { | ||
| passiveSupported = true; | ||
| return true; | ||
| } | ||
| }); | ||
| window.addEventListener('test', options, options); | ||
| window.removeEventListener('test', options, options); | ||
| } | ||
| catch (err) { | ||
| passiveSupported = false; | ||
| } | ||
| } | ||
| var nonPassive = passiveSupported ? { passive: false } : false; | ||
| var getTouchXY = function (event) { | ||
| return 'changedTouches' in event | ||
| ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] | ||
| : [0, 0]; | ||
| }; | ||
| var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; }; | ||
| var extractRef = function (ref) { | ||
| return ref && 'current' in ref ? ref.current : ref; | ||
| }; | ||
| var deltaCompare = function (x, y) { | ||
| return x[0] === y[0] && x[1] === y[1]; | ||
| }; | ||
| var generateStyle = function (id) { return "\n .block-interactivity-" + id + " {pointer-events: none;}\n .allow-interactivity-" + id + " {pointer-events: all;}\n"; }; | ||
| var idCounter = 0; | ||
| var lockStack = []; | ||
| function RemoveScrollSideCar(props) { | ||
| var shouldPreventQueue = React.useRef([]); | ||
| var touchStartRef = React.useRef([0, 0]); | ||
| var activeAxis = React.useRef(); | ||
| var id = React.useState(idCounter++)[0]; | ||
| var Style = React.useState(function () { return styleSingleton(); })[0]; | ||
| var lastProps = React.useRef(props); | ||
| React.useEffect(function () { | ||
| lastProps.current = props; | ||
| }, [props]); | ||
| React.useEffect(function () { | ||
| if (props.inert) { | ||
| document.body.classList.add("block-interactivity-" + id); | ||
| var allow_1 = [ | ||
| props.lockRef.current | ||
| ].concat((props.shards || []).map(extractRef)).filter(Boolean); | ||
| allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-" + id); }); | ||
| return function () { | ||
| document.body.classList.remove("block-interactivity-" + id); | ||
| allow_1.forEach(function (el) { | ||
| return el.classList.remove("allow-interactivity-" + id); | ||
| }); | ||
| }; | ||
| } | ||
| return; | ||
| }, [props.inert, props.lockRef.current, props.shards]); | ||
| var shouldCancelEvent = React.useCallback(function (event, parent) { | ||
| if ('touches' in event && event.touches.length === 2) { | ||
| return !lastProps.current.allowPinchZoom; | ||
| } | ||
| var touch = getTouchXY(event); | ||
| var touchStart = touchStartRef.current; | ||
| var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0]; | ||
| var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1]; | ||
| var currentAxis; | ||
| var target = event.target; | ||
| var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v'; | ||
| var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target); | ||
| if (!canBeScrolledInMainDirection) { | ||
| return true; | ||
| } | ||
| if (canBeScrolledInMainDirection) { | ||
| currentAxis = moveDirection; | ||
| } | ||
| else { | ||
| currentAxis = moveDirection === 'v' ? 'h' : 'v'; | ||
| canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target); | ||
| // other axis might be not scrollable | ||
| } | ||
| if (!canBeScrolledInMainDirection) { | ||
| return false; | ||
| } | ||
| if (!activeAxis.current && | ||
| 'changedTouches' in event && | ||
| (deltaX || deltaY)) { | ||
| activeAxis.current = currentAxis; | ||
| } | ||
| if (!currentAxis) { | ||
| return true; | ||
| } | ||
| var cancelingAxis = activeAxis.current || currentAxis; | ||
| return handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true); | ||
| }, []); | ||
| var shouldPrevent = React.useCallback(function (_event) { | ||
| var event = _event; | ||
| if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) { | ||
| // not the last active | ||
| return; | ||
| } | ||
| var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event); | ||
| var sourceEvent = shouldPreventQueue.current.filter(function (e) { | ||
| return e.name === event.type && | ||
| e.target === event.target && | ||
| deltaCompare(e.delta, delta); | ||
| })[0]; | ||
| // self event, and should be canceled | ||
| if (sourceEvent && sourceEvent.should) { | ||
| event.preventDefault(); | ||
| return; | ||
| } | ||
| // outside or shard event | ||
| if (!sourceEvent) { | ||
| var shardNodes = (lastProps.current.shards || []) | ||
| .map(extractRef) | ||
| .filter(Boolean) | ||
| .filter(function (node) { return node.contains(event.target); }); | ||
| var shouldStop = shardNodes.length > 0 | ||
| ? shouldCancelEvent(event, shardNodes[0]) | ||
| : !lastProps.current.noIsolation; | ||
| if (shouldStop) { | ||
| event.preventDefault(); | ||
| } | ||
| } | ||
| }, []); | ||
| var shouldCancel = React.useCallback(function (name, delta, target, should) { | ||
| var event = { name: name, delta: delta, target: target, should: should }; | ||
| shouldPreventQueue.current.push(event); | ||
| setTimeout(function () { | ||
| shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; }); | ||
| }, 1); | ||
| }, []); | ||
| var scrollTouchStart = React.useCallback(function (event) { | ||
| touchStartRef.current = getTouchXY(event); | ||
| activeAxis.current = undefined; | ||
| }, []); | ||
| var scrollWheel = React.useCallback(function (event) { | ||
| shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current)); | ||
| }, []); | ||
| var scrollTouchMove = React.useCallback(function (event) { | ||
| shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current)); | ||
| }, []); | ||
| React.useEffect(function () { | ||
| lockStack.push(Style); | ||
| props.setCallbacks({ | ||
| onScrollCapture: scrollWheel, | ||
| onWheelCapture: scrollWheel, | ||
| onTouchMoveCapture: scrollTouchMove | ||
| }); | ||
| document.addEventListener('wheel', shouldPrevent, nonPassive); | ||
| document.addEventListener('touchmove', shouldPrevent, nonPassive); | ||
| document.addEventListener('touchstart', scrollTouchStart, nonPassive); | ||
| return function () { | ||
| lockStack = lockStack.filter(function (inst) { return inst !== Style; }); | ||
| document.removeEventListener('wheel', shouldPrevent, nonPassive); | ||
| document.removeEventListener('touchmove', shouldPrevent, nonPassive); | ||
| document.removeEventListener('touchstart', scrollTouchStart, nonPassive); | ||
| }; | ||
| }, []); | ||
| var removeScrollBar = props.removeScrollBar, inert = props.inert; | ||
| return (React.createElement(React.Fragment, null, | ||
| inert ? React.createElement(Style, { styles: generateStyle(id) }) : null, | ||
| removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: "margin" }) : null)); | ||
| } | ||
| var SideCar$1 = exportSidecar(effectCar, RemoveScrollSideCar); | ||
| var ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar$1 }))); }); | ||
| ReactRemoveScroll.classNames = RemoveScroll.classNames; | ||
| function styleInject(css, ref) { | ||
| if ( ref === void 0 ) ref = {}; | ||
| var insertAt = ref.insertAt; | ||
| if (!css || typeof document === 'undefined') { return; } | ||
| var head = document.head || document.getElementsByTagName('head')[0]; | ||
| var style = document.createElement('style'); | ||
| style.type = 'text/css'; | ||
| if (insertAt === 'top') { | ||
| if (head.firstChild) { | ||
| head.insertBefore(style, head.firstChild); | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| if (style.styleSheet) { | ||
| style.styleSheet.cssText = css; | ||
| } else { | ||
| style.appendChild(document.createTextNode(css)); | ||
| } | ||
| } | ||
| var css_248z = ".style__custom-button___3Ke9X {\n height: 60px;\n min-width: 200px;\n font-size: 1.2em;\n padding: 0 20px;\n border: 0;\n cursor: pointer;\n text-transform: uppercase;\n background-color: rgba(65, 70, 90, 0.5);\n box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.4);\n transition: all 0.2s ease; }\n .style__custom-button___3Ke9X:hover {\n background-color: #41465a;\n color: #e7e8ee;\n box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.6); }\n"; | ||
| var styles = {"custom-button":"style__custom-button___3Ke9X"}; | ||
| styleInject(css_248z); | ||
| var DefaultButton = function (_a) { | ||
| var onClick = _a.onClick; | ||
| return (React.createElement("button", { type: "button", className: styles.customButton, onClick: onClick }, "open modal")); | ||
| }; | ||
| var css_248z$1 = ".style__hyper-close-icon___3YbbD {\n display: block;\n background-image: url(\"https://api.iconify.design/iwwa:close.svg\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n width: 100%;\n height: 100%; }\n"; | ||
| var styles$1 = {"hyper-close-icon":"style__hyper-close-icon___3YbbD"}; | ||
| styleInject(css_248z$1); | ||
| var DefaultCloseIcon = function () { return (React.createElement("i", { className: styles$1.hyperCloseIcon })); }; | ||
| var css_248z$2 = ".style__hyper-modal-default-content___DJFCj {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n color: #282c34;\n overflow: auto; }\n .style__hyper-modal-default-content___DJFCj .style__title___R9lS5 {\n font-size: 30px;\n color: #282c34; }\n .style__hyper-modal-default-content___DJFCj .style__description___2Wy5W {\n font-size: 24px; }\n .style__hyper-modal-default-content___DJFCj button {\n width: 200px;\n height: 50px;\n font-size: 18px;\n font-weight: bold;\n background-color: white;\n color: #282c34;\n border: 1px solid #282c34;\n text-transform: uppercase;\n transition: all 0.2s ease;\n cursor: pointer; }\n .style__hyper-modal-default-content___DJFCj button:hover {\n background-color: #282c34;\n color: white; }\n"; | ||
| var styles$2 = {"hyper-modal-default-content":"style__hyper-modal-default-content___DJFCj","title":"style__title___R9lS5","description":"style__description___2Wy5W"}; | ||
| styleInject(css_248z$2); | ||
| var DefaultModalContent = function (props) { | ||
| var ariaEnabled = props.ariaEnabled, ariaProps = props.ariaProps, handleClose = props.handleClose; | ||
| var labelId = ariaEnabled && ariaProps | ||
| ? ariaProps['aria-labelledby'] | ||
| : undefined; | ||
| var descriptionId = ariaEnabled && ariaProps | ||
| ? ariaProps['aria-describedby'] | ||
| : undefined; | ||
| return (React.createElement("div", { className: styles$2.hyperModalDefaultContent }, | ||
| React.createElement("div", { className: styles$2.title, id: labelId }, "Hyper modal"), | ||
| React.createElement("div", { className: styles$2.description, id: descriptionId }, "Fully customizable and accessible modal"), | ||
| React.createElement("button", { type: "button", onClick: handleClose }, "Close modal"))); | ||
| }; | ||
| var defaultProps = { | ||
| ariaEnabled: true, | ||
| ariaProps: { | ||
| 'aria-describedby': 'hyper-modal-description', | ||
| 'aria-labelledby': 'hyper-modal-title', | ||
| role: 'dialog', | ||
| }, | ||
| disableScroll: true, | ||
| childrenMode: true, | ||
| closeDebounceTimeout: 0, | ||
| closeIconPosition: { | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }, | ||
| closeOnCloseIconClick: true, | ||
| closeOnDimmerClick: true, | ||
| closeOnEscClick: true, | ||
| dimmerEnabled: true, | ||
| isFullscreen: false, | ||
| portalMode: false, | ||
| position: { | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| stackable: false, | ||
| stackableIndex: 0, | ||
| stackContentSettings: { | ||
| widthRatio: 4, | ||
| topOffsetRatio: 2, | ||
| transition: 'all 0.3s ease', | ||
| opacityRatio: 0.2, | ||
| } | ||
| }; | ||
| var buildContentStyle = function (position) { | ||
| var defaultStyles = __assign({ display: 'flex' }, defaultProps.position); | ||
| if (position) { | ||
| return __assign(__assign({}, defaultStyles), position); | ||
| } | ||
| return defaultStyles; | ||
| }; | ||
| var convertObjectToString = function (classes) { | ||
| if (!classes) { | ||
| return ''; | ||
| } | ||
| return Object | ||
| .keys(classes) | ||
| .filter(function (key) { return !!classes[key]; }) | ||
| .reduce(function (classString, item) { return (classString | ||
| ? "" + classString + (item ? " " + item : '') | ||
| : "" + item); }, ''); | ||
| }; | ||
| var classnames = function () { | ||
| var classes = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| classes[_i] = arguments[_i]; | ||
| } | ||
| if (classes[0] && typeof classes[0] === 'string') { | ||
| return classes.join(' '); | ||
| } | ||
| return convertObjectToString(classes[0]); | ||
| }; | ||
| var createElement = function (className) { | ||
| var currentNode = document.getElementById('hyper-modal-portal-id'); | ||
| if (!currentNode) { | ||
| currentNode = document.createElement('div'); | ||
| currentNode.setAttribute('id', 'hyper-modal-portal-id'); | ||
| document.body.appendChild(currentNode); | ||
| } | ||
| if (className && !currentNode.classList.contains(className)) { | ||
| currentNode.classList.add(className); | ||
| } | ||
| return currentNode; | ||
| }; | ||
| var defferCall = function (func, timeout, args) { | ||
| if (timeout === void 0) { timeout = 500; } | ||
| if (args === void 0) { args = {}; } | ||
| return new Promise(function (resolve) { | ||
| setTimeout(function () { | ||
| func(args); | ||
| resolve(); | ||
| }, timeout); | ||
| }); | ||
| }; | ||
| var css_248z$3 = ".style__stack-wrapper___2WYMj {\n position: relative;\n width: 60%;\n height: 60%;\n display: flex;\n justify-content: center; }\n\n.style__hyper-modal-content-wrapper___gGCZb {\n position: absolute;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n z-index: 5;\n border-radius: 10px;\n overflow: auto; }\n .style__hyper-modal-content-wrapper___gGCZb.style__fullscreen___3hAeZ {\n width: 100%;\n height: 100%; }\n .style__hyper-modal-content-wrapper___gGCZb .style__hyper-close-icon-wrapper___1dQPm {\n position: absolute;\n display: block;\n cursor: pointer;\n width: 40px;\n height: 40px;\n top: 20px;\n right: 20px;\n transition: all 0.1s ease; }\n .style__hyper-modal-content-wrapper___gGCZb .style__hyper-close-icon-wrapper___1dQPm:hover {\n transform: rotate(90deg); }\n"; | ||
| var styles$3 = {"stack-wrapper":"style__stack-wrapper___2WYMj","hyper-modal-content-wrapper":"style__hyper-modal-content-wrapper___gGCZb","fullscreen":"style__fullscreen___3hAeZ","hyper-close-icon-wrapper":"style__hyper-close-icon-wrapper___1dQPm"}; | ||
| styleInject(css_248z$3); | ||
| var ModalStack = function (_a) { | ||
| var children = _a.children, classes = _a.classes, closeIcon = _a.closeIcon, getProps = _a.getProps, handleClose = _a.handleClose, isFullscreen = _a.isFullscreen, modalContentRef = _a.modalContentRef, _b = _a.stackableIndex, stackableIndex = _b === void 0 ? 0 : _b, props = __rest(_a, ["children", "classes", "closeIcon", "getProps", "handleClose", "isFullscreen", "modalContentRef", "stackableIndex"]); | ||
| return (React.createElement("div", __assign({}, props, { className: styles$3.stackWrapper }), React.Children.toArray(children).slice(0, stackableIndex + 1).map(function (child, index, array) { | ||
| var _a; | ||
| return (React.createElement("div", __assign({ key: "content-" + index, "data-type": "hyper-modal-content" }, getProps(index, child.props, array.length), { className: classnames((_a = {}, | ||
| _a[styles$3.hyperModalContentWrapper] = true, | ||
| _a.fullscreen = isFullscreen || false, | ||
| _a[(classes && classes.contentClassName) || ''] = true, | ||
| _a)), ref: modalContentRef }), | ||
| child, | ||
| closeIcon)); | ||
| }))); | ||
| }; | ||
| var css_248z$4 = ".style__hyper-modal-wrapper___3sRTj {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n visibility: hidden;\n opacity: 0;\n transition: all 0.3s ease; }\n .style__hyper-modal-wrapper___3sRTj.style__visible___uofxI {\n visibility: visible;\n opacity: 1; }\n .style__hyper-modal-wrapper___3sRTj .style__hyper-modal-content-wrapper___1-Dl8 {\n position: relative;\n background-color: #ffffff;\n width: 60%;\n height: 60%;\n z-index: 5;\n border-radius: 10px;\n overflow: auto; }\n .style__hyper-modal-wrapper___3sRTj .style__hyper-modal-content-wrapper___1-Dl8.style__fullscreen___wa9Kx {\n width: 100%;\n height: 100%; }\n\n.style__hyper-dimmer-wrapper___NdrSh {\n background-color: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1; }\n\n.style__hyper-close-icon-wrapper___3w-od {\n position: absolute;\n display: block;\n cursor: pointer;\n width: 40px;\n height: 40px;\n top: 20px;\n right: 20px;\n transition: all 0.1s ease; }\n .style__hyper-close-icon-wrapper___3w-od:hover {\n transform: rotate(90deg); }\n\n.style__body-noscroll___tl8SX {\n overflow: hidden; }\n"; | ||
| var styles$4 = {"hyper-modal-wrapper":"style__hyper-modal-wrapper___3sRTj","visible":"style__visible___uofxI","hyper-modal-content-wrapper":"style__hyper-modal-content-wrapper___1-Dl8","fullscreen":"style__fullscreen___wa9Kx","hyper-dimmer-wrapper":"style__hyper-dimmer-wrapper___NdrSh","hyper-close-icon-wrapper":"style__hyper-close-icon-wrapper___3w-od","body-noscroll":"style__body-noscroll___tl8SX"}; | ||
| styleInject(css_248z$4); | ||
| var renderButton = function (_a) { | ||
| var renderOpenButton = _a.renderOpenButton, open = _a.open; | ||
| if (renderOpenButton) { | ||
| if (typeof renderOpenButton === 'boolean') { | ||
| return (React.createElement(DefaultButton, { onClick: open })); | ||
| } | ||
| return renderOpenButton(open); | ||
| } | ||
| return (null); | ||
| }; | ||
| var renderCloseIcon = function (_a) { | ||
| var classes = _a.classes, renderCloseIconProp = _a.renderCloseIconProp, closeOnCloseIconClick = _a.closeOnCloseIconClick, closeIconPosition = _a.closeIconPosition, close = _a.close; | ||
| var iconClassNames = closeIconPosition | ||
| ? classnames(styles$4.hyperCloseIconWrapper, closeIconPosition.horizontal, closeIconPosition.vertical) | ||
| : styles$4.hyperCloseIconWrapper; | ||
| return (React.createElement("div", { "data-name": "close-icon", className: classnames(iconClassNames, classes && classes.closeIconClassName), onClick: closeOnCloseIconClick ? close : undefined }, renderCloseIconProp ? renderCloseIconProp() : (React.createElement(DefaultCloseIcon, null)))); | ||
| }; | ||
| var renderDimmer = function (_a) { | ||
| var classes = _a.classes, closeOnDimmerClick = _a.closeOnDimmerClick, close = _a.close; | ||
| return (React.createElement("div", { className: classnames(styles$4.hyperDimmerWrapper, classes && classes.dimmerClassName), onClick: closeOnDimmerClick ? close : undefined })); | ||
| }; | ||
| var ESC_KEY = 27; | ||
| var WRAPPER_COMPONENT_ID = 'hyper-modal-wrapper_component_id'; | ||
| var HyperModal = function (_a) { | ||
| var afterClose = _a.afterClose, _b = _a.ariaEnabled, ariaEnabled = _b === void 0 ? defaultProps.ariaEnabled : _b, _c = _a.ariaProps, ariaProps = _c === void 0 ? defaultProps.ariaProps : _c, beforeClose = _a.beforeClose, children = _a.children, _d = _a.childrenMode, childrenMode = _d === void 0 ? defaultProps.childrenMode : _d, classes = _a.classes, _e = _a.closeDebounceTimeout, closeDebounceTimeout = _e === void 0 ? defaultProps.closeDebounceTimeout : _e, _f = _a.closeIconPosition, closeIconPosition = _f === void 0 ? defaultProps.closeIconPosition : _f, _g = _a.closeOnCloseIconClick, closeOnCloseIconClick = _g === void 0 ? defaultProps.closeOnCloseIconClick : _g, _h = _a.closeOnDimmerClick, closeOnDimmerClick = _h === void 0 ? defaultProps.closeOnDimmerClick : _h, _j = _a.closeOnEscClick, closeOnEscClick = _j === void 0 ? defaultProps.closeOnEscClick : _j, _k = _a.dimmerEnabled, dimmerEnabled = _k === void 0 ? defaultProps.dimmerEnabled : _k, _l = _a.disableScroll, disableScroll = _l === void 0 ? defaultProps.disableScroll : _l, _m = _a.isFullscreen, isFullscreen = _m === void 0 ? defaultProps.isFullscreen : _m, isOpen = _a.isOpen, modalContentRef = _a.modalContentRef, modalWrapperRef = _a.modalWrapperRef, _o = _a.portalMode, portalMode = _o === void 0 ? defaultProps.portalMode : _o, portalNode = _a.portalNode, _p = _a.position, position = _p === void 0 ? defaultProps.position : _p, renderCloseIconProp = _a.renderCloseIcon, renderContent = _a.renderContent, renderOpenButton = _a.renderOpenButton, requestClose = _a.requestClose, _q = _a.stackable, stackable = _q === void 0 ? defaultProps.stackable : _q, _r = _a.stackableIndex, stackableIndex = _r === void 0 ? defaultProps.stackableIndex : _r, _s = _a.stackContentSettings, stackContentSettings = _s === void 0 ? defaultProps.stackContentSettings : _s, unmountOnClose = _a.unmountOnClose; | ||
| var _t = React.useState(isOpen || false), isInnerOpen = _t[0], setInnerOpen = _t[1]; | ||
| React.useEffect(function () { | ||
| if (typeof isOpen !== 'undefined') { | ||
| setInnerOpen(isOpen); | ||
| } | ||
| }, [isOpen]); | ||
| var openModal = React.useCallback(function () { | ||
| setInnerOpen(true); | ||
| }, []); | ||
| var closeModal = React.useCallback(function () { | ||
| setInnerOpen(false); | ||
| }, []); | ||
| var handleAfterClose = React.useCallback(function () { | ||
| if (afterClose) { | ||
| afterClose(); | ||
| } | ||
| }, [afterClose]); | ||
| var handleClose = React.useCallback(function () { | ||
| if (beforeClose) { | ||
| beforeClose(); | ||
| } | ||
| if (closeDebounceTimeout) { | ||
| return defferCall(function () { | ||
| closeModal(); | ||
| if (requestClose) { | ||
| requestClose(); | ||
| } | ||
| handleAfterClose(); | ||
| }, closeDebounceTimeout); | ||
| } | ||
| closeModal(); | ||
| if (requestClose) { | ||
| requestClose(); | ||
| } | ||
| handleAfterClose(); | ||
| return true; | ||
| }, [beforeClose, closeDebounceTimeout, closeModal, handleAfterClose, requestClose]); | ||
| var handleKeyDown = React.useCallback(function (event) { | ||
| if (closeOnEscClick && event.keyCode === ESC_KEY && isInnerOpen) { | ||
| event.stopPropagation(); | ||
| handleClose(); | ||
| } | ||
| }, [closeOnEscClick, handleClose, isInnerOpen]); | ||
| React.useEffect(function () { | ||
| document.addEventListener('keydown', handleKeyDown); | ||
| return function () { | ||
| document.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }, [handleKeyDown]); | ||
| var renderModalContent = React.useCallback(function () { | ||
| var _a; | ||
| var content = null; | ||
| if (childrenMode) { | ||
| content = children; | ||
| } | ||
| else if (renderContent) { | ||
| content = renderContent(); | ||
| } | ||
| return (React.createElement("div", { className: classnames((_a = {}, | ||
| _a[styles$4.hyperModalContentWrapper] = true, | ||
| _a.fullscreen = isFullscreen || false, | ||
| _a[(classes && classes.contentClassName) || ''] = true, | ||
| _a)), ref: modalContentRef }, | ||
| content || (React.createElement(DefaultModalContent, { ariaProps: ariaProps, ariaEnabled: ariaEnabled, handleClose: handleClose })), | ||
| renderCloseIcon({ | ||
| classes: classes, | ||
| closeOnCloseIconClick: closeOnCloseIconClick, | ||
| closeIconPosition: closeIconPosition, | ||
| close: handleClose, | ||
| renderCloseIconProp: renderCloseIconProp, | ||
| }))); | ||
| }, [ | ||
| ariaEnabled, | ||
| ariaProps, | ||
| children, | ||
| childrenMode, | ||
| classes, | ||
| closeIconPosition, | ||
| closeOnCloseIconClick, | ||
| handleClose, | ||
| isFullscreen, | ||
| modalContentRef, | ||
| renderCloseIconProp, | ||
| renderContent, | ||
| ]); | ||
| var getProps = React.useCallback(function (index, props, length) { | ||
| var _a = stackContentSettings.widthRatio, widthRatio = _a === void 0 ? defaultProps.stackContentSettings.widthRatio : _a, _b = stackContentSettings.topOffsetRatio, topOffsetRatio = _b === void 0 ? defaultProps.stackContentSettings.topOffsetRatio : _b, _c = stackContentSettings.transition, transition = _c === void 0 ? defaultProps.stackContentSettings.transition : _c, _d = stackContentSettings.opacityRatio, opacityRatio = _d === void 0 ? defaultProps.stackContentSettings.opacityRatio : _d; | ||
| return __assign(__assign({}, props), { style: { | ||
| transition: transition, | ||
| width: 100 - (length - index - 1) * widthRatio + "%", | ||
| top: 0 - (length - index - 1) * topOffsetRatio + "%", | ||
| opacity: 1 - (length - index - 1) * opacityRatio, | ||
| zIndex: 1000 - (length - index - 1) * 10, | ||
| } }); | ||
| }, []); | ||
| var renderStackModalWrapper = React.useCallback(function () { | ||
| if (children) { | ||
| var closeIcon = renderCloseIcon({ | ||
| classes: classes, | ||
| closeOnCloseIconClick: closeOnCloseIconClick, | ||
| closeIconPosition: closeIconPosition, | ||
| close: handleClose, | ||
| renderCloseIconProp: renderCloseIconProp, | ||
| }); | ||
| return children({ | ||
| classes: classes, | ||
| closeIcon: closeIcon, | ||
| getProps: getProps, | ||
| handleClose: handleClose, | ||
| isFullscreen: isFullscreen, | ||
| modalContentRef: modalContentRef, | ||
| stackableIndex: stackableIndex, | ||
| }); | ||
| } | ||
| return null; | ||
| }, [ | ||
| children, | ||
| classes, | ||
| closeIconPosition, | ||
| closeOnCloseIconClick, | ||
| getProps, | ||
| handleClose, | ||
| isFullscreen, | ||
| modalContentRef, | ||
| renderCloseIconProp, | ||
| stackableIndex, | ||
| ]); | ||
| var renderModalWrapper = React.useCallback(function () { | ||
| var _a; | ||
| return (React.createElement(ReactRemoveScroll, { forwardProps: true, enabled: disableScroll && isInnerOpen }, | ||
| React.createElement("div", { id: WRAPPER_COMPONENT_ID, className: classnames((_a = {}, | ||
| _a[styles$4.hyperModalWrapper] = true, | ||
| _a[styles$4.visible] = isInnerOpen, | ||
| _a[(classes && classes.wrapperClassName) || ''] = true, | ||
| _a)), ref: modalWrapperRef, style: buildContentStyle(position) }, | ||
| dimmerEnabled && renderDimmer({ | ||
| classes: classes, | ||
| closeOnDimmerClick: closeOnDimmerClick, | ||
| close: handleClose, | ||
| }), | ||
| stackable ? renderStackModalWrapper() : renderModalContent()))); | ||
| }, [ | ||
| disableScroll, | ||
| classes, | ||
| closeOnDimmerClick, | ||
| dimmerEnabled, | ||
| handleClose, | ||
| isInnerOpen, | ||
| modalWrapperRef, | ||
| position, | ||
| renderModalContent, | ||
| renderStackModalWrapper, | ||
| stackable, | ||
| ]); | ||
| var renderModal = React.useCallback(function () { | ||
| if (!isInnerOpen && unmountOnClose) { | ||
| return (null); | ||
| } | ||
| if (portalMode && ReactDOM.createPortal) { | ||
| var node = portalNode || createElement(classes && classes.portalWrapperClassName); | ||
| return ReactDOM.createPortal(renderModalWrapper(), node); | ||
| } | ||
| return renderModalWrapper(); | ||
| }, [ | ||
| classes, | ||
| isInnerOpen, | ||
| portalMode, | ||
| portalNode, | ||
| renderModalWrapper, | ||
| unmountOnClose, | ||
| ]); | ||
| return (React.createElement(React.Fragment, null, | ||
| renderButton({ renderOpenButton: renderOpenButton, open: openModal }), | ||
| renderModal())); | ||
| }; | ||
| exports.ModalStack = ModalStack; | ||
| exports.default = HyperModal; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("react-dom"),t=function(){return(t=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e}).apply(this,arguments)};function r(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(t[r[o]]=e[r[o]])}return t}function o(e){return e}var a=function(n){var o=n.sideCar,a=r(n,["sideCar"]);if(!o)throw new Error("Sidecar: please provide `sideCar` property to import the right car");var l=o.read();if(!l)throw new Error("Sidecar medium not found");return e.createElement(l,t({},a))};a.isSideCarExport=!0;var l=function(e){void 0===e&&(e={});var n=function(e,n){void 0===n&&(n=o);var t=[],r=!1;return{read:function(){if(r)throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");return t.length?t[t.length-1]:e},useMedium:function(e){var o=n(e,r);return t.push(o),function(){t=t.filter((function(e){return e!==o}))}},assignSyncMedium:function(e){for(r=!0;t.length;){var n=t;t=[],n.forEach(e)}t={push:function(n){return e(n)},filter:function(){return t}}},assignMedium:function(e){r=!0;var n=[];if(t.length){var o=t;t=[],o.forEach(e),n=t}var a=function(){var t=n;n=[],t.forEach(e)},l=function(){return Promise.resolve().then(a)};l(),t={push:function(e){n.push(e),l()},filter:function(e){return n=n.filter(e),t}}}}}(null);return n.options=t({async:!0,ssr:!1},e),n}();function i(n,t){return r=t,o=function(e){return n.forEach((function(n){return function(e,n){return"function"==typeof e?e(n):e&&(e.current=n),e}(n,e)}))},(a=e.useState((function(){return{value:r,callback:o,facade:{get current(){return a.value},set current(e){var n=a.value;n!==e&&(a.value=e,a.callback(e,n))}}}}))[0]).callback=o,a.facade;var r,o,a}var c=function(){},s=e.forwardRef((function(n,o){var a=e.useRef(null),s=e.useState({onScrollCapture:c,onWheelCapture:c,onTouchMoveCapture:c}),d=s[0],u=s[1],p=n.forwardProps,f=n.children,h=n.className,m=n.removeScrollBar,_=n.enabled,v=n.shards,y=n.sideCar,b=n.noIsolation,g=n.inert,w=n.allowPinchZoom,C=r(n,["forwardProps","children","className","removeScrollBar","enabled","shards","sideCar","noIsolation","inert","allowPinchZoom"]),k=y,x=t({ref:i([a,o])},C,d);return e.createElement(e.Fragment,null,_&&e.createElement(k,{sideCar:l,removeScrollBar:m,shards:v,noIsolation:b,inert:g,setCallbacks:u,allowPinchZoom:!!w,lockRef:a}),p?e.cloneElement(e.Children.only(f),x):e.createElement("div",t({},x,{className:h}),f))}));s.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},s.classNames={fullWidth:"width-before-scroll-bar",zeroRight:"right-scroll-bar-position"};function d(){if(!document)return null;var e=document.createElement("style");e.type="text/css";var n=function(){if("undefined"!=typeof __webpack_nonce__)return __webpack_nonce__}();return n&&e.setAttribute("nonce",n),e}var u=function(){var e=0,n=null;return{add:function(t){var r,o;0==e&&(n=d())&&(o=t,(r=n).styleSheet?r.styleSheet.cssText=o:r.appendChild(document.createTextNode(o)),function(e){(document.head||document.getElementsByTagName("head")[0]).appendChild(e)}(n)),e++},remove:function(){!--e&&n&&(n.parentNode&&n.parentNode.removeChild(n),n=null)}}},p=function(){var n,t=(n=u(),function(t){e.useEffect((function(){return n.add(t),function(){n.remove()}}),[])});return function(e){var n=e.styles;return t(n),null}},f={left:0,top:0,right:0,gap:0},h=function(e){return parseInt(e||"",10)||0},m=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return f;var n=function(e){var n=window.getComputedStyle(document.body),t=n["padding"===e?"paddingLeft":"marginLeft"],r=n["padding"===e?"paddingTop":"marginTop"],o=n["padding"===e?"paddingRight":"marginRight"];return[h(t),h(r),h(o)]}(e),t=document.documentElement.clientWidth,r=window.innerWidth;return{left:n[0],top:n[1],right:n[2],gap:Math.max(0,r-t+n[2]-n[0])}},_=p(),v=function(e,n,t,r){var o=e.left,a=e.top,l=e.right,i=e.gap;return void 0===t&&(t="margin"),"\n .with-scroll-bars-hidden {\n overflow: hidden "+r+";\n padding-right: "+i+"px "+r+";\n }\n body {\n overflow: hidden "+r+";\n "+[n&&"position: relative "+r+";","margin"===t&&"\n padding-left: "+o+"px;\n padding-top: "+a+"px;\n padding-right: "+l+"px;\n margin-left:0;\n margin-top:0;\n margin-right: "+i+"px "+r+";\n ","padding"===t&&"padding-right: "+i+"px "+r+";"].filter(Boolean).join("")+"\n }\n \n .right-scroll-bar-position {\n right: "+i+"px "+r+";\n }\n \n .width-before-scroll-bar {\n margin-right: "+i+"px "+r+";\n }\n \n .right-scroll-bar-position .right-scroll-bar-position {\n right: 0 "+r+";\n }\n \n .width-before-scroll-bar .width-before-scroll-bar {\n margin-right: 0 "+r+";\n }\n"},y=function(n){var t=e.useState(m(n.gapMode)),r=t[0],o=t[1];e.useEffect((function(){o(m(n.gapMode))}),[n.gapMode]);var a=n.noRelative,l=n.noImportant,i=n.gapMode,c=void 0===i?"margin":i;return e.createElement(_,{styles:v(r,!a,c,l?"":"!important")})},b=function(e,n){var t=n;do{if(g(e,t)){var r=w(e,t);if(r[1]>r[2])return!0}t=t.parentNode}while(t&&t!==document.body);return!1},g=function(e,n){return"v"===e?function(e){var n=window.getComputedStyle(e);return"hidden"!==n.overflowY&&!(n.overflowY===n.overflowX&&"visible"===n.overflowY)}(n):function(e){var n=window.getComputedStyle(e);return"hidden"!==n.overflowX&&!(n.overflowY===n.overflowX&&"visible"===n.overflowX)}(n)},w=function(e,n){return"v"===e?[(t=n).scrollTop,t.scrollHeight,t.clientHeight]:function(e){return[e.scrollLeft,e.scrollWidth,e.clientWidth]}(n);var t},C=!1;if("undefined"!=typeof window)try{var k=Object.defineProperty({},"passive",{get:function(){return C=!0,!0}});window.addEventListener("test",k,k),window.removeEventListener("test",k,k)}catch(e){C=!1}var x=!!C&&{passive:!1},E=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},S=function(e){return[e.deltaX,e.deltaY]},I=function(e){return e&&"current"in e?e.current:e},P=function(e){return"\n .block-interactivity-"+e+" {pointer-events: none;}\n .allow-interactivity-"+e+" {pointer-events: all;}\n"},O=0,R=[];var N,M=(N=function(n){var t=e.useRef([]),r=e.useRef([0,0]),o=e.useRef(),a=e.useState(O++)[0],l=e.useState((function(){return p()}))[0],i=e.useRef(n);e.useEffect((function(){i.current=n}),[n]),e.useEffect((function(){if(n.inert){document.body.classList.add("block-interactivity-"+a);var e=[n.lockRef.current].concat((n.shards||[]).map(I)).filter(Boolean);return e.forEach((function(e){return e.classList.add("allow-interactivity-"+a)})),function(){document.body.classList.remove("block-interactivity-"+a),e.forEach((function(e){return e.classList.remove("allow-interactivity-"+a)}))}}}),[n.inert,n.lockRef.current,n.shards]);var c=e.useCallback((function(e,n){if("touches"in e&&2===e.touches.length)return!i.current.allowPinchZoom;var t,a=E(e),l=r.current,c="deltaX"in e?e.deltaX:l[0]-a[0],s="deltaY"in e?e.deltaY:l[1]-a[1],d=e.target,u=Math.abs(c)>Math.abs(s)?"h":"v",p=b(u,d);if(!p)return!0;if(p?t=u:(t="v"===u?"h":"v",p=b(u,d)),!p)return!1;if(!o.current&&"changedTouches"in e&&(c||s)&&(o.current=t),!t)return!0;var f=o.current||t;return function(e,n,t,r,o){var a=r,l=t.target,i=n.contains(l),c=!1,s=a>0,d=0,u=0;do{var p=w(e,l),f=p[0],h=p[1]-p[2]-f;(f||h)&&g(e,l)&&(d+=h,u+=f),l=l.parentNode}while(!i&&l!==document.body||i&&(n.contains(l)||n===l));return(s&&(o&&0===d||!o&&a>d)||!s&&(o&&0===u||!o&&-a>u))&&(c=!0),c}(f,n,e,"h"==f?c:s,!0)}),[]),s=e.useCallback((function(e){var n=e;if(R.length&&R[R.length-1]===l){var r="deltaY"in n?S(n):E(n),o=t.current.filter((function(e){return e.name===n.type&&e.target===n.target&&(t=e.delta,o=r,t[0]===o[0]&&t[1]===o[1]);var t,o}))[0];if(o&&o.should)n.preventDefault();else if(!o){var a=(i.current.shards||[]).map(I).filter(Boolean).filter((function(e){return e.contains(n.target)}));(a.length>0?c(n,a[0]):!i.current.noIsolation)&&n.preventDefault()}}}),[]),d=e.useCallback((function(e,n,r,o){var a={name:e,delta:n,target:r,should:o};t.current.push(a),setTimeout((function(){t.current=t.current.filter((function(e){return e!==a}))}),1)}),[]),u=e.useCallback((function(e){r.current=E(e),o.current=void 0}),[]),f=e.useCallback((function(e){d(e.type,S(e),e.target,c(e,n.lockRef.current))}),[]),h=e.useCallback((function(e){d(e.type,E(e),e.target,c(e,n.lockRef.current))}),[]);e.useEffect((function(){return R.push(l),n.setCallbacks({onScrollCapture:f,onWheelCapture:f,onTouchMoveCapture:h}),document.addEventListener("wheel",s,x),document.addEventListener("touchmove",s,x),document.addEventListener("touchstart",u,x),function(){R=R.filter((function(e){return e!==l})),document.removeEventListener("wheel",s,x),document.removeEventListener("touchmove",s,x),document.removeEventListener("touchstart",u,x)}}),[]);var m=n.removeScrollBar,_=n.inert;return e.createElement(e.Fragment,null,_?e.createElement(l,{styles:P(a)}):null,m?e.createElement(y,{gapMode:"margin"}):null)},l.useMedium(N),a),j=e.forwardRef((function(n,r){return e.createElement(s,t({},n,{ref:r,sideCar:M}))}));function T(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}j.classNames=s.classNames;var D={"custom-button":"style__custom-button___3Ke9X"};T(".style__custom-button___3Ke9X {\n height: 60px;\n min-width: 200px;\n font-size: 1.2em;\n padding: 0 20px;\n border: 0;\n cursor: pointer;\n text-transform: uppercase;\n background-color: rgba(65, 70, 90, 0.5);\n box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.4);\n transition: all 0.2s ease; }\n .style__custom-button___3Ke9X:hover {\n background-color: #41465a;\n color: #e7e8ee;\n box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.6); }\n");var W=function(n){var t=n.onClick;return e.createElement("button",{type:"button",className:D.customButton,onClick:t},"open modal")},L={"hyper-close-icon":"style__hyper-close-icon___3YbbD"};T('.style__hyper-close-icon___3YbbD {\n display: block;\n background-image: url("https://api.iconify.design/iwwa:close.svg");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n width: 100%;\n height: 100%; }\n');var B=function(){return e.createElement("i",{className:L.hyperCloseIcon})},F={"hyper-modal-default-content":"style__hyper-modal-default-content___DJFCj",title:"style__title___R9lS5",description:"style__description___2Wy5W"};T(".style__hyper-modal-default-content___DJFCj {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n color: #282c34;\n overflow: auto; }\n .style__hyper-modal-default-content___DJFCj .style__title___R9lS5 {\n font-size: 30px;\n color: #282c34; }\n .style__hyper-modal-default-content___DJFCj .style__description___2Wy5W {\n font-size: 24px; }\n .style__hyper-modal-default-content___DJFCj button {\n width: 200px;\n height: 50px;\n font-size: 18px;\n font-weight: bold;\n background-color: white;\n color: #282c34;\n border: 1px solid #282c34;\n text-transform: uppercase;\n transition: all 0.2s ease;\n cursor: pointer; }\n .style__hyper-modal-default-content___DJFCj button:hover {\n background-color: #282c34;\n color: white; }\n");var z=function(n){var t=n.ariaEnabled,r=n.ariaProps,o=n.handleClose,a=t&&r?r["aria-labelledby"]:void 0,l=t&&r?r["aria-describedby"]:void 0;return e.createElement("div",{className:F.hyperModalDefaultContent},e.createElement("div",{className:F.title,id:a},"Hyper modal"),e.createElement("div",{className:F.description,id:l},"Fully customizable and accessible modal"),e.createElement("button",{type:"button",onClick:o},"Close modal"))},X={ariaEnabled:!0,ariaProps:{"aria-describedby":"hyper-modal-description","aria-labelledby":"hyper-modal-title",role:"dialog"},disableScroll:!0,childrenMode:!0,closeDebounceTimeout:0,closeIconPosition:{vertical:"top",horizontal:"right"},closeOnCloseIconClick:!0,closeOnDimmerClick:!0,closeOnEscClick:!0,dimmerEnabled:!0,isFullscreen:!1,portalMode:!1,position:{alignItems:"center",justifyContent:"center"},stackable:!1,stackableIndex:0,stackContentSettings:{widthRatio:4,topOffsetRatio:2,transition:"all 0.3s ease",opacityRatio:.2}},Y=function(e){var n=t({display:"flex"},X.position);return e?t(t({},n),e):n},Z=function(e){return e?Object.keys(e).filter((function(n){return!!e[n]})).reduce((function(e,n){return e?e+(n?" "+n:""):""+n}),""):""},A=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return e[0]&&"string"==typeof e[0]?e.join(" "):Z(e[0])},J={"stack-wrapper":"style__stack-wrapper___2WYMj","hyper-modal-content-wrapper":"style__hyper-modal-content-wrapper___gGCZb",fullscreen:"style__fullscreen___3hAeZ","hyper-close-icon-wrapper":"style__hyper-close-icon-wrapper___1dQPm"};T(".style__stack-wrapper___2WYMj {\n position: relative;\n width: 60%;\n height: 60%;\n display: flex;\n justify-content: center; }\n\n.style__hyper-modal-content-wrapper___gGCZb {\n position: absolute;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n z-index: 5;\n border-radius: 10px;\n overflow: auto; }\n .style__hyper-modal-content-wrapper___gGCZb.style__fullscreen___3hAeZ {\n width: 100%;\n height: 100%; }\n .style__hyper-modal-content-wrapper___gGCZb .style__hyper-close-icon-wrapper___1dQPm {\n position: absolute;\n display: block;\n cursor: pointer;\n width: 40px;\n height: 40px;\n top: 20px;\n right: 20px;\n transition: all 0.1s ease; }\n .style__hyper-modal-content-wrapper___gGCZb .style__hyper-close-icon-wrapper___1dQPm:hover {\n transform: rotate(90deg); }\n");var G={"hyper-modal-wrapper":"style__hyper-modal-wrapper___3sRTj",visible:"style__visible___uofxI","hyper-modal-content-wrapper":"style__hyper-modal-content-wrapper___1-Dl8",fullscreen:"style__fullscreen___wa9Kx","hyper-dimmer-wrapper":"style__hyper-dimmer-wrapper___NdrSh","hyper-close-icon-wrapper":"style__hyper-close-icon-wrapper___3w-od","body-noscroll":"style__body-noscroll___tl8SX"};T(".style__hyper-modal-wrapper___3sRTj {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n visibility: hidden;\n opacity: 0;\n transition: all 0.3s ease; }\n .style__hyper-modal-wrapper___3sRTj.style__visible___uofxI {\n visibility: visible;\n opacity: 1; }\n .style__hyper-modal-wrapper___3sRTj .style__hyper-modal-content-wrapper___1-Dl8 {\n position: relative;\n background-color: #ffffff;\n width: 60%;\n height: 60%;\n z-index: 5;\n border-radius: 10px;\n overflow: auto; }\n .style__hyper-modal-wrapper___3sRTj .style__hyper-modal-content-wrapper___1-Dl8.style__fullscreen___wa9Kx {\n width: 100%;\n height: 100%; }\n\n.style__hyper-dimmer-wrapper___NdrSh {\n background-color: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1; }\n\n.style__hyper-close-icon-wrapper___3w-od {\n position: absolute;\n display: block;\n cursor: pointer;\n width: 40px;\n height: 40px;\n top: 20px;\n right: 20px;\n transition: all 0.1s ease; }\n .style__hyper-close-icon-wrapper___3w-od:hover {\n transform: rotate(90deg); }\n\n.style__body-noscroll___tl8SX {\n overflow: hidden; }\n");var K=function(n){var t=n.classes,r=n.renderCloseIconProp,o=n.closeOnCloseIconClick,a=n.closeIconPosition,l=n.close,i=a?A(G.hyperCloseIconWrapper,a.horizontal,a.vertical):G.hyperCloseIconWrapper;return e.createElement("div",{"data-name":"close-icon",className:A(i,t&&t.closeIconClassName),onClick:o?l:void 0},r?r():e.createElement(B,null))};exports.ModalStack=function(n){var o=n.children,a=n.classes,l=n.closeIcon,i=n.getProps,c=(n.handleClose,n.isFullscreen),s=n.modalContentRef,d=n.stackableIndex,u=void 0===d?0:d,p=r(n,["children","classes","closeIcon","getProps","handleClose","isFullscreen","modalContentRef","stackableIndex"]);return e.createElement("div",t({},p,{className:J.stackWrapper}),e.Children.toArray(o).slice(0,u+1).map((function(n,r,o){var d;return e.createElement("div",t({key:"content-"+r,"data-type":"hyper-modal-content"},i(r,n.props,o.length),{className:A((d={},d[J.hyperModalContentWrapper]=!0,d.fullscreen=c||!1,d[a&&a.contentClassName||""]=!0,d)),ref:s}),n,l)})))},exports.default=function(r){var o=r.afterClose,a=r.ariaEnabled,l=void 0===a?X.ariaEnabled:a,i=r.ariaProps,c=void 0===i?X.ariaProps:i,s=r.beforeClose,d=r.children,u=r.childrenMode,p=void 0===u?X.childrenMode:u,f=r.classes,h=r.closeDebounceTimeout,m=void 0===h?X.closeDebounceTimeout:h,_=r.closeIconPosition,v=void 0===_?X.closeIconPosition:_,y=r.closeOnCloseIconClick,b=void 0===y?X.closeOnCloseIconClick:y,g=r.closeOnDimmerClick,w=void 0===g?X.closeOnDimmerClick:g,C=r.closeOnEscClick,k=void 0===C?X.closeOnEscClick:C,x=r.dimmerEnabled,E=void 0===x?X.dimmerEnabled:x,S=r.disableScroll,I=void 0===S?X.disableScroll:S,P=r.isFullscreen,O=void 0===P?X.isFullscreen:P,R=r.isOpen,N=r.modalContentRef,M=r.modalWrapperRef,T=r.portalMode,D=void 0===T?X.portalMode:T,L=r.portalNode,B=r.position,F=void 0===B?X.position:B,Z=r.renderCloseIcon,J=r.renderContent,q=r.renderOpenButton,H=r.requestClose,Q=r.stackable,U=void 0===Q?X.stackable:Q,V=r.stackableIndex,$=void 0===V?X.stackableIndex:V,ee=r.stackContentSettings,ne=void 0===ee?X.stackContentSettings:ee,te=r.unmountOnClose,re=e.useState(R||!1),oe=re[0],ae=re[1];e.useEffect((function(){void 0!==R&&ae(R)}),[R]);var le=e.useCallback((function(){ae(!0)}),[]),ie=e.useCallback((function(){ae(!1)}),[]),ce=e.useCallback((function(){o&&o()}),[o]),se=e.useCallback((function(){return s&&s(),m?(e=function(){ie(),H&&H(),ce()},void 0===(n=m)&&(n=500),void 0===t&&(t={}),new Promise((function(r){setTimeout((function(){e(t),r()}),n)}))):(ie(),H&&H(),ce(),!0);var e,n,t}),[s,m,ie,ce,H]),de=e.useCallback((function(e){k&&27===e.keyCode&&oe&&(e.stopPropagation(),se())}),[k,se,oe]);e.useEffect((function(){return document.addEventListener("keydown",de),function(){document.removeEventListener("keydown",de)}}),[de]);var ue=e.useCallback((function(){var n,t=null;return p?t=d:J&&(t=J()),e.createElement("div",{className:A((n={},n[G.hyperModalContentWrapper]=!0,n.fullscreen=O||!1,n[f&&f.contentClassName||""]=!0,n)),ref:N},t||e.createElement(z,{ariaProps:c,ariaEnabled:l,handleClose:se}),K({classes:f,closeOnCloseIconClick:b,closeIconPosition:v,close:se,renderCloseIconProp:Z}))}),[l,c,d,p,f,v,b,se,O,N,Z,J]),pe=e.useCallback((function(e,n,r){var o=ne.widthRatio,a=void 0===o?X.stackContentSettings.widthRatio:o,l=ne.topOffsetRatio,i=void 0===l?X.stackContentSettings.topOffsetRatio:l,c=ne.transition,s=void 0===c?X.stackContentSettings.transition:c,d=ne.opacityRatio,u=void 0===d?X.stackContentSettings.opacityRatio:d;return t(t({},n),{style:{transition:s,width:100-(r-e-1)*a+"%",top:0-(r-e-1)*i+"%",opacity:1-(r-e-1)*u,zIndex:1e3-10*(r-e-1)}})}),[]),fe=e.useCallback((function(){if(d){var e=K({classes:f,closeOnCloseIconClick:b,closeIconPosition:v,close:se,renderCloseIconProp:Z});return d({classes:f,closeIcon:e,getProps:pe,handleClose:se,isFullscreen:O,modalContentRef:N,stackableIndex:$})}return null}),[d,f,v,b,pe,se,O,N,Z,$]),he=e.useCallback((function(){var n;return e.createElement(j,{forwardProps:!0,enabled:I&&oe},e.createElement("div",{id:"hyper-modal-wrapper_component_id",className:A((n={},n[G.hyperModalWrapper]=!0,n[G.visible]=oe,n[f&&f.wrapperClassName||""]=!0,n)),ref:M,style:Y(F)},E&&function(n){var t=n.classes,r=n.closeOnDimmerClick,o=n.close;return e.createElement("div",{className:A(G.hyperDimmerWrapper,t&&t.dimmerClassName),onClick:r?o:void 0})}({classes:f,closeOnDimmerClick:w,close:se}),U?fe():ue()))}),[I,f,w,E,se,oe,M,F,ue,fe,U]),me=e.useCallback((function(){if(!oe&&te)return null;if(D&&n.createPortal){var e=L||(t=f&&f.portalWrapperClassName,(r=document.getElementById("hyper-modal-portal-id"))||((r=document.createElement("div")).setAttribute("id","hyper-modal-portal-id"),document.body.appendChild(r)),t&&!r.classList.contains(t)&&r.classList.add(t),r);return n.createPortal(he(),e)}var t,r;return he()}),[f,oe,D,L,he,te]);return e.createElement(e.Fragment,null,function(n){var t=n.renderOpenButton,r=n.open;return t?"boolean"==typeof t?e.createElement(W,{onClick:r}):t(r):null}({renderOpenButton:q,open:le}),me())}; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "react-hyper-modal", | ||
| "version": "1.2.6", | ||
| "version": "1.2.7", | ||
| "description": "Fully customizable and accessible modal react component", | ||
@@ -77,2 +77,4 @@ "author": "Aleksey Makhankov", | ||
| "rollup-plugin-progress": "^1.1.1", | ||
| "rollup-plugin-size-snapshot": "^0.11.0", | ||
| "rollup-plugin-terser": "^5.3.0", | ||
| "rollup-plugin-typescript2": "^0.25.3", | ||
@@ -79,0 +81,0 @@ "rollup-plugin-url": "^1.4.0", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-29.51%
161808
- Dev dependency count
- increased by4%
52
- Lines of code
- decreased by-82.9%
352
- Number of low quality alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes