@abcagency/hc-ui-components 1.4.23 → 1.5.1

package/dist/packages/hc-ui-components/node_modules/@radix-ui/react-select/dist/index.js

@@ -13,12 +13,12 @@ import { useId } from '../../react-id/dist/index.js';
 import { createPopperScope, Anchor, Content, Arrow, Root as Root2$1 } from '../../react-popper/dist/index.js';
 import { Portal as Portal$1 } from '../../react-portal/dist/index.js';
 import { Primitive } from '../../react-primitive/dist/index.js';
-import { Slot } from '../../react-slot/dist/index.js';
+import { createSlot } from '../../react-slot/dist/index.js';
 import { useCallbackRef } from '../../react-use-callback-ref/dist/index.js';
 import { useControllableState } from '../../react-use-controllable-state/dist/index.js';
 import { useLayoutEffect as useLayoutEffect2 } from '../../react-use-layout-effect/dist/index.js';
 import { usePrevious } from '../../react-use-previous/dist/index.js';
-import { VisuallyHidden } from '../../react-visually-hidden/dist/index.js';
+import { VISUALLY_HIDDEN_STYLES } from '../../react-visually-hidden/dist/index.js';
 import { hideOthers } from '../../../aria-hidden/dist/es2015/index.js';
 import ReactRemoveScroll from '../../../react-remove-scroll/dist/es2015/Combination.js';
 import { j as jsxRuntimeExports } from '../../../../../../apps/test-react-app/node_modules/react/jsx-runtime.js';
@@ -48,25 +48,28 @@ var Select = (props) => {
     name,
     autoComplete,
     disabled,
-    required
+    required,
+    form
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const [trigger, setTrigger] = React.useState(null);
   const [valueNode, setValueNode] = React.useState(null);
   const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
   const direction = useDirection(dir);
-  const [open = false, setOpen] = useControllableState({
+  const [open, setOpen] = useControllableState({
     prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+    caller: SELECT_NAME
   });
   const [value, setValue] = useControllableState({
     prop: valueProp,
     defaultProp: defaultValue,
-    onChange: onValueChange
+    onChange: onValueChange,
+    caller: SELECT_NAME
   });
   const triggerPointerDownPosRef = React.useRef(null);
-  const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
+  const isFormControl = trigger ? form || !!trigger.closest("form") : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2$1, { ...popperScope, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -107,7 +110,7 @@ var Select = (props) => {
           }
         ) }),
         isFormControl ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          BubbleSelect,
+          SelectBubbleInput,
           {
             "aria-hidden": true,
             required,
@@ -117,6 +120,7 @@ var Select = (props) => {
             value,
             onChange: (event) => setValue(event.target.value),
             disabled,
+            form,
             children: [
               value === void 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "" }) : null,
               Array.from(nativeOptionsSet)
@@ -138,6 +142,7 @@ var SelectTrigger = React.forwardRef(
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
     const getItems = useCollection(__scopeSelect);
+    const pointerTypeRef = React.useRef("touch");
     const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {
       const enabledItems = getItems().filter((item) => !item.disabled);
       const currentItem = enabledItems.find((item) => item.value === context.value);
@@ -146,11 +151,17 @@ var SelectTrigger = React.forwardRef(
         context.onValueChange(nextItem.value);
       }
     });
-    const handleOpen = () => {
+    const handleOpen = (pointerEvent) => {
       if (!isDisabled) {
         context.onOpenChange(true);
         resetTypeahead();
       }
+      if (pointerEvent) {
+        context.triggerPointerDownPosRef.current = {
+          x: Math.round(pointerEvent.pageX),
+          y: Math.round(pointerEvent.pageY)
+        };
+      }
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Primitive.button,
@@ -170,18 +181,18 @@ var SelectTrigger = React.forwardRef(
         ref: composedRefs,
         onClick: composeEventHandlers(triggerProps.onClick, (event) => {
           event.currentTarget.focus();
+          if (pointerTypeRef.current !== "mouse") {
+            handleOpen(event);
+          }
         }),
         onPointerDown: composeEventHandlers(triggerProps.onPointerDown, (event) => {
+          pointerTypeRef.current = event.pointerType;
           const target = event.target;
           if (target.hasPointerCapture(event.pointerId)) {
             target.releasePointerCapture(event.pointerId);
           }
-          if (event.button === 0 && event.ctrlKey === false) {
-            handleOpen();
-            context.triggerPointerDownPosRef.current = {
-              x: Math.round(event.pageX),
-              y: Math.round(event.pageY)
-            };
+          if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse") {
+            handleOpen(event);
             event.preventDefault();
           }
         }),
@@ -258,6 +269,7 @@ SelectContent.displayName = CONTENT_NAME;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
+var Slot = createSlot("SelectContent.RemoveScroll");
 var SelectContentImpl = React.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -516,7 +528,15 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
         const minContentWidth = triggerRect.width + leftDelta;
         const contentWidth = Math.max(minContentWidth, contentRect.width);
         const rightEdge = window.innerWidth - CONTENT_MARGIN;
-        const clampedLeft = clamp(left, [CONTENT_MARGIN, rightEdge - contentWidth]);
+        const clampedLeft = clamp(left, [
+          CONTENT_MARGIN,
+          // Prevents the content from going off the starting edge of the
+          // viewport. It may still go off the ending edge, but this can be
+          // controlled by the user since they may want to manage overflow in a
+          // specific way.
+          // https://github.com/radix-ui/primitives/issues/2049
+          Math.max(CONTENT_MARGIN, rightEdge - contentWidth)
+        ]);
         contentWrapper.style.minWidth = minContentWidth + "px";
         contentWrapper.style.left = clampedLeft + "px";
       } else {
@@ -526,7 +546,10 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
         const minContentWidth = triggerRect.width + rightDelta;
         const contentWidth = Math.max(minContentWidth, contentRect.width);
         const leftEdge = window.innerWidth - CONTENT_MARGIN;
-        const clampedRight = clamp(right, [CONTENT_MARGIN, leftEdge - contentWidth]);
+        const clampedRight = clamp(right, [
+          CONTENT_MARGIN,
+          Math.max(CONTENT_MARGIN, leftEdge - contentWidth)
+        ]);
         contentWrapper.style.minWidth = minContentWidth + "px";
         contentWrapper.style.right = clampedRight + "px";
       }
@@ -551,7 +574,7 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
       const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
       const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
       if (willAlignWithoutTopOverflow) {
-        const isLastItem = selectedItem === items[items.length - 1].ref.current;
+        const isLastItem = items.length > 0 && selectedItem === items[items.length - 1].ref.current;
         contentWrapper.style.bottom = "0px";
         const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
         const clampedTriggerMiddleToBottomEdge = Math.max(
@@ -562,7 +585,7 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
         const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
         contentWrapper.style.height = height + "px";
       } else {
-        const isFirstItem = selectedItem === items[0].ref.current;
+        const isFirstItem = items.length > 0 && selectedItem === items[0].ref.current;
         contentWrapper.style.top = "0px";
         const clampedTopEdgeToTriggerMiddle = Math.max(
           topEdgeToTriggerMiddle,
@@ -710,7 +733,11 @@ var SelectViewport = React.forwardRef(
             // (independent of the scrollUpButton).
             position: "relative",
             flex: 1,
-            overflow: "auto",
+            // Viewport should only be scrollable in the vertical direction.
+            // This won't work in vertical writing modes, so we'll need to
+            // revisit this if/when that is supported
+            // https://developer.chrome.com/blog/vertical-form-controls
+            overflow: "hidden auto",
             ...viewportProps.style
           },
           onScroll: composeEventHandlers(viewportProps.onScroll, (event) => {
@@ -783,6 +810,7 @@ var SelectItem = React.forwardRef(
       (node) => contentContext.itemRefCallback?.(node, value, disabled)
     );
     const textId = useId();
+    const pointerTypeRef = React.useRef("touch");
     const handleSelect = () => {
       if (!disabled) {
         context.onValueChange(value);
@@ -827,11 +855,20 @@ var SelectItem = React.forwardRef(
                 ref: composedRefs,
                 onFocus: composeEventHandlers(itemProps.onFocus, () => setIsFocused(true)),
                 onBlur: composeEventHandlers(itemProps.onBlur, () => setIsFocused(false)),
-                onPointerUp: composeEventHandlers(itemProps.onPointerUp, handleSelect),
+                onClick: composeEventHandlers(itemProps.onClick, () => {
+                  if (pointerTypeRef.current !== "mouse") handleSelect();
+                }),
+                onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => {
+                  if (pointerTypeRef.current === "mouse") handleSelect();
+                }),
+                onPointerDown: composeEventHandlers(itemProps.onPointerDown, (event) => {
+                  pointerTypeRef.current = event.pointerType;
+                }),
                 onPointerMove: composeEventHandlers(itemProps.onPointerMove, (event) => {
+                  pointerTypeRef.current = event.pointerType;
                   if (disabled) {
                     contentContext.onItemLeave?.();
-                  } else {
+                  } else if (pointerTypeRef.current === "mouse") {
                     event.currentTarget.focus({ preventScroll: true });
                   }
                 }),
@@ -1024,17 +1061,15 @@ var SelectArrow = React.forwardRef(
   }
 );
 SelectArrow.displayName = ARROW_NAME;
-function shouldShowPlaceholder(value) {
-  return value === "" || value === void 0;
-}
-var BubbleSelect = React.forwardRef(
-  (props, forwardedRef) => {
-    const { value, ...selectProps } = props;
+var BUBBLE_INPUT_NAME = "SelectBubbleInput";
+var SelectBubbleInput = React.forwardRef(
+  ({ __scopeSelect, value, ...props }, forwardedRef) => {
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const prevValue = usePrevious(value);
     React.useEffect(() => {
       const select = ref.current;
+      if (!select) return;
       const selectProto = window.HTMLSelectElement.prototype;
       const descriptor = Object.getOwnPropertyDescriptor(
         selectProto,
@@ -1047,10 +1082,21 @@ var BubbleSelect = React.forwardRef(
         select.dispatchEvent(event);
       }
     }, [prevValue, value]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive.select,
+      {
+        ...props,
+        style: { ...VISUALLY_HIDDEN_STYLES, ...props.style },
+        ref: composedRefs,
+        defaultValue: value
+      }
+    );
   }
 );
-BubbleSelect.displayName = "BubbleSelect";
+SelectBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function shouldShowPlaceholder(value) {
+  return value === "" || value === void 0;
+}
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
   const searchRef = React.useRef("");