@opengovsg/oui 0.0.0-snapshot-20250311073924

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

@@ -0,0 +1,184 @@
+"use strict";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utils$1 = require('@react-aria/utils');
+var lodashEs = require('lodash-es');
+var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
+var utils = require('../system/utils.cjs');
+var tagFieldList = require('./tag-field-list.cjs');
+var tagFieldStateContext = require('./tag-field-state-context.cjs');
+var tagFieldTrigger = require('./tag-field-trigger.cjs');
+var useTagField = require('./use-tag-field.cjs');
+var useTagFieldState = require('./use-tag-field-state.cjs');
+
+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 = react.useMemo(
+    () => _virtualRowHeight ?? calculateEstimatedRowHeight(props.size ?? "md"),
+    [_virtualRowHeight, props.size]
+  );
+  const { contains } = reactAria.useFilter({ sensitivity: "base" });
+  const itemToText = react.useCallback(
+    (item) => {
+      if (defaultItemToText) return defaultItemToText(item);
+      return String(lodashEs.get(item, "textValue") ?? String(item));
+    },
+    [defaultItemToText]
+  );
+  const itemToKey = react.useCallback(
+    (item) => {
+      if (defaultItemToKey) return defaultItemToKey(item);
+      return String(lodashEs.get(item, "id") ?? String(item));
+    },
+    [defaultItemToKey]
+  );
+  const onSelectionChange = react.useCallback(
+    (nextItems) => {
+      if (props.onSelectionChange) {
+        props.onSelectionChange(new Set(nextItems.map(itemToKey)));
+      }
+    },
+    [props, itemToKey]
+  );
+  const state = useTagFieldState.useTagFieldState({
+    ...props,
+    itemToKey,
+    itemToText,
+    onSelectionChange,
+    defaultFilter: props.defaultFilter || contains
+  });
+  const { validationBehavior: formValidationBehavior } = reactAriaComponents.useSlottedContext(reactAriaComponents.FormContext) || {};
+  props.validationBehavior ?? formValidationBehavior ?? "native";
+  const fieldRef = react.useRef(null);
+  const popoverRef = react.useRef(null);
+  const listBoxRef = react.useRef(null);
+  const labelRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const buttonRef = react.useRef(null);
+  const {
+    tagFieldProps,
+    buttonProps,
+    inputProps,
+    labelProps,
+    listBoxProps,
+    descriptionProps,
+    errorMessageProps,
+    rowVirtualizer,
+    ...validation
+  } = useTagField.useTagField(
+    {
+      ...utils.removeDataAttributes(props),
+      virtualRowHeight,
+      itemToKey,
+      itemToText,
+      inputRef,
+      listBoxRef,
+      labelRef,
+      buttonRef},
+    state
+  );
+  const [menuWidth, setMenuWidth] = react.useState(null);
+  const onResize = react.useCallback(() => {
+    if (fieldRef.current) {
+      const fieldRect = fieldRef.current.getBoundingClientRect();
+      setMenuWidth(fieldRect.right - fieldRect.left + "px");
+    }
+  }, []);
+  utils$1.useResizeObserver({
+    ref: fieldRef,
+    onResize
+  });
+  const renderPropsState = react.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__ */ jsxRuntime.jsx(
+    reactAriaComponents.Provider,
+    {
+      values: [
+        [
+          tagFieldStateContext.TagFieldStateContext,
+          {
+            ...state,
+            ...tagFieldProps,
+            size: props.size,
+            variant: props.variant
+          }
+        ],
+        [reactAriaComponents.LabelContext, labelProps],
+        [tagFieldList.TagFieldListContext, { ...listBoxProps, rowVirtualizer }],
+        [tagFieldTrigger.TagFieldTriggerContext, buttonProps],
+        [
+          reactAriaComponents.PopoverContext,
+          {
+            ref: popoverRef,
+            triggerRef: fieldRef,
+            scrollRef: listBoxRef,
+            placement: "bottom start",
+            isOpen: tagFieldProps.isOpen,
+            isNonModal: true,
+            trigger: "TagField",
+            style: { "--trigger-width": menuWidth }
+          }
+        ],
+        [reactAriaComponents.InputContext, inputProps],
+        [
+          reactAriaComponents.TextContext,
+          {
+            slots: {
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }
+        ],
+        [
+          reactAriaComponents.GroupContext,
+          {
+            isDisabled: props.isDisabled || false,
+            isInvalid: validation.isInvalid,
+            ref: fieldRef
+          }
+        ],
+        [reactAriaComponents.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
+    }
+  );
+}
+
+exports.TagFieldRoot = TagFieldRoot;

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

@@ -0,0 +1,11 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+const TagFieldStateContext = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  react.createContext(null)
+);
+
+exports.TagFieldStateContext = TagFieldStateContext;

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

@@ -0,0 +1,70 @@
+"use strict";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var tagFieldStateContext = require('./tag-field-state-context.cjs');
+var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
+
+const TagFieldTagList = ({
+  classNames,
+  ...props
+}) => {
+  const {
+    selectedItems,
+    getSelectedItemProps,
+    removeSelectedItem,
+    isDisabled,
+    isReadOnly
+  } = react.useContext(tagFieldStateContext.TagFieldStateContext);
+  const handleRemoveSelectedItem = react.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__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: classNames?.tag,
+        ...itemProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.tagText, children: selectedItem.textValue }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            x.default,
+            {
+              className: classNames?.tagIcon,
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveSelectedItem(selectedItem)();
+              }
+            }
+          )
+        ]
+      },
+      `selected-item-${index}`
+    );
+  });
+};
+
+exports.TagFieldTagList = TagFieldTagList;

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

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

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

@@ -0,0 +1,106 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ouiTheme = require('@opengovsg/oui-theme');
+var reactAriaComponents = require('react-aria-components');
+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,
+  children,
+  ...props
+}) {
+  const styles = ouiTheme.tagFieldStyles(props);
+  return /* @__PURE__ */ jsxRuntime.jsxs(tagFieldRoot.TagFieldRoot, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.root({ className: classNames?.root }), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        field.Label,
+        {
+          size: props.size,
+          className: styles.label({ className: classNames?.label }),
+          children: props.label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        field.FieldGroup,
+        {
+          className: reactAriaComponents.composeRenderProps(
+            classNames?.group,
+            (className, renderProps) => styles.group({ className, ...renderProps })
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-row flex-wrap gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                tagFieldTagList.TagFieldTagList,
+                {
+                  classNames: {
+                    tag: styles.tag({ className: classNames?.tag }),
+                    tagText: styles.tagText({ className: classNames?.tagText }),
+                    tagIcon: styles.tagIcon({ className: classNames?.tagIcon })
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                input.Input,
+                {
+                  variant: "unstyled",
+                  size: props.size,
+                  className: reactAriaComponents.composeRenderProps(
+                    classNames?.field,
+                    (className, renderProps) => styles.field({ className, ...renderProps })
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              tagFieldTrigger.TagFieldTrigger,
+              {
+                className: styles.trigger({ className: classNames?.trigger }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(chevronDown.default, {})
+              }
+            )
+          ]
+        }
+      ),
+      props.description && /* @__PURE__ */ jsxRuntime.jsx(
+        field.Description,
+        {
+          size: props.size,
+          className: styles.description({
+            className: classNames?.description
+          }),
+          children: props.description
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        field.FieldError,
+        {
+          size: props.size,
+          className: styles.error({
+            className: classNames?.error
+          }),
+          children: props.errorMessage
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      tagFieldList.TagFieldList,
+      {
+        className: styles.list({ className: classNames?.list }),
+        itemClassNames: props.itemClassNames,
+        children: ({ key, ...props2 }) => children ? children({ key, ...props2 }) : /* @__PURE__ */ react.createElement(tagFieldList.TagFieldListItem, { ...props2, key })
+      }
+    ) })
+  ] });
+}
+
+exports.TagField = TagField;

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

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

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

@@ -0,0 +1,103 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+var form = require('@react-stately/form');
+var utils = require('@react-stately/utils');
+var useControllableState = require('../hooks/use-controllable-state.cjs');
+
+function useTagFieldState(props) {
+  const { itemToText, itemToKey, defaultFilter } = props;
+  const itemsByKey = react.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 = react.useCallback(
+    (keys) => {
+      if (!keys) return;
+      return [...keys].map((key) => itemsByKey[key]);
+    },
+    [itemsByKey]
+  );
+  const [selectedItems, setSelectedItems] = useControllableState.useControllableState({
+    defaultValue: getSelectedItemsByKey(props.defaultSelectedKeys) ?? [],
+    value: getSelectedItemsByKey(props.selectedKeys),
+    onChange: props.onSelectionChange
+  });
+  const defaultInputValue = props.defaultInputValue ?? "";
+  const [inputValue, setInputValue] = utils.useControlledState(
+    props.inputValue,
+    defaultInputValue,
+    props.onInputChange
+  );
+  const controlledSelectedKeys = react.useMemo(
+    () => new Set(selectedItems.map(itemToKey)),
+    [itemToKey, selectedItems]
+  );
+  const validation = form.useFormValidationState({
+    ...props,
+    value: react.useMemo(
+      () => ({
+        inputValue,
+        selectedKeys: controlledSelectedKeys
+      }),
+      [controlledSelectedKeys, inputValue]
+    )
+  });
+  const filteredItems = react.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;
+  });
+}
+
+exports.useTagFieldState = useTagFieldState;

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

@@ -0,0 +1,188 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+var utils = require('@react-aria/utils');
+var reactVirtual = require('@tanstack/react-virtual');
+var downshift = require('downshift');
+var lodashEs = require('lodash-es');
+var reactAria = require('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 = react.useRef(null);
+  buttonRef = buttonRef ?? backupBtnRef;
+  const {
+    selectedItems,
+    setSelectedItems,
+    inputValue,
+    setInputValue,
+    items,
+    disabledKeys
+  } = state;
+  const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = downshift.useMultipleSelection({
+    selectedItems,
+    onStateChange({ selectedItems: newSelectedItems, type }) {
+      switch (type) {
+        case downshift.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case downshift.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+        case downshift.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+        case downshift.useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem: {
+          if (isDisabled) return;
+          setSelectedItems(newSelectedItems ?? []);
+          break;
+        }
+      }
+    }
+  });
+  const disabledKeysSet = react.useMemo(() => {
+    return new Set(disabledKeys);
+  }, [disabledKeys]);
+  const rowVirtualizer = reactVirtual.useVirtualizer({
+    count: items.length,
+    getScrollElement: () => listBoxRef.current,
+    estimateSize: () => virtualRowHeight,
+    getItemKey: react.useCallback(
+      (index) => itemToKey(items[index]),
+      [itemToKey, items]
+    ),
+    overscan: 2
+  });
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps
+  } = downshift.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 !== downshift.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 downshift.useCombobox.stateChangeTypes.ItemClick:
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case downshift.useCombobox.stateChangeTypes.InputBlur: {
+          return {
+            ...changes,
+            isOpen: shouldCloseOnBlur === false ? true : changes.isOpen
+          };
+        }
+        default:
+          return changes;
+      }
+    },
+    onStateChange({
+      inputValue: newInputValue,
+      type,
+      selectedItem: newSelectedItem
+    }) {
+      switch (type) {
+        case downshift.useCombobox.stateChangeTypes.InputBlur:
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case downshift.useCombobox.stateChangeTypes.ItemClick: {
+          if (newSelectedItem) {
+            setSelectedItems((prev) => [.../* @__PURE__ */ new Set([...prev, newSelectedItem])]);
+          }
+          setInputValue("");
+          break;
+        }
+        case downshift.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
+  } = reactAria.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: utils.mergeProps(getLabelProps({ ref: labelRef }), labelProps),
+    // Remove onKeyDown from newInputProps to prevent it from being called twice, resulting in arrow keys moving two items.
+    inputProps: utils.mergeProps(inputProps, lodashEs.omit(newInputProps, "onKeyDown")),
+    buttonProps: getToggleButtonProps({
+      ref: buttonRef,
+      disabled: isDisabled
+    }),
+    listBoxProps: getMenuProps({ ref: listBoxRef }, { suppressRefError: true }),
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails,
+    rowVirtualizer
+  };
+}
+
+exports.useTagField = useTagField;

package/dist/cjs/text-area/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var textArea = require('./text-area.cjs');
+
+
+
+exports.TextArea = textArea.TextArea;