@onewelcome/react-lib-components 10.0.2 → 11.0.0

package/dist/components/Notifications/SideSheet/SideSheetContent/SideSheetContent.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".SideSheetContent_side-sheet-content_EsL6T{padding:1.5rem}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),exports.default={"side-sheet-content":"SideSheetContent_side-sheet-content_EsL6T"};
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".SideSheetContent_side-sheet-content_HO9cY{padding:1.5rem}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),exports.default={"side-sheet-content":"SideSheetContent_side-sheet-content_HO9cY"};
 //# sourceMappingURL=SideSheetContent.module.scss.cjs.js.map

package/dist/components/Notifications/SideSheet/SideSheetContent/SideSheetContent.module.scss.es.js

@@ -1,6 +1,6 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".SideSheetContent_side-sheet-content_EsL6T{padding:1.5rem}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".SideSheetContent_side-sheet-content_HO9cY{padding:1.5rem}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
 const classes = {
-  "side-sheet-content": "SideSheetContent_side-sheet-content_EsL6T"
+  "side-sheet-content": "SideSheetContent_side-sheet-content_HO9cY"
 };
 export {
   classes as default

package/dist/components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".SideSheetHeader_side-sheet-header_EsL6T{padding:1rem 1.5rem}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),exports.default={"side-sheet-header":"SideSheetHeader_side-sheet-header_EsL6T"};
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".SideSheetHeader_side-sheet-header_HO9cY{padding:1rem 1.5rem}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),exports.default={"side-sheet-header":"SideSheetHeader_side-sheet-header_HO9cY"};
 //# sourceMappingURL=SideSheetHeader.module.scss.cjs.js.map

package/dist/components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader.module.scss.es.js

@@ -1,6 +1,6 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".SideSheetHeader_side-sheet-header_EsL6T{padding:1rem 1.5rem}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".SideSheetHeader_side-sheet-header_HO9cY{padding:1rem 1.5rem}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}}();
 const classes = {
-  "side-sheet-header": "SideSheetHeader_side-sheet-header_EsL6T"
+  "side-sheet-header": "SideSheetHeader_side-sheet-header_HO9cY"
 };
 export {
   classes as default

package/dist/components/Notifications/SlideInModal/SlideInModal.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.SlideInModal_sr-only_EsL6T{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.SlideInModal_hidden_EsL6T{display:none}.SlideInModal_slide-in_EsL6T{animation:SlideInModal_slide-in_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-in_EsL6T{animation-duration:.1ms}}.SlideInModal_slide-out_EsL6T{animation:SlideInModal_slide-out_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-out_EsL6T{animation-duration:.1ms}}@keyframes SlideInModal_slide-in_EsL6T{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes SlideInModal_slide-out_EsL6T{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.SlideInModal_slide-in-modal_EsL6T{justify-content:flex-end;visibility:visible;transform:translate(120%);transition-property:transform;transition-duration:.5s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-in-modal_EsL6T{transition-duration:.1ms}}.SlideInModal_slide-in-modal_EsL6T.SlideInModal_hide_EsL6T{visibility:hidden}.SlideInModal_slide-in-modal_EsL6T.SlideInModal_visible_EsL6T{visibility:visible;transform:translate(0)}.SlideInModal_slide-in-modal_EsL6T.SlideInModal_visible_EsL6T #SlideInModal_backdrop-slide_EsL6T,#SlideInModal_backdrop-slide_EsL6T{background-color:transparent}@media only screen and (min-width: 50rem){.SlideInModal_container_EsL6T{margin-top:0;width:50rem;height:100%;max-height:unset;border-radius:0;box-shadow:0 1.875rem 3.125rem var(--modal-shadow-color)}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="SlideInModal_hidden_EsL6T",d="SlideInModal_hide_EsL6T",i="SlideInModal_visible_EsL6T",l="SlideInModal_container_EsL6T",s={"sr-only":"SlideInModal_sr-only_EsL6T",hidden:e,"slide-in":"SlideInModal_slide-in_EsL6T","slide-out":"SlideInModal_slide-out_EsL6T","slide-in-modal":"SlideInModal_slide-in-modal_EsL6T",hide:d,visible:i,"backdrop-slide":"SlideInModal_backdrop-slide_EsL6T",container:l};exports.container=l,exports.default=s,exports.hidden=e,exports.hide=d,exports.visible=i;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.SlideInModal_sr-only_HO9cY{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.SlideInModal_hidden_HO9cY{display:none}.SlideInModal_slide-in_HO9cY{animation:SlideInModal_slide-in_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-in_HO9cY{animation-duration:.1ms}}.SlideInModal_slide-out_HO9cY{animation:SlideInModal_slide-out_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-out_HO9cY{animation-duration:.1ms}}@keyframes SlideInModal_slide-in_HO9cY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes SlideInModal_slide-out_HO9cY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.SlideInModal_slide-in-modal_HO9cY{justify-content:flex-end;visibility:visible;transform:translate(120%);transition-property:transform;transition-duration:.5s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-in-modal_HO9cY{transition-duration:.1ms}}.SlideInModal_slide-in-modal_HO9cY.SlideInModal_hide_HO9cY{visibility:hidden}.SlideInModal_slide-in-modal_HO9cY.SlideInModal_visible_HO9cY{visibility:visible;transform:translate(0)}.SlideInModal_slide-in-modal_HO9cY.SlideInModal_visible_HO9cY #SlideInModal_backdrop-slide_HO9cY,#SlideInModal_backdrop-slide_HO9cY{background-color:transparent}@media only screen and (min-width: 50rem){.SlideInModal_container_HO9cY{margin-top:0;width:50rem;height:100%;max-height:unset;border-radius:0;box-shadow:0 1.875rem 3.125rem var(--modal-shadow-color)}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="SlideInModal_hidden_HO9cY",d="SlideInModal_hide_HO9cY",i="SlideInModal_visible_HO9cY",l="SlideInModal_container_HO9cY",o={"sr-only":"SlideInModal_sr-only_HO9cY",hidden:e,"slide-in":"SlideInModal_slide-in_HO9cY","slide-out":"SlideInModal_slide-out_HO9cY","slide-in-modal":"SlideInModal_slide-in-modal_HO9cY",hide:d,visible:i,"backdrop-slide":"SlideInModal_backdrop-slide_HO9cY",container:l};exports.container=l,exports.default=o,exports.hidden=e,exports.hide=d,exports.visible=i;
 //# sourceMappingURL=SlideInModal.module.scss.cjs.js.map

package/dist/components/Notifications/SlideInModal/SlideInModal.module.scss.es.js

@@ -1,17 +1,17 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.SlideInModal_sr-only_EsL6T{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.SlideInModal_hidden_EsL6T{display:none}.SlideInModal_slide-in_EsL6T{animation:SlideInModal_slide-in_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-in_EsL6T{animation-duration:.1ms}}.SlideInModal_slide-out_EsL6T{animation:SlideInModal_slide-out_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-out_EsL6T{animation-duration:.1ms}}@keyframes SlideInModal_slide-in_EsL6T{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes SlideInModal_slide-out_EsL6T{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.SlideInModal_slide-in-modal_EsL6T{justify-content:flex-end;visibility:visible;transform:translate(120%);transition-property:transform;transition-duration:.5s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-in-modal_EsL6T{transition-duration:.1ms}}.SlideInModal_slide-in-modal_EsL6T.SlideInModal_hide_EsL6T{visibility:hidden}.SlideInModal_slide-in-modal_EsL6T.SlideInModal_visible_EsL6T{visibility:visible;transform:translate(0)}.SlideInModal_slide-in-modal_EsL6T.SlideInModal_visible_EsL6T #SlideInModal_backdrop-slide_EsL6T,#SlideInModal_backdrop-slide_EsL6T{background-color:transparent}@media only screen and (min-width: 50rem){.SlideInModal_container_EsL6T{margin-top:0;width:50rem;height:100%;max-height:unset;border-radius:0;box-shadow:0 1.875rem 3.125rem var(--modal-shadow-color)}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
-const hidden = "SlideInModal_hidden_EsL6T";
-const hide = "SlideInModal_hide_EsL6T";
-const visible = "SlideInModal_visible_EsL6T";
-const container = "SlideInModal_container_EsL6T";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.SlideInModal_sr-only_HO9cY{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.SlideInModal_hidden_HO9cY{display:none}.SlideInModal_slide-in_HO9cY{animation:SlideInModal_slide-in_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-in_HO9cY{animation-duration:.1ms}}.SlideInModal_slide-out_HO9cY{animation:SlideInModal_slide-out_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-out_HO9cY{animation-duration:.1ms}}@keyframes SlideInModal_slide-in_HO9cY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes SlideInModal_slide-out_HO9cY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.SlideInModal_slide-in-modal_HO9cY{justify-content:flex-end;visibility:visible;transform:translate(120%);transition-property:transform;transition-duration:.5s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.SlideInModal_slide-in-modal_HO9cY{transition-duration:.1ms}}.SlideInModal_slide-in-modal_HO9cY.SlideInModal_hide_HO9cY{visibility:hidden}.SlideInModal_slide-in-modal_HO9cY.SlideInModal_visible_HO9cY{visibility:visible;transform:translate(0)}.SlideInModal_slide-in-modal_HO9cY.SlideInModal_visible_HO9cY #SlideInModal_backdrop-slide_HO9cY,#SlideInModal_backdrop-slide_HO9cY{background-color:transparent}@media only screen and (min-width: 50rem){.SlideInModal_container_HO9cY{margin-top:0;width:50rem;height:100%;max-height:unset;border-radius:0;box-shadow:0 1.875rem 3.125rem var(--modal-shadow-color)}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+const hidden = "SlideInModal_hidden_HO9cY";
+const hide = "SlideInModal_hide_HO9cY";
+const visible = "SlideInModal_visible_HO9cY";
+const container = "SlideInModal_container_HO9cY";
 const classes = {
-  "sr-only": "SlideInModal_sr-only_EsL6T",
+  "sr-only": "SlideInModal_sr-only_HO9cY",
   hidden,
-  "slide-in": "SlideInModal_slide-in_EsL6T",
-  "slide-out": "SlideInModal_slide-out_EsL6T",
-  "slide-in-modal": "SlideInModal_slide-in-modal_EsL6T",
+  "slide-in": "SlideInModal_slide-in_HO9cY",
+  "slide-out": "SlideInModal_slide-out_HO9cY",
+  "slide-in-modal": "SlideInModal_slide-in-modal_HO9cY",
   hide,
   visible,
-  "backdrop-slide": "SlideInModal_backdrop-slide_EsL6T",
+  "backdrop-slide": "SlideInModal_backdrop-slide_HO9cY",
   container
 };
 export {

package/dist/components/Pagination/Pagination.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./Pagination.module.scss.cjs.js"),a=require("../../readyclasses.module.scss.cjs.js"),l=require("../Button/IconButton.cjs.js"),n=require("../Icon/Icon.cjs.js"),r=require("../Form/Select/SingleSelect/Select.cjs.js"),c=require("../Form/Select/SingleSelect/Option.cjs.js"),s=require("../Form/Label/Label.cjs.js");var i=(e=>(e.totalItems="items in total",e.itemsPerPage="Items per page",e.currentPage="of %1 pages",e.itemsPerPageLabel="Select how many items per page you want to see.",e.currentPageLabel="What page you are currently on.",e))(i||{});const o=e.forwardRef((({totalElements:o,pageSize:u=10,translate:m=i,currentPage:p,className:g,onPageChange:d,onPageSizeChange:f,...v},E)=>{const b=o?Math.ceil(o/u)<1?1:Math.ceil(o/u):1,[S,I]=e.useState(!1),h=e=>{d(e)};return e.useEffect((()=>{S&&I(!1)}),[S]),null==o||0===o?null:e.createElement("div",{...v,ref:E,className:`${t.default["pagination-wrapper"]} ${g??""}`},e.createElement("div",{className:t.default.left},u&&e.createElement("div",{className:t.default["per-page"]},e.createElement(s.Label,{id:"page-size-select-label",htmlFor:"page-size-select",className:t.default.label},m.itemsPerPage),e.createElement(r.Select,{name:"page-size-select",id:"page-size-select",labeledBy:"page-size-select-label",className:`${t.default["form-element"]} ${t.default["page-size-select"]}`,value:u.toString(),onChange:e=>{const t=Number(e.target.value);I(!0),f(t)}},e.createElement(c.Option,{value:"10"},"10"),e.createElement(c.Option,{value:"25"},"25"),e.createElement(c.Option,{value:"50"},"50"))),e.createElement("div",{className:t.default.total},e.createElement("span",{tabIndex:0},o," ",m.totalItems))),e.createElement("div",{className:t.default.pagination},e.createElement(e.Fragment,null,!!b&&e.createElement("div",{className:t.default.page},e.createElement(s.Label,{id:"current-value-input-label",htmlFor:"current-value-input",className:`${a.default["sr-only"]} ${t.default["current-value-select-label"]}`},m.currentPageLabel),e.createElement(r.Select,{labeledBy:"current-value-input-label",key:"input",id:"current-value-input",size:p.toString().length,onChange:e=>h(Number(e.target.value)),name:"current-value-input",value:p.toString(),className:`${t.default["form-element"]} ${t.default["current-page-select"]}`,search:{enabled:!0,searchInputProps:{wrapperProps:{className:t.default["search-input-wrapper"]},reset:S||void 0,autoComplete:"off"}}},Array.from(Array(b).keys()).map((t=>e.createElement(c.Option,{key:t,value:(t+1).toString()},(t+1).toString())))),e.createElement("span",{className:t.default["page-total"]},m.currentPage.replace("%1",Math.ceil(o/u).toString()))),!!p&&e.createElement("div",{className:t.default.previous},e.createElement(l.IconButton,{disabled:p<=1,title:"first",onClick:()=>h(1),"data-paginate":"first"},e.createElement(n.Icon,{icon:n.Icons.NavigationFirst})),e.createElement(l.IconButton,{disabled:p<=1,title:"previous",onClick:()=>h(p-1),"data-paginate":"previous"},e.createElement(n.Icon,{icon:n.Icons.ChevronLeft}))),e.createElement("div",{className:t.default.next},void 0!==p&&e.createElement(l.IconButton,{disabled:p>=b,title:"next",onClick:()=>h(p+1),"data-paginate":"next"},e.createElement(n.Icon,{icon:n.Icons.ChevronRight})),!!p&&e.createElement(l.IconButton,{disabled:p>=b,title:"last",onClick:()=>h(Math.ceil(o/u)),"data-paginate":"last"},e.createElement(n.Icon,{icon:n.Icons.NavigationLast}))))))}));exports.Pagination=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./Pagination.module.scss.cjs.js"),a=require("../../readyclasses.module.scss.cjs.js"),l=require("../Button/IconButton.cjs.js"),n=require("../Icon/Icon.cjs.js"),r=require("../Form/Select/SingleSelect/Select.cjs.js"),c=require("../Form/Select/SingleSelect/Option.cjs.js"),s=require("../Form/Label/Label.cjs.js");var i=(e=>(e.totalItems="items in total",e.itemsPerPage="Items per page",e.currentPage="of %1 pages",e.itemsPerPageLabel="Select how many items per page you want to see.",e.currentPageLabel="What page you are currently on.",e))(i||{});const o=e.forwardRef((({totalElements:o,pageSize:u=10,translate:m=i,currentPage:p,className:g,onPageChange:d,onPageSizeChange:f,...v},E)=>{const b=o?Math.ceil(o/u)<1?1:Math.ceil(o/u):1,[S,I]=e.useState(!1),h=e=>{d(e)};return e.useEffect((()=>{S&&I(!1)}),[S]),null==o||0===o?null:e.createElement("div",{...v,ref:E,className:`${t.default["pagination-wrapper"]} ${g??""}`},e.createElement("div",{className:t.default.left},u&&e.createElement("div",{className:t.default["per-page"]},e.createElement(s.Label,{id:"page-size-select-label",htmlFor:"page-size-select",className:t.default.label},m.itemsPerPage),e.createElement(r.Select,{name:"page-size-select",id:"page-size-select",labeledBy:"page-size-select-label",className:`${t.default["form-element"]} ${t.default["page-size-select"]}`,value:u.toString(),onChange:e=>{const t=Number(e.target.value);I(!0),f(t)}},e.createElement(c.Option,{value:"10"},"10"),e.createElement(c.Option,{value:"25"},"25"),e.createElement(c.Option,{value:"50"},"50"))),e.createElement("div",{className:t.default.total},e.createElement("span",{tabIndex:0},o," ",m.totalItems))),e.createElement("div",{className:t.default.pagination},e.createElement(e.Fragment,null,!!b&&e.createElement("div",{className:t.default.page},e.createElement(s.Label,{id:"current-value-input-label",htmlFor:"current-value-input",className:`${a.default["sr-only"]} ${t.default["current-value-select-label"]}`},m.currentPageLabel),e.createElement(r.Select,{labeledBy:"current-value-input-label",key:"input",id:"current-value-input",size:p.toString().length,onChange:e=>h(Number(e.target.value)),name:"current-value-input",value:p.toString(),className:`${t.default["form-element"]} ${t.default["current-page-select"]}`,search:{enabled:!0,searchInputProps:{wrapperProps:{className:t.default["search-input-wrapper"]},...S&&{reset:!0},autoComplete:"off"}}},Array.from(Array(b).keys()).map((t=>e.createElement(c.Option,{key:t,value:(t+1).toString()},(t+1).toString())))),e.createElement("span",{className:t.default["page-total"]},m.currentPage.replace("%1",Math.ceil(o/u).toString()))),!!p&&e.createElement("div",{className:t.default.previous},e.createElement(l.IconButton,{disabled:p<=1,title:"first",onClick:()=>h(1),"data-paginate":"first"},e.createElement(n.Icon,{icon:n.Icons.NavigationFirst})),e.createElement(l.IconButton,{disabled:p<=1,title:"previous",onClick:()=>h(p-1),"data-paginate":"previous"},e.createElement(n.Icon,{icon:n.Icons.ChevronLeft}))),e.createElement("div",{className:t.default.next},void 0!==p&&e.createElement(l.IconButton,{disabled:p>=b,title:"next",onClick:()=>h(p+1),"data-paginate":"next"},e.createElement(n.Icon,{icon:n.Icons.ChevronRight})),!!p&&e.createElement(l.IconButton,{disabled:p>=b,title:"last",onClick:()=>h(Math.ceil(o/u)),"data-paginate":"last"},e.createElement(n.Icon,{icon:n.Icons.NavigationLast}))))))}));exports.Pagination=o;
 //# sourceMappingURL=Pagination.cjs.js.map

package/dist/components/Pagination/Pagination.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  Fragment,\n  useState,\n  useEffect\n} from \"react\";\nimport classes from \"./Pagination.module.scss\";\nimport readyclasses from \"../../readyclasses.module.scss\";\nimport { IconButton } from \"../Button/IconButton\";\nimport { Icons, Icon } from \"../Icon/Icon\";\nimport { Select } from \"../Form/Select/SingleSelect/Select\";\nimport { Option } from \"../Form/Select/SingleSelect/Option\";\nimport { Label } from \"../Form/Label/Label\";\n\nexport type PaginationTranslations = {\n  totalItems: string;\n  itemsPerPage: string;\n  itemsPerPageLabel: string;\n  currentPage: string;\n  currentPageLabel: string;\n};\n\nexport type PageChangeLabels = \"next\" | \"previous\" | \"first\" | \"last\";\n\nenum DefaultTranslations {\n  totalItems = \"items in total\",\n  itemsPerPage = \"Items per page\",\n  currentPage = \"of %1 pages\",\n  itemsPerPageLabel = \"Select how many items per page you want to see.\",\n  currentPageLabel = \"What page you are currently on.\"\n}\n\nexport type PageSize = 10 | 25 | 50;\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"translate\"> {\n  currentPage: number;\n  totalElements?: number;\n  pageSize?: PageSize;\n  translate?: PaginationTranslations;\n  onPageChange: (pageToGoTo: number) => void;\n  onPageSizeChange: (pageSize: PageSize) => void;\n}\n\nconst PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    totalElements,\n    pageSize = 10,\n    translate = DefaultTranslations,\n    currentPage,\n    className,\n    onPageChange,\n    onPageSizeChange,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const calculateAmountOfPages = () => {\n    if (!totalElements) {\n      return 1;\n    }\n\n    if (Math.ceil(totalElements / pageSize) < 1) {\n      return 1;\n    }\n\n    return Math.ceil(totalElements / pageSize);\n  };\n  const pagesAmount = calculateAmountOfPages();\n  const [resetPageNoSelect, setResetPageNoSelect] = useState(false);\n\n  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    const pageSizeNumber = Number(event.target.value) as PageSize;\n    setResetPageNoSelect(true);\n    onPageSizeChange(pageSizeNumber);\n  };\n\n  const onPageChangeHandler = (pageToGoTo: number) => {\n    onPageChange(pageToGoTo);\n  };\n\n  useEffect(() => {\n    resetPageNoSelect && setResetPageNoSelect(false);\n  }, [resetPageNoSelect]);\n\n  if (totalElements === undefined || totalElements === null || totalElements === 0) {\n    return null;\n  }\n\n  return (\n    <div {...rest} ref={ref} className={`${classes[\"pagination-wrapper\"]} ${className ?? \"\"}`}>\n      <div className={classes[\"left\"]}>\n        {pageSize && (\n          <div className={classes[\"per-page\"]}>\n            <Label\n              id=\"page-size-select-label\"\n              htmlFor=\"page-size-select\"\n              className={classes[\"label\"]}\n            >\n              {translate.itemsPerPage}\n            </Label>\n            <Select\n              name=\"page-size-select\"\n              id=\"page-size-select\"\n              labeledBy=\"page-size-select-label\"\n              className={`${classes[\"form-element\"]} ${classes[\"page-size-select\"]}`}\n              value={pageSize.toString()}\n              onChange={onPageSizeChangeHandler}\n            >\n              <Option value=\"10\">10</Option>\n              <Option value=\"25\">25</Option>\n              <Option value=\"50\">50</Option>\n            </Select>\n          </div>\n        )}\n        <div className={classes[\"total\"]}>\n          <span tabIndex={0}>\n            {totalElements}&nbsp;{translate.totalItems}\n          </span>\n        </div>\n      </div>\n      <div className={classes[\"pagination\"]}>\n        <Fragment>\n          {!!pagesAmount && (\n            <div className={classes[\"page\"]}>\n              <Label\n                id=\"current-value-input-label\"\n                htmlFor=\"current-value-input\"\n                className={`${readyclasses[\"sr-only\"]} ${classes[\"current-value-select-label\"]}`}\n              >\n                {translate.currentPageLabel}\n              </Label>\n              <Select\n                labeledBy=\"current-value-input-label\"\n                key=\"input\"\n                id=\"current-value-input\"\n                size={currentPage.toString().length}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>\n                  onPageChangeHandler(Number(e.target.value))\n                }\n                name=\"current-value-input\"\n                value={currentPage.toString()}\n                className={`${classes[\"form-element\"]} ${classes[\"current-page-select\"]}`}\n                search={{\n                  enabled: true,\n                  searchInputProps: {\n                    wrapperProps: { className: classes[\"search-input-wrapper\"] },\n                    reset: resetPageNoSelect ? resetPageNoSelect : undefined,\n                    autoComplete: \"off\"\n                  }\n                }}\n              >\n                {Array.from(Array(pagesAmount).keys()).map(page => (\n                  <Option key={page} value={(page + 1).toString()}>\n                    {(page + 1).toString()}\n                  </Option>\n                ))}\n              </Select>\n              <span className={classes[\"page-total\"]}>\n                {translate.currentPage.replace(\n                  \"%1\",\n                  Math.ceil(totalElements / pageSize).toString()\n                )}\n              </span>\n            </div>\n          )}\n          {!!currentPage && (\n            <div className={classes[\"previous\"]}>\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"first\"\n                  onClick={() => onPageChangeHandler(1)}\n                  data-paginate=\"first\"\n                >\n                  <Icon icon={Icons.NavigationFirst} />\n                </IconButton>\n              }\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"previous\"\n                  onClick={() => onPageChangeHandler(currentPage - 1)}\n                  data-paginate=\"previous\"\n                >\n                  <Icon icon={Icons.ChevronLeft} />\n                </IconButton>\n              }\n            </div>\n          )}\n          <div className={classes[\"next\"]}>\n            {(currentPage !== undefined || false) && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"next\"\n                onClick={() => onPageChangeHandler(currentPage + 1)}\n                data-paginate=\"next\"\n              >\n                <Icon icon={Icons.ChevronRight} />\n              </IconButton>\n            )}\n            {!!currentPage && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"last\"\n                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}\n                data-paginate=\"last\"\n              >\n                <Icon icon={Icons.NavigationLast} />\n              </IconButton>\n            )}\n          </div>\n        </Fragment>\n      </div>\n    </div>\n  );\n};\n\nexport const Pagination = React.forwardRef(PaginationComponent);\n"],"names":["DefaultTranslations","Pagination","React","forwardRef","totalElements","pageSize","translate","currentPage","className","onPageChange","onPageSizeChange","rest","ref","pagesAmount","Math","ceil","resetPageNoSelect","setResetPageNoSelect","useState","onPageChangeHandler","pageToGoTo","useEffect","createElement","classes","default","Label","id","htmlFor","itemsPerPage","Select","name","labeledBy","value","toString","onChange","event","pageSizeNumber","Number","target","Option","tabIndex","totalItems","Fragment","readyclasses","currentPageLabel","key","size","length","e","search","enabled","searchInputProps","wrapperProps","reset","autoComplete","Array","from","keys","map","page","replace","IconButton","disabled","title","onClick","Icon","icon","Icons","NavigationFirst","ChevronLeft","ChevronRight","NavigationLast"],"mappings":"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"}
+{"version":3,"file":"Pagination.cjs.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  Fragment,\n  useState,\n  useEffect\n} from \"react\";\nimport classes from \"./Pagination.module.scss\";\nimport readyclasses from \"../../readyclasses.module.scss\";\nimport { IconButton } from \"../Button/IconButton\";\nimport { Icons, Icon } from \"../Icon/Icon\";\nimport { Select } from \"../Form/Select/SingleSelect/Select\";\nimport { Option } from \"../Form/Select/SingleSelect/Option\";\nimport { Label } from \"../Form/Label/Label\";\n\nexport type PaginationTranslations = {\n  totalItems: string;\n  itemsPerPage: string;\n  itemsPerPageLabel: string;\n  currentPage: string;\n  currentPageLabel: string;\n};\n\nexport type PageChangeLabels = \"next\" | \"previous\" | \"first\" | \"last\";\n\nenum DefaultTranslations {\n  totalItems = \"items in total\",\n  itemsPerPage = \"Items per page\",\n  currentPage = \"of %1 pages\",\n  itemsPerPageLabel = \"Select how many items per page you want to see.\",\n  currentPageLabel = \"What page you are currently on.\"\n}\n\nexport type PageSize = 10 | 25 | 50;\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"translate\"> {\n  currentPage: number;\n  totalElements?: number;\n  pageSize?: PageSize;\n  translate?: PaginationTranslations;\n  onPageChange: (pageToGoTo: number) => void;\n  onPageSizeChange: (pageSize: PageSize) => void;\n}\n\nconst PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    totalElements,\n    pageSize = 10,\n    translate = DefaultTranslations,\n    currentPage,\n    className,\n    onPageChange,\n    onPageSizeChange,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const calculateAmountOfPages = () => {\n    if (!totalElements) {\n      return 1;\n    }\n\n    if (Math.ceil(totalElements / pageSize) < 1) {\n      return 1;\n    }\n\n    return Math.ceil(totalElements / pageSize);\n  };\n  const pagesAmount = calculateAmountOfPages();\n  const [resetPageNoSelect, setResetPageNoSelect] = useState(false);\n\n  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    const pageSizeNumber = Number(event.target.value) as PageSize;\n    setResetPageNoSelect(true);\n    onPageSizeChange(pageSizeNumber);\n  };\n\n  const onPageChangeHandler = (pageToGoTo: number) => {\n    onPageChange(pageToGoTo);\n  };\n\n  useEffect(() => {\n    resetPageNoSelect && setResetPageNoSelect(false);\n  }, [resetPageNoSelect]);\n\n  if (totalElements === undefined || totalElements === null || totalElements === 0) {\n    return null;\n  }\n\n  return (\n    <div {...rest} ref={ref} className={`${classes[\"pagination-wrapper\"]} ${className ?? \"\"}`}>\n      <div className={classes[\"left\"]}>\n        {pageSize && (\n          <div className={classes[\"per-page\"]}>\n            <Label\n              id=\"page-size-select-label\"\n              htmlFor=\"page-size-select\"\n              className={classes[\"label\"]}\n            >\n              {translate.itemsPerPage}\n            </Label>\n            <Select\n              name=\"page-size-select\"\n              id=\"page-size-select\"\n              labeledBy=\"page-size-select-label\"\n              className={`${classes[\"form-element\"]} ${classes[\"page-size-select\"]}`}\n              value={pageSize.toString()}\n              onChange={onPageSizeChangeHandler}\n            >\n              <Option value=\"10\">10</Option>\n              <Option value=\"25\">25</Option>\n              <Option value=\"50\">50</Option>\n            </Select>\n          </div>\n        )}\n        <div className={classes[\"total\"]}>\n          <span tabIndex={0}>\n            {totalElements}&nbsp;{translate.totalItems}\n          </span>\n        </div>\n      </div>\n      <div className={classes[\"pagination\"]}>\n        <Fragment>\n          {!!pagesAmount && (\n            <div className={classes[\"page\"]}>\n              <Label\n                id=\"current-value-input-label\"\n                htmlFor=\"current-value-input\"\n                className={`${readyclasses[\"sr-only\"]} ${classes[\"current-value-select-label\"]}`}\n              >\n                {translate.currentPageLabel}\n              </Label>\n              <Select\n                labeledBy=\"current-value-input-label\"\n                key=\"input\"\n                id=\"current-value-input\"\n                size={currentPage.toString().length}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>\n                  onPageChangeHandler(Number(e.target.value))\n                }\n                name=\"current-value-input\"\n                value={currentPage.toString()}\n                className={`${classes[\"form-element\"]} ${classes[\"current-page-select\"]}`}\n                search={{\n                  enabled: true,\n                  searchInputProps: {\n                    wrapperProps: { className: classes[\"search-input-wrapper\"] },\n                    ...(resetPageNoSelect && { reset: true }),\n                    autoComplete: \"off\"\n                  }\n                }}\n              >\n                {Array.from(Array(pagesAmount).keys()).map(page => (\n                  <Option key={page} value={(page + 1).toString()}>\n                    {(page + 1).toString()}\n                  </Option>\n                ))}\n              </Select>\n              <span className={classes[\"page-total\"]}>\n                {translate.currentPage.replace(\n                  \"%1\",\n                  Math.ceil(totalElements / pageSize).toString()\n                )}\n              </span>\n            </div>\n          )}\n          {!!currentPage && (\n            <div className={classes[\"previous\"]}>\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"first\"\n                  onClick={() => onPageChangeHandler(1)}\n                  data-paginate=\"first\"\n                >\n                  <Icon icon={Icons.NavigationFirst} />\n                </IconButton>\n              }\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"previous\"\n                  onClick={() => onPageChangeHandler(currentPage - 1)}\n                  data-paginate=\"previous\"\n                >\n                  <Icon icon={Icons.ChevronLeft} />\n                </IconButton>\n              }\n            </div>\n          )}\n          <div className={classes[\"next\"]}>\n            {(currentPage !== undefined || false) && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"next\"\n                onClick={() => onPageChangeHandler(currentPage + 1)}\n                data-paginate=\"next\"\n              >\n                <Icon icon={Icons.ChevronRight} />\n              </IconButton>\n            )}\n            {!!currentPage && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"last\"\n                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}\n                data-paginate=\"last\"\n              >\n                <Icon icon={Icons.NavigationLast} />\n              </IconButton>\n            )}\n          </div>\n        </Fragment>\n      </div>\n    </div>\n  );\n};\n\nexport const Pagination = React.forwardRef(PaginationComponent);\n"],"names":["DefaultTranslations","Pagination","React","forwardRef","totalElements","pageSize","translate","currentPage","className","onPageChange","onPageSizeChange","rest","ref","pagesAmount","Math","ceil","resetPageNoSelect","setResetPageNoSelect","useState","onPageChangeHandler","pageToGoTo","useEffect","createElement","classes","default","Label","id","htmlFor","itemsPerPage","Select","name","labeledBy","value","toString","onChange","event","pageSizeNumber","Number","target","Option","tabIndex","totalItems","Fragment","readyclasses","currentPageLabel","key","size","length","e","search","enabled","searchInputProps","wrapperProps","reset","autoComplete","Array","from","keys","map","page","replace","IconButton","disabled","title","onClick","Icon","icon","Icons","NavigationFirst","ChevronLeft","ChevronRight","NavigationLast"],"mappings":"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"}

package/dist/components/Pagination/Pagination.es.js

@@ -93,7 +93,7 @@ const PaginationComponent = ({
         enabled: true,
         searchInputProps: {
           wrapperProps: { className: classes["search-input-wrapper"] },
-          reset: resetPageNoSelect ? resetPageNoSelect : void 0,
+          ...resetPageNoSelect && { reset: true },
           autoComplete: "off"
         }
       }

package/dist/components/Pagination/Pagination.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.es.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  Fragment,\n  useState,\n  useEffect\n} from \"react\";\nimport classes from \"./Pagination.module.scss\";\nimport readyclasses from \"../../readyclasses.module.scss\";\nimport { IconButton } from \"../Button/IconButton\";\nimport { Icons, Icon } from \"../Icon/Icon\";\nimport { Select } from \"../Form/Select/SingleSelect/Select\";\nimport { Option } from \"../Form/Select/SingleSelect/Option\";\nimport { Label } from \"../Form/Label/Label\";\n\nexport type PaginationTranslations = {\n  totalItems: string;\n  itemsPerPage: string;\n  itemsPerPageLabel: string;\n  currentPage: string;\n  currentPageLabel: string;\n};\n\nexport type PageChangeLabels = \"next\" | \"previous\" | \"first\" | \"last\";\n\nenum DefaultTranslations {\n  totalItems = \"items in total\",\n  itemsPerPage = \"Items per page\",\n  currentPage = \"of %1 pages\",\n  itemsPerPageLabel = \"Select how many items per page you want to see.\",\n  currentPageLabel = \"What page you are currently on.\"\n}\n\nexport type PageSize = 10 | 25 | 50;\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"translate\"> {\n  currentPage: number;\n  totalElements?: number;\n  pageSize?: PageSize;\n  translate?: PaginationTranslations;\n  onPageChange: (pageToGoTo: number) => void;\n  onPageSizeChange: (pageSize: PageSize) => void;\n}\n\nconst PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    totalElements,\n    pageSize = 10,\n    translate = DefaultTranslations,\n    currentPage,\n    className,\n    onPageChange,\n    onPageSizeChange,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const calculateAmountOfPages = () => {\n    if (!totalElements) {\n      return 1;\n    }\n\n    if (Math.ceil(totalElements / pageSize) < 1) {\n      return 1;\n    }\n\n    return Math.ceil(totalElements / pageSize);\n  };\n  const pagesAmount = calculateAmountOfPages();\n  const [resetPageNoSelect, setResetPageNoSelect] = useState(false);\n\n  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    const pageSizeNumber = Number(event.target.value) as PageSize;\n    setResetPageNoSelect(true);\n    onPageSizeChange(pageSizeNumber);\n  };\n\n  const onPageChangeHandler = (pageToGoTo: number) => {\n    onPageChange(pageToGoTo);\n  };\n\n  useEffect(() => {\n    resetPageNoSelect && setResetPageNoSelect(false);\n  }, [resetPageNoSelect]);\n\n  if (totalElements === undefined || totalElements === null || totalElements === 0) {\n    return null;\n  }\n\n  return (\n    <div {...rest} ref={ref} className={`${classes[\"pagination-wrapper\"]} ${className ?? \"\"}`}>\n      <div className={classes[\"left\"]}>\n        {pageSize && (\n          <div className={classes[\"per-page\"]}>\n            <Label\n              id=\"page-size-select-label\"\n              htmlFor=\"page-size-select\"\n              className={classes[\"label\"]}\n            >\n              {translate.itemsPerPage}\n            </Label>\n            <Select\n              name=\"page-size-select\"\n              id=\"page-size-select\"\n              labeledBy=\"page-size-select-label\"\n              className={`${classes[\"form-element\"]} ${classes[\"page-size-select\"]}`}\n              value={pageSize.toString()}\n              onChange={onPageSizeChangeHandler}\n            >\n              <Option value=\"10\">10</Option>\n              <Option value=\"25\">25</Option>\n              <Option value=\"50\">50</Option>\n            </Select>\n          </div>\n        )}\n        <div className={classes[\"total\"]}>\n          <span tabIndex={0}>\n            {totalElements}&nbsp;{translate.totalItems}\n          </span>\n        </div>\n      </div>\n      <div className={classes[\"pagination\"]}>\n        <Fragment>\n          {!!pagesAmount && (\n            <div className={classes[\"page\"]}>\n              <Label\n                id=\"current-value-input-label\"\n                htmlFor=\"current-value-input\"\n                className={`${readyclasses[\"sr-only\"]} ${classes[\"current-value-select-label\"]}`}\n              >\n                {translate.currentPageLabel}\n              </Label>\n              <Select\n                labeledBy=\"current-value-input-label\"\n                key=\"input\"\n                id=\"current-value-input\"\n                size={currentPage.toString().length}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>\n                  onPageChangeHandler(Number(e.target.value))\n                }\n                name=\"current-value-input\"\n                value={currentPage.toString()}\n                className={`${classes[\"form-element\"]} ${classes[\"current-page-select\"]}`}\n                search={{\n                  enabled: true,\n                  searchInputProps: {\n                    wrapperProps: { className: classes[\"search-input-wrapper\"] },\n                    reset: resetPageNoSelect ? resetPageNoSelect : undefined,\n                    autoComplete: \"off\"\n                  }\n                }}\n              >\n                {Array.from(Array(pagesAmount).keys()).map(page => (\n                  <Option key={page} value={(page + 1).toString()}>\n                    {(page + 1).toString()}\n                  </Option>\n                ))}\n              </Select>\n              <span className={classes[\"page-total\"]}>\n                {translate.currentPage.replace(\n                  \"%1\",\n                  Math.ceil(totalElements / pageSize).toString()\n                )}\n              </span>\n            </div>\n          )}\n          {!!currentPage && (\n            <div className={classes[\"previous\"]}>\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"first\"\n                  onClick={() => onPageChangeHandler(1)}\n                  data-paginate=\"first\"\n                >\n                  <Icon icon={Icons.NavigationFirst} />\n                </IconButton>\n              }\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"previous\"\n                  onClick={() => onPageChangeHandler(currentPage - 1)}\n                  data-paginate=\"previous\"\n                >\n                  <Icon icon={Icons.ChevronLeft} />\n                </IconButton>\n              }\n            </div>\n          )}\n          <div className={classes[\"next\"]}>\n            {(currentPage !== undefined || false) && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"next\"\n                onClick={() => onPageChangeHandler(currentPage + 1)}\n                data-paginate=\"next\"\n              >\n                <Icon icon={Icons.ChevronRight} />\n              </IconButton>\n            )}\n            {!!currentPage && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"last\"\n                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}\n                data-paginate=\"last\"\n              >\n                <Icon icon={Icons.NavigationLast} />\n              </IconButton>\n            )}\n          </div>\n        </Fragment>\n      </div>\n    </div>\n  );\n};\n\nexport const Pagination = React.forwardRef(PaginationComponent);\n"],"names":["DefaultTranslations"],"mappings":"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"}
+{"version":3,"file":"Pagination.es.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  Fragment,\n  useState,\n  useEffect\n} from \"react\";\nimport classes from \"./Pagination.module.scss\";\nimport readyclasses from \"../../readyclasses.module.scss\";\nimport { IconButton } from \"../Button/IconButton\";\nimport { Icons, Icon } from \"../Icon/Icon\";\nimport { Select } from \"../Form/Select/SingleSelect/Select\";\nimport { Option } from \"../Form/Select/SingleSelect/Option\";\nimport { Label } from \"../Form/Label/Label\";\n\nexport type PaginationTranslations = {\n  totalItems: string;\n  itemsPerPage: string;\n  itemsPerPageLabel: string;\n  currentPage: string;\n  currentPageLabel: string;\n};\n\nexport type PageChangeLabels = \"next\" | \"previous\" | \"first\" | \"last\";\n\nenum DefaultTranslations {\n  totalItems = \"items in total\",\n  itemsPerPage = \"Items per page\",\n  currentPage = \"of %1 pages\",\n  itemsPerPageLabel = \"Select how many items per page you want to see.\",\n  currentPageLabel = \"What page you are currently on.\"\n}\n\nexport type PageSize = 10 | 25 | 50;\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"translate\"> {\n  currentPage: number;\n  totalElements?: number;\n  pageSize?: PageSize;\n  translate?: PaginationTranslations;\n  onPageChange: (pageToGoTo: number) => void;\n  onPageSizeChange: (pageSize: PageSize) => void;\n}\n\nconst PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    totalElements,\n    pageSize = 10,\n    translate = DefaultTranslations,\n    currentPage,\n    className,\n    onPageChange,\n    onPageSizeChange,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const calculateAmountOfPages = () => {\n    if (!totalElements) {\n      return 1;\n    }\n\n    if (Math.ceil(totalElements / pageSize) < 1) {\n      return 1;\n    }\n\n    return Math.ceil(totalElements / pageSize);\n  };\n  const pagesAmount = calculateAmountOfPages();\n  const [resetPageNoSelect, setResetPageNoSelect] = useState(false);\n\n  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    const pageSizeNumber = Number(event.target.value) as PageSize;\n    setResetPageNoSelect(true);\n    onPageSizeChange(pageSizeNumber);\n  };\n\n  const onPageChangeHandler = (pageToGoTo: number) => {\n    onPageChange(pageToGoTo);\n  };\n\n  useEffect(() => {\n    resetPageNoSelect && setResetPageNoSelect(false);\n  }, [resetPageNoSelect]);\n\n  if (totalElements === undefined || totalElements === null || totalElements === 0) {\n    return null;\n  }\n\n  return (\n    <div {...rest} ref={ref} className={`${classes[\"pagination-wrapper\"]} ${className ?? \"\"}`}>\n      <div className={classes[\"left\"]}>\n        {pageSize && (\n          <div className={classes[\"per-page\"]}>\n            <Label\n              id=\"page-size-select-label\"\n              htmlFor=\"page-size-select\"\n              className={classes[\"label\"]}\n            >\n              {translate.itemsPerPage}\n            </Label>\n            <Select\n              name=\"page-size-select\"\n              id=\"page-size-select\"\n              labeledBy=\"page-size-select-label\"\n              className={`${classes[\"form-element\"]} ${classes[\"page-size-select\"]}`}\n              value={pageSize.toString()}\n              onChange={onPageSizeChangeHandler}\n            >\n              <Option value=\"10\">10</Option>\n              <Option value=\"25\">25</Option>\n              <Option value=\"50\">50</Option>\n            </Select>\n          </div>\n        )}\n        <div className={classes[\"total\"]}>\n          <span tabIndex={0}>\n            {totalElements}&nbsp;{translate.totalItems}\n          </span>\n        </div>\n      </div>\n      <div className={classes[\"pagination\"]}>\n        <Fragment>\n          {!!pagesAmount && (\n            <div className={classes[\"page\"]}>\n              <Label\n                id=\"current-value-input-label\"\n                htmlFor=\"current-value-input\"\n                className={`${readyclasses[\"sr-only\"]} ${classes[\"current-value-select-label\"]}`}\n              >\n                {translate.currentPageLabel}\n              </Label>\n              <Select\n                labeledBy=\"current-value-input-label\"\n                key=\"input\"\n                id=\"current-value-input\"\n                size={currentPage.toString().length}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>\n                  onPageChangeHandler(Number(e.target.value))\n                }\n                name=\"current-value-input\"\n                value={currentPage.toString()}\n                className={`${classes[\"form-element\"]} ${classes[\"current-page-select\"]}`}\n                search={{\n                  enabled: true,\n                  searchInputProps: {\n                    wrapperProps: { className: classes[\"search-input-wrapper\"] },\n                    ...(resetPageNoSelect && { reset: true }),\n                    autoComplete: \"off\"\n                  }\n                }}\n              >\n                {Array.from(Array(pagesAmount).keys()).map(page => (\n                  <Option key={page} value={(page + 1).toString()}>\n                    {(page + 1).toString()}\n                  </Option>\n                ))}\n              </Select>\n              <span className={classes[\"page-total\"]}>\n                {translate.currentPage.replace(\n                  \"%1\",\n                  Math.ceil(totalElements / pageSize).toString()\n                )}\n              </span>\n            </div>\n          )}\n          {!!currentPage && (\n            <div className={classes[\"previous\"]}>\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"first\"\n                  onClick={() => onPageChangeHandler(1)}\n                  data-paginate=\"first\"\n                >\n                  <Icon icon={Icons.NavigationFirst} />\n                </IconButton>\n              }\n              {\n                <IconButton\n                  disabled={currentPage <= 1}\n                  title=\"previous\"\n                  onClick={() => onPageChangeHandler(currentPage - 1)}\n                  data-paginate=\"previous\"\n                >\n                  <Icon icon={Icons.ChevronLeft} />\n                </IconButton>\n              }\n            </div>\n          )}\n          <div className={classes[\"next\"]}>\n            {(currentPage !== undefined || false) && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"next\"\n                onClick={() => onPageChangeHandler(currentPage + 1)}\n                data-paginate=\"next\"\n              >\n                <Icon icon={Icons.ChevronRight} />\n              </IconButton>\n            )}\n            {!!currentPage && (\n              <IconButton\n                disabled={currentPage >= pagesAmount}\n                title=\"last\"\n                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}\n                data-paginate=\"last\"\n              >\n                <Icon icon={Icons.NavigationLast} />\n              </IconButton>\n            )}\n          </div>\n        </Fragment>\n      </div>\n    </div>\n  );\n};\n\nexport const Pagination = React.forwardRef(PaginationComponent);\n"],"names":["DefaultTranslations"],"mappings":"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"}

package/dist/components/Pagination/Pagination.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var a=document.createElement("style");a.appendChild(document.createTextNode('/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Pagination_pagination-wrapper_EsL6T{font-family:var(--font-family);font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);color:var(--greyed-out);display:flex;flex-direction:column;justify-content:space-between}.Pagination_pagination-wrapper_EsL6T .Pagination_left_EsL6T{display:flex}.Pagination_pagination-wrapper_EsL6T .Pagination_form-element_EsL6T{height:calc(2.5 * var(--font-size))}.Pagination_pagination-wrapper_EsL6T .Pagination_form-element_EsL6T .Pagination_search-input-wrapper_EsL6T{width:2.75rem}.Pagination_pagination-wrapper_EsL6T .Pagination_form-element_EsL6T button{min-height:calc(2.5 * var(--font-size))}.Pagination_pagination-wrapper_EsL6T .Pagination_total_EsL6T{flex:1 0 auto;display:flex;align-items:center;justify-content:center}.Pagination_pagination-wrapper_EsL6T .Pagination_total_EsL6T span{color:var(--color-blue-grey500)}.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T{flex:1 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1rem}.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T .Pagination_previous_EsL6T,.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T .Pagination_next_EsL6T{display:flex;align-items:center}.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T .Pagination_previous_EsL6T button span:before,.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T .Pagination_next_EsL6T button span:before{font-size:var(--font-size-sub)}.Pagination_pagination-wrapper_EsL6T .Pagination_per-page_EsL6T{display:none;align-items:center;gap:.5rem}.Pagination_pagination-wrapper_EsL6T .Pagination_per-page_EsL6T label{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);font-weight:500;color:var(--color-blue-grey900)}.Pagination_pagination-wrapper_EsL6T .Pagination_per-page_EsL6T+.Pagination_total_EsL6T{padding-left:.9375rem;border-left:1px solid var(--color-blue-grey100)}.Pagination_pagination-wrapper_EsL6T .Pagination_page_EsL6T{display:flex;align-items:center;flex-basis:min-content;padding-right:1rem}.Pagination_pagination-wrapper_EsL6T .Pagination_page-total_EsL6T{display:inline-block;margin-left:.5rem;white-space:nowrap;font-weight:500;color:var(--color-blue-grey900)}.Pagination_pagination-wrapper_EsL6T .Pagination_page_EsL6T+.Pagination_previous_EsL6T{padding-left:.9375rem;border-left:1px solid var(--color-blue-grey100)}.Pagination_pagination-wrapper_EsL6T .Pagination_page-size-select_EsL6T button{min-width:calc(4.25 * var(--font-size));padding:0}.Pagination_pagination-wrapper_EsL6T .Pagination_page-size-select_EsL6T button div[data-display]{left:.5rem}.Pagination_pagination-wrapper_EsL6T .Pagination_page-size-select_EsL6T button div:not([data-display]){right:.5rem}.Pagination_current-page-select_EsL6T button{min-width:calc(3.75 * var(--font-size));padding:0}.Pagination_current-page-select_EsL6T button div[data-display]{left:.5rem}.Pagination_current-page-select_EsL6T button div:not([data-display]){right:.5rem}@media screen and (min-width: 30em){.Pagination_pagination-wrapper_EsL6T{flex-direction:row}.Pagination_pagination-wrapper_EsL6T .Pagination_total_EsL6T{justify-content:flex-start}.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T{margin-top:0;justify-content:flex-end}}@media screen and (min-width: 48em){.Pagination_pagination-wrapper_EsL6T .Pagination_per-page_EsL6T{display:flex;margin-right:1rem}}')),document.head.appendChild(a)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="Pagination_left_EsL6T",a="Pagination_total_EsL6T",t="Pagination_pagination_EsL6T",n="Pagination_previous_EsL6T",i="Pagination_next_EsL6T",o="Pagination_page_EsL6T",p={"pagination-wrapper":"Pagination_pagination-wrapper_EsL6T",left:e,"form-element":"Pagination_form-element_EsL6T","search-input-wrapper":"Pagination_search-input-wrapper_EsL6T",total:a,pagination:t,previous:n,next:i,"per-page":"Pagination_per-page_EsL6T",page:o,"page-total":"Pagination_page-total_EsL6T","page-size-select":"Pagination_page-size-select_EsL6T","current-page-select":"Pagination_current-page-select_EsL6T"};exports.default=p,exports.left=e,exports.next=i,exports.page=o,exports.pagination=t,exports.previous=n,exports.total=a;
+!function(){"use strict";try{if("undefined"!=typeof document){var a=document.createElement("style");a.appendChild(document.createTextNode('/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Pagination_pagination-wrapper_HO9cY{font-family:var(--font-family);font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);color:var(--greyed-out);display:flex;flex-direction:column;justify-content:space-between}.Pagination_pagination-wrapper_HO9cY .Pagination_left_HO9cY{display:flex}.Pagination_pagination-wrapper_HO9cY .Pagination_form-element_HO9cY{height:calc(2.5 * var(--font-size))}.Pagination_pagination-wrapper_HO9cY .Pagination_form-element_HO9cY .Pagination_search-input-wrapper_HO9cY{width:2.75rem}.Pagination_pagination-wrapper_HO9cY .Pagination_form-element_HO9cY button{min-height:calc(2.5 * var(--font-size))}.Pagination_pagination-wrapper_HO9cY .Pagination_total_HO9cY{flex:1 0 auto;display:flex;align-items:center;justify-content:center}.Pagination_pagination-wrapper_HO9cY .Pagination_total_HO9cY span{color:var(--color-blue-grey500)}.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY{flex:1 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1rem}.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY .Pagination_previous_HO9cY,.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY .Pagination_next_HO9cY{display:flex;align-items:center}.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY .Pagination_previous_HO9cY button span:before,.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY .Pagination_next_HO9cY button span:before{font-size:var(--font-size-sub)}.Pagination_pagination-wrapper_HO9cY .Pagination_per-page_HO9cY{display:none;align-items:center;gap:.5rem}.Pagination_pagination-wrapper_HO9cY .Pagination_per-page_HO9cY label{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);font-weight:500;color:var(--color-blue-grey900)}.Pagination_pagination-wrapper_HO9cY .Pagination_per-page_HO9cY+.Pagination_total_HO9cY{padding-left:.9375rem;border-left:1px solid var(--color-blue-grey100)}.Pagination_pagination-wrapper_HO9cY .Pagination_page_HO9cY{display:flex;align-items:center;flex-basis:min-content;padding-right:1rem}.Pagination_pagination-wrapper_HO9cY .Pagination_page-total_HO9cY{display:inline-block;margin-left:.5rem;white-space:nowrap;font-weight:500;color:var(--color-blue-grey900)}.Pagination_pagination-wrapper_HO9cY .Pagination_page_HO9cY+.Pagination_previous_HO9cY{padding-left:.9375rem;border-left:1px solid var(--color-blue-grey100)}.Pagination_pagination-wrapper_HO9cY .Pagination_page-size-select_HO9cY button{min-width:calc(4.25 * var(--font-size));padding:0}.Pagination_pagination-wrapper_HO9cY .Pagination_page-size-select_HO9cY button div[data-display]{left:.5rem}.Pagination_pagination-wrapper_HO9cY .Pagination_page-size-select_HO9cY button div:not([data-display]){right:.5rem}.Pagination_current-page-select_HO9cY button{min-width:calc(3.75 * var(--font-size));padding:0}.Pagination_current-page-select_HO9cY button div[data-display]{left:.5rem}.Pagination_current-page-select_HO9cY button div:not([data-display]){right:.5rem}@media screen and (min-width: 30em){.Pagination_pagination-wrapper_HO9cY{flex-direction:row}.Pagination_pagination-wrapper_HO9cY .Pagination_total_HO9cY{justify-content:flex-start}.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY{margin-top:0;justify-content:flex-end}}@media screen and (min-width: 48em){.Pagination_pagination-wrapper_HO9cY .Pagination_per-page_HO9cY{display:flex;margin-right:1rem}}')),document.head.appendChild(a)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="Pagination_left_HO9cY",a="Pagination_total_HO9cY",t="Pagination_pagination_HO9cY",n="Pagination_previous_HO9cY",i="Pagination_next_HO9cY",o="Pagination_page_HO9cY",p={"pagination-wrapper":"Pagination_pagination-wrapper_HO9cY",left:e,"form-element":"Pagination_form-element_HO9cY","search-input-wrapper":"Pagination_search-input-wrapper_HO9cY",total:a,pagination:t,previous:n,next:i,"per-page":"Pagination_per-page_HO9cY",page:o,"page-total":"Pagination_page-total_HO9cY","page-size-select":"Pagination_page-size-select_HO9cY","current-page-select":"Pagination_current-page-select_HO9cY"};exports.default=p,exports.left=e,exports.next=i,exports.page=o,exports.pagination=t,exports.previous=n,exports.total=a;
 //# sourceMappingURL=Pagination.module.scss.cjs.js.map

package/dist/components/Pagination/Pagination.module.scss.es.js

@@ -1,24 +1,24 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var a=document.createElement("style");a.appendChild(document.createTextNode('/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Pagination_pagination-wrapper_EsL6T{font-family:var(--font-family);font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);color:var(--greyed-out);display:flex;flex-direction:column;justify-content:space-between}.Pagination_pagination-wrapper_EsL6T .Pagination_left_EsL6T{display:flex}.Pagination_pagination-wrapper_EsL6T .Pagination_form-element_EsL6T{height:calc(2.5 * var(--font-size))}.Pagination_pagination-wrapper_EsL6T .Pagination_form-element_EsL6T .Pagination_search-input-wrapper_EsL6T{width:2.75rem}.Pagination_pagination-wrapper_EsL6T .Pagination_form-element_EsL6T button{min-height:calc(2.5 * var(--font-size))}.Pagination_pagination-wrapper_EsL6T .Pagination_total_EsL6T{flex:1 0 auto;display:flex;align-items:center;justify-content:center}.Pagination_pagination-wrapper_EsL6T .Pagination_total_EsL6T span{color:var(--color-blue-grey500)}.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T{flex:1 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1rem}.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T .Pagination_previous_EsL6T,.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T .Pagination_next_EsL6T{display:flex;align-items:center}.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T .Pagination_previous_EsL6T button span:before,.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T .Pagination_next_EsL6T button span:before{font-size:var(--font-size-sub)}.Pagination_pagination-wrapper_EsL6T .Pagination_per-page_EsL6T{display:none;align-items:center;gap:.5rem}.Pagination_pagination-wrapper_EsL6T .Pagination_per-page_EsL6T label{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);font-weight:500;color:var(--color-blue-grey900)}.Pagination_pagination-wrapper_EsL6T .Pagination_per-page_EsL6T+.Pagination_total_EsL6T{padding-left:.9375rem;border-left:1px solid var(--color-blue-grey100)}.Pagination_pagination-wrapper_EsL6T .Pagination_page_EsL6T{display:flex;align-items:center;flex-basis:min-content;padding-right:1rem}.Pagination_pagination-wrapper_EsL6T .Pagination_page-total_EsL6T{display:inline-block;margin-left:.5rem;white-space:nowrap;font-weight:500;color:var(--color-blue-grey900)}.Pagination_pagination-wrapper_EsL6T .Pagination_page_EsL6T+.Pagination_previous_EsL6T{padding-left:.9375rem;border-left:1px solid var(--color-blue-grey100)}.Pagination_pagination-wrapper_EsL6T .Pagination_page-size-select_EsL6T button{min-width:calc(4.25 * var(--font-size));padding:0}.Pagination_pagination-wrapper_EsL6T .Pagination_page-size-select_EsL6T button div[data-display]{left:.5rem}.Pagination_pagination-wrapper_EsL6T .Pagination_page-size-select_EsL6T button div:not([data-display]){right:.5rem}.Pagination_current-page-select_EsL6T button{min-width:calc(3.75 * var(--font-size));padding:0}.Pagination_current-page-select_EsL6T button div[data-display]{left:.5rem}.Pagination_current-page-select_EsL6T button div:not([data-display]){right:.5rem}@media screen and (min-width: 30em){.Pagination_pagination-wrapper_EsL6T{flex-direction:row}.Pagination_pagination-wrapper_EsL6T .Pagination_total_EsL6T{justify-content:flex-start}.Pagination_pagination-wrapper_EsL6T .Pagination_pagination_EsL6T{margin-top:0;justify-content:flex-end}}@media screen and (min-width: 48em){.Pagination_pagination-wrapper_EsL6T .Pagination_per-page_EsL6T{display:flex;margin-right:1rem}}')),document.head.appendChild(a)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-const left = "Pagination_left_EsL6T";
-const total = "Pagination_total_EsL6T";
-const pagination = "Pagination_pagination_EsL6T";
-const previous = "Pagination_previous_EsL6T";
-const next = "Pagination_next_EsL6T";
-const page = "Pagination_page_EsL6T";
+!function(){"use strict";try{if("undefined"!=typeof document){var a=document.createElement("style");a.appendChild(document.createTextNode('/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Pagination_pagination-wrapper_HO9cY{font-family:var(--font-family);font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);color:var(--greyed-out);display:flex;flex-direction:column;justify-content:space-between}.Pagination_pagination-wrapper_HO9cY .Pagination_left_HO9cY{display:flex}.Pagination_pagination-wrapper_HO9cY .Pagination_form-element_HO9cY{height:calc(2.5 * var(--font-size))}.Pagination_pagination-wrapper_HO9cY .Pagination_form-element_HO9cY .Pagination_search-input-wrapper_HO9cY{width:2.75rem}.Pagination_pagination-wrapper_HO9cY .Pagination_form-element_HO9cY button{min-height:calc(2.5 * var(--font-size))}.Pagination_pagination-wrapper_HO9cY .Pagination_total_HO9cY{flex:1 0 auto;display:flex;align-items:center;justify-content:center}.Pagination_pagination-wrapper_HO9cY .Pagination_total_HO9cY span{color:var(--color-blue-grey500)}.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY{flex:1 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1rem}.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY .Pagination_previous_HO9cY,.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY .Pagination_next_HO9cY{display:flex;align-items:center}.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY .Pagination_previous_HO9cY button span:before,.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY .Pagination_next_HO9cY button span:before{font-size:var(--font-size-sub)}.Pagination_pagination-wrapper_HO9cY .Pagination_per-page_HO9cY{display:none;align-items:center;gap:.5rem}.Pagination_pagination-wrapper_HO9cY .Pagination_per-page_HO9cY label{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);font-weight:500;color:var(--color-blue-grey900)}.Pagination_pagination-wrapper_HO9cY .Pagination_per-page_HO9cY+.Pagination_total_HO9cY{padding-left:.9375rem;border-left:1px solid var(--color-blue-grey100)}.Pagination_pagination-wrapper_HO9cY .Pagination_page_HO9cY{display:flex;align-items:center;flex-basis:min-content;padding-right:1rem}.Pagination_pagination-wrapper_HO9cY .Pagination_page-total_HO9cY{display:inline-block;margin-left:.5rem;white-space:nowrap;font-weight:500;color:var(--color-blue-grey900)}.Pagination_pagination-wrapper_HO9cY .Pagination_page_HO9cY+.Pagination_previous_HO9cY{padding-left:.9375rem;border-left:1px solid var(--color-blue-grey100)}.Pagination_pagination-wrapper_HO9cY .Pagination_page-size-select_HO9cY button{min-width:calc(4.25 * var(--font-size));padding:0}.Pagination_pagination-wrapper_HO9cY .Pagination_page-size-select_HO9cY button div[data-display]{left:.5rem}.Pagination_pagination-wrapper_HO9cY .Pagination_page-size-select_HO9cY button div:not([data-display]){right:.5rem}.Pagination_current-page-select_HO9cY button{min-width:calc(3.75 * var(--font-size));padding:0}.Pagination_current-page-select_HO9cY button div[data-display]{left:.5rem}.Pagination_current-page-select_HO9cY button div:not([data-display]){right:.5rem}@media screen and (min-width: 30em){.Pagination_pagination-wrapper_HO9cY{flex-direction:row}.Pagination_pagination-wrapper_HO9cY .Pagination_total_HO9cY{justify-content:flex-start}.Pagination_pagination-wrapper_HO9cY .Pagination_pagination_HO9cY{margin-top:0;justify-content:flex-end}}@media screen and (min-width: 48em){.Pagination_pagination-wrapper_HO9cY .Pagination_per-page_HO9cY{display:flex;margin-right:1rem}}')),document.head.appendChild(a)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const left = "Pagination_left_HO9cY";
+const total = "Pagination_total_HO9cY";
+const pagination = "Pagination_pagination_HO9cY";
+const previous = "Pagination_previous_HO9cY";
+const next = "Pagination_next_HO9cY";
+const page = "Pagination_page_HO9cY";
 const classes = {
-  "pagination-wrapper": "Pagination_pagination-wrapper_EsL6T",
+  "pagination-wrapper": "Pagination_pagination-wrapper_HO9cY",
   left,
-  "form-element": "Pagination_form-element_EsL6T",
-  "search-input-wrapper": "Pagination_search-input-wrapper_EsL6T",
+  "form-element": "Pagination_form-element_HO9cY",
+  "search-input-wrapper": "Pagination_search-input-wrapper_HO9cY",
   total,
   pagination,
   previous,
   next,
-  "per-page": "Pagination_per-page_EsL6T",
+  "per-page": "Pagination_per-page_HO9cY",
   page,
-  "page-total": "Pagination_page-total_EsL6T",
-  "page-size-select": "Pagination_page-size-select_EsL6T",
-  "current-page-select": "Pagination_current-page-select_EsL6T"
+  "page-total": "Pagination_page-total_HO9cY",
+  "page-size-select": "Pagination_page-size-select_HO9cY",
+  "current-page-select": "Pagination_current-page-select_HO9cY"
 };
 export {
   classes as default,

package/dist/components/Popover/Popover.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../hooks/usePosition.cjs.js"),o=require("./Popover.module.scss.cjs.js"),n=e.forwardRef((({children:n,className:i,show:r,placement:s,offset:l,debounceAmount:u,transformOrigin:c,anchorEl:a,onAnchorOutOfView:f,...d},m)=>{const[v,w]=e.useState(!1),b=e.useRef(null),{top:p,left:E,right:g,bottom:h,calculatePosition:N,initialCalculationDone:P}=t.usePosition({elementToBePositioned:b,relativeElement:a,offset:l,placement:s,transformOrigin:c,debounceAmount:u??void 0}),j=e=>"initial"===e?"initial":isNaN(e)?0:Number(e);return e.useEffect((()=>{P&&w(!!r)}),[r,P]),e.useEffect((()=>{if(v)return window.addEventListener("resize",N),window.addEventListener("scroll",N),()=>{window.removeEventListener("resize",N),window.removeEventListener("scroll",N)}}),[v]),e.useEffect((()=>{N()}),[v,b,a]),e.useEffect((()=>{const e=null==a?void 0:a.current;if(e){const t=e.getBoundingClientRect().top,o=e.getBoundingClientRect().bottom;v&&(Number(p)<0||Number(E)<0||Number(g)<0||Number(h)<0||t<0||o>window.innerHeight)&&(null==f||f())}}),[p,E,g,h]),e.createElement("div",{ref:m,...d},e.createElement("div",{ref:b,className:`${o.default.popover} ${i??""} ${v?o.default.show:""}`,style:{top:j(p),left:j(E),right:j(g),bottom:j(h)}},n))}));exports.Popover=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../hooks/usePosition.cjs.js"),n=require("./Popover.module.scss.cjs.js"),o=e.forwardRef((({children:o,className:r,show:i,placement:s,offset:u,debounceAmount:c,transformOrigin:l,anchorEl:a,onAnchorOutOfView:f,...d},m)=>{const[v,p]=e.useState(!1),[E,w]=e.useState(!1),b=e.useRef(null),{top:g,left:N,right:h,bottom:L,calculatePosition:P}=t.usePosition({elementToBePositioned:b,relativeElement:a,offset:u,placement:s,transformOrigin:l,debounceAmount:c??void 0}),y=e=>"initial"===e?"initial":isNaN(e)?0:Number(e);return e.useEffect((()=>{i?p(!0):w(!1)}),[i]),e.useLayoutEffect((()=>{v&&!E&&i&&(P(),requestAnimationFrame((()=>{w(!0)})))}),[v,E,i,P]),e.useEffect((()=>{if(E)return window.addEventListener("resize",P),window.addEventListener("scroll",P),()=>{window.removeEventListener("resize",P),window.removeEventListener("scroll",P)}}),[E,P]),e.useEffect((()=>{const e=b.current;if(!e||E)return;const t=e=>{"opacity"===e.propertyName&&p(!1)};return e.addEventListener("transitionend",t),()=>{e.removeEventListener("transitionend",t)}}),[E]),e.useEffect((()=>{const e=null==a?void 0:a.current;if(e){const t=e.getBoundingClientRect().top,n=e.getBoundingClientRect().bottom;E&&(Number(g)<0||Number(N)<0||Number(h)<0||Number(L)<0||t<0||n>window.innerHeight)&&(null==f||f())}}),[g,N,h,L]),e.createElement("div",{ref:m,...d},v&&e.createElement("div",{ref:b,className:`${n.default.popover} ${r??""} ${E?n.default.show:""}`,style:{top:y(g),left:y(N),right:y(h),bottom:y(L)}},o))}));exports.Popover=o;
 //# sourceMappingURL=Popover.cjs.js.map

package/dist/components/Popover/Popover.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Offset, Placement, PositionType, usePosition } from \"../../hooks/usePosition\";\nimport classes from \"./Popover.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  children?: ReactNode;\n  show?: boolean;\n  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  transformOrigin?: Placement;\n  onAnchorOutOfView?: () => void;\n}\n\nconst PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    children,\n    className,\n    show,\n    placement,\n    offset,\n    debounceAmount,\n    transformOrigin,\n    anchorEl,\n    onAnchorOutOfView,\n    ...rest\n  },\n  ref\n) => {\n  const [showPopover, setShowPopover] = useState(false);\n  const elToBePositioned = useRef<HTMLDivElement>(null);\n  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({\n    elementToBePositioned: elToBePositioned,\n    relativeElement: anchorEl,\n    offset: offset,\n    placement: placement,\n    transformOrigin: transformOrigin,\n    debounceAmount: debounceAmount ?? undefined\n  });\n\n  const normalizePosition = (value: PositionType) => {\n    if (value === \"initial\") {\n      return \"initial\";\n    }\n\n    if (isNaN(value)) {\n      return 0;\n    }\n\n    return Number(value);\n  };\n\n  useEffect(() => {\n    if (initialCalculationDone) {\n      setShowPopover(!!show);\n    }\n  }, [show, initialCalculationDone]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      return;\n    }\n\n    window.addEventListener(\"resize\", calculatePosition);\n    window.addEventListener(\"scroll\", calculatePosition);\n\n    return () => {\n      window.removeEventListener(\"resize\", calculatePosition);\n      window.removeEventListener(\"scroll\", calculatePosition);\n    };\n  }, [showPopover]);\n\n  useEffect(() => {\n    calculatePosition();\n  }, [showPopover, elToBePositioned, anchorEl]);\n\n  useEffect(() => {\n    const anchor = anchorEl?.current as HTMLElement;\n\n    if (anchor) {\n      const anchorTop = anchor.getBoundingClientRect().top;\n      const anchorBottom = anchor.getBoundingClientRect().bottom;\n\n      const isAnchorOffscreen =\n        showPopover &&\n        (Number(top) < 0 ||\n          Number(left) < 0 ||\n          Number(right) < 0 ||\n          Number(bottom) < 0 ||\n          anchorTop < 0 ||\n          anchorBottom > window.innerHeight);\n\n      if (isAnchorOffscreen) {\n        onAnchorOutOfView?.();\n      }\n    }\n  }, [top, left, right, bottom]);\n\n  return (\n    <div ref={ref} {...rest}>\n      <div\n        ref={elToBePositioned}\n        className={`${classes.popover} ${className ?? \"\"} ${showPopover ? classes.show : \"\"}`}\n        style={{\n          top: normalizePosition(top),\n          left: normalizePosition(left),\n          right: normalizePosition(right),\n          bottom: normalizePosition(bottom)\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport const Popover = React.forwardRef(PopoverComponent);\n"],"names":["Popover","React","forwardRef","children","className","show","placement","offset","debounceAmount","transformOrigin","anchorEl","onAnchorOutOfView","rest","ref","showPopover","setShowPopover","useState","elToBePositioned","useRef","top","left","right","bottom","calculatePosition","initialCalculationDone","usePosition","elementToBePositioned","relativeElement","normalizePosition","value","isNaN","Number","useEffect","window","addEventListener","removeEventListener","anchor","current","anchorTop","getBoundingClientRect","anchorBottom","innerHeight","createElement","classes","popover","style"],"mappings":"+LA6IaA,EAAUC,EAAMC,YAtG6C,EAEtEC,WACAC,YACAC,OACAC,YACAC,SACAC,iBACAC,kBACAC,WACAC,uBACGC,GAELC,KAEA,MAAOC,EAAaC,GAAkBC,EAAAA,UAAS,GACzCC,EAAmBC,SAAuB,OAC1CC,IAAEA,OAAKC,EAAMC,MAAAA,EAAAC,OAAOA,oBAAQC,EAAmBC,uBAAAA,GAA2BC,cAAY,CAC1FC,sBAAuBT,EACvBU,gBAAiBjB,EACjBH,SACAD,YACAG,kBACAD,eAAgBA,QAAkB,IAG9BoB,EAAqBC,GACX,YAAVA,EACK,UAGLC,MAAMD,GACD,EAGFE,OAAOF,GAkDb,OA/CHG,EAAAA,WAAU,KACJR,GACaT,IAAEV,EAAI,GAEtB,CAACA,EAAMmB,IAEVQ,EAAAA,WAAU,KACR,GAAKlB,EAOL,OAHOmB,OAAAC,iBAAiB,SAAUX,GAC3BU,OAAAC,iBAAiB,SAAUX,GAE3B,KACEU,OAAAE,oBAAoB,SAAUZ,GAC9BU,OAAAE,oBAAoB,SAAUZ,EAAiB,CACxD,GACC,CAACT,IAEJkB,EAAAA,WAAU,KACUT,GAAA,GACjB,CAACT,EAAaG,EAAkBP,IAEnCsB,EAAAA,WAAU,KACR,MAAMI,EAAmB,MAAV1B,OAAU,EAAAA,EAAA2B,QAEzB,GAAID,EAAQ,CACJ,MAAAE,EAAYF,EAAOG,wBAAwBpB,IAC3CqB,EAAeJ,EAAOG,wBAAwBjB,OAGlDR,IACCiB,OAAOZ,GAAO,GACbY,OAAOX,GAAQ,GACfW,OAAOV,GAAS,GAChBU,OAAOT,GAAU,GACjBgB,EAAY,GACZE,EAAeP,OAAOQ,eAGJ,MAAA9B,GAAAA,IACtB,IAED,CAACQ,EAAKC,EAAMC,EAAOC,IAGnBrB,EAAAyC,cAAA,MAAA,CAAI7B,SAAcD,GACjBX,EAAAyC,cAAC,MAAA,CACC7B,IAAKI,EACLb,UAAW,GAAGuC,EAAAA,QAAQC,WAAWxC,GAAa,MAAMU,EAAc6B,EAAAA,QAAQtC,KAAO,KACjFwC,MAAO,CACL1B,IAAKS,EAAkBT,GACvBC,KAAMQ,EAAkBR,GACxBC,MAAOO,EAAkBP,GACzBC,OAAQM,EAAkBN,KAG3BnB,GAEL"}
+{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Offset, Placement, PositionType, usePosition } from \"../../hooks/usePosition\";\nimport classes from \"./Popover.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  children?: ReactNode;\n  show?: boolean;\n  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  transformOrigin?: Placement;\n  onAnchorOutOfView?: () => void;\n}\n\nconst PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    children,\n    className,\n    show,\n    placement,\n    offset,\n    debounceAmount,\n    transformOrigin,\n    anchorEl,\n    onAnchorOutOfView,\n    ...rest\n  },\n  ref\n) => {\n  const [shouldRender, setShouldRender] = useState(false);\n  const [showPopover, setShowPopover] = useState(false);\n  const elToBePositioned = useRef<HTMLDivElement>(null);\n  const { top, left, right, bottom, calculatePosition } = usePosition({\n    elementToBePositioned: elToBePositioned,\n    relativeElement: anchorEl,\n    offset: offset,\n    placement: placement,\n    transformOrigin: transformOrigin,\n    debounceAmount: debounceAmount ?? undefined\n  });\n\n  const normalizePosition = (value: PositionType) => {\n    if (value === \"initial\") {\n      return \"initial\";\n    }\n\n    if (isNaN(value)) {\n      return 0;\n    }\n\n    return Number(value);\n  };\n\n  useEffect(() => {\n    if (show) {\n      setShouldRender(true);\n    } else {\n      setShowPopover(false);\n    }\n  }, [show]);\n\n  useLayoutEffect(() => {\n    if (shouldRender && !showPopover && show) {\n      calculatePosition();\n      requestAnimationFrame(() => {\n        setShowPopover(true);\n      });\n    }\n  }, [shouldRender, showPopover, show, calculatePosition]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      return;\n    }\n\n    window.addEventListener(\"resize\", calculatePosition);\n    window.addEventListener(\"scroll\", calculatePosition);\n\n    return () => {\n      window.removeEventListener(\"resize\", calculatePosition);\n      window.removeEventListener(\"scroll\", calculatePosition);\n    };\n  }, [showPopover, calculatePosition]);\n\n  useEffect(() => {\n    const element = elToBePositioned.current;\n\n    if (!element || showPopover) {\n      return;\n    }\n\n    const handleTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"opacity\") {\n        setShouldRender(false);\n      }\n    };\n\n    element.addEventListener(\"transitionend\", handleTransitionEnd);\n\n    return () => {\n      element.removeEventListener(\"transitionend\", handleTransitionEnd);\n    };\n  }, [showPopover]);\n\n  useEffect(() => {\n    const anchor = anchorEl?.current as HTMLElement;\n\n    if (anchor) {\n      const anchorTop = anchor.getBoundingClientRect().top;\n      const anchorBottom = anchor.getBoundingClientRect().bottom;\n\n      const isAnchorOffscreen =\n        showPopover &&\n        (Number(top) < 0 ||\n          Number(left) < 0 ||\n          Number(right) < 0 ||\n          Number(bottom) < 0 ||\n          anchorTop < 0 ||\n          anchorBottom > window.innerHeight);\n\n      if (isAnchorOffscreen) {\n        onAnchorOutOfView?.();\n      }\n    }\n  }, [top, left, right, bottom]);\n\n  return (\n    <div ref={ref} {...rest}>\n      {shouldRender && (\n        <div\n          ref={elToBePositioned}\n          className={`${classes.popover} ${className ?? \"\"} ${showPopover ? classes.show : \"\"}`}\n          style={{\n            top: normalizePosition(top),\n            left: normalizePosition(left),\n            right: normalizePosition(right),\n            bottom: normalizePosition(bottom)\n          }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const Popover = React.forwardRef(PopoverComponent);\n"],"names":["Popover","React","forwardRef","children","className","show","placement","offset","debounceAmount","transformOrigin","anchorEl","onAnchorOutOfView","rest","ref","shouldRender","setShouldRender","useState","showPopover","setShowPopover","elToBePositioned","useRef","top","left","right","bottom","calculatePosition","usePosition","elementToBePositioned","relativeElement","normalizePosition","value","isNaN","Number","useEffect","useLayoutEffect","requestAnimationFrame","window","addEventListener","removeEventListener","element","current","handleTransitionEnd","event","propertyName","anchor","anchorTop","getBoundingClientRect","anchorBottom","innerHeight","createElement","classes","popover","style"],"mappings":"+LA4KaA,EAAUC,EAAMC,YApI6C,EAEtEC,WACAC,YACAC,OACAC,YACAC,SACAC,iBACAC,kBACAC,WACAC,uBACGC,GAELC,KAEA,MAAOC,EAAcC,GAAmBC,EAAAA,UAAS,IAC1CC,EAAaC,GAAkBF,EAAAA,UAAS,GACzCG,EAAmBC,SAAuB,OAC1CC,IAAEA,OAAKC,EAAMC,MAAAA,EAAAC,OAAOA,oBAAQC,GAAsBC,cAAY,CAClEC,sBAAuBR,EACvBS,gBAAiBlB,EACjBH,SACAD,YACAG,kBACAD,eAAgBA,QAAkB,IAG9BqB,EAAqBC,GACX,YAAVA,EACK,UAGLC,MAAMD,GACD,EAGFE,OAAOF,GA6Eb,OA1EHG,EAAAA,WAAU,KACJ5B,EACFU,GAAgB,GAEhBG,GAAe,EAAK,GAErB,CAACb,IAEJ6B,EAAAA,iBAAgB,KACVpB,IAAiBG,GAAeZ,IAChBoB,IAClBU,uBAAsB,KACpBjB,GAAe,EAAI,IACpB,GAEF,CAACJ,EAAcG,EAAaZ,EAAMoB,IAErCQ,EAAAA,WAAU,KACR,GAAKhB,EAOL,OAHOmB,OAAAC,iBAAiB,SAAUZ,GAC3BW,OAAAC,iBAAiB,SAAUZ,GAE3B,KACEW,OAAAE,oBAAoB,SAAUb,GAC9BW,OAAAE,oBAAoB,SAAUb,EAAiB,CACxD,GACC,CAACR,EAAaQ,IAEjBQ,EAAAA,WAAU,KACR,MAAMM,EAAUpB,EAAiBqB,QAE7B,IAACD,GAAWtB,EACd,OAGI,MAAAwB,EAAuBC,IACA,YAAvBA,EAAMC,cACR5B,GAAgB,EAAK,EAMzB,OAFQwB,EAAAF,iBAAiB,gBAAiBI,GAEnC,KACGF,EAAAD,oBAAoB,gBAAiBG,EAAmB,CAClE,GACC,CAACxB,IAEJgB,EAAAA,WAAU,KACR,MAAMW,EAAmB,MAAVlC,OAAU,EAAAA,EAAA8B,QAEzB,GAAII,EAAQ,CACJ,MAAAC,EAAYD,EAAOE,wBAAwBzB,IAC3C0B,EAAeH,EAAOE,wBAAwBtB,OAGlDP,IACCe,OAAOX,GAAO,GACbW,OAAOV,GAAQ,GACfU,OAAOT,GAAS,GAChBS,OAAOR,GAAU,GACjBqB,EAAY,GACZE,EAAeX,OAAOY,eAGJ,MAAArC,GAAAA,IACtB,IAED,CAACU,EAAKC,EAAMC,EAAOC,IAGnBvB,EAAAgD,cAAA,MAAA,CAAIpC,SAAcD,GAChBE,GACCb,EAAAgD,cAAC,MAAA,CACCpC,IAAKM,EACLf,UAAW,GAAG8C,EAAAA,QAAQC,WAAW/C,GAAa,MAAMa,EAAciC,EAAAA,QAAQ7C,KAAO,KACjF+C,MAAO,CACL/B,IAAKQ,EAAkBR,GACvBC,KAAMO,EAAkBP,GACxBC,MAAOM,EAAkBN,GACzBC,OAAQK,EAAkBL,KAG3BrB,GAGP"}

package/dist/components/Popover/Popover.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
 import { usePosition } from "../../hooks/usePosition.es.js";
 import classes from "./Popover.module.scss.es.js";
 const PopoverComponent = ({
@@ -13,9 +13,10 @@ const PopoverComponent = ({
   onAnchorOutOfView,
   ...rest
 }, ref) => {
+  const [shouldRender, setShouldRender] = useState(false);
   const [showPopover, setShowPopover] = useState(false);
   const elToBePositioned = useRef(null);
-  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({
+  const { top, left, right, bottom, calculatePosition } = usePosition({
     elementToBePositioned: elToBePositioned,
     relativeElement: anchorEl,
     offset,
@@ -33,10 +34,20 @@ const PopoverComponent = ({
     return Number(value);
   };
   useEffect(() => {
-    if (initialCalculationDone) {
-      setShowPopover(!!show);
+    if (show) {
+      setShouldRender(true);
+    } else {
+      setShowPopover(false);
     }
-  }, [show, initialCalculationDone]);
+  }, [show]);
+  useLayoutEffect(() => {
+    if (shouldRender && !showPopover && show) {
+      calculatePosition();
+      requestAnimationFrame(() => {
+        setShowPopover(true);
+      });
+    }
+  }, [shouldRender, showPopover, show, calculatePosition]);
   useEffect(() => {
     if (!showPopover) {
       return;
@@ -47,10 +58,22 @@ const PopoverComponent = ({
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition);
     };
-  }, [showPopover]);
+  }, [showPopover, calculatePosition]);
   useEffect(() => {
-    calculatePosition();
-  }, [showPopover, elToBePositioned, anchorEl]);
+    const element = elToBePositioned.current;
+    if (!element || showPopover) {
+      return;
+    }
+    const handleTransitionEnd = (event) => {
+      if (event.propertyName === "opacity") {
+        setShouldRender(false);
+      }
+    };
+    element.addEventListener("transitionend", handleTransitionEnd);
+    return () => {
+      element.removeEventListener("transitionend", handleTransitionEnd);
+    };
+  }, [showPopover]);
   useEffect(() => {
     const anchor = anchorEl == null ? void 0 : anchorEl.current;
     if (anchor) {
@@ -62,7 +85,7 @@ const PopoverComponent = ({
       }
     }
   }, [top, left, right, bottom]);
-  return /* @__PURE__ */ React.createElement("div", { ref, ...rest }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, ...rest }, shouldRender && /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: elToBePositioned,

package/dist/components/Popover/Popover.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Offset, Placement, PositionType, usePosition } from \"../../hooks/usePosition\";\nimport classes from \"./Popover.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  children?: ReactNode;\n  show?: boolean;\n  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  transformOrigin?: Placement;\n  onAnchorOutOfView?: () => void;\n}\n\nconst PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    children,\n    className,\n    show,\n    placement,\n    offset,\n    debounceAmount,\n    transformOrigin,\n    anchorEl,\n    onAnchorOutOfView,\n    ...rest\n  },\n  ref\n) => {\n  const [showPopover, setShowPopover] = useState(false);\n  const elToBePositioned = useRef<HTMLDivElement>(null);\n  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({\n    elementToBePositioned: elToBePositioned,\n    relativeElement: anchorEl,\n    offset: offset,\n    placement: placement,\n    transformOrigin: transformOrigin,\n    debounceAmount: debounceAmount ?? undefined\n  });\n\n  const normalizePosition = (value: PositionType) => {\n    if (value === \"initial\") {\n      return \"initial\";\n    }\n\n    if (isNaN(value)) {\n      return 0;\n    }\n\n    return Number(value);\n  };\n\n  useEffect(() => {\n    if (initialCalculationDone) {\n      setShowPopover(!!show);\n    }\n  }, [show, initialCalculationDone]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      return;\n    }\n\n    window.addEventListener(\"resize\", calculatePosition);\n    window.addEventListener(\"scroll\", calculatePosition);\n\n    return () => {\n      window.removeEventListener(\"resize\", calculatePosition);\n      window.removeEventListener(\"scroll\", calculatePosition);\n    };\n  }, [showPopover]);\n\n  useEffect(() => {\n    calculatePosition();\n  }, [showPopover, elToBePositioned, anchorEl]);\n\n  useEffect(() => {\n    const anchor = anchorEl?.current as HTMLElement;\n\n    if (anchor) {\n      const anchorTop = anchor.getBoundingClientRect().top;\n      const anchorBottom = anchor.getBoundingClientRect().bottom;\n\n      const isAnchorOffscreen =\n        showPopover &&\n        (Number(top) < 0 ||\n          Number(left) < 0 ||\n          Number(right) < 0 ||\n          Number(bottom) < 0 ||\n          anchorTop < 0 ||\n          anchorBottom > window.innerHeight);\n\n      if (isAnchorOffscreen) {\n        onAnchorOutOfView?.();\n      }\n    }\n  }, [top, left, right, bottom]);\n\n  return (\n    <div ref={ref} {...rest}>\n      <div\n        ref={elToBePositioned}\n        className={`${classes.popover} ${className ?? \"\"} ${showPopover ? classes.show : \"\"}`}\n        style={{\n          top: normalizePosition(top),\n          left: normalizePosition(left),\n          right: normalizePosition(right),\n          bottom: normalizePosition(bottom)\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport const Popover = React.forwardRef(PopoverComponent);\n"],"names":[],"mappings":";;;AAuCA,MAAM,mBAAoE,CACxE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,QACG;AACH,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAC9C,QAAA,mBAAmB,OAAuB,IAAI;AAC9C,QAAA,EAAE,KAAK,MAAM,OAAO,QAAQ,mBAAmB,2BAA2B,YAAY;AAAA,IAC1F,uBAAuB;AAAA,IACvB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,kBAAkB;AAAA,EAAA,CACnC;AAEK,QAAA,oBAAoB,CAAC,UAAwB;AACjD,QAAI,UAAU,WAAW;AAChB,aAAA;AAAA,IAAA;AAGL,QAAA,MAAM,KAAK,GAAG;AACT,aAAA;AAAA,IAAA;AAGT,WAAO,OAAO,KAAK;AAAA,EACrB;AAEA,YAAU,MAAM;AACd,QAAI,wBAAwB;AACX,qBAAA,CAAC,CAAC,IAAI;AAAA,IAAA;AAAA,EACvB,GACC,CAAC,MAAM,sBAAsB,CAAC;AAEjC,YAAU,MAAM;AACd,QAAI,CAAC,aAAa;AAChB;AAAA,IAAA;AAGK,WAAA,iBAAiB,UAAU,iBAAiB;AAC5C,WAAA,iBAAiB,UAAU,iBAAiB;AAEnD,WAAO,MAAM;AACJ,aAAA,oBAAoB,UAAU,iBAAiB;AAC/C,aAAA,oBAAoB,UAAU,iBAAiB;AAAA,IACxD;AAAA,EAAA,GACC,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACI,sBAAA;AAAA,EACjB,GAAA,CAAC,aAAa,kBAAkB,QAAQ,CAAC;AAE5C,YAAU,MAAM;AACd,UAAM,SAAS,qCAAU;AAEzB,QAAI,QAAQ;AACJ,YAAA,YAAY,OAAO,sBAAA,EAAwB;AAC3C,YAAA,eAAe,OAAO,sBAAA,EAAwB;AAE9C,YAAA,oBACJ,gBACC,OAAO,GAAG,IAAI,KACb,OAAO,IAAI,IAAI,KACf,OAAO,KAAK,IAAI,KAChB,OAAO,MAAM,IAAI,KACjB,YAAY,KACZ,eAAe,OAAO;AAE1B,UAAI,mBAAmB;AACD;AAAA,MAAA;AAAA,IACtB;AAAA,KAED,CAAC,KAAK,MAAM,OAAO,MAAM,CAAC;AAE7B,SACG,sBAAA,cAAA,OAAA,EAAI,KAAW,GAAG,KACjB,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,OAAO,IAAI,aAAa,EAAE,IAAI,cAAc,QAAQ,OAAO,EAAE;AAAA,MACnF,OAAO;AAAA,QACL,KAAK,kBAAkB,GAAG;AAAA,QAC1B,MAAM,kBAAkB,IAAI;AAAA,QAC5B,OAAO,kBAAkB,KAAK;AAAA,QAC9B,QAAQ,kBAAkB,MAAM;AAAA,MAAA;AAAA,IAClC;AAAA,IAEC;AAAA,EAAA,CAEL;AAEJ;AAEa,MAAA,UAAU,MAAM,WAAW,gBAAgB;"}
+{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Offset, Placement, PositionType, usePosition } from \"../../hooks/usePosition\";\nimport classes from \"./Popover.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  children?: ReactNode;\n  show?: boolean;\n  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  transformOrigin?: Placement;\n  onAnchorOutOfView?: () => void;\n}\n\nconst PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    children,\n    className,\n    show,\n    placement,\n    offset,\n    debounceAmount,\n    transformOrigin,\n    anchorEl,\n    onAnchorOutOfView,\n    ...rest\n  },\n  ref\n) => {\n  const [shouldRender, setShouldRender] = useState(false);\n  const [showPopover, setShowPopover] = useState(false);\n  const elToBePositioned = useRef<HTMLDivElement>(null);\n  const { top, left, right, bottom, calculatePosition } = usePosition({\n    elementToBePositioned: elToBePositioned,\n    relativeElement: anchorEl,\n    offset: offset,\n    placement: placement,\n    transformOrigin: transformOrigin,\n    debounceAmount: debounceAmount ?? undefined\n  });\n\n  const normalizePosition = (value: PositionType) => {\n    if (value === \"initial\") {\n      return \"initial\";\n    }\n\n    if (isNaN(value)) {\n      return 0;\n    }\n\n    return Number(value);\n  };\n\n  useEffect(() => {\n    if (show) {\n      setShouldRender(true);\n    } else {\n      setShowPopover(false);\n    }\n  }, [show]);\n\n  useLayoutEffect(() => {\n    if (shouldRender && !showPopover && show) {\n      calculatePosition();\n      requestAnimationFrame(() => {\n        setShowPopover(true);\n      });\n    }\n  }, [shouldRender, showPopover, show, calculatePosition]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      return;\n    }\n\n    window.addEventListener(\"resize\", calculatePosition);\n    window.addEventListener(\"scroll\", calculatePosition);\n\n    return () => {\n      window.removeEventListener(\"resize\", calculatePosition);\n      window.removeEventListener(\"scroll\", calculatePosition);\n    };\n  }, [showPopover, calculatePosition]);\n\n  useEffect(() => {\n    const element = elToBePositioned.current;\n\n    if (!element || showPopover) {\n      return;\n    }\n\n    const handleTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"opacity\") {\n        setShouldRender(false);\n      }\n    };\n\n    element.addEventListener(\"transitionend\", handleTransitionEnd);\n\n    return () => {\n      element.removeEventListener(\"transitionend\", handleTransitionEnd);\n    };\n  }, [showPopover]);\n\n  useEffect(() => {\n    const anchor = anchorEl?.current as HTMLElement;\n\n    if (anchor) {\n      const anchorTop = anchor.getBoundingClientRect().top;\n      const anchorBottom = anchor.getBoundingClientRect().bottom;\n\n      const isAnchorOffscreen =\n        showPopover &&\n        (Number(top) < 0 ||\n          Number(left) < 0 ||\n          Number(right) < 0 ||\n          Number(bottom) < 0 ||\n          anchorTop < 0 ||\n          anchorBottom > window.innerHeight);\n\n      if (isAnchorOffscreen) {\n        onAnchorOutOfView?.();\n      }\n    }\n  }, [top, left, right, bottom]);\n\n  return (\n    <div ref={ref} {...rest}>\n      {shouldRender && (\n        <div\n          ref={elToBePositioned}\n          className={`${classes.popover} ${className ?? \"\"} ${showPopover ? classes.show : \"\"}`}\n          style={{\n            top: normalizePosition(top),\n            left: normalizePosition(left),\n            right: normalizePosition(right),\n            bottom: normalizePosition(bottom)\n          }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const Popover = React.forwardRef(PopoverComponent);\n"],"names":[],"mappings":"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"}

package/dist/components/Popover/Popover.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.Popover_sr-only_EsL6T{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Popover_hidden_EsL6T{display:none}.Popover_slide-in_EsL6T{animation:Popover_slide-in_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.Popover_slide-in_EsL6T{animation-duration:.1ms}}.Popover_slide-out_EsL6T{animation:Popover_slide-out_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.Popover_slide-out_EsL6T{animation-duration:.1ms}}@keyframes Popover_slide-in_EsL6T{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Popover_slide-out_EsL6T{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Popover_popover_EsL6T{position:fixed;z-index:100;pointer-events:none;background-color:var(--light);border-radius:.125rem;box-shadow:0 4px 5px #01053233,0 3px 14px #0105321f,0 8px 10px #01053224;opacity:0;transform:scale(.5);transition-property:transform,opacity;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Popover_popover_EsL6T{transition-duration:.1ms}}.Popover_popover_EsL6T.Popover_show_EsL6T{transform:scale(1);pointer-events:auto;opacity:1}')),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="Popover_popover_EsL6T",e="Popover_show_EsL6T",s={popover:o,show:e};exports.default=s,exports.popover=o,exports.show=e;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.Popover_sr-only_HO9cY{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Popover_hidden_HO9cY{display:none}.Popover_slide-in_HO9cY{animation:Popover_slide-in_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.Popover_slide-in_HO9cY{animation-duration:.1ms}}.Popover_slide-out_HO9cY{animation:Popover_slide-out_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.Popover_slide-out_HO9cY{animation-duration:.1ms}}@keyframes Popover_slide-in_HO9cY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Popover_slide-out_HO9cY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Popover_popover_HO9cY{position:fixed;z-index:100;pointer-events:none;background-color:var(--light);border-radius:.125rem;box-shadow:0 4px 5px #01053233,0 3px 14px #0105321f,0 8px 10px #01053224;opacity:0;transform:scale(.5);transition-property:transform,opacity;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Popover_popover_HO9cY{transition-duration:.1ms}}.Popover_popover_HO9cY.Popover_show_HO9cY{transform:scale(1);pointer-events:auto;opacity:1}')),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="Popover_popover_HO9cY",e="Popover_show_HO9cY",p={popover:o,show:e};exports.default=p,exports.popover=o,exports.show=e;
 //# sourceMappingURL=Popover.module.scss.cjs.js.map

package/dist/components/Popover/Popover.module.scss.es.js

@@ -1,6 +1,6 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.Popover_sr-only_EsL6T{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Popover_hidden_EsL6T{display:none}.Popover_slide-in_EsL6T{animation:Popover_slide-in_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.Popover_slide-in_EsL6T{animation-duration:.1ms}}.Popover_slide-out_EsL6T{animation:Popover_slide-out_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.Popover_slide-out_EsL6T{animation-duration:.1ms}}@keyframes Popover_slide-in_EsL6T{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Popover_slide-out_EsL6T{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Popover_popover_EsL6T{position:fixed;z-index:100;pointer-events:none;background-color:var(--light);border-radius:.125rem;box-shadow:0 4px 5px #01053233,0 3px 14px #0105321f,0 8px 10px #01053224;opacity:0;transform:scale(.5);transition-property:transform,opacity;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Popover_popover_EsL6T{transition-duration:.1ms}}.Popover_popover_EsL6T.Popover_show_EsL6T{transform:scale(1);pointer-events:auto;opacity:1}')),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}();
-const popover = "Popover_popover_EsL6T";
-const show = "Popover_show_EsL6T";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.Popover_sr-only_HO9cY{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Popover_hidden_HO9cY{display:none}.Popover_slide-in_HO9cY{animation:Popover_slide-in_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.Popover_slide-in_HO9cY{animation-duration:.1ms}}.Popover_slide-out_HO9cY{animation:Popover_slide-out_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.Popover_slide-out_HO9cY{animation-duration:.1ms}}@keyframes Popover_slide-in_HO9cY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Popover_slide-out_HO9cY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Popover_popover_HO9cY{position:fixed;z-index:100;pointer-events:none;background-color:var(--light);border-radius:.125rem;box-shadow:0 4px 5px #01053233,0 3px 14px #0105321f,0 8px 10px #01053224;opacity:0;transform:scale(.5);transition-property:transform,opacity;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Popover_popover_HO9cY{transition-duration:.1ms}}.Popover_popover_HO9cY.Popover_show_HO9cY{transform:scale(1);pointer-events:auto;opacity:1}')),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}();
+const popover = "Popover_popover_HO9cY";
+const show = "Popover_show_HO9cY";
 const classes = {
   popover,
   show