@koobiq/react-components 0.6.0 → 0.7.0

package/dist/components/Calendar/components/CalendarGrid/CalendarGrid.js

@@ -1,9 +1,12 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect, createRef } from "react";
 import { useLocale, getWeeksInMonth, clsx } from "@koobiq/react-core";
 import { useCalendarGrid } from "@koobiq/react-primitives";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { utilClasses } from "../../../../styles/utility.js";
 import s from "./CalendarGrid.module.css.js";
+import { monthIndex } from "./utils.js";
 import { CalendarCell } from "../CalendarCell/CalendarCell.js";
 const textNormal = utilClasses.typography["text-normal"];
 function CalendarGrid({ state, ...props }) {
@@ -12,16 +15,57 @@ function CalendarGrid({ state, ...props }) {
     { ...props, weekdayStyle: "short" },
     state
   );
+  const currentKey = useMemo(
+    () => state.visibleRange.start.toString(),
+    [state.visibleRange.start]
+  );
+  const prevStartRef = useRef(state.visibleRange.start);
+  const dir = useMemo(() => {
+    const curr = state.visibleRange.start;
+    const prev = prevStartRef.current;
+    const delta = monthIndex(curr) - monthIndex(prev);
+    if (delta === 0) return "next";
+    if (Math.abs(delta) > 1) return "jump";
+    return delta > 0 ? "next" : "prev";
+  }, [state.visibleRange.start]);
+  useEffect(() => {
+    prevStartRef.current = state.visibleRange.start;
+  }, [state.visibleRange.start]);
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-  return /* @__PURE__ */ jsxs("table", { ...gridProps, className: clsx(s.base, textNormal), children: [
+  const nodeRefs = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const k = currentKey;
+  if (!nodeRefs.current.has(k)) {
+    nodeRefs.current.set(k, createRef());
+  }
+  const tbodyRef = nodeRefs.current.get(k);
+  return /* @__PURE__ */ jsx("div", { className: s.container, children: /* @__PURE__ */ jsxs("table", { ...gridProps, className: clsx(s.base, s[dir], textNormal), children: [
     /* @__PURE__ */ jsxs("thead", { ...headerProps, children: [
       /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, i) => /* @__PURE__ */ jsx("th", { className: clsx(s.weekDay, textNormal), children: day }, i)) }),
       /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { colSpan: 7, className: s.divider }) })
     ] }),
-    /* @__PURE__ */ jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
-      (date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
-    ) }, weekIndex)) })
-  ] });
+    /* @__PURE__ */ jsx(TransitionGroup, { component: null, children: /* @__PURE__ */ jsx(
+      CSSTransition,
+      {
+        timeout: 300,
+        nodeRef: tbodyRef,
+        classNames: {
+          enter: s.daysEnter,
+          enterActive: s.daysEnterActive,
+          exit: s.daysExit,
+          exitActive: s.daysExitActive
+        },
+        onExited: () => {
+          nodeRefs.current.delete(k);
+        },
+        children: /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
+          (date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
+        ) }, weekIndex)) })
+      },
+      k
+    ) })
+  ] }) });
 }
 export {
   CalendarGrid

package/dist/components/Calendar/components/CalendarGrid/CalendarGrid.module.css.js

@@ -1,14 +1,35 @@
 const base = "kbq-calendargrid-1a43cf";
+const container = "kbq-calendargrid-container-aea3c5";
 const weekDay = "kbq-calendargrid-weekDay-94b083";
 const divider = "kbq-calendargrid-divider-3ec061";
+const next = "kbq-calendargrid-next-56a233";
+const daysEnter = "kbq-calendargrid-daysEnter-576154";
+const daysEnterActive = "kbq-calendargrid-daysEnterActive-a174dd";
+const daysExit = "kbq-calendargrid-daysExit-93902d";
+const daysExitActive = "kbq-calendargrid-daysExitActive-57d3e5";
+const prev = "kbq-calendargrid-prev-1d8448";
 const s = {
   base,
+  container,
   weekDay,
-  divider
+  divider,
+  next,
+  daysEnter,
+  daysEnterActive,
+  daysExit,
+  daysExitActive,
+  prev
 };
 export {
   base,
+  container,
+  daysEnter,
+  daysEnterActive,
+  daysExit,
+  daysExitActive,
   s as default,
   divider,
+  next,
+  prev,
   weekDay
 };

package/dist/components/Calendar/components/CalendarGrid/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function monthIndex(d: {
+    year: number;
+    month: number;
+}): number;

package/dist/components/Calendar/components/CalendarGrid/utils.js

@@ -0,0 +1,6 @@
+function monthIndex(d) {
+  return d.year * 12 + d.month;
+}
+export {
+  monthIndex
+};

package/dist/components/DatePicker/DatePicker.js

@@ -81,6 +81,7 @@ function DatePickerRender(props, ref) {
       size: "auto",
       hideArrow: true,
       hideCloseButton: true,
+      className: s.popover,
       placement: "bottom start",
       slotProps: {
         dialog: dialogProps

package/dist/components/DatePicker/DatePicker.module.css.js

@@ -1,8 +1,11 @@
 const calendar = "kbq-datepicker-calendar-25a0d7";
+const popover = "kbq-datepicker-popover-831cde";
 const s = {
-  calendar
+  calendar,
+  popover
 };
 export {
   calendar,
-  s as default
+  s as default,
+  popover
 };

package/dist/style.css

@@ -3842,6 +3842,7 @@
   padding-block: var(--kbq-size-m);
   flex-direction: column;
   display: flex;
+  overflow-x: hidden;
 }
 
 .kbq-calendar-open-e506bb {
@@ -3863,15 +3864,23 @@
   margin-inline-start: auto;
 }
 .kbq-calendargrid-1a43cf {
+  border-spacing: 0;
   border-collapse: separate;
-  padding-inline: var(--kbq-size-m);
-  border-spacing: 0 var(--kbq-size-3xs);
+  position: relative;
 }
 
 .kbq-calendargrid-1a43cf td, .kbq-calendargrid-1a43cf th {
   padding: 0;
 }
 
+.kbq-calendargrid-1a43cf tr > td {
+  padding-block-start: var(--kbq-size-3xs);
+}
+
+.kbq-calendargrid-container-aea3c5 {
+  padding-inline: var(--kbq-size-m);
+}
+
 .kbq-calendargrid-weekDay-94b083 {
   block-size: var(--calendar-cell-block-size);
   inline-size: var(--calendar-cell-inline-size);
@@ -3890,6 +3899,54 @@
   background-color: var(--kbq-line-contrast-less);
   position: absolute;
 }
+
+.kbq-calendargrid-next-56a233 .kbq-calendargrid-daysEnter-576154 {
+  transform: translateX(50px);
+}
+
+.kbq-calendargrid-next-56a233 .kbq-calendargrid-daysEnterActive-a174dd, .kbq-calendargrid-next-56a233 .kbq-calendargrid-daysExit-93902d {
+  transform: translateX(0);
+}
+
+.kbq-calendargrid-next-56a233 .kbq-calendargrid-daysExitActive-57d3e5 {
+  transform: translateX(-50px);
+}
+
+.kbq-calendargrid-prev-1d8448 .kbq-calendargrid-daysEnter-576154 {
+  transform: translateX(-50px);
+}
+
+.kbq-calendargrid-prev-1d8448 .kbq-calendargrid-daysEnterActive-a174dd, .kbq-calendargrid-prev-1d8448 .kbq-calendargrid-daysExit-93902d {
+  transform: translateX(0);
+}
+
+.kbq-calendargrid-prev-1d8448 .kbq-calendargrid-daysExitActive-57d3e5 {
+  transform: translateX(50px);
+}
+
+.kbq-calendargrid-daysEnter-576154 {
+  opacity: 0;
+  position: absolute;
+  inset-inline-start: 0;
+}
+
+.kbq-calendargrid-daysEnterActive-a174dd {
+  opacity: 1;
+}
+
+.kbq-calendargrid-daysExit-93902d {
+  pointer-events: none;
+  opacity: 1;
+  position: absolute;
+}
+
+.kbq-calendargrid-daysExitActive-57d3e5 {
+  opacity: 0;
+}
+
+.kbq-calendargrid-daysEnterActive-a174dd, .kbq-calendargrid-daysExitActive-57d3e5 {
+  transition: opacity .2s, transform .3s;
+}
 .kbq-calendarcell-dc4d6e {
   --table-cell-outline-color: transparent;
   --table-cell-outline-width: var(--kbq-size-3xs);
@@ -4030,6 +4087,22 @@
 .kbq-datepicker-calendar-25a0d7 {
   margin-inline-end: calc(-1 * var(--kbq-size-xxs));
 }
+
+.kbq-datepicker-popover-831cde {
+  border-radius: var(--kbq-size-s);
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.kbq-datepicker-popover-831cde[data-transition="entering"], .kbq-datepicker-popover-831cde[data-transition="entered"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.kbq-datepicker-popover-831cde[data-transition="exiting"], .kbq-datepicker-popover-831cde[data-transition="exited"] {
+  opacity: 0;
+  transform: translateY(-8px);
+}
 .kbq-timepicker-a6e9f3 {
   min-inline-size: 150px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.6.0",
-    "@koobiq/react-icons": "0.6.0",
-    "@koobiq/react-core": "0.6.0",
-    "@koobiq/react-primitives": "0.6.0"
+    "@koobiq/react-core": "0.7.0",
+    "@koobiq/react-icons": "0.7.0",
+    "@koobiq/logger": "0.7.0",
+    "@koobiq/react-primitives": "0.7.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",