@opengovsg/oui 0.0.44 → 0.0.46

package/dist/esm/phone-number-field/index.js

@@ -0,0 +1,3 @@
+"use strict";
+export { CountrySelect, FlagComponent, PhoneInput, PhoneNumberField } from './phone-number-field.js';
+export { formatPhoneNumber, formatPhoneNumberIntl, isPossiblePhoneNumber, isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input';

package/dist/esm/phone-number-field/phone-number-field.js

@@ -0,0 +1,294 @@
+"use strict";
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useCallback } from 'react';
+import { TextField, Provider } from 'react-aria-components';
+import BasePhoneInput, { getCountryCallingCode } from 'react-phone-number-input';
+import flags from 'react-phone-number-input/flags';
+import NonInternationalBasePhoneInput from 'react-phone-number-input/input';
+import { phoneNumberFieldStyles, cn } from '@opengovsg/oui-theme';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import { useControllableState } from '../hooks/use-controllable-state.js';
+import { Input } from '../input/input.js';
+import { Select } from '../select/select.js';
+import { SelectItem } from '../select/select-item.js';
+import { useLocalizedStringFormatter } from '../system/l10n.js';
+import { mapPropsVariants } from '../system/utils.js';
+import { MOBILE_EXAMPLES } from './constants.js';
+import { PhoneInputContext, usePhoneInputContext } from './context.js';
+import { i18nStrings } from './i18n.js';
+
+const PhoneInput = ({
+  onClear,
+  onKeyDown,
+  ...props
+}) => {
+  const {
+    placeholderMode,
+    examples,
+    selectedCountry,
+    styles,
+    size,
+    classNames,
+    stringFormatter
+  } = usePhoneInputContext();
+  const inputPlaceholder = useMemo(() => {
+    const defaultPlaceholder = stringFormatter.format("Enter a phone number");
+    if (placeholderMode === "off") {
+      return props.placeholder ?? defaultPlaceholder;
+    }
+    const exampleNumber = selectedCountry && examples[selectedCountry];
+    if (placeholderMode === "aggressive") {
+      return exampleNumber ?? props.placeholder ?? defaultPlaceholder;
+    }
+    return props.placeholder ?? exampleNumber ?? defaultPlaceholder;
+  }, [
+    props.placeholder,
+    stringFormatter,
+    placeholderMode,
+    examples,
+    selectedCountry
+  ]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.metaKey && event.key === "Backspace") {
+        event.preventDefault();
+        onClear?.();
+      } else {
+        onKeyDown?.(event);
+      }
+    },
+    [onClear, onKeyDown]
+  );
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      variant: "unstyled",
+      placeholder: inputPlaceholder,
+      type: "tel",
+      autoComplete: "tel",
+      size,
+      ...props,
+      onKeyDown: handleKeyDown,
+      className: styles.input({
+        className: cn(classNames?.input, props.className)
+      })
+    }
+  );
+};
+const PhoneNumberField = (originalProps) => {
+  const [
+    {
+      placeholderMode = "polite",
+      examples = MOBILE_EXAMPLES,
+      label,
+      description,
+      errorMessage,
+      classNames,
+      isInvalid,
+      ...props
+    },
+    { variant = "international", ...variantProps }
+  ] = mapPropsVariants(originalProps, phoneNumberFieldStyles.variantKeys);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
+  const defaultCountry = useMemo(
+    () => props.defaultCountry ?? "SG",
+    [props.defaultCountry]
+  );
+  const [selectedCountry, setSelectedCountry] = useState(
+    defaultCountry
+  );
+  const [value, setValue] = useControllableState({
+    defaultValue: props.defaultValue,
+    value: props.value,
+    onChange: props.onChange
+  });
+  const triggerRef = useRef(null);
+  const { size = "md", isDisabled } = variantProps;
+  const styles = phoneNumberFieldStyles({
+    ...variantProps,
+    variant,
+    isDisabled,
+    size
+  });
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      isDisabled,
+      className: styles.base({
+        className: classNames?.base
+      }),
+      isInvalid,
+      children: [
+        label && /* @__PURE__ */ jsx(Label, { size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsx(
+          Provider,
+          {
+            values: [
+              [
+                PhoneInputContext,
+                {
+                  triggerRef,
+                  placeholderMode,
+                  examples,
+                  selectedCountry,
+                  classNames,
+                  styles,
+                  variant,
+                  ...variantProps,
+                  size,
+                  stringFormatter
+                }
+              ]
+            ],
+            children: /* @__PURE__ */ jsx(
+              FieldGroup,
+              {
+                isInvalid,
+                isDisabled,
+                "data-variant": variant,
+                ref: triggerRef,
+                className: styles.group({
+                  className: classNames?.group
+                }),
+                children: variant === "international" ? /* @__PURE__ */ jsx(
+                  BasePhoneInput,
+                  {
+                    disabled: isDisabled,
+                    className: styles.wrapper({
+                      className: classNames?.wrapper
+                    }),
+                    international: false,
+                    addInternationalOption: false,
+                    defaultCountry: selectedCountry,
+                    countryOptionsOrder: [defaultCountry],
+                    onCountryChange: setSelectedCountry,
+                    countrySelectComponent: CountrySelect,
+                    inputComponent: PhoneInput,
+                    onClear: () => setValue(void 0),
+                    ...props,
+                    value,
+                    onChange: (v) => setValue(v)
+                  }
+                ) : /* @__PURE__ */ jsxs("div", { className: styles.wrapper({ className: classNames?.wrapper }), children: [
+                  /* @__PURE__ */ jsx(
+                    NonInternationalBasePhoneInput,
+                    {
+                      country: defaultCountry,
+                      onClear: () => setValue(void 0),
+                      ...props,
+                      inputComponent: PhoneInput,
+                      value,
+                      onChange: setValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FlagComponent,
+                    {
+                      className: styles.flag({ className: classNames?.flag }),
+                      country: defaultCountry,
+                      countryName: stringFormatter.format(defaultCountry)
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        description && /* @__PURE__ */ jsx(Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsx(FieldError, { size, className: classNames?.error, children: errorMessage })
+      ]
+    }
+  );
+};
+function CountrySelect(props) {
+  const { options, value, onChange, onBlur, onFocus } = props;
+  const { triggerRef, classNames, styles, size, isDisabled, stringFormatter } = usePhoneInputContext();
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      size,
+      popoverProps: {
+        // Position popover relative to the wrapping div instead of the Button
+        triggerRef
+      },
+      classNames: {
+        base: styles.select({ className: classNames?.select }),
+        trigger: styles.selectTrigger({
+          className: classNames?.selectTrigger
+        }),
+        icon: styles.selectIcon({ className: classNames?.selectIcon }),
+        // Apply same styles as trigger for consistent sizing
+        list: styles.selectList({ className: classNames?.selectList }),
+        popover: styles.selectPopover({ className: classNames?.selectPopover })
+      },
+      enableSearch: true,
+      variant: "unstyled",
+      isDisabled,
+      value,
+      onChange: (v) => onChange(v),
+      items: options,
+      renderSelectValue: () => /* @__PURE__ */ jsx(
+        FlagComponent,
+        {
+          className: styles.flag({ className: classNames?.flag }),
+          country: value,
+          countryName: value && stringFormatter.format(value)
+        }
+      ),
+      onBlur,
+      onFocus,
+      children: (country) => {
+        const l10nLabel = country.value ? stringFormatter.format(country.value) : "";
+        return /* @__PURE__ */ jsxs(
+          SelectItem,
+          {
+            classNames: {
+              text: styles.selectItem({ className: classNames?.selectItem })
+            },
+            textValue: `${l10nLabel} ${country.label}`,
+            id: country.value,
+            children: [
+              /* @__PURE__ */ jsx(
+                FlagComponent,
+                {
+                  className: styles.flag({ className: classNames?.flag }),
+                  country: country.value,
+                  countryName: l10nLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: styles.selectItemLabel({
+                    className: classNames?.selectItemLabel
+                  }),
+                  children: l10nLabel
+                }
+              ),
+              country.value && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: styles.selectItemCountryCode({
+                    className: classNames?.selectItemCountryCode
+                  }),
+                  children: `+${getCountryCallingCode(country.value)}`
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+const FlagComponent = ({
+  country,
+  countryName,
+  className
+}) => {
+  const Flag = country && flags[country];
+  return /* @__PURE__ */ jsx("span", { className, children: Flag && /* @__PURE__ */ jsx(Flag, { title: countryName }) });
+};
+
+export { CountrySelect, FlagComponent, PhoneInput, PhoneNumberField };

package/dist/esm/phone-number-field/types.js

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

package/dist/esm/select/i18n.js

@@ -0,0 +1,21 @@
+"use strict";
+const i18nStrings = {
+  "en-SG": {
+    "Search...": "Search...",
+    "Search options": "Search options"
+  },
+  "zh-SG": {
+    "Search...": "\u641C\u7D22...",
+    "Search options": "\u641C\u7D22\u9009\u9879"
+  },
+  "ms-SG": {
+    "Search...": "Cari...",
+    "Search options": "Cari pilihan"
+  },
+  "ta-SG": {
+    "Search...": "\u0BA4\u0BC7\u0B9F\u0BC1...",
+    "Search options": "\u0BA4\u0BC7\u0B9F\u0BB2\u0BCD \u0BB5\u0BBF\u0BB0\u0BC1\u0BAA\u0BCD\u0BAA\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
+  }
+};
+
+export { i18nStrings };

package/dist/esm/select/select.js

@@ -8,28 +8,12 @@ import { selectStyles, cn, composeRenderProps } from '@opengovsg/oui-theme';
 import { Button } from '../button/button.js';
 import { Label, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
+import { useElementWidth } from '../system/react-utils/sizing.js';
 import { mapPropsVariants } from '../system/utils.js';
+import { i18nStrings } from './i18n.js';
 import { SelectVariantContext } from './select-variant-context.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 
-const i18nStrings = {
-  "en-SG": {
-    searchPlaceholder: "Search...",
-    searchAriaLabel: "Search options"
-  },
-  "zh-SG": {
-    searchPlaceholder: "\u641C\u7D22...",
-    searchAriaLabel: "\u641C\u7D22\u9009\u9879"
-  },
-  "ms-SG": {
-    searchPlaceholder: "Cari...",
-    searchAriaLabel: "Cari pilihan"
-  },
-  "ta-SG": {
-    searchPlaceholder: "\u0BA4\u0BC7\u0B9F\u0BC1...",
-    searchAriaLabel: "\u0BA4\u0BC7\u0B9F\u0BB2\u0BCD \u0BB5\u0BBF\u0BB0\u0BC1\u0BAA\u0BCD\u0BAA\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
-  }
-};
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {
     case "xs":
@@ -47,7 +31,7 @@ function Select({
   errorMessage,
   ...originalProps
 }) {
-  const formatter = useLocalizedStringFormatter(i18nStrings);
+  const stringFormatter = useLocalizedStringFormatter(i18nStrings);
   const [_props, variantProps] = mapPropsVariants(
     originalProps,
     selectStyles.variantKeys
@@ -59,9 +43,12 @@ function Select({
     enableSearch = false,
     searchPlaceholder,
     searchIcon,
+    renderSelectValue,
+    popoverProps,
     ...props
   } = _props;
   const styles = selectStyles(variantProps);
+  const triggerWidth = useElementWidth(popoverProps?.triggerRef);
   const { contains } = useFilter({ sensitivity: "base" });
   const layoutOptions = useMemo(() => {
     return {
@@ -128,7 +115,8 @@ function Select({
                 {
                   className: styles.selectedText({
                     className: classNames?.selectedText
-                  })
+                  }),
+                  children: renderSelectValue
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -151,31 +139,43 @@ function Select({
           }
         ),
         /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage }),
-        /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: enableSearch ? /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
-          /* @__PURE__ */ jsxs(
-            SearchField,
-            {
-              autoFocus: true,
-              "aria-label": formatter.format("searchAriaLabel"),
-              className: styles.searchField({
-                className: classNames?.searchField
-              }),
-              children: [
-                renderedSearchIcon,
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    placeholder: searchPlaceholder ?? formatter.format("searchPlaceholder"),
-                    className: styles.searchInput({
-                      className: classNames?.searchInput
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          listContent
-        ] }) : listContent })
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            className: styles.popover({ className: classNames?.popover }),
+            ...triggerWidth !== null ? {
+              style: {
+                "--trigger-width": triggerWidth
+              }
+            } : {},
+            ...popoverProps,
+            children: enableSearch ? /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+              /* @__PURE__ */ jsxs(
+                SearchField,
+                {
+                  autoFocus: true,
+                  "aria-label": stringFormatter.format("Search options"),
+                  className: styles.searchField({
+                    className: classNames?.searchField
+                  }),
+                  children: [
+                    renderedSearchIcon,
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        placeholder: searchPlaceholder ?? stringFormatter.format("Search..."),
+                        className: styles.searchInput({
+                          className: classNames?.searchInput
+                        })
+                      }
+                    )
+                  ]
+                }
+              ),
+              listContent
+            ] }) : listContent
+          }
+        )
       ]
     }
   ) });

package/dist/esm/sidebar/context.js

@@ -0,0 +1,17 @@
+"use strict";
+"use client";
+import { createContext } from '../system/react-utils/context.js';
+
+const [SidebarStyleContext, useSidebarStyleContext] = createContext({
+  name: "SidebarStyleContext"
+});
+const [SidebarCollapseContext, useSidebarCollapseContext] = createContext({
+  name: "SidebarCollapseContext"
+});
+const [SidebarNestContext, useSidebarNestContext] = createContext({
+  name: "SidebarNestContext",
+  strict: false,
+  defaultValue: { isNested: false, isExpanded: false }
+});
+
+export { SidebarCollapseContext, SidebarNestContext, SidebarStyleContext, useSidebarCollapseContext, useSidebarNestContext, useSidebarStyleContext };

package/dist/esm/sidebar/i18n.js

@@ -0,0 +1,21 @@
+"use strict";
+const i18nStrings = {
+  "en-SG": {
+    "Expand sidebar section": "Expand sidebar section",
+    "Collapse sidebar section": "Collapse sidebar section"
+  },
+  "zh-SG": {
+    "Expand sidebar section": "\u5C55\u5F00\u4FA7\u8FB9\u680F\u90E8\u5206",
+    "Collapse sidebar section": "\u6298\u53E0\u4FA7\u8FB9\u680F\u90E8\u5206"
+  },
+  "ms-SG": {
+    "Expand sidebar section": "Perluas bahagian bar sisi",
+    "Collapse sidebar section": "Kuncupkan bahagian bar sisi"
+  },
+  "ta-SG": {
+    "Expand sidebar section": "\u0BAA\u0B95\u0BCD\u0B95\u0BB5\u0BBE\u0B9F\u0BCD\u0B9F\u0BC1\u0BAA\u0BCD \u0BAA\u0B95\u0BC1\u0BA4\u0BBF\u0BAF\u0BC8 \u0BB5\u0BBF\u0BB0\u0BBF\u0BB5\u0BBE\u0B95\u0BCD\u0B95\u0BC1",
+    "Collapse sidebar section": "\u0BAA\u0B95\u0BCD\u0B95\u0BB5\u0BBE\u0B9F\u0BCD\u0B9F\u0BC1\u0BAA\u0BCD \u0BAA\u0B95\u0BC1\u0BA4\u0BBF\u0BAF\u0BC8 \u0B9A\u0BC1\u0BB0\u0BC1\u0B95\u0BCD\u0B95\u0BC1"
+  }
+};
+
+export { i18nStrings };

package/dist/esm/sidebar/index.js

@@ -0,0 +1,6 @@
+"use strict";
+export { Sidebar, generateSidebarItems } from './sidebar.js';
+export { SidebarRoot } from './sidebar-root.js';
+export { SidebarItem } from './sidebar-item.js';
+export { SidebarList } from './sidebar-list.js';
+export { SidebarHeader } from './sidebar-header.js';

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

@@ -0,0 +1,38 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { renderChildren } from '../system/react-utils/children.js';
+import { forwardRef } from '../system/utils.js';
+import { useSidebarStyleContext } from './context.js';
+
+const SidebarHeader = forwardRef(
+  ({ children, startContent, endContent, ...props }, ref) => {
+    const { slots, classNames } = useSidebarStyleContext();
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: slots.headerLi({
+          className: classNames?.headerLi
+        }),
+        children: /* @__PURE__ */ jsxs(
+          "h2",
+          {
+            className: slots.header({
+              className: classNames?.header
+            }),
+            ref,
+            ...props,
+            children: [
+              startContent,
+              renderChildren({}, children),
+              endContent
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+export { SidebarHeader };

package/dist/esm/sidebar/sidebar-item.js

@@ -0,0 +1,59 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Link } from 'react-aria-components';
+import { dataAttr } from '@opengovsg/oui-theme';
+import { renderChildren } from '../system/react-utils/children.js';
+import { forwardRef } from '../system/utils.js';
+import { TooltipTrigger, Tooltip } from '../tooltip/tooltip.js';
+import { useSidebarStyleContext, useSidebarNestContext, useSidebarCollapseContext } from './context.js';
+
+const SidebarItem = forwardRef(
+  ({ children, startContent, endContent, tooltip, isSelected, ...props }, ref) => {
+    const { slots, classNames } = useSidebarStyleContext();
+    const { isNested, isExpanded } = useSidebarNestContext() ?? {};
+    const { isCollapsed, tooltipProps, tooltipTriggerProps } = useSidebarCollapseContext() ?? {};
+    const dataSelected = useMemo(() => {
+      if (typeof isSelected === "function") {
+        return isSelected();
+      }
+      return isSelected;
+    }, [isSelected]);
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        "data-selected": dataAttr(dataSelected),
+        "data-nested": dataAttr(isNested),
+        className: slots.item({
+          isNested,
+          className: classNames?.item
+        }),
+        ref,
+        children: /* @__PURE__ */ jsxs(TooltipTrigger, { delay: 0, ...tooltipTriggerProps, children: [
+          /* @__PURE__ */ jsx(
+            Link,
+            {
+              "aria-label": isCollapsed ? tooltip : void 0,
+              ...props,
+              className: slots.label({
+                isNested,
+                isExpanded,
+                className: classNames?.label
+              }),
+              children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                startContent,
+                !isCollapsed && renderChildren(renderProps, children),
+                !isCollapsed && endContent
+              ] })
+            }
+          ),
+          isCollapsed && /* @__PURE__ */ jsx(Tooltip, { placement: "end", ...tooltipProps, children: tooltip })
+        ] })
+      }
+    );
+  }
+);
+SidebarItem.displayName = "SidebarItem";
+
+export { SidebarItem };