@koine/react 1.0.9 → 1.0.12

package/Calendar/utils.js

@@ -1,3 +1,4 @@
+import { __assign } from "tslib";
 import isWithinInterval from "date-fns/isWithinInterval";
 import endOfMonth from "date-fns/endOfMonth";
 import startOfWeek from "date-fns/startOfWeek";
@@ -8,7 +9,7 @@ import subWeeks from "date-fns/subWeeks";
 import addWeeks from "date-fns/addWeeks";
 import addDays from "date-fns/addDays";
 export function getEventTimestamp(dateLike) {
-    const date = new Date(dateLike);
+    var date = new Date(dateLike);
     date.setHours(0, 0, 0, 0);
     return date.valueOf() / 1000;
 }
@@ -29,7 +30,7 @@ export function getStartDate(date, view) {
     return date;
 }
 export function getEndDate(start, view) {
-    let end = start;
+    var end = start;
     if (view === "month") {
         end = endOfMonth(start);
     }
@@ -52,152 +53,150 @@ export function getNextDate(date, view) {
     return addWeeks(date, 1);
 }
 export function isTodayInView(start, end) {
-    return isWithinInterval(new Date(), { start, end });
+    return isWithinInterval(new Date(), { start: start, end: end });
 }
 export function mergeCalendarEvents(first, second) {
-    const all = {};
+    var all = {};
     addCalendarEvents(first, all);
     addCalendarEvents(second, all);
     return all;
 }
 export function addCalendarEvents(toAdd, toExtend) {
-    for (const id in toAdd) {
-        const event = toAdd[id];
-        toExtend[id] = event;
+    for (var id in toAdd) {
+        var event_1 = toAdd[id];
+        toExtend[id] = event_1;
     }
     return toExtend;
 }
 function getEventsByTimestamp(events) {
-    const output = {};
-    for (const uid in events) {
-        const event = events[uid];
-        event.days.forEach((timestamp) => {
+    var output = {};
+    var _loop_1 = function (uid) {
+        var event_2 = events[uid];
+        event_2.days.forEach(function (timestamp) {
             output[timestamp] = (output[timestamp] || {});
-            output[timestamp][uid] = event;
+            output[timestamp][uid] = event_2;
         });
+    };
+    for (var uid in events) {
+        _loop_1(uid);
     }
     return output;
 }
 function getSortedEvents(events) {
-    const output = [];
-    for (const uid in events) {
+    var output = [];
+    for (var uid in events) {
         output.push(events[uid]);
     }
     // sort events first multi, then all day then by start then by created date
-    output.sort((a, b) => {
-        const multi = Number(b.multi) - Number(a.multi);
-        const allDay = Number(b.allDay) - Number(a.allDay);
-        const start = a.start.getTime() - b.start.getTime();
-        const created = a.created.getTime() - b.created.getTime();
+    output.sort(function (a, b) {
+        var multi = Number(b.multi) - Number(a.multi);
+        var allDay = Number(b.allDay) - Number(a.allDay);
+        var start = a.start.getTime() - b.start.getTime();
+        var created = a.created.getTime() - b.created.getTime();
         return multi || allDay || start || created;
     });
     return output;
 }
-const FREE_SLOT = 0;
-const BUSY_SLOT = 1;
+var FREE_SLOT = 0;
+var BUSY_SLOT = 1;
 export function processEventsInView(eventsMap, calendarView, month, weeks) {
-    const eventsByTimestamp = getEventsByTimestamp(eventsMap);
-    const eventsList = getSortedEvents(eventsMap);
-    const todayDate = new Date();
-    const todayTimestamp = getEventTimestamp(todayDate);
-    const startedAtTopMap = {};
-    const viewWeeks = [];
-    for (let weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
-        const viewWeek = {
-            props: { key: `week.${weekIdx}` },
+    var eventsByTimestamp = getEventsByTimestamp(eventsMap);
+    var eventsList = getSortedEvents(eventsMap);
+    var todayDate = new Date();
+    var todayTimestamp = getEventTimestamp(todayDate);
+    var startedAtTopMap = {};
+    var viewWeeks = [];
+    var _loop_2 = function (weekIdx) {
+        var viewWeek = {
+            props: { key: "week.".concat(weekIdx) },
             days: [],
         };
-        const weekStartDate = weeks[weekIdx];
-        const weekStartDay = weekStartDate.getDate();
-        const weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
-        const weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
-        for (let dayNumber = 0; dayNumber < 7; dayNumber++) {
-            const dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
-            const dayTimestamp = getEventTimestamp(dayDate);
-            const $isToday = todayTimestamp === dayTimestamp;
-            const $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
-            const contextualProps = {
-                $isToday,
-                $isOutOfRange,
+        var weekStartDate = weeks[weekIdx];
+        var weekStartDay = weekStartDate.getDate();
+        var weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
+        var weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
+        for (var dayNumber = 0; dayNumber < 7; dayNumber++) {
+            var dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
+            var dayTimestamp = getEventTimestamp(dayDate);
+            var $isToday = todayTimestamp === dayTimestamp;
+            var $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
+            var contextualProps = {
+                $isToday: $isToday,
+                $isOutOfRange: $isOutOfRange,
             };
-            const viewDay = {
-                props: { key: `day.${dayTimestamp}`, ...contextualProps },
+            var viewDay = {
+                props: __assign({ key: "day.".concat(dayTimestamp) }, contextualProps),
                 timestamp: dayTimestamp + "",
                 label: dayDate.getDate() + "",
                 events: [],
             };
             // check that we have events in this day
-            if (eventsByTimestamp?.[dayTimestamp]) {
-                const verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(() => FREE_SLOT);
-                for (let eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
-                    const event = eventsList[eventIdx];
-                    let width = 1;
-                    let top = 0;
-                    let firstOfMulti;
-                    if (!event.daysMap[dayTimestamp]) {
+            if (eventsByTimestamp === null || eventsByTimestamp === void 0 ? void 0 : eventsByTimestamp[dayTimestamp]) {
+                var verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(function () { return FREE_SLOT; });
+                for (var eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
+                    var event_3 = eventsList[eventIdx];
+                    var width = 1;
+                    var top_1 = 0;
+                    var firstOfMulti = void 0;
+                    if (!event_3.daysMap[dayTimestamp]) {
                         continue;
                     }
                     // only for multi days events:
-                    if (event.multi) {
+                    if (event_3.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)
-                        width = event.days.filter((t) => t >= weekStartTimestamp && t <= weekEndTimestamp).length;
+                        width = event_3.days.filter(function (t) { return t >= weekStartTimestamp && t <= weekEndTimestamp; }).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)
-                        if (event.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
+                        if (event_3.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
                             firstOfMulti = true;
                         }
                     }
                     // if we already have the information on when the event has been
                     // vertically positioned use that index
-                    if (startedAtTopMap[event.uid]) {
-                        top = startedAtTopMap[event.uid];
+                    if (startedAtTopMap[event_3.uid]) {
+                        top_1 = startedAtTopMap[event_3.uid];
                     }
                     else {
                         // now look for a free slot and use its index as `top`
-                        for (let verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
-                            const freeOrBusy = verticalSlots[verticalIdx];
+                        for (var verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
+                            var freeOrBusy = verticalSlots[verticalIdx];
                             if (freeOrBusy !== BUSY_SLOT) {
-                                top = verticalIdx;
+                                top_1 = verticalIdx;
                                 break;
                             }
                         }
                     }
                     // now mark the slot as busy
-                    verticalSlots[top] = BUSY_SLOT;
+                    verticalSlots[top_1] = BUSY_SLOT;
                     // store the slot vertical position consistently for multi-days events
                     if (firstOfMulti) {
-                        startedAtTopMap[event.uid] = top;
+                        startedAtTopMap[event_3.uid] = top_1;
                     }
                     // push the event, they will be sorted later
-                    viewDay.events.push({
-                        key: `event.${dayTimestamp}-${top}`,
-                        ...contextualProps,
-                        ...event,
-                        isPast: todayDate > event.end,
-                        firstOfMulti,
-                        top,
-                        width,
-                    });
+                    viewDay.events.push(__assign(__assign(__assign({ key: "event.".concat(dayTimestamp, "-").concat(top_1) }, contextualProps), event_3), { isPast: todayDate > event_3.end, firstOfMulti: firstOfMulti, top: top_1, width: width }));
                 }
                 // fill the empty slots with events' placeholders
-                for (let i = 0; i < verticalSlots.length; i++) {
+                for (var i = 0; i < verticalSlots.length; i++) {
                     if (verticalSlots[i] !== BUSY_SLOT) {
                         viewDay.events.push({
-                            key: `event.${dayTimestamp}-${i}}`,
+                            key: "event.".concat(dayTimestamp, "-").concat(i, "}"),
                             placeholder: true,
                             top: i,
                         });
                     }
                 }
                 // sort events and events placeholders by top position
-                viewDay.events.sort((a, b) => a.top - b.top);
+                viewDay.events.sort(function (a, b) { return a.top - b.top; });
             }
             viewWeek.days.push(viewDay);
         }
         viewWeeks.push(viewWeek);
+    };
+    for (var weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
+        _loop_2(weekIdx);
     }
     return viewWeeks;
 }

package/Carousel/Carousel.js

@@ -1,4 +1,4 @@
-export const KoineCarousel = null;
+export var KoineCarousel = null;
 // import React, { useEffect, useState, useRef } from 'react';
 // import Slide from './slide';
 // import { getSliderListStyles } from './slider-list';

package/Carousel/CarouselCss.js

@@ -1,36 +1,23 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, useId } from "react";
+import { Children /* , useId */ } from "react";
 import styled from "styled-components";
 import { Row, Col, GRID_GUTTER_DEFAULT as DF, } from "../Grid";
-export const CarouselCssRow = styled(Row) `
-  ${({ $gutter: cs, theme: { gutter } }) => `
-    margin-left: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
-    margin-right: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
-    padding-left: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
-    padding-right: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
-  `}
-
-  scroll-behavior: smooth;
-  scroll-snap-type: x;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-export const CarouselCssCol = styled(Col) `
-  ${(p) => p.$width && `flex-basis: ${p.$width}px; min-width: ${p.$width}px;`}
-  position: relative;
-  scroll-snap-align: ${(p) => p.$snap};
-`;
+import { useId } from "../hooks/useId";
+export var CarouselCssRow = styled(Row)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
+    var cs = _a.$gutter, gutter = _a.theme.gutter;
+    return "\n    margin-left: -".concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    margin-right: -").concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    padding-left: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n    padding-right: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n  ");
+});
+export var CarouselCssCol = styled(Col)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"], ["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"])), function (p) { return p.$width && "flex-basis: ".concat(p.$width, "px; min-width: ").concat(p.$width, "px;"); }, function (p) { return p.$snap; });
 /**
  * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
  */
-export const KoineCarouselCss = ({ items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children, ...colProps }) => {
-    const slides = children ? Children.toArray(children) : items;
-    const id = useId();
+export var KoineCarouselCss = function (_a) {
+    var items = _a.items, $gutterRow = _a.$gutterRow, $gutterCol = _a.$gutterCol, _b = _a.$gutter, $gutter = _b === void 0 ? "quarter" : _b, $proportion = _a.$proportion, _c = _a.$snap, $snap = _c === void 0 ? "center" : _c, width = _a.width, children = _a.children, colProps = __rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
+    var slides = children ? Children.toArray(children) : items;
+    var id = useId();
     if (!slides)
         return null;
-    return (_jsx(CarouselCssRow, { "$noWrap": true, "$gutter": $gutterRow || $gutter, children: slides.map((_slide, idx) => (_jsx(CarouselCssCol, { ...colProps, "$gutter": $gutterCol || $gutter, "$width": width, children: slides[idx] }, `CarouselCssCol-${id}-${idx}`))) }));
+    return (_jsx(CarouselCssRow, __assign({ "$noWrap": true, "$gutter": $gutterRow || $gutter }, { children: slides.map(function (_slide, idx) { return (_jsx(CarouselCssCol, __assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width }, { children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) })));
 };
+var templateObject_1, templateObject_2;

package/Collapsable/Collapsable.d.ts

@@ -1 +1 @@
-export declare const Collasable: null;
+export declare const Collapsable: null;

package/Collapsable/Collapsable.js

@@ -1 +1 @@
-export const Collasable = null;
+export var Collapsable = null;

package/Collapsable/CollapsableReach.d.ts

@@ -1,66 +1,6 @@
-/// <reference types="react" />
-/// <reference types="@reach/utils/dist/declarations/src/polymorphic" />
-import { MotionProps } from "framer-motion";
-export declare type CollapsableStyledProps = {
-    $expanded?: boolean;
-};
 /**
- * `overflow-anchor: none;` keeps the same scrolling position
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Accordion/Accordion.js#L54
+ * @file
+ *
+ * Maybe do a simplified version following this example:
+ * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
  */
-export declare const CollapsableRoot: import("styled-components").StyledComponent<import("react").FC<import("@reach/disclosure/dist/declarations/src").DisclosureProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const CollapsableHeadRoot: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, import("styled-components").DefaultTheme, {
-    htmlFor: `${string}-input`;
-} & Pick<CollapsableStyledProps, "$expanded">, "htmlFor">;
-export declare const CollapsableHeadSpace: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const CollapsableHeadAction: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const CollaspableHeadLine: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
-export declare const collapsableHeadLineMotion: {
-    hover: {
-        width: string;
-        transition: {
-            duration: number;
-        };
-    };
-};
-export declare const CollapsableHeadText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const CollapsableHeadIcon: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
-export declare type CollapsableHeadProps = React.PropsWithChildren<Pick<CollapsableStyledProps, "$expanded"> & CollapsableComponents & {
-    id: CollapsableProps["id"];
-    onClick: (...args: any) => any;
-}>;
-export declare const CollapsableHead: ({ $expanded, id, onClick, HeadRoot, HeadAction, HeadIcon, children, }: CollapsableHeadProps) => JSX.Element;
-export declare const CollapsableInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    type: "checkbox";
-}, "type">;
-export declare const CollasableBodyWrap: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/disclosure/dist/declarations/src").DisclosurePanelProps>, import("styled-components").DefaultTheme, CollapsableStyledProps, never>;
-export declare const CollapsableBodyRoot: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
-export declare type CollapsableBodyProps = MotionProps & Pick<CollapsableStyledProps, "$expanded"> & {
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-};
-export declare const CollapsableBody: import("react").ForwardRefExoticComponent<MotionProps & Pick<CollapsableStyledProps, "$expanded"> & {
-    children?: React.ReactNode;
-    style?: import("react").CSSProperties | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export declare type CollapsableComponents = {
-    HeadRoot?: typeof CollapsableHeadRoot;
-    HeadAction?: null | typeof CollapsableHeadAction | React.FC<any>;
-    HeadIcon?: null | typeof CollapsableHeadIcon | React.FC<any>;
-};
-export declare type CollapsableProps = React.ComponentPropsWithoutRef<"div"> & {
-    id?: string;
-    expanded?: boolean;
-    /** Used to trigger a recalculation effect */
-    recalc?: any;
-    onChange?: () => any;
-    head: null | React.ReactNode;
-    body: React.ReactNode;
-    /** Amount of milliseconds after which the component collapses */
-    components?: CollapsableComponents;
-    /** @default "Expand" */
-    ariaExpand?: string;
-    /** @default "Collapse" */
-    ariaCollapse?: string;
-};
-export declare const Collapsable: ({ expanded: propExpanded, recalc, onChange, id, head, body, components, ariaExpand, ariaCollapse, ...props }: CollapsableProps) => JSX.Element;