@charcoal-ui/react 2.3.0 → 2.4.0

package/dist/components/DropdownSelector/DropdownPopover.d.ts

@@ -0,0 +1,13 @@
+import { Key } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+import { ReactNode } from 'react';
+import { AriaPopoverProps } from '@react-aria/overlays';
+declare type Props = Omit<AriaPopoverProps, 'popoverRef'> & {
+    state: OverlayTriggerState;
+} & {
+    children: ReactNode;
+    value?: Key;
+};
+export declare function DropdownPopover({ children, state, ...props }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=DropdownPopover.d.ts.map

package/dist/components/DropdownSelector/DropdownPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAqB,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EACL,gBAAgB,EAIjB,MAAM,sBAAsB,CAAA;AAS7B,aAAK,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG;IAClD,KAAK,EAAE,mBAAmB,CAAA;CAC3B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,GAAG,CAAA;CACZ,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eA+CnE"}

package/dist/components/DropdownSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAA;AAQnD,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,aAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAA;AAED,aAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACpC,oBAAY,qBAAqB,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,IAAI,UAAU,GACrE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,GAAG,CAAA;IACpB,QAAQ,CAAC,YAAY,CAAC,EAAE,GAAG,CAAA;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,CAAA;AAEH,QAAA,MAAM,gBAAgB,uNAkGrB,CAAA;AAED,eAAe,gBAAgB,CAAA;AAC/B,eAAO,MAAM,oBAAoB,iEAAO,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAA;AAQnD,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,aAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAA;AAED,aAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACpC,oBAAY,qBAAqB,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,IAAI,UAAU,GACrE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,GAAG,CAAA;IACpB,QAAQ,CAAC,YAAY,CAAC,EAAE,GAAG,CAAA;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,CAAA;AAEH,QAAA,MAAM,gBAAgB,uNAsGrB,CAAA;AAED,eAAe,gBAAgB,CAAA;AAC/B,eAAO,MAAM,oBAAoB,iEAAO,CAAA"}

package/dist/components/DropdownSelector/index.story.d.ts

@@ -7,6 +7,9 @@ declare const _default: {
 export default _default;
 declare type Props = Omit<DropdownSelectorProps, 'subLabel' | 'children' | 'onOpenChange'>;
 export declare const Default: Story<Props>;
+export declare const Multiple: Story<DropdownSelectorProps>;
+export declare const Bottom: Story<DropdownSelectorProps>;
+export declare const Many: Story<DropdownSelectorProps>;
 declare type HasLabelProps = {
     disabled?: boolean;
 };

package/dist/components/DropdownSelector/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.story.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAEvB,qBAAqB,EACtB,MAAM,GAAG,CAAA;AACV,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAGzC,wBAGC;AAED,aAAK,KAAK,GAAG,IAAI,CACf,qBAAqB,EACrB,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,KAAK,CAahC,CAAA;AAUD,aAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAsBzC,CAAA;AAMD,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,SAAS,GAAG,WAAW,CAAA;CAC9B,CAAA;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CA0BnD,CAAA;AAMD,aAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAmBvC,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.story.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAEvB,qBAAqB,EACtB,MAAM,GAAG,CAAA;AACV,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAGzC,wBAGC;AAED,aAAK,KAAK,GAAG,IAAI,CACf,qBAAqB,EACrB,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,KAAK,CAehC,CAAA;AAUD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,qBAAqB,CAyBjD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,qBAAqB,CAe/C,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAwB7C,CAAA;AAED,aAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAwBzC,CAAA;AAMD,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,SAAS,GAAG,WAAW,CAAA;CAC9B,CAAA;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CA4BnD,CAAA;AAMD,aAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAqBvC,CAAA"}

package/dist/{index.cjs → index.cjs.js}

@@ -57,7 +57,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/core/ComponentAbstraction.tsx
-var import_react = __toESM(require("react"), 1);
+var import_react = __toESM(require("react"));
 var DefaultLink = import_react.default.forwardRef(
   function DefaultLink2({ to, children, ...rest }, ref) {
     return /* @__PURE__ */ import_react.default.createElement("a", { href: to, ref, ...rest }, children);
@@ -87,7 +87,7 @@ var import_ssr = require("@react-aria/ssr");
 var import_overlays = require("@react-aria/overlays");
 
 // src/core/CharcoalProvider.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"));
 var import_styled_components = require("styled-components");
 var import_styled = require("@charcoal-ui/styled");
 function CharcoalProvider({
@@ -101,8 +101,8 @@ function CharcoalProvider({
 }
 
 // src/components/Button/index.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_styled_components4 = require("styled-components");
+var import_react4 = __toESM(require("react"));
+var import_styled_components4 = __toESM(require("styled-components"));
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -112,13 +112,13 @@ function unreachable(value) {
 }
 
 // src/styled.ts
-var import_styled_components2 = require("styled-components");
+var import_styled_components2 = __toESM(require("styled-components"));
 var import_styled2 = require("@charcoal-ui/styled");
 var theme = (0, import_styled2.createTheme)(import_styled_components2.default);
 
 // src/components/Clickable/index.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_styled_components3 = require("styled-components");
+var import_react3 = __toESM(require("react"));
+var import_styled_components3 = __toESM(require("styled-components"));
 var import_utils = require("@charcoal-ui/utils");
 var Clickable = import_react3.default.forwardRef(
   function Clickable2(props, ref) {
@@ -288,8 +288,8 @@ function sizeToProps(size) {
 }
 
 // src/components/IconButton/index.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_styled_components5 = require("styled-components");
+var import_react5 = __toESM(require("react"));
+var import_styled_components5 = __toESM(require("styled-components"));
 var IconButton = import_react5.default.forwardRef(
   function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
     validateIconSize(size, icon);
@@ -372,9 +372,9 @@ function validateIconSize(size, icon) {
 }
 
 // src/components/Radio/index.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_styled_components6 = require("styled-components");
-var import_warning = __toESM(require("warning"), 1);
+var import_react6 = __toESM(require("react"));
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_warning = __toESM(require("warning"));
 var import_utils2 = require("@charcoal-ui/utils");
 function Radio({
   value,
@@ -530,9 +530,9 @@ function RadioGroup({
 }
 
 // src/components/MultiSelect/index.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_styled_components7 = require("styled-components");
-var import_warning2 = __toESM(require("warning"), 1);
+var import_react8 = __toESM(require("react"));
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_warning2 = __toESM(require("warning"));
 var import_utils3 = require("@charcoal-ui/utils");
 
 // src/components/MultiSelect/context.ts
@@ -720,9 +720,9 @@ function MultiSelectGroup({
 
 // src/components/Switch/index.tsx
 var import_switch = require("@react-aria/switch");
-var import_react9 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"));
 var import_react_stately = require("react-stately");
-var import_styled_components8 = require("styled-components");
+var import_styled_components8 = __toESM(require("styled-components"));
 var import_utils4 = require("@charcoal-ui/utils");
 function SwitchCheckbox(props) {
   const { disabled, className } = props;
@@ -808,12 +808,12 @@ var SwitchInput = import_styled_components8.default.input.attrs({
 // src/components/TextField/index.tsx
 var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react11 = __toESM(require("react"), 1);
-var import_styled_components10 = require("styled-components");
+var import_react11 = __toESM(require("react"));
+var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/components/FieldLabel/index.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_styled_components9 = require("styled-components");
+var import_react10 = __toESM(require("react"));
+var import_styled_components9 = __toESM(require("styled-components"));
 var import_styled8 = require("@charcoal-ui/styled");
 var FieldLabel = import_react10.default.forwardRef(
   function FieldLabel2({
@@ -1222,7 +1222,7 @@ var AssistiveText = import_styled_components10.default.p`
 `;
 
 // src/components/Icon/index.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"));
 var import_icons = require("@charcoal-ui/icons");
 var Icon = import_react12.default.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
   return /* @__PURE__ */ import_react12.default.createElement(
@@ -1240,9 +1240,9 @@ var Icon = import_react12.default.forwardRef(function IconInner({ name, scale, u
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
-var import_styled_components11 = require("styled-components");
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_focus = require("@react-aria/focus");
 var import_dialog = require("@react-aria/dialog");
 
@@ -1410,8 +1410,8 @@ var ModalHeading = import_styled_components11.default.h3`
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_styled_components12 = require("styled-components");
+var import_react14 = __toESM(require("react"));
+var import_styled_components12 = __toESM(require("styled-components"));
 var import_utils6 = require("@charcoal-ui/utils");
 function ModalHeader() {
   return /* @__PURE__ */ import_react14.default.createElement(ModalHeaderRoot, null, /* @__PURE__ */ import_react14.default.createElement(StyledModalTitle, null));
@@ -1447,8 +1447,8 @@ var ModalButtons = import_styled_components12.default.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-var import_react15 = __toESM(require("react"), 1);
-var import_styled_components13 = require("styled-components");
+var import_react15 = __toESM(require("react"));
+var import_styled_components13 = __toESM(require("styled-components"));
 function LoadingSpinner({
   size = 48,
   padding = 16,
@@ -1508,17 +1508,17 @@ var LoadingSpinnerIcon = import_react15.default.forwardRef(function LoadingSpinn
 });
 
 // src/components/DropdownSelector/index.tsx
-var import_react18 = __toESM(require("react"), 1);
-var import_styled_components15 = require("styled-components");
+var import_react18 = __toESM(require("react"));
+var import_styled_components16 = __toESM(require("styled-components"));
 var import_react_stately2 = require("react-stately");
-var import_utils10 = require("@charcoal-ui/utils");
+var import_utils9 = 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_react16 = __toESM(require("react"), 1);
-var import_styled_components14 = require("styled-components");
+var import_react16 = __toESM(require("react"));
+var import_styled_components14 = __toESM(require("styled-components"));
 var import_listbox = require("@react-aria/listbox");
 var import_utils7 = require("@react-aria/utils");
 var import_focus2 = require("@react-aria/focus");
@@ -1546,6 +1546,8 @@ var ListboxRoot = import_styled_components14.default.ul`
   margin: 0;
   box-sizing: border-box;
   list-style: none;
+  overflow: auto;
+  max-height: inherit;
 
   ${theme((o) => [
   o.bg.background1,
@@ -1570,7 +1572,7 @@ var 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_utils7.mergeProps)(optionProps, focusProps), ref, mode }, /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ import_react16.default.createElement(OptionText, null, item.rendered));
+  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils7.mergeProps)(optionProps, focusProps), ref, mode }, isSelected && /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check" }), /* @__PURE__ */ import_react16.default.createElement(OptionText, { isSelected }, item.rendered));
 };
 var OptionRoot = import_styled_components14.default.li`
   display: flex;
@@ -1590,40 +1592,58 @@ var OptionRoot = import_styled_components14.default.li`
   }
 `;
 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])}
+  ${({ isSelected }) => theme((o) => [
+  o.typography(14),
+  o.font.text2,
+  isSelected ? void 0 : o.margin.left(16),
+  isSelected ? void 0 : o.padding.left(4)
+])}
 `;
 
-// src/components/DropdownSelector/Popover.tsx
-var import_focus3 = require("@react-aria/focus");
+// src/components/DropdownSelector/DropdownPopover.tsx
+var import_react17 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
-var import_react17 = __toESM(require("react"), 1);
-var import_utils9 = require("@react-aria/utils");
-var Popover = ({ open, onClose, children, ...props }) => {
+var import_styled_components15 = __toESM(require("styled-components"));
+var DropdownPopoverDiv = import_styled_components15.default.div`
+  width: 100%;
+  ${theme((o) => o.margin.top(4).bottom(4))}
+`;
+function DropdownPopover({ children, state, ...props }) {
   const ref = (0, import_react17.useRef)(null);
-  const { overlayProps } = (0, import_overlays3.useOverlay)(
-    (0, import_react17.useMemo)(
-      () => ({
-        isOpen: open,
-        onClose,
-        shouldCloseOnBlur: true,
-        isDismissable: true
-      }),
-      [onClose, open]
-    ),
-    ref
+  const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
+    {
+      ...props,
+      popoverRef: ref,
+      containerPadding: 0
+    },
+    state
   );
-  return /* @__PURE__ */ import_react17.default.createElement(import_focus3.FocusScope, { restoreFocus: true }, /* @__PURE__ */ import_react17.default.createElement("div", { ...(0, import_utils9.mergeProps)(overlayProps, props), ref }, children, /* @__PURE__ */ import_react17.default.createElement(import_overlays3.DismissButton, { onDismiss: onClose })));
-};
-var Popover_default = (0, import_react17.memo)(Popover);
+  (0, import_react17.useEffect)(() => {
+    if (ref.current && props.triggerRef.current) {
+      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
+    }
+  }, [props.triggerRef]);
+  (0, import_react17.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);
+      });
+    }
+  }, [props.value, state.isOpen]);
+  return /* @__PURE__ */ import_react17.default.createElement(import_overlays3.Overlay, null, /* @__PURE__ */ import_react17.default.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ import_react17.default.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ import_react17.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ import_react17.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() })));
+}
 
 // src/components/DropdownSelector/index.tsx
 var DropdownSelector = ({
@@ -1689,7 +1709,15 @@ var DropdownSelector = ({
       isDisabled: disabled,
       autoComplete
     }
-  ), /* @__PURE__ */ import_react18.default.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ import_react18.default.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ import_react18.default.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react18.default.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ import_react18.default.createElement(DropdownPopover, { open: state.isOpen, onClose: () => state.close() }, /* @__PURE__ */ import_react18.default.createElement(Listbox_default, { ...menuProps, state, mode }))), hasAssertiveText && /* @__PURE__ */ import_react18.default.createElement(
+  ), /* @__PURE__ */ import_react18.default.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ import_react18.default.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ import_react18.default.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react18.default.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ import_react18.default.createElement(
+    DropdownPopover,
+    {
+      state,
+      triggerRef,
+      value: props.value ?? props.defaultValue
+    },
+    /* @__PURE__ */ import_react18.default.createElement(Listbox_default, { ...menuProps, state, mode })
+  )), hasAssertiveText && /* @__PURE__ */ import_react18.default.createElement(
     AssertiveText,
     {
       invalid,
@@ -1700,34 +1728,35 @@ var DropdownSelector = ({
 };
 var DropdownSelector_default = DropdownSelector;
 var DropdownSelectorItem = import_react_stately2.Item;
-var DropdownSelectorRoot = import_styled_components15.default.div`
+var DropdownSelectorRoot = import_styled_components16.default.div`
   position: relative;
   display: inline-block;
+  width: 100%;
 
-  ${import_utils10.disabledSelector} {
+  ${import_utils9.disabledSelector} {
     cursor: default;
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = (0, import_styled_components15.default)(FieldLabel_default)`
+var DropdownFieldLabel = (0, import_styled_components16.default)(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButtonWrapper = import_styled_components15.default.div`
+var DropdownButtonWrapper = import_styled_components16.default.div`
   position: relative;
 `;
-var DropdownButton = import_styled_components15.default.button`
+var DropdownButton = import_styled_components16.default.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   height: 40px;
-  width: 288px;
+  width: 100%;
   box-sizing: border-box;
   cursor: pointer;
 
-  ${import_utils10.disabledSelector} {
+  ${import_utils9.disabledSelector} {
     cursor: default;
   }
 
@@ -1740,38 +1769,31 @@ var DropdownButton = import_styled_components15.default.button`
   invalid && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = import_styled_components15.default.span`
+var DropdownButtonText = import_styled_components16.default.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = (0, import_styled_components15.default)(Icon_default)`
+var DropdownButtonIcon = (0, import_styled_components16.default)(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = import_styled_components15.default.div`
+var AssertiveText = import_styled_components16.default.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
   invalid ? o.font.assertive : o.font.text2
 ])}
 `;
-var DropdownPopover = (0, import_styled_components15.default)(Popover_default)`
-  position: absolute;
-  width: 100%;
-
-  top: 100%;
-  margin-top: 2px;
-`;
 
 // src/components/SegmentedControl/index.tsx
-var import_react20 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"));
 var import_react_stately3 = require("react-stately");
 var import_radio = require("@react-aria/radio");
-var import_styled_components16 = require("styled-components");
-var import_utils11 = require("@charcoal-ui/utils");
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_utils10 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react19 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"));
 var RadioContext = (0, import_react19.createContext)(null);
 var RadioProvider = ({
   value,
@@ -1839,20 +1861,20 @@ var Segmented = ({ children, ...props }) => {
     /* @__PURE__ */ import_react20.default.createElement(RadioLabel2, null, /* @__PURE__ */ import_react20.default.createElement(SegmentedLabelInner, null, children))
   );
 };
-var SegmentedControlRoot = import_styled_components16.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_components16.default.label`
+var SegmentedRoot = import_styled_components17.default.label`
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
   height: 32px;
 
-  ${import_utils11.disabledSelector} {
+  ${import_utils10.disabledSelector} {
     cursor: default;
   }
 
@@ -1864,7 +1886,7 @@ var SegmentedRoot = import_styled_components16.default.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = import_styled_components16.default.input`
+var SegmentedInput = import_styled_components17.default.input`
   position: absolute;
 
   height: 0px;
@@ -1878,23 +1900,23 @@ var SegmentedInput = import_styled_components16.default.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = import_styled_components16.default.div`
+var RadioLabel2 = import_styled_components17.default.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = import_styled_components16.default.div`
+var SegmentedLabelInner = import_styled_components17.default.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_styled_components17 = 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_utils12 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_react_stately4 = require("react-stately");
-var import_utils13 = require("@charcoal-ui/utils");
+var import_utils12 = require("@charcoal-ui/utils");
 var Checkbox = (0, import_react21.forwardRef)(
   function CheckboxInner(props, ref) {
     const ariaCheckboxProps = (0, import_react21.useMemo)(
@@ -1908,32 +1930,32 @@ var Checkbox = (0, import_react21.forwardRef)(
       [props]
     );
     const state = (0, import_react_stately4.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils12.useObjectRef)(ref);
+    const objectRef = (0, import_utils11.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
     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_react21.memo)(Checkbox);
-var hiddenCss = import_styled_components17.css`
+var hiddenCss = import_styled_components18.css`
   visibility: hidden;
 `;
-var InputRoot = import_styled_components17.default.label`
+var InputRoot = import_styled_components18.default.label`
   position: relative;
   display: flex;
 
   cursor: pointer;
-  ${import_utils13.disabledSelector} {
+  ${import_utils12.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme4 }) => (0, import_utils13.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils12.px)(theme4.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = import_styled_components17.default.div`
+var CheckboxRoot = import_styled_components18.default.div`
   position: relative;
 `;
-var CheckboxInput = import_styled_components17.default.input`
+var CheckboxInput = import_styled_components18.default.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -1953,7 +1975,7 @@ var CheckboxInput = import_styled_components17.default.input`
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
   }
 `;
-var CheckboxInputOverlay = import_styled_components17.default.div`
+var CheckboxInputOverlay = import_styled_components18.default.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -1966,7 +1988,7 @@ var CheckboxInputOverlay = import_styled_components17.default.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = import_styled_components17.default.div`
+var InputLabel = import_styled_components18.default.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -1975,10 +1997,10 @@ var InputLabel = import_styled_components17.default.div`
 `;
 
 // src/components/TagItem/index.tsx
-var import_react22 = __toESM(require("react"), 1);
-var import_utils14 = require("@react-aria/utils");
-var import_styled_components18 = require("styled-components");
-var import_utils15 = require("@charcoal-ui/utils");
+var import_react22 = __toESM(require("react"));
+var import_utils13 = require("@react-aria/utils");
+var import_styled_components19 = __toESM(require("styled-components"));
+var import_utils14 = require("@charcoal-ui/utils");
 var import_button2 = require("@react-aria/button");
 var sizeMap = {
   S: 32,
@@ -1995,7 +2017,7 @@ var TagItem = (0, import_react22.forwardRef)(
     status = "default",
     ...props
   }, _ref) {
-    const ref = (0, import_utils14.useObjectRef)(_ref);
+    const ref = (0, import_utils13.useObjectRef)(_ref);
     const ariaButtonProps = (0, import_react22.useMemo)(
       () => ({
         elementType: "a",
@@ -2020,7 +2042,7 @@ var TagItem = (0, import_react22.forwardRef)(
   }
 );
 var TagItem_default = (0, import_react22.memo)(TagItem);
-var TagItemRoot = import_styled_components18.default.a`
+var TagItemRoot = import_styled_components19.default.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2041,12 +2063,12 @@ var TagItemRoot = import_styled_components18.default.a`
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
 
-  ${import_utils15.disabledSelector} {
+  ${import_utils14.disabledSelector} {
     ${theme((o) => [o.disabled])}
     cursor: default;
   }
 `;
-var Background = import_styled_components18.default.div`
+var Background = import_styled_components19.default.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2056,7 +2078,7 @@ var Background = import_styled_components18.default.div`
 
   background-color: ${({ bgColor }) => bgColor};
 
-  ${({ bgImage }) => bgImage !== void 0 && import_styled_components18.css`
+  ${({ bgImage }) => bgImage !== void 0 && import_styled_components19.css`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2072,25 +2094,25 @@ var Background = import_styled_components18.default.div`
       }
     `}
 `;
-var Inner = import_styled_components18.default.div`
+var Inner = import_styled_components19.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme4 }) => (0, import_utils15.px)(theme4.spacing[8])};
+  gap: ${({ theme: theme4 }) => (0, import_utils14.px)(theme4.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = import_styled_components18.css`
+var labelCSS = import_styled_components19.css`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = import_styled_components18.css`
+var translateLabelCSS = import_styled_components19.css`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = import_styled_components18.default.div`
+var LabelWrapper = import_styled_components19.default.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = import_styled_components18.default.span`
+var Label3 = import_styled_components19.default.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2099,7 +2121,7 @@ var Label3 = import_styled_components18.default.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = import_styled_components18.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:
@@ -2132,4 +2154,4 @@ var TranslatedLabel = import_styled_components18.default.div`
   TextField,
   useComponentAbstraction
 });
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map