@koine/react 2.0.0-beta.132 → 2.0.0-beta.134

package/calendar/utils.cjs.js

@@ -10,24 +10,7 @@ var startOfWeek = require('date-fns/startOfWeek');
 var subMonths = require('date-fns/subMonths');
 var subWeeks = require('date-fns/subWeeks');
 
-let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek.startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth.endOfMonth(e):"week"===t&&(r=endOfWeek.endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths.subMonths(e,1):subWeeks.subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths.addMonths(e,1):addWeeks.addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval.isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d=e=>{let t=[];for(let r in e)t.push(e[r]);return(// sort events first multi, then all day then by start then by created date
-t.sort((e,t)=>{let r=Number(t.multi)-Number(e.multi),a=Number(t.allDay)-Number(e.allDay),n=e.start.getTime()-t.start.getTime(),s=e.created.getTime()-t.created.getTime();return r||a||n||s}),t)};let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d(t),l=new Date,m=getEventTimestamp(l),p={},f=[];for(let t=0;t<n.length;t++){let i={props:{key:`week.${t}`},days:[]},d=n[t],u=d.getDate(),g=getEventTimestamp(new Date(d)),h=getEventTimestamp(addDays.addDays(new Date(d),6));for(let e=0;e<7;e++){let t=new Date(new Date(d).setDate(u+e)),n=getEventTimestamp(t),f={$isToday:m===n,$isOutOfRange:"month"===r&&t.getMonth()!==a},v={props:{key:`day.${n}`,...f},timestamp:n+"",label:t.getDate()+"",events:[]};// check that we have events in this day
-if(s?.[n]){let t=Object.keys(s[n]).map(()=>0);for(let r=0;r<o.length;r++){let a;let s=o[r],m=1,i=0;if(s.daysMap[n]){// if we already have the information on when the event has been
-// vertically positioned use that index
-if(// only for multi days events:
-s.multi&&(// filter out the days outside of the current week view to avoid
-// making a multi-days event chip wider than the week row or shorter
-// than it should be (when event spans across weeks)
-m=s.days.filter(e=>e>=g&&e<=h).length,// flag the first day of multi-days events, consider that an event
-// might start in a day earlier (hence outside) of the current
-// week/month view, so we always check for Mondays (dayNumber === 0)
-(0===s.days.indexOf(n)||0===e)&&(a=!0)),p[s.uid])i=p[s.uid];else // now look for a free slot and use its index as `top`
-for(let e=0;e<t.length;e++)if(1!==t[e]){i=e;break}// now mark the slot as busy
-t[i]=1,// store the slot vertical position consistently for multi-days events
-a&&(p[s.uid]=i),// push the event, they will be sorted later
-v.events.push({key:`event.${n}-${i}`,...f,...s,isPast:l>s.end,firstOfMulti:a,top:i,width:m});}}// fill the empty slots with events' placeholders
-for(let e=0;e<t.length;e++)1!==t[e]&&v.events.push({key:`event.${n}-${e}}`,placeholder:!0,top:e});// sort events and events placeholders by top position
-v.events.sort((e,t)=>e.top-t.top);}i.days.push(v);}f.push(i);}return f};
+let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek.startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth.endOfMonth(e):"week"===t&&(r=endOfWeek.endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths.subMonths(e,1):subWeeks.subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths.addMonths(e,1):addWeeks.addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval.isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d=e=>{let t=[];for(let r in e)t.push(e[r]);return t.sort((e,t)=>{let r=Number(t.multi)-Number(e.multi),a=Number(t.allDay)-Number(e.allDay),n=e.start.getTime()-t.start.getTime(),s=e.created.getTime()-t.created.getTime();return r||a||n||s}),t};let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d(t),l=new Date,m=getEventTimestamp(l),p={},f=[];for(let t=0;t<n.length;t++){let i={props:{key:`week.${t}`},days:[]},d=n[t],u=d.getDate(),g=getEventTimestamp(new Date(d)),h=getEventTimestamp(addDays.addDays(new Date(d),6));for(let e=0;e<7;e++){let t=new Date(new Date(d).setDate(u+e)),n=getEventTimestamp(t),f={$isToday:m===n,$isOutOfRange:"month"===r&&t.getMonth()!==a},v={props:{key:`day.${n}`,...f},timestamp:n+"",label:t.getDate()+"",events:[]};if(s?.[n]){let t=Object.keys(s[n]).map(()=>0);for(let r=0;r<o.length;r++){let a;let s=o[r],m=1,i=0;if(s.daysMap[n]){if(s.multi&&(m=s.days.filter(e=>e>=g&&e<=h).length,(0===s.days.indexOf(n)||0===e)&&(a=!0)),p[s.uid])i=p[s.uid];else for(let e=0;e<t.length;e++)if(1!==t[e]){i=e;break}t[i]=1,a&&(p[s.uid]=i),v.events.push({key:`event.${n}-${i}`,...f,...s,isPast:l>s.end,firstOfMulti:a,top:i,width:m});}}for(let e=0;e<t.length;e++)1!==t[e]&&v.events.push({key:`event.${n}-${e}}`,placeholder:!0,top:e});v.events.sort((e,t)=>e.top-t.top);}i.days.push(v);}f.push(i);}return f};
 
 exports.addCalendarEvents = addCalendarEvents;
 exports.getDisplayTime = getDisplayTime;

package/calendar/utils.esm.js

@@ -8,23 +8,6 @@ import { startOfWeek } from 'date-fns/startOfWeek';
 import { subMonths } from 'date-fns/subMonths';
 import { subWeeks } from 'date-fns/subWeeks';
 
-let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth(e):"week"===t&&(r=endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths(e,1):subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths(e,1):addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d=e=>{let t=[];for(let r in e)t.push(e[r]);return(// sort events first multi, then all day then by start then by created date
-t.sort((e,t)=>{let r=Number(t.multi)-Number(e.multi),a=Number(t.allDay)-Number(e.allDay),n=e.start.getTime()-t.start.getTime(),s=e.created.getTime()-t.created.getTime();return r||a||n||s}),t)};let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d(t),l=new Date,m=getEventTimestamp(l),p={},f=[];for(let t=0;t<n.length;t++){let i={props:{key:`week.${t}`},days:[]},d=n[t],u=d.getDate(),g=getEventTimestamp(new Date(d)),h=getEventTimestamp(addDays(new Date(d),6));for(let e=0;e<7;e++){let t=new Date(new Date(d).setDate(u+e)),n=getEventTimestamp(t),f={$isToday:m===n,$isOutOfRange:"month"===r&&t.getMonth()!==a},v={props:{key:`day.${n}`,...f},timestamp:n+"",label:t.getDate()+"",events:[]};// check that we have events in this day
-if(s?.[n]){let t=Object.keys(s[n]).map(()=>0);for(let r=0;r<o.length;r++){let a;let s=o[r],m=1,i=0;if(s.daysMap[n]){// if we already have the information on when the event has been
-// vertically positioned use that index
-if(// only for multi days events:
-s.multi&&(// filter out the days outside of the current week view to avoid
-// making a multi-days event chip wider than the week row or shorter
-// than it should be (when event spans across weeks)
-m=s.days.filter(e=>e>=g&&e<=h).length,// flag the first day of multi-days events, consider that an event
-// might start in a day earlier (hence outside) of the current
-// week/month view, so we always check for Mondays (dayNumber === 0)
-(0===s.days.indexOf(n)||0===e)&&(a=!0)),p[s.uid])i=p[s.uid];else // now look for a free slot and use its index as `top`
-for(let e=0;e<t.length;e++)if(1!==t[e]){i=e;break}// now mark the slot as busy
-t[i]=1,// store the slot vertical position consistently for multi-days events
-a&&(p[s.uid]=i),// push the event, they will be sorted later
-v.events.push({key:`event.${n}-${i}`,...f,...s,isPast:l>s.end,firstOfMulti:a,top:i,width:m});}}// fill the empty slots with events' placeholders
-for(let e=0;e<t.length;e++)1!==t[e]&&v.events.push({key:`event.${n}-${e}}`,placeholder:!0,top:e});// sort events and events placeholders by top position
-v.events.sort((e,t)=>e.top-t.top);}i.days.push(v);}f.push(i);}return f};
+let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth(e):"week"===t&&(r=endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths(e,1):subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths(e,1):addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d=e=>{let t=[];for(let r in e)t.push(e[r]);return t.sort((e,t)=>{let r=Number(t.multi)-Number(e.multi),a=Number(t.allDay)-Number(e.allDay),n=e.start.getTime()-t.start.getTime(),s=e.created.getTime()-t.created.getTime();return r||a||n||s}),t};let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d(t),l=new Date,m=getEventTimestamp(l),p={},f=[];for(let t=0;t<n.length;t++){let i={props:{key:`week.${t}`},days:[]},d=n[t],u=d.getDate(),g=getEventTimestamp(new Date(d)),h=getEventTimestamp(addDays(new Date(d),6));for(let e=0;e<7;e++){let t=new Date(new Date(d).setDate(u+e)),n=getEventTimestamp(t),f={$isToday:m===n,$isOutOfRange:"month"===r&&t.getMonth()!==a},v={props:{key:`day.${n}`,...f},timestamp:n+"",label:t.getDate()+"",events:[]};if(s?.[n]){let t=Object.keys(s[n]).map(()=>0);for(let r=0;r<o.length;r++){let a;let s=o[r],m=1,i=0;if(s.daysMap[n]){if(s.multi&&(m=s.days.filter(e=>e>=g&&e<=h).length,(0===s.days.indexOf(n)||0===e)&&(a=!0)),p[s.uid])i=p[s.uid];else for(let e=0;e<t.length;e++)if(1!==t[e]){i=e;break}t[i]=1,a&&(p[s.uid]=i),v.events.push({key:`event.${n}-${i}`,...f,...s,isPast:l>s.end,firstOfMulti:a,top:i,width:m});}}for(let e=0;e<t.length;e++)1!==t[e]&&v.events.push({key:`event.${n}-${e}}`,placeholder:!0,top:e});v.events.sort((e,t)=>e.top-t.top);}i.days.push(v);}f.push(i);}return f};
 
 export { addCalendarEvents, getDisplayTime, getEndDate, getEventTimestamp, getNextDate, getPrevDate, getStartDate, isTodayInView, processEventsInView };

package/classed.cjs.js

@@ -4,48 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-// React.ComponentProps<typeof Component>
-// ? @see https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component
-// type ClassedComponent<Props = {}> =
-//   | React.ElementType<Props>
-//   | OverridableComponent<any>
-//   | React.Component<Props>
-//   | React.FunctionComponent<Props>
-//   | React.ReactElement<Props>
-//   | React.ReactHTMLElement<any>
-//   | string // | JSX.IntrinsicElements
-//   | ((props: Props) => JSX.Element);
-/**
- * This utility allows to extend a component a là `styled-components` but for
- * a className based styling solution like Tailwind,
- *
- * It also plays nicely with tailwind intellisense:
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
- *
- * For references about tagged functions:
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
- * - https://makersden.io/blog/reverse-engineering-styled-components
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
- *
- * Similar projects:
- * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
- *
- * Discussions and Q/A:
- * - https://stackoverflow.com/q/73055695/1938970
- */let classed=r=>{// @ts-expect-error nevermind for now...
-let s=r.type||r;return function(r,...a){// FIXME: not sure if this is needed
-// WrappedComponent.displayName = type.toString();
-return /*#__PURE__*/react.forwardRef(// Props
-function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)// like styled-components `transient` props
-t.startsWith("$")||// FIXME: for react 18 we need: @ts-expect-error
-(i[t]=e[t]);// get the tagged function string outcome
-let c=o||r[0];return(// add the custom classes from props
-c=// check if we need to clean it or not from the optional structure `< class="..."`
-(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),/*#__PURE__*/react.createElement(s,{// ...props,
-...i,// only add ot props if it is not an empty string
-className:c||void 0,// add ref to props
-ref:n}))})}};// as unknown as React.ReactElement<typeof props>;
+let classed=r=>{let s=r.type||r;return function(r,...a){return react.forwardRef(function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)t.startsWith("$")||(i[t]=e[t]);let c=o||r[0];return c=(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),react.createElement(s,{...i,className:c||void 0,ref:n})})}};
 
 exports.classed = classed;
 exports.default = classed;

package/classed.d.ts

@@ -4,5 +4,24 @@ type ClassedAugmentedProps<Props> = Props & {
     ref?: React.Ref<any>;
 };
 type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
+/**
+ * This utility allows to extend a component a là `styled-components` but for
+ * a className based styling solution like Tailwind,
+ *
+ * It also plays nicely with tailwind intellisense:
+ * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ *
+ * For references about tagged functions:
+ * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
+ * - https://makersden.io/blog/reverse-engineering-styled-components
+ * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
+ * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
+ *
+ * Similar projects:
+ * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
+ *
+ * Discussions and Q/A:
+ * - https://stackoverflow.com/q/73055695/1938970
+ */
 export declare let classed: <Props, Component extends React.ElementType = any>(component: Component) => (strings: TemplateStringsArray, ...args: ((props: Props) => string)[] | string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
 export default classed;

package/classed.esm.js

@@ -1,46 +1,5 @@
 import { forwardRef, createElement } from 'react';
 
-// React.ComponentProps<typeof Component>
-// ? @see https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component
-// type ClassedComponent<Props = {}> =
-//   | React.ElementType<Props>
-//   | OverridableComponent<any>
-//   | React.Component<Props>
-//   | React.FunctionComponent<Props>
-//   | React.ReactElement<Props>
-//   | React.ReactHTMLElement<any>
-//   | string // | JSX.IntrinsicElements
-//   | ((props: Props) => JSX.Element);
-/**
- * This utility allows to extend a component a là `styled-components` but for
- * a className based styling solution like Tailwind,
- *
- * It also plays nicely with tailwind intellisense:
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
- *
- * For references about tagged functions:
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
- * - https://makersden.io/blog/reverse-engineering-styled-components
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
- *
- * Similar projects:
- * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
- *
- * Discussions and Q/A:
- * - https://stackoverflow.com/q/73055695/1938970
- */let classed=r=>{// @ts-expect-error nevermind for now...
-let s=r.type||r;return function(r,...a){// FIXME: not sure if this is needed
-// WrappedComponent.displayName = type.toString();
-return /*#__PURE__*/forwardRef(// Props
-function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)// like styled-components `transient` props
-t.startsWith("$")||// FIXME: for react 18 we need: @ts-expect-error
-(i[t]=e[t]);// get the tagged function string outcome
-let c=o||r[0];return(// add the custom classes from props
-c=// check if we need to clean it or not from the optional structure `< class="..."`
-(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),/*#__PURE__*/createElement(s,{// ...props,
-...i,// only add ot props if it is not an empty string
-className:c||void 0,// add ref to props
-ref:n}))})}};// as unknown as React.ReactElement<typeof props>;
+let classed=r=>{let s=r.type||r;return function(r,...a){return forwardRef(function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)t.startsWith("$")||(i[t]=e[t]);let c=o||r[0];return c=(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),createElement(s,{...i,className:c||void 0,ref:n})})}};
 
 export { classed, classed as default };

package/createUseMediaQueryWidth.cjs.js

@@ -6,21 +6,7 @@ var react = require('react');
 var utils = require('@koine/utils');
 var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
 
-/**
- * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
- *
- * @param customBreakpoints
- * @returns
- */let createUseMediaQueryWidth=n=>{let a=utils.getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");utils.isUndefined(s)&&(s=o),utils.isUndefined(o)&&(o="min");// with the hook creator approach these breakpoint types cannot be deduced
-// const [br1, br2] = ruleBreakpoint.split("-") as Split<
-//   typeof ruleBreakpoint,
-//   "-"
-// >;
-let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=react.useState(utils.isUndefined(n)?null:n);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return(// Safari < 14 can't use addEventListener on a MediaQueryList
-// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-(l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(// Update the state whenever the media query match state changes
-e.addListener(t),// Clean up on unmount and if the query changes
-()=>{e.removeListener(t);}))},[u]),c}};//// without creator it would be:
+let createUseMediaQueryWidth=n=>{let a=utils.getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");utils.isUndefined(s)&&(s=o),utils.isUndefined(o)&&(o="min");let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=react.useState(utils.isUndefined(n)?null:n);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return (l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[u]),c}};
 
 exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
 exports.default = createUseMediaQueryWidth;

package/createUseMediaQueryWidth.d.ts

@@ -2,5 +2,11 @@ import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
 type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
 export type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
 export type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
+/**
+ * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
+ *
+ * @param customBreakpoints
+ * @returns
+ */
 export declare let createUseMediaQueryWidth: <TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig) => <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: MediaQueryWidth<TBreakpoints>, serverValue?: null | boolean) => boolean | null;
 export default createUseMediaQueryWidth;

package/createUseMediaQueryWidth.esm.js

@@ -2,20 +2,6 @@ import { useState } from 'react';
 import { getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
 
-/**
- * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
- *
- * @param customBreakpoints
- * @returns
- */let createUseMediaQueryWidth=n=>{let a=getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");isUndefined(s)&&(s=o),isUndefined(o)&&(o="min");// with the hook creator approach these breakpoint types cannot be deduced
-// const [br1, br2] = ruleBreakpoint.split("-") as Split<
-//   typeof ruleBreakpoint,
-//   "-"
-// >;
-let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=useState(isUndefined(n)?null:n);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return(// Safari < 14 can't use addEventListener on a MediaQueryList
-// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-(l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(// Update the state whenever the media query match state changes
-e.addListener(t),// Clean up on unmount and if the query changes
-()=>{e.removeListener(t);}))},[u]),c}};//// without creator it would be:
+let createUseMediaQueryWidth=n=>{let a=getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");isUndefined(s)&&(s=o),isUndefined(o)&&(o="min");let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=useState(isUndefined(n)?null:n);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return (l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[u]),c}};
 
 export { createUseMediaQueryWidth, createUseMediaQueryWidth as default };

package/extendComponent.cjs.js

@@ -4,11 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let extendComponent=(t,o)=>// const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
-    //   (props, ref) => createElement(component, { ...props, ref })
-    // );
-    Object.assign(// FIXME: check if we need to forwardRef or not
-    o=>react.createElement(t,o),{...o,defaultProps:o});
+let extendComponent=(t,o)=>Object.assign(o=>react.createElement(t,o),{...o,defaultProps:o});
 
 exports.default = extendComponent;
 exports.extendComponent = extendComponent;

package/extendComponent.d.ts

@@ -9,6 +9,17 @@ export interface OverridableComponents {
         motionable?: boolean;
     };
 }
+/**
+ * Type to define a component that has overridable components.
+ *
+ * Each of them can define its:
+ * - `type`: either as a native HTMLElement (the props for that element will be
+ * automatically inferred) or as a custom React component
+ * - `props`: any additional custom props
+ * - `motionable`: if that component has a possible implementation with `framer-motion`,
+ * in that case we remove some HTMLAttributes props which collides with
+ * `MotionProps` from framer.
+ */
 export type WithComponents<Props, Components extends OverridableComponents> = Props & {
     [Name in keyof Components]: NonNullable<Components[Name]["type"] extends keyof JSX.IntrinsicElements ? React.ElementType<Components[Name]["motionable"] extends true ? Omit<React.ComponentPropsWithoutRef<Components[Name]["type"]>, HtmlAttributesCollidingWithMotionProps> & Components[Name]["props"] : React.ComponentPropsWithoutRef<Components[Name]["type"]> & Components[Name]["props"]> : Components[Name]["type"]>;
 };

package/extendComponent.esm.js

@@ -1,9 +1,5 @@
 import { createElement } from 'react';
 
-let extendComponent=(t,o)=>// const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
-    //   (props, ref) => createElement(component, { ...props, ref })
-    // );
-    Object.assign(// FIXME: check if we need to forwardRef or not
-    o=>createElement(t,o),{...o,defaultProps:o});
+let extendComponent=(t,o)=>Object.assign(o=>createElement(t,o),{...o,defaultProps:o});
 
 export { extendComponent as default, extendComponent };

package/forms/antispam.cjs.js

@@ -3,33 +3,7 @@
 var yup = require('@kuus/yup');
 var utils = require('@koine/utils');
 
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=utils.encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:// we need `.required()` to correctly infer the type @see
-// https://github.com/jquense/yup/issues/946
-yup.object(o).required(),encodedNames:i}};/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */let decodeForm=e=>{let r={};for(let i in e){let l=utils.decode(i);// always add underscore prefixed names as they are treated as internal
-// private inputs outside of the honeypot system, normalise them here removing
-// the underscore prefix
-i.startsWith("_")?// @ts-expect-error nevermind
-r[i.substring(1)]=e[i]:utils.isUndefined(e[i])||""!==e[l]||// @ts-expect-error nevermind
-(r[l]=e[i]);}// console.log(formData, decoded, json);
-return r};
+let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=utils.encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:yup.object(o).required(),encodedNames:i}};let decodeForm=e=>{let r={};for(let i in e){let l=utils.decode(i);i.startsWith("_")?r[i.substring(1)]=e[i]:utils.isUndefined(e[i])||""!==e[l]||(r[l]=e[i]);}return r};
 
 exports.decodeForm = decodeForm;
 exports.encodeForm = encodeForm;

package/forms/antispam.d.ts

@@ -1,5 +1,16 @@
 import { type ObjectShape } from "@kuus/yup";
-export declare let encodeForm: <T extends ObjectShape = {}>(validationRules: T) => {
+/**
+ * Encode form
+ *
+ * Takes a record of yup validations and outputs a `yup` schema with encoded
+ * names (antispam technique) and a record of the encoded/decoded input `name`s.
+ *
+ * We skip the names prefixed wth an underscore which are considered programmatic
+ * form data not created by user input.
+ *
+ * FIXME: types https://github.com/jquense/yup/issues/1700
+ */
+export declare let encodeForm: <T extends ObjectShape = ObjectShape>(validationRules: T) => {
     encodedSchema: import("@kuus/yup").ObjectSchema<{
         [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, any, any, any> ? T[keyof T]["__outputType"] : T[keyof T] extends {
             readonly key: string;
@@ -24,4 +35,13 @@ export declare let encodeForm: <T extends ObjectShape = {}>(validationRules: T)
     }, "">;
     encodedNames: Record<keyof T, string>;
 };
-export declare let decodeForm: <ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData) => ReturnAs;
+/**
+ * Decode form data
+ *
+ * This function is meant to be used inside an api endpoint to gather an encoded
+ * form submit data and transform it to the decoded desired json data.
+ *
+ * Here too we skip encoding/decoding process for names prefixed wth an underscore
+ * which are considered programmatic form data not created by user input.
+ */
+export declare let decodeForm: <ReturnAs extends Record<string, unknown> = Record<string, unknown>, FormData extends Record<string, unknown> = Record<string, unknown>>(formData: FormData) => ReturnAs;

package/forms/antispam.esm.js

@@ -1,32 +1,6 @@
 import { object } from '@kuus/yup';
 import { encode, decode, isUndefined } from '@koine/utils';
 
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:// we need `.required()` to correctly infer the type @see
-// https://github.com/jquense/yup/issues/946
-object(o).required(),encodedNames:i}};/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */let decodeForm=e=>{let r={};for(let i in e){let l=decode(i);// always add underscore prefixed names as they are treated as internal
-// private inputs outside of the honeypot system, normalise them here removing
-// the underscore prefix
-i.startsWith("_")?// @ts-expect-error nevermind
-r[i.substring(1)]=e[i]:isUndefined(e[i])||""!==e[l]||// @ts-expect-error nevermind
-(r[l]=e[i]);}// console.log(formData, decoded, json);
-return r};
+let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:object(o).required(),encodedNames:i}};let decodeForm=e=>{let r={};for(let i in e){let l=decode(i);i.startsWith("_")?r[i.substring(1)]=e[i]:isUndefined(e[i])||""!==e[l]||(r[l]=e[i]);}return r};
 
 export { decodeForm, encodeForm };

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.132",
-    "@koine/utils": "2.0.0-beta.132"
+    "@koine/dom": "2.0.0-beta.134",
+    "@koine/utils": "2.0.0-beta.134"
   },
   "peerDependencies": {
     "@kuus/yup": "1.0.0-beta.7",
@@ -223,5 +223,5 @@
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
   "types": "./index.esm.d.ts",
-  "version": "2.0.0-beta.132"
+  "version": "2.0.0-beta.134"
 }

package/useAsyncFn.cjs.js

@@ -5,10 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var useMountedState = require('./useMountedState.cjs.js');
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
- */let useAsyncFn=(o,u=[],l={loading:!1})=>{let a=react.useRef(0),d=useMountedState.useMountedState(),[i,c]=react.useState(l),g=react.useCallback((...e)=>{let t=++a.current;return i.loading||c(e=>({...e,loading:!0})),o(...e).then(e=>(d()&&t===a.current&&c({value:e,loading:!1}),e),e=>(d()&&t===a.current&&c({error:e,loading:!1}),e))},// eslint-disable-next-line react-hooks/exhaustive-deps
-u);return [i,g]};
+let useAsyncFn=(o,u=[],l={loading:!1})=>{let a=react.useRef(0),d=useMountedState.useMountedState(),[i,c]=react.useState(l),g=react.useCallback((...e)=>{let t=++a.current;return i.loading||c(e=>({...e,loading:!0})),o(...e).then(e=>(d()&&t===a.current&&c({value:e,loading:!1}),e),e=>(d()&&t===a.current&&c({error:e,loading:!1}),e))},u);return [i,g]};
 
 exports.default = useAsyncFn;
 exports.useAsyncFn = useAsyncFn;

package/useAsyncFn.d.ts

@@ -20,5 +20,8 @@ export type UseAsyncState<T> = {
 };
 type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = UseAsyncState<PromiseType<ReturnType<T>>>;
 export type UseAsyncFnReturn<T extends FunctionReturningPromise = FunctionReturningPromise> = [StateFromFunctionReturningPromise<T>, T];
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
+ */
 export declare let useAsyncFn: <T extends FunctionReturningPromise>(fn: T, deps?: React.DependencyList, initialState?: StateFromFunctionReturningPromise<T>) => UseAsyncFnReturn<T>;
 export default useAsyncFn;

package/useAsyncFn.esm.js

@@ -1,9 +1,6 @@
 import { useRef, useState, useCallback } from 'react';
 import { useMountedState } from './useMountedState.esm.js';
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
- */let useAsyncFn=(o,u=[],l={loading:!1})=>{let a=useRef(0),d=useMountedState(),[i,c]=useState(l),g=useCallback((...e)=>{let t=++a.current;return i.loading||c(e=>({...e,loading:!0})),o(...e).then(e=>(d()&&t===a.current&&c({value:e,loading:!1}),e),e=>(d()&&t===a.current&&c({error:e,loading:!1}),e))},// eslint-disable-next-line react-hooks/exhaustive-deps
-u);return [i,g]};
+let useAsyncFn=(o,u=[],l={loading:!1})=>{let a=useRef(0),d=useMountedState(),[i,c]=useState(l),g=useCallback((...e)=>{let t=++a.current;return i.loading||c(e=>({...e,loading:!0})),o(...e).then(e=>(d()&&t===a.current&&c({value:e,loading:!1}),e),e=>(d()&&t===a.current&&c({error:e,loading:!1}),e))},u);return [i,g]};
 
 export { useAsyncFn as default, useAsyncFn };

package/useFirstMountState.cjs.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */let useFirstMountState=()=>{let r=react.useRef(!0);return r.current?(r.current=!1,!0):r.current};
+let useFirstMountState=()=>{let r=react.useRef(!0);return r.current?(r.current=!1,!0):r.current};
 
 exports.default = useFirstMountState;
 exports.useFirstMountState = useFirstMountState;

package/useFirstMountState.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
 export declare let useFirstMountState: () => boolean;
 export default useFirstMountState;

package/useFirstMountState.esm.js

@@ -1,7 +1,5 @@
 import { useRef } from 'react';
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */let useFirstMountState=()=>{let r=useRef(!0);return r.current?(r.current=!1,!0):r.current};
+let useFirstMountState=()=>{let r=useRef(!0);return r.current?(r.current=!1,!0):r.current};
 
 export { useFirstMountState as default, useFirstMountState };

package/useFixedOffset.cjs.js

@@ -7,18 +7,7 @@ var utils = require('@koine/utils');
 var dom = require('@koine/dom');
 var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
 
-let n=e=>{dom.injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */let useFixedOffset=i=>{let l=react.useRef(0);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=()=>{let e=dom.calculateFixedOffset();l.current=e,// inject this CSS make the hashed deeplinks position the scroll at the
-// right offset
-n(e);};if(e(),!ResizeObserver)return dom.listenResizeDebounced(0,e);{// const elements = domAll("[data-fixed]");
-let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,utils.debounce(()=>n(r),400,!0)();});return dom.domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
+let n=e=>{dom.injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let l=react.useRef(0);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=()=>{let e=dom.calculateFixedOffset();l.current=e,n(e);};if(e(),!ResizeObserver)return dom.listenResizeDebounced(0,e);{let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,utils.debounce(()=>n(r),400,!0)();});return dom.domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
 
 exports.default = useFixedOffset;
 exports.useFixedOffset = useFixedOffset;

package/useFixedOffset.d.ts

@@ -1,2 +1,11 @@
+/**
+ * # Use fixed offset
+ *
+ * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
+ *
+ * @see https://web.dev/resize-observer/
+ *
+ * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
+ */
 export declare let useFixedOffset: (selector?: string) => import("react").MutableRefObject<number>;
 export default useFixedOffset;

package/useFixedOffset.esm.js

@@ -3,17 +3,6 @@ import { debounce } from '@koine/utils';
 import { listenResizeDebounced, domEach, calculateFixedOffset, injectCss } from '@koine/dom';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
 
-let n=e=>{injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */let useFixedOffset=i=>{let l=useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=calculateFixedOffset();l.current=e,// inject this CSS make the hashed deeplinks position the scroll at the
-// right offset
-n(e);};if(e(),!ResizeObserver)return listenResizeDebounced(0,e);{// const elements = domAll("[data-fixed]");
-let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,debounce(()=>n(r),400,!0)();});return domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
+let n=e=>{injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let l=useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=calculateFixedOffset();l.current=e,n(e);};if(e(),!ResizeObserver)return listenResizeDebounced(0,e);{let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,debounce(()=>n(r),400,!0)();});return domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
 
 export { useFixedOffset as default, useFixedOffset };

package/useFocus.cjs.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */let useFocus=()=>{let r=react.useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
+let useFocus=()=>{let r=react.useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
 
 exports.default = useFocus;
 exports.useFocus = useFocus;

package/useFocus.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @see https://stackoverflow.com/a/54159564/1938970
+ */
 export declare let useFocus: () => (import("react").RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | (() => void))[];
 export default useFocus;

package/useFocus.esm.js

@@ -1,7 +1,5 @@
 import { useRef } from 'react';
 
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */let useFocus=()=>{let r=useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
+let useFocus=()=>{let r=useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
 
 export { useFocus as default, useFocus };

package/useInterval.cjs.js

@@ -5,12 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var utils = require('@koine/utils');
 
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */let useInterval=(n,l,u=[])=>{let o=react.useRef();react.useEffect(()=>{o.current=n;},// eslint-disable-next-line react-hooks/exhaustive-deps
-[n,...u]),react.useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return utils.noop},[l]);};
+let useInterval=(n,l,u=[])=>{let o=react.useRef();react.useEffect(()=>{o.current=n;},[n,...u]),react.useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return utils.noop},[l]);};
 
 exports.default = useInterval;
 exports.useInterval = useInterval;

package/useInterval.d.ts

@@ -1,2 +1,7 @@
+/**
+ * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
+ *
+ * We just add `deps` array argument and typescript support
+ */
 export declare let useInterval: <T extends () => unknown>(callback: T, delay: number, deps?: unknown[]) => void;
 export default useInterval;

package/useInterval.esm.js

@@ -1,11 +1,6 @@
 import { useRef, useEffect } from 'react';
 import { noop } from '@koine/utils';
 
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */let useInterval=(n,l,u=[])=>{let o=useRef();useEffect(()=>{o.current=n;},// eslint-disable-next-line react-hooks/exhaustive-deps
-[n,...u]),useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return noop},[l]);};
+let useInterval=(n,l,u=[])=>{let o=useRef();useEffect(()=>{o.current=n;},[n,...u]),useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return noop},[l]);};
 
 export { useInterval as default, useInterval };