@opengovsg/oui 0.0.7 → 0.0.8

package/dist/cjs/index.cjs

@@ -1,6 +1,7 @@
 "use strict";
 'use strict';
 
+var input = require('./input/input.cjs');
 var useControllableState = require('./hooks/use-controllable-state.cjs');
 var button = require('./button/button.cjs');
 var govtBanner = require('./govt-banner/govt-banner.cjs');
@@ -10,19 +11,24 @@ var spinner = require('./spinner/spinner.cjs');
 var useSpinner = require('./spinner/use-spinner.cjs');
 var toggle = require('./toggle/toggle.cjs');
 var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
-var input = require('./input/input.cjs');
 var textField = require('./text-field/text-field.cjs');
 var field = require('./field/field.cjs');
 var textArea = require('./text-area/text-area.cjs');
 var textAreaField = require('./text-area-field/text-area-field.cjs');
 var comboBox = require('./combo-box/combo-box.cjs');
 var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
+var comboBoxItem = require('./combo-box/combo-box-item.cjs');
+var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
 var banner = require('./banner/banner.cjs');
 var tagField = require('./tag-field/tag-field.cjs');
 var select = require('./select/select.cjs');
+var selectItem = require('./select/select-item.cjs');
+var selectVariantContext = require('./select/select-variant-context.cjs');
+var badge = require('./badge/badge.cjs');
 
 
 
+exports.Input = input.Input;
 exports.useControllableState = useControllableState.useControllableState;
 exports.Button = button.Button;
 exports.GovtBanner = govtBanner.GovtBanner;
@@ -32,7 +38,6 @@ exports.Spinner = spinner.Spinner;
 exports.useSpinner = useSpinner.useSpinner;
 exports.Toggle = toggle.Toggle;
 exports.SkipNavLink = skipNavLink.SkipNavLink;
-exports.Input = input.Input;
 exports.TextField = textField.TextField;
 exports.Description = field.Description;
 exports.FieldError = field.FieldError;
@@ -42,8 +47,14 @@ exports.TextArea = textArea.TextArea;
 exports.TextAreaField = textAreaField.TextAreaField;
 exports.ComboBox = comboBox.ComboBox;
 exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
-exports.ComboBoxItem = comboBox.ComboBoxItem;
 exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
+exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
+exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
+exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
 exports.Banner = banner.Banner;
 exports.TagField = tagField.TagField;
 exports.Select = select.Select;
+exports.SelectItem = selectItem.SelectItem;
+exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
+exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
+exports.Badge = badge.Badge;

package/dist/cjs/select/index.cjs

@@ -2,7 +2,12 @@
 'use strict';
 
 var select = require('./select.cjs');
+var selectItem = require('./select-item.cjs');
+var selectVariantContext = require('./select-variant-context.cjs');
 
 
 
 exports.Select = select.Select;
+exports.SelectItem = selectItem.SelectItem;
+exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
+exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/select/select-variant-context.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 'use strict';
 
 var context = require('../system/react-utils/context.cjs');

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

@@ -2,7 +2,9 @@
 'use strict';
 
 var context = require('./context.cjs');
+var refs = require('./refs.cjs');
 
 
 
 exports.createContext = context.createContext;
+exports.useDomRef = refs.useDomRef;

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

@@ -0,0 +1,12 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+function useDomRef(ref) {
+  const domRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => domRef.current);
+  return domRef;
+}
+
+exports.useDomRef = useDomRef;

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -56,8 +57,8 @@ const TagFieldListInner = (props, ref) => {
         item,
         isHighlighted: highlightedIndex === virtualRow.index,
         key: virtualRow.key,
-        ...itemProps,
-        classNames: itemClassNames
+        itemClassNames,
+        ...itemProps
       };
       if (typeof props.children === "function") {
         return props.children(childProps);

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -6,13 +6,13 @@ 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 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');
 
 function TagField({
   classNames,

package/dist/esm/badge/badge.js

@@ -0,0 +1,40 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { useBadge } from './use-badge.js';
+import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
+
+const Badge = forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    slots,
+    classNames,
+    getChipProps,
+    getCloseButtonProps,
+    startContent,
+    endContent,
+    isCloseable
+  } = useBadge({ ...props, ref });
+  const start = useMemo(() => {
+    if (props.variant === "dot" && !startContent) {
+      return /* @__PURE__ */ jsx("span", { className: slots.dot({ className: classNames?.dot }) });
+    }
+    return startContent;
+  }, [props.variant, startContent, slots, classNames?.dot]);
+  const end = useMemo(() => {
+    if (isCloseable) {
+      return /* @__PURE__ */ jsx("span", { ...getCloseButtonProps(), children: endContent ?? /* @__PURE__ */ jsx(X, { className: "size-full" }) });
+    }
+    return endContent;
+  }, [endContent, getCloseButtonProps, isCloseable]);
+  return /* @__PURE__ */ jsxs(Component, { ...getChipProps(), children: [
+    start,
+    /* @__PURE__ */ jsx("span", { className: slots.content({ className: classNames?.content }), children }),
+    end
+  ] });
+});
+Badge.displayName = "Badge";
+
+export { Badge };

package/dist/esm/badge/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Badge } from './badge.js';

package/dist/esm/badge/use-badge.js

@@ -0,0 +1,109 @@
+"use strict";
+import { useMemo, useCallback, cloneElement, isValidElement } from 'react';
+import { mergeProps } from '@react-aria/utils';
+import { useMessageFormatter, useFocusRing, usePress } from 'react-aria';
+import { useDeepCompareMemo } from 'use-deep-compare';
+import { badgeStyles, cn, badgeCloseButtonStyles } from '@opengovsg/oui-theme';
+import { mapPropsVariants } from '../system/utils.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const i18nStrings = {
+  "en-SG": {
+    close: "Close badge"
+  },
+  "zh-SG": {
+    close: "\u5173\u95ED\u5FBD\u7AE0"
+  },
+  "ms-SG": {
+    close: "Tutup lencana"
+  },
+  "ta-SG": {
+    close: "\u0BAA\u0BC7\u0B9F\u0BCD\u0B9C\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
+  }
+};
+function useBadge(originalProps) {
+  const [_props, variantProps] = mapPropsVariants(
+    originalProps,
+    badgeStyles.variantKeys
+  );
+  const {
+    ref,
+    as,
+    children,
+    startContent,
+    endContent,
+    onClose,
+    classNames,
+    className,
+    ...props
+  } = _props;
+  const domRef = useDomRef(ref);
+  const Component = useMemo(() => as || "div", [as]);
+  const baseClassName = cn(classNames?.base, className);
+  const formatMessage = useMessageFormatter(i18nStrings);
+  const isCloseable = variantProps.isCloseable || !!onClose;
+  const {
+    focusProps: closeFocusProps,
+    isFocusVisible: isCloseButtonFocusVisible
+  } = useFocusRing();
+  const slots = useDeepCompareMemo(
+    () => ({
+      ...badgeStyles({ isCloseable, ...variantProps }),
+      closeButton: badgeCloseButtonStyles
+    }),
+    [variantProps, isCloseable, badgeStyles, badgeCloseButtonStyles]
+  );
+  const { pressProps: closePressProps } = usePress({
+    isDisabled: !!variantProps?.isDisabled,
+    onPress: onClose
+  });
+  const getContentClone = useCallback(
+    (content) => isValidElement(content) ? cloneElement(content, {
+      // @ts-expect-error types are not full
+      className: content.props?.className
+    }) : null,
+    []
+  );
+  const getChipProps = useCallback(() => {
+    return {
+      ref: domRef,
+      className: slots.base({ className: baseClassName }),
+      "aria-disabled": variantProps?.isDisabled,
+      ...props
+    };
+  }, [baseClassName, domRef, props, slots, variantProps?.isDisabled]);
+  const getCloseButtonProps = useCallback(() => {
+    return {
+      role: "button",
+      tabIndex: 0,
+      className: slots.closeButton({
+        size: variantProps?.size,
+        className: classNames?.closeButton,
+        isFocusVisible: isCloseButtonFocusVisible
+      }),
+      "aria-label": formatMessage("close"),
+      ...mergeProps(closePressProps, closeFocusProps)
+    };
+  }, [
+    classNames?.closeButton,
+    closeFocusProps,
+    closePressProps,
+    formatMessage,
+    isCloseButtonFocusVisible,
+    slots,
+    variantProps?.size
+  ]);
+  return {
+    Component,
+    children,
+    slots,
+    classNames,
+    isCloseable,
+    startContent: getContentClone(startContent),
+    endContent: getContentClone(endContent),
+    getCloseButtonProps,
+    getChipProps
+  };
+}
+
+export { useBadge };

package/dist/esm/combo-box/combo-box-fuzzy.js

@@ -1,10 +1,13 @@
 "use strict";
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDeferredValue, useMemo, useState, useCallback } from 'react';
 import fuzzysort from 'fuzzysort';
-import { comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
-import { ComboBox, ComboBoxItem } from './combo-box.js';
+import { Text } from 'react-aria-components';
+import { comboBoxStyles, comboBoxItemStyles, comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
+import { mapPropsVariants } from '../system/utils.js';
+import { ComboBox } from './combo-box.js';
+import { ComboBoxItem } from './combo-box-item.js';
 
 function HighlightedText({
   result,
@@ -27,18 +30,24 @@ function HighlightedText({
     i
   ));
 }
-function ComboBoxFuzzy({
-  items,
-  itemClassNames,
-  onSelectionChange: onSelectionChangeProp,
-  onInputChange: onInputChangeProp,
-  ...props
-}) {
-  const deferredInputValue = useDeferredValue(props.inputValue);
+function ComboBoxFuzzy(originalProps) {
+  const [_props, variantProps] = mapPropsVariants(
+    originalProps,
+    comboBoxStyles.variantKeys
+  );
+  const {
+    items,
+    itemClassNames,
+    onSelectionChange: onSelectionChangeProp,
+    onInputChange: onInputChangeProp,
+    inputValue,
+    ...props
+  } = _props;
+  const deferredInputValue = useDeferredValue(inputValue);
   const preparedItems = useMemo(() => {
     return items?.map((item) => ({
       ...item,
-      prepared: fuzzysort.prepare(item.name)
+      prepared: fuzzysort.prepare(item.textValue)
     })) ?? [];
   }, [items]);
   const [filteredResults, setFilteredResults] = useState({ items, result: {} });
@@ -61,7 +70,7 @@ function ComboBoxFuzzy({
       }).reduce(
         (acc, result) => {
           acc.items.push(result.obj);
-          acc.result[result.obj.name] = result;
+          acc.result[result.obj.textValue] = result;
           return acc;
         },
         { items: [], result: {} }
@@ -70,34 +79,47 @@ function ComboBoxFuzzy({
     },
     [onInputChangeProp, preparedItems]
   );
+  const comboboxItemStyles = comboBoxItemStyles(variantProps);
   return /* @__PURE__ */ jsx(
     ComboBox,
     {
       ...props,
+      inputValue,
       items: filteredResults.items,
       dependencies: [deferredInputValue],
       onSelectionChange,
       onInputChange,
-      children: (item) => /* @__PURE__ */ jsx(
-        ComboBoxItem,
-        {
-          classNames: itemClassNames,
-          label: ({ isSelected, isFocused }) => /* @__PURE__ */ jsx(
-            HighlightedText,
-            {
-              className: itemClassNames?.highlight,
-              result: filteredResults.result?.[item.name],
-              originalText: item.name,
-              isSelected,
-              isFocused
-            }
-          ),
-          description: item.description,
-          textValue: item.name,
-          id: item.value
-        },
-        item.name
-      )
+      children: (item) => /* @__PURE__ */ jsx(ComboBoxItem, { textValue: item.textValue, id: item.id, children: ({ isSelected, isFocused }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: comboboxItemStyles.label({
+              className: itemClassNames?.label
+            }),
+            slot: "label",
+            children: /* @__PURE__ */ jsx(
+              HighlightedText,
+              {
+                className: itemClassNames?.highlight,
+                result: filteredResults.result?.[item.textValue],
+                originalText: item.textValue,
+                isSelected,
+                isFocused
+              }
+            )
+          }
+        ),
+        item.description && /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: comboboxItemStyles.description({
+              className: itemClassNames?.description
+            }),
+            slot: "description",
+            children: item.description
+          }
+        )
+      ] }) }, item.id)
     }
   );
 }

package/dist/esm/combo-box/combo-box-item.js

@@ -0,0 +1,68 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useContextProps, ListBoxItem, composeRenderProps, Text } from 'react-aria-components';
+import { comboBoxItemStyles } from '@opengovsg/oui-theme';
+import { forwardRef, mapPropsVariants } from '../system/utils.js';
+import { ComboBoxVariantContext } from './combo-box-variant-context.js';
+
+const ComboBoxItem = forwardRef(function ComboBoxItem2(originalProps, ref) {
+  [originalProps, ref] = useContextProps(
+    originalProps,
+    ref,
+    ComboBoxVariantContext
+  );
+  const [
+    { className, description, children, classNames, ...props },
+    variantProps
+  ] = mapPropsVariants(originalProps, comboBoxItemStyles.variantKeys);
+  const styles = comboBoxItemStyles(variantProps);
+  const defaultTextValue = useMemo(() => {
+    if (props.textValue) {
+      return props.textValue;
+    }
+    if (typeof children === "string") {
+      return children;
+    }
+    return void 0;
+  }, [children, props.textValue]);
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      textValue: defaultTextValue,
+      ...props,
+      className: composeRenderProps(
+        className ?? classNames?.container,
+        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
+      ),
+      children: (renderProps) => {
+        if (typeof children === "function") {
+          return children(renderProps);
+        }
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: styles.label({ className: classNames?.label }),
+              slot: "label",
+              children
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: styles.description({
+                className: classNames?.description
+              }),
+              slot: "description",
+              children: description
+            }
+          )
+        ] });
+      }
+    }
+  );
+});
+
+export { ComboBoxItem };

package/dist/esm/combo-box/combo-box-variant-context.js

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