@opengovsg/oui 0.0.44 → 0.0.46

package/dist/cjs/sidebar/sidebar-list.cjs

@@ -0,0 +1,213 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
+var reactStately = require('react-stately');
+var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
+var utils = require('../system/utils.cjs');
+var context = require('./context.cjs');
+var i18n = require('./i18n.cjs');
+var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+
+const SidebarListSection = ({
+  onlyCaretToggle,
+  isExpanded,
+  isSelected,
+  children,
+  linkProps
+}) => {
+  const { slots, classNames } = context.useSidebarStyleContext();
+  const { isNested } = context.useSidebarNestContext() ?? {};
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
+  if (onlyCaretToggle) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-expanded": ouiTheme.dataAttr(isExpanded),
+        "data-selected": ouiTheme.dataAttr(isSelected),
+        className: slots.item({
+          className: classNames?.item,
+          isExpanded,
+          isNested
+        }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.Link,
+            {
+              className: slots.label({
+                className: classNames?.label,
+                isNested,
+                isExpanded
+              }),
+              ...linkProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "clear",
+              color: "none",
+              slot: "trigger",
+              "aria-label": stringFormatter.format(
+                isExpanded ? "Collapse sidebar section" : "Expand sidebar section"
+              ),
+              className: slots.chevronContainer({
+                className: classNames?.chevronContainer
+              }),
+              children: ({ isDisabled }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                chevronDown.default,
+                {
+                  "aria-hidden": true,
+                  className: slots.chevron({ isExpanded, isDisabled })
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Button,
+    {
+      "data-expanded": ouiTheme.dataAttr(isExpanded),
+      "data-selected": ouiTheme.dataAttr(isSelected),
+      slot: "trigger",
+      className: slots.item({
+        className: classNames?.item,
+        isExpanded,
+        isNested
+      }),
+      children: ({ isDisabled }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: slots.label({
+              className: classNames?.label,
+              isNested,
+              isExpanded
+            }),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: slots.chevronContainer({
+              className: classNames?.chevronContainer
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              chevronDown.default,
+              {
+                "aria-hidden": true,
+                className: slots.chevron({ isExpanded, isDisabled })
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+const SidebarList = utils.forwardRef(
+  ({
+    label,
+    children,
+    startContent,
+    endContent,
+    isSelected,
+    defaultIsExpanded,
+    isExpanded: isExpandedProp,
+    onExpand: onExpandProp,
+    onlyCaretToggle = false,
+    ...props
+  }, ref) => {
+    const { slots, classNames } = context.useSidebarStyleContext();
+    const { isCollapsed } = context.useSidebarCollapseContext() ?? {};
+    const { isExpanded, setExpanded } = reactStately.useDisclosureState({
+      defaultExpanded: defaultIsExpanded,
+      isExpanded: isExpandedProp,
+      onExpandedChange: onExpandProp
+    });
+    const dataSelected = $670gB$react.useMemo(() => {
+      if (typeof isSelected === "function") {
+        return isSelected();
+      }
+      return isSelected;
+    }, [isSelected]);
+    if (isCollapsed) {
+      return children;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        "data-selected": ouiTheme.dataAttr(dataSelected),
+        className: slots.list({
+          className: classNames?.list
+        }),
+        ref,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          reactAriaComponents.Disclosure,
+          {
+            className: slots.section({
+              className: classNames?.section,
+              isExpanded
+            }),
+            isExpanded,
+            onExpandedChange: setExpanded,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                SidebarListSection,
+                {
+                  onlyCaretToggle,
+                  isSelected,
+                  isExpanded,
+                  linkProps: props,
+                  children: [
+                    startContent,
+                    label,
+                    endContent
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactAriaComponents.DisclosurePanel,
+                {
+                  className: slots.nestedPanel({
+                    className: classNames?.nestedPanel
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    reactAriaComponents.Provider,
+                    {
+                      values: [[context.SidebarNestContext, { isNested: true, isExpanded }]],
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "ul",
+                        {
+                          className: slots.ul({
+                            className: classNames?.ul,
+                            isNested: true,
+                            isExpanded
+                          }),
+                          children
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SidebarList.displayName = "SidebarList";
+
+exports.SidebarList = SidebarList;

package/dist/cjs/sidebar/sidebar-root.cjs

@@ -0,0 +1,63 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils$1 = require('@react-stately/utils');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var context = require('./context.cjs');
+
+const SidebarRoot = ({
+  className,
+  classNames,
+  defaultCollapsed,
+  onCollapsedChange,
+  tooltipProps,
+  tooltipTriggerProps,
+  ...originalProps
+}) => {
+  const [props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.sidebarStyles.variantKeys
+  );
+  const [isCollapsed, setCollapsed] = utils$1.useControlledState(
+    variantProps.isCollapsed,
+    defaultCollapsed ?? false,
+    onCollapsedChange
+  );
+  const slots = ouiTheme.sidebarStyles({ ...variantProps, isCollapsed });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Provider,
+    {
+      values: [
+        [context.SidebarStyleContext, { slots, classNames }],
+        [
+          context.SidebarCollapseContext,
+          { isCollapsed, setCollapsed, tooltipProps, tooltipTriggerProps }
+        ]
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "nav",
+        {
+          "data-collapsed": ouiTheme.dataAttr(isCollapsed),
+          className: slots.base({
+            className: className ?? classNames?.base
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "ul",
+            {
+              className: slots.ul({
+                className: classNames?.ul
+              }),
+              ...props
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+exports.SidebarRoot = SidebarRoot;

package/dist/cjs/sidebar/sidebar.cjs

@@ -0,0 +1,31 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var sidebarHeader = require('./sidebar-header.cjs');
+var sidebarItem = require('./sidebar-item.cjs');
+var sidebarList = require('./sidebar-list.cjs');
+var sidebarRoot = require('./sidebar-root.cjs');
+var utils = require('./utils.cjs');
+
+const generateSidebarItems = (items) => {
+  return items.map((item, index) => {
+    if (utils.isNestableItem(item)) {
+      const { label, subItems, ...rest } = item;
+      return /* @__PURE__ */ jsxRuntime.jsx(sidebarList.SidebarList, { label, ...rest, children: generateSidebarItems(subItems) }, index);
+    }
+    if (utils.isHeaderItem(item)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(sidebarHeader.SidebarHeader, { ...item }, index);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(sidebarItem.SidebarItem, { ...item }, index);
+  });
+};
+const Sidebar = ({ items, ...props }) => {
+  const sidebarItems = $670gB$react.useMemo(() => generateSidebarItems(items), [items]);
+  return /* @__PURE__ */ jsxRuntime.jsx(sidebarRoot.SidebarRoot, { ...props, children: sidebarItems });
+};
+
+exports.Sidebar = Sidebar;
+exports.generateSidebarItems = generateSidebarItems;

package/dist/cjs/sidebar/types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+'use strict';
+

package/dist/cjs/sidebar/utils.cjs

@@ -0,0 +1,12 @@
+"use strict";
+'use strict';
+
+const isNestableItem = (item) => {
+  return "subItems" in item;
+};
+const isHeaderItem = (item) => {
+  return "type" in item && item.type === "header";
+};
+
+exports.isHeaderItem = isHeaderItem;
+exports.isNestableItem = isNestableItem;

package/dist/cjs/system/l10n.cjs

@@ -0,0 +1,18 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+var string = require('@internationalized/string');
+var i18n = require('@react-aria/i18n');
+var reactAriaComponents = require('react-aria-components');
+
+function useLocalizedStringFormatter(strings, packageName) {
+  const { locale } = reactAriaComponents.useLocale();
+  const dictionary = i18n.useLocalizedStringDictionary(strings, packageName);
+  return $670gB$react.useMemo(
+    () => new string.LocalizedStringFormatter(locale, dictionary),
+    [locale, dictionary]
+  );
+}
+
+exports.useLocalizedStringFormatter = useLocalizedStringFormatter;

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

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+var utils = require('@react-aria/utils');
+
+function useElementWidth(ref) {
+  const [elementWidth, setElementWidth] = $670gB$react.useState(null);
+  const onResize = $670gB$react.useCallback(() => {
+    if (ref && ref.current && ref.current instanceof HTMLElement) {
+      setElementWidth(`${ref.current.offsetWidth}px`);
+    }
+  }, [ref]);
+  utils.useResizeObserver({
+    ref,
+    onResize
+  });
+  return elementWidth;
+}
+
+exports.useElementWidth = useElementWidth;

package/dist/cjs/tooltip/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+'use strict';
+
+var tooltip = require('./tooltip.cjs');
+
+
+
+exports.Tooltip = tooltip.Tooltip;
+exports.TooltipTrigger = tooltip.TooltipTrigger;

package/dist/cjs/tooltip/tooltip.cjs

@@ -0,0 +1,54 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+
+function Tooltip(originalProps) {
+  const [{ children, showArrow = true, classNames, ...props }, variantProps] = utils.mapPropsVariants(originalProps, ouiTheme.tooltipStyles.variantKeys);
+  const styles = ouiTheme.tooltipStyles(variantProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Tooltip,
+    {
+      isEntering: variantProps.isEntering,
+      isExiting: variantProps.isExiting,
+      offset: 10,
+      ...props,
+      className: ouiTheme.composeRenderProps(
+        props.className ?? classNames?.base,
+        (className, renderProps) => styles.base({
+          ...renderProps,
+          className
+        })
+      ),
+      children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        showArrow && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.OverlayArrow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: 8,
+            height: 8,
+            viewBox: "0 0 8 8",
+            className: ouiTheme.composeRenderProps(
+              classNames?.arrow,
+              (className, renderProps2) => styles.arrow({
+                className,
+                ...renderProps2
+              })
+            )(renderProps),
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0 L4 4 L8 0" })
+          }
+        ) }),
+        children
+      ] })
+    }
+  );
+}
+function TooltipTrigger(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.TooltipTrigger, { delay: 300, ...props });
+}
+
+exports.Tooltip = Tooltip;
+exports.TooltipTrigger = TooltipTrigger;

package/dist/esm/field/field.js

@@ -1,9 +1,9 @@
 "use strict";
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { Label as Label$1, Text, FieldError as FieldError$1, Group } from 'react-aria-components';
-import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
+import { forwardRef, useMemo } from 'react';
+import { Group, Label as Label$1, Text, FieldError as FieldError$1 } from 'react-aria-components';
+import { composeRenderProps, fieldGroupStyles, labelStyles, descriptionStyles, fieldErrorStyles } from '@opengovsg/oui-theme';
 import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 
 function Label({ size, className, ...props }) {
@@ -55,17 +55,20 @@ function FieldError({
     }
   );
 }
-function FieldGroup(props) {
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      ...props,
-      className: composeRenderProps(
-        props.className,
-        (className, renderProps) => fieldGroupStyles({ ...renderProps, className })
-      )
-    }
-  );
-}
+const FieldGroup = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(
+      Group,
+      {
+        ...props,
+        ref,
+        className: composeRenderProps(
+          props.className,
+          (className, renderProps) => fieldGroupStyles({ ...renderProps, className })
+        )
+      }
+    );
+  }
+);
 
 export { Description, FieldError, FieldErrorIcon, FieldGroup, Label };

package/dist/esm/index.js

@@ -69,6 +69,14 @@ export { TimeField } from './time-field/time-field.js';
 export { SearchField } from './search-field/search-field.js';
 export { Link } from './link/link.js';
 export { Breadcrumb, Breadcrumbs } from './breadcrumbs/breadcrumbs.js';
+export { Sidebar, generateSidebarItems } from './sidebar/sidebar.js';
+export { SidebarRoot } from './sidebar/sidebar-root.js';
+export { SidebarItem } from './sidebar/sidebar-item.js';
+export { SidebarList } from './sidebar/sidebar-list.js';
+export { SidebarHeader } from './sidebar/sidebar-header.js';
+export { Tooltip, TooltipTrigger } from './tooltip/tooltip.js';
+export { CountrySelect, FlagComponent, PhoneInput, PhoneNumberField } from './phone-number-field/phone-number-field.js';
+export { formatPhoneNumber, formatPhoneNumberIntl, isPossiblePhoneNumber, isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input';
 export { toast } from 'sonner';
 export { AvatarContext, useAvatarContext } from './avatar/avatar-context.js';
 export { AvatarGroup } from './avatar/avatar-group.js';