@economic/taco 1.14.2 → 1.15.0

package/dist/taco.cjs.development.js

@@ -4194,9 +4194,10 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   return element;
 });
 
-const useProxiedRef = ref => {
-  const internalRef = React.useRef(null);
-  React.useEffect(() => {
+// merges an external ref (optional) with an internal ref (required)
+const useMergedRef = ref => {
+  const internalRef = React__default.useRef(null);
+  React__default.useEffect(() => {
     if (ref) {
       if (typeof ref === 'function') {
         ref(internalRef.current);
@@ -4239,7 +4240,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     autoFocus,
     ...otherProps
   } = props;
-  const inputRef = useProxiedRef(ref);
+  const inputRef = useMergedRef(ref);
   const hasContainer = button || icon;
   const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
     'pr-8': !!hasContainer
@@ -4393,7 +4394,7 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
     allOptionsSelected = false,
     ...otherProps
   } = props;
-  const listRef = useProxiedRef(ref);
+  const listRef = useMergedRef(ref);
   const itemRefs = React.useMemo(() => data.map(() => /*#__PURE__*/React.createRef()), [data]);
   const {
     texts
@@ -4692,7 +4693,7 @@ const useCombobox = ({
   value,
   ...props
 }, ref) => {
-  const inputRef = useProxiedRef(ref);
+  const inputRef = useMergedRef(ref);
   const buttonRef = React.useRef(null);
   const listRef = React.useRef(null);
   const [open, setOpen] = React.useState(false);
@@ -5101,7 +5102,7 @@ const useDatepicker = ({
   value,
   ...props
 }, ref) => {
-  const inputRef = useProxiedRef(ref);
+  const inputRef = useMergedRef(ref);
   const {
     formatting
   } = useLocalization();
@@ -5257,7 +5258,10 @@ const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React
 const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
   const {
     children,
+    defaultOpen,
     modal = false,
+    open,
+    onChange,
     trigger,
     ...otherProps
   } = props;
@@ -5268,7 +5272,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
   return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(PopoverPrimitive.Root, {
-    modal: modal
+    defaultOpen: defaultOpen,
+    modal: modal,
+    open: open,
+    onOpenChange: onChange
   }, trigger && /*#__PURE__*/React.createElement(Trigger$2, null, trigger), children));
 });
 Popover.Trigger = Trigger$2;
@@ -5443,7 +5450,7 @@ const RenderPropWrapper$1 = /*#__PURE__*/React.forwardRef(function RenderPropWra
 });
 const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
   const dialog = useCurrentDialog();
-  const internalRef = useProxiedRef(ref);
+  const internalRef = useMergedRef(ref);
   const {
     position,
     handleProps: dragHandleProps
@@ -5890,7 +5897,7 @@ const useListbox = ({
     value: emptyValue
   }, ...externalData] : externalData);
   const id = React.useMemo(() => nativeId || uuid.v4(), [nativeId]);
-  const inputRef = useProxiedRef(ref);
+  const inputRef = useMergedRef(ref);
   const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
   const {
     getNextIndex
@@ -6011,7 +6018,7 @@ const useMultiListbox = ({
     texts
   } = useLocalization();
   const id = React.useMemo(() => nativeId || uuid.v4(), [nativeId]);
-  const inputRef = useProxiedRef(ref);
+  const inputRef = useMergedRef(ref);
   const data = React.useMemo(() => {
     return [{
       text: texts.listbox.allOption,
@@ -6214,7 +6221,7 @@ const useCurrentMenu = () => {
 };
 
 const Content$7 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
-  const internalRef = useProxiedRef(ref);
+  const internalRef = useMergedRef(ref);
   const menu = useCurrentMenu();
   const {
     children,
@@ -6347,7 +6354,7 @@ const Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
 
 const Trigger$5 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
   const menu = useCurrentMenu();
-  const internalRef = useProxiedRef(ref);
+  const internalRef = useMergedRef(ref);
   React.useEffect(() => {
     if (internalRef.current) {
       menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
@@ -6685,7 +6692,7 @@ const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref)
     role,
     ...otherProps
   } = props;
-  const proxyRef = useProxiedRef(ref);
+  const proxyRef = useMergedRef(ref);
   const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
   const isTreeitem = role === 'treeitem';
   const className = cn('yt-navigation__item cursor-pointer', {
@@ -6844,7 +6851,7 @@ const useSelect = ({
     texts
   } = useLocalization();
   const flattenedData = useFlattenedData(data);
-  const listboxInputRef = useProxiedRef(ref);
+  const listboxInputRef = useMergedRef(ref);
   const [open, setOpen] = React.useState(false);
   const id = React.useMemo(() => nativeId || `select_${uuid.v4()}`, [nativeId]);
   const inputRef = React.useRef(null);
@@ -7260,21 +7267,6 @@ const useId = nativeId => {
   return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
 };
 
-// merges an external ref (optional) with an internal ref (required)
-const useMergedRef = ref => {
-  const internalRef = React__default.useRef(null);
-  React__default.useEffect(() => {
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(internalRef.current);
-      } else {
-        ref.current = internalRef.current;
-      }
-    }
-  }, [ref]);
-  return internalRef;
-};
-
 const isAriaSelectionKey = event => {
   if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
     return true;
@@ -7288,98 +7280,87 @@ const isAriaDirectionKey = event => {
   return false;
 };
 
-const getOptions = (collection, selector) => collection.querySelectorAll(selector);
+const getOptionsFromCollection = (collection, selector) => collection.querySelectorAll(selector);
 // we use javascript to set attributes (rather than cloning children and adding them)
 // so that we can support nesting (e.g. groups) - child elements that aren't options.
 // without doing this we would have to unwrap and flatten all groups
 const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
   const {
-    selector,
+    querySelector,
     tabIndex = 0,
     ...otherProps
   } = props;
   const internalRef = useMergedRef(ref);
   const [activeIndex, setActiveIndex] = React__default.useState();
-  const toggleCurrent = collection => {
+  const lastLengthRef = React__default.useRef(0);
+  const setActiveOption = (index, collection, option) => {
     var _collection$querySele;
     (_collection$querySele = collection.querySelector(`[aria-current]`)) === null || _collection$querySele === void 0 ? void 0 : _collection$querySele.removeAttribute('aria-current');
-    if (activeIndex !== undefined) {
-      var _getOptions;
-      const option = (_getOptions = getOptions(collection, selector)) === null || _getOptions === void 0 ? void 0 : _getOptions.item(activeIndex);
-      if (option) {
-        option.setAttribute('aria-current', 'true');
-        option.scrollIntoView({
-          block: 'nearest'
-        });
-      }
-    }
+    option.setAttribute('aria-current', 'true');
+    option.scrollIntoView({
+      block: 'nearest'
+    });
+    setActiveIndex(index);
   };
   const setActiveIndexByElement = React__default.useCallback(option => {
     if (internalRef.current) {
-      if (option.matches(selector)) {
-        const options = getOptions(internalRef.current, selector);
+      if (option.matches(querySelector)) {
+        const options = getOptionsFromCollection(internalRef.current, querySelector);
         const nextActiveIndex = Array.from(options).indexOf(option);
         if (nextActiveIndex > -1) {
-          setActiveIndex(nextActiveIndex);
+          setActiveOption(nextActiveIndex, internalRef.current, option);
         }
       }
     }
-  }, [internalRef.current]);
+  }, [internalRef.current, querySelector]);
   React__default.useEffect(() => {
     if (internalRef.current) {
       internalRef.current.setActiveIndex = setActiveIndexByElement;
     }
   }, [internalRef.current]);
-  // set/remove appropriate aria-current attributes
-  // we do this in a hook because we expose setActiveIndex on the ref
-  React__default.useEffect(() => {
-    if (internalRef.current) {
-      toggleCurrent(internalRef.current);
-    }
-  }, [activeIndex]);
-  // set the initial active index on mount
   React__default.useEffect(() => {
     if (internalRef.current) {
-      const selected = internalRef.current.querySelectorAll(`[aria-selected]`);
-      if (selected.length === 1) {
-        const options = getOptions(internalRef.current, selector);
-        if (options) {
-          const selectedIndex = Array.from(options).indexOf(selected.item(0));
-          if (selectedIndex > -1) {
-            setActiveIndex(selectedIndex);
+      const options = getOptionsFromCollection(internalRef.current, querySelector);
+      if (options.length && options.length !== lastLengthRef.current) {
+        const selected = internalRef.current.querySelectorAll(`[aria-selected]`);
+        if (selected.length === 1) {
+          if (options) {
+            const firstSelected = selected.item(0);
+            const selectedIndex = Array.from(options).indexOf(firstSelected);
+            if (selectedIndex > -1) {
+              setActiveOption(selectedIndex, internalRef.current, firstSelected);
+            }
           }
+        } else {
+          // multiple selected or none selected should go to 0
+          setActiveOption(0, internalRef.current, options.item(0));
         }
-      } else {
-        // multiple selected or none selected should go to 0
-        setActiveIndex(0);
-      }
-    }
-  }, []);
-  // if children length changes, make sure we still have a valid active index (e.g. searching/filtering or adding a new item)
-  React__default.useEffect(() => {
-    if (internalRef.current) {
-      // make sure index and dom are synced
-      toggleCurrent(internalRef.current);
-      if (activeIndex !== undefined && activeIndex > React__default.Children.count(props.children)) {
-        setActiveIndex(0);
       }
+      lastLengthRef.current = options.length;
     }
   }, [props.children]);
   const handleClick = event => {
-    setActiveIndexByElement(event.target);
+    const option = event.target;
+    if (option.matches(querySelector)) {
+      const options = getOptionsFromCollection(event.currentTarget, querySelector);
+      const nextActiveIndex = Array.from(options).indexOf(option);
+      if (nextActiveIndex > -1) {
+        setActiveOption(nextActiveIndex, event.currentTarget, option);
+      }
+    }
   };
   const handleKeyDown = event => {
     // this stops the event dispatched to the option rebounding back and starting an infinite loop
     if (event.target !== event.currentTarget) {
       return;
     }
-    const options = getOptions(event.currentTarget, selector);
+    const options = getOptionsFromCollection(event.currentTarget, querySelector);
     if (options) {
       if (isAriaDirectionKey(event)) {
         const nextActiveIndex = getNextEnabledItem$1(event, options, activeIndex);
         if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {
           event.preventDefault();
-          setActiveIndex(nextActiveIndex);
+          setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));
         }
       } else if (activeIndex !== undefined) {
         // forward events onto the underlying option - this lets consumers place onKeyDown handlers on their own components
@@ -7391,7 +7372,7 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     ref: internalRef,
-    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0
+    tabIndex: tabIndex
   }));
 });
 const getNextIndexFromKeycode = (event, length, activeIndex) => {
@@ -7471,7 +7452,7 @@ const Root$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, r
     id: id,
     ref: ref,
     role: "listbox",
-    selector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR
+    querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR
   }), children)));
 });
 const createListboxValueSetter = (multiple, setValue) => nextValue => {
@@ -9486,8 +9467,7 @@ const useTable = (props, ref) => {
     columns,
     data,
     initialState: {
-      // eslint-disable-next-line
-      // @ts-ignore: not sure how to type this correctly right now
+      // @ts-expect-error: not sure how to type this correctly right now
       sortBy: getInternalSortRules(sortRules) || defaultSortRules,
       pageSize: !disablePagination ? pageSize : undefined,
       pageIndex: !disablePagination ? pageIndex : undefined
@@ -9691,7 +9671,7 @@ const Column = ({
 
 const DefaultEmptyState = () => null;
 const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props, ref) {
-  const tableRef = useProxiedRef(ref);
+  const tableRef = useMergedRef(ref);
   const {
     autoFocus,
     children,
@@ -9735,7 +9715,7 @@ const Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref)
     emptyStateRenderer = DefaultEmptyState,
     ...otherProps
   } = props;
-  const tableRef = useProxiedRef(ref);
+  const tableRef = useMergedRef(ref);
   const {
     rowProps,
     tableProps,
@@ -9837,7 +9817,7 @@ const getAverageRowHeight = (rowHeights = {}) => {
   return estimatedHeight / keys.length;
 };
 const WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTable(props, ref) {
-  const tableRef = useProxiedRef(ref);
+  const tableRef = useMergedRef(ref);
   const {
     emptyStateRenderer = DefaultEmptyState,
     length,