@axis-backstage/plugin-vacation-calendar 0.10.1 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @axis-backstage/plugin-vacation-calendar
 
+## 0.11.1
+
+### Patch Changes
+
+- 85be688: Fix broken timeline layout in consuming apps. The `react-calendar-timeline`
+  package declares `sideEffects: false` with no exception for CSS, so its base
+  stylesheet was tree-shaken out of the bundle when this plugin was consumed by
+  a host app (it only appeared to work in this plugin's own dev server, which
+  does not tree-shake). The base timeline styles are now inlined into this
+  plugin's own CSS file, and the `sideEffects` field is updated to also cover
+  the compiled `*.css.esm.js` output so it survives bundling.
+
+## 0.11.0
+
+### Minor Changes
+
+- 78d19b9: Migrate the vacation calendar to Backstage UI, TanStack Query v5, Day.js, and
+  react-calendar-timeline v0.30. The calendar now uses a Backstage UI date picker.
+
+  The migration removes a number of legacy Material UI, date-picker, and timeline
+  dependencies.
+
+  **Breaking:** Consumers must install and configure `@backstage/ui`.
+
+### Patch Changes
+
+- 2569fb1: Updated to Backstage 1.52.1
+
 ## 0.10.1
 
 ### Patch Changes

package/dist/components/CalendarCard/CalendarCard.css.esm.js

@@ -0,0 +1,5 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Base react-calendar-timeline styles, inlined here instead of imported from\n * 'react-calendar-timeline/style.css'. That package declares \"sideEffects\": false\n * with no exception for CSS files, so bundlers can tree-shake the import away\n * entirely once this plugin is built and consumed by a host app.\n */\n.react-calendar-timeline * {\n  box-sizing: border-box;\n}\n\n.react-calendar-timeline .rct-outer {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.react-calendar-timeline .rct-scroll {\n  display: inline-block;\n  white-space: normal;\n  vertical-align: top;\n  overflow: hidden;\n  touch-action: none;\n}\n\n.react-calendar-timeline .rct-item:hover {\n  z-index: 88;\n}\n\n.react-calendar-timeline .rct-item .rct-item-content {\n  position: sticky;\n  left: 0;\n  overflow: hidden;\n  display: inline-block;\n  border-radius: 2px;\n  padding: 0 6px;\n  height: 100%;\n}\n\n.react-calendar-timeline .rct-sidebar {\n  overflow: hidden;\n  white-space: normal;\n  display: inline-block;\n  vertical-align: top;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.react-calendar-timeline .rct-sidebar.rct-sidebar-right {\n  border-right: 0;\n  border-left: 1px solid var(--bui-border-1, #bbb);\n}\n\n.react-calendar-timeline .rct-sidebar .rct-sidebar-row {\n  padding: 0 4px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-even {\n  background: transparent;\n}\n\n.react-calendar-timeline .rct-vertical-lines .rct-vl {\n  position: absolute;\n  z-index: 30;\n}\n\n.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-vl-first {\n  border-left-width: 2px;\n}\n\n.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-6,\n.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-0 {\n  background: #faf6e180;\n}\n\n.react-calendar-timeline .rct-horizontal-lines {\n  user-select: none;\n}\n\n.react-calendar-timeline .rct-horizontal-lines .rct-hl-even,\n.react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {\n  box-sizing: border-box;\n  z-index: 40;\n}\n\n.react-calendar-timeline .rct-horizontal-lines .rct-hl-even {\n  background: transparent;\n}\n\n.react-calendar-timeline .rct-cursor-line {\n  position: absolute;\n  width: 2px;\n  background: #2196f3;\n  z-index: 51;\n}\n\n.react-calendar-timeline .rct-dateHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.react-calendar-timeline .rct-dateHeader-primary {\n  background-color: initial;\n}\n\n.react-calendar-timeline .rct-header-root {\n  background: var(--bui-bg-neutral-2, #f5f5f5);\n  border-bottom: 1px solid var(--bui-border-1, #bbb);\n}\n\n.react-calendar-timeline .rct-calendar-header {\n  border: 1px solid var(--bui-border-1, #bbb);\n  border-bottom: 0;\n}\n\n.react-calendar-timeline .rct-dateHeader {\n  background-color: var(--bui-bg-neutral-1, #fafafa);\n  border-left: 1px solid var(--bui-border-1, #bbb);\n  border-bottom: 1px solid var(--bui-border-1, #bbb);\n  color: var(--bui-fg-primary, #333);\n}\n\n.react-calendar-timeline .rct-dateHeader-primary {\n  background-color: var(--bui-bg-neutral-2, #e0e0e0);\n  color: var(--bui-fg-primary, #333);\n}\n\n.react-calendar-timeline .rct-sidebar {\n  border-right: 1px solid var(--bui-border-1, #bbb);\n}\n\n.react-calendar-timeline .timeline-sidebar-header {\n  border-bottom: 1px solid var(--bui-border-1, #bbb);\n}\n\n.react-calendar-timeline .rct-sidebar .rct-sidebar-row {\n  border-bottom: 1px solid var(--bui-border-1, #bbb);\n}\n\n.react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-odd {\n  background: var(--bui-bg-neutral-1, rgba(0, 0, 0, 0.05));\n}\n\n.react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {\n  background: var(--bui-bg-neutral-1, rgba(0, 0, 0, 0.05));\n}\n\n.react-calendar-timeline .rct-horizontal-lines .rct-hl-even,\n.react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {\n  border-bottom: 1px solid var(--bui-border-1, #bbb);\n}\n\n.react-calendar-timeline .rct-vertical-lines .rct-vl {\n  border-left: 1px solid var(--bui-border-1, #bbb);\n}\n\n.custom-group {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n";
+styleInject(css_248z);
+//# sourceMappingURL=CalendarCard.css.esm.js.map

package/dist/components/CalendarCard/CalendarCard.css.esm.js.map

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

package/dist/components/CalendarCard/CalendarCard.esm.js

@@ -1,55 +1,32 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react-calendar-timeline/lib/Timeline.css';
+import './CalendarCard.css.esm.js';
 import { useState } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import Timeline, { TimelineHeaders, SidebarHeader, DateHeader } from 'react-calendar-timeline';
-import { DateTime } from 'luxon';
+import dayjs from 'dayjs';
 import { useApi } from '@backstage/core-plugin-api';
 import { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { ErrorPanel, Content, ContentHeader, SupportButton, Progress, Link, Avatar } from '@backstage/core-components';
+import { Box, Flex, Button } from '@backstage/ui';
 import { DateSelector } from '../DateSelector/DateSelector.esm.js';
 import { getGroups, getScheduleItems } from './lib.esm.js';
 import { fetchUserEntities, fetchGroupEntities } from './fetch.esm.js';
 import { useAvailability } from '../../hooks/useAvailibility.esm.js';
 import { useSignIn } from '../../hooks/useSignIn.esm.js';
 import { SignInContent } from '../SignInContent/SignInContent.esm.js';
-import MuiLink from '@mui/material/Link';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
 
 const DEFAULT_NUM_DAYS = 60;
-const IntervalDateHeader = (props) => {
-  return /* @__PURE__ */ jsx(
-    MuiLink,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        height: "100%",
-        borderBottom: "1px solid #bbb",
-        cursor: "pointer",
-        fontSize: "14px",
-        borderLeft: "2px solid #bbb",
-        color: (theme) => theme.palette.text.primary,
-        position: "absolute",
-        width: props?.intervalContext.interval.labelWidth,
-        left: props?.intervalContext.interval.left
-      },
-      onClick: props?.getIntervalProps().onClick,
-      children: props?.intervalContext.intervalText
-    }
-  );
-};
+const DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1e3;
+const DAY_HEADER_MAX_ZOOM = DEFAULT_NUM_DAYS * DAY_IN_MILLISECONDS;
 const CalendarCard = () => {
   const { entity } = useEntity();
   const catalogApi = useApi(catalogApiRef);
-  const [startDate, setStartDate] = useState(DateTime.now());
+  const [startDate, setStartDate] = useState(dayjs());
   const [endDate, setEndDate] = useState(
-    DateTime.now().endOf("day").plus({ days: DEFAULT_NUM_DAYS })
+    dayjs().endOf("day").add(DEFAULT_NUM_DAYS, "day")
   );
+  const [headerUnit, setHeaderUnit] = useState("day");
   const { isSignedIn, isInitialized, signIn } = useSignIn();
   useAsync(async () => signIn(true), [signIn]);
   const isUserEntity = entity.kind.toLowerCase() === "user" && entity.metadata.name;
@@ -57,7 +34,7 @@ const CalendarCard = () => {
     return isUserEntity ? fetchUserEntities(catalogApi, entity) : fetchGroupEntities(catalogApi, entity);
   }, [catalogApi, entity]);
   const {
-    availablity,
+    availability,
     error,
     isLoading: isAvailabilityLoading,
     isFetching: isAvailabilityFetching,
@@ -65,8 +42,8 @@ const CalendarCard = () => {
     fetchNextPage
   } = useAvailability(users, startDate, endDate, isSignedIn);
   const showLoader = isAvailabilityLoading || isAvailabilityFetching || !isInitialized;
-  const [groups, groupIndexMap] = getGroups(availablity, isUserEntity, users);
-  const scheduleItems = getScheduleItems(availablity, groupIndexMap);
+  const [groups, groupIndexMap] = getGroups(availability, isUserEntity, users);
+  const scheduleItems = getScheduleItems(availability, groupIndexMap);
   if (users?.length === 0) {
     return /* @__PURE__ */ jsx(
       ErrorPanel,
@@ -99,20 +76,21 @@ const CalendarCard = () => {
       ] })
     ] }) }) }),
     /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 3, alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "3", align: "end", children: [
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
           DateSelector,
           {
             onDateChange: (d) => {
-              if (d instanceof DateTime) {
-                const { days } = endDate.diff(d, "days").toObject();
+              if (d) {
+                const days = endDate.diff(d, "day");
                 if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {
-                  setEndDate(d.endOf("day").plus({ days: DEFAULT_NUM_DAYS }));
+                  setEndDate(d.endOf("day").add(DEFAULT_NUM_DAYS, "day"));
                 }
+                setHeaderUnit("day");
                 setStartDate(d);
               }
             },
-            initalDate: startDate,
+            initialDate: startDate,
             label: "Start Date"
           }
         ) }),
@@ -120,61 +98,65 @@ const CalendarCard = () => {
           DateSelector,
           {
             onDateChange: (d) => {
-              if (d instanceof DateTime) {
-                const { days } = startDate.diff(d, "days").toObject();
+              if (d) {
+                const days = startDate.diff(d, "day");
                 if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {
                   setStartDate(
-                    d.endOf("day").minus({ days: DEFAULT_NUM_DAYS })
+                    d.endOf("day").subtract(DEFAULT_NUM_DAYS, "day")
                   );
                 }
+                setHeaderUnit("day");
                 setEndDate(d);
               }
             },
-            initalDate: endDate,
+            initialDate: endDate,
             label: "End Date"
           }
         ) }),
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           Button,
           {
             onClick: () => {
               fetchNextPage();
             },
-            disabled: showLoader || !hasNextPage,
-            variant: "contained",
-            color: "primary",
+            isDisabled: showLoader || !hasNextPage,
+            variant: "secondary",
             children: "Show more Users"
           }
-        ) })
+        )
       ] }),
-      showLoader && /* @__PURE__ */ jsx(Box, { py: 2, children: /* @__PURE__ */ jsx(Progress, { variant: "query" }) }),
-      !isSignedIn && isInitialized && /* @__PURE__ */ jsx(Box, { p: 1, pb: 0, minHeight: 200, maxHeight: 602, overflow: "auto", children: /* @__PURE__ */ jsx(SignInContent, { handleAuthClick: () => signIn(false) }) }),
-      !isAvailabilityLoading && isSignedIn && /* @__PURE__ */ jsx(Box, { mt: 3, pb: 0, minHeight: 200, overflow: "auto", children: /* @__PURE__ */ jsx(
-        Timeline,
+      showLoader && /* @__PURE__ */ jsx(Box, { py: "2", children: /* @__PURE__ */ jsx(Progress, { variant: "query" }) }),
+      !isSignedIn && isInitialized && /* @__PURE__ */ jsx(
+        Box,
+        {
+          p: "1",
+          pb: "0",
+          minHeight: "200px",
+          maxHeight: "602px",
+          style: { overflow: "auto" },
+          children: /* @__PURE__ */ jsx(SignInContent, { handleAuthClick: () => signIn(false) })
+        }
+      ),
+      !isAvailabilityLoading && isSignedIn && /* @__PURE__ */ jsx(
+        "div",
         {
-          groups,
-          sidebarWidth: 250,
-          groupRenderer: ({ group }) => {
-            return /* @__PURE__ */ jsx(
-              Link,
-              {
-                to: `/catalog/default/user/${group.entity?.metadata.name}`,
-                children: /* @__PURE__ */ jsxs(
-                  "div",
+          style: {
+            marginTop: "var(--bui-space-3)",
+            minHeight: "200px",
+            overflow: "auto"
+          },
+          children: /* @__PURE__ */ jsx(
+            Timeline,
+            {
+              groups,
+              sidebarWidth: 250,
+              groupRenderer: ({ group }) => {
+                return /* @__PURE__ */ jsx(
+                  Link,
                   {
-                    className: "custom-group",
-                    style: {
-                      background: group.highlight ? "linear-gradient(90deg, #FFCC33A0, transparent 100%)" : "",
-                      marginLeft: "-4px",
-                      paddingLeft: "4px",
-                      display: "flex",
-                      whiteSpace: "nowrap",
-                      flexWrap: "nowrap",
-                      flexDirection: "row",
-                      gap: "5px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    to: `/catalog/default/user/${group.entity?.metadata.name}`,
+                    children: /* @__PURE__ */ jsxs("div", { className: "custom-group", children: [
+                      /* @__PURE__ */ jsx(
                         Avatar,
                         {
                           displayName: group.entity?.metadata.displayName,
@@ -184,44 +166,39 @@ const CalendarCard = () => {
                             height: 30
                           }
                         }
-                      ) }),
-                      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { className: "title", children: group.title }) })
-                    ]
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "title", children: group.title })
+                    ] })
                   }
-                )
-              }
-            );
-          },
-          items: scheduleItems,
-          itemTouchSendsClick: false,
-          defaultTimeStart: startDate.toJSDate(),
-          defaultTimeEnd: endDate.toJSDate(),
-          children: /* @__PURE__ */ jsxs(
-            TimelineHeaders,
-            {
-              style: {
-                backgroundColor: "transparent",
-                color: "black",
-                position: "sticky",
-                top: "-6px"
+                );
               },
-              children: [
+              items: scheduleItems,
+              itemTouchSendsClick: false,
+              defaultTimeStart: startDate.valueOf(),
+              defaultTimeEnd: endDate.valueOf(),
+              onZoom: ({ visibleTimeStart, visibleTimeEnd }) => {
+                setHeaderUnit(
+                  visibleTimeEnd - visibleTimeStart <= DAY_HEADER_MAX_ZOOM ? "day" : "month"
+                );
+              },
+              children: /* @__PURE__ */ jsxs(TimelineHeaders, { children: [
                 /* @__PURE__ */ jsx(SidebarHeader, { children: ({ getRootProps }) => {
-                  return /* @__PURE__ */ jsx("div", { ...getRootProps() });
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...getRootProps(),
+                      className: "timeline-sidebar-header"
+                    }
+                  );
                 } }),
-                /* @__PURE__ */ jsx(
-                  DateHeader,
-                  {
-                    unit: "primaryHeader",
-                    intervalRenderer: IntervalDateHeader
-                  }
-                ),
-                /* @__PURE__ */ jsx(DateHeader, { intervalRenderer: IntervalDateHeader })
-              ]
-            }
+                /* @__PURE__ */ jsx(DateHeader, { unit: headerUnit === "day" ? "month" : "year" }),
+                /* @__PURE__ */ jsx(DateHeader, { unit: headerUnit })
+              ] })
+            },
+            `${startDate.valueOf()}-${endDate.valueOf()}`
           )
         }
-      ) })
+      )
     ] })
   ] });
 };

package/dist/components/CalendarCard/CalendarCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCard.esm.js","sources":["../../../src/components/CalendarCard/CalendarCard.tsx"],"sourcesContent":["import 'react-calendar-timeline/lib/Timeline.css';\nimport { ReactNode, useState } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport Timeline, {\n  TimelineHeaders,\n  SidebarHeader,\n  DateHeader,\n  IntervalRenderer,\n} from 'react-calendar-timeline';\nimport { DateTime } from 'luxon';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';\nimport {\n  Content,\n  ContentHeader,\n  SupportButton,\n  Link,\n  ErrorPanel,\n  Progress,\n  Avatar,\n} from '@backstage/core-components';\nimport { DateSelector } from '../DateSelector';\nimport { getGroups, getScheduleItems } from './lib';\nimport { fetchGroupEntities, fetchUserEntities } from './fetch';\nimport { useAvailability } from '../../hooks/useAvailibility';\nimport { useSignIn } from '../../hooks';\nimport { SignInContent } from '../SignInContent';\nimport MuiLink from '@mui/material/Link';\nimport Button from '@mui/material/Button';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Stack from '@mui/material/Stack';\n\nimport { Theme } from '@mui/material/styles';\n\nconst DEFAULT_NUM_DAYS = 60;\n\nconst IntervalDateHeader = (props?: IntervalRenderer<object>): ReactNode => {\n  return (\n    <MuiLink\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100%',\n        borderBottom: '1px solid #bbb',\n        cursor: 'pointer',\n        fontSize: '14px',\n        borderLeft: '2px solid #bbb',\n        color: (theme: Theme) => theme.palette.text.primary,\n        position: 'absolute',\n        width: props?.intervalContext.interval.labelWidth,\n        left: props?.intervalContext.interval.left,\n      }}\n      onClick={props?.getIntervalProps().onClick}\n    >\n      {props?.intervalContext.intervalText}\n    </MuiLink>\n  );\n};\n\nexport const CalendarCard = () => {\n  const { entity } = useEntity();\n  const catalogApi = useApi(catalogApiRef);\n\n  const [startDate, setStartDate] = useState(DateTime.now());\n  const [endDate, setEndDate] = useState(\n    DateTime.now().endOf('day').plus({ days: DEFAULT_NUM_DAYS }),\n  );\n\n  const { isSignedIn, isInitialized, signIn } = useSignIn();\n\n  useAsync(async () => signIn(true), [signIn]);\n\n  const isUserEntity =\n    entity.kind.toLowerCase() === 'user' && entity.metadata.name;\n\n  const { value: users } = useAsync(async () => {\n    return isUserEntity\n      ? fetchUserEntities(catalogApi, entity)\n      : fetchGroupEntities(catalogApi, entity);\n  }, [catalogApi, entity]);\n\n  const {\n    availablity,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  } = useAvailability(users, startDate, endDate, isSignedIn);\n\n  const showLoader =\n    isAvailabilityLoading || isAvailabilityFetching || !isInitialized;\n\n  const [groups, groupIndexMap] = getGroups(availablity, isUserEntity, users);\n  const scheduleItems = getScheduleItems(availablity, groupIndexMap);\n\n  if (users?.length === 0) {\n    return (\n      <ErrorPanel\n        title=\"No users found.\"\n        defaultExpanded\n        error={Error('No users found for current entity.')}\n      />\n    );\n  }\n  if (error instanceof Error) {\n    return (\n      <ErrorPanel\n        title=\"Microsoft Graph Error.\"\n        defaultExpanded\n        error={error as any}\n      />\n    );\n  }\n\n  return (\n    <Content>\n      <ContentHeader title=\"Out of Office Calendar\">\n        <SupportButton title=\"Backstage Out Of Office Calendar\">\n          <Box>\n            <Typography variant=\"h6\">How it works</Typography>\n            <Typography>\n              The \"Out of Office\"-calendar shows Away events. If you want your\n              calendar events to be seen in the \"Out of Office\"-calendar, be\n              sure to mark your presence as \"Away\" in outlook.\n            </Typography>\n            <Typography variant=\"h6\">Limitations</Typography>\n            <Typography>\n              Due to limitations in the Microsoft Graph API the maximum range of\n              the dates is {DEFAULT_NUM_DAYS} days.\n            </Typography>\n          </Box>\n        </SupportButton>\n      </ContentHeader>\n\n      <Box>\n        <Stack direction=\"row\" gap={3} alignItems=\"center\">\n          <Box>\n            <DateSelector\n              onDateChange={d => {\n                if (d instanceof DateTime) {\n                  const { days } = endDate.diff(d, 'days').toObject();\n                  if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {\n                    setEndDate(d.endOf('day').plus({ days: DEFAULT_NUM_DAYS }));\n                  }\n                  setStartDate(d);\n                }\n              }}\n              initalDate={startDate}\n              label=\"Start Date\"\n            />\n          </Box>\n          <Box>\n            <DateSelector\n              onDateChange={d => {\n                if (d instanceof DateTime) {\n                  const { days } = startDate.diff(d, 'days').toObject();\n                  if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {\n                    setStartDate(\n                      d.endOf('day').minus({ days: DEFAULT_NUM_DAYS }),\n                    );\n                  }\n                  setEndDate(d as DateTime);\n                }\n              }}\n              initalDate={endDate}\n              label=\"End Date\"\n            />\n          </Box>\n          <Box>\n            <Button\n              onClick={() => {\n                fetchNextPage();\n              }}\n              disabled={showLoader || !hasNextPage}\n              variant=\"contained\"\n              color=\"primary\"\n            >\n              Show more Users\n            </Button>\n          </Box>\n        </Stack>\n\n        {showLoader && (\n          <Box py={2}>\n            <Progress variant=\"query\" />\n          </Box>\n        )}\n        {!isSignedIn && isInitialized && (\n          <Box p={1} pb={0} minHeight={200} maxHeight={602} overflow=\"auto\">\n            <SignInContent handleAuthClick={() => signIn(false)} />\n          </Box>\n        )}\n        {!isAvailabilityLoading && isSignedIn && (\n          <Box mt={3} pb={0} minHeight={200} overflow=\"auto\">\n            <Timeline\n              groups={groups}\n              sidebarWidth={250}\n              groupRenderer={({ group }) => {\n                return (\n                  <Link\n                    to={`/catalog/default/user/${group.entity?.metadata.name}`}\n                  >\n                    <div\n                      className=\"custom-group\"\n                      style={{\n                        background: group.highlight\n                          ? 'linear-gradient(90deg, #FFCC33A0, transparent 100%)'\n                          : '',\n                        marginLeft: '-4px',\n                        paddingLeft: '4px',\n                        display: 'flex',\n                        whiteSpace: 'nowrap',\n                        flexWrap: 'nowrap',\n                        flexDirection: 'row',\n                        gap: '5px',\n                      }}\n                    >\n                      <div>\n                        <Avatar\n                          displayName={\n                            group.entity?.metadata.displayName as string\n                          }\n                          picture={group.entity?.spec.profile?.picture}\n                          customStyles={{\n                            width: 30,\n                            height: 30,\n                          }}\n                        />\n                      </div>\n                      <div>\n                        <span className=\"title\">{group.title}</span>\n                      </div>\n                    </div>\n                  </Link>\n                );\n              }}\n              items={scheduleItems as any}\n              itemTouchSendsClick={false}\n              defaultTimeStart={startDate.toJSDate()}\n              defaultTimeEnd={endDate.toJSDate()}\n            >\n              <TimelineHeaders\n                style={{\n                  backgroundColor: 'transparent',\n                  color: 'black',\n                  position: 'sticky',\n                  top: '-6px',\n                }}\n              >\n                <SidebarHeader>\n                  {({ getRootProps }) => {\n                    return <div {...getRootProps()} />;\n                  }}\n                </SidebarHeader>\n                <DateHeader\n                  unit=\"primaryHeader\"\n                  intervalRenderer={IntervalDateHeader}\n                />\n                <DateHeader intervalRenderer={IntervalDateHeader} />\n              </TimelineHeaders>\n            </Timeline>\n          </Box>\n        )}\n      </Box>\n    </Content>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarCard.esm.js","sources":["../../../src/components/CalendarCard/CalendarCard.tsx"],"sourcesContent":["import './CalendarCard.css';\nimport { useState } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport Timeline, {\n  TimelineHeaders,\n  SidebarHeader,\n  DateHeader,\n} from 'react-calendar-timeline';\nimport dayjs from 'dayjs';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';\nimport {\n  Content,\n  ContentHeader,\n  SupportButton,\n  Link,\n  ErrorPanel,\n  Progress,\n  Avatar,\n} from '@backstage/core-components';\nimport { Box, Button, Flex } from '@backstage/ui';\nimport { DateSelector } from '../DateSelector';\nimport { getGroups, getScheduleItems } from './lib';\nimport { fetchGroupEntities, fetchUserEntities } from './fetch';\nimport { useAvailability } from '../../hooks/useAvailibility';\nimport { useSignIn } from '../../hooks';\nimport { SignInContent } from '../SignInContent';\nimport Typography from '@mui/material/Typography';\n\nconst DEFAULT_NUM_DAYS = 60;\nconst DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;\nconst DAY_HEADER_MAX_ZOOM = DEFAULT_NUM_DAYS * DAY_IN_MILLISECONDS;\n\nexport const CalendarCard = () => {\n  const { entity } = useEntity();\n  const catalogApi = useApi(catalogApiRef);\n\n  const [startDate, setStartDate] = useState(dayjs());\n  const [endDate, setEndDate] = useState(\n    dayjs().endOf('day').add(DEFAULT_NUM_DAYS, 'day'),\n  );\n  const [headerUnit, setHeaderUnit] = useState<'day' | 'month'>('day');\n\n  const { isSignedIn, isInitialized, signIn } = useSignIn();\n\n  useAsync(async () => signIn(true), [signIn]);\n\n  const isUserEntity =\n    entity.kind.toLowerCase() === 'user' && entity.metadata.name;\n\n  const { value: users } = useAsync(async () => {\n    return isUserEntity\n      ? fetchUserEntities(catalogApi, entity)\n      : fetchGroupEntities(catalogApi, entity);\n  }, [catalogApi, entity]);\n\n  const {\n    availability,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  } = useAvailability(users, startDate, endDate, isSignedIn);\n\n  const showLoader =\n    isAvailabilityLoading || isAvailabilityFetching || !isInitialized;\n\n  const [groups, groupIndexMap] = getGroups(availability, isUserEntity, users);\n  const scheduleItems = getScheduleItems(availability, groupIndexMap);\n\n  if (users?.length === 0) {\n    return (\n      <ErrorPanel\n        title=\"No users found.\"\n        defaultExpanded\n        error={Error('No users found for current entity.')}\n      />\n    );\n  }\n  if (error instanceof Error) {\n    return (\n      <ErrorPanel\n        title=\"Microsoft Graph Error.\"\n        defaultExpanded\n        error={error as any}\n      />\n    );\n  }\n\n  return (\n    <Content>\n      <ContentHeader title=\"Out of Office Calendar\">\n        <SupportButton title=\"Backstage Out Of Office Calendar\">\n          <Box>\n            <Typography variant=\"h6\">How it works</Typography>\n            <Typography>\n              The \"Out of Office\"-calendar shows Away events. If you want your\n              calendar events to be seen in the \"Out of Office\"-calendar, be\n              sure to mark your presence as \"Away\" in outlook.\n            </Typography>\n            <Typography variant=\"h6\">Limitations</Typography>\n            <Typography>\n              Due to limitations in the Microsoft Graph API the maximum range of\n              the dates is {DEFAULT_NUM_DAYS} days.\n            </Typography>\n          </Box>\n        </SupportButton>\n      </ContentHeader>\n\n      <Box>\n        <Flex direction=\"row\" gap=\"3\" align=\"end\">\n          <Box>\n            <DateSelector\n              onDateChange={d => {\n                if (d) {\n                  const days = endDate.diff(d, 'day');\n                  if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {\n                    setEndDate(d.endOf('day').add(DEFAULT_NUM_DAYS, 'day'));\n                  }\n                  setHeaderUnit('day');\n                  setStartDate(d);\n                }\n              }}\n              initialDate={startDate}\n              label=\"Start Date\"\n            />\n          </Box>\n          <Box>\n            <DateSelector\n              onDateChange={d => {\n                if (d) {\n                  const days = startDate.diff(d, 'day');\n                  if (days && Math.abs(days) > DEFAULT_NUM_DAYS) {\n                    setStartDate(\n                      d.endOf('day').subtract(DEFAULT_NUM_DAYS, 'day'),\n                    );\n                  }\n                  setHeaderUnit('day');\n                  setEndDate(d);\n                }\n              }}\n              initialDate={endDate}\n              label=\"End Date\"\n            />\n          </Box>\n          <Button\n            onClick={() => {\n              fetchNextPage();\n            }}\n            isDisabled={showLoader || !hasNextPage}\n            variant=\"secondary\"\n          >\n            Show more Users\n          </Button>\n        </Flex>\n        {showLoader && (\n          <Box py=\"2\">\n            <Progress variant=\"query\" />\n          </Box>\n        )}\n        {!isSignedIn && isInitialized && (\n          <Box\n            p=\"1\"\n            pb=\"0\"\n            minHeight=\"200px\"\n            maxHeight=\"602px\"\n            style={{ overflow: 'auto' }}\n          >\n            <SignInContent handleAuthClick={() => signIn(false)} />\n          </Box>\n        )}\n        {!isAvailabilityLoading && isSignedIn && (\n          <div\n            style={{\n              marginTop: 'var(--bui-space-3)',\n              minHeight: '200px',\n              overflow: 'auto',\n            }}\n          >\n            <Timeline\n              key={`${startDate.valueOf()}-${endDate.valueOf()}`}\n              groups={groups}\n              sidebarWidth={250}\n              groupRenderer={({ group }) => {\n                return (\n                  <Link\n                    to={`/catalog/default/user/${group.entity?.metadata.name}`}\n                  >\n                    <div className=\"custom-group\">\n                      <Avatar\n                        displayName={\n                          group.entity?.metadata.displayName as string\n                        }\n                        picture={group.entity?.spec.profile?.picture}\n                        customStyles={{\n                          width: 30,\n                          height: 30,\n                        }}\n                      />\n                      <span className=\"title\">{group.title}</span>\n                    </div>\n                  </Link>\n                );\n              }}\n              items={scheduleItems as any}\n              itemTouchSendsClick={false}\n              defaultTimeStart={startDate.valueOf()}\n              defaultTimeEnd={endDate.valueOf()}\n              onZoom={({ visibleTimeStart, visibleTimeEnd }) => {\n                setHeaderUnit(\n                  visibleTimeEnd - visibleTimeStart <= DAY_HEADER_MAX_ZOOM\n                    ? 'day'\n                    : 'month',\n                );\n              }}\n            >\n              <TimelineHeaders>\n                <SidebarHeader>\n                  {({ getRootProps }) => {\n                    return (\n                      <div\n                        {...getRootProps()}\n                        className=\"timeline-sidebar-header\"\n                      />\n                    );\n                  }}\n                </SidebarHeader>\n                <DateHeader unit={headerUnit === 'day' ? 'month' : 'year'} />\n                <DateHeader unit={headerUnit} />\n              </TimelineHeaders>\n            </Timeline>\n          </div>\n        )}\n      </Box>\n    </Content>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CalendarCard/lib.esm.js

@@ -1,40 +1,38 @@
-import { head } from 'lodash';
-import { DateTime } from 'luxon';
+import dayjs from 'dayjs';
 
 const isTimeLineItem = (item) => {
   return item !== void 0;
 };
 const getFullName = (users, userId) => {
-  const name = head(userId.split("@"));
+  const [name] = userId.split("@");
   const user = users.find((u) => u.metadata.name === name);
   if (user) return user.spec.profile?.displayName;
   return userId;
 };
 const getUser = (users, userId) => {
-  const name = head(userId.split("@"));
-  const user = users.find((u) => u.metadata.name === name);
-  return user;
+  const [name] = userId.split("@");
+  return users.find((u) => u.metadata.name === name);
 };
-const getScheduleItems = (availablity, groupIndexMap) => {
-  return availablity ? availablity?.pages.flatMap((p) => p).flatMap(
+const getScheduleItems = (availability, groupIndexMap) => {
+  return availability ? availability.pages.flatMap((p) => p).flatMap(
     (a, i) => (
       // @ts-ignore
       a.scheduleItems?.filter((scheduleItem) => scheduleItem.status === "oof").map((s) => ({
         id: Date.now().toString(36) + Math.random().toString(36).slice(2),
         group: groupIndexMap?.get(i) ?? i,
-        start_time: DateTime.fromISO(s.start?.dateTime),
-        end_time: DateTime.fromISO(s.end?.dateTime),
+        start_time: dayjs(s.start?.dateTime),
+        end_time: dayjs(s.end?.dateTime),
         canMove: false,
         canResize: false
       }))
     )
   ).filter(isTimeLineItem) : [];
 };
-const getGroups = (availablity, isUserEntity, users) => {
-  if (!availablity) {
+const getGroups = (availability, isUserEntity, users) => {
+  if (!availability) {
     return [[], /* @__PURE__ */ new Map()];
   }
-  const flattenedSchedules = availablity.pages.flatMap((p) => p).map((a, originalIndex) => ({
+  const flattenedSchedules = availability.pages.flatMap((p) => p).map((a, originalIndex) => ({
     originalIndex,
     schedule: a,
     title: getFullName(users || [], a.scheduleId || "")
@@ -48,7 +46,7 @@ const getGroups = (availablity, isUserEntity, users) => {
     sortedSchedules.map((item, newIndex) => [item.originalIndex, newIndex])
   );
   const groups = sortedSchedules.map((item, newIndex) => {
-    const isHighlighted = isUserEntity && item.schedule.scheduleId && isUserEntity === head(item.schedule.scheduleId.split("@"));
+    const isHighlighted = isUserEntity && item.schedule.scheduleId && isUserEntity === item.schedule.scheduleId?.split("@")[0];
     return {
       id: newIndex,
       highlight: !!isHighlighted,

package/dist/components/CalendarCard/lib.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.esm.js","sources":["../../../src/components/CalendarCard/lib.ts"],"sourcesContent":["import { TimelineItemBase } from 'react-calendar-timeline';\nimport { UserEntity, UserEntityV1alpha1 } from '@backstage/catalog-model';\nimport { ScheduleInformation } from '@microsoft/microsoft-graph-types';\nimport { InfiniteData } from '@tanstack/react-query';\nimport { head } from 'lodash';\nimport { DateTime } from 'luxon';\n\nconst isTimeLineItem = (\n  item: TimelineItemBase<any> | undefined,\n): item is TimelineItemBase<any> => {\n  return item !== undefined;\n};\n\nconst getFullName = (users: UserEntity[], userId: string) => {\n  const name = head(userId.split('@'));\n  const user = users.find(u => u.metadata.name === name);\n\n  if (user) return user.spec.profile?.displayName;\n  return userId;\n};\n\nconst getUser = (users: UserEntity[], userId: string) => {\n  const name = head(userId.split('@'));\n  const user = users.find(u => u.metadata.name === name);\n\n  return user;\n};\n\nexport const getScheduleItems = (\n  availablity: InfiniteData<ScheduleInformation[]> | undefined,\n  groupIndexMap?: Map<number, number>,\n) => {\n  return availablity\n    ? availablity?.pages\n        .flatMap(p => p)\n        // @ts-ignore\n        .flatMap((a, i) =>\n          // @ts-ignore\n          a.scheduleItems\n            // @ts-ignore\n            ?.filter(scheduleItem => scheduleItem.status === 'oof')\n            // @ts-ignore\n            .map(s => ({\n              id: Date.now().toString(36) + Math.random().toString(36).slice(2),\n              group: groupIndexMap?.get(i) ?? i,\n              start_time: DateTime.fromISO(s.start?.dateTime!),\n              end_time: DateTime.fromISO(s.end?.dateTime!),\n              canMove: false,\n              canResize: false,\n            })),\n        )\n        .filter(isTimeLineItem)\n    : [];\n};\n\nexport const getGroups = (\n  availablity: InfiniteData<ScheduleInformation[]> | undefined,\n  isUserEntity: string | false,\n  users: UserEntityV1alpha1[] | undefined,\n): [\n  groups: Array<{\n    id: number;\n    highlight: boolean;\n    title: string;\n    entity?: UserEntity;\n    height: number;\n  }>,\n  groupIndexMap: Map<number, number>,\n] => {\n  if (!availablity) {\n    return [[], new Map()];\n  }\n\n  const flattenedSchedules = availablity.pages\n    .flatMap(p => p)\n    .map((a, originalIndex) => ({\n      originalIndex,\n      schedule: a,\n      title: getFullName(users || [], a.scheduleId || ''),\n    }));\n\n  // Sort by title (display name) alphabetically\n  const sortedSchedules = [...flattenedSchedules].sort((a, b) => {\n    const titleA = a.title || '';\n    const titleB = b.title || '';\n    return titleA.localeCompare(titleB);\n  });\n\n  // Create mapping from original index to new sorted index\n  const groupIndexMap = new Map(\n    sortedSchedules.map((item, newIndex) => [item.originalIndex, newIndex]),\n  );\n\n  const groups = sortedSchedules.map((item, newIndex) => {\n    const isHighlighted =\n      isUserEntity &&\n      item.schedule.scheduleId &&\n      isUserEntity === head(item.schedule.scheduleId.split('@'));\n\n    return {\n      id: newIndex,\n      highlight: !!isHighlighted,\n      title: item.title || '',\n      entity: getUser(users || [], item.schedule.scheduleId || ''),\n      height: 30,\n    };\n  });\n\n  return [groups, groupIndexMap];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lib.esm.js","sources":["../../../src/components/CalendarCard/lib.ts"],"sourcesContent":["import { TimelineItemBase } from 'react-calendar-timeline';\nimport { UserEntity, UserEntityV1alpha1 } from '@backstage/catalog-model';\nimport { ScheduleInformation } from '@microsoft/microsoft-graph-types';\nimport { InfiniteData } from '@tanstack/react-query';\nimport dayjs from 'dayjs';\n\nconst isTimeLineItem = (\n  item: TimelineItemBase<any> | undefined,\n): item is TimelineItemBase<any> => {\n  return item !== undefined;\n};\n\nconst getFullName = (users: UserEntity[], userId: string) => {\n  const [name] = userId.split('@');\n  const user = users.find(u => u.metadata.name === name);\n\n  if (user) return user.spec.profile?.displayName;\n  return userId;\n};\n\nconst getUser = (users: UserEntity[], userId: string) => {\n  const [name] = userId.split('@');\n\n  return users.find(u => u.metadata.name === name);\n};\n\nexport const getScheduleItems = (\n  availability: InfiniteData<ScheduleInformation[], unknown> | undefined,\n  groupIndexMap?: Map<number, number>,\n) => {\n  return availability\n    ? availability.pages\n        .flatMap(p => p)\n        // @ts-ignore\n        .flatMap((a, i) =>\n          // @ts-ignore\n          a.scheduleItems\n            // @ts-ignore\n            ?.filter(scheduleItem => scheduleItem.status === 'oof')\n            // @ts-ignore\n            .map(s => ({\n              id: Date.now().toString(36) + Math.random().toString(36).slice(2),\n              group: groupIndexMap?.get(i) ?? i,\n              start_time: dayjs(s.start?.dateTime!),\n              end_time: dayjs(s.end?.dateTime!),\n              canMove: false,\n              canResize: false,\n            })),\n        )\n        .filter(isTimeLineItem)\n    : [];\n};\n\nexport const getGroups = (\n  availability: InfiniteData<ScheduleInformation[], unknown> | undefined,\n  isUserEntity: string | false,\n  users: UserEntityV1alpha1[] | undefined,\n): [\n  groups: Array<{\n    id: number;\n    highlight: boolean;\n    title: string;\n    entity?: UserEntity;\n    height: number;\n  }>,\n  groupIndexMap: Map<number, number>,\n] => {\n  if (!availability) {\n    return [[], new Map()];\n  }\n\n  const flattenedSchedules = availability.pages\n    .flatMap(p => p)\n    .map((a, originalIndex) => ({\n      originalIndex,\n      schedule: a,\n      title: getFullName(users || [], a.scheduleId || ''),\n    }));\n\n  // Sort by title (display name) alphabetically\n  const sortedSchedules = [...flattenedSchedules].sort((a, b) => {\n    const titleA = a.title || '';\n    const titleB = b.title || '';\n    return titleA.localeCompare(titleB);\n  });\n\n  // Create mapping from original index to new sorted index\n  const groupIndexMap = new Map(\n    sortedSchedules.map((item, newIndex) => [item.originalIndex, newIndex]),\n  );\n\n  const groups = sortedSchedules.map((item, newIndex) => {\n    const isHighlighted =\n      isUserEntity &&\n      item.schedule.scheduleId &&\n      isUserEntity === item.schedule.scheduleId?.split('@')[0];\n\n    return {\n      id: newIndex,\n      highlight: !!isHighlighted,\n      title: item.title || '',\n      entity: getUser(users || [], item.schedule.scheduleId || ''),\n      height: 30,\n    };\n  });\n\n  return [groups, groupIndexMap];\n};\n"],"names":[],"mappings":"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"}

package/dist/components/DateSelector/DateSelector.esm.js

@@ -1,24 +1,31 @@
 import { jsx } from 'react/jsx-runtime';
-import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
-import FormControl from '@mui/material/FormControl';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { DatePicker } from '@backstage/ui';
+import { parseDate } from '@internationalized/date';
+import dayjs from 'dayjs';
 
+function toDateValue(date) {
+  return parseDate(date.format("YYYY-MM-DD"));
+}
 const DateSelector = ({
   label,
-  initalDate,
+  initialDate,
   onDateChange
 }) => {
-  return /* @__PURE__ */ jsx(FormControl, { variant: "standard", children: /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterLuxon, children: /* @__PURE__ */ jsx(
-    DesktopDatePicker,
+  const handleChange = (value) => {
+    if (value) {
+      onDateChange(dayjs(value.toString()));
+    } else {
+      onDateChange(null);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    DatePicker,
     {
-      format: "yyyy-MM-dd",
       label,
-      value: initalDate,
-      defaultValue: initalDate,
-      onChange: onDateChange
+      value: toDateValue(initialDate),
+      onChange: handleChange
     }
-  ) }) });
+  );
 };
 
 export { DateSelector };

package/dist/components/DateSelector/DateSelector.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateSelector.esm.js","sources":["../../../src/components/DateSelector/DateSelector.tsx"],"sourcesContent":["import { DateTime } from 'luxon/src/datetime';\nimport { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';\nimport FormControl from '@mui/material/FormControl';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';\n\ntype DateSelectorProps = {\n  label: string;\n  initalDate: DateTime;\n  onDateChange: (date: DateTime | null | string | undefined) => void;\n};\n\nexport const DateSelector = ({\n  label,\n  initalDate,\n  onDateChange,\n}: DateSelectorProps) => {\n  return (\n    <FormControl variant=\"standard\">\n      <LocalizationProvider dateAdapter={AdapterLuxon}>\n        <DesktopDatePicker\n          format=\"yyyy-MM-dd\"\n          label={label}\n          value={initalDate}\n          defaultValue={initalDate}\n          onChange={onDateChange}\n        />\n      </LocalizationProvider>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,eAAe,CAAC;AAAA,EAC3B,KAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAAyB;AACvB,EAAA,2BACG,WAAA,EAAA,EAAY,OAAA,EAAQ,YACnB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,aAAa,YAAA,EACjC,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAO,YAAA;AAAA,MACP,KAAA;AAAA,MACA,KAAA,EAAO,UAAA;AAAA,MACP,YAAA,EAAc,UAAA;AAAA,MACd,QAAA,EAAU;AAAA;AAAA,KAEd,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DateSelector.esm.js","sources":["../../../src/components/DateSelector/DateSelector.tsx"],"sourcesContent":["import { DatePicker } from '@backstage/ui';\nimport { parseDate, type DateValue } from '@internationalized/date';\nimport dayjs, { type Dayjs } from 'dayjs';\n\ntype DateSelectorProps = {\n  label: string;\n  initialDate: Dayjs;\n  onDateChange: (date: Dayjs | null) => void;\n};\n\nfunction toDateValue(date: Dayjs): DateValue {\n  return parseDate(date.format('YYYY-MM-DD'));\n}\n\nexport const DateSelector = ({\n  label,\n  initialDate,\n  onDateChange,\n}: DateSelectorProps) => {\n  const handleChange = (value: DateValue | null) => {\n    if (value) {\n      onDateChange(dayjs(value.toString()));\n    } else {\n      onDateChange(null);\n    }\n  };\n\n  return (\n    <DatePicker\n      label={label}\n      value={toDateValue(initialDate)}\n      onChange={handleChange}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAUA,SAAS,YAAY,IAAA,EAAwB;AAC3C,EAAA,OAAO,SAAA,CAAU,IAAA,CAAK,MAAA,CAAO,YAAY,CAAC,CAAA;AAC5C;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,KAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAyB;AACvB,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAA4B;AAChD,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,YAAA,CAAa,KAAA,CAAM,KAAA,CAAM,QAAA,EAAU,CAAC,CAAA;AAAA,IACtC,CAAA,MAAO;AACL,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA,IACnB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,KAAA,EAAO,YAAY,WAAW,CAAA;AAAA,MAC9B,QAAA,EAAU;AAAA;AAAA,GACZ;AAEJ;;;;"}

package/dist/hooks/useAvailibility.esm.js

@@ -1,27 +1,30 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useApi } from '@backstage/core-plugin-api';
-import { slice } from 'lodash';
 import { vacationCalendarApiRef } from '../api/VacationCalendarApi.esm.js';
 import '@backstage/errors';
 
 const PAGE_SIZE = 20;
+const GRAPH_DATE_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss.SSSZ";
 const useAvailability = (users, startDate, endDate, isSignedIn) => {
   const calendarApi = useApi(vacationCalendarApiRef);
   const {
-    data: availablity,
+    data: availability,
     error,
     isLoading: isAvailabilityLoading,
     isFetching: isAvailabilityFetching,
     hasNextPage,
     fetchNextPage
   } = useInfiniteQuery({
-    queryFn: ({ pageParam = 0 }) => {
-      const currentUsers = slice(users || [], pageParam, pageParam + PAGE_SIZE);
+    queryFn: ({ pageParam }) => {
+      const currentUsers = (users || []).slice(
+        pageParam,
+        pageParam + PAGE_SIZE
+      );
       return calendarApi.getAvailability(
         {
           users: currentUsers?.map((u) => u.spec.profile?.email ?? "") || [],
-          startDateTime: startDate.toISO(),
-          endDateTime: endDate.toISO()
+          startDateTime: startDate.format(GRAPH_DATE_TIME_FORMAT),
+          endDateTime: endDate.format(GRAPH_DATE_TIME_FORMAT)
         },
         {
           Prefer: 'outlook.timezone="Europe/Stockholm"'
@@ -31,9 +34,10 @@ const useAvailability = (users, startDate, endDate, isSignedIn) => {
     queryKey: [
       "calendarAvailability",
       users,
-      startDate.toISO(),
-      endDate.toISO()
+      startDate.format(GRAPH_DATE_TIME_FORMAT),
+      endDate.format(GRAPH_DATE_TIME_FORMAT)
     ],
+    initialPageParam: 0,
     getNextPageParam: (_, allPages) => {
       const numberOfUsers = allPages.flatMap((p) => p).length;
       if (numberOfUsers === users?.length) {
@@ -41,8 +45,8 @@ const useAvailability = (users, startDate, endDate, isSignedIn) => {
       }
       return numberOfUsers;
     },
-    cacheTime: 3e4 * 1e3,
-    enabled: isSignedIn && startDate.isValid && endDate.isValid && !!users,
+    gcTime: 3e4 * 1e3,
+    enabled: isSignedIn && startDate.isValid() && endDate.isValid() && !!users,
     retry: false,
     refetchInterval: 3e4 * 1e3,
     refetchIntervalInBackground: false,
@@ -50,7 +54,7 @@ const useAvailability = (users, startDate, endDate, isSignedIn) => {
     refetchOnReconnect: false
   });
   return {
-    availablity,
+    availability,
     error,
     isLoading: isAvailabilityLoading,
     isFetching: isAvailabilityFetching,

package/dist/hooks/useAvailibility.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAvailibility.esm.js","sources":["../../src/hooks/useAvailibility.ts"],"sourcesContent":["import { useInfiniteQuery } from '@tanstack/react-query';\nimport { UserEntityV1alpha1 } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { slice } from 'lodash';\nimport { DateTime } from 'luxon';\nimport { vacationCalendarApiRef } from '../api';\n\nconst PAGE_SIZE = 20;\n\nexport const useAvailability = (\n  users: UserEntityV1alpha1[] | undefined,\n  startDate: DateTime<true>,\n  endDate: DateTime<true>,\n  isSignedIn: boolean,\n) => {\n  const calendarApi = useApi(vacationCalendarApiRef);\n  const {\n    data: availablity,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  } = useInfiniteQuery({\n    queryFn: ({ pageParam = 0 }) => {\n      const currentUsers = slice(users || [], pageParam, pageParam + PAGE_SIZE);\n\n      return calendarApi.getAvailability(\n        {\n          users: currentUsers?.map(u => u.spec.profile?.email ?? '') || [],\n          startDateTime: startDate.toISO(),\n          endDateTime: endDate.toISO(),\n        },\n        {\n          Prefer: 'outlook.timezone=\"Europe/Stockholm\"',\n        },\n      );\n    },\n    queryKey: [\n      'calendarAvailability',\n      users,\n      startDate.toISO(),\n      endDate.toISO(),\n    ],\n    getNextPageParam: (_, allPages) => {\n      const numberOfUsers = allPages.flatMap(p => p).length;\n      if (numberOfUsers === users?.length) {\n        return undefined;\n      }\n      // This will be starting index to fetch the next batch.\n      return numberOfUsers;\n    },\n    cacheTime: 30000 * 1000,\n    enabled: isSignedIn && startDate.isValid && endDate.isValid && !!users,\n    retry: false,\n    refetchInterval: 30000 * 1000,\n    refetchIntervalInBackground: false,\n    refetchOnWindowFocus: false,\n    refetchOnReconnect: false,\n  });\n  return {\n    availablity,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  };\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAA,GAAY,EAAA;AAEX,MAAM,eAAA,GAAkB,CAC7B,KAAA,EACA,SAAA,EACA,SACA,UAAA,KACG;AACH,EAAA,MAAM,WAAA,GAAc,OAAO,sBAAsB,CAAA;AACjD,EAAA,MAAM;AAAA,IACJ,IAAA,EAAM,WAAA;AAAA,IACN,KAAA;AAAA,IACA,SAAA,EAAW,qBAAA;AAAA,IACX,UAAA,EAAY,sBAAA;AAAA,IACZ,WAAA;AAAA,IACA;AAAA,MACE,gBAAA,CAAiB;AAAA,IACnB,OAAA,EAAS,CAAC,EAAE,SAAA,GAAY,GAAE,KAAM;AAC9B,MAAA,MAAM,eAAe,KAAA,CAAM,KAAA,IAAS,EAAC,EAAG,SAAA,EAAW,YAAY,SAAS,CAAA;AAExE,MAAA,OAAO,WAAA,CAAY,eAAA;AAAA,QACjB;AAAA,UACE,KAAA,EAAO,YAAA,EAAc,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,KAAK,OAAA,EAAS,KAAA,IAAS,EAAE,CAAA,IAAK,EAAC;AAAA,UAC/D,aAAA,EAAe,UAAU,KAAA,EAAM;AAAA,UAC/B,WAAA,EAAa,QAAQ,KAAA;AAAM,SAC7B;AAAA,QACA;AAAA,UACE,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,IACF,CAAA;AAAA,IACA,QAAA,EAAU;AAAA,MACR,sBAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAU,KAAA,EAAM;AAAA,MAChB,QAAQ,KAAA;AAAM,KAChB;AAAA,IACA,gBAAA,EAAkB,CAAC,CAAA,EAAG,QAAA,KAAa;AACjC,MAAA,MAAM,aAAA,GAAgB,QAAA,CAAS,OAAA,CAAQ,CAAA,CAAA,KAAK,CAAC,CAAA,CAAE,MAAA;AAC/C,MAAA,IAAI,aAAA,KAAkB,OAAO,MAAA,EAAQ;AACnC,QAAA,OAAO,MAAA;AAAA,MACT;AAEA,MAAA,OAAO,aAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAW,GAAA,GAAQ,GAAA;AAAA,IACnB,SAAS,UAAA,IAAc,SAAA,CAAU,WAAW,OAAA,CAAQ,OAAA,IAAW,CAAC,CAAC,KAAA;AAAA,IACjE,KAAA,EAAO,KAAA;AAAA,IACP,iBAAiB,GAAA,GAAQ,GAAA;AAAA,IACzB,2BAAA,EAA6B,KAAA;AAAA,IAC7B,oBAAA,EAAsB,KAAA;AAAA,IACtB,kBAAA,EAAoB;AAAA,GACrB,CAAA;AACD,EAAA,OAAO;AAAA,IACL,WAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA,EAAW,qBAAA;AAAA,IACX,UAAA,EAAY,sBAAA;AAAA,IACZ,WAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useAvailibility.esm.js","sources":["../../src/hooks/useAvailibility.ts"],"sourcesContent":["import { useInfiniteQuery } from '@tanstack/react-query';\nimport { UserEntityV1alpha1 } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { type Dayjs } from 'dayjs';\nimport { vacationCalendarApiRef } from '../api';\n\nconst PAGE_SIZE = 20;\nconst GRAPH_DATE_TIME_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';\n\nexport const useAvailability = (\n  users: UserEntityV1alpha1[] | undefined,\n  startDate: Dayjs,\n  endDate: Dayjs,\n  isSignedIn: boolean,\n) => {\n  const calendarApi = useApi(vacationCalendarApiRef);\n  const {\n    data: availability,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  } = useInfiniteQuery({\n    queryFn: ({ pageParam }) => {\n      const currentUsers = (users || []).slice(\n        pageParam,\n        pageParam + PAGE_SIZE,\n      );\n\n      return calendarApi.getAvailability(\n        {\n          users: currentUsers?.map(u => u.spec.profile?.email ?? '') || [],\n          startDateTime: startDate.format(GRAPH_DATE_TIME_FORMAT),\n          endDateTime: endDate.format(GRAPH_DATE_TIME_FORMAT),\n        },\n        {\n          Prefer: 'outlook.timezone=\"Europe/Stockholm\"',\n        },\n      );\n    },\n    queryKey: [\n      'calendarAvailability',\n      users,\n      startDate.format(GRAPH_DATE_TIME_FORMAT),\n      endDate.format(GRAPH_DATE_TIME_FORMAT),\n    ],\n    initialPageParam: 0,\n    getNextPageParam: (_, allPages) => {\n      const numberOfUsers = allPages.flatMap(p => p).length;\n      if (numberOfUsers === users?.length) {\n        return undefined;\n      }\n      // This will be starting index to fetch the next batch.\n      return numberOfUsers;\n    },\n    gcTime: 30000 * 1000,\n    enabled: isSignedIn && startDate.isValid() && endDate.isValid() && !!users,\n    retry: false,\n    refetchInterval: 30000 * 1000,\n    refetchIntervalInBackground: false,\n    refetchOnWindowFocus: false,\n    refetchOnReconnect: false,\n  });\n  return {\n    availability,\n    error,\n    isLoading: isAvailabilityLoading,\n    isFetching: isAvailabilityFetching,\n    hasNextPage,\n    fetchNextPage,\n  };\n};\n"],"names":[],"mappings":";;;;;AAMA,MAAM,SAAA,GAAY,EAAA;AAClB,MAAM,sBAAA,GAAyB,0BAAA;AAExB,MAAM,eAAA,GAAkB,CAC7B,KAAA,EACA,SAAA,EACA,SACA,UAAA,KACG;AACH,EAAA,MAAM,WAAA,GAAc,OAAO,sBAAsB,CAAA;AACjD,EAAA,MAAM;AAAA,IACJ,IAAA,EAAM,YAAA;AAAA,IACN,KAAA;AAAA,IACA,SAAA,EAAW,qBAAA;AAAA,IACX,UAAA,EAAY,sBAAA;AAAA,IACZ,WAAA;AAAA,IACA;AAAA,MACE,gBAAA,CAAiB;AAAA,IACnB,OAAA,EAAS,CAAC,EAAE,SAAA,EAAU,KAAM;AAC1B,MAAA,MAAM,YAAA,GAAA,CAAgB,KAAA,IAAS,EAAC,EAAG,KAAA;AAAA,QACjC,SAAA;AAAA,QACA,SAAA,GAAY;AAAA,OACd;AAEA,MAAA,OAAO,WAAA,CAAY,eAAA;AAAA,QACjB;AAAA,UACE,KAAA,EAAO,YAAA,EAAc,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,KAAK,OAAA,EAAS,KAAA,IAAS,EAAE,CAAA,IAAK,EAAC;AAAA,UAC/D,aAAA,EAAe,SAAA,CAAU,MAAA,CAAO,sBAAsB,CAAA;AAAA,UACtD,WAAA,EAAa,OAAA,CAAQ,MAAA,CAAO,sBAAsB;AAAA,SACpD;AAAA,QACA;AAAA,UACE,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,IACF,CAAA;AAAA,IACA,QAAA,EAAU;AAAA,MACR,sBAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,CAAU,OAAO,sBAAsB,CAAA;AAAA,MACvC,OAAA,CAAQ,OAAO,sBAAsB;AAAA,KACvC;AAAA,IACA,gBAAA,EAAkB,CAAA;AAAA,IAClB,gBAAA,EAAkB,CAAC,CAAA,EAAG,QAAA,KAAa;AACjC,MAAA,MAAM,aAAA,GAAgB,QAAA,CAAS,OAAA,CAAQ,CAAA,CAAA,KAAK,CAAC,CAAA,CAAE,MAAA;AAC/C,MAAA,IAAI,aAAA,KAAkB,OAAO,MAAA,EAAQ;AACnC,QAAA,OAAO,MAAA;AAAA,MACT;AAEA,MAAA,OAAO,aAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAQ,GAAA,GAAQ,GAAA;AAAA,IAChB,OAAA,EAAS,cAAc,SAAA,CAAU,OAAA,MAAa,OAAA,CAAQ,OAAA,EAAQ,IAAK,CAAC,CAAC,KAAA;AAAA,IACrE,KAAA,EAAO,KAAA;AAAA,IACP,iBAAiB,GAAA,GAAQ,GAAA;AAAA,IACzB,2BAAA,EAA6B,KAAA;AAAA,IAC7B,oBAAA,EAAsB,KAAA;AAAA,IACtB,kBAAA,EAAoB;AAAA,GACrB,CAAA;AACD,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA,EAAW,qBAAA;AAAA,IACX,UAAA,EAAY,sBAAA;AAAA,IACZ,WAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js

@@ -0,0 +1,29 @@
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };
+//# sourceMappingURL=style-inject.es.esm.js.map

package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-inject.es.esm.js","sources":["../../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;","x_google_ignoreList":[0]}

package/dist/plugin.esm.js

@@ -1,4 +1,3 @@
-import 'react-calendar-timeline/lib/Timeline.css';
 import { createPlugin, createApiFactory, fetchApiRef, microsoftAuthApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
 import { rootRouteRef } from './routes.esm.js';
 import { vacationCalendarApiRef } from './api/VacationCalendarApi.esm.js';

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["import 'react-calendar-timeline/lib/Timeline.css';\nimport {\n  createApiFactory,\n  createPlugin,\n  createRoutableExtension,\n  fetchApiRef,\n  microsoftAuthApiRef,\n} from '@backstage/core-plugin-api';\nimport { rootRouteRef } from './routes';\nimport { VacationCalendarApiClient, vacationCalendarApiRef } from './api';\n\n/**\n * Plugin that provides the VacationCalendar api\n * @public */\nexport const vacationCalendarPlugin = createPlugin({\n  id: 'vacation-calendar',\n  apis: [\n    createApiFactory({\n      api: vacationCalendarApiRef,\n      deps: {\n        authApi: microsoftAuthApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ authApi, fetchApi }) =>\n        new VacationCalendarApiClient({ authApi, fetchApi }),\n    }),\n  ],\n  routes: {\n    root: rootRouteRef,\n  },\n});\n\n/**\n * Routable extension for VacationCalendarPage\n * @public\n */\nexport const VacationCalendarPage = vacationCalendarPlugin.provide(\n  createRoutableExtension({\n    name: 'VacationCalendarPage',\n    component: () => import('./components').then(m => m.VacationCalendar),\n    mountPoint: rootRouteRef,\n  }),\n);\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,yBAAyB,YAAA,CAAa;AAAA,EACjD,EAAA,EAAI,mBAAA;AAAA,EACJ,IAAA,EAAM;AAAA,IACJ,gBAAA,CAAiB;AAAA,MACf,GAAA,EAAK,sBAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,mBAAA;AAAA,QACT,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,OAAA,EAAS,CAAC,EAAE,OAAA,EAAS,QAAA,EAAS,KAC5B,IAAI,yBAAA,CAA0B,EAAE,OAAA,EAAS,QAAA,EAAU;AAAA,KACtD;AAAA,GACH;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC;AAMM,MAAM,uBAAuB,sBAAA,CAAuB,OAAA;AAAA,EACzD,uBAAA,CAAwB;AAAA,IACtB,IAAA,EAAM,sBAAA;AAAA,IACN,SAAA,EAAW,MAAM,OAAO,2BAAc,EAAE,IAAA,CAAK,CAAA,CAAA,KAAK,EAAE,gBAAgB,CAAA;AAAA,IACpE,UAAA,EAAY;AAAA,GACb;AACH;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["import {\n  createApiFactory,\n  createPlugin,\n  createRoutableExtension,\n  fetchApiRef,\n  microsoftAuthApiRef,\n} from '@backstage/core-plugin-api';\nimport { rootRouteRef } from './routes';\nimport { VacationCalendarApiClient, vacationCalendarApiRef } from './api';\n\n/**\n * Plugin that provides the VacationCalendar api\n * @public */\nexport const vacationCalendarPlugin = createPlugin({\n  id: 'vacation-calendar',\n  apis: [\n    createApiFactory({\n      api: vacationCalendarApiRef,\n      deps: {\n        authApi: microsoftAuthApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ authApi, fetchApi }) =>\n        new VacationCalendarApiClient({ authApi, fetchApi }),\n    }),\n  ],\n  routes: {\n    root: rootRouteRef,\n  },\n});\n\n/**\n * Routable extension for VacationCalendarPage\n * @public\n */\nexport const VacationCalendarPage = vacationCalendarPlugin.provide(\n  createRoutableExtension({\n    name: 'VacationCalendarPage',\n    component: () => import('./components').then(m => m.VacationCalendar),\n    mountPoint: rootRouteRef,\n  }),\n);\n"],"names":[],"mappings":";;;;;AAaO,MAAM,yBAAyB,YAAA,CAAa;AAAA,EACjD,EAAA,EAAI,mBAAA;AAAA,EACJ,IAAA,EAAM;AAAA,IACJ,gBAAA,CAAiB;AAAA,MACf,GAAA,EAAK,sBAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,mBAAA;AAAA,QACT,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,OAAA,EAAS,CAAC,EAAE,OAAA,EAAS,QAAA,EAAS,KAC5B,IAAI,yBAAA,CAA0B,EAAE,OAAA,EAAS,QAAA,EAAU;AAAA,KACtD;AAAA,GACH;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC;AAMM,MAAM,uBAAuB,sBAAA,CAAuB,OAAA;AAAA,EACzD,uBAAA,CAAwB;AAAA,IACtB,IAAA,EAAM,sBAAA;AAAA,IACN,SAAA,EAAW,MAAM,OAAO,2BAAc,EAAE,IAAA,CAAK,CAAA,CAAA,KAAK,EAAE,gBAAgB,CAAA;AAAA,IACpE,UAAA,EAAY;AAAA,GACb;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axis-backstage/plugin-vacation-calendar",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -44,7 +44,10 @@
       "./alpha": "@backstage/FrontendPlugin"
     }
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.css.esm.js"
+  ],
   "scripts": {
     "start": "backstage-cli package start",
     "build": "backstage-cli package build",
@@ -55,27 +58,20 @@
     "postpack": "backstage-cli package postpack"
   },
   "dependencies": {
-    "@backstage/catalog-model": "^1.8.0",
-    "@backstage/core-components": "^0.18.9",
-    "@backstage/core-plugin-api": "^1.12.5",
-    "@backstage/errors": "^1.3.0",
-    "@backstage/frontend-plugin-api": "^0.16.2",
-    "@backstage/plugin-catalog-react": "^2.1.4",
-    "@backstage/theme": "^0.7.3",
-    "@date-io/luxon": "3.0.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/pickers": "^3.3.11",
+    "@backstage/catalog-model": "^1.9.0",
+    "@backstage/core-components": "^0.18.11",
+    "@backstage/core-plugin-api": "^1.12.7",
+    "@backstage/errors": "^1.3.1",
+    "@backstage/frontend-plugin-api": "^0.17.2",
+    "@backstage/plugin-catalog-react": "^3.1.0",
+    "@backstage/ui": "^0.16.0",
+    "@internationalized/date": "^3.12.2",
     "@microsoft/microsoft-graph-types": "^2.40.0",
-    "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.20",
-    "@mui/x-date-pickers": "^7.7.0",
-    "@tanstack/react-query": "4.29.1",
+    "@tanstack/react-query": "^5.101.0",
+    "dayjs": "^1.11.10",
     "interactjs": "^1.10.27",
-    "lodash": "^4.18.1",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "prop-types": "^15.8.1",
-    "react-calendar-timeline": "^0.28.0",
+    "react-calendar-timeline": "^0.30.0-beta.4",
     "react-use": "^17.5.0"
   },
   "peerDependencies": {
@@ -85,18 +81,15 @@
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@backstage/catalog-client": "^1.15.0",
-    "@backstage/cli": "^0.36.1",
-    "@backstage/core-app-api": "^1.20.0",
-    "@backstage/dev-utils": "^1.1.22",
-    "@backstage/test-utils": "^1.7.17",
+    "@backstage/catalog-client": "^1.16.0",
+    "@backstage/cli": "^0.36.3",
+    "@backstage/core-app-api": "^1.20.2",
+    "@backstage/dev-utils": "^1.1.24",
+    "@backstage/test-utils": "^1.7.19",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/lodash": "^4.17.5",
-    "@types/luxon": "^3.4.2",
-    "@types/react-calendar-timeline": "^0.28.6"
+    "@testing-library/user-event": "^14.5.2"
   },
   "files": [
     "dist"