@opengovsg/oui 0.0.9 → 0.0.11

package/dist/esm/calendar/calendar-base.js

@@ -1,343 +0,0 @@
-"use strict";
-"use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo, useContext } from 'react';
-import { today, getLocalTimeZone, CalendarDate } from '@internationalized/date';
-import { useMessageFormatter, useDateFormatter } from 'react-aria';
-import { Calendar, composeRenderProps, CalendarGrid, CalendarGridBody, CalendarCell, useLocale, CalendarStateContext, Group, Heading, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell } from 'react-aria-components';
-import { cn } from '@opengovsg/oui-theme';
-import { Button } from '../button/button.js';
-import { useCalendarStyleContext } from './calendar-style-context.js';
-import { useLocalizedMonthYear, useGenerateLocalizedMonths, useGenerateLocalizedYears } from './utils.js';
-import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
-import ChevronLeft from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.js';
-import { Select } from '../select/select.js';
-import { SelectItem } from '../select/select-item.js';
-
-const useCalendarSelectors = (state) => {
-  const yearRange = useMemo(() => {
-    const start = state.minValue.year ?? 1900;
-    const end = state.maxValue.year ?? 2100;
-    return { start, end };
-  }, [state.maxValue, state.minValue]);
-  const dateFormatter = useDateFormatter(state);
-  const datePartOrder = useMemo(() => {
-    const parts = dateFormatter.formatToParts(
-      state.visibleRange.start.toDate(state.timeZone)
-    );
-    const filteredParts = parts.filter(
-      (part) => ["year", "month"].includes(part.type)
-    );
-    const filteredPartNames = filteredParts.map((part) => part.type);
-    return filteredPartNames;
-  }, [dateFormatter, state.timeZone, state.visibleRange.start]);
-  const months = useGenerateLocalizedMonths(state.timeZone);
-  const years = useGenerateLocalizedYears(
-    yearRange.start,
-    yearRange.end,
-    state.timeZone
-  );
-  return useMemo(() => {
-    return {
-      months,
-      years,
-      datePartOrder
-    };
-  }, [datePartOrder, months, years]);
-};
-const i18nStrings = {
-  "en-SG": {
-    selectMonth: "Select month",
-    selectYear: "Select year",
-    today: "Today"
-  },
-  "zh-SG": {
-    selectMonth: "\u9009\u62E9\u6708\u4EFD",
-    selectYear: "\u9009\u62E9\u5E74\u4EFD",
-    today: "\u4ECA\u5929"
-  },
-  "ms-SG": {
-    selectMonth: "Pilih bulan",
-    selectYear: "Pilih tahun",
-    today: "Hari ini"
-  },
-  "ta-SG": {
-    selectMonth: "\u0BAE\u0BBE\u0BA4\u0BA4\u0BCD\u0BA4\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
-    selectYear: "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
-    today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
-  }
-};
-const CalendarBottomContent = ({
-  bottomContent,
-  showTodayButton
-}) => {
-  const state = useContext(CalendarStateContext);
-  const { slots, classNames, size } = useCalendarStyleContext();
-  const formatMessage = useMessageFormatter(i18nStrings);
-  if (bottomContent) {
-    return bottomContent;
-  }
-  if (!showTodayButton) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: slots.bottomContentWrapper({
-        className: classNames?.bottomContentWrapper
-      }),
-      children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          isDisabled: state.isDisabled,
-          variant: "clear",
-          color: "sub",
-          size,
-          slot: null,
-          className: slots.todayButton({ className: classNames?.todayButton }),
-          onPress: () => {
-            state.setFocusedDate(today(getLocalTimeZone()));
-          },
-          children: formatMessage("today")
-        }
-      )
-    }
-  );
-};
-function CalendarBase({
-  weekdayStyle = "narrow",
-  calendarRef,
-  minValue = new CalendarDate(1900, 0, 1),
-  maxValue = new CalendarDate(2100, 12, 31),
-  bottomContent,
-  showTodayButton = true,
-  ...props
-}) {
-  const { slots, className, classNames } = useCalendarStyleContext();
-  const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
-  const dateToHighlight = useMemo(() => {
-    return props.defaultFocusedValue ?? today(getLocalTimeZone());
-  }, [props.defaultFocusedValue]);
-  return /* @__PURE__ */ jsxs(
-    Calendar,
-    {
-      pageBehavior: "single",
-      ...props,
-      ref: calendarRef,
-      minValue,
-      maxValue,
-      className: composeRenderProps(
-        className,
-        (className2, renderProps) => slots.base({
-          className: cn(classNames?.base, className2),
-          ...renderProps
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: slots.gridWrapper({
-              className: classNames?.gridWrapper
-            }),
-            children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: slots.calendar({ className: classNames?.calendar }),
-                children: [
-                  /* @__PURE__ */ jsx(CalendarHeader, { offsetMonths: index }),
-                  /* @__PURE__ */ jsxs(
-                    CalendarGrid,
-                    {
-                      className: slots.grid({ className: classNames?.grid }),
-                      weekdayStyle,
-                      offset: { months: index },
-                      children: [
-                        /* @__PURE__ */ jsx(CalendarGridHeader, {}),
-                        /* @__PURE__ */ jsx(
-                          CalendarGridBody,
-                          {
-                            className: slots.gridBody({ className: classNames?.gridBody }),
-                            children: (date) => /* @__PURE__ */ jsx(
-                              CalendarCell,
-                              {
-                                className: composeRenderProps(
-                                  classNames?.cell,
-                                  (className2, renderProps) => slots.cell({
-                                    className: className2,
-                                    isMultipleMonths: numberOfVisibleMonths >= 2,
-                                    isDateHighlighted: date.compare(dateToHighlight) === 0,
-                                    ...renderProps
-                                  })
-                                ),
-                                date
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              },
-              index
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          CalendarBottomContent,
-          {
-            bottomContent,
-            showTodayButton
-          }
-        )
-      ]
-    }
-  );
-}
-const CalendarMonthDaySelector = () => {
-  const { slots, size, classNames } = useCalendarStyleContext();
-  const state = useContext(CalendarStateContext);
-  const { months, years, datePartOrder } = useCalendarSelectors(state);
-  const formatMessage = useMessageFormatter(i18nStrings);
-  return /* @__PURE__ */ jsx(Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
-    if (part === "month") {
-      return /* @__PURE__ */ jsx(
-        Select,
-        {
-          isDisabled: state.isDisabled,
-          size,
-          items: months,
-          variant: "clear",
-          classNames: {
-            trigger: slots.monthSelector({
-              className: classNames?.monthSelector
-            }),
-            list: slots.monthList({ className: classNames?.monthList }),
-            selectedText: slots.selectorText({
-              className: classNames?.selectorText
-            }),
-            popover: "min-w-[12ch]"
-          },
-          selectedKey: state.visibleRange.start.month,
-          "aria-label": formatMessage("selectMonth"),
-          onSelectionChange: (month) => {
-            state.setFocusedDate(
-              new CalendarDate(state.focusedDate.year, Number(month), 1)
-            );
-          },
-          children: (month) => /* @__PURE__ */ jsx(SelectItem, { children: month.textValue })
-        },
-        part
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      Select,
-      {
-        isDisabled: state.isDisabled,
-        size,
-        variant: "clear",
-        items: years,
-        classNames: {
-          trigger: slots.yearSelector({
-            className: classNames?.yearSelector
-          }),
-          list: slots.yearList({ className: classNames?.yearList }),
-          selectedText: slots.selectorText({
-            className: classNames?.selectorText
-          })
-        },
-        selectedKey: state.visibleRange.start.year,
-        "aria-label": formatMessage("selectYear"),
-        onSelectionChange: (year) => {
-          state.setFocusedDate(
-            new CalendarDate(
-              Number(year),
-              state.focusedDate.month,
-              state.focusedDate.day
-            )
-          );
-        },
-        children: (year) => /* @__PURE__ */ jsx(SelectItem, { children: year.textValue })
-      },
-      part
-    );
-  }) });
-};
-function CalendarHeader({ offsetMonths = 0 }) {
-  const { direction } = useLocale();
-  const { slots, classNames, size } = useCalendarStyleContext();
-  const state = useContext(CalendarStateContext);
-  const monthYearTitle = useLocalizedMonthYear(
-    state.visibleRange.start.add({ months: offsetMonths }),
-    state.timeZone
-  );
-  if (offsetMonths === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: slots.header({ className: classNames?.header }), children: [
-      /* @__PURE__ */ jsx(CalendarMonthDaySelector, {}),
-      /* @__PURE__ */ jsxs(
-        Group,
-        {
-          className: slots.buttonGroup({ className: classNames?.buttonGroup }),
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                size,
-                isIconOnly: true,
-                variant: "clear",
-                color: "sub",
-                slot: "previous",
-                className: slots.prevButton({ className: classNames?.prevButton }),
-                children: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                size,
-                variant: "clear",
-                color: "sub",
-                isIconOnly: true,
-                slot: "next",
-                className: slots.nextButton({
-                  className: classNames?.nextButton
-                }),
-                children: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx(
-    Heading,
-    {
-      className: slots.header({ className: classNames?.header }),
-      "aria-hidden": true,
-      level: 2,
-      children: monthYearTitle
-    }
-  );
-}
-function CalendarGridHeader() {
-  const { slots, classNames } = useCalendarStyleContext();
-  return /* @__PURE__ */ jsx(
-    CalendarGridHeader$1,
-    {
-      className: slots.gridHeader({ className: classNames?.gridHeader }),
-      children: (day) => /* @__PURE__ */ jsx(
-        CalendarHeaderCell,
-        {
-          className: slots.gridHeaderCell({
-            className: classNames?.gridHeaderCell
-          }),
-          children: day
-        }
-      )
-    }
-  );
-}
-
-export { CalendarBase, CalendarGridHeader, CalendarHeader };

package/dist/types/calendar/calendar-base.d.ts

@@ -1,14 +0,0 @@
-import type { ForwardedRef } from "react";
-import type { DateValue } from "react-aria-components";
-import type { CalendarProps } from "./types";
-export interface CalendarBaseProps<T extends DateValue> extends CalendarProps<T> {
-    calendarRef: ForwardedRef<HTMLDivElement>;
-}
-export declare function CalendarBase<T extends DateValue>({ weekdayStyle, calendarRef, minValue, maxValue, bottomContent, showTodayButton, ...props }: CalendarBaseProps<T>): import("react/jsx-runtime").JSX.Element;
-interface CalendarHeaderProps {
-    offsetMonths?: number;
-}
-export declare function CalendarHeader({ offsetMonths }: CalendarHeaderProps): import("react/jsx-runtime").JSX.Element;
-export declare function CalendarGridHeader(): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=calendar-base.d.ts.map

package/dist/types/calendar/calendar-base.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calendar-base.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-base.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAsBtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AA6C5C,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,SAAS,CACpD,SAAQ,aAAa,CAAC,CAAC,CAAC;IACxB,WAAW,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAC1C;AAgED,wBAAgB,YAAY,CAAC,CAAC,SAAS,SAAS,EAAE,EAChD,YAAuB,EACvB,WAAW,EACX,QAAuC,EACvC,QAAyC,EACzC,aAAa,EACb,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAsEtB;AA+ED,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,cAAc,CAAC,EAAE,YAAgB,EAAE,EAAE,mBAAmB,2CA8DvE;AAED,wBAAgB,kBAAkB,4CAiBjC"}