@opengovsg/oui 0.0.44 → 0.0.46

package/dist/cjs/phone-number-field/index.cjs

@@ -0,0 +1,32 @@
+"use strict";
+'use strict';
+
+var phoneNumberField = require('./phone-number-field.cjs');
+var BasePhoneInput = require('react-phone-number-input');
+
+
+
+exports.CountrySelect = phoneNumberField.CountrySelect;
+exports.FlagComponent = phoneNumberField.FlagComponent;
+exports.PhoneInput = phoneNumberField.PhoneInput;
+exports.PhoneNumberField = phoneNumberField.PhoneNumberField;
+Object.defineProperty(exports, "formatPhoneNumber", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.formatPhoneNumber; }
+});
+Object.defineProperty(exports, "formatPhoneNumberIntl", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.formatPhoneNumberIntl; }
+});
+Object.defineProperty(exports, "isPossiblePhoneNumber", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.isPossiblePhoneNumber; }
+});
+Object.defineProperty(exports, "isValidPhoneNumber", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.isValidPhoneNumber; }
+});
+Object.defineProperty(exports, "parsePhoneNumber", {
+  enumerable: true,
+  get: function () { return BasePhoneInput.parsePhoneNumber; }
+});

package/dist/cjs/phone-number-field/phone-number-field.cjs

@@ -0,0 +1,299 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var BasePhoneInput = require('react-phone-number-input');
+var flags = require('react-phone-number-input/flags');
+var NonInternationalBasePhoneInput = require('react-phone-number-input/input');
+var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
+var useControllableState = require('../hooks/use-controllable-state.cjs');
+var input = require('../input/input.cjs');
+var select = require('../select/select.cjs');
+var selectItem = require('../select/select-item.cjs');
+var l10n = require('../system/l10n.cjs');
+var utils = require('../system/utils.cjs');
+var constants = require('./constants.cjs');
+var context = require('./context.cjs');
+var i18n = require('./i18n.cjs');
+
+const PhoneInput = ({
+  onClear,
+  onKeyDown,
+  ...props
+}) => {
+  const {
+    placeholderMode,
+    examples,
+    selectedCountry,
+    styles,
+    size,
+    classNames,
+    stringFormatter
+  } = context.usePhoneInputContext();
+  const inputPlaceholder = $670gB$react.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 = $670gB$react.useCallback(
+    (event) => {
+      if (event.metaKey && event.key === "Backspace") {
+        event.preventDefault();
+        onClear?.();
+      } else {
+        onKeyDown?.(event);
+      }
+    },
+    [onClear, onKeyDown]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    input.Input,
+    {
+      variant: "unstyled",
+      placeholder: inputPlaceholder,
+      type: "tel",
+      autoComplete: "tel",
+      size,
+      ...props,
+      onKeyDown: handleKeyDown,
+      className: styles.input({
+        className: ouiTheme.cn(classNames?.input, props.className)
+      })
+    }
+  );
+};
+const PhoneNumberField = (originalProps) => {
+  const [
+    {
+      placeholderMode = "polite",
+      examples = constants.MOBILE_EXAMPLES,
+      label,
+      description,
+      errorMessage,
+      classNames,
+      isInvalid,
+      ...props
+    },
+    { variant = "international", ...variantProps }
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.phoneNumberFieldStyles.variantKeys);
+  const stringFormatter = l10n.useLocalizedStringFormatter(i18n.i18nStrings);
+  const defaultCountry = $670gB$react.useMemo(
+    () => props.defaultCountry ?? "SG",
+    [props.defaultCountry]
+  );
+  const [selectedCountry, setSelectedCountry] = $670gB$react.useState(
+    defaultCountry
+  );
+  const [value, setValue] = useControllableState.useControllableState({
+    defaultValue: props.defaultValue,
+    value: props.value,
+    onChange: props.onChange
+  });
+  const triggerRef = $670gB$react.useRef(null);
+  const { size = "md", isDisabled } = variantProps;
+  const styles = ouiTheme.phoneNumberFieldStyles({
+    ...variantProps,
+    variant,
+    isDisabled,
+    size
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.TextField,
+    {
+      isDisabled,
+      className: styles.base({
+        className: classNames?.base
+      }),
+      isInvalid,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Provider,
+          {
+            values: [
+              [
+                context.PhoneInputContext,
+                {
+                  triggerRef,
+                  placeholderMode,
+                  examples,
+                  selectedCountry,
+                  classNames,
+                  styles,
+                  variant,
+                  ...variantProps,
+                  size,
+                  stringFormatter
+                }
+              ]
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              field.FieldGroup,
+              {
+                isInvalid,
+                isDisabled,
+                "data-variant": variant,
+                ref: triggerRef,
+                className: styles.group({
+                  className: classNames?.group
+                }),
+                children: variant === "international" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: styles.wrapper({ className: classNames?.wrapper }), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    NonInternationalBasePhoneInput,
+                    {
+                      country: defaultCountry,
+                      onClear: () => setValue(void 0),
+                      ...props,
+                      inputComponent: PhoneInput,
+                      value,
+                      onChange: setValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FlagComponent,
+                    {
+                      className: styles.flag({ className: classNames?.flag }),
+                      country: defaultCountry,
+                      countryName: stringFormatter.format(defaultCountry)
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size, className: classNames?.error, children: errorMessage })
+      ]
+    }
+  );
+};
+function CountrySelect(props) {
+  const { options, value, onChange, onBlur, onFocus } = props;
+  const { triggerRef, classNames, styles, size, isDisabled, stringFormatter } = context.usePhoneInputContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          selectItem.SelectItem,
+          {
+            classNames: {
+              text: styles.selectItem({ className: classNames?.selectItem })
+            },
+            textValue: `${l10nLabel} ${country.label}`,
+            id: country.value,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FlagComponent,
+                {
+                  className: styles.flag({ className: classNames?.flag }),
+                  country: country.value,
+                  countryName: l10nLabel
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: styles.selectItemLabel({
+                    className: classNames?.selectItemLabel
+                  }),
+                  children: l10nLabel
+                }
+              ),
+              country.value && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: styles.selectItemCountryCode({
+                    className: classNames?.selectItemCountryCode
+                  }),
+                  children: `+${BasePhoneInput.getCountryCallingCode(country.value)}`
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+const FlagComponent = ({
+  country,
+  countryName,
+  className
+}) => {
+  const Flag = country && flags[country];
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: Flag && /* @__PURE__ */ jsxRuntime.jsx(Flag, { title: countryName }) });
+};
+
+exports.CountrySelect = CountrySelect;
+exports.FlagComponent = FlagComponent;
+exports.PhoneInput = PhoneInput;
+exports.PhoneNumberField = PhoneNumberField;

package/dist/cjs/phone-number-field/types.cjs

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

package/dist/cjs/select/i18n.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'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"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

package/dist/cjs/select/select.cjs

@@ -10,28 +10,12 @@ var ouiTheme = require('@opengovsg/oui-theme');
 var button = require('../button/button.cjs');
 var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
+var sizing = require('../system/react-utils/sizing.cjs');
 var utils = require('../system/utils.cjs');
+var i18n = require('./i18n.cjs');
 var selectVariantContext = require('./select-variant-context.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 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":
@@ -49,7 +33,7 @@ function Select({
   errorMessage,
   ...originalProps
 }) {
-  const formatter = reactAria.useLocalizedStringFormatter(i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
   const [_props, variantProps] = utils.mapPropsVariants(
     originalProps,
     ouiTheme.selectStyles.variantKeys
@@ -61,9 +45,12 @@ function Select({
     enableSearch = false,
     searchPlaceholder,
     searchIcon,
+    renderSelectValue,
+    popoverProps,
     ...props
   } = _props;
   const styles = ouiTheme.selectStyles(variantProps);
+  const triggerWidth = sizing.useElementWidth(popoverProps?.triggerRef);
   const { contains } = reactAriaComponents.useFilter({ sensitivity: "base" });
   const layoutOptions = $670gB$react.useMemo(() => {
     return {
@@ -130,7 +117,8 @@ function Select({
                 {
                   className: styles.selectedText({
                     className: classNames?.selectedText
-                  })
+                  }),
+                  children: renderSelectValue
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -153,31 +141,43 @@ function Select({
           }
         ),
         /* @__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: enableSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { filter: contains, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            reactAriaComponents.SearchField,
-            {
-              autoFocus: true,
-              "aria-label": formatter.format("searchAriaLabel"),
-              className: styles.searchField({
-                className: classNames?.searchField
-              }),
-              children: [
-                renderedSearchIcon,
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactAriaComponents.Input,
-                  {
-                    placeholder: searchPlaceholder ?? formatter.format("searchPlaceholder"),
-                    className: styles.searchInput({
-                      className: classNames?.searchInput
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          listContent
-        ] }) : listContent })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          popover.Popover,
+          {
+            className: styles.popover({ className: classNames?.popover }),
+            ...triggerWidth !== null ? {
+              style: {
+                "--trigger-width": triggerWidth
+              }
+            } : {},
+            ...popoverProps,
+            children: enableSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { filter: contains, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                reactAriaComponents.SearchField,
+                {
+                  autoFocus: true,
+                  "aria-label": stringFormatter.format("Search options"),
+                  className: styles.searchField({
+                    className: classNames?.searchField
+                  }),
+                  children: [
+                    renderedSearchIcon,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactAriaComponents.Input,
+                      {
+                        placeholder: searchPlaceholder ?? stringFormatter.format("Search..."),
+                        className: styles.searchInput({
+                          className: classNames?.searchInput
+                        })
+                      }
+                    )
+                  ]
+                }
+              ),
+              listContent
+            ] }) : listContent
+          }
+        )
       ]
     }
   ) });

package/dist/cjs/sidebar/context.cjs

@@ -0,0 +1,24 @@
+"use strict";
+"use client";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [SidebarStyleContext, useSidebarStyleContext] = context.createContext({
+  name: "SidebarStyleContext"
+});
+const [SidebarCollapseContext, useSidebarCollapseContext] = context.createContext({
+  name: "SidebarCollapseContext"
+});
+const [SidebarNestContext, useSidebarNestContext] = context.createContext({
+  name: "SidebarNestContext",
+  strict: false,
+  defaultValue: { isNested: false, isExpanded: false }
+});
+
+exports.SidebarCollapseContext = SidebarCollapseContext;
+exports.SidebarNestContext = SidebarNestContext;
+exports.SidebarStyleContext = SidebarStyleContext;
+exports.useSidebarCollapseContext = useSidebarCollapseContext;
+exports.useSidebarNestContext = useSidebarNestContext;
+exports.useSidebarStyleContext = useSidebarStyleContext;

package/dist/cjs/sidebar/i18n.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'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"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

package/dist/cjs/sidebar/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+'use strict';
+
+var sidebar = require('./sidebar.cjs');
+var sidebarRoot = require('./sidebar-root.cjs');
+var sidebarItem = require('./sidebar-item.cjs');
+var sidebarList = require('./sidebar-list.cjs');
+var sidebarHeader = require('./sidebar-header.cjs');
+
+
+
+exports.Sidebar = sidebar.Sidebar;
+exports.generateSidebarItems = sidebar.generateSidebarItems;
+exports.SidebarRoot = sidebarRoot.SidebarRoot;
+exports.SidebarItem = sidebarItem.SidebarItem;
+exports.SidebarList = sidebarList.SidebarList;
+exports.SidebarHeader = sidebarHeader.SidebarHeader;

package/dist/cjs/sidebar/sidebar-header.cjs

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

package/dist/cjs/sidebar/sidebar-item.cjs

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