@opengovsg/oui 0.0.7 → 0.0.9

package/dist/cjs/select/select.cjs

@@ -8,8 +8,8 @@ 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 button = require('../button/button.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
@@ -34,13 +34,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 +71,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 +90,10 @@ 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(reactAriaComponents.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/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/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,28 @@
+"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.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 TagFieldItem = utils.forwardRefGeneric(TagFieldItemInner);
+
+exports.TagFieldItem = TagFieldItem;

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

@@ -1,30 +1,15 @@
 "use strict";
+"use client";
 'use strict';
 
 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);
@@ -56,13 +41,19 @@ const TagFieldListInner = (props, ref) => {
         item,
         isHighlighted: highlightedIndex === virtualRow.index,
         key: virtualRow.key,
-        ...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
+        }
+      );
     })
   ] }) });
 };
@@ -70,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-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,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+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');
@@ -97,7 +98,7 @@ function TagField({
       {
         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/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 };