@opengovsg/oui 0.0.0-snapshot-20250311073924

package/dist/esm/tag-field/tag-field-root.js

@@ -0,0 +1,182 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback, useRef, useState } from 'react';
+import { useResizeObserver } from '@react-aria/utils';
+import { get } from 'lodash-es';
+import { useFilter } from 'react-aria';
+import { useSlottedContext, FormContext, Provider, LabelContext, PopoverContext, InputContext, TextContext, GroupContext, FieldErrorContext } from 'react-aria-components';
+import { removeDataAttributes } from '../system/utils.js';
+import { TagFieldListContext } from './tag-field-list.js';
+import { TagFieldStateContext } from './tag-field-state-context.js';
+import { TagFieldTriggerContext } from './tag-field-trigger.js';
+import { useTagField } from './use-tag-field.js';
+import { useTagFieldState } from './use-tag-field-state.js';
+
+const calculateEstimatedRowHeight = (size) => {
+  switch (size) {
+    case "xs":
+      return 44;
+    case "sm":
+      return 44;
+    case "md":
+      return 48;
+  }
+};
+function TagFieldRoot({
+  children,
+  virtualRowHeight: _virtualRowHeight,
+  ...props
+}) {
+  const { itemToKey: defaultItemToKey, itemToText: defaultItemToText } = props;
+  const virtualRowHeight = useMemo(
+    () => _virtualRowHeight ?? calculateEstimatedRowHeight(props.size ?? "md"),
+    [_virtualRowHeight, props.size]
+  );
+  const { contains } = useFilter({ sensitivity: "base" });
+  const itemToText = useCallback(
+    (item) => {
+      if (defaultItemToText) return defaultItemToText(item);
+      return String(get(item, "textValue") ?? String(item));
+    },
+    [defaultItemToText]
+  );
+  const itemToKey = useCallback(
+    (item) => {
+      if (defaultItemToKey) return defaultItemToKey(item);
+      return String(get(item, "id") ?? String(item));
+    },
+    [defaultItemToKey]
+  );
+  const onSelectionChange = useCallback(
+    (nextItems) => {
+      if (props.onSelectionChange) {
+        props.onSelectionChange(new Set(nextItems.map(itemToKey)));
+      }
+    },
+    [props, itemToKey]
+  );
+  const state = useTagFieldState({
+    ...props,
+    itemToKey,
+    itemToText,
+    onSelectionChange,
+    defaultFilter: props.defaultFilter || contains
+  });
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  props.validationBehavior ?? formValidationBehavior ?? "native";
+  const fieldRef = useRef(null);
+  const popoverRef = useRef(null);
+  const listBoxRef = useRef(null);
+  const labelRef = useRef(null);
+  const inputRef = useRef(null);
+  const buttonRef = useRef(null);
+  const {
+    tagFieldProps,
+    buttonProps,
+    inputProps,
+    labelProps,
+    listBoxProps,
+    descriptionProps,
+    errorMessageProps,
+    rowVirtualizer,
+    ...validation
+  } = useTagField(
+    {
+      ...removeDataAttributes(props),
+      virtualRowHeight,
+      itemToKey,
+      itemToText,
+      inputRef,
+      listBoxRef,
+      labelRef,
+      buttonRef},
+    state
+  );
+  const [menuWidth, setMenuWidth] = useState(null);
+  const onResize = useCallback(() => {
+    if (fieldRef.current) {
+      const fieldRect = fieldRef.current.getBoundingClientRect();
+      setMenuWidth(fieldRect.right - fieldRect.left + "px");
+    }
+  }, []);
+  useResizeObserver({
+    ref: fieldRef,
+    onResize
+  });
+  const renderPropsState = useMemo(
+    () => ({
+      isOpen: tagFieldProps.isOpen,
+      isDisabled: props.isDisabled || false,
+      isInvalid: validation.isInvalid || false,
+      isRequired: props.isRequired || false
+    }),
+    [
+      tagFieldProps.isOpen,
+      props.isDisabled,
+      props.isRequired,
+      validation.isInvalid
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      values: [
+        [
+          TagFieldStateContext,
+          {
+            ...state,
+            ...tagFieldProps,
+            size: props.size,
+            variant: props.variant
+          }
+        ],
+        [LabelContext, labelProps],
+        [TagFieldListContext, { ...listBoxProps, rowVirtualizer }],
+        [TagFieldTriggerContext, buttonProps],
+        [
+          PopoverContext,
+          {
+            ref: popoverRef,
+            triggerRef: fieldRef,
+            scrollRef: listBoxRef,
+            placement: "bottom start",
+            isOpen: tagFieldProps.isOpen,
+            isNonModal: true,
+            trigger: "TagField",
+            style: { "--trigger-width": menuWidth }
+          }
+        ],
+        [InputContext, inputProps],
+        [
+          TextContext,
+          {
+            slots: {
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }
+        ],
+        [
+          GroupContext,
+          {
+            isDisabled: props.isDisabled || false,
+            isInvalid: validation.isInvalid,
+            ref: fieldRef
+          }
+        ],
+        [FieldErrorContext, validation]
+      ],
+      children: typeof children === "function" ? children({
+        ...renderPropsState,
+        defaultChildren: null,
+        items: state.items,
+        selectedItems: state.selectedItems,
+        highlightedIndex: tagFieldProps.highlightedIndex,
+        getSelectedItemProps: tagFieldProps.getSelectedItemProps,
+        removeSelectedItem: tagFieldProps.removeSelectedItem
+      }) : children
+    }
+  );
+}
+
+export { TagFieldRoot };

package/dist/esm/tag-field/tag-field-state-context.js

@@ -0,0 +1,9 @@
+"use strict";
+import { createContext } from 'react';
+
+const TagFieldStateContext = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  createContext(null)
+);
+
+export { TagFieldStateContext };

package/dist/esm/tag-field/tag-field-tag-list.js

@@ -0,0 +1,68 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useCallback } from 'react';
+import { TagFieldStateContext } from './tag-field-state-context.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 TagFieldTagList = ({
+  classNames,
+  ...props
+}) => {
+  const {
+    selectedItems,
+    getSelectedItemProps,
+    removeSelectedItem,
+    isDisabled,
+    isReadOnly
+  } = useContext(TagFieldStateContext);
+  const handleRemoveSelectedItem = useCallback(
+    (item) => () => {
+      if (isDisabled || isReadOnly) return;
+      removeSelectedItem(item);
+    },
+    [isDisabled, isReadOnly, removeSelectedItem]
+  );
+  if (props.children !== void 0 && typeof props.children !== "function") {
+    return props.children;
+  }
+  return selectedItems.map((selectedItem, index) => {
+    const itemProps = getSelectedItemProps({
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      selectedItem,
+      index
+    });
+    if (typeof props.children === "function") {
+      return props.children({
+        item: selectedItem,
+        removeSelectedItem: handleRemoveSelectedItem(selectedItem),
+        isDisabled,
+        isReadOnly,
+        itemProps
+      });
+    }
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: classNames?.tag,
+        ...itemProps,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: classNames?.tagText, children: selectedItem.textValue }),
+          /* @__PURE__ */ jsx(
+            X,
+            {
+              className: classNames?.tagIcon,
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveSelectedItem(selectedItem)();
+              }
+            }
+          )
+        ]
+      },
+      `selected-item-${index}`
+    );
+  });
+};
+
+export { TagFieldTagList };

package/dist/esm/tag-field/tag-field-trigger.js

@@ -0,0 +1,24 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import { createContext } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { forwardRef } from '../system/utils.js';
+
+const TagFieldTriggerContext = createContext({});
+const TagFieldTrigger = forwardRef(
+  (props, ref) => {
+    [props, ref] = useContextProps(props, ref, TagFieldTriggerContext);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "toggle menu",
+        type: "button",
+        ...props,
+        slot: props.slot || void 0,
+        ref
+      }
+    );
+  }
+);
+
+export { TagFieldTrigger, TagFieldTriggerContext };

package/dist/esm/tag-field/tag-field.js

@@ -0,0 +1,104 @@
+"use strict";
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import { tagFieldStyles } from '@opengovsg/oui-theme';
+import { composeRenderProps, Popover } from 'react-aria-components';
+import { TagFieldList, TagFieldListItem } from './tag-field-list.js';
+import { TagFieldRoot } from './tag-field-root.js';
+import { TagFieldTagList } from './tag-field-tag-list.js';
+import { TagFieldTrigger } from './tag-field-trigger.js';
+import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import { Input } from '../input/input.js';
+
+function TagField({
+  classNames,
+  children,
+  ...props
+}) {
+  const styles = tagFieldStyles(props);
+  return /* @__PURE__ */ jsxs(TagFieldRoot, { ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.root({ className: classNames?.root }), children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          size: props.size,
+          className: styles.label({ className: classNames?.label }),
+          children: props.label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        FieldGroup,
+        {
+          className: composeRenderProps(
+            classNames?.group,
+            (className, renderProps) => styles.group({ className, ...renderProps })
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-row flex-wrap gap-1", children: [
+              /* @__PURE__ */ jsx(
+                TagFieldTagList,
+                {
+                  classNames: {
+                    tag: styles.tag({ className: classNames?.tag }),
+                    tagText: styles.tagText({ className: classNames?.tagText }),
+                    tagIcon: styles.tagIcon({ className: classNames?.tagIcon })
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  variant: "unstyled",
+                  size: props.size,
+                  className: composeRenderProps(
+                    classNames?.field,
+                    (className, renderProps) => styles.field({ className, ...renderProps })
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              TagFieldTrigger,
+              {
+                className: styles.trigger({ className: classNames?.trigger }),
+                children: /* @__PURE__ */ jsx(ChevronDown, {})
+              }
+            )
+          ]
+        }
+      ),
+      props.description && /* @__PURE__ */ jsx(
+        Description,
+        {
+          size: props.size,
+          className: styles.description({
+            className: classNames?.description
+          }),
+          children: props.description
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FieldError,
+        {
+          size: props.size,
+          className: styles.error({
+            className: classNames?.error
+          }),
+          children: props.errorMessage
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Popover, { children: /* @__PURE__ */ jsx(
+      TagFieldList,
+      {
+        className: styles.list({ className: classNames?.list }),
+        itemClassNames: props.itemClassNames,
+        children: ({ key, ...props2 }) => children ? children({ key, ...props2 }) : /* @__PURE__ */ createElement(TagFieldListItem, { ...props2, key })
+      }
+    ) })
+  ] });
+}
+
+export { TagField };

package/dist/esm/tag-field/types.js

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

package/dist/esm/tag-field/use-tag-field-state.js

@@ -0,0 +1,101 @@
+"use strict";
+import { useMemo, useCallback } from 'react';
+import { useFormValidationState } from '@react-stately/form';
+import { useControlledState } from '@react-stately/utils';
+import { useControllableState } from '../hooks/use-controllable-state.js';
+
+function useTagFieldState(props) {
+  const { itemToText, itemToKey, defaultFilter } = props;
+  const itemsByKey = useMemo(() => {
+    const items = props.items ?? props.defaultItems ?? [];
+    return items.reduce(
+      (acc, item) => {
+        acc[itemToKey(item)] = item;
+        return acc;
+      },
+      {}
+    ) ?? {};
+  }, [itemToKey, props.defaultItems, props.items]);
+  const getSelectedItemsByKey = useCallback(
+    (keys) => {
+      if (!keys) return;
+      return [...keys].map((key) => itemsByKey[key]);
+    },
+    [itemsByKey]
+  );
+  const [selectedItems, setSelectedItems] = useControllableState({
+    defaultValue: getSelectedItemsByKey(props.defaultSelectedKeys) ?? [],
+    value: getSelectedItemsByKey(props.selectedKeys),
+    onChange: props.onSelectionChange
+  });
+  const defaultInputValue = props.defaultInputValue ?? "";
+  const [inputValue, setInputValue] = useControlledState(
+    props.inputValue,
+    defaultInputValue,
+    props.onInputChange
+  );
+  const controlledSelectedKeys = useMemo(
+    () => new Set(selectedItems.map(itemToKey)),
+    [itemToKey, selectedItems]
+  );
+  const validation = useFormValidationState({
+    ...props,
+    value: useMemo(
+      () => ({
+        inputValue,
+        selectedKeys: controlledSelectedKeys
+      }),
+      [controlledSelectedKeys, inputValue]
+    )
+  });
+  const filteredItems = useMemo(
+    () => (
+      // No default filter if items are controlled.
+      !!props.items || !defaultFilter ? props.items ?? [] : filterItems({
+        items: props.defaultItems ?? [],
+        inputValue,
+        itemToText,
+        itemToKey,
+        selectedKeys: controlledSelectedKeys,
+        filter: defaultFilter
+      })
+    ),
+    [
+      props.items,
+      props.defaultItems,
+      defaultFilter,
+      inputValue,
+      itemToText,
+      itemToKey,
+      controlledSelectedKeys
+    ]
+  );
+  return {
+    items: filteredItems,
+    disabledKeys: props.disabledKeys,
+    inputValue,
+    setInputValue,
+    selectedItems,
+    setSelectedItems,
+    itemToText,
+    itemToKey,
+    ...validation
+  };
+}
+function filterItems({
+  items,
+  inputValue,
+  itemToText,
+  itemToKey,
+  filter,
+  selectedKeys
+}) {
+  return items.filter((item) => {
+    const isSelected = selectedKeys ? selectedKeys.has(itemToKey(item)) : false;
+    if (isSelected) return false;
+    const matchesFilter = filter(itemToText(item), inputValue);
+    return matchesFilter;
+  });
+}
+
+export { useTagFieldState };

package/dist/esm/tag-field/use-tag-field.js

@@ -0,0 +1,186 @@
+"use strict";
+import { useRef, useMemo, useCallback } from 'react';
+import { mergeProps } from '@react-aria/utils';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useMultipleSelection, useCombobox } from 'downshift';
+import { omit } from 'lodash-es';
+import { useTextField } from 'react-aria';
+
+function useTagField(props, state) {
+  let { buttonRef } = props;
+  const {
+    inputRef,
+    listBoxRef,
+    labelRef,
+    shouldCloseOnBlur,
+    // TODO: Handle these states
+    isReadOnly,
+    isDisabled,
+    itemToKey,
+    itemToText,
+    label,
+    virtualRowHeight = 40
+  } = props;
+  const backupBtnRef = useRef(null);
+  buttonRef = buttonRef ?? backupBtnRef;
+  const {
+    selectedItems,
+    setSelectedItems,
+    inputValue,
+    setInputValue,
+    items,
+    disabledKeys
+  } = state;
+  const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = useMultipleSelection({
+    selectedItems,
+    onStateChange({ selectedItems: newSelectedItems, type }) {
+      switch (type) {
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+        case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem: {
+          if (isDisabled) return;
+          setSelectedItems(newSelectedItems ?? []);
+          break;
+        }
+      }
+    }
+  });
+  const disabledKeysSet = useMemo(() => {
+    return new Set(disabledKeys);
+  }, [disabledKeys]);
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => listBoxRef.current,
+    estimateSize: () => virtualRowHeight,
+    getItemKey: useCallback(
+      (index) => itemToKey(items[index]),
+      [itemToKey, items]
+    ),
+    overscan: 2
+  });
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps
+  } = useCombobox({
+    itemToString: (item) => {
+      if (!item) {
+        return "";
+      }
+      return itemToText(item);
+    },
+    isItemDisabled: (item) => isDisabled || isReadOnly || disabledKeysSet.has(itemToKey(item)),
+    items,
+    scrollIntoView: () => {
+    },
+    onHighlightedIndexChange: ({ highlightedIndex: highlightedIndex2, type }) => {
+      if (type !== useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex2 >= 0) {
+        rowVirtualizer.scrollToIndex(highlightedIndex2);
+      }
+    },
+    defaultHighlightedIndex: 0,
+    // after selection, highlight the first item.
+    selectedItem: null,
+    inputValue,
+    stateReducer(_state, actionAndChanges) {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case useCombobox.stateChangeTypes.ItemClick:
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.InputBlur: {
+          return {
+            ...changes,
+            isOpen: shouldCloseOnBlur === false ? true : changes.isOpen
+          };
+        }
+        default:
+          return changes;
+      }
+    },
+    onStateChange({
+      inputValue: newInputValue,
+      type,
+      selectedItem: newSelectedItem
+    }) {
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputBlur:
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick: {
+          if (newSelectedItem) {
+            setSelectedItems((prev) => [.../* @__PURE__ */ new Set([...prev, newSelectedItem])]);
+          }
+          setInputValue("");
+          break;
+        }
+        case useCombobox.stateChangeTypes.InputChange:
+          setInputValue(newInputValue ?? "");
+          break;
+      }
+    }
+  });
+  const { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  const inputProps = getInputProps({
+    ref: inputRef,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
+    ...getDropdownProps({ preventKeyAction: isOpen }),
+    // Somehow adding this will allow the input to be updated properly, else
+    // it may sometimes lag behind a single state.
+    // Was also in the previous downshift docs but they removed it for some reason.
+    // See https://github.com/downshift-js/downshift/pull/1576/files#diff-d32b6994832dda99d96f207e964a0ef27102128c532ea9492949f21ec0cf58d3
+    onChange: (e) => setInputValue(e.target.value)
+  });
+  const {
+    labelProps,
+    inputProps: newInputProps,
+    descriptionProps,
+    errorMessageProps
+  } = useTextField(
+    {
+      isReadOnly,
+      isDisabled,
+      isInvalid,
+      errorMessage: props.errorMessage,
+      description: props.description,
+      label,
+      ...inputProps,
+      onChange: () => {
+      },
+      value: state.inputValue
+    },
+    inputRef
+  );
+  return {
+    tagFieldProps: {
+      isDisabled: newInputProps.disabled ?? false,
+      isReadOnly: newInputProps.readOnly ?? false,
+      isInvalid,
+      getItemProps,
+      highlightedIndex,
+      isOpen,
+      getSelectedItemProps,
+      removeSelectedItem
+    },
+    labelProps: mergeProps(getLabelProps({ ref: labelRef }), labelProps),
+    // Remove onKeyDown from newInputProps to prevent it from being called twice, resulting in arrow keys moving two items.
+    inputProps: mergeProps(inputProps, omit(newInputProps, "onKeyDown")),
+    buttonProps: getToggleButtonProps({
+      ref: buttonRef,
+      disabled: isDisabled
+    }),
+    listBoxProps: getMenuProps({ ref: listBoxRef }, { suppressRefError: true }),
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails,
+    rowVirtualizer
+  };
+}
+
+export { useTagField };

package/dist/esm/text-area/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { TextArea } from './text-area.js';