@schedule-x/date-picker - npm Package Compare versions

Comparing version 1.27.1 to 1.28.0

./dist/core.cjs.js

@@ -82,2 +82,3 @@ 'use strict';
     const datePickerLabelId = randomStringId();
+    const inputWrapperId = randomStringId();
     const $app = hooks.useContext(AppContext);
@@ -93,3 +94,16 @@ const getLocalizedDate = (dateString) => {
     const [wrapperClasses, setWrapperClasses] = hooks.useState([]);
+    const setInputDOMRect = () => {
+        const inputWrapperEl = document.getElementById(inputWrapperId);
+        if (inputWrapperEl === null)
+            return;
+        $app.datePickerState.inputRect.value = {
+            x: inputWrapperEl.getBoundingClientRect().left + window.scrollX,
+            y: inputWrapperEl.getBoundingClientRect().top + window.scrollY,
+            height: inputWrapperEl.getBoundingClientRect().height,
+            width: inputWrapperEl.getBoundingClientRect().width,
+        };
+    };
     hooks.useEffect(() => {
+        if ($app.config.teleportTo)
+            setInputDOMRect();
         const newClasses = ['sx__date-input-wrapper'];
@@ -136,3 +150,3 @@ if ($app.datePickerState.isOpen.value)
     };
-    return (u(preact.Fragment, { children: u("div", { className: wrapperClasses.join(' '), children: [u("label", { for: datePickerInputId, id: datePickerLabelId, className: "sx__date-input-label", children: $app.translate('Date') }), u("input", { id: datePickerInputId, "aria-describedby": datePickerLabelId, value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", className: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), u("button", { "aria-label": $app.translate('Choose Date'), onKeyDown: handleButtonKeyDown, className: "sx__date-input-chevron-wrapper", children: u("img", { className: "sx__date-input-chevron", src: img, alt: "" }) })] }) }));
+    return (u(preact.Fragment, { children: u("div", { className: wrapperClasses.join(' '), id: inputWrapperId, children: [u("label", { for: datePickerInputId, id: datePickerLabelId, className: "sx__date-input-label", children: $app.translate('Date') }), u("input", { id: datePickerInputId, "aria-describedby": datePickerLabelId, value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", className: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), u("button", { "aria-label": $app.translate('Choose Date'), onKeyDown: handleButtonKeyDown, className: "sx__date-input-chevron-wrapper", children: u("img", { className: "sx__date-input-chevron", src: img, alt: "" }) })] }) }));
 }
@@ -402,5 +416,24 @@
     }, []);
-    return (u(preact.Fragment, { children: u("div", { "data-testid": "date-picker-popup", className: popupClasses.join(' '), children: datePickerView === DatePickerView.MONTH_DAYS ? (u(MonthView, { seatYearsView: () => setDatePickerView(DatePickerView.YEARS) })) : (u(YearsView, { setMonthView: () => setDatePickerView(DatePickerView.MONTH_DAYS) })) }) }));
+    const remSize = Number(getComputedStyle(document.documentElement).fontSize.split('px')[0]);
+    const popupHeight = 362;
+    const popupWidth = 332;
+    const fixedPositionStyle = {
+        top: $app.config.placement.includes('bottom')
+            ? $app.datePickerState.inputRect.value.height +
+                $app.datePickerState.inputRect.value.y +
+                1 // 1px border
+            : $app.datePickerState.inputRect.value.y - remSize - popupHeight, // subtract remsize to leave room for label text
+        left: $app.config.placement.includes('start')
+            ? $app.datePickerState.inputRect.value.x
+            : $app.datePickerState.inputRect.value.x +
+                $app.datePickerState.inputRect.value.width -
+                popupWidth,
+        width: popupWidth,
+        position: 'fixed',
+    };
+    return (u(preact.Fragment, { children: u("div", { style: $app.config.teleportTo ? fixedPositionStyle : undefined, "data-testid": "date-picker-popup", className: popupClasses.join(' '), children: datePickerView === DatePickerView.MONTH_DAYS ? (u(MonthView, { seatYearsView: () => setDatePickerView(DatePickerView.YEARS) })) : (u(YearsView, { setMonthView: () => setDatePickerView(DatePickerView.MONTH_DAYS) })) }) }));
 }
 
+function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}(E.prototype=new preact.Component).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var x=preact.options.__b;preact.options.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),x&&x(n);};var O=preact.options.__e;preact.options.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);O(n,t,e,r);};var T=preact.options.unmount;function F(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return F(n,t,e)})),n}function I(n,t,e){return n&&e&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return I(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.appendChild(n.__e),n.__c.__e=!0,n.__c.__P=e)),n}function L(){this.__u=0,this.t=null,this.__b=null;}function U(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function M(){this.u=null,this.o=null;}preact.options.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&32&n.__u&&(n.type=null),T&&T(n);},(L.prototype=new preact.Component).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=U(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=I(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}};r.__u++||32&t.__u||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},L.prototype.componentWillUnmount=function(){this.t=[];},L.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=F(this.__b,r,o.__O=o.__P);}this.__b=null;}var i=e.__a&&preact.createElement(preact.Fragment,null,n.fallback);return i&&(i.__u&=-33),[preact.createElement(preact.Fragment,null,e.__a?null:n.children),i]};var V=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};function W(n){return this.getChildContext=function(){return n.context},n.children}function P(n){var e=this,r=n.i;e.componentWillUnmount=function(){preact.render(null,e.l),e.l=null,e.i=null;},e.i&&e.i!==r&&e.componentWillUnmount(),e.l||(e.i=r,e.l={nodeType:1,parentNode:r,childNodes:[],appendChild:function(n){this.childNodes.push(n),e.i.appendChild(n);},insertBefore:function(n,t){this.childNodes.push(n),e.i.appendChild(n);},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),e.i.removeChild(n);}}),preact.render(preact.createElement(W,{context:e.context},n.__v),e.l);}function j(n,e){var r=preact.createElement(P,{__v:n,i:e});return r.containerInfo=e,r}(M.prototype=new preact.Component).__a=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),V(t,n,r)):u();};e?e(o):o();}},M.prototype.render=function(n){this.u=null,this.o=new Map;var t=preact.toChildArray(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},M.prototype.componentDidUpdate=M.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){V(n,e,t);});};var z="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,B=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,H=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Z=/[A-Z0-9]/g,Y="undefined"!=typeof document,$=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(n)};preact.Component.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(preact.Component.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n});}});});var J=preact.options.event;function K(){}function Q(){return this.cancelBubble}function X(){return this.defaultPrevented}preact.options.event=function(n){return J&&(n=J(n)),n.persist=K,n.isPropagationStopped=Q,n.isDefaultPrevented=X,n.nativeEvent=n};var tn={enumerable:!1,configurable:!0,get:function(){return this.class}},en=preact.options.vnode;preact.options.vnode=function(n){"string"==typeof n.type&&function(n){var t=n.props,e=n.type,u={};for(var o in t){var i=t[o];if(!("value"===o&&"defaultValue"in t&&null==i||Y&&"children"===o&&"noscript"===e||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===i?i="":"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==e&&"textarea"!==e||$(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":H.test(o)?o=l:-1===e.indexOf("-")&&B.test(o)?o=o.replace(Z,"-$&").toLowerCase():null===i&&(i=void 0):l=o="oninput","oninput"===l&&u[o=l]&&(o="oninputCapture"),u[o]=i;}}"select"==e&&u.multiple&&Array.isArray(u.value)&&(u.value=preact.toChildArray(t.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value);})),"select"==e&&null!=u.defaultValue&&(u.value=preact.toChildArray(t.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value;})),t.class&&!t.className?(u.class=t.class,Object.defineProperty(u,"className",tn)):(t.className&&!t.class||t.class&&t.className)&&(u.class=u.className=t.className),n.props=u;}(n),n.$$typeof=z,en&&en(n);};var rn=preact.options.__r;preact.options.__r=function(n){rn&&rn(n),n.__c;};var un=preact.options.diffed;preact.options.diffed=function(n){un&&un(n);var t=n.props,e=n.__e;null!=e&&"textarea"===n.type&&"value"in t&&t.value!==e.value&&(e.value=null==t.value?"":t.value);};
+
 function AppWrapper({ $app }) {
@@ -413,3 +446,6 @@ var _a, _b;
         classes.push('has-full-width');
-    return (u(preact.Fragment, { children: u("div", { className: classes.join(' '), children: u(AppContext.Provider, { value: $app, children: [u(AppInput, {}), $app.datePickerState.isOpen.value && u(AppPopup, {})] }) }) }));
+    let appPopupJSX = u(AppPopup, {});
+    if ($app.config.teleportTo)
+        appPopupJSX = j(appPopupJSX, $app.config.teleportTo);
+    return (u(preact.Fragment, { children: u("div", { className: classes.join(' '), children: u(AppContext.Provider, { value: $app, children: [u(AppInput, {}), $app.datePickerState.isOpen.value && appPopupJSX] }) }) }));
 }
@@ -697,2 +733,3 @@
     return {
+        inputRect: signals.signal({ x: 0, y: 0, width: 0, height: 0, right: 0 }),
         isOpen,
@@ -796,3 +833,3 @@ datePickerView,
 class ConfigImpl {
-    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}) {
+    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}, teleportTo) {
         Object.defineProperty(this, "locale", {
@@ -840,2 +877,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "teleportTo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: teleportTo
+        });
     }
@@ -888,5 +931,11 @@ }
         });
+        Object.defineProperty(this, "teleportTo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
     }
     build() {
-        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style);
+        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style, this.teleportTo);
     }
@@ -921,2 +970,6 @@ withLocale(locale) {
     }
+    withTeleportTo(teleportTo) {
+        this.teleportTo = teleportTo;
+        return this;
+    }
 }
@@ -1372,2 +1425,30 @@
 
+const datePickerMkMK = {
+    Date: 'Датум',
+    'MM/DD/YYYY': 'DD/MM/YYYY',
+    'Next month': 'Следен месец',
+    'Previous month': 'Претходен месец',
+    'Choose Date': 'Избери Датум',
+    'Select View': 'Избери Преглед',
+};
+
+const calendarMkMK = {
+    Today: 'Денес',
+    Month: 'Месец',
+    Week: 'Недела',
+    Day: 'Ден',
+    events: 'настани',
+    event: 'настан',
+    'No events': 'Нема настани',
+    'Next period': 'Следен период',
+    'Previous period': 'Претходен период',
+    to: 'до', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Целодневни и повеќедневни настани',
+};
+
+const mkMK = {
+    ...datePickerMkMK,
+    ...calendarMkMK,
+};
+
 class InvalidLocaleError extends Error {
@@ -1401,2 +1482,3 @@ constructor(locale) {
     daDK,
+    mkMK,
     plPL,
@@ -1418,2 +1500,3 @@ esES,
         .withStyle(config.style)
+        .withTeleportTo(config.teleportTo)
         .build();
@@ -1420,0 +1503,0 @@ const timeUnitsImpl = new TimeUnitsBuilder()

dist/core.cjs.d.ts

@@ -37,2 +37,3 @@ import { Signal } from "@preact/signals";
     style: DatePickerStyle;
+    teleportTo?: HTMLElement;
 }
@@ -75,2 +76,8 @@ interface DatePickerConfigExternal extends Partial<Omit<DatePickerConfigInternal, "placement">> {
     datePickerView: Signal<DatePickerView>;
+    inputRect: Signal<{
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    }>;
     open(): void;
@@ -77,0 +84,0 @@ close(): void;

dist/core.cjs.js

@@ -82,2 +82,3 @@ 'use strict';
     const datePickerLabelId = randomStringId();
+    const inputWrapperId = randomStringId();
     const $app = hooks.useContext(AppContext);
@@ -93,3 +94,16 @@ const getLocalizedDate = (dateString) => {
     const [wrapperClasses, setWrapperClasses] = hooks.useState([]);
+    const setInputDOMRect = () => {
+        const inputWrapperEl = document.getElementById(inputWrapperId);
+        if (inputWrapperEl === null)
+            return;
+        $app.datePickerState.inputRect.value = {
+            x: inputWrapperEl.getBoundingClientRect().left + window.scrollX,
+            y: inputWrapperEl.getBoundingClientRect().top + window.scrollY,
+            height: inputWrapperEl.getBoundingClientRect().height,
+            width: inputWrapperEl.getBoundingClientRect().width,
+        };
+    };
     hooks.useEffect(() => {
+        if ($app.config.teleportTo)
+            setInputDOMRect();
         const newClasses = ['sx__date-input-wrapper'];
@@ -136,3 +150,3 @@ if ($app.datePickerState.isOpen.value)
     };
-    return (u(preact.Fragment, { children: u("div", { className: wrapperClasses.join(' '), children: [u("label", { for: datePickerInputId, id: datePickerLabelId, className: "sx__date-input-label", children: $app.translate('Date') }), u("input", { id: datePickerInputId, "aria-describedby": datePickerLabelId, value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", className: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), u("button", { "aria-label": $app.translate('Choose Date'), onKeyDown: handleButtonKeyDown, className: "sx__date-input-chevron-wrapper", children: u("img", { className: "sx__date-input-chevron", src: img, alt: "" }) })] }) }));
+    return (u(preact.Fragment, { children: u("div", { className: wrapperClasses.join(' '), id: inputWrapperId, children: [u("label", { for: datePickerInputId, id: datePickerLabelId, className: "sx__date-input-label", children: $app.translate('Date') }), u("input", { id: datePickerInputId, "aria-describedby": datePickerLabelId, value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", className: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), u("button", { "aria-label": $app.translate('Choose Date'), onKeyDown: handleButtonKeyDown, className: "sx__date-input-chevron-wrapper", children: u("img", { className: "sx__date-input-chevron", src: img, alt: "" }) })] }) }));
 }
@@ -402,5 +416,24 @@
     }, []);
-    return (u(preact.Fragment, { children: u("div", { "data-testid": "date-picker-popup", className: popupClasses.join(' '), children: datePickerView === DatePickerView.MONTH_DAYS ? (u(MonthView, { seatYearsView: () => setDatePickerView(DatePickerView.YEARS) })) : (u(YearsView, { setMonthView: () => setDatePickerView(DatePickerView.MONTH_DAYS) })) }) }));
+    const remSize = Number(getComputedStyle(document.documentElement).fontSize.split('px')[0]);
+    const popupHeight = 362;
+    const popupWidth = 332;
+    const fixedPositionStyle = {
+        top: $app.config.placement.includes('bottom')
+            ? $app.datePickerState.inputRect.value.height +
+                $app.datePickerState.inputRect.value.y +
+                1 // 1px border
+            : $app.datePickerState.inputRect.value.y - remSize - popupHeight, // subtract remsize to leave room for label text
+        left: $app.config.placement.includes('start')
+            ? $app.datePickerState.inputRect.value.x
+            : $app.datePickerState.inputRect.value.x +
+                $app.datePickerState.inputRect.value.width -
+                popupWidth,
+        width: popupWidth,
+        position: 'fixed',
+    };
+    return (u(preact.Fragment, { children: u("div", { style: $app.config.teleportTo ? fixedPositionStyle : undefined, "data-testid": "date-picker-popup", className: popupClasses.join(' '), children: datePickerView === DatePickerView.MONTH_DAYS ? (u(MonthView, { seatYearsView: () => setDatePickerView(DatePickerView.YEARS) })) : (u(YearsView, { setMonthView: () => setDatePickerView(DatePickerView.MONTH_DAYS) })) }) }));
 }
 
+function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}(E.prototype=new preact.Component).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var x=preact.options.__b;preact.options.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),x&&x(n);};var O=preact.options.__e;preact.options.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);O(n,t,e,r);};var T=preact.options.unmount;function F(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return F(n,t,e)})),n}function I(n,t,e){return n&&e&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return I(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.appendChild(n.__e),n.__c.__e=!0,n.__c.__P=e)),n}function L(){this.__u=0,this.t=null,this.__b=null;}function U(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function M(){this.u=null,this.o=null;}preact.options.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&32&n.__u&&(n.type=null),T&&T(n);},(L.prototype=new preact.Component).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=U(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=I(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}};r.__u++||32&t.__u||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},L.prototype.componentWillUnmount=function(){this.t=[];},L.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=F(this.__b,r,o.__O=o.__P);}this.__b=null;}var i=e.__a&&preact.createElement(preact.Fragment,null,n.fallback);return i&&(i.__u&=-33),[preact.createElement(preact.Fragment,null,e.__a?null:n.children),i]};var V=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};function W(n){return this.getChildContext=function(){return n.context},n.children}function P(n){var e=this,r=n.i;e.componentWillUnmount=function(){preact.render(null,e.l),e.l=null,e.i=null;},e.i&&e.i!==r&&e.componentWillUnmount(),e.l||(e.i=r,e.l={nodeType:1,parentNode:r,childNodes:[],appendChild:function(n){this.childNodes.push(n),e.i.appendChild(n);},insertBefore:function(n,t){this.childNodes.push(n),e.i.appendChild(n);},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),e.i.removeChild(n);}}),preact.render(preact.createElement(W,{context:e.context},n.__v),e.l);}function j(n,e){var r=preact.createElement(P,{__v:n,i:e});return r.containerInfo=e,r}(M.prototype=new preact.Component).__a=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),V(t,n,r)):u();};e?e(o):o();}},M.prototype.render=function(n){this.u=null,this.o=new Map;var t=preact.toChildArray(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},M.prototype.componentDidUpdate=M.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){V(n,e,t);});};var z="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,B=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,H=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Z=/[A-Z0-9]/g,Y="undefined"!=typeof document,$=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(n)};preact.Component.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(preact.Component.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n});}});});var J=preact.options.event;function K(){}function Q(){return this.cancelBubble}function X(){return this.defaultPrevented}preact.options.event=function(n){return J&&(n=J(n)),n.persist=K,n.isPropagationStopped=Q,n.isDefaultPrevented=X,n.nativeEvent=n};var tn={enumerable:!1,configurable:!0,get:function(){return this.class}},en=preact.options.vnode;preact.options.vnode=function(n){"string"==typeof n.type&&function(n){var t=n.props,e=n.type,u={};for(var o in t){var i=t[o];if(!("value"===o&&"defaultValue"in t&&null==i||Y&&"children"===o&&"noscript"===e||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===i?i="":"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==e&&"textarea"!==e||$(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":H.test(o)?o=l:-1===e.indexOf("-")&&B.test(o)?o=o.replace(Z,"-$&").toLowerCase():null===i&&(i=void 0):l=o="oninput","oninput"===l&&u[o=l]&&(o="oninputCapture"),u[o]=i;}}"select"==e&&u.multiple&&Array.isArray(u.value)&&(u.value=preact.toChildArray(t.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value);})),"select"==e&&null!=u.defaultValue&&(u.value=preact.toChildArray(t.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value;})),t.class&&!t.className?(u.class=t.class,Object.defineProperty(u,"className",tn)):(t.className&&!t.class||t.class&&t.className)&&(u.class=u.className=t.className),n.props=u;}(n),n.$$typeof=z,en&&en(n);};var rn=preact.options.__r;preact.options.__r=function(n){rn&&rn(n),n.__c;};var un=preact.options.diffed;preact.options.diffed=function(n){un&&un(n);var t=n.props,e=n.__e;null!=e&&"textarea"===n.type&&"value"in t&&t.value!==e.value&&(e.value=null==t.value?"":t.value);};
+
 function AppWrapper({ $app }) {
@@ -413,3 +446,6 @@ var _a, _b;
         classes.push('has-full-width');
-    return (u(preact.Fragment, { children: u("div", { className: classes.join(' '), children: u(AppContext.Provider, { value: $app, children: [u(AppInput, {}), $app.datePickerState.isOpen.value && u(AppPopup, {})] }) }) }));
+    let appPopupJSX = u(AppPopup, {});
+    if ($app.config.teleportTo)
+        appPopupJSX = j(appPopupJSX, $app.config.teleportTo);
+    return (u(preact.Fragment, { children: u("div", { className: classes.join(' '), children: u(AppContext.Provider, { value: $app, children: [u(AppInput, {}), $app.datePickerState.isOpen.value && appPopupJSX] }) }) }));
 }
@@ -697,2 +733,3 @@
     return {
+        inputRect: signals.signal({ x: 0, y: 0, width: 0, height: 0, right: 0 }),
         isOpen,
@@ -796,3 +833,3 @@ datePickerView,
 class ConfigImpl {
-    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}) {
+    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}, teleportTo) {
         Object.defineProperty(this, "locale", {
@@ -840,2 +877,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "teleportTo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: teleportTo
+        });
     }
@@ -888,5 +931,11 @@ }
         });
+        Object.defineProperty(this, "teleportTo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
     }
     build() {
-        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style);
+        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style, this.teleportTo);
     }
@@ -921,2 +970,6 @@ withLocale(locale) {
     }
+    withTeleportTo(teleportTo) {
+        this.teleportTo = teleportTo;
+        return this;
+    }
 }
@@ -1372,2 +1425,30 @@
 
+const datePickerMkMK = {
+    Date: 'Датум',
+    'MM/DD/YYYY': 'DD/MM/YYYY',
+    'Next month': 'Следен месец',
+    'Previous month': 'Претходен месец',
+    'Choose Date': 'Избери Датум',
+    'Select View': 'Избери Преглед',
+};
+
+const calendarMkMK = {
+    Today: 'Денес',
+    Month: 'Месец',
+    Week: 'Недела',
+    Day: 'Ден',
+    events: 'настани',
+    event: 'настан',
+    'No events': 'Нема настани',
+    'Next period': 'Следен период',
+    'Previous period': 'Претходен период',
+    to: 'до', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Целодневни и повеќедневни настани',
+};
+
+const mkMK = {
+    ...datePickerMkMK,
+    ...calendarMkMK,
+};
+
 class InvalidLocaleError extends Error {
@@ -1401,2 +1482,3 @@ constructor(locale) {
     daDK,
+    mkMK,
     plPL,
@@ -1418,2 +1500,3 @@ esES,
         .withStyle(config.style)
+        .withTeleportTo(config.teleportTo)
         .build();
@@ -1420,0 +1503,0 @@ const timeUnitsImpl = new TimeUnitsBuilder()

dist/core.d.ts

@@ -37,2 +37,3 @@ import { Signal } from "@preact/signals";
     style: DatePickerStyle;
+    teleportTo?: HTMLElement;
 }
@@ -75,2 +76,8 @@ interface DatePickerConfigExternal extends Partial<Omit<DatePickerConfigInternal, "placement">> {
     datePickerView: Signal<DatePickerView>;
+    inputRect: Signal<{
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    }>;
     open(): void;
@@ -77,0 +84,0 @@ close(): void;

dist/core.js

@@ -1,2 +0,2 @@
-import { options, createContext, Fragment, render, createElement } from 'preact';
+import { options, createContext, Fragment, Component, createElement, toChildArray, render } from 'preact';
 import { useContext, useEffect, useState } from 'preact/hooks';
@@ -80,2 +80,3 @@ import { signal, effect } from '@preact/signals';
     const datePickerLabelId = randomStringId();
+    const inputWrapperId = randomStringId();
     const $app = useContext(AppContext);
@@ -91,3 +92,16 @@ const getLocalizedDate = (dateString) => {
     const [wrapperClasses, setWrapperClasses] = useState([]);
+    const setInputDOMRect = () => {
+        const inputWrapperEl = document.getElementById(inputWrapperId);
+        if (inputWrapperEl === null)
+            return;
+        $app.datePickerState.inputRect.value = {
+            x: inputWrapperEl.getBoundingClientRect().left + window.scrollX,
+            y: inputWrapperEl.getBoundingClientRect().top + window.scrollY,
+            height: inputWrapperEl.getBoundingClientRect().height,
+            width: inputWrapperEl.getBoundingClientRect().width,
+        };
+    };
     useEffect(() => {
+        if ($app.config.teleportTo)
+            setInputDOMRect();
         const newClasses = ['sx__date-input-wrapper'];
@@ -134,3 +148,3 @@ if ($app.datePickerState.isOpen.value)
     };
-    return (u(Fragment, { children: u("div", { className: wrapperClasses.join(' '), children: [u("label", { for: datePickerInputId, id: datePickerLabelId, className: "sx__date-input-label", children: $app.translate('Date') }), u("input", { id: datePickerInputId, "aria-describedby": datePickerLabelId, value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", className: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), u("button", { "aria-label": $app.translate('Choose Date'), onKeyDown: handleButtonKeyDown, className: "sx__date-input-chevron-wrapper", children: u("img", { className: "sx__date-input-chevron", src: img, alt: "" }) })] }) }));
+    return (u(Fragment, { children: u("div", { className: wrapperClasses.join(' '), id: inputWrapperId, children: [u("label", { for: datePickerInputId, id: datePickerLabelId, className: "sx__date-input-label", children: $app.translate('Date') }), u("input", { id: datePickerInputId, "aria-describedby": datePickerLabelId, value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", className: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), u("button", { "aria-label": $app.translate('Choose Date'), onKeyDown: handleButtonKeyDown, className: "sx__date-input-chevron-wrapper", children: u("img", { className: "sx__date-input-chevron", src: img, alt: "" }) })] }) }));
 }
@@ -400,5 +414,24 @@
     }, []);
-    return (u(Fragment, { children: u("div", { "data-testid": "date-picker-popup", className: popupClasses.join(' '), children: datePickerView === DatePickerView.MONTH_DAYS ? (u(MonthView, { seatYearsView: () => setDatePickerView(DatePickerView.YEARS) })) : (u(YearsView, { setMonthView: () => setDatePickerView(DatePickerView.MONTH_DAYS) })) }) }));
+    const remSize = Number(getComputedStyle(document.documentElement).fontSize.split('px')[0]);
+    const popupHeight = 362;
+    const popupWidth = 332;
+    const fixedPositionStyle = {
+        top: $app.config.placement.includes('bottom')
+            ? $app.datePickerState.inputRect.value.height +
+                $app.datePickerState.inputRect.value.y +
+                1 // 1px border
+            : $app.datePickerState.inputRect.value.y - remSize - popupHeight, // subtract remsize to leave room for label text
+        left: $app.config.placement.includes('start')
+            ? $app.datePickerState.inputRect.value.x
+            : $app.datePickerState.inputRect.value.x +
+                $app.datePickerState.inputRect.value.width -
+                popupWidth,
+        width: popupWidth,
+        position: 'fixed',
+    };
+    return (u(Fragment, { children: u("div", { style: $app.config.teleportTo ? fixedPositionStyle : undefined, "data-testid": "date-picker-popup", className: popupClasses.join(' '), children: datePickerView === DatePickerView.MONTH_DAYS ? (u(MonthView, { seatYearsView: () => setDatePickerView(DatePickerView.YEARS) })) : (u(YearsView, { setMonthView: () => setDatePickerView(DatePickerView.MONTH_DAYS) })) }) }));
 }
 
+function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}(E.prototype=new Component).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var x=options.__b;options.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),x&&x(n);};var O=options.__e;options.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);O(n,t,e,r);};var T=options.unmount;function F(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return F(n,t,e)})),n}function I(n,t,e){return n&&e&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return I(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.appendChild(n.__e),n.__c.__e=!0,n.__c.__P=e)),n}function L(){this.__u=0,this.t=null,this.__b=null;}function U(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function M(){this.u=null,this.o=null;}options.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&32&n.__u&&(n.type=null),T&&T(n);},(L.prototype=new Component).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=U(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=I(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}};r.__u++||32&t.__u||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},L.prototype.componentWillUnmount=function(){this.t=[];},L.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=F(this.__b,r,o.__O=o.__P);}this.__b=null;}var i=e.__a&&createElement(Fragment,null,n.fallback);return i&&(i.__u&=-33),[createElement(Fragment,null,e.__a?null:n.children),i]};var V=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};function W(n){return this.getChildContext=function(){return n.context},n.children}function P(n){var e=this,r=n.i;e.componentWillUnmount=function(){render(null,e.l),e.l=null,e.i=null;},e.i&&e.i!==r&&e.componentWillUnmount(),e.l||(e.i=r,e.l={nodeType:1,parentNode:r,childNodes:[],appendChild:function(n){this.childNodes.push(n),e.i.appendChild(n);},insertBefore:function(n,t){this.childNodes.push(n),e.i.appendChild(n);},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),e.i.removeChild(n);}}),render(createElement(W,{context:e.context},n.__v),e.l);}function j(n,e){var r=createElement(P,{__v:n,i:e});return r.containerInfo=e,r}(M.prototype=new Component).__a=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),V(t,n,r)):u();};e?e(o):o();}},M.prototype.render=function(n){this.u=null,this.o=new Map;var t=toChildArray(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},M.prototype.componentDidUpdate=M.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){V(n,e,t);});};var z="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,B=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,H=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Z=/[A-Z0-9]/g,Y="undefined"!=typeof document,$=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(n)};Component.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(Component.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n});}});});var J=options.event;function K(){}function Q(){return this.cancelBubble}function X(){return this.defaultPrevented}options.event=function(n){return J&&(n=J(n)),n.persist=K,n.isPropagationStopped=Q,n.isDefaultPrevented=X,n.nativeEvent=n};var tn={enumerable:!1,configurable:!0,get:function(){return this.class}},en=options.vnode;options.vnode=function(n){"string"==typeof n.type&&function(n){var t=n.props,e=n.type,u={};for(var o in t){var i=t[o];if(!("value"===o&&"defaultValue"in t&&null==i||Y&&"children"===o&&"noscript"===e||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===i?i="":"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==e&&"textarea"!==e||$(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":H.test(o)?o=l:-1===e.indexOf("-")&&B.test(o)?o=o.replace(Z,"-$&").toLowerCase():null===i&&(i=void 0):l=o="oninput","oninput"===l&&u[o=l]&&(o="oninputCapture"),u[o]=i;}}"select"==e&&u.multiple&&Array.isArray(u.value)&&(u.value=toChildArray(t.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value);})),"select"==e&&null!=u.defaultValue&&(u.value=toChildArray(t.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value;})),t.class&&!t.className?(u.class=t.class,Object.defineProperty(u,"className",tn)):(t.className&&!t.class||t.class&&t.className)&&(u.class=u.className=t.className),n.props=u;}(n),n.$$typeof=z,en&&en(n);};var rn=options.__r;options.__r=function(n){rn&&rn(n),n.__c;};var un=options.diffed;options.diffed=function(n){un&&un(n);var t=n.props,e=n.__e;null!=e&&"textarea"===n.type&&"value"in t&&t.value!==e.value&&(e.value=null==t.value?"":t.value);};
+
 function AppWrapper({ $app }) {
@@ -411,3 +444,6 @@ var _a, _b;
         classes.push('has-full-width');
-    return (u(Fragment, { children: u("div", { className: classes.join(' '), children: u(AppContext.Provider, { value: $app, children: [u(AppInput, {}), $app.datePickerState.isOpen.value && u(AppPopup, {})] }) }) }));
+    let appPopupJSX = u(AppPopup, {});
+    if ($app.config.teleportTo)
+        appPopupJSX = j(appPopupJSX, $app.config.teleportTo);
+    return (u(Fragment, { children: u("div", { className: classes.join(' '), children: u(AppContext.Provider, { value: $app, children: [u(AppInput, {}), $app.datePickerState.isOpen.value && appPopupJSX] }) }) }));
 }
@@ -695,2 +731,3 @@
     return {
+        inputRect: signal({ x: 0, y: 0, width: 0, height: 0, right: 0 }),
         isOpen,
@@ -794,3 +831,3 @@ datePickerView,
 class ConfigImpl {
-    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}) {
+    constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}, teleportTo) {
         Object.defineProperty(this, "locale", {
@@ -838,2 +875,8 @@ enumerable: true,
         });
+        Object.defineProperty(this, "teleportTo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: teleportTo
+        });
     }
@@ -886,5 +929,11 @@ }
         });
+        Object.defineProperty(this, "teleportTo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
     }
     build() {
-        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style);
+        return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style, this.teleportTo);
     }
@@ -919,2 +968,6 @@ withLocale(locale) {
     }
+    withTeleportTo(teleportTo) {
+        this.teleportTo = teleportTo;
+        return this;
+    }
 }
@@ -1370,2 +1423,30 @@
 
+const datePickerMkMK = {
+    Date: 'Датум',
+    'MM/DD/YYYY': 'DD/MM/YYYY',
+    'Next month': 'Следен месец',
+    'Previous month': 'Претходен месец',
+    'Choose Date': 'Избери Датум',
+    'Select View': 'Избери Преглед',
+};
+
+const calendarMkMK = {
+    Today: 'Денес',
+    Month: 'Месец',
+    Week: 'Недела',
+    Day: 'Ден',
+    events: 'настани',
+    event: 'настан',
+    'No events': 'Нема настани',
+    'Next period': 'Следен период',
+    'Previous period': 'Претходен период',
+    to: 'до', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Целодневни и повеќедневни настани',
+};
+
+const mkMK = {
+    ...datePickerMkMK,
+    ...calendarMkMK,
+};
+
 class InvalidLocaleError extends Error {
@@ -1399,2 +1480,3 @@ constructor(locale) {
     daDK,
+    mkMK,
     plPL,
@@ -1416,2 +1498,3 @@ esES,
         .withStyle(config.style)
+        .withTeleportTo(config.teleportTo)
         .build();
@@ -1418,0 +1501,0 @@ const timeUnitsImpl = new TimeUnitsBuilder()

dist/core.umd.d.ts

@@ -37,2 +37,3 @@ import { Signal } from "@preact/signals";
     style: DatePickerStyle;
+    teleportTo?: HTMLElement;
 }
@@ -75,2 +76,8 @@ interface DatePickerConfigExternal extends Partial<Omit<DatePickerConfigInternal, "placement">> {
     datePickerView: Signal<DatePickerView>;
+    inputRect: Signal<{
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    }>;
     open(): void;
@@ -77,0 +84,0 @@ close(): void;

dist/core.umd.js

@@ -82,2 +82,3 @@ (function (global, factory) {
       const datePickerLabelId = randomStringId();
+      const inputWrapperId = randomStringId();
       const $app = hooks.useContext(AppContext);
@@ -93,3 +94,16 @@ const getLocalizedDate = (dateString) => {
       const [wrapperClasses, setWrapperClasses] = hooks.useState([]);
+      const setInputDOMRect = () => {
+          const inputWrapperEl = document.getElementById(inputWrapperId);
+          if (inputWrapperEl === null)
+              return;
+          $app.datePickerState.inputRect.value = {
+              x: inputWrapperEl.getBoundingClientRect().left + window.scrollX,
+              y: inputWrapperEl.getBoundingClientRect().top + window.scrollY,
+              height: inputWrapperEl.getBoundingClientRect().height,
+              width: inputWrapperEl.getBoundingClientRect().width,
+          };
+      };
       hooks.useEffect(() => {
+          if ($app.config.teleportTo)
+              setInputDOMRect();
           const newClasses = ['sx__date-input-wrapper'];
@@ -136,3 +150,3 @@ if ($app.datePickerState.isOpen.value)
       };
-      return (u(preact.Fragment, { children: u("div", { className: wrapperClasses.join(' '), children: [u("label", { for: datePickerInputId, id: datePickerLabelId, className: "sx__date-input-label", children: $app.translate('Date') }), u("input", { id: datePickerInputId, "aria-describedby": datePickerLabelId, value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", className: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), u("button", { "aria-label": $app.translate('Choose Date'), onKeyDown: handleButtonKeyDown, className: "sx__date-input-chevron-wrapper", children: u("img", { className: "sx__date-input-chevron", src: img, alt: "" }) })] }) }));
+      return (u(preact.Fragment, { children: u("div", { className: wrapperClasses.join(' '), id: inputWrapperId, children: [u("label", { for: datePickerInputId, id: datePickerLabelId, className: "sx__date-input-label", children: $app.translate('Date') }), u("input", { id: datePickerInputId, "aria-describedby": datePickerLabelId, value: $app.datePickerState.inputDisplayedValue.value, "data-testid": "date-picker-input", className: "sx__date-input", onClick: handleClick, onKeyUp: handleKeyUp, type: "text" }), u("button", { "aria-label": $app.translate('Choose Date'), onKeyDown: handleButtonKeyDown, className: "sx__date-input-chevron-wrapper", children: u("img", { className: "sx__date-input-chevron", src: img, alt: "" }) })] }) }));
   }
@@ -402,5 +416,24 @@
       }, []);
-      return (u(preact.Fragment, { children: u("div", { "data-testid": "date-picker-popup", className: popupClasses.join(' '), children: datePickerView === DatePickerView.MONTH_DAYS ? (u(MonthView, { seatYearsView: () => setDatePickerView(DatePickerView.YEARS) })) : (u(YearsView, { setMonthView: () => setDatePickerView(DatePickerView.MONTH_DAYS) })) }) }));
+      const remSize = Number(getComputedStyle(document.documentElement).fontSize.split('px')[0]);
+      const popupHeight = 362;
+      const popupWidth = 332;
+      const fixedPositionStyle = {
+          top: $app.config.placement.includes('bottom')
+              ? $app.datePickerState.inputRect.value.height +
+                  $app.datePickerState.inputRect.value.y +
+                  1 // 1px border
+              : $app.datePickerState.inputRect.value.y - remSize - popupHeight, // subtract remsize to leave room for label text
+          left: $app.config.placement.includes('start')
+              ? $app.datePickerState.inputRect.value.x
+              : $app.datePickerState.inputRect.value.x +
+                  $app.datePickerState.inputRect.value.width -
+                  popupWidth,
+          width: popupWidth,
+          position: 'fixed',
+      };
+      return (u(preact.Fragment, { children: u("div", { style: $app.config.teleportTo ? fixedPositionStyle : undefined, "data-testid": "date-picker-popup", className: popupClasses.join(' '), children: datePickerView === DatePickerView.MONTH_DAYS ? (u(MonthView, { seatYearsView: () => setDatePickerView(DatePickerView.YEARS) })) : (u(YearsView, { setMonthView: () => setDatePickerView(DatePickerView.MONTH_DAYS) })) }) }));
   }
 
+  function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}(E.prototype=new preact.Component).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var x=preact.options.__b;preact.options.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),x&&x(n);};var O=preact.options.__e;preact.options.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);O(n,t,e,r);};var T=preact.options.unmount;function F(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return F(n,t,e)})),n}function I(n,t,e){return n&&e&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return I(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.appendChild(n.__e),n.__c.__e=!0,n.__c.__P=e)),n}function L(){this.__u=0,this.t=null,this.__b=null;}function U(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function M(){this.u=null,this.o=null;}preact.options.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&32&n.__u&&(n.type=null),T&&T(n);},(L.prototype=new preact.Component).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=U(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=I(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}};r.__u++||32&t.__u||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},L.prototype.componentWillUnmount=function(){this.t=[];},L.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=F(this.__b,r,o.__O=o.__P);}this.__b=null;}var i=e.__a&&preact.createElement(preact.Fragment,null,n.fallback);return i&&(i.__u&=-33),[preact.createElement(preact.Fragment,null,e.__a?null:n.children),i]};var V=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};function W(n){return this.getChildContext=function(){return n.context},n.children}function P(n){var e=this,r=n.i;e.componentWillUnmount=function(){preact.render(null,e.l),e.l=null,e.i=null;},e.i&&e.i!==r&&e.componentWillUnmount(),e.l||(e.i=r,e.l={nodeType:1,parentNode:r,childNodes:[],appendChild:function(n){this.childNodes.push(n),e.i.appendChild(n);},insertBefore:function(n,t){this.childNodes.push(n),e.i.appendChild(n);},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),e.i.removeChild(n);}}),preact.render(preact.createElement(W,{context:e.context},n.__v),e.l);}function j(n,e){var r=preact.createElement(P,{__v:n,i:e});return r.containerInfo=e,r}(M.prototype=new preact.Component).__a=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),V(t,n,r)):u();};e?e(o):o();}},M.prototype.render=function(n){this.u=null,this.o=new Map;var t=preact.toChildArray(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},M.prototype.componentDidUpdate=M.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){V(n,e,t);});};var z="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,B=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,H=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Z=/[A-Z0-9]/g,Y="undefined"!=typeof document,$=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(n)};preact.Component.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(preact.Component.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n});}});});var J=preact.options.event;function K(){}function Q(){return this.cancelBubble}function X(){return this.defaultPrevented}preact.options.event=function(n){return J&&(n=J(n)),n.persist=K,n.isPropagationStopped=Q,n.isDefaultPrevented=X,n.nativeEvent=n};var tn={enumerable:!1,configurable:!0,get:function(){return this.class}},en=preact.options.vnode;preact.options.vnode=function(n){"string"==typeof n.type&&function(n){var t=n.props,e=n.type,u={};for(var o in t){var i=t[o];if(!("value"===o&&"defaultValue"in t&&null==i||Y&&"children"===o&&"noscript"===e||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===i?i="":"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==e&&"textarea"!==e||$(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":H.test(o)?o=l:-1===e.indexOf("-")&&B.test(o)?o=o.replace(Z,"-$&").toLowerCase():null===i&&(i=void 0):l=o="oninput","oninput"===l&&u[o=l]&&(o="oninputCapture"),u[o]=i;}}"select"==e&&u.multiple&&Array.isArray(u.value)&&(u.value=preact.toChildArray(t.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value);})),"select"==e&&null!=u.defaultValue&&(u.value=preact.toChildArray(t.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value;})),t.class&&!t.className?(u.class=t.class,Object.defineProperty(u,"className",tn)):(t.className&&!t.class||t.class&&t.className)&&(u.class=u.className=t.className),n.props=u;}(n),n.$$typeof=z,en&&en(n);};var rn=preact.options.__r;preact.options.__r=function(n){rn&&rn(n),n.__c;};var un=preact.options.diffed;preact.options.diffed=function(n){un&&un(n);var t=n.props,e=n.__e;null!=e&&"textarea"===n.type&&"value"in t&&t.value!==e.value&&(e.value=null==t.value?"":t.value);};
+
   function AppWrapper({ $app }) {
@@ -413,3 +446,6 @@ var _a, _b;
           classes.push('has-full-width');
-      return (u(preact.Fragment, { children: u("div", { className: classes.join(' '), children: u(AppContext.Provider, { value: $app, children: [u(AppInput, {}), $app.datePickerState.isOpen.value && u(AppPopup, {})] }) }) }));
+      let appPopupJSX = u(AppPopup, {});
+      if ($app.config.teleportTo)
+          appPopupJSX = j(appPopupJSX, $app.config.teleportTo);
+      return (u(preact.Fragment, { children: u("div", { className: classes.join(' '), children: u(AppContext.Provider, { value: $app, children: [u(AppInput, {}), $app.datePickerState.isOpen.value && appPopupJSX] }) }) }));
   }
@@ -697,2 +733,3 @@
       return {
+          inputRect: signals.signal({ x: 0, y: 0, width: 0, height: 0, right: 0 }),
           isOpen,
@@ -796,3 +833,3 @@ datePickerView,
   class ConfigImpl {
-      constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}) {
+      constructor(locale = DEFAULT_LOCALE, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, min = toDateString$1(new Date(1970, 0, 1)), max = toDateString$1(new Date(new Date().getFullYear() + 1, 11, 31)), placement = Placement.BOTTOM_START, listeners = {}, style = {}, teleportTo) {
           Object.defineProperty(this, "locale", {
@@ -840,2 +877,8 @@ enumerable: true,
           });
+          Object.defineProperty(this, "teleportTo", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: teleportTo
+          });
       }
@@ -888,5 +931,11 @@ }
           });
+          Object.defineProperty(this, "teleportTo", {
+              enumerable: true,
+              configurable: true,
+              writable: true,
+              value: void 0
+          });
       }
       build() {
-          return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style);
+          return new ConfigImpl(this.locale, this.firstDayOfWeek, this.min, this.max, this.placement, this.listeners, this.style, this.teleportTo);
       }
@@ -921,2 +970,6 @@ withLocale(locale) {
       }
+      withTeleportTo(teleportTo) {
+          this.teleportTo = teleportTo;
+          return this;
+      }
   }
@@ -1372,2 +1425,30 @@
 
+  const datePickerMkMK = {
+      Date: 'Датум',
+      'MM/DD/YYYY': 'DD/MM/YYYY',
+      'Next month': 'Следен месец',
+      'Previous month': 'Претходен месец',
+      'Choose Date': 'Избери Датум',
+      'Select View': 'Избери Преглед',
+  };
+
+  const calendarMkMK = {
+      Today: 'Денес',
+      Month: 'Месец',
+      Week: 'Недела',
+      Day: 'Ден',
+      events: 'настани',
+      event: 'настан',
+      'No events': 'Нема настани',
+      'Next period': 'Следен период',
+      'Previous period': 'Претходен период',
+      to: 'до', // as in 2/1/2020 to 2/2/2020
+      'Full day- and multiple day events': 'Целодневни и повеќедневни настани',
+  };
+
+  const mkMK = {
+      ...datePickerMkMK,
+      ...calendarMkMK,
+  };
+
   class InvalidLocaleError extends Error {
@@ -1401,2 +1482,3 @@ constructor(locale) {
       daDK,
+      mkMK,
       plPL,
@@ -1418,2 +1500,3 @@ esES,
           .withStyle(config.style)
+          .withTeleportTo(config.teleportTo)
           .build();
@@ -1420,0 +1503,0 @@ const timeUnitsImpl = new TimeUnitsBuilder()

package.json

 {
   "name": "@schedule-x/date-picker",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "description": "Schedule-X date picker component",
@@ -34,3 +34,3 @@ "author": {
   "homepage": "https://schedule-x.dev",
-  "gitHead": "264c2e89a744c34b929eb53db7846abeea6766b0"
+  "gitHead": "b124272cfecc47a08e13fce9e20560f4f01ba4f8"
 }

No alert changes

Improved metrics

Total package byte prevSize

248323

increased by18.26%

Lines of code

6075

increased by7.66%

No dependency changes