@charcoal-ui/react 2.3.0 → 2.4.0

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

@@ -1459,8 +1459,8 @@ var LoadingSpinnerIcon = React14.forwardRef(function LoadingSpinnerIcon2({ once
 });
 
 // src/components/DropdownSelector/index.tsx
-import React17, { useMemo as useMemo4, useRef as useRef7 } from "react";
-import styled14 from "styled-components";
+import React17, { useMemo as useMemo3, useRef as useRef7 } from "react";
+import styled15 from "styled-components";
 import { Item, useSelectState } from "react-stately";
 import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
@@ -1469,7 +1469,7 @@ import { useButton } from "@react-aria/button";
 
 // src/components/DropdownSelector/Listbox.tsx
 import React15, { memo, useRef as useRef5, Fragment, useMemo as useMemo2 } from "react";
-import styled13, { css as css5 } from "styled-components";
+import styled13 from "styled-components";
 import { useListBox, useOption } from "@react-aria/listbox";
 import { mergeProps } from "@react-aria/utils";
 import { useFocusRing } from "@react-aria/focus";
@@ -1497,6 +1497,8 @@ var ListboxRoot = styled13.ul`
   margin: 0;
   box-sizing: border-box;
   list-style: none;
+  overflow: auto;
+  max-height: inherit;
 
   ${theme((o) => [
   o.bg.background1,
@@ -1521,7 +1523,7 @@ var Option = ({ item, state, mode }) => {
   const ref = useRef5(null);
   const { optionProps, isSelected } = useOption(item, state, ref);
   const { focusProps } = useFocusRing();
-  return /* @__PURE__ */ React15.createElement(OptionRoot, { ...mergeProps(optionProps, focusProps), ref, mode }, /* @__PURE__ */ React15.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ React15.createElement(OptionText, null, item.rendered));
+  return /* @__PURE__ */ React15.createElement(OptionRoot, { ...mergeProps(optionProps, focusProps), ref, mode }, isSelected && /* @__PURE__ */ React15.createElement(OptionCheckIcon, { name: "16/Check" }), /* @__PURE__ */ React15.createElement(OptionText, { isSelected }, item.rendered));
 };
 var OptionRoot = styled13.li`
   display: flex;
@@ -1541,44 +1543,62 @@ var OptionRoot = styled13.li`
   }
 `;
 var OptionCheckIcon = styled13(Icon_default)`
-  visibility: hidden;
   ${theme((o) => [o.font.text2])}
-
-  ${({ isSelected }) => isSelected && css5`
-      visibility: visible;
-    `}
 `;
 var OptionText = styled13.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
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
-import { DismissButton, useOverlay as useOverlay2 } from "@react-aria/overlays";
-import React16, {
-  useRef as useRef6,
-  useMemo as useMemo3,
-  memo as memo2
-} from "react";
-import { mergeProps as mergeProps2 } from "@react-aria/utils";
-var Popover = ({ open, onClose, children, ...props }) => {
+// src/components/DropdownSelector/DropdownPopover.tsx
+import React16, { useEffect as useEffect2, useRef as useRef6 } from "react";
+import {
+  DismissButton,
+  Overlay as Overlay2,
+  usePopover
+} from "@react-aria/overlays";
+import styled14 from "styled-components";
+var DropdownPopoverDiv = styled14.div`
+  width: 100%;
+  ${theme((o) => o.margin.top(4).bottom(4))}
+`;
+function DropdownPopover({ children, state, ...props }) {
   const ref = useRef6(null);
-  const { overlayProps } = useOverlay2(
-    useMemo3(
-      () => ({
-        isOpen: open,
-        onClose,
-        shouldCloseOnBlur: true,
-        isDismissable: true
-      }),
-      [onClose, open]
-    ),
-    ref
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      ...props,
+      popoverRef: ref,
+      containerPadding: 0
+    },
+    state
   );
-  return /* @__PURE__ */ React16.createElement(FocusScope2, { restoreFocus: true }, /* @__PURE__ */ React16.createElement("div", { ...mergeProps2(overlayProps, props), ref }, children, /* @__PURE__ */ React16.createElement(DismissButton, { onDismiss: onClose })));
-};
-var Popover_default = memo2(Popover);
+  useEffect2(() => {
+    if (ref.current && props.triggerRef.current) {
+      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
+    }
+  }, [props.triggerRef]);
+  useEffect2(() => {
+    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__ */ React16.createElement(Overlay2, null, /* @__PURE__ */ React16.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ React16.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ React16.createElement(DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ React16.createElement(DismissButton, { onDismiss: () => state.close() })));
+}
 
 // src/components/DropdownSelector/index.tsx
 var DropdownSelector = ({
@@ -1598,7 +1618,7 @@ var DropdownSelector = ({
 }) => {
   const { visuallyHiddenProps } = useVisuallyHidden2();
   const triggerRef = useRef7(null);
-  const selectProps = useMemo4(
+  const selectProps = useMemo3(
     () => ({
       ...props,
       label,
@@ -1644,7 +1664,15 @@ var DropdownSelector = ({
       isDisabled: disabled,
       autoComplete
     }
-  ), /* @__PURE__ */ React17.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ React17.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ React17.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React17.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ React17.createElement(DropdownPopover, { open: state.isOpen, onClose: () => state.close() }, /* @__PURE__ */ React17.createElement(Listbox_default, { ...menuProps, state, mode }))), hasAssertiveText && /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React17.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ React17.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ React17.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React17.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ React17.createElement(
+    DropdownPopover,
+    {
+      state,
+      triggerRef,
+      value: props.value ?? props.defaultValue
+    },
+    /* @__PURE__ */ React17.createElement(Listbox_default, { ...menuProps, state, mode })
+  )), hasAssertiveText && /* @__PURE__ */ React17.createElement(
     AssertiveText,
     {
       invalid,
@@ -1655,30 +1683,31 @@ var DropdownSelector = ({
 };
 var DropdownSelector_default = DropdownSelector;
 var DropdownSelectorItem = Item;
-var DropdownSelectorRoot = styled14.div`
+var DropdownSelectorRoot = styled15.div`
   position: relative;
   display: inline-block;
+  width: 100%;
 
   ${disabledSelector4} {
     cursor: default;
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = styled14(FieldLabel_default)`
+var DropdownFieldLabel = styled15(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButtonWrapper = styled14.div`
+var DropdownButtonWrapper = styled15.div`
   position: relative;
 `;
-var DropdownButton = styled14.button`
+var DropdownButton = styled15.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   height: 40px;
-  width: 288px;
+  width: 100%;
   box-sizing: border-box;
   cursor: pointer;
 
@@ -1695,37 +1724,30 @@ var DropdownButton = styled14.button`
   invalid && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = styled14.span`
+var DropdownButtonText = styled15.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = styled14(Icon_default)`
+var DropdownButtonIcon = styled15(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = styled14.div`
+var AssertiveText = styled15.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
   invalid ? o.font.assertive : o.font.text2
 ])}
 `;
-var DropdownPopover = styled14(Popover_default)`
-  position: absolute;
-  width: 100%;
-
-  top: 100%;
-  margin-top: 2px;
-`;
 
 // src/components/SegmentedControl/index.tsx
-import React19, { forwardRef, memo as memo3, useMemo as useMemo5, useRef as useRef8 } from "react";
+import React19, { forwardRef, memo as memo2, useMemo as useMemo4, useRef as useRef8 } from "react";
 import { useRadioGroupState } from "react-stately";
 import {
   useRadio,
   useRadioGroup
 } from "@react-aria/radio";
-import styled15 from "styled-components";
+import styled16 from "styled-components";
 import { disabledSelector as disabledSelector5 } from "@charcoal-ui/utils";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
@@ -1747,7 +1769,7 @@ var useRadioContext = () => {
 // src/components/SegmentedControl/index.tsx
 var SegmentedControl = forwardRef(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = useMemo5(
+    const ariaRadioGroupProps = useMemo4(
       () => ({
         ...props,
         isDisabled: props.disabled,
@@ -1758,7 +1780,7 @@ var SegmentedControl = forwardRef(
     );
     const state = useRadioGroupState(ariaRadioGroupProps);
     const { radioGroupProps } = useRadioGroup(ariaRadioGroupProps, state);
-    const segmentedControlItems = useMemo5(() => {
+    const segmentedControlItems = useMemo4(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
@@ -1774,11 +1796,11 @@ var SegmentedControl = forwardRef(
     ))));
   }
 );
-var SegmentedControl_default = memo3(SegmentedControl);
+var SegmentedControl_default = memo2(SegmentedControl);
 var Segmented = ({ children, ...props }) => {
   const state = useRadioContext();
   const ref = useRef8(null);
-  const ariaRadioProps = useMemo5(
+  const ariaRadioProps = useMemo4(
     () => ({ ...props, isDisabled: props.disabled }),
     [props]
   );
@@ -1797,13 +1819,13 @@ var Segmented = ({ children, ...props }) => {
     /* @__PURE__ */ React19.createElement(RadioLabel2, null, /* @__PURE__ */ React19.createElement(SegmentedLabelInner, null, children))
   );
 };
-var SegmentedControlRoot = styled15.div`
+var SegmentedControlRoot = styled16.div`
   display: inline-flex;
   align-items: center;
 
   ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
 `;
-var SegmentedRoot = styled15.label`
+var SegmentedRoot = styled16.label`
   position: relative;
   display: flex;
   align-items: center;
@@ -1822,7 +1844,7 @@ var SegmentedRoot = styled15.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = styled15.input`
+var SegmentedInput = styled16.input`
   position: absolute;
 
   height: 0px;
@@ -1836,26 +1858,26 @@ var SegmentedInput = styled15.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = styled15.div`
+var RadioLabel2 = styled16.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = styled15.div`
+var SegmentedLabelInner = styled16.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-import React20, { forwardRef as forwardRef2, memo as memo4, useMemo as useMemo6 } from "react";
-import styled16, { css as css6 } from "styled-components";
+import React20, { forwardRef as forwardRef2, memo as memo3, useMemo as useMemo5 } from "react";
+import styled17, { css as css5 } from "styled-components";
 import { useCheckbox } from "@react-aria/checkbox";
 import { useObjectRef } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { disabledSelector as disabledSelector6, px as px4 } from "@charcoal-ui/utils";
 var Checkbox = forwardRef2(
   function CheckboxInner(props, ref) {
-    const ariaCheckboxProps = useMemo6(
+    const ariaCheckboxProps = useMemo5(
       () => ({
         ...props,
         isSelected: props.checked,
@@ -1872,11 +1894,11 @@ var Checkbox = forwardRef2(
     return /* @__PURE__ */ React20.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React20.createElement(CheckboxRoot, null, /* @__PURE__ */ React20.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ React20.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ React20.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ React20.createElement(InputLabel, null, props.children));
   }
 );
-var Checkbox_default = memo4(Checkbox);
-var hiddenCss = css6`
+var Checkbox_default = memo3(Checkbox);
+var hiddenCss = css5`
   visibility: hidden;
 `;
-var InputRoot = styled16.label`
+var InputRoot = styled17.label`
   position: relative;
   display: flex;
 
@@ -1888,10 +1910,10 @@ var InputRoot = styled16.label`
   gap: ${({ theme: theme4 }) => px4(theme4.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = styled16.div`
+var CheckboxRoot = styled17.div`
   position: relative;
 `;
-var CheckboxInput = styled16.input`
+var CheckboxInput = styled17.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -1911,7 +1933,7 @@ var CheckboxInput = styled16.input`
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
   }
 `;
-var CheckboxInputOverlay = styled16.div`
+var CheckboxInputOverlay = styled17.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -1924,7 +1946,7 @@ var CheckboxInputOverlay = styled16.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = styled16.div`
+var InputLabel = styled17.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -1935,11 +1957,11 @@ var InputLabel = styled16.div`
 // src/components/TagItem/index.tsx
 import React21, {
   forwardRef as forwardRef3,
-  memo as memo5,
-  useMemo as useMemo7
+  memo as memo4,
+  useMemo as useMemo6
 } from "react";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import styled17, { css as css7 } from "styled-components";
+import styled18, { css as css6 } from "styled-components";
 import { disabledSelector as disabledSelector7, px as px5 } from "@charcoal-ui/utils";
 import { useButton as useButton2 } from "@react-aria/button";
 var sizeMap = {
@@ -1958,7 +1980,7 @@ var TagItem = forwardRef3(
     ...props
   }, _ref) {
     const ref = useObjectRef2(_ref);
-    const ariaButtonProps = useMemo7(
+    const ariaButtonProps = useMemo6(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -1981,8 +2003,8 @@ var TagItem = forwardRef3(
     );
   }
 );
-var TagItem_default = memo5(TagItem);
-var TagItemRoot = styled17.a`
+var TagItem_default = memo4(TagItem);
+var TagItemRoot = styled18.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2008,7 +2030,7 @@ var TagItemRoot = styled17.a`
     cursor: default;
   }
 `;
-var Background = styled17.div`
+var Background = styled18.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2018,7 +2040,7 @@ var Background = styled17.div`
 
   background-color: ${({ bgColor }) => bgColor};
 
-  ${({ bgImage }) => bgImage !== void 0 && css7`
+  ${({ bgImage }) => bgImage !== void 0 && css6`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2034,25 +2056,25 @@ var Background = styled17.div`
       }
     `}
 `;
-var Inner = styled17.div`
+var Inner = styled18.div`
   display: inline-flex;
   gap: ${({ theme: theme4 }) => px5(theme4.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = css7`
+var labelCSS = css6`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = css7`
+var translateLabelCSS = css6`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = styled17.div`
+var LabelWrapper = styled18.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = styled17.span`
+var Label3 = styled18.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2061,7 +2083,7 @@ var Label3 = styled17.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = styled17.div`
+var TranslatedLabel = styled18.div`
   ${theme((o) => [o.typography(12).bold])}
 `;
 export {
@@ -2093,4 +2115,4 @@ export {
   TextField_default as TextField,
   useComponentAbstraction
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map