@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/button-bar/internal/DescendantContext.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+
+const DescendantContext = React.createContext({});
+function DescendantProvider({
+  items,
+  setItems,
+  ...props
+}) {
+  const assigning = React.useRef(true);
+  const [, forceUpdate] = React.useState();
+  core.useIsomorphicLayoutEffect(() => {
+    if (assigning.current) {
+      assigning.current = false;
+      forceUpdate({});
+    } else {
+      assigning.current = true;
+    }
+    return () => {
+      if (assigning.current) {
+        setItems([]);
+      }
+    };
+  }, [items]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DescendantContext.Provider, {
+    ...props,
+    value: { setItems, assigning }
+  });
+}
+
+exports.DescendantContext = DescendantContext;
+exports.DescendantProvider = DescendantProvider;
+//# sourceMappingURL=DescendantContext.js.map

package/dist-cjs/packages/lab/src/button-bar/internal/DescendantContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescendantContext.js","sources":["../src/button-bar/internal/DescendantContext.tsx"],"sourcesContent":["// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport {\n  createContext,\n  Dispatch,\n  MutableRefObject,\n  ReactNode,\n  SetStateAction,\n  useRef,\n  useState,\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\n// //////////////////////////////////////////////////////////////////////////////\n// SUPER HACKS AHEAD: The React team will hate this enough to hopefully give us\n// a way to know the index of a descendant given a parent (will help generate\n// IDs for accessibility a long with the ability create maximally composable\n// component abstractions).\n//\n// This is all to avoid cloneElement. If we can avoid cloneElement then people\n// can have arbitrary markup around MenuItems.  This basically takes advantage\n// of react's render lifecycles to let us \"register\" descendants to an\n// ancestor, so that we can track all the descendants and manage focus on them,\n// etc.  The super hacks here are for the child to know it's index as well, so\n// that it can set attributes, match against state from above, etc.\ninterface DescendantProviderProps {\n  children?: ReactNode;\n  items: Record<string, any>[];\n  setItems: Dispatch<SetStateAction<Record<string, any>[]>>;\n}\n\ninterface DescendantContextType {\n  assigning?: MutableRefObject<boolean>;\n  setItems?: DescendantProviderProps[\"setItems\"];\n}\nexport const DescendantContext = createContext<DescendantContextType>({});\n\nexport function DescendantProvider({\n  items,\n  setItems,\n  ...props\n}: DescendantProviderProps) {\n  // On the first render we say we're \"assigning\", and the children will push\n  // into the array when they show up in their own useLayoutEffect.\n  const assigning = useRef(true);\n\n  // since children are pushed into the array in useLayoutEffect of the child,\n  // children can't read their index on first render.  So we need to cause a\n  // second render so they can read their index.\n  const [, forceUpdate] = useState<unknown>();\n\n  // parent useLayoutEffect is always last\n  useIsomorphicLayoutEffect(() => {\n    if (assigning.current) {\n      // At this point all of the children have pushed into the array so we set\n      // assigning to false and force an update. Since we're in\n      // useLayoutEffect, we won't get a flash of rendered content, it will all\n      // happen synchronously. And now that this is false, children won't push\n      // into the array on the forceUpdate\n      assigning.current = false;\n      forceUpdate({});\n    } else {\n      // After the forceUpdate completes, we end up here and set assigning back\n      // to true for the next update from the app\n      assigning.current = true;\n    }\n    return () => {\n      // this cleanup function runs right before the next render, so it's the\n      // right time to empty out the array to be reassigned with whatever shows\n      // up next render.\n      if (assigning.current) {\n        // we only want to empty out the array before the next render cycle if\n        // it was NOT the result of our forceUpdate, so being guarded behind\n        // assigning.current works\n        setItems([]);\n      }\n    };\n  }, [items]);\n\n  return (\n    <DescendantContext.Provider {...props} value={{ setItems, assigning }} />\n  );\n}\n"],"names":["createContext","useRef","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;;;AAkCa,MAAA,iBAAA,GAAoBA,mBAAqC,CAAA,EAAE,EAAA;AAEjE,SAAS,kBAAmB,CAAA;AAAA,EACjC,KAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA4B,EAAA;AAG1B,EAAM,MAAA,SAAA,GAAYC,aAAO,IAAI,CAAA,CAAA;AAK7B,EAAA,MAAM,GAAG,WAAW,CAAA,GAAIC,cAAkB,EAAA,CAAA;AAG1C,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,UAAU,OAAS,EAAA;AAMrB,MAAA,SAAA,CAAU,OAAU,GAAA,KAAA,CAAA;AACpB,MAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,KACT,MAAA;AAGL,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA,CAAA;AAAA,KACtB;AACA,IAAA,OAAO,MAAM;AAIX,MAAA,IAAI,UAAU,OAAS,EAAA;AAIrB,QAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAAA,OACb;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EACE,uBAAAC,cAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,IAA4B,GAAG,KAAA;AAAA,IAAO,KAAA,EAAO,EAAE,QAAA,EAAU,SAAU,EAAA;AAAA,GAAG,CAAA,CAAA;AAE3E;;;;;"}

package/dist-cjs/packages/lab/src/button-bar/internal/useDescendant.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@salt-ds/core');
+var DescendantContext = require('./DescendantContext.js');
+
+function useDescendant(descendant) {
+  const { assigning, setItems } = React.useContext(DescendantContext.DescendantContext);
+  const index = React.useRef(-1);
+  core.useIsomorphicLayoutEffect(() => {
+    if ((assigning == null ? void 0 : assigning.current) && setItems) {
+      setItems((old) => {
+        index.current = old.length;
+        return old.concat(descendant);
+      });
+    }
+  });
+  return index.current;
+}
+
+exports.useDescendant = useDescendant;
+//# sourceMappingURL=useDescendant.js.map

package/dist-cjs/packages/lab/src/button-bar/internal/useDescendant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDescendant.js","sources":["../src/button-bar/internal/useDescendant.ts"],"sourcesContent":["// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useContext, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nimport { DescendantContext } from \"./DescendantContext\";\n\nexport function useDescendant(descendant: Record<string, any>): number {\n  const { assigning, setItems } = useContext(DescendantContext);\n  const index = useRef(-1);\n\n  useIsomorphicLayoutEffect(() => {\n    if (assigning?.current && setItems) {\n      setItems((old) => {\n        index.current = old.length;\n        return old.concat(descendant);\n      });\n    }\n  });\n\n  // first render its wrong, after a forceUpdate in parent useIsomorphicLayoutEffect it's\n  // right, and its all synchronous so we don't get any flashing\n  return index.current;\n}\n"],"names":["useContext","DescendantContext","useRef","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAMO,SAAS,cAAc,UAAyC,EAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAIA,iBAAWC,mCAAiB,CAAA,CAAA;AAC5D,EAAM,MAAA,KAAA,GAAQC,aAAO,CAAE,CAAA,CAAA,CAAA;AAEvB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAW,YAAW,QAAU,EAAA;AAClC,MAAA,QAAA,CAAS,CAAC,GAAQ,KAAA;AAChB,QAAA,KAAA,CAAM,UAAU,GAAI,CAAA,MAAA,CAAA;AACpB,QAAO,OAAA,GAAA,CAAI,OAAO,UAAU,CAAA,CAAA;AAAA,OAC7B,CAAA,CAAA;AAAA,KACH;AAAA,GACD,CAAA,CAAA;AAID,EAAA,OAAO,KAAM,CAAA,OAAA,CAAA;AACf;;;;"}

package/dist-cjs/packages/lab/src/button-bar/internal/useDescendants.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function useDescendants() {
+  return React.useState([]);
+}
+
+exports.useDescendants = useDescendants;
+//# sourceMappingURL=useDescendants.js.map

package/dist-cjs/packages/lab/src/button-bar/internal/useDescendants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDescendants.js","sources":["../src/button-bar/internal/useDescendants.ts"],"sourcesContent":["// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useState, Dispatch, SetStateAction } from \"react\";\n\nexport function useDescendants<T>(): [T[], Dispatch<SetStateAction<T[]>>] {\n  return useState<T[]>([]);\n}\n"],"names":["useState"],"mappings":";;;;;;AAGO,SAAS,cAA0D,GAAA;AACxE,EAAO,OAAAA,cAAA,CAAc,EAAE,CAAA,CAAA;AACzB;;;;"}

package/dist-cjs/packages/lab/src/calendar/Calendar.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltCalendar {\n  width: min-content;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Calendar.css.js.map

package/dist-cjs/packages/lab/src/calendar/Calendar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist-cjs/packages/lab/src/calendar/Calendar.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('classnames');
+var core = require('@salt-ds/core');
+var CalendarNavigation = require('./internal/CalendarNavigation.js');
+var CalendarWeekHeader = require('./internal/CalendarWeekHeader.js');
+var CalendarCarousel = require('./internal/CalendarCarousel.js');
+var CalendarContext = require('./internal/CalendarContext.js');
+var useCalendar = require('./useCalendar.js');
+require('./Calendar.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltCalendar");
+const Calendar = React.forwardRef(
+  function Calendar2(props, ref) {
+    const {
+      className,
+      renderDayContents,
+      hideYearDropdown,
+      TooltipProps,
+      ...rest
+    } = props;
+    const { state, helpers } = useCalendar.useCalendar({ hideYearDropdown, ...rest });
+    const { setCalendarFocused } = helpers;
+    const handleFocus = React.useCallback(() => {
+      setCalendarFocused(true);
+    }, [setCalendarFocused]);
+    const handleBlur = React.useCallback(() => {
+      setCalendarFocused(false);
+    }, [setCalendarFocused]);
+    return /* @__PURE__ */ jsxRuntime.jsx(CalendarContext.CalendarContext.Provider, {
+      value: {
+        state,
+        helpers
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: cx__default["default"](withBaseName(), className),
+        role: "application",
+        ref,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CalendarNavigation.CalendarNavigation, {
+            hideYearDropdown
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(CalendarWeekHeader.CalendarWeekHeader, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(CalendarCarousel.CalendarCarousel, {
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            renderDayContents,
+            TooltipProps
+          })
+        ]
+      })
+    });
+  }
+);
+
+exports.Calendar = Calendar;
+//# sourceMappingURL=Calendar.js.map

package/dist-cjs/packages/lab/src/calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport classnames from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport {\n  CalendarNavigation,\n  CalendarNavigationProps,\n} from \"./internal/CalendarNavigation\";\nimport { CalendarWeekHeader } from \"./internal/CalendarWeekHeader\";\nimport {\n  CalendarCarousel,\n  CalendarCarouselProps,\n} from \"./internal/CalendarCarousel\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport { useCalendar, useCalendarProps } from \"./useCalendar\";\n\nimport \"./Calendar.css\";\n\nexport type CalendarProps = useCalendarProps & {\n  className?: string;\n  renderDayContents?: CalendarCarouselProps[\"renderDayContents\"];\n  hideYearDropdown?: CalendarNavigationProps[\"hideYearDropdown\"];\n  TooltipProps?: CalendarCarouselProps[\"TooltipProps\"];\n  hideOutOfRangeDates?: CalendarCarouselProps[\"hideOutOfRangeDates\"];\n};\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  function Calendar(props, ref) {\n    const {\n      className,\n      renderDayContents,\n      hideYearDropdown,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const { state, helpers } = useCalendar({ hideYearDropdown, ...rest });\n\n    const { setCalendarFocused } = helpers;\n\n    const handleFocus = useCallback(() => {\n      setCalendarFocused(true);\n    }, [setCalendarFocused]);\n\n    const handleBlur = useCallback(() => {\n      setCalendarFocused(false);\n    }, [setCalendarFocused]);\n\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={classnames(withBaseName(), className)}\n          role=\"application\"\n          ref={ref}\n        >\n          <CalendarNavigation hideYearDropdown={hideYearDropdown} />\n          <CalendarWeekHeader />\n          <CalendarCarousel\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            renderDayContents={renderDayContents}\n            TooltipProps={TooltipProps}\n          />\n        </div>\n      </CalendarContext.Provider>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Calendar","useCalendar","useCallback","jsx","CalendarContext","jsxs","classnames","CalendarNavigation","CalendarWeekHeader","CalendarCarousel"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAE,OAAO,OAAQ,EAAA,GAAIC,wBAAY,EAAE,gBAAA,EAAkB,GAAG,IAAA,EAAM,CAAA,CAAA;AAEpE,IAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,IAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,MAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAAA,KACzB,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAaA,kBAAY,MAAM;AACnC,MAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAAA,KAC1B,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IACE,uBAAAC,cAAA,CAACC,gCAAgB,QAAhB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,OAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAAC,sBAAA,CAAW,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QAC/C,IAAK,EAAA,aAAA;AAAA,QACL,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAACH,cAAA,CAAAI,qCAAA,EAAA;AAAA,YAAmB,gBAAA;AAAA,WAAoC,CAAA;AAAA,yCACvDC,qCAAmB,EAAA,EAAA,CAAA;AAAA,0BACnBL,cAAA,CAAAM,iCAAA,EAAA;AAAA,YACC,OAAS,EAAA,WAAA;AAAA,YACT,MAAQ,EAAA,UAAA;AAAA,YACR,iBAAA;AAAA,YACA,YAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/calendar/internal/CalendarCarousel.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltCalendarCarousel-track {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n  position: relative;\n}\n\n.saltCalendarCarousel-shouldAnimate {\n  transition: transform 200ms ease-in-out;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=CalendarCarousel.css.js.map

package/dist-cjs/packages/lab/src/calendar/internal/CalendarCarousel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarCarousel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist-cjs/packages/lab/src/calendar/internal/CalendarCarousel.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var date = require('@internationalized/date');
+var CalendarMonth = require('./CalendarMonth.js');
+var core = require('@salt-ds/core');
+var CalendarContext = require('./CalendarContext.js');
+require('./CalendarCarousel.css.js');
+var utils = require('./utils.js');
+
+function getMonths(month) {
+  return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
+}
+function usePreviousMonth(visibleMonth) {
+  const previous = core.usePrevious(visibleMonth, [utils.formatDate(visibleMonth)]);
+  return previous != null ? previous : date.today(date.getLocalTimeZone());
+}
+const withBaseName = core.makePrefixer("saltCalendarCarousel");
+const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref) {
+  const { ...rest } = props;
+  const {
+    state: { visibleMonth }
+  } = CalendarContext.useCalendarContext();
+  const containerRef = React.useRef(null);
+  const diffIndex = (a, b) => utils.monthDiff(a, b);
+  const { current: baseIndex } = React.useRef(visibleMonth);
+  const previousVisibleMonth = usePreviousMonth(visibleMonth);
+  core.useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {
+      (_a = containerRef.current) == null ? void 0 : _a.classList.remove(withBaseName("shouldAnimate"));
+    } else {
+      (_b = containerRef.current) == null ? void 0 : _b.classList.add(withBaseName("shouldAnimate"));
+    }
+  }, [utils.formatDate(visibleMonth), utils.formatDate(previousVisibleMonth)]);
+  core.useIsomorphicLayoutEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * 100}%, 0, 0)`;
+    }
+  });
+  const [months, setMonths] = React.useState(() => getMonths(visibleMonth));
+  React.useEffect(() => {
+    setMonths((oldMonths) => {
+      const newMonths = getMonths(visibleMonth).filter((month) => {
+        return !oldMonths.find((oldMonth) => date.isSameMonth(oldMonth, month));
+      });
+      return oldMonths.concat(newMonths);
+    });
+    const finishTransition = () => {
+      setMonths(getMonths(visibleMonth));
+    };
+    const container = containerRef.current;
+    if (container && parseFloat(window.getComputedStyle(container).transitionDuration) > 0) {
+      container == null ? void 0 : container.addEventListener("transitionend", finishTransition);
+      return () => {
+        container == null ? void 0 : container.removeEventListener("transitionend", finishTransition);
+      };
+    } else {
+      finishTransition();
+    }
+    return void 0;
+  }, [utils.formatDate(visibleMonth)]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: withBaseName(),
+    style: {
+      overflowX: "hidden",
+      position: "relative"
+    },
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("track"),
+      ref: containerRef,
+      children: months.map((date, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName("slide"),
+        style: {
+          transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`
+        },
+        "aria-hidden": index !== 1 ? "true" : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonth.CalendarMonth, {
+          isVisible: index === 1,
+          ...rest,
+          date
+        })
+      }, utils.formatDate(date)))
+    })
+  });
+});
+
+exports.CalendarCarousel = CalendarCarousel;
+//# sourceMappingURL=CalendarCarousel.js.map

package/dist-cjs/packages/lab/src/calendar/internal/CalendarCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarCarousel.js","sources":["../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import { forwardRef, useRef, useEffect, useState } from \"react\";\nimport {\n  DateValue,\n  getLocalTimeZone,\n  isSameMonth,\n  today,\n} from \"@internationalized/date\";\nimport { CalendarMonth, CalendarMonthProps } from \"./CalendarMonth\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { usePrevious } from \"@salt-ds/core\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport \"./CalendarCarousel.css\";\nimport { formatDate, monthDiff } from \"./utils\";\n\nexport type CalendarCarouselProps = Omit<CalendarMonthProps, \"date\">;\n\nfunction getMonths(month: DateValue) {\n  return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nfunction usePreviousMonth(visibleMonth: DateValue) {\n  const previous = usePrevious(visibleMonth, [formatDate(visibleMonth)]);\n\n  return previous ?? today(getLocalTimeZone());\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarCarousel\");\n\nexport const CalendarCarousel = forwardRef<\n  HTMLDivElement,\n  CalendarCarouselProps\n>(function CalendarCarousel(props, ref) {\n  const { ...rest } = props;\n\n  const {\n    state: { visibleMonth },\n  } = useCalendarContext();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n  const { current: baseIndex } = useRef(visibleMonth);\n  const previousVisibleMonth = usePreviousMonth(visibleMonth);\n\n  useIsomorphicLayoutEffect(() => {\n    if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {\n      containerRef.current?.classList.remove(withBaseName(\"shouldAnimate\"));\n    } else {\n      containerRef.current?.classList.add(withBaseName(\"shouldAnimate\"));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [formatDate(visibleMonth), formatDate(previousVisibleMonth)]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.style.transform = `translate3d(${\n        diffIndex(baseIndex, visibleMonth) * 100\n      }%, 0, 0)`;\n    }\n  });\n\n  const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n  useEffect(() => {\n    setMonths((oldMonths) => {\n      const newMonths = getMonths(visibleMonth).filter((month) => {\n        return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n      });\n\n      return oldMonths.concat(newMonths);\n    });\n    const finishTransition = () => {\n      setMonths(getMonths(visibleMonth));\n    };\n    const container = containerRef.current;\n\n    if (\n      container &&\n      parseFloat(window.getComputedStyle(container).transitionDuration) > 0\n    ) {\n      container?.addEventListener(\"transitionend\", finishTransition);\n\n      return () => {\n        container?.removeEventListener(\"transitionend\", finishTransition);\n      };\n    } else {\n      finishTransition();\n    }\n\n    return undefined;\n  }, [formatDate(visibleMonth)]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className={withBaseName()}\n      style={{\n        overflowX: \"hidden\",\n        position: \"relative\",\n      }}\n      ref={ref}\n    >\n      <div className={withBaseName(\"track\")} ref={containerRef}>\n        {months.map((date, index) => (\n          <div\n            key={formatDate(date)}\n            className={withBaseName(\"slide\")}\n            style={{\n              transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`,\n            }}\n            aria-hidden={index !== 1 ? \"true\" : undefined}\n          >\n            <CalendarMonth isVisible={index === 1} {...rest} date={date} />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n"],"names":["usePrevious","formatDate","today","getLocalTimeZone","makePrefixer","forwardRef","CalendarCarousel","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useState","useEffect","isSameMonth","jsx","CalendarMonth"],"mappings":"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"}

package/dist-cjs/packages/lab/src/calendar/internal/CalendarContext.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const CalendarContext = React.createContext(null);
+if (process.env.NODE_ENV !== "production") {
+  CalendarContext.displayName = "CalendarContext";
+}
+function useCalendarContext() {
+  const context = React.useContext(CalendarContext);
+  if (!context) {
+    throw new Error("Unexpected usage");
+  }
+  return context;
+}
+
+exports.CalendarContext = CalendarContext;
+exports.useCalendarContext = useCalendarContext;
+//# sourceMappingURL=CalendarContext.js.map

package/dist-cjs/packages/lab/src/calendar/internal/CalendarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { useCalendar } from \"../useCalendar\";\n\ntype CalendarState = {\n  state: ReturnType<typeof useCalendar>[\"state\"];\n  helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n};\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n  const context = useContext(CalendarContext);\n\n  if (!context) {\n    throw new Error(\"Unexpected usage\");\n  }\n\n  return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAQM,MAAA,eAAA,GAAkBA,oBAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}

package/dist-cjs/packages/lab/src/calendar/internal/CalendarDay.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n  --calendar-day-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-background: var(--salt-selectable-background);\n  --calendar-day-background-hover: var(--salt-selectable-background-hover);\n  --calendar-day-text-color-hover: var(--salt-text-primary-foreground);\n  --calendar-day-outOfRange-text-color: var(--salt-text-secondary-foreground-disabled);\n  --calendar-day-blocked-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n  --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n  --calendar-day-blocked-background: var(--calendar-day-background);\n  --calendar-day-unselectable-text-color: var(--salt-text-secondary-foreground-disabled);\n  --calendar-day-unselectable-background: var(--calendar-day-background);\n  --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n  --calendar-day-selected-background: var(--salt-selectable-background-selected);\n  --calendar-day-selected-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-selected-focused-outlineColor: var(--salt-color-white);\n\n  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedStart-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white);\n\n  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedEnd-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white);\n\n  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n  --calendar-day-selectedSpan-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredSpan-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredOffset-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-currentDay-borderColor: var(--salt-text-primary-foreground); /* TODO should not be foreground color */\n\n  /* Focus */\n  --calendar-day-focused-outline: var(--salt-focused-outline);\n  --calendar-day-size: var(--salt-size-base);\n  --calendar-day-fontSize: var(--salt-text-fontSize);\n}\n\n.saltCalendarDay {\n  width: var(--calendar-day-size);\n  height: var(--calendar-day-size);\n  color: var(--calendar-day-text-color);\n  background-color: var(--calendar-day-background);\n  font-size: var(--calendar-day-fontSize);\n  border: 0;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--calendar-day-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--calendar-day-outOfRange-text-color);\n}\n\n.saltCalendarDay:hover {\n  background: var(--calendar-day-background-hover);\n  color: var(--calendar-day-text-color-hover);\n}\n\n.saltCalendarDay-unselectableMedium,\n.saltCalendarDay-unselectableMedium:hover {\n  color: var(--calendar-day-blocked-text-color);\n  cursor: var(--calendar-day-blocked-cursor);\n  background: var(--calendar-day-blocked-background);\n}\n\n.saltCalendarDay-today {\n  border: 1px solid var(--calendar-day-currentDay-borderColor);\n}\n\n.saltCalendarDay-selectedSpan {\n  background: var(--calendar-day-selectedSpan-background);\n  color: var(--calendar-day-selectedSpan-text-color);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover {\n  background: var(--calendar-day-hoveredSpan-background);\n  color: var(--calendar-day-hoveredSpan-text-color);\n}\n\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--calendar-day-hoveredOffset-background);\n  color: var(--calendar-day-hoveredOffset-text-color);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover {\n  background: var(--calendar-day-selected-background);\n  color: var(--calendar-day-selected-text-color);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover {\n  background: var(--calendar-day-selectedStart-background);\n  color: var(--calendar-day-selectedStart-text-color);\n}\n\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--calendar-day-selectedEnd-background);\n  color: var(--calendar-day-selectedEnd-text-color);\n}\n\n.saltCalendarDay-selected:focus-visible {\n  outline-color: var(--calendar-day-selected-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedStart:focus-visible {\n  outline-color: var(--calendar-day-selectedStart-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedEnd:focus-visible {\n  outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);\n}\n\n.saltCalendarDay-unselectableLow,\n.saltCalendarDay-unselectableLow:hover {\n  color: var(--calendar-day-unselectable-text-color);\n  background: var(--calendar-day-unselectable-background);\n  cursor: var(--calendar-day-unselectable-cursor);\n  text-decoration: line-through;\n}\n\n.salt-density-high {\n  --calendar-day-blocked-icon-size: 14px;\n}\n\n.salt-density-medium {\n  --calendar-day-blocked-icon-size: 18px;\n}\n\n.salt-density-low {\n  --calendar-day-blocked-icon-size: 24px;\n}\n\n.salt-density-touch {\n  --calendar-day-blocked-icon-size: 28px;\n}\n\n.saltCalendarDay-blockedIcon {\n  fill: var(--calendar-day-blocked-icon-color);\n  position: absolute;\n  --icon-size: var(--calendar-day-blocked-icon-size);\n  pointer-events: none;\n  line-height: 1.29;\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=CalendarDay.css.js.map

package/dist-cjs/packages/lab/src/calendar/internal/CalendarDay.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDay.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist-cjs/packages/lab/src/calendar/internal/CalendarDay.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var cx = require('classnames');
+var React = require('react');
+var useCalendarDay = require('../useCalendarDay.js');
+require('./CalendarDay.css.js');
+var utils = require('./utils.js');
+var Tooltip = require('../../tooltip/Tooltip.js');
+require('../../tooltip/TooltipContext.js');
+var useTooltip = require('../../tooltip/useTooltip.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltCalendarDay");
+const CalendarDay = React.forwardRef(
+  function CalendarDay2(props, ref) {
+    const { className, day, renderDayContents, month, TooltipProps: TooltipProps2, ...rest } = props;
+    const dayRef = React.useRef(null);
+    const { status, dayProps, unselectableReason } = useCalendarDay.useCalendarDay(
+      {
+        date: day,
+        month
+      },
+      dayRef
+    );
+    const { outOfRange, today, unselectable, hidden } = status;
+    const { getTriggerProps, getTooltipProps } = useTooltip.useTooltip({
+      disabled: !unselectableReason,
+      placement: "top",
+      enterDelay: 300
+    });
+    const { ref: triggerRef, ...triggerProps } = getTriggerProps({
+      "aria-label": utils.formatDate(day),
+      ...dayProps,
+      ...rest,
+      className: cx__default["default"](
+        withBaseName(),
+        {
+          [withBaseName("hidden")]: hidden,
+          [withBaseName("outOfRange")]: outOfRange,
+          [withBaseName("today")]: today,
+          [withBaseName("unselectable")]: !!unselectable,
+          [withBaseName("unselectableLow")]: unselectable === "low",
+          [withBaseName("unselectableMedium")]: unselectable === "medium"
+        },
+        dayProps.className,
+        className
+      )
+    });
+    const handleTriggerRef = core.useForkRef(triggerRef, dayRef);
+    const handleRef = core.useForkRef(handleTriggerRef, ref);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+          ...getTooltipProps({
+            hideIcon: true,
+            status: "error",
+            title: unselectableReason,
+            ...TooltipProps2
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("button", {
+          ...triggerProps,
+          ref: handleRef,
+          children: [
+            unselectable === "medium" && /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
+              "aria-hidden": true,
+              "aria-label": void 0,
+              className: withBaseName("blockedIcon")
+            }),
+            renderDayContents ? renderDayContents(day, status) : utils.formatDate(day, { day: "numeric" })
+          ]
+        })
+      ]
+    });
+  }
+);
+
+exports.CalendarDay = CalendarDay;
+//# sourceMappingURL=CalendarDay.js.map

package/dist-cjs/packages/lab/src/calendar/internal/CalendarDay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\n\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../../tooltip\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n  extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  day: DateValue;\n  formatDate?: DateFormatter;\n  renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n  status?: DayStatus;\n  month: DateValue;\n  TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n  function CalendarDay(props, ref) {\n    const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n      props;\n\n    const dayRef = useRef<HTMLButtonElement>(null);\n    const { status, dayProps, unselectableReason } = useCalendarDay(\n      {\n        date: day,\n        month,\n      },\n      dayRef\n    );\n    const { outOfRange, today, unselectable, hidden } = status;\n\n    const { getTriggerProps, getTooltipProps } = useTooltip({\n      disabled: !unselectableReason,\n      placement: \"top\",\n      enterDelay: 300,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps<\"button\">({\n      \"aria-label\": formatDate(day),\n      ...dayProps,\n      ...rest,\n      className: cx(\n        withBaseName(),\n        {\n          [withBaseName(\"hidden\")]: hidden,\n          [withBaseName(\"outOfRange\")]: outOfRange,\n          [withBaseName(\"today\")]: today,\n          [withBaseName(\"unselectable\")]: !!unselectable,\n          [withBaseName(\"unselectableLow\")]: unselectable === \"low\",\n          [withBaseName(\"unselectableMedium\")]: unselectable === \"medium\",\n        },\n        dayProps.className,\n        className\n      ),\n    });\n\n    const handleTriggerRef = useForkRef(triggerRef, dayRef);\n    const handleRef = useForkRef(handleTriggerRef, ref);\n\n    return (\n      <>\n        <Tooltip\n          {...getTooltipProps({\n            hideIcon: true,\n            status: \"error\",\n            title: unselectableReason,\n            ...TooltipProps,\n          })}\n        />\n        <button {...triggerProps} ref={handleRef}>\n          {unselectable === \"medium\" && (\n            <CloseIcon\n              aria-hidden\n              aria-label={undefined}\n              className={withBaseName(\"blockedIcon\")}\n            />\n          )}\n\n          {renderDayContents\n            ? renderDayContents(day, status)\n            : formatDate(day, { day: \"numeric\" })}\n        </button>\n      </>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","CalendarDay","TooltipProps","useRef","useCalendarDay","useTooltip","formatDate","cx","useForkRef","jsxs","Fragment","jsx","Tooltip","CloseIcon"],"mappings":"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"}

package/dist-cjs/packages/lab/src/calendar/internal/CalendarMonth.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltCalendarMonth-dateGrid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=CalendarMonth.css.js.map

package/dist-cjs/packages/lab/src/calendar/internal/CalendarMonth.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarMonth.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist-cjs/packages/lab/src/calendar/internal/CalendarMonth.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('classnames');
+var core = require('@salt-ds/core');
+var CalendarDay = require('./CalendarDay.js');
+var utils = require('./utils.js');
+require('./CalendarMonth.css.js');
+var CalendarContext = require('./CalendarContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltCalendarMonth");
+const CalendarMonth = React.forwardRef(
+  function CalendarMonth2(props, ref) {
+    const {
+      className,
+      date,
+      hideOutOfRangeDates,
+      isVisible,
+      renderDayContents,
+      onMouseLeave,
+      TooltipProps,
+      ...rest
+    } = props;
+    const days = utils.generateVisibleDays(date);
+    const {
+      helpers: { setHoveredDate }
+    } = CalendarContext.useCalendarContext();
+    const handleMouseLeave = (event) => {
+      setHoveredDate(event, null);
+      onMouseLeave == null ? void 0 : onMouseLeave(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: cx__default["default"](withBaseName(), className),
+      ref,
+      onMouseLeave: handleMouseLeave,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        "data-testid": "CalendarDateGrid",
+        className: withBaseName("dateGrid"),
+        children: days.map((day) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(CalendarDay.CalendarDay, {
+            day: day.date,
+            renderDayContents,
+            month: date,
+            TooltipProps
+          }, utils.formatDate(day.date));
+        })
+      })
+    });
+  }
+);
+
+exports.CalendarMonth = CalendarMonth;
+//# sourceMappingURL=CalendarMonth.js.map

package/dist-cjs/packages/lab/src/calendar/internal/CalendarMonth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import {\n  forwardRef,\n  ComponentPropsWithRef,\n  MouseEvent,\n  SyntheticEvent,\n} from \"react\";\nimport cx from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { DateValue } from \"@internationalized/date\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport \"./CalendarMonth.css\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n  date: DateValue;\n  hideOutOfRangeDates?: boolean;\n  renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n  isVisible?: boolean;\n  TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n  function CalendarMonth(props, ref) {\n    const {\n      className,\n      date,\n      hideOutOfRangeDates,\n      isVisible,\n      renderDayContents,\n      onMouseLeave,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const days = generateVisibleDays(date);\n    const {\n      helpers: { setHoveredDate },\n    } = useCalendarContext();\n\n    const handleMouseLeave = (event: SyntheticEvent) => {\n      setHoveredDate(event, null);\n      onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        className={cx(withBaseName(), className)}\n        ref={ref}\n        onMouseLeave={handleMouseLeave}\n        {...rest}\n      >\n        <div\n          data-testid=\"CalendarDateGrid\"\n          className={withBaseName(\"dateGrid\")}\n        >\n          {days.map((day) => {\n            return (\n              <CalendarDay\n                key={formatDate(day.date)}\n                day={day.date}\n                renderDayContents={renderDayContents}\n                month={date}\n                TooltipProps={TooltipProps}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","CalendarMonth","generateVisibleDays","useCalendarContext","jsx","cx","CalendarDay","formatDate"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,IAAA,GAAOC,0BAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxBC,kCAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,sBAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACvC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,kBAAA;AAAA,QACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,UAAA,uBACGA,cAAA,CAAAE,uBAAA,EAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP,YAAA;AAAA,WAJK,EAAAC,gBAAA,CAAW,GAAI,CAAA,IAAI,CAK1B,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/calendar/internal/CalendarNavigation.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".salt-density-medium,\n.salt-density-touch,\n.salt-density-low {\n  --calendar-navigation-gap: calc(var(--salt-size-unit) * 0.5);\n}\n\n.salt-density-high {\n  --calendar-navigation-gap: 0px;\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n  --calendar-navigation-gap: calc(var(--salt-size-unit) * 2);\n}\n\n.saltCalendarNavigation {\n  display: grid;\n  grid-template-columns: min-content auto auto min-content;\n  grid-gap: var(--calendar-navigation-gap);\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n  grid-template-columns: min-content auto min-content;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=CalendarNavigation.css.js.map

package/dist-cjs/packages/lab/src/calendar/internal/CalendarNavigation.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarNavigation.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}