@opengovsg/oui 0.0.8 → 0.0.10

package/dist/cjs/select/select-item.cjs

@@ -7,7 +7,6 @@ var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
-var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
 
 const SelectItem = utils.forwardRef(function SelectItem2({ classNames, ...originalProps }, ref) {
   [originalProps, ref] = reactAriaComponents.useContextProps(
@@ -23,6 +22,7 @@ const SelectItem = utils.forwardRef(function SelectItem2({ classNames, ...origin
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.ListBoxItem,
     {
+      textValue: typeof props.children === "string" ? props.children : void 0,
       ...props,
       ref,
       className: ouiTheme.composeRenderProps(
@@ -33,29 +33,16 @@ const SelectItem = utils.forwardRef(function SelectItem2({ classNames, ...origin
         if (typeof props.children === "function") {
           return props.children(renderProps);
         }
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: styles.text({
-                className: classNames?.text,
-                ...renderProps
-              }),
-              children: props.children
-            }
-          ),
-          renderProps.isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              className: styles.icon({
-                className: classNames?.icon,
-                ...renderProps
-              }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(check.default, {})
-            }
-          )
-        ] });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: styles.text({
+              className: classNames?.text,
+              ...renderProps
+            }),
+            children: props.children
+          }
+        );
       }
     }
   );

package/dist/cjs/select/select.cjs

@@ -8,8 +8,9 @@ var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
-var chevronsUpDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.cjs');
 var field = require('../field/field.cjs');
+var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+var popover = require('../popover/popover.cjs');
 var button = require('../button/button.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
@@ -26,6 +27,7 @@ function Select({
   label,
   description,
   classNames,
+  errorMessage,
   ...originalProps
 }) {
   const [_props, variantProps] = utils.mapPropsVariants(
@@ -34,13 +36,13 @@ function Select({
   );
   const { items, children, listLayoutOptions, ...props } = _props;
   const styles = ouiTheme.selectStyles(variantProps);
-  const layout = react.useMemo(() => {
-    return new reactAriaComponents.ListLayout({
+  const layoutOptions = react.useMemo(() => {
+    return {
       estimatedRowHeight: calculateEstimatedRowHeight(
         variantProps.size ?? "md"
       ),
       ...listLayoutOptions
-    });
+    };
   }, [listLayoutOptions, variantProps.size]);
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[selectVariantContext.SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.Select,
@@ -71,7 +73,14 @@ function Select({
                   })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(chevronsUpDown.default, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chevronDown.default,
+                {
+                  className: styles.icon({
+                    className: classNames?.icon
+                  })
+                }
+              )
             ]
           }
         ),
@@ -83,9 +92,11 @@ function Select({
             children: description
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Virtualizer, { layout, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage }),
+        /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Virtualizer, { layout: reactAriaComponents.ListLayout, layoutOptions, children: /* @__PURE__ */ jsxRuntime.jsx(
           reactAriaComponents.ListBox,
           {
+            autoFocus: true,
             items,
             shouldFocusWrap: true,
             className: ouiTheme.composeRenderProps(

package/dist/cjs/system/react-utils/context.cjs

@@ -7,9 +7,10 @@ function createContext(options = {}) {
   const {
     strict = true,
     errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
-    name
+    name,
+    defaultValue
   } = options;
-  const Context = react.createContext(void 0);
+  const Context = react.createContext(defaultValue);
   Context.displayName = name;
   function useContext() {
     const context = react.useContext(Context);

package/dist/cjs/system/utils.cjs

@@ -13,12 +13,15 @@ const mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   if (!variantKeys) {
     return [props, {}];
   }
-  const picked = variantKeys.reduce((acc, key) => {
-    if (key in props) {
-      return { ...acc, [key]: props[key] };
-    }
-    return acc;
-  }, {});
+  const picked = variantKeys.reduce(
+    (acc, key) => {
+      if (key in props) {
+        return { ...acc, [key]: props[key] };
+      }
+      return acc;
+    },
+    {}
+  );
   if (removeVariantProps) {
     const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
     return [omitted, picked];

package/dist/cjs/tag-field/index.cjs

@@ -2,7 +2,9 @@
 'use strict';
 
 var tagField = require('./tag-field.cjs');
+var tagFieldItem = require('./tag-field-item.cjs');
 
 
 
 exports.TagField = tagField.TagField;
+exports.TagFieldItem = tagFieldItem.TagFieldItem;

package/dist/cjs/tag-field/tag-field-item.cjs

@@ -0,0 +1,33 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var tagFieldStateContext = require('./tag-field-state-context.cjs');
+
+const TagFieldItemInner = ({ item, isHighlighted, classNames, ...itemProps }, ref) => {
+  const { itemToText, size } = react.useContext(tagFieldStateContext.TagFieldStateContext);
+  const styles = ouiTheme.listBoxItemStyles({ size });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      ...itemProps,
+      className: styles.container({
+        className: classNames?.container,
+        isFocused: isHighlighted,
+        isDisabled: itemProps["aria-disabled"]
+      }),
+      "data-rac": true,
+      "data-focused": ouiTheme.dataAttr(isHighlighted),
+      "data-disabled": ouiTheme.dataAttr(itemProps["aria-disabled"]),
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label({ className: classNames?.label }), children: itemToText(item) })
+    }
+  );
+};
+const TagFieldItem = utils.forwardRefGeneric(TagFieldItemInner);
+
+exports.TagFieldItem = TagFieldItem;

package/dist/cjs/tag-field/tag-field-list.cjs

@@ -5,27 +5,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactAriaComponents = require('react-aria-components');
-var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
+var tagFieldItem = require('./tag-field-item.cjs');
 var tagFieldStateContext = require('./tag-field-state-context.cjs');
 
 const TagFieldListContext = react.createContext(null);
-const TagFieldListItemInner = ({ item, isHighlighted, classNames, ...itemProps }, ref) => {
-  const { itemToText, size } = react.useContext(tagFieldStateContext.TagFieldStateContext);
-  const styles = ouiTheme.tagFieldItemStyles({ size });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      ref,
-      ...itemProps,
-      className: styles.container({ className: classNames?.container }),
-      "data-rac": true,
-      "data-hovered": ouiTheme.dataAttr(isHighlighted),
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label({ className: classNames?.label }), children: itemToText(item) })
-    }
-  );
-};
-const TagFieldListItem = utils.forwardRefGeneric(TagFieldListItemInner);
 const TagFieldListInner = (props, ref) => {
   [props, ref] = reactAriaComponents.useContextProps(props, ref, TagFieldListContext);
   const { items, getItemProps, highlightedIndex } = react.useContext(tagFieldStateContext.TagFieldStateContext);
@@ -57,13 +41,19 @@ const TagFieldListInner = (props, ref) => {
         item,
         isHighlighted: highlightedIndex === virtualRow.index,
         key: virtualRow.key,
-        itemClassNames,
-        ...itemProps
+        classNames: itemClassNames
       };
       if (typeof props.children === "function") {
-        return props.children(childProps);
+        return props.children({ ...childProps, itemProps });
       }
-      return /* @__PURE__ */ react.createElement(TagFieldListItem, { ...childProps, key: childProps.key });
+      return /* @__PURE__ */ react.createElement(
+        tagFieldItem.TagFieldItem,
+        {
+          ...childProps,
+          ...itemProps,
+          key: childProps.key
+        }
+      );
     })
   ] }) });
 };
@@ -71,4 +61,3 @@ const TagFieldList = utils.forwardRefGeneric(TagFieldListInner);
 
 exports.TagFieldList = TagFieldList;
 exports.TagFieldListContext = TagFieldListContext;
-exports.TagFieldListItem = TagFieldListItem;

package/dist/cjs/tag-field/tag-field-tag-list.cjs

@@ -15,7 +15,8 @@ const TagFieldTagList = ({
     getSelectedItemProps,
     removeSelectedItem,
     isDisabled,
-    isReadOnly
+    isReadOnly,
+    itemToText
   } = react.useContext(tagFieldStateContext.TagFieldStateContext);
   const handleRemoveSelectedItem = react.useCallback(
     (item) => () => {
@@ -49,7 +50,7 @@ const TagFieldTagList = ({
         className: classNames?.tag,
         ...itemProps,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.tagText, children: selectedItem.textValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.tagText, children: itemToText(selectedItem) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             x.default,
             {

package/dist/cjs/tag-field/tag-field.cjs

@@ -6,13 +6,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var input = require('../input/input.cjs');
+var tagFieldItem = require('./tag-field-item.cjs');
 var tagFieldList = require('./tag-field-list.cjs');
 var tagFieldRoot = require('./tag-field-root.cjs');
 var tagFieldTagList = require('./tag-field-tag-list.cjs');
 var tagFieldTrigger = require('./tag-field-trigger.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
 var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
+var popover = require('../popover/popover.cjs');
 
 function TagField({
   classNames,
@@ -92,12 +94,12 @@ function TagField({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsxRuntime.jsx(
       tagFieldList.TagFieldList,
       {
         className: styles.list({ className: classNames?.list }),
         itemClassNames: props.itemClassNames,
-        children: ({ key, ...props2 }) => children ? children({ key, ...props2 }) : /* @__PURE__ */ react.createElement(tagFieldList.TagFieldListItem, { ...props2, key })
+        children: ({ key, itemProps, ...props2 }) => children ? children({ key, itemProps, ...props2 }) : /* @__PURE__ */ react.createElement(tagFieldItem.TagFieldItem, { ...props2, ...itemProps, key })
       }
     ) })
   ] });

package/dist/esm/button/button.js

@@ -5,9 +5,9 @@ import { forwardRef, useMemo } from 'react';
 import { chain } from '@react-aria/utils';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
 import { buttonStyles } from '@opengovsg/oui-theme';
+import { Ripple } from '../ripple/ripple.js';
 import { useRipple } from '../ripple/use-ripple.js';
 import { Spinner } from '../spinner/spinner.js';
-import { Ripple } from '../ripple/ripple.js';
 
 const Button = forwardRef(
   ({

package/dist/esm/calendar/agnostic-calendar-state-context.js

@@ -0,0 +1,10 @@
+"use strict";
+"use client";
+import { createContext } from '../system/react-utils/context.js';
+
+const [AgnosticCalendarStateContext, useAgnosticCalendarStateContext] = createContext({
+  name: "AgnosticCalendarStateContext",
+  strict: true
+});
+
+export { AgnosticCalendarStateContext, useAgnosticCalendarStateContext };

package/dist/esm/calendar/calendar-bottom-content.js

@@ -0,0 +1,49 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { today, getLocalTimeZone } from '@internationalized/date';
+import { Button } from '../button/button.js';
+import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
+import { useCalendarStyleContext } from './calendar-style-context.js';
+import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
+
+const CalendarBottomContent = ({
+  bottomContent,
+  showTodayButton
+}) => {
+  const state = useContext(AgnosticCalendarStateContext);
+  const { slots, classNames, size } = useCalendarStyleContext();
+  const formatMessage = useCalendarI18n();
+  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")
+        }
+      )
+    }
+  );
+};
+
+export { CalendarBottomContent };

package/dist/esm/calendar/calendar-grid-header.js

@@ -0,0 +1,26 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell } from 'react-aria-components';
+import { useCalendarStyleContext } from './calendar-style-context.js';
+
+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 { CalendarGridHeader };

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

@@ -0,0 +1,72 @@
+"use strict";
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { useLocale, Group, Heading } from 'react-aria-components';
+import { Button } from '../button/button.js';
+import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
+import { CalendarMonthDaySelector } from './calendar-month-day-selector.js';
+import { useCalendarStyleContext } from './calendar-style-context.js';
+import { useLocalizedMonthYear } 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';
+
+function CalendarHeader({ offsetMonths = 0 }) {
+  const { direction } = useLocale();
+  const { slots, classNames, size } = useCalendarStyleContext();
+  const state = useContext(AgnosticCalendarStateContext);
+  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
+    }
+  );
+}
+
+export { CalendarHeader };

package/dist/esm/calendar/calendar-month-day-selector.js

@@ -0,0 +1,84 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { CalendarDate } from '@internationalized/date';
+import { Group } from 'react-aria-components';
+import { Select } from '../select/select.js';
+import { SelectItem } from '../select/select-item.js';
+import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
+import { useCalendarStyleContext } from './calendar-style-context.js';
+import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
+import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
+
+const CalendarMonthDaySelector = () => {
+  const { slots, size, classNames } = useCalendarStyleContext();
+  const state = useContext(AgnosticCalendarStateContext);
+  const { months, years, datePartOrder } = useCalendarSelectors(state);
+  const formatMessage = useCalendarI18n();
+  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
+    );
+  }) });
+};
+
+export { CalendarMonthDaySelector };

package/dist/esm/calendar/calendar-style-context.js

@@ -0,0 +1,10 @@
+"use strict";
+"use client";
+import { createContext } from '../system/react-utils/context.js';
+
+const [CalendarStyleContext, useCalendarStyleContext] = createContext({
+  name: "CalendarStyleContext",
+  strict: true
+});
+
+export { CalendarStyleContext, useCalendarStyleContext };