@eightshift/ui-components 1.7.1 → 1.8.0

package/dist/{index-BTCzc3zb.js → index-D0mHceYg.js}

@@ -7363,6 +7363,7 @@ function requireReactDom_development() {
         }
         switch (typeof value) {
           case "function":
+          // $FlowIssue symbol is perfectly valid here
           case "symbol":
             return true;
           case "boolean": {
@@ -8377,6 +8378,7 @@ function requireReactDom_development() {
             return "SuspenseList";
           case TracingMarkerComponent:
             return "TracingMarker";
+          // The display name for this tags come from the user-provided type:
           case ClassComponent:
           case FunctionComponent:
           case IncompleteClassComponent:
@@ -9374,6 +9376,10 @@ function requireReactDom_development() {
           return typeof props.is === "string";
         }
         switch (tagName) {
+          // These are reserved SVG and MathML elements.
+          // We don't mind this list too much because we expect it to never grow.
+          // The alternative is to track the namespace in a few places which is convoluted.
+          // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
           case "annotation-xml":
           case "color-profile":
           case "font-face":
@@ -12201,6 +12207,7 @@ function requireReactDom_development() {
       }
       function getEventPriority(domEventName) {
         switch (domEventName) {
+          // Used by SimpleEventPlugin:
           case "cancel":
           case "click":
           case "close":
@@ -12236,14 +12243,20 @@ function requireReactDom_development() {
           case "touchend":
           case "touchstart":
           case "volumechange":
+          // Used by polyfills:
+          // eslint-disable-next-line no-fallthrough
           case "change":
           case "selectionchange":
           case "textInput":
           case "compositionstart":
           case "compositionend":
           case "compositionupdate":
+          // Only enableCreateEventHandleAPI:
+          // eslint-disable-next-line no-fallthrough
           case "beforeblur":
           case "afterblur":
+          // Not used by React but could be by user code:
+          // eslint-disable-next-line no-fallthrough
           case "beforeinput":
           case "blur":
           case "fullscreenchange":
@@ -12268,6 +12281,8 @@ function requireReactDom_development() {
           case "toggle":
           case "touchmove":
           case "wheel":
+          // Not used by React but could be by user code:
+          // eslint-disable-next-line no-fallthrough
           case "mouseenter":
           case "mouseleave":
           case "pointerenter":
@@ -13466,6 +13481,7 @@ function requireReactDom_development() {
       function extractEvents$3(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags, targetContainer) {
         var targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
         switch (domEventName) {
+          // Track the input node that has focus.
           case "focusin":
             if (isTextInputElement(targetNode) || targetNode.contentEditable === "true") {
               activeElement$1 = targetNode;
@@ -13478,6 +13494,8 @@ function requireReactDom_development() {
             activeElementInst$1 = null;
             lastSelection = null;
             break;
+          // Don't fire the event while the user is dragging. This matches the
+          // semantics of the native select event.
           case "mousedown":
             mouseDown = true;
             break;
@@ -13487,10 +13505,20 @@ function requireReactDom_development() {
             mouseDown = false;
             constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);
             break;
+          // Chrome and IE fire non-standard event when selection is changed (and
+          // sometimes when it hasn't). IE's event fires out of order with respect
+          // to key and input events on deletion, so we discard it.
+          //
+          // Firefox doesn't support selectionchange, so check selection status
+          // after each key entry. The selection changes after keydown and before
+          // keyup, but we check on keydown as well in the case of holding down a
+          // key, when multiple keydown events are fired but only one keyup is.
+          // This is also our approach for IE handling, for the reason above.
           case "selectionchange":
             if (skipSelectionChangeEvent) {
               break;
             }
+          // falls through
           case "keydown":
           case "keyup":
             constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);
@@ -13573,6 +13601,7 @@ function requireReactDom_development() {
             if (getEventCharCode(nativeEvent) === 0) {
               return;
             }
+          /* falls through */
           case "keydown":
           case "keyup":
             SyntheticEventCtor = SyntheticKeyboardEvent;
@@ -13593,11 +13622,14 @@ function requireReactDom_development() {
             if (nativeEvent.button === 2) {
               return;
             }
+          /* falls through */
           case "auxclick":
           case "dblclick":
           case "mousedown":
           case "mousemove":
           case "mouseup":
+          // TODO: Disabled elements should not respond to mouse events
+          /* falls through */
           case "mouseout":
           case "mouseover":
           case "contextmenu":
@@ -14510,6 +14542,8 @@ function requireReactDom_development() {
           for (var _i = 0; _i < attributes.length; _i++) {
             var name = attributes[_i].name.toLowerCase();
             switch (name) {
+              // Controlled attributes are not validated
+              // TODO: Only ignore them on controlled tags.
               case "value":
                 break;
               case "checked":
@@ -14777,24 +14811,37 @@ function requireReactDom_development() {
         };
         var isTagValidWithParent = function(tag, parentTag) {
           switch (parentTag) {
+            // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
             case "select":
               return tag === "option" || tag === "optgroup" || tag === "#text";
             case "optgroup":
               return tag === "option" || tag === "#text";
+            // Strictly speaking, seeing an <option> doesn't mean we're in a <select>
+            // but
             case "option":
               return tag === "#text";
+            // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
+            // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
+            // No special behavior since these rules fall back to "in body" mode for
+            // all except special table nodes which cause bad parsing behavior anyway.
+            // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr
             case "tr":
               return tag === "th" || tag === "td" || tag === "style" || tag === "script" || tag === "template";
+            // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody
             case "tbody":
             case "thead":
             case "tfoot":
               return tag === "tr" || tag === "style" || tag === "script" || tag === "template";
+            // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup
             case "colgroup":
               return tag === "col" || tag === "template";
+            // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable
             case "table":
               return tag === "caption" || tag === "colgroup" || tag === "tbody" || tag === "tfoot" || tag === "thead" || tag === "style" || tag === "script" || tag === "template";
+            // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead
             case "head":
               return tag === "base" || tag === "basefont" || tag === "bgsound" || tag === "link" || tag === "meta" || tag === "title" || tag === "noscript" || tag === "noframes" || tag === "style" || tag === "script" || tag === "template";
+            // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
             case "html":
               return tag === "head" || tag === "body" || tag === "frameset";
             case "frameset":
@@ -17753,6 +17800,7 @@ function requireReactDom_development() {
           case CaptureUpdate: {
             workInProgress2.flags = workInProgress2.flags & ~ShouldCapture | DidCapture;
           }
+          // Intentional fallthrough
           case UpdateState: {
             var _payload = update.payload;
             var partialState;
@@ -24066,6 +24114,7 @@ function requireReactDom_development() {
             insertOrAppendPlacementNodeIntoContainer(finishedWork, _before, _parent);
             break;
           }
+          // eslint-disable-next-line-no-fallthrough
           default:
             throw new Error("Invalid host parent fiber. This error is likely caused by a bug in React. Please file an issue.");
         }
@@ -24165,6 +24214,7 @@ function requireReactDom_development() {
               safelyDetachRef(deletedFiber, nearestMountedAncestor);
             }
           }
+          // eslint-disable-next-line-no-fallthrough
           case HostText: {
             {
               var prevHostParent = hostParent;
@@ -25420,6 +25470,9 @@ function requireReactDom_development() {
           case RootFatalErrored: {
             throw new Error("Root did not complete. This is a bug in React.");
           }
+          // Flow knows about invariant, so it complains if I add a break
+          // statement, but eslint doesn't know about invariant, so it complains
+          // if I do. eslint-disable-next-line no-fallthrough
           case RootErrored: {
             commitRoot(root2, workInProgressRootRecoverableErrors, workInProgressTransitions);
             break;
@@ -27064,10 +27117,15 @@ function requireReactDom_development() {
             case REACT_OFFSCREEN_TYPE:
               return createFiberFromOffscreen(pendingProps, mode, lanes, key);
             case REACT_LEGACY_HIDDEN_TYPE:
+            // eslint-disable-next-line no-fallthrough
             case REACT_SCOPE_TYPE:
+            // eslint-disable-next-line no-fallthrough
             case REACT_CACHE_TYPE:
+            // eslint-disable-next-line no-fallthrough
             case REACT_TRACING_MARKER_TYPE:
+            // eslint-disable-next-line no-fallthrough
             case REACT_DEBUG_TRACING_MODE_TYPE:
+            // eslint-disable-next-line no-fallthrough
             default: {
               if (typeof type === "object" && type !== null) {
                 switch (type.$$typeof) {
@@ -28234,26 +28292,32 @@ function requireReactDom_development() {
   }
   return reactDom_development;
 }
-function checkDCE() {
-  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") {
-    return;
-  }
-  if (process.env.NODE_ENV !== "production") {
-    throw new Error("^_^");
+var hasRequiredReactDom;
+function requireReactDom() {
+  if (hasRequiredReactDom) return reactDom.exports;
+  hasRequiredReactDom = 1;
+  function checkDCE() {
+    if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") {
+      return;
+    }
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error("^_^");
+    }
+    try {
+      __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+    } catch (err) {
+      console.error(err);
+    }
   }
-  try {
-    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
-  } catch (err) {
-    console.error(err);
+  if (process.env.NODE_ENV === "production") {
+    checkDCE();
+    reactDom.exports = requireReactDom_production_min();
+  } else {
+    reactDom.exports = requireReactDom_development();
   }
+  return reactDom.exports;
 }
-if (process.env.NODE_ENV === "production") {
-  checkDCE();
-  reactDom.exports = requireReactDom_production_min();
-} else {
-  reactDom.exports = requireReactDom_development();
-}
-var reactDomExports = reactDom.exports;
+var reactDomExports = requireReactDom();
 const $dbSRa$reactdom = /* @__PURE__ */ getDefaultExportFromCjs(reactDomExports);
 export {
   $dbSRa$reactdom as $,

package/dist/index.js

@@ -38,6 +38,8 @@ import { ResponsiveLegacy } from "./components/responsive/responsive-legacy.js";
 import { ResponsivePreview } from "./components/responsive-preview/responsive-preview.js";
 import { AsyncMultiSelect } from "./components/select/async-multi-select.js";
 import { AsyncSelect } from "./components/select/async-single-select.js";
+import { __ExperimentalAsyncSelect } from "./components/select/v2/async-select.js";
+import { __ExperimentalSelect } from "./components/select/v2/single-select.js";
 import { Modal } from "./components/modal/modal.js";
 import { MultiSelect } from "./components/select/multi-select.js";
 import { RSClearIndicator, RSDropdownIndicator, RSMultiValue, RSMultiValueContainer, RSMultiValueLabel, RSMultiValueRemove, RSOption, RSSingleValue } from "./components/select/react-select-component-wrappers.js";
@@ -51,7 +53,7 @@ import { Tab, TabList, TabPanel, Tabs } from "./components/tabs/tabs.js";
 import { Toggle } from "./components/toggle/toggle.js";
 import { Switch } from "./components/toggle/switch.js";
 import { ToggleButton } from "./components/toggle-button/toggle-button.js";
-import { D, T } from "./tooltip-eKaARDoV.js";
+import { DecorativeTooltip, Tooltip } from "./components/tooltip/tooltip.js";
 import { VStack } from "./components/layout/vstack.js";
 import { getColumnConfigOutputText } from "./components/slider/utils.js";
 export {
@@ -69,7 +71,7 @@ export {
   ColumnConfigSliderOutput,
   ComponentToggle,
   ContainerPanel,
-  D as DecorativeTooltip,
+  DecorativeTooltip,
   Draggable,
   DraggableContext,
   DraggableHandle,
@@ -129,8 +131,10 @@ export {
   Tabs,
   Toggle,
   ToggleButton,
-  T as Tooltip,
+  Tooltip,
   TriggeredPopover,
   VStack,
+  __ExperimentalAsyncSelect,
+  __ExperimentalSelect,
   getColumnConfigOutputText
 };

package/dist/{multi-select-components-DTvEidE3.js → multi-select-components-BGQBvx-z.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useMemo, useLayoutEffect, useEffect, useRef, useCallback, useState, createContext, memo, useReducer, useContext } from "react";
-import { r as reactDomExports } from "./index-BTCzc3zb.js";
+import { r as reactDomExports } from "./index-D0mHceYg.js";
 import { c as clsx } from "./lite-DVmmD_-j.js";
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -296,6 +296,8 @@ function LiveRegion(_ref) {
   } = _ref;
   const visuallyHidden = {
     position: "fixed",
+    top: 0,
+    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -1331,6 +1333,9 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events2.end.name, this.handleEnd);
+    if (events2.cancel) {
+      this.listeners.add(events2.cancel.name, this.handleCancel);
+    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -1444,6 +1449,9 @@ class AbstractPointerSensor {
   }
 }
 const events = {
+  cancel: {
+    name: "pointercancel"
+  },
   move: {
     name: "pointermove"
   },
@@ -1514,6 +1522,9 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
+  cancel: {
+    name: "touchcancel"
+  },
   move: {
     name: "touchmove"
   },
@@ -1722,11 +1733,11 @@ function useScrollIntent(_ref2) {
   }, [disabled, delta, previousDelta]);
 }
 function useCachedNode(draggableNodes, id) {
-  const draggableNode = id !== null ? draggableNodes.get(id) : void 0;
+  const draggableNode = id != null ? draggableNodes.get(id) : void 0;
   const node = draggableNode ? draggableNode.node.current : null;
   return useLazyMemo((cachedNode) => {
     var _ref;
-    if (id === null) {
+    if (id == null) {
       return null;
     }
     return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
@@ -1926,7 +1937,23 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, measureRect] = useReducer(reducer2, null);
+  const [rect, setRect] = useState(null);
+  function measureRect() {
+    setRect((currentRect) => {
+      if (!element) {
+        return null;
+      }
+      if (element.isConnected === false) {
+        var _ref;
+        return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+      }
+      const newRect = measure(element);
+      if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+        return currentRect;
+      }
+      return newRect;
+    });
+  }
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -1961,20 +1988,6 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
-  function reducer2(currentRect) {
-    if (!element) {
-      return null;
-    }
-    if (element.isConnected === false) {
-      var _ref;
-      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
-    }
-    const newRect = measure(element);
-    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
-      return currentRect;
-    }
-    return newRect;
-  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -2123,28 +2136,24 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, measureRects] = useReducer(reducer2, defaultValue$2);
+  const [rects, setRects] = useState(defaultValue$2);
+  function measureRects() {
+    setRects(() => {
+      if (!elements.length) {
+        return defaultValue$2;
+      }
+      return elements.map((element) => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+    });
+  }
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  if (elements.length > 0 && rects === defaultValue$2) {
-    measureRects();
-  }
   useIsomorphicLayoutEffect(() => {
-    if (elements.length) {
-      elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
-    } else {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      measureRects();
-    }
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    measureRects();
+    elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
   }, [elements]);
   return rects;
-  function reducer2() {
-    if (!elements.length) {
-      return defaultValue$2;
-    }
-    return elements.map((element) => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
-  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -2311,7 +2320,7 @@ function reducer(state, action) {
         }
       };
     case Action.DragMove:
-      if (!state.draggable.active) {
+      if (state.draggable.active == null) {
         return state;
       }
       return {
@@ -2573,7 +2582,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId ? draggableNodes.get(activeId) : null;
+  const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = useRef({
     initial: null,
     translated: null
@@ -2608,7 +2617,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId ? draggableNodes.get(activeId) : null,
+    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -2676,6 +2685,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const [over, setOver] = useState(null);
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
+  const activeSensorRef = useRef(null);
   const instantiateSensor = useCallback(
     (event, _ref2) => {
       let {
@@ -2711,6 +2721,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
             onDragStart
           } = latestProps.current;
           const event2 = {
+            activatorEvent: activatorEvent2,
             active: {
               id: id2,
               data: draggableNode.data,
@@ -2729,6 +2740,8 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
               type: "onDragStart",
               event: event2
             });
+            setActiveSensor(activeSensorRef.current);
+            setActivatorEvent(activatorEvent2);
           });
         },
         onMove(coordinates) {
@@ -2740,10 +2753,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
         onEnd: createHandler(Action.DragEnd),
         onCancel: createHandler(Action.DragCancel)
       });
-      reactDomExports.unstable_batchedUpdates(() => {
-        setActiveSensor(sensorInstance);
-        setActivatorEvent(event.nativeEvent);
-      });
+      activeSensorRef.current = sensorInstance;
       function createHandler(type) {
         return async function handler() {
           const {
@@ -2780,6 +2790,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
             setOver(null);
             setActiveSensor(null);
             setActivatorEvent(null);
+            activeSensorRef.current = null;
             const eventName = type === Action.DragEnd ? "onDragEnd" : "onDragCancel";
             if (event2) {
               const handler2 = latestProps.current[eventName];
@@ -3005,7 +3016,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
 });
 const NullContext = /* @__PURE__ */ createContext(null);
 const defaultRole = "button";
-const ID_PREFIX$1 = "Droppable";
+const ID_PREFIX$1 = "Draggable";
 function useDraggable(_ref) {
   let {
     id,
@@ -3154,7 +3165,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect(
+  useEffect(
     () => {
       dispatch({
         type: Action.RegisterDroppable,
@@ -3536,7 +3547,7 @@ function useSortable(_ref) {
     if (activeId === previous.current.activeId) {
       return;
     }
-    if (activeId && !previous.current.activeId) {
+    if (activeId != null && previous.current.activeId == null) {
       previous.current.activeId = activeId;
       return;
     }