@vuu-ui/vuu-ui-controls 2.1.19-beta.1 → 2.1.19-beta.2

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "2.1.19-beta.1",
+  "version": "2.1.19-beta.2",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.1"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "2.1.19-beta.1",
-    "@vuu-ui/vuu-data-react": "2.1.19-beta.1",
-    "@vuu-ui/vuu-layout": "2.1.19-beta.1",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table": "2.1.19-beta.1",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.1",
+    "@vuu-ui/vuu-context-menu": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.2",
+    "@vuu-ui/vuu-layout": "2.1.19-beta.2",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/icons": "1.16.0",
     "@salt-ds/styles": "0.2.1",
@@ -32,13 +32,12 @@
   "sideEffects": false,
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/calendar/Calendar.css.js

@@ -0,0 +1,10 @@
+const css = `
+.saltCalendar {
+  background: var(--salt-container-primary-background);
+  width: min-content;
+  padding: var(--salt-spacing-100);
+}
+
+
+`;
+export default css;

package/src/calendar/Calendar.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { makePrefixer } from "@salt-ds/core";
+import { clsx } from "clsx";
+import { forwardRef, useCallback } from "react";
+import { CalendarCarousel } from "./internal/CalendarCarousel.js";
+import { CalendarContext } from "./internal/CalendarContext.js";
+import { CalendarNavigation } from "./internal/CalendarNavigation.js";
+import { CalendarWeekHeader } from "./internal/CalendarWeekHeader.js";
+import { useCalendar } from "./useCalendar.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { DateFormatter, getLocalTimeZone } from "@internationalized/date";
+import Calendar_0 from "./Calendar.css";
+import { getCurrentLocale } from "./internal/utils.js";
+const withBaseName = makePrefixer("saltCalendar");
+const Calendar_Calendar = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { className, id, renderDayContents, hideYearDropdown, TooltipProps, borderedDropdown, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-calendar",
+        css: Calendar_0,
+        window: targetWindow
+    });
+    const { state, helpers } = useCalendar({
+        hideYearDropdown,
+        ...rest
+    });
+    const { setCalendarFocused } = helpers;
+    const handleFocus = useCallback(()=>{
+        setCalendarFocused(true);
+    }, [
+        setCalendarFocused
+    ]);
+    const handleBlur = useCallback(()=>{
+        setCalendarFocused(false);
+    }, [
+        setCalendarFocused
+    ]);
+    const calendarLabel = new DateFormatter(getCurrentLocale(), {
+        month: "long",
+        year: "numeric"
+    }).format(state.visibleMonth.toDate(getLocalTimeZone()));
+    return /*#__PURE__*/ jsx(CalendarContext.Provider, {
+        value: {
+            state,
+            helpers
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            className: clsx(withBaseName(), className),
+            id: id,
+            role: "application",
+            "aria-label": calendarLabel,
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx(CalendarNavigation, {
+                    borderedDropdown: borderedDropdown,
+                    hideYearDropdown: hideYearDropdown
+                }),
+                /*#__PURE__*/ jsx(CalendarWeekHeader, {}),
+                /*#__PURE__*/ jsx(CalendarCarousel, {
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
+                    renderDayContents: renderDayContents,
+                    TooltipProps: TooltipProps
+                })
+            ]
+        })
+    });
+});
+export { Calendar_Calendar as Calendar };

package/src/calendar/index.js

@@ -0,0 +1,4 @@
+export * from "./Calendar.js";
+export * from "./useCalendarDay.js";
+export * from "./useCalendar.js";
+export * from "./useSelection.js";

package/src/calendar/internal/CalendarCarousel.css.js

@@ -0,0 +1,19 @@
+const css = `
+.saltCalendarCarousel-track {
+  grid-auto-flow: column;
+  display: grid;
+}
+
+.saltCalendarCarousel-track > * {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+
+.saltCalendarCarousel-track > :nth-child(2) {
+  position: relative;
+}
+
+
+`;
+export default css;

package/src/calendar/internal/CalendarCarousel.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { isSameMonth } from "@internationalized/date";
+import { makePrefixer, useIsomorphicLayoutEffect } from "@salt-ds/core";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useCalendarContext } from "./CalendarContext.js";
+import { CalendarMonth } from "./CalendarMonth.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import CalendarCarousel_0 from "./CalendarCarousel.css";
+import { formatDate, monthDiff } from "./utils.js";
+function getMonths(month) {
+    return [
+        month.subtract({
+            months: 1
+        }),
+        month,
+        month.add({
+            months: 1
+        })
+    ];
+}
+const withBaseName = makePrefixer("saltCalendarCarousel");
+const CalendarCarousel_CalendarCarousel = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-calendar-carousel",
+        css: CalendarCarousel_0,
+        window: targetWindow
+    });
+    const { state: { visibleMonth } } = useCalendarContext();
+    const containerRef = useRef(null);
+    const diffIndex = (a, b)=>monthDiff(a, b);
+    const { current: baseIndex } = useRef(visibleMonth);
+    useIsomorphicLayoutEffect(()=>{
+        if (containerRef.current) containerRef.current.style.transform = `translate3d(${-101 * diffIndex(baseIndex, visibleMonth)}%, 0, 0)`;
+    });
+    const [months, setMonths] = useState(()=>getMonths(visibleMonth));
+    useEffect(()=>{
+        setMonths((oldMonths)=>{
+            const newMonths = getMonths(visibleMonth).filter((month)=>!oldMonths.find((oldMonth)=>isSameMonth(oldMonth, month)));
+            return oldMonths.concat(newMonths);
+        });
+        setMonths(getMonths(visibleMonth));
+    }, [
+        formatDate(visibleMonth)
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: withBaseName(),
+        tabIndex: -1,
+        style: {
+            overflowX: "hidden",
+            position: "relative"
+        },
+        ref: ref,
+        children: /*#__PURE__*/ jsx("div", {
+            className: withBaseName("track"),
+            ref: containerRef,
+            children: months.map((date, index)=>/*#__PURE__*/ jsx("div", {
+                    className: withBaseName("slide"),
+                    style: {
+                        transform: `translateX(${-101 * diffIndex(date, baseIndex)}%)`
+                    },
+                    "aria-hidden": 1 !== index ? "true" : void 0,
+                    children: /*#__PURE__*/ jsx(CalendarMonth, {
+                        ...rest,
+                        date: date
+                    })
+                }, formatDate(date)))
+        })
+    });
+});
+export { CalendarCarousel_CalendarCarousel as CalendarCarousel };

package/src/calendar/internal/CalendarContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const CalendarContext = /*#__PURE__*/ createContext(null);
+if ("production" !== process.env.NODE_ENV) CalendarContext.displayName = "CalendarContext";
+function useCalendarContext() {
+    const context = useContext(CalendarContext);
+    if (!context) throw new Error("Unexpected usage");
+    return context;
+}
+export { CalendarContext, useCalendarContext };

package/src/calendar/internal/CalendarDay.css.js

@@ -0,0 +1,116 @@
+const css = `
+.saltCalendarDay {
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  font-size: var(--salt-text-fontSize);
+  width: var(--salt-size-base);
+  height: var(--salt-size-base);
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  cursor: pointer;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.saltCalendarDay-content {
+  margin: 0 var(--salt-spacing-50);
+  width: 100%;
+}
+
+.saltCalendarDay:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(0px - var(--salt-focused-outlineWidth));
+}
+
+.saltCalendarDay-outOfRange {
+  color: var(--salt-content-secondary-foreground);
+}
+
+.saltCalendarDay-outOfRange:hover {
+  color: var(--salt-content-primary-foreground);
+}
+
+.saltCalendarDay-outOfRange .saltCalendarDay-today {
+  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);
+}
+
+.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {
+  background: var(--salt-content-secondary-foreground);
+}
+
+.saltCalendarDay:hover, .saltCalendarDay-hoveredOffset, .saltCalendarDay-hoveredOffset:hover {
+  background: var(--salt-selectable-background-hover);
+}
+
+.saltCalendarDay-selected {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+
+.saltCalendarDay-selectedStart {
+  z-index: var(--salt-zIndex-default);
+  border-top-left-radius: var(--salt-palette-corner-weak, 0);
+  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);
+}
+
+.saltCalendarDay-selectedEnd {
+  border-top-right-radius: var(--salt-palette-corner-weak, 0);
+  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);
+}
+
+.saltCalendarDay-selected, .saltCalendarDay-selected:hover, .saltCalendarDay-selectedStart, .saltCalendarDay-selectedStart:hover, .saltCalendarDay-selectedEnd, .saltCalendarDay-selectedEnd:hover {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);
+}
+
+.saltCalendarDay-hoveredSpan, .saltCalendarDay-hoveredSpan:hover, .saltCalendarDay-selectedSpan, .saltCalendarDay-selectedSpan:hover {
+  background: var(--salt-selectable-background-hover);
+  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)
+    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
+}
+
+.saltCalendarDay-disabled, .saltCalendarDay-disabled:hover, .saltCalendarDay-unselectable, .saltCalendarDay-unselectable:hover {
+  background: var(--salt-selectable-background-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+
+.saltCalendarDay-highlighted:before, .saltCalendarDay-highlighted:hover:before {
+  content: "";
+  height: var(--salt-spacing-200);
+  width: var(--salt-spacing-200);
+  top: calc(var(--salt-spacing-100) * -1);
+  right: calc(var(--salt-spacing-100) * -1);
+  background: var(--salt-accent-background);
+  position: absolute;
+  transform: rotate(45deg);
+}
+
+.saltCalendarDay-unselectable:after {
+  content: "";
+  height: var(--salt-size-border);
+  width: calc(100% - var(--salt-spacing-100));
+  background: var(--salt-content-secondary-foreground);
+  position: absolute;
+}
+
+.saltCalendarDay-today, .saltCalendarDay-today:hover, .saltCalendarDay-outOfRange .saltCalendarDay-today:hover {
+  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);
+  margin-bottom: calc(var(--salt-size-indicator) * -1);
+}
+
+.saltCalendarDay-disabled, .saltCalendarDay-disabled:hover {
+  color: var(--salt-content-secondary-foreground-disabled);
+}
+
+.saltCalendarDay-hidden {
+  visibility: hidden;
+}
+
+
+`;
+export default css;

package/src/calendar/internal/CalendarDay.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, makePrefixer, useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { forwardRef, useRef } from "react";
+import { useCalendarDay } from "../useCalendarDay.js";
+import CalendarDay_0 from "./CalendarDay.css";
+import { formatDate } from "./utils.js";
+const withBaseName = makePrefixer("saltCalendarDay");
+const CalendarDay_CalendarDay = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { className, day, renderDayContents, month, TooltipProps, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-calendar-day",
+        css: CalendarDay_0,
+        window: targetWindow
+    });
+    const dayRef = useRef(null);
+    const buttonRef = useForkRef(ref, dayRef);
+    const { status, dayProps, unselectableReason, highlightedReason } = useCalendarDay({
+        date: day,
+        month
+    }, dayRef);
+    const { outOfRange, today, unselectable, highlighted, hidden, disabled } = status;
+    return /*#__PURE__*/ jsx(Tooltip, {
+        hideIcon: true,
+        status: unselectableReason ? "error" : "info",
+        content: unselectableReason || highlightedReason || "Date is out of range",
+        disabled: !unselectableReason && !highlightedReason,
+        placement: "top",
+        enterDelay: 0,
+        leaveDelay: 0,
+        ...TooltipProps,
+        children: /*#__PURE__*/ jsx("button", {
+            "aria-label": formatDate(day, {
+                day: "2-digit",
+                month: "long",
+                year: "numeric"
+            }),
+            disabled: disabled,
+            type: "button",
+            ...dayProps,
+            ref: buttonRef,
+            ...rest,
+            className: clsx(withBaseName(), {
+                [withBaseName("hidden")]: hidden,
+                [withBaseName("outOfRange")]: outOfRange,
+                [withBaseName("disabled")]: disabled,
+                [withBaseName("unselectable")]: !!unselectable,
+                [withBaseName("highlighted")]: !!highlighted
+            }, dayProps.className, className),
+            children: /*#__PURE__*/ jsx("span", {
+                className: clsx(withBaseName("content"), {
+                    [withBaseName("today")]: today
+                }),
+                children: renderDayContents ? renderDayContents(day, status) : formatDate(day, {
+                    day: "numeric"
+                })
+            })
+        })
+    });
+});
+export { CalendarDay_CalendarDay as CalendarDay };

package/src/calendar/internal/CalendarMonth.css.js

@@ -0,0 +1,13 @@
+const css = `
+.saltCalendarMonth-dateGrid {
+  gap: var(--salt-size-border);
+  grid-template-columns: repeat(7, var(--salt-size-base));
+  grid-template-rows: repeat(6, var(--salt-size-base));
+  text-align: center;
+  margin: var(--salt-size-border);
+  display: grid;
+}
+
+
+`;
+export default css;

package/src/calendar/internal/CalendarMonth.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { makePrefixer } from "@salt-ds/core";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { CalendarDay } from "./CalendarDay.js";
+import { formatDate, generateVisibleDays } from "./utils.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCalendarContext } from "./CalendarContext.js";
+import CalendarMonth_0 from "./CalendarMonth.css";
+const withBaseName = makePrefixer("saltCalendarMonth");
+const CalendarMonth_CalendarMonth = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { className, date, renderDayContents, onMouseLeave, TooltipProps, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-calendar-month",
+        css: CalendarMonth_0,
+        window: targetWindow
+    });
+    const days = generateVisibleDays(date);
+    const { helpers: { setHoveredDate } } = useCalendarContext();
+    const handleMouseLeave = (event)=>{
+        setHoveredDate(event, null);
+        onMouseLeave?.(event);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx(withBaseName(), className),
+        ref: ref,
+        onMouseLeave: handleMouseLeave,
+        ...rest,
+        children: /*#__PURE__*/ jsx("div", {
+            "data-testid": "CalendarDateGrid",
+            className: withBaseName("dateGrid"),
+            children: days.map((day)=>/*#__PURE__*/ jsx(CalendarDay, {
+                    day: day.date,
+                    renderDayContents: renderDayContents,
+                    month: date,
+                    TooltipProps: TooltipProps
+                }, formatDate(day.date)))
+        })
+    });
+});
+export { CalendarMonth_CalendarMonth as CalendarMonth };

package/src/calendar/internal/CalendarNavigation.css.js

@@ -0,0 +1,24 @@
+const css = `
+.saltCalendarNavigation {
+  padding-bottom: var(--salt-spacing-100);
+  grid-gap: 0;
+  box-sizing: border-box;
+  grid-template-columns: min-content auto min-content;
+  align-items: center;
+  display: grid;
+}
+
+.saltCalendarNavigation-hideYearDropdown {
+  grid-gap: var(--salt-spacing-300);
+  grid-template-columns: min-content auto min-content;
+}
+
+.saltCalendarNavigation-dropdowns {
+  grid-gap: var(--salt-spacing-100);
+  grid-template-columns: 1fr 1fr;
+  display: grid;
+}
+
+
+`;
+export default css;