@charcoal-ui/react 3.0.0-beta.0 → 3.0.0-beta.2

package/dist/index.cjs.js

@@ -31,8 +31,7 @@ __export(src_exports, {
   Checkbox: () => Checkbox_default,
   Clickable: () => Clickable_default,
   ComponentAbstraction: () => ComponentAbstraction,
-  DropdownSelector: () => DropdownSelector_default,
-  DropdownSelectorItem: () => DropdownSelectorItem,
+  DropdownSelector: () => DropdownSelector,
   Icon: () => Icon_default,
   IconButton: () => IconButton_default,
   LoadingSpinner: () => LoadingSpinner,
@@ -44,6 +43,7 @@ __export(src_exports, {
   ModalHeader: () => ModalHeader,
   MultiSelect: () => MultiSelect,
   MultiSelectGroup: () => MultiSelectGroup,
+  OptionItem: () => OptionItem,
   OverlayProvider: () => import_overlays.OverlayProvider,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
@@ -437,6 +437,8 @@ var RadioInput = import_styled_components6.default.input.attrs({ type: "radio" }
     width: 20px;
     height: 20px;
 
+    cursor: pointer;
+
     ${({ hasError = false }) => theme((o) => [
   o.borderRadius("oval"),
   o.bg.surface1.hover.press,
@@ -1128,6 +1130,7 @@ var PrefixContainer = import_styled_components10.default.span`
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
+  z-index: 1;
 `;
 var SuffixContainer = import_styled_components10.default.span`
   position: absolute;
@@ -1351,7 +1354,7 @@ function Modal({
         ...underlayProps,
         style: transitionEnabled ? { backgroundColor } : {}
       },
-      /* @__PURE__ */ import_react13.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react13.default.createElement(
+      /* @__PURE__ */ import_react13.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react13.default.createElement(DialogContainer, { bottomSheet, size }, /* @__PURE__ */ import_react13.default.createElement(
         ModalDialog,
         {
           ref,
@@ -1377,7 +1380,7 @@ function Modal({
             }
           )
         )
-      ))
+      )))
     ))
   );
 }
@@ -1389,6 +1392,8 @@ var ModalContext = import_react13.default.createContext({
 });
 var ModalBackground = (0, import_react_spring.animated)(import_styled_components11.default.div`
   z-index: ${({ zIndex }) => zIndex};
+  overflow: scroll;
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -1397,34 +1402,52 @@ var ModalBackground = (0, import_react_spring.animated)(import_styled_components
 
   ${theme((o) => [o.bg.surface4])}
 `);
+var DialogContainer = import_styled_components11.default.div`
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
+  width: ${(p) => {
+  switch (p.size) {
+    case "S": {
+      return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "M": {
+      return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "L": {
+      return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    default: {
+      return unreachable(p.size);
+    }
+  }
+}}px;
+
+  @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
+    width: calc(100% - 48px);
+    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
+        margin: 0;
+        padding: 0;
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+        ${p.bottomSheet === "full" ? "height: 100%" : ""};
+      `}
+  }
+`;
 var ModalDialog = (0, import_react_spring.animated)(import_styled_components11.default.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: ${(p) => p.size === "S" ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "M" ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "L" ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size)}px;
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-
   @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
-    ${(p) => p.bottomSheet === "full" ? import_styled_components11.css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-            height: 100%;
-          ` : p.bottomSheet ? import_styled_components11.css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-          ` : import_styled_components11.css`
-            width: calc(100% - 48px);
-          `}
+    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
+        border-radius: 0;
+        ${p.bottomSheet === "full" && import_styled_components11.css`
+          height: 100%;
+        `}
+      `}
   }
 `);
 var ModalCrossButton = (0, import_styled_components11.default)(IconButton_default)`
@@ -1484,6 +1507,7 @@ function LoadingSpinner({
   return /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerIcon, null));
 }
 var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({ role: "progressbar" })`
+  box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
   border-radius: 8px;
@@ -1535,156 +1559,21 @@ var LoadingSpinnerIcon = import_react15.default.forwardRef(function LoadingSpinn
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react20 = __toESM(require("react"));
-var import_styled_components19 = __toESM(require("styled-components"));
-var import_react_stately2 = require("react-stately");
-var import_utils8 = require("@charcoal-ui/utils");
-var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_select = require("@react-aria/select");
-var import_button = require("@react-aria/button");
-
-// src/components/DropdownSelector/Listbox.tsx
-var import_react18 = __toESM(require("react"));
-var import_styled_components17 = __toESM(require("styled-components"));
-var import_listbox3 = require("@react-aria/listbox");
-
-// src/components/DropdownSelector/ListBoxSection.tsx
-var import_listbox2 = require("@react-aria/listbox");
-var import_separator = require("@react-aria/separator");
 var import_react17 = __toESM(require("react"));
-var import_styled_components16 = __toESM(require("styled-components"));
-
-// src/components/DropdownSelector/Option.tsx
-var import_react16 = __toESM(require("react"));
-var import_styled_components14 = __toESM(require("styled-components"));
-var import_listbox = require("@react-aria/listbox");
-var import_utils6 = require("@react-aria/utils");
-var import_focus2 = require("@react-aria/focus");
-var import_utils7 = require("@charcoal-ui/utils");
-function Option({ item, state, mode }) {
-  const ref = (0, import_react16.useRef)(null);
-  const { optionProps, isSelected } = (0, import_listbox.useOption)(item, state, ref);
-  const { focusProps } = (0, import_focus2.useFocusRing)();
-  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils6.mergeProps)(optionProps, focusProps), ref, mode }, /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ import_react16.default.createElement(OptionText, null, item.rendered));
-}
-var OptionRoot = import_styled_components14.default.li`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme4 }) => (0, import_utils7.px)(theme4.spacing[4])};
-  height: 40px;
-  cursor: pointer;
-  outline: none;
-
-  ${({ mode }) => theme((o) => [
-  o.padding.horizontal(8),
-  mode === "separator" && o.padding.vertical(4)
-])}
-
-  &:focus {
-    ${theme((o) => [o.bg.surface3])}
-  }
-`;
-var OptionCheckIcon = (0, import_styled_components14.default)(Icon_default)`
-  visibility: hidden;
-  ${theme((o) => [o.font.text2])}
-
-  ${({ isSelected }) => isSelected && import_styled_components14.css`
-      visibility: visible;
-    `}
-`;
-var OptionText = import_styled_components14.default.span`
-  display: block;
-  ${theme((o) => [o.typography(14), o.font.text2])}
-`;
-
-// src/components/DropdownSelector/Divider.tsx
 var import_styled_components15 = __toESM(require("styled-components"));
-var Divider = import_styled_components15.default.div.attrs({ role: "separator" })`
-  display: flex;
-
-  &:before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 1px;
-    background: #00000014;
-  }
-`;
-
-// src/components/DropdownSelector/ListBoxSection.tsx
-function ListBoxSection(props) {
-  const { state } = props;
-  const { itemProps, headingProps, groupProps } = (0, import_listbox2.useListBoxSection)({
-    heading: props.section.rendered,
-    "aria-label": props.section["aria-label"]
-  });
-  const { separatorProps } = (0, import_separator.useSeparator)({
-    elementType: "li"
-  });
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, props.section.key !== props.state.collection.getFirstKey() && /* @__PURE__ */ import_react17.default.createElement(Divider, { ...separatorProps, role: "separator" }), /* @__PURE__ */ import_react17.default.createElement(StyledLi, { ...itemProps }, props.section.rendered != null && /* @__PURE__ */ import_react17.default.createElement(SectionSpan, { ...headingProps }, props.section.rendered), /* @__PURE__ */ import_react17.default.createElement(StyledUl, { ...groupProps }, [...props.section.childNodes].map((node) => /* @__PURE__ */ import_react17.default.createElement(Option, { key: node.key, item: node, state })))));
-}
-var SectionSpan = import_styled_components16.default.span`
-  ${theme((o) => [
-  o.font.text3,
-  o.typography(12).bold,
-  o.margin.bottom(8).left(16).top(16)
-])}
-`;
-var StyledUl = import_styled_components16.default.ul`
-  padding-left: 0;
-  margin: 0;
-  box-sizing: border-box;
-  list-style: none;
-  overflow: hidden;
-`;
-var StyledLi = import_styled_components16.default.li``;
-
-// src/components/DropdownSelector/Listbox.tsx
-var Listbox = ({
-  state,
-  mode = "default",
-  ...props
-}) => {
-  const ref = (0, import_react18.useRef)(null);
-  const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, ref);
-  const collection = (0, import_react18.useMemo)(
-    () => [...state.collection].map((node, index, self) => ({
-      node,
-      first: index === 0,
-      last: index === self.length - 1
-    })),
-    [state.collection]
-  );
-  return /* @__PURE__ */ import_react18.default.createElement(ListboxRoot, { ref, ...listBoxProps }, collection.map(({ node, last }) => /* @__PURE__ */ import_react18.default.createElement(import_react18.Fragment, { key: node.key }, node.type === "section" ? /* @__PURE__ */ import_react18.default.createElement(ListBoxSection, { section: node, state }) : /* @__PURE__ */ import_react18.default.createElement(Option, { item: node, state, mode }), !last && mode === "separator" && /* @__PURE__ */ import_react18.default.createElement(Divider, null))));
-};
-var Listbox_default = (0, import_react18.memo)(Listbox);
-var ListboxRoot = import_styled_components17.default.ul`
-  padding-left: 0;
-  margin: 0;
-  box-sizing: border-box;
-  list-style: none;
-  overflow: auto;
-  max-height: inherit;
-
-  ${theme((o) => [
-  o.bg.background1,
-  o.border.default,
-  o.borderRadius(8),
-  o.padding.vertical(8),
-  o.outline.default.focus
-])}
-`;
+var import_react_stately2 = require("react-stately");
+var import_utils6 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react19 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
-var import_styled_components18 = __toESM(require("styled-components"));
-var DropdownPopoverDiv = import_styled_components18.default.div`
+var import_styled_components14 = __toESM(require("styled-components"));
+var DropdownPopoverDiv = import_styled_components14.default.div`
   width: 100%;
   ${theme((o) => o.margin.top(4).bottom(4))}
 `;
 function DropdownPopover({ children, state, ...props }) {
-  const ref = (0, import_react19.useRef)(null);
+  const ref = (0, import_react16.useRef)(null);
   const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
     {
       ...props,
@@ -1693,131 +1582,122 @@ function DropdownPopover({ children, state, ...props }) {
     },
     state
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (state.isOpen && props.value !== void 0) {
-      window.requestAnimationFrame(() => {
-        if (props.value === void 0)
-          return;
-        const windowScrollY = window.scrollY;
-        const windowScrollX = window.scrollX;
-        const selectedElement = document.querySelector(
-          `[data-key="${props.value.toString()}"]`
-        );
-        selectedElement?.scrollIntoView({ block: "center" });
-        window.scrollTo(windowScrollX, windowScrollY);
-      });
+      const windowScrollY = window.scrollY;
+      const windowScrollX = window.scrollX;
+      const selectedElement = document.querySelector(
+        `[data-key="${props.value.toString()}"]`
+      );
+      selectedElement?.scrollIntoView({ block: "center" });
+      selectedElement?.focus();
+      window.scrollTo(windowScrollX, windowScrollY);
     }
   }, [props.value, state.isOpen]);
-  return /* @__PURE__ */ import_react19.default.createElement(import_overlays3.Overlay, { portalContainer: document.body }, /* @__PURE__ */ import_react19.default.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ import_react19.default.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ import_react19.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ import_react19.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() })));
+  return /* @__PURE__ */ import_react16.default.createElement(import_overlays3.Overlay, { portalContainer: document.body }, /* @__PURE__ */ import_react16.default.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ import_react16.default.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ import_react16.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ import_react16.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() })));
 }
 
 // src/components/DropdownSelector/index.tsx
-var DropdownSelector = ({
-  open,
-  className,
-  label = "",
-  requiredText = "",
-  subLabel,
-  assertiveText,
-  autoComplete,
-  invalid = false,
-  disabled = false,
-  required = false,
-  showLabel = false,
-  mode = "default",
-  ...props
-}) => {
-  const { visuallyHiddenProps } = (0, import_visually_hidden2.useVisuallyHidden)();
-  const triggerRef = (0, import_react20.useRef)(null);
-  const selectProps = (0, import_react20.useMemo)(
-    () => ({
-      ...props,
-      label,
-      isOpen: open,
-      isDisabled: disabled,
-      isRequired: required,
-      errorMessage: invalid && assertiveText,
-      validationState: invalid ? "invalid" : "valid",
-      onSelectionChange: props.onChange,
-      selectedKey: props.value,
-      defaultSelectedKey: props.defaultValue
-    }),
-    [assertiveText, disabled, invalid, label, open, props, required]
-  );
-  const state = (0, import_react_stately2.useSelectState)(selectProps);
-  const {
-    labelProps,
-    triggerProps,
-    valueProps,
-    menuProps,
-    errorMessageProps,
-    descriptionProps
-  } = (0, import_select.useSelect)(selectProps, state, triggerRef);
-  const { buttonProps } = (0, import_button.useButton)(triggerProps, triggerRef);
-  const hasAssertiveText = assertiveText !== void 0 && assertiveText.length > 0;
-  return /* @__PURE__ */ import_react20.default.createElement(DropdownSelectorRoot, { "aria-disabled": disabled, className }, /* @__PURE__ */ import_react20.default.createElement(
+var DropdownSelectorContext = (0, import_react17.createContext)({
+  value: "",
+  setValue: (_v) => {
+  }
+});
+var defaultRequiredText = "*\u5FC5\u9808";
+function DropdownSelector(props) {
+  const triggerRef = (0, import_react17.useRef)(null);
+  const state = (0, import_react_stately2.useOverlayTriggerState)({});
+  let preview;
+  const childArray = import_react17.default.Children.toArray(props.children);
+  for (let i = 0; i < childArray.length; i++) {
+    const child = childArray[i];
+    if (import_react17.default.isValidElement(child) && "value" in child.props) {
+      const find = child.props.value === props.value;
+      if (find && "children" in child.props) {
+        preview = child.props.children;
+        break;
+      }
+    }
+  }
+  return /* @__PURE__ */ import_react17.default.createElement(DropdownSelectorRoot, { "aria-disabled": props.disabled }, props.showLabel === true && /* @__PURE__ */ import_react17.default.createElement(
     DropdownFieldLabel,
     {
-      label,
-      required,
-      requiredText,
-      subLabel,
-      ...labelProps,
-      ...!showLabel ? visuallyHiddenProps : {}
+      label: props.label,
+      required: props.required,
+      requiredText: props.requiredText ?? defaultRequiredText,
+      subLabel: props.subLabel
     }
-  ), /* @__PURE__ */ import_react20.default.createElement(
-    import_select.HiddenSelect,
+  ), /* @__PURE__ */ import_react17.default.createElement(
+    DropdownButton,
     {
-      state,
-      triggerRef,
-      label,
-      name: props.name,
-      isDisabled: disabled,
-      autoComplete
-    }
-  ), /* @__PURE__ */ import_react20.default.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ import_react20.default.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ import_react20.default.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react20.default.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ import_react20.default.createElement(
+      invalid: props.invalid,
+      disabled: props.disabled,
+      onClick: () => {
+        if (props.disabled === true)
+          return;
+        state.open();
+      },
+      ref: triggerRef
+    },
+    /* @__PURE__ */ import_react17.default.createElement(DropdownButtonText, null, props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview),
+    /* @__PURE__ */ import_react17.default.createElement(DropdownButtonIcon, { name: "16/Menu" })
+  ), state.isOpen && /* @__PURE__ */ import_react17.default.createElement(
     DropdownPopover,
     {
       state,
       triggerRef,
-      value: props.value ?? props.defaultValue
+      value: props.value
     },
-    /* @__PURE__ */ import_react20.default.createElement(Listbox_default, { ...menuProps, state, mode })
-  )), hasAssertiveText && /* @__PURE__ */ import_react20.default.createElement(
-    AssertiveText,
-    {
-      invalid,
-      ...invalid ? errorMessageProps : descriptionProps
-    },
-    assertiveText
-  ));
-};
-var DropdownSelector_default = DropdownSelector;
-var DropdownSelectorItem = import_react_stately2.Item;
-var DropdownSelectorRoot = import_styled_components19.default.div`
-  position: relative;
+    /* @__PURE__ */ import_react17.default.createElement(ListboxRoot, null, /* @__PURE__ */ import_react17.default.createElement(
+      DropdownSelectorContext.Provider,
+      {
+        value: {
+          value: props.value,
+          setValue: (v) => {
+            props.onChange(v);
+            state.close();
+          }
+        }
+      },
+      props.children
+    ))
+  ), props.assistiveText !== void 0 && /* @__PURE__ */ import_react17.default.createElement(AssertiveText, { invalid: props.invalid }, props.assistiveText));
+}
+var ListboxRoot = import_styled_components15.default.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: auto;
+  max-height: inherit;
+
+  ${theme((o) => [
+  o.bg.background1,
+  o.border.default,
+  o.borderRadius(8),
+  o.padding.vertical(8)
+])}
+`;
+var DropdownSelectorRoot = import_styled_components15.default.div`
   display: inline-block;
   width: 100%;
 
-  ${import_utils8.disabledSelector} {
+  ${import_utils6.disabledSelector} {
     cursor: default;
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = (0, import_styled_components19.default)(FieldLabel_default)`
+var DropdownFieldLabel = (0, import_styled_components15.default)(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButtonWrapper = import_styled_components19.default.div`
-  position: relative;
-`;
-var DropdownButton = import_styled_components19.default.button`
+var DropdownButton = import_styled_components15.default.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1827,7 +1707,7 @@ var DropdownButton = import_styled_components19.default.button`
   box-sizing: border-box;
   cursor: pointer;
 
-  ${import_utils8.disabledSelector} {
+  ${import_utils6.disabledSelector} {
     cursor: default;
   }
 
@@ -1837,68 +1717,165 @@ var DropdownButton = import_styled_components19.default.button`
   o.outline.default.focus,
   o.bg.surface3,
   o.borderRadius(4),
-  invalid && o.outline.assertive
+  invalid === true && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = import_styled_components19.default.span`
+var DropdownButtonText = import_styled_components15.default.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = (0, import_styled_components19.default)(Icon_default)`
+var DropdownButtonIcon = (0, import_styled_components15.default)(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = import_styled_components19.default.div`
+var AssertiveText = import_styled_components15.default.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
-  invalid ? o.font.assertive : o.font.text2
+  invalid === true ? o.font.assertive : o.font.text2
 ])}
 `;
 
+// src/components/DropdownSelector/OptionItem.tsx
+var import_react18 = __toESM(require("react"));
+var import_styled_components16 = __toESM(require("styled-components"));
+var import_utils7 = require("@charcoal-ui/utils");
+
+// src/components/DropdownSelector/utils/handleFocusByKeyBoard.tsx
+function handleFocusByKeyBoard(element) {
+  const parent = element.parentElement;
+  if (!parent)
+    return;
+  const rect = element.getBoundingClientRect();
+  const parentRect = parent.getBoundingClientRect();
+  if (rect.bottom > parentRect.bottom) {
+    parent.scrollTo({
+      top: parent.scrollTop + rect.bottom - parentRect.bottom
+    });
+  } else if (rect.top < parentRect.top) {
+    parent.scrollTo({
+      top: parent.scrollTop - (parentRect.top - rect.top)
+    });
+  }
+}
+
+// src/components/DropdownSelector/utils/focusIfHTMLLIElement.tsx
+function focusIfHTMLLIElement(element) {
+  if (element instanceof HTMLLIElement) {
+    element.focus({ preventScroll: true });
+    handleFocusByKeyBoard(element);
+  }
+}
+
+// src/components/DropdownSelector/OptionItem.tsx
+function OptionItem(props) {
+  const { value, setValue } = (0, import_react18.useContext)(DropdownSelectorContext);
+  const isSelected = props.value === value;
+  const onSelect = () => {
+    setValue(props.value);
+  };
+  return /* @__PURE__ */ import_react18.default.createElement(
+    OptionRoot,
+    {
+      "data-key": props.value,
+      onMouseMove: (e) => {
+        e.currentTarget.focus({ preventScroll: true });
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          onSelect();
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const prev = e.currentTarget.previousElementSibling;
+          if (prev === null) {
+            focusIfHTMLLIElement(e.currentTarget.parentElement?.lastChild);
+          }
+          focusIfHTMLLIElement(prev);
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const next = e.currentTarget.nextElementSibling;
+          if (next === null) {
+            focusIfHTMLLIElement(e.currentTarget.parentElement?.firstChild);
+          }
+          focusIfHTMLLIElement(next);
+        } else if (e.key === " ") {
+          e.preventDefault();
+        }
+      },
+      onClick: onSelect,
+      tabIndex: -1
+    },
+    isSelected && /* @__PURE__ */ import_react18.default.createElement(OptionCheckIcon, { name: "16/Check" }),
+    /* @__PURE__ */ import_react18.default.createElement(OptionText, { isSelected }, props.children)
+  );
+}
+var OptionRoot = import_styled_components16.default.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme4 }) => (0, import_utils7.px)(theme4.spacing[4])};
+  height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  ${theme((o) => [o.padding.horizontal(8)])}
+
+  :focus {
+    ${theme((o) => [o.bg.surface3])}
+  }
+`;
+var OptionCheckIcon = (0, import_styled_components16.default)(Icon_default)`
+  ${theme((o) => [o.font.text2])}
+`;
+var OptionText = import_styled_components16.default.span`
+  display: block;
+  ${theme((o) => [o.typography(14), o.font.text2])}
+  margin-left: ${({ isSelected }) => isSelected === true ? 0 : 20}px;
+`;
+
 // src/components/SegmentedControl/index.tsx
-var import_react22 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_react_stately3 = require("react-stately");
 var import_radio = require("@react-aria/radio");
-var import_styled_components20 = __toESM(require("styled-components"));
-var import_utils9 = require("@charcoal-ui/utils");
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_utils8 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react21 = __toESM(require("react"));
-var RadioContext = (0, import_react21.createContext)(null);
+var import_react19 = __toESM(require("react"));
+var RadioContext = (0, import_react19.createContext)(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ import_react21.default.createElement(RadioContext.Provider, { value }, children);
+  return /* @__PURE__ */ import_react19.default.createElement(RadioContext.Provider, { value }, children);
 };
 var useRadioContext = () => {
-  const state = (0, import_react21.useContext)(RadioContext);
+  const state = (0, import_react19.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
 };
 
 // src/components/SegmentedControl/index.tsx
-var SegmentedControl = (0, import_react22.forwardRef)(
+var SegmentedControl = (0, import_react20.forwardRef)(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = (0, import_react22.useMemo)(
+    const ariaRadioGroupProps = (0, import_react20.useMemo)(
       () => ({
         ...props,
         isDisabled: props.disabled,
         isReadOnly: props.readonly,
-        isRequired: props.required
+        isRequired: props.required,
+        "aria-label": props.name
       }),
       [props]
     );
     const state = (0, import_react_stately3.useRadioGroupState)(ariaRadioGroupProps);
     const { radioGroupProps } = (0, import_radio.useRadioGroup)(ariaRadioGroupProps, state);
-    const segmentedControlItems = (0, import_react22.useMemo)(() => {
+    const segmentedControlItems = (0, import_react20.useMemo)(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    return /* @__PURE__ */ import_react22.default.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ import_react22.default.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ import_react22.default.createElement(
+    return /* @__PURE__ */ import_react20.default.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ import_react20.default.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ import_react20.default.createElement(
       Segmented,
       {
         key: item.value,
@@ -1909,11 +1886,11 @@ var SegmentedControl = (0, import_react22.forwardRef)(
     ))));
   }
 );
-var SegmentedControl_default = (0, import_react22.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react20.memo)(SegmentedControl);
 var Segmented = ({ children, ...props }) => {
   const state = useRadioContext();
-  const ref = (0, import_react22.useRef)(null);
-  const ariaRadioProps = (0, import_react22.useMemo)(
+  const ref = (0, import_react20.useRef)(null);
+  const ariaRadioProps = (0, import_react20.useMemo)(
     () => ({ ...props, isDisabled: props.disabled }),
     [props]
   );
@@ -1922,30 +1899,30 @@ var Segmented = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     SegmentedRoot,
     {
       "aria-disabled": isDisabled || state.isReadOnly,
       checked: isSelected
     },
-    /* @__PURE__ */ import_react22.default.createElement(SegmentedInput, { ...inputProps, ref }),
-    /* @__PURE__ */ import_react22.default.createElement(RadioLabel2, null, /* @__PURE__ */ import_react22.default.createElement(SegmentedLabelInner, null, children))
+    /* @__PURE__ */ import_react20.default.createElement(SegmentedInput, { ...inputProps, ref }),
+    /* @__PURE__ */ import_react20.default.createElement(RadioLabel2, null, /* @__PURE__ */ import_react20.default.createElement(SegmentedLabelInner, null, children))
   );
 };
-var SegmentedControlRoot = import_styled_components20.default.div`
+var SegmentedControlRoot = import_styled_components17.default.div`
   display: inline-flex;
   align-items: center;
 
   ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
 `;
-var SegmentedRoot = import_styled_components20.default.label`
+var SegmentedRoot = import_styled_components17.default.label`
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
   height: 32px;
 
-  ${import_utils9.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
   }
 
@@ -1957,7 +1934,7 @@ var SegmentedRoot = import_styled_components20.default.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = import_styled_components20.default.input`
+var SegmentedInput = import_styled_components17.default.input`
   position: absolute;
 
   height: 0px;
@@ -1971,26 +1948,26 @@ var SegmentedInput = import_styled_components20.default.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = import_styled_components20.default.div`
+var RadioLabel2 = import_styled_components17.default.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = import_styled_components20.default.div`
+var SegmentedLabelInner = import_styled_components17.default.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-var import_react23 = __toESM(require("react"));
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_react21 = __toESM(require("react"));
+var import_styled_components18 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils10 = require("@react-aria/utils");
+var import_utils9 = require("@react-aria/utils");
 var import_react_stately4 = require("react-stately");
-var import_utils11 = require("@charcoal-ui/utils");
-var Checkbox = (0, import_react23.forwardRef)(
+var import_utils10 = require("@charcoal-ui/utils");
+var Checkbox = (0, import_react21.forwardRef)(
   function CheckboxInner(props, ref) {
-    const ariaCheckboxProps = (0, import_react23.useMemo)(
+    const ariaCheckboxProps = (0, import_react21.useMemo)(
       () => ({
         ...props,
         isSelected: props.checked,
@@ -2001,32 +1978,32 @@ var Checkbox = (0, import_react23.forwardRef)(
       [props]
     );
     const state = (0, import_react_stately4.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils10.useObjectRef)(ref);
+    const objectRef = (0, import_utils9.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-    return /* @__PURE__ */ import_react23.default.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react23.default.createElement(CheckboxRoot, null, /* @__PURE__ */ import_react23.default.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ import_react23.default.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ import_react23.default.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ import_react23.default.createElement(InputLabel, null, props.children));
+    return /* @__PURE__ */ import_react21.default.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react21.default.createElement(CheckboxRoot, null, /* @__PURE__ */ import_react21.default.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ import_react21.default.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ import_react21.default.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ import_react21.default.createElement(InputLabel, null, props.children));
   }
 );
-var Checkbox_default = (0, import_react23.memo)(Checkbox);
-var hiddenCss = import_styled_components21.css`
+var Checkbox_default = (0, import_react21.memo)(Checkbox);
+var hiddenCss = import_styled_components18.css`
   visibility: hidden;
 `;
-var InputRoot = import_styled_components21.default.label`
+var InputRoot = import_styled_components18.default.label`
   position: relative;
   display: flex;
 
   cursor: pointer;
-  ${import_utils11.disabledSelector} {
+  ${import_utils10.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme4 }) => (0, import_utils11.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils10.px)(theme4.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = import_styled_components21.default.div`
+var CheckboxRoot = import_styled_components18.default.div`
   position: relative;
 `;
-var CheckboxInput = import_styled_components21.default.input`
+var CheckboxInput = import_styled_components18.default.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -2049,7 +2026,7 @@ var CheckboxInput = import_styled_components21.default.input`
     transition: all 0.2s !important;
   }
 `;
-var CheckboxInputOverlay = import_styled_components21.default.div`
+var CheckboxInputOverlay = import_styled_components18.default.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -2062,7 +2039,7 @@ var CheckboxInputOverlay = import_styled_components21.default.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = import_styled_components21.default.div`
+var InputLabel = import_styled_components18.default.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -2071,16 +2048,16 @@ var InputLabel = import_styled_components21.default.div`
 `;
 
 // src/components/TagItem/index.tsx
-var import_react24 = __toESM(require("react"));
-var import_utils12 = require("@react-aria/utils");
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_utils13 = require("@charcoal-ui/utils");
-var import_button2 = require("@react-aria/button");
+var import_react22 = __toESM(require("react"));
+var import_utils11 = require("@react-aria/utils");
+var import_styled_components19 = __toESM(require("styled-components"));
+var import_utils12 = require("@charcoal-ui/utils");
+var import_button = require("@react-aria/button");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react24.forwardRef)(
+var TagItem = (0, import_react22.forwardRef)(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2092,8 +2069,8 @@ var TagItem = (0, import_react24.forwardRef)(
     className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils12.useObjectRef)(_ref);
-    const ariaButtonProps = (0, import_react24.useMemo)(
+    const ref = (0, import_utils11.useObjectRef)(_ref);
+    const ariaButtonProps = (0, import_react22.useMemo)(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -2101,9 +2078,9 @@ var TagItem = (0, import_react24.forwardRef)(
       }),
       [disabled, props]
     );
-    const { buttonProps } = (0, import_button2.useButton)(ariaButtonProps, ref);
+    const { buttonProps } = (0, import_button.useButton)(ariaButtonProps, ref);
     const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-    return /* @__PURE__ */ import_react24.default.createElement(
+    return /* @__PURE__ */ import_react22.default.createElement(
       TagItemRoot,
       {
         ref,
@@ -2112,13 +2089,13 @@ var TagItem = (0, import_react24.forwardRef)(
         ...buttonProps,
         className
       },
-      /* @__PURE__ */ import_react24.default.createElement(Background, { bgColor, bgImage, status }),
-      /* @__PURE__ */ import_react24.default.createElement(Inner, null, /* @__PURE__ */ import_react24.default.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ import_react24.default.createElement(TranslatedLabel, null, /* @__PURE__ */ import_react24.default.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ import_react24.default.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ import_react24.default.createElement(Icon_default, { name: "16/Remove" }))
+      /* @__PURE__ */ import_react22.default.createElement(Background, { bgColor, bgImage, status }),
+      /* @__PURE__ */ import_react22.default.createElement(Inner, null, /* @__PURE__ */ import_react22.default.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ import_react22.default.createElement(TranslatedLabel, null, /* @__PURE__ */ import_react22.default.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ import_react22.default.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ import_react22.default.createElement(Icon_default, { name: "16/Remove" }))
     );
   }
 );
-var TagItem_default = (0, import_react24.memo)(TagItem);
-var TagItemRoot = import_styled_components22.default.a`
+var TagItem_default = (0, import_react22.memo)(TagItem);
+var TagItemRoot = import_styled_components19.default.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2138,12 +2115,12 @@ var TagItemRoot = import_styled_components22.default.a`
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
 
-  ${import_utils13.disabledSelector} {
+  ${import_utils12.disabledSelector} {
     ${theme((o) => [o.disabled])}
     cursor: default;
   }
 `;
-var Background = import_styled_components22.default.div`
+var Background = import_styled_components19.default.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2154,7 +2131,7 @@ var Background = import_styled_components22.default.div`
   background-color: ${({ bgColor }) => bgColor};
   ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
 
-  ${({ bgImage }) => bgImage !== void 0 && import_styled_components22.css`
+  ${({ bgImage }) => bgImage !== void 0 && import_styled_components19.css`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2170,25 +2147,25 @@ var Background = import_styled_components22.default.div`
       }
     `}
 `;
-var Inner = import_styled_components22.default.div`
+var Inner = import_styled_components19.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme4 }) => (0, import_utils13.px)(theme4.spacing[8])};
+  gap: ${({ theme: theme4 }) => (0, import_utils12.px)(theme4.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = import_styled_components22.css`
+var labelCSS = import_styled_components19.css`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = import_styled_components22.css`
+var translateLabelCSS = import_styled_components19.css`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = import_styled_components22.default.div`
+var LabelWrapper = import_styled_components19.default.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = import_styled_components22.default.span`
+var Label3 = import_styled_components19.default.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2197,7 +2174,7 @@ var Label3 = import_styled_components22.default.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = import_styled_components22.default.div`
+var TranslatedLabel = import_styled_components19.default.div`
   ${theme((o) => [o.typography(12).bold])}
 `;
 // Annotate the CommonJS export names for ESM import in node:
@@ -2208,7 +2185,6 @@ var TranslatedLabel = import_styled_components22.default.div`
   Clickable,
   ComponentAbstraction,
   DropdownSelector,
-  DropdownSelectorItem,
   Icon,
   IconButton,
   LoadingSpinner,
@@ -2220,6 +2196,7 @@ var TranslatedLabel = import_styled_components22.default.div`
   ModalHeader,
   MultiSelect,
   MultiSelectGroup,
+  OptionItem,
   OverlayProvider,
   Radio,
   RadioGroup,